@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.
Files changed (78) hide show
  1. package/lib/commonjs/components/Banner.js +24 -4
  2. package/lib/commonjs/components/Config.js +1 -1
  3. package/lib/commonjs/components/DeprecatedCardWrapper.js +17 -2
  4. package/lib/commonjs/components/Picker/PickerComponent.android.js +24 -5
  5. package/lib/commonjs/components/RadioButton/RadioButtonFieldGroup.js +11 -2
  6. package/lib/commonjs/components/{Svg.js → SVG.js} +7 -6
  7. package/lib/commonjs/components/Table/index.js +55 -0
  8. package/lib/commonjs/components/Table/table.js +35 -0
  9. package/lib/commonjs/components/Table/tableCell.js +50 -0
  10. package/lib/commonjs/components/Table/tableHeader.js +41 -0
  11. package/lib/commonjs/components/Table/tablePaginator.js +17 -0
  12. package/lib/commonjs/components/Table/tableRow.js +47 -0
  13. package/lib/commonjs/components/Table/tableTitle.js +60 -0
  14. package/lib/commonjs/components/Touchable.js +16 -2
  15. package/lib/commonjs/constants.js +1 -1
  16. package/lib/commonjs/index.js +45 -7
  17. package/lib/commonjs/mappings/{Svg.js → SVG.js} +0 -1
  18. package/lib/commonjs/mappings/StarRating.js +6 -2
  19. package/lib/commonjs/mappings/table.js +103 -0
  20. package/lib/commonjs/utilities.js +2 -2
  21. package/lib/module/components/Config.js +1 -1
  22. package/lib/module/components/Portal/PortalManager.js +20 -12
  23. package/lib/module/components/{Svg.js → SVG.js} +7 -6
  24. package/lib/module/components/Table/index.js +6 -0
  25. package/lib/module/components/Table/table.js +23 -0
  26. package/lib/module/components/Table/tableCell.js +37 -0
  27. package/lib/module/components/Table/tableHeader.js +25 -0
  28. package/lib/module/components/Table/tablePaginator.js +6 -0
  29. package/lib/module/components/Table/tableRow.js +33 -0
  30. package/lib/module/components/Table/tableTitle.js +47 -0
  31. package/lib/module/index.js +2 -1
  32. package/lib/module/mappings/SVG.js +14 -0
  33. package/lib/module/mappings/table.js +94 -0
  34. package/lib/module/utilities.js +3 -3
  35. package/lib/typescript/src/components/SVG.d.ts +8 -0
  36. package/lib/typescript/src/components/Table/index.d.ts +6 -0
  37. package/lib/typescript/src/components/Table/table.d.ts +8 -0
  38. package/lib/typescript/src/components/Table/tableCell.d.ts +10 -0
  39. package/lib/typescript/src/components/Table/tableHeader.d.ts +12 -0
  40. package/lib/typescript/src/components/Table/tablePaginator.d.ts +3 -0
  41. package/lib/typescript/src/components/Table/tableRow.d.ts +12 -0
  42. package/lib/typescript/src/components/Table/tableTitle.d.ts +12 -0
  43. package/lib/typescript/src/index.d.ts +2 -1
  44. package/lib/typescript/src/mappings/{Svg.d.ts → SVG.d.ts} +0 -1
  45. package/lib/typescript/src/mappings/table.d.ts +153 -0
  46. package/lib/typescript/src/utilities.d.ts +3 -3
  47. package/package.json +4 -4
  48. package/src/components/Config.js +1 -1
  49. package/src/components/Config.ts +1 -1
  50. package/src/components/{Svg.js → SVG.js} +6 -5
  51. package/src/components/SVG.tsx +35 -0
  52. package/src/components/Table/index.js +6 -0
  53. package/src/components/Table/index.tsx +6 -0
  54. package/src/components/Table/table.js +10 -0
  55. package/src/components/Table/table.tsx +22 -0
  56. package/src/components/Table/tableCell.js +21 -0
  57. package/src/components/Table/tableCell.tsx +44 -0
  58. package/src/components/Table/tableHeader.js +11 -0
  59. package/src/components/Table/tableHeader.tsx +28 -0
  60. package/src/components/Table/tablePaginator.js +5 -0
  61. package/src/components/Table/tablePaginator.tsx +10 -0
  62. package/src/components/Table/tableRow.js +16 -0
  63. package/src/components/Table/tableRow.tsx +31 -0
  64. package/src/components/Table/tableTitle.js +28 -0
  65. package/src/components/Table/tableTitle.tsx +58 -0
  66. package/src/index.js +2 -1
  67. package/src/index.tsx +10 -1
  68. package/src/mappings/SVG.js +14 -0
  69. package/src/mappings/SVG.ts +15 -0
  70. package/src/mappings/table.js +137 -0
  71. package/src/mappings/table.ts +145 -0
  72. package/src/utilities.js +5 -2
  73. package/src/utilities.ts +13 -2
  74. package/lib/module/mappings/Svg.js +0 -15
  75. package/lib/typescript/src/components/Svg.d.ts +0 -7
  76. package/src/components/Svg.tsx +0 -35
  77. package/src/mappings/Svg.js +0 -20
  78. 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;
@@ -44,8 +44,8 @@ function extractStyles(style) {
44
44
  textDecorationStyle
45
45
  };
46
46
  return {
47
- viewStyles,
48
- textStyles
47
+ viewStyles: (0, _lodash.omitBy)(viewStyles, _lodash.isNil),
48
+ textStyles: (0, _lodash.omitBy)(textStyles, _lodash.isNil)
49
49
  };
50
50
  }
51
51
 
@@ -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-image.svg",
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
- _defineProperty(this, "mount", (key, children) => {
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
- _defineProperty(this, "update", (key, children) => this.setState(state => ({
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
- _defineProperty(this, "unmount", key => this.setState(state => ({
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 Svg = _ref => {
6
+ const SVG = _ref => {
7
7
  let {
8
- source = Config.placeholderSvgURL,
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: source
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: source
23
+ uri: svgSource
23
24
  })), Platform.OS === "web" && /*#__PURE__*/React.createElement(Image, {
24
25
  style: style,
25
26
  source: {
26
- uri: source
27
+ uri: svgSource
27
28
  }
28
29
  }));
29
30
  };
30
31
 
31
- export default Svg;
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,6 @@
1
+ import React from "react";
2
+ import { View, Text } from "react-native";
3
+
4
+ const TablePaginator = () => /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Text, null, "Table Paginator"));
5
+
6
+ export default TablePaginator;
@@ -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;
@@ -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 Svg } from "./components/Svg";
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
+ }];
@@ -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,3 @@
1
+ /// <reference types="react" />
2
+ declare const TablePaginator: () => JSX.Element;
3
+ export default TablePaginator;
@@ -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;