@hw-component/form 0.0.9-beta-v21 → 1.0.0

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

@@ -0,0 +1,45 @@
+import { Radio } from "antd";
+import type { SelectProps, RadioGroupProps } from "antd/es";
+import { useMemo } from "react";
+import { useMatchConfigProps } from "../hooks";
+
+export interface HRadioGroupProps
+  extends Omit<RadioGroupProps, "onChange" | "options"> {
+  onChange?: (value: any) => void;
+  fieldNames?: SelectProps["fieldNames"];
+  options?: (Record<string, any> | string | number)[];
+}
+export default ({
+  value,
+  options,
+  onChange,
+  fieldNames: propsFieldNames,
+  ...props
+}: HRadioGroupProps) => {
+  const { fieldNames = {} } = useMatchConfigProps({
+    fieldNames: propsFieldNames,
+  });
+  const relOptions = useMemo(() => {
+    return options?.map((item) => {
+      const type = typeof item;
+      if (type === "string" || type === "number") {
+        return item;
+      }
+      const { label: labelKey = "", value: valueKey = "" } = fieldNames;
+      return {
+        label: item[labelKey],
+        value: item[valueKey],
+      };
+    });
+  }, [options, fieldNames]);
+  return (
+    <Radio.Group
+      options={relOptions as RadioGroupProps["options"]}
+      value={value}
+      onChange={(e) => {
+        onChange?.(e.target.value);
+      }}
+      {...props}
+    />
+  );
+};

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

@@ -0,0 +1,54 @@
+import type { HSelectProps } from "@/components/Select/modal";
+import { Checkbox, Space } from "antd";
+import { itemOpProvider } from "../utils";
+import { useClassName } from "../../hooks";
+import React from "react";
+
+interface IProps extends HSelectProps {
+  checked?: boolean;
+}
+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 = {},
+  children,
+}) => {
+  const opLen = options?.length || 0;
+  const checked = (value as any[])?.length >= opLen;
+  const classNames = useRootClassName(checked);
+  const optionsClassName = useClassName(classNames);
+  const allCheckBox = useClassName("hw-all-check-box");
+  const change = () => {
+    if (!checked) {
+      const subItemOps = itemOpProvider(options, fieldNames);
+      onChange?.(options, subItemOps);
+      return;
+    }
+    onChange?.([], []);
+  };
+  if (!allSelect || mode !== "multiple" || serviceSearch) {
+    return <>{children}</>;
+  }
+  return (
+    <div className={allCheckBox}>
+      <div className={optionsClassName} onClick={change}>
+        <Space>
+          <Checkbox checked={checked} />
+          全部
+        </Space>
+      </div>
+      {children}
+    </div>
+  );
+};
+export default Index;

package/src/components/Select/components/CheckBoxOption.tsx

@@ -0,0 +1,14 @@
+import { Space, Checkbox } from "antd";
+import React from "react";
+interface ICheckBoxOptionProps {
+  label?: React.ReactNode;
+  checked: boolean;
+}
+export default ({ label, checked }: ICheckBoxOptionProps) => {
+  return (
+    <Space>
+      <Checkbox checked={checked} />
+      {label}
+    </Space>
+  );
+};

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

@@ -0,0 +1,36 @@
+import React from "react";
+import { Spin, Row, Space, Typography } from "antd";
+import NotFoundContent from "./NotFoundContent";
+
+interface IProps {
+  loading?: boolean;
+  options?: any[];
+  error?: Error;
+  reload: VoidFunction;
+}
+const { Text } = Typography;
+const Index: React.FC<IProps> = ({
+  loading,
+  error,
+  options = [],
+  reload,
+  children,
+}) => {
+  const len = options?.length;
+  if (loading && len === 0) {
+    return (
+      <Row style={{ height: 125 }} justify="center" align={"middle"}>
+        <Space direction={"vertical"} align={"center"}>
+          <Spin />
+          <Text type={"secondary"}>拼命加载中...</Text>
+        </Space>
+      </Row>
+    );
+  }
+  if (error && len === 0) {
+    return <NotFoundContent error={error} reload={reload} />;
+  }
+  return <>{children}</>;
+};
+
+export default Index;

package/src/components/Select/components/NoFindItem.tsx

@@ -0,0 +1,7 @@
+import { Typography } from "antd";
+interface IProps {
+  label: string;
+}
+export default ({ label }: IProps) => {
+  return <Typography.Text type="danger">{label}</Typography.Text>;
+};

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

@@ -0,0 +1,25 @@
+import { Empty, Row, Space, Typography, Button } from "antd";
+import { ExclamationCircleOutlined } from "@ant-design/icons";
+const { Text } = Typography;
+interface IProps {
+  error?: Error;
+  reload: VoidFunction;
+}
+export default ({ error, reload }: IProps) => {
+  if (error) {
+    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>
+    );
+  }
+  return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;
+};

package/src/components/Select/defaultConfig.tsx

@@ -0,0 +1,23 @@
+import CheckBoxOption from "./components/CheckBoxOption";
+import NoFindItem from "./components/NoFindItem";
+import type { HSelectProps } from "@/components/Select/modal";
+
+export const defaultModeConfig: HSelectProps["modeConfig"] = {
+  multiple: {
+    icon: null,
+    render: (item, value) => {
+      const checkVal = value?.map((itemVal) => {
+        return itemVal.value;
+      });
+      const newVal = checkVal || [];
+      const checked = newVal.indexOf(item.value) !== -1;
+      return <CheckBoxOption label={item.label} checked={checked} />;
+    },
+  },
+};
+
+export const defaultSelectConfig = {
+  noMatchItemRender: () => {
+    return <NoFindItem label={"选项被删除，请重新选择"} />;
+  },
+};

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

@@ -0,0 +1,159 @@
+import type {
+  OptionType,
+  PartialHSelectProps,
+} from "@/components/Select/modal";
+import { useEffect, useState } from "react";
+import type { FilterDataModal } from "@/components/Select/modal";
+import { itemOpProvider } from "../utils";
+
+const single = ({ options, value, noMatchItemRender }: PartialHSelectProps) => {
+  const newOptions = options || [];
+  const index = newOptions.findIndex((item) => {
+    return item.value === value;
+  });
+  if (index !== -1) {
+    const { label } = newOptions[index];
+    return {
+      value,
+      label,
+    };
+  }
+  return {
+    value,
+    label: noMatchItemRender?.({ value }) || value,
+  };
+}; //单选模式
+const findNewValInOldVal = (val, oldVal?: any[]) => {
+  if (!oldVal) {
+    return -1;
+  }
+  return oldVal.findIndex((item) => {
+    return item.value === val;
+  });
+}; //查询新增的 value
+const sourceDataProvider = (
+  { options, value }: PartialHSelectProps,
+  oldVal?: any[]
+) => {
+  const oldData: FilterDataModal[] = [];
+  const newData: FilterDataModal[] = [];
+  value.forEach((item, i) => {
+    const index = findNewValInOldVal(item, oldVal);
+    if (index === -1) {
+      newData.push({
+        value: item,
+        index: i,
+      });
+      return;
+    }
+    const newVal = oldVal?.[index];
+    oldData.push({
+      ...newVal,
+      index: i,
+    });
+  });
+  return {
+    oldData,
+    newData,
+  };
+}; //创建新旧数据
+const resultProvider = (
+  newData: FilterDataModal[],
+  oldData: FilterDataModal[],
+  value: any[]
+) => {
+  const newResult = new Array(value.length);
+  oldData.forEach((item) => {
+    const { index, ...val } = item;
+    newResult[index] = {
+      ...val,
+    };
+  });
+  newData.forEach((item) => {
+    const { index, ...val } = item;
+    newResult[index] = {
+      ...val,
+    };
+  });
+  return newResult;
+};
+const multiple = (
+  { options, value, noMatchItemRender }: PartialHSelectProps,
+  oldVal?: any[]
+) => {
+  const { newData, oldData } = sourceDataProvider({ options, value }, oldVal);
+  const newMatchVal = newData.map((item) => {
+    const { value: itemVal, index } = item;
+    const newItem = single({ options, value: itemVal, noMatchItemRender });
+    return {
+      ...newItem,
+      index,
+    };
+  });
+  return resultProvider(newMatchVal, oldData, value);
+}; //多选
+const tag = ({ options, value }: PartialHSelectProps, oldVal?: any[]) => {
+  const { newData, oldData } = sourceDataProvider({ options, value }, oldVal);
+  return resultProvider(newData, oldData, value);
+}; //tags模式
+const matchNotFind = (
+  { options, value, mode, noMatchItemRender }: PartialHSelectProps,
+  oldVale?: OptionType[]
+) => {
+  if (!mode) {
+    return single({ options, value, noMatchItemRender });
+  }
+  if (mode === "multiple") {
+    return multiple({ options, value, noMatchItemRender }, oldVale) || [];
+  }
+  return tag({ options, value }, oldVale);
+}; //不匹配
+export const useValueChange = (params: PartialHSelectProps) => {
+  const {
+    labelInValue,
+    onChange,
+    value,
+    options,
+    mode,
+    noMatchItemRender,
+    fieldNames = {},
+  } = params;
+  const [val, setVal] = useState<any>();
+
+  const change = (changeVal, itemOps) => {
+    if (!onChange) {
+      setVal(changeVal);
+      return;
+    }
+    if (!changeVal) {
+      onChange(changeVal, itemOps);
+      return;
+    }
+    let newChangeVal = changeVal.value;
+    if (labelInValue) {
+      newChangeVal = changeVal;
+    }
+    if (Array.isArray(changeVal)) {
+      newChangeVal = changeVal.map((item) => {
+        return item.value;
+      });
+    }
+    const subItemOps = itemOpProvider(itemOps, fieldNames);
+    onChange(newChangeVal, subItemOps);
+  };
+  useEffect(() => {
+    if (mode === "tags" || value === null || value === undefined) {
+      setVal(value);
+      return;
+    }
+    if (options) {
+      setVal((oldVale) => {
+        return matchNotFind(params, oldVale);
+      });
+    }
+  }, [value, options, mode, noMatchItemRender]);
+  return {
+    val,
+    change,
+  };
+};

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

@@ -0,0 +1,85 @@
+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 (requestParams = {}) => {
+      const { params = {}, values, type = "init" } = requestParams;
+      const formData = values || form?.getFieldsValue();
+      if (type === "init") {
+        setData(undefined);
+      }
+      if (request) {
+        return request(params, formData);
+      }
+      return Promise.resolve(options);
+    },
+    {
+      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({ params: { inputValue } });
+  };
+  useEffect(() => {
+    if (options) {
+      setData(options);
+    }
+  }, [options]);
+  const mathShowSearch = showSearch || serviceSearch;
+  return {
+    run,
+    loading,
+    error,
+    data,
+    onSearch: mathShowSearch ? onSearch : propsOnSearch,
+    mathShowSearch: showSearch || serviceSearch,
+    reload,
+  };
+};
+
+export const useFilterOption = ({
+  filterOption,
+  serviceSearch,
+}: PartialHSelectProps) => {
+  if (serviceSearch) {
+    return () => {
+      return true;
+    };
+  }
+  return filterOption;
+};

package/src/components/Select/index.less

@@ -0,0 +1,22 @@
+@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

@@ -0,0 +1,126 @@
+import { Select } from "antd";
+import React from "react";
+import { useFilterOption, useOptionReq } from "./hooks/norHooks";
+import { useValueChange } from "./hooks/changeHooks";
+import type { HSelectProps } from "./modal";
+import { defaultModeConfig, defaultSelectConfig } from "./defaultConfig";
+import DropdownComponent from "./components/DropdownComponent";
+import AllSelect from "./components/AllSelect";
+import { useChangeOptions, useMatchConfigProps } from "../hooks";
+import HFormConnect from "../Form/HFormConnect";
+const { Option } = Select;
+
+const Index: React.FC<HSelectProps> = ({
+  style = { width: "100%" },
+  mode,
+  options,
+  modeConfig = defaultModeConfig,
+  value,
+  onChange,
+  fieldNames: propsFieldNames,
+  request,
+  manual,
+  optionLabelProp = "label",
+  filterProvider,
+  optionFilterProp = "filterLabel",
+  serviceSearch,
+  onSearch: propsOnSearch,
+  filterOption,
+  showSearch,
+  labelInValue,
+  noMatchItemRender = defaultSelectConfig.noMatchItemRender,
+  allSelect,
+  addDispatchListener,
+  addFormat,
+  dispatch,
+  ...props
+}) => {
+  const { icon, render } = modeConfig?.[mode || ""] || {};
+  const { fieldNames } = useMatchConfigProps({ fieldNames: propsFieldNames });
+  const selfFilterOption = useFilterOption({ filterOption, serviceSearch });
+  const {
+    run,
+    loading,
+    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,
+    onChange,
+    value,
+    options: data,
+    mode,
+    noMatchItemRender,
+    fieldNames,
+  });
+  addDispatchListener?.("reload", reload);
+  return (
+    <Select
+      style={style}
+      mode={mode}
+      loading={loading}
+      value={val}
+      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}
+            >
+              {node}
+            </AllSelect>
+          </DropdownComponent> //全选
+        );
+      }}
+      optionLabelProp={optionLabelProp}
+      menuItemSelectedIcon={icon}
+      optionFilterProp={optionFilterProp}
+      filterOption={selfFilterOption}
+      showSearch={mathShowSearch}
+      labelInValue={true}
+      {...props}
+    >
+      {data?.map((item) => {
+        const { value: optionValue, label } = item;
+        const result = filterProvider?.(item) || label;
+        const filter = { [optionFilterProp]: result };
+        return (
+          <Option
+            value={optionValue}
+            key={optionValue}
+            label={label}
+            mode={mode}
+            {...filter}
+          >
+            {render ? render(item, val) : label}
+          </Option>
+        );
+      })}
+    </Select>
+  );
+};
+export default HFormConnect(Index);

package/src/components/Select/modal.ts

@@ -0,0 +1,36 @@
+import type { SelectProps } from "antd";
+import type React from "react";
+import type { PromiseFnResult } from "../modal";
+import type { addFormatItemModal ,argsFn,DispatchModal} from "../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; //options内容
+}
+export interface ModeConfig {
+  multiple?: ModeConfigItem;
+  tags?: ModeConfigItem;
+}
+export interface HSelectProps
+  extends Omit<SelectProps, "options" | "placeholder"> {
+  style?: React.CSSProperties;
+  request?: PromiseFnResult<any, OptionType[]>;
+  manual?: boolean;
+  modeConfig?: ModeConfig;
+  filterProvider?: (item: any) => string; //筛选字段默认为label
+  serviceSearch?: boolean; //服务端搜索
+  options?: OptionType[];
+  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;
+  index: number;
+}