@draftbit/core 46.4.4-10b0a9.2 → 46.4.4-11985a.2
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/Container.js +17 -5
- 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/Table/index.js +55 -0
- package/lib/commonjs/index.js +38 -0
- package/lib/commonjs/mappings/AudioPlayer.js +2 -28
- package/lib/commonjs/mappings/Table.js +102 -0
- package/lib/commonjs/utilities.js +2 -2
- package/lib/module/components/Accordion/AccordionItem.js +26 -5
- package/lib/module/components/DatePicker/DatePicker.js +7 -8
- package/lib/module/components/Image.js +18 -3
- package/lib/module/components/Picker/PickerComponent.web.js +23 -5
- package/lib/module/components/ScreenContainer.js +22 -5
- 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 +27 -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/components/Table/index.js +6 -0
- package/lib/module/constants.js +1 -0
- package/lib/module/index.js +1 -0
- package/lib/module/mappings/AudioPlayer.js +3 -29
- package/lib/module/mappings/Table.js +93 -0
- package/lib/module/utilities.js +3 -3
- 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/components/Table/index.d.ts +6 -0
- package/lib/typescript/src/index.d.ts +1 -0
- package/lib/typescript/src/mappings/AudioPlayer.d.ts +1 -52
- package/lib/typescript/src/mappings/Table.d.ts +148 -0
- package/lib/typescript/src/utilities.d.ts +3 -3
- package/package.json +3 -3
- 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/components/Table/index.js +6 -0
- package/src/components/Table/index.tsx +6 -0
- package/src/index.js +1 -0
- package/src/index.tsx +9 -0
- package/src/mappings/AudioPlayer.js +2 -35
- package/src/mappings/AudioPlayer.ts +1 -37
- package/src/mappings/Table.js +136 -0
- package/src/mappings/Table.ts +144 -0
- package/src/utilities.js +5 -2
- package/src/utilities.ts +13 -2
|
@@ -1,5 +1,3 @@
|
|
|
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
1
|
import * as React from "react";
|
|
4
2
|
import { View, StyleSheet } from "react-native";
|
|
5
3
|
import { Picker as NativePicker } from "@react-native-picker/picker";
|
|
@@ -10,8 +8,6 @@ import TextField from "../TextField";
|
|
|
10
8
|
import Touchable from "../Touchable";
|
|
11
9
|
|
|
12
10
|
const Picker = _ref => {
|
|
13
|
-
var _options$find$label, _options$find;
|
|
14
|
-
|
|
15
11
|
let {
|
|
16
12
|
style,
|
|
17
13
|
options,
|
|
@@ -21,6 +17,9 @@ const Picker = _ref => {
|
|
|
21
17
|
onValueChange: onValueChangeOverride = () => {},
|
|
22
18
|
...props
|
|
23
19
|
} = _ref;
|
|
20
|
+
|
|
21
|
+
var _a, _b;
|
|
22
|
+
|
|
24
23
|
const {
|
|
25
24
|
viewStyles: {
|
|
26
25
|
borderRadius,
|
|
@@ -67,7 +66,7 @@ const Picker = _ref => {
|
|
|
67
66
|
};
|
|
68
67
|
|
|
69
68
|
const stylesWithoutMargin = style && omit(StyleSheet.flatten(style), ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft"]);
|
|
70
|
-
const selectedLabel = selectedValue && ((
|
|
69
|
+
const selectedLabel = selectedValue && ((_b = (_a = options.find(o => o.value === selectedValue)) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : selectedValue);
|
|
71
70
|
return /*#__PURE__*/React.createElement(Touchable, {
|
|
72
71
|
disabled: disabled,
|
|
73
72
|
onPress: toggleFocus,
|
|
@@ -90,6 +89,25 @@ const Picker = _ref => {
|
|
|
90
89
|
label: o.label,
|
|
91
90
|
value: o.value,
|
|
92
91
|
key: o.value
|
|
92
|
+
}))), /*#__PURE__*/React.createElement(View, {
|
|
93
|
+
pointerEvents: "none"
|
|
94
|
+
}, /*#__PURE__*/React.createElement(TextField, { ...props,
|
|
95
|
+
value: selectedLabel,
|
|
96
|
+
placeholder: placeholder,
|
|
97
|
+
// @ts-ignore
|
|
98
|
+
ref: textField,
|
|
99
|
+
disabled: disabled,
|
|
100
|
+
// @ts-expect-error
|
|
101
|
+
style: stylesWithoutMargin
|
|
102
|
+
}))));
|
|
103
|
+
};
|
|
104
|
+
|
|
105
|
+
const styles = StyleSheet.create({
|
|
106
|
+
container: {
|
|
107
|
+
alignSelf: "stretch"
|
|
108
|
+
}
|
|
109
|
+
});
|
|
110
|
+
export default withTheme(Picker); key: o.value
|
|
93
111
|
}))), /*#__PURE__*/React.createElement(View, {
|
|
94
112
|
pointerEvents: "none"
|
|
95
113
|
}, /*#__PURE__*/React.createElement(TextField, _extends({}, props, {
|
|
@@ -1,5 +1,3 @@
|
|
|
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
1
|
import * as React from "react";
|
|
4
2
|
import { StyleSheet, ScrollView, View } from "react-native";
|
|
5
3
|
import { SafeAreaView } from "react-native-safe-area-context";
|
|
@@ -27,12 +25,13 @@ function ScreenContainer(_ref) {
|
|
|
27
25
|
edges.push("bottom");
|
|
28
26
|
}
|
|
29
27
|
|
|
30
|
-
return /*#__PURE__*/React.createElement(SafeAreaView,
|
|
28
|
+
return /*#__PURE__*/React.createElement(SafeAreaView, {
|
|
31
29
|
edges: edges,
|
|
32
30
|
style: [styles.container, {
|
|
33
31
|
backgroundColor
|
|
34
|
-
}]
|
|
35
|
-
|
|
32
|
+
}],
|
|
33
|
+
...rest
|
|
34
|
+
}, scrollable ? /*#__PURE__*/React.createElement(ScrollView, {
|
|
36
35
|
contentContainerStyle: [styles.scrollViewContainer, {
|
|
37
36
|
backgroundColor
|
|
38
37
|
}, style]
|
|
@@ -43,6 +42,24 @@ function ScreenContainer(_ref) {
|
|
|
43
42
|
}, children));
|
|
44
43
|
}
|
|
45
44
|
|
|
45
|
+
const styles = StyleSheet.create({
|
|
46
|
+
container: {
|
|
47
|
+
flex: 1
|
|
48
|
+
},
|
|
49
|
+
scrollViewContainer: {
|
|
50
|
+
flexGrow: 1,
|
|
51
|
+
flex: undefined
|
|
52
|
+
}
|
|
53
|
+
});
|
|
54
|
+
export default withTheme(ScreenContainer);olor
|
|
55
|
+
}, style]
|
|
56
|
+
}, children) : /*#__PURE__*/React.createElement(View, {
|
|
57
|
+
style: [styles.container, {
|
|
58
|
+
backgroundColor
|
|
59
|
+
}, style]
|
|
60
|
+
}, children));
|
|
61
|
+
}
|
|
62
|
+
|
|
46
63
|
const styles = StyleSheet.create({
|
|
47
64
|
container: {
|
|
48
65
|
flex: 1
|
|
@@ -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,27 @@
|
|
|
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 TableHeader = _ref => {
|
|
8
|
+
let {
|
|
9
|
+
children,
|
|
10
|
+
style,
|
|
11
|
+
theme,
|
|
12
|
+
...rest
|
|
13
|
+
} = _ref;
|
|
14
|
+
return /*#__PURE__*/React.createElement(View, _extends({}, rest, {
|
|
15
|
+
style: [styles.wrapper, {
|
|
16
|
+
borderBottomColor: theme.colors.medium
|
|
17
|
+
}, style]
|
|
18
|
+
}), children);
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
const styles = StyleSheet.create({
|
|
22
|
+
wrapper: {
|
|
23
|
+
display: "flex",
|
|
24
|
+
flexDirection: "row"
|
|
25
|
+
}
|
|
26
|
+
});
|
|
27
|
+
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;
|
|
@@ -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";
|
package/lib/module/constants.js
CHANGED
package/lib/module/index.js
CHANGED
|
@@ -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 CardBlock } from "./components/CardBlock";
|
|
@@ -1,20 +1,10 @@
|
|
|
1
|
-
import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES
|
|
1
|
+
import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES } from "@draftbit/types";
|
|
2
2
|
export const SEED_DATA = {
|
|
3
3
|
name: "Audio Player",
|
|
4
4
|
tag: "AudioPlayer",
|
|
5
5
|
description: "Given a source URL, plays sounds & audio!",
|
|
6
6
|
category: COMPONENT_TYPES.media,
|
|
7
|
-
|
|
8
|
-
layout: {
|
|
9
|
-
backgroundColor: "#eee",
|
|
10
|
-
paddingLeft: 16,
|
|
11
|
-
paddingRight: 16,
|
|
12
|
-
paddingTop: 8,
|
|
13
|
-
paddingBottom: 8,
|
|
14
|
-
borderRadius: 24,
|
|
15
|
-
flexDirection: "row",
|
|
16
|
-
alignItems: "center"
|
|
17
|
-
},
|
|
7
|
+
layout: {},
|
|
18
8
|
props: {
|
|
19
9
|
source: {
|
|
20
10
|
group: GROUPS.data,
|
|
@@ -25,22 +15,6 @@ export const SEED_DATA = {
|
|
|
25
15
|
defaultValue: "https://static.draftbit.com/audio/intro-to-draftbit-audio.mp3",
|
|
26
16
|
formType: FORM_TYPES.sourceUrl,
|
|
27
17
|
propType: PROP_TYPES.OBJECT
|
|
28
|
-
}
|
|
29
|
-
sliderColor: createColorProp({
|
|
30
|
-
label: "Thumb Color",
|
|
31
|
-
defaultValue: "black"
|
|
32
|
-
}),
|
|
33
|
-
completedTrackColor: createColorProp({
|
|
34
|
-
label: "Completed Track Color",
|
|
35
|
-
defaultValue: "white"
|
|
36
|
-
}),
|
|
37
|
-
remainingTrackColor: createColorProp({
|
|
38
|
-
label: "Remanining Track Color",
|
|
39
|
-
defaultValue: "#333333"
|
|
40
|
-
}),
|
|
41
|
-
trackThumbSize: createNumberProp({
|
|
42
|
-
label: "Thumb Size",
|
|
43
|
-
defaultValue: 24
|
|
44
|
-
})
|
|
18
|
+
}
|
|
45
19
|
}
|
|
46
20
|
};
|
|
@@ -0,0 +1,93 @@
|
|
|
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
|
+
paddingTop: 16,
|
|
67
|
+
paddingBottom: 16,
|
|
68
|
+
paddingLeft: 8,
|
|
69
|
+
paddingRight: 8
|
|
70
|
+
},
|
|
71
|
+
props: {
|
|
72
|
+
numeric: createBoolProp({
|
|
73
|
+
label: "Is Numeric Cell?",
|
|
74
|
+
description: "Does the cell contain a numeric value?",
|
|
75
|
+
group: GROUPS.data
|
|
76
|
+
}),
|
|
77
|
+
value: createTextProp({
|
|
78
|
+
label: "Cell Value",
|
|
79
|
+
description: "Table Cell Value",
|
|
80
|
+
group: GROUPS.data
|
|
81
|
+
}),
|
|
82
|
+
isAscending: createBoolProp({
|
|
83
|
+
label: "Is Ascending?",
|
|
84
|
+
description: "Does the cell contain a numeric value?",
|
|
85
|
+
group: GROUPS.data
|
|
86
|
+
}),
|
|
87
|
+
numberOfLines: createNumberProp({
|
|
88
|
+
label: "Number of Lines",
|
|
89
|
+
description: "Number of Lines",
|
|
90
|
+
group: GROUPS.basic
|
|
91
|
+
})
|
|
92
|
+
}
|
|
93
|
+
}];
|
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
|
+
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;
|
|
@@ -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";
|
|
@@ -31,6 +31,7 @@ export { ActionSheet, ActionSheetItem, ActionSheetCancel, } from "./components/A
|
|
|
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
|
export { default as CardBlock } from "./components/CardBlock";
|
|
35
36
|
export { default as CardContainer } from "./components/CardContainer";
|
|
36
37
|
export { default as CardContainerRating } from "./components/CardContainerRating";
|
|
@@ -3,17 +3,7 @@ export declare const SEED_DATA: {
|
|
|
3
3
|
tag: string;
|
|
4
4
|
description: string;
|
|
5
5
|
category: string;
|
|
6
|
-
|
|
7
|
-
layout: {
|
|
8
|
-
backgroundColor: string;
|
|
9
|
-
paddingLeft: number;
|
|
10
|
-
paddingRight: number;
|
|
11
|
-
paddingTop: number;
|
|
12
|
-
paddingBottom: number;
|
|
13
|
-
borderRadius: number;
|
|
14
|
-
flexDirection: string;
|
|
15
|
-
alignItems: string;
|
|
16
|
-
};
|
|
6
|
+
layout: {};
|
|
17
7
|
props: {
|
|
18
8
|
source: {
|
|
19
9
|
group: string;
|
|
@@ -25,46 +15,5 @@ export declare const SEED_DATA: {
|
|
|
25
15
|
formType: string;
|
|
26
16
|
propType: string;
|
|
27
17
|
};
|
|
28
|
-
sliderColor: {
|
|
29
|
-
group: string;
|
|
30
|
-
label: string;
|
|
31
|
-
description: string;
|
|
32
|
-
editable: boolean;
|
|
33
|
-
required: boolean;
|
|
34
|
-
defaultValue: null;
|
|
35
|
-
formType: string;
|
|
36
|
-
propType: string;
|
|
37
|
-
};
|
|
38
|
-
completedTrackColor: {
|
|
39
|
-
group: string;
|
|
40
|
-
label: string;
|
|
41
|
-
description: string;
|
|
42
|
-
editable: boolean;
|
|
43
|
-
required: boolean;
|
|
44
|
-
defaultValue: null;
|
|
45
|
-
formType: string;
|
|
46
|
-
propType: string;
|
|
47
|
-
};
|
|
48
|
-
remainingTrackColor: {
|
|
49
|
-
group: string;
|
|
50
|
-
label: string;
|
|
51
|
-
description: string;
|
|
52
|
-
editable: boolean;
|
|
53
|
-
required: boolean;
|
|
54
|
-
defaultValue: null;
|
|
55
|
-
formType: string;
|
|
56
|
-
propType: string;
|
|
57
|
-
};
|
|
58
|
-
trackThumbSize: {
|
|
59
|
-
label: string;
|
|
60
|
-
description: string;
|
|
61
|
-
formType: string;
|
|
62
|
-
propType: string;
|
|
63
|
-
group: string;
|
|
64
|
-
defaultValue: null;
|
|
65
|
-
editable: boolean;
|
|
66
|
-
required: boolean;
|
|
67
|
-
step: number;
|
|
68
|
-
};
|
|
69
18
|
};
|
|
70
19
|
};
|