react-crud-mobile 1.3.359 → 1.3.361
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/react-crud-mobile.cjs.development.js +4 -9
- package/dist/react-crud-mobile.cjs.development.js.map +1 -1
- package/dist/react-crud-mobile.cjs.production.min.js +1 -1
- package/dist/react-crud-mobile.cjs.production.min.js.map +1 -1
- package/dist/react-crud-mobile.esm.js +4 -9
- package/dist/react-crud-mobile.esm.js.map +1 -1
- package/package.json +76 -76
- package/src/elements/UI.tsx +77 -77
- package/src/elements/UIChildren.tsx +142 -142
- package/src/elements/UIComplete.tsx +14 -14
- package/src/elements/UIElement.tsx +872 -878
- package/src/elements/UITag.tsx +13 -13
- package/src/elements/charts/ElChart.tsx +10 -10
- package/src/elements/core/GestureView.tsx +16 -16
- package/src/elements/core/SafeView.tsx +63 -63
- package/src/elements/core/UIButton.tsx +144 -144
- package/src/elements/core/UIHeader.tsx +38 -38
- package/src/elements/core/UIIcon.tsx +32 -32
- package/src/elements/core/UIInclude.tsx +40 -40
- package/src/elements/core/UIInput.tsx +149 -149
- package/src/elements/core/UIList.tsx +180 -180
- package/src/elements/core/UIListRow.tsx +132 -132
- package/src/elements/core/UIModal.tsx +212 -212
- package/src/elements/core/UIOrder.tsx +194 -194
- package/src/elements/core/UIQuantity.tsx +98 -98
- package/src/elements/core/UISelect.tsx +194 -194
- package/src/elements/core/UIToast.tsx +44 -44
- package/src/elements/core/UIToggle.tsx +114 -114
- package/src/elements/core/UIView.tsx +69 -69
- package/src/elements/index.ts +1 -1
- package/src/elements/tabs/ElTabs.tsx +178 -178
- package/src/index.ts +1 -1
package/package.json
CHANGED
@@ -1,76 +1,76 @@
|
|
1
|
-
{
|
2
|
-
"name": "react-crud-mobile",
|
3
|
-
"version": "1.3.
|
4
|
-
"license": "MIT",
|
5
|
-
"description": "Uma biblioteca de componentes para React Native v1",
|
6
|
-
"main": "dist/index.js",
|
7
|
-
"module": "dist/index.js",
|
8
|
-
"types": "dist/index.d.ts",
|
9
|
-
"react-native": "src/index.ts",
|
10
|
-
"scripts": {
|
11
|
-
"start": "tsdx watch",
|
12
|
-
"build": "tsdx build",
|
13
|
-
"test": "tsdx test --passWithNoTests",
|
14
|
-
"lint": "tsdx lint",
|
15
|
-
"prepare": "tsdx build",
|
16
|
-
"deploy": "npm version patch && npm publish"
|
17
|
-
},
|
18
|
-
"husky": {
|
19
|
-
"hooks": {
|
20
|
-
"pre-commit": "tsdx lint"
|
21
|
-
}
|
22
|
-
},
|
23
|
-
"prettier": {
|
24
|
-
"printWidth": 80,
|
25
|
-
"semi": true,
|
26
|
-
"singleQuote": true,
|
27
|
-
"trailingComma": "es5"
|
28
|
-
},
|
29
|
-
"author": "juarez",
|
30
|
-
"keywords": [
|
31
|
-
"react-native",
|
32
|
-
"components",
|
33
|
-
"library",
|
34
|
-
"ui"
|
35
|
-
],
|
36
|
-
"peerDependencies": {
|
37
|
-
"react": "19.1.0",
|
38
|
-
"react-dom": "19.1.0",
|
39
|
-
"react-native": "0.81.4"
|
40
|
-
},
|
41
|
-
"dependencies": {
|
42
|
-
"@expo/vector-icons": "^15.0.2",
|
43
|
-
"@react-native-async-storage/async-storage": "^2.1.2",
|
44
|
-
"@react-native-community/slider": "^5.0.1",
|
45
|
-
"@react-native-vector-icons/ionicons": "^7.4.0",
|
46
|
-
"@react-native-vector-icons/material-icons": "^0.0.1",
|
47
|
-
"expo-status-bar": "~3.0.8",
|
48
|
-
"react": "19.1.0",
|
49
|
-
"react-crud-utils": "^0.1.457",
|
50
|
-
"react-dom": "19.1.0",
|
51
|
-
"react-native": "0.81.4",
|
52
|
-
"react-native-draggable-flatlist": "^4.0.3",
|
53
|
-
"react-native-gesture-handler": "~2.28.0",
|
54
|
-
"react-native-safe-area-context": "5.6.1",
|
55
|
-
"react-native-screens": "~4.16.0",
|
56
|
-
"react-native-toast-message": "^2.3.3",
|
57
|
-
"react-native-web": "~0.21.1",
|
58
|
-
"react-native-webview": "13.15.0",
|
59
|
-
"tsdx": "^0.14.1",
|
60
|
-
"tslib": "^2.8.1",
|
61
|
-
"tsup": "^7.3.0",
|
62
|
-
"typescript": "^5.8.3"
|
63
|
-
},
|
64
|
-
"files": [
|
65
|
-
"dist",
|
66
|
-
"src"
|
67
|
-
],
|
68
|
-
"devDependencies": {
|
69
|
-
"@babel/core": "^7.25.2",
|
70
|
-
"@babel/preset-react": "^7.27.1",
|
71
|
-
"@types/react": "^19.1.2",
|
72
|
-
"@types/react-dom": "^19.1.3",
|
73
|
-
"eslint": "^9.25.0",
|
74
|
-
"typescript": "~5.8.3"
|
75
|
-
}
|
76
|
-
}
|
1
|
+
{
|
2
|
+
"name": "react-crud-mobile",
|
3
|
+
"version": "1.3.361",
|
4
|
+
"license": "MIT",
|
5
|
+
"description": "Uma biblioteca de componentes para React Native v1",
|
6
|
+
"main": "dist/index.js",
|
7
|
+
"module": "dist/index.js",
|
8
|
+
"types": "dist/index.d.ts",
|
9
|
+
"react-native": "src/index.ts",
|
10
|
+
"scripts": {
|
11
|
+
"start": "tsdx watch",
|
12
|
+
"build": "tsdx build",
|
13
|
+
"test": "tsdx test --passWithNoTests",
|
14
|
+
"lint": "tsdx lint",
|
15
|
+
"prepare": "tsdx build",
|
16
|
+
"deploy": "npm version patch && npm publish"
|
17
|
+
},
|
18
|
+
"husky": {
|
19
|
+
"hooks": {
|
20
|
+
"pre-commit": "tsdx lint"
|
21
|
+
}
|
22
|
+
},
|
23
|
+
"prettier": {
|
24
|
+
"printWidth": 80,
|
25
|
+
"semi": true,
|
26
|
+
"singleQuote": true,
|
27
|
+
"trailingComma": "es5"
|
28
|
+
},
|
29
|
+
"author": "juarez",
|
30
|
+
"keywords": [
|
31
|
+
"react-native",
|
32
|
+
"components",
|
33
|
+
"library",
|
34
|
+
"ui"
|
35
|
+
],
|
36
|
+
"peerDependencies": {
|
37
|
+
"react": "19.1.0",
|
38
|
+
"react-dom": "19.1.0",
|
39
|
+
"react-native": "0.81.4"
|
40
|
+
},
|
41
|
+
"dependencies": {
|
42
|
+
"@expo/vector-icons": "^15.0.2",
|
43
|
+
"@react-native-async-storage/async-storage": "^2.1.2",
|
44
|
+
"@react-native-community/slider": "^5.0.1",
|
45
|
+
"@react-native-vector-icons/ionicons": "^7.4.0",
|
46
|
+
"@react-native-vector-icons/material-icons": "^0.0.1",
|
47
|
+
"expo-status-bar": "~3.0.8",
|
48
|
+
"react": "19.1.0",
|
49
|
+
"react-crud-utils": "^0.1.457",
|
50
|
+
"react-dom": "19.1.0",
|
51
|
+
"react-native": "0.81.4",
|
52
|
+
"react-native-draggable-flatlist": "^4.0.3",
|
53
|
+
"react-native-gesture-handler": "~2.28.0",
|
54
|
+
"react-native-safe-area-context": "5.6.1",
|
55
|
+
"react-native-screens": "~4.16.0",
|
56
|
+
"react-native-toast-message": "^2.3.3",
|
57
|
+
"react-native-web": "~0.21.1",
|
58
|
+
"react-native-webview": "13.15.0",
|
59
|
+
"tsdx": "^0.14.1",
|
60
|
+
"tslib": "^2.8.1",
|
61
|
+
"tsup": "^7.3.0",
|
62
|
+
"typescript": "^5.8.3"
|
63
|
+
},
|
64
|
+
"files": [
|
65
|
+
"dist",
|
66
|
+
"src"
|
67
|
+
],
|
68
|
+
"devDependencies": {
|
69
|
+
"@babel/core": "^7.25.2",
|
70
|
+
"@babel/preset-react": "^7.27.1",
|
71
|
+
"@types/react": "^19.1.2",
|
72
|
+
"@types/react-dom": "^19.1.3",
|
73
|
+
"eslint": "^9.25.0",
|
74
|
+
"typescript": "~5.8.3"
|
75
|
+
}
|
76
|
+
}
|
package/src/elements/UI.tsx
CHANGED
@@ -1,77 +1,77 @@
|
|
1
|
-
import {
|
2
|
-
ListType,
|
3
|
-
UserType,
|
4
|
-
InputType,
|
5
|
-
ChartType,
|
6
|
-
ContainerType,
|
7
|
-
ListInputType,
|
8
|
-
TabsType,
|
9
|
-
DefineType,
|
10
|
-
ButtonType,
|
11
|
-
IconType,
|
12
|
-
LinkType,
|
13
|
-
SliderType,
|
14
|
-
} from 'react-crud-utils';
|
15
|
-
import UIElement from './UIElement';
|
16
|
-
|
17
|
-
import UIInclude from './core/UIInclude';
|
18
|
-
import SafeView from './core/SafeView';
|
19
|
-
import GestureView from './core/GestureView';
|
20
|
-
|
21
|
-
const UI = {
|
22
|
-
Order: (props: ListType) => <UIElement {...props} type="order" />,
|
23
|
-
List: (props: ListType) => <UIElement {...props} type="list" />,
|
24
|
-
Row: (props: UserType) => <UIElement {...props} type="row" />,
|
25
|
-
Value: (props: UserType) => <UIElement {...props} type="value" />,
|
26
|
-
Label: (props: UserType) => <UIElement {...props} type="label" />,
|
27
|
-
Repeat: (props: ListType) => (
|
28
|
-
<UIElement {...props} type="repeat" props={{ search: false }} />
|
29
|
-
),
|
30
|
-
Define: (props: DefineType) => <UIElement {...props} type="define" />,
|
31
|
-
Include: (props: DefineType) => <UIInclude {...props} />,
|
32
|
-
Column: ({ type = 'column', ...props }: UserType) => (
|
33
|
-
<UIElement {...props} type="column" />
|
34
|
-
),
|
35
|
-
Input: (props: InputType) => <UIElement {...props} />,
|
36
|
-
Text: (props: InputType) => <UIElement {...props} type="text" />,
|
37
|
-
Textarea: (props: InputType) => <UIElement {...props} type="textarea" />,
|
38
|
-
Email: (props: InputType) => <UIElement {...props} type="email" />,
|
39
|
-
Button: (props: ButtonType) => <UIElement {...props} type="button" />,
|
40
|
-
Link: (props: LinkType) => <UIElement {...props} type="link" />,
|
41
|
-
Icon: (props: IconType) => <UIElement {...props} type="icon" transient />,
|
42
|
-
Output: (props: ContainerType) => <UIElement {...props} type="output" />,
|
43
|
-
Form: (props: ContainerType) => <UIElement {...props} type="form" />,
|
44
|
-
Crud: (props: ContainerType) => <UIElement {...props} type="crud" />,
|
45
|
-
View: (props: ContainerType) => (
|
46
|
-
<UIElement {...props} type="view" transient />
|
47
|
-
),
|
48
|
-
Bottom: (props: ContainerType) => <UIElement {...props} type="bottom" />,
|
49
|
-
Dialog: (props: ContainerType) => <UIElement {...props} type="dialog" />,
|
50
|
-
Content: (props: ContainerType) => <UIElement {...props} type="content" />,
|
51
|
-
Top: (props: ContainerType) => <UIElement {...props} type="top" />,
|
52
|
-
Card: (props: ContainerType) => <UIElement {...props} type="card" />,
|
53
|
-
Tab: (props: ContainerType) => <UIElement {...props} type="tab" />,
|
54
|
-
Tabs: (props: TabsType) => <UIElement {...props} type="tabs" />,
|
55
|
-
Step: (props: ContainerType) => (
|
56
|
-
<UIElement {...props} type="tab" layout="step" />
|
57
|
-
),
|
58
|
-
Stepper: (props: TabsType) => (
|
59
|
-
<UIElement {...props} type="tabs" layout="stepper" />
|
60
|
-
),
|
61
|
-
Money: (props: InputType) => <UIElement {...props} type="money" />,
|
62
|
-
Chart: (props: ChartType) => <UIElement {...props} type="chart" />,
|
63
|
-
Password: (props: InputType) => <UIElement {...props} type="password" />,
|
64
|
-
Complete: (props: InputType) => <UIElement {...props} type="complete" />,
|
65
|
-
Checkbox: (props: InputType) => <UIElement {...props} type="switch" />,
|
66
|
-
Switch: (props: InputType) => <UIElement {...props} type="switch" />,
|
67
|
-
Radio: (props: ListInputType) => <UIElement {...props} type="radio" />,
|
68
|
-
Select: (props: ListInputType) => <UIElement {...props} type="select" />,
|
69
|
-
Toggle: (props: ListInputType) => <UIElement {...props} type="toggle" />,
|
70
|
-
Entity: (props: ListInputType) => <UIElement {...props} type="entity" />,
|
71
|
-
Element: (props: ListInputType) => <UIElement {...props} type="element" />,
|
72
|
-
Quantity: (props: ListInputType) => <UIElement {...props} type="quantity" />,
|
73
|
-
Slider: (props: SliderType) => <UIElement {...props} type="slider" />,
|
74
|
-
SafeView: SafeView,
|
75
|
-
GestureView: GestureView,
|
76
|
-
};
|
77
|
-
export default UI;
|
1
|
+
import {
|
2
|
+
ListType,
|
3
|
+
UserType,
|
4
|
+
InputType,
|
5
|
+
ChartType,
|
6
|
+
ContainerType,
|
7
|
+
ListInputType,
|
8
|
+
TabsType,
|
9
|
+
DefineType,
|
10
|
+
ButtonType,
|
11
|
+
IconType,
|
12
|
+
LinkType,
|
13
|
+
SliderType,
|
14
|
+
} from 'react-crud-utils';
|
15
|
+
import UIElement from './UIElement';
|
16
|
+
|
17
|
+
import UIInclude from './core/UIInclude';
|
18
|
+
import SafeView from './core/SafeView';
|
19
|
+
import GestureView from './core/GestureView';
|
20
|
+
|
21
|
+
const UI = {
|
22
|
+
Order: (props: ListType) => <UIElement {...props} type="order" />,
|
23
|
+
List: (props: ListType) => <UIElement {...props} type="list" />,
|
24
|
+
Row: (props: UserType) => <UIElement {...props} type="row" />,
|
25
|
+
Value: (props: UserType) => <UIElement {...props} type="value" />,
|
26
|
+
Label: (props: UserType) => <UIElement {...props} type="label" />,
|
27
|
+
Repeat: (props: ListType) => (
|
28
|
+
<UIElement {...props} type="repeat" props={{ search: false }} />
|
29
|
+
),
|
30
|
+
Define: (props: DefineType) => <UIElement {...props} type="define" />,
|
31
|
+
Include: (props: DefineType) => <UIInclude {...props} />,
|
32
|
+
Column: ({ type = 'column', ...props }: UserType) => (
|
33
|
+
<UIElement {...props} type="column" />
|
34
|
+
),
|
35
|
+
Input: (props: InputType) => <UIElement {...props} />,
|
36
|
+
Text: (props: InputType) => <UIElement {...props} type="text" />,
|
37
|
+
Textarea: (props: InputType) => <UIElement {...props} type="textarea" />,
|
38
|
+
Email: (props: InputType) => <UIElement {...props} type="email" />,
|
39
|
+
Button: (props: ButtonType) => <UIElement {...props} type="button" />,
|
40
|
+
Link: (props: LinkType) => <UIElement {...props} type="link" />,
|
41
|
+
Icon: (props: IconType) => <UIElement {...props} type="icon" transient />,
|
42
|
+
Output: (props: ContainerType) => <UIElement {...props} type="output" />,
|
43
|
+
Form: (props: ContainerType) => <UIElement {...props} type="form" />,
|
44
|
+
Crud: (props: ContainerType) => <UIElement {...props} type="crud" />,
|
45
|
+
View: (props: ContainerType) => (
|
46
|
+
<UIElement {...props} type="view" transient />
|
47
|
+
),
|
48
|
+
Bottom: (props: ContainerType) => <UIElement {...props} type="bottom" />,
|
49
|
+
Dialog: (props: ContainerType) => <UIElement {...props} type="dialog" />,
|
50
|
+
Content: (props: ContainerType) => <UIElement {...props} type="content" />,
|
51
|
+
Top: (props: ContainerType) => <UIElement {...props} type="top" />,
|
52
|
+
Card: (props: ContainerType) => <UIElement {...props} type="card" />,
|
53
|
+
Tab: (props: ContainerType) => <UIElement {...props} type="tab" />,
|
54
|
+
Tabs: (props: TabsType) => <UIElement {...props} type="tabs" />,
|
55
|
+
Step: (props: ContainerType) => (
|
56
|
+
<UIElement {...props} type="tab" layout="step" />
|
57
|
+
),
|
58
|
+
Stepper: (props: TabsType) => (
|
59
|
+
<UIElement {...props} type="tabs" layout="stepper" />
|
60
|
+
),
|
61
|
+
Money: (props: InputType) => <UIElement {...props} type="money" />,
|
62
|
+
Chart: (props: ChartType) => <UIElement {...props} type="chart" />,
|
63
|
+
Password: (props: InputType) => <UIElement {...props} type="password" />,
|
64
|
+
Complete: (props: InputType) => <UIElement {...props} type="complete" />,
|
65
|
+
Checkbox: (props: InputType) => <UIElement {...props} type="switch" />,
|
66
|
+
Switch: (props: InputType) => <UIElement {...props} type="switch" />,
|
67
|
+
Radio: (props: ListInputType) => <UIElement {...props} type="radio" />,
|
68
|
+
Select: (props: ListInputType) => <UIElement {...props} type="select" />,
|
69
|
+
Toggle: (props: ListInputType) => <UIElement {...props} type="toggle" />,
|
70
|
+
Entity: (props: ListInputType) => <UIElement {...props} type="entity" />,
|
71
|
+
Element: (props: ListInputType) => <UIElement {...props} type="element" />,
|
72
|
+
Quantity: (props: ListInputType) => <UIElement {...props} type="quantity" />,
|
73
|
+
Slider: (props: SliderType) => <UIElement {...props} type="slider" />,
|
74
|
+
SafeView: SafeView,
|
75
|
+
GestureView: GestureView,
|
76
|
+
};
|
77
|
+
export default UI;
|
@@ -1,142 +1,142 @@
|
|
1
|
-
import React, { useState } from 'react';
|
2
|
-
import UIElement from './UIElement';
|
3
|
-
import { Crud, Scope, ScopeUtils, Utils } from 'react-crud-utils';
|
4
|
-
import { StyleSheet, View } from 'react-native';
|
5
|
-
|
6
|
-
interface UIChildrenType {
|
7
|
-
scope: Scope;
|
8
|
-
crud?: Crud;
|
9
|
-
validateScope?: String;
|
10
|
-
children?: any;
|
11
|
-
elements?: any;
|
12
|
-
transient?: boolean;
|
13
|
-
part?: string;
|
14
|
-
style?: any;
|
15
|
-
childProps?: any;
|
16
|
-
}
|
17
|
-
|
18
|
-
export default function UIChildren(props: UIChildrenType) {
|
19
|
-
let [scope] = useState(Utils.nvl(props.scope, ScopeUtils.create(props)));
|
20
|
-
let crud = Utils.nvl(props.crud, scope.crud);
|
21
|
-
let validateScope = Utils.nvl(props.validateScope, 'global');
|
22
|
-
let name = Utils.nvl(props.part, 'child');
|
23
|
-
|
24
|
-
if (scope.isInput()) {
|
25
|
-
return <></>;
|
26
|
-
}
|
27
|
-
|
28
|
-
let Paint = ({ child }: any) => {
|
29
|
-
if (!child) {
|
30
|
-
return <></>;
|
31
|
-
}
|
32
|
-
if (typeof child === 'string') {
|
33
|
-
return <>{child}</>;
|
34
|
-
}
|
35
|
-
|
36
|
-
let Custom = child.type;
|
37
|
-
let pps = { ...child.props };
|
38
|
-
|
39
|
-
delete pps.children;
|
40
|
-
|
41
|
-
if (typeof Custom === 'string') {
|
42
|
-
if (Utils.isEmpty(child.props.children)) {
|
43
|
-
return <Custom {...pps} />;
|
44
|
-
}
|
45
|
-
return (
|
46
|
-
<Custom {...pps}>
|
47
|
-
<UIChildren
|
48
|
-
transient
|
49
|
-
validateScope={validateScope}
|
50
|
-
{...child.props}
|
51
|
-
scope={scope}
|
52
|
-
crud={crud}
|
53
|
-
></UIChildren>
|
54
|
-
</Custom>
|
55
|
-
);
|
56
|
-
} else if (typeof Custom === 'function') {
|
57
|
-
return (
|
58
|
-
<Custom
|
59
|
-
validateScope={validateScope}
|
60
|
-
{...child.props}
|
61
|
-
parent={scope}
|
62
|
-
crud={crud}
|
63
|
-
></Custom>
|
64
|
-
);
|
65
|
-
}
|
66
|
-
|
67
|
-
if (!Utils.isEmpty(child.props?.children)) {
|
68
|
-
return (
|
69
|
-
<UIChildren
|
70
|
-
validateScope={validateScope}
|
71
|
-
{...child.props}
|
72
|
-
scope={scope}
|
73
|
-
crud={crud}
|
74
|
-
transient
|
75
|
-
></UIChildren>
|
76
|
-
);
|
77
|
-
}
|
78
|
-
return <></>;
|
79
|
-
};
|
80
|
-
|
81
|
-
const Draw = () => {
|
82
|
-
if (props.elements) {
|
83
|
-
return (
|
84
|
-
<>
|
85
|
-
{Object.entries(props.elements).map((t: any, k) => {
|
86
|
-
return <UIElement crud={crud} {...t[1]} />;
|
87
|
-
})}
|
88
|
-
</>
|
89
|
-
);
|
90
|
-
}
|
91
|
-
return (
|
92
|
-
<>
|
93
|
-
{React.Children.map(props.children, child => {
|
94
|
-
return <Paint child={child}></Paint>;
|
95
|
-
})}
|
96
|
-
</>
|
97
|
-
);
|
98
|
-
};
|
99
|
-
|
100
|
-
if (props.transient) {
|
101
|
-
return <Draw />;
|
102
|
-
}
|
103
|
-
|
104
|
-
if (Utils.isEmpty(props.children) && Utils.isEmpty(props.elements)) {
|
105
|
-
return <></>;
|
106
|
-
}
|
107
|
-
|
108
|
-
const getStyle = (part?: string) => {
|
109
|
-
let key = Utils.nvl(part, 'root');
|
110
|
-
let def = styles[key];
|
111
|
-
let css = {};
|
112
|
-
|
113
|
-
if (!Utils.isEmpty(props.style)) {
|
114
|
-
if (props.style?.push) {
|
115
|
-
Utils.each(props.style, s => {
|
116
|
-
if (s) {
|
117
|
-
css = { ...css, ...s };
|
118
|
-
}
|
119
|
-
});
|
120
|
-
} else {
|
121
|
-
css = { ...props.style };
|
122
|
-
}
|
123
|
-
}
|
124
|
-
return { ...def, ...css, ...scope.getStyle(part) };
|
125
|
-
};
|
126
|
-
|
127
|
-
if (props.transient) {
|
128
|
-
return <Draw />;
|
129
|
-
}
|
130
|
-
return (
|
131
|
-
<>
|
132
|
-
<View style={getStyle(name)}>
|
133
|
-
<Draw />
|
134
|
-
</View>
|
135
|
-
</>
|
136
|
-
);
|
137
|
-
}
|
138
|
-
|
139
|
-
const styles = StyleSheet.create({
|
140
|
-
child: { width: '100%' },
|
141
|
-
inner: { width: '100%' },
|
142
|
-
});
|
1
|
+
import React, { useState } from 'react';
|
2
|
+
import UIElement from './UIElement';
|
3
|
+
import { Crud, Scope, ScopeUtils, Utils } from 'react-crud-utils';
|
4
|
+
import { StyleSheet, View } from 'react-native';
|
5
|
+
|
6
|
+
interface UIChildrenType {
|
7
|
+
scope: Scope;
|
8
|
+
crud?: Crud;
|
9
|
+
validateScope?: String;
|
10
|
+
children?: any;
|
11
|
+
elements?: any;
|
12
|
+
transient?: boolean;
|
13
|
+
part?: string;
|
14
|
+
style?: any;
|
15
|
+
childProps?: any;
|
16
|
+
}
|
17
|
+
|
18
|
+
export default function UIChildren(props: UIChildrenType) {
|
19
|
+
let [scope] = useState(Utils.nvl(props.scope, ScopeUtils.create(props)));
|
20
|
+
let crud = Utils.nvl(props.crud, scope.crud);
|
21
|
+
let validateScope = Utils.nvl(props.validateScope, 'global');
|
22
|
+
let name = Utils.nvl(props.part, 'child');
|
23
|
+
|
24
|
+
if (scope.isInput()) {
|
25
|
+
return <></>;
|
26
|
+
}
|
27
|
+
|
28
|
+
let Paint = ({ child }: any) => {
|
29
|
+
if (!child) {
|
30
|
+
return <></>;
|
31
|
+
}
|
32
|
+
if (typeof child === 'string') {
|
33
|
+
return <>{child}</>;
|
34
|
+
}
|
35
|
+
|
36
|
+
let Custom = child.type;
|
37
|
+
let pps = { ...child.props };
|
38
|
+
|
39
|
+
delete pps.children;
|
40
|
+
|
41
|
+
if (typeof Custom === 'string') {
|
42
|
+
if (Utils.isEmpty(child.props.children)) {
|
43
|
+
return <Custom {...pps} />;
|
44
|
+
}
|
45
|
+
return (
|
46
|
+
<Custom {...pps}>
|
47
|
+
<UIChildren
|
48
|
+
transient
|
49
|
+
validateScope={validateScope}
|
50
|
+
{...child.props}
|
51
|
+
scope={scope}
|
52
|
+
crud={crud}
|
53
|
+
></UIChildren>
|
54
|
+
</Custom>
|
55
|
+
);
|
56
|
+
} else if (typeof Custom === 'function') {
|
57
|
+
return (
|
58
|
+
<Custom
|
59
|
+
validateScope={validateScope}
|
60
|
+
{...child.props}
|
61
|
+
parent={scope}
|
62
|
+
crud={crud}
|
63
|
+
></Custom>
|
64
|
+
);
|
65
|
+
}
|
66
|
+
|
67
|
+
if (!Utils.isEmpty(child.props?.children)) {
|
68
|
+
return (
|
69
|
+
<UIChildren
|
70
|
+
validateScope={validateScope}
|
71
|
+
{...child.props}
|
72
|
+
scope={scope}
|
73
|
+
crud={crud}
|
74
|
+
transient
|
75
|
+
></UIChildren>
|
76
|
+
);
|
77
|
+
}
|
78
|
+
return <></>;
|
79
|
+
};
|
80
|
+
|
81
|
+
const Draw = () => {
|
82
|
+
if (props.elements) {
|
83
|
+
return (
|
84
|
+
<>
|
85
|
+
{Object.entries(props.elements).map((t: any, k) => {
|
86
|
+
return <UIElement crud={crud} {...t[1]} />;
|
87
|
+
})}
|
88
|
+
</>
|
89
|
+
);
|
90
|
+
}
|
91
|
+
return (
|
92
|
+
<>
|
93
|
+
{React.Children.map(props.children, child => {
|
94
|
+
return <Paint child={child}></Paint>;
|
95
|
+
})}
|
96
|
+
</>
|
97
|
+
);
|
98
|
+
};
|
99
|
+
|
100
|
+
if (props.transient) {
|
101
|
+
return <Draw />;
|
102
|
+
}
|
103
|
+
|
104
|
+
if (Utils.isEmpty(props.children) && Utils.isEmpty(props.elements)) {
|
105
|
+
return <></>;
|
106
|
+
}
|
107
|
+
|
108
|
+
const getStyle = (part?: string) => {
|
109
|
+
let key = Utils.nvl(part, 'root');
|
110
|
+
let def = styles[key];
|
111
|
+
let css = {};
|
112
|
+
|
113
|
+
if (!Utils.isEmpty(props.style)) {
|
114
|
+
if (props.style?.push) {
|
115
|
+
Utils.each(props.style, s => {
|
116
|
+
if (s) {
|
117
|
+
css = { ...css, ...s };
|
118
|
+
}
|
119
|
+
});
|
120
|
+
} else {
|
121
|
+
css = { ...props.style };
|
122
|
+
}
|
123
|
+
}
|
124
|
+
return { ...def, ...css, ...scope.getStyle(part) };
|
125
|
+
};
|
126
|
+
|
127
|
+
if (props.transient) {
|
128
|
+
return <Draw />;
|
129
|
+
}
|
130
|
+
return (
|
131
|
+
<>
|
132
|
+
<View style={getStyle(name)}>
|
133
|
+
<Draw />
|
134
|
+
</View>
|
135
|
+
</>
|
136
|
+
);
|
137
|
+
}
|
138
|
+
|
139
|
+
const styles = StyleSheet.create({
|
140
|
+
child: { width: '100%' },
|
141
|
+
inner: { width: '100%' },
|
142
|
+
});
|
@@ -1,14 +1,14 @@
|
|
1
|
-
import { ChildType } from 'react-crud-utils';
|
2
|
-
import AutoComplete from './core/UIAutoComplete';
|
3
|
-
|
4
|
-
export default function UIComplete({
|
5
|
-
defaultsInput,
|
6
|
-
defaultsUI,
|
7
|
-
scope,
|
8
|
-
}: ChildType) {
|
9
|
-
return (
|
10
|
-
<>
|
11
|
-
<AutoComplete {...defaultsInput} {...defaultsUI} />
|
12
|
-
</>
|
13
|
-
);
|
14
|
-
}
|
1
|
+
import { ChildType } from 'react-crud-utils';
|
2
|
+
import AutoComplete from './core/UIAutoComplete';
|
3
|
+
|
4
|
+
export default function UIComplete({
|
5
|
+
defaultsInput,
|
6
|
+
defaultsUI,
|
7
|
+
scope,
|
8
|
+
}: ChildType) {
|
9
|
+
return (
|
10
|
+
<>
|
11
|
+
<AutoComplete {...defaultsInput} {...defaultsUI} />
|
12
|
+
</>
|
13
|
+
);
|
14
|
+
}
|