@hw-component/form 0.0.1 → 0.0.2-beta-v1

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

@@ -1,38 +1,54 @@
 import type { HSelectProps } from "@/components/Select/modal";
 import { Checkbox, Space } from "antd";
-import styles from "../index.less";
+import { itemOpProvider } from "../utils";
+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,
-}: IProps) => {
-  if (!allSelect || mode !== "multiple" || serviceSearch) {
-    return null;
-  }
+  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) {
-      onChange?.(options);
+      const subItemOps = itemOpProvider(options, fieldNames);
+      onChange?.(options, subItemOps);
       return;
     }
-    onChange?.([]);
+    onChange?.([], []);
   };
+  if (!allSelect || mode !== "multiple" || serviceSearch) {
+    return <>{children}</>;
+  }
   return (
-    <div
-      className={`ant-select-item ant-select-item-option ${styles.option}`}
-      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/defaultConfig.tsx

@@ -16,11 +16,6 @@ export const defaultModeConfig: HSelectProps["modeConfig"] = {
   },
 };
 
-export const defaultFieldNames: HSelectProps["fieldNames"] = {
-  label: "label",
-  value: "value",
-};
-
 export const defaultSelectConfig = {
   noMatchItemRender: () => {
     return <NoFindItem label={"选项被删除，请重新选择"} />;

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

@@ -4,6 +4,7 @@ import type {
 } 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 || [];
@@ -108,10 +109,18 @@ const matchNotFind = (
   return tag({ options, value }, oldVale);
 }; //不匹配
 export const useValueChange = (params: PartialHSelectProps) => {
-  const { labelInValue, onChange, value, options, mode, noMatchItemRender } =
-    params;
+  const {
+    labelInValue,
+    onChange,
+    value,
+    options,
+    mode,
+    noMatchItemRender,
+    fieldNames = {},
+  } = params;
   const [val, setVal] = useState<any>();
-  const change = (changeVal) => {
+
+  const change = (changeVal, itemOps) => {
     if (!onChange) {
       setVal(changeVal);
       return;
@@ -125,7 +134,8 @@ export const useValueChange = (params: PartialHSelectProps) => {
         return item.value;
       });
     }
-    onChange(newChangeVal);
+    const subItemOps = itemOpProvider(itemOps, fieldNames);
+    onChange(newChangeVal, subItemOps);
   };
   useEffect(() => {
     if (options && value) {

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

@@ -1,29 +1,17 @@
 import { useState } from "react";
 import type {
-  HSelectProps,
   OptionType,
   PartialHSelectProps,
 } from "@/components/Select/modal";
 import { useRequest } from "ahooks";
 
-const resultProvider = (
-  data?: any[],
-  fieldNames?: HSelectProps["fieldNames"]
-) => {
-  return data?.map((item) => {
-    const { label = "label", value = "value" } = fieldNames || {};
-    return {
-      label: item[label],
-      value: item[value],
-    };
-  });
-};
 export const useOptionReq = ({
   manual,
-  fieldNames,
   request,
   options,
   serviceSearch,
+  showSearch,
+  onSearch: propsOnSearch,
 }: PartialHSelectProps) => {
   const [data, setData] = useState<OptionType[] | undefined>();
   const { run, loading, error } = useRequest(
@@ -32,11 +20,9 @@ export const useOptionReq = ({
         setData(undefined);
       }
       if (request) {
-        const result = await request(params);
-        return resultProvider(result, fieldNames);
+        return request(params);
       }
-      const resultOpt = resultProvider(options, fieldNames);
-      return Promise.resolve(resultOpt);
+      return Promise.resolve(options);
     },
     {
       manual,
@@ -48,16 +34,19 @@ export const useOptionReq = ({
   );
   const onSearch = (inputValue: string) => {
     if (!serviceSearch) {
+      propsOnSearch?.(inputValue);
       return;
     }
     run({ inputValue });
   };
+  const mathShowSearch = showSearch || serviceSearch;
   return {
     run,
     loading,
     error,
     data,
-    onSearch,
+    onSearch: mathShowSearch ? onSearch : propsOnSearch,
+    mathShowSearch: showSearch || serviceSearch,
   };
 };
 

package/src/components/Select/index.less

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

@@ -3,14 +3,10 @@ import React from "react";
 import { useFilterOption, useOptionReq } from "./hooks/norHooks";
 import { useValueChange } from "./hooks/changeHooks";
 import type { HSelectProps } from "./modal";
-import {
-  defaultFieldNames,
-  defaultModeConfig,
-  defaultSelectConfig,
-} from "./defaultConfig";
+import { defaultModeConfig, defaultSelectConfig } from "./defaultConfig";
 import DropdownComponent from "./components/DropdownComponent";
 import AllSelect from "./components/AllSelect";
-import { FieldNames } from "rc-select/lib/Select";
+import { useChangeOptions, useMatchConfigProps } from "../hooks";
 const { Option } = Select;
 
 export default ({
@@ -20,12 +16,12 @@ export default ({
   modeConfig = defaultModeConfig,
   value,
   onChange,
-  fieldNames = defaultFieldNames,
+  fieldNames: propsFieldNames,
   request,
   manual,
   optionLabelProp = "label",
   filterProvider,
-  optionFilterProp = "filterlabel",
+  optionFilterProp = "filterLabel",
   serviceSearch,
   onSearch: propsOnSearch,
   filterOption,
@@ -36,14 +32,27 @@ export default ({
   ...props
 }: HSelectProps) => {
   const { icon, render } = modeConfig?.[mode || ""] || {};
+  const { fieldNames } = useMatchConfigProps({ fieldNames: propsFieldNames });
+
   const selfFilterOption = useFilterOption({ filterOption, serviceSearch });
-  const { run, loading, data, error, onSearch } = useOptionReq({
+  const {
+    run,
+    loading,
+    data: resultData,
+    error,
+    onSearch,
+    mathShowSearch,
+  } = useOptionReq({
     options,
     manual,
     fieldNames,
     request,
     serviceSearch,
-  });
+    showSearch,
+    onSearch: propsOnSearch,
+  }); //options
+
+  const data = useChangeOptions({ options: resultData, fieldNames });
   const { val, change } = useValueChange({
     labelInValue,
     onChange,
@@ -51,14 +60,16 @@ export default ({
     options: data,
     mode,
     noMatchItemRender,
+    fieldNames,
   });
+
   return (
     <Select
       style={style}
       mode={mode}
       loading={loading}
       value={val}
-      onSearch={propsOnSearch || onSearch}
+      onSearch={onSearch}
       onChange={change}
       dropdownRender={(node) => {
         return (
@@ -74,30 +85,31 @@ export default ({
               mode={mode}
               value={val}
               onChange={change}
-            />
-            {node}
-          </DropdownComponent>
+            >
+              {node}
+            </AllSelect>
+          </DropdownComponent> //全选
         );
       }}
       optionLabelProp={optionLabelProp}
       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>

package/src/components/Select/modal.ts

@@ -1,12 +1,13 @@
 import type { SelectProps } from "antd";
 import type React from "react";
-
+import type { PromiseFnResult } from "../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;
@@ -14,15 +15,14 @@ export interface ModeConfig {
 }
 export interface HSelectProps extends Omit<SelectProps, "options"> {
   style?: React.CSSProperties;
-  request?: (params: any) => Promise<OptionType[]>;
+  request?: PromiseFnResult<any, OptionType[]>;
   manual?: boolean;
   modeConfig?: ModeConfig;
-  onChange?: (val: any) => void;
-  filterProvider?: (item: any) => string;
-  serviceSearch?: boolean;
+  filterProvider?: (item: any) => string; //筛选字段默认为label
+  serviceSearch?: boolean; //服务端搜索
   options?: OptionType[];
-  noMatchItemRender?: RenderFn;
-  allSelect?: boolean;
+  noMatchItemRender?: RenderFn; //没有数据
+  allSelect?: boolean; //显示全选
 }
 export interface FilterDataModal {
   value: any;

package/src/components/Select/utils.ts

@@ -0,0 +1,18 @@
+export const itemOpMaker = (itemOp, fieldNames) => {
+  const { label, value: itemVal, ...oItemOp } = itemOp;
+  const { label: labelKey = "", value: valKey = "" } = fieldNames;
+  return {
+    [labelKey]: label,
+    [valKey]: itemVal,
+    ...oItemOp,
+  };
+};
+
+export const itemOpProvider = (itemOps, fieldNames) => {
+  if (Array.isArray(itemOps)) {
+    return itemOps.map((item) => {
+      return itemOpMaker(item, fieldNames);
+    });
+  }
+  return itemOpMaker(itemOps, fieldNames);
+};

package/src/components/Submit/index.tsx

@@ -0,0 +1,28 @@
+import { Button } 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;
+}
+export default ({
+  text = "提交",
+  type = "primary",
+  form,
+  loading,
+  ...props
+}: ISubmitProps) => {
+  const { loading: formSubLoading = loading } = useFormContext();
+  return (
+    <Button
+      {...props}
+      type={type}
+      onClick={form.submit}
+      loading={formSubLoading}
+    >
+      {text}
+    </Button>
+  );
+};

package/src/components/Switch/index.tsx

@@ -0,0 +1,52 @@
+import type { SwitchProps } from "antd";
+import { Space, Switch } from "antd";
+import React, { useMemo } from "react";
+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<HSwitchProps> = ({
+  value,
+  onChange,
+  valueMap: propsValueSwitchMap,
+  children,
+  unCheckedChildren = "关闭",
+  checkedChildren = "开启",
+  beforeText,
+  ...props
+}) => {
+  const { valueSwitchMap = {} } = useMatchConfigProps({
+    valueSwitchMap: propsValueSwitchMap,
+  });
+  const swChecked = useMemo(() => {
+    const { open } = valueSwitchMap;
+    return value === open;
+  }, [value]);
+  const change = (checked) => {
+    let subVal = valueSwitchMap.close;
+    if (checked) {
+      subVal = valueSwitchMap.open;
+    }
+    onChange?.(subVal);
+  };
+  return (
+    <Space>
+      {beforeText}
+      <Switch
+        checked={swChecked}
+        checkedChildren={checkedChildren}
+        unCheckedChildren={unCheckedChildren}
+        onChange={change}
+        {...props}
+      />
+      <span>{children}</span>
+    </Space>
+  );
+};
+
+export default Index;