@hw-component/form 1.2.6 → 1.2.7

package/es/Select/index.js

@@ -10,6 +10,7 @@ import _defineProperty from '@babel/runtime-corejs3/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/objectWithoutProperties';
 import 'core-js/modules/es.array.map.js';
 import { jsx } from 'react/jsx-runtime';
+import { createElement } from 'react';
 import { Select } from 'antd';
 import { useFilterOption, useOptionReq } from './hooks/norHooks.js';
 import { useValueChange } from './hooks/changeHooks.js';
@@ -19,7 +20,8 @@ import Index$2 from './components/AllSelect.js';
 import { useMatchConfigProps, useChangeOptions } from '../hooks/index.js';
 import HFormConnect from '../Form/HFormConnect.js';
 
-var _excluded = ["style", "mode", "options", "modeConfig", "value", "onChange", "fieldNames", "request", "manual", "optionLabelProp", "filterProvider", "optionFilterProp", "serviceSearch", "onSearch", "filterOption", "showSearch", "labelInValue", "noMatchItemRender", "allSelect", "addDispatchListener", "addFormat", "dispatch"];
+var _excluded = ["style", "mode", "options", "modeConfig", "value", "onChange", "fieldNames", "request", "manual", "optionLabelProp", "filterProvider", "optionFilterProp", "serviceSearch", "onSearch", "filterOption", "showSearch", "labelInValue", "noMatchItemRender", "allSelect", "addDispatchListener", "addFormat", "dispatch"],
+  _excluded2 = ["value", "label"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Option = Select.Option;
@@ -130,16 +132,16 @@ var Index = function Index(_ref) {
   }, props), {}, {
     children: data === null || data === void 0 ? void 0 : data.map(function (item) {
       var optionValue = item.value,
-        label = item.label;
+        label = item.label,
+        oItem = _objectWithoutProperties(item, _excluded2);
       var result = (filterProvider === null || filterProvider === void 0 ? void 0 : filterProvider(item)) || label;
       var filter = _defineProperty({}, optionFilterProp, result);
-      return jsx(Option, _objectSpread(_objectSpread({
+      return /*#__PURE__*/createElement(Option, _objectSpread(_objectSpread({}, oItem), {}, {
         value: optionValue,
+        key: optionValue,
         label: label,
         mode: mode
-      }, filter), {}, {
-        children: render ? render(item, val) : label
-      }), optionValue);
+      }, filter), render ? render(item, val) : label);
     })
   }));
 };

package/lib/Select/index.js

@@ -13,6 +13,7 @@ var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
 require('core-js/modules/es.array.map.js');
 var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var antd = require('antd');
 var norHooks = require('./hooks/norHooks.js');
 var changeHooks = require('./hooks/changeHooks.js');
@@ -22,7 +23,8 @@ var AllSelect = require('./components/AllSelect.js');
 var index = require('../hooks/index.js');
 var HFormConnect = require('../Form/HFormConnect.js');
 
-var _excluded = ["style", "mode", "options", "modeConfig", "value", "onChange", "fieldNames", "request", "manual", "optionLabelProp", "filterProvider", "optionFilterProp", "serviceSearch", "onSearch", "filterOption", "showSearch", "labelInValue", "noMatchItemRender", "allSelect", "addDispatchListener", "addFormat", "dispatch"];
+var _excluded = ["style", "mode", "options", "modeConfig", "value", "onChange", "fieldNames", "request", "manual", "optionLabelProp", "filterProvider", "optionFilterProp", "serviceSearch", "onSearch", "filterOption", "showSearch", "labelInValue", "noMatchItemRender", "allSelect", "addDispatchListener", "addFormat", "dispatch"],
+  _excluded2 = ["value", "label"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Option = antd.Select.Option;
@@ -133,16 +135,16 @@ var Index = function Index(_ref) {
   }, props), {}, {
     children: data === null || data === void 0 ? void 0 : data.map(function (item) {
       var optionValue = item.value,
-        label = item.label;
+        label = item.label,
+        oItem = _objectWithoutProperties(item, _excluded2);
       var result = (filterProvider === null || filterProvider === void 0 ? void 0 : filterProvider(item)) || label;
       var filter = _defineProperty({}, optionFilterProp, result);
-      return jsxRuntime.jsx(Option, _objectSpread(_objectSpread({
+      return /*#__PURE__*/React.createElement(Option, _objectSpread(_objectSpread({}, oItem), {}, {
         value: optionValue,
+        key: optionValue,
         label: label,
         mode: mode
-      }, filter), {}, {
-        children: render ? render(item, val) : label
-      }), optionValue);
+      }, filter), render ? render(item, val) : label);
     })
   }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hw-component/form",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "description": "基于antd二次开发",
   "repository": {
     "type": "git",

package/src/components/Select/index.tsx

@@ -105,11 +105,12 @@ const Index: React.FC<HSelectProps> = ({
       {...props}
     >
       {data?.map((item) => {
-        const { value: optionValue, label } = item;
+        const { value: optionValue, label ,...oItem} = item;
         const result = filterProvider?.(item) || label;
         const filter = { [optionFilterProp]: result };
         return (
           <Option
+              {...oItem}
             value={optionValue}
             key={optionValue}
             label={label}

package/src/pages/Form/index.tsx

@@ -1,203 +1,187 @@
 import { HForm, HFormConfigProvider, useHForm } from "../../components";
-import { Button, Form, Input } from "antd";
-import React from "react";
-import {useRequest} from "ahooks";
-import {MediaTypeEnum} from "../../components/Upload/enums";
+import { useState } from "react";
+import { Button, DatePicker, Form, Input } from "antd";
 
-const formData = () => {
-  return [
-    {
-      label: "测试",
-      className: "hdjd",
-      name:"nameTest"
-    },
-    {
-      label: "测试1",
-      type: "select",
-    },
-    {
-      label: "测试1",
-      type: "inputNumber",
-    },
-    {
-      noStyle: true,
-      render: () => {
-        return <div>你好a</div>;
-      },
-    },
-    {
-      label: "时间",
-      type: "rangePicker",
-      name: "rangePicker",
-      itemProps: {
-        subProvider: () => {
-          console.log("fff");
+const formData = (options) => {
+    const op = [
+        {
+            key: 1,
+            value: "是",
         },
-      },
-    },
-    {
-      label:(form)=>{
-        const nameTest=form.getFieldValue("nameTest")
-        return nameTest;
-      },
-      name: "checkboxGroup",
-      type: "checkboxGroup",
-      rules: [{ required: true }],
-      shouldUpdate:()=>{
-        return 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,
+        {
+            key: 0,
+            value: "否",
         },
-      },
-    },
-    {
-      type: "submit",
-      itemProps: {
-        extraList: [
-          <Button
-            key="wh"
-            onClick={() => {
-              console.log("起飞");
-            }}
-          >
-            芜湖
-          </Button>,
-          "666",
-          "reset",
-        ],
-      },
-    },
-    {
-      type: "verificationCodeInput",
-      name:"verificationCodeInput",
-      label:"验证码",
-      itemProps: {
-        request:()=>{
-         return new Promise((resolve)=>{
-            setTimeout(()=>{
-              resolve({})
-            },4000);
-         })
+    ];
+    return [
+        {
+            label: "测试",
+            className: "hdjd",
+        },
+        {
+            label: "测试1",
+            type: "select",
+        },
+        {
+            label: "测试1",
+            type: "inputNumber",
+        },
+        {
+            noStyle: true,
+            render: () => {
+                return <div>你好a</div>;
+            },
+        },
+        {
+            label: "时间",
+            type: "rangePicker",
+            name: "rangePicker",
+            itemProps: {
+                subProvider: () => {
+                    console.log("fff");
+                },
+            },
         },
-        buttonProps:{
-          disabled:({nameTest})=>{
-            if (nameTest){
-              return false;
-            }
-            return true;
-          }
-        }
-      },
-      dispatch: {
-        fnKey: "disabled",
-        dependencies: ["nameTest"],
-        manual:false
-      },
-    },
-    {
-      type: "urlUpload",
-      name:"urlUpload",
-      label:"测试",
-      helper:"123123",
-      itemProps: {
-        inputHelper:"fff",
-        style:{
-          width:368
+        {
+            label: "选择",
+            name: "checkboxGroup",
+            type: "checkboxGroup",
+            rules: [{ required: true }],
+            helper: "帮助我",
+            options: [
+                { value: "选择1", key: "check1" },
+                { value: "选择2", key: "check2" },
+            ],
+            direction: "vertical",
+            labelAlign: "topLeft",
         },
-        exFiles:null,
-        mediaType:MediaTypeEnum.video,
-        maxSize:Number.MAX_SAFE_INTEGER,
-        thumbUrl:"https://inews.gtimg.com/om_bt/OHyQqgC_5oi4Vm0tlH49XvJzqNBHo2Zryxx5F_be5N2cIAA/1000"
-      }
-    },
-  ];
+        {
+            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>
-  );
+    return (
+        <div
+            onClick={() => {
+                console.log("form", form);
+                form.setFieldsValue({ switch: 1 });
+            }}
+        >
+            ttta
+        </div>
+    );
 }
 
 const Test = (props) => {
-  return <div>ffff</div>;
+    return <div>ffff</div>;
 };
 export default () => {
-  const form = useHForm();
-  const [aForm] = Form.useForm();
-  const {run,loading}=useRequest(async ()=>{
-     await new Promise((resolve)=>{
-        setTimeout(()=>{
-           resolve({})
-        },2000)
-     })
-  },{manual:true});
-  return (
-    <div style={{ overflow: "auto", height: "90vh" ,padding:30}}>
-      <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()}
-          labelWidth={200}
-          form={form}
-          onFinish={run}
-        />
-      </HFormConfigProvider>
-      <div
-        onClick={() => {
-          form.submit();
-        }}
-      >
-        点我
-      </div>
-      <div
-        onClick={() => {
-          form.resetFieldsInitValue();
-        }}
-      >
-        重置
-      </div>
-    </div>
-  );
-};
+    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"}
+                    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/Select/index.tsx

@@ -20,6 +20,7 @@ export default () => {
         placeholder="多选"
         value={selectVal}
         onChange={(val, option) => {
+            console.log(option)
           setSelectVal(val);
         }}
         allSelect={true}