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

package/src/components/config.ts

@@ -1,47 +0,0 @@
-import moment from "moment";
-import type { IFormConfigContextProps } from "./Form/modal";
-import { fileToBase64 } from "./Upload/util";
-export const baseConfig: IFormConfigContextProps = {
-  fieldNames: {
-    label: "label",
-    value: "value",
-  },
-  valueCheckMap: {
-    checked: 1,
-    noChecked: 0,
-  },
-  valueSwitchMap: {
-    open: 1,
-    close: 0,
-  },
-  valueRangePickerValueMap: {
-    start: (name) => {
-      return `${name}StartTime`;
-    },
-    end: (name) => {
-      return `${name}EndTime`;
-    },
-  },
-  dateRanges: {
-    最近三天: [moment().subtract(2, "days").startOf("days"), moment()],
-    最近七天: [moment().subtract(6, "days").startOf("days"), moment()],
-    最近三十天: [moment().subtract(29, "days").startOf("days"), moment()],
-  },
-  uploadProps: {
-    exFiles: ["JPG", "PNG", "JPEG", "GIF"],
-    request: async (file: any) => {
-      const url = await fileToBase64(file);
-      return {
-        url,
-      };
-    },
-    maxSize: 1024 * 1024 * 1.8,
-  },
-  defaultComponent: {},
-  formItemStyle:{},
-  itemProps:{}
-};
-
-export default {
-  name: "name",
-};

package/src/components/hooks/index.ts

@@ -1,53 +0,0 @@
-import { useContext, useMemo } from "react";
-import type { SelectProps } from "antd";
-import { ConfigContext } from "antd/es/config-provider";
-import type { IFormConfigContextProps } from "../Form/modal";
-import { useFormConfigContext } from "../Form/Context/FormConfigProvider";
-
-interface UseChangeOptionsParams {
-  options?: Record<string, any>[];
-  fieldNames?: SelectProps["fieldNames"];
-}
-export const useChangeOptions = ({
-  options,
-  fieldNames = {},
-}: UseChangeOptionsParams) => {
-  return useMemo(() => {
-    return options?.map((item) => {
-      const { label = "", value = "" } = fieldNames;
-      const { [label]: relLabel, [value]: relVal, ...oItem } = item;
-      return {
-        ...oItem,
-        label: relLabel,
-        value: relVal,
-      };
-    });
-  }, [options]);
-}; //options组装
-
-export const useClassName = (className: string | string[]) => {
-  const config = useContext(ConfigContext);
-  return useMemo(() => {
-    if (Array.isArray(className)) {
-      const classNames = className.map((item) => {
-        return `${config.getPrefixCls()}-${item}`;
-      });
-      return classNames.join(" ");
-    }
-    return `${config.getPrefixCls()}-${className}`;
-  }, [className]);
-};
-
-export const useMatchConfigProps = (matchProps: IFormConfigContextProps) => {
-  const globalConfig = useFormConfigContext();
-  const keys = Object.keys(matchProps);
-  const resultMatchProps: IFormConfigContextProps = {};
-  keys.forEach((key) => {
-    if (!matchProps[key]) {
-      resultMatchProps[key] = globalConfig[key];
-      return;
-    }
-    resultMatchProps[key] = matchProps[key];
-  });
-  return resultMatchProps;
-}; //匹配全局配置

package/src/components/index.tsx

@@ -1,37 +0,0 @@
-import "./styles/index.less";
-import FormConfig from "./Form/config";
-import PageHandler from "./PageHandler";
-export { default as HForm } from "./Form";
-export { default as useHForm } from "./Form/hooks/useHForm";
-export { useHDialogForm } from "./DialogForm/hooks";
-export { default as HFormConnect } from "./Form/HFormConnect";
-export { default as HFormConfigProvider } from "./Form/Context/FormConfigProvider";
-
-import ModalForm from "./DialogForm/ModalForm";
-import DrawerForm from "./DialogForm/DrawerForm";
-export const HSelect = FormConfig.select;
-export const HInput = FormConfig.input;
-export const HSelectInput = FormConfig.selectInput;
-export const HUpload = FormConfig.upload;
-export const HUrlUpload = FormConfig.urlUpload;
-export const HButtonInput = FormConfig.buttonInput;
-export const HCheckBox = FormConfig.checkBox;
-export const HSwitch = FormConfig.switch;
-export const HCheckboxGroup = FormConfig.checkboxGroup;
-export const HDatePicker = FormConfig.datePicker;
-export const HRangePicker = FormConfig.rangePicker.Component;
-export const HRadioGroup = FormConfig.radioGroup;
-export const HTimePicker = FormConfig.timePicker;
-export const HInputNumber = FormConfig.inputNumber;
-export const HPageHandler = PageHandler;
-export const HTextArea = FormConfig.textArea;
-export const HColorInput = FormConfig.colorInput;
-export const HModalForm = ModalForm;
-export const HDrawerForm = DrawerForm;
-export const HCascader = FormConfig.cascader;
-// @ts-ignore
-export const HVerificationCodeInput = FormConfig.verificationCodeInput;
-
-export const HTrimInput = FormConfig.trimInput;
-
-export const HTrimTextArea = FormConfig.trimTextArea;

package/src/components/modal.ts

@@ -1,20 +0,0 @@
-export interface ValueCheckMapModal {
-  checked?: any;
-  noChecked?: any;
-}
-export type PromiseFnResult<T = any, R = any> = (
-  params: T,
-  formDataValues?: any
-) => Promise<R>;
-export interface ValueSwitchMapModal {
-  open?: any;
-  close?: any;
-}
-export interface DataFnProvider<P = any, R = any> {
-  (name: P): R;
-}
-
-export interface DateRangePickerValueMapModal {
-  start?: string | DataFnProvider<string, string>;
-  end?: string | DataFnProvider<string, string>;
-}

package/src/components/styles/index.less

@@ -1,3 +0,0 @@
-@import "../Select/index.less";
-@import "../Form/index.less";
-@import "../Input/ColorInput/index.less";

package/src/components/styles/local.less

@@ -1 +0,0 @@
-@ant-prefix: ant;

package/src/components/typings.d.ts

@@ -1,11 +0,0 @@
-declare module "*.css";
-declare module "*.less";
-declare module "*.scss";
-declare module "*.sass";
-declare module "*.svg";
-declare module "*.png";
-declare module "*.jpg";
-declare module "*.jpeg";
-declare module "*.gif";
-declare module "*.bmp";
-declare module "*.tiff";

package/src/index.less

@@ -1,20 +0,0 @@
-.layout {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: flex;
-}
-.menu {
-  width: 256px !important;
-  height: 100vh;
-}
-
-.body {
-  width: calc(100vw - 256px);
-  height: 100vh;
-  padding: 16px;
-  overflow: hidden;
-  background-color: #fff;
-}

package/src/index.tsx

@@ -1,12 +0,0 @@
-import { render } from "react-dom";
-import App from "./app";
-import React from "react";
-import "antd/dist/antd.css";
-import zhCN from "antd/es/locale/zh_CN";
-import { ConfigProvider } from "antd";
-render(
-  <ConfigProvider locale={zhCN}>
-    <App />
-  </ConfigProvider>,
-  document.getElementById("root")
-);

package/src/pages/Checkbox/index.tsx

@@ -1,14 +0,0 @@
-import { Space } from "antd";
-import { HCheckboxGroup } from "../../components";
-export default () => {
-  return (
-    <Space size={"large"} direction={"vertical"} style={{ width: "100%" }}>
-      <HCheckboxGroup
-        options={[
-          { label: "测试", value: "uu" },
-          { label: "测试1", value: "uu1" },
-        ]}
-      />
-    </Space>
-  );
-};

package/src/pages/DatePicker/index.tsx

@@ -1,33 +0,0 @@
-import { Space } from "antd";
-import { HDatePicker, HRangePicker, HTimePicker } from "../../components";
-import { useState } from "react";
-export default () => {
-  const [timeVal, setTimeVal] = useState({
-    start: 1692070068,
-    end: 1692242868,
-  });
-  return (
-    <Space size={"large"} direction={"vertical"} style={{ width: "100%" }}>
-      <HDatePicker
-        value={1691487319}
-        onChange={(val) => {
-          console.log(val);
-        }}
-      />
-      <HRangePicker
-        value={timeVal}
-        valueMap={{ start: "start", end: "end" }}
-        onChange={(val) => {
-          console.log(val);
-          setTimeVal(val);
-        }}
-      />
-      <HTimePicker
-        value={55135}
-        onChange={(val) => {
-          console.log(val);
-        }}
-      />
-    </Space>
-  );
-};

package/src/pages/DrawerForm/index.tsx

@@ -1,145 +0,0 @@
-import { Button } from "antd";
-import { HDrawerForm, useHDialogForm } from "../../components";
-const data = [
-  {
-    label: "输入框",
-    name: "name",
-    rules: [
-      () => {
-        return {
-          required: true,
-        };
-      },
-    ],
-  },
-  {
-    label: "数字",
-    name: "sz",
-    type: "inputNumber",
-    rules: [{ required: true }],
-  },
-  {
-    label: "下拉输入框",
-    name: "selectInput",
-    type: "selectInput",
-    rules: [{ required: true }],
-    itemProps: {
-      valueName: {
-        select: "op",
-        input: "opInput",
-      },
-      selectProps: {
-        options: [{ label: "测试", value: 1 }],
-      },
-    },
-  },
-  {
-    label: "按钮输入框",
-    name: "buttonInput",
-    type: "buttonInput",
-    children: "点击",
-    rules: [{ required: true }],
-  },
-  {
-    label: "选择",
-    name: "checkboxGroup",
-    type: "checkboxGroup",
-    rules: [{ required: true }],
-    helper: "帮助我",
-    options: [
-      { label: "选择1", value: "check1" },
-      { label: "选择2", value: "check2" },
-    ],
-  },
-  {
-    label: "开关",
-    name: "switch",
-    type: "switch",
-    rules: [{ required: true }],
-  },
-  {
-    label: "时间",
-    name: "datePicker",
-    type: "datePicker",
-    hover: "时间选择",
-    helper: "帮助我",
-    rules: [{ required: true }],
-  },
-  {
-    label: "时间段",
-    name: "rangePicker",
-    type: "rangePicker",
-    helper: "帮助我",
-    rules: [{ required: true }],
-    itemProps: {
-      valueMap: {
-        start: "testStart",
-        end: "testEnd",
-      },
-    },
-  },
-  {
-    label: "时分秒",
-    name: "timePicker",
-    type: "timePicker",
-    rules: [{ required: true }],
-  },
-  {
-    label: "文件",
-    name: "upload",
-    type: "upload",
-    rules: [{ required: true }],
-  },
-  {
-    label: "地址文件",
-    name: "urlUpload",
-    type: "urlUpload",
-    rules: [{ required: true }],
-  },
-  {
-    label: "验证码",
-    type: "verificationCodeInput",
-    name: "verificationCodeInput",
-    itemProps: {
-      request: () => {
-        return Promise.resolve({ code: 200 });
-      },
-    },
-  },
-];
-let num = 0;
-export default () => {
-  const modalForm = useHDialogForm();
-  return (
-    <>
-      <Button
-        onClick={() => {
-          num++;
-          modalForm.show({
-            initialValues: {
-              check1: 1,
-              op: 1,
-              opInput: num,
-            },
-          });
-        }}
-      >
-        显示
-      </Button>
-      <Button
-        onClick={() => {
-          modalForm.show();
-        }}
-      >
-        打开
-      </Button>
-      <HDrawerForm
-        autoClear={false}
-        configData={data}
-        labelWidth={88}
-        dialogForm={modalForm}
-        title="测试"
-      />
-    </>
-  );
-};

package/src/pages/Form/index.tsx

@@ -1,172 +0,0 @@
-import { HForm, HFormConfigProvider, useHForm } from "../../components";
-import { useState } from "react";
-import { Button, DatePicker, Form, Input } from "antd";
-
-const formData = (options) => {
-  const op = [
-    {
-      key: 1,
-      value: "是",
-    },
-    {
-      key: 0,
-      value: "否",
-    },
-  ];
-  return [
-    {
-      label: "测试",
-      className:"hdjd",
-    },
-    {
-      label: "测试1",
-      type:"select"
-    },
-    {
-      label: "测试1",
-      type:"inputNumber"
-    },
-    {
-      label: "选择",
-      name: "checkboxGroup",
-      type: "checkboxGroup",
-      rules: [{ required: true }],
-      helper: "帮助我",
-      options: [
-        { value: "选择1", key: "check1" },
-        { value: "选择2", key: "check2" },
-      ],
-      direction: "vertical",
-      labelAlign: "topLeft",
-    },
-    {
-      label: "开关",
-      name: "switch",
-      type: "switch",
-      rules: [{ required: true }],
-      itemProps: {
-        valueMap: {
-          open: 1,
-          close: 0,
-        },
-      },
-    },
-    {
-      type: "submit",
-      itemProps: {
-        extraList: [
-          <Button
-            key="wh"
-            onClick={() => {
-              console.log("起飞");
-            }}
-          >
-            芜湖
-          </Button>,
-          "666",
-          "reset",
-        ],
-      },
-    },
-    {
-      type: "submit",
-      itemProps: {
-        extraList: [
-          <Button
-            key="wh"
-            onClick={() => {
-              console.log("起飞");
-            }}
-          >
-            芜湖
-          </Button>,
-          <Ttta key="aa" />,
-          "666",
-          "submit",
-          "reset",
-        ],
-      },
-    },
-  ];
-};
-function Ttta({ form }) {
-  return (
-    <div
-      onClick={() => {
-        console.log("form", form);
-        form.setFieldsValue({ switch: 1 });
-      }}
-    >
-      ttta
-    </div>
-  );
-}
-
-const Test = (props) => {
-  return <div>ffff</div>;
-};
-export default () => {
-  const form = useHForm();
-  const [options, setOptions] = useState([{ label: "1", value: 1 }]);
-  const [aForm] = Form.useForm();
-  return (
-    <div style={{ overflow: "auto", height: "90vh" }}>
-      <Form form={aForm} initialValues={{ ttim: "132123" }}>
-        <Form.Item name="ttim" rules={[{ required: true }]}>
-          <Input />
-        </Form.Item>
-      </Form>
-      <HFormConfigProvider
-        valueSwitchMap={{ open: 1, close: 2 }}
-        valueCheckMap={{ noChecked: 0, checked: 1 }}
-        defaultComponent={{
-          test: Test,
-        }}
-        itemProps={{
-          style:{
-             borderRadius:10
-          }
-        }}
-        fieldNames={{
-          label: "value",
-          value: "key",
-        }}
-      >
-        <HForm
-          configData={formData(options)}
-          labelWidth={200}
-          form={form}
-          labelAlign={"right"}
-          submitLoading={true}
-          onFinish={(value) => {
-            console.log(value);
-          }}
-          onValuesChange={(val) => {
-            console.log(val, "onValuesChange");
-          }}
-          request={(params) => {
-            return new Promise<any>((resolve) => {
-              setTimeout(() => {
-                resolve(params);
-              }, 3000);
-            });
-          }}
-        />
-      </HFormConfigProvider>
-      <div
-        onClick={() => {
-          aForm.resetFields();
-        }}
-      >
-        点我
-      </div>
-      <div
-        onClick={() => {
-          form.resetFieldsInitValue();
-        }}
-      >
-        重置
-      </div>
-    </div>
-  );
-};

package/src/pages/Input/index.tsx

@@ -1,30 +0,0 @@
-import {
-  HInput,
-  HSelectInput,
-  HButtonInput,
-  HInputNumber,
-  HColorInput,
-  HVerificationCodeInput,
-} from "../../components";
-import { Space } from "antd";
-export default () => {
-  return (
-    <Space size={"large"} direction={"vertical"} style={{ width: "100%" }}>
-      <HInput placeholder="基础输入框" />
-      <HSelectInput
-        placeholder="基础输入框"
-        selectProps={{
-          options: [{ label: "1", value: 1 }],
-        }}
-      />
-      <HButtonInput>点我</HButtonInput>
-      <HInputNumber />
-      <HColorInput />
-      <HVerificationCodeInput
-        request={() => {
-          return Promise.resolve({ code: 200 });
-        }}
-      />
-    </Space>
-  );
-};