react-crud-mobile 1.0.615 → 1.0.617
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 +82 -68
- 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 +82 -68
- package/dist/react-crud-mobile.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/elements/UIChildren.tsx +1 -1
- package/src/elements/core/UIList.tsx +2 -52
- package/src/elements/core/UIListRow.tsx +67 -3
|
@@ -11,7 +11,6 @@ export default function UIList(props: ChildType) {
|
|
|
11
11
|
const crud = scope.crud;
|
|
12
12
|
const original = scope.original;
|
|
13
13
|
const cols = Utils.nvl(original.cols, 1);
|
|
14
|
-
const rowWidth = Math.floor(100 / cols) + '%';
|
|
15
14
|
const items = Utils.nvl(scope.getItems(), []);
|
|
16
15
|
const styles = { repeat: stylesRepeat, list: stylesList }?.[original.type];
|
|
17
16
|
const add = ComponentUtils.getDefine(props, 'add');
|
|
@@ -70,55 +69,6 @@ export default function UIList(props: ChildType) {
|
|
|
70
69
|
return <>{empty}</>;
|
|
71
70
|
};
|
|
72
71
|
|
|
73
|
-
let RowItem = ({ item, index, children }) => {
|
|
74
|
-
const name = `${scope.key('row', index, '')}`;
|
|
75
|
-
const row = ScopeUtils.create({
|
|
76
|
-
...original,
|
|
77
|
-
parent: scope,
|
|
78
|
-
name,
|
|
79
|
-
crud: scope.crud,
|
|
80
|
-
index,
|
|
81
|
-
type: 'row',
|
|
82
|
-
data: item,
|
|
83
|
-
});
|
|
84
|
-
const getRowStyle = () => {
|
|
85
|
-
let css = row.getStyle('row', { ...styles.row });
|
|
86
|
-
|
|
87
|
-
if (cols > 0) {
|
|
88
|
-
css.width = rowWidth;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
return css;
|
|
92
|
-
};
|
|
93
|
-
|
|
94
|
-
const onClick = (item: any) => {
|
|
95
|
-
row.call('click', { value: item, item, edit: true });
|
|
96
|
-
};
|
|
97
|
-
|
|
98
|
-
if (!original.click) {
|
|
99
|
-
return (
|
|
100
|
-
<View key={`k-${index}`} style={getRowStyle()}>
|
|
101
|
-
<UIChildren scope={row} crud={row.crud}>
|
|
102
|
-
{children}
|
|
103
|
-
</UIChildren>
|
|
104
|
-
</View>
|
|
105
|
-
);
|
|
106
|
-
}
|
|
107
|
-
return (
|
|
108
|
-
<TouchableHighlight
|
|
109
|
-
key={`k-${index}`}
|
|
110
|
-
underlayColor={'transparent'}
|
|
111
|
-
onPress={e => {
|
|
112
|
-
e.stopPropagation();
|
|
113
|
-
onClick(item);
|
|
114
|
-
}}
|
|
115
|
-
>
|
|
116
|
-
<UIChildren scope={row} crud={row.crud}>
|
|
117
|
-
{children}
|
|
118
|
-
</UIChildren>
|
|
119
|
-
</TouchableHighlight>
|
|
120
|
-
);
|
|
121
|
-
};
|
|
122
72
|
return (
|
|
123
73
|
<>
|
|
124
74
|
{original.search !== false && (
|
|
@@ -133,9 +83,9 @@ export default function UIList(props: ChildType) {
|
|
|
133
83
|
<View style={getContainerStyle()}>
|
|
134
84
|
<Empty />
|
|
135
85
|
{items.map((item: any, i: number) => (
|
|
136
|
-
<
|
|
86
|
+
<UIListRow index={i} item={item} scope={scope}>
|
|
137
87
|
{props.children}
|
|
138
|
-
</
|
|
88
|
+
</UIListRow>
|
|
139
89
|
))}
|
|
140
90
|
{isShowAdd() && <>{add}</>}
|
|
141
91
|
</View>
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React, { useState } from 'react';
|
|
2
2
|
import { ChildType, ScopeUtils, Utils } from 'react-crud-utils';
|
|
3
3
|
import UIChildren from '../UIChildren';
|
|
4
|
+
import { StyleSheet, TouchableHighlight, View } from 'react-native';
|
|
4
5
|
|
|
5
6
|
interface UIListRowType extends ChildType {
|
|
6
7
|
item: any;
|
|
@@ -9,12 +10,75 @@ interface UIListRowType extends ChildType {
|
|
|
9
10
|
|
|
10
11
|
export default function UIListRow(props: UIListRowType) {
|
|
11
12
|
const scope = props.scope;
|
|
13
|
+
const index = props.index;
|
|
14
|
+
const original = scope.original;
|
|
15
|
+
const item = props.item;
|
|
16
|
+
const cols = Utils.nvl(original.cols, 1);
|
|
17
|
+
const rowWidth = Math.floor(100 / cols) + '%';
|
|
18
|
+
const styles = { repeat: stylesRepeat, list: stylesList }?.[original.type];
|
|
19
|
+
const name = `${scope.key('row', index, '')}`;
|
|
20
|
+
const row = ScopeUtils.create({
|
|
21
|
+
...original,
|
|
22
|
+
parent: scope,
|
|
23
|
+
name,
|
|
24
|
+
crud: scope.crud,
|
|
25
|
+
index,
|
|
26
|
+
type: 'row',
|
|
27
|
+
data: item,
|
|
28
|
+
});
|
|
29
|
+
const getRowStyle = () => {
|
|
30
|
+
let css = row.getStyle('row', { ...styles.row });
|
|
12
31
|
|
|
32
|
+
if (cols > 0) {
|
|
33
|
+
css.width = rowWidth;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
return css;
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
const onClick = (item: any) => {
|
|
40
|
+
row.call('click', { value: item, item, edit: true });
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
if (!original.click) {
|
|
44
|
+
return (
|
|
45
|
+
<View key={`k-${index}`} style={getRowStyle()}>
|
|
46
|
+
<UIChildren scope={row} crud={row.crud}>
|
|
47
|
+
{props.children}
|
|
48
|
+
</UIChildren>
|
|
49
|
+
</View>
|
|
50
|
+
);
|
|
51
|
+
}
|
|
13
52
|
return (
|
|
14
|
-
|
|
15
|
-
|
|
53
|
+
<TouchableHighlight
|
|
54
|
+
key={`k-${index}`}
|
|
55
|
+
underlayColor={'transparent'}
|
|
56
|
+
onPress={e => {
|
|
57
|
+
e.stopPropagation();
|
|
58
|
+
onClick(item);
|
|
59
|
+
}}
|
|
60
|
+
>
|
|
61
|
+
<UIChildren scope={row} crud={row.crud}>
|
|
16
62
|
{props.children}
|
|
17
63
|
</UIChildren>
|
|
18
|
-
|
|
64
|
+
</TouchableHighlight>
|
|
19
65
|
);
|
|
20
66
|
}
|
|
67
|
+
|
|
68
|
+
const stylesList = StyleSheet.create({
|
|
69
|
+
row: {
|
|
70
|
+
padding: 5,
|
|
71
|
+
margin: 3,
|
|
72
|
+
width: '100%',
|
|
73
|
+
backgroundColor: '#f5f5f5',
|
|
74
|
+
gap: 10,
|
|
75
|
+
borderRadius: 8,
|
|
76
|
+
},
|
|
77
|
+
});
|
|
78
|
+
|
|
79
|
+
const stylesRepeat = StyleSheet.create({
|
|
80
|
+
row: {
|
|
81
|
+
padding: 0,
|
|
82
|
+
width: '100%',
|
|
83
|
+
},
|
|
84
|
+
});
|