@hw-component/form 0.0.5 → 0.0.6-beta-v1

package/src/pages/Form/index.tsx

@@ -0,0 +1,203 @@
+import { HForm, HFormConfigProvider, useHForm } from "../../components";
+import { useState } from "react";
+
+const formData = (options) => {
+  return [
+    {
+      label: "输入框",
+      name: "name",
+      rules: [
+        () => {
+          return {
+            required: true,
+          };
+        },
+      ],
+    },
+    {
+      label: "数字",
+      name: "sz",
+      type: "inputNumber",
+      rules: [{ required: true }],
+    },
+    {
+      label: "下拉框",
+      name: "select",
+      type: "select",
+      dispatch: {
+        fnKey: "reload",
+        dependencies: ["selectInput", "sz"],
+      },
+      itemProps: {
+        request: (params = {}, values) => {
+          console.log(values, "paramsparamsparams");
+          const { label = "123", value = 1 } = params;
+          return Promise.resolve([{ label, value }]);
+        },
+        showSearch: true,
+      },
+      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: "颜色",
+      name: "colorInput",
+      type: "colorInput",
+    },
+    {
+      label: "测试",
+      type: "test",
+    },
+    {
+      type: "submit",
+    },
+  ];
+};
+const Test = (props) => {
+  return <div>ffff</div>;
+};
+export default () => {
+  const form = useHForm();
+  const [options, setOptions] = useState([{ label: "1", value: 1 }]);
+
+  return (
+    <div style={{ overflow: "auto", height: "90vh" }}>
+      <HFormConfigProvider
+        valueSwitchMap={{ open: 1, close: 2 }}
+        valueCheckMap={{ noChecked: 0, checked: 1 }}
+        defaultComponent={{
+          test: Test,
+        }}
+      >
+        <HForm
+          configData={formData(options)}
+          labelWidth={200}
+          form={form}
+          initialValues={{}}
+          onFinish={(value) => {
+            console.log(value);
+          }}
+          onValuesChange={(val) => {
+            console.log(val, "onValuesChange");
+          }}
+          infoRequest={() => {
+            return new Promise<any>((resolve) => {
+              setTimeout(() => {
+                resolve({
+                  check1: 1,
+                  op: 1,
+                  opInput: "12121",
+                  colorInput: "rgba(24, 144, 255,1)",
+                  upload:
+                    "https://img2.baidu.com/it/u=2048195462,703560066&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333",
+                });
+              }, 3000);
+            });
+          }}
+          request={(params) => {
+            return new Promise<any>((resolve) => {
+              setTimeout(() => {
+                resolve(params);
+              }, 3000);
+            });
+          }}
+        />
+      </HFormConfigProvider>
+      <div
+        onClick={() => {
+          form.dispatch(
+            {
+              name: "select",
+              key: "reload",
+            },
+            {
+              params: {
+                label: "更新",
+                value: 2,
+              },
+            }
+          );
+        }}
+      >
+        点我
+      </div>
+    </div>
+  );
+};

package/src/pages/Input/index.tsx

@@ -3,6 +3,7 @@ import {
   HSelectInput,
   HButtonInput,
   HInputNumber,
+  HColorInput,
 } from "../../components";
 import { Space } from "antd";
 export default () => {
@@ -17,6 +18,7 @@ export default () => {
       />
       <HButtonInput>点我</HButtonInput>
       <HInputNumber />
+      <HColorInput />
     </Space>
   );
 };

package/src/pages/ModalForm/index.tsx

@@ -0,0 +1,147 @@
+import { Button } from "antd";
+import { HModalForm, 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: "下拉框",
+    name: "select",
+    type: "select",
+    dispatch: {
+      fnKey: "reload",
+      dependencies: ["selectInput", "sz"],
+      manual: false,
+    },
+    itemProps: {
+      request: (params = {}, values) => {
+        console.log(values, "paramsparamsparams");
+        const { label = "123", value = 1 } = params;
+        return Promise.resolve([{ label, value }]);
+      },
+      showSearch: true,
+    },
+    rules: [{ required: true }],
+  },
+];
+let num = 0;
+export default () => {
+  const modalForm = useHDialogForm();
+  return (
+    <>
+      <Button
+        onClick={() => {
+          num++;
+          modalForm.show({
+            params: {
+              name: num,
+            },
+          });
+        }}
+      >
+        打开
+      </Button>
+      <HModalForm
+        configData={data}
+        labelWidth={88}
+        request={(val, params) => {
+          console.log(val, params);
+        }}
+        dialogForm={modalForm}
+        title="测试"
+      />
+    </>
+  );
+};

package/src/pages/Select/index.tsx

@@ -11,12 +11,15 @@ export default () => {
       <HSelect
         fieldNames={{ label: "name", value: "value" }}
         options={[
-          { name: "测试1", value: 10 },
-          { name: "测试2", value: 20 },
+          { name: "测试1", value: 10, userId: 112321 },
+          { name: "测试2", value: 20, userId: 112321 },
         ]}
         placeholder="多选"
-        mode={"multiple"}
+        onChange={(val, option) => {
+          console.log(val, option);
+        }}
         allSelect={true}
+        showSearch={true}
       />
       <HSelect
         mode={"tags"}

package/src/pages/Switch/index.tsx

@@ -6,7 +6,7 @@ export default () => {
       <HSwitch
         value={1}
         beforeText="开关"
-        valueCheckMap={{ checked: 1, noChecked: 0 }}
+        valueMap={{ open: 1, close: 0 }}
         onChange={(val) => {
           console.log(val);
         }}

package/src/pages/Upload/index.tsx

@@ -0,0 +1,14 @@
+import { Space } from "antd";
+import { HUrlUpload, HUpload } from "../../components";
+import React, { useState } from "react";
+
+export default () => {
+  const [files, setFiles] = useState([]);
+  const [files1, setFiles1] = useState([]);
+  return (
+    <Space size={"large"} direction={"vertical"} style={{ width: "100%" }}>
+      <HUpload value={files} onChange={setFiles} multiple={true} maxCount={3} />
+      <HUrlUpload value={files1} onChange={setFiles1} />
+    </Space>
+  );
+};

package/src/routes.tsx

@@ -6,6 +6,10 @@ import CheckBox from "./pages/Checkbox";
 import Radio from "./pages/Radio";
 import Switch from "./pages/Switch";
 import DatePicker from "./pages/DatePicker";
+import Upload from "./pages/Upload";
+import Form from "./pages/Form";
+import ModalForm from "./pages/ModalForm";
+import DrawerForm from "./pages/DrawerForm";
 
 export interface RouteModal {
   path?: string;
@@ -51,6 +55,26 @@ const routes: RouteModal[] = [
     name: "时间",
     element: <DatePicker />,
   },
+  {
+    path: "/upload",
+    name: "上传文件",
+    element: <Upload />,
+  },
+  {
+    path: "/form",
+    name: "表单",
+    element: <Form />,
+  },
+  {
+    path: "/modalForm",
+    name: "弹窗表单",
+    element: <ModalForm />,
+  },
+  {
+    path: "/drawerForm",
+    name: "抽屉表单",
+    element: <DrawerForm />,
+  },
 ];
 
 export default routes;

package/tsconfig.json

@@ -5,7 +5,7 @@
     "alwaysStrict": false,
     "baseUrl": ".",
     "experimentalDecorators": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "sourceMap": true,
     "module": "ESNext",
     "noImplicitAny": false,

package/es/DatePicker/RangePicker.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import type { IRangePickerProps } from "@/components/DatePicker/modal";
-declare const _default: ({ value, onChange, showTime, ...props }: IRangePickerProps) => JSX.Element;
-export default _default;

package/es/DatePicker/RangePicker.js

@@ -1,23 +0,0 @@
-// welcome to ww-building-blocks-tmp
-import React from 'react';
-import _extends from '@babel/runtime-corejs3/helpers/extends';
-import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/objectWithoutProperties';
-import { DatePicker } from 'antd';
-
-var _excluded = ["value", "onChange", "showTime"];
-var RangePicker = DatePicker.RangePicker;
-var RangePicker$1 = (function (_ref) {
-  var value = _ref.value;
-    _ref.onChange;
-    var _ref$showTime = _ref.showTime,
-    showTime = _ref$showTime === void 0 ? true : _ref$showTime,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(RangePicker, _extends({
-    value: value,
-    onChange: value,
-    showTime: showTime
-  }, props));
-});
-
-export { RangePicker$1 as default };
-// powered by ww

package/es/DatePicker/index.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import type { IDatePickerProps } from "@/components/DatePicker/modal";
-declare const _default: ({ value, onChange, showTime, format, ...props }: IDatePickerProps) => JSX.Element;
-export default _default;

package/es/DatePicker/index.js

@@ -1,39 +0,0 @@
-// welcome to ww-building-blocks-tmp
-import React, { useMemo } from 'react';
-import _extends from '@babel/runtime-corejs3/helpers/extends';
-import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/objectWithoutProperties';
-import { DatePicker } from 'antd';
-import moment from 'moment';
-
-var _excluded = ["value", "onChange", "showTime", "format"];
-var index = (function (_ref) {
-  var value = _ref.value,
-    onChange = _ref.onChange,
-    _ref$showTime = _ref.showTime,
-    showTime = _ref$showTime === void 0 ? true : _ref$showTime,
-    _ref$format = _ref.format,
-    format = _ref$format === void 0 ? "X" : _ref$format,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var timeVal = useMemo(function () {
-    if (!value || !format) {
-      return value;
-    }
-    return moment(value, format);
-  }, [value, format]);
-  var change = function change(val) {
-    if (!format) {
-      onChange === null || onChange === void 0 ? void 0 : onChange(val);
-      return;
-    }
-    var subVal = val === null || val === void 0 ? void 0 : val.format(format);
-    onChange === null || onChange === void 0 ? void 0 : onChange(subVal);
-  };
-  return /*#__PURE__*/React.createElement(DatePicker, _extends({
-    value: timeVal,
-    onChange: change,
-    showTime: showTime
-  }, props));
-});
-
-export { index as default };
-// powered by ww

package/es/TimePicker/index.d.ts

@@ -1,2 +0,0 @@
-declare const _default: () => void;
-export default _default;

package/es/hooks/useChangeOptions.js

@@ -1,25 +0,0 @@
-// welcome to ww-building-blocks-tmp
-import _mapInstanceProperty from '@babel/runtime-corejs3/core-js/instance/map';
-import { useMemo } from 'react';
-import { baseConfig } from '../config.js';
-
-var useChangeOptions = function useChangeOptions(_ref) {
-  var options = _ref.options,
-    _ref$fieldNames = _ref.fieldNames,
-    fieldNames = _ref$fieldNames === void 0 ? baseConfig.defaultFieldNames : _ref$fieldNames;
-  return useMemo(function () {
-    return options === null || options === void 0 ? void 0 : _mapInstanceProperty(options).call(options, function (item) {
-      var _fieldNames$label = fieldNames.label,
-        label = _fieldNames$label === void 0 ? "" : _fieldNames$label,
-        _fieldNames$value = fieldNames.value,
-        value = _fieldNames$value === void 0 ? "" : _fieldNames$value;
-      return {
-        label: item[label],
-        value: item[value]
-      };
-    });
-  }, [options]);
-};
-
-export { useChangeOptions };
-// powered by ww

package/es/hooks/useClassName.d.ts

@@ -1 +0,0 @@
-export declare const useClassName: (className: string) => string;

package/es/hooks/useClassName.js

@@ -1,15 +0,0 @@
-// welcome to ww-building-blocks-tmp
-import _concatInstanceProperty from '@babel/runtime-corejs3/core-js/instance/concat';
-import { useContext, useMemo } from 'react';
-import { ConfigContext } from 'antd/es/config-provider';
-
-var useClassName = function useClassName(className) {
-  var config = useContext(ConfigContext);
-  return useMemo(function () {
-    var _context;
-    return _concatInstanceProperty(_context = "".concat(config.getPrefixCls(), "-")).call(_context, className);
-  }, [className]);
-};
-
-export { useClassName };
-// powered by ww

package/lib/DatePicker/RangePicker.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import type { IRangePickerProps } from "@/components/DatePicker/modal";
-declare const _default: ({ value, onChange, showTime, ...props }: IRangePickerProps) => JSX.Element;
-export default _default;

package/lib/DatePicker/RangePicker.js

@@ -1,26 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var _extends = require('@babel/runtime-corejs3/helpers/extends');
-var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
-var antd = require('antd');
-
-var _excluded = ["value", "onChange", "showTime"];
-var RangePicker = antd.DatePicker.RangePicker;
-var RangePicker$1 = (function (_ref) {
-  var value = _ref.value;
-    _ref.onChange;
-    var _ref$showTime = _ref.showTime,
-    showTime = _ref$showTime === void 0 ? true : _ref$showTime,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(RangePicker, _extends({
-    value: value,
-    onChange: value,
-    showTime: showTime
-  }, props));
-});
-
-exports.default = RangePicker$1;
-// powered by h

package/lib/DatePicker/index.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import type { IDatePickerProps } from "@/components/DatePicker/modal";
-declare const _default: ({ value, onChange, showTime, format, ...props }: IDatePickerProps) => JSX.Element;
-export default _default;

package/lib/DatePicker/index.js

@@ -1,42 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var _extends = require('@babel/runtime-corejs3/helpers/extends');
-var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
-var antd = require('antd');
-var moment = require('moment');
-
-var _excluded = ["value", "onChange", "showTime", "format"];
-var index = (function (_ref) {
-  var value = _ref.value,
-    onChange = _ref.onChange,
-    _ref$showTime = _ref.showTime,
-    showTime = _ref$showTime === void 0 ? true : _ref$showTime,
-    _ref$format = _ref.format,
-    format = _ref$format === void 0 ? "X" : _ref$format,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var timeVal = React.useMemo(function () {
-    if (!value || !format) {
-      return value;
-    }
-    return moment(value, format);
-  }, [value, format]);
-  var change = function change(val) {
-    if (!format) {
-      onChange === null || onChange === void 0 ? void 0 : onChange(val);
-      return;
-    }
-    var subVal = val === null || val === void 0 ? void 0 : val.format(format);
-    onChange === null || onChange === void 0 ? void 0 : onChange(subVal);
-  };
-  return /*#__PURE__*/React.createElement(antd.DatePicker, _extends({
-    value: timeVal,
-    onChange: change,
-    showTime: showTime
-  }, props));
-});
-
-exports.default = index;
-// powered by h

package/lib/TimePicker/index.d.ts

@@ -1,2 +0,0 @@
-declare const _default: () => void;
-export default _default;