@hw-component/form 1.7.7 → 1.7.8

package/es/Input/InputNumberGroup.js

@@ -75,6 +75,7 @@ var InputNumberGroup = function InputNumberGroup(_ref) {
   var borderClassname = useClassName(["hw-input-group-border"]);
   var oneClassname = useClassName(["hw-input-group-one"]);
   var iconClassname = useClassName(["hw-input-group-icon"]);
+  useClassName(["hw-input-group-disabled"]);
   var noHandlerWrapClassname = useClassName(["hw-input-group-no-handler-wrap"]);
   addFormat === null || addFormat === void 0 || addFormat({
     float: {
@@ -116,7 +117,7 @@ var InputNumberGroup = function InputNumberGroup(_ref) {
       value: value,
       onChange: onChange
     }) : addonAfter, jsxs("div", {
-      className: "".concat(bodyClassname, " ").concat(focus ? activeClassname : "", " ").concat(noHandlerWrap ? noHandlerWrapClassname : ""),
+      className: "".concat(bodyClassname, " \n        ").concat(focus ? activeClassname : "", " \n        ").concat(noHandlerWrap ? noHandlerWrapClassname : "", "\n      \n        "),
       children: [jsx("span", {
         className: borderClassname
       }), jsx(InputNumber, _objectSpread({
@@ -135,8 +136,9 @@ var InputNumberGroup = function InputNumberGroup(_ref) {
           change(min, val);
         },
         placeholder: fsPlaceholder
-      }, fsProps)), jsx(SwapRightOutlined, {
-        className: iconClassname
+      }, fsProps)), jsx("div", {
+        className: iconClassname,
+        children: jsx(SwapRightOutlined, {})
       }), jsx(InputNumber, _objectSpread({
         bordered: false,
         value: maxVal,

package/es/Select/hooks/changeHooks.js

@@ -1,10 +1,22 @@
 // welcome to hoo hoo hoo
+import _defineProperty from '@babel/runtime-corejs3/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/objectWithoutProperties';
 import _slicedToArray from '@babel/runtime-corejs3/helpers/slicedToArray';
 import 'core-js/modules/es.array.map.js';
+import 'core-js/modules/es.object.keys.js';
+import 'core-js/modules/es.symbol.js';
+import 'core-js/modules/es.array.filter.js';
+import 'core-js/modules/es.object.to-string.js';
+import 'core-js/modules/es.object.get-own-property-descriptor.js';
+import 'core-js/modules/web.dom-collections.for-each.js';
+import 'core-js/modules/es.object.get-own-property-descriptors.js';
 import { useState, useEffect } from 'react';
 import { itemOpProvider } from '../utils.js';
 import { matchNotFind } from './util.js';
 
+var _excluded = ["label", "value"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var useValueChange = function useValueChange(params) {
   var labelInValue = params.labelInValue,
     onChange = params.onChange,
@@ -18,6 +30,28 @@ var useValueChange = function useValueChange(params) {
     _useState2 = _slicedToArray(_useState, 2),
     val = _useState2[0],
     setVal = _useState2[1];
+  var labelInValueItemMaker = function labelInValueItemMaker(changeVal) {
+    var _objectSpread2;
+    var _fieldNames$value = fieldNames.value,
+      fieldValue = _fieldNames$value === void 0 ? "value" : _fieldNames$value,
+      _fieldNames$label = fieldNames.label,
+      fieldLabel = _fieldNames$label === void 0 ? "label" : _fieldNames$label;
+    var changeLabel = changeVal.label,
+      changeValue = changeVal.value,
+      oVal = _objectWithoutProperties(changeVal, _excluded);
+    return _objectSpread((_objectSpread2 = {}, _defineProperty(_objectSpread2, fieldValue, changeValue), _defineProperty(_objectSpread2, fieldLabel, changeLabel), _objectSpread2), oVal);
+  };
+  var labelInValueMaker = function labelInValueMaker(changeVal) {
+    if (!changeVal) {
+      return undefined;
+    }
+    if (!Array.isArray(changeVal)) {
+      return labelInValueItemMaker(changeVal);
+    }
+    return changeVal.map(function (item) {
+      return labelInValueItemMaker(item);
+    });
+  };
   var change = function change(changeVal, itemOps) {
     if (!onChange) {
       setVal(changeVal);
@@ -27,16 +61,17 @@ var useValueChange = function useValueChange(params) {
       onChange(changeVal, itemOps);
       return;
     }
-    var newChangeVal = changeVal.value;
+    var subItemOps = itemOpProvider(itemOps, fieldNames);
     if (labelInValue) {
-      newChangeVal = changeVal;
+      onChange(labelInValueMaker(changeVal), itemOps);
+      return;
     }
-    if (Array.isArray(changeVal)) {
+    var newChangeVal = changeVal.value;
+    if (Array.isArray(changeVal) && !labelInValue) {
       newChangeVal = changeVal.map(function (item) {
         return item.value;
       });
     }
-    var subItemOps = itemOpProvider(itemOps, fieldNames);
     onChange(newChangeVal, subItemOps);
   };
   useEffect(function () {
@@ -44,7 +79,7 @@ var useValueChange = function useValueChange(params) {
       setVal(undefined);
       return;
     }
-    if (mode === "tags") {
+    if (mode === "tags" || labelInValue) {
       setVal(value);
       return;
     }
@@ -58,6 +93,18 @@ var useValueChange = function useValueChange(params) {
     var itemVal = item.value,
       label = item.label,
       noMatch = item.noMatch;
+    var _fieldNames$value2 = fieldNames.value,
+      fieldValue = _fieldNames$value2 === void 0 ? "value" : _fieldNames$value2,
+      _fieldNames$label2 = fieldNames.label,
+      fieldLabel = _fieldNames$label2 === void 0 ? "label" : _fieldNames$label2;
+    if (labelInValue) {
+      var changeVal = item[fieldValue],
+        changeLable = item[fieldLabel];
+      return {
+        value: changeVal,
+        label: changeLable
+      };
+    }
     if (noMatch) {
       return {
         value: itemVal,
@@ -72,9 +119,6 @@ var useValueChange = function useValueChange(params) {
     };
   };
   var valuesMaker = function valuesMaker() {
-    if (labelInValue) {
-      return val;
-    }
     if (val === undefined || mode === "tags") {
       return val;
     }

package/es/index.css

@@ -83,15 +83,15 @@
 .ant-hw-form-form-item .ant-form-item-label {
   overflow: visible;
 }
+.ant-hw-input-group .ant-hw-input-group-disabled,
+.ant-hw-input-group-disabled .ant-hw-input-group-disabled {
+  background-color: #f5f5f5;
+}
 .ant-hw-input-group {
   display: -webkit-box !important;
   display: -webkit-flex !important;
   display: -ms-flexbox !important;
   display: flex !important;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
   width: 100%;
   color: rgba(0, 0, 0, 0.25);
 }
@@ -105,10 +105,6 @@
   -webkit-flex: 1;
       -ms-flex: 1;
           flex: 1;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
   border: 1px solid #d9d9d9;
 }
 .ant-hw-input-group .ant-hw-input-group-body:hover {
@@ -132,7 +128,16 @@
   background-color: #40a9ff;
 }
 .ant-hw-input-group .ant-hw-input-group-icon {
+  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;
   padding: 0 4px;
+  color: rgba(0, 0, 0, 0.25);
 }
 .ant-hw-input-group .ant-hw-input-group-one {
   -webkit-box-flex: 1;

package/lib/Input/InputNumberGroup.js

@@ -78,6 +78,7 @@ var InputNumberGroup = function InputNumberGroup(_ref) {
   var borderClassname = index.useClassName(["hw-input-group-border"]);
   var oneClassname = index.useClassName(["hw-input-group-one"]);
   var iconClassname = index.useClassName(["hw-input-group-icon"]);
+  index.useClassName(["hw-input-group-disabled"]);
   var noHandlerWrapClassname = index.useClassName(["hw-input-group-no-handler-wrap"]);
   addFormat === null || addFormat === void 0 || addFormat({
     float: {
@@ -119,7 +120,7 @@ var InputNumberGroup = function InputNumberGroup(_ref) {
       value: value,
       onChange: onChange
     }) : addonAfter, jsxRuntime.jsxs("div", {
-      className: "".concat(bodyClassname, " ").concat(focus ? activeClassname : "", " ").concat(noHandlerWrap ? noHandlerWrapClassname : ""),
+      className: "".concat(bodyClassname, " \n        ").concat(focus ? activeClassname : "", " \n        ").concat(noHandlerWrap ? noHandlerWrapClassname : "", "\n      \n        "),
       children: [jsxRuntime.jsx("span", {
         className: borderClassname
       }), jsxRuntime.jsx(antd.InputNumber, _objectSpread({
@@ -138,8 +139,9 @@ var InputNumberGroup = function InputNumberGroup(_ref) {
           change(min, val);
         },
         placeholder: fsPlaceholder
-      }, fsProps)), jsxRuntime.jsx(icons.SwapRightOutlined, {
-        className: iconClassname
+      }, fsProps)), jsxRuntime.jsx("div", {
+        className: iconClassname,
+        children: jsxRuntime.jsx(icons.SwapRightOutlined, {})
       }), jsxRuntime.jsx(antd.InputNumber, _objectSpread({
         bordered: false,
         value: maxVal,

package/lib/Select/hooks/changeHooks.js

@@ -1,11 +1,23 @@
 'use strict';
 
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
 var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
 require('core-js/modules/es.array.map.js');
+require('core-js/modules/es.object.keys.js');
+require('core-js/modules/es.symbol.js');
+require('core-js/modules/es.array.filter.js');
+require('core-js/modules/es.object.to-string.js');
+require('core-js/modules/es.object.get-own-property-descriptor.js');
+require('core-js/modules/web.dom-collections.for-each.js');
+require('core-js/modules/es.object.get-own-property-descriptors.js');
 var React = require('react');
 var utils = require('../utils.js');
 var util = require('./util.js');
 
+var _excluded = ["label", "value"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var useValueChange = function useValueChange(params) {
   var labelInValue = params.labelInValue,
     onChange = params.onChange,
@@ -19,6 +31,28 @@ var useValueChange = function useValueChange(params) {
     _useState2 = _slicedToArray(_useState, 2),
     val = _useState2[0],
     setVal = _useState2[1];
+  var labelInValueItemMaker = function labelInValueItemMaker(changeVal) {
+    var _objectSpread2;
+    var _fieldNames$value = fieldNames.value,
+      fieldValue = _fieldNames$value === void 0 ? "value" : _fieldNames$value,
+      _fieldNames$label = fieldNames.label,
+      fieldLabel = _fieldNames$label === void 0 ? "label" : _fieldNames$label;
+    var changeLabel = changeVal.label,
+      changeValue = changeVal.value,
+      oVal = _objectWithoutProperties(changeVal, _excluded);
+    return _objectSpread((_objectSpread2 = {}, _defineProperty(_objectSpread2, fieldValue, changeValue), _defineProperty(_objectSpread2, fieldLabel, changeLabel), _objectSpread2), oVal);
+  };
+  var labelInValueMaker = function labelInValueMaker(changeVal) {
+    if (!changeVal) {
+      return undefined;
+    }
+    if (!Array.isArray(changeVal)) {
+      return labelInValueItemMaker(changeVal);
+    }
+    return changeVal.map(function (item) {
+      return labelInValueItemMaker(item);
+    });
+  };
   var change = function change(changeVal, itemOps) {
     if (!onChange) {
       setVal(changeVal);
@@ -28,16 +62,17 @@ var useValueChange = function useValueChange(params) {
       onChange(changeVal, itemOps);
       return;
     }
-    var newChangeVal = changeVal.value;
+    var subItemOps = utils.itemOpProvider(itemOps, fieldNames);
     if (labelInValue) {
-      newChangeVal = changeVal;
+      onChange(labelInValueMaker(changeVal), itemOps);
+      return;
     }
-    if (Array.isArray(changeVal)) {
+    var newChangeVal = changeVal.value;
+    if (Array.isArray(changeVal) && !labelInValue) {
       newChangeVal = changeVal.map(function (item) {
         return item.value;
       });
     }
-    var subItemOps = utils.itemOpProvider(itemOps, fieldNames);
     onChange(newChangeVal, subItemOps);
   };
   React.useEffect(function () {
@@ -45,7 +80,7 @@ var useValueChange = function useValueChange(params) {
       setVal(undefined);
       return;
     }
-    if (mode === "tags") {
+    if (mode === "tags" || labelInValue) {
       setVal(value);
       return;
     }
@@ -59,6 +94,18 @@ var useValueChange = function useValueChange(params) {
     var itemVal = item.value,
       label = item.label,
       noMatch = item.noMatch;
+    var _fieldNames$value2 = fieldNames.value,
+      fieldValue = _fieldNames$value2 === void 0 ? "value" : _fieldNames$value2,
+      _fieldNames$label2 = fieldNames.label,
+      fieldLabel = _fieldNames$label2 === void 0 ? "label" : _fieldNames$label2;
+    if (labelInValue) {
+      var changeVal = item[fieldValue],
+        changeLable = item[fieldLabel];
+      return {
+        value: changeVal,
+        label: changeLable
+      };
+    }
     if (noMatch) {
       return {
         value: itemVal,
@@ -73,9 +120,6 @@ var useValueChange = function useValueChange(params) {
     };
   };
   var valuesMaker = function valuesMaker() {
-    if (labelInValue) {
-      return val;
-    }
     if (val === undefined || mode === "tags") {
       return val;
     }

package/lib/index.css

@@ -83,15 +83,15 @@
 .ant-hw-form-form-item .ant-form-item-label {
   overflow: visible;
 }
+.ant-hw-input-group .ant-hw-input-group-disabled,
+.ant-hw-input-group-disabled .ant-hw-input-group-disabled {
+  background-color: #f5f5f5;
+}
 .ant-hw-input-group {
   display: -webkit-box !important;
   display: -webkit-flex !important;
   display: -ms-flexbox !important;
   display: flex !important;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
   width: 100%;
   color: rgba(0, 0, 0, 0.25);
 }
@@ -105,10 +105,6 @@
   -webkit-flex: 1;
       -ms-flex: 1;
           flex: 1;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
   border: 1px solid #d9d9d9;
 }
 .ant-hw-input-group .ant-hw-input-group-body:hover {
@@ -132,7 +128,16 @@
   background-color: #40a9ff;
 }
 .ant-hw-input-group .ant-hw-input-group-icon {
+  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;
   padding: 0 4px;
+  color: rgba(0, 0, 0, 0.25);
 }
 .ant-hw-input-group .ant-hw-input-group-one {
   -webkit-box-flex: 1;

package/package.json

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

package/src/components/Form/Basic.tsx

@@ -33,6 +33,7 @@ export default ({configData,gutter}:HFormProps)=>{
               ...formItemProps,
               ...itemProps,
           };
+
           return (
               <Item
                   {...itemData}

package/src/components/Input/InputNumberGroup.tsx

@@ -36,6 +36,7 @@ const InputNumberGroup = ({
   addonAfter,
   noHandlerWrap = true,
   addFormat,
+
 }: IProps) => {
   const { min, max } = valueMap;
   const { [min]: minVal, [max]: maxVal } = value;
@@ -48,6 +49,7 @@ const InputNumberGroup = ({
   const borderClassname = useClassName(["hw-input-group-border"]);
   const oneClassname = useClassName(["hw-input-group-one"]);
   const iconClassname = useClassName(["hw-input-group-icon"]);
+  const disabledClassname=useClassName(["hw-input-group-disabled"])
   const noHandlerWrapClassname = useClassName([
     "hw-input-group-no-handler-wrap",
   ]);
@@ -95,9 +97,11 @@ const InputNumberGroup = ({
         ? React.cloneElement(addonAfter as any, { value, onChange })
         : addonAfter}
       <div
-        className={`${bodyClassname} ${focus ? activeClassname : ""} ${
-          noHandlerWrap ? noHandlerWrapClassname : ""
-        }`}
+        className={`${bodyClassname} 
+        ${focus ? activeClassname : ""} 
+        ${noHandlerWrap ? noHandlerWrapClassname : ""}
+      
+        `}
       >
         <span className={borderClassname} />
         <InputNumber<number>
@@ -118,7 +122,9 @@ const InputNumberGroup = ({
           placeholder={fsPlaceholder}
           {...fsProps}
         />
-        <SwapRightOutlined className={iconClassname} />
+       <div className={iconClassname}>
+         <SwapRightOutlined  />
+       </div>
         <InputNumber<number>
           bordered={false}
           value={maxVal}

package/src/components/Input/index.less

@@ -1,15 +1,19 @@
 @import "../styles/local.less";
 @all-input-group: ~"@{ant-prefix}-hw-input-group";
+
+.@{all-input-group},.@{all-input-group}-disabled{
+  .@{all-input-group}-disabled{
+    background-color: #f5f5f5;
+  }
+}
 .@{all-input-group} {
   display: flex !important;
-  align-items: center;
   width: 100%;
   color: rgba(0, 0, 0, 0.25);
   .@{all-input-group}-body {
     position: relative;
     display: flex !important;
     flex: 1;
-    align-items: center;
     border: 1px solid #d9d9d9;
     &:hover {
       border-color: #40a9ff;
@@ -35,7 +39,10 @@
     background-color: #40a9ff;
   }
   .@{all-input-group}-icon {
+    display: flex;
+    align-items: center;
     padding: 0 4px;
+    color:rgba(0, 0, 0, 0.25);
   }
   .@{all-input-group}-one {
     flex: 1;

package/src/components/Select/hooks/changeHooks.tsx

@@ -13,7 +13,26 @@ export const useValueChange = (params: PartialHSelectProps) => {
     fieldNames = {},
   } = params;
   const [val, setVal] = useState<any>();
-
+  const labelInValueItemMaker=(changeVal)=>{
+    const {value:fieldValue="value",label:fieldLabel="label"}=fieldNames;
+    const {label:changeLabel,value:changeValue,...oVal}=changeVal;
+    return  {
+      [fieldValue]:changeValue,
+      [fieldLabel]:changeLabel,
+      ...oVal
+    }
+  }
+  const labelInValueMaker=(changeVal)=>{
+      if (!changeVal){
+         return undefined;
+      }
+      if (!Array.isArray(changeVal)){
+         return  labelInValueItemMaker(changeVal)
+      }
+      return  changeVal.map((item)=>{
+        return  labelInValueItemMaker(item)
+      })
+  }
   const change = (changeVal, itemOps) => {
     if (!onChange) {
       setVal(changeVal);
@@ -23,16 +42,17 @@ export const useValueChange = (params: PartialHSelectProps) => {
       onChange(changeVal, itemOps);
       return;
     }
-    let newChangeVal = changeVal.value;
+    const subItemOps = itemOpProvider(itemOps, fieldNames);
     if (labelInValue) {
-      newChangeVal = changeVal;
+      onChange(labelInValueMaker(changeVal),itemOps);
+      return;
     }
-    if (Array.isArray(changeVal)) {
+    let newChangeVal = changeVal.value;
+    if (Array.isArray(changeVal)&&!labelInValue) {
       newChangeVal = changeVal.map((item) => {
         return item.value;
       });
     }
-    const subItemOps = itemOpProvider(itemOps, fieldNames);
     onChange(newChangeVal, subItemOps);
   };
   useEffect(() => {
@@ -40,10 +60,11 @@ export const useValueChange = (params: PartialHSelectProps) => {
       setVal(undefined);
       return;
     }
-    if (mode === "tags") {
+    if (mode === "tags"||labelInValue) {
       setVal(value);
       return;
     }
+
     if (options) {
       setVal((oldVale) => {
         return matchNotFind(params, oldVale);
@@ -52,6 +73,14 @@ export const useValueChange = (params: PartialHSelectProps) => {
   }, [value, options, mode]);
   const itemMaker = (item) => {
     const { value: itemVal, label, noMatch } = item;
+    const {value:fieldValue="value",label:fieldLabel="label"}=fieldNames;
+    if (labelInValue){
+        const {[fieldValue]:changeVal,[fieldLabel]:changeLable}=item;
+        return  {
+          value:changeVal,
+          label: changeLable
+        };
+    }
     if (noMatch) {
       return {
         value: itemVal,
@@ -64,9 +93,6 @@ export const useValueChange = (params: PartialHSelectProps) => {
     };
   };
   const valuesMaker = () => {
-    if (labelInValue) {
-      return val;
-    }
     if (val === undefined || mode === "tags") {
       return val;
     }

package/src/pages/Form/index.tsx

@@ -4,86 +4,100 @@ import {
     HFormConfigProvider,
     HSwitch,
     useHForm,
+    HSelect
 } from "../../components";
 import { useState } from "react";
-import { Button, DatePicker, Form, Input, Row } from "antd";
+import {Button, DatePicker, Form, Input, Row, Space} from "antd";
 const Test2 = () => {
   return <Row style={{ background: "red" }} />;
 };
-const Test3 = ({ value, onChange }) => {
-  return (
-    <Input
-      value={value.input}
-      style={{ width: 100 }}
-      onChange={(e) => {
-        onChange({
-          ...value,
-          input: e.target.value,
-        });
-      }}
-    />
-  );
+const Test3 = ({ value={}, onChange }) => {
+    const {fs,end}=value;
+    return <Space>
+        <HSelect
+            options={[{value:"1321",key:1}]}
+            value={fs}
+            allowClear
+            onChange={()=>{
+                 onChange?.({})
+            }}
+        />
+        <HSelect options={[{value:"112",key:2}]}
+                 allowClear
+                 value={end}
+                 onChange={(val)=>{
+                     onChange?.({
+                         ...value,
+                         end:val
+                     })
+                 }}
+        />
+    </Space>
 };
+const TestItem=()=>{
+    return <Form.Item name="name1">
+         <Test3/>
+    </Form.Item>
+}
+const Test3Item=()=>{
+    return <Form.List name="users">
+        {(fields, { add, remove }) => (
+        <>
+            {fields.map(({ key, name, ...restField }) => (
+                <Form.Item
+                    {...restField}
+                    name={name}
+                    key={key}
+                >
+                    <Test3/>
+                </Form.Item>
+            ))}
+            <Form.Item>
+                <Button type="dashed" onClick={() => add({})} block>
+                    Add field
+                </Button>
+            </Form.Item>
+        </>
+    )}
+
+</Form.List>
+}
 const formData = (options) => {
   return [
       {
-          label: "下拉123",
-          className: "xiala",
-          type: "select",
-          name: "name1",
-          rules:[{required:true}],
-          itemProps: {
-              options: [
-                  {
-                      value: "选项1",
-                      key: 1,
-                  },
-                  {
-                      value: "选项2",
-                      key: 2,
-                  },
-              ],
-              showSearch: true,
-          },
-      },
-      {
-        noStyle:true,
         render:()=>{
-            return <HBasicForm configData={[
+            return <HBasicForm
+                configData={[
                 {
-                    label: "下拉",
+                    label: "下拉123",
                     className: "xiala",
-                    type: "select",
-                    name: "test321",
-                    colon:false,
-                    rules:[{required:true}],
-                    hover:()=>{
-                      return "ff"
-                    },
-                    hide:()=>{
-                        return false;
-                    },
-                    labelAlign:"right",
-                    itemProps: {
-                        options: [
-                            {
-                                value: "选项1",
-                                key: 1,
-                            },
-                            {
-                                value: "选项2",
-                                key: 2,
-                            },
-                        ],
-                        showSearch: true,
-                    },
+                    render:()=>{
+                        return <TestItem/>
+                    }
                 },
             ]}/>
         }
       },
-    {
-      type: "submit",
-    },
+      {
+          label: '会员标签',
+          hover: '添加新的会员标签后会覆盖用户原有的会员标签类型',
+          nameKey: 'userTags',
+          style: {
+              marginBottom: 0,
+          },
+          render:()=>{
+              return <HBasicForm
+                  configData={[
+                      {
+                          label: "333",
+                          className: "xiala",
+                          render:()=>{
+                              return <Test3Item/>
+                          }
+                      },
+                  ]}/>
+          }
+      },
   ];
 };
 function Ttta({ form }) {
@@ -135,12 +149,7 @@ export default () => {
             console.log(val, "onValuesChange");
           }}
           initialValues={{
-            file: "https://img0.baidu.com/it/u=530540642,263790536&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=667",
-            min: 1,
-            max: 2,
-            inputNumberGroup: {
-              input: "xxxxxxx",
-            },
+              name1:{}
           }}
           request={(params) => {
             return new Promise<any>((resolve) => {

package/src/pages/Select/index.tsx

@@ -1,56 +1,28 @@
 import { HSelect } from "../../components";
-import { Space } from "antd";
+import { Space ,Select} from "antd";
 import { useState } from "react";
 export default () => {
-  const [selectVal, setSelectVal] = useState(null);
+  const [selectVal, setSelectVal] = useState([{name:"11",id:-100}]);
   return (
     <Space size={"large"} direction={"vertical"} style={{ width: "100%" }}>
-      <HSelect
-        options={[{ label: "测试", value: 1 }]}
-        value={1}
-        placeholder="基础"
-        allowClear={true}
-      />
-      <HSelect
-        fieldNames={{ label: "name", value: "value" }}
-        options={[
-          { name: "测试1", value: 10, userId: 112321, disabled: true },
-          { name: "测试2", value: 20, userId: 112321 },
-        ]}
-        placeholder="多选"
-        value={null}
-        onChange={(val, option) => {
-          console.log(val);
-          setSelectVal(val);
-        }}
-        allSelect={true}
-        mode={"multiple"}
-        allowClear={true}
-        showSearch={true}
-      />
-      <HSelect
-        mode={"tags"}
-        placeholder="tags模式"
-        showSearch={true}
-        allowClear={true}
-        value={null}
-        options={[
-          { label: "测试1", value: 10 },
-          { label: "测试2", value: 20 },
-        ]}
-      />
       <HSelect
         placeholder="分页"
         serviceSearch
         allowClear={true}
         labelInValue
-        mode="multiple"
-        value={["21321312"]}
+        fieldNames={{
+          label:"name",
+          value:"id"
+        }}
+        value={selectVal}
+        onChange={(val,item)=>{
+           setSelectVal(val)
+        }}
         request={async (params) => {
           const { page, size } = params;
           const op = [];
-          for (let i = 0; i < size; i += 1) {
-            op.push({ label: `第${page}页第${i}条`, value: i + page });
+          for (let i = 0; i < 5; i += 1) {
+            op.push({ name: `第${page}页第${i}条`, id: i + page });
           }
           return Promise.resolve({
             page,
@@ -61,27 +33,6 @@ export default () => {
         }}
         isList
       />
-      <HSelect
-        serviceSearch={true}
-        request={(params) => {
-          return new Promise((resolve) => {
-            setTimeout(() => {
-              resolve([
-                {
-                  label: `我是搜索文案${params.inputValue}`,
-                  value: new Date().valueOf(),
-                },
-                {
-                  label: `我是搜索文案${params.inputValue}`,
-                  value: new Date().valueOf() + 1,
-                },
-              ]);
-            }, 2000);
-          });
-        }}
-        placeholder="远程搜索"
-        mode={"multiple"}
-      />
     </Space>
   );
 };