@hw-component/form 0.0.1 → 0.0.3

package/src/components/CheckboxGroup/hooks.ts

@@ -0,0 +1,103 @@
+import { useEffect, useMemo, useState } from "react";
+import type { HCheckboxProps } from "@/components/CheckboxGroup/modal";
+import { baseConfig } from "../config";
+
+const changValProvider = ({
+  value,
+  options,
+  valueCheckMap = baseConfig.defaultValueCheckMap,
+}: HCheckboxProps) => {
+  const newVal = { ...value };
+  const { checked, noChecked } = valueCheckMap;
+  options?.forEach((item) => {
+    const { value: itemVal } = item;
+    if (newVal[itemVal] !== checked) {
+      newVal[itemVal] = noChecked;
+    }
+  });
+  return newVal;
+};
+
+export const useValueProvider = ({
+  value,
+  valueCheckMap = baseConfig.defaultValueCheckMap,
+  keyInValue = true,
+  onChange,
+  options,
+}: HCheckboxProps) => {
+  const [val, setVal] = useState<Record<any, any>>({});
+  const oldValueCheckMap = useMemo(() => {
+    return {
+      valueCheckMap,
+    };
+  }, []);
+  useEffect(() => {
+    setVal((oldVal) => {
+      return changValProvider({
+        value: oldVal,
+        options,
+        valueCheckMap: oldValueCheckMap.valueCheckMap,
+      });
+    });
+  }, [options]); //初始化数据
+  useEffect(() => {
+    const { checked: oldChecked } = oldValueCheckMap.valueCheckMap;
+    const { checked, noChecked } = valueCheckMap;
+    setVal((oldVal) => {
+      const newVal = { ...oldVal };
+      const keys = Object.keys(newVal);
+      keys.forEach((key) => {
+        if (newVal[key] === oldChecked) {
+          newVal[key] = checked;
+          return;
+        }
+        newVal[key] = noChecked;
+      });
+      oldValueCheckMap.valueCheckMap = valueCheckMap;
+      return newVal;
+    });
+  }, [valueCheckMap]);
+
+  useEffect(() => {
+    const { checked } = oldValueCheckMap.valueCheckMap;
+    if (!value) {
+      return;
+    }
+    if (!Array.isArray(value)) {
+      setVal(value);
+      return;
+    }
+    setVal((oldVal) => {
+      const newVal = { ...oldVal };
+      value.forEach((itemVal) => {
+        newVal[itemVal] = checked;
+      });
+      return newVal;
+    });
+  }, [value]);
+
+  const change = (key: any, changeVal: any) => {
+    const { checked, noChecked } = valueCheckMap;
+    const newVal = { ...val };
+    newVal[key] = noChecked;
+    if (changeVal === checked) {
+      newVal[key] = checked;
+    }
+    if (!onChange) {
+      setVal(newVal);
+      return;
+    }
+    if (keyInValue) {
+      onChange(newVal);
+      return;
+    }
+    const subVal = Object.keys(newVal).filter((valKey) => {
+      return newVal[valKey] === checked;
+    });
+    onChange(subVal);
+  };
+  return {
+    val,
+    change,
+  };
+};

package/src/components/CheckboxGroup/index.tsx

@@ -0,0 +1,46 @@
+import { Space } from "antd";
+import { useChangeOptions } from "../hooks/useChangeOptions";
+import type { HCheckboxProps } from "@/components/CheckboxGroup/modal";
+import { useValueProvider } from "./hooks";
+import Checkbox from "./CheckBox";
+
+export default ({
+  options,
+  fieldNames,
+  onChange,
+  valueCheckMap,
+  value,
+  disabled,
+  keyInValue = true,
+}: HCheckboxProps) => {
+  const checkOptions = useChangeOptions({ options, fieldNames });
+  const { val, change } = useValueProvider({
+    options: checkOptions,
+    onChange,
+    valueCheckMap,
+    keyInValue,
+    value,
+  });
+  console.log(val);
+  return (
+    <Space>
+      {checkOptions?.map((item) => {
+        const { label, value: itemVal } = item;
+        const checked = val[itemVal];
+        return (
+          <Checkbox
+            value={checked}
+            key={itemVal}
+            onChange={(changeVal) => {
+              change(itemVal, changeVal);
+            }}
+            valueCheckMap={valueCheckMap}
+            disabled={disabled}
+          >
+            {label}
+          </Checkbox>
+        );
+      })}
+    </Space>
+  );
+};

package/src/components/CheckboxGroup/modal.d.ts

@@ -0,0 +1,12 @@
+import type { CheckboxProps } from "antd/lib/checkbox/Checkbox";
+import type { SelectProps } from "antd";
+
+export interface HCheckboxProps
+  extends Omit<CheckboxProps, "value" | "onChange"> {
+  options?: Record<string, any>[];
+  fieldNames?: SelectProps["fieldNames"];
+  valueCheckMap?: ValueCheckMapModal;
+  keyInValue?: boolean;
+  value?: Record<string, any> | any[];
+  onChange?: (value: Record<string, any> | any[]) => void;
+}

package/src/components/DatePicker/RangePicker.tsx

@@ -0,0 +1,7 @@
+import {DatePicker} from 'antd';
+import {IRangePickerProps} from "@/components/DatePicker/modal";
+const { RangePicker } = DatePicker;
+
+export default ({value,onChange,showTime=true,...props}:IRangePickerProps)=>{
+    return <RangePicker value={value} onChange={value} showTime={showTime} {...props}/>
+}

package/src/components/DatePicker/index.tsx

@@ -0,0 +1,38 @@
+import type { DatePickerProps } from "antd";
+import type { SharedTimeProps } from "rc-picker/lib/panels/TimePanel";
+import { DatePicker } from "antd";
+import { useMemo } from "react";
+import type { Moment } from "moment";
+import moment from "moment";
+import {IDatePickerProps} from "@/components/DatePicker/modal";
+
+export default ({
+  value,
+  onChange,
+  showTime = true,
+  format = "X",
+  ...props
+}: IDatePickerProps) => {
+  const timeVal = useMemo(() => {
+    if (!value || !format) {
+      return value;
+    }
+    return moment(value, format);
+  }, [value, format]);
+  const change = (val) => {
+    if (!format) {
+      onChange?.(val);
+      return;
+    }
+    const subVal = val?.format(format);
+    onChange?.(subVal);
+  };
+  return (
+    <DatePicker
+      value={timeVal}
+      onChange={change}
+      showTime={showTime}
+      {...props}
+    />
+  );
+};

package/src/components/DatePicker/modal.d.ts

@@ -0,0 +1,16 @@
+import {RangePickerProps} from "antd/es/date-picker";
+import {SharedTimeProps} from "rc-picker/lib/panels/TimePanel";
+import {Moment} from "moment";
+import {DatePickerProps} from "antd";
+
+export  interface IDatePickerProps extends Omit<DatePickerProps, "onChange" | "format"> {
+    onChange?: (time?: Moment | string | number) => void;
+    format?: string;
+    showTime?: boolean | SharedTimeProps<Moment>;
+}
+
+export interface IRangePickerProps extends RangePickerProps{
+ value?:any;
+ onChange?:(val:any)=>void;
+ showTime?: boolean | { defaultValue?: Moment[]};
+}

package/src/components/Input/ButtonInput.tsx

@@ -0,0 +1,41 @@
+import { Input, Button } from "antd";
+import type { HButtonPropsProps } from "./modal";
+import React from "react";
+import { useRequest } from "ahooks";
+
+const Index: React.FC<HButtonPropsProps> = ({
+  buttonProps = {},
+  value,
+  onChange,
+  children,
+  request,
+  ...props
+}) => {
+  const { onClick, type = "primary", ...oProps } = buttonProps;
+  const { run, loading } = useRequest(
+    (val) => {
+      return request?.(val);
+    },
+    { manual: true }
+  );
+  const change = (e) => {
+    onChange?.(e.target.value);
+  };
+  const click = async (e) => {
+    let result = value;
+    if (request) {
+      result = await run(value);
+    }
+    onClick?.(result, e);
+  };
+
+  return (
+    <Input.Group compact style={{ display: "flex" }}>
+      <Input {...props} style={{ flex: 1 }} value={value} onChange={change} />
+      <Button {...oProps} type={type} onClick={click} loading={loading}>
+        {children}
+      </Button>
+    </Input.Group>
+  );
+};
+export default Index;

package/src/components/Input/InputNumber.tsx

@@ -0,0 +1,5 @@
+import type { InputNumberProps } from "antd";
+import { InputNumber } from "antd";
+export default ({ style = { width: "100%" }, ...props }: InputNumberProps) => {
+  return <InputNumber style={style} {...props} />;
+};

package/src/components/Input/SelectInput.tsx

@@ -0,0 +1,45 @@
+import { Input } from "antd";
+import type { HSelectInputProps } from "./modal";
+import HSelect from "../Select";
+import { defaultSelectStyle, defaultValueName } from "./defaultConfig";
+export enum SelectInputType {
+  input,
+  select,
+}
+
+export default ({
+  selectProps = {},
+  value = {},
+  onChange,
+  valueName = defaultValueName,
+  ...props
+}: HSelectInputProps) => {
+  const { input = "", select = "" } = valueName;
+  const { [input]: inputVal, [select]: selectVal } = value;
+  const { style = defaultSelectStyle, ...sProps } = selectProps;
+  const change = (val, key) => {
+    const newVal = { ...value };
+    newVal[key] = val;
+    const type = key === input ? SelectInputType.input : SelectInputType.select;
+    onChange?.(newVal, type);
+  };
+  return (
+    <Input
+      value={inputVal}
+      onChange={(e) => {
+        change(e.target.value, input);
+      }}
+      addonBefore={
+        <HSelect
+          {...sProps}
+          style={style}
+          value={selectVal}
+          onChange={(val) => {
+            change(val, select);
+          }}
+        />
+      }
+      {...props}
+    />
+  );
+};

package/src/components/Input/defaultConfig.ts

@@ -0,0 +1,8 @@
+export const defaultSelectStyle = {
+  width: 128,
+};
+
+export const defaultValueName = {
+  input: "input",
+  select: "select",
+};

package/src/components/Input/index.tsx

@@ -0,0 +1,6 @@
+import { Input } from "antd";
+import type { HInputProps } from "./modal";
+
+export default ({ ...props }: HInputProps) => {
+  return <Input {...props} />;
+};

package/src/components/Input/modal.d.ts

@@ -0,0 +1,26 @@
+import type { ButtonProps, InputProps } from "antd";
+import type { HSelectProps } from "../Select/modal";
+import type { SelectInputType } from "./SelectInput";
+
+type HInputProps = InputProps;
+interface ValueNameModal {
+  input?: string;
+  select?: string;
+}
+
+interface HSelectInputProps extends Omit<HInputProps, "value" | "onChange"> {
+  selectProps?: HSelectProps;
+  value?: Record<string, any>;
+  onChange?: (value: Record<string, any>, type: SelectInputType) => void;
+  valueName?: ValueNameModal;
+}
+interface HButtonProps extends Omit<ButtonProps, "onClick"> {
+  onClick: (
+    value: string | readonly string[] | number | undefined,
+    e: HTMLElement
+  ) => void;
+}
+interface HButtonPropsProps extends HInputProps {
+  buttonProps?: HButtonProps;
+  request?: PromiseFnResult;
+}

package/src/components/RadioGroup/index.tsx

@@ -0,0 +1,41 @@
+import { Radio } from "antd";
+import type { SelectProps, RadioGroupProps } from "antd/es";
+import { useMemo } from "react";
+import { baseConfig } from "../config";
+
+interface IProps extends Omit<RadioGroupProps, "onChange" | "options"> {
+  onChange?: (value: any) => void;
+  fieldNames?: SelectProps["fieldNames"];
+  options?: (Record<string, any> | string | number)[];
+}
+export default ({
+  value,
+  options,
+  onChange,
+  fieldNames = baseConfig.defaultFieldNames,
+  ...props
+}: IProps) => {
+  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,6 +1,8 @@
 import type { HSelectProps } from "@/components/Select/modal";
 import { Checkbox, Space } from "antd";
-import styles from "../index.less";
+import "../index.less"
+import { itemOpProvider } from "../utils";
+import {useClassName} from "@/components/hooks/useClassName";
 interface IProps extends HSelectProps {
   checked?: boolean;
 }
@@ -11,22 +13,25 @@ export default ({
   value,
   serviceSearch,
   options,
+  fieldNames,
 }: IProps) => {
   if (!allSelect || mode !== "multiple" || serviceSearch) {
     return null;
   }
   const opLen = options?.length || 0;
   const checked = (value as any[])?.length >= opLen;
+  const optionsClassName=useClassName("option");
   const change = () => {
     if (!checked) {
-      onChange?.(options);
+      const subItemOps = itemOpProvider(options, fieldNames);
+      onChange?.(options, subItemOps);
       return;
     }
-    onChange?.([]);
+    onChange?.([], []);
   };
   return (
     <div
-      className={`ant-select-item ant-select-item-option ${styles.option}`}
+      className={`ant-select-item ant-select-item-option ${optionsClassName}`}
       onClick={change}
     >
       <Space>

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,8 @@ import type {
 } from "@/components/Select/modal";
 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 || [];
@@ -108,10 +110,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 = baseConfig.defaultFieldNames,
+  } = params;
   const [val, setVal] = useState<any>();
-  const change = (changeVal) => {
+
+  const change = (changeVal, itemOps) => {
     if (!onChange) {
       setVal(changeVal);
       return;
@@ -125,7 +135,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,26 +1,12 @@
 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,
@@ -32,11 +18,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,

package/src/components/Select/index.less

@@ -1,4 +1,5 @@
-.option {
+@import url("../config.less");
+.@{hw-prefix}-option {
   &: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 } from "../hooks/useChangeOptions";
 const { Option } = Select;
 
 export default ({
@@ -20,7 +16,7 @@ export default ({
   modeConfig = defaultModeConfig,
   value,
   onChange,
-  fieldNames = defaultFieldNames,
+  fieldNames,
   request,
   manual,
   optionLabelProp = "label",
@@ -37,13 +33,20 @@ export default ({
 }: HSelectProps) => {
   const { icon, render } = modeConfig?.[mode || ""] || {};
   const selfFilterOption = useFilterOption({ filterOption, serviceSearch });
-  const { run, loading, data, error, onSearch } = useOptionReq({
+  const {
+    run,
+    loading,
+    data: resultData,
+    error,
+    onSearch,
+  } = useOptionReq({
     options,
     manual,
     fieldNames,
     request,
     serviceSearch,
-  });
+  }); //options
+  const data = useChangeOptions({ options: resultData, fieldNames });
   const { val, change } = useValueChange({
     labelInValue,
     onChange,
@@ -51,6 +54,7 @@ export default ({
     options: data,
     mode,
     noMatchItemRender,
+    fieldNames,
   });
   return (
     <Select
@@ -76,7 +80,7 @@ export default ({
               onChange={change}
             />
             {node}
-          </DropdownComponent>
+          </DropdownComponent> //全选
         );
       }}
       optionLabelProp={optionLabelProp}

package/src/components/Select/modal.ts

@@ -14,10 +14,9 @@ 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;
   options?: OptionType[];

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);
+};