@hw-component/form 0.0.1 → 0.0.2-bate

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;

package/src/components/TDPicker/RangePicker.tsx

@@ -0,0 +1,106 @@
+import { DatePicker } from "antd";
+import type { HRangePickerProps } from "./modal";
+import {
+  useGetTimeKey,
+  useRangePickerTimeVal,
+  useRangeValueProvider,
+} from "./hooks";
+import React, { useMemo } from "react";
+import type { RangePickerProps } from "antd/es/date-picker";
+import { useMatchConfigProps } from "../hooks";
+import type { HItemProps } from "../Form/modal";
+import HFormConnect from "../Form/HFormConnect";
+
+const { RangePicker } = DatePicker;
+
+const HRangePicker: React.FC<HRangePickerProps> = ({
+  value,
+  onChange,
+  showTime = true,
+  format = "X",
+  valueMap,
+  ranges = true,
+  name,
+  addFormat,
+  ...props
+}) => {
+  const { valueRangePickerValueMap = {}, dateRanges } = useMatchConfigProps({
+    valueRangePickerValueMap: valueMap,
+    dateRanges: undefined,
+  });
+  const dateMapKeys = useGetTimeKey({
+    valueMap: valueRangePickerValueMap,
+    name,
+  });
+  const paramsProvider = useRangeValueProvider({ valueMap: dateMapKeys });
+  const timeVal = useRangePickerTimeVal({
+    value,
+    format,
+    valueMap: dateMapKeys,
+  });
+  const defaultRanges = useMemo(() => {
+    if (!ranges) {
+      return null;
+    }
+    if (ranges === true) {
+      return dateRanges;
+    }
+    return ranges;
+  }, [ranges]); //默认
+
+  addFormat?.({
+    float: {
+      inputValue: (item, initValue) => {
+        const { name: valueName } = item;
+        const resultObj = {};
+        Object.values(dateMapKeys).forEach((key) => {
+          if (initValue[key]){
+            resultObj[key] = initValue[key];
+          }
+        });
+        const hasKeys=Object.keys(resultObj).length!==0;
+        return {
+          [valueName]: hasKeys?resultObj:null,
+        };
+      },
+      outputValue: (item, outputValue) => {
+        const { name: valueName } = item;
+        const { [valueName]: itemVal = {} } = outputValue;
+        return {
+          ...itemVal,
+        };
+      },
+    },
+  });
+
+  const change = (val) => {
+    if (!format || !val) {
+      onChange?.(val);
+      return;
+    }
+    const subVal = val.map((item) => {
+      return item?.format(format);
+    });
+    onChange?.(paramsProvider(subVal));
+  };
+
+  return (
+    <RangePicker
+      value={timeVal}
+      onChange={change}
+      showTime={showTime}
+      ranges={defaultRanges as RangePickerProps["ranges"]}
+      {...props}
+    />
+  );
+};
+const Index = HFormConnect(HRangePicker);
+export default {
+  Component: Index,
+  placeholder: ({ label }: HItemProps) => {
+    return [`请选择开始${label}`, `请选择结束${label}`];
+  },
+  requiredErrMsg: ({ label }: HItemProps) => {
+    return `请选择${label}`;
+  },
+};

package/src/components/TDPicker/TimePicker.tsx

@@ -0,0 +1,15 @@
+import { TimePicker } from "antd";
+import type { HTimePickerProps } from "./modal";
+import { useTimePickerChange, useTimePickerValue } from "./hooks";
+
+export default ({
+  value,
+  format = "X",
+  onChange,
+  ...props
+}: HTimePickerProps) => {
+  const timeVal = useTimePickerValue({ value, format });
+  const change = useTimePickerChange({ value, format, onChange });
+
+  return <TimePicker value={timeVal} onChange={change} {...props} />;
+};

package/src/components/TDPicker/hooks.ts

@@ -0,0 +1,150 @@
+import { useCallback, useMemo } from "react";
+import type { Moment, DurationInputArg2 } from "moment";
+import moment from "moment";
+import type { HRangePickerProps } from "./modal";
+import type { DateRangePickerValueMapModal } from "../modal";
+
+interface UseTimeValParams {
+  value?: any | [any, any];
+  format?: string;
+  valueMap?: DateRangePickerValueMapModal;
+}
+
+interface UseTimePickerValParams {
+  value?: any;
+  format?: string | DurationInputArg2;
+}
+interface UseTimeChangeParams {
+  format?: string;
+  onChange?: (time?: Moment | string | number) => void;
+  value?: any;
+}
+export const useTimeVal = ({ value, format }: UseTimeValParams) => {
+  return useMemo(() => {
+    if (!value || !format) {
+      return value;
+    }
+    return moment(value, format);
+  }, [value, format]);
+}; //单个时间
+
+export const useGetTimeKey = ({
+  valueMap = {},
+  name = "",
+}: HRangePickerProps) => {
+  const { start, end } = valueMap;
+  if (!start || !end) {
+    return {};
+  }
+  const startKey = typeof start === "string" ? start : start(name);
+  const endKey = typeof end === "string" ? end : end(name);
+  return {
+    start: startKey,
+    end: endKey,
+  };
+}; //构建格式
+export const useTimeChange = ({ format, onChange }: UseTimeChangeParams) => {
+  return useCallback(
+    (value) => {
+      if (!format) {
+        onChange?.(value);
+        return;
+      }
+      const subVal = value?.format(format);
+      onChange?.(subVal);
+    },
+    [format, onChange]
+  );
+}; //时间
+
+const formatMap = {
+  X: "s",
+  x: "ms",
+};
+export const useTimePickerValue = ({
+  value,
+  format,
+}: UseTimePickerValParams) => {
+  return useMemo(() => {
+    if (!value || !format) {
+      return value;
+    }
+    if (formatMap[format]) {
+      const timeStr = moment()
+        .startOf("days")
+        .add(value, formatMap[format] as DurationInputArg2)
+        .format("HH:mm:ss");
+      return moment(timeStr, "HH:mm:ss");
+    }
+    return moment(value, format);
+  }, [value, format]);
+}; //区间选择
+
+export const useTimePickerChange = ({
+  value,
+  format,
+  onChange,
+}: UseTimeChangeParams) => {
+  return useCallback(
+    (val) => {
+      if (!format || !val) {
+        onChange?.(val);
+        return;
+      }
+      if (formatMap[format]) {
+        const startTime = moment().startOf("days").format(format) as any;
+        const nowTime = val.format(format);
+        onChange?.(nowTime - startTime);
+        return;
+      }
+      const subVal = val?.format(format);
+      onChange?.(subVal);
+    },
+    [format, onChange, value]
+  );
+}; //时分秒
+
+export const useRangeValueProvider = ({ valueMap = {} }: HRangePickerProps) => {
+  return (val: any[]) => {
+    const { start, end } = valueMap;
+    if (!start || !end) {
+      return val;
+    }
+    return {
+      [start as string]: val[0],
+      [end as string]: val[1],
+    };
+  };
+}; //格式转化
+
+export const useRangePickerTimeVal = ({
+  value,
+  format,
+  valueMap = {},
+}: UseTimeValParams) => {
+  return useMemo(() => {
+    if (!value || !format) {
+      return value;
+    }
+    if (!Array.isArray(value)) {
+      const { start, end } = valueMap;
+      if (!start || !end) {
+        console.error("日期value格式错误!");
+        return;
+      }
+      const { [start as string]: startTime, [end as string]: endTime } = value;
+      if (!startTime && !endTime) {
+        return [];
+      }
+      const startMoment = moment(startTime, format);
+      const endMoment = moment(endTime, format);
+      return [startMoment, endMoment];
+    }
+    return value.map((item) => {
+      if (!item) {
+        return item;
+      }
+      return moment(item, format);
+    });
+  }, [value, format, valueMap]);
+}; //初始化时间格式转化

package/src/components/TDPicker/index.tsx

@@ -0,0 +1,22 @@
+import { DatePicker } from "antd";
+import type { HDatePickerProps } from "./modal";
+import { useTimeChange, useTimeVal } from "./hooks";
+
+export default ({
+  value,
+  onChange,
+  showTime = true,
+  format = "X",
+  ...props
+}: HDatePickerProps) => {
+  const timeVal = useTimeVal({ value, format });
+  const change = useTimeChange({ format, onChange });
+  return (
+    <DatePicker
+      value={timeVal}
+      onChange={change}
+      showTime={showTime}
+      {...props}
+    />
+  );
+};

package/src/components/TDPicker/modal.ts

@@ -0,0 +1,30 @@
+import type { RangePickerProps } from "antd/es/date-picker";
+import type { SharedTimeProps } from "rc-picker/lib/panels/TimePanel";
+import type { Moment } from "moment";
+import type { DatePickerProps } from "antd";
+import type { TimePickerProps } from "antd";
+import type { DurationInputArg2 } from "moment";
+import type { DateRangePickerValueMapModal } from "../modal";
+import type { addFormatItemModal } from "@/components/Form/modal";
+export interface HDatePickerProps
+  extends Omit<DatePickerProps, "onChange" | "format" | "ranges"> {
+  onChange?: (time?: Moment | string | number) => void;
+  format?: string;
+  showTime?: boolean | SharedTimeProps<Moment>;
+}
+export interface HRangePickerProps
+  extends Omit<RangePickerProps, "onChange" | "format" | "ranges" | "value"> {
+  value?: [any, any] | Record<string, any>;
+  onChange?: (val: any) => void;
+  showTime?: boolean | { defaultValue?: Moment[] };
+  format?: string;
+  valueMap?: DateRangePickerValueMapModal;
+  ranges?: RangePickerProps["ranges"] | boolean;
+  addFormat?: (config: Record<string, addFormatItemModal>) => void;
+}
+
+export interface HTimePickerProps
+  extends Omit<TimePickerProps, "onChange" | "format" | "ranges"> {
+  onChange?: (time?: Moment | string | number) => void;
+  format?: DurationInputArg2 | string;
+}

package/src/components/TextArea/index.tsx

@@ -0,0 +1,8 @@
+import { Input } from "antd";
+import type { TextAreaProps } from "antd/es/input";
+export default ({
+  autoSize = { minRows: 4, maxRows: 4 },
+  ...props
+}: TextAreaProps) => {
+  return <Input.TextArea autoSize={autoSize} {...props} />;
+};

package/src/components/Upload/Btn.tsx

@@ -0,0 +1,24 @@
+import { PlusOutlined, UploadOutlined } from "@ant-design/icons";
+import type { IUpLoadProps } from "./modal";
+import { useMemo } from "react";
+import { Button } from "antd";
+
+export default ({ value, maxCount = 1, listType }: IUpLoadProps) => {
+  const len = value?.length || 0;
+  const text = useMemo(() => {
+    if (len === maxCount) {
+      return "更新";
+    }
+    return "上传";
+  }, [len, maxCount]);
+
+  if (listType === "picture-card") {
+    return (
+      <div>
+        <PlusOutlined />
+        <div style={{ marginTop: 8 }}>{text}</div>
+      </div>
+    );
+  }
+  return <Button icon={<UploadOutlined />}>{text}</Button>;
+};

package/src/components/Upload/MediaTypeEle/TypeEle.tsx

@@ -0,0 +1,26 @@
+import { MediaTypeEnum } from "../enums";
+
+interface TypeEleProps {
+  mediaType?: MediaTypeEnum;
+  url?: string;
+  onReady?: VoidFunction;
+  onError?: VoidFunction;
+}
+export default ({ mediaType, url, onReady, onError }: TypeEleProps) => {
+  if (mediaType === MediaTypeEnum.video) {
+    return (
+      <video autoPlay width="100%" controls onPlay={onReady} onError={onError}>
+        <source src={url} />
+      </video>
+    );
+  }
+
+  if (mediaType === MediaTypeEnum.audio) {
+    return (
+      <audio autoPlay controls onPlay={onReady} onError={onError}>
+        <source src={url} />
+      </audio>
+    );
+  }
+  return <img src={url} width="100%" onLoad={onReady} onError={onError} />;
+};

package/src/components/Upload/MediaTypeEle/index.tsx

@@ -0,0 +1,34 @@
+import { getFileExt } from "../util";
+import TypeEle from "./TypeEle";
+import { useMemo } from "react";
+import type { IMediaTypeEleProps } from "../modal";
+import { MediaTypeEnum } from "../enums";
+
+const videoType = ["MP4"];
+const audioType = ["MP3"];
+
+export default ({ file, onReady, onError }: IMediaTypeEleProps) => {
+  if (!file) {
+    return null;
+  }
+
+  const name = getFileExt(file);
+  const mediaType = useMemo(() => {
+    if (videoType.indexOf(name) !== -1) {
+      return MediaTypeEnum.video;
+    }
+    if (audioType.indexOf(name) !== -1) {
+      return MediaTypeEnum.audio;
+    }
+    return MediaTypeEnum.img;
+  }, [name]);
+
+  return (
+    <TypeEle
+      onError={onError}
+      onReady={onReady}
+      mediaType={mediaType}
+      url={file.response.url}
+    />
+  );
+};

package/src/components/Upload/Preview/index.tsx

@@ -0,0 +1,14 @@
+import type { ModalProps } from "antd";
+import { Modal } from "antd";
+import MediaTypeEle from "../MediaTypeEle";
+import type { IMediaTypeEleProps } from "../modal";
+
+export type IPreviewProps = IMediaTypeEleProps & ModalProps;
+
+export default ({ visible, file, onCancel }: IPreviewProps) => {
+  return (
+    <Modal footer={null} visible={visible} title="预览" onCancel={onCancel}>
+      <MediaTypeEle file={file} />
+    </Modal>
+  );
+};