react-crud-mobile 1.0.166 → 1.0.168
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 +68 -68
- package/src/elements/UI.tsx +60 -60
- package/src/elements/UIChildren.tsx +126 -126
- package/src/elements/UIComplete.tsx +14 -14
- package/src/elements/UIElement.tsx +426 -426
- 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 +51 -51
- package/src/elements/core/UIListRow.tsx +29 -29
- package/src/elements/core/UISelect.tsx +3 -6
- package/src/elements/index.ts +1 -1
- package/src/elements/tabs/ElTabs.tsx +178 -178
- package/src/index.ts +1 -1
package/src/elements/UITag.tsx
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import React, { useState } from "react";
|
|
2
|
-
import { Utils } from "react-crud-utils";
|
|
3
|
-
|
|
4
|
-
interface UITagType {
|
|
5
|
-
name: string;
|
|
6
|
-
[otherOptions: string]: unknown;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
export default function UITag(props: UITagType) {
|
|
10
|
-
let Aux = Utils.nvl(props.name, "span");
|
|
11
|
-
|
|
12
|
-
return <Aux {...props} />;
|
|
13
|
-
}
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
import { Utils } from "react-crud-utils";
|
|
3
|
+
|
|
4
|
+
interface UITagType {
|
|
5
|
+
name: string;
|
|
6
|
+
[otherOptions: string]: unknown;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
export default function UITag(props: UITagType) {
|
|
10
|
+
let Aux = Utils.nvl(props.name, "span");
|
|
11
|
+
|
|
12
|
+
return <Aux {...props} />;
|
|
13
|
+
}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { ChildType, Scope, Utils } from "react-crud-utils";
|
|
3
|
-
|
|
4
|
-
export default function ElChart(props: ChildType) {
|
|
5
|
-
let scope: Scope = props.scope;
|
|
6
|
-
let items: any = scope.getItems();
|
|
7
|
-
let columns = Utils.asList(scope.original.columns);
|
|
8
|
-
|
|
9
|
-
return <div className="ui-chart-data"></div>;
|
|
10
|
-
}
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { ChildType, Scope, Utils } from "react-crud-utils";
|
|
3
|
+
|
|
4
|
+
export default function ElChart(props: ChildType) {
|
|
5
|
+
let scope: Scope = props.scope;
|
|
6
|
+
let items: any = scope.getItems();
|
|
7
|
+
let columns = Utils.asList(scope.original.columns);
|
|
8
|
+
|
|
9
|
+
return <div className="ui-chart-data"></div>;
|
|
10
|
+
}
|
|
@@ -1,40 +1,40 @@
|
|
|
1
|
-
import UIChildren from '../UIChildren';
|
|
2
|
-
import { ComponentUtils, DefineType, Utils } from 'react-crud-utils';
|
|
3
|
-
|
|
4
|
-
export default function UIInclude(props: DefineType) {
|
|
5
|
-
if (props.rendered === false) {
|
|
6
|
-
return <></>;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
let includes = ComponentUtils.getDefine(props, props.name, props.position);
|
|
10
|
-
|
|
11
|
-
if (Utils.isEmpty(includes)) {
|
|
12
|
-
includes = props.default;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
if (!Utils.isEmpty(includes)) {
|
|
16
|
-
let Aux = (tagProp: any) => {
|
|
17
|
-
let Tag: any = props.tag;
|
|
18
|
-
|
|
19
|
-
if (!Utils.isEmpty(Tag)) {
|
|
20
|
-
return <Tag {...tagProp}>{tagProp.children}</Tag>;
|
|
21
|
-
}
|
|
22
|
-
return <>{tagProp.children}</>;
|
|
23
|
-
};
|
|
24
|
-
|
|
25
|
-
return (
|
|
26
|
-
<Aux {...props.tagProps}>
|
|
27
|
-
<UIChildren
|
|
28
|
-
transient
|
|
29
|
-
{...props}
|
|
30
|
-
scope={props.scope}
|
|
31
|
-
crud={props.crud}
|
|
32
|
-
part={props.name}
|
|
33
|
-
>
|
|
34
|
-
{includes}
|
|
35
|
-
</UIChildren>
|
|
36
|
-
</Aux>
|
|
37
|
-
);
|
|
38
|
-
}
|
|
39
|
-
return <>{includes}</>;
|
|
40
|
-
}
|
|
1
|
+
import UIChildren from '../UIChildren';
|
|
2
|
+
import { ComponentUtils, DefineType, Utils } from 'react-crud-utils';
|
|
3
|
+
|
|
4
|
+
export default function UIInclude(props: DefineType) {
|
|
5
|
+
if (props.rendered === false) {
|
|
6
|
+
return <></>;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
let includes = ComponentUtils.getDefine(props, props.name, props.position);
|
|
10
|
+
|
|
11
|
+
if (Utils.isEmpty(includes)) {
|
|
12
|
+
includes = props.default;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
if (!Utils.isEmpty(includes)) {
|
|
16
|
+
let Aux = (tagProp: any) => {
|
|
17
|
+
let Tag: any = props.tag;
|
|
18
|
+
|
|
19
|
+
if (!Utils.isEmpty(Tag)) {
|
|
20
|
+
return <Tag {...tagProp}>{tagProp.children}</Tag>;
|
|
21
|
+
}
|
|
22
|
+
return <>{tagProp.children}</>;
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
return (
|
|
26
|
+
<Aux {...props.tagProps}>
|
|
27
|
+
<UIChildren
|
|
28
|
+
transient
|
|
29
|
+
{...props}
|
|
30
|
+
scope={props.scope}
|
|
31
|
+
crud={props.crud}
|
|
32
|
+
part={props.name}
|
|
33
|
+
>
|
|
34
|
+
{includes}
|
|
35
|
+
</UIChildren>
|
|
36
|
+
</Aux>
|
|
37
|
+
);
|
|
38
|
+
}
|
|
39
|
+
return <>{includes}</>;
|
|
40
|
+
}
|
|
@@ -1,56 +1,56 @@
|
|
|
1
|
-
import { useState } from 'react';
|
|
2
|
-
import { ChildType, Utils } from 'react-crud-utils';
|
|
3
|
-
import { StyleSheet, TextInput, View } from 'react-native';
|
|
4
|
-
|
|
5
|
-
export default function UIInput(props: ChildType) {
|
|
6
|
-
let scope = props.scope;
|
|
7
|
-
let initial = Utils.nvl(scope.getValue(), '');
|
|
8
|
-
|
|
9
|
-
let label = scope.getLabel();
|
|
10
|
-
let placeholder = scope.getPart('placeholder', null, label);
|
|
11
|
-
let el = scope.original;
|
|
12
|
-
|
|
13
|
-
const [value, setValue] = useState(initial);
|
|
14
|
-
|
|
15
|
-
let onChange = v => {
|
|
16
|
-
scope.changeValue(v);
|
|
17
|
-
|
|
18
|
-
setValue(v);
|
|
19
|
-
};
|
|
20
|
-
|
|
21
|
-
return (
|
|
22
|
-
<View style={styles.base}>
|
|
23
|
-
{scope.getPart('left')}
|
|
24
|
-
<TextInput
|
|
25
|
-
style={styles.input}
|
|
26
|
-
onChangeText={onChange}
|
|
27
|
-
value={value}
|
|
28
|
-
placeholder={placeholder}
|
|
29
|
-
/>
|
|
30
|
-
{scope.getPart('right')}
|
|
31
|
-
</View>
|
|
32
|
-
);
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
const styles = StyleSheet.create({
|
|
36
|
-
base: {
|
|
37
|
-
flexDirection: 'row',
|
|
38
|
-
alignItems: 'center',
|
|
39
|
-
borderWidth: 1,
|
|
40
|
-
borderColor: '#a9a9a9',
|
|
41
|
-
borderRadius: 20,
|
|
42
|
-
paddingHorizontal: 10,
|
|
43
|
-
paddingVertical: 5,
|
|
44
|
-
padding: 10,
|
|
45
|
-
paddingLeft: 5,
|
|
46
|
-
paddingRight: 10,
|
|
47
|
-
},
|
|
48
|
-
icon: {
|
|
49
|
-
marginRight: 10, // Espaço entre ícone e input
|
|
50
|
-
},
|
|
51
|
-
input: {
|
|
52
|
-
marginHorizontal: 10,
|
|
53
|
-
marginVertical: 5,
|
|
54
|
-
flex: 1, // Para o input ocupar o espaço restante
|
|
55
|
-
},
|
|
56
|
-
});
|
|
1
|
+
import { useState } from 'react';
|
|
2
|
+
import { ChildType, Utils } from 'react-crud-utils';
|
|
3
|
+
import { StyleSheet, TextInput, View } from 'react-native';
|
|
4
|
+
|
|
5
|
+
export default function UIInput(props: ChildType) {
|
|
6
|
+
let scope = props.scope;
|
|
7
|
+
let initial = Utils.nvl(scope.getValue(), '');
|
|
8
|
+
|
|
9
|
+
let label = scope.getLabel();
|
|
10
|
+
let placeholder = scope.getPart('placeholder', null, label);
|
|
11
|
+
let el = scope.original;
|
|
12
|
+
|
|
13
|
+
const [value, setValue] = useState(initial);
|
|
14
|
+
|
|
15
|
+
let onChange = v => {
|
|
16
|
+
scope.changeValue(v);
|
|
17
|
+
|
|
18
|
+
setValue(v);
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
return (
|
|
22
|
+
<View style={styles.base}>
|
|
23
|
+
{scope.getPart('left')}
|
|
24
|
+
<TextInput
|
|
25
|
+
style={styles.input}
|
|
26
|
+
onChangeText={onChange}
|
|
27
|
+
value={value}
|
|
28
|
+
placeholder={placeholder}
|
|
29
|
+
/>
|
|
30
|
+
{scope.getPart('right')}
|
|
31
|
+
</View>
|
|
32
|
+
);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
const styles = StyleSheet.create({
|
|
36
|
+
base: {
|
|
37
|
+
flexDirection: 'row',
|
|
38
|
+
alignItems: 'center',
|
|
39
|
+
borderWidth: 1,
|
|
40
|
+
borderColor: '#a9a9a9',
|
|
41
|
+
borderRadius: 20,
|
|
42
|
+
paddingHorizontal: 10,
|
|
43
|
+
paddingVertical: 5,
|
|
44
|
+
padding: 10,
|
|
45
|
+
paddingLeft: 5,
|
|
46
|
+
paddingRight: 10,
|
|
47
|
+
},
|
|
48
|
+
icon: {
|
|
49
|
+
marginRight: 10, // Espaço entre ícone e input
|
|
50
|
+
},
|
|
51
|
+
input: {
|
|
52
|
+
marginHorizontal: 10,
|
|
53
|
+
marginVertical: 5,
|
|
54
|
+
flex: 1, // Para o input ocupar o espaço restante
|
|
55
|
+
},
|
|
56
|
+
});
|
|
@@ -1,51 +1,51 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { ChildType, Utils } from 'react-crud-utils';
|
|
3
|
-
import { StyleSheet, Text, View } from 'react-native';
|
|
4
|
-
import UIListRow from './UIListRow';
|
|
5
|
-
import UI from '../UI';
|
|
6
|
-
import Icon from 'react-native-vector-icons/FontAwesome';
|
|
7
|
-
|
|
8
|
-
export default function UIList(props: ChildType) {
|
|
9
|
-
const scope = props.scope;
|
|
10
|
-
const crud = scope.crud;
|
|
11
|
-
const items = Utils.nvl(scope.getItems(), []);
|
|
12
|
-
|
|
13
|
-
return (
|
|
14
|
-
<>
|
|
15
|
-
<UI.Text
|
|
16
|
-
placeholder="Pesquisar..."
|
|
17
|
-
field="query"
|
|
18
|
-
crud={crud}
|
|
19
|
-
right={<Icon name="eye" size={20} color="#888" />}
|
|
20
|
-
/>
|
|
21
|
-
|
|
22
|
-
<View style={styles.container}>
|
|
23
|
-
{items.map((item: any, i: number) => (
|
|
24
|
-
<View key={`k-${i}`} style={styles.item}>
|
|
25
|
-
<UIListRow scope={scope} item={item} index={i}>
|
|
26
|
-
{props.children}
|
|
27
|
-
</UIListRow>
|
|
28
|
-
</View>
|
|
29
|
-
))}
|
|
30
|
-
</View>
|
|
31
|
-
</>
|
|
32
|
-
);
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
const styles = StyleSheet.create({
|
|
36
|
-
container: {
|
|
37
|
-
flex: 1,
|
|
38
|
-
width: '100%',
|
|
39
|
-
},
|
|
40
|
-
item: {
|
|
41
|
-
padding: 15,
|
|
42
|
-
marginVertical: 8,
|
|
43
|
-
backgroundColor: '#f5f5f5',
|
|
44
|
-
borderRadius: 8,
|
|
45
|
-
width: '100%',
|
|
46
|
-
},
|
|
47
|
-
text: {
|
|
48
|
-
fontSize: 18,
|
|
49
|
-
fontWeight: 'bold',
|
|
50
|
-
},
|
|
51
|
-
});
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ChildType, Utils } from 'react-crud-utils';
|
|
3
|
+
import { StyleSheet, Text, View } from 'react-native';
|
|
4
|
+
import UIListRow from './UIListRow';
|
|
5
|
+
import UI from '../UI';
|
|
6
|
+
import Icon from 'react-native-vector-icons/FontAwesome';
|
|
7
|
+
|
|
8
|
+
export default function UIList(props: ChildType) {
|
|
9
|
+
const scope = props.scope;
|
|
10
|
+
const crud = scope.crud;
|
|
11
|
+
const items = Utils.nvl(scope.getItems(), []);
|
|
12
|
+
|
|
13
|
+
return (
|
|
14
|
+
<>
|
|
15
|
+
<UI.Text
|
|
16
|
+
placeholder="Pesquisar..."
|
|
17
|
+
field="query"
|
|
18
|
+
crud={crud}
|
|
19
|
+
right={<Icon name="eye" size={20} color="#888" />}
|
|
20
|
+
/>
|
|
21
|
+
|
|
22
|
+
<View style={styles.container}>
|
|
23
|
+
{items.map((item: any, i: number) => (
|
|
24
|
+
<View key={`k-${i}`} style={styles.item}>
|
|
25
|
+
<UIListRow scope={scope} item={item} index={i}>
|
|
26
|
+
{props.children}
|
|
27
|
+
</UIListRow>
|
|
28
|
+
</View>
|
|
29
|
+
))}
|
|
30
|
+
</View>
|
|
31
|
+
</>
|
|
32
|
+
);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
const styles = StyleSheet.create({
|
|
36
|
+
container: {
|
|
37
|
+
flex: 1,
|
|
38
|
+
width: '100%',
|
|
39
|
+
},
|
|
40
|
+
item: {
|
|
41
|
+
padding: 15,
|
|
42
|
+
marginVertical: 8,
|
|
43
|
+
backgroundColor: '#f5f5f5',
|
|
44
|
+
borderRadius: 8,
|
|
45
|
+
width: '100%',
|
|
46
|
+
},
|
|
47
|
+
text: {
|
|
48
|
+
fontSize: 18,
|
|
49
|
+
fontWeight: 'bold',
|
|
50
|
+
},
|
|
51
|
+
});
|
|
@@ -1,29 +1,29 @@
|
|
|
1
|
-
import React, { useState } from 'react';
|
|
2
|
-
import { ChildType, ScopeUtils, Utils } from 'react-crud-utils';
|
|
3
|
-
import UIChildren from '../UIChildren';
|
|
4
|
-
|
|
5
|
-
interface UIListRowType extends ChildType {
|
|
6
|
-
item: any;
|
|
7
|
-
index: number;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
export default function UIListRow(props: UIListRowType) {
|
|
11
|
-
const parent = props.scope;
|
|
12
|
-
const item = props.item;
|
|
13
|
-
const row = {
|
|
14
|
-
parent,
|
|
15
|
-
crud: parent.crud,
|
|
16
|
-
index: props.index,
|
|
17
|
-
type: 'row',
|
|
18
|
-
data: item,
|
|
19
|
-
};
|
|
20
|
-
let [scope] = useState(ScopeUtils.create(row));
|
|
21
|
-
|
|
22
|
-
return (
|
|
23
|
-
<>
|
|
24
|
-
<UIChildren scope={scope} crud={scope.crud}>
|
|
25
|
-
{props.children}
|
|
26
|
-
</UIChildren>
|
|
27
|
-
</>
|
|
28
|
-
);
|
|
29
|
-
}
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
|
+
import { ChildType, ScopeUtils, Utils } from 'react-crud-utils';
|
|
3
|
+
import UIChildren from '../UIChildren';
|
|
4
|
+
|
|
5
|
+
interface UIListRowType extends ChildType {
|
|
6
|
+
item: any;
|
|
7
|
+
index: number;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
export default function UIListRow(props: UIListRowType) {
|
|
11
|
+
const parent = props.scope;
|
|
12
|
+
const item = props.item;
|
|
13
|
+
const row = {
|
|
14
|
+
parent,
|
|
15
|
+
crud: parent.crud,
|
|
16
|
+
index: props.index,
|
|
17
|
+
type: 'row',
|
|
18
|
+
data: item,
|
|
19
|
+
};
|
|
20
|
+
let [scope] = useState(ScopeUtils.create(row));
|
|
21
|
+
|
|
22
|
+
return (
|
|
23
|
+
<>
|
|
24
|
+
<UIChildren scope={scope} crud={scope.crud}>
|
|
25
|
+
{props.children}
|
|
26
|
+
</UIChildren>
|
|
27
|
+
</>
|
|
28
|
+
);
|
|
29
|
+
}
|
|
@@ -10,6 +10,7 @@ import {
|
|
|
10
10
|
SafeAreaView,
|
|
11
11
|
} from 'react-native';
|
|
12
12
|
import Icon from 'react-native-vector-icons/FontAwesome';
|
|
13
|
+
import UI from '../UI';
|
|
13
14
|
|
|
14
15
|
export default function UISelect(props: ChildType) {
|
|
15
16
|
const [modalVisible, setModalVisible] = useState(false);
|
|
@@ -37,7 +38,7 @@ export default function UISelect(props: ChildType) {
|
|
|
37
38
|
visible={modalVisible}
|
|
38
39
|
onRequestClose={() => setModalVisible(false)}
|
|
39
40
|
>
|
|
40
|
-
<StatusBar barStyle="
|
|
41
|
+
<StatusBar barStyle="light-content" backgroundColor="#6200ee" />
|
|
41
42
|
<SafeAreaView style={styles.safe}>
|
|
42
43
|
<View style={styles.header}>
|
|
43
44
|
<TouchableOpacity
|
|
@@ -49,11 +50,7 @@ export default function UISelect(props: ChildType) {
|
|
|
49
50
|
<Text style={styles.title}>Título do Modal</Text>
|
|
50
51
|
</View>
|
|
51
52
|
<View style={styles.content}>
|
|
52
|
-
{items
|
|
53
|
-
<View key={`k-${i}`} style={styles.item}>
|
|
54
|
-
<Text>{item.label}</Text>
|
|
55
|
-
</View>
|
|
56
|
-
))}
|
|
53
|
+
<UI.List data={items} />
|
|
57
54
|
</View>
|
|
58
55
|
</SafeAreaView>
|
|
59
56
|
</Modal>
|
package/src/elements/index.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { default as UI } from "./UI";
|
|
1
|
+
export { default as UI } from "./UI";
|