orcs-design-system/es/components/ColorPicker/index.js

TeamForm's Design System, aka: ORCS

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
const _excluded = ["value", "onChange", "children", "position", "zIndex", "bg", "p", "borderRadius", "width", "height", "hidePresets", "hideInputs", "hideControls", "hideOpacity", "hideEyeDrop", "hideAdvancedSliders", "hideColorGuide", "hideInputType", "hideColorTypeBtns", "hideGradientType", "hideGradientAngle", "hideGradientStop", "hideGradientControls", "onSave", "onReset", "isSaving", "isResetting", "defaultOpen"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React, { useState, useMemo, useCallback } 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 Flex from "../Flex";
import Button from "../Button";
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,
      onSave,
      onReset,
      isSaving,
      isResetting,
      defaultOpen = false
      // Spread all other props to the underlying library
    } = _ref,
    colorPickerProps = _objectWithoutProperties(_ref, _excluded);
  const [initialColor, setInitialColor] = useState(value);
  const [isOpen, setIsOpen] = useState(defaultOpen);
  const [color, setColor] = useState(value);
  const toggleColorPicker = () => setIsOpen(!isOpen);
  const baseStyles = useMemo(() => ({
    zIndex,
    bg,
    p,
    borderRadius
  }), [zIndex, bg, p, borderRadius]);
  const actionMenu = useActionMenu({
    placement: position,
    open: isOpen,
    onOpenChange: setIsOpen
  });
  const handleColorChange = useCallback(color => {
    setColor(color);
    onChange === null || onChange === void 0 || onChange(color);
  }, [onChange]);
  const onClose = useCallback(() => {
    setIsOpen(false);
    onChange === null || onChange === void 0 || onChange(initialColor);
    setColor(initialColor);
  }, [onChange, initialColor]);
  const handleSave = useCallback(async () => {
    await (onSave === null || onSave === void 0 ? void 0 : onSave(color));
    setInitialColor(color);
    setIsOpen(false);
  }, [onSave, color]);
  const handleReset = useCallback(async () => {
    const newColor = await (onReset === null || onReset === void 0 ? void 0 : onReset(initialColor));
    if (!newColor) {
      throw new Error("onReset must return a new color");
    }
    setIsOpen(false);
    setInitialColor(newColor);
    setColor(newColor);
  }, [onReset, initialColor]);
  const isDisabled = useMemo(() => isSaving || isResetting, [isSaving, isResetting]);
  const isChanged = useMemo(() => {
    return color !== initialColor;
  }, [color, initialColor]);
  return /*#__PURE__*/_jsxs(Box, _objectSpread(_objectSpread({
    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__*/_jsxs(Box, _objectSpread(_objectSpread(_objectSpread({
        ref: actionMenu.refs.setFloating,
        style: actionMenu.floatingStyles
      }, baseStyles), actionMenu.getFloatingProps()), {}, {
        children: [/*#__PURE__*/_jsx(ColorPickerLib, _objectSpread({
          value: color,
          onChange: handleColorChange,
          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)), onSave && /*#__PURE__*/_jsxs(Flex, {
          pt: "r",
          gap: "s",
          children: [/*#__PURE__*/_jsx(Button, {
            onClick: handleSave,
            disabled: isDisabled || !isChanged,
            variant: "success",
            children: "Save"
          }), onReset && /*#__PURE__*/_jsx(Button, {
            ml: "auto",
            onClick: handleReset,
            disabled: isDisabled,
            variant: "ghost",
            children: "Reset"
          }), /*#__PURE__*/_jsx(Button, {
            ml: !onReset && "auto",
            onClick: onClose,
            disabled: isDisabled,
            children: "Close"
          })]
        })]
      }))
    })]
  }));
};
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,
  onSave: PropTypes.func,
  onReset: PropTypes.func,
  isSaving: PropTypes.bool,
  isResetting: PropTypes.bool,
  defaultOpen: 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
    },
    "defaultOpen": {
      "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
    },
    "onSave": {
      "description": "",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "onReset": {
      "description": "",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "isSaving": {
      "description": "",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "isResetting": {
      "description": "",
      "type": {
        "name": "bool"
      },
      "required": false
    }
  }
};
export default ColorPicker;