react-crud-mobile 1.0.242 → 1.0.244
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 +6 -2
- 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 +6 -2
- package/dist/react-crud-mobile.esm.js.map +1 -1
- package/package.json +68 -68
- package/src/elements/UI.tsx +61 -61
- package/src/elements/UIChildren.tsx +126 -126
- package/src/elements/UIComplete.tsx +14 -14
- package/src/elements/UIElement.tsx +453 -453
- package/src/elements/UITag.tsx +13 -13
- package/src/elements/charts/ElChart.tsx +10 -10
- package/src/elements/core/UIInclude.tsx +40 -40
- package/src/elements/core/UIInput.tsx +56 -56
- package/src/elements/core/UIList.tsx +61 -61
- package/src/elements/core/UIListRow.tsx +29 -29
- package/src/elements/core/UISelect.tsx +113 -113
- package/src/elements/core/UIToggle.tsx +91 -85
- package/src/elements/index.ts +1 -1
- package/src/elements/tabs/ElTabs.tsx +178 -178
- package/src/index.ts +1 -1
package/src/elements/UI.tsx
CHANGED
|
@@ -1,61 +1,61 @@
|
|
|
1
|
-
import { ListType } from 'react-crud-utils';
|
|
2
|
-
import { UserType } from 'react-crud-utils';
|
|
3
|
-
import { InputType } from 'react-crud-utils';
|
|
4
|
-
import { ChartType } from 'react-crud-utils';
|
|
5
|
-
import { ContainerType } from 'react-crud-utils';
|
|
6
|
-
import { ListInputType } from 'react-crud-utils';
|
|
7
|
-
import UIElement from './UIElement';
|
|
8
|
-
import { TabsType } from 'react-crud-utils';
|
|
9
|
-
import { DefineType } from 'react-crud-utils';
|
|
10
|
-
import { ButtonType } from 'react-crud-utils';
|
|
11
|
-
import { LinkType } from 'react-crud-utils';
|
|
12
|
-
import UIInclude from './core/UIInclude';
|
|
13
|
-
|
|
14
|
-
const UI = {
|
|
15
|
-
List: (props: ListType) => <UIElement {...props} type="list" />,
|
|
16
|
-
Value: (props: UserType) => <UIElement {...props} type="value" />,
|
|
17
|
-
Label: (props: UserType) => <UIElement {...props} type="label" />,
|
|
18
|
-
Repeat: (props: ListType) => <UIElement {...props} type="repeat" />,
|
|
19
|
-
Define: (props: DefineType) => <UIElement {...props} type="define" />,
|
|
20
|
-
Include: (props: DefineType) => <UIInclude {...props} />,
|
|
21
|
-
Column: ({ type = 'column', ...props }: UserType) => (
|
|
22
|
-
<UIElement {...props} type="column" />
|
|
23
|
-
),
|
|
24
|
-
Input: (props: InputType) => <UIElement {...props} />,
|
|
25
|
-
Text: (props: InputType) => <UIElement {...props} type="text" />,
|
|
26
|
-
Email: (props: InputType) => <UIElement {...props} type="email" />,
|
|
27
|
-
Button: (props: ButtonType) => <UIElement {...props} type="button" />,
|
|
28
|
-
Link: (props: LinkType) => <UIElement {...props} type="link" />,
|
|
29
|
-
Icon: (props: ButtonType) => <UIElement {...props} type="icon" />,
|
|
30
|
-
Output: (props: ContainerType) => <UIElement {...props} type="output" />,
|
|
31
|
-
Form: (props: ContainerType) => <UIElement {...props} type="form" />,
|
|
32
|
-
Crud: (props: ContainerType) => <UIElement {...props} type="crud" />,
|
|
33
|
-
View: (props: ContainerType) => (
|
|
34
|
-
<UIElement {...props} type="view" transient />
|
|
35
|
-
),
|
|
36
|
-
Bottom: (props: ContainerType) => <UIElement {...props} type="bottom" />,
|
|
37
|
-
Dialog: (props: ContainerType) => <UIElement {...props} type="dialog" />,
|
|
38
|
-
Content: (props: ContainerType) => <UIElement {...props} type="content" />,
|
|
39
|
-
Top: (props: ContainerType) => <UIElement {...props} type="top" />,
|
|
40
|
-
Card: (props: ContainerType) => <UIElement {...props} type="card" />,
|
|
41
|
-
Tab: (props: ContainerType) => <UIElement {...props} type="tab" />,
|
|
42
|
-
Tabs: (props: TabsType) => <UIElement {...props} type="tabs" />,
|
|
43
|
-
Step: (props: ContainerType) => (
|
|
44
|
-
<UIElement {...props} type="tab" layout="step" />
|
|
45
|
-
),
|
|
46
|
-
Stepper: (props: TabsType) => (
|
|
47
|
-
<UIElement {...props} type="tabs" layout="stepper" />
|
|
48
|
-
),
|
|
49
|
-
Money: (props: InputType) => <UIElement {...props} type="money" />,
|
|
50
|
-
Chart: (props: ChartType) => <UIElement {...props} type="chart" />,
|
|
51
|
-
Password: (props: InputType) => <UIElement {...props} type="password" />,
|
|
52
|
-
Complete: (props: InputType) => <UIElement {...props} type="complete" />,
|
|
53
|
-
Checkbox: (props: InputType) => <UIElement {...props} type="switch" />,
|
|
54
|
-
Switch: (props: InputType) => <UIElement {...props} type="switch" />,
|
|
55
|
-
Radio: (props: ListInputType) => <UIElement {...props} type="radio" />,
|
|
56
|
-
Select: (props: ListInputType) => <UIElement {...props} type="select" />,
|
|
57
|
-
Toggle: (props: ListInputType) => <UIElement {...props} type="toggle" />,
|
|
58
|
-
Entity: (props: ListInputType) => <UIElement {...props} type="entity" />,
|
|
59
|
-
Element: (props: ListInputType) => <UIElement {...props} type="element" />,
|
|
60
|
-
};
|
|
61
|
-
export default UI;
|
|
1
|
+
import { ListType } from 'react-crud-utils';
|
|
2
|
+
import { UserType } from 'react-crud-utils';
|
|
3
|
+
import { InputType } from 'react-crud-utils';
|
|
4
|
+
import { ChartType } from 'react-crud-utils';
|
|
5
|
+
import { ContainerType } from 'react-crud-utils';
|
|
6
|
+
import { ListInputType } from 'react-crud-utils';
|
|
7
|
+
import UIElement from './UIElement';
|
|
8
|
+
import { TabsType } from 'react-crud-utils';
|
|
9
|
+
import { DefineType } from 'react-crud-utils';
|
|
10
|
+
import { ButtonType } from 'react-crud-utils';
|
|
11
|
+
import { LinkType } from 'react-crud-utils';
|
|
12
|
+
import UIInclude from './core/UIInclude';
|
|
13
|
+
|
|
14
|
+
const UI = {
|
|
15
|
+
List: (props: ListType) => <UIElement {...props} type="list" />,
|
|
16
|
+
Value: (props: UserType) => <UIElement {...props} type="value" />,
|
|
17
|
+
Label: (props: UserType) => <UIElement {...props} type="label" />,
|
|
18
|
+
Repeat: (props: ListType) => <UIElement {...props} type="repeat" />,
|
|
19
|
+
Define: (props: DefineType) => <UIElement {...props} type="define" />,
|
|
20
|
+
Include: (props: DefineType) => <UIInclude {...props} />,
|
|
21
|
+
Column: ({ type = 'column', ...props }: UserType) => (
|
|
22
|
+
<UIElement {...props} type="column" />
|
|
23
|
+
),
|
|
24
|
+
Input: (props: InputType) => <UIElement {...props} />,
|
|
25
|
+
Text: (props: InputType) => <UIElement {...props} type="text" />,
|
|
26
|
+
Email: (props: InputType) => <UIElement {...props} type="email" />,
|
|
27
|
+
Button: (props: ButtonType) => <UIElement {...props} type="button" />,
|
|
28
|
+
Link: (props: LinkType) => <UIElement {...props} type="link" />,
|
|
29
|
+
Icon: (props: ButtonType) => <UIElement {...props} type="icon" />,
|
|
30
|
+
Output: (props: ContainerType) => <UIElement {...props} type="output" />,
|
|
31
|
+
Form: (props: ContainerType) => <UIElement {...props} type="form" />,
|
|
32
|
+
Crud: (props: ContainerType) => <UIElement {...props} type="crud" />,
|
|
33
|
+
View: (props: ContainerType) => (
|
|
34
|
+
<UIElement {...props} type="view" transient />
|
|
35
|
+
),
|
|
36
|
+
Bottom: (props: ContainerType) => <UIElement {...props} type="bottom" />,
|
|
37
|
+
Dialog: (props: ContainerType) => <UIElement {...props} type="dialog" />,
|
|
38
|
+
Content: (props: ContainerType) => <UIElement {...props} type="content" />,
|
|
39
|
+
Top: (props: ContainerType) => <UIElement {...props} type="top" />,
|
|
40
|
+
Card: (props: ContainerType) => <UIElement {...props} type="card" />,
|
|
41
|
+
Tab: (props: ContainerType) => <UIElement {...props} type="tab" />,
|
|
42
|
+
Tabs: (props: TabsType) => <UIElement {...props} type="tabs" />,
|
|
43
|
+
Step: (props: ContainerType) => (
|
|
44
|
+
<UIElement {...props} type="tab" layout="step" />
|
|
45
|
+
),
|
|
46
|
+
Stepper: (props: TabsType) => (
|
|
47
|
+
<UIElement {...props} type="tabs" layout="stepper" />
|
|
48
|
+
),
|
|
49
|
+
Money: (props: InputType) => <UIElement {...props} type="money" />,
|
|
50
|
+
Chart: (props: ChartType) => <UIElement {...props} type="chart" />,
|
|
51
|
+
Password: (props: InputType) => <UIElement {...props} type="password" />,
|
|
52
|
+
Complete: (props: InputType) => <UIElement {...props} type="complete" />,
|
|
53
|
+
Checkbox: (props: InputType) => <UIElement {...props} type="switch" />,
|
|
54
|
+
Switch: (props: InputType) => <UIElement {...props} type="switch" />,
|
|
55
|
+
Radio: (props: ListInputType) => <UIElement {...props} type="radio" />,
|
|
56
|
+
Select: (props: ListInputType) => <UIElement {...props} type="select" />,
|
|
57
|
+
Toggle: (props: ListInputType) => <UIElement {...props} type="toggle" />,
|
|
58
|
+
Entity: (props: ListInputType) => <UIElement {...props} type="entity" />,
|
|
59
|
+
Element: (props: ListInputType) => <UIElement {...props} type="element" />,
|
|
60
|
+
};
|
|
61
|
+
export default UI;
|
|
@@ -1,126 +1,126 @@
|
|
|
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
|
-
childProps?: any;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
export default function UIChildren(props: UIChildrenType) {
|
|
18
|
-
let [scope] = useState(Utils.nvl(props.scope, ScopeUtils.create(props)));
|
|
19
|
-
let crud = Utils.nvl(props.crud, scope.crud);
|
|
20
|
-
let validateScope = Utils.nvl(props.validateScope, 'global');
|
|
21
|
-
let name = Utils.nvl(props.part, 'child');
|
|
22
|
-
|
|
23
|
-
if (scope.isInput()) {
|
|
24
|
-
return <></>;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
let Paint = ({ child }: any) => {
|
|
28
|
-
if (!child) {
|
|
29
|
-
return <></>;
|
|
30
|
-
}
|
|
31
|
-
if (typeof child === 'string') {
|
|
32
|
-
return <>{child}</>;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
let Custom = child.type;
|
|
36
|
-
let pps = { ...child.props };
|
|
37
|
-
|
|
38
|
-
delete pps.children;
|
|
39
|
-
|
|
40
|
-
if (typeof Custom === 'string') {
|
|
41
|
-
if (Utils.isEmpty(child.props.children)) {
|
|
42
|
-
return <Custom {...pps} />;
|
|
43
|
-
}
|
|
44
|
-
return (
|
|
45
|
-
<Custom {...pps}>
|
|
46
|
-
<UIChildren
|
|
47
|
-
transient
|
|
48
|
-
validateScope={validateScope}
|
|
49
|
-
{...child.props}
|
|
50
|
-
scope={scope}
|
|
51
|
-
crud={crud}
|
|
52
|
-
></UIChildren>
|
|
53
|
-
</Custom>
|
|
54
|
-
);
|
|
55
|
-
} else if (typeof Custom === 'function') {
|
|
56
|
-
return (
|
|
57
|
-
<Custom
|
|
58
|
-
validateScope={validateScope}
|
|
59
|
-
{...child.props}
|
|
60
|
-
parent={scope}
|
|
61
|
-
crud={crud}
|
|
62
|
-
></Custom>
|
|
63
|
-
);
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
if (!Utils.isEmpty(child.props.children)) {
|
|
67
|
-
return (
|
|
68
|
-
<UIChildren
|
|
69
|
-
validateScope={validateScope}
|
|
70
|
-
{...child.props}
|
|
71
|
-
scope={scope}
|
|
72
|
-
crud={crud}
|
|
73
|
-
transient
|
|
74
|
-
></UIChildren>
|
|
75
|
-
);
|
|
76
|
-
}
|
|
77
|
-
return <></>;
|
|
78
|
-
};
|
|
79
|
-
|
|
80
|
-
const Draw = () => {
|
|
81
|
-
if (props.elements) {
|
|
82
|
-
return (
|
|
83
|
-
<>
|
|
84
|
-
{Object.entries(props.elements).map((t: any, k) => {
|
|
85
|
-
return <UIElement crud={crud} {...t[1]} />;
|
|
86
|
-
})}
|
|
87
|
-
</>
|
|
88
|
-
);
|
|
89
|
-
}
|
|
90
|
-
return (
|
|
91
|
-
<>
|
|
92
|
-
{React.Children.map(props.children, child => {
|
|
93
|
-
return <Paint child={child}></Paint>;
|
|
94
|
-
})}
|
|
95
|
-
</>
|
|
96
|
-
);
|
|
97
|
-
};
|
|
98
|
-
|
|
99
|
-
if (props.transient) {
|
|
100
|
-
return <Draw />;
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
if (Utils.isEmpty(props.children) && Utils.isEmpty(props.elements)) {
|
|
104
|
-
return <></>;
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
const getStyle = (part?: string) => {
|
|
108
|
-
let key = Utils.nvl(part, 'root');
|
|
109
|
-
let def = styles[key];
|
|
110
|
-
|
|
111
|
-
return { ...def, ...scope.getStyle(part) };
|
|
112
|
-
};
|
|
113
|
-
|
|
114
|
-
return (
|
|
115
|
-
<>
|
|
116
|
-
<View style={getStyle(name)}>
|
|
117
|
-
<Draw />
|
|
118
|
-
</View>
|
|
119
|
-
</>
|
|
120
|
-
);
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
const styles = StyleSheet.create({
|
|
124
|
-
child: { width: '100%' },
|
|
125
|
-
inner: { width: '100%' },
|
|
126
|
-
});
|
|
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
|
+
childProps?: any;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export default function UIChildren(props: UIChildrenType) {
|
|
18
|
+
let [scope] = useState(Utils.nvl(props.scope, ScopeUtils.create(props)));
|
|
19
|
+
let crud = Utils.nvl(props.crud, scope.crud);
|
|
20
|
+
let validateScope = Utils.nvl(props.validateScope, 'global');
|
|
21
|
+
let name = Utils.nvl(props.part, 'child');
|
|
22
|
+
|
|
23
|
+
if (scope.isInput()) {
|
|
24
|
+
return <></>;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
let Paint = ({ child }: any) => {
|
|
28
|
+
if (!child) {
|
|
29
|
+
return <></>;
|
|
30
|
+
}
|
|
31
|
+
if (typeof child === 'string') {
|
|
32
|
+
return <>{child}</>;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
let Custom = child.type;
|
|
36
|
+
let pps = { ...child.props };
|
|
37
|
+
|
|
38
|
+
delete pps.children;
|
|
39
|
+
|
|
40
|
+
if (typeof Custom === 'string') {
|
|
41
|
+
if (Utils.isEmpty(child.props.children)) {
|
|
42
|
+
return <Custom {...pps} />;
|
|
43
|
+
}
|
|
44
|
+
return (
|
|
45
|
+
<Custom {...pps}>
|
|
46
|
+
<UIChildren
|
|
47
|
+
transient
|
|
48
|
+
validateScope={validateScope}
|
|
49
|
+
{...child.props}
|
|
50
|
+
scope={scope}
|
|
51
|
+
crud={crud}
|
|
52
|
+
></UIChildren>
|
|
53
|
+
</Custom>
|
|
54
|
+
);
|
|
55
|
+
} else if (typeof Custom === 'function') {
|
|
56
|
+
return (
|
|
57
|
+
<Custom
|
|
58
|
+
validateScope={validateScope}
|
|
59
|
+
{...child.props}
|
|
60
|
+
parent={scope}
|
|
61
|
+
crud={crud}
|
|
62
|
+
></Custom>
|
|
63
|
+
);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
if (!Utils.isEmpty(child.props.children)) {
|
|
67
|
+
return (
|
|
68
|
+
<UIChildren
|
|
69
|
+
validateScope={validateScope}
|
|
70
|
+
{...child.props}
|
|
71
|
+
scope={scope}
|
|
72
|
+
crud={crud}
|
|
73
|
+
transient
|
|
74
|
+
></UIChildren>
|
|
75
|
+
);
|
|
76
|
+
}
|
|
77
|
+
return <></>;
|
|
78
|
+
};
|
|
79
|
+
|
|
80
|
+
const Draw = () => {
|
|
81
|
+
if (props.elements) {
|
|
82
|
+
return (
|
|
83
|
+
<>
|
|
84
|
+
{Object.entries(props.elements).map((t: any, k) => {
|
|
85
|
+
return <UIElement crud={crud} {...t[1]} />;
|
|
86
|
+
})}
|
|
87
|
+
</>
|
|
88
|
+
);
|
|
89
|
+
}
|
|
90
|
+
return (
|
|
91
|
+
<>
|
|
92
|
+
{React.Children.map(props.children, child => {
|
|
93
|
+
return <Paint child={child}></Paint>;
|
|
94
|
+
})}
|
|
95
|
+
</>
|
|
96
|
+
);
|
|
97
|
+
};
|
|
98
|
+
|
|
99
|
+
if (props.transient) {
|
|
100
|
+
return <Draw />;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
if (Utils.isEmpty(props.children) && Utils.isEmpty(props.elements)) {
|
|
104
|
+
return <></>;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
const getStyle = (part?: string) => {
|
|
108
|
+
let key = Utils.nvl(part, 'root');
|
|
109
|
+
let def = styles[key];
|
|
110
|
+
|
|
111
|
+
return { ...def, ...scope.getStyle(part) };
|
|
112
|
+
};
|
|
113
|
+
|
|
114
|
+
return (
|
|
115
|
+
<>
|
|
116
|
+
<View style={getStyle(name)}>
|
|
117
|
+
<Draw />
|
|
118
|
+
</View>
|
|
119
|
+
</>
|
|
120
|
+
);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
const styles = StyleSheet.create({
|
|
124
|
+
child: { width: '100%' },
|
|
125
|
+
inner: { width: '100%' },
|
|
126
|
+
});
|
|
@@ -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
|
+
}
|