@hw-component/form 1.9.15 → 1.9.17

package/es/Form/Label.js

@@ -29,6 +29,7 @@ var Index = function Index(_ref2) {
   var className = useClassName([].concat(array, ["hw-form-label-item"]));
   var requiredClass = useClassName("hw-form-item-required");
   var noRequiredClass = useClassName("hw-form-item-no-required");
+  var tooltipClassName = useClassName("hw-form-label-item-tooltip");
   return jsxs("div", {
     style: {
       width: labelWidth
@@ -37,9 +38,7 @@ var Index = function Index(_ref2) {
     children: [jsx("span", {
       className: required ? requiredClass : noRequiredClass
     }), children, text && jsx("span", {
-      style: {
-        marginLeft: 4
-      },
+      className: tooltipClassName,
       children: jsx(Tooltip, {
         placement: "top",
         title: text,

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/es/index.css

@@ -13,6 +13,13 @@
   margin: 0 0 0 2px;
   content: ":";
 }
+.ant-hw-form-label-item-tooltip {
+  margin-left: 4px;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
 .ant-hw-form-base-item {
   display: -webkit-box;
   display: -webkit-flex;
@@ -37,6 +44,14 @@
 }
 .ant-hw-form-base-item-top-left .ant-hw-form-label-item {
   position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
 .ant-hw-form-base-item-top-right .ant-form-item-label > label {
   height: auto;
@@ -49,12 +64,28 @@
 }
 .ant-hw-form-base-item-right > .ant-form-item-label .ant-hw-form-label-item {
   text-align: right;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
 .ant-hw-form-base-item-right > .ant-form-item-label .ant-form-item-label > label {
   height: 32px;
 }
 .ant-hw-form-base-item-left > .ant-form-item-label .ant-hw-form-label-item {
   text-align: left;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
 .ant-hw-form-base-item-left > .ant-form-item-label .ant-hw-form-item-required {
   position: absolute;
@@ -63,6 +94,14 @@
 }
 .ant-hw-form-base-item-left > .ant-form-item-label .ant-hw-form-label-item {
   position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
 .ant-hw-form-base-item-left > .ant-form-item-label .ant-form-item-label > label {
   height: 32px;

package/lib/Form/Label.js

@@ -32,6 +32,7 @@ var Index = function Index(_ref2) {
   var className = index.useClassName([].concat(array, ["hw-form-label-item"]));
   var requiredClass = index.useClassName("hw-form-item-required");
   var noRequiredClass = index.useClassName("hw-form-item-no-required");
+  var tooltipClassName = index.useClassName("hw-form-label-item-tooltip");
   return jsxRuntime.jsxs("div", {
     style: {
       width: labelWidth
@@ -40,9 +41,7 @@ var Index = function Index(_ref2) {
     children: [jsxRuntime.jsx("span", {
       className: required ? requiredClass : noRequiredClass
     }), children, text && jsxRuntime.jsx("span", {
-      style: {
-        marginLeft: 4
-      },
+      className: tooltipClassName,
       children: jsxRuntime.jsx(antd.Tooltip, {
         placement: "top",
         title: text,

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/lib/index.css

@@ -13,6 +13,13 @@
   margin: 0 0 0 2px;
   content: ":";
 }
+.ant-hw-form-label-item-tooltip {
+  margin-left: 4px;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
 .ant-hw-form-base-item {
   display: -webkit-box;
   display: -webkit-flex;
@@ -37,6 +44,14 @@
 }
 .ant-hw-form-base-item-top-left .ant-hw-form-label-item {
   position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
 .ant-hw-form-base-item-top-right .ant-form-item-label > label {
   height: auto;
@@ -49,12 +64,28 @@
 }
 .ant-hw-form-base-item-right > .ant-form-item-label .ant-hw-form-label-item {
   text-align: right;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
 .ant-hw-form-base-item-right > .ant-form-item-label .ant-form-item-label > label {
   height: 32px;
 }
 .ant-hw-form-base-item-left > .ant-form-item-label .ant-hw-form-label-item {
   text-align: left;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
 .ant-hw-form-base-item-left > .ant-form-item-label .ant-hw-form-item-required {
   position: absolute;
@@ -63,6 +94,14 @@
 }
 .ant-hw-form-base-item-left > .ant-form-item-label .ant-hw-form-label-item {
   position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
 .ant-hw-form-base-item-left > .ant-form-item-label .ant-form-item-label > label {
   height: 32px;

package/package.json

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

package/src/components/Form/Label.tsx

@@ -32,12 +32,13 @@ const Index: React.FC<IProps> = ({
   const className = useClassName([...array, "hw-form-label-item"]);
   const requiredClass = useClassName("hw-form-item-required");
   const noRequiredClass = useClassName("hw-form-item-no-required");
+  const tooltipClassName=useClassName("hw-form-label-item-tooltip")
   return (
     <div style={{ width: labelWidth }} className={className}>
       <span className={required ? requiredClass : noRequiredClass} />
       {children}
       {text && (
-        <span style={{ marginLeft: 4 }}>
+        <span className={tooltipClassName}>
           <Tooltip placement="top" title={text}>
             {icon}
           </Tooltip>

package/src/components/Form/index.less

@@ -5,6 +5,10 @@
   margin: 0 0 0 2px;
   content: ":";
 }
+.@{ant-prefix}-hw-form-label-item-tooltip {
+  margin-left: 4px;
+  display: inline-flex;
+}
 .@{ant-prefix}-hw-form-base-item {
   display: flex;
   align-items: center;
@@ -24,6 +28,8 @@
   }
   .@{ant-prefix}-hw-form-label-item {
     position: relative;
+    display: flex;
+    align-items: center;
   }
 }
 .@{ant-prefix}-hw-form-base-item-top-right {
@@ -42,6 +48,8 @@
 .@{ant-prefix}-hw-form-base-item-right > .@{ant-prefix}-form-item-label {
   .@{ant-prefix}-hw-form-label-item {
     text-align: right;
+    display: flex;
+    align-items: center;
   }
   .@{ant-prefix}-form-item-label > label {
     height: 32px;
@@ -51,6 +59,8 @@
 .@{ant-prefix}-hw-form-base-item-left > .@{ant-prefix}-form-item-label {
   .@{ant-prefix}-hw-form-label-item {
     text-align: left;
+    display: flex;
+    align-items: center;
   }
   .@{ant-prefix}-hw-form-item-required {
     position: absolute;
@@ -59,6 +69,8 @@
   }
   .@{ant-prefix}-hw-form-label-item {
     position: relative;
+    display: flex;
+    align-items: center;
   }
   .@{ant-prefix}-form-item-label > label {
     height: 32px;

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/Form/index.tsx

@@ -69,21 +69,29 @@ const formData = (options) => {
     {
       name: "name",
       label: "输入框",
-      hidden: (form) => {
-        const { check } = form.getFieldsValue();
-        console.log(check, "name");
-        return !check?.vv;
-      },
+      itemProps: {
+
+      }
     },
     {
       name: "url",
       type: "urlUpload",
       label: "文本",
+        itemProps: {
+            initValueProvider:(props,val)=>{
+                console.log(props,val,"fff")
+                return {
+                    ...val,
+                    name:"ffffsfsadasda"
+                }
+            }
+        }
     },
     {
       label: "输入框",
       type: "checkboxGroup",
       name: "check",
+      hover:"你好",
       itemProps: {
         options: [
           {

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 });