1
Fork 0
mirror of https://github.com/Steffo99/bluelib.git synced 2024-12-23 12:04:22 +00:00
bluelib/src/components/Color/index.js

52 lines
1.4 KiB
JavaScript
Raw Normal View History

2021-03-23 15:32:25 +00:00
import React, {Fragment} from "react"
2021-03-23 17:15:30 +00:00
import useBluelibClassNames from "../../hooks/useBluelibClassNames"
import PropTypes from "prop-types"
2021-03-23 15:32:25 +00:00
import classNames from "classnames"
import color from "color"
2021-01-25 18:37:58 +00:00
2021-03-23 15:32:25 +00:00
export default function Color({children, builtin, custom}) {
const potentialClassName = useBluelibClassNames(`color-${builtin}`)
2021-03-23 17:15:30 +00:00
if (builtin && custom) {
2021-03-23 15:32:25 +00:00
throw new Error("<Color> tags may only have one prop between `builtin` and `custom`.")
}
2021-03-23 17:15:30 +00:00
let extraClassName = ""
let extraStyle = {}
2021-03-23 15:32:25 +00:00
2021-03-23 17:15:30 +00:00
if (builtin !== undefined) {
extraClassName = potentialClassName
2021-03-23 15:32:25 +00:00
}
2021-03-23 17:15:30 +00:00
if (custom !== undefined) {
let c = color(custom)
2021-03-23 15:32:25 +00:00
extraStyle["--bluelib-color-r"] = c.red()
extraStyle["--bluelib-color-g"] = c.green()
extraStyle["--bluelib-color-b"] = c.blue()
}
children = React.Children.map(children, child => {
2021-03-23 17:15:30 +00:00
if (!child.props) {
return child
2021-03-23 15:32:25 +00:00
}
return React.cloneElement(child, {
className: classNames(child.props.className, extraClassName),
style: {...child.props.style, ...extraStyle},
})
})
2021-01-25 18:37:58 +00:00
return (
2021-03-23 15:32:25 +00:00
<Fragment>
2021-01-25 18:37:58 +00:00
{children}
2021-03-23 15:32:25 +00:00
</Fragment>
2021-01-25 18:37:58 +00:00
)
}
Color.propTypes = {
children: PropTypes.node,
2021-03-23 15:32:25 +00:00
builtin: PropTypes.oneOf(["red", "orange", "yellow", "lime", "cyan", "blue", "magenta", "gray"]),
custom: PropTypes.string,
2021-01-25 18:37:58 +00:00
}