@hw-component/form 1.7.7 → 1.8.0

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,14 @@
 .ant-hw-form-form-item .ant-form-item-label {
   overflow: visible;
 }
+.ant-hw-input-group .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,19 +104,15 @@
   -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 {
+.ant-hw-input-group .ant-hw-input-group-not-disabled:hover {
   border-color: #40a9ff;
 }
-.ant-hw-input-group .ant-hw-input-group-body:hover .border {
+.ant-hw-input-group .ant-hw-input-group-not-disabled:hover .border {
   display: block;
 }
-.ant-hw-input-group .ant-hw-input-group-body:active {
+.ant-hw-input-group .ant-hw-input-group-not-disabled:active {
   border-color: #40a9ff;
 }
 .ant-hw-input-group .ant-hw-input-group-no-handler-wrap .ant-input-number-handler-wrap {
@@ -132,7 +127,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/Form/Basic.d.ts

@@ -1,3 +1,3 @@
-import { HFormProps } from "@/components/Form/modal";
+import type { HFormProps } from "@/components/Form/modal";
 declare const _default: ({ configData, gutter }: HFormProps) => JSX.Element;
 export default _default;

package/lib/Input/InputNumberGroup.js

@@ -55,7 +55,8 @@ var InputNumberGroup = function InputNumberGroup(_ref) {
     addonAfter = _ref.addonAfter,
     _ref$noHandlerWrap = _ref.noHandlerWrap,
     noHandlerWrap = _ref$noHandlerWrap === void 0 ? true : _ref$noHandlerWrap,
-    addFormat = _ref.addFormat;
+    addFormat = _ref.addFormat,
+    disabled = _ref.disabled;
   var min = valueMap.min,
     max = valueMap.max;
   var minVal = value[min],
@@ -78,6 +79,8 @@ 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"]);
+  var disabledClassname = index.useClassName(["hw-input-group-disabled"]);
+  var notDisabledClassname = index.useClassName(["hw-input-group-not-disabled"]);
   var noHandlerWrapClassname = index.useClassName(["hw-input-group-no-handler-wrap"]);
   addFormat === null || addFormat === void 0 || addFormat({
     float: {
@@ -119,10 +122,10 @@ 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         ").concat(disabled ? disabledClassname : notDisabledClassname, "\n        "),
       children: [jsxRuntime.jsx("span", {
         className: borderClassname
-      }), jsxRuntime.jsx(antd.InputNumber, _objectSpread({
+      }), jsxRuntime.jsx(antd.InputNumber, _objectSpread(_objectSpread({
         bordered: false,
         value: minVal,
         max: maxVal,
@@ -138,9 +141,12 @@ var InputNumberGroup = function InputNumberGroup(_ref) {
           change(min, val);
         },
         placeholder: fsPlaceholder
-      }, fsProps)), jsxRuntime.jsx(icons.SwapRightOutlined, {
-        className: iconClassname
-      }), jsxRuntime.jsx(antd.InputNumber, _objectSpread({
+      }, fsProps), {}, {
+        disabled: disabled
+      })), jsxRuntime.jsx("div", {
+        className: iconClassname,
+        children: jsxRuntime.jsx(icons.SwapRightOutlined, {})
+      }), jsxRuntime.jsx(antd.InputNumber, _objectSpread(_objectSpread({
         bordered: false,
         value: maxVal,
         className: oneClassname,
@@ -155,7 +161,9 @@ var InputNumberGroup = function InputNumberGroup(_ref) {
         onChange: function onChange(val) {
           change(max, val);
         }
-      }, edProps))]
+      }, edProps), {}, {
+        disabled: disabled
+      }))]
     })]
   });
 };

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,14 @@
 .ant-hw-form-form-item .ant-form-item-label {
   overflow: visible;
 }
+.ant-hw-input-group .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,19 +104,15 @@
   -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 {
+.ant-hw-input-group .ant-hw-input-group-not-disabled:hover {
   border-color: #40a9ff;
 }
-.ant-hw-input-group .ant-hw-input-group-body:hover .border {
+.ant-hw-input-group .ant-hw-input-group-not-disabled:hover .border {
   display: block;
 }
-.ant-hw-input-group .ant-hw-input-group-body:active {
+.ant-hw-input-group .ant-hw-input-group-not-disabled:active {
   border-color: #40a9ff;
 }
 .ant-hw-input-group .ant-hw-input-group-no-handler-wrap .ant-input-number-handler-wrap {
@@ -132,7 +127,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.8.0",
   "description": "基于antd二次开发",
   "repository": {
     "type": "git",

package/src/components/Form/Basic.tsx

@@ -1,11 +1,11 @@
-import {HFormProps, HItemProps, ItemPropsType} from "@/components/Form/modal";
+import type {HFormProps, HItemProps, ItemPropsType} from "@/components/Form/modal";
 import Item from "./FormItem";
 import {Row} from "antd";
 import {useFormContext} from "./Context";
 import useInitConfigData from "./hooks/useInitConfigData";
 import {useEffect} from "react";
 
-export default ({configData,gutter}:HFormProps)=>{
+export default ({configData,gutter}: HFormProps)=>{
   const {form,itemProps:formItemProps,itemSpan,colon:formColon,setData}=useFormContext();
   const { newConfigData, dispatchSourceData } = useInitConfigData({
     configData,
@@ -33,6 +33,7 @@ export default ({configData,gutter}:HFormProps)=>{
               ...formItemProps,
               ...itemProps,
           };
+
           return (
               <Item
                   {...itemData}

package/src/components/Form/FormItem/hooks.tsx

@@ -64,7 +64,7 @@ export const useFormItemLabel = (
 
 export const useFormItemHover = (
     form: HFormInstance,
-    hover?:string|HoverModal|HoverFn
+    hover?: string|HoverModal|HoverFn
 ) => {
   return typeof hover === "function" ? hover(form) : hover;
 };

package/src/components/Form/modal.ts

@@ -62,7 +62,7 @@ export interface HoverModal {
   text?: string;
   icon?: React.ReactNode;
 }
-export type HoverFn=(form: HFormInstance)=>string|HoverModal
+export type HoverFn=(form: HFormInstance) => string|HoverModal
 export type HelperModal = (form: HFormInstance) => React.ReactNode | string;
 
 export type HideModal = (form: HFormInstance) => boolean;
@@ -133,12 +133,12 @@ export interface FormContextProps {
   valueType?: string;
   labelAlign?: LabelAlignModal;
   labelWidth?: number;
-  formItemStyle?:React.CSSProperties;
-  hideLabel?:boolean;
-  colon?:boolean;
+  formItemStyle?: React.CSSProperties;
+  hideLabel?: boolean;
+  colon?: boolean;
   itemProps?: ItemPropsType;
   itemSpan?: ColProps;
-  setData?:(newData:any)=>void;
+  setData?: (newData: any) => void;
 }
 interface ConfigUploadProps {
   exFiles?: string[];

package/src/components/Input/InputNumberGroup.tsx

@@ -18,6 +18,7 @@ interface IProps<T = any> {
   onChange: (value: T) => void;
   addFormat?: (config: Record<string, addFormatItemModal>) => void;
   noHandlerWrap?: boolean;
+  disabled?:boolean;
 }
 const useArrayProps = (props: any) => {
   return useMemo(() => {
@@ -36,6 +37,7 @@ const InputNumberGroup = ({
   addonAfter,
   noHandlerWrap = true,
   addFormat,
+                            disabled
 }: IProps) => {
   const { min, max } = valueMap;
   const { [min]: minVal, [max]: maxVal } = value;
@@ -48,6 +50,9 @@ 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 notDisabledClassname=useClassName(["hw-input-group-not-disabled"])
+
   const noHandlerWrapClassname = useClassName([
     "hw-input-group-no-handler-wrap",
   ]);
@@ -95,9 +100,11 @@ const InputNumberGroup = ({
         ? React.cloneElement(addonAfter as any, { value, onChange })
         : addonAfter}
       <div
-        className={`${bodyClassname} ${focus ? activeClassname : ""} ${
-          noHandlerWrap ? noHandlerWrapClassname : ""
-        }`}
+        className={`${bodyClassname} 
+        ${focus ? activeClassname : ""} 
+        ${noHandlerWrap ? noHandlerWrapClassname : ""}
+         ${disabled?disabledClassname:notDisabledClassname}
+        `}
       >
         <span className={borderClassname} />
         <InputNumber<number>
@@ -117,8 +124,11 @@ const InputNumberGroup = ({
           }}
           placeholder={fsPlaceholder}
           {...fsProps}
+          disabled={disabled}
         />
-        <SwapRightOutlined className={iconClassname} />
+       <div className={iconClassname}>
+         <SwapRightOutlined  />
+       </div>
         <InputNumber<number>
           bordered={false}
           value={maxVal}
@@ -135,6 +145,7 @@ const InputNumberGroup = ({
             change(max, val);
           }}
           {...edProps}
+          disabled={disabled}
         />
       </div>
     </Input.Group>

package/src/components/Input/index.less

@@ -1,16 +1,22 @@
 @import "../styles/local.less";
 @all-input-group: ~"@{ant-prefix}-hw-input-group";
+
+.@{all-input-group} {
+  .@{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;
+  }
+  .@{all-input-group}-not-disabled {
     &:hover {
       border-color: #40a9ff;
       .border {
@@ -35,7 +41,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;
     }