react-crud-mobile 1.0.71 → 1.0.73
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/elements/UIChildren.d.ts +2 -2
- package/dist/react-crud-mobile.cjs.development.js +81 -86
- 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 +81 -86
- package/dist/react-crud-mobile.esm.js.map +1 -1
- package/package.json +66 -66
- package/src/elements/UI.tsx +57 -57
- package/src/elements/UIChildren.tsx +114 -117
- package/src/elements/UIComplete.tsx +14 -14
- package/src/elements/UIElement.tsx +408 -418
- 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/core/Input.tsx +40 -40
- 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
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
import ElRepeatRow from './ElRepeatRow';
|
|
2
|
-
import { ChildType, Scope } from 'react-crud-utils';
|
|
3
|
-
|
|
4
|
-
export default function ElRepeat(props: ChildType) {
|
|
5
|
-
let scope: Scope = props.scope;
|
|
6
|
-
let items: any = scope.getItems();
|
|
7
|
-
|
|
8
|
-
return (
|
|
9
|
-
<div
|
|
10
|
-
className={scope.getStyleClass('inner')}
|
|
11
|
-
style={scope.getStyle('inner')}
|
|
12
|
-
>
|
|
13
|
-
{items.map((row: any, i: number) => (
|
|
14
|
-
<ElRepeatRow
|
|
15
|
-
{...props}
|
|
16
|
-
key={'r' + i}
|
|
17
|
-
scope={scope}
|
|
18
|
-
value={row}
|
|
19
|
-
index={i}
|
|
20
|
-
/>
|
|
21
|
-
))}
|
|
22
|
-
</div>
|
|
23
|
-
);
|
|
24
|
-
}
|
|
1
|
+
import ElRepeatRow from './ElRepeatRow';
|
|
2
|
+
import { ChildType, Scope } from 'react-crud-utils';
|
|
3
|
+
|
|
4
|
+
export default function ElRepeat(props: ChildType) {
|
|
5
|
+
let scope: Scope = props.scope;
|
|
6
|
+
let items: any = scope.getItems();
|
|
7
|
+
|
|
8
|
+
return (
|
|
9
|
+
<div
|
|
10
|
+
className={scope.getStyleClass('inner')}
|
|
11
|
+
style={scope.getStyle('inner')}
|
|
12
|
+
>
|
|
13
|
+
{items.map((row: any, i: number) => (
|
|
14
|
+
<ElRepeatRow
|
|
15
|
+
{...props}
|
|
16
|
+
key={'r' + i}
|
|
17
|
+
scope={scope}
|
|
18
|
+
value={row}
|
|
19
|
+
index={i}
|
|
20
|
+
/>
|
|
21
|
+
))}
|
|
22
|
+
</div>
|
|
23
|
+
);
|
|
24
|
+
}
|
|
@@ -1,40 +1,40 @@
|
|
|
1
|
-
import React, { useState } from "react";
|
|
2
|
-
import UIChildren from "../UIChildren";
|
|
3
|
-
import { CrudUtils, RowType, Scope } from "react-crud-utils";
|
|
4
|
-
|
|
5
|
-
export default function ElRepeatRow(props: RowType) {
|
|
6
|
-
let value = props.value;
|
|
7
|
-
let scope = props.scope;
|
|
8
|
-
let index = props.index;
|
|
9
|
-
|
|
10
|
-
let row = CrudUtils.create("row", {
|
|
11
|
-
index,
|
|
12
|
-
row: true,
|
|
13
|
-
itemVar: scope.original.itemVar,
|
|
14
|
-
parent: scope.crudSearch,
|
|
15
|
-
data: value,
|
|
16
|
-
});
|
|
17
|
-
|
|
18
|
-
let [rowScope] = useState(new Scope(scope.original, scope, row));
|
|
19
|
-
|
|
20
|
-
let getRowStyleClass = () => {
|
|
21
|
-
let s = rowScope.getStyleClass("row");
|
|
22
|
-
|
|
23
|
-
s = s + " ui-repeat-row-";
|
|
24
|
-
|
|
25
|
-
if (index % 2 == 0) {
|
|
26
|
-
s = s + "even";
|
|
27
|
-
} else {
|
|
28
|
-
s = s + "odd";
|
|
29
|
-
}
|
|
30
|
-
return s;
|
|
31
|
-
};
|
|
32
|
-
|
|
33
|
-
return (
|
|
34
|
-
<div className={getRowStyleClass()} style={rowScope.getStyle("row")}>
|
|
35
|
-
<UIChildren transient {...props} crud={row}>
|
|
36
|
-
{props.children}
|
|
37
|
-
</UIChildren>
|
|
38
|
-
</div>
|
|
39
|
-
);
|
|
40
|
-
}
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
import UIChildren from "../UIChildren";
|
|
3
|
+
import { CrudUtils, RowType, Scope } from "react-crud-utils";
|
|
4
|
+
|
|
5
|
+
export default function ElRepeatRow(props: RowType) {
|
|
6
|
+
let value = props.value;
|
|
7
|
+
let scope = props.scope;
|
|
8
|
+
let index = props.index;
|
|
9
|
+
|
|
10
|
+
let row = CrudUtils.create("row", {
|
|
11
|
+
index,
|
|
12
|
+
row: true,
|
|
13
|
+
itemVar: scope.original.itemVar,
|
|
14
|
+
parent: scope.crudSearch,
|
|
15
|
+
data: value,
|
|
16
|
+
});
|
|
17
|
+
|
|
18
|
+
let [rowScope] = useState(new Scope(scope.original, scope, row));
|
|
19
|
+
|
|
20
|
+
let getRowStyleClass = () => {
|
|
21
|
+
let s = rowScope.getStyleClass("row");
|
|
22
|
+
|
|
23
|
+
s = s + " ui-repeat-row-";
|
|
24
|
+
|
|
25
|
+
if (index % 2 == 0) {
|
|
26
|
+
s = s + "even";
|
|
27
|
+
} else {
|
|
28
|
+
s = s + "odd";
|
|
29
|
+
}
|
|
30
|
+
return s;
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
return (
|
|
34
|
+
<div className={getRowStyleClass()} style={rowScope.getStyle("row")}>
|
|
35
|
+
<UIChildren transient {...props} crud={row}>
|
|
36
|
+
{props.children}
|
|
37
|
+
</UIChildren>
|
|
38
|
+
</div>
|
|
39
|
+
);
|
|
40
|
+
}
|
package/src/elements/index.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { default as UI } from "./UI";
|
|
1
|
+
export { default as UI } from "./UI";
|
|
@@ -1,178 +1,178 @@
|
|
|
1
|
-
import React, { useState, useEffect } from 'react';
|
|
2
|
-
import UIChildren from '../UIChildren';
|
|
3
|
-
import UI from '../UI';
|
|
4
|
-
|
|
5
|
-
import Ionicons from '@expo/vector-icons/Ionicons';
|
|
6
|
-
import { ChildType, CrudUtils, Utils } from 'react-crud-utils';
|
|
7
|
-
|
|
8
|
-
export default function ElTabs(props: ChildType) {
|
|
9
|
-
let scope = props.scope;
|
|
10
|
-
let [selectedIndex, setSelectedIndex]: any = useState(0);
|
|
11
|
-
let element = scope.original;
|
|
12
|
-
let items = scope.getItems();
|
|
13
|
-
let counter = 0;
|
|
14
|
-
|
|
15
|
-
let tabs: any = [];
|
|
16
|
-
let [selected, setSelected]: any = useState(null);
|
|
17
|
-
|
|
18
|
-
const onChangeTab = (tab: any, validate = true) => {
|
|
19
|
-
if (tab) {
|
|
20
|
-
scope.execute({
|
|
21
|
-
event: {
|
|
22
|
-
validate,
|
|
23
|
-
validateScope: element.validateScope,
|
|
24
|
-
action: () => {
|
|
25
|
-
scope.changeValue(tab.data);
|
|
26
|
-
|
|
27
|
-
selected = tab;
|
|
28
|
-
selectedIndex = tab.index;
|
|
29
|
-
|
|
30
|
-
setSelectedIndex(selectedIndex);
|
|
31
|
-
setSelected(tab);
|
|
32
|
-
},
|
|
33
|
-
},
|
|
34
|
-
});
|
|
35
|
-
}
|
|
36
|
-
};
|
|
37
|
-
|
|
38
|
-
const getStyleClass = (t: any) => {
|
|
39
|
-
let s = 'ui-tabs-item ui-click';
|
|
40
|
-
|
|
41
|
-
if (selected?.index === t.index) {
|
|
42
|
-
s = s + ' ui-tab-selected';
|
|
43
|
-
}
|
|
44
|
-
return s;
|
|
45
|
-
};
|
|
46
|
-
|
|
47
|
-
const addTab = (child: any, item: any) => {
|
|
48
|
-
let original = { ...child.props };
|
|
49
|
-
|
|
50
|
-
if (!item) {
|
|
51
|
-
item = scope.crud.data;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
let crudTab = CrudUtils.create('tabs', {
|
|
55
|
-
data: item,
|
|
56
|
-
changed: item,
|
|
57
|
-
parent: scope.crud,
|
|
58
|
-
});
|
|
59
|
-
|
|
60
|
-
let element = Utils.resolve(original, crudTab);
|
|
61
|
-
|
|
62
|
-
if (element.rendered === false) {
|
|
63
|
-
return;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
tabs.push({
|
|
67
|
-
...element,
|
|
68
|
-
child,
|
|
69
|
-
element,
|
|
70
|
-
original,
|
|
71
|
-
index: counter++,
|
|
72
|
-
data: item,
|
|
73
|
-
});
|
|
74
|
-
};
|
|
75
|
-
|
|
76
|
-
React.Children.map(props.children, (child, index) => {
|
|
77
|
-
if (Utils.isEmpty(items)) {
|
|
78
|
-
addTab(child, {});
|
|
79
|
-
} else {
|
|
80
|
-
for (const i in items) {
|
|
81
|
-
let o = items[i];
|
|
82
|
-
|
|
83
|
-
addTab(child, o);
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
});
|
|
87
|
-
|
|
88
|
-
if (!selected) {
|
|
89
|
-
onChangeTab(tabs[selectedIndex], false);
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
const nav = (i: any) => {
|
|
93
|
-
let t = tabs[selectedIndex + i];
|
|
94
|
-
|
|
95
|
-
onChangeTab(t);
|
|
96
|
-
};
|
|
97
|
-
|
|
98
|
-
const previous = () => {
|
|
99
|
-
nav(-1);
|
|
100
|
-
};
|
|
101
|
-
|
|
102
|
-
const next = () => {
|
|
103
|
-
nav(1);
|
|
104
|
-
};
|
|
105
|
-
|
|
106
|
-
let isStepper = element.layout === 'stepper';
|
|
107
|
-
|
|
108
|
-
return (
|
|
109
|
-
<div
|
|
110
|
-
className={scope.getStyleClass('inner')}
|
|
111
|
-
style={scope.getStyle('inner')}
|
|
112
|
-
>
|
|
113
|
-
<div className="ui-tabs-content">
|
|
114
|
-
<div className="ui-tabs-items">
|
|
115
|
-
{tabs.map((t: any, i: number) => (
|
|
116
|
-
<div
|
|
117
|
-
key={Utils.key(element.id, 'tab', i)}
|
|
118
|
-
className={getStyleClass(t)}
|
|
119
|
-
onClick={() => {
|
|
120
|
-
onChangeTab(t);
|
|
121
|
-
}}
|
|
122
|
-
>
|
|
123
|
-
{isStepper && <div className="ui-tab-item-divisor" />}
|
|
124
|
-
<div className="ui-tab-item-inner">
|
|
125
|
-
{isStepper && <div className="ui-step-line" />}
|
|
126
|
-
<div className="ui-tab-item-label">
|
|
127
|
-
{isStepper ? t.index + 1 : t.label}
|
|
128
|
-
</div>
|
|
129
|
-
</div>
|
|
130
|
-
</div>
|
|
131
|
-
))}
|
|
132
|
-
</div>
|
|
133
|
-
{selected && (
|
|
134
|
-
<>
|
|
135
|
-
{isStepper && <div className="ui-tabs-label">{selected.label}</div>}
|
|
136
|
-
<div className="ui-tabs-area">
|
|
137
|
-
<UIChildren {...props} scope={scope}>
|
|
138
|
-
{selected.child}
|
|
139
|
-
</UIChildren>
|
|
140
|
-
</div>
|
|
141
|
-
{element.layout === 'stepper' && (
|
|
142
|
-
<div className="ui-tabs-actions">
|
|
143
|
-
<UI.Output space={6} layout="left">
|
|
144
|
-
<UI.Include
|
|
145
|
-
{...props}
|
|
146
|
-
transient
|
|
147
|
-
name="left"
|
|
148
|
-
default={
|
|
149
|
-
<UI.Button
|
|
150
|
-
rendered={selectedIndex > 0}
|
|
151
|
-
icon={<Ionicons />}
|
|
152
|
-
click={previous}
|
|
153
|
-
/>
|
|
154
|
-
}
|
|
155
|
-
/>
|
|
156
|
-
</UI.Output>
|
|
157
|
-
<UI.Output space={6} layout="right">
|
|
158
|
-
<UI.Include
|
|
159
|
-
{...props}
|
|
160
|
-
transient
|
|
161
|
-
name="right"
|
|
162
|
-
default={
|
|
163
|
-
<UI.Button
|
|
164
|
-
rendered={selectedIndex < tabs.length - 1}
|
|
165
|
-
icon={<Ionicons />}
|
|
166
|
-
click={next}
|
|
167
|
-
/>
|
|
168
|
-
}
|
|
169
|
-
/>
|
|
170
|
-
</UI.Output>
|
|
171
|
-
</div>
|
|
172
|
-
)}
|
|
173
|
-
</>
|
|
174
|
-
)}
|
|
175
|
-
</div>
|
|
176
|
-
</div>
|
|
177
|
-
);
|
|
178
|
-
}
|
|
1
|
+
import React, { useState, useEffect } from 'react';
|
|
2
|
+
import UIChildren from '../UIChildren';
|
|
3
|
+
import UI from '../UI';
|
|
4
|
+
|
|
5
|
+
import Ionicons from '@expo/vector-icons/Ionicons';
|
|
6
|
+
import { ChildType, CrudUtils, Utils } from 'react-crud-utils';
|
|
7
|
+
|
|
8
|
+
export default function ElTabs(props: ChildType) {
|
|
9
|
+
let scope = props.scope;
|
|
10
|
+
let [selectedIndex, setSelectedIndex]: any = useState(0);
|
|
11
|
+
let element = scope.original;
|
|
12
|
+
let items = scope.getItems();
|
|
13
|
+
let counter = 0;
|
|
14
|
+
|
|
15
|
+
let tabs: any = [];
|
|
16
|
+
let [selected, setSelected]: any = useState(null);
|
|
17
|
+
|
|
18
|
+
const onChangeTab = (tab: any, validate = true) => {
|
|
19
|
+
if (tab) {
|
|
20
|
+
scope.execute({
|
|
21
|
+
event: {
|
|
22
|
+
validate,
|
|
23
|
+
validateScope: element.validateScope,
|
|
24
|
+
action: () => {
|
|
25
|
+
scope.changeValue(tab.data);
|
|
26
|
+
|
|
27
|
+
selected = tab;
|
|
28
|
+
selectedIndex = tab.index;
|
|
29
|
+
|
|
30
|
+
setSelectedIndex(selectedIndex);
|
|
31
|
+
setSelected(tab);
|
|
32
|
+
},
|
|
33
|
+
},
|
|
34
|
+
});
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
const getStyleClass = (t: any) => {
|
|
39
|
+
let s = 'ui-tabs-item ui-click';
|
|
40
|
+
|
|
41
|
+
if (selected?.index === t.index) {
|
|
42
|
+
s = s + ' ui-tab-selected';
|
|
43
|
+
}
|
|
44
|
+
return s;
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
const addTab = (child: any, item: any) => {
|
|
48
|
+
let original = { ...child.props };
|
|
49
|
+
|
|
50
|
+
if (!item) {
|
|
51
|
+
item = scope.crud.data;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
let crudTab = CrudUtils.create('tabs', {
|
|
55
|
+
data: item,
|
|
56
|
+
changed: item,
|
|
57
|
+
parent: scope.crud,
|
|
58
|
+
});
|
|
59
|
+
|
|
60
|
+
let element = Utils.resolve(original, crudTab);
|
|
61
|
+
|
|
62
|
+
if (element.rendered === false) {
|
|
63
|
+
return;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
tabs.push({
|
|
67
|
+
...element,
|
|
68
|
+
child,
|
|
69
|
+
element,
|
|
70
|
+
original,
|
|
71
|
+
index: counter++,
|
|
72
|
+
data: item,
|
|
73
|
+
});
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
React.Children.map(props.children, (child, index) => {
|
|
77
|
+
if (Utils.isEmpty(items)) {
|
|
78
|
+
addTab(child, {});
|
|
79
|
+
} else {
|
|
80
|
+
for (const i in items) {
|
|
81
|
+
let o = items[i];
|
|
82
|
+
|
|
83
|
+
addTab(child, o);
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
});
|
|
87
|
+
|
|
88
|
+
if (!selected) {
|
|
89
|
+
onChangeTab(tabs[selectedIndex], false);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
const nav = (i: any) => {
|
|
93
|
+
let t = tabs[selectedIndex + i];
|
|
94
|
+
|
|
95
|
+
onChangeTab(t);
|
|
96
|
+
};
|
|
97
|
+
|
|
98
|
+
const previous = () => {
|
|
99
|
+
nav(-1);
|
|
100
|
+
};
|
|
101
|
+
|
|
102
|
+
const next = () => {
|
|
103
|
+
nav(1);
|
|
104
|
+
};
|
|
105
|
+
|
|
106
|
+
let isStepper = element.layout === 'stepper';
|
|
107
|
+
|
|
108
|
+
return (
|
|
109
|
+
<div
|
|
110
|
+
className={scope.getStyleClass('inner')}
|
|
111
|
+
style={scope.getStyle('inner')}
|
|
112
|
+
>
|
|
113
|
+
<div className="ui-tabs-content">
|
|
114
|
+
<div className="ui-tabs-items">
|
|
115
|
+
{tabs.map((t: any, i: number) => (
|
|
116
|
+
<div
|
|
117
|
+
key={Utils.key(element.id, 'tab', i)}
|
|
118
|
+
className={getStyleClass(t)}
|
|
119
|
+
onClick={() => {
|
|
120
|
+
onChangeTab(t);
|
|
121
|
+
}}
|
|
122
|
+
>
|
|
123
|
+
{isStepper && <div className="ui-tab-item-divisor" />}
|
|
124
|
+
<div className="ui-tab-item-inner">
|
|
125
|
+
{isStepper && <div className="ui-step-line" />}
|
|
126
|
+
<div className="ui-tab-item-label">
|
|
127
|
+
{isStepper ? t.index + 1 : t.label}
|
|
128
|
+
</div>
|
|
129
|
+
</div>
|
|
130
|
+
</div>
|
|
131
|
+
))}
|
|
132
|
+
</div>
|
|
133
|
+
{selected && (
|
|
134
|
+
<>
|
|
135
|
+
{isStepper && <div className="ui-tabs-label">{selected.label}</div>}
|
|
136
|
+
<div className="ui-tabs-area">
|
|
137
|
+
<UIChildren {...props} scope={scope}>
|
|
138
|
+
{selected.child}
|
|
139
|
+
</UIChildren>
|
|
140
|
+
</div>
|
|
141
|
+
{element.layout === 'stepper' && (
|
|
142
|
+
<div className="ui-tabs-actions">
|
|
143
|
+
<UI.Output space={6} layout="left">
|
|
144
|
+
<UI.Include
|
|
145
|
+
{...props}
|
|
146
|
+
transient
|
|
147
|
+
name="left"
|
|
148
|
+
default={
|
|
149
|
+
<UI.Button
|
|
150
|
+
rendered={selectedIndex > 0}
|
|
151
|
+
icon={<Ionicons />}
|
|
152
|
+
click={previous}
|
|
153
|
+
/>
|
|
154
|
+
}
|
|
155
|
+
/>
|
|
156
|
+
</UI.Output>
|
|
157
|
+
<UI.Output space={6} layout="right">
|
|
158
|
+
<UI.Include
|
|
159
|
+
{...props}
|
|
160
|
+
transient
|
|
161
|
+
name="right"
|
|
162
|
+
default={
|
|
163
|
+
<UI.Button
|
|
164
|
+
rendered={selectedIndex < tabs.length - 1}
|
|
165
|
+
icon={<Ionicons />}
|
|
166
|
+
click={next}
|
|
167
|
+
/>
|
|
168
|
+
}
|
|
169
|
+
/>
|
|
170
|
+
</UI.Output>
|
|
171
|
+
</div>
|
|
172
|
+
)}
|
|
173
|
+
</>
|
|
174
|
+
)}
|
|
175
|
+
</div>
|
|
176
|
+
</div>
|
|
177
|
+
);
|
|
178
|
+
}
|
package/src/index.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export * from "./elements";
|
|
1
|
+
export * from "./elements";
|