@carefrees/form-utils-react-native 0.0.11 → 0.0.13
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/esm/formItem/index.js +17 -17
- package/esm/formList/index.js +11 -11
- package/esm/hooks/attr/attr.FormItem.js +8 -8
- package/esm/hooks/useAttrs.js +3 -3
- package/esm/index.js +14 -17
- package/esm/layout/index.js +31 -31
- package/esm/layout/layout.formItem.js +65 -65
- package/esm/styles/index.js +2 -2
- package/package.json +3 -3
package/esm/formItem/index.js
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
const FormItemInstance = /*#__PURE__*/
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { LayoutFormItem } from "../layout/layout.formItem.js";
|
|
3
|
+
import { useFormItemAttr } from "../hooks/attr/attr.FormItem.js";
|
|
4
|
+
import { Fragment, memo } from "react";
|
|
5
|
+
import { FormItemParentNameProvider, useRegisterFormHideItem } from "@carefrees/form-utils-react-hooks";
|
|
6
|
+
const FormItemInstance = /*#__PURE__*/ memo((props)=>{
|
|
7
7
|
const { labelMode, noStyle, onlyRuleStyle, label, helpText, extra, errorLayout, required, showColon, colSpan, ...rest } = props;
|
|
8
|
-
const { children, ruleInstance, formItemInstance, htmlFor, validateResult } =
|
|
8
|
+
const { children, ruleInstance, formItemInstance, htmlFor, validateResult } = useFormItemAttr({
|
|
9
9
|
...rest
|
|
10
10
|
});
|
|
11
|
-
if (noStyle) return /*#__PURE__*/
|
|
11
|
+
if (noStyle) return /*#__PURE__*/ jsx(FormItemParentNameProvider, {
|
|
12
12
|
name: formItemInstance.name,
|
|
13
13
|
sort: formItemInstance.sort,
|
|
14
14
|
children: children
|
|
15
15
|
});
|
|
16
|
-
return /*#__PURE__*/
|
|
16
|
+
return /*#__PURE__*/ jsx(FormItemParentNameProvider, {
|
|
17
17
|
name: formItemInstance.name,
|
|
18
18
|
sort: formItemInstance.sort,
|
|
19
|
-
children: /*#__PURE__*/
|
|
19
|
+
children: /*#__PURE__*/ jsx(LayoutFormItem, {
|
|
20
20
|
labelMode: labelMode,
|
|
21
21
|
onlyRuleStyle: onlyRuleStyle,
|
|
22
22
|
required: required || ruleInstance?.isRequired?.(),
|
|
@@ -32,14 +32,14 @@ const FormItemInstance = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.mem
|
|
|
32
32
|
})
|
|
33
33
|
});
|
|
34
34
|
});
|
|
35
|
-
const FormItem = /*#__PURE__*/
|
|
35
|
+
const FormItem = /*#__PURE__*/ memo((props)=>{
|
|
36
36
|
const { name } = props;
|
|
37
|
-
if (name) return /*#__PURE__*/
|
|
37
|
+
if (name) return /*#__PURE__*/ jsx(FormItemInstance, {
|
|
38
38
|
...props,
|
|
39
39
|
name: name
|
|
40
40
|
});
|
|
41
41
|
const { labelMode, onlyRuleStyle, label, helpText, extra, errorLayout, required, showColon, colSpan, children } = props;
|
|
42
|
-
return /*#__PURE__*/
|
|
42
|
+
return /*#__PURE__*/ jsx(LayoutFormItem, {
|
|
43
43
|
labelMode: labelMode,
|
|
44
44
|
onlyRuleStyle: onlyRuleStyle,
|
|
45
45
|
required: required,
|
|
@@ -52,15 +52,15 @@ const FormItem = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.memo)((prop
|
|
|
52
52
|
children: children
|
|
53
53
|
});
|
|
54
54
|
});
|
|
55
|
-
const FormHideItem = /*#__PURE__*/
|
|
55
|
+
const FormHideItem = /*#__PURE__*/ memo((props)=>{
|
|
56
56
|
const { name, sort, isJoinParentField } = props;
|
|
57
|
-
const { isHide } =
|
|
57
|
+
const { isHide } = useRegisterFormHideItem({
|
|
58
58
|
name,
|
|
59
59
|
sort: sort,
|
|
60
60
|
isJoinParentField
|
|
61
61
|
});
|
|
62
|
-
if (isHide) return /*#__PURE__*/
|
|
63
|
-
return /*#__PURE__*/
|
|
62
|
+
if (isHide) return /*#__PURE__*/ jsx(Fragment, {});
|
|
63
|
+
return /*#__PURE__*/ jsx(FormItemInstance, {
|
|
64
64
|
...props
|
|
65
65
|
});
|
|
66
66
|
});
|
package/esm/formList/index.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
const FormList = /*#__PURE__*/
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Fragment, memo } from "react";
|
|
3
|
+
import { FormItemParentNameProvider, FormListInstanceContext, useRegisterFormHideItem, useRegisterFormList } from "@carefrees/form-utils-react-hooks";
|
|
4
|
+
const FormList = /*#__PURE__*/ memo((props)=>{
|
|
5
5
|
const { children, ...rest } = props;
|
|
6
|
-
const { formListInstance, ruleInstance, formItemInstance } =
|
|
7
|
-
return /*#__PURE__*/
|
|
6
|
+
const { formListInstance, ruleInstance, formItemInstance } = useRegisterFormList(rest);
|
|
7
|
+
return /*#__PURE__*/ jsx(FormListInstanceContext.Provider, {
|
|
8
8
|
value: formListInstance,
|
|
9
|
-
children: /*#__PURE__*/
|
|
9
|
+
children: /*#__PURE__*/ jsx(FormItemParentNameProvider, {
|
|
10
10
|
name: formListInstance.name,
|
|
11
11
|
sort: formListInstance.sort,
|
|
12
12
|
children: children({
|
|
@@ -22,15 +22,15 @@ const FormList = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.memo)((prop
|
|
|
22
22
|
})
|
|
23
23
|
});
|
|
24
24
|
});
|
|
25
|
-
const FormHideList = /*#__PURE__*/
|
|
25
|
+
const FormHideList = /*#__PURE__*/ memo((props)=>{
|
|
26
26
|
const { name, sort, isJoinParentField } = props;
|
|
27
|
-
const { isHide } =
|
|
27
|
+
const { isHide } = useRegisterFormHideItem({
|
|
28
28
|
name,
|
|
29
29
|
sort: sort,
|
|
30
30
|
isJoinParentField
|
|
31
31
|
});
|
|
32
|
-
if (isHide) return /*#__PURE__*/
|
|
33
|
-
return /*#__PURE__*/
|
|
32
|
+
if (isHide) return /*#__PURE__*/ jsx(Fragment, {});
|
|
33
|
+
return /*#__PURE__*/ jsx(FormList, {
|
|
34
34
|
...props
|
|
35
35
|
});
|
|
36
36
|
});
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
1
|
+
import { get } from "@carefrees/form-utils";
|
|
2
|
+
import { useHtmlFor, useRegisterFormItem } from "@carefrees/form-utils-react-hooks";
|
|
3
|
+
import { cloneElement, isValidElement, useMemo } from "react";
|
|
4
4
|
const useFormItemAttr = (options)=>{
|
|
5
5
|
const { trigger = 'onChange', dependencies, noticeOnlyRuleDataField, isNoticeParentField, noticeWatchField, preserve, valuePropName = 'value', getValuePath = 'text', getValueFromEvent, formatValue, onAfterUpdate, useAttrs, useRules, attrs, children, ...rest } = options;
|
|
6
|
-
const { formItemInstance, form, ruleInstance, newName } =
|
|
6
|
+
const { formItemInstance, form, ruleInstance, newName } = useRegisterFormItem({
|
|
7
7
|
...rest
|
|
8
8
|
});
|
|
9
9
|
formItemInstance.dependencies = dependencies;
|
|
@@ -18,7 +18,7 @@ const useFormItemAttr = (options)=>{
|
|
|
18
18
|
let value = event;
|
|
19
19
|
const target = event?.nativeEvent;
|
|
20
20
|
if ('function' == typeof getValueFromEvent) value = getValueFromEvent(event, form, formItemInstance);
|
|
21
|
-
else if (event && target && 'object' == typeof target && getValuePath in target) value =
|
|
21
|
+
else if (event && target && 'object' == typeof target && getValuePath in target) value = get(target, getValuePath);
|
|
22
22
|
if ('function' == typeof formatValue) value = formatValue(value, form, formItemInstance, event);
|
|
23
23
|
if (oldValue !== value) {
|
|
24
24
|
form.updatedFieldValue(newName, value, 'validate');
|
|
@@ -32,7 +32,7 @@ const useFormItemAttr = (options)=>{
|
|
|
32
32
|
}
|
|
33
33
|
};
|
|
34
34
|
formItemInstance.onChange = onValueChange;
|
|
35
|
-
const htmlFor =
|
|
35
|
+
const htmlFor = useHtmlFor(newName);
|
|
36
36
|
formItemInstance.htmlFor = htmlFor;
|
|
37
37
|
const control = {
|
|
38
38
|
[trigger]: onValueChange,
|
|
@@ -44,11 +44,11 @@ const useFormItemAttr = (options)=>{
|
|
|
44
44
|
const newControl = useAttrs?.(control, form, formItemInstance) || control;
|
|
45
45
|
formItemInstance.control = newControl;
|
|
46
46
|
useRules?.(ruleInstance, form, formItemInstance);
|
|
47
|
-
const validateResult =
|
|
47
|
+
const validateResult = useMemo(()=>ruleInstance.getValidateResult(), [
|
|
48
48
|
ruleInstance.messages
|
|
49
49
|
]);
|
|
50
50
|
return {
|
|
51
|
-
children: /*#__PURE__*/
|
|
51
|
+
children: /*#__PURE__*/ isValidElement(children) ? /*#__PURE__*/ cloneElement(children, newControl) : children,
|
|
52
52
|
form,
|
|
53
53
|
formItemInstance,
|
|
54
54
|
ruleInstance,
|
package/esm/hooks/useAttrs.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import
|
|
2
|
-
const AttrsContext =
|
|
1
|
+
import { createContext, useContext } from "react";
|
|
2
|
+
const AttrsContext = createContext({
|
|
3
3
|
colCount: 1,
|
|
4
4
|
errorLayout: 'left-bottom',
|
|
5
5
|
labelMode: 'top',
|
|
6
6
|
showColon: true,
|
|
7
7
|
inputBordered: true
|
|
8
8
|
});
|
|
9
|
-
const useAttrs = ()=>
|
|
9
|
+
const useAttrs = ()=>useContext(AttrsContext);
|
|
10
10
|
export { AttrsContext, useAttrs };
|
package/esm/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect, useMemo } from "react";
|
|
3
|
+
import { FormLayout } from "./layout/index.js";
|
|
4
|
+
import { View } from "react-native";
|
|
5
|
+
import { FormInstanceContext, useForm, useRegisterForm } from "@carefrees/form-utils-react-hooks";
|
|
6
|
+
import { AttrsContext, AttrsOptions, useAttrs } from "./hooks/useAttrs.js";
|
|
7
7
|
export * from "./formItem/index.js";
|
|
8
8
|
export * from "./formList/index.js";
|
|
9
9
|
export * from "./layout/index.js";
|
|
@@ -12,23 +12,23 @@ export * from "./hooks/attr/attr.FormItem.js";
|
|
|
12
12
|
export * from "@carefrees/form-utils-react-hooks";
|
|
13
13
|
function Form(props) {
|
|
14
14
|
const { children, form, style, formData, hideData, hideRuleData, isAutoUpdatedFormData = false, name, onFinish, onFinishFailed, onValuesChange, layoutStyle, ...rest } = props;
|
|
15
|
-
const formInstance =
|
|
16
|
-
|
|
17
|
-
|
|
15
|
+
const formInstance = useForm(form);
|
|
16
|
+
useRegisterForm(formInstance, name);
|
|
17
|
+
useMemo(()=>formInstance.ctor(formData, hideData, hideRuleData), []);
|
|
18
18
|
formInstance.onFinish = onFinish;
|
|
19
19
|
formInstance.onValuesChange = onValuesChange;
|
|
20
20
|
formInstance.onFinishFailed = onFinishFailed;
|
|
21
|
-
|
|
21
|
+
useEffect(()=>{
|
|
22
22
|
if (isAutoUpdatedFormData) formInstance.resetFormValues(formData);
|
|
23
23
|
}, [
|
|
24
24
|
isAutoUpdatedFormData,
|
|
25
25
|
formData
|
|
26
26
|
]);
|
|
27
|
-
return /*#__PURE__*/
|
|
27
|
+
return /*#__PURE__*/ jsx(FormInstanceContext.Provider, {
|
|
28
28
|
value: formInstance,
|
|
29
|
-
children: /*#__PURE__*/
|
|
29
|
+
children: /*#__PURE__*/ jsx(View, {
|
|
30
30
|
style: style,
|
|
31
|
-
children: /*#__PURE__*/
|
|
31
|
+
children: /*#__PURE__*/ jsx(FormLayout, {
|
|
32
32
|
...rest,
|
|
33
33
|
style: layoutStyle,
|
|
34
34
|
children: children
|
|
@@ -36,7 +36,4 @@ function Form(props) {
|
|
|
36
36
|
})
|
|
37
37
|
});
|
|
38
38
|
}
|
|
39
|
-
|
|
40
|
-
var __webpack_exports__AttrsOptions = __WEBPACK_EXTERNAL_MODULE__hooks_useAttrs_js_565efc98__.AttrsOptions;
|
|
41
|
-
var __webpack_exports__useAttrs = __WEBPACK_EXTERNAL_MODULE__hooks_useAttrs_js_565efc98__.useAttrs;
|
|
42
|
-
export { Form, __webpack_exports__AttrsContext as AttrsContext, __webpack_exports__AttrsOptions as AttrsOptions, __webpack_exports__useAttrs as useAttrs };
|
|
39
|
+
export { AttrsContext, AttrsOptions, Form, useAttrs };
|
package/esm/layout/index.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
const FormLayout = /*#__PURE__*/
|
|
7
|
-
const { colCount: p_colCount = 4, errorLayout: p_errorLayout = 'left-bottom', labelMode: p_labelMode = 'left', showColon: p_showColon = true, formItemStyle: p_formItemStyle, formItemLabelStyle: p_formItemLabelStyle } =
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Fragment, memo, useMemo, useRef } from "react";
|
|
3
|
+
import { AttrsContext, useAttrs } from "../hooks/useAttrs.js";
|
|
4
|
+
import { Text, View } from "react-native";
|
|
5
|
+
import { StylesBase } from "../styles/index.js";
|
|
6
|
+
const FormLayout = /*#__PURE__*/ memo((props)=>{
|
|
7
|
+
const { colCount: p_colCount = 4, errorLayout: p_errorLayout = 'left-bottom', labelMode: p_labelMode = 'left', showColon: p_showColon = true, formItemStyle: p_formItemStyle, formItemLabelStyle: p_formItemLabelStyle } = useAttrs();
|
|
8
8
|
const { colCount = p_colCount, title, extra, children, isAllColSpan, style, headerStyle, bodyStyle, errorLayout = p_errorLayout, labelMode = p_labelMode, showColon = p_showColon, formItemStyle = p_formItemStyle, formItemLabelStyle = p_formItemLabelStyle, bordered = false, gap } = props;
|
|
9
|
-
const propsRef =
|
|
9
|
+
const propsRef = useRef(props);
|
|
10
10
|
propsRef.current = props;
|
|
11
|
-
const value =
|
|
11
|
+
const value = useMemo(()=>({
|
|
12
12
|
colCount,
|
|
13
13
|
errorLayout,
|
|
14
14
|
labelMode,
|
|
@@ -23,7 +23,7 @@ const FormLayout = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.memo)((pr
|
|
|
23
23
|
formItemStyle,
|
|
24
24
|
formItemLabelStyle
|
|
25
25
|
]);
|
|
26
|
-
const styleBase =
|
|
26
|
+
const styleBase = useMemo(()=>{
|
|
27
27
|
const css = {};
|
|
28
28
|
if ('string' == typeof gap) css.gap = Number(gap);
|
|
29
29
|
if ('number' == typeof gap) css.gap = gap;
|
|
@@ -32,53 +32,53 @@ const FormLayout = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.memo)((pr
|
|
|
32
32
|
colCount,
|
|
33
33
|
gap
|
|
34
34
|
]);
|
|
35
|
-
const layoutStyle =
|
|
36
|
-
|
|
37
|
-
bordered &&
|
|
38
|
-
isAllColSpan &&
|
|
35
|
+
const layoutStyle = useMemo(()=>[
|
|
36
|
+
StylesBase["carefrees-form-layout"],
|
|
37
|
+
bordered && StylesBase["carefrees-form-layout.bordered"],
|
|
38
|
+
isAllColSpan && StylesBase.isAllColSpan,
|
|
39
39
|
style
|
|
40
40
|
].filter(Boolean), [
|
|
41
41
|
bordered,
|
|
42
42
|
isAllColSpan,
|
|
43
43
|
style
|
|
44
44
|
]);
|
|
45
|
-
const headStyle =
|
|
46
|
-
|
|
47
|
-
bordered &&
|
|
45
|
+
const headStyle = useMemo(()=>[
|
|
46
|
+
StylesBase["carefrees-form-layout-header"],
|
|
47
|
+
bordered && StylesBase["carefrees-form-layout-header.bordered"],
|
|
48
48
|
headerStyle
|
|
49
49
|
].filter(Boolean), [
|
|
50
50
|
bordered,
|
|
51
51
|
headerStyle
|
|
52
52
|
]);
|
|
53
|
-
return /*#__PURE__*/
|
|
53
|
+
return /*#__PURE__*/ jsx(AttrsContext.Provider, {
|
|
54
54
|
value: value,
|
|
55
|
-
children: /*#__PURE__*/
|
|
55
|
+
children: /*#__PURE__*/ jsxs(View, {
|
|
56
56
|
style: layoutStyle,
|
|
57
57
|
children: [
|
|
58
|
-
title || extra ? /*#__PURE__*/
|
|
58
|
+
title || extra ? /*#__PURE__*/ jsxs(View, {
|
|
59
59
|
style: headStyle,
|
|
60
60
|
children: [
|
|
61
|
-
/*#__PURE__*/
|
|
62
|
-
children: /*#__PURE__*/
|
|
61
|
+
/*#__PURE__*/ jsx(View, {
|
|
62
|
+
children: /*#__PURE__*/ jsx(Text, {
|
|
63
63
|
style: [
|
|
64
|
-
|
|
64
|
+
StylesBase["carefrees-form-layout-header-title"]
|
|
65
65
|
],
|
|
66
66
|
children: title
|
|
67
67
|
})
|
|
68
68
|
}),
|
|
69
|
-
/*#__PURE__*/
|
|
70
|
-
children: /*#__PURE__*/
|
|
69
|
+
/*#__PURE__*/ jsx(View, {
|
|
70
|
+
children: /*#__PURE__*/ jsx(Text, {
|
|
71
71
|
style: [
|
|
72
|
-
|
|
72
|
+
StylesBase["carefrees-form-layout-header-extra"]
|
|
73
73
|
],
|
|
74
74
|
children: extra
|
|
75
75
|
})
|
|
76
76
|
})
|
|
77
77
|
]
|
|
78
|
-
}) : /*#__PURE__*/
|
|
79
|
-
/*#__PURE__*/
|
|
78
|
+
}) : /*#__PURE__*/ jsx(Fragment, {}),
|
|
79
|
+
/*#__PURE__*/ jsx(View, {
|
|
80
80
|
style: [
|
|
81
|
-
|
|
81
|
+
StylesBase["carefrees-form-layout-body"],
|
|
82
82
|
styleBase,
|
|
83
83
|
bodyStyle
|
|
84
84
|
],
|
|
@@ -88,11 +88,11 @@ const FormLayout = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.memo)((pr
|
|
|
88
88
|
})
|
|
89
89
|
});
|
|
90
90
|
});
|
|
91
|
-
const FormLayoutRows = (props)=>/*#__PURE__*/
|
|
91
|
+
const FormLayoutRows = (props)=>/*#__PURE__*/ jsx(View, {
|
|
92
92
|
...props,
|
|
93
93
|
style: [
|
|
94
94
|
props.style,
|
|
95
|
-
|
|
95
|
+
StylesBase.isAllColSpan
|
|
96
96
|
]
|
|
97
97
|
});
|
|
98
98
|
export { FormLayout, FormLayoutRows };
|
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
const LayoutFormItem = /*#__PURE__*/
|
|
7
|
-
const { formItemLabelStyle, formItemStyle, labelMode: p_labelMode = 'top', errorLayout: p_errorLayout = 'left-bottom', showColon: p_showColon = true, colCount = 1, inputBordered: p_inputBordered = true } =
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Text, View } from "react-native";
|
|
3
|
+
import { Fragment, memo, useMemo } from "react";
|
|
4
|
+
import { useAttrs } from "../hooks/useAttrs.js";
|
|
5
|
+
import { StylesBase } from "../styles/index.js";
|
|
6
|
+
const LayoutFormItem = /*#__PURE__*/ memo((props)=>{
|
|
7
|
+
const { formItemLabelStyle, formItemStyle, labelMode: p_labelMode = 'top', errorLayout: p_errorLayout = 'left-bottom', showColon: p_showColon = true, colCount = 1, inputBordered: p_inputBordered = true } = useAttrs();
|
|
8
8
|
const { children, labelMode = p_labelMode, onlyRuleStyle, label, helpText, extra, showColon = p_showColon, colSpan = 1, validateResult, htmlFor, required, errorLayout = p_errorLayout, style, labelStyle, inputBordered = p_inputBordered } = props;
|
|
9
9
|
const tip = validateResult?.tip;
|
|
10
10
|
const isInvalid = !!validateResult?.isInvalid;
|
|
11
11
|
const _errorLayout = 'between' === labelMode ? 'right-bottom' : errorLayout;
|
|
12
|
-
const _isLabel =
|
|
12
|
+
const _isLabel = useMemo(()=>label && 'hide' !== labelMode, [
|
|
13
13
|
label,
|
|
14
14
|
labelMode
|
|
15
15
|
]);
|
|
16
|
-
const _isShowColon =
|
|
16
|
+
const _isShowColon = useMemo(()=>showColon && ('left' === labelMode || 'between' === labelMode), [
|
|
17
17
|
showColon,
|
|
18
18
|
labelMode
|
|
19
19
|
]);
|
|
20
|
-
const widthStyles =
|
|
20
|
+
const widthStyles = useMemo(()=>{
|
|
21
21
|
if (colCount >= colSpan) return {
|
|
22
22
|
width: `${100 / colCount * colSpan}%`
|
|
23
23
|
};
|
|
@@ -28,9 +28,9 @@ const LayoutFormItem = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.memo)
|
|
|
28
28
|
colSpan,
|
|
29
29
|
colCount
|
|
30
30
|
]);
|
|
31
|
-
const warpStyles =
|
|
32
|
-
|
|
33
|
-
onlyRuleStyle &&
|
|
31
|
+
const warpStyles = useMemo(()=>[
|
|
32
|
+
StylesBase["carefrees-form-item"],
|
|
33
|
+
onlyRuleStyle && StylesBase["carefrees-form-item.only-rule-style"],
|
|
34
34
|
widthStyles,
|
|
35
35
|
formItemStyle,
|
|
36
36
|
style
|
|
@@ -40,17 +40,17 @@ const LayoutFormItem = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.memo)
|
|
|
40
40
|
onlyRuleStyle,
|
|
41
41
|
formItemStyle
|
|
42
42
|
]);
|
|
43
|
-
const containerStyles =
|
|
44
|
-
|
|
45
|
-
'left' === labelMode &&
|
|
46
|
-
'between' === labelMode &&
|
|
43
|
+
const containerStyles = useMemo(()=>[
|
|
44
|
+
StylesBase["carefrees-form-item-container"],
|
|
45
|
+
'left' === labelMode && StylesBase["carefrees-form-item-container.left"],
|
|
46
|
+
'between' === labelMode && StylesBase["carefrees-form-item-container.between"]
|
|
47
47
|
].filter(Boolean), [
|
|
48
48
|
labelMode
|
|
49
49
|
]);
|
|
50
|
-
const labelWarpStyles =
|
|
51
|
-
|
|
52
|
-
'left' === labelMode &&
|
|
53
|
-
('left' === labelMode || 'between' == labelMode) &&
|
|
50
|
+
const labelWarpStyles = useMemo(()=>[
|
|
51
|
+
StylesBase["carefrees-form-item-label-warp"],
|
|
52
|
+
'left' === labelMode && StylesBase["carefrees-form-item-label-warp.left"],
|
|
53
|
+
('left' === labelMode || 'between' == labelMode) && StylesBase["carefrees-form-item-label-warp.minHeight"],
|
|
54
54
|
formItemLabelStyle,
|
|
55
55
|
labelStyle
|
|
56
56
|
].filter(Boolean), [
|
|
@@ -58,94 +58,94 @@ const LayoutFormItem = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.memo)
|
|
|
58
58
|
labelStyle,
|
|
59
59
|
formItemLabelStyle
|
|
60
60
|
]);
|
|
61
|
-
const bodyStyles =
|
|
62
|
-
|
|
63
|
-
'between' === labelMode &&
|
|
61
|
+
const bodyStyles = useMemo(()=>[
|
|
62
|
+
StylesBase["carefrees-form-item-body"],
|
|
63
|
+
'between' === labelMode && StylesBase["carefrees-form-item-body-com.between"]
|
|
64
64
|
].filter(Boolean), [
|
|
65
65
|
labelMode
|
|
66
66
|
]);
|
|
67
|
-
const bodyInputStyles =
|
|
68
|
-
|
|
69
|
-
inputBordered &&
|
|
70
|
-
'between' === labelMode &&
|
|
67
|
+
const bodyInputStyles = useMemo(()=>[
|
|
68
|
+
StylesBase["carefrees-form-item-body-input"],
|
|
69
|
+
inputBordered && StylesBase["carefrees-form-item-body-input.input-bordered"],
|
|
70
|
+
'between' === labelMode && StylesBase["carefrees-form-item-body-com.between"]
|
|
71
71
|
].filter(Boolean), [
|
|
72
72
|
labelMode,
|
|
73
73
|
inputBordered
|
|
74
74
|
]);
|
|
75
|
-
const errorStyles =
|
|
76
|
-
|
|
77
|
-
_errorLayout &&
|
|
75
|
+
const errorStyles = useMemo(()=>[
|
|
76
|
+
StylesBase["carefrees-form-item-body-error"],
|
|
77
|
+
_errorLayout && StylesBase[`carefrees-form-item-body-error.${_errorLayout}`]
|
|
78
78
|
].filter(Boolean), [
|
|
79
79
|
_errorLayout
|
|
80
80
|
]);
|
|
81
|
-
return /*#__PURE__*/
|
|
81
|
+
return /*#__PURE__*/ jsxs(View, {
|
|
82
82
|
style: warpStyles,
|
|
83
83
|
children: [
|
|
84
|
-
/*#__PURE__*/
|
|
84
|
+
/*#__PURE__*/ jsxs(View, {
|
|
85
85
|
style: containerStyles,
|
|
86
86
|
children: [
|
|
87
|
-
_isLabel ? /*#__PURE__*/
|
|
87
|
+
_isLabel ? /*#__PURE__*/ jsxs(View, {
|
|
88
88
|
style: labelWarpStyles,
|
|
89
89
|
children: [
|
|
90
|
-
required ? /*#__PURE__*/
|
|
91
|
-
children: /*#__PURE__*/
|
|
90
|
+
required ? /*#__PURE__*/ jsx(View, {
|
|
91
|
+
children: /*#__PURE__*/ jsx(Text, {
|
|
92
92
|
style: [
|
|
93
|
-
|
|
94
|
-
|
|
93
|
+
StylesBase.fontSize14,
|
|
94
|
+
StylesBase["carefrees-form-item-label.required"]
|
|
95
95
|
],
|
|
96
96
|
children: "*"
|
|
97
97
|
})
|
|
98
|
-
}) : /*#__PURE__*/
|
|
99
|
-
/*#__PURE__*/
|
|
100
|
-
style:
|
|
101
|
-
children: 'string' == typeof label ? /*#__PURE__*/
|
|
102
|
-
style:
|
|
98
|
+
}) : /*#__PURE__*/ jsx(Fragment, {}),
|
|
99
|
+
/*#__PURE__*/ jsx(View, {
|
|
100
|
+
style: StylesBase["carefrees-form-item-label"],
|
|
101
|
+
children: 'string' == typeof label ? /*#__PURE__*/ jsx(Text, {
|
|
102
|
+
style: StylesBase.fontSize14,
|
|
103
103
|
children: label
|
|
104
104
|
}) : label
|
|
105
105
|
}),
|
|
106
|
-
_isShowColon ? /*#__PURE__*/
|
|
106
|
+
_isShowColon ? /*#__PURE__*/ jsx(View, {
|
|
107
107
|
style: [
|
|
108
|
-
|
|
108
|
+
StylesBase["carefrees-form-item-label.show-colon"]
|
|
109
109
|
],
|
|
110
|
-
children: /*#__PURE__*/
|
|
111
|
-
style:
|
|
110
|
+
children: /*#__PURE__*/ jsx(Text, {
|
|
111
|
+
style: StylesBase.fontSize14,
|
|
112
112
|
children: ":"
|
|
113
113
|
})
|
|
114
|
-
}) : /*#__PURE__*/
|
|
114
|
+
}) : /*#__PURE__*/ jsx(Fragment, {})
|
|
115
115
|
]
|
|
116
|
-
}) : /*#__PURE__*/
|
|
117
|
-
/*#__PURE__*/
|
|
116
|
+
}) : /*#__PURE__*/ jsx(Fragment, {}),
|
|
117
|
+
/*#__PURE__*/ jsxs(View, {
|
|
118
118
|
style: bodyStyles,
|
|
119
119
|
children: [
|
|
120
|
-
/*#__PURE__*/
|
|
120
|
+
/*#__PURE__*/ jsx(View, {
|
|
121
121
|
style: bodyInputStyles,
|
|
122
122
|
children: children
|
|
123
123
|
}),
|
|
124
|
-
helpText ? /*#__PURE__*/
|
|
125
|
-
style:
|
|
126
|
-
children: 'string' == typeof helpText ? /*#__PURE__*/
|
|
127
|
-
style:
|
|
124
|
+
helpText ? /*#__PURE__*/ jsx(View, {
|
|
125
|
+
style: StylesBase["carefrees-form-item-body-help"],
|
|
126
|
+
children: 'string' == typeof helpText ? /*#__PURE__*/ jsx(Text, {
|
|
127
|
+
style: StylesBase.fontSize12,
|
|
128
128
|
children: helpText
|
|
129
129
|
}) : helpText
|
|
130
|
-
}) : /*#__PURE__*/
|
|
131
|
-
isInvalid ? /*#__PURE__*/
|
|
130
|
+
}) : /*#__PURE__*/ jsx(Fragment, {}),
|
|
131
|
+
isInvalid ? /*#__PURE__*/ jsx(View, {
|
|
132
132
|
style: errorStyles,
|
|
133
|
-
children: /*#__PURE__*/
|
|
134
|
-
style:
|
|
133
|
+
children: /*#__PURE__*/ jsx(Text, {
|
|
134
|
+
style: StylesBase["error-text"],
|
|
135
135
|
children: tip
|
|
136
136
|
})
|
|
137
|
-
}) : /*#__PURE__*/
|
|
137
|
+
}) : /*#__PURE__*/ jsx(Fragment, {})
|
|
138
138
|
]
|
|
139
139
|
})
|
|
140
140
|
]
|
|
141
141
|
}),
|
|
142
|
-
extra ? /*#__PURE__*/
|
|
143
|
-
style:
|
|
144
|
-
children: 'string' == typeof extra ? /*#__PURE__*/
|
|
145
|
-
style:
|
|
142
|
+
extra ? /*#__PURE__*/ jsx(View, {
|
|
143
|
+
style: StylesBase["carefrees-form-item-extra"],
|
|
144
|
+
children: 'string' == typeof extra ? /*#__PURE__*/ jsx(Text, {
|
|
145
|
+
style: StylesBase.fontSize14,
|
|
146
146
|
children: extra
|
|
147
147
|
}) : extra
|
|
148
|
-
}) : /*#__PURE__*/
|
|
148
|
+
}) : /*#__PURE__*/ jsx(Fragment, {})
|
|
149
149
|
]
|
|
150
150
|
});
|
|
151
151
|
});
|
package/esm/styles/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
const StylesBase =
|
|
1
|
+
import { StyleSheet } from "react-native";
|
|
2
|
+
const StylesBase = StyleSheet.create({
|
|
3
3
|
'carefrees-form': {
|
|
4
4
|
fontSize: 14
|
|
5
5
|
},
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"author": "SunLxy <1011771396@qq.com>",
|
|
4
4
|
"description": "react-native 表单组件",
|
|
5
5
|
"homepage": "https://github.com/SunLxy/carefrees-form-utils",
|
|
6
|
-
"version": "0.0.
|
|
6
|
+
"version": "0.0.13",
|
|
7
7
|
"main": "esm/index.js",
|
|
8
8
|
"types": "esm/index.d.ts",
|
|
9
9
|
"module": "esm/index.js",
|
|
@@ -20,8 +20,8 @@
|
|
|
20
20
|
"esm"
|
|
21
21
|
],
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@carefrees/form-utils": "^0.0.
|
|
24
|
-
"@carefrees/form-utils-react-hooks": "^0.0.
|
|
23
|
+
"@carefrees/form-utils": "^0.0.13",
|
|
24
|
+
"@carefrees/form-utils-react-hooks": "^0.0.13"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
27
|
"@types/react": "18.2.21",
|