Skip to content

Instantly share code, notes, and snippets.

@lionelB
Forked from MoOx/Stylable.js
Created October 23, 2016 12:32
Show Gist options
  • Save lionelB/3eaeba43cd4e86d013ef8bb3249671e4 to your computer and use it in GitHub Desktop.
Save lionelB/3eaeba43cd4e86d013ef8bb3249671e4 to your computer and use it in GitHub Desktop.
Stylable component that works well with React inline styles
// @flow
import React from "react"
import Hoverable from "../../modules/Hoverable"
import Focusable from "../../modules/Focusable"
import Touchable from "../../modules/Touchable"
type PropsType = {
children?: React$Element<any>,
// hoc
hovered: boolean,
focused: boolean,
touched: boolean,
// users
component: Class<React$Component<*,*,*>>,
style?: any,
hoveredStyle?: any,
focusedStyle?: any,
touchedStyle?: any,
hoveredOrFocusedStyle?: any,
}
const Stylable = (props: PropsType): React$Element<any> => {
const {
component: Component,
hovered,
focused,
touched,
style,
hoveredStyle,
focusedStyle,
touchedStyle,
hoveredOrFocusedStyle,
children,
...othersProps,
} = props
return (
<Component
{ ...othersProps }
style={ [
style,
hovered && hoveredStyle,
focused && focusedStyle,
(hovered || focused) && hoveredOrFocusedStyle,
touched && touchedStyle,
] }
>
{ children }
</Component>
)
}
export default Hoverable(Focusable(Touchable(Stylable)))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment