@hw-component/form 1.9.16 → 1.9.17

package/es/Input/ColorInput/index.js

@@ -1,62 +1,36 @@
 // welcome to hoo hoo hoo
-import _typeof from '@babel/runtime-corejs3/helpers/typeof';
 import _defineProperty from '@babel/runtime-corejs3/helpers/defineProperty';
-import _inherits from '@babel/runtime-corejs3/helpers/inherits';
-import _setPrototypeOf from '@babel/runtime-corejs3/helpers/setPrototypeOf';
 import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/objectWithoutProperties';
 import { jsx } from 'react/jsx-runtime';
 import { Input, Popover } from 'antd';
 import Picker from './Picker.js';
-import { useMemo } from 'react';
 import { useClassName } from '../../hooks/index.js';
 
 var _excluded = ["value", "onChange", "defaultColor"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _wrapRegExp() { _wrapRegExp = function _wrapRegExp(e, r) { return new BabelRegExp(e, void 0, r); }; var e = RegExp.prototype, r = new WeakMap(); function BabelRegExp(e, t, p) { var o = RegExp(e, t); return r.set(o, p || r.get(e)), _setPrototypeOf(o, BabelRegExp.prototype); } function buildGroups(e, t) { var p = r.get(t); return Object.keys(p).reduce(function (r, t) { var o = p[t]; if ("number" == typeof o) r[t] = e[o];else { for (var i = 0; void 0 === e[o[i]] && i + 1 < o.length;) i++; r[t] = e[o[i]]; } return r; }, Object.create(null)); } return _inherits(BabelRegExp, RegExp), BabelRegExp.prototype.exec = function (r) { var t = e.exec.call(this, r); if (t) { t.groups = buildGroups(t, this); var p = t.indices; p && (p.groups = buildGroups(p, this)); } return t; }, BabelRegExp.prototype[Symbol.replace] = function (t, p) { if ("string" == typeof p) { var o = r.get(this); return e[Symbol.replace].call(this, t, p.replace(/\$<([^>]+)>/g, function (e, r) { var t = o[r]; return "$" + (Array.isArray(t) ? t.join("$") : t); })); } if ("function" == typeof p) { var i = this; return e[Symbol.replace].call(this, t, function () { var e = arguments; return "object" != _typeof(e[e.length - 1]) && (e = [].slice.call(e)).push(buildGroups(e, i)), p.apply(this, e); }); } return e[Symbol.replace].call(this, t, p); }, _wrapRegExp.apply(this, arguments); }
 var ColorInput = (function (_ref) {
   var value = _ref.value,
-    onChange = _ref.onChange,
+    _onChange = _ref.onChange,
     _ref$defaultColor = _ref.defaultColor,
     defaultColor = _ref$defaultColor === void 0 ? "rgba(0,0,0,1)" : _ref$defaultColor,
     props = _objectWithoutProperties(_ref, _excluded);
   var classname = useClassName("hw-color-box");
   var inputVal = value === null || value === void 0 ? void 0 : value.trim();
-  var pickerValue = useMemo(function () {
-    var matchVal = inputVal || defaultColor;
-    if (typeof matchVal === "string") {
-      var _result$groups;
-      if (matchVal.startsWith("#")) {
-        return matchVal;
-      }
-      var rgbaRegular = /*#__PURE__*/_wrapRegExp(/((rgba\())(.*?)(?=(\)))/, {
-        rgba: 3
-      });
-      var result = matchVal.match(rgbaRegular);
-      if (result !== null && result !== void 0 && (_result$groups = result.groups) !== null && _result$groups !== void 0 && _result$groups.rgba) {
-        var rgbas = result.groups.rgba.split(",");
-        return {
-          r: Number(rgbas[0]),
-          g: Number(rgbas[1]),
-          b: Number(rgbas[2]),
-          a: Number(rgbas[3])
-        };
-      }
-    }
-    return "";
-  }, [inputVal]);
   var colorChange = function colorChange(val) {
     var rgb = val.rgb;
     var text = "rgba(".concat(rgb.r, ",").concat(rgb.g, ",").concat(rgb.b, ",").concat(rgb.a, ")");
-    onChange === null || onChange === void 0 || onChange(text);
+    _onChange === null || _onChange === void 0 || _onChange(text);
   };
   return jsx(Input, _objectSpread(_objectSpread({}, props), {}, {
     value: value,
-    onChange: onChange,
+    onChange: function onChange(e) {
+      _onChange === null || _onChange === void 0 || _onChange(e.target.value);
+    },
     suffix: jsx(Popover, {
       trigger: "click",
       content: jsx(Picker, {
-        value: pickerValue,
+        value: value,
         onChange: colorChange
       }),
       placement: "topLeft",

package/lib/Input/ColorInput/index.js

@@ -2,64 +2,38 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _typeof = require('@babel/runtime-corejs3/helpers/typeof');
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
-var _inherits = require('@babel/runtime-corejs3/helpers/inherits');
-var _setPrototypeOf = require('@babel/runtime-corejs3/helpers/setPrototypeOf');
 var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
 var jsxRuntime = require('react/jsx-runtime');
 var antd = require('antd');
 var Picker = require('./Picker.js');
-var React = require('react');
 var index = require('../../hooks/index.js');
 
 var _excluded = ["value", "onChange", "defaultColor"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _wrapRegExp() { _wrapRegExp = function _wrapRegExp(e, r) { return new BabelRegExp(e, void 0, r); }; var e = RegExp.prototype, r = new WeakMap(); function BabelRegExp(e, t, p) { var o = RegExp(e, t); return r.set(o, p || r.get(e)), _setPrototypeOf(o, BabelRegExp.prototype); } function buildGroups(e, t) { var p = r.get(t); return Object.keys(p).reduce(function (r, t) { var o = p[t]; if ("number" == typeof o) r[t] = e[o];else { for (var i = 0; void 0 === e[o[i]] && i + 1 < o.length;) i++; r[t] = e[o[i]]; } return r; }, Object.create(null)); } return _inherits(BabelRegExp, RegExp), BabelRegExp.prototype.exec = function (r) { var t = e.exec.call(this, r); if (t) { t.groups = buildGroups(t, this); var p = t.indices; p && (p.groups = buildGroups(p, this)); } return t; }, BabelRegExp.prototype[Symbol.replace] = function (t, p) { if ("string" == typeof p) { var o = r.get(this); return e[Symbol.replace].call(this, t, p.replace(/\$<([^>]+)>/g, function (e, r) { var t = o[r]; return "$" + (Array.isArray(t) ? t.join("$") : t); })); } if ("function" == typeof p) { var i = this; return e[Symbol.replace].call(this, t, function () { var e = arguments; return "object" != _typeof(e[e.length - 1]) && (e = [].slice.call(e)).push(buildGroups(e, i)), p.apply(this, e); }); } return e[Symbol.replace].call(this, t, p); }, _wrapRegExp.apply(this, arguments); }
 var ColorInput = (function (_ref) {
   var value = _ref.value,
-    onChange = _ref.onChange,
+    _onChange = _ref.onChange,
     _ref$defaultColor = _ref.defaultColor,
     defaultColor = _ref$defaultColor === void 0 ? "rgba(0,0,0,1)" : _ref$defaultColor,
     props = _objectWithoutProperties(_ref, _excluded);
   var classname = index.useClassName("hw-color-box");
   var inputVal = value === null || value === void 0 ? void 0 : value.trim();
-  var pickerValue = React.useMemo(function () {
-    var matchVal = inputVal || defaultColor;
-    if (typeof matchVal === "string") {
-      var _result$groups;
-      if (matchVal.startsWith("#")) {
-        return matchVal;
-      }
-      var rgbaRegular = /*#__PURE__*/_wrapRegExp(/((rgba\())(.*?)(?=(\)))/, {
-        rgba: 3
-      });
-      var result = matchVal.match(rgbaRegular);
-      if (result !== null && result !== void 0 && (_result$groups = result.groups) !== null && _result$groups !== void 0 && _result$groups.rgba) {
-        var rgbas = result.groups.rgba.split(",");
-        return {
-          r: Number(rgbas[0]),
-          g: Number(rgbas[1]),
-          b: Number(rgbas[2]),
-          a: Number(rgbas[3])
-        };
-      }
-    }
-    return "";
-  }, [inputVal]);
   var colorChange = function colorChange(val) {
     var rgb = val.rgb;
     var text = "rgba(".concat(rgb.r, ",").concat(rgb.g, ",").concat(rgb.b, ",").concat(rgb.a, ")");
-    onChange === null || onChange === void 0 || onChange(text);
+    _onChange === null || _onChange === void 0 || _onChange(text);
   };
   return jsxRuntime.jsx(antd.Input, _objectSpread(_objectSpread({}, props), {}, {
     value: value,
-    onChange: onChange,
+    onChange: function onChange(e) {
+      _onChange === null || _onChange === void 0 || _onChange(e.target.value);
+    },
     suffix: jsxRuntime.jsx(antd.Popover, {
       trigger: "click",
       content: jsxRuntime.jsx(Picker.default, {
-        value: pickerValue,
+        value: value,
         onChange: colorChange
       }),
       placement: "topLeft",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hw-component/form",
-  "version": "1.9.16",
+  "version": "1.9.17",
   "description": "基于antd二次开发",
   "repository": {
     "type": "git",

package/src/components/Input/ColorInput/index.tsx

@@ -1,7 +1,6 @@
 import type { HInputProps } from "@/components/Input/modal";
 import { Input, Popover } from "antd";
 import Picker from "./Picker";
-import { useMemo } from "react";
 import { useClassName } from "../../hooks";
 export default ({
   value,
@@ -11,26 +10,6 @@ export default ({
 }: HInputProps) => {
   const classname = useClassName("hw-color-box");
   const inputVal = value?.trim();
-  const pickerValue = useMemo(() => {
-    const matchVal = inputVal || defaultColor;
-    if (typeof matchVal === "string") {
-      if (matchVal.startsWith("#")) {
-        return matchVal;
-      }
-      const rgbaRegular = /((rgba\())(?<rgba>.*?)(?=(\)))/;
-      const result = matchVal.match(rgbaRegular);
-      if (result?.groups?.rgba) {
-        const rgbas = result.groups.rgba.split(",");
-        return {
-          r: Number(rgbas[0]),
-          g: Number(rgbas[1]),
-          b: Number(rgbas[2]),
-          a: Number(rgbas[3]),
-        };
-      }
-    }
-    return "";
-  }, [inputVal]);
   const colorChange = (val) => {
     const { rgb } = val;
     const text = `rgba(${rgb.r},${rgb.g},${rgb.b},${rgb.a})`;
@@ -40,11 +19,13 @@ export default ({
     <Input
       {...props}
       value={value}
-      onChange={onChange}
+      onChange={(e)=>{
+        onChange?.(e.target.value)
+      }}
       suffix={
         <Popover
           trigger="click"
-          content={<Picker value={pickerValue} onChange={colorChange} />}
+          content={<Picker value={value} onChange={colorChange} />}
           placement="topLeft"
         >
           <div

package/src/pages/Input/index.tsx

@@ -8,7 +8,9 @@ import {
   HInputNumberGroup,
 } from "../../components";
 import { Space } from "antd";
+import {useState} from "react";
 export default () => {
+  const [colorVal,setColorVal]=useState();
   return (
     <Space size={"large"} direction={"vertical"} style={{ width: "100%" }}>
       <HInput placeholder="基础输入框" copy value="11111" />
@@ -20,7 +22,7 @@ export default () => {
       />
       <HButtonInput>点我</HButtonInput>
       <HInputNumber />
-      <HColorInput />
+      <HColorInput value={colorVal} onChange={setColorVal}/>
       <HVerificationCodeInput
         request={() => {
           return Promise.resolve({ code: 200 });