@draftbit/core 46.2.4-a572b7.5 → 46.2.4-a6c053.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/AnimatedCircularProgress.js +2 -12
- package/lib/commonjs/components/Banner.js +4 -24
- package/lib/commonjs/components/CardBlock.js +5 -15
- package/lib/commonjs/components/CardContainer.js +5 -15
- package/lib/commonjs/components/CardContainerRating.js +5 -15
- package/lib/commonjs/components/CardContainerShortImage.js +5 -17
- package/lib/commonjs/components/Carousel.js +10 -34
- package/lib/commonjs/components/Checkbox/CheckboxGroupRow.js +6 -24
- package/lib/commonjs/components/Checkbox/context.js +1 -1
- package/lib/commonjs/components/CircleImage.js +2 -16
- package/lib/commonjs/components/CircularProgress.js +7 -15
- package/lib/commonjs/components/Config.js +1 -1
- package/lib/commonjs/components/Container.js +5 -17
- package/lib/commonjs/components/DeprecatedCardWrapper.js +2 -17
- package/lib/commonjs/components/DeprecatedFAB.js +4 -22
- package/lib/commonjs/components/Elevation.js +3 -15
- package/lib/commonjs/components/FAB.js +5 -20
- package/lib/commonjs/components/FormRow.js +3 -17
- package/lib/commonjs/components/Image.js +3 -16
- package/lib/commonjs/components/NumberInput.js +2 -13
- package/lib/commonjs/components/Picker/PickerComponent.ios.js +13 -42
- package/lib/commonjs/components/Portal/PortalHost.js +15 -27
- package/lib/commonjs/components/RadioButton/RadioButtonGroup.js +3 -16
- package/lib/commonjs/components/RadioButton/RadioButtonRow.js +6 -24
- package/lib/commonjs/components/SVG.js +5 -4
- package/lib/commonjs/components/ScreenContainer.js +5 -23
- package/lib/commonjs/components/Slider.js +5 -24
- package/lib/commonjs/components/StarRating.js +5 -25
- package/lib/commonjs/components/Surface.js +3 -14
- 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/components/Text.js +11 -37
- package/lib/commonjs/components/TextField.js +30 -63
- package/lib/commonjs/components/Touchable.js +2 -16
- package/lib/commonjs/index.js +38 -0
- package/lib/commonjs/mappings/SVG.js +0 -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/Picker/PickerComponent.android.js +5 -23
- package/lib/module/components/ProgressBar.js +7 -23
- package/lib/module/components/SVG.js +5 -4
- package/lib/module/components/Surface.js +2 -16
- 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/index.js +1 -0
- package/lib/module/mappings/SVG.js +1 -3
- package/lib/module/mappings/Table.js +94 -0
- package/lib/module/utilities.js +3 -3
- package/lib/typescript/src/components/SVG.d.ts +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/SVG.d.ts +0 -2
- package/lib/typescript/src/mappings/Table.d.ts +153 -0
- package/lib/typescript/src/utilities.d.ts +3 -3
- package/package.json +3 -3
- package/src/components/Config.js +1 -1
- package/src/components/Config.ts +1 -1
- package/src/components/SVG.js +5 -4
- package/src/components/SVG.tsx +8 -8
- 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/SVG.js +1 -8
- package/src/mappings/SVG.ts +1 -12
- 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
|
@@ -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,3 +1,5 @@
|
|
|
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
|
+
|
|
1
3
|
import * as React from "react";
|
|
2
4
|
import { View, StyleSheet } from "react-native";
|
|
3
5
|
import omit from "lodash.omit";
|
|
@@ -8,6 +10,8 @@ import TextField from "../TextField";
|
|
|
8
10
|
import Touchable from "../Touchable";
|
|
9
11
|
|
|
10
12
|
const Picker = _ref => {
|
|
13
|
+
var _options$find$label, _options$find;
|
|
14
|
+
|
|
11
15
|
let {
|
|
12
16
|
style,
|
|
13
17
|
options,
|
|
@@ -17,9 +21,6 @@ const Picker = _ref => {
|
|
|
17
21
|
onValueChange: onValueChangeOverride = () => {},
|
|
18
22
|
...props
|
|
19
23
|
} = _ref;
|
|
20
|
-
|
|
21
|
-
var _a, _b;
|
|
22
|
-
|
|
23
24
|
const {
|
|
24
25
|
viewStyles: {
|
|
25
26
|
borderRadius,
|
|
@@ -66,7 +67,7 @@ const Picker = _ref => {
|
|
|
66
67
|
};
|
|
67
68
|
|
|
68
69
|
const stylesWithoutMargin = style && omit(StyleSheet.flatten(style), ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft"]);
|
|
69
|
-
const selectedLabel = selectedValue && ((
|
|
70
|
+
const selectedLabel = selectedValue && ((_options$find$label = (_options$find = options.find(o => o.value === selectedValue)) === null || _options$find === void 0 ? void 0 : _options$find.label) !== null && _options$find$label !== void 0 ? _options$find$label : selectedValue);
|
|
70
71
|
return /*#__PURE__*/React.createElement(Touchable, {
|
|
71
72
|
disabled: disabled,
|
|
72
73
|
onPress: toggleFocus,
|
|
@@ -88,25 +89,6 @@ const Picker = _ref => {
|
|
|
88
89
|
label: o.label,
|
|
89
90
|
value: o.value,
|
|
90
91
|
key: o.value
|
|
91
|
-
}))), /*#__PURE__*/React.createElement(View, {
|
|
92
|
-
pointerEvents: "none"
|
|
93
|
-
}, /*#__PURE__*/React.createElement(TextField, { ...props,
|
|
94
|
-
value: selectedLabel,
|
|
95
|
-
placeholder: placeholder,
|
|
96
|
-
// @ts-ignore
|
|
97
|
-
ref: textField,
|
|
98
|
-
disabled: disabled,
|
|
99
|
-
// @ts-expect-error
|
|
100
|
-
style: stylesWithoutMargin
|
|
101
|
-
}))));
|
|
102
|
-
};
|
|
103
|
-
|
|
104
|
-
const styles = StyleSheet.create({
|
|
105
|
-
container: {
|
|
106
|
-
alignSelf: "stretch"
|
|
107
|
-
}
|
|
108
|
-
});
|
|
109
|
-
export default withTheme(Picker); key: o.value
|
|
110
92
|
}))), /*#__PURE__*/React.createElement(View, {
|
|
111
93
|
pointerEvents: "none"
|
|
112
94
|
}, /*#__PURE__*/React.createElement(TextField, _extends({}, props, {
|
|
@@ -1,3 +1,7 @@
|
|
|
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
|
+
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; }
|
|
4
|
+
|
|
1
5
|
import React, { Component } from "react";
|
|
2
6
|
import { Animated, Easing, View, I18nManager } from "react-native";
|
|
3
7
|
const INDETERMINATE_WIDTH_FACTOR = 0.3;
|
|
@@ -6,7 +10,7 @@ export default class ProgressBar extends Component {
|
|
|
6
10
|
constructor(props) {
|
|
7
11
|
super(props);
|
|
8
12
|
|
|
9
|
-
this
|
|
13
|
+
_defineProperty(this, "handleLayout", event => {
|
|
10
14
|
const {
|
|
11
15
|
width = 150,
|
|
12
16
|
onLayout
|
|
@@ -21,7 +25,7 @@ export default class ProgressBar extends Component {
|
|
|
21
25
|
if (onLayout) {
|
|
22
26
|
onLayout(event);
|
|
23
27
|
}
|
|
24
|
-
};
|
|
28
|
+
});
|
|
25
29
|
|
|
26
30
|
const {
|
|
27
31
|
progress: progressP = 0,
|
|
@@ -75,6 +79,7 @@ export default class ProgressBar extends Component {
|
|
|
75
79
|
Animated[animationType](this.state.progress, { ...animationConfig,
|
|
76
80
|
toValue: progress,
|
|
77
81
|
velocity: 0,
|
|
82
|
+
//adjust this value if animation fails - velocity is required
|
|
78
83
|
useNativeDriver
|
|
79
84
|
}).start();
|
|
80
85
|
} else {
|
|
@@ -145,27 +150,6 @@ export default class ProgressBar extends Component {
|
|
|
145
150
|
})
|
|
146
151
|
}]
|
|
147
152
|
};
|
|
148
|
-
return /*#__PURE__*/React.createElement(View, {
|
|
149
|
-
style: [containerStyle, style],
|
|
150
|
-
onLayout: this.handleLayout,
|
|
151
|
-
...restProps
|
|
152
|
-
}, /*#__PURE__*/React.createElement(Animated.View, {
|
|
153
|
-
style: progressStyle
|
|
154
|
-
}), children);
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
}te.progress.interpolate({
|
|
158
|
-
inputRange: [0, 1],
|
|
159
|
-
outputRange: [innerWidth / (I18nManager.isRTL ? 2 : -2), 0]
|
|
160
|
-
})
|
|
161
|
-
}, {
|
|
162
|
-
// Interpolation a temp workaround for https://github.com/facebook/react-native/issues/6278
|
|
163
|
-
scaleX: this.state.progress.interpolate({
|
|
164
|
-
inputRange: [0, 1],
|
|
165
|
-
outputRange: [0.0001, 1]
|
|
166
|
-
})
|
|
167
|
-
}]
|
|
168
|
-
};
|
|
169
153
|
return /*#__PURE__*/React.createElement(View, _extends({
|
|
170
154
|
style: [containerStyle, style],
|
|
171
155
|
onLayout: this.handleLayout
|
|
@@ -5,25 +5,26 @@ import Config from "./Config";
|
|
|
5
5
|
|
|
6
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
|
};
|
|
@@ -1,3 +1,5 @@
|
|
|
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
|
+
|
|
1
3
|
/* Copied from https://github.com/callstack/react-native-paper/blob/main/src/components/Surface.tsx */
|
|
2
4
|
import * as React from "react";
|
|
3
5
|
import { Animated, StyleSheet } from "react-native";
|
|
@@ -36,22 +38,6 @@ const Surface = _ref => {
|
|
|
36
38
|
}
|
|
37
39
|
};
|
|
38
40
|
|
|
39
|
-
return /*#__PURE__*/React.createElement(Animated.View, { ...rest,
|
|
40
|
-
style: [{
|
|
41
|
-
backgroundColor: getBackgroundColor(),
|
|
42
|
-
elevation,
|
|
43
|
-
...evalationStyles,
|
|
44
|
-
...restStyle
|
|
45
|
-
}]
|
|
46
|
-
}, children);
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
export default withTheme(Surface); overlay(elevation, colors.surface);
|
|
50
|
-
} else {
|
|
51
|
-
return colors.surface;
|
|
52
|
-
}
|
|
53
|
-
};
|
|
54
|
-
|
|
55
41
|
return /*#__PURE__*/React.createElement(Animated.View, _extends({}, rest, {
|
|
56
42
|
style: [{
|
|
57
43
|
backgroundColor: getBackgroundColor(),
|
|
@@ -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/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 Button } from "./components/DeprecatedButton";
|
|
@@ -1,15 +1,13 @@
|
|
|
1
|
-
import { COMPONENT_TYPES, createSvgProp
|
|
1
|
+
import { COMPONENT_TYPES, createSvgProp } from "@draftbit/types";
|
|
2
2
|
export const SEED_DATA = {
|
|
3
3
|
name: "SVG",
|
|
4
4
|
tag: "SVG",
|
|
5
5
|
description: "An SVG component",
|
|
6
|
-
packageName: "@draftbit/core",
|
|
7
6
|
category: COMPONENT_TYPES.media,
|
|
8
7
|
layout: {
|
|
9
8
|
width: 100,
|
|
10
9
|
height: 100
|
|
11
10
|
},
|
|
12
|
-
stylesPanelSections: [StylesPanelSections.Size, StylesPanelSections.Margins, StylesPanelSections.Position, StylesPanelSections.Effects],
|
|
13
11
|
props: {
|
|
14
12
|
source: createSvgProp()
|
|
15
13
|
}
|
|
@@ -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"];
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
2
|
import { StyleProp, ImageStyle } from "react-native";
|
|
3
|
-
declare type
|
|
3
|
+
declare type SVGComponentProps = {
|
|
4
4
|
source: string;
|
|
5
5
|
style?: StyleProp<ImageStyle>;
|
|
6
6
|
};
|
|
7
|
-
declare const SVG:
|
|
7
|
+
declare const SVG: ({ source, style }: SVGComponentProps) => JSX.Element;
|
|
8
8
|
export default SVG;
|
|
@@ -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;
|