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

package/src/components/Form/FormItem/BasicItem.tsx

@@ -1,95 +0,0 @@
-import Label from "../Label";
-import { Form, Space, Col } from "antd";
-import React from "react";
-import Helper from "./Helper";
-import { useClassName } from "../../hooks";
-import { useHide, usePositionClassName } from "./hooks";
-import { useFormContext } from "../Context";
-import type { HItemProps } from "../modal";
-import { useDefaultRender } from "../hooks/useDefaultRender";
-import type { HFormItemProps } from "../modal";
-import { useDefaultComponents } from "../hooks";
-import {useFormConfigContext} from "../Context/FormConfigProvider";
-
-interface ContentProps extends Omit<HItemProps, "name"> {
-  value?: any;
-  onChange?: (val: any) => void;
-}
-const Content: React.FC<ContentProps> = ({
-  children,
-  helper,
-  value,
-  onChange,
-}) => {
-  const className = useClassName("hw-form-base-item");
-  const relChild =
-    children && React.cloneElement(children as any, { value, onChange });
-  return (
-    <Space direction={"vertical"} size={4} style={{ width: "100%" }}>
-      <div className={className}>{relChild}</div>
-      <Helper helper={helper} />
-    </Space>
-  );
-};
-const Index: React.FC<HFormItemProps> = (props) => {
-  const {
-    hover,
-    labelWidth,
-    required,
-    colon = true,
-    label,
-    itemProps:colItemProps,
-    children,
-    helper,
-    hide,
-    render,
-    itemSpan = { span: 24 },
-    hideLabel = false,
-    labelAlign,
-    style,
-    className:colClassName,
-    ...oProps
-  } = props;
-  const { labelAlign: align = "right",itemProps, ...inProps } = props;
-  const { form } = useFormContext();
-  const defaultComponent = useDefaultComponents();
-  const formItemStyle = useFormConfigContext("formItemStyle");
-  const ctxItemProps = useFormConfigContext("itemProps");
-  const defaultItemProps={
-      ...ctxItemProps,
-      ...itemProps
-  }
-  const defaultRender = useDefaultRender({...inProps,itemProps:defaultItemProps}, defaultComponent);
-  const className = usePositionClassName(align);
-  const hideItem = useHide({ hide, form });
-  if (hideItem) {
-    return null;
-  }
-  return (
-    <Col {...itemSpan} className={colClassName}>
-      <Form.Item
-        className={className}
-        label={
-          !hideLabel && (
-            <Label
-              hover={hover}
-              labelWidth={labelWidth}
-              required={required}
-              colon={colon}
-            >
-              {label}
-            </Label>
-          )
-        }
-        {...oProps}
-          style={style||formItemStyle}
-        colon={false}
-        required={false}
-      >
-        <Content helper={helper}>{defaultRender(form)}</Content>
-      </Form.Item>
-    </Col>
-  );
-};
-
-export default Index;

package/src/components/Form/FormItem/Helper.tsx

@@ -1,25 +0,0 @@
-import React from "react";
-import type { HItemProps, HFormInstance } from "@/components/Form/modal";
-import { Typography } from "antd";
-import { useFormContext } from "../Context";
-
-interface HelperProps {
-  helper?: HItemProps["helper"];
-}
-
-const Index: React.FC<HelperProps> = ({ helper }) => {
-  const { form } = useFormContext();
-  if (!helper) {
-    return null;
-  }
-  if (typeof helper === "function") {
-    return (
-      <Typography.Text type={"secondary"}>
-        {helper(form as HFormInstance)}
-      </Typography.Text>
-    );
-  }
-  return <Typography.Text type={"secondary"}>{helper}</Typography.Text>;
-};
-
-export default Index;

package/src/components/Form/FormItem/RegularFormItem.tsx

@@ -1,13 +0,0 @@
-import BasicItem from "./BasicItem";
-import type { HItemProps } from "../modal";
-
-export default (props: HItemProps) => {
-  const { type, colon, itemSpan } = props;
-  return (
-    <BasicItem
-      {...props}
-      itemSpan={itemSpan}
-      colon={type === "submit" ? false : colon}
-    />
-  );
-};

package/src/components/Form/FormItem/UpFormItem.tsx

@@ -1,21 +0,0 @@
-import { Form } from "antd";
-import BasicItem from "./BasicItem";
-import { useShouldUpdate } from "./hooks";
-import type { HFormItemProps } from "../modal";
-const { Item } = Form;
-export default ({
-  shouldUpdate,
-  dependencies,
-  hide,
-  itemSpan,
-  ...props
-}: HFormItemProps) => {
-  const resultShouldUpdate = useShouldUpdate({ shouldUpdate, hide });
-  return (
-    <Item shouldUpdate={resultShouldUpdate} dependencies={dependencies} noStyle>
-      {() => {
-        return <BasicItem hide={hide} itemSpan={itemSpan} {...props} />;
-      }}
-    </Item>
-  );
-};

package/src/components/Form/FormItem/hooks.tsx

@@ -1,54 +0,0 @@
-import UpFormItem from "./UpFormItem";
-import RegularFormItem from "./RegularFormItem";
-import { useMemo } from "react";
-import type { HFormInstance, HItemProps } from "../modal";
-import type { LabelAlignModal } from "../modal";
-import { useClassName } from "../../hooks";
-
-export const useFormItemDomControl = ({
-  shouldUpdate,
-  hide,
-  dependencies,
-}: HItemProps) => {
-  return useMemo(() => {
-    if (shouldUpdate || typeof hide === "function" || dependencies) {
-      return UpFormItem;
-    }
-    return RegularFormItem;
-  }, [shouldUpdate, hide]);
-}; //更新或者不更新组件
-
-interface UseHideUpItemModal extends Omit<HItemProps, "name"> {
-  form: HFormInstance;
-}
-export const useShouldUpdate = ({
-  hide,
-  shouldUpdate,
-}: Omit<HItemProps, "name">) => {
-  if (typeof hide === "function" && !shouldUpdate) {
-    return true;
-  }
-  return shouldUpdate;
-};
-
-export const useHide = ({ hide, form }: UseHideUpItemModal) => {
-  if (hide === true) {
-    return true;
-  }
-  if (typeof hide === "function") {
-    return hide(form);
-  }
-  return !!hide;
-};
-
-const classNameData = {
-  top: "hw-form-base-item-top",
-  left: "hw-form-base-item-left",
-  right: "hw-form-base-item-right",
-  topRight: "hw-form-base-item-top-right",
-  topLeft: "hw-form-base-item-top-left",
-};
-export const usePositionClassName = (position: LabelAlignModal) => {
-  const className = classNameData[position];
-  return useClassName(className);
-};

package/src/components/Form/FormItem/index.tsx

@@ -1,8 +0,0 @@
-import { useFormItemDomControl } from "./hooks";
-import React from "react";
-import type { HItemProps } from "../modal";
-
-export default (props: HItemProps) => {
-  const Component = useFormItemDomControl(props);
-  return <Component {...props} />;
-};

package/src/components/Form/HFormConnect.tsx

@@ -1,74 +0,0 @@
-import { useFormContext } from "./Context";
-import type { HFormItemProps } from "@/components/Form/modal";
-import React, { useEffect } from "react";
-import type { ConnectConfigModal } from "@/components/Form/modal";
-import type { addFormatItemModal } from "@/components/Form/modal";
-import type { ConnectResultProps } from "@/components/Form/modal";
-import type { argsFn } from "@/components/Form/modal";
-interface ResultModal {
-  inputValue?: (value: Record<string, any>) => Record<string, any>;
-  outputValue?: (value: Record<string, any>) => Record<string, any>;
-}
-const formatMaker = (
-  itemProps: HFormItemProps,
-  formats?: addFormatItemModal
-) => {
-  const { inputValue, outputValue } = formats || {};
-  const { initValueProvider = inputValue, subProvider = outputValue } =
-    itemProps;
-  const resultObj: ResultModal = {};
-  if (initValueProvider) {
-    resultObj.inputValue = (value) => {
-      return initValueProvider(itemProps, value);
-    };
-  }
-  if (subProvider) {
-    resultObj.outputValue = (value) => {
-      return subProvider(itemProps, value);
-    };
-  }
-  const keysLen = Object.keys(resultObj).length;
-  return keysLen === 0 ? undefined : resultObj;
-};
-
-export default (
-  component:
-    | React.FunctionComponent
-    | React.ComponentClass
-    | React.ForwardRefRenderFunction<any, any>,
-  config: ConnectConfigModal = {}
-) => {
-  const { format = {} } = config;
-  const Index: React.ForwardRefRenderFunction<any, HFormItemProps> = (
-    props: HFormItemProps,
-    ref
-  ) => {
-    const { name = "", dispatch } = props;
-
-    const { form, valueType = "float" } = useFormContext();
-
-    useEffect(() => {
-      form?.addFormat(name, formatMaker(props, format[valueType]));
-    }, [valueType, props]);
-
-    const addFormat = (aFormat: Record<string, addFormatItemModal>) => {
-      form?.addFormat(name, formatMaker(props, aFormat[valueType]));
-    };
-    const addDispatchListener = (key: string, fn: argsFn) => {
-      form?.addDispatchListener({ key, name, dispatch }, fn);
-    };
-    const Component = component as React.ForwardRefRenderFunction<
-      any,
-      ConnectResultProps
-    >;
-    return (
-      <Component
-        {...props}
-        addFormat={addFormat}
-        addDispatchListener={addDispatchListener}
-        ref={ref}
-      />
-    );
-  };
-  return React.forwardRef(Index);
-};

package/src/components/Form/InitSet.tsx

@@ -1,10 +0,0 @@
-import { useFormContext } from "./Context";
-import { useEffect } from "react";
-
-export default () => {
-  const { form } = useFormContext();
-  useEffect(() => {
-    form.initValues();
-  }, []);
-  return <></>;
-};

package/src/components/Form/Label.tsx

@@ -1,50 +0,0 @@
-import type { HoverModal } from "./modal";
-import React from "react";
-import { QuestionCircleOutlined } from "@ant-design/icons";
-import { Tooltip } from "antd";
-import { useClassName } from "../hooks";
-
-interface IProps {
-  labelWidth?: number;
-  hover?: string | HoverModal;
-  colon?: boolean;
-  required?: boolean;
-}
-const useHover = ({ hover }: IProps) => {
-  if (!hover || typeof hover === "string") {
-    return {
-      text: hover,
-      icon: <QuestionCircleOutlined />,
-    };
-  }
-  return hover;
-};
-const Index: React.FC<IProps> = ({
-  labelWidth,
-  children,
-  colon,
-  required,
-  hover,
-}) => {
-  const { text, icon } = useHover({ hover });
-  const array = [
-    colon ? "hw-form-item-colon" : "",
-    required ? "hw-form-item-required" : "",
-  ];
-
-  const className = useClassName(array);
-  return (
-    <div style={{ width: labelWidth }} className={className}>
-      {children}
-      {text && (
-        <span style={{ marginLeft: 4 }}>
-          <Tooltip placement="top" title={text}>
-            {icon}
-          </Tooltip>
-        </span>
-      )}
-    </div>
-  );
-};
-
-export default Index;

package/src/components/Form/config.ts

@@ -1,58 +0,0 @@
-import HSelect from "../Select";
-import HInput from "../Input";
-import HInputNumber from "../Input/InputNumber";
-import HSelectInput from "../Input/SelectInput";
-import HButtonInput from "../Input/ButtonInput";
-import HCheckboxGroup from "../CheckboxGroup";
-import HCheckBox from "../CheckboxGroup/CheckBox";
-import HRadioGroup from "../RadioGroup";
-import HSwitch from "../Switch";
-import HDatePicker from "../TDPicker";
-import HRangePicker from "../TDPicker/RangePicker";
-import HTimePicker from "../TDPicker/TimePicker";
-import HUpload from "../Upload";
-import HUrlUpload from "../Upload/UrlUpload";
-import HSubmit from "../Submit";
-import TextArea from "../TextArea";
-import ColorInput from "../Input/ColorInput";
-import Cascader from "../Cascader";
-import VerificationCodeInput from "../Input/VerificationCodeInput";
-import TrimInput from "../Input/TrimInput";
-import TrimTextArea from "../TextArea/TrimTextArea";
-export const placeholderConfig = {
-  inputType: [
-    "input",
-    "inputNumber",
-    "selectInput",
-    "buttonInput",
-    "verificationCodeInput",
-    "trimInput",
-    "",
-  ],
-  selectType: ["select", "datePicker", "timePicker", "colorInput"],
-};
-const componentConfig = {
-  select: HSelect,
-  inputNumber: HInputNumber,
-  selectInput: HSelectInput,
-  buttonInput: HButtonInput,
-  checkboxGroup: HCheckboxGroup,
-  checkBox: HCheckBox,
-  radioGroup: HRadioGroup,
-  switch: HSwitch,
-  datePicker: HDatePicker,
-  rangePicker: HRangePicker,
-  timePicker: HTimePicker,
-  input: HInput,
-  upload: HUpload,
-  urlUpload: HUrlUpload,
-  submit: HSubmit,
-  textArea: TextArea,
-  colorInput: ColorInput,
-  cascader: Cascader,
-  verificationCodeInput: VerificationCodeInput,
-  trimInput: TrimInput,
-  trimTextArea: TrimTextArea,
-};
-
-export default componentConfig;

package/src/components/Form/hooks/index.ts

@@ -1,114 +0,0 @@
-import { useRequest } from "ahooks";
-import type { HFormProps, HFormInstance } from "../modal";
-import useHForm from "./useHForm";
-import { useEffect, useMemo } from "react";
-import FormConfig from "../config";
-import { useFormConfigContext } from "../Context/FormConfigProvider";
-import type { DispatchModal } from "../modal";
-
-interface UseValuesChangeModal {
-  onValuesChange: HFormProps["onValuesChange"];
-  dispatch: DispatchModal;
-  form: HFormInstance;
-}
-
-export const useCurrentForm = (form?: HFormInstance) => {
-  const selfForm = useHForm();
-  return form || selfForm;
-};
-type ParamsModal = Omit<HFormProps, "configData">;
-
-export const useInfoReq = ({
-  initialValues,
-  infoRequest,
-  form,
-  params,
-  request,
-  onFinish,
-}: ParamsModal) => {
-  const reqData = useMemo(() => {
-    const saveParams = params || {};
-    return {
-      params: saveParams,
-    };
-  }, [params]);
-
-  const subControl = useRequest(
-    async (value) => {
-      const subVal = form?.outputValues(value);
-      if (request) {
-        await request(subVal, reqData.params);
-      }
-      onFinish?.(subVal, reqData.params);
-    },
-    { manual: true }
-  );
-  const infoControl = useRequest(async (reqParams = reqData.params) => {
-    reqData.params = reqParams;
-    if (infoRequest) {
-      const result = await infoRequest(reqParams);
-      form?.setFieldsValue(result);
-      return result || {};
-    }
-    const setValue = initialValues || {};
-    form?.setFieldsValue(setValue);
-    return setValue;
-  });
-  const { run, mutate } = infoControl;
-  useEffect(() => {
-    if (form) {
-      form.reload = (reloadParams) => {
-        mutate(undefined);
-        return run(reloadParams);
-      };
-    }
-  }, []);
-  return {
-    subControl,
-    infoControl,
-  };
-};
-
-export const useDefaultComponents = () => {
-  const defaultComponent = useFormConfigContext("defaultComponent");
-  return { ...FormConfig, ...defaultComponent };
-};
-
-const dispatchControl = (
-  form: HFormInstance,
-  params,
-  dispatch?: Record<string, DispatchModal>
-) => {
-  if (!dispatch) {
-    return;
-  }
-  const dispatchKey = Object.keys(dispatch);
-  dispatchKey.forEach((name) => {
-    const { fnKey, reset } = dispatch[name];
-    if (reset) {
-      form.setFields([{ name, value: null, errors: [] }]);
-    }
-    if (!fnKey) {
-      return;
-    }
-    form.dispatch(
-      {
-        key: fnKey,
-        name,
-      },
-      params
-    );
-  });
-}; //触发
-export const useValuesChange = ({
-  onValuesChange,
-  dispatch,
-  form,
-}: UseValuesChangeModal) => {
-  return (changedValues: any, values: any) => {
-    const changeKey = Object.keys(changedValues)[0];
-    const dispatchItem = dispatch[changeKey];
-    dispatchControl(form, { changedValues, oldValues: values }, dispatchItem);
-    onValuesChange?.(changedValues, values);
-  };
-};

package/src/components/Form/hooks/useDefaultRender.tsx

@@ -1,45 +0,0 @@
-import type {
-  DefaultComponentModal,
-  HFormItemProps,
-  ConfigComponentModal,
-} from "../modal";
-import FormConfig from "../config";
-import type { FormInstance } from "antd";
-import React from "react";
-
-export const useDefaultRender = (
-  props: HFormItemProps,
-  defaultComponents: DefaultComponentModal
-) => {
-  const {
-    render,
-    labelWidth,
-    colon,
-    type = "input",
-    itemProps = {},
-    itemSpan,
-    hideLabel,
-    style,
-    ...componentProps
-  } = props;
-  const mergeComponent = { ...FormConfig, ...defaultComponents };
-  const dom = mergeComponent[type];
-  return (form: FormInstance) => {
-    let Component = dom;
-    if ((dom as ConfigComponentModal)?.Component) {
-      Component = (dom as ConfigComponentModal).Component;
-    }
-    const node = Component && (
-      <Component {...componentProps} {...itemProps} form={form} />
-    );
-    if (render) {
-      const resultNode = render(props, node, form);
-      return React.cloneElement<any>(resultNode as any, {
-        ...componentProps,
-        ...itemProps,
-        form,
-      });
-    }
-    return node;
-  };
-};