@draftbit/core 46.7.8-9c448b.2 → 46.7.8
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/Divider.js +14 -1
- package/lib/commonjs/components/Elevation.js +14 -2
- package/lib/commonjs/components/Picker/Picker.js +7 -13
- package/lib/commonjs/index.js +0 -13
- package/lib/module/components/Picker/Picker.js +7 -13
- package/lib/module/index.js +0 -1
- package/lib/typescript/src/components/Picker/Picker.d.ts.map +1 -1
- package/lib/typescript/src/index.d.ts +0 -1
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/package.json +3 -4
- package/src/components/Picker/Picker.js +5 -11
- package/src/components/Picker/Picker.tsx +6 -16
- package/src/index.js +0 -1
- package/src/index.tsx +0 -2
- package/lib/commonjs/components/DeckSwiper/DeckSwiper.js +0 -73
- package/lib/commonjs/components/DeckSwiper/DeckSwiperCard.js +0 -35
- package/lib/commonjs/components/DeckSwiper/index.js +0 -20
- package/lib/commonjs/mappings/DeckSwiper.js +0 -52
- package/lib/commonjs/mappings/DeckSwiperCard.js +0 -16
- package/lib/module/components/DeckSwiper/DeckSwiper.js +0 -65
- package/lib/module/components/DeckSwiper/DeckSwiperCard.js +0 -27
- package/lib/module/components/DeckSwiper/index.js +0 -2
- package/lib/module/mappings/DeckSwiper.js +0 -45
- package/lib/module/mappings/DeckSwiperCard.js +0 -9
- package/lib/typescript/src/components/DeckSwiper/DeckSwiper.d.ts +0 -15
- package/lib/typescript/src/components/DeckSwiper/DeckSwiper.d.ts.map +0 -1
- package/lib/typescript/src/components/DeckSwiper/DeckSwiperCard.d.ts +0 -13
- package/lib/typescript/src/components/DeckSwiper/DeckSwiperCard.d.ts.map +0 -1
- package/lib/typescript/src/components/DeckSwiper/index.d.ts +0 -3
- package/lib/typescript/src/components/DeckSwiper/index.d.ts.map +0 -1
- package/lib/typescript/src/mappings/DeckSwiper.d.ts +0 -83
- package/lib/typescript/src/mappings/DeckSwiper.d.ts.map +0 -1
- package/lib/typescript/src/mappings/DeckSwiperCard.d.ts +0 -9
- package/lib/typescript/src/mappings/DeckSwiperCard.d.ts.map +0 -1
- package/src/components/DeckSwiper/DeckSwiper.js +0 -34
- package/src/components/DeckSwiper/DeckSwiper.tsx +0 -93
- package/src/components/DeckSwiper/DeckSwiperCard.js +0 -22
- package/src/components/DeckSwiper/DeckSwiperCard.tsx +0 -42
- package/src/components/DeckSwiper/index.js +0 -2
- package/src/components/DeckSwiper/index.tsx +0 -2
- package/src/mappings/DeckSwiper.js +0 -45
- package/src/mappings/DeckSwiper.ts +0 -54
- package/src/mappings/DeckSwiperCard.js +0 -9
- package/src/mappings/DeckSwiperCard.ts +0 -13
|
@@ -9,7 +9,6 @@ var _reactNative = require("react-native");
|
|
|
9
9
|
var _theming = require("../theming");
|
|
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 Divider = _ref => {
|
|
14
13
|
let {
|
|
15
14
|
style,
|
|
@@ -19,6 +18,20 @@ const Divider = _ref => {
|
|
|
19
18
|
},
|
|
20
19
|
...rest
|
|
21
20
|
} = _ref;
|
|
21
|
+
return /*#__PURE__*/React.createElement(_reactNative.View, {
|
|
22
|
+
style: [{
|
|
23
|
+
backgroundColor: color || colors.divider,
|
|
24
|
+
height: _reactNative.StyleSheet.hairlineWidth
|
|
25
|
+
}, style],
|
|
26
|
+
...rest
|
|
27
|
+
});
|
|
28
|
+
};
|
|
29
|
+
var _default = (0, _theming.withTheme)(Divider);
|
|
30
|
+
exports.default = _default;eme: {
|
|
31
|
+
colors
|
|
32
|
+
},
|
|
33
|
+
...rest
|
|
34
|
+
} = _ref;
|
|
22
35
|
return /*#__PURE__*/React.createElement(_reactNative.View, _extends({
|
|
23
36
|
style: [{
|
|
24
37
|
backgroundColor: color || colors.divider,
|
|
@@ -11,7 +11,6 @@ var _theming = require("../theming");
|
|
|
11
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
12
12
|
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); }
|
|
13
13
|
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; }
|
|
14
|
-
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); }
|
|
15
14
|
/* directly copied from https://github.com/callstack/react-native-paper/blob/main/src/components/Surface.tsx#L62 */
|
|
16
15
|
const Elevation = _ref => {
|
|
17
16
|
let {
|
|
@@ -28,11 +27,24 @@ const Elevation = _ref => {
|
|
|
28
27
|
colors
|
|
29
28
|
} = theme;
|
|
30
29
|
const borderRadius = radius;
|
|
31
|
-
return /*#__PURE__*/React.createElement(_reactNative.Animated.View,
|
|
30
|
+
return /*#__PURE__*/React.createElement(_reactNative.Animated.View, {
|
|
31
|
+
...rest,
|
|
32
32
|
style: [{
|
|
33
33
|
borderRadius,
|
|
34
34
|
backgroundColor: colors.surface
|
|
35
35
|
}, elevation ? (0, _shadow.default)(elevation) : null, style]
|
|
36
|
+
}, /*#__PURE__*/React.createElement(_reactNative.View, {
|
|
37
|
+
style: {
|
|
38
|
+
overflow: "hidden",
|
|
39
|
+
borderRadius
|
|
40
|
+
}
|
|
41
|
+
}, children));
|
|
42
|
+
};
|
|
43
|
+
var _default = (0, _theming.withTheme)(Elevation);
|
|
44
|
+
exports.default = _default;
|
|
45
|
+
borderRadius,
|
|
46
|
+
backgroundColor: colors.surface
|
|
47
|
+
}, elevation ? (0, _shadow.default)(elevation) : null, style]
|
|
36
48
|
}), /*#__PURE__*/React.createElement(_reactNative.View, {
|
|
37
49
|
style: {
|
|
38
50
|
overflow: "hidden",
|
|
@@ -57,7 +57,6 @@ const Picker = _ref => {
|
|
|
57
57
|
placeholder,
|
|
58
58
|
value,
|
|
59
59
|
disabled = false,
|
|
60
|
-
theme,
|
|
61
60
|
assistiveText,
|
|
62
61
|
label,
|
|
63
62
|
iconColor = unstyledColor,
|
|
@@ -95,9 +94,6 @@ const Picker = _ref => {
|
|
|
95
94
|
value: placeholder,
|
|
96
95
|
label: placeholder
|
|
97
96
|
}, ...normalizedOptions] : normalizedOptions;
|
|
98
|
-
const {
|
|
99
|
-
colors
|
|
100
|
-
} = theme;
|
|
101
97
|
const {
|
|
102
98
|
viewStyles,
|
|
103
99
|
textStyles
|
|
@@ -220,12 +216,10 @@ const Picker = _ref => {
|
|
|
220
216
|
style: styles.primaryTextContainer
|
|
221
217
|
}, labelText, /*#__PURE__*/React.createElement(_reactNative.Text, {
|
|
222
218
|
style: primaryTextStyle
|
|
223
|
-
}, String(selectedLabel !== null && selectedLabel !== void 0 ? selectedLabel : placeholder))), rightIcon)), assistiveTextLabel), isIos && pickerVisible ? /*#__PURE__*/React.createElement(_Portal.default, null, /*#__PURE__*/React.createElement(
|
|
224
|
-
style:
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
}, /*#__PURE__*/React.createElement(_reactNativeSafeAreaContext.SafeAreaView, {
|
|
228
|
-
style: styles.iosSafeArea
|
|
219
|
+
}, String(selectedLabel !== null && selectedLabel !== void 0 ? selectedLabel : placeholder))), rightIcon)), assistiveTextLabel), isIos && pickerVisible ? /*#__PURE__*/React.createElement(_Portal.default, null, /*#__PURE__*/React.createElement(_reactNativeSafeAreaContext.SafeAreaView, {
|
|
220
|
+
style: styles.iosPicker
|
|
221
|
+
}, /*#__PURE__*/React.createElement(_reactNative.View, {
|
|
222
|
+
style: styles.iosPickerContent
|
|
229
223
|
}, /*#__PURE__*/React.createElement(_DeprecatedButton.default, {
|
|
230
224
|
Icon: Icon,
|
|
231
225
|
type: "text",
|
|
@@ -297,10 +291,10 @@ const styles = _reactNative.StyleSheet.create({
|
|
|
297
291
|
justifyContent: "center",
|
|
298
292
|
width: "100%",
|
|
299
293
|
maxWidth: deviceWidth,
|
|
300
|
-
maxHeight: deviceHeight
|
|
294
|
+
maxHeight: deviceHeight,
|
|
295
|
+
backgroundColor: "white"
|
|
301
296
|
},
|
|
302
|
-
|
|
303
|
-
backgroundColor: "white",
|
|
297
|
+
iosPickerContent: {
|
|
304
298
|
flexDirection: "column",
|
|
305
299
|
width: "100%",
|
|
306
300
|
maxWidth: deviceWidth
|
package/lib/commonjs/index.js
CHANGED
|
@@ -123,18 +123,6 @@ Object.defineProperty(exports, "DatePicker", {
|
|
|
123
123
|
return _DatePicker.default;
|
|
124
124
|
}
|
|
125
125
|
});
|
|
126
|
-
Object.defineProperty(exports, "DeckSwiper", {
|
|
127
|
-
enumerable: true,
|
|
128
|
-
get: function () {
|
|
129
|
-
return _DeckSwiper.DeckSwiper;
|
|
130
|
-
}
|
|
131
|
-
});
|
|
132
|
-
Object.defineProperty(exports, "DeckSwiperCard", {
|
|
133
|
-
enumerable: true,
|
|
134
|
-
get: function () {
|
|
135
|
-
return _DeckSwiper.DeckSwiperCard;
|
|
136
|
-
}
|
|
137
|
-
});
|
|
138
126
|
Object.defineProperty(exports, "DefaultTheme", {
|
|
139
127
|
enumerable: true,
|
|
140
128
|
get: function () {
|
|
@@ -413,7 +401,6 @@ var _ActionSheet = require("./components/ActionSheet");
|
|
|
413
401
|
var _Swiper = require("./components/Swiper");
|
|
414
402
|
var _Layout = require("./components/Layout");
|
|
415
403
|
var _index = require("./components/RadioButton/index");
|
|
416
|
-
var _DeckSwiper = require("./components/DeckSwiper");
|
|
417
404
|
var _DatePicker = _interopRequireDefault(require("./components/DatePicker/DatePicker"));
|
|
418
405
|
var _Picker = _interopRequireDefault(require("./components/Picker/Picker"));
|
|
419
406
|
var _ProgressBar = _interopRequireDefault(require("./components/ProgressBar"));
|
|
@@ -48,7 +48,6 @@ const Picker = _ref => {
|
|
|
48
48
|
placeholder,
|
|
49
49
|
value,
|
|
50
50
|
disabled = false,
|
|
51
|
-
theme,
|
|
52
51
|
assistiveText,
|
|
53
52
|
label,
|
|
54
53
|
iconColor = unstyledColor,
|
|
@@ -86,9 +85,6 @@ const Picker = _ref => {
|
|
|
86
85
|
value: placeholder,
|
|
87
86
|
label: placeholder
|
|
88
87
|
}, ...normalizedOptions] : normalizedOptions;
|
|
89
|
-
const {
|
|
90
|
-
colors
|
|
91
|
-
} = theme;
|
|
92
88
|
const {
|
|
93
89
|
viewStyles,
|
|
94
90
|
textStyles
|
|
@@ -211,12 +207,10 @@ const Picker = _ref => {
|
|
|
211
207
|
style: styles.primaryTextContainer
|
|
212
208
|
}, labelText, /*#__PURE__*/React.createElement(Text, {
|
|
213
209
|
style: primaryTextStyle
|
|
214
|
-
}, String(selectedLabel !== null && selectedLabel !== void 0 ? selectedLabel : placeholder))), rightIcon)), assistiveTextLabel), isIos && pickerVisible ? /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(
|
|
215
|
-
style:
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
}, /*#__PURE__*/React.createElement(SafeAreaView, {
|
|
219
|
-
style: styles.iosSafeArea
|
|
210
|
+
}, String(selectedLabel !== null && selectedLabel !== void 0 ? selectedLabel : placeholder))), rightIcon)), assistiveTextLabel), isIos && pickerVisible ? /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(SafeAreaView, {
|
|
211
|
+
style: styles.iosPicker
|
|
212
|
+
}, /*#__PURE__*/React.createElement(View, {
|
|
213
|
+
style: styles.iosPickerContent
|
|
220
214
|
}, /*#__PURE__*/React.createElement(Button, {
|
|
221
215
|
Icon: Icon,
|
|
222
216
|
type: "text",
|
|
@@ -288,10 +282,10 @@ const styles = StyleSheet.create({
|
|
|
288
282
|
justifyContent: "center",
|
|
289
283
|
width: "100%",
|
|
290
284
|
maxWidth: deviceWidth,
|
|
291
|
-
maxHeight: deviceHeight
|
|
285
|
+
maxHeight: deviceHeight,
|
|
286
|
+
backgroundColor: "white"
|
|
292
287
|
},
|
|
293
|
-
|
|
294
|
-
backgroundColor: "white",
|
|
288
|
+
iosPickerContent: {
|
|
295
289
|
flexDirection: "column",
|
|
296
290
|
width: "100%",
|
|
297
291
|
maxWidth: deviceWidth
|
package/lib/module/index.js
CHANGED
|
@@ -31,7 +31,6 @@ 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 { DeckSwiper, DeckSwiperCard } from "./components/DeckSwiper";
|
|
35
34
|
|
|
36
35
|
/* Deprecated: Fix or Delete! */
|
|
37
36
|
export { default as DatePicker } from "./components/DatePicker/DatePicker";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Picker.d.ts","sourceRoot":"","sources":["../../../../../src/components/Picker/Picker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAKL,SAAS,EACT,SAAS,EAEV,MAAM,cAAc,CAAC;AAStB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAQtD,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,oBAAY,WAAW,GAAG;IACxB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,GAAG;QAAE,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,YAAY,EAAE,GAAG,MAAM,EAAE,CAAC;IACnC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC;IAC7B,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;CACxB,CAAC;;;;
|
|
1
|
+
{"version":3,"file":"Picker.d.ts","sourceRoot":"","sources":["../../../../../src/components/Picker/Picker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAKL,SAAS,EACT,SAAS,EAEV,MAAM,cAAc,CAAC;AAStB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAQtD,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,oBAAY,WAAW,GAAG;IACxB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,GAAG;QAAE,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,YAAY,EAAE,GAAG,MAAM,EAAE,CAAC;IACnC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC;IAC7B,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;CACxB,CAAC;;;;AAiaF,wBAAiC"}
|
|
@@ -31,7 +31,6 @@ 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 { DeckSwiper, DeckSwiperCard } from "./components/DeckSwiper";
|
|
35
34
|
export { default as DatePicker } from "./components/DatePicker/DatePicker";
|
|
36
35
|
export { default as Picker } from "./components/Picker/Picker";
|
|
37
36
|
export { default as ProgressBar } from "./components/ProgressBar";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAEhE,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAChF,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvE,OAAO,EACL,WAAW,EACX,eAAe,EACf,iBAAiB,GAClB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEzD,OAAO,EACL,MAAM,EACN,MAAM,EACN,MAAM,EACN,GAAG,EACH,KAAK,EACL,MAAM,GACP,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EACL,WAAW,EACX,gBAAgB,EAChB,cAAc,EACd,qBAAqB,GACtB,MAAM,gCAAgC,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAEhE,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAChF,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvE,OAAO,EACL,WAAW,EACX,eAAe,EACf,iBAAiB,GAClB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEzD,OAAO,EACL,MAAM,EACN,MAAM,EACN,MAAM,EACN,GAAG,EACH,KAAK,EACL,MAAM,GACP,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EACL,WAAW,EACX,gBAAgB,EAChB,cAAc,EACd,qBAAqB,GACtB,MAAM,gCAAgC,CAAC;AAGxC,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,sCAAsC,CAAC;AAC1F,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@draftbit/core",
|
|
3
|
-
"version": "46.7.8
|
|
3
|
+
"version": "46.7.8",
|
|
4
4
|
"description": "Core (non-native) Components",
|
|
5
5
|
"main": "lib/commonjs/index.js",
|
|
6
6
|
"module": "lib/module/index.js",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"dependencies": {
|
|
42
42
|
"@date-io/date-fns": "^1.3.13",
|
|
43
43
|
"@draftbit/react-theme-provider": "^2.1.1",
|
|
44
|
-
"@draftbit/types": "^46.7.8
|
|
44
|
+
"@draftbit/types": "^46.7.8",
|
|
45
45
|
"@material-ui/core": "^4.11.0",
|
|
46
46
|
"@material-ui/pickers": "^3.2.10",
|
|
47
47
|
"@react-native-community/slider": "4.2.3",
|
|
@@ -53,7 +53,6 @@
|
|
|
53
53
|
"lodash.isnumber": "^3.0.3",
|
|
54
54
|
"lodash.omit": "^4.5.0",
|
|
55
55
|
"lodash.tonumber": "^4.0.3",
|
|
56
|
-
"react-native-deck-swiper": "^2.0.12",
|
|
57
56
|
"react-native-modal-datetime-picker": "^13.0.0",
|
|
58
57
|
"react-native-svg": "12.3.0",
|
|
59
58
|
"react-native-typography": "^1.4.1",
|
|
@@ -92,5 +91,5 @@
|
|
|
92
91
|
]
|
|
93
92
|
]
|
|
94
93
|
},
|
|
95
|
-
"gitHead": "
|
|
94
|
+
"gitHead": "3e7e1957fd3bcfd75b854e1e2a0ec688b9d1e330"
|
|
96
95
|
}
|
|
@@ -35,7 +35,7 @@ const isIos = Platform.OS === "ios";
|
|
|
35
35
|
const unstyledColor = "rgba(165, 173, 183, 1)";
|
|
36
36
|
const disabledColor = "rgb(240, 240, 240)";
|
|
37
37
|
const errorColor = "rgba(255, 69, 100, 1)";
|
|
38
|
-
const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style, placeholder, value, disabled = false,
|
|
38
|
+
const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style, placeholder, value, disabled = false, assistiveText, label, iconColor = unstyledColor, iconSize = 24, leftIconMode = "inset", leftIconName, placeholderTextColor = unstyledColor, rightIconName, type = "solid", }) => {
|
|
39
39
|
var _a, _b;
|
|
40
40
|
const androidPickerRef = React.useRef(undefined);
|
|
41
41
|
const [internalValue, setInternalValue] = React.useState(value || defaultValue);
|
|
@@ -63,7 +63,6 @@ const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style,
|
|
|
63
63
|
const pickerOptions = placeholder
|
|
64
64
|
? [{ value: placeholder, label: placeholder }, ...normalizedOptions]
|
|
65
65
|
: normalizedOptions;
|
|
66
|
-
const { colors } = theme;
|
|
67
66
|
const { viewStyles, textStyles } = extractStyles(style);
|
|
68
67
|
const additionalBorderStyles = ["backgroundColor"];
|
|
69
68
|
const additionalMarginStyles = [
|
|
@@ -183,13 +182,8 @@ const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style,
|
|
|
183
182
|
rightIcon)),
|
|
184
183
|
assistiveTextLabel),
|
|
185
184
|
isIos && pickerVisible ? (React.createElement(Portal, null,
|
|
186
|
-
React.createElement(
|
|
187
|
-
|
|
188
|
-
{
|
|
189
|
-
backgroundColor: colors.divider,
|
|
190
|
-
},
|
|
191
|
-
] },
|
|
192
|
-
React.createElement(SafeAreaView, { style: styles.iosSafeArea },
|
|
185
|
+
React.createElement(SafeAreaView, { style: styles.iosPicker },
|
|
186
|
+
React.createElement(View, { style: styles.iosPickerContent },
|
|
193
187
|
React.createElement(Button, { Icon: Icon, type: "text", onPress: togglePickerVisible, style: styles.iosButton }, "Close"),
|
|
194
188
|
React.createElement(NativePicker, { style: styles.iosNativePicker, selectedValue: internalValue, onValueChange: handleValueChange }, pickerOptions.map((option) => (React.createElement(NativePicker.Item, { label: option.label, value: option.value, key: option.value })))))))) : null,
|
|
195
189
|
!isIos && pickerVisible ? (React.createElement(NativePicker, { enabled: pickerVisible, selectedValue: internalValue, onValueChange: handleValueChange, style: styles.nonIosPicker, ref: androidPickerRef, onBlur: () => setPickerVisible(false) }, pickerOptions.map((option) => (React.createElement(NativePicker.Item, { label: option.label, value: option.value, key: option.value }))))) : null));
|
|
@@ -239,9 +233,9 @@ const styles = StyleSheet.create({
|
|
|
239
233
|
width: "100%",
|
|
240
234
|
maxWidth: deviceWidth,
|
|
241
235
|
maxHeight: deviceHeight,
|
|
242
|
-
},
|
|
243
|
-
iosSafeArea: {
|
|
244
236
|
backgroundColor: "white",
|
|
237
|
+
},
|
|
238
|
+
iosPickerContent: {
|
|
245
239
|
flexDirection: "column",
|
|
246
240
|
width: "100%",
|
|
247
241
|
maxWidth: deviceWidth,
|
|
@@ -98,7 +98,6 @@ const Picker: React.FC<PickerProps> = ({
|
|
|
98
98
|
placeholder,
|
|
99
99
|
value,
|
|
100
100
|
disabled = false,
|
|
101
|
-
theme,
|
|
102
101
|
assistiveText,
|
|
103
102
|
label,
|
|
104
103
|
iconColor = unstyledColor,
|
|
@@ -145,8 +144,6 @@ const Picker: React.FC<PickerProps> = ({
|
|
|
145
144
|
? [{ value: placeholder, label: placeholder }, ...normalizedOptions]
|
|
146
145
|
: normalizedOptions;
|
|
147
146
|
|
|
148
|
-
const { colors } = theme;
|
|
149
|
-
|
|
150
147
|
const { viewStyles, textStyles } = extractStyles(style);
|
|
151
148
|
|
|
152
149
|
const additionalBorderStyles = ["backgroundColor"];
|
|
@@ -347,15 +344,8 @@ const Picker: React.FC<PickerProps> = ({
|
|
|
347
344
|
{/* iosPicker */}
|
|
348
345
|
{isIos && pickerVisible ? (
|
|
349
346
|
<Portal>
|
|
350
|
-
<
|
|
351
|
-
style={
|
|
352
|
-
styles.iosPicker,
|
|
353
|
-
{
|
|
354
|
-
backgroundColor: colors.divider,
|
|
355
|
-
},
|
|
356
|
-
]}
|
|
357
|
-
>
|
|
358
|
-
<SafeAreaView style={styles.iosSafeArea}>
|
|
347
|
+
<SafeAreaView style={styles.iosPicker}>
|
|
348
|
+
<View style={styles.iosPickerContent}>
|
|
359
349
|
<Button
|
|
360
350
|
Icon={Icon}
|
|
361
351
|
type="text"
|
|
@@ -378,8 +368,8 @@ const Picker: React.FC<PickerProps> = ({
|
|
|
378
368
|
/>
|
|
379
369
|
))}
|
|
380
370
|
</NativePicker>
|
|
381
|
-
</
|
|
382
|
-
</
|
|
371
|
+
</View>
|
|
372
|
+
</SafeAreaView>
|
|
383
373
|
</Portal>
|
|
384
374
|
) : null}
|
|
385
375
|
|
|
@@ -451,9 +441,9 @@ const styles = StyleSheet.create({
|
|
|
451
441
|
width: "100%",
|
|
452
442
|
maxWidth: deviceWidth,
|
|
453
443
|
maxHeight: deviceHeight,
|
|
454
|
-
},
|
|
455
|
-
iosSafeArea: {
|
|
456
444
|
backgroundColor: "white",
|
|
445
|
+
},
|
|
446
|
+
iosPickerContent: {
|
|
457
447
|
flexDirection: "column",
|
|
458
448
|
width: "100%",
|
|
459
449
|
maxWidth: deviceWidth,
|
package/src/index.js
CHANGED
|
@@ -31,7 +31,6 @@ 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 { DeckSwiper, DeckSwiperCard } from "./components/DeckSwiper";
|
|
35
34
|
/* Deprecated: Fix or Delete! */
|
|
36
35
|
export { default as DatePicker } from "./components/DatePicker/DatePicker";
|
|
37
36
|
export { default as Picker } from "./components/Picker/Picker";
|
package/src/index.tsx
CHANGED
|
@@ -51,8 +51,6 @@ export {
|
|
|
51
51
|
RadioButtonFieldGroup,
|
|
52
52
|
} from "./components/RadioButton/index";
|
|
53
53
|
|
|
54
|
-
export { DeckSwiper, DeckSwiperCard } from "./components/DeckSwiper";
|
|
55
|
-
|
|
56
54
|
/* Deprecated: Fix or Delete! */
|
|
57
55
|
export { default as DatePicker } from "./components/DatePicker/DatePicker";
|
|
58
56
|
export { default as Picker } from "./components/Picker/Picker";
|
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
var _react = _interopRequireDefault(require("react"));
|
|
8
|
-
var _reactNative = require("react-native");
|
|
9
|
-
var _reactNativeDeckSwiper = _interopRequireDefault(require("react-native-deck-swiper"));
|
|
10
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
-
const DeckSwiper = _ref => {
|
|
12
|
-
let {
|
|
13
|
-
onIndexChanged,
|
|
14
|
-
onEndReached,
|
|
15
|
-
startCardIndex = 0,
|
|
16
|
-
infiniteSwiping = false,
|
|
17
|
-
verticalEnabled = true,
|
|
18
|
-
horizontalEnabled = true,
|
|
19
|
-
visibleCardCount = 1,
|
|
20
|
-
style,
|
|
21
|
-
children
|
|
22
|
-
} = _ref;
|
|
23
|
-
const childrenArray = _react.default.useMemo(() => _react.default.Children.toArray(children), [children]);
|
|
24
|
-
|
|
25
|
-
// an array of indices based on children count
|
|
26
|
-
const cardsFillerData = _react.default.useMemo(() => Array.from(Array(childrenArray.length).keys()), [childrenArray]);
|
|
27
|
-
|
|
28
|
-
/**
|
|
29
|
-
* By default react-native-deck-swiper positions everything with absolute position
|
|
30
|
-
* To overcome this, it is wrapped in a View to be able to add the component in any layout structure
|
|
31
|
-
*
|
|
32
|
-
* Since all children of that View are absolutley positioned, the View does not have a height and still looks and behaves weird
|
|
33
|
-
* To fix/mitage this without setting a static height, the first card is rendered in invisible state to take up space
|
|
34
|
-
* This effectivley makes the default height of the container be the height of the first card
|
|
35
|
-
*/
|
|
36
|
-
|
|
37
|
-
return /*#__PURE__*/_react.default.createElement(_reactNative.View, null, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
38
|
-
style: styles.containerHeightFiller
|
|
39
|
-
}, childrenArray.length && childrenArray[0]), /*#__PURE__*/_react.default.createElement(_reactNativeDeckSwiper.default, {
|
|
40
|
-
cards: cardsFillerData,
|
|
41
|
-
renderCard: (_, i) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, childrenArray[i]),
|
|
42
|
-
keyExtractor: card => card === null || card === void 0 ? void 0 : card.toString(),
|
|
43
|
-
containerStyle: _reactNative.StyleSheet.flatten([styles.cardsContainer, style]),
|
|
44
|
-
cardStyle: styles.card,
|
|
45
|
-
onSwiped: onIndexChanged,
|
|
46
|
-
onSwipedAll: onEndReached,
|
|
47
|
-
cardIndex: startCardIndex,
|
|
48
|
-
infinite: infiniteSwiping,
|
|
49
|
-
verticalSwipe: verticalEnabled,
|
|
50
|
-
horizontalSwipe: horizontalEnabled,
|
|
51
|
-
showSecondCard: visibleCardCount > 1,
|
|
52
|
-
stackSize: visibleCardCount,
|
|
53
|
-
backgroundColor: "transparent",
|
|
54
|
-
cardVerticalMargin: 0,
|
|
55
|
-
cardHorizontalMargin: 0
|
|
56
|
-
}));
|
|
57
|
-
};
|
|
58
|
-
const styles = _reactNative.StyleSheet.create({
|
|
59
|
-
cardsContainer: {
|
|
60
|
-
width: "100%"
|
|
61
|
-
},
|
|
62
|
-
card: {
|
|
63
|
-
left: 0,
|
|
64
|
-
right: 0,
|
|
65
|
-
width: "auto",
|
|
66
|
-
height: "auto"
|
|
67
|
-
},
|
|
68
|
-
containerHeightFiller: {
|
|
69
|
-
opacity: 0.0
|
|
70
|
-
}
|
|
71
|
-
});
|
|
72
|
-
var _default = DeckSwiper;
|
|
73
|
-
exports.default = _default;
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
var _react = _interopRequireDefault(require("react"));
|
|
8
|
-
var _reactNative = require("react-native");
|
|
9
|
-
var _theming = require("../../theming");
|
|
10
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
-
const DeckSwiperCard = _ref => {
|
|
12
|
-
let {
|
|
13
|
-
style,
|
|
14
|
-
children,
|
|
15
|
-
theme
|
|
16
|
-
} = _ref;
|
|
17
|
-
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
18
|
-
style: [styles.card, {
|
|
19
|
-
backgroundColor: theme.colors.background,
|
|
20
|
-
borderRadius: theme.borderRadius.global,
|
|
21
|
-
borderColor: theme.colors.divider
|
|
22
|
-
}, style]
|
|
23
|
-
}, children);
|
|
24
|
-
};
|
|
25
|
-
const styles = _reactNative.StyleSheet.create({
|
|
26
|
-
card: {
|
|
27
|
-
flex: 1,
|
|
28
|
-
alignItems: "center",
|
|
29
|
-
justifyContent: "center",
|
|
30
|
-
padding: 20,
|
|
31
|
-
borderWidth: 2
|
|
32
|
-
}
|
|
33
|
-
});
|
|
34
|
-
var _default = (0, _theming.withTheme)(DeckSwiperCard);
|
|
35
|
-
exports.default = _default;
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
Object.defineProperty(exports, "DeckSwiper", {
|
|
7
|
-
enumerable: true,
|
|
8
|
-
get: function () {
|
|
9
|
-
return _DeckSwiper.default;
|
|
10
|
-
}
|
|
11
|
-
});
|
|
12
|
-
Object.defineProperty(exports, "DeckSwiperCard", {
|
|
13
|
-
enumerable: true,
|
|
14
|
-
get: function () {
|
|
15
|
-
return _DeckSwiperCard.default;
|
|
16
|
-
}
|
|
17
|
-
});
|
|
18
|
-
var _DeckSwiper = _interopRequireDefault(require("./DeckSwiper"));
|
|
19
|
-
var _DeckSwiperCard = _interopRequireDefault(require("./DeckSwiperCard"));
|
|
20
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.SEED_DATA = void 0;
|
|
7
|
-
var _types = require("@draftbit/types");
|
|
8
|
-
const SEED_DATA = {
|
|
9
|
-
name: "Deck Swiper",
|
|
10
|
-
tag: "DeckSwiper",
|
|
11
|
-
description: "Deck swiper container",
|
|
12
|
-
category: _types.COMPONENT_TYPES.swiper,
|
|
13
|
-
stylesPanelSections: _types.BLOCK_STYLES_SECTIONS,
|
|
14
|
-
triggers: [_types.Triggers.OnIndexChanged, _types.Triggers.OnEndReached],
|
|
15
|
-
props: {
|
|
16
|
-
onIndexChanged: (0, _types.createActionProp)({
|
|
17
|
-
label: "On index changed",
|
|
18
|
-
description: "Action to execute when swipe to new index"
|
|
19
|
-
}),
|
|
20
|
-
onEndReached: (0, _types.createActionProp)({
|
|
21
|
-
label: "On end reached",
|
|
22
|
-
description: "Action to execute when end of swiping reached"
|
|
23
|
-
}),
|
|
24
|
-
startCardIndex: (0, _types.createStaticNumberProp)({
|
|
25
|
-
label: "Start card index",
|
|
26
|
-
description: "Index of card to start swiping from",
|
|
27
|
-
defaultValue: 0
|
|
28
|
-
}),
|
|
29
|
-
infiniteSwiping: (0, _types.createStaticBoolProp)({
|
|
30
|
-
label: "Infinite swiping",
|
|
31
|
-
description: "Whether to infinitley loop through cards or not"
|
|
32
|
-
}),
|
|
33
|
-
verticalEnabled: (0, _types.createStaticBoolProp)({
|
|
34
|
-
label: "Vertical swipe enabled",
|
|
35
|
-
description: "Whether cards should be swipeable vertically or not",
|
|
36
|
-
defaultValue: true
|
|
37
|
-
}),
|
|
38
|
-
horizontalEnabled: (0, _types.createStaticBoolProp)({
|
|
39
|
-
label: "Horizontal swipe enabled",
|
|
40
|
-
description: "Whether cards should be swipeable horizontally or not",
|
|
41
|
-
defaultValue: true
|
|
42
|
-
}),
|
|
43
|
-
visibleCardCount: (0, _types.createStaticNumberProp)({
|
|
44
|
-
label: "Visible card count",
|
|
45
|
-
description: "Number of cards visible behind (and including) the current card",
|
|
46
|
-
defaultValue: 1,
|
|
47
|
-
min: 1,
|
|
48
|
-
step: 1
|
|
49
|
-
})
|
|
50
|
-
}
|
|
51
|
-
};
|
|
52
|
-
exports.SEED_DATA = SEED_DATA;
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.SEED_DATA = void 0;
|
|
7
|
-
var _types = require("@draftbit/types");
|
|
8
|
-
const SEED_DATA = {
|
|
9
|
-
name: "Deck Swiper Card",
|
|
10
|
-
tag: "DeckSwiperCard",
|
|
11
|
-
description: "Single Deck Swiper Card item to be used in DeckSwiper",
|
|
12
|
-
category: _types.COMPONENT_TYPES.swiper,
|
|
13
|
-
stylesPanelSections: _types.CONTAINER_COMPONENT_STYLES_SECTIONS,
|
|
14
|
-
props: {}
|
|
15
|
-
};
|
|
16
|
-
exports.SEED_DATA = SEED_DATA;
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { StyleSheet, View } from "react-native";
|
|
3
|
-
import DeckSwiperComponent from "react-native-deck-swiper";
|
|
4
|
-
const DeckSwiper = _ref => {
|
|
5
|
-
let {
|
|
6
|
-
onIndexChanged,
|
|
7
|
-
onEndReached,
|
|
8
|
-
startCardIndex = 0,
|
|
9
|
-
infiniteSwiping = false,
|
|
10
|
-
verticalEnabled = true,
|
|
11
|
-
horizontalEnabled = true,
|
|
12
|
-
visibleCardCount = 1,
|
|
13
|
-
style,
|
|
14
|
-
children
|
|
15
|
-
} = _ref;
|
|
16
|
-
const childrenArray = React.useMemo(() => React.Children.toArray(children), [children]);
|
|
17
|
-
|
|
18
|
-
// an array of indices based on children count
|
|
19
|
-
const cardsFillerData = React.useMemo(() => Array.from(Array(childrenArray.length).keys()), [childrenArray]);
|
|
20
|
-
|
|
21
|
-
/**
|
|
22
|
-
* By default react-native-deck-swiper positions everything with absolute position
|
|
23
|
-
* To overcome this, it is wrapped in a View to be able to add the component in any layout structure
|
|
24
|
-
*
|
|
25
|
-
* Since all children of that View are absolutley positioned, the View does not have a height and still looks and behaves weird
|
|
26
|
-
* To fix/mitage this without setting a static height, the first card is rendered in invisible state to take up space
|
|
27
|
-
* This effectivley makes the default height of the container be the height of the first card
|
|
28
|
-
*/
|
|
29
|
-
|
|
30
|
-
return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
|
|
31
|
-
style: styles.containerHeightFiller
|
|
32
|
-
}, childrenArray.length && childrenArray[0]), /*#__PURE__*/React.createElement(DeckSwiperComponent, {
|
|
33
|
-
cards: cardsFillerData,
|
|
34
|
-
renderCard: (_, i) => /*#__PURE__*/React.createElement(React.Fragment, null, childrenArray[i]),
|
|
35
|
-
keyExtractor: card => card === null || card === void 0 ? void 0 : card.toString(),
|
|
36
|
-
containerStyle: StyleSheet.flatten([styles.cardsContainer, style]),
|
|
37
|
-
cardStyle: styles.card,
|
|
38
|
-
onSwiped: onIndexChanged,
|
|
39
|
-
onSwipedAll: onEndReached,
|
|
40
|
-
cardIndex: startCardIndex,
|
|
41
|
-
infinite: infiniteSwiping,
|
|
42
|
-
verticalSwipe: verticalEnabled,
|
|
43
|
-
horizontalSwipe: horizontalEnabled,
|
|
44
|
-
showSecondCard: visibleCardCount > 1,
|
|
45
|
-
stackSize: visibleCardCount,
|
|
46
|
-
backgroundColor: "transparent",
|
|
47
|
-
cardVerticalMargin: 0,
|
|
48
|
-
cardHorizontalMargin: 0
|
|
49
|
-
}));
|
|
50
|
-
};
|
|
51
|
-
const styles = StyleSheet.create({
|
|
52
|
-
cardsContainer: {
|
|
53
|
-
width: "100%"
|
|
54
|
-
},
|
|
55
|
-
card: {
|
|
56
|
-
left: 0,
|
|
57
|
-
right: 0,
|
|
58
|
-
width: "auto",
|
|
59
|
-
height: "auto"
|
|
60
|
-
},
|
|
61
|
-
containerHeightFiller: {
|
|
62
|
-
opacity: 0.0
|
|
63
|
-
}
|
|
64
|
-
});
|
|
65
|
-
export default DeckSwiper;
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { View, StyleSheet } from "react-native";
|
|
3
|
-
import { withTheme } from "../../theming";
|
|
4
|
-
const DeckSwiperCard = _ref => {
|
|
5
|
-
let {
|
|
6
|
-
style,
|
|
7
|
-
children,
|
|
8
|
-
theme
|
|
9
|
-
} = _ref;
|
|
10
|
-
return /*#__PURE__*/React.createElement(View, {
|
|
11
|
-
style: [styles.card, {
|
|
12
|
-
backgroundColor: theme.colors.background,
|
|
13
|
-
borderRadius: theme.borderRadius.global,
|
|
14
|
-
borderColor: theme.colors.divider
|
|
15
|
-
}, style]
|
|
16
|
-
}, children);
|
|
17
|
-
};
|
|
18
|
-
const styles = StyleSheet.create({
|
|
19
|
-
card: {
|
|
20
|
-
flex: 1,
|
|
21
|
-
alignItems: "center",
|
|
22
|
-
justifyContent: "center",
|
|
23
|
-
padding: 20,
|
|
24
|
-
borderWidth: 2
|
|
25
|
-
}
|
|
26
|
-
});
|
|
27
|
-
export default withTheme(DeckSwiperCard);
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import { COMPONENT_TYPES, Triggers, createActionProp, createStaticNumberProp, createStaticBoolProp, BLOCK_STYLES_SECTIONS } from "@draftbit/types";
|
|
2
|
-
export const SEED_DATA = {
|
|
3
|
-
name: "Deck Swiper",
|
|
4
|
-
tag: "DeckSwiper",
|
|
5
|
-
description: "Deck swiper container",
|
|
6
|
-
category: COMPONENT_TYPES.swiper,
|
|
7
|
-
stylesPanelSections: BLOCK_STYLES_SECTIONS,
|
|
8
|
-
triggers: [Triggers.OnIndexChanged, Triggers.OnEndReached],
|
|
9
|
-
props: {
|
|
10
|
-
onIndexChanged: createActionProp({
|
|
11
|
-
label: "On index changed",
|
|
12
|
-
description: "Action to execute when swipe to new index"
|
|
13
|
-
}),
|
|
14
|
-
onEndReached: createActionProp({
|
|
15
|
-
label: "On end reached",
|
|
16
|
-
description: "Action to execute when end of swiping reached"
|
|
17
|
-
}),
|
|
18
|
-
startCardIndex: createStaticNumberProp({
|
|
19
|
-
label: "Start card index",
|
|
20
|
-
description: "Index of card to start swiping from",
|
|
21
|
-
defaultValue: 0
|
|
22
|
-
}),
|
|
23
|
-
infiniteSwiping: createStaticBoolProp({
|
|
24
|
-
label: "Infinite swiping",
|
|
25
|
-
description: "Whether to infinitley loop through cards or not"
|
|
26
|
-
}),
|
|
27
|
-
verticalEnabled: createStaticBoolProp({
|
|
28
|
-
label: "Vertical swipe enabled",
|
|
29
|
-
description: "Whether cards should be swipeable vertically or not",
|
|
30
|
-
defaultValue: true
|
|
31
|
-
}),
|
|
32
|
-
horizontalEnabled: createStaticBoolProp({
|
|
33
|
-
label: "Horizontal swipe enabled",
|
|
34
|
-
description: "Whether cards should be swipeable horizontally or not",
|
|
35
|
-
defaultValue: true
|
|
36
|
-
}),
|
|
37
|
-
visibleCardCount: createStaticNumberProp({
|
|
38
|
-
label: "Visible card count",
|
|
39
|
-
description: "Number of cards visible behind (and including) the current card",
|
|
40
|
-
defaultValue: 1,
|
|
41
|
-
min: 1,
|
|
42
|
-
step: 1
|
|
43
|
-
})
|
|
44
|
-
}
|
|
45
|
-
};
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { COMPONENT_TYPES, CONTAINER_COMPONENT_STYLES_SECTIONS } from "@draftbit/types";
|
|
2
|
-
export const SEED_DATA = {
|
|
3
|
-
name: "Deck Swiper Card",
|
|
4
|
-
tag: "DeckSwiperCard",
|
|
5
|
-
description: "Single Deck Swiper Card item to be used in DeckSwiper",
|
|
6
|
-
category: COMPONENT_TYPES.swiper,
|
|
7
|
-
stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
|
|
8
|
-
props: {}
|
|
9
|
-
};
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { StyleProp, ViewStyle } from "react-native";
|
|
3
|
-
export interface DeckSwiperProps {
|
|
4
|
-
onIndexChanged?: (index: number) => void;
|
|
5
|
-
onEndReached?: () => void;
|
|
6
|
-
startCardIndex?: number;
|
|
7
|
-
infiniteSwiping?: boolean;
|
|
8
|
-
verticalEnabled?: boolean;
|
|
9
|
-
horizontalEnabled?: boolean;
|
|
10
|
-
visibleCardCount?: number;
|
|
11
|
-
style?: StyleProp<ViewStyle>;
|
|
12
|
-
}
|
|
13
|
-
declare const DeckSwiper: React.FC<React.PropsWithChildren<DeckSwiperProps>>;
|
|
14
|
-
export default DeckSwiper;
|
|
15
|
-
//# sourceMappingURL=DeckSwiper.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DeckSwiper.d.ts","sourceRoot":"","sources":["../../../../../src/components/DeckSwiper/DeckSwiper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,SAAS,EAAoB,MAAM,cAAc,CAAC;AAGtE,MAAM,WAAW,eAAe;IAC9B,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,eAAe,CAAC,CA4DlE,CAAC;AAiBF,eAAe,UAAU,CAAC"}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { StyleProp, ViewStyle } from "react-native";
|
|
3
|
-
import type { Theme } from "../../styles/DefaultTheme";
|
|
4
|
-
export interface DeckSwiperCardProps {
|
|
5
|
-
style?: StyleProp<ViewStyle>;
|
|
6
|
-
children: React.ReactNode;
|
|
7
|
-
theme: Theme;
|
|
8
|
-
}
|
|
9
|
-
declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<DeckSwiperCardProps, "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<DeckSwiperCardProps> & React.FC<DeckSwiperCardProps>, {}>;
|
|
12
|
-
export default _default;
|
|
13
|
-
//# sourceMappingURL=DeckSwiperCard.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DeckSwiperCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/DeckSwiper/DeckSwiperCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAoB,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACtE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAGvD,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,KAAK,CAAC;CACd;;;;AAgCD,wBAAyC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/DeckSwiper/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC"}
|
|
@@ -1,83 +0,0 @@
|
|
|
1
|
-
export declare const SEED_DATA: {
|
|
2
|
-
name: string;
|
|
3
|
-
tag: string;
|
|
4
|
-
description: string;
|
|
5
|
-
category: string;
|
|
6
|
-
stylesPanelSections: string[];
|
|
7
|
-
triggers: string[];
|
|
8
|
-
props: {
|
|
9
|
-
onIndexChanged: {
|
|
10
|
-
label: string;
|
|
11
|
-
description: string;
|
|
12
|
-
editable: boolean;
|
|
13
|
-
required: boolean;
|
|
14
|
-
formType: string;
|
|
15
|
-
propType: string;
|
|
16
|
-
defaultValue: null;
|
|
17
|
-
group: string;
|
|
18
|
-
};
|
|
19
|
-
onEndReached: {
|
|
20
|
-
label: string;
|
|
21
|
-
description: string;
|
|
22
|
-
editable: boolean;
|
|
23
|
-
required: boolean;
|
|
24
|
-
formType: string;
|
|
25
|
-
propType: string;
|
|
26
|
-
defaultValue: null;
|
|
27
|
-
group: string;
|
|
28
|
-
};
|
|
29
|
-
startCardIndex: {
|
|
30
|
-
label: string;
|
|
31
|
-
description: string;
|
|
32
|
-
formType: string;
|
|
33
|
-
propType: string;
|
|
34
|
-
group: string;
|
|
35
|
-
defaultValue: null;
|
|
36
|
-
editable: boolean;
|
|
37
|
-
required: boolean;
|
|
38
|
-
step: number;
|
|
39
|
-
};
|
|
40
|
-
infiniteSwiping: {
|
|
41
|
-
label: string;
|
|
42
|
-
description: string;
|
|
43
|
-
formType: string;
|
|
44
|
-
propType: string;
|
|
45
|
-
defaultValue: boolean;
|
|
46
|
-
editable: boolean;
|
|
47
|
-
required: boolean;
|
|
48
|
-
group: string;
|
|
49
|
-
};
|
|
50
|
-
verticalEnabled: {
|
|
51
|
-
label: string;
|
|
52
|
-
description: string;
|
|
53
|
-
formType: string;
|
|
54
|
-
propType: string;
|
|
55
|
-
defaultValue: boolean;
|
|
56
|
-
editable: boolean;
|
|
57
|
-
required: boolean;
|
|
58
|
-
group: string;
|
|
59
|
-
};
|
|
60
|
-
horizontalEnabled: {
|
|
61
|
-
label: string;
|
|
62
|
-
description: string;
|
|
63
|
-
formType: string;
|
|
64
|
-
propType: string;
|
|
65
|
-
defaultValue: boolean;
|
|
66
|
-
editable: boolean;
|
|
67
|
-
required: boolean;
|
|
68
|
-
group: string;
|
|
69
|
-
};
|
|
70
|
-
visibleCardCount: {
|
|
71
|
-
label: string;
|
|
72
|
-
description: string;
|
|
73
|
-
formType: string;
|
|
74
|
-
propType: string;
|
|
75
|
-
group: string;
|
|
76
|
-
defaultValue: null;
|
|
77
|
-
editable: boolean;
|
|
78
|
-
required: boolean;
|
|
79
|
-
step: number;
|
|
80
|
-
};
|
|
81
|
-
};
|
|
82
|
-
};
|
|
83
|
-
//# sourceMappingURL=DeckSwiper.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DeckSwiper.d.ts","sourceRoot":"","sources":["../../../../src/mappings/DeckSwiper.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4CrB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DeckSwiperCard.d.ts","sourceRoot":"","sources":["../../../../src/mappings/DeckSwiperCard.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,SAAS;;;;;;;CAOrB,CAAC"}
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { StyleSheet, View } from "react-native";
|
|
3
|
-
import DeckSwiperComponent from "react-native-deck-swiper";
|
|
4
|
-
const DeckSwiper = ({ onIndexChanged, onEndReached, startCardIndex = 0, infiniteSwiping = false, verticalEnabled = true, horizontalEnabled = true, visibleCardCount = 1, style, children, }) => {
|
|
5
|
-
const childrenArray = React.useMemo(() => React.Children.toArray(children), [children]);
|
|
6
|
-
// an array of indices based on children count
|
|
7
|
-
const cardsFillerData = React.useMemo(() => Array.from(Array(childrenArray.length).keys()), [childrenArray]);
|
|
8
|
-
/**
|
|
9
|
-
* By default react-native-deck-swiper positions everything with absolute position
|
|
10
|
-
* To overcome this, it is wrapped in a View to be able to add the component in any layout structure
|
|
11
|
-
*
|
|
12
|
-
* Since all children of that View are absolutley positioned, the View does not have a height and still looks and behaves weird
|
|
13
|
-
* To fix/mitage this without setting a static height, the first card is rendered in invisible state to take up space
|
|
14
|
-
* This effectivley makes the default height of the container be the height of the first card
|
|
15
|
-
*/
|
|
16
|
-
return (React.createElement(View, null,
|
|
17
|
-
React.createElement(View, { style: styles.containerHeightFiller }, childrenArray.length && childrenArray[0]),
|
|
18
|
-
React.createElement(DeckSwiperComponent, { cards: cardsFillerData, renderCard: (_, i) => React.createElement(React.Fragment, null, childrenArray[i]), keyExtractor: (card) => card === null || card === void 0 ? void 0 : card.toString(), containerStyle: StyleSheet.flatten([styles.cardsContainer, style]), cardStyle: styles.card, onSwiped: onIndexChanged, onSwipedAll: onEndReached, cardIndex: startCardIndex, infinite: infiniteSwiping, verticalSwipe: verticalEnabled, horizontalSwipe: horizontalEnabled, showSecondCard: visibleCardCount > 1, stackSize: visibleCardCount, backgroundColor: "transparent", cardVerticalMargin: 0, cardHorizontalMargin: 0 })));
|
|
19
|
-
};
|
|
20
|
-
const styles = StyleSheet.create({
|
|
21
|
-
cardsContainer: {
|
|
22
|
-
width: "100%",
|
|
23
|
-
},
|
|
24
|
-
card: {
|
|
25
|
-
left: 0,
|
|
26
|
-
right: 0,
|
|
27
|
-
width: "auto",
|
|
28
|
-
height: "auto",
|
|
29
|
-
},
|
|
30
|
-
containerHeightFiller: {
|
|
31
|
-
opacity: 0.0,
|
|
32
|
-
},
|
|
33
|
-
});
|
|
34
|
-
export default DeckSwiper;
|
|
@@ -1,93 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { StyleProp, ViewStyle, StyleSheet, View } from "react-native";
|
|
3
|
-
import DeckSwiperComponent from "react-native-deck-swiper";
|
|
4
|
-
|
|
5
|
-
export interface DeckSwiperProps {
|
|
6
|
-
onIndexChanged?: (index: number) => void;
|
|
7
|
-
onEndReached?: () => void;
|
|
8
|
-
startCardIndex?: number;
|
|
9
|
-
infiniteSwiping?: boolean;
|
|
10
|
-
verticalEnabled?: boolean;
|
|
11
|
-
horizontalEnabled?: boolean;
|
|
12
|
-
visibleCardCount?: number;
|
|
13
|
-
style?: StyleProp<ViewStyle>;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
const DeckSwiper: React.FC<React.PropsWithChildren<DeckSwiperProps>> = ({
|
|
17
|
-
onIndexChanged,
|
|
18
|
-
onEndReached,
|
|
19
|
-
startCardIndex = 0,
|
|
20
|
-
infiniteSwiping = false,
|
|
21
|
-
verticalEnabled = true,
|
|
22
|
-
horizontalEnabled = true,
|
|
23
|
-
visibleCardCount = 1,
|
|
24
|
-
style,
|
|
25
|
-
children,
|
|
26
|
-
}) => {
|
|
27
|
-
const childrenArray = React.useMemo(
|
|
28
|
-
() => React.Children.toArray(children),
|
|
29
|
-
[children]
|
|
30
|
-
);
|
|
31
|
-
|
|
32
|
-
// an array of indices based on children count
|
|
33
|
-
const cardsFillerData = React.useMemo(
|
|
34
|
-
() => Array.from(Array(childrenArray.length).keys()),
|
|
35
|
-
[childrenArray]
|
|
36
|
-
);
|
|
37
|
-
|
|
38
|
-
/**
|
|
39
|
-
* By default react-native-deck-swiper positions everything with absolute position
|
|
40
|
-
* To overcome this, it is wrapped in a View to be able to add the component in any layout structure
|
|
41
|
-
*
|
|
42
|
-
* Since all children of that View are absolutley positioned, the View does not have a height and still looks and behaves weird
|
|
43
|
-
* To fix/mitage this without setting a static height, the first card is rendered in invisible state to take up space
|
|
44
|
-
* This effectivley makes the default height of the container be the height of the first card
|
|
45
|
-
*/
|
|
46
|
-
|
|
47
|
-
return (
|
|
48
|
-
<View>
|
|
49
|
-
<View style={styles.containerHeightFiller}>
|
|
50
|
-
{childrenArray.length && childrenArray[0]}
|
|
51
|
-
</View>
|
|
52
|
-
<DeckSwiperComponent
|
|
53
|
-
cards={cardsFillerData}
|
|
54
|
-
renderCard={(_, i) => <>{childrenArray[i]}</>}
|
|
55
|
-
keyExtractor={(card) => card?.toString()}
|
|
56
|
-
containerStyle={
|
|
57
|
-
StyleSheet.flatten([styles.cardsContainer, style]) as
|
|
58
|
-
| object
|
|
59
|
-
| undefined
|
|
60
|
-
}
|
|
61
|
-
cardStyle={styles.card as object | undefined}
|
|
62
|
-
onSwiped={onIndexChanged}
|
|
63
|
-
onSwipedAll={onEndReached}
|
|
64
|
-
cardIndex={startCardIndex}
|
|
65
|
-
infinite={infiniteSwiping}
|
|
66
|
-
verticalSwipe={verticalEnabled}
|
|
67
|
-
horizontalSwipe={horizontalEnabled}
|
|
68
|
-
showSecondCard={visibleCardCount > 1}
|
|
69
|
-
stackSize={visibleCardCount}
|
|
70
|
-
backgroundColor="transparent"
|
|
71
|
-
cardVerticalMargin={0}
|
|
72
|
-
cardHorizontalMargin={0}
|
|
73
|
-
/>
|
|
74
|
-
</View>
|
|
75
|
-
);
|
|
76
|
-
};
|
|
77
|
-
|
|
78
|
-
const styles = StyleSheet.create({
|
|
79
|
-
cardsContainer: {
|
|
80
|
-
width: "100%",
|
|
81
|
-
},
|
|
82
|
-
card: {
|
|
83
|
-
left: 0,
|
|
84
|
-
right: 0,
|
|
85
|
-
width: "auto",
|
|
86
|
-
height: "auto",
|
|
87
|
-
},
|
|
88
|
-
containerHeightFiller: {
|
|
89
|
-
opacity: 0.0,
|
|
90
|
-
},
|
|
91
|
-
});
|
|
92
|
-
|
|
93
|
-
export default DeckSwiper;
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { View, StyleSheet } from "react-native";
|
|
3
|
-
import { withTheme } from "../../theming";
|
|
4
|
-
const DeckSwiperCard = ({ style, children, theme, }) => (React.createElement(View, { style: [
|
|
5
|
-
styles.card,
|
|
6
|
-
{
|
|
7
|
-
backgroundColor: theme.colors.background,
|
|
8
|
-
borderRadius: theme.borderRadius.global,
|
|
9
|
-
borderColor: theme.colors.divider,
|
|
10
|
-
},
|
|
11
|
-
style,
|
|
12
|
-
] }, children));
|
|
13
|
-
const styles = StyleSheet.create({
|
|
14
|
-
card: {
|
|
15
|
-
flex: 1,
|
|
16
|
-
alignItems: "center",
|
|
17
|
-
justifyContent: "center",
|
|
18
|
-
padding: 20,
|
|
19
|
-
borderWidth: 2,
|
|
20
|
-
},
|
|
21
|
-
});
|
|
22
|
-
export default withTheme(DeckSwiperCard);
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { View, StyleSheet, StyleProp, ViewStyle } from "react-native";
|
|
3
|
-
import type { Theme } from "../../styles/DefaultTheme";
|
|
4
|
-
import { withTheme } from "../../theming";
|
|
5
|
-
|
|
6
|
-
export interface DeckSwiperCardProps {
|
|
7
|
-
style?: StyleProp<ViewStyle>;
|
|
8
|
-
children: React.ReactNode;
|
|
9
|
-
theme: Theme;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
const DeckSwiperCard: React.FC<DeckSwiperCardProps> = ({
|
|
13
|
-
style,
|
|
14
|
-
children,
|
|
15
|
-
theme,
|
|
16
|
-
}) => (
|
|
17
|
-
<View
|
|
18
|
-
style={[
|
|
19
|
-
styles.card,
|
|
20
|
-
{
|
|
21
|
-
backgroundColor: theme.colors.background,
|
|
22
|
-
borderRadius: theme.borderRadius.global,
|
|
23
|
-
borderColor: theme.colors.divider,
|
|
24
|
-
},
|
|
25
|
-
style,
|
|
26
|
-
]}
|
|
27
|
-
>
|
|
28
|
-
{children}
|
|
29
|
-
</View>
|
|
30
|
-
);
|
|
31
|
-
|
|
32
|
-
const styles = StyleSheet.create({
|
|
33
|
-
card: {
|
|
34
|
-
flex: 1,
|
|
35
|
-
alignItems: "center",
|
|
36
|
-
justifyContent: "center",
|
|
37
|
-
padding: 20,
|
|
38
|
-
borderWidth: 2,
|
|
39
|
-
},
|
|
40
|
-
});
|
|
41
|
-
|
|
42
|
-
export default withTheme(DeckSwiperCard);
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import { COMPONENT_TYPES, Triggers, createActionProp, createStaticNumberProp, createStaticBoolProp, BLOCK_STYLES_SECTIONS, } from "@draftbit/types";
|
|
2
|
-
export const SEED_DATA = {
|
|
3
|
-
name: "Deck Swiper",
|
|
4
|
-
tag: "DeckSwiper",
|
|
5
|
-
description: "Deck swiper container",
|
|
6
|
-
category: COMPONENT_TYPES.swiper,
|
|
7
|
-
stylesPanelSections: BLOCK_STYLES_SECTIONS,
|
|
8
|
-
triggers: [Triggers.OnIndexChanged, Triggers.OnEndReached],
|
|
9
|
-
props: {
|
|
10
|
-
onIndexChanged: createActionProp({
|
|
11
|
-
label: "On index changed",
|
|
12
|
-
description: "Action to execute when swipe to new index",
|
|
13
|
-
}),
|
|
14
|
-
onEndReached: createActionProp({
|
|
15
|
-
label: "On end reached",
|
|
16
|
-
description: "Action to execute when end of swiping reached",
|
|
17
|
-
}),
|
|
18
|
-
startCardIndex: createStaticNumberProp({
|
|
19
|
-
label: "Start card index",
|
|
20
|
-
description: "Index of card to start swiping from",
|
|
21
|
-
defaultValue: 0,
|
|
22
|
-
}),
|
|
23
|
-
infiniteSwiping: createStaticBoolProp({
|
|
24
|
-
label: "Infinite swiping",
|
|
25
|
-
description: "Whether to infinitley loop through cards or not",
|
|
26
|
-
}),
|
|
27
|
-
verticalEnabled: createStaticBoolProp({
|
|
28
|
-
label: "Vertical swipe enabled",
|
|
29
|
-
description: "Whether cards should be swipeable vertically or not",
|
|
30
|
-
defaultValue: true,
|
|
31
|
-
}),
|
|
32
|
-
horizontalEnabled: createStaticBoolProp({
|
|
33
|
-
label: "Horizontal swipe enabled",
|
|
34
|
-
description: "Whether cards should be swipeable horizontally or not",
|
|
35
|
-
defaultValue: true,
|
|
36
|
-
}),
|
|
37
|
-
visibleCardCount: createStaticNumberProp({
|
|
38
|
-
label: "Visible card count",
|
|
39
|
-
description: "Number of cards visible behind (and including) the current card",
|
|
40
|
-
defaultValue: 1,
|
|
41
|
-
min: 1,
|
|
42
|
-
step: 1,
|
|
43
|
-
}),
|
|
44
|
-
},
|
|
45
|
-
};
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
COMPONENT_TYPES,
|
|
3
|
-
Triggers,
|
|
4
|
-
createActionProp,
|
|
5
|
-
createStaticNumberProp,
|
|
6
|
-
createStaticBoolProp,
|
|
7
|
-
BLOCK_STYLES_SECTIONS,
|
|
8
|
-
} from "@draftbit/types";
|
|
9
|
-
|
|
10
|
-
export const SEED_DATA = {
|
|
11
|
-
name: "Deck Swiper",
|
|
12
|
-
tag: "DeckSwiper",
|
|
13
|
-
description: "Deck swiper container",
|
|
14
|
-
category: COMPONENT_TYPES.swiper,
|
|
15
|
-
stylesPanelSections: BLOCK_STYLES_SECTIONS,
|
|
16
|
-
triggers: [Triggers.OnIndexChanged, Triggers.OnEndReached],
|
|
17
|
-
props: {
|
|
18
|
-
onIndexChanged: createActionProp({
|
|
19
|
-
label: "On index changed",
|
|
20
|
-
description: "Action to execute when swipe to new index",
|
|
21
|
-
}),
|
|
22
|
-
onEndReached: createActionProp({
|
|
23
|
-
label: "On end reached",
|
|
24
|
-
description: "Action to execute when end of swiping reached",
|
|
25
|
-
}),
|
|
26
|
-
startCardIndex: createStaticNumberProp({
|
|
27
|
-
label: "Start card index",
|
|
28
|
-
description: "Index of card to start swiping from",
|
|
29
|
-
defaultValue: 0,
|
|
30
|
-
}),
|
|
31
|
-
infiniteSwiping: createStaticBoolProp({
|
|
32
|
-
label: "Infinite swiping",
|
|
33
|
-
description: "Whether to infinitley loop through cards or not",
|
|
34
|
-
}),
|
|
35
|
-
verticalEnabled: createStaticBoolProp({
|
|
36
|
-
label: "Vertical swipe enabled",
|
|
37
|
-
description: "Whether cards should be swipeable vertically or not",
|
|
38
|
-
defaultValue: true,
|
|
39
|
-
}),
|
|
40
|
-
horizontalEnabled: createStaticBoolProp({
|
|
41
|
-
label: "Horizontal swipe enabled",
|
|
42
|
-
description: "Whether cards should be swipeable horizontally or not",
|
|
43
|
-
defaultValue: true,
|
|
44
|
-
}),
|
|
45
|
-
visibleCardCount: createStaticNumberProp({
|
|
46
|
-
label: "Visible card count",
|
|
47
|
-
description:
|
|
48
|
-
"Number of cards visible behind (and including) the current card",
|
|
49
|
-
defaultValue: 1,
|
|
50
|
-
min: 1,
|
|
51
|
-
step: 1,
|
|
52
|
-
}),
|
|
53
|
-
},
|
|
54
|
-
};
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { COMPONENT_TYPES, CONTAINER_COMPONENT_STYLES_SECTIONS, } from "@draftbit/types";
|
|
2
|
-
export const SEED_DATA = {
|
|
3
|
-
name: "Deck Swiper Card",
|
|
4
|
-
tag: "DeckSwiperCard",
|
|
5
|
-
description: "Single Deck Swiper Card item to be used in DeckSwiper",
|
|
6
|
-
category: COMPONENT_TYPES.swiper,
|
|
7
|
-
stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
|
|
8
|
-
props: {},
|
|
9
|
-
};
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
COMPONENT_TYPES,
|
|
3
|
-
CONTAINER_COMPONENT_STYLES_SECTIONS,
|
|
4
|
-
} from "@draftbit/types";
|
|
5
|
-
|
|
6
|
-
export const SEED_DATA = {
|
|
7
|
-
name: "Deck Swiper Card",
|
|
8
|
-
tag: "DeckSwiperCard",
|
|
9
|
-
description: "Single Deck Swiper Card item to be used in DeckSwiper",
|
|
10
|
-
category: COMPONENT_TYPES.swiper,
|
|
11
|
-
stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
|
|
12
|
-
props: {},
|
|
13
|
-
};
|