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