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

package/src/components/Input/modal.ts

@@ -1,40 +0,0 @@
-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;
-  defaultColor?: string;
-  copy?: boolean;
-  addFormat?: (config: Record<string, addFormatItemModal>) => void;
-}
-
-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;
-  subParams?: (formatValue: Record<string, any>) => any;
-}
-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

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

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

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

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

package/src/components/RadioGroup/index.tsx

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

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

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

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

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

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

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

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

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

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