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

UI components for WordPress.

"use strict";

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

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

var _colord = require("colord");

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

var _inputControl = require("../input-control");

var _text = require("../text");

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

var _space = require("../ui/utils/space");

var _colorsValues = require("../utils/colors-values");

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const HexInput = _ref => {
  let {
    color,
    onChange,
    enableAlpha
  } = _ref;

  const handleChange = nextValue => {
    if (!nextValue) return;
    const hexValue = nextValue.startsWith('#') ? nextValue : '#' + nextValue;
    onChange((0, _colord.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 (0, _element.createElement)(_inputControl.InputControl, {
    prefix: (0, _element.createElement)(_spacer.Spacer, {
      as: _text.Text,
      marginLeft: (0, _space.space)(4),
      color: _colorsValues.COLORS.ui.theme,
      lineHeight: 1
    }, "#"),
    value: color.toHex().slice(1).toUpperCase(),
    onChange: handleChange,
    maxLength: enableAlpha ? 9 : 7,
    label: (0, _i18n.__)('Hex color'),
    hideLabelFromVision: true,
    size: "__unstable-large",
    __unstableStateReducer: stateReducer,
    __unstableInputWidth: "9em"
  });
};

exports.HexInput = HexInput;
//# sourceMappingURL=hex-input.js.map