datastake-daf 0.6.592 → 0.6.594
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.
package/dist/components/index.js
CHANGED
|
@@ -7345,7 +7345,7 @@ const Style$J = dt.div`
|
|
|
7345
7345
|
}
|
|
7346
7346
|
|
|
7347
7347
|
&.ant-btn-primary {
|
|
7348
|
-
background: var(--
|
|
7348
|
+
background: var(--color-primary-70);
|
|
7349
7349
|
|
|
7350
7350
|
&[disabled] {
|
|
7351
7351
|
opacity: 0.6;
|
|
@@ -7359,8 +7359,8 @@ const Style$J = dt.div`
|
|
|
7359
7359
|
}
|
|
7360
7360
|
|
|
7361
7361
|
&.ant-btn-default {
|
|
7362
|
-
color: var(--
|
|
7363
|
-
border: 1.5px solid var(--
|
|
7362
|
+
color: var(--color-primary-70);
|
|
7363
|
+
border: 1.5px solid var(--color-primary-70);
|
|
7364
7364
|
|
|
7365
7365
|
&.default {
|
|
7366
7366
|
color: #1F2A37;
|
|
@@ -7375,8 +7375,8 @@ const Style$J = dt.div`
|
|
|
7375
7375
|
}
|
|
7376
7376
|
|
|
7377
7377
|
&.blue-color {
|
|
7378
|
-
color: var(--
|
|
7379
|
-
border-color: var(--
|
|
7378
|
+
color: var(--color-primary-70);
|
|
7379
|
+
border-color: var(--color-primary-70);
|
|
7380
7380
|
}
|
|
7381
7381
|
}
|
|
7382
7382
|
`;
|
|
@@ -40497,6 +40497,12 @@ const Navigation = _ref => {
|
|
|
40497
40497
|
}) : null;
|
|
40498
40498
|
};
|
|
40499
40499
|
|
|
40500
|
+
const SelectStyle = dt.div`
|
|
40501
|
+
.ant-select-arrow {
|
|
40502
|
+
margin-top: 1px !important;
|
|
40503
|
+
}
|
|
40504
|
+
`;
|
|
40505
|
+
|
|
40500
40506
|
function AuthForm(_ref) {
|
|
40501
40507
|
var _steps$currentStep;
|
|
40502
40508
|
let {
|
|
@@ -40508,19 +40514,20 @@ function AuthForm(_ref) {
|
|
|
40508
40514
|
form,
|
|
40509
40515
|
errors,
|
|
40510
40516
|
t = key => key,
|
|
40511
|
-
executeRecaptcha = () => {}
|
|
40517
|
+
executeRecaptcha = () => {},
|
|
40518
|
+
getCurrentStep = () => {}
|
|
40512
40519
|
} = _ref;
|
|
40513
40520
|
const [formInstance] = antd.Form.useForm(form);
|
|
40514
40521
|
const [currentStep, setCurrentStep] = React.useState(0);
|
|
40515
40522
|
const [allFormValues, setAllFormValues] = React.useState(initialValues);
|
|
40516
40523
|
const [formErrors, setFormErrors] = React.useState(null);
|
|
40517
|
-
console.log({
|
|
40518
|
-
errors
|
|
40519
|
-
});
|
|
40520
40524
|
const isMultiStep = !!steps;
|
|
40521
40525
|
const currentFields = isMultiStep ? steps === null || steps === void 0 || (_steps$currentStep = steps[currentStep]) === null || _steps$currentStep === void 0 ? void 0 : _steps$currentStep.fields : fields || [];
|
|
40522
40526
|
React.useEffect(() => {
|
|
40523
|
-
|
|
40527
|
+
getCurrentStep === null || getCurrentStep === void 0 || getCurrentStep(currentStep);
|
|
40528
|
+
}, [currentStep, getCurrentStep]);
|
|
40529
|
+
React.useEffect(() => {
|
|
40530
|
+
if (isMultiStep) {
|
|
40524
40531
|
formInstance.setFieldsValue(allFormValues);
|
|
40525
40532
|
}
|
|
40526
40533
|
}, [currentStep, allFormValues, formInstance, isMultiStep]);
|
|
@@ -40616,14 +40623,16 @@ function AuthForm(_ref) {
|
|
|
40616
40623
|
}, field.props));
|
|
40617
40624
|
break;
|
|
40618
40625
|
case "select":
|
|
40619
|
-
inputNode = /*#__PURE__*/jsxRuntime.jsx(
|
|
40620
|
-
|
|
40621
|
-
|
|
40622
|
-
|
|
40623
|
-
|
|
40624
|
-
|
|
40625
|
-
|
|
40626
|
-
|
|
40626
|
+
inputNode = /*#__PURE__*/jsxRuntime.jsx(SelectStyle, {
|
|
40627
|
+
children: /*#__PURE__*/jsxRuntime.jsx(antd.Select, _objectSpread2(_objectSpread2({
|
|
40628
|
+
placeholder: field.placeholder
|
|
40629
|
+
}, field.props), {}, {
|
|
40630
|
+
children: (_field$options = field.options) === null || _field$options === void 0 ? void 0 : _field$options.map(opt => /*#__PURE__*/jsxRuntime.jsx(antd.Select.Option, {
|
|
40631
|
+
value: opt.value,
|
|
40632
|
+
children: opt.label
|
|
40633
|
+
}, opt.value))
|
|
40634
|
+
}))
|
|
40635
|
+
});
|
|
40627
40636
|
break;
|
|
40628
40637
|
case "custom":
|
|
40629
40638
|
inputNode = field.component;
|
|
@@ -40654,7 +40663,7 @@ function AuthForm(_ref) {
|
|
|
40654
40663
|
children: /*#__PURE__*/jsxRuntime.jsxs(antd.Form, {
|
|
40655
40664
|
form: formInstance,
|
|
40656
40665
|
layout: "vertical",
|
|
40657
|
-
initialValues: initialValues,
|
|
40666
|
+
initialValues: isMultiStep ? allFormValues : initialValues,
|
|
40658
40667
|
onFinish: handleSubmit,
|
|
40659
40668
|
onValuesChange: handleValuesChange,
|
|
40660
40669
|
children: [currentFields.map(renderField), formErrors ? renderErrors(formErrors, t) : null, isMultiStep && currentStep > 0 ? /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
@@ -40671,7 +40680,7 @@ function AuthForm(_ref) {
|
|
|
40671
40680
|
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
40672
40681
|
className: "buttons",
|
|
40673
40682
|
style: {
|
|
40674
|
-
marginTop:
|
|
40683
|
+
marginTop: '16px'
|
|
40675
40684
|
},
|
|
40676
40685
|
children: /*#__PURE__*/jsxRuntime.jsx(BorderedButton, {
|
|
40677
40686
|
type: "primary",
|
|
@@ -40686,7 +40695,7 @@ function AuthForm(_ref) {
|
|
|
40686
40695
|
}), /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
40687
40696
|
className: "buttons",
|
|
40688
40697
|
style: {
|
|
40689
|
-
marginTop:
|
|
40698
|
+
marginTop: '8px'
|
|
40690
40699
|
},
|
|
40691
40700
|
children: /*#__PURE__*/jsxRuntime.jsx(BorderedButton, {
|
|
40692
40701
|
onClick: prev,
|
package/dist/layouts/index.js
CHANGED
|
@@ -6575,7 +6575,7 @@ const Style = dt.div`
|
|
|
6575
6575
|
}
|
|
6576
6576
|
|
|
6577
6577
|
&.ant-btn-primary {
|
|
6578
|
-
background: var(--
|
|
6578
|
+
background: var(--color-primary-70);
|
|
6579
6579
|
|
|
6580
6580
|
&[disabled] {
|
|
6581
6581
|
opacity: 0.6;
|
|
@@ -6589,8 +6589,8 @@ const Style = dt.div`
|
|
|
6589
6589
|
}
|
|
6590
6590
|
|
|
6591
6591
|
&.ant-btn-default {
|
|
6592
|
-
color: var(--
|
|
6593
|
-
border: 1.5px solid var(--
|
|
6592
|
+
color: var(--color-primary-70);
|
|
6593
|
+
border: 1.5px solid var(--color-primary-70);
|
|
6594
6594
|
|
|
6595
6595
|
&.default {
|
|
6596
6596
|
color: #1F2A37;
|
|
@@ -6605,8 +6605,8 @@ const Style = dt.div`
|
|
|
6605
6605
|
}
|
|
6606
6606
|
|
|
6607
6607
|
&.blue-color {
|
|
6608
|
-
color: var(--
|
|
6609
|
-
border-color: var(--
|
|
6608
|
+
color: var(--color-primary-70);
|
|
6609
|
+
border-color: var(--color-primary-70);
|
|
6610
6610
|
}
|
|
6611
6611
|
}
|
|
6612
6612
|
`;
|
package/package.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React, { useState, useEffect, useCallback } from "react";
|
|
2
2
|
import { Form, Input, Select } from "antd";
|
|
3
3
|
import BorderedButton from "../Button/BorderedButton/index.jsx";
|
|
4
|
+
import { SelectStyle } from "./style";
|
|
4
5
|
|
|
5
6
|
function AuthForm ({
|
|
6
7
|
steps,
|
|
@@ -12,19 +13,22 @@ function AuthForm ({
|
|
|
12
13
|
errors,
|
|
13
14
|
t = (key) => key,
|
|
14
15
|
executeRecaptcha = () => {},
|
|
16
|
+
getCurrentStep = () => {}
|
|
15
17
|
}){
|
|
16
18
|
const [formInstance] = Form.useForm(form);
|
|
17
19
|
const [currentStep, setCurrentStep] = useState(0);
|
|
18
20
|
const [allFormValues, setAllFormValues] = useState(initialValues);
|
|
19
21
|
const [formErrors, setFormErrors] = useState(null);
|
|
20
22
|
|
|
21
|
-
console.log({errors})
|
|
22
|
-
|
|
23
23
|
const isMultiStep = !!steps;
|
|
24
24
|
const currentFields = isMultiStep ? steps?.[currentStep]?.fields : fields || [];
|
|
25
25
|
|
|
26
26
|
useEffect(() => {
|
|
27
|
-
|
|
27
|
+
getCurrentStep?.(currentStep);
|
|
28
|
+
}, [currentStep, getCurrentStep]);
|
|
29
|
+
|
|
30
|
+
useEffect(() => {
|
|
31
|
+
if (isMultiStep) {
|
|
28
32
|
formInstance.setFieldsValue(allFormValues);
|
|
29
33
|
}
|
|
30
34
|
}, [currentStep, allFormValues, formInstance, isMultiStep]);
|
|
@@ -129,13 +133,15 @@ function AuthForm ({
|
|
|
129
133
|
break;
|
|
130
134
|
case "select":
|
|
131
135
|
inputNode = (
|
|
132
|
-
<
|
|
133
|
-
{field.
|
|
134
|
-
|
|
135
|
-
{opt.
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
136
|
+
<SelectStyle>
|
|
137
|
+
<Select placeholder={field.placeholder} {...field.props}>
|
|
138
|
+
{field.options?.map((opt) => (
|
|
139
|
+
<Select.Option key={opt.value} value={opt.value}>
|
|
140
|
+
{opt.label}
|
|
141
|
+
</Select.Option>
|
|
142
|
+
))}
|
|
143
|
+
</Select>
|
|
144
|
+
</SelectStyle>
|
|
139
145
|
);
|
|
140
146
|
break;
|
|
141
147
|
case "custom":
|
|
@@ -172,7 +178,7 @@ function AuthForm ({
|
|
|
172
178
|
<Form
|
|
173
179
|
form={formInstance}
|
|
174
180
|
layout="vertical"
|
|
175
|
-
initialValues={initialValues}
|
|
181
|
+
initialValues={isMultiStep ? allFormValues : initialValues}
|
|
176
182
|
onFinish={handleSubmit}
|
|
177
183
|
onValuesChange={handleValuesChange}
|
|
178
184
|
>
|
|
@@ -191,7 +197,7 @@ function AuthForm ({
|
|
|
191
197
|
const allFieldsFilled = checkRequiredFieldsFilled({}, form.getFieldsValue());
|
|
192
198
|
|
|
193
199
|
return (
|
|
194
|
-
<div className="buttons" style={{ marginTop:
|
|
200
|
+
<div className="buttons" style={{ marginTop: '16px'}}>
|
|
195
201
|
<BorderedButton
|
|
196
202
|
type="primary"
|
|
197
203
|
htmlType="submit"
|
|
@@ -204,7 +210,7 @@ function AuthForm ({
|
|
|
204
210
|
);
|
|
205
211
|
}}
|
|
206
212
|
</Form.Item>
|
|
207
|
-
<div className="buttons" style={{ marginTop:
|
|
213
|
+
<div className="buttons" style={{ marginTop: '8px'}}>
|
|
208
214
|
<BorderedButton onClick={prev} block className="normal-br">
|
|
209
215
|
{t("Back")}
|
|
210
216
|
</BorderedButton>
|
|
@@ -20,7 +20,7 @@ const Style = styled.div`
|
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
&.ant-btn-primary {
|
|
23
|
-
background: var(--
|
|
23
|
+
background: var(--color-primary-70);
|
|
24
24
|
|
|
25
25
|
&[disabled] {
|
|
26
26
|
opacity: 0.6;
|
|
@@ -34,8 +34,8 @@ const Style = styled.div`
|
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
&.ant-btn-default {
|
|
37
|
-
color: var(--
|
|
38
|
-
border: 1.5px solid var(--
|
|
37
|
+
color: var(--color-primary-70);
|
|
38
|
+
border: 1.5px solid var(--color-primary-70);
|
|
39
39
|
|
|
40
40
|
&.default {
|
|
41
41
|
color: #1F2A37;
|
|
@@ -50,8 +50,8 @@ const Style = styled.div`
|
|
|
50
50
|
}
|
|
51
51
|
|
|
52
52
|
&.blue-color {
|
|
53
|
-
color: var(--
|
|
54
|
-
border-color: var(--
|
|
53
|
+
color: var(--color-primary-70);
|
|
54
|
+
border-color: var(--color-primary-70);
|
|
55
55
|
}
|
|
56
56
|
}
|
|
57
57
|
`;
|