@gechiui/components/build/color-picker/component.js

UI components for GeChiUI.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _element = require("@gechiui/element");

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _react = require("react");

var _colord = require("colord");

var _names = _interopRequireDefault(require("colord/plugins/names"));

var _icons = require("@gechiui/icons");

var _compose = require("@gechiui/compose");

var _i18n = require("@gechiui/i18n");

var _context = require("../ui/context");

var _hStack = require("../h-stack");

var _spacer = require("../spacer");

var _styles = require("./styles");

var _colorDisplay = require("./color-display");

var _colorInput = require("./color-input");

var _picker = require("./picker");

var _hooks = require("../utils/hooks");

/**
 * External dependencies
 */
// eslint-disable-next-line no-restricted-imports

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
(0, _colord.extend)([_names.default]);
const options = [{
  label: 'RGB',
  value: 'rgb'
}, {
  label: 'HSL',
  value: 'hsl'
}, {
  label: 'Hex',
  value: 'hex'
}];

const ColorPicker = (props, forwardedRef) => {
  const {
    enableAlpha = false,
    color: colorProp,
    onChange,
    defaultValue = '#fff',
    copyFormat,
    ...divProps
  } = (0, _context.useContextSystem)(props, 'ColorPicker'); // Use a safe default value for the color and remove the possibility of `undefined`.

  const [color, setColor] = (0, _hooks.useControlledValue)({
    onChange,
    value: colorProp,
    defaultValue
  });
  const safeColordColor = (0, _element.useMemo)(() => {
    return (0, _colord.colord)(color);
  }, [color]);
  const debouncedSetColor = (0, _compose.useDebounce)(setColor);
  const handleChange = (0, _react.useCallback)(nextValue => {
    debouncedSetColor(nextValue.toHex());
  }, [debouncedSetColor]);
  const [showInputs, setShowInputs] = (0, _element.useState)(false);
  const [colorType, setColorType] = (0, _element.useState)(copyFormat || 'hex');
  return (0, _element.createElement)(_styles.ColorfulWrapper, (0, _extends2.default)({
    ref: forwardedRef
  }, divProps), (0, _element.createElement)(_picker.Picker, {
    onChange: handleChange,
    color: safeColordColor,
    enableAlpha: enableAlpha
  }), (0, _element.createElement)(_styles.AuxiliaryColorArtefactWrapper, null, (0, _element.createElement)(_hStack.HStack, {
    justify: "space-between"
  }, showInputs ? (0, _element.createElement)(_styles.SelectControl, {
    options: options,
    value: colorType,
    onChange: nextColorType => setColorType(nextColorType),
    label: (0, _i18n.__)('颜色格式'),
    hideLabelFromVision: true
  }) : (0, _element.createElement)(_colorDisplay.ColorDisplay, {
    color: safeColordColor,
    colorType: copyFormat || colorType,
    enableAlpha: enableAlpha
  }), (0, _element.createElement)(_styles.DetailsControlButton, {
    isSmall: true,
    onClick: () => setShowInputs(!showInputs),
    icon: _icons.settings,
    isPressed: showInputs,
    label: showInputs ? (0, _i18n.__)('隐藏详细输入') : (0, _i18n.__)('显示详细输入')
  })), (0, _element.createElement)(_spacer.Spacer, {
    margin: 4
  }), showInputs && (0, _element.createElement)(_colorInput.ColorInput, {
    colorType: colorType,
    color: safeColordColor,
    onChange: handleChange,
    enableAlpha: enableAlpha
  })));
};

const ConnectedColorPicker = (0, _context.contextConnect)(ColorPicker, 'ColorPicker');
var _default = ConnectedColorPicker;
exports.default = _default;
//# sourceMappingURL=component.js.map