@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 _props$prefixCls = props.prefixCls,
    prefixCls = _props$prefixCls === void 0 ? 'w-color-editable-input' : _props$prefixCls,
    _props$placement = props.placement,
    placement = _props$placement === void 0 ? 'bottom' : _props$placement,
    label = props.label,
    initValue = props.value,
    className = props.className,
    style = props.style,
    labelStyle = props.labelStyle,
    inputStyle = props.inputStyle,
    onChange = props.onChange,
    onBlur = props.onBlur,
    renderInput = props.renderInput,
    other = _objectWithoutPropertiesLoose(props, _excluded);
  var _useState = useState(initValue),
    value = _useState[0],
    setValue = _useState[1];
  var isFocus = useRef(false);
  var inputIdRef = useRef(other.id || prefixCls + "-" + Math.random().toString(36).slice(2, 11));
  var inputId = other.id || inputIdRef.current;
  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, {
    id: inputId,
    style: editableStyle,
    onFocusCapture: e => {
      var elm = e.target;
      elm.setSelectionRange(elm.value.length, elm.value.length);
    }
  });
  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("label", {
      htmlFor: inputId,
      style: _extends({
        color: 'var(--editable-input-label-color)',
        textTransform: 'capitalize'
      }, labelStyle),
      children: label
    })]
  });
});
EditableInput.displayName = 'EditableInput';
export default EditableInput;