@draftbit/core 46.10.3-106fd0.2 → 46.10.3-1ab4b6.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/Checkbox/CheckboxGroup.js +17 -2
- package/lib/commonjs/components/Shadow.js +15 -2
- package/lib/commonjs/components/Table/Table.js +11 -10
- package/lib/commonjs/components/Table/TableCell.js +3 -3
- package/lib/commonjs/components/Table/TableCommon.js +30 -0
- package/lib/commonjs/components/Table/TableRow.js +4 -4
- package/lib/commonjs/components/Table/index.js +3 -27
- package/lib/commonjs/constants.js +1 -1
- package/lib/commonjs/mappings/Layout.js +85 -177
- package/lib/module/components/AspectRatio.js +1 -18
- package/lib/module/components/Checkbox/CheckboxGroup.js +2 -16
- package/lib/module/components/Checkbox/context.js +1 -1
- package/lib/module/components/CircleImage.js +1 -16
- package/lib/module/components/DeprecatedButton.js +3 -21
- package/lib/module/components/IconButton.js +4 -21
- package/lib/module/components/Pressable.js +2 -15
- package/lib/module/components/Shadow.js +2 -15
- package/lib/module/components/Table/Table.js +7 -7
- package/lib/module/components/Table/TableCell.js +1 -1
- package/lib/module/components/Table/TableCommon.js +21 -0
- package/lib/module/components/Table/TableRow.js +3 -2
- package/lib/module/components/Table/index.js +1 -22
- package/lib/module/components/ToggleButton.js +2 -16
- package/lib/module/constants.js +0 -1
- package/lib/module/mappings/Layout.js +86 -178
- package/lib/typescript/src/components/Table/Table.d.ts +7 -2
- package/lib/typescript/src/components/Table/Table.d.ts.map +1 -1
- package/lib/typescript/src/components/Table/TableCell.d.ts +1 -1
- package/lib/typescript/src/components/Table/TableCell.d.ts.map +1 -1
- package/lib/typescript/src/components/Table/TableCommon.d.ts +20 -0
- package/lib/typescript/src/components/Table/TableCommon.d.ts.map +1 -0
- package/lib/typescript/src/components/Table/TableRow.d.ts +1 -1
- package/lib/typescript/src/components/Table/TableRow.d.ts.map +1 -1
- package/lib/typescript/src/components/Table/index.d.ts +1 -19
- package/lib/typescript/src/components/Table/index.d.ts.map +1 -1
- package/lib/typescript/src/mappings/Layout.d.ts +72 -108
- package/lib/typescript/src/mappings/Layout.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/components/Table/Table.js +4 -2
- package/src/components/Table/Table.tsx +9 -3
- package/src/components/Table/TableCell.js +1 -1
- package/src/components/Table/TableCell.tsx +5 -1
- package/src/components/Table/TableCommon.js +12 -0
- package/src/components/Table/TableCommon.ts +40 -0
- package/src/components/Table/TableRow.js +1 -1
- package/src/components/Table/TableRow.tsx +1 -1
- package/src/components/Table/index.js +1 -13
- package/src/components/Table/index.tsx +1 -42
- package/src/mappings/Layout.js +100 -176
- package/src/mappings/Layout.ts +116 -178
- package/lib/commonjs/mappings/NativeBase/Layout.js +0 -108
- package/lib/module/mappings/NativeBase/Layout.js +0 -101
- package/lib/typescript/src/mappings/NativeBase/Layout.d.ts +0 -133
- package/lib/typescript/src/mappings/NativeBase/Layout.d.ts.map +0 -1
- package/src/mappings/NativeBase/Layout.js +0 -124
- package/src/mappings/NativeBase/Layout.ts +0 -145
|
@@ -9,7 +9,6 @@ var _reactNative = require("react-native");
|
|
|
9
9
|
var _context = require("./context");
|
|
10
10
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
11
11
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
12
|
-
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); }
|
|
13
12
|
const {
|
|
14
13
|
Provider
|
|
15
14
|
} = _context.checkboxGroupContext;
|
|
@@ -31,7 +30,23 @@ const CheckboxGroup = _ref => {
|
|
|
31
30
|
alignItems: "center"
|
|
32
31
|
});
|
|
33
32
|
}
|
|
34
|
-
return /*#__PURE__*/React.createElement(_reactNative.View,
|
|
33
|
+
return /*#__PURE__*/React.createElement(_reactNative.View, {
|
|
34
|
+
style: [{
|
|
35
|
+
minHeight: 40
|
|
36
|
+
}, style],
|
|
37
|
+
...rest
|
|
38
|
+
}, /*#__PURE__*/React.createElement(Provider, {
|
|
39
|
+
value: {
|
|
40
|
+
values,
|
|
41
|
+
onValueChange,
|
|
42
|
+
direction
|
|
43
|
+
}
|
|
44
|
+
}, /*#__PURE__*/React.createElement(_reactNative.View, {
|
|
45
|
+
style: _containerStyle
|
|
46
|
+
}, children)));
|
|
47
|
+
};
|
|
48
|
+
var _default = CheckboxGroup;
|
|
49
|
+
exports.default = _default;s({
|
|
35
50
|
style: [{
|
|
36
51
|
minHeight: 40
|
|
37
52
|
}, style]
|
|
@@ -7,7 +7,6 @@ exports.default = void 0;
|
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
8
|
var _reactNativeShadow = require("react-native-shadow-2");
|
|
9
9
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
|
-
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); }
|
|
11
10
|
const Shadow = _ref => {
|
|
12
11
|
let {
|
|
13
12
|
offsetX = 0,
|
|
@@ -24,7 +23,7 @@ const Shadow = _ref => {
|
|
|
24
23
|
style,
|
|
25
24
|
...rest
|
|
26
25
|
} = _ref;
|
|
27
|
-
return /*#__PURE__*/_react.default.createElement(_reactNativeShadow.Shadow,
|
|
26
|
+
return /*#__PURE__*/_react.default.createElement(_reactNativeShadow.Shadow, {
|
|
28
27
|
offset: [offsetX, offsetY],
|
|
29
28
|
sides: {
|
|
30
29
|
start: showShadowSideStart,
|
|
@@ -39,6 +38,20 @@ const Shadow = _ref => {
|
|
|
39
38
|
bottomEnd: showShadowCornerBottomEnd
|
|
40
39
|
},
|
|
41
40
|
containerStyle: style,
|
|
41
|
+
paintInside: paintInside,
|
|
42
|
+
...rest
|
|
43
|
+
});
|
|
44
|
+
};
|
|
45
|
+
var _default = Shadow;
|
|
46
|
+
exports.default = _default;showShadowSideBottom
|
|
47
|
+
},
|
|
48
|
+
corners: {
|
|
49
|
+
topStart: showShadowCornerTopStart,
|
|
50
|
+
topEnd: showShadowCornerTopEnd,
|
|
51
|
+
bottomStart: showShadowCornerBottomStart,
|
|
52
|
+
bottomEnd: showShadowCornerBottomEnd
|
|
53
|
+
},
|
|
54
|
+
containerStyle: style,
|
|
42
55
|
paintInside: paintInside
|
|
43
56
|
}, rest));
|
|
44
57
|
};
|
|
@@ -3,15 +3,17 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.default = void 0;
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
8
|
var _reactNative = require("react-native");
|
|
9
|
-
var
|
|
9
|
+
var _theming = require("../../theming");
|
|
10
|
+
var _TableCommon = require("./TableCommon");
|
|
10
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
12
|
const Table = _ref => {
|
|
12
13
|
let {
|
|
14
|
+
theme,
|
|
13
15
|
borderWidth = 1,
|
|
14
|
-
borderColor =
|
|
16
|
+
borderColor = theme.colors.divider,
|
|
15
17
|
borderStyle = "solid",
|
|
16
18
|
drawTopBorder = true,
|
|
17
19
|
drawBottomBorder = false,
|
|
@@ -96,7 +98,7 @@ const Table = _ref => {
|
|
|
96
98
|
cellHorizontalPadding,
|
|
97
99
|
cellVerticalPadding
|
|
98
100
|
};
|
|
99
|
-
const borderViewStyle = (0,
|
|
101
|
+
const borderViewStyle = (0, _TableCommon.generateBorderStyles)({
|
|
100
102
|
borderColor,
|
|
101
103
|
borderWidth,
|
|
102
104
|
borderStyle,
|
|
@@ -105,18 +107,17 @@ const Table = _ref => {
|
|
|
105
107
|
drawStartBorder,
|
|
106
108
|
drawEndBorder
|
|
107
109
|
});
|
|
108
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
110
|
+
return /*#__PURE__*/_react.default.createElement(_TableCommon.TableStyleContext.Provider, {
|
|
109
111
|
value: contextValue
|
|
110
112
|
}, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
111
113
|
style: [styles.container, borderViewStyle, style]
|
|
112
114
|
}, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, header), /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, rest, childrenWithoutHeader)));
|
|
113
115
|
};
|
|
114
|
-
exports.Table = Table;
|
|
115
116
|
const styles = _reactNative.StyleSheet.create({
|
|
116
117
|
container: {
|
|
117
118
|
flex: 1
|
|
118
119
|
}
|
|
119
|
-
});
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
120
|
+
});
|
|
121
|
+
var _default = (0, _theming.withTheme)(Table);
|
|
122
|
+
exports.default = _default;
|
|
123
|
+
exports.default = _default;
|
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
8
|
var _reactNative = require("react-native");
|
|
9
|
-
var
|
|
9
|
+
var _TableCommon = require("./TableCommon");
|
|
10
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
11
|
const TableCell = _ref => {
|
|
12
12
|
let {
|
|
@@ -22,8 +22,8 @@ const TableCell = _ref => {
|
|
|
22
22
|
children,
|
|
23
23
|
style
|
|
24
24
|
} = _ref;
|
|
25
|
-
const parentContextValue = _react.default.useContext(
|
|
26
|
-
const borderViewStyle = (0,
|
|
25
|
+
const parentContextValue = _react.default.useContext(_TableCommon.TableStyleContext);
|
|
26
|
+
const borderViewStyle = (0, _TableCommon.generateBorderStyles)({
|
|
27
27
|
borderColor: borderColor || parentContextValue.borderColor,
|
|
28
28
|
borderWidth: borderWidth || parentContextValue.borderWidth,
|
|
29
29
|
borderStyle: borderStyle || parentContextValue.borderStyle,
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.TableStyleContext = void 0;
|
|
7
|
+
exports.generateBorderStyles = generateBorderStyles;
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
|
+
const TableStyleContext = /*#__PURE__*/_react.default.createContext({});
|
|
11
|
+
exports.TableStyleContext = TableStyleContext;
|
|
12
|
+
function generateBorderStyles(_ref) {
|
|
13
|
+
let {
|
|
14
|
+
borderColor,
|
|
15
|
+
borderWidth,
|
|
16
|
+
borderStyle,
|
|
17
|
+
drawTopBorder,
|
|
18
|
+
drawBottomBorder,
|
|
19
|
+
drawStartBorder,
|
|
20
|
+
drawEndBorder
|
|
21
|
+
} = _ref;
|
|
22
|
+
return {
|
|
23
|
+
borderColor,
|
|
24
|
+
borderStyle,
|
|
25
|
+
borderTopWidth: drawTopBorder ? borderWidth : 0,
|
|
26
|
+
borderBottomWidth: drawBottomBorder ? borderWidth : 0,
|
|
27
|
+
borderStartWidth: drawStartBorder ? borderWidth : 0,
|
|
28
|
+
borderEndWidth: drawEndBorder ? borderWidth : 0
|
|
29
|
+
};
|
|
30
|
+
}
|
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
8
|
var _reactNative = require("react-native");
|
|
9
|
-
var
|
|
9
|
+
var _TableCommon = require("./TableCommon");
|
|
10
10
|
var _theming = require("../../theming");
|
|
11
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
12
12
|
const TableRow = _ref => {
|
|
@@ -25,7 +25,7 @@ const TableRow = _ref => {
|
|
|
25
25
|
style,
|
|
26
26
|
theme
|
|
27
27
|
} = _ref;
|
|
28
|
-
const parentContextValue = _react.default.useContext(
|
|
28
|
+
const parentContextValue = _react.default.useContext(_TableCommon.TableStyleContext);
|
|
29
29
|
|
|
30
30
|
//Create context to use and pass to children based on own props or fall back to parent provided context
|
|
31
31
|
const contextValue = {
|
|
@@ -35,7 +35,7 @@ const TableRow = _ref => {
|
|
|
35
35
|
cellHorizontalPadding: cellHorizontalPadding || parentContextValue.cellHorizontalPadding,
|
|
36
36
|
cellVerticalPadding: cellVerticalPadding || parentContextValue.cellVerticalPadding
|
|
37
37
|
};
|
|
38
|
-
const borderViewStyle = (0,
|
|
38
|
+
const borderViewStyle = (0, _TableCommon.generateBorderStyles)({
|
|
39
39
|
borderColor: contextValue.borderColor,
|
|
40
40
|
borderWidth: contextValue.borderWidth,
|
|
41
41
|
borderStyle: contextValue.borderStyle,
|
|
@@ -44,7 +44,7 @@ const TableRow = _ref => {
|
|
|
44
44
|
drawStartBorder,
|
|
45
45
|
drawEndBorder
|
|
46
46
|
});
|
|
47
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
47
|
+
return /*#__PURE__*/_react.default.createElement(_TableCommon.TableStyleContext.Provider, {
|
|
48
48
|
value: contextValue
|
|
49
49
|
}, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
50
50
|
style: [borderViewStyle, isTableHeader ? {
|
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
Object.defineProperty(exports, "Table", {
|
|
7
7
|
enumerable: true,
|
|
8
8
|
get: function () {
|
|
9
|
-
return _Table.
|
|
9
|
+
return _Table.default;
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
12
|
Object.defineProperty(exports, "TableCell", {
|
|
@@ -21,31 +21,7 @@ Object.defineProperty(exports, "TableRow", {
|
|
|
21
21
|
return _TableRow.default;
|
|
22
22
|
}
|
|
23
23
|
});
|
|
24
|
-
|
|
25
|
-
exports.generateBorderStyles = generateBorderStyles;
|
|
26
|
-
var _react = _interopRequireDefault(require("react"));
|
|
27
|
-
var _Table = require("./Table");
|
|
24
|
+
var _Table = _interopRequireDefault(require("./Table"));
|
|
28
25
|
var _TableRow = _interopRequireDefault(require("./TableRow"));
|
|
29
26
|
var _TableCell = _interopRequireDefault(require("./TableCell"));
|
|
30
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
31
|
-
const TableStyleContext = /*#__PURE__*/_react.default.createContext({});
|
|
32
|
-
exports.TableStyleContext = TableStyleContext;
|
|
33
|
-
function generateBorderStyles(_ref) {
|
|
34
|
-
let {
|
|
35
|
-
borderColor,
|
|
36
|
-
borderWidth,
|
|
37
|
-
borderStyle,
|
|
38
|
-
drawTopBorder,
|
|
39
|
-
drawBottomBorder,
|
|
40
|
-
drawStartBorder,
|
|
41
|
-
drawEndBorder
|
|
42
|
-
} = _ref;
|
|
43
|
-
return {
|
|
44
|
-
borderColor,
|
|
45
|
-
borderStyle,
|
|
46
|
-
borderTopWidth: drawTopBorder ? borderWidth : 0,
|
|
47
|
-
borderBottomWidth: drawBottomBorder ? borderWidth : 0,
|
|
48
|
-
borderStartWidth: drawStartBorder ? borderWidth : 0,
|
|
49
|
-
borderEndWidth: drawEndBorder ? borderWidth : 0
|
|
50
|
-
};
|
|
51
|
-
}
|
|
27
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -12,4 +12,4 @@ const APPROX_STATUSBAR_HEIGHT = _reactNative.Platform.select({
|
|
|
12
12
|
android: DEFAULT_STATUSBAR_HEIGHT_EXPO,
|
|
13
13
|
ios: _reactNative.Platform.Version < 11 ? DEFAULT_STATUSBAR_HEIGHT_EXPO : 0
|
|
14
14
|
});
|
|
15
|
-
exports.APPROX_STATUSBAR_HEIGHT = APPROX_STATUSBAR_HEIGHT;
|
|
15
|
+
exports.APPROX_STATUSBAR_HEIGHT = APPROX_STATUSBAR_HEIGHT;AR_HEIGHT;
|
|
@@ -5,196 +5,104 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.SEED_DATA = void 0;
|
|
7
7
|
var _types = require("@draftbit/types");
|
|
8
|
-
const
|
|
9
|
-
name: "Row",
|
|
10
|
-
tag: "Row",
|
|
11
|
-
category: _types.COMPONENT_TYPES.deprecated,
|
|
12
|
-
stylesPanelSections: [_types.StylesPanelSections.NoStyles],
|
|
13
|
-
props: {
|
|
14
|
-
justifyContent: {
|
|
15
|
-
label: "Align Horizontally",
|
|
16
|
-
group: _types.GROUPS.style,
|
|
17
|
-
description: "Align Items Horizontally (on the X Axis)",
|
|
18
|
-
formType: _types.FORM_TYPES.string,
|
|
19
|
-
propType: _types.PROP_TYPES.STRING,
|
|
20
|
-
defaultValue: "flex-start",
|
|
21
|
-
editable: true,
|
|
22
|
-
required: false
|
|
23
|
-
},
|
|
24
|
-
alignItems: {
|
|
25
|
-
label: "Align Vertically",
|
|
26
|
-
group: _types.GROUPS.style,
|
|
27
|
-
description: "Align Items Vertically (on the Y Axis)",
|
|
28
|
-
formType: _types.FORM_TYPES.string,
|
|
29
|
-
propType: _types.PROP_TYPES.STRING,
|
|
30
|
-
defaultValue: "flex-start",
|
|
31
|
-
editable: true,
|
|
32
|
-
required: false
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
}, {
|
|
36
|
-
name: "Spacer",
|
|
37
|
-
tag: "Spacer",
|
|
8
|
+
const SHARED_SEED_DATA = {
|
|
38
9
|
category: _types.COMPONENT_TYPES.layout,
|
|
10
|
+
packageName: "native-base",
|
|
11
|
+
stylesPanelSections: _types.CONTAINER_COMPONENT_STYLES_SECTIONS
|
|
12
|
+
};
|
|
13
|
+
const CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX = _types.CONTAINER_COMPONENT_STYLES_SECTIONS.filter(item => item !== _types.StylesPanelSections.LayoutFlexItems && item !== _types.StylesPanelSections.LayoutContent);
|
|
14
|
+
const SEED_DATA = [{
|
|
15
|
+
name: "Aspect Ratio",
|
|
16
|
+
tag: "AspectRatio",
|
|
17
|
+
description: "Controls the size of the undefined dimension of a node or child component using an aspect ratio",
|
|
18
|
+
...SHARED_SEED_DATA,
|
|
39
19
|
props: {
|
|
40
|
-
|
|
41
|
-
label: "
|
|
42
|
-
description: "
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
editable: true,
|
|
48
|
-
required: false
|
|
49
|
-
},
|
|
50
|
-
right: {
|
|
51
|
-
label: "Right",
|
|
52
|
-
description: "Right",
|
|
53
|
-
formType: _types.FORM_TYPES.number,
|
|
54
|
-
propType: _types.PROP_TYPES.NUMBER,
|
|
55
|
-
group: _types.GROUPS.style,
|
|
56
|
-
defaultValue: 8,
|
|
57
|
-
editable: true,
|
|
58
|
-
required: false
|
|
59
|
-
},
|
|
60
|
-
bottom: {
|
|
61
|
-
label: "Bottom",
|
|
62
|
-
description: "Bottom",
|
|
63
|
-
formType: _types.FORM_TYPES.number,
|
|
64
|
-
propType: _types.PROP_TYPES.NUMBER,
|
|
65
|
-
group: _types.GROUPS.style,
|
|
66
|
-
defaultValue: 8,
|
|
67
|
-
editable: true,
|
|
68
|
-
required: false
|
|
69
|
-
},
|
|
70
|
-
left: {
|
|
71
|
-
label: "Left",
|
|
72
|
-
description: "Left",
|
|
73
|
-
formType: _types.FORM_TYPES.number,
|
|
74
|
-
propType: _types.PROP_TYPES.NUMBER,
|
|
75
|
-
group: _types.GROUPS.style,
|
|
76
|
-
defaultValue: 8,
|
|
77
|
-
editable: true,
|
|
78
|
-
required: false
|
|
79
|
-
}
|
|
80
|
-
}
|
|
20
|
+
ratio: (0, _types.createStaticNumberProp)({
|
|
21
|
+
label: "Ratio",
|
|
22
|
+
description: "The aspect ratio of the container in decimal format (ex: 3/4 -> 1.33)",
|
|
23
|
+
defaultValue: 1.33
|
|
24
|
+
})
|
|
25
|
+
},
|
|
26
|
+
stylesPanelSections: [_types.StylesPanelSections.Background, _types.StylesPanelSections.Size, _types.StylesPanelSections.Margins, _types.StylesPanelSections.Position, _types.StylesPanelSections.Borders, _types.StylesPanelSections.Effects]
|
|
81
27
|
}, {
|
|
82
|
-
name: "
|
|
83
|
-
tag: "
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
props: {
|
|
87
|
-
justifyContent: {
|
|
88
|
-
group: _types.GROUPS.style,
|
|
89
|
-
label: "Justify",
|
|
90
|
-
description: "Justify horizontally",
|
|
91
|
-
formType: _types.FORM_TYPES.string,
|
|
92
|
-
propType: _types.PROP_TYPES.STRING,
|
|
93
|
-
defaultValue: "flex-start",
|
|
94
|
-
editable: true,
|
|
95
|
-
required: false
|
|
96
|
-
},
|
|
97
|
-
alignItems: {
|
|
98
|
-
group: _types.GROUPS.style,
|
|
99
|
-
label: "Align",
|
|
100
|
-
description: "Vertical align",
|
|
101
|
-
formType: _types.FORM_TYPES.string,
|
|
102
|
-
propType: _types.PROP_TYPES.STRING,
|
|
103
|
-
defaultValue: "flex-start",
|
|
104
|
-
editable: true,
|
|
105
|
-
required: false
|
|
106
|
-
}
|
|
107
|
-
}
|
|
28
|
+
name: "Box",
|
|
29
|
+
tag: "Box",
|
|
30
|
+
description: "This is a generic component for low level layout needs. It is similar to a div in HTML",
|
|
31
|
+
...SHARED_SEED_DATA
|
|
108
32
|
}, {
|
|
109
33
|
name: "Center",
|
|
110
34
|
tag: "Center",
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
width: {
|
|
115
|
-
label: "Width",
|
|
116
|
-
description: "Width",
|
|
117
|
-
formType: _types.FORM_TYPES.number,
|
|
118
|
-
propType: _types.PROP_TYPES.NUMBER,
|
|
119
|
-
group: _types.GROUPS.style,
|
|
120
|
-
defaultValue: 240,
|
|
121
|
-
editable: true,
|
|
122
|
-
required: false
|
|
123
|
-
},
|
|
124
|
-
height: {
|
|
125
|
-
label: "Height",
|
|
126
|
-
description: "Height",
|
|
127
|
-
formType: _types.FORM_TYPES.number,
|
|
128
|
-
propType: _types.PROP_TYPES.NUMBER,
|
|
129
|
-
group: _types.GROUPS.style,
|
|
130
|
-
defaultValue: 200,
|
|
131
|
-
editable: true,
|
|
132
|
-
required: false
|
|
133
|
-
},
|
|
134
|
-
bgColor: {
|
|
135
|
-
label: "Background Color",
|
|
136
|
-
description: "Background color",
|
|
137
|
-
formType: _types.FORM_TYPES.color,
|
|
138
|
-
propType: _types.PROP_TYPES.THEME,
|
|
139
|
-
editable: true,
|
|
140
|
-
required: false,
|
|
141
|
-
defaultValue: "light",
|
|
142
|
-
group: _types.GROUPS.style
|
|
143
|
-
}
|
|
144
|
-
}
|
|
35
|
+
description: "Center aligns its contents to the center within itself",
|
|
36
|
+
...SHARED_SEED_DATA,
|
|
37
|
+
stylesPanelSections: CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX
|
|
145
38
|
}, {
|
|
146
39
|
name: "Circle",
|
|
147
40
|
tag: "Circle",
|
|
148
|
-
|
|
149
|
-
|
|
41
|
+
description: "Center aligns its contents to the center within itself with a round border radius",
|
|
42
|
+
...SHARED_SEED_DATA,
|
|
43
|
+
stylesPanelSections: CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX
|
|
44
|
+
}, {
|
|
45
|
+
name: "Container",
|
|
46
|
+
tag: "Container",
|
|
47
|
+
description: "The Container restricts a content's width according to current breakpoint, while keeping the size fluid",
|
|
150
48
|
props: {
|
|
151
|
-
|
|
152
|
-
label: "
|
|
153
|
-
description: "
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
49
|
+
centerContent: (0, _types.createStaticBoolProp)({
|
|
50
|
+
label: "Center content",
|
|
51
|
+
description: "Center child elements based on their content width",
|
|
52
|
+
defaultValue: true
|
|
53
|
+
})
|
|
54
|
+
},
|
|
55
|
+
...SHARED_SEED_DATA
|
|
56
|
+
}, {
|
|
57
|
+
name: "Column",
|
|
58
|
+
tag: "Column",
|
|
59
|
+
description: "Column aligns items vertically",
|
|
60
|
+
layout: {
|
|
61
|
+
flexDirection: "column"
|
|
62
|
+
},
|
|
63
|
+
...SHARED_SEED_DATA
|
|
64
|
+
}, {
|
|
65
|
+
name: "Row",
|
|
66
|
+
tag: "Row",
|
|
67
|
+
description: "Column aligns items horizontally",
|
|
68
|
+
layout: {
|
|
69
|
+
flexDirection: "row"
|
|
70
|
+
},
|
|
71
|
+
...SHARED_SEED_DATA
|
|
72
|
+
}, {
|
|
73
|
+
name: "Spacer",
|
|
74
|
+
tag: "Spacer",
|
|
75
|
+
description: "An adjustable, empty space that can be used to tune the spacing between child elements within Flex",
|
|
76
|
+
layout: {
|
|
77
|
+
flex: 1
|
|
78
|
+
},
|
|
79
|
+
...SHARED_SEED_DATA,
|
|
80
|
+
stylesPanelSections: [_types.StylesPanelSections.LayoutSelectedItem, _types.StylesPanelSections.Background, _types.StylesPanelSections.Margins]
|
|
81
|
+
}, {
|
|
82
|
+
name: "Stack",
|
|
83
|
+
tag: "Stack",
|
|
84
|
+
description: "Stack aligns items vertically or horizontally based on the direction prop",
|
|
85
|
+
...SHARED_SEED_DATA,
|
|
86
|
+
props: {
|
|
87
|
+
isDisabled: (0, _types.createBoolProp)({
|
|
88
|
+
label: "Disabled",
|
|
89
|
+
description: "If true, the Stack will be disabled"
|
|
90
|
+
}),
|
|
91
|
+
isInvalid: (0, _types.createBoolProp)({
|
|
92
|
+
label: "Invalid",
|
|
93
|
+
description: "If true, the Stack will be invalid"
|
|
94
|
+
})
|
|
171
95
|
}
|
|
172
96
|
}, {
|
|
173
|
-
name: "
|
|
174
|
-
tag: "
|
|
175
|
-
|
|
176
|
-
|
|
97
|
+
name: "ZStack",
|
|
98
|
+
tag: "ZStack",
|
|
99
|
+
description: "ZStack aligns items to the z-axis",
|
|
100
|
+
...SHARED_SEED_DATA,
|
|
177
101
|
props: {
|
|
178
|
-
|
|
179
|
-
label: "
|
|
180
|
-
description: "
|
|
181
|
-
|
|
182
|
-
propType: _types.PROP_TYPES.NUMBER,
|
|
183
|
-
group: _types.GROUPS.style,
|
|
184
|
-
defaultValue: 50,
|
|
185
|
-
editable: true,
|
|
186
|
-
required: false
|
|
187
|
-
},
|
|
188
|
-
bgColor: {
|
|
189
|
-
label: "Background Color",
|
|
190
|
-
description: "Background color",
|
|
191
|
-
formType: _types.FORM_TYPES.color,
|
|
192
|
-
propType: _types.PROP_TYPES.THEME,
|
|
193
|
-
editable: true,
|
|
194
|
-
required: false,
|
|
195
|
-
defaultValue: "light",
|
|
196
|
-
group: _types.GROUPS.style
|
|
197
|
-
}
|
|
102
|
+
reversed: (0, _types.createBoolProp)({
|
|
103
|
+
label: "Reversed",
|
|
104
|
+
description: "Determines whether to reverse the direction of items"
|
|
105
|
+
})
|
|
198
106
|
}
|
|
199
107
|
}];
|
|
200
108
|
exports.SEED_DATA = SEED_DATA;
|
|
@@ -1,3 +1,4 @@
|
|
|
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); }
|
|
1
2
|
import React from "react";
|
|
2
3
|
import { View, StyleSheet } from "react-native";
|
|
3
4
|
const AspectRatio = props => {
|
|
@@ -26,24 +27,6 @@ const AspectRatio = props => {
|
|
|
26
27
|
});
|
|
27
28
|
}
|
|
28
29
|
}
|
|
29
|
-
return /*#__PURE__*/React.createElement(View, {
|
|
30
|
-
...props,
|
|
31
|
-
style: style,
|
|
32
|
-
onLayout: _ref => {
|
|
33
|
-
let {
|
|
34
|
-
nativeEvent: {
|
|
35
|
-
layout: l
|
|
36
|
-
}
|
|
37
|
-
} = _ref;
|
|
38
|
-
return setLayout(l);
|
|
39
|
-
}
|
|
40
|
-
}, props.children);
|
|
41
|
-
};
|
|
42
|
-
export default AspectRatio;idth,
|
|
43
|
-
height: width * (1 / aspectRatio)
|
|
44
|
-
});
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
30
|
return /*#__PURE__*/React.createElement(View, _extends({}, props, {
|
|
48
31
|
style: style,
|
|
49
32
|
onLayout: _ref => {
|
|
@@ -1,3 +1,4 @@
|
|
|
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); }
|
|
1
2
|
import * as React from "react";
|
|
2
3
|
import { View } from "react-native";
|
|
3
4
|
import { checkboxGroupContext, Direction } from "./context";
|
|
@@ -22,22 +23,7 @@ const CheckboxGroup = _ref => {
|
|
|
22
23
|
alignItems: "center"
|
|
23
24
|
});
|
|
24
25
|
}
|
|
25
|
-
return /*#__PURE__*/React.createElement(View, {
|
|
26
|
-
style: [{
|
|
27
|
-
minHeight: 40
|
|
28
|
-
}, style],
|
|
29
|
-
...rest
|
|
30
|
-
}, /*#__PURE__*/React.createElement(Provider, {
|
|
31
|
-
value: {
|
|
32
|
-
values,
|
|
33
|
-
onValueChange,
|
|
34
|
-
direction
|
|
35
|
-
}
|
|
36
|
-
}, /*#__PURE__*/React.createElement(View, {
|
|
37
|
-
style: _containerStyle
|
|
38
|
-
}, children)));
|
|
39
|
-
};
|
|
40
|
-
export default CheckboxGroup;PURE__*/React.createElement(View, _extends({
|
|
26
|
+
return /*#__PURE__*/React.createElement(View, _extends({
|
|
41
27
|
style: [{
|
|
42
28
|
minHeight: 40
|
|
43
29
|
}, style]
|
|
@@ -1,3 +1,4 @@
|
|
|
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); }
|
|
1
2
|
import * as React from "react";
|
|
2
3
|
import { Image } from "react-native";
|
|
3
4
|
import Config from "./Config";
|
|
@@ -9,22 +10,6 @@ const CircleImage = _ref => {
|
|
|
9
10
|
...props
|
|
10
11
|
} = _ref;
|
|
11
12
|
const borderRadius = size / 2;
|
|
12
|
-
return /*#__PURE__*/React.createElement(Image, {
|
|
13
|
-
style: [{
|
|
14
|
-
width: size,
|
|
15
|
-
height: size,
|
|
16
|
-
borderRadius
|
|
17
|
-
}, style],
|
|
18
|
-
source: typeof source === "string" ? {
|
|
19
|
-
uri: source
|
|
20
|
-
} : source,
|
|
21
|
-
resizeMode: "cover",
|
|
22
|
-
...props
|
|
23
|
-
});
|
|
24
|
-
};
|
|
25
|
-
export default CircleImage;props
|
|
26
|
-
} = _ref;
|
|
27
|
-
const borderRadius = size / 2;
|
|
28
13
|
return /*#__PURE__*/React.createElement(Image, _extends({
|
|
29
14
|
style: [{
|
|
30
15
|
width: size,
|