orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
395 lines • 9.39 kB
JavaScript
import React, { useState, useMemo } from "react";
import PropTypes from "prop-types";
import Box from "../Box";
import ColorPickerLib from "react-best-gradient-color-picker";
import { FloatingPortal } from "@floating-ui/react";
import { getFloatingUiRootElement } from "../../utils/floatingUiHelpers";
import useActionMenu from "../ActionsMenu/useActionMenu";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const ColorPicker = _ref => {
let {
value,
onChange,
children,
position = "bottom-end",
zIndex = 20,
bg = "#202020",
p = "s",
borderRadius = "2",
// Set defaults for commonly used library props
width = 250,
height = 250,
hidePresets = true,
hideInputs = false,
hideControls = false,
hideOpacity = true,
hideEyeDrop = true,
hideAdvancedSliders = true,
hideColorGuide = true,
hideInputType = true,
hideColorTypeBtns = false,
hideGradientType = false,
hideGradientAngle = false,
hideGradientStop = false,
hideGradientControls = false,
// Spread all other props to the underlying library
...colorPickerProps
} = _ref;
const [isOpen, setIsOpen] = useState(false);
const toggleColorPicker = () => setIsOpen(!isOpen);
const baseStyles = useMemo(() => ({
zIndex,
bg,
p,
borderRadius
}), [zIndex, bg, p, borderRadius]);
const actionMenu = useActionMenu({
placement: position,
open: isOpen,
onOpenChange: setIsOpen
});
return /*#__PURE__*/_jsxs(Box, {
ref: actionMenu.refs.setReference,
...actionMenu.getReferenceProps(),
children: [typeof children === "function" ? children({
isOpen,
toggleColorPicker
}) : children, isOpen && /*#__PURE__*/_jsx(FloatingPortal, {
root: getFloatingUiRootElement(actionMenu.refs.reference),
preserveTabOrder: true,
children: /*#__PURE__*/_jsx(Box, {
ref: actionMenu.refs.setFloating,
style: actionMenu.floatingStyles,
...baseStyles,
...actionMenu.getFloatingProps(),
children: /*#__PURE__*/_jsx(ColorPickerLib, {
value: value,
onChange: onChange,
width: width,
height: height,
hidePresets: hidePresets,
hideInputs: hideInputs,
hideControls: hideControls,
hideOpacity: hideOpacity,
hideEyeDrop: hideEyeDrop,
hideAdvancedSliders: hideAdvancedSliders,
hideColorGuide: hideColorGuide,
hideInputType: hideInputType,
hideColorTypeBtns: hideColorTypeBtns,
hideGradientType: hideGradientType,
hideGradientAngle: hideGradientAngle,
hideGradientStop: hideGradientStop,
hideGradientControls: hideGradientControls,
...colorPickerProps
})
})
})]
});
};
ColorPicker.propTypes = {
value: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired,
children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
position: PropTypes.oneOf(["top-start", "top-end", "bottom-start", "bottom-end", "left-start", "left-end", "right-start", "right-end"]),
zIndex: PropTypes.number,
bg: PropTypes.string,
p: PropTypes.string,
borderRadius: PropTypes.string,
// Default props for the underlying library
width: PropTypes.number,
height: PropTypes.number,
hidePresets: PropTypes.bool,
hideInputs: PropTypes.bool,
hideControls: PropTypes.bool,
hideOpacity: PropTypes.bool,
hideEyeDrop: PropTypes.bool,
hideAdvancedSliders: PropTypes.bool,
hideColorGuide: PropTypes.bool,
hideInputType: PropTypes.bool,
hideColorTypeBtns: PropTypes.bool,
hideGradientType: PropTypes.bool,
hideGradientAngle: PropTypes.bool,
hideGradientStop: PropTypes.bool,
hideGradientControls: PropTypes.bool
// Note: We don't need to define PropTypes for the spread props
// as they'll be passed directly to the underlying library
};
ColorPicker.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "ColorPicker",
"props": {
"position": {
"defaultValue": {
"value": "\"bottom-end\"",
"computed": false
},
"description": "",
"type": {
"name": "enum",
"value": [{
"value": "\"top-start\"",
"computed": false
}, {
"value": "\"top-end\"",
"computed": false
}, {
"value": "\"bottom-start\"",
"computed": false
}, {
"value": "\"bottom-end\"",
"computed": false
}, {
"value": "\"left-start\"",
"computed": false
}, {
"value": "\"left-end\"",
"computed": false
}, {
"value": "\"right-start\"",
"computed": false
}, {
"value": "\"right-end\"",
"computed": false
}]
},
"required": false
},
"zIndex": {
"defaultValue": {
"value": "20",
"computed": false
},
"description": "",
"type": {
"name": "number"
},
"required": false
},
"bg": {
"defaultValue": {
"value": "\"#202020\"",
"computed": false
},
"description": "",
"type": {
"name": "string"
},
"required": false
},
"p": {
"defaultValue": {
"value": "\"s\"",
"computed": false
},
"description": "",
"type": {
"name": "string"
},
"required": false
},
"borderRadius": {
"defaultValue": {
"value": "\"2\"",
"computed": false
},
"description": "",
"type": {
"name": "string"
},
"required": false
},
"width": {
"defaultValue": {
"value": "250",
"computed": false
},
"description": "",
"type": {
"name": "number"
},
"required": false
},
"height": {
"defaultValue": {
"value": "250",
"computed": false
},
"description": "",
"type": {
"name": "number"
},
"required": false
},
"hidePresets": {
"defaultValue": {
"value": "true",
"computed": false
},
"description": "",
"type": {
"name": "bool"
},
"required": false
},
"hideInputs": {
"defaultValue": {
"value": "false",
"computed": false
},
"description": "",
"type": {
"name": "bool"
},
"required": false
},
"hideControls": {
"defaultValue": {
"value": "false",
"computed": false
},
"description": "",
"type": {
"name": "bool"
},
"required": false
},
"hideOpacity": {
"defaultValue": {
"value": "true",
"computed": false
},
"description": "",
"type": {
"name": "bool"
},
"required": false
},
"hideEyeDrop": {
"defaultValue": {
"value": "true",
"computed": false
},
"description": "",
"type": {
"name": "bool"
},
"required": false
},
"hideAdvancedSliders": {
"defaultValue": {
"value": "true",
"computed": false
},
"description": "",
"type": {
"name": "bool"
},
"required": false
},
"hideColorGuide": {
"defaultValue": {
"value": "true",
"computed": false
},
"description": "",
"type": {
"name": "bool"
},
"required": false
},
"hideInputType": {
"defaultValue": {
"value": "true",
"computed": false
},
"description": "",
"type": {
"name": "bool"
},
"required": false
},
"hideColorTypeBtns": {
"defaultValue": {
"value": "false",
"computed": false
},
"description": "",
"type": {
"name": "bool"
},
"required": false
},
"hideGradientType": {
"defaultValue": {
"value": "false",
"computed": false
},
"description": "",
"type": {
"name": "bool"
},
"required": false
},
"hideGradientAngle": {
"defaultValue": {
"value": "false",
"computed": false
},
"description": "",
"type": {
"name": "bool"
},
"required": false
},
"hideGradientStop": {
"defaultValue": {
"value": "false",
"computed": false
},
"description": "",
"type": {
"name": "bool"
},
"required": false
},
"hideGradientControls": {
"defaultValue": {
"value": "false",
"computed": false
},
"description": "",
"type": {
"name": "bool"
},
"required": false
},
"value": {
"description": "",
"type": {
"name": "string"
},
"required": true
},
"onChange": {
"description": "",
"type": {
"name": "func"
},
"required": true
},
"children": {
"description": "",
"type": {
"name": "union",
"value": [{
"name": "node"
}, {
"name": "func"
}]
},
"required": true
}
}
};
export default ColorPicker;