@hw-component/form 1.9.86 → 1.9.87

package/lib/Select/TagSelect/index.js

@@ -0,0 +1,103 @@
+'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,
+    collapseProps = _ref2.collapseProps,
+    addDispatchListener = _ref2.addDispatchListener;
+  var collapseClassName = index.useClassName("hw-tag-select");
+  var _useMatchConfigProps = index.useMatchConfigProps({
+      fieldNames: propsFieldNames
+    }),
+    fieldNames = _useMatchConfigProps.fieldNames;
+  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, _objectSpread(_objectSpread({
+    bordered: false,
+    ghost: true
+  }, collapseProps), {}, {
+    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

@@ -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;
 interface ModeConfigItem {
@@ -21,7 +22,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 +39,15 @@ 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;
+    collapseProps?: CollapseProps;
+}
 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.87",
   "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,83 @@
+import {useMemo} 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
+    }
+}

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

@@ -0,0 +1,63 @@
+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, 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="",collapseProps,addDispatchListener})=>{
+    const collapseClassName = useClassName("hw-tag-select");
+    const { fieldNames } = useMatchConfigProps({ fieldNames: propsFieldNames });
+    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
+                     {...collapseProps}
+                     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,14 @@ 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;
+  collapseProps?:CollapseProps
+}
 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;