@hw-component/form 1.9.45 → 1.9.47

package/src/components/Select/TreeSelect.tsx

@@ -1,50 +1,66 @@
 import { TreeSelect } from "antd";
-import { TreeSelectProps } from "antd/lib/tree-select";
-import { PromiseFnResult } from "../modal";
+import type { TreeSelectProps } from "antd/lib/tree-select";
+import type { PromiseFnResult } from "../modal";
 import { useRequest } from "ahooks";
 export interface HTreeSelectProps extends TreeSelectProps {
   request?: PromiseFnResult;
-  onlyCheckChild?:boolean;
+  onlyCheckChild?: boolean;
 }
 interface OpMkParamsModal {
-  options?:any[];
-  onlyCheckChild?:boolean;
-  fieldNames?:TreeSelectProps["fieldNames"]
+  options?: any[];
+  onlyCheckChild?: boolean;
+  fieldNames?: TreeSelectProps["fieldNames"];
 }
-const opMk=({options,onlyCheckChild=false,fieldNames}:OpMkParamsModal)=>{
-   const {children="children"}=fieldNames||{}
-   return options?.map((item)=>{
-        const {[children]:child}=item;
-        const len=child?.length;
-        if (!len){
-          return {
-            ...item
-          };
-        }
-        const newChild=opMk({options:child,onlyCheckChild,fieldNames});
-        return  {
-          ...item,
-          selectable:!onlyCheckChild,
-          [children]:newChild
-        }
-   })
-}
-export default ({ request,onlyCheckChild,multiple,treeCheckable,treeData,fieldNames, ...props }: HTreeSelectProps) => {
+const opMk = ({
+  options,
+  onlyCheckChild = false,
+  fieldNames,
+}: OpMkParamsModal) => {
+  const { children = "children" } = fieldNames || {};
+  return options?.map((item) => {
+    const { [children]: child } = item;
+    const len = child?.length;
+    if (!len) {
+      return {
+        ...item,
+      };
+    }
+    const newChild = opMk({ options: child, onlyCheckChild, fieldNames });
+    return {
+      ...item,
+      selectable: !onlyCheckChild,
+      [children]: newChild,
+    };
+  });
+};
+export default ({
+  request,
+  onlyCheckChild,
+  multiple,
+  treeCheckable,
+  treeData,
+  fieldNames,
+  ...props
+}: HTreeSelectProps) => {
   const { loading, data } = useRequest(async () => {
-    let options=treeData;
+    let options = treeData;
     if (request) {
-      options=await request({});
+      options = await request({});
     }
     return opMk({
       options,
-      onlyCheckChild:onlyCheckChild,
-      fieldNames
+      onlyCheckChild: onlyCheckChild,
+      fieldNames,
     });
   });
-  return <TreeSelect treeData={data}
-                     loading={loading}
-                     fieldNames={fieldNames}
-                     treeCheckable={treeCheckable}
-                     multiple={multiple}
-                     {...props}/>;
+  return (
+    <TreeSelect
+      treeData={data}
+      loading={loading}
+      fieldNames={fieldNames}
+      treeCheckable={treeCheckable}
+      multiple={multiple}
+      {...props}
+    />
+  );
 };

package/src/components/Select/components/NotFoundContent.tsx

@@ -1,5 +1,6 @@
-import { Empty, Row, Space, Typography, Button } from "antd";
+import { Empty, Row, Space, Typography } from "antd";
 import { ExclamationCircleOutlined } from "@ant-design/icons";
+import {HJBtn} from "@hw-component/hj";
 const { Text } = Typography;
 interface IProps {
   error?: Error;
@@ -14,9 +15,9 @@ export default ({ error, reload }: IProps) => {
             <ExclamationCircleOutlined size={24} />
           </Text>
           <Text type={"danger"}>{error.message}</Text>
-          <Button type="primary" size={"small"} onClick={reload}>
+          <HJBtn type="primary" size={"small"} onClick={reload}>
             重新加载
-          </Button>
+          </HJBtn>
         </Space>
       </Row>
     );

package/src/components/Select/index.less

@@ -20,38 +20,38 @@
     }
   }
 }
-.@{ant-prefix}-hw-select-box{
+.@{ant-prefix}-hw-select-box {
   display: flex;
   flex-direction: row;
 
-  .@{ant-prefix}-hw-group-addon-before{
-    border-bottom-left-radius: 2px;
+  .@{ant-prefix}-hw-group-addon-before {
+    border-right: 0;
     border-top-left-radius: 2px;
-    border-right: 0px;
+    border-bottom-left-radius: 2px;
   }
-  .@{ant-prefix}-select{
+  .@{ant-prefix}-select {
     flex: 1;
   }
-  .@{ant-prefix}-hw-group-addon-after{
-    border-bottom-right-radius: 2px;
+  .@{ant-prefix}-hw-group-addon-after {
+    border-left: 0;
     border-top-right-radius: 2px;
-    border-left: 0px;
+    border-bottom-right-radius: 2px;
   }
 }
-.@{ant-prefix}-hw-select-box-addon-before{
-  .@{ant-prefix}-select{
-    .@{ant-prefix}-select-selector{
-      border-bottom-left-radius: 0px !important;
-      border-top-left-radius: 0px !important;
+.@{ant-prefix}-hw-select-box-addon-before {
+  .@{ant-prefix}-select {
+    .@{ant-prefix}-select-selector {
+      border-top-left-radius: 0 !important;
+      border-bottom-left-radius: 0 !important;
     }
   }
 }
 
-.@{ant-prefix}-hw-select-box-addon-after{
-  .@{ant-prefix}-select{
-    .@{ant-prefix}-select-selector{
-      border-bottom-right-radius: 0px !important;
-      border-top-right-radius: 0px !important;
+.@{ant-prefix}-hw-select-box-addon-after {
+  .@{ant-prefix}-select {
+    .@{ant-prefix}-select-selector {
+      border-top-right-radius: 0 !important;
+      border-bottom-right-radius: 0 !important;
     }
   }
 }

package/src/components/Select/index.tsx

@@ -1,4 +1,4 @@
-import { Select} from "antd";
+import { Select } from "antd";
 import React from "react";
 import { useFilterOption, useSelectReq } from "./hooks/norHooks";
 import { useValueChange } from "./hooks/changeHooks";
@@ -6,7 +6,7 @@ import type { HSelectProps } from "./modal";
 import { defaultModeConfig, defaultSelectConfig } from "./defaultConfig";
 import DropdownComponent from "./components/DropdownComponent";
 import AllSelect from "./components/AllSelect";
-import {useChangeOptions, useClassName, useMatchConfigProps} from "../hooks";
+import { useChangeOptions, useClassName, useMatchConfigProps } from "../hooks";
 import HFormConnect from "../Form/HFormConnect";
 const { Option } = Select;
 
@@ -35,8 +35,9 @@ const Index: React.FC<HSelectProps> = ({
   dispatch,
   isList,
   onPopupScroll: propsOnPopupScroll,
-    addonBefore,
-    addonAfter,
+  addonBefore,
+  addonAfter,
+  className,
   ...props
 }) => {
   const { icon, render } = modeConfig?.[mode || ""] || {};
@@ -64,11 +65,11 @@ const Index: React.FC<HSelectProps> = ({
   }); //options
 
   const data = useChangeOptions({ options: resultData, fieldNames });
-  const boxClassName=useClassName("hw-select-box");
-  const addonBeforeClassName=useClassName("hw-group-addon-before");
-  const addonBeforeBoxClassName=useClassName("hw-select-box-addon-before");
-  const addonAfterClassName=useClassName("hw-group-addon-after");
-  const addonAfterBoxClassName=useClassName("hw-select-box-addon-after");
+  const boxClassName = useClassName("hw-select-box");
+  const addonBeforeClassName = useClassName("hw-group-addon-before");
+  const addonBeforeBoxClassName = useClassName("hw-select-box-addon-before");
+  const addonAfterClassName = useClassName("hw-group-addon-after");
+  const addonAfterBoxClassName = useClassName("hw-select-box-addon-after");
   const addonClassname = useClassName(["hw-addon"]);
 
   const { val, change } = useValueChange({
@@ -82,73 +83,82 @@ const Index: React.FC<HSelectProps> = ({
   });
   addDispatchListener?.("reload", reload);
   return (
-      <div className={`${boxClassName} ${addonBefore?addonBeforeBoxClassName:""} ${addonAfter?addonAfterBoxClassName:""}`}  style={style}>
-        {addonBefore&& <div className={`${addonClassname} ${addonBeforeClassName}`}>
+    <div
+      className={`${boxClassName} ${
+        addonBefore ? addonBeforeBoxClassName : ""
+      } ${addonAfter ? addonAfterBoxClassName : ""} ${className}`}
+      style={style}
+    >
+      {addonBefore && (
+        <div className={`${addonClassname} ${addonBeforeClassName}`}>
           {addonBefore}
-        </div>}
-        <Select
-            mode={mode}
-            loading={loading}
-            value={val}
-            style={{width:"100%"}}
-            onSearch={onSearch}
-            onChange={change}
-            dropdownRender={(node) => {
-              return (
-                  <DropdownComponent
-                      loading={loading}
-                      reload={run}
-                      error={error}
-                      options={data}
-                  >
-                    <AllSelect
-                        allSelect={allSelect}
-                        options={data}
-                        mode={mode}
-                        value={val}
-                        onChange={change}
-                        fieldNames={fieldNames}
-                    >
-                      {node}
-                    </AllSelect>
-                  </DropdownComponent> //全选
-              );
-            }}
-            optionLabelProp={optionLabelProp}
-            menuItemSelectedIcon={icon}
-            optionFilterProp={optionFilterProp}
-            filterOption={selfFilterOption}
-            showSearch={mathShowSearch}
-            labelInValue={true}
-            onPopupScroll={propsOnPopupScroll || onPopupScroll}
-            {...props}
-        >
-          {data?.map((item) => {
-            const { value: optionValue, label, ...oItem } = item;
-            const filterKey = filterProvider || "label";
-            const result =
-                typeof filterProvider === "function"
-                    ? filterProvider?.(item)
-                    : item[filterKey as string];
-            const filter = { [optionFilterProp]: result };
-            return (
-                <Option
-                    {...oItem}
-                    value={optionValue}
-                    key={optionValue}
-                    label={label}
-                    mode={mode}
-                    {...filter}
-                >
-                  {render ? render(item, val) : label}
-                </Option>
-            );
-          })}
-        </Select>
-        {addonAfter&&<div className={`${addonClassname} ${addonAfterClassName}`}>
+        </div>
+      )}
+      <Select
+        mode={mode}
+        loading={loading}
+        value={val}
+        style={{ width: "100%" }}
+        onSearch={onSearch}
+        onChange={change}
+        dropdownRender={(node) => {
+          return (
+            <DropdownComponent
+              loading={loading}
+              reload={run}
+              error={error}
+              options={data}
+            >
+              <AllSelect
+                allSelect={allSelect}
+                options={data}
+                mode={mode}
+                value={val}
+                onChange={change}
+                fieldNames={fieldNames}
+              >
+                {node}
+              </AllSelect>
+            </DropdownComponent> //全选
+          );
+        }}
+        optionLabelProp={optionLabelProp}
+        menuItemSelectedIcon={icon}
+        optionFilterProp={optionFilterProp}
+        filterOption={selfFilterOption}
+        showSearch={mathShowSearch}
+        labelInValue={true}
+        onPopupScroll={propsOnPopupScroll || onPopupScroll}
+        {...props}
+      >
+        {data?.map((item) => {
+          const { value: optionValue, label, ...oItem } = item;
+          const filterKey = filterProvider || "label";
+          const result =
+            typeof filterProvider === "function"
+              ? filterProvider?.(item)
+              : item[filterKey as string];
+          const filter = { [optionFilterProp]: result };
+          return (
+            <Option
+              {...oItem}
+              value={optionValue}
+              key={optionValue}
+              label={label}
+              mode={mode}
+              {...filter}
+            >
+              {render ? render(item, val) : label}
+            </Option>
+          );
+        })}
+      </Select>
+      {addonAfter && (
+        <div className={`${addonClassname} ${addonAfterClassName}`}>
           {addonAfter}
-        </div>}
-      </div>
+        </div>
+      )}
+    </div>
   );
 };
 export default HFormConnect(Index);

package/src/components/Select/modal.ts

@@ -39,8 +39,8 @@ export interface HSelectProps
   placeholder?: string;
   dispatch?: DispatchModal;
   isList?: boolean;
-  addonBefore?:React.ReactNode;
-  addonAfter?:React.ReactNode;
+  addonBefore?: React.ReactNode;
+  addonAfter?: React.ReactNode;
 }
 export interface FilterDataModal {
   value: any;

package/src/components/Submit/components.tsx

@@ -1,10 +1,10 @@
-import { Button } from "antd";
 import { useFormContext } from "../Form/Context";
 import React from "react";
 import type {
   ISubmitProps,
   SubmitBarExtraType,
 } from "@/components/Submit/index";
+import {HJBtn} from "@hw-component/hj";
 interface ControlFooterProps extends ISubmitProps {
   action: SubmitBarExtraType;
   style?: React.CSSProperties;
@@ -15,7 +15,7 @@ function ResetBtn({
   ...props
 }: Omit<ControlFooterProps, "action">) {
   return (
-    <Button
+    <HJBtn
       {...props}
       style={style}
       onClick={() => {
@@ -23,7 +23,7 @@ function ResetBtn({
       }}
     >
       重置
-    </Button>
+    </HJBtn>
   );
 }
 
@@ -38,7 +38,7 @@ function SubBtn({
   const { loading: formSubLoading = loading } = useFormContext();
 
   return (
-    <Button
+    <HJBtn
       {...props}
       type={type as any}
       onClick={form.submit}
@@ -46,7 +46,7 @@ function SubBtn({
       style={style}
     >
       {text}
-    </Button>
+    </HJBtn>
   );
 }
 

package/src/components/Switch/index.tsx

@@ -5,8 +5,8 @@ import { useClassName, useMatchConfigProps } from "../hooks";
 import type { ValueSwitchMapModal } from "../modal";
 import type { addFormatItemModal } from "../Form/modal";
 import HFormConnect from "../Form/HFormConnect";
-import {PromiseFnResult} from "../modal";
-import {useRequest} from "ahooks";
+import type { PromiseFnResult } from "../modal";
+import { useRequest } from "ahooks";
 
 export interface HSwitchProps extends Omit<SwitchProps, "onChange"> {
   valueMap?: ValueSwitchMapModal;
@@ -14,7 +14,7 @@ export interface HSwitchProps extends Omit<SwitchProps, "onChange"> {
   onChange?: (val: any) => void;
   beforeText?: React.ReactNode;
   addFormat?: (format: Record<string, addFormatItemModal>) => void;
-  request?:PromiseFnResult
+  request?: PromiseFnResult;
 }
 const Index: React.FC<HSwitchProps> = ({
   value,
@@ -26,7 +26,7 @@ const Index: React.FC<HSwitchProps> = ({
   beforeText,
   addFormat,
   style,
-    request,
+  request,
   ...props
 }) => {
   const { valueSwitchMap = {} } = useMatchConfigProps({
@@ -35,17 +35,20 @@ const Index: React.FC<HSwitchProps> = ({
   const switchClassName = useClassName("hw-switch");
   const switchBefore = useClassName("hw-switch-before");
   const switchAfter = useClassName("hw-switch-after");
-  const {run,loading}=useRequest(async (val)=>{
-        await request?.(val);
-        onChange?.(val);
-  },{manual:true});
+  const { run, loading } = useRequest(
+    async (val) => {
+      await request?.(val);
+      onChange?.(val);
+    },
+    { manual: true }
+  );
   const swChecked = useMemo(() => {
     const { open } = valueSwitchMap;
     return value === open;
   }, [value]);
   const change = (checked) => {
-    const subVal = checked?valueSwitchMap.open:valueSwitchMap.close;
-    if (request){
+    const subVal = checked ? valueSwitchMap.open : valueSwitchMap.close;
+    if (request) {
       run(subVal);
       return;
     }
@@ -56,18 +59,18 @@ const Index: React.FC<HSwitchProps> = ({
       inputValue: (item, initValue) => {
         const { close } = valueSwitchMap;
         const { name: valueName = "" } = item;
-        let val = initValue[(valueName as string)];
+        let val = initValue[valueName as string];
         if (typeof val === "undefined" || val === null) {
           val = close;
         }
         return {
-          [(valueName as string)]: val,
+          [valueName as string]: val,
         };
       },
       outputValue: (item, outputValue) => {
         const { name = "" } = item;
         return {
-          [(name as string)]: outputValue[(name as string)],
+          [name as string]: outputValue[name as string],
         };
       },
     },

package/src/components/TDPicker/RangePicker.tsx

@@ -62,12 +62,12 @@ const HRangePicker: React.FC<HRangePickerProps> = ({
         });
         const hasKeys = Object.keys(resultObj).length !== 0;
         return {
-          [(valueName as string)]: hasKeys ? resultObj : null,
+          [valueName as string]: hasKeys ? resultObj : null,
         };
       },
       outputValue: (item, outputValue) => {
         const { name: valueName = "" } = item;
-        const { [(valueName as string)]: itemVal = {} } = outputValue;
+        const { [valueName as string]: itemVal = {} } = outputValue;
         return {
           ...itemVal,
         };

package/src/components/Text/index.tsx

@@ -1,6 +1,6 @@
-import {Typography} from "antd";
-import {HFormItemProps} from "../Form/modal";
+import { Typography } from "antd";
+import type { HFormItemProps } from "../Form/modal";
 
-export default ({value}:HFormItemProps)=>{
-    return <Typography.Text>{value}</Typography.Text>
-}
+export default ({ value }: HFormItemProps) => {
+  return <Typography.Text>{value}</Typography.Text>;
+};

package/src/components/TextArea/TrimTextArea.tsx

@@ -12,14 +12,14 @@ const Index = ({ addFormat, ...props }: TrimTextAreaProps) => {
       inputValue: (item, initValue) => {
         const { name: valueName = "" } = item;
         return {
-          [(valueName as string)]: initValue[(valueName as string)],
+          [valueName as string]: initValue[valueName as string],
         };
       },
       outputValue: (item, outputValue) => {
         const { name = "" } = item;
-        const { [(name as string)]: itemVal } = outputValue;
+        const { [name as string]: itemVal } = outputValue;
         return {
-          [(name as string)]: itemVal?.trim(),
+          [name as string]: itemVal?.trim(),
         };
       },
     },

package/src/components/Upload/MediaTypeEle/TypeEle.tsx

@@ -24,7 +24,13 @@ export default ({ mediaType, url, onReady, onError }: TypeEleProps) => {
 
   if (mediaType === MediaTypeEnum.audio) {
     return (
-      <audio autoPlay controls  style={{width:"100%"}}  onPlay={onReady} onError={onError}>
+      <audio
+        autoPlay
+        controls
+        style={{ width: "100%" }}
+        onPlay={onReady}
+        onError={onError}
+      >
         <source src={url} />
       </audio>
     );

package/src/components/Upload/UrlUpload/index.tsx

@@ -103,7 +103,7 @@ const Index = ({
         }}
       />
       {inputHelper && <Text type={"secondary"}>{inputHelper}</Text>}
-      <Upload {...upProps} ref={ref} value={value} onChange={onChange}/>
+      <Upload {...upProps} ref={ref} value={value} onChange={onChange} />
       {load && (
         <div style={{ display: "none" }}>
           <TypeEle

package/src/components/Upload/index.tsx

@@ -63,7 +63,7 @@ const Index: React.ForwardRefRenderFunction<IUploadRefModal, IUpLoadProps> = (
     float: {
       inputValue: (item, initValue) => {
         const { name = "" } = item;
-        const initFileList = initValue[(name as string)] || [];
+        const initFileList = initValue[name as string] || [];
         const relInitFileList =
           typeof initFileList === "string" ? [initFileList] : initFileList;
         const fileList = relInitFileList.map((itemData, index) => {
@@ -81,17 +81,17 @@ const Index: React.ForwardRefRenderFunction<IUploadRefModal, IUpLoadProps> = (
           return { ...itemData };
         });
         return {
-          [(name as string)]: fileList,
+          [name as string]: fileList,
         };
       },
       outputValue: (item, outputValue) => {
         const { name: valueName = "" } = item;
-        const { [(valueName as string)]: itemVal = [] } = outputValue;
+        const { [valueName as string]: itemVal = [] } = outputValue;
         const urls = itemVal.map((fileItem) => {
           return fileItem.response.url;
         });
         return {
-          [(valueName as string)]: maxCount === 1 ? urls[0] : urls,
+          [valueName as string]: maxCount === 1 ? urls[0] : urls,
         };
       },
     },

package/src/components/index.tsx

@@ -3,7 +3,7 @@ import FormConfig from "./Form/config";
 import PageHandler from "./PageHandler";
 export { default as HForm } from "./Form";
 export { default as useHForm } from "./Form/hooks/useHForm";
-export { useHDialogForm } from "./DialogForm/hooks";
+export { useHDialogForm } from "@/components/DialogForm/hooks";
 export { default as HFormConnect } from "./Form/HFormConnect";
 export { default as HFormConfigProvider } from "./Form/Context/FormConfigProvider";
 export { default as HBasicForm } from "./Form/Basic";

package/src/components/styles/index.less

@@ -3,7 +3,7 @@
 @import "../Input/index.less";
 @import "../Switch/index.less";
 
-.@{ant-prefix}-hw-addon{
+.@{ant-prefix}-hw-addon {
   display: flex !important;
   align-items: center;
   padding: 0 11px;
@@ -15,4 +15,4 @@
     color: #ff4d4f;
     border-color: #ff4d4f !important;
   }
-}
+}

package/src/index.less

@@ -1,3 +1,4 @@
+@import '~@hw-component/hj/src/components/styles/index.less';
 .layout {
   position: fixed;
   top: 0;

package/src/index.tsx

@@ -4,6 +4,7 @@ import React from "react";
 import "antd/dist/antd.css";
 import zhCN from "antd/es/locale/zh_CN";
 import { ConfigProvider } from "antd";
+
 render(
   <ConfigProvider locale={zhCN}>
     <App />