@uiw/react-color-editable-input - npm Package Compare versions

Comparing version 0.0.1 to 0.0.10

lib/cjs/index.d.ts

 import React from 'react';
 export interface EditableInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
     prefixCls?: string;
+    value?: string | number;
     label?: string;
     labelStyle?: React.CSSProperties;
+    inputStyle?: React.CSSProperties;
+    onChange?: (evn: React.ChangeEvent<HTMLInputElement>, value: string | number) => void;
 }
 declare const _default: React.ForwardRefExoticComponent<EditableInputProps & React.RefAttributes<HTMLInputElement>>;
 export default _default;

lib/cjs/index.js

@@ -5,2 +5,4 @@ "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
 Object.defineProperty(exports, "__esModule", {
@@ -15,8 +17,18 @@ value: true
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
-var _excluded = ["prefixCls", "label", "className", "style", "labelStyle"];
+var _excluded = ["prefixCls", "label", "value", "className", "style", "labelStyle", "inputStyle", "onChange"];
 
+var validHex = function validHex(hex) {
+  return /^#?([A-Fa-f0-9]{3,4}){1,2}$/.test(hex);
+};
+
+var getNumberValue = function getNumberValue(value) {
+  return Number(String(value).replace(/%/g, ''));
+};
+
 var _default = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
@@ -26,6 +38,53 @@ var _props$prefixCls = props.prefixCls,
       label = props.label,
+      initValue = props.value,
       className = props.className,
       style = props.style,
       labelStyle = props.labelStyle,
+      inputStyle = props.inputStyle,
+      onChange = props.onChange,
       other = (0, _objectWithoutProperties2.default)(props, _excluded);
+
+  var _useState = (0, _react.useState)(initValue),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(initValue),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      valueProps = _useState4[0],
+      setValueProps = _useState4[1];
+
+  var isFocus = (0, _react.useRef)(false);
+  (0, _react.useEffect)(function () {
+    if (props.value !== value) {
+      setValueProps(props.value);
+
+      if (!isFocus.current) {
+        setValue(props.value);
+      }
+    }
+  }, [props.value]);
+
+  function handleChange(evn) {
+    var value = evn.target.value;
+
+    if (validHex(value)) {
+      onChange && onChange(evn, value);
+    }
+
+    var val = getNumberValue(value);
+
+    if (!isNaN(val)) {
+      onChange && onChange(evn, val);
+    }
+
+    setValue(value);
+    setValueProps(value);
+  }
+
+  function handleBlur() {
+    isFocus.current = false;
+    setValue(valueProps);
+  }
+
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -36,7 +95,16 @@ className: [prefixCls, className || ''].filter(Boolean).join(' '),
       alignItems: 'center',
-      display: 'flex'
+      display: 'flex',
+      fontSize: 11
     }, style)
-  }, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, other, {
+  }, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
     ref: ref,
-    style: {
+    value: value,
+    onChange: handleChange,
+    onBlur: handleBlur,
+    autoComplete: "off",
+    onFocus: function onFocus() {
+      return isFocus.current = true;
+    }
+  }, other, {
+    style: (0, _objectSpread2.default)({
       width: '100%',
@@ -47,13 +115,14 @@ paddingTop: 2,
       paddingRight: 3,
+      fontSize: 11,
       boxSizing: 'border-box',
       border: 'none',
       boxShadow: 'rgb(204 204 204) 0px 0px 0px 1px inset'
-    }
+    }, inputStyle)
   })), /*#__PURE__*/_react.default.createElement("span", {
     style: (0, _objectSpread2.default)({
-      fontSize: 11,
       color: 'rgb(153, 153, 153)',
       textTransform: 'capitalize'
-    }, labelStyle)
-  }, label));
+    }, labelStyle),
+    children: label
+  }));
 });
@@ -63,2 +132,2 @@
 module.exports = exports.default;
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9pbmRleC50c3giXSwibmFtZXMiOlsiUmVhY3QiLCJmb3J3YXJkUmVmIiwicHJvcHMiLCJyZWYiLCJwcmVmaXhDbHMiLCJsYWJlbCIsImNsYXNzTmFtZSIsInN0eWxlIiwibGFiZWxTdHlsZSIsIm90aGVyIiwiZmlsdGVyIiwiQm9vbGVhbiIsImpvaW4iLCJwb3NpdGlvbiIsImFsaWduSXRlbXMiLCJkaXNwbGF5Iiwid2lkdGgiLCJwYWRkaW5nVG9wIiwicGFkZGluZ0JvdHRvbSIsInBhZGRpbmdMZWZ0IiwicGFkZGluZ1JpZ2h0IiwiYm94U2l6aW5nIiwiYm9yZGVyIiwiYm94U2hhZG93IiwiZm9udFNpemUiLCJjb2xvciIsInRleHRUcmFuc2Zvcm0iXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7OztBQUFBOzs7OzRCQVFlQSxlQUFNQyxVQUFOLENBQXVELFVBQUNDLEtBQUQsRUFBUUMsR0FBUixFQUFnQjtBQUNwRix5QkFBZ0dELEtBQWhHLENBQVFFLFNBQVI7QUFBQSxNQUFRQSxTQUFSLGlDQUFvQix3QkFBcEI7QUFBQSxNQUE4Q0MsS0FBOUMsR0FBZ0dILEtBQWhHLENBQThDRyxLQUE5QztBQUFBLE1BQXFEQyxTQUFyRCxHQUFnR0osS0FBaEcsQ0FBcURJLFNBQXJEO0FBQUEsTUFBZ0VDLEtBQWhFLEdBQWdHTCxLQUFoRyxDQUFnRUssS0FBaEU7QUFBQSxNQUF1RUMsVUFBdkUsR0FBZ0dOLEtBQWhHLENBQXVFTSxVQUF2RTtBQUFBLE1BQXNGQyxLQUF0RiwwQ0FBZ0dQLEtBQWhHO0FBRUEsc0JBQ0U7QUFDRSxJQUFBLFNBQVMsRUFBRSxDQUFDRSxTQUFELEVBQVlFLFNBQVMsSUFBSSxFQUF6QixFQUE2QkksTUFBN0IsQ0FBb0NDLE9BQXBDLEVBQTZDQyxJQUE3QyxDQUFrRCxHQUFsRCxDQURiO0FBRUUsSUFBQSxLQUFLO0FBQ0hDLE1BQUFBLFFBQVEsRUFBRSxVQURQO0FBRUhDLE1BQUFBLFVBQVUsRUFBRSxRQUZUO0FBR0hDLE1BQUFBLE9BQU8sRUFBRTtBQUhOLE9BSUFSLEtBSkE7QUFGUCxrQkFTRSxpRUFDTUUsS0FETjtBQUVFLElBQUEsR0FBRyxFQUFFTixHQUZQO0FBR0UsSUFBQSxLQUFLLEVBQUU7QUFDTGEsTUFBQUEsS0FBSyxFQUFFLE1BREY7QUFFTEMsTUFBQUEsVUFBVSxFQUFFLENBRlA7QUFHTEMsTUFBQUEsYUFBYSxFQUFFLENBSFY7QUFJTEMsTUFBQUEsV0FBVyxFQUFFLENBSlI7QUFLTEMsTUFBQUEsWUFBWSxFQUFFLENBTFQ7QUFNTEMsTUFBQUEsU0FBUyxFQUFFLFlBTk47QUFPTEMsTUFBQUEsTUFBTSxFQUFFLE1BUEg7QUFRTEMsTUFBQUEsU0FBUyxFQUFFO0FBUk47QUFIVCxLQVRGLGVBdUJFO0FBQ0UsSUFBQSxLQUFLO0FBQ0hDLE1BQUFBLFFBQVEsRUFBRSxFQURQO0FBRUhDLE1BQUFBLEtBQUssRUFBRSxvQkFGSjtBQUdIQyxNQUFBQSxhQUFhLEVBQUU7QUFIWixPQUlBbEIsVUFKQTtBQURQLEtBUUdILEtBUkgsQ0F2QkYsQ0FERjtBQW9DRCxDQXZDYyxDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGludGVyZmFjZSBFZGl0YWJsZUlucHV0UHJvcHMgZXh0ZW5kcyBPbWl0PFJlYWN0LklucHV0SFRNTEF0dHJpYnV0ZXM8SFRNTElucHV0RWxlbWVudD4sICdvbkNoYW5nZSc+IHtcbiAgcHJlZml4Q2xzPzogc3RyaW5nO1xuICBsYWJlbD86IHN0cmluZztcbiAgbGFiZWxTdHlsZT86IFJlYWN0LkNTU1Byb3BlcnRpZXM7XG59XG5cbmV4cG9ydCBkZWZhdWx0IFJlYWN0LmZvcndhcmRSZWY8SFRNTElucHV0RWxlbWVudCwgRWRpdGFibGVJbnB1dFByb3BzPigocHJvcHMsIHJlZikgPT4ge1xuICBjb25zdCB7IHByZWZpeENscyA9ICd3LWNvbG9yLWVkaXRhYmxlLWlucHV0JywgbGFiZWwsIGNsYXNzTmFtZSwgc3R5bGUsIGxhYmVsU3R5bGUsIC4uLm90aGVyIH0gPSBwcm9wcztcblxuICByZXR1cm4gKFxuICAgIDxkaXZcbiAgICAgIGNsYXNzTmFtZT17W3ByZWZpeENscywgY2xhc3NOYW1lIHx8ICcnXS5maWx0ZXIoQm9vbGVhbikuam9pbignICcpfVxuICAgICAgc3R5bGU9e3tcbiAgICAgICAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG4gICAgICAgIGFsaWduSXRlbXM6ICdjZW50ZXInLFxuICAgICAgICBkaXNwbGF5OiAnZmxleCcsXG4gICAgICAgIC4uLnN0eWxlXG4gICAgICB9fVxuICAgID5cbiAgICAgIDxpbnB1dFxuICAgICAgICB7Li4ub3RoZXJ9XG4gICAgICAgIHJlZj17cmVmfVxuICAgICAgICBzdHlsZT17e1xuICAgICAgICAgIHdpZHRoOiAnMTAwJScsXG4gICAgICAgICAgcGFkZGluZ1RvcDogMixcbiAgICAgICAgICBwYWRkaW5nQm90dG9tOiAyLFxuICAgICAgICAgIHBhZGRpbmdMZWZ0OiAzLFxuICAgICAgICAgIHBhZGRpbmdSaWdodDogMyxcbiAgICAgICAgICBib3hTaXppbmc6ICdib3JkZXItYm94JyxcbiAgICAgICAgICBib3JkZXI6ICdub25lJyxcbiAgICAgICAgICBib3hTaGFkb3c6ICdyZ2IoMjA0IDIwNCAyMDQpIDBweCAwcHggMHB4IDFweCBpbnNldCcsXG4gICAgICAgIH19XG4gICAgICAvPlxuICAgICAgPHNwYW5cbiAgICAgICAgc3R5bGU9e3tcbiAgICAgICAgICBmb250U2l6ZTogMTEsXG4gICAgICAgICAgY29sb3I6ICdyZ2IoMTUzLCAxNTMsIDE1MyknLFxuICAgICAgICAgIHRleHRUcmFuc2Zvcm06ICdjYXBpdGFsaXplJyxcbiAgICAgICAgICAuLi5sYWJlbFN0eWxlLFxuICAgICAgICB9fVxuICAgICAgPlxuICAgICAgICB7bGFiZWx9XG4gICAgICA8L3NwYW4+XG4gICAgPC9kaXY+XG4gICk7XG59KTtcbiJdfQ==
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9pbmRleC50c3giXSwibmFtZXMiOlsidmFsaWRIZXgiLCJoZXgiLCJ0ZXN0IiwiZ2V0TnVtYmVyVmFsdWUiLCJ2YWx1ZSIsIk51bWJlciIsIlN0cmluZyIsInJlcGxhY2UiLCJSZWFjdCIsImZvcndhcmRSZWYiLCJwcm9wcyIsInJlZiIsInByZWZpeENscyIsImxhYmVsIiwiaW5pdFZhbHVlIiwiY2xhc3NOYW1lIiwic3R5bGUiLCJsYWJlbFN0eWxlIiwiaW5wdXRTdHlsZSIsIm9uQ2hhbmdlIiwib3RoZXIiLCJzZXRWYWx1ZSIsInZhbHVlUHJvcHMiLCJzZXRWYWx1ZVByb3BzIiwiaXNGb2N1cyIsImN1cnJlbnQiLCJoYW5kbGVDaGFuZ2UiLCJldm4iLCJ0YXJnZXQiLCJ2YWwiLCJpc05hTiIsImhhbmRsZUJsdXIiLCJmaWx0ZXIiLCJCb29sZWFuIiwiam9pbiIsInBvc2l0aW9uIiwiYWxpZ25JdGVtcyIsImRpc3BsYXkiLCJmb250U2l6ZSIsIndpZHRoIiwicGFkZGluZ1RvcCIsInBhZGRpbmdCb3R0b20iLCJwYWRkaW5nTGVmdCIsInBhZGRpbmdSaWdodCIsImJveFNpemluZyIsImJvcmRlciIsImJveFNoYWRvdyIsImNvbG9yIiwidGV4dFRyYW5zZm9ybSJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBOzs7O0FBR0EsSUFBTUEsUUFBUSxHQUFHLFNBQVhBLFFBQVcsQ0FBQ0MsR0FBRDtBQUFBLFNBQTBCLDhCQUE4QkMsSUFBOUIsQ0FBbUNELEdBQW5DLENBQTFCO0FBQUEsQ0FBakI7O0FBQ0EsSUFBTUUsY0FBYyxHQUFHLFNBQWpCQSxjQUFpQixDQUFDQyxLQUFEO0FBQUEsU0FBbUJDLE1BQU0sQ0FBQ0MsTUFBTSxDQUFDRixLQUFELENBQU4sQ0FBY0csT0FBZCxDQUFzQixJQUF0QixFQUE0QixFQUE1QixDQUFELENBQXpCO0FBQUEsQ0FBdkI7OzRCQVdlQyxlQUFNQyxVQUFOLENBQXVELFVBQUNDLEtBQUQsRUFB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QUFBLEtBQUs7QUFDSG1CLE1BQUFBLEtBQUssRUFBRSxNQURKO0FBRUhDLE1BQUFBLFVBQVUsRUFBRSxDQUZUO0FBR0hDLE1BQUFBLGFBQWEsRUFBRSxDQUhaO0FBSUhDLE1BQUFBLFdBQVcsRUFBRSxDQUpWO0FBS0hDLE1BQUFBLFlBQVksRUFBRSxDQUxYO0FBTUhMLE1BQUFBLFFBQVEsRUFBRSxFQU5QO0FBT0hNLE1BQUFBLFNBQVMsRUFBRSxZQVBSO0FBUUhDLE1BQUFBLE1BQU0sRUFBRSxNQVJMO0FBU0hDLE1BQUFBLFNBQVMsRUFBRTtBQVRSLE9BVUE1QixVQVZBO0FBUlAsS0FWRixlQStCRTtBQUNFLElBQUEsS0FBSztBQUNINkIsTUFBQUEsS0FBSyxFQUFFLG9CQURKO0FBRUhDLE1BQUFBLGFBQWEsRUFBRTtBQUZaLE9BR0EvQixVQUhBLENBRFA7QUFNRSxJQUFBLFFBQVEsRUFBRUo7QUFOWixJQS9CRixDQURGO0FBMENELENBbkZjLEMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgdXNlUmVmLCB1c2VFZmZlY3QsIHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnO1xuXG5jb25zdCB2YWxpZEhleCA9IChoZXg6IHN0cmluZyk6IGJvb2xlYW4gPT4gL14jPyhbQS1GYS1mMC05XXszLDR9KXsxLDJ9JC8udGVzdChoZXgpO1xuY29uc3QgZ2V0TnVtYmVyVmFsdWUgPSAodmFsdWU6IHN0cmluZykgPT4gTnVtYmVyKFN0cmluZyh2YWx1ZSkucmVwbGFjZSgvJS9nLCAnJykpO1xuXG5leHBvcnQgaW50ZXJmYWNlIEVkaXRhYmxlSW5wdXRQcm9wcyBleHRlbmRzIE9taXQ8UmVhY3QuSW5wdXRIVE1MQXR0cmlidXRlczxIVE1MSW5wdXRFbGVtZW50PiwgJ29uQ2hhbmdlJz4ge1xuICBwcmVmaXhDbHM/OiBzdHJpbmc7XG4gIHZhbHVlPzogc3RyaW5nIHwgbnVtYmVyO1xuICBsYWJlbD86IHN0cmluZztcbiAgbGFiZWxTdHlsZT86IFJlYWN0LkNTU1Byb3BlcnRpZXM7XG4gIGlucHV0U3R5bGU/OiBSZWFjdC5DU1NQcm9wZXJ0aWVzO1xuICBvbkNoYW5nZT86IChldm46IFJlYWN0LkNoYW5nZUV2ZW50PEhUTUxJbnB1dEVsZW1lbnQ+LCB2YWx1ZTogc3RyaW5nIHwgbnVtYmVyKSA9PiB2b2lkO1xufVxuXG5leHBvcnQgZGVmYXVsdCBSZWFjdC5mb3J3YXJkUmVmPEhUTUxJbnB1dEVsZW1lbnQsIEVkaXRhYmxlSW5wdXRQcm9wcz4oKHByb3BzLCByZWYpID0+IHtcbiAgY29uc3Qge1xuICAgIHByZWZpeENscyA9ICd3LWNvbG9yLWVkaXRhYmxlLWlucHV0JyxcbiAgICBsYWJlbCxcbiAgICB2YWx1ZTogaW5pdFZhbHVlLFxuICAgIGNsYXNzTmFtZSxcbiAgICBzdHlsZSxcbiAgICBsYWJlbFN0eWxlLFxuICAgIGlucHV0U3R5bGUsXG4gICAgb25DaGFuZ2UsXG4gICAgLi4ub3RoZXJcbiAgfSA9IHByb3BzO1xuICBjb25zdCBbdmFsdWUsIHNldFZhbHVlXSA9IHVzZVN0YXRlPHN0cmluZyB8IG51bWJlciB8IHVuZGVmaW5lZD4oaW5pdFZhbHVlKTtcbiAgY29uc3QgW3ZhbHVlUHJvcHMsIHNldFZhbHVlUHJvcHNdID0gdXNlU3RhdGU8c3RyaW5nIHwgbnVtYmVyIHwgdW5kZWZpbmVkPihpbml0VmFsdWUpO1xuICBjb25zdCBpc0ZvY3VzID0gdXNlUmVmKGZhbHNlKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGlmIChwcm9wcy52YWx1ZSAhPT0gdmFsdWUpIHtcbiAgICAgIHNldFZhbHVlUHJvcHMocHJvcHMudmFsdWUpO1xuICAgICAgaWYgKCFpc0ZvY3VzLmN1cnJlbnQpIHtcbiAgICAgICAgc2V0VmFsdWUocHJvcHMudmFsdWUpO1xuICAgICAgfVxuICAgIH1cbiAgfSwgW3Byb3BzLnZhbHVlXSk7XG5cbiAgZnVuY3Rpb24gaGFuZGxlQ2hhbmdlKGV2bjogUmVhY3QuQ2hhbmdlRXZlbnQ8SFRNTElucHV0RWxlbWVudD4pIHtcbiAgICBjb25zdCB2YWx1ZSA9IGV2bi50YXJnZXQudmFsdWU7XG4gICAgaWYgKHZhbGlkSGV4KHZhbHVlKSkge1xuICAgICAgb25DaGFuZ2UgJiYgb25DaGFuZ2UoZXZuLCB2YWx1ZSk7XG4gICAgfVxuICAgIGNvbnN0IHZhbCA9IGdldE51bWJlclZhbHVlKHZhbHVlKTtcbiAgICBpZiAoIWlzTmFOKHZhbCkpIHtcbiAgICAgIG9uQ2hhbmdlICYmIG9uQ2hhbmdlKGV2biwgdmFsKTtcbiAgICB9XG4gICAgc2V0VmFsdWUodmFsdWUpO1xuICAgIHNldFZhbHVlUHJvcHModmFsdWUpO1xuICB9XG4gIGZ1bmN0aW9uIGhhbmRsZUJsdXIoKSB7XG4gICAgaXNGb2N1cy5jdXJyZW50ID0gZmFsc2U7XG4gICAgc2V0VmFsdWUodmFsdWVQcm9wcyk7XG4gIH1cbiAgcmV0dXJuIChcbiAgICA8ZGl2XG4gICAgICBjbGFzc05hbWU9e1twcmVmaXhDbHMsIGNsYXNzTmFtZSB8fCAnJ10uZmlsdGVyKEJvb2xlYW4pLmpvaW4oJyAnKX1cbiAgICAgIHN0eWxlPXt7XG4gICAgICAgIHBvc2l0aW9uOiAncmVsYXRpdmUnLFxuICAgICAgICBhbGlnbkl0ZW1zOiAnY2VudGVyJyxcbiAgICAgICAgZGlzcGxheTogJ2ZsZXgnLFxuICAgICAgICBmb250U2l6ZTogMTEsXG4gICAgICAgIC4uLnN0eWxlLFxuICAgICAgfX1cbiAgICA+XG4gICAgICA8aW5wdXRcbiAgICAgICAgcmVmPXtyZWZ9XG4gICAgICAgIHZhbHVlPXt2YWx1ZX1cbiAgICAgICAgb25DaGFuZ2U9e2hhbmRsZUNoYW5nZX1cbiAgICAgICAgb25CbHVyPXtoYW5kbGVCbHVyfVxuICAgICAgICBhdXRvQ29tcGxldGU9XCJvZmZcIlxuICAgICAgICBvbkZvY3VzPXsoKSA9PiAoaXNGb2N1cy5jdXJyZW50ID0gdHJ1ZSl9XG4gICAgICAgIHsuLi5vdGhlcn1cbiAgICAgICAgc3R5bGU9e3tcbiAgICAgICAgICB3aWR0aDogJzEwMCUnLFxuICAgICAgICAgIHBhZGRpbmdUb3A6IDIsXG4gICAgICAgICAgcGFkZGluZ0JvdHRvbTogMixcbiAgICAgICAgICBwYWRkaW5nTGVmdDogMyxcbiAgICAgICAgICBwYWRkaW5nUmlnaHQ6IDMsXG4gICAgICAgICAgZm9udFNpemU6IDExLFxuICAgICAgICAgIGJveFNpemluZzogJ2JvcmRlci1ib3gnLFxuICAgICAgICAgIGJvcmRlcjogJ25vbmUnLFxuICAgICAgICAgIGJveFNoYWRvdzogJ3JnYigyMDQgMjA0IDIwNCkgMHB4IDBweCAwcHggMXB4IGluc2V0JyxcbiAgICAgICAgICAuLi5pbnB1dFN0eWxlLFxuICAgICAgICB9fVxuICAgICAgLz5cbiAgICAgIDxzcGFuXG4gICAgICAgIHN0eWxlPXt7XG4gICAgICAgICAgY29sb3I6ICdyZ2IoMTUzLCAxNTMsIDE1MyknLFxuICAgICAgICAgIHRleHRUcmFuc2Zvcm06ICdjYXBpdGFsaXplJyxcbiAgICAgICAgICAuLi5sYWJlbFN0eWxlLFxuICAgICAgICB9fVxuICAgICAgICBjaGlsZHJlbj17bGFiZWx9XG4gICAgICAvPlxuICAgIDwvZGl2PlxuICApO1xufSk7XG4iXX0=

lib/esm/index.d.ts

 import React from 'react';
 export interface EditableInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
     prefixCls?: string;
+    value?: string | number;
     label?: string;
     labelStyle?: React.CSSProperties;
+    inputStyle?: React.CSSProperties;
+    onChange?: (evn: React.ChangeEvent<HTMLInputElement>, value: string | number) => void;
 }
 declare const _default: React.ForwardRefExoticComponent<EditableInputProps & React.RefAttributes<HTMLInputElement>>;
 export default _default;

lib/esm/index.js

 import _extends from "@babel/runtime/helpers/extends";
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["prefixCls", "label", "className", "style", "labelStyle"];
+var _excluded = ["prefixCls", "label", "value", "className", "style", "labelStyle", "inputStyle", "onChange"];
 import React from 'react';
+import { useRef, useEffect, useState } from 'react';
+
+var validHex = function validHex(hex) {
+  return /^#?([A-Fa-f0-9]{3,4}){1,2}$/.test(hex);
+};
+
+var getNumberValue = function getNumberValue(value) {
+  return Number(String(value).replace(/%/g, ''));
+};
+
 export default /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -10,7 +21,53 @@ var _props$prefixCls = props.prefixCls,
       label = props.label,
+      initValue = props.value,
       className = props.className,
       style = props.style,
       labelStyle = props.labelStyle,
+      inputStyle = props.inputStyle,
+      onChange = props.onChange,
       other = _objectWithoutProperties(props, _excluded);
 
+  var _useState = useState(initValue),
+      _useState2 = _slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  var _useState3 = useState(initValue),
+      _useState4 = _slicedToArray(_useState3, 2),
+      valueProps = _useState4[0],
+      setValueProps = _useState4[1];
+
+  var isFocus = useRef(false);
+  useEffect(function () {
+    if (props.value !== value) {
+      setValueProps(props.value);
+
+      if (!isFocus.current) {
+        setValue(props.value);
+      }
+    }
+  }, [props.value]);
+
+  function handleChange(evn) {
+    var value = evn.target.value;
+
+    if (validHex(value)) {
+      onChange && onChange(evn, value);
+    }
+
+    var val = getNumberValue(value);
+
+    if (!isNaN(val)) {
+      onChange && onChange(evn, val);
+    }
+
+    setValue(value);
+    setValueProps(value);
+  }
+
+  function handleBlur() {
+    isFocus.current = false;
+    setValue(valueProps);
+  }
+
   return /*#__PURE__*/React.createElement("div", {
@@ -21,7 +78,16 @@ className: [prefixCls, className || ''].filter(Boolean).join(' '),
       alignItems: 'center',
-      display: 'flex'
+      display: 'flex',
+      fontSize: 11
     }, style)
-  }, /*#__PURE__*/React.createElement("input", _extends({}, other, {
+  }, /*#__PURE__*/React.createElement("input", _extends({
     ref: ref,
-    style: {
+    value: value,
+    onChange: handleChange,
+    onBlur: handleBlur,
+    autoComplete: "off",
+    onFocus: function onFocus() {
+      return isFocus.current = true;
+    }
+  }, other, {
+    style: _objectSpread({
       width: '100%',
@@ -32,14 +98,15 @@ paddingTop: 2,
       paddingRight: 3,
+      fontSize: 11,
       boxSizing: 'border-box',
       border: 'none',
       boxShadow: 'rgb(204 204 204) 0px 0px 0px 1px inset'
-    }
+    }, inputStyle)
   })), /*#__PURE__*/React.createElement("span", {
     style: _objectSpread({
-      fontSize: 11,
       color: 'rgb(153, 153, 153)',
       textTransform: 'capitalize'
-    }, labelStyle)
-  }, label));
+    }, labelStyle),
+    children: label
+  }));
 });
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9pbmRleC50c3giXSwibmFtZXMiOlsiUmVhY3QiLCJmb3J3YXJkUmVmIiwicHJvcHMiLCJyZWYiLCJwcmVmaXhDbHMiLCJsYWJlbCIsImNsYXNzTmFtZSIsInN0eWxlIiwibGFiZWxTdHlsZSIsIm90aGVyIiwiZmlsdGVyIiwiQm9vbGVhbiIsImpvaW4iLCJwb3NpdGlvbiIsImFsaWduSXRlbXMiLCJkaXNwbGF5Iiwid2lkdGgiLCJwYWRkaW5nVG9wIiwicGFkZGluZ0JvdHRvbSIsInBhZGRpbmdMZWZ0IiwicGFkZGluZ1JpZ2h0IiwiYm94U2l6aW5nIiwiYm9yZGVyIiwiYm94U2hhZG93IiwiZm9udFNpemUiLCJjb2xvciIsInRleHRUcmFuc2Zvcm0iXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPQSxLQUFQLE1BQWtCLE9BQWxCO0FBUUEsNEJBQWVBLEtBQUssQ0FBQ0MsVUFBTixDQUF1RCxVQUFDQyxLQUFELEVBQVFDLEdBQVIsRUFBZ0I7QUFDcEYseUJBQWdHRCxLQUFoRyxDQUFRRSxTQUFSO0FBQUEsTUFBUUEsU0FBUixpQ0FBb0Isd0JBQXBCO0FBQUEsTUFBOENDLEtBQTlDLEdBQWdHSCxLQUFoRyxDQUE4Q0csS0FBOUM7QUFBQSxNQUFxREMsU0FBckQsR0FBZ0dKLEtBQWhHLENBQXFESSxTQUFyRDtBQUFBLE1BQWdFQyxLQUFoRSxHQUFnR0wsS0FBaEcsQ0FBZ0VLLEtBQWhFO0FBQUEsTUFBdUVDLFVBQXZFLEdBQWdHTixLQUFoRyxDQUF1RU0sVUFBdkU7QUFBQSxNQUFzRkMsS0FBdEYsNEJBQWdHUCxLQUFoRzs7QUFFQSxzQkFDRTtBQUNFLElBQUEsU0FBUyxFQUFFLENBQUNFLFNBQUQsRUFBWUUsU0FBUyxJQUFJLEVBQXpCLEVBQTZCSSxNQUE3QixDQUFvQ0MsT0FBcEMsRUFBNkNDLElBQTdDLENBQWtELEdBQWxELENBRGI7QUFFRSxJQUFBLEtBQUs7QUFDSEMsTUFBQUEsUUFBUSxFQUFFLFVBRFA7QUFFSEMsTUFBQUEsVUFBVSxFQUFFLFFBRlQ7QUFHSEMsTUFBQUEsT0FBTyxFQUFFO0FBSE4sT0FJQVIsS0FKQTtBQUZQLGtCQVNFLDBDQUNNRSxLQUROO0FBRUUsSUFBQSxHQUFHLEVBQUVOLEdBRlA7QUFHRSxJQUFBLEtBQUssRUFBRTtBQUNMYSxNQUFBQSxLQUFLLEVBQUUsTUFERjtBQUVMQyxNQUFBQSxVQUFVLEVBQUUsQ0FGUDtBQUdMQyxNQUFBQSxhQUFhLEVBQUUsQ0FIVjtBQUlMQyxNQUFBQSxXQUFXLEVBQUUsQ0FKUjtBQUtMQyxNQUFBQSxZQUFZLEVBQUUsQ0FMVDtBQU1MQyxNQUFBQSxTQUFTLEVBQUUsWUFOTjtBQU9MQyxNQUFBQSxNQUFNLEVBQUUsTUFQSDtBQVFMQyxNQUFBQSxTQUFTLEVBQUU7QUFSTjtBQUhULEtBVEYsZUF1QkU7QUFDRSxJQUFBLEtBQUs7QUFDSEMsTUFBQUEsUUFBUSxFQUFFLEVBRFA7QUFFSEMsTUFBQUEsS0FBSyxFQUFFLG9CQUZKO0FBR0hDLE1BQUFBLGFBQWEsRUFBRTtBQUhaLE9BSUFsQixVQUpBO0FBRFAsS0FRR0gsS0FSSCxDQXZCRixDQURGO0FBb0NELENBdkNjLENBQWYiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5leHBvcnQgaW50ZXJmYWNlIEVkaXRhYmxlSW5wdXRQcm9wcyBleHRlbmRzIE9taXQ8UmVhY3QuSW5wdXRIVE1MQXR0cmlidXRlczxIVE1MSW5wdXRFbGVtZW50PiwgJ29uQ2hhbmdlJz4ge1xuICBwcmVmaXhDbHM/OiBzdHJpbmc7XG4gIGxhYmVsPzogc3RyaW5nO1xuICBsYWJlbFN0eWxlPzogUmVhY3QuQ1NTUHJvcGVydGllcztcbn1cblxuZXhwb3J0IGRlZmF1bHQgUmVhY3QuZm9yd2FyZFJlZjxIVE1MSW5wdXRFbGVtZW50LCBFZGl0YWJsZUlucHV0UHJvcHM+KChwcm9wcywgcmVmKSA9PiB7XG4gIGNvbnN0IHsgcHJlZml4Q2xzID0gJ3ctY29sb3ItZWRpdGFibGUtaW5wdXQnLCBsYWJlbCwgY2xhc3NOYW1lLCBzdHlsZSwgbGFiZWxTdHlsZSwgLi4ub3RoZXIgfSA9IHByb3BzO1xuXG4gIHJldHVybiAoXG4gICAgPGRpdlxuICAgICAgY2xhc3NOYW1lPXtbcHJlZml4Q2xzLCBjbGFzc05hbWUgfHwgJyddLmZpbHRlcihCb29sZWFuKS5qb2luKCcgJyl9XG4gICAgICBzdHlsZT17e1xuICAgICAgICBwb3NpdGlvbjogJ3JlbGF0aXZlJyxcbiAgICAgICAgYWxpZ25JdGVtczogJ2NlbnRlcicsXG4gICAgICAgIGRpc3BsYXk6ICdmbGV4JyxcbiAgICAgICAgLi4uc3R5bGVcbiAgICAgIH19XG4gICAgPlxuICAgICAgPGlucHV0XG4gICAgICAgIHsuLi5vdGhlcn1cbiAgICAgICAgcmVmPXtyZWZ9XG4gICAgICAgIHN0eWxlPXt7XG4gICAgICAgICAgd2lkdGg6ICcxMDAlJyxcbiAgICAgICAgICBwYWRkaW5nVG9wOiAyLFxuICAgICAgICAgIHBhZGRpbmdCb3R0b206IDIsXG4gICAgICAgICAgcGFkZGluZ0xlZnQ6IDMsXG4gICAgICAgICAgcGFkZGluZ1JpZ2h0OiAzLFxuICAgICAgICAgIGJveFNpemluZzogJ2JvcmRlci1ib3gnLFxuICAgICAgICAgIGJvcmRlcjogJ25vbmUnLFxuICAgICAgICAgIGJveFNoYWRvdzogJ3JnYigyMDQgMjA0IDIwNCkgMHB4IDBweCAwcHggMXB4IGluc2V0JyxcbiAgICAgICAgfX1cbiAgICAgIC8+XG4gICAgICA8c3BhblxuICAgICAgICBzdHlsZT17e1xuICAgICAgICAgIGZvbnRTaXplOiAxMSxcbiAgICAgICAgICBjb2xvcjogJ3JnYigxNTMsIDE1MywgMTUzKScsXG4gICAgICAgICAgdGV4dFRyYW5zZm9ybTogJ2NhcGl0YWxpemUnLFxuICAgICAgICAgIC4uLmxhYmVsU3R5bGUsXG4gICAgICAgIH19XG4gICAgICA+XG4gICAgICAgIHtsYWJlbH1cbiAgICAgIDwvc3Bhbj5cbiAgICA8L2Rpdj5cbiAgKTtcbn0pO1xuIl19
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9pbmRleC50c3giXSwibmFtZXMiOlsiUmVhY3QiLCJ1c2VSZWYiLCJ1c2VFZmZlY3QiLCJ1c2VTdGF0ZSIsInZhbGlkSGV4IiwiaGV4IiwidGVzdCIsImdldE51bWJlclZhbHVlIiwidmFsdWUiLCJOdW1iZXIiLCJTdHJpbmciLCJyZXBsYWNlIiwiZm9yd2FyZFJlZiIsInByb3BzIiwicmVmIiwicHJlZml4Q2xzIiwibGFiZWwiLCJpbml0VmFsdWUiLCJjbGFzc05hbWUiLCJzdHlsZSIsImxhYmVsU3R5bGUiLCJpbnB1dFN0eWxlIiwib25DaGFuZ2UiLCJvdGhlciIsInNldFZhbHVlIiwidmFsdWVQcm9wcyIsInNldFZhbHVlUHJvcHMiLCJpc0ZvY3VzIiwiY3VycmVudCIsImhhbmRsZUNoYW5nZSIsImV2biIsInRhcmdldCIsInZhbCIsImlzTmFOIiwiaGFuZGxlQmx1ciIsImZpbHRlciIsIkJvb2xlYW4iLCJqb2luIiwicG9zaXRpb24iLCJhbGlnbkl0ZW1zIiwiZGlzcGxheSIsImZvbnRTaXplIiwid2lkdGgiLCJwYWRkaW5nVG9wIiwicGFkZGluZ0JvdHRvbSIsInBhZGRpbmdMZWZ0IiwicGFkZGluZ1JpZ2h0IiwiYm94U2l6aW5nIiwiYm9yZGVyIiwiYm94U2hhZG93IiwiY29sb3IiLCJ0ZXh0VHJhbnNmb3JtIl0sIm1hcHBpbmdzIjoiOzs7OztBQUFBLE9BQU9BLEtBQVAsTUFBa0IsT0FBbEI7QUFDQSxTQUFTQyxNQUFULEVBQWlCQyxTQUFqQixFQUE0QkMsUUFBNUIsUUFBNEMsT0FBNUM7O0FBRUEsSUFBTUMsUUFBUSxHQUFHLFNBQVhBLFFBQVcsQ0FBQ0MsR0FBRDtBQUFBLFNBQTBCLDhCQUE4QkMsSUFBOUIsQ0FBbUNELEdBQW5DLENBQTFCO0FBQUEsQ0FBakI7O0FBQ0EsSUFBTUUsY0FBYyxHQUFHLFNBQWpCQSxjQUFpQixDQUFDQyxLQUFEO0FBQUEsU0FBbUJDLE1BQU0sQ0FBQ0MsTUFBTSxDQUFDRixLQUFELENBQU4sQ0FB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QUlFLElBQUEsTUFBTSxFQUFFSyxVQUpWO0FBS0UsSUFBQSxZQUFZLEVBQUMsS0FMZjtBQU1FLElBQUEsT0FBTyxFQUFFO0FBQUEsYUFBT1AsT0FBTyxDQUFDQyxPQUFSLEdBQWtCLElBQXpCO0FBQUE7QUFOWCxLQU9NTCxLQVBOO0FBUUUsSUFBQSxLQUFLO0FBQ0htQixNQUFBQSxLQUFLLEVBQUUsTUFESjtBQUVIQyxNQUFBQSxVQUFVLEVBQUUsQ0FGVDtBQUdIQyxNQUFBQSxhQUFhLEVBQUUsQ0FIWjtBQUlIQyxNQUFBQSxXQUFXLEVBQUUsQ0FKVjtBQUtIQyxNQUFBQSxZQUFZLEVBQUUsQ0FMWDtBQU1ITCxNQUFBQSxRQUFRLEVBQUUsRUFOUDtBQU9ITSxNQUFBQSxTQUFTLEVBQUUsWUFQUjtBQVFIQyxNQUFBQSxNQUFNLEVBQUUsTUFSTDtBQVNIQyxNQUFBQSxTQUFTLEVBQUU7QUFUUixPQVVBNUIsVUFWQTtBQVJQLEtBVkYsZUErQkU7QUFDRSxJQUFBLEtBQUs7QUFDSDZCLE1BQUFBLEtBQUssRUFBRSxvQkFESjtBQUVIQyxNQUFBQSxhQUFhLEVBQUU7QUFGWixPQUdBL0IsVUFIQSxDQURQO0FBTUUsSUFBQSxRQUFRLEVBQUVKO0FBTlosSUEvQkYsQ0FERjtBQTBDRCxDQW5GYyxDQUFmIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IHVzZVJlZiwgdXNlRWZmZWN0LCB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcblxuY29uc3QgdmFsaWRIZXggPSAoaGV4OiBzdHJpbmcpOiBib29sZWFuID0+IC9eIz8oW0EtRmEtZjAtOV17Myw0fSl7MSwyfSQvLnRlc3QoaGV4KTtcbmNvbnN0IGdldE51bWJlclZhbHVlID0gKHZhbHVlOiBzdHJpbmcpID0+IE51bWJlcihTdHJpbmcodmFsdWUpLnJlcGxhY2UoLyUvZywgJycpKTtcblxuZXhwb3J0IGludGVyZmFjZSBFZGl0YWJsZUlucHV0UHJvcHMgZXh0ZW5kcyBPbWl0PFJlYWN0LklucHV0SFRNTEF0dHJpYnV0ZXM8SFRNTElucHV0RWxlbWVudD4sICdvbkNoYW5nZSc+IHtcbiAgcHJlZml4Q2xzPzogc3RyaW5nO1xuICB2YWx1ZT86IHN0cmluZyB8IG51bWJlcjtcbiAgbGFiZWw/OiBzdHJpbmc7XG4gIGxhYmVsU3R5bGU/OiBSZWFjdC5DU1NQcm9wZXJ0aWVzO1xuICBpbnB1dFN0eWxlPzogUmVhY3QuQ1NTUHJvcGVydGllcztcbiAgb25DaGFuZ2U/OiAoZXZuOiBSZWFjdC5DaGFuZ2VFdmVudDxIVE1MSW5wdXRFbGVtZW50PiwgdmFsdWU6IHN0cmluZyB8IG51bWJlcikgPT4gdm9pZDtcbn1cblxuZXhwb3J0IGRlZmF1bHQgUmVhY3QuZm9yd2FyZFJlZjxIVE1MSW5wdXRFbGVtZW50LCBFZGl0YWJsZUlucHV0UHJvcHM+KChwcm9wcywgcmVmKSA9PiB7XG4gIGNvbnN0IHtcbiAgICBwcmVmaXhDbHMgPSAndy1jb2xvci1lZGl0YWJsZS1pbnB1dCcsXG4gICAgbGFiZWwsXG4gICAgdmFsdWU6IGluaXRWYWx1ZSxcbiAgICBjbGFzc05hbWUsXG4gICAgc3R5bGUsXG4gICAgbGFiZWxTdHlsZSxcbiAgICBpbnB1dFN0eWxlLFxuICAgIG9uQ2hhbmdlLFxuICAgIC4uLm90aGVyXG4gIH0gPSBwcm9wcztcbiAgY29uc3QgW3ZhbHVlLCBzZXRWYWx1ZV0gPSB1c2VTdGF0ZTxzdHJpbmcgfCBudW1iZXIgfCB1bmRlZmluZWQ+KGluaXRWYWx1ZSk7XG4gIGNvbnN0IFt2YWx1ZVByb3BzLCBzZXRWYWx1ZVByb3BzXSA9IHVzZVN0YXRlPHN0cmluZyB8IG51bWJlciB8IHVuZGVmaW5lZD4oaW5pdFZhbHVlKTtcbiAgY29uc3QgaXNGb2N1cyA9IHVzZVJlZihmYWxzZSk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAocHJvcHMudmFsdWUgIT09IHZhbHVlKSB7XG4gICAgICBzZXRWYWx1ZVByb3BzKHByb3BzLnZhbHVlKTtcbiAgICAgIGlmICghaXNGb2N1cy5jdXJyZW50KSB7XG4gICAgICAgIHNldFZhbHVlKHByb3BzLnZhbHVlKTtcbiAgICAgIH1cbiAgICB9XG4gIH0sIFtwcm9wcy52YWx1ZV0pO1xuXG4gIGZ1bmN0aW9uIGhhbmRsZUNoYW5nZShldm46IFJlYWN0LkNoYW5nZUV2ZW50PEhUTUxJbnB1dEVsZW1lbnQ+KSB7XG4gICAgY29uc3QgdmFsdWUgPSBldm4udGFyZ2V0LnZhbHVlO1xuICAgIGlmICh2YWxpZEhleCh2YWx1ZSkpIHtcbiAgICAgIG9uQ2hhbmdlICYmIG9uQ2hhbmdlKGV2biwgdmFsdWUpO1xuICAgIH1cbiAgICBjb25zdCB2YWwgPSBnZXROdW1iZXJWYWx1ZSh2YWx1ZSk7XG4gICAgaWYgKCFpc05hTih2YWwpKSB7XG4gICAgICBvbkNoYW5nZSAmJiBvbkNoYW5nZShldm4sIHZhbCk7XG4gICAgfVxuICAgIHNldFZhbHVlKHZhbHVlKTtcbiAgICBzZXRWYWx1ZVByb3BzKHZhbHVlKTtcbiAgfVxuICBmdW5jdGlvbiBoYW5kbGVCbHVyKCkge1xuICAgIGlzRm9jdXMuY3VycmVudCA9IGZhbHNlO1xuICAgIHNldFZhbHVlKHZhbHVlUHJvcHMpO1xuICB9XG4gIHJldHVybiAoXG4gICAgPGRpdlxuICAgICAgY2xhc3NOYW1lPXtbcHJlZml4Q2xzLCBjbGFzc05hbWUgfHwgJyddLmZpbHRlcihCb29sZWFuKS5qb2luKCcgJyl9XG4gICAgICBzdHlsZT17e1xuICAgICAgICBwb3NpdGlvbjogJ3JlbGF0aXZlJyxcbiAgICAgICAgYWxpZ25JdGVtczogJ2NlbnRlcicsXG4gICAgICAgIGRpc3BsYXk6ICdmbGV4JyxcbiAgICAgICAgZm9udFNpemU6IDExLFxuICAgICAgICAuLi5zdHlsZSxcbiAgICAgIH19XG4gICAgPlxuICAgICAgPGlucHV0XG4gICAgICAgIHJlZj17cmVmfVxuICAgICAgICB2YWx1ZT17dmFsdWV9XG4gICAgICAgIG9uQ2hhbmdlPXtoYW5kbGVDaGFuZ2V9XG4gICAgICAgIG9uQmx1cj17aGFuZGxlQmx1cn1cbiAgICAgICAgYXV0b0NvbXBsZXRlPVwib2ZmXCJcbiAgICAgICAgb25Gb2N1cz17KCkgPT4gKGlzRm9jdXMuY3VycmVudCA9IHRydWUpfVxuICAgICAgICB7Li4ub3RoZXJ9XG4gICAgICAgIHN0eWxlPXt7XG4gICAgICAgICAgd2lkdGg6ICcxMDAlJyxcbiAgICAgICAgICBwYWRkaW5nVG9wOiAyLFxuICAgICAgICAgIHBhZGRpbmdCb3R0b206IDIsXG4gICAgICAgICAgcGFkZGluZ0xlZnQ6IDMsXG4gICAgICAgICAgcGFkZGluZ1JpZ2h0OiAzLFxuICAgICAgICAgIGZvbnRTaXplOiAxMSxcbiAgICAgICAgICBib3hTaXppbmc6ICdib3JkZXItYm94JyxcbiAgICAgICAgICBib3JkZXI6ICdub25lJyxcbiAgICAgICAgICBib3hTaGFkb3c6ICdyZ2IoMjA0IDIwNCAyMDQpIDBweCAwcHggMHB4IDFweCBpbnNldCcsXG4gICAgICAgICAgLi4uaW5wdXRTdHlsZSxcbiAgICAgICAgfX1cbiAgICAgIC8+XG4gICAgICA8c3BhblxuICAgICAgICBzdHlsZT17e1xuICAgICAgICAgIGNvbG9yOiAncmdiKDE1MywgMTUzLCAxNTMpJyxcbiAgICAgICAgICB0ZXh0VHJhbnNmb3JtOiAnY2FwaXRhbGl6ZScsXG4gICAgICAgICAgLi4ubGFiZWxTdHlsZSxcbiAgICAgICAgfX1cbiAgICAgICAgY2hpbGRyZW49e2xhYmVsfVxuICAgICAgLz5cbiAgICA8L2Rpdj5cbiAgKTtcbn0pO1xuIl19

package.json

 {
   "name": "@uiw/react-color-editable-input",
-  "version": "0.0.1",
+  "version": "0.0.10",
   "description": "Color Editable Input",
@@ -31,4 +31,3 @@ "author": "Kenny Wong <[e-mail]>",
   "dependencies": {
-    "@babel/runtime": "7.14.6",
-    "@uiw/color-convert": "^0.0.9"
+    "@babel/runtime": "7.14.6"
   },
@@ -35,0 +34,0 @@ "devDependencies": {

README.md

@@ -58,4 +58,7 @@ React Color Editable Input
   prefixCls?: string;
+  value?: string | number;
   label?: string;
   labelStyle?: React.CSSProperties;
+  inputStyle?: React.CSSProperties;
+  onChange?: (evn: React.ChangeEvent<HTMLInputElement>, value: string | number) => void;
 }
@@ -62,0 +65,0 @@ ```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

29602

increased by90.83%

Dependency count

3

decreased by-25%

Lines of code

312

increased by109.4%

Number of lines in readme file

71

increased by4.41%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• - Removed@uiw/color-convert@^0.0.9

• - Removed@uiw/color-convert@0.0.9(transitive)