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

UI components for GeChiUI.

import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement } from "@gechiui/element";

/**
 * External dependencies
 */
// eslint-disable-next-line no-restricted-imports
import { useCallback } from 'react';
import { colord, extend } from 'colord';
import namesPlugin from 'colord/plugins/names';
/**
 * GeChiUI dependencies
 */

import { useState, useMemo } from '@gechiui/element';
import { settings } from '@gechiui/icons';
import { useDebounce } from '@gechiui/compose';
import { __ } from '@gechiui/i18n';
/**
 * Internal dependencies
 */

import { useContextSystem, contextConnect } from '../ui/context';
import { HStack } from '../h-stack';
import { Spacer } from '../spacer';
import { ColorfulWrapper, SelectControl, AuxiliaryColorArtefactWrapper, DetailsControlButton } from './styles';
import { ColorDisplay } from './color-display';
import { ColorInput } from './color-input';
import { Picker } from './picker';
import { useControlledValue } from '../utils/hooks';
extend([namesPlugin]);
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
  } = useContextSystem(props, 'ColorPicker'); // Use a safe default value for the color and remove the possibility of `undefined`.

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

const ConnectedColorPicker = contextConnect(ColorPicker, 'ColorPicker');
export default ConnectedColorPicker;
//# sourceMappingURL=component.js.map