@hw-component/form 1.9.86 → 1.9.88

package/lib/Select/TagSelect/hooks.js

@@ -0,0 +1,125 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
+var _toConsumableArray = require('@babel/runtime-corejs3/helpers/toConsumableArray');
+var React = require('react');
+
+var useTagControl = function useTagControl(_ref) {
+  var value = _ref.value,
+    options = _ref.options,
+    title = _ref.title;
+  var _useMemo = React.useMemo(function () {
+      var len = value === null || value === void 0 ? void 0 : value.length;
+      var opLen = options === null || options === void 0 ? void 0 : options.length;
+      if (!opLen) {
+        return {
+          checked: false
+        };
+      }
+      if (len === opLen) {
+        return {
+          checked: true
+        };
+      }
+      return {
+        indeterminate: !!len
+      };
+    }, [value, options]),
+    checked = _useMemo.checked,
+    indeterminate = _useMemo.indeterminate;
+  var labelNode = React.useMemo(function () {
+    if (title) {
+      return title;
+    }
+    if (checked) {
+      return "取消";
+    }
+    return "全选";
+  }, [title, checked, indeterminate]);
+  return {
+    labelNode: labelNode,
+    checked: checked,
+    indeterminate: indeterminate
+  };
+};
+var useChangeControl = function useChangeControl(_ref2) {
+  var options = _ref2.options,
+    value = _ref2.value,
+    onChange = _ref2.onChange,
+    fieldNames = _ref2.fieldNames;
+  var _ref3 = fieldNames || {},
+    _ref3$value = _ref3.value,
+    valueKey = _ref3$value === void 0 ? "value" : _ref3$value;
+  var optsNk = function optsNk(newVal) {
+    var newOpts = [];
+    newVal === null || newVal === void 0 || newVal.forEach(function (itemVal) {
+      var index = options === null || options === void 0 ? void 0 : options.findIndex(function (item) {
+        return itemVal === item[valueKey];
+      });
+      if (typeof index !== "undefined") {
+        newOpts.push(options === null || options === void 0 ? void 0 : options[index]);
+      }
+    });
+    return newOpts;
+  };
+  var checkedVal = function checkedVal(val) {
+    var newVal = _toConsumableArray(value);
+    newVal.push(val);
+    onChange === null || onChange === void 0 || onChange(newVal, optsNk(newVal));
+  };
+  var removeVal = function removeVal(index) {
+    var newVal = _toConsumableArray(value);
+    newVal.splice(index, 1);
+    onChange === null || onChange === void 0 || onChange(newVal, optsNk(newVal));
+  };
+  var change = function change(val) {
+    var index = value === null || value === void 0 ? void 0 : value.indexOf(val);
+    var checked = index === -1;
+    if (checked) {
+      return checkedVal(val);
+    }
+    return removeVal(index);
+  };
+  var allCheck = function allCheck(e) {
+    if (!e.target.checked) {
+      return onChange === null || onChange === void 0 ? void 0 : onChange([], []);
+    }
+    var newVal = options === null || options === void 0 ? void 0 : options.map(function (item) {
+      return item[valueKey];
+    });
+    return onChange === null || onChange === void 0 ? void 0 : onChange(newVal, options);
+  };
+  return {
+    change: change,
+    allCheck: allCheck
+  };
+};
+var useCollapseControl = function useCollapseControl(_ref4) {
+  var visible = _ref4.visible,
+    defaultVisible = _ref4.defaultVisible,
+    onVisibleChange = _ref4.onVisibleChange;
+  var _useState = React.useState(defaultVisible ? ["1"] : []),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeKey = _useState2[0],
+    setActiveKey = _useState2[1];
+  React.useEffect(function () {
+    if (typeof visible === "undefined") {
+      return;
+    }
+    setActiveKey(visible ? ["1"] : []);
+  }, [visible]);
+  var onChange = function onChange(keys) {
+    var len = keys === null || keys === void 0 ? void 0 : keys.length;
+    onVisibleChange === null || onVisibleChange === void 0 || onVisibleChange(!!len);
+    setActiveKey(keys);
+  };
+  return {
+    activeKey: activeKey,
+    onChange: onChange
+  };
+};
+
+exports.useChangeControl = useChangeControl;
+exports.useCollapseControl = useCollapseControl;
+exports.useTagControl = useTagControl;
+// powered by h

package/lib/Select/TagSelect/index.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const _default: React.ForwardRefExoticComponent<import("../../Form/modal").HFormItemProps & React.RefAttributes<any>>;
+export default _default;

package/lib/Select/TagSelect/index.js

@@ -0,0 +1,113 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
+var jsxRuntime = require('react/jsx-runtime');
+var antd = require('antd');
+var index = require('../../hooks/index.js');
+var norHooks = require('../hooks/norHooks.js');
+var Content = require('./Content.js');
+var hooks = require('./hooks.js');
+var HFormConnect = require('../../Form/HFormConnect.js');
+
+var _excluded = ["children"];
+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; }
+var Panel = antd.Collapse.Panel;
+var ItemTitle = function ItemTitle(_ref) {
+  var children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return jsxRuntime.jsx("div", {
+    onClick: function onClick(event) {
+      event.stopPropagation();
+    },
+    children: jsxRuntime.jsx(antd.Checkbox, _objectSpread(_objectSpread({}, props), {}, {
+      children: children
+    }))
+  });
+};
+var Index = function Index(_ref2) {
+  var options = _ref2.options,
+    _ref2$value = _ref2.value,
+    value = _ref2$value === void 0 ? [] : _ref2$value,
+    onChange = _ref2.onChange,
+    dispatch = _ref2.dispatch,
+    propsFieldNames = _ref2.fieldNames,
+    request = _ref2.request,
+    title = _ref2.title,
+    manual = _ref2.manual,
+    _ref2$className = _ref2.className,
+    className = _ref2$className === void 0 ? "" : _ref2$className,
+    visible = _ref2.visible,
+    defaultVisible = _ref2.defaultVisible,
+    onVisibleChange = _ref2.onVisibleChange,
+    addDispatchListener = _ref2.addDispatchListener;
+  var collapseClassName = index.useClassName("hw-tag-select");
+  var _useMatchConfigProps = index.useMatchConfigProps({
+      fieldNames: propsFieldNames
+    }),
+    fieldNames = _useMatchConfigProps.fieldNames;
+  var _useCollapseControl = hooks.useCollapseControl({
+      defaultVisible: defaultVisible,
+      visible: visible,
+      onVisibleChange: onVisibleChange
+    }),
+    activeKey = _useCollapseControl.activeKey,
+    colChange = _useCollapseControl.onChange;
+  var _useSelectReq = norHooks.useSelectReq({
+      options: options,
+      manual: manual,
+      request: request,
+      dispatch: dispatch
+    }),
+    loading = _useSelectReq.loading,
+    resultData = _useSelectReq.data,
+    error = _useSelectReq.error,
+    reload = _useSelectReq.reload;
+  var _useTagControl = hooks.useTagControl({
+      value: value,
+      options: resultData,
+      title: title
+    }),
+    labelNode = _useTagControl.labelNode,
+    checked = _useTagControl.checked,
+    indeterminate = _useTagControl.indeterminate;
+  var _useChangeControl = hooks.useChangeControl({
+      value: value,
+      options: resultData,
+      onChange: onChange,
+      fieldNames: fieldNames
+    }),
+    allCheck = _useChangeControl.allCheck;
+  addDispatchListener === null || addDispatchListener === void 0 || addDispatchListener("reload", reload);
+  return jsxRuntime.jsx(antd.Collapse, {
+    bordered: false,
+    ghost: true,
+    activeKey: activeKey,
+    onChange: colChange,
+    className: "".concat(collapseClassName, " ").concat(className),
+    children: jsxRuntime.jsx(Panel, {
+      header: jsxRuntime.jsx(ItemTitle, {
+        indeterminate: indeterminate,
+        checked: checked,
+        onChange: allCheck,
+        children: labelNode
+      }),
+      children: jsxRuntime.jsx(Content.default, {
+        loading: loading,
+        options: resultData,
+        value: value,
+        error: error,
+        onChange: onChange,
+        reload: reload,
+        fieldNames: fieldNames
+      })
+    }, "1")
+  });
+};
+var HTagSelect = HFormConnect.default(Index);
+
+exports.default = HTagSelect;
+// powered by h

package/lib/Select/index.js

@@ -70,7 +70,6 @@ var Index = function Index(_ref) {
   var _useSelectReq = norHooks.useSelectReq({
       options: options,
       manual: manual,
-      fieldNames: fieldNames,
       request: request,
       serviceSearch: serviceSearch,
       showSearch: showSearch,

package/lib/Select/modal.d.ts

@@ -21,7 +21,7 @@ export interface OptionsPageResultModal {
     total: number;
 }
 export type OptionsDataType = OptionsListType | OptionsPageResultModal;
-export interface HSelectProps extends Omit<SelectProps, "options" | "placeholder"> {
+export interface HSelectProps extends Omit<SelectProps, "options" | "placeholder" | "onChange"> {
     style?: React.CSSProperties;
     request?: PromiseFnResult<any, OptionsDataType>;
     manual?: boolean;
@@ -38,10 +38,17 @@ export interface HSelectProps extends Omit<SelectProps, "options" | "placeholder
     isList?: boolean;
     addonBefore?: React.ReactNode;
     addonAfter?: React.ReactNode;
+    onChange?: (value: any, opts?: OptionType[] | OptionType) => void;
 }
 export interface FilterDataModal {
     value: any;
     index: number;
 }
+export interface HTagSelectProps extends HSelectProps {
+    title?: React.ReactNode;
+    defaultVisible?: boolean;
+    visible?: boolean;
+    onVisibleChange?: (visible: boolean) => void;
+}
 export type PartialHSelectProps = Partial<HSelectProps>;
 export {};

package/lib/index.css

@@ -42,6 +42,18 @@
   border-top-right-radius: 0 !important;
   border-bottom-right-radius: 0 !important;
 }
+.ant-hw-tag-select {
+  width: 100%;
+}
+.ant-hw-tag-select .ant-collapse-content-box {
+  padding: 0px 40px !important;
+}
+.ant-hw-tag-select .ant-hw-tag-select {
+  cursor: pointer;
+}
+.ant-hw-tag-select .ant-collapse-header {
+  padding: 5px 16px !important;
+}
 .ant-hw-form-item-colon:after {
   position: relative;
   top: -0.5px;
@@ -167,6 +179,9 @@
   display: -ms-flexbox;
   display: flex;
 }
+.ant-hw-tag-select .ant-hw-tag-item {
+  cursor: pointer;
+}
 .ant-hw-input-group .ant-hw-input-group-disabled {
   background-color: #f5f5f5;
 }

package/lib/index.d.ts

@@ -22,7 +22,7 @@ export declare const HRadioGroup: ({ value, options, onChange, fieldNames: props
 export declare const HTimePicker: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
 export declare const HInputNumber: ({ style, ...props }: import("antd").InputNumberProps) => JSX.Element;
 export declare const HPageHandler: import("react").FC<import("./PageHandler/modal").IHPageHandler<any>>;
-export declare const HTextArea: ({ autoSize, bordered, className, ...props }: import("./TextArea").HTextAreaProps) => JSX.Element;
+export declare const HTextArea: ({ autoSize, bordered, className, style, ...props }: import("./TextArea").HTextAreaProps) => JSX.Element;
 export declare const HColorInput: ({ value, onChange, defaultColor, ...props }: import("./Input/modal").HInputProps) => JSX.Element;
 export declare const HModalForm: import("react").FC<import("./DialogForm/modal").DialogFormProps<any, any>>;
 export declare const HDrawerForm: import("react").FC<import("./DialogForm/modal").DialogFormProps<any, any>>;
@@ -31,3 +31,4 @@ export declare const HVerificationCodeInput: import("react").ForwardRefExoticCom
 export declare const HTrimInput: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
 export declare const HTrimTextArea: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
 export declare const HInputNumberGroup: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
+export declare const HTagSelect: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;

package/lib/index.js

@@ -37,6 +37,7 @@ var HVerificationCodeInput = config.default.verificationCodeInput;
 var HTrimInput = config.default.trimInput;
 var HTrimTextArea = config.default.trimTextArea;
 var HInputNumberGroup = config.default.inputNumberGroup.Component;
+var HTagSelect = config.default.tagSelect;
 
 exports.HForm = index.default;
 exports.useHForm = useHForm.default;
@@ -63,6 +64,7 @@ exports.HRichEditor = HRichEditor;
 exports.HSelect = HSelect;
 exports.HSelectInput = HSelectInput;
 exports.HSwitch = HSwitch;
+exports.HTagSelect = HTagSelect;
 exports.HTextArea = HTextArea;
 exports.HTimePicker = HTimePicker;
 exports.HTrimInput = HTrimInput;

package/package.json

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

package/src/components/Form/config.ts

@@ -23,7 +23,7 @@ import TrimTextArea from "../TextArea/TrimTextArea";
 import HInputNumberGroup from "../Input/InputNumberGroup";
 import HText from "../Text";
 import HRichEditor from "../RichEditor";
-
+import HTagSelect from '../Select/TagSelect';
 export const placeholderConfig = {
   inputType: [
     "input",
@@ -70,6 +70,7 @@ const componentConfig = {
   treeSelect: HTreeSelect,
   text: HText,
   richEditor: HRichEditor,
+  tagSelect:HTagSelect
 };
 
 export default componentConfig;

package/src/components/Form/index.less

@@ -102,3 +102,9 @@
     display: flex;
   }
 }
+
+.@{ant-prefix}-hw-tag-select{
+    .@{ant-prefix}-hw-tag-item{
+      cursor: pointer;
+    }
+}

package/src/components/Select/TagSelect/Content.tsx

@@ -0,0 +1,50 @@
+import {HTagSelectProps} from "../modal";
+import {useClassName} from "@/components/hooks";
+import {Row, Skeleton, Space, Tag,Empty} from "antd";
+import React from "react";
+import {useChangeControl} from "./hooks";
+import NotFoundContent from "../components/NotFoundContent";
+
+const ItemOption=({options,value,onChange,fieldNames}:HTagSelectProps)=>{
+    const tagClassName = useClassName("hw-tag-item");
+    const {label:labelKey="label",value:valueKey="value"}=fieldNames||{};
+    const {change}=useChangeControl({options,value,onChange,fieldNames});
+    return  <Row gutter={[0,8]}>
+    {options?.map((item)=>{
+        const {[labelKey]:label,[valueKey]:itemVal}=item;
+        const index=value?.indexOf(itemVal);
+        const checkedTag=index!==-1;
+        return  <Tag color={checkedTag?"processing":undefined}
+        className={tagClassName}
+        key={itemVal}
+        onClick={()=>{
+            change(itemVal);
+        }}
+    >
+        {label}
+        </Tag>
+    })}
+    </Row>
+}
+
+interface IContentProps extends HTagSelectProps{
+    error?:Error;
+    reload:VoidFunction;
+}
+
+export default ({loading,value,options,onChange,fieldNames,error,reload}:IContentProps)=>{
+ const len=options?.length||0;
+ if (loading&&len===0){
+     return  <Space direction={"vertical"} style={{width:"100%"}}>
+         <Skeleton.Button active size={"small"} block />
+         <Skeleton.Button active size={"small"} block />
+     </Space>
+ }
+    if (error && len === 0) {
+        return <NotFoundContent error={error}  reload={reload}/>;
+    }
+    if (len===0){
+        return  <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+    }
+ return  <ItemOption options={options} value={value} onChange={onChange} fieldNames={fieldNames}/>
+}

package/src/components/Select/TagSelect/hooks.ts

@@ -0,0 +1,102 @@
+import {useEffect, useMemo, useState} from "react";
+import {HTagSelectProps, OptionType} from "@/components/Select/modal";
+
+export const useTagControl=({value,options,title}:HTagSelectProps)=>{
+    const {checked,indeterminate}=useMemo(()=>{
+        const len=value?.length;
+        const opLen=options?.length;
+        if (!opLen){
+            return {
+                checked:false
+            }
+        }
+        if (len===opLen){
+            return {
+                checked:true
+            }
+        }
+        return  {
+            indeterminate:!!len
+        }
+    },[value,options]);
+    const labelNode=useMemo(()=>{
+        if (title){
+            return title;
+        }
+        if (checked){
+            return  "取消"
+        }
+        return  "全选"
+    },[title,checked,indeterminate]);
+    return {
+        labelNode,
+        checked,
+        indeterminate
+    }
+}
+
+export const useChangeControl=({options,value,onChange,fieldNames}:HTagSelectProps)=>{
+    const {value:valueKey="value"}=fieldNames||{};
+    const optsNk=(newVal)=>{
+        const newOpts:OptionType[]=[];
+        newVal?.forEach((itemVal)=>{
+            const index=options?.findIndex((item)=>{
+                return itemVal===item[valueKey];
+            });
+            if (typeof index!=="undefined"){
+                newOpts.push((options?.[index] as OptionType));
+            }
+        });
+        return  newOpts;
+    }
+    const checkedVal=(val)=>{
+        const newVal=[...value];
+        newVal.push(val);
+        onChange?.(newVal,optsNk(newVal));
+    }
+    const removeVal=(index)=>{
+        const newVal=[...value];
+        newVal.splice(index,1);
+        onChange?.(newVal,optsNk(newVal));
+    }
+    const change=(val)=>{
+         const index=value?.indexOf(val);
+        const checked=index===-1;
+        if (checked){
+            return checkedVal(val);
+        }
+        return  removeVal(index);
+    }
+    const allCheck=(e)=>{
+        if (!e.target.checked){
+           return  onChange?.([],[]);
+        }
+        const newVal=options?.map((item)=>{
+             return item[valueKey];
+        });
+        return  onChange?.(newVal,options);
+    }
+    return {
+        change,
+        allCheck
+    }
+}
+
+export const useCollapseControl=({visible,defaultVisible,onVisibleChange}:HTagSelectProps)=>{
+     const [activeKey,setActiveKey]=useState(defaultVisible?["1"]:[]);
+    useEffect(() => {
+        if (typeof visible==="undefined"){
+            return;
+        }
+        setActiveKey(visible?["1"]:[]);
+    }, [visible]);
+    const onChange=(keys)=>{
+         const len=keys?.length;
+         onVisibleChange?.(!!len);
+         setActiveKey(keys)
+    }
+     return {
+         activeKey,
+         onChange
+     }
+}

package/src/components/Select/TagSelect/index.tsx

@@ -0,0 +1,79 @@
+import {Collapse, Checkbox} from 'antd';
+import {useClassName, useMatchConfigProps} from "../../hooks";
+import React from "react";
+import {useSelectReq} from "../hooks/norHooks";
+import {HTagSelectProps} from "../modal";
+import {CheckboxProps} from "antd/lib/checkbox/Checkbox";
+import Content from './Content';
+import {useChangeControl, useCollapseControl, useTagControl} from "@/components/Select/TagSelect/hooks";
+import HFormConnect from "@/components/Form/HFormConnect";
+const { Panel } = Collapse;
+
+const ItemTitle:React.FC<CheckboxProps>=({children,...props})=>{
+    return <div onClick={(event)=>{
+        event.stopPropagation();
+    }}>
+        <Checkbox {...props}>
+            {children}
+        </Checkbox>
+    </div>
+}
+const Index:React.FC<HTagSelectProps>=({
+                                           options,
+                                           value=[],
+                                           onChange,
+                                           dispatch,
+                                           fieldNames:propsFieldNames,
+                                           request,
+                                           title,
+                                           manual,
+                                           className="",
+    visible,
+    defaultVisible,
+    onVisibleChange,
+                                           addDispatchListener
+})=>{
+    const collapseClassName = useClassName("hw-tag-select");
+    const { fieldNames } = useMatchConfigProps({ fieldNames: propsFieldNames });
+    const {activeKey,onChange:colChange}=useCollapseControl({defaultVisible,visible,onVisibleChange})
+    const {
+        loading,
+        data: resultData,
+        error,
+        reload,
+    } = useSelectReq({
+        options,
+        manual,
+        request,
+        dispatch,
+    }); //options
+    const {labelNode,checked,indeterminate}=useTagControl({value,options:resultData,title});
+    const {allCheck}=useChangeControl({
+        value,
+        options:resultData,
+        onChange,
+        fieldNames
+    });
+    addDispatchListener?.("reload", reload);
+    return <Collapse bordered={false}
+                     ghost
+                     activeKey={activeKey}
+                     onChange={colChange}
+                     className={`${collapseClassName} ${className}`}
+    >
+        <Panel key="1" header={<ItemTitle indeterminate={indeterminate}
+                                  checked={checked}
+                                  onChange={allCheck}
+        >{labelNode}</ItemTitle>}>
+            <Content loading={loading}
+                     options={resultData}
+                     value={value}
+                     error={error}
+                     onChange={onChange}
+                     reload={reload}
+                     fieldNames={fieldNames}
+            />
+        </Panel>
+    </Collapse>
+}
+export default HFormConnect(Index);

package/src/components/Select/index.less

@@ -55,3 +55,16 @@
     }
   }
 }
+.@{ant-prefix}-hw-tag-select {
+  width: 100%;
+  .@{ant-prefix}-collapse-content-box {
+       padding: 0px 40px !important;
+  }
+  .@{ant-prefix}-hw-tag-select{
+    cursor: pointer;
+  }
+  .@{ant-prefix}-collapse-header{
+     padding: 5px 16px !important;
+  }
+}
+

package/src/components/Select/index.tsx

@@ -55,7 +55,6 @@ const Index: React.FC<HSelectProps> = ({
   } = useSelectReq({
     options,
     manual,
-    fieldNames,
     request,
     serviceSearch,
     showSearch,

package/src/components/Select/modal.ts

@@ -2,6 +2,7 @@ import type { SelectProps } from "antd";
 import type React from "react";
 import type { PromiseFnResult } from "../modal";
 import type { addFormatItemModal, argsFn, DispatchModal } from "../Form/modal";
+import {CollapseProps} from "antd/lib/collapse/Collapse";
 
 export type OptionType = Record<string, any>;
 export type RenderFn = (data: OptionType) => React.ReactNode;
@@ -24,7 +25,7 @@ export interface OptionsPageResultModal {
 }
 export type OptionsDataType = OptionsListType | OptionsPageResultModal;
 export interface HSelectProps
-  extends Omit<SelectProps, "options" | "placeholder"> {
+  extends Omit<SelectProps, "options" | "placeholder"|"onChange"> {
   style?: React.CSSProperties;
   request?: PromiseFnResult<any, OptionsDataType>;
   manual?: boolean;
@@ -41,9 +42,16 @@ export interface HSelectProps
   isList?: boolean;
   addonBefore?: React.ReactNode;
   addonAfter?: React.ReactNode;
+  onChange?:(value:any,opts?:OptionType[]|OptionType)=>void;
 }
 export interface FilterDataModal {
   value: any;
   index: number;
 }
+export interface HTagSelectProps extends HSelectProps{
+  title?:React.ReactNode;
+  defaultVisible?:boolean;
+  visible?:boolean;
+  onVisibleChange?:(visible:boolean)=>void;
+}
 export type PartialHSelectProps = Partial<HSelectProps>;

package/src/components/index.tsx

@@ -40,3 +40,5 @@ export const HTrimInput = FormConfig.trimInput;
 
 export const HTrimTextArea = FormConfig.trimTextArea;
 export const HInputNumberGroup = FormConfig.inputNumberGroup.Component;
+
+export const HTagSelect = FormConfig.tagSelect;