@wordpress/components/build-module/color-picker/hex-input.js

UI components for WordPress.

import { createElement } from "@wordpress/element";

/**
 * External dependencies
 */
import { colord } from 'colord';
/**
 * WordPress dependencies
 */

import { __ } from '@wordpress/i18n';
/**
 * Internal dependencies
 */

import { InputControl } from '../input-control';
import { Text } from '../text';
import { Spacer } from '../spacer';
import { space } from '../ui/utils/space';
import { COLORS } from '../utils/colors-values';
export const HexInput = _ref => {
  let {
    color,
    onChange,
    enableAlpha
  } = _ref;

  const handleChange = nextValue => {
    if (!nextValue) return;
    const hexValue = nextValue.startsWith('#') ? nextValue : '#' + nextValue;
    onChange(colord(hexValue));
  };

  const stateReducer = (state, action) => {
    var _action$payload, _action$payload$event, _state$value, _state$value2;

    const nativeEvent = (_action$payload = action.payload) === null || _action$payload === void 0 ? void 0 : (_action$payload$event = _action$payload.event) === null || _action$payload$event === void 0 ? void 0 : _action$payload$event.nativeEvent;

    if ('insertFromPaste' !== (nativeEvent === null || nativeEvent === void 0 ? void 0 : nativeEvent.inputType)) {
      return { ...state
      };
    }

    const value = (_state$value = state.value) !== null && _state$value !== void 0 && _state$value.startsWith('#') ? state.value.slice(1).toUpperCase() : (_state$value2 = state.value) === null || _state$value2 === void 0 ? void 0 : _state$value2.toUpperCase();
    return { ...state,
      value
    };
  };

  return createElement(InputControl, {
    prefix: createElement(Spacer, {
      as: Text,
      marginLeft: space(4),
      color: COLORS.ui.theme,
      lineHeight: 1
    }, "#"),
    value: color.toHex().slice(1).toUpperCase(),
    onChange: handleChange,
    maxLength: enableAlpha ? 9 : 7,
    label: __('Hex color'),
    hideLabelFromVision: true,
    size: "__unstable-large",
    __unstableStateReducer: stateReducer,
    __unstableInputWidth: "9em"
  });
};
//# sourceMappingURL=hex-input.js.map