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

UI components for WordPress.

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

/**
 * External dependencies
 */
import { colord, extend } from 'colord';
import namesPlugin from 'colord/plugins/names';
/**
 * WordPress dependencies
 */

import { useCallback, useState, useMemo } from '@wordpress/element';
import { useDebounce } from '@wordpress/compose';
import { __ } from '@wordpress/i18n';
/**
 * Internal dependencies
 */

import { useContextSystem, contextConnect } from '../ui/context';
import { ColorfulWrapper, SelectControl, AuxiliaryColorArtefactWrapper, AuxiliaryColorArtefactHStackHeader, ColorInputWrapper } from './styles';
import { ColorCopyButton } from './color-copy-button';
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 UnconnectedColorPicker = (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 [colorType, setColorType] = useState(copyFormat || 'hex');
  return createElement(ColorfulWrapper, _extends({
    ref: forwardedRef
  }, divProps), createElement(Picker, {
    onChange: handleChange,
    color: safeColordColor,
    enableAlpha: enableAlpha
  }), createElement(AuxiliaryColorArtefactWrapper, null, createElement(AuxiliaryColorArtefactHStackHeader, {
    justify: "space-between"
  }, createElement(SelectControl, {
    __nextHasNoMarginBottom: true,
    options: options,
    value: colorType,
    onChange: nextColorType => setColorType(nextColorType),
    label: __('Color format'),
    hideLabelFromVision: true
  }), createElement(ColorCopyButton, {
    color: safeColordColor,
    colorType: copyFormat || colorType
  })), createElement(ColorInputWrapper, {
    direction: "column",
    gap: 2
  }, createElement(ColorInput, {
    colorType: colorType,
    color: safeColordColor,
    onChange: handleChange,
    enableAlpha: enableAlpha
  }))));
};

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