@hw-component/form 1.9.85 → 1.9.87

package/lib/Select/TagSelect/hooks.js

@@ -0,0 +1,99 @@
+'use strict';
+
+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
+  };
+};
+
+exports.useChangeControl = useChangeControl;
+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,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.85",
+  "version": "1.9.87",
   "description": "基于antd二次开发",
   "repository": {
     "type": "git",

package/src/components/Btn.tsx

@@ -4,41 +4,41 @@ import React from "react";
 import { useRequest } from "ahooks";
 
 export interface BtnProps<R = any> extends ButtonProps {
-    request?: () => Promise<any>;
-    onSuccess?: (data: R) => void;
+  request?: () => Promise<any>;
+  onSuccess?: (data: R) => void;
 }
 export default ({
-                    loading,
-                    request,
-                    children,
-                    onClick,
-                    style,
-                    type,
-                    onSuccess,
-                    ...props
-                }:BtnProps) => {
-    const { run, loading: reqLoading } = useRequest(
-        () => {
-            return request?.();
-        },
-        { manual: true, onSuccess }
-    );
-    const click = (e) => {
-        if (request) {
-            run();
-            return;
-        }
-        onClick?.(e);
-    };
-    return (
-        <Button
-            {...props}
-            type={type}
-            style={{ borderRadius: 4, ...style }}
-            onClick={click}
-            loading={loading || reqLoading}
-        >
-            {children}
-        </Button>
-    );
-};
+  loading,
+  request,
+  children,
+  onClick,
+  style,
+  type,
+  onSuccess,
+  ...props
+}: BtnProps) => {
+  const { run, loading: reqLoading } = useRequest(
+    () => {
+      return request?.();
+    },
+    { manual: true, onSuccess }
+  );
+  const click = (e) => {
+    if (request) {
+      run();
+      return;
+    }
+    onClick?.(e);
+  };
+  return (
+    <Button
+      {...props}
+      type={type}
+      style={{ borderRadius: 4, ...style }}
+      onClick={click}
+      loading={loading || reqLoading}
+    >
+      {children}
+    </Button>
+  );
+};

package/src/components/CheckboxGroup/index.tsx

@@ -20,7 +20,7 @@ const Index = ({
 }: HCheckboxProps) => {
   const { valueCheckMap: resultValueCheckMap, fieldNames: resultFieldNames } =
     useMatchConfigProps({ fieldNames, valueCheckMap: valueMap }); //匹配全局
-  const checkOptions:Record<string, any>[]|undefined = useChangeOptions({
+  const checkOptions: Record<string, any>[] | undefined = useChangeOptions({
     options,
     fieldNames: resultFieldNames,
   });
@@ -63,9 +63,10 @@ const Index = ({
   return (
     <Space direction={direction} wrap={wrap}>
       {checkOptions?.map((item) => {
-        const { label, value: itemVal ,disabled:itemDisabled} = item;
+        const { label, value: itemVal, disabled: itemDisabled } = item;
         const checked = val[itemVal];
-        const nDis=typeof itemDisabled==="undefined"?disabled:itemDisabled;
+        const nDis =
+          typeof itemDisabled === "undefined" ? disabled : itemDisabled;
         return (
           <Checkbox
             value={checked}

package/src/components/DialogForm/DrawerForm/index.tsx

@@ -35,7 +35,7 @@ const Index: React.FC<DialogFormProps> = ({
   autoClear = true,
   contentRender,
   children,
-                                            destroyOnClose=true,
+  destroyOnClose = true,
   ...props
 }: DialogFormProps) => {
   const currentForm = useCurrentForm(dialogForm);
@@ -67,29 +67,29 @@ const Index: React.FC<DialogFormProps> = ({
     setModalVisible(false);
   };
   const { loading, run } = useSub({ request, onFinish });
-  const finish=async (values, subParams) => {
+  const finish = async (values, subParams) => {
     const result = await run(values, subParams);
     const close = onOk?.(result, subParams);
     if (close === false) {
       return;
     }
     cancel();
-  }
-  const footerOnOk=()=>{
-    if (modalFormData){
+  };
+  const footerOnOk = () => {
+    if (modalFormData) {
       dialogForm?.submit();
       return;
     }
-    finish({},formParams);
-  }
+    finish({}, formParams);
+  };
   const defaultFooter = useFooterRender({
     dialogForm,
     footer,
     confirmLoading: loading,
     params: formParams,
-    onOk :footerOnOk
+    onOk: footerOnOk,
   });
-  const node = modalFormData&&(
+  const node = modalFormData && (
     <HForm
       configData={modalFormData}
       initialValues={initValue}
@@ -102,13 +102,13 @@ const Index: React.FC<DialogFormProps> = ({
       labelWidth={labelWidth}
     />
   );
-  const selfAfterClose=()=>{
-    if (autoClear){
+  const selfAfterClose = () => {
+    if (autoClear) {
       dialogForm?.clear();
       return;
     }
     dialogForm?.resetFormStatus();
-  }
+  };
   return (
     <Drawer
       visible={modalVisible}
@@ -116,7 +116,7 @@ const Index: React.FC<DialogFormProps> = ({
       {...props}
       onClose={cancel}
       afterVisibleChange={(changeVisible) => {
-        if (changeVisible){
+        if (changeVisible) {
           return;
         }
         selfAfterClose();

package/src/components/DialogForm/ModalForm.tsx

@@ -30,7 +30,7 @@ const Index: React.FC<DialogFormProps> = ({
   contentRender,
   footer,
   children,
-                                            destroyOnClose=true,
+  destroyOnClose = true,
   ...props
 }) => {
   const currentForm = useCurrentForm(dialogForm);
@@ -52,7 +52,7 @@ const Index: React.FC<DialogFormProps> = ({
     params,
     title,
     onCancel,
-    autoClear
+    autoClear,
   });
   const cancel = () => {
     saveOldParams();
@@ -62,22 +62,22 @@ const Index: React.FC<DialogFormProps> = ({
     setModalVisible(false);
   };
   const { loading, run } = useSub({ request, onFinish });
-  const finish=async (values, outParams)=>{
+  const finish = async (values, outParams) => {
     const result = await run(values, outParams);
     const close = onOk?.(result, outParams);
     if (close === false) {
       return;
     }
     cancel();
-  }
-  const footerOnOk=()=>{
-     if (modalFormData){
-       dialogForm?.submit();
-       return;
-     }
-     finish({},formParams);
-  }
-  const node = modalFormData&&(
+  };
+  const footerOnOk = () => {
+    if (modalFormData) {
+      dialogForm?.submit();
+      return;
+    }
+    finish({}, formParams);
+  };
+  const node = modalFormData && (
     <HForm
       configData={modalFormData}
       initialValues={initValue}
@@ -94,15 +94,15 @@ const Index: React.FC<DialogFormProps> = ({
     footer,
     confirmLoading: loading,
     params: formParams,
-    onOk:footerOnOk
+    onOk: footerOnOk,
   });
-  const selfAfterClose=()=>{
-    if (autoClear){
+  const selfAfterClose = () => {
+    if (autoClear) {
       dialogForm?.clear();
       return;
     }
     dialogForm?.resetFormStatus();
-  }
+  };
   return (
     <Modal
       title={modalTitle}

package/src/components/DialogForm/hooks.tsx

@@ -119,8 +119,8 @@ export const useSub = ({ request, onFinish }: Partial<DialogFormProps>) => {
     { manual: true }
   );
 };
-interface FooterRenderParamsModal extends Omit<DialogFormProps, "configData">{
-   onOk:VoidFunction;
+interface FooterRenderParamsModal extends Omit<DialogFormProps, "configData"> {
+  onOk: VoidFunction;
 }
 
 export const useFooterRender = ({
@@ -128,7 +128,7 @@ export const useFooterRender = ({
   confirmLoading,
   dialogForm,
   params,
-  onOk
+  onOk,
 }: FooterRenderParamsModal) => {
   if (footer === null) {
     return null;

package/src/components/DialogForm/modal.ts

@@ -38,10 +38,16 @@ export type FooterRender = (
 export interface DialogFormProps<P = any, T = any>
   extends Omit<
     RootProps,
-    "onFinish" | "onCancel" | "onOk" | "infoRequest" | "title" | "footer"|"configData"
+    | "onFinish"
+    | "onCancel"
+    | "onOk"
+    | "infoRequest"
+    | "title"
+    | "footer"
+    | "configData"
   > {
   dialogForm?: HDialogFormInstance;
-  configData?:HFormProps["configData"];
+  configData?: HFormProps["configData"];
   onFinish?: (values: T, params: P) => Promise<any>;
   onCancel?: VoidFunction;
   onOk?: (data: T, params: P) => boolean | void;

package/src/components/Form/HFormConnect.tsx

@@ -1,13 +1,18 @@
 import { useFormContext } from "./Context";
 import React from "react";
-import type { addFormatItemModal ,HFormItemProps,ConnectResultProps,argsFn} from "./modal";
-import {formatMaker} from "./hooks/useAddFormat";
+import type {
+  addFormatItemModal,
+  HFormItemProps,
+  ConnectResultProps,
+  argsFn,
+} from "./modal";
+import { formatMaker } from "./hooks/useAddFormat";
 
 export default (
   component:
     | React.FunctionComponent
     | React.ComponentClass
-    | React.ForwardRefRenderFunction<any, any>,
+    | React.ForwardRefRenderFunction<any, any>
 ) => {
   const Index: React.ForwardRefRenderFunction<any, HFormItemProps> = (
     props: HFormItemProps,

package/src/components/Form/InitSet.tsx

@@ -5,10 +5,10 @@ export default () => {
   const { form } = useFormContext();
   useEffect(() => {
     form.initValues();
-    form.inited=true;
-    return ()=>{
-      form.inited=false;
-    }
+    form.inited = true;
+    return () => {
+      form.inited = false;
+    };
   }, []);
   return <></>;
 };

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/hooks/index.ts

@@ -129,6 +129,4 @@ export const useValuesChange = ({
   };
 };
 
-export const useAddFormat=()=>{
-
-}
+export const useAddFormat = () => {};