@hw-component/form 0.0.4-beta-v1 → 0.0.4-beta-v2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/es/Select/hooks/norHooks.js +6 -1
  2. package/lib/Select/hooks/norHooks.js +5 -0
  3. package/package.json +1 -1
  4. package/src/components/Select/hooks/norHooks.ts +6 -1
  5. package/src/pages/Form/index.tsx +124 -105
package/es/Select/hooks/norHooks.js CHANGED
@@ -3,7 +3,7 @@ import _asyncToGenerator from '@babel/runtime-corejs3/helpers/asyncToGenerator';
3
3
  import _slicedToArray from '@babel/runtime-corejs3/helpers/slicedToArray';
4
4
  import _regeneratorRuntime from '@babel/runtime-corejs3/regenerator';
5
5
  import _Promise from '@babel/runtime-corejs3/core-js/promise';
6
- import { useState } from 'react';
6
+ import { useState, useEffect } from 'react';
7
7
  import { useRequest } from 'ahooks';
8
8
 
9
9
  var useOptionReq = function useOptionReq(_ref) {
@@ -60,6 +60,11 @@ var useOptionReq = function useOptionReq(_ref) {
60
60
  inputValue: inputValue
61
61
  });
62
62
  };
63
+ useEffect(function () {
64
+ if (options) {
65
+ setData(options);
66
+ }
67
+ }, [options]);
63
68
  var mathShowSearch = showSearch || serviceSearch;
64
69
  return {
65
70
  run: run,
package/lib/Select/hooks/norHooks.js CHANGED
@@ -61,6 +61,11 @@ var useOptionReq = function useOptionReq(_ref) {
61
61
  inputValue: inputValue
62
62
  });
63
63
  };
64
+ React.useEffect(function () {
65
+ if (options) {
66
+ setData(options);
67
+ }
68
+ }, [options]);
64
69
  var mathShowSearch = showSearch || serviceSearch;
65
70
  return {
66
71
  run: run,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hw-component/form",
3
- "version": "0.0.4-beta-v1",
3
+ "version": "0.0.4-beta-v2",
4
4
  "description": "基于antd二次开发",
5
5
  "repository": {
6
6
  "type": "git",
package/src/components/Select/hooks/norHooks.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { useState } from "react";
1
+ import {useEffect, useState} from "react";
2
2
  import type {
3
3
  OptionType,
4
4
  PartialHSelectProps,
@@ -39,6 +39,11 @@ export const useOptionReq = ({
39
39
  }
40
40
  run({ inputValue });
41
41
  };
42
+ useEffect(()=>{
43
+ if (options){
44
+ setData(options);
45
+ }
46
+ },[options]);
42
47
  const mathShowSearch = showSearch || serviceSearch;
43
48
  return {
44
49
  run,
package/src/pages/Form/index.tsx CHANGED
@@ -1,119 +1,135 @@
1
1
  import { HForm, HFormConfigProvider, useHForm } from "../../components";
2
+ import {useState} from "react";
2
3
 
3
- const data = [
4
- {
5
- label: "输入框",
6
- name: "name",
7
- rules: [
8
- () => {
9
- return {
10
- required: true,
11
- };
12
- },
13
- ],
14
- },
15
- {
16
- label: "数字",
17
- name: "sz",
18
- type: "inputNumber",
19
- rules: [{ required: true }],
20
- },
21
- {
22
- label: "下拉输入框",
23
- name: "selectInput",
24
- type: "selectInput",
25
- rules: [{ required: true }],
26
- itemProps: {
27
- valueName: {
28
- select: "op",
29
- input: "opInput",
4
+ const formData=(options)=>{
5
+ return [
6
+ {
7
+ label: "输入框",
8
+ name: "name",
9
+ rules: [
10
+ () => {
11
+ return {
12
+ required: true,
13
+ };
14
+ },
15
+ ],
16
+ },
17
+ {
18
+ label: "数字",
19
+ name: "sz",
20
+ type: "inputNumber",
21
+ rules: [{ required: true }],
22
+ },
23
+ {
24
+ label: "数字",
25
+ name: "sz",
26
+ type: "select",
27
+ itemProps: {
28
+ request:()=>{
29
+ return Promise.resolve([{label:"123",value:1}])
30
+ }
30
31
  },
31
- selectProps: {
32
- options: [{ label: "测试", value: 1 }],
32
+ rules: [{ required: true }],
33
+ },
34
+ {
35
+ label: "下拉输入框",
36
+ name: "selectInput",
37
+ type: "selectInput",
38
+ rules: [{ required: true }],
39
+ itemProps: {
40
+ valueName: {
41
+ select: "op",
42
+ input: "opInput",
43
+ },
44
+ selectProps: {
45
+ options: [{ label: "测试", value: 1 }],
46
+ },
33
47
  },
34
48
  },
35
- },
36
- {
37
- label: "按钮输入框",
38
- name: "buttonInput",
39
- type: "buttonInput",
40
- children: "点击",
41
- rules: [{ required: true }],
42
- },
43
- {
44
- label: "选择",
45
- name: "checkboxGroup",
46
- type: "checkboxGroup",
47
- rules: [{ required: true }],
48
- helper: "帮助我",
49
- options: [
50
- { label: "选择1", value: "check1" },
51
- { label: "选择2", value: "check2" },
52
- ],
53
- },
54
- {
55
- label: "开关",
56
- name: "switch",
57
- type: "switch",
58
- rules: [{ required: true }],
59
- },
60
- {
61
- label: "时间",
62
- name: "datePicker",
63
- type: "datePicker",
64
- hover: "时间选择",
65
- helper: "帮助我",
66
- rules: [{ required: true }],
67
- },
68
- {
69
- label: "时间段",
70
- name: "rangePicker",
71
- type: "rangePicker",
72
- helper: "帮助我",
73
- rules: [{ required: true }],
74
- itemProps: {
75
- valueMap: {
76
- start: "testStart",
77
- end: "testEnd",
49
+ {
50
+ label: "按钮输入框",
51
+ name: "buttonInput",
52
+ type: "buttonInput",
53
+ children: "点击",
54
+ rules: [{ required: true }],
55
+ },
56
+ {
57
+ label: "选择",
58
+ name: "checkboxGroup",
59
+ type: "checkboxGroup",
60
+ rules: [{ required: true }],
61
+ helper: "帮助我",
62
+ options: [
63
+ { label: "选择1", value: "check1" },
64
+ { label: "选择2", value: "check2" },
65
+ ],
66
+ },
67
+ {
68
+ label: "开关",
69
+ name: "switch",
70
+ type: "switch",
71
+ rules: [{ required: true }],
72
+ },
73
+ {
74
+ label: "时间",
75
+ name: "datePicker",
76
+ type: "datePicker",
77
+ hover: "时间选择",
78
+ helper: "帮助我",
79
+ rules: [{ required: true }],
80
+ },
81
+ {
82
+ label: "时间段",
83
+ name: "rangePicker",
84
+ type: "rangePicker",
85
+ helper: "帮助我",
86
+ rules: [{ required: true }],
87
+ itemProps: {
88
+ valueMap: {
89
+ start: "testStart",
90
+ end: "testEnd",
91
+ },
78
92
  },
79
93
  },
80
- },
81
- {
82
- label: "时分秒",
83
- name: "timePicker",
84
- type: "timePicker",
85
- rules: [{ required: true }],
86
- },
87
- {
88
- label: "文件",
89
- name: "upload",
90
- type: "upload",
91
- rules: [{ required: true }],
92
- },
93
- {
94
- label: "地址文件",
95
- name: "urlUpload",
96
- type: "urlUpload",
97
- rules: [{ required: true }],
98
- },
99
- {
100
- label: "颜色",
101
- name: "colorInput",
102
- type: "colorInput",
103
- },
104
- {
105
- label: "测试",
106
- type: "test",
107
- },
108
- {
109
- type: "submit",
110
- },
111
- ];
94
+ {
95
+ label: "时分秒",
96
+ name: "timePicker",
97
+ type: "timePicker",
98
+ rules: [{ required: true }],
99
+ },
100
+ {
101
+ label: "文件",
102
+ name: "upload",
103
+ type: "upload",
104
+ rules: [{ required: true }],
105
+ },
106
+ {
107
+ label: "地址文件",
108
+ name: "urlUpload",
109
+ type: "urlUpload",
110
+ rules: [{ required: true }],
111
+ },
112
+ {
113
+ label: "颜色",
114
+ name: "colorInput",
115
+ type: "colorInput",
116
+ },
117
+ {
118
+ label: "测试",
119
+ type: "test",
120
+ },
121
+ {
122
+ type: "submit",
123
+ },
124
+ ];
125
+ }
112
126
  const Test = (props) => {
113
127
  return <div>ffff</div>;
114
128
  };
115
129
  export default () => {
116
130
  const form = useHForm();
131
+ const [options,setOptions]=useState([{label:"1",value:1}]);
132
+
117
133
  return (
118
134
  <div style={{ overflow: "auto", height: "90vh" }}>
119
135
  <HFormConfigProvider
@@ -124,7 +140,7 @@ export default () => {
124
140
  }}
125
141
  >
126
142
  <HForm
127
- configData={data}
143
+ configData={formData(options)}
128
144
  labelWidth={200}
129
145
  form={form}
130
146
  onFinish={(value) => {
@@ -156,6 +172,9 @@ export default () => {
156
172
  }}
157
173
  />
158
174
  </HFormConfigProvider>
175
+ <div onClick={()=>{
176
+ setOptions([{label:"2",value: 2}])
177
+ }}>点我</div>
159
178
  </div>
160
179
  );
161
180
  };