@hw-component/form 0.0.5 → 0.0.6-beta-v1

package/src/components/Input/SelectInput.tsx

@@ -2,27 +2,55 @@ import { Input } from "antd";
 import type { HSelectInputProps } from "./modal";
 import HSelect from "../Select";
 import { defaultSelectStyle, defaultValueName } from "./defaultConfig";
+import HFormConnect from "../Form/HFormConnect";
 export enum SelectInputType {
   input,
   select,
 }
-
-export default ({
+export const Index = ({
   selectProps = {},
   value = {},
   onChange,
   valueName = defaultValueName,
+  addFormat,
+  addDispatchListener,
   ...props
 }: HSelectInputProps) => {
   const { input = "", select = "" } = valueName;
   const { [input]: inputVal, [select]: selectVal } = value;
-  const { style = defaultSelectStyle, ...sProps } = selectProps;
+  const {
+    style = defaultSelectStyle,
+    placeholder = "请选择",
+    ...sProps
+  } = selectProps;
   const change = (val, key) => {
     const newVal = { ...value };
     newVal[key] = val;
     const type = key === input ? SelectInputType.input : SelectInputType.select;
     onChange?.(newVal, type);
   };
+  addFormat?.({
+    float: {
+      inputValue: (item, initValue) => {
+        const { name = "" } = item;
+        const resultObj = {};
+        Object.values(valueName).forEach((key) => {
+          resultObj[key] = initValue[key];
+        });
+        return {
+          [name]: resultObj,
+        };
+      },
+      outputValue: (item, outputValue) => {
+        const { name = "" } = item;
+        const { [name]: itemVal = {} } = outputValue;
+        const newItemVal = { [itemVal[select]]: itemVal[input] };
+        return {
+          ...newItemVal,
+        };
+      },
+    },
+  });
   return (
     <Input
       value={inputVal}
@@ -33,6 +61,7 @@ export default ({
         <HSelect
           {...sProps}
           style={style}
+          placeholder={placeholder}
           value={selectVal}
           onChange={(val) => {
             change(val, select);
@@ -43,3 +72,4 @@ export default ({
     />
   );
 };
+export default HFormConnect(Index);

package/src/components/Input/modal.ts

@@ -0,0 +1,36 @@
+import type { ButtonProps, InputProps } from "antd";
+import type { HSelectProps } from "../Select/modal";
+import type { SelectInputType } from "./SelectInput";
+import type { PromiseFnResult } from "../modal";
+import type { addFormatItemModal } from "../Form/modal";
+import type { AddDispatchListenerFn } from "../Form/modal";
+export interface HInputProps<V = any>
+  extends Omit<InputProps, "onChange" | "value"> {
+  onChange?: (value: V) => void;
+  value?: V;
+}
+
+interface ValueNameModal {
+  input?: string;
+  select?: string;
+}
+
+export interface HSelectInputProps
+  extends Omit<HInputProps, "value" | "onChange"> {
+  selectProps?: HSelectProps;
+  value?: Record<string, any>;
+  onChange?: (value: Record<string, any>, type: SelectInputType) => void;
+  valueName?: ValueNameModal;
+  addFormat?: (config: Record<string, addFormatItemModal>) => void;
+  addDispatchListener?: AddDispatchListenerFn;
+}
+export interface HButtonProps extends Omit<ButtonProps, "onClick"> {
+  onClick: (
+    value: string | readonly string[] | number | undefined,
+    onChange?: (val: any) => void
+  ) => void;
+}
+export interface HButtonInputProps extends HInputProps {
+  buttonProps?: HButtonProps;
+  request?: PromiseFnResult;
+}

package/src/components/PageHandler/ErrorComponent.tsx

@@ -0,0 +1,20 @@
+import { Button, Row, Space, Typography } from "antd";
+import { ExclamationCircleOutlined } from "@ant-design/icons";
+import type { IHPageHandler } from "./modal";
+
+const { Text } = Typography;
+export default ({ error, reload }: IHPageHandler) => {
+  return (
+    <Row justify={"center"} align={"middle"} style={{ height: 125 }}>
+      <Space align={"center"} direction={"vertical"}>
+        <Text type={"danger"}>
+          <ExclamationCircleOutlined size={24} />
+        </Text>
+        <Text type={"danger"}>{error?.message}</Text>
+        <Button type="primary" size={"small"} onClick={reload}>
+          重新加载
+        </Button>
+      </Space>
+    </Row>
+  );
+};

package/src/components/PageHandler/LoadingComponent.tsx

@@ -0,0 +1,9 @@
+import { Row, Spin } from "antd";
+
+export default () => {
+  return (
+    <Row justify={"center"} align={"middle"} style={{ height: 125 }}>
+      <Spin size="large" />
+    </Row>
+  );
+};

package/src/components/PageHandler/index.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import Loading from "./LoadingComponent";
+import ErrorComponent from "./ErrorComponent";
+import type { IHPageHandler } from "./modal";
+const Index: React.FC<IHPageHandler> = ({ error, data, reload, children }) => {
+  if (error) {
+    return <ErrorComponent error={error} reload={reload} />;
+  }
+  if (data) {
+    return <>{children}</>;
+  }
+  return <Loading />;
+};
+export default Index;

package/src/components/PageHandler/modal.ts

@@ -0,0 +1,6 @@
+export interface IHPageHandler<T = any> {
+  loading?: boolean;
+  error?: Error;
+  reload: VoidFunction;
+  data?: T;
+}

package/src/components/RadioGroup/index.tsx

@@ -1,9 +1,10 @@
 import { Radio } from "antd";
 import type { SelectProps, RadioGroupProps } from "antd/es";
 import { useMemo } from "react";
-import { baseConfig } from "../config";
+import { useMatchConfigProps } from "../hooks";
 
-interface IProps extends Omit<RadioGroupProps, "onChange" | "options"> {
+export interface HRadioGroupProps
+  extends Omit<RadioGroupProps, "onChange" | "options"> {
   onChange?: (value: any) => void;
   fieldNames?: SelectProps["fieldNames"];
   options?: (Record<string, any> | string | number)[];
@@ -12,9 +13,12 @@ export default ({
   value,
   options,
   onChange,
-  fieldNames = baseConfig.defaultFieldNames,
+  fieldNames: propsFieldNames,
   ...props
-}: IProps) => {
+}: HRadioGroupProps) => {
+  const { fieldNames = {} } = useMatchConfigProps({
+    fieldNames: propsFieldNames,
+  });
   const relOptions = useMemo(() => {
     return options?.map((item) => {
       const type = typeof item;

package/src/components/Select/components/AllSelect.tsx

@@ -1,26 +1,33 @@
 import type { HSelectProps } from "@/components/Select/modal";
 import { Checkbox, Space } from "antd";
-import "../index.less";
 import { itemOpProvider } from "../utils";
-import { useClassName } from "../../hooks/useClassName";
+import { useClassName } from "../../hooks";
+import React from "react";
+
 interface IProps extends HSelectProps {
   checked?: boolean;
 }
-export default ({
+const useRootClassName = (checked: boolean) => {
+  const norClassNames = ["select-item", "select-item-option"];
+  return checked
+    ? [...norClassNames, "select-item-option-selected"]
+    : norClassNames;
+};
+const Index: React.FC<IProps> = ({
   allSelect,
   mode,
   onChange,
   value,
   serviceSearch,
   options,
-  fieldNames,
-}: IProps) => {
-  if (!allSelect || mode !== "multiple" || serviceSearch) {
-    return null;
-  }
+  fieldNames = {},
+  children,
+}) => {
   const opLen = options?.length || 0;
   const checked = (value as any[])?.length >= opLen;
-  const optionsClassName = useClassName("hw-option");
+  const classNames = useRootClassName(checked);
+  const optionsClassName = useClassName(classNames);
+  const allCheckBox = useClassName("hw-all-check-box");
   const change = () => {
     if (!checked) {
       const subItemOps = itemOpProvider(options, fieldNames);
@@ -29,15 +36,19 @@ export default ({
     }
     onChange?.([], []);
   };
+  if (!allSelect || mode !== "multiple" || serviceSearch) {
+    return <>{children}</>;
+  }
   return (
-    <div
-      className={`ant-select-item ant-select-item-option ${optionsClassName}`}
-      onClick={change}
-    >
-      <Space>
-        <Checkbox checked={checked} />
-        全部
-      </Space>
+    <div className={allCheckBox}>
+      <div className={optionsClassName} onClick={change}>
+        <Space>
+          <Checkbox checked={checked} />
+          全部
+        </Space>
+      </div>
+      {children}
     </div>
   );
 };
+export default Index;

package/src/components/Select/components/DropdownComponent.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Spin, Row, Space, Typography } from "antd";
 import NotFoundContent from "./NotFoundContent";
+
 interface IProps {
   loading?: boolean;
   options?: any[];

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

@@ -11,7 +11,7 @@ export default ({ error, reload }: IProps) => {
       <Row justify={"center"} align={"middle"} style={{ height: 125 }}>
         <Space align={"center"} direction={"vertical"}>
           <Text type={"danger"}>
-            <ExclamationCircleOutlined style={{ fontSize: 24 }} />
+            <ExclamationCircleOutlined size={24} />
           </Text>
           <Text type={"danger"}>{error.message}</Text>
           <Button type="primary" size={"small"} onClick={reload}>

package/src/components/Select/hooks/changeHooks.tsx

@@ -5,7 +5,6 @@ import type {
 import { useEffect, useState } from "react";
 import type { FilterDataModal } from "@/components/Select/modal";
 import { itemOpProvider } from "../utils";
-import { baseConfig } from "../../config";
 
 const single = ({ options, value, noMatchItemRender }: PartialHSelectProps) => {
   const newOptions = options || [];
@@ -117,7 +116,7 @@ export const useValueChange = (params: PartialHSelectProps) => {
     options,
     mode,
     noMatchItemRender,
-    fieldNames = baseConfig.defaultFieldNames,
+    fieldNames = {},
   } = params;
   const [val, setVal] = useState<any>();
 
@@ -139,6 +138,11 @@ export const useValueChange = (params: PartialHSelectProps) => {
     onChange(newChangeVal, subItemOps);
   };
   useEffect(() => {
+    if (mode === "tags" || value === null || value === undefined) {
+      setVal(value);
+      return;
+    }
+
     if (options && value) {
       setVal((oldVale) => {
         return matchNotFind(params, oldVale);

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

@@ -1,47 +1,74 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import type {
   OptionType,
   PartialHSelectProps,
 } from "@/components/Select/modal";
 import { useRequest } from "ahooks";
+import { useFormContext } from "../../Form/Context";
 
+interface ParamsModal {
+  options?: OptionType[];
+  params?: any;
+}
 export const useOptionReq = ({
   manual,
   request,
   options,
   serviceSearch,
+  showSearch,
+  onSearch: propsOnSearch,
+  dispatch = {},
 }: PartialHSelectProps) => {
+  const { manual: dispatchManual } = dispatch;
+  const { form } = useFormContext();
   const [data, setData] = useState<OptionType[] | undefined>();
   const { run, loading, error } = useRequest(
-    async (params = {}, type = "init") => {
+    async (requestParams = {}) => {
+      const { params = {}, values, type = "init" } = requestParams;
+      const formData = values || form?.getFieldsValue();
       if (type === "init") {
         setData(undefined);
       }
       if (request) {
-        return request(params);
+        return request(params, formData);
       }
       return Promise.resolve(options);
     },
     {
-      manual,
+      manual: dispatchManual === false ? true : manual,
       debounceInterval: 300,
       onSuccess: (resultData) => {
         setData(resultData);
       },
     }
   );
+  const reload = ({ options: changeOpts, params }: ParamsModal) => {
+    if (changeOpts) {
+      return setData(changeOpts);
+    }
+    return run({ params });
+  };
   const onSearch = (inputValue: string) => {
     if (!serviceSearch) {
+      propsOnSearch?.(inputValue);
       return;
     }
-    run({ inputValue });
+    run({ params: { inputValue } });
   };
+  useEffect(() => {
+    if (options) {
+      setData(options);
+    }
+  }, [options]);
+  const mathShowSearch = showSearch || serviceSearch;
   return {
     run,
     loading,
     error,
     data,
-    onSearch,
+    onSearch: mathShowSearch ? onSearch : propsOnSearch,
+    mathShowSearch: showSearch || serviceSearch,
+    reload,
   };
 };
 

package/src/components/Select/index.less

@@ -1,6 +1,22 @@
-@import '../styles/local.less';
-.@{ant-prefix}-hw-option {
-  &:hover {
-    background-color: #f5f5f5;
+@import "../styles/local.less";
+@all-check-box: ~"@{ant-prefix}-hw-all-check-box";
+
+.@{all-check-box} {
+  .@{ant-prefix}-select-item-option-active:not(
+      .@{ant-prefix}-select-item-option-disabled
+    ) {
+    background-color: transparent;
+  }
+  .@{ant-prefix}-select-item-option-selected:not(
+      .@{ant-prefix}-select-item-option-disabled
+    ) {
+    background-color: #e6f7ff;
+  }
+  .@{ant-prefix}-select-item-option:not(
+      .@{ant-prefix}-select-item-option-selected
+    ) {
+    &:hover {
+      background-color: #f5f5f5;
+    }
   }
 }

package/src/components/Select/index.tsx

@@ -6,22 +6,23 @@ import type { HSelectProps } from "./modal";
 import { defaultModeConfig, defaultSelectConfig } from "./defaultConfig";
 import DropdownComponent from "./components/DropdownComponent";
 import AllSelect from "./components/AllSelect";
-import { useChangeOptions } from "../hooks/useChangeOptions";
+import { useChangeOptions, useMatchConfigProps } from "../hooks";
+import HFormConnect from "../Form/HFormConnect";
 const { Option } = Select;
 
-export default ({
+const Index: React.FC<HSelectProps> = ({
   style = { width: "100%" },
   mode,
   options,
   modeConfig = defaultModeConfig,
   value,
   onChange,
-  fieldNames,
+  fieldNames: propsFieldNames,
   request,
   manual,
   optionLabelProp = "label",
   filterProvider,
-  optionFilterProp = "filterlabel",
+  optionFilterProp = "filterLabel",
   serviceSearch,
   onSearch: propsOnSearch,
   filterOption,
@@ -29,9 +30,13 @@ export default ({
   labelInValue,
   noMatchItemRender = defaultSelectConfig.noMatchItemRender,
   allSelect,
+  addDispatchListener,
+  addFormat,
+  dispatch,
   ...props
-}: HSelectProps) => {
+}) => {
   const { icon, render } = modeConfig?.[mode || ""] || {};
+  const { fieldNames } = useMatchConfigProps({ fieldNames: propsFieldNames });
   const selfFilterOption = useFilterOption({ filterOption, serviceSearch });
   const {
     run,
@@ -39,13 +44,19 @@ export default ({
     data: resultData,
     error,
     onSearch,
+    mathShowSearch,
+    reload,
   } = useOptionReq({
     options,
     manual,
     fieldNames,
     request,
     serviceSearch,
+    showSearch,
+    onSearch: propsOnSearch,
+    dispatch,
   }); //options
+
   const data = useChangeOptions({ options: resultData, fieldNames });
   const { val, change } = useValueChange({
     labelInValue,
@@ -56,13 +67,14 @@ export default ({
     noMatchItemRender,
     fieldNames,
   });
+  addDispatchListener?.("reload", reload);
   return (
     <Select
       style={style}
       mode={mode}
       loading={loading}
       value={val}
-      onSearch={propsOnSearch || onSearch}
+      onSearch={onSearch}
       onChange={change}
       dropdownRender={(node) => {
         return (
@@ -78,8 +90,9 @@ export default ({
               mode={mode}
               value={val}
               onChange={change}
-            />
-            {node}
+            >
+              {node}
+            </AllSelect>
           </DropdownComponent> //全选
         );
       }}
@@ -87,21 +100,21 @@ export default ({
       menuItemSelectedIcon={icon}
       optionFilterProp={optionFilterProp}
       filterOption={selfFilterOption}
-      showSearch={showSearch}
+      showSearch={mathShowSearch}
       labelInValue={true}
       {...props}
     >
       {data?.map((item) => {
         const { value: optionValue, label } = item;
         const result = filterProvider?.(item) || label;
-        const filer = { [optionFilterProp]: result };
+        const filter = { [optionFilterProp]: result };
         return (
           <Option
             value={optionValue}
             key={optionValue}
             label={label}
             mode={mode}
-            {...filer}
+            {...filter}
           >
             {render ? render(item, val) : label}
           </Option>
@@ -110,3 +123,4 @@ export default ({
     </Select>
   );
 };
+export default HFormConnect(Index);

package/src/components/Select/modal.ts

@@ -1,27 +1,36 @@
 import type { SelectProps } from "antd";
 import type React from "react";
-
+import type { PromiseFnResult } from "../modal";
+import type { argsFn } from "@/components/Form/modal";
+import type { addFormatItemModal } from "@/components/Form/modal";
+import type { DispatchModal } from "@/components/Form/modal";
 export type OptionType = Record<string, any>;
 export type PartialHSelectProps = Partial<HSelectProps>;
 export type RenderFn = (data: OptionType) => React.ReactNode;
+
 interface ModeConfigItem {
-  icon?: React.ReactNode | null;
-  render?: (item: OptionType, value: any[]) => React.ReactNode;
+  icon?: React.ReactNode | null; //自定义多选时当前选中的条目图标
+  render?: (item: OptionType, value: any[]) => React.ReactNode; //options内容
 }
 export interface ModeConfig {
   multiple?: ModeConfigItem;
   tags?: ModeConfigItem;
 }
-export interface HSelectProps extends Omit<SelectProps, "options"> {
+export interface HSelectProps
+  extends Omit<SelectProps, "options" | "placeholder"> {
   style?: React.CSSProperties;
   request?: PromiseFnResult<any, OptionType[]>;
   manual?: boolean;
   modeConfig?: ModeConfig;
-  filterProvider?: (item: any) => string;
-  serviceSearch?: boolean;
+  filterProvider?: (item: any) => string; //筛选字段默认为label
+  serviceSearch?: boolean; //服务端搜索
   options?: OptionType[];
-  noMatchItemRender?: RenderFn;
-  allSelect?: boolean;
+  noMatchItemRender?: RenderFn; //没有数据
+  allSelect?: boolean; //显示全选
+  addDispatchListener?: (key: string, fn: argsFn) => void;
+  addFormat?: (format: Record<string, addFormatItemModal>) => void;
+  placeholder?: string;
+  dispatch?: DispatchModal;
 }
 export interface FilterDataModal {
   value: any;

package/src/components/Submit/index.tsx

@@ -0,0 +1,46 @@
+import { Button, Row, Space } from "antd";
+import React from "react";
+import { useFormContext } from "../Form/Context";
+import type { ButtonProps, FormInstance } from "antd/es";
+
+export interface ISubmitProps extends Omit<ButtonProps, "form"> {
+  text?: string;
+  form: FormInstance;
+  reset?: boolean;
+  position?: "start" | "end";
+}
+export default ({
+  text = "提交",
+  type = "primary",
+  form,
+  loading,
+  position = "start",
+  reset,
+  ...props
+}: ISubmitProps) => {
+  const { loading: formSubLoading = loading } = useFormContext();
+  return (
+    <Row justify={position} style={{ width: "100%" }}>
+      <Space>
+        {reset && (
+          <Button
+            {...props}
+            onClick={() => {
+              form.resetFields();
+            }}
+          >
+            重制
+          </Button>
+        )}
+        <Button
+          {...props}
+          type={type}
+          onClick={form.submit}
+          loading={formSubLoading}
+        >
+          {text}
+        </Button>
+      </Space>
+    </Row>
+  );
+};

package/src/components/Switch/index.tsx

@@ -1,31 +1,36 @@
 import type { SwitchProps } from "antd";
 import { Space, Switch } from "antd";
 import React, { useMemo } from "react";
-import { baseConfig } from "../config";
-interface IProps extends Omit<SwitchProps, "onChange"> {
-  valueCheckMap?: ValueCheckMapModal;
+import { useMatchConfigProps } from "../hooks";
+import type { ValueSwitchMapModal } from "../modal";
+
+export interface HSwitchProps extends Omit<SwitchProps, "onChange"> {
+  valueMap?: ValueSwitchMapModal;
   value?: any;
   onChange?: (val: any) => void;
   beforeText?: React.ReactNode;
 }
-const Index: React.FC<IProps> = ({
+const Index: React.FC<HSwitchProps> = ({
   value,
   onChange,
-  valueCheckMap = baseConfig.defaultValueSwitchMap,
+  valueMap: propsValueSwitchMap,
   children,
   unCheckedChildren = "关闭",
   checkedChildren = "开启",
   beforeText,
   ...props
 }) => {
+  const { valueSwitchMap = {} } = useMatchConfigProps({
+    valueSwitchMap: propsValueSwitchMap,
+  });
   const swChecked = useMemo(() => {
-    const { checked } = valueCheckMap;
-    return value === checked;
+    const { open } = valueSwitchMap;
+    return value === open;
   }, [value]);
   const change = (checked) => {
-    let subVal = valueCheckMap?.noChecked;
+    let subVal = valueSwitchMap.close;
     if (checked) {
-      subVal = valueCheckMap?.checked;
+      subVal = valueSwitchMap.open;
     }
     onChange?.(subVal);
   };