@draftbit/core 46.2.4-0e692a.5 → 46.2.4-25c40a.5
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/commonjs/components/Banner.js +24 -4
- package/lib/commonjs/components/Config.js +1 -1
- package/lib/commonjs/components/DeprecatedCardWrapper.js +17 -2
- package/lib/commonjs/components/Picker/PickerComponent.android.js +24 -5
- package/lib/commonjs/components/RadioButton/RadioButtonFieldGroup.js +11 -2
- package/lib/commonjs/components/{Svg.js → SVG.js} +7 -6
- package/lib/commonjs/components/Table/index.js +55 -0
- package/lib/commonjs/components/Table/table.js +35 -0
- package/lib/commonjs/components/Table/tableCell.js +50 -0
- package/lib/commonjs/components/Table/tableHeader.js +41 -0
- package/lib/commonjs/components/Table/tablePaginator.js +17 -0
- package/lib/commonjs/components/Table/tableRow.js +47 -0
- package/lib/commonjs/components/Table/tableTitle.js +60 -0
- package/lib/commonjs/components/Touchable.js +16 -2
- package/lib/commonjs/constants.js +1 -1
- package/lib/commonjs/index.js +45 -7
- package/lib/commonjs/mappings/{Svg.js → SVG.js} +0 -1
- package/lib/commonjs/mappings/StarRating.js +6 -2
- package/lib/commonjs/mappings/table.js +103 -0
- package/lib/commonjs/utilities.js +2 -2
- package/lib/module/components/Config.js +1 -1
- package/lib/module/components/Portal/PortalManager.js +20 -12
- package/lib/module/components/{Svg.js → SVG.js} +7 -6
- package/lib/module/components/Table/index.js +6 -0
- package/lib/module/components/Table/table.js +23 -0
- package/lib/module/components/Table/tableCell.js +37 -0
- package/lib/module/components/Table/tableHeader.js +25 -0
- package/lib/module/components/Table/tablePaginator.js +6 -0
- package/lib/module/components/Table/tableRow.js +33 -0
- package/lib/module/components/Table/tableTitle.js +47 -0
- package/lib/module/index.js +2 -1
- package/lib/module/mappings/SVG.js +14 -0
- package/lib/module/mappings/table.js +94 -0
- package/lib/module/utilities.js +3 -3
- package/lib/typescript/src/components/SVG.d.ts +8 -0
- package/lib/typescript/src/components/Table/index.d.ts +6 -0
- package/lib/typescript/src/components/Table/table.d.ts +8 -0
- package/lib/typescript/src/components/Table/tableCell.d.ts +10 -0
- package/lib/typescript/src/components/Table/tableHeader.d.ts +12 -0
- package/lib/typescript/src/components/Table/tablePaginator.d.ts +3 -0
- package/lib/typescript/src/components/Table/tableRow.d.ts +12 -0
- package/lib/typescript/src/components/Table/tableTitle.d.ts +12 -0
- package/lib/typescript/src/index.d.ts +2 -1
- package/lib/typescript/src/mappings/{Svg.d.ts → SVG.d.ts} +0 -1
- package/lib/typescript/src/mappings/table.d.ts +153 -0
- package/lib/typescript/src/utilities.d.ts +3 -3
- package/package.json +4 -4
- package/src/components/Config.js +1 -1
- package/src/components/Config.ts +1 -1
- package/src/components/{Svg.js → SVG.js} +6 -5
- package/src/components/SVG.tsx +35 -0
- package/src/components/Table/index.js +6 -0
- package/src/components/Table/index.tsx +6 -0
- package/src/components/Table/table.js +10 -0
- package/src/components/Table/table.tsx +22 -0
- package/src/components/Table/tableCell.js +21 -0
- package/src/components/Table/tableCell.tsx +44 -0
- package/src/components/Table/tableHeader.js +11 -0
- package/src/components/Table/tableHeader.tsx +28 -0
- package/src/components/Table/tablePaginator.js +5 -0
- package/src/components/Table/tablePaginator.tsx +10 -0
- package/src/components/Table/tableRow.js +16 -0
- package/src/components/Table/tableRow.tsx +31 -0
- package/src/components/Table/tableTitle.js +28 -0
- package/src/components/Table/tableTitle.tsx +58 -0
- package/src/index.js +2 -1
- package/src/index.tsx +10 -1
- package/src/mappings/SVG.js +14 -0
- package/src/mappings/SVG.ts +15 -0
- package/src/mappings/table.js +137 -0
- package/src/mappings/table.ts +145 -0
- package/src/utilities.js +5 -2
- package/src/utilities.ts +13 -2
- package/lib/module/mappings/Svg.js +0 -15
- package/lib/typescript/src/components/Svg.d.ts +0 -7
- package/src/components/Svg.tsx +0 -35
- package/src/mappings/Svg.js +0 -20
- package/src/mappings/Svg.ts +0 -25
|
@@ -25,9 +25,7 @@ const SEED_DATA = {
|
|
|
25
25
|
}),
|
|
26
26
|
fieldName: (0, _types.createFieldNameProp)({
|
|
27
27
|
defaultValue: "ratingValue",
|
|
28
|
-
// this is the name of the variable declared on the screen in Draftbit
|
|
29
28
|
handlerPropName: "onPress",
|
|
30
|
-
// the change handler prop in this component
|
|
31
29
|
valuePropName: "rating" // the value prop in this component
|
|
32
30
|
|
|
33
31
|
}),
|
|
@@ -52,4 +50,10 @@ const SEED_DATA = {
|
|
|
52
50
|
})
|
|
53
51
|
}
|
|
54
52
|
};
|
|
53
|
+
exports.SEED_DATA = SEED_DATA;pes.createColorProp)({
|
|
54
|
+
label: "Inactive Color",
|
|
55
|
+
defaultValue: "divider"
|
|
56
|
+
})
|
|
57
|
+
}
|
|
58
|
+
};
|
|
55
59
|
exports.SEED_DATA = SEED_DATA;
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.SEED_DATA = void 0;
|
|
7
|
+
|
|
8
|
+
var _types = require("@draftbit/types");
|
|
9
|
+
|
|
10
|
+
const SEED_DATA = [{
|
|
11
|
+
name: "Table",
|
|
12
|
+
tag: "Table",
|
|
13
|
+
category: _types.COMPONENT_TYPES.container,
|
|
14
|
+
stylesPanelSections: [_types.StylesPanelSections.Background, _types.StylesPanelSections.Borders, _types.StylesPanelSections.Size, _types.StylesPanelSections.MarginsAndPaddings, _types.StylesPanelSections.Position, _types.StylesPanelSections.Effects],
|
|
15
|
+
layout: {
|
|
16
|
+
width: "100%"
|
|
17
|
+
},
|
|
18
|
+
props: {}
|
|
19
|
+
}, {
|
|
20
|
+
name: "Table Row",
|
|
21
|
+
tag: "TableRow",
|
|
22
|
+
category: _types.COMPONENT_TYPES.container,
|
|
23
|
+
stylesPanelSections: [_types.StylesPanelSections.Background, _types.StylesPanelSections.Borders, _types.StylesPanelSections.Size, _types.StylesPanelSections.MarginsAndPaddings, _types.StylesPanelSections.Position, _types.StylesPanelSections.Effects],
|
|
24
|
+
layout: {
|
|
25
|
+
paddingLeft: 16,
|
|
26
|
+
paddingRight: 16,
|
|
27
|
+
borderBottomWidth: 1,
|
|
28
|
+
borderStyle: "solid"
|
|
29
|
+
},
|
|
30
|
+
props: {}
|
|
31
|
+
}, {
|
|
32
|
+
name: "Table Cell",
|
|
33
|
+
tag: "TableCell",
|
|
34
|
+
category: _types.COMPONENT_TYPES.container,
|
|
35
|
+
layout: {
|
|
36
|
+
paddingTop: 16,
|
|
37
|
+
paddingBottom: 16,
|
|
38
|
+
paddingLeft: 8,
|
|
39
|
+
paddingRight: 8
|
|
40
|
+
},
|
|
41
|
+
stylesPanelSections: [_types.StylesPanelSections.Typography, _types.StylesPanelSections.Background, _types.StylesPanelSections.Borders, _types.StylesPanelSections.Size, _types.StylesPanelSections.MarginsAndPaddings, _types.StylesPanelSections.Position, _types.StylesPanelSections.Effects],
|
|
42
|
+
props: {
|
|
43
|
+
numeric: (0, _types.createBoolProp)({
|
|
44
|
+
label: "Is Numeric Cell?",
|
|
45
|
+
description: "Does the cell contain a numeric value?",
|
|
46
|
+
group: _types.GROUPS.data
|
|
47
|
+
}),
|
|
48
|
+
value: (0, _types.createTextProp)({
|
|
49
|
+
label: "Cell Value",
|
|
50
|
+
description: "Table Cell Value",
|
|
51
|
+
group: _types.GROUPS.data
|
|
52
|
+
})
|
|
53
|
+
}
|
|
54
|
+
}, {
|
|
55
|
+
name: "Table Header",
|
|
56
|
+
tag: "TableHeader",
|
|
57
|
+
category: _types.COMPONENT_TYPES.container,
|
|
58
|
+
stylesPanelSections: [_types.StylesPanelSections.Background, _types.StylesPanelSections.Borders, _types.StylesPanelSections.Size, _types.StylesPanelSections.MarginsAndPaddings, _types.StylesPanelSections.Position, _types.StylesPanelSections.Effects],
|
|
59
|
+
layout: {
|
|
60
|
+
paddingLeft: 16,
|
|
61
|
+
paddingRight: 16,
|
|
62
|
+
borderBottomWidth: 1,
|
|
63
|
+
borderStyle: "solid",
|
|
64
|
+
backgroundColor: "#EFEFEF"
|
|
65
|
+
},
|
|
66
|
+
props: {}
|
|
67
|
+
}, {
|
|
68
|
+
name: "Table Title",
|
|
69
|
+
tag: "TableTitle",
|
|
70
|
+
category: _types.COMPONENT_TYPES.container,
|
|
71
|
+
stylesPanelSections: [_types.StylesPanelSections.Typography, _types.StylesPanelSections.Background, _types.StylesPanelSections.Borders, _types.StylesPanelSections.Size, _types.StylesPanelSections.MarginsAndPaddings, _types.StylesPanelSections.Position, _types.StylesPanelSections.Effects],
|
|
72
|
+
layout: {
|
|
73
|
+
fontSize: 14,
|
|
74
|
+
fontWeight: "500",
|
|
75
|
+
paddingTop: 16,
|
|
76
|
+
paddingBottom: 16,
|
|
77
|
+
paddingLeft: 8,
|
|
78
|
+
paddingRight: 8
|
|
79
|
+
},
|
|
80
|
+
props: {
|
|
81
|
+
numeric: (0, _types.createBoolProp)({
|
|
82
|
+
label: "Is Numeric Cell?",
|
|
83
|
+
description: "Does the cell contain a numeric value?",
|
|
84
|
+
group: _types.GROUPS.data
|
|
85
|
+
}),
|
|
86
|
+
value: (0, _types.createTextProp)({
|
|
87
|
+
label: "Cell Value",
|
|
88
|
+
description: "Table Cell Value",
|
|
89
|
+
group: _types.GROUPS.data
|
|
90
|
+
}),
|
|
91
|
+
isAscending: (0, _types.createBoolProp)({
|
|
92
|
+
label: "Is Ascending?",
|
|
93
|
+
description: "Does the cell contain a numeric value?",
|
|
94
|
+
group: _types.GROUPS.data
|
|
95
|
+
}),
|
|
96
|
+
numberOfLines: (0, _types.createNumberProp)({
|
|
97
|
+
label: "Number of Lines",
|
|
98
|
+
description: "Number of Lines",
|
|
99
|
+
group: _types.GROUPS.basic
|
|
100
|
+
})
|
|
101
|
+
}
|
|
102
|
+
}];
|
|
103
|
+
exports.SEED_DATA = SEED_DATA;
|
|
@@ -54,7 +54,7 @@ export default {
|
|
|
54
54
|
width: size.width,
|
|
55
55
|
height: size.height
|
|
56
56
|
}, "image-placeholder_1"),
|
|
57
|
-
placeholderSvgURL: "https://static.draftbit.com/images/placeholder-
|
|
57
|
+
placeholderSvgURL: "https://static.draftbit.com/images/placeholder-svg.svg",
|
|
58
58
|
squareImageUrl: buildImageUrl({
|
|
59
59
|
width: 100,
|
|
60
60
|
height: 100
|
|
@@ -1,29 +1,26 @@
|
|
|
1
|
-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
2
|
-
|
|
3
1
|
import * as React from "react";
|
|
4
2
|
import { View, StyleSheet } from "react-native";
|
|
5
|
-
|
|
6
3
|
/**
|
|
7
4
|
* Portal host is the component which actually renders all Portals.
|
|
8
5
|
*/
|
|
6
|
+
|
|
9
7
|
export default class PortalManager extends React.PureComponent {
|
|
10
8
|
constructor() {
|
|
11
9
|
super(...arguments);
|
|
12
|
-
|
|
13
|
-
_defineProperty(this, "state", {
|
|
10
|
+
this.state = {
|
|
14
11
|
portals: []
|
|
15
|
-
}
|
|
12
|
+
};
|
|
16
13
|
|
|
17
|
-
|
|
14
|
+
this.mount = (key, children) => {
|
|
18
15
|
this.setState(state => ({
|
|
19
16
|
portals: [...state.portals, {
|
|
20
17
|
key,
|
|
21
18
|
children
|
|
22
19
|
}]
|
|
23
20
|
}));
|
|
24
|
-
}
|
|
21
|
+
};
|
|
25
22
|
|
|
26
|
-
|
|
23
|
+
this.update = (key, children) => this.setState(state => ({
|
|
27
24
|
portals: state.portals.map(item => {
|
|
28
25
|
if (item.key === key) {
|
|
29
26
|
return { ...item,
|
|
@@ -33,11 +30,11 @@ export default class PortalManager extends React.PureComponent {
|
|
|
33
30
|
|
|
34
31
|
return item;
|
|
35
32
|
})
|
|
36
|
-
}))
|
|
33
|
+
}));
|
|
37
34
|
|
|
38
|
-
|
|
35
|
+
this.unmount = key => this.setState(state => ({
|
|
39
36
|
portals: state.portals.filter(item => item.key !== key)
|
|
40
|
-
}))
|
|
37
|
+
}));
|
|
41
38
|
}
|
|
42
39
|
|
|
43
40
|
render() {
|
|
@@ -57,4 +54,15 @@ export default class PortalManager extends React.PureComponent {
|
|
|
57
54
|
});
|
|
58
55
|
}
|
|
59
56
|
|
|
57
|
+
}ent(View, {
|
|
58
|
+
key: key,
|
|
59
|
+
collapsable: false
|
|
60
|
+
/* Need collapsable=false here to clip the elevations, otherwise they appear above sibling components */
|
|
61
|
+
,
|
|
62
|
+
pointerEvents: "box-none",
|
|
63
|
+
style: StyleSheet.absoluteFill
|
|
64
|
+
}, children);
|
|
65
|
+
});
|
|
66
|
+
}
|
|
67
|
+
|
|
60
68
|
}
|
|
@@ -3,29 +3,30 @@ import { View, Platform, Image } from "react-native";
|
|
|
3
3
|
import { SvgUri } from "react-native-svg";
|
|
4
4
|
import Config from "./Config";
|
|
5
5
|
|
|
6
|
-
const
|
|
6
|
+
const SVG = _ref => {
|
|
7
7
|
let {
|
|
8
|
-
source
|
|
8
|
+
source,
|
|
9
9
|
style
|
|
10
10
|
} = _ref;
|
|
11
|
+
let svgSource = source === null || source === undefined ? Config.placeholderSvgURL : source;
|
|
11
12
|
return /*#__PURE__*/React.createElement(React.Fragment, null, Platform.OS === "ios" && /*#__PURE__*/React.createElement(View, {
|
|
12
13
|
style: style
|
|
13
14
|
}, /*#__PURE__*/React.createElement(SvgUri, {
|
|
14
15
|
width: "100%",
|
|
15
16
|
height: "100%",
|
|
16
|
-
uri:
|
|
17
|
+
uri: svgSource
|
|
17
18
|
})), Platform.OS === "android" && /*#__PURE__*/React.createElement(View, {
|
|
18
19
|
style: style
|
|
19
20
|
}, /*#__PURE__*/React.createElement(SvgUri, {
|
|
20
21
|
width: "100%",
|
|
21
22
|
height: "100%",
|
|
22
|
-
uri:
|
|
23
|
+
uri: svgSource
|
|
23
24
|
})), Platform.OS === "web" && /*#__PURE__*/React.createElement(Image, {
|
|
24
25
|
style: style,
|
|
25
26
|
source: {
|
|
26
|
-
uri:
|
|
27
|
+
uri: svgSource
|
|
27
28
|
}
|
|
28
29
|
}));
|
|
29
30
|
};
|
|
30
31
|
|
|
31
|
-
export default
|
|
32
|
+
export default SVG;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export { default as Table } from "./table";
|
|
2
|
+
export { default as TableHeader } from "./tableHeader";
|
|
3
|
+
export { default as TablePaginator } from "./tablePaginator";
|
|
4
|
+
export { default as TableRow } from "./tableRow";
|
|
5
|
+
export { default as TableCell } from "./tableCell";
|
|
6
|
+
export { default as TableTitle } from "./tableTitle";
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
|
|
3
|
+
import React from "react";
|
|
4
|
+
import { View, StyleSheet } from "react-native";
|
|
5
|
+
|
|
6
|
+
const Table = _ref => {
|
|
7
|
+
let {
|
|
8
|
+
children,
|
|
9
|
+
style,
|
|
10
|
+
...rest
|
|
11
|
+
} = _ref;
|
|
12
|
+
return /*#__PURE__*/React.createElement(View, _extends({}, rest, {
|
|
13
|
+
style: [styles.wrapper, style]
|
|
14
|
+
}), children);
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
const styles = StyleSheet.create({
|
|
18
|
+
wrapper: {
|
|
19
|
+
display: "flex",
|
|
20
|
+
flexDirection: "column"
|
|
21
|
+
}
|
|
22
|
+
});
|
|
23
|
+
export default Table;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
|
|
3
|
+
import React from "react";
|
|
4
|
+
import { View, Text, StyleSheet } from "react-native";
|
|
5
|
+
import { extractStyles } from "../../utilities";
|
|
6
|
+
|
|
7
|
+
const TableCell = _ref => {
|
|
8
|
+
let {
|
|
9
|
+
children,
|
|
10
|
+
style,
|
|
11
|
+
numeric,
|
|
12
|
+
value,
|
|
13
|
+
...rest
|
|
14
|
+
} = _ref;
|
|
15
|
+
const {
|
|
16
|
+
textStyles,
|
|
17
|
+
viewStyles
|
|
18
|
+
} = extractStyles(style);
|
|
19
|
+
return /*#__PURE__*/React.createElement(View, _extends({}, rest, {
|
|
20
|
+
style: [styles.wrapper, numeric && styles.right, viewStyles]
|
|
21
|
+
}), /*#__PURE__*/React.createElement(Text, {
|
|
22
|
+
numberOfLines: 1,
|
|
23
|
+
style: textStyles
|
|
24
|
+
}, children, value));
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
const styles = StyleSheet.create({
|
|
28
|
+
wrapper: {
|
|
29
|
+
flex: 1,
|
|
30
|
+
display: "flex",
|
|
31
|
+
flexDirection: "row"
|
|
32
|
+
},
|
|
33
|
+
right: {
|
|
34
|
+
justifyContent: "flex-end"
|
|
35
|
+
}
|
|
36
|
+
});
|
|
37
|
+
export default TableCell;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { View, StyleSheet } from "react-native";
|
|
3
|
+
import { withTheme } from "../../theming";
|
|
4
|
+
|
|
5
|
+
const TableHeader = _ref => {
|
|
6
|
+
let {
|
|
7
|
+
children,
|
|
8
|
+
style,
|
|
9
|
+
theme,
|
|
10
|
+
...rest
|
|
11
|
+
} = _ref;
|
|
12
|
+
return /*#__PURE__*/React.createElement(View, { ...rest,
|
|
13
|
+
style: [styles.wrapper, {
|
|
14
|
+
borderBottomColor: theme.colors.medium
|
|
15
|
+
}, style]
|
|
16
|
+
}, children);
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
const styles = StyleSheet.create({
|
|
20
|
+
wrapper: {
|
|
21
|
+
display: "flex",
|
|
22
|
+
flexDirection: "row"
|
|
23
|
+
}
|
|
24
|
+
});
|
|
25
|
+
export default withTheme(TableHeader);
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
|
|
3
|
+
import React from "react";
|
|
4
|
+
import { View, StyleSheet } from "react-native";
|
|
5
|
+
import { withTheme } from "../../theming";
|
|
6
|
+
|
|
7
|
+
const TableRow = _ref => {
|
|
8
|
+
let {
|
|
9
|
+
children,
|
|
10
|
+
style,
|
|
11
|
+
theme,
|
|
12
|
+
...rest
|
|
13
|
+
} = _ref;
|
|
14
|
+
return /*#__PURE__*/React.createElement(View, _extends({}, rest, {
|
|
15
|
+
style: [styles.container, {
|
|
16
|
+
borderBottomColor: theme.colors.light
|
|
17
|
+
}, style]
|
|
18
|
+
}), /*#__PURE__*/React.createElement(View, {
|
|
19
|
+
style: styles.content
|
|
20
|
+
}, children));
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
const styles = StyleSheet.create({
|
|
24
|
+
container: {
|
|
25
|
+
display: "flex",
|
|
26
|
+
flexDirection: "row"
|
|
27
|
+
},
|
|
28
|
+
content: {
|
|
29
|
+
flex: 1,
|
|
30
|
+
flexDirection: "row"
|
|
31
|
+
}
|
|
32
|
+
});
|
|
33
|
+
export default withTheme(TableRow);
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
|
|
3
|
+
import React from "react";
|
|
4
|
+
import { View, Text, StyleSheet } from "react-native";
|
|
5
|
+
import { extractStyles } from "../../utilities";
|
|
6
|
+
|
|
7
|
+
const TableTitle = _ref => {
|
|
8
|
+
let {
|
|
9
|
+
children,
|
|
10
|
+
style,
|
|
11
|
+
numeric = false,
|
|
12
|
+
isAscending = false,
|
|
13
|
+
numberOfLines = 1,
|
|
14
|
+
title,
|
|
15
|
+
...rest
|
|
16
|
+
} = _ref;
|
|
17
|
+
const {
|
|
18
|
+
textStyles,
|
|
19
|
+
viewStyles
|
|
20
|
+
} = extractStyles(style);
|
|
21
|
+
return /*#__PURE__*/React.createElement(View, _extends({}, rest, {
|
|
22
|
+
style: [styles.wrapper, numeric && styles.right, viewStyles]
|
|
23
|
+
}), /*#__PURE__*/React.createElement(Text, {
|
|
24
|
+
style: [isAscending ? styles.sorted : {
|
|
25
|
+
color: "gray"
|
|
26
|
+
}, textStyles],
|
|
27
|
+
numberOfLines: numberOfLines
|
|
28
|
+
}, children, title));
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
const styles = StyleSheet.create({
|
|
32
|
+
wrapper: {
|
|
33
|
+
flex: 1,
|
|
34
|
+
display: "flex",
|
|
35
|
+
flexDirection: "row"
|
|
36
|
+
},
|
|
37
|
+
right: {
|
|
38
|
+
justifyContent: "flex-end"
|
|
39
|
+
},
|
|
40
|
+
sorted: {// marginLeft: 8,
|
|
41
|
+
},
|
|
42
|
+
icon: {
|
|
43
|
+
height: 24,
|
|
44
|
+
justifyContent: "center"
|
|
45
|
+
}
|
|
46
|
+
});
|
|
47
|
+
export default TableTitle;
|
package/lib/module/index.js
CHANGED
|
@@ -17,7 +17,7 @@ export { default as FAB } from "./components/FAB";
|
|
|
17
17
|
export { default as FieldSearchBarFull } from "./components/FieldSearchBarFull";
|
|
18
18
|
export { default as IconButton } from "./components/IconButton";
|
|
19
19
|
export { default as Image } from "./components/Image";
|
|
20
|
-
export { default as
|
|
20
|
+
export { default as SVG } from "./components/SVG";
|
|
21
21
|
export { default as NumberInput } from "./components/NumberInput";
|
|
22
22
|
export { default as ScreenContainer } from "./components/ScreenContainer";
|
|
23
23
|
export { default as StarRating } from "./components/StarRating";
|
|
@@ -31,6 +31,7 @@ export { ActionSheet, ActionSheetItem, ActionSheetCancel } from "./components/Ac
|
|
|
31
31
|
export { Swiper, SwiperItem } from "./components/Swiper";
|
|
32
32
|
export { Center, Circle, Square, Row, Stack, Spacer } from "./components/Layout";
|
|
33
33
|
export { RadioButton, RadioButtonGroup, RadioButtonRow, RadioButtonFieldGroup } from "./components/RadioButton/index";
|
|
34
|
+
export { Table, TableRow, TablePaginator, TableHeader, TableCell, TableTitle } from "./components/Table";
|
|
34
35
|
/* Deprecated: Fix or Delete! */
|
|
35
36
|
|
|
36
37
|
export { default as Button } from "./components/DeprecatedButton";
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { COMPONENT_TYPES, createSvgProp } from "@draftbit/types";
|
|
2
|
+
export const SEED_DATA = {
|
|
3
|
+
name: "SVG",
|
|
4
|
+
tag: "SVG",
|
|
5
|
+
description: "An SVG component",
|
|
6
|
+
category: COMPONENT_TYPES.media,
|
|
7
|
+
layout: {
|
|
8
|
+
width: 100,
|
|
9
|
+
height: 100
|
|
10
|
+
},
|
|
11
|
+
props: {
|
|
12
|
+
source: createSvgProp()
|
|
13
|
+
}
|
|
14
|
+
};
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import { COMPONENT_TYPES, GROUPS, createBoolProp, createTextProp, createNumberProp, StylesPanelSections } from "@draftbit/types";
|
|
2
|
+
export const SEED_DATA = [{
|
|
3
|
+
name: "Table",
|
|
4
|
+
tag: "Table",
|
|
5
|
+
category: COMPONENT_TYPES.container,
|
|
6
|
+
stylesPanelSections: [StylesPanelSections.Background, StylesPanelSections.Borders, StylesPanelSections.Size, StylesPanelSections.MarginsAndPaddings, StylesPanelSections.Position, StylesPanelSections.Effects],
|
|
7
|
+
layout: {
|
|
8
|
+
width: "100%"
|
|
9
|
+
},
|
|
10
|
+
props: {}
|
|
11
|
+
}, {
|
|
12
|
+
name: "Table Row",
|
|
13
|
+
tag: "TableRow",
|
|
14
|
+
category: COMPONENT_TYPES.container,
|
|
15
|
+
stylesPanelSections: [StylesPanelSections.Background, StylesPanelSections.Borders, StylesPanelSections.Size, StylesPanelSections.MarginsAndPaddings, StylesPanelSections.Position, StylesPanelSections.Effects],
|
|
16
|
+
layout: {
|
|
17
|
+
paddingLeft: 16,
|
|
18
|
+
paddingRight: 16,
|
|
19
|
+
borderBottomWidth: 1,
|
|
20
|
+
borderStyle: "solid"
|
|
21
|
+
},
|
|
22
|
+
props: {}
|
|
23
|
+
}, {
|
|
24
|
+
name: "Table Cell",
|
|
25
|
+
tag: "TableCell",
|
|
26
|
+
category: COMPONENT_TYPES.container,
|
|
27
|
+
layout: {
|
|
28
|
+
paddingTop: 16,
|
|
29
|
+
paddingBottom: 16,
|
|
30
|
+
paddingLeft: 8,
|
|
31
|
+
paddingRight: 8
|
|
32
|
+
},
|
|
33
|
+
stylesPanelSections: [StylesPanelSections.Typography, StylesPanelSections.Background, StylesPanelSections.Borders, StylesPanelSections.Size, StylesPanelSections.MarginsAndPaddings, StylesPanelSections.Position, StylesPanelSections.Effects],
|
|
34
|
+
props: {
|
|
35
|
+
numeric: createBoolProp({
|
|
36
|
+
label: "Is Numeric Cell?",
|
|
37
|
+
description: "Does the cell contain a numeric value?",
|
|
38
|
+
group: GROUPS.data
|
|
39
|
+
}),
|
|
40
|
+
value: createTextProp({
|
|
41
|
+
label: "Cell Value",
|
|
42
|
+
description: "Table Cell Value",
|
|
43
|
+
group: GROUPS.data
|
|
44
|
+
})
|
|
45
|
+
}
|
|
46
|
+
}, {
|
|
47
|
+
name: "Table Header",
|
|
48
|
+
tag: "TableHeader",
|
|
49
|
+
category: COMPONENT_TYPES.container,
|
|
50
|
+
stylesPanelSections: [StylesPanelSections.Background, StylesPanelSections.Borders, StylesPanelSections.Size, StylesPanelSections.MarginsAndPaddings, StylesPanelSections.Position, StylesPanelSections.Effects],
|
|
51
|
+
layout: {
|
|
52
|
+
paddingLeft: 16,
|
|
53
|
+
paddingRight: 16,
|
|
54
|
+
borderBottomWidth: 1,
|
|
55
|
+
borderStyle: "solid",
|
|
56
|
+
backgroundColor: "#EFEFEF"
|
|
57
|
+
},
|
|
58
|
+
props: {}
|
|
59
|
+
}, {
|
|
60
|
+
name: "Table Title",
|
|
61
|
+
tag: "TableTitle",
|
|
62
|
+
category: COMPONENT_TYPES.container,
|
|
63
|
+
stylesPanelSections: [StylesPanelSections.Typography, StylesPanelSections.Background, StylesPanelSections.Borders, StylesPanelSections.Size, StylesPanelSections.MarginsAndPaddings, StylesPanelSections.Position, StylesPanelSections.Effects],
|
|
64
|
+
layout: {
|
|
65
|
+
fontSize: 14,
|
|
66
|
+
fontWeight: "500",
|
|
67
|
+
paddingTop: 16,
|
|
68
|
+
paddingBottom: 16,
|
|
69
|
+
paddingLeft: 8,
|
|
70
|
+
paddingRight: 8
|
|
71
|
+
},
|
|
72
|
+
props: {
|
|
73
|
+
numeric: createBoolProp({
|
|
74
|
+
label: "Is Numeric Cell?",
|
|
75
|
+
description: "Does the cell contain a numeric value?",
|
|
76
|
+
group: GROUPS.data
|
|
77
|
+
}),
|
|
78
|
+
value: createTextProp({
|
|
79
|
+
label: "Cell Value",
|
|
80
|
+
description: "Table Cell Value",
|
|
81
|
+
group: GROUPS.data
|
|
82
|
+
}),
|
|
83
|
+
isAscending: createBoolProp({
|
|
84
|
+
label: "Is Ascending?",
|
|
85
|
+
description: "Does the cell contain a numeric value?",
|
|
86
|
+
group: GROUPS.data
|
|
87
|
+
}),
|
|
88
|
+
numberOfLines: createNumberProp({
|
|
89
|
+
label: "Number of Lines",
|
|
90
|
+
description: "Number of Lines",
|
|
91
|
+
group: GROUPS.basic
|
|
92
|
+
})
|
|
93
|
+
}
|
|
94
|
+
}];
|
package/lib/module/utilities.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { StyleSheet } from "react-native";
|
|
2
|
-
import { isString, isNumber, pick, pickBy, identity } from "lodash";
|
|
2
|
+
import { isString, isNumber, pick, pickBy, identity, omitBy, isNil } from "lodash";
|
|
3
3
|
export function extractStyles(style) {
|
|
4
4
|
const {
|
|
5
5
|
color,
|
|
@@ -29,8 +29,8 @@ export function extractStyles(style) {
|
|
|
29
29
|
textDecorationStyle
|
|
30
30
|
};
|
|
31
31
|
return {
|
|
32
|
-
viewStyles,
|
|
33
|
-
textStyles
|
|
32
|
+
viewStyles: omitBy(viewStyles, isNil),
|
|
33
|
+
textStyles: omitBy(textStyles, isNil)
|
|
34
34
|
};
|
|
35
35
|
}
|
|
36
36
|
export const borderStyleNames = ["borderRadius", "borderBottomColor", "borderBottomEndRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "borderBottomStartRadius", "borderBottomWidth", "borderColor", "borderEndColor", "borderLeftColor", "borderLeftWidth", "borderRadius", "borderRightColor", "borderRightWidth", "borderStartColor", "borderStyle", "borderTopColor", "borderTopEndRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderTopStartRadius", "borderTopWidth", "borderWidth"];
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { StyleProp, ImageStyle } from "react-native";
|
|
3
|
+
declare type SVGComponentProps = {
|
|
4
|
+
source: string;
|
|
5
|
+
style?: StyleProp<ImageStyle>;
|
|
6
|
+
};
|
|
7
|
+
declare const SVG: ({ source, style }: SVGComponentProps) => JSX.Element;
|
|
8
|
+
export default SVG;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export { default as Table } from "./table";
|
|
2
|
+
export { default as TableHeader } from "./tableHeader";
|
|
3
|
+
export { default as TablePaginator } from "./tablePaginator";
|
|
4
|
+
export { default as TableRow } from "./tableRow";
|
|
5
|
+
export { default as TableCell } from "./tableCell";
|
|
6
|
+
export { default as TableTitle } from "./tableTitle";
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { StyleProp, ViewStyle } from "react-native";
|
|
3
|
+
export interface TableProps {
|
|
4
|
+
children: React.ReactNode;
|
|
5
|
+
style?: StyleProp<ViewStyle>;
|
|
6
|
+
}
|
|
7
|
+
declare const Table: ({ children, style, ...rest }: TableProps) => JSX.Element;
|
|
8
|
+
export default Table;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { StyleProp, ViewStyle } from "react-native";
|
|
3
|
+
export interface TableCellProps {
|
|
4
|
+
children: React.ReactNode;
|
|
5
|
+
numeric?: boolean;
|
|
6
|
+
style?: StyleProp<ViewStyle>;
|
|
7
|
+
value: string;
|
|
8
|
+
}
|
|
9
|
+
declare const TableCell: ({ children, style, numeric, value, ...rest }: TableCellProps) => JSX.Element;
|
|
10
|
+
export default TableCell;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { StyleProp, ViewStyle } from "react-native";
|
|
3
|
+
import { Theme } from "../../styles/DefaultTheme";
|
|
4
|
+
export interface TableHeaderProps {
|
|
5
|
+
children: React.ReactNode;
|
|
6
|
+
style?: StyleProp<ViewStyle>;
|
|
7
|
+
theme: Theme;
|
|
8
|
+
}
|
|
9
|
+
declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<TableHeaderProps, "theme"> & {
|
|
10
|
+
theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;
|
|
11
|
+
}> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<TableHeaderProps> & (({ children, style, theme, ...rest }: TableHeaderProps) => JSX.Element), {}>;
|
|
12
|
+
export default _default;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { StyleProp, ViewStyle } from "react-native";
|
|
3
|
+
import { Theme } from "../../styles/DefaultTheme";
|
|
4
|
+
export interface TableRowProps {
|
|
5
|
+
children: React.ReactNode;
|
|
6
|
+
style?: StyleProp<ViewStyle>;
|
|
7
|
+
theme: Theme;
|
|
8
|
+
}
|
|
9
|
+
declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<TableRowProps, "theme"> & {
|
|
10
|
+
theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;
|
|
11
|
+
}> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<TableRowProps> & (({ children, style, theme, ...rest }: TableRowProps) => JSX.Element), {}>;
|
|
12
|
+
export default _default;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { StyleProp, ViewStyle } from "react-native";
|
|
3
|
+
export interface TableCellProps {
|
|
4
|
+
children: React.ReactNode;
|
|
5
|
+
numeric?: boolean;
|
|
6
|
+
isAscending: boolean;
|
|
7
|
+
numberOfLines?: number;
|
|
8
|
+
title?: string;
|
|
9
|
+
style?: StyleProp<ViewStyle>;
|
|
10
|
+
}
|
|
11
|
+
declare const TableTitle: ({ children, style, numeric, isAscending, numberOfLines, title, ...rest }: TableCellProps) => JSX.Element;
|
|
12
|
+
export default TableTitle;
|