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

UI components for GeChiUI.

"use strict";

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

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

var _colord = require("colord");

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

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

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

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

var _styles = require("./styles");

/**
 * External dependencies
 */

/**
 * GeChiUI dependencies
 */

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

  const handleValidate = value => {
    if (!(0, _colord.colord)('#' + value).isValid()) {
      throw new Error('Invalid hex color input');
    }
  };

  return (0, _element.createElement)(_styles.ColorHexInputControl, {
    prefix: (0, _element.createElement)(_spacer.Spacer, {
      as: _text.Text,
      marginLeft: (0, _space.space)(3.5),
      color: "blue",
      lineHeight: 1
    }, "#"),
    value: color.toHex().slice(1).toUpperCase(),
    onChange: nextValue => {
      onChange((0, _colord.colord)('#' + nextValue));
    },
    onValidate: handleValidate,
    maxLength: enableAlpha ? 8 : 6,
    label: (0, _i18n.__)('十六进制颜色'),
    hideLabelFromVision: true
  });
};

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