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

UI components for GeChiUI.

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

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

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

import { Text } from '../text';
import { Spacer } from '../spacer';
import { space } from '../ui/utils/space';
import { ColorHexInputControl } from './styles';
export const HexInput = _ref => {
  let {
    color,
    onChange,
    enableAlpha
  } = _ref;

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

  return createElement(ColorHexInputControl, {
    prefix: createElement(Spacer, {
      as: Text,
      marginLeft: space(3.5),
      color: "blue",
      lineHeight: 1
    }, "#"),
    value: color.toHex().slice(1).toUpperCase(),
    onChange: nextValue => {
      onChange(colord('#' + nextValue));
    },
    onValidate: handleValidate,
    maxLength: enableAlpha ? 8 : 6,
    label: __('十六进制颜色'),
    hideLabelFromVision: true
  });
};
//# sourceMappingURL=hex-input.js.map