secullum-react-native-ui 4.6.12 → 4.6.13
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/lib/components/Button.js +4 -2
- package/lib/components/Table.d.ts +2 -0
- package/lib/components/Table.js +37 -24
- package/package.json +9 -5
package/lib/components/Button.js
CHANGED
|
@@ -35,10 +35,12 @@ class Button extends React.Component {
|
|
|
35
35
|
color: theme.textColor4
|
|
36
36
|
},
|
|
37
37
|
disabled: {
|
|
38
|
-
backgroundColor: disabledBackgroundColor
|
|
38
|
+
backgroundColor: disabledBackgroundColor != null
|
|
39
|
+
? disabledBackgroundColor
|
|
40
|
+
: theme.backgroundColor2
|
|
39
41
|
},
|
|
40
42
|
textDisabled: {
|
|
41
|
-
color: disabledLabelColor
|
|
43
|
+
color: disabledLabelColor != null ? disabledLabelColor : 'silver'
|
|
42
44
|
}
|
|
43
45
|
});
|
|
44
46
|
return styles;
|
|
@@ -24,5 +24,7 @@ export interface TableProperties {
|
|
|
24
24
|
onSelectAll?: (value: boolean) => void;
|
|
25
25
|
}
|
|
26
26
|
export declare class Table extends React.Component<TableProperties> {
|
|
27
|
+
renderHeaderColumn: (column: TableColumn) => JSX.Element;
|
|
28
|
+
renderDataTable: (row: any, rowIndex: number) => JSX.Element;
|
|
27
29
|
render(): JSX.Element;
|
|
28
30
|
}
|
package/lib/components/Table.js
CHANGED
|
@@ -7,33 +7,46 @@ const theme_1 = require("../modules/theme");
|
|
|
7
7
|
const react_native_1 = require("react-native");
|
|
8
8
|
const CheckBox_1 = require("./CheckBox");
|
|
9
9
|
class Table extends React.Component {
|
|
10
|
+
constructor() {
|
|
11
|
+
super(...arguments);
|
|
12
|
+
this.renderHeaderColumn = (column) => {
|
|
13
|
+
const { data, onSelectAll } = this.props;
|
|
14
|
+
if (column.type === 'checkbox') {
|
|
15
|
+
return (React.createElement(CheckBox_1.CheckBox, { key: column.key, style: { marginLeft: 8 }, value: data.every(x => x.selected) || false, onChange: value => onSelectAll && onSelectAll(value) }));
|
|
16
|
+
}
|
|
17
|
+
return (React.createElement(react_native_1.Text, { key: column.key, style: [
|
|
18
|
+
styles.cell,
|
|
19
|
+
styles.cellHeader,
|
|
20
|
+
column.style,
|
|
21
|
+
column.headerStyle
|
|
22
|
+
] }, column.title));
|
|
23
|
+
};
|
|
24
|
+
this.renderDataTable = (row, rowIndex) => {
|
|
25
|
+
const { idAttribute, columns, cellStyle, onSelect } = this.props;
|
|
26
|
+
return (React.createElement(react_native_1.View, { key: row[idAttribute].toString(), style: [
|
|
27
|
+
styles.row,
|
|
28
|
+
{
|
|
29
|
+
backgroundColor: rowIndex % 2 === 0
|
|
30
|
+
? theme.backgroundColor2
|
|
31
|
+
: theme.backgroundColor1
|
|
32
|
+
}
|
|
33
|
+
] }, columns.map(column => {
|
|
34
|
+
const style = cellStyle &&
|
|
35
|
+
cellStyle[row[idAttribute].toString()] &&
|
|
36
|
+
cellStyle[row[idAttribute].toString()][column.key];
|
|
37
|
+
return column.type === 'icon' ? (React.createElement(FontAwesome_1.default, { key: column.key, name: row[column.key].toString(),
|
|
38
|
+
// @ts-ignore : The component uses a different version of typing
|
|
39
|
+
style: [styles.cellIcon, style, column.style] })) : column.type === 'checkbox' ? (React.createElement(CheckBox_1.CheckBox, { key: column.key, style: { marginLeft: 8 }, value: row.selected || false, onChange: value => onSelect && onSelect(row[column.key].toString(), value) })) : (React.createElement(react_native_1.Text, { key: column.key, style: [styles.cell, style, column.style] }, row[column.key].toString()));
|
|
40
|
+
})));
|
|
41
|
+
};
|
|
42
|
+
}
|
|
10
43
|
render() {
|
|
11
|
-
const { columns, data,
|
|
44
|
+
const { columns, data, style, nativeID, subHeaderData } = this.props;
|
|
12
45
|
return (React.createElement(react_native_1.ScrollView, { horizontal: true },
|
|
13
46
|
React.createElement(react_native_1.View, { nativeID: nativeID, style: style },
|
|
14
|
-
React.createElement(react_native_1.View, { style: styles.row }, columns.map(column =>
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
styles.cellHeader,
|
|
18
|
-
column.style,
|
|
19
|
-
column.headerStyle
|
|
20
|
-
] }, column.title));
|
|
21
|
-
})),
|
|
22
|
-
data.map((row, rowIndex) => (React.createElement(react_native_1.View, { key: row[idAttribute].toString(), style: [
|
|
23
|
-
styles.row,
|
|
24
|
-
{
|
|
25
|
-
backgroundColor: rowIndex % 2 === 0
|
|
26
|
-
? theme.backgroundColor2
|
|
27
|
-
: theme.backgroundColor1
|
|
28
|
-
}
|
|
29
|
-
] }, columns.map(column => {
|
|
30
|
-
const style = cellStyle &&
|
|
31
|
-
cellStyle[row[idAttribute].toString()] &&
|
|
32
|
-
cellStyle[row[idAttribute].toString()][column.key];
|
|
33
|
-
return column.type === 'icon' ? (React.createElement(FontAwesome_1.default, { key: column.key, name: row[column.key].toString(),
|
|
34
|
-
// @ts-ignore : The component uses a different version of typing
|
|
35
|
-
style: [styles.cellIcon, style, column.style] })) : column.type === 'checkbox' ? (React.createElement(CheckBox_1.CheckBox, { key: column.key, style: { marginLeft: 8 }, value: row.selected || false, onChange: value => onSelect && onSelect(row[column.key].toString(), value) })) : (React.createElement(react_native_1.Text, { key: column.key, style: [styles.cell, style, column.style] }, row[column.key].toString()));
|
|
36
|
-
})))))));
|
|
47
|
+
React.createElement(react_native_1.View, { style: styles.row }, columns.map(column => this.renderHeaderColumn(column))),
|
|
48
|
+
subHeaderData && (React.createElement(react_native_1.View, { style: styles.row }, subHeaderData.map(column => this.renderHeaderColumn(column)))),
|
|
49
|
+
data.map((row, rowIndex) => this.renderDataTable(row, rowIndex)))));
|
|
37
50
|
}
|
|
38
51
|
}
|
|
39
52
|
exports.Table = Table;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "secullum-react-native-ui",
|
|
3
|
-
"version": "4.6.
|
|
3
|
+
"version": "4.6.13",
|
|
4
4
|
"main": "lib/index.js",
|
|
5
5
|
"types": "lib/index.d.ts",
|
|
6
6
|
"files": [
|
|
@@ -30,6 +30,7 @@
|
|
|
30
30
|
"react-native-vector-icons": "^8.0.0"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
|
+
"@hot-loader/react-dom": "^16.8.6",
|
|
33
34
|
"@types/react": "^16.4.11",
|
|
34
35
|
"@types/react-dom": "^16.0.11",
|
|
35
36
|
"@types/react-native": "^0.63.64",
|
|
@@ -41,17 +42,20 @@
|
|
|
41
42
|
"docz-plugin-react-native": "^0.11.2",
|
|
42
43
|
"gh-pages": "^2.0.0",
|
|
43
44
|
"prettier": "^1.16.4",
|
|
44
|
-
"react": "^16.
|
|
45
|
+
"react": "^16.8.6",
|
|
46
|
+
"react-dom": "^16.8.6",
|
|
45
47
|
"react-native": "^0.52 || ^0.53 || ^0.54 || ^0.55 || ^0.63",
|
|
46
48
|
"rimraf": "^2.6.2",
|
|
47
49
|
"typescript": "^4.8.3"
|
|
48
50
|
},
|
|
49
51
|
"peerDependencies": {
|
|
50
|
-
"react": "^16.
|
|
51
|
-
"react-dom": "^16.
|
|
52
|
+
"react": "^16.8.6",
|
|
53
|
+
"react-dom": "^16.8.6",
|
|
52
54
|
"react-native": "^0.52 || ^0.53 || ^0.54 || ^0.55 || ^0.63"
|
|
53
55
|
},
|
|
54
56
|
"resolutions": {
|
|
55
|
-
"docz-plugin-react-native/react-native-web": "^0.
|
|
57
|
+
"docz-plugin-react-native/react-native-web": "^0.18.7",
|
|
58
|
+
"react-docgen-typescript": "2.2.2",
|
|
59
|
+
"react-hot-loader": "4.12.21"
|
|
56
60
|
}
|
|
57
61
|
}
|