@wordpress/components
Version:
UI components for WordPress.
98 lines (94 loc) • 3.05 kB
JavaScript
/**
* 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 '../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';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
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 /*#__PURE__*/_jsxs(ColorfulWrapper, {
ref: forwardedRef,
...divProps,
children: [/*#__PURE__*/_jsx(Picker, {
onChange: handleChange,
color: safeColordColor,
enableAlpha: enableAlpha
}), /*#__PURE__*/_jsxs(AuxiliaryColorArtefactWrapper, {
children: [/*#__PURE__*/_jsxs(AuxiliaryColorArtefactHStackHeader, {
justify: "space-between",
children: [/*#__PURE__*/_jsx(SelectControl, {
__nextHasNoMarginBottom: true,
size: "compact",
options: options,
value: colorType,
onChange: nextColorType => setColorType(nextColorType),
label: __('Color format'),
hideLabelFromVision: true,
variant: "minimal"
}), /*#__PURE__*/_jsx(ColorCopyButton, {
color: safeColordColor,
colorType: copyFormat || colorType
})]
}), /*#__PURE__*/_jsx(ColorInputWrapper, {
direction: "column",
gap: 2,
children: /*#__PURE__*/_jsx(ColorInput, {
colorType: colorType,
color: safeColordColor,
onChange: handleChange,
enableAlpha: enableAlpha
})
})]
})]
});
};
export const ColorPicker = contextConnect(UnconnectedColorPicker, 'ColorPicker');
export default ColorPicker;
//# sourceMappingURL=component.js.map