@uiw/react-color-editable-input/esm/index.js

Color Editable Input

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["prefixCls", "placement", "label", "value", "className", "style", "labelStyle", "inputStyle", "onChange", "onBlur", "renderInput"];
import React from 'react';
import { useRef, useEffect, useState } from 'react';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var validHex = hex => /^#?([A-Fa-f0-9]{3,4}){1,2}$/.test(hex);
var getNumberValue = value => Number(String(value).replace(/%/g, ''));
var EditableInput = /*#__PURE__*/React.forwardRef((props, ref) => {
  var {
      prefixCls = 'w-color-editable-input',
      placement = 'bottom',
      label,
      value: initValue,
      className,
      style,
      labelStyle,
      inputStyle,
      onChange,
      onBlur,
      renderInput
    } = props,
    other = _objectWithoutPropertiesLoose(props, _excluded);
  var [value, setValue] = useState(initValue);
  var isFocus = useRef(false);
  useEffect(() => {
    if (props.value !== value) {
      if (!isFocus.current) {
        setValue(props.value);
      }
    }
  }, [props.value]);
  function handleChange(evn, valInit) {
    var value = (valInit || evn.target.value).trim().replace(/^#/, '');
    if (validHex(value)) {
      onChange && onChange(evn, value);
    }
    var val = getNumberValue(value);
    if (!isNaN(val)) {
      onChange && onChange(evn, val);
    }
    setValue(value);
  }
  function handleBlur(evn) {
    isFocus.current = false;
    setValue(props.value);
    onBlur && onBlur(evn);
  }
  var placementStyle = {};
  if (placement === 'bottom') {
    placementStyle['flexDirection'] = 'column';
  }
  if (placement === 'top') {
    placementStyle['flexDirection'] = 'column-reverse';
  }
  if (placement === 'left') {
    placementStyle['flexDirection'] = 'row-reverse';
  }
  var wrapperStyle = _extends({
    '--editable-input-label-color': 'rgb(153, 153, 153)',
    '--editable-input-box-shadow': 'rgb(204 204 204) 0px 0px 0px 1px inset',
    '--editable-input-color': '#666',
    position: 'relative',
    alignItems: 'center',
    display: 'flex',
    fontSize: 11
  }, placementStyle, style);
  var editableStyle = _extends({
    width: '100%',
    paddingTop: 2,
    paddingBottom: 2,
    paddingLeft: 3,
    paddingRight: 3,
    fontSize: 11,
    background: 'transparent',
    boxSizing: 'border-box',
    border: 'none',
    color: 'var(--editable-input-color)',
    boxShadow: 'var(--editable-input-box-shadow)'
  }, inputStyle);
  var inputProps = _extends({
    value,
    onChange: handleChange,
    onBlur: handleBlur,
    autoComplete: 'off',
    onFocus: () => isFocus.current = true
  }, other, {
    style: editableStyle
  });
  return /*#__PURE__*/_jsxs("div", {
    className: [prefixCls, className || ''].filter(Boolean).join(' '),
    style: wrapperStyle,
    children: [renderInput ? renderInput(inputProps, ref) : /*#__PURE__*/_jsx("input", _extends({
      ref: ref
    }, inputProps)), label && /*#__PURE__*/_jsx("span", {
      style: _extends({
        color: 'var(--editable-input-label-color)',
        textTransform: 'capitalize'
      }, labelStyle),
      children: label
    })]
  });
});
EditableInput.displayName = 'EditableInput';
export default EditableInput;