@draftbit/core 46.7.9-8c03b2.2 → 46.7.9-9ce779.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/DeckSwiper/DeckSwiper.js +73 -0
- package/lib/commonjs/components/DeckSwiper/DeckSwiperCard.js +35 -0
- package/lib/commonjs/components/DeckSwiper/index.js +20 -0
- package/lib/commonjs/components/Divider.js +1 -14
- package/lib/commonjs/components/Elevation.js +2 -14
- package/lib/commonjs/components/Portal/PortalManager.js +34 -8
- package/lib/commonjs/index.js +13 -0
- package/lib/commonjs/mappings/DeckSwiper.js +52 -0
- package/lib/commonjs/mappings/DeckSwiperCard.js +16 -0
- package/lib/module/components/AnimatedCircularProgress.js +13 -1
- package/lib/module/components/Container.js +17 -4
- package/lib/module/components/DeckSwiper/DeckSwiper.js +65 -0
- package/lib/module/components/DeckSwiper/DeckSwiperCard.js +27 -0
- package/lib/module/components/DeckSwiper/index.js +2 -0
- package/lib/module/components/Divider.js +18 -1
- package/lib/module/components/Picker/PickerComponent.web.js +21 -3
- package/lib/module/components/Pressable.js +15 -2
- package/lib/module/components/Slider.js +21 -4
- package/lib/module/components/StarRating.js +24 -4
- package/lib/module/components/StepIndicator.js +58 -18
- package/lib/module/components/Switch.js +21 -10
- package/lib/module/constants.js +1 -0
- package/lib/module/hooks.js +1 -2
- package/lib/module/index.js +1 -0
- package/lib/module/mappings/DeckSwiper.js +45 -0
- package/lib/module/mappings/DeckSwiperCard.js +9 -0
- package/lib/module/styles/overlay.js +1 -3
- package/lib/typescript/src/components/DeckSwiper/DeckSwiper.d.ts +15 -0
- package/lib/typescript/src/components/DeckSwiper/DeckSwiper.d.ts.map +1 -0
- package/lib/typescript/src/components/DeckSwiper/DeckSwiperCard.d.ts +13 -0
- package/lib/typescript/src/components/DeckSwiper/DeckSwiperCard.d.ts.map +1 -0
- package/lib/typescript/src/components/DeckSwiper/index.d.ts +3 -0
- package/lib/typescript/src/components/DeckSwiper/index.d.ts.map +1 -0
- package/lib/typescript/src/index.d.ts +1 -0
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/lib/typescript/src/mappings/DeckSwiper.d.ts +83 -0
- package/lib/typescript/src/mappings/DeckSwiper.d.ts.map +1 -0
- package/lib/typescript/src/mappings/DeckSwiperCard.d.ts +9 -0
- package/lib/typescript/src/mappings/DeckSwiperCard.d.ts.map +1 -0
- package/package.json +4 -3
- package/src/components/DeckSwiper/DeckSwiper.js +34 -0
- package/src/components/DeckSwiper/DeckSwiper.tsx +93 -0
- package/src/components/DeckSwiper/DeckSwiperCard.js +22 -0
- package/src/components/DeckSwiper/DeckSwiperCard.tsx +42 -0
- package/src/components/DeckSwiper/index.js +2 -0
- package/src/components/DeckSwiper/index.tsx +2 -0
- package/src/index.js +1 -0
- package/src/index.tsx +2 -0
- package/src/mappings/DeckSwiper.js +45 -0
- package/src/mappings/DeckSwiper.ts +54 -0
- package/src/mappings/DeckSwiperCard.js +9 -0
- package/src/mappings/DeckSwiperCard.ts +13 -0
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
1
|
import * as React from "react";
|
|
3
2
|
import { View, StyleSheet } from "react-native";
|
|
4
3
|
import NativeSlider from "@react-native-community/slider";
|
|
@@ -64,9 +63,10 @@ function Slider(_ref) {
|
|
|
64
63
|
setInternalValue(newValue);
|
|
65
64
|
onValueChange(newValue);
|
|
66
65
|
};
|
|
67
|
-
return /*#__PURE__*/React.createElement(View,
|
|
68
|
-
style: [styles.container, style]
|
|
69
|
-
|
|
66
|
+
return /*#__PURE__*/React.createElement(View, {
|
|
67
|
+
style: [styles.container, style],
|
|
68
|
+
...rest
|
|
69
|
+
}, leftIcon ? /*#__PURE__*/React.createElement(Icon, {
|
|
70
70
|
color: leftIconThemeColor,
|
|
71
71
|
name: leftIcon,
|
|
72
72
|
size: 24
|
|
@@ -98,4 +98,21 @@ const styles = StyleSheet.create({
|
|
|
98
98
|
marginHorizontal: 12
|
|
99
99
|
}
|
|
100
100
|
});
|
|
101
|
+
export default withTheme(Slider);Icon ? /*#__PURE__*/React.createElement(Icon, {
|
|
102
|
+
color: rightIconThemeColor,
|
|
103
|
+
name: rightIcon,
|
|
104
|
+
size: 24
|
|
105
|
+
}) : null);
|
|
106
|
+
}
|
|
107
|
+
const styles = StyleSheet.create({
|
|
108
|
+
container: {
|
|
109
|
+
height: 40,
|
|
110
|
+
flexDirection: "row",
|
|
111
|
+
alignItems: "center"
|
|
112
|
+
},
|
|
113
|
+
slider: {
|
|
114
|
+
flex: 1,
|
|
115
|
+
marginHorizontal: 12
|
|
116
|
+
}
|
|
117
|
+
});
|
|
101
118
|
export default withTheme(Slider);
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
1
|
import * as React from "react";
|
|
3
2
|
import { View, StyleSheet, Pressable } from "react-native";
|
|
4
3
|
import { withTheme } from "../theming";
|
|
@@ -32,9 +31,10 @@ const StarRating = _ref => {
|
|
|
32
31
|
!!onPress && onPress(r);
|
|
33
32
|
}, [onPress]);
|
|
34
33
|
const ratingRounded = Math.round(localRating * 2) / 2;
|
|
35
|
-
return /*#__PURE__*/React.createElement(View,
|
|
36
|
-
style: [styles.container, style]
|
|
37
|
-
|
|
34
|
+
return /*#__PURE__*/React.createElement(View, {
|
|
35
|
+
style: [styles.container, style],
|
|
36
|
+
...rest
|
|
37
|
+
}, [...Array(maxStars)].map((_, i) => /*#__PURE__*/React.createElement(View, {
|
|
38
38
|
key: i,
|
|
39
39
|
style: {
|
|
40
40
|
display: "flex"
|
|
@@ -74,4 +74,24 @@ const styles = StyleSheet.create({
|
|
|
74
74
|
width: "50%"
|
|
75
75
|
}
|
|
76
76
|
});
|
|
77
|
+
export default withTheme(StarRating);ntainer: {
|
|
78
|
+
flexDirection: "row",
|
|
79
|
+
alignItems: "center"
|
|
80
|
+
},
|
|
81
|
+
touchContainer: {
|
|
82
|
+
display: "flex",
|
|
83
|
+
flexDirection: "row",
|
|
84
|
+
position: "absolute",
|
|
85
|
+
top: 0,
|
|
86
|
+
right: 0,
|
|
87
|
+
left: 0,
|
|
88
|
+
bottom: 0,
|
|
89
|
+
zIndex: 1
|
|
90
|
+
},
|
|
91
|
+
pressable: {
|
|
92
|
+
flex: 1,
|
|
93
|
+
height: "100%",
|
|
94
|
+
width: "50%"
|
|
95
|
+
}
|
|
96
|
+
});
|
|
77
97
|
export default withTheme(StarRating);
|
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
2
|
-
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
|
|
3
|
-
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
4
1
|
// @ts-nocheck
|
|
5
2
|
import React, { Component } from "react";
|
|
6
3
|
import { View, Text, StyleSheet, Animated, TouchableWithoutFeedback } from "react-native";
|
|
@@ -12,7 +9,7 @@ const STEP_STATUS = {
|
|
|
12
9
|
export default class StepIndicator extends Component {
|
|
13
10
|
constructor(props) {
|
|
14
11
|
super(props);
|
|
15
|
-
|
|
12
|
+
this.renderProgressBarBackground = () => {
|
|
16
13
|
const {
|
|
17
14
|
stepCount,
|
|
18
15
|
direction
|
|
@@ -55,8 +52,8 @@ export default class StepIndicator extends Component {
|
|
|
55
52
|
},
|
|
56
53
|
style: progressBarBackgroundStyle
|
|
57
54
|
});
|
|
58
|
-
}
|
|
59
|
-
|
|
55
|
+
};
|
|
56
|
+
this.renderProgressBar = () => {
|
|
60
57
|
const {
|
|
61
58
|
stepCount,
|
|
62
59
|
direction
|
|
@@ -86,8 +83,8 @@ export default class StepIndicator extends Component {
|
|
|
86
83
|
return /*#__PURE__*/React.createElement(Animated.View, {
|
|
87
84
|
style: progressBarStyle
|
|
88
85
|
});
|
|
89
|
-
}
|
|
90
|
-
|
|
86
|
+
};
|
|
87
|
+
this.renderStepIndicator = () => {
|
|
91
88
|
let steps = [];
|
|
92
89
|
const {
|
|
93
90
|
stepCount,
|
|
@@ -118,8 +115,8 @@ export default class StepIndicator extends Component {
|
|
|
118
115
|
height: this.state.customStyles.currentStepIndicatorSize
|
|
119
116
|
}]
|
|
120
117
|
}, steps);
|
|
121
|
-
}
|
|
122
|
-
|
|
118
|
+
};
|
|
119
|
+
this.renderStepLabels = () => {
|
|
123
120
|
const {
|
|
124
121
|
labels,
|
|
125
122
|
direction,
|
|
@@ -161,8 +158,8 @@ export default class StepIndicator extends Component {
|
|
|
161
158
|
alignItems: this.state.customStyles.labelAlign
|
|
162
159
|
}]
|
|
163
160
|
}, labelViews);
|
|
164
|
-
}
|
|
165
|
-
|
|
161
|
+
};
|
|
162
|
+
this.renderStep = position => {
|
|
166
163
|
const {
|
|
167
164
|
renderStepIndicator
|
|
168
165
|
} = this.props;
|
|
@@ -229,8 +226,8 @@ export default class StepIndicator extends Component {
|
|
|
229
226
|
}) : /*#__PURE__*/React.createElement(Text, {
|
|
230
227
|
style: indicatorLabelStyle
|
|
231
228
|
}, "".concat(position + 1)));
|
|
232
|
-
}
|
|
233
|
-
|
|
229
|
+
};
|
|
230
|
+
this.getStepStatus = stepPosition => {
|
|
234
231
|
const {
|
|
235
232
|
currentPosition
|
|
236
233
|
} = this.props;
|
|
@@ -241,8 +238,8 @@ export default class StepIndicator extends Component {
|
|
|
241
238
|
} else {
|
|
242
239
|
return STEP_STATUS.UNFINISHED;
|
|
243
240
|
}
|
|
244
|
-
}
|
|
245
|
-
|
|
241
|
+
};
|
|
242
|
+
this.onCurrentPositionChanged = position => {
|
|
246
243
|
let {
|
|
247
244
|
stepCount
|
|
248
245
|
} = this.props;
|
|
@@ -262,7 +259,7 @@ export default class StepIndicator extends Component {
|
|
|
262
259
|
toValue: this.state.customStyles.currentStepIndicatorSize / 2,
|
|
263
260
|
duration: 100
|
|
264
261
|
})])]).start();
|
|
265
|
-
}
|
|
262
|
+
};
|
|
266
263
|
const defaultStyles = {
|
|
267
264
|
stepIndicatorSize: 30,
|
|
268
265
|
currentStepIndicatorSize: 40,
|
|
@@ -328,7 +325,6 @@ export default class StepIndicator extends Component {
|
|
|
328
325
|
// ),
|
|
329
326
|
// }));
|
|
330
327
|
// }
|
|
331
|
-
|
|
332
328
|
if (prevProps.currentPosition !== this.props.currentPosition) {
|
|
333
329
|
this.onCurrentPositionChanged(this.props.currentPosition);
|
|
334
330
|
}
|
|
@@ -369,6 +365,50 @@ const styles = StyleSheet.create({
|
|
|
369
365
|
justifyContent: "center"
|
|
370
366
|
}
|
|
371
367
|
});
|
|
368
|
+
StepIndicator.defaultProps = {
|
|
369
|
+
currentPosition: 0,
|
|
370
|
+
stepCount: 5,
|
|
371
|
+
customStyles: {},
|
|
372
|
+
direction: "horizontal"
|
|
373
|
+
};rrentPositionChanged(this.props.currentPosition);
|
|
374
|
+
}
|
|
375
|
+
}
|
|
376
|
+
}
|
|
377
|
+
const styles = StyleSheet.create({
|
|
378
|
+
container: {
|
|
379
|
+
backgroundColor: "transparent"
|
|
380
|
+
},
|
|
381
|
+
stepIndicatorContainer: {
|
|
382
|
+
flexDirection: "row",
|
|
383
|
+
alignItems: "center",
|
|
384
|
+
justifyContent: "space-around",
|
|
385
|
+
backgroundColor: "transparent"
|
|
386
|
+
},
|
|
387
|
+
stepLabelsContainer: {
|
|
388
|
+
justifyContent: "space-around"
|
|
389
|
+
},
|
|
390
|
+
step: {
|
|
391
|
+
alignItems: "center",
|
|
392
|
+
justifyContent: "center",
|
|
393
|
+
zIndex: 2
|
|
394
|
+
},
|
|
395
|
+
stepContainer: {
|
|
396
|
+
flex: 1,
|
|
397
|
+
flexDirection: "row",
|
|
398
|
+
alignItems: "center",
|
|
399
|
+
justifyContent: "center"
|
|
400
|
+
},
|
|
401
|
+
stepLabel: {
|
|
402
|
+
fontSize: 12,
|
|
403
|
+
textAlign: "center",
|
|
404
|
+
fontWeight: "500"
|
|
405
|
+
},
|
|
406
|
+
stepLabelItem: {
|
|
407
|
+
flex: 1,
|
|
408
|
+
alignItems: "center",
|
|
409
|
+
justifyContent: "center"
|
|
410
|
+
}
|
|
411
|
+
});
|
|
372
412
|
StepIndicator.defaultProps = {
|
|
373
413
|
currentPosition: 0,
|
|
374
414
|
stepCount: 5,
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
1
|
import * as React from "react";
|
|
3
2
|
import { Switch as NativeSwitch } from "react-native";
|
|
4
3
|
import { withTheme } from "../theming";
|
|
@@ -29,7 +28,6 @@ function Switch(_ref) {
|
|
|
29
28
|
setChecked(value);
|
|
30
29
|
}
|
|
31
30
|
}, [value, checked]);
|
|
32
|
-
|
|
33
31
|
// This special logic is to handle weird APIs like Airtable that return
|
|
34
32
|
// true or undefined for a boolean
|
|
35
33
|
const previousDefaultValue = usePrevious(defaultValue);
|
|
@@ -38,24 +36,24 @@ function Switch(_ref) {
|
|
|
38
36
|
setChecked(Boolean(defaultValue));
|
|
39
37
|
}
|
|
40
38
|
}, [defaultValue, previousDefaultValue]);
|
|
41
|
-
return /*#__PURE__*/React.createElement(NativeSwitch,
|
|
39
|
+
return /*#__PURE__*/React.createElement(NativeSwitch, {
|
|
42
40
|
value: checked,
|
|
43
41
|
disabled: disabled,
|
|
44
42
|
trackColor: {
|
|
45
43
|
false: inactiveTrackThemeColor,
|
|
46
44
|
true: activeTrackThemeColor
|
|
47
45
|
},
|
|
48
|
-
thumbColor: value ? activeThumbThemeColor : inactiveThumbThemeColor
|
|
46
|
+
thumbColor: value ? activeThumbThemeColor : inactiveThumbThemeColor,
|
|
49
47
|
// @ts-ignore react-native-web only
|
|
50
|
-
,
|
|
51
48
|
activeThumbColor: activeThumbThemeColor,
|
|
52
49
|
ios_backgroundColor: inactiveTrackThemeColor,
|
|
53
50
|
style: style,
|
|
54
51
|
onValueChange: bool => {
|
|
55
52
|
setChecked(bool);
|
|
56
53
|
onValueChange && onValueChange(bool);
|
|
57
|
-
}
|
|
58
|
-
|
|
54
|
+
},
|
|
55
|
+
...rest
|
|
56
|
+
});
|
|
59
57
|
}
|
|
60
58
|
function Row(_ref2) {
|
|
61
59
|
let {
|
|
@@ -84,7 +82,7 @@ function Row(_ref2) {
|
|
|
84
82
|
setChecked(defaultValue);
|
|
85
83
|
}
|
|
86
84
|
}, [defaultValue]);
|
|
87
|
-
return /*#__PURE__*/React.createElement(FormRow,
|
|
85
|
+
return /*#__PURE__*/React.createElement(FormRow, {
|
|
88
86
|
disabled: disabled,
|
|
89
87
|
onPress: () => {
|
|
90
88
|
setChecked(!checked);
|
|
@@ -92,8 +90,9 @@ function Row(_ref2) {
|
|
|
92
90
|
},
|
|
93
91
|
label: label,
|
|
94
92
|
direction: direction,
|
|
95
|
-
style: style
|
|
96
|
-
|
|
93
|
+
style: style,
|
|
94
|
+
...rest
|
|
95
|
+
}, /*#__PURE__*/React.createElement(Switch, {
|
|
97
96
|
theme: theme,
|
|
98
97
|
value: checked,
|
|
99
98
|
disabled: disabled,
|
|
@@ -106,4 +105,16 @@ function Row(_ref2) {
|
|
|
106
105
|
}
|
|
107
106
|
const SwitchRow = withTheme(Row);
|
|
108
107
|
export { SwitchRow };
|
|
108
|
+
export default withTheme(Switch);: theme,
|
|
109
|
+
value: checked,
|
|
110
|
+
disabled: disabled,
|
|
111
|
+
onValueChange: onValueChange,
|
|
112
|
+
activeTrackColor: activeTrackColor,
|
|
113
|
+
inactiveTrackColor: inactiveTrackColor,
|
|
114
|
+
activeThumbColor: activeThumbColor,
|
|
115
|
+
inactiveThumbColor: inactiveThumbColor
|
|
116
|
+
}));
|
|
117
|
+
}
|
|
118
|
+
const SwitchRow = withTheme(Row);
|
|
119
|
+
export { SwitchRow };
|
|
109
120
|
export default withTheme(Switch);
|
package/lib/module/constants.js
CHANGED
package/lib/module/hooks.js
CHANGED
|
@@ -3,12 +3,11 @@ export function usePrevious(value) {
|
|
|
3
3
|
// The ref object is a generic container whose current property is mutable
|
|
4
4
|
// and can hold any value, similar to an instance property on a class
|
|
5
5
|
const ref = React.useRef();
|
|
6
|
-
|
|
7
6
|
// Store current value in ref
|
|
8
7
|
React.useEffect(() => {
|
|
9
8
|
ref.current = value;
|
|
10
9
|
}, [value]);
|
|
11
|
-
|
|
12
10
|
// Return previous value (happens before update in useEffect above)
|
|
13
11
|
return ref.current;
|
|
12
|
+
}
|
|
14
13
|
}
|
package/lib/module/index.js
CHANGED
|
@@ -31,6 +31,7 @@ export { ActionSheet, ActionSheetItem, ActionSheetCancel } from "./components/Ac
|
|
|
31
31
|
export { Swiper, SwiperItem } from "./components/Swiper";
|
|
32
32
|
export { Center, Circle, Square, Row, Stack, Spacer } from "./components/Layout";
|
|
33
33
|
export { RadioButton, RadioButtonGroup, RadioButtonRow, RadioButtonFieldGroup } from "./components/RadioButton/index";
|
|
34
|
+
export { DeckSwiper, DeckSwiperCard } from "./components/DeckSwiper";
|
|
34
35
|
|
|
35
36
|
/* Deprecated: Fix or Delete! */
|
|
36
37
|
export { default as DatePicker } from "./components/DatePicker/DatePicker";
|
|
@@ -0,0 +1,45 @@
|
|
|
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
|
+
};
|
|
@@ -0,0 +1,9 @@
|
|
|
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
|
+
};
|
|
@@ -7,7 +7,6 @@ export default function overlay(elevation) {
|
|
|
7
7
|
let surfaceColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DarkTheme.colors.surface;
|
|
8
8
|
if (isAnimatedValue(elevation)) {
|
|
9
9
|
const inputRange = [0, 1, 2, 3, 8, 24];
|
|
10
|
-
|
|
11
10
|
// @ts-expect-error: TS doesn't seem to refine the type correctly
|
|
12
11
|
return elevation.interpolate({
|
|
13
12
|
inputRange,
|
|
@@ -16,7 +15,6 @@ export default function overlay(elevation) {
|
|
|
16
15
|
})
|
|
17
16
|
});
|
|
18
17
|
}
|
|
19
|
-
|
|
20
18
|
// @ts-expect-error: TS doesn't seem to refine the type correctly
|
|
21
19
|
return calculateColor(surfaceColor, elevation);
|
|
22
20
|
}
|
|
@@ -57,4 +55,4 @@ const elevationOverlayTransparency = {
|
|
|
57
55
|
22: 15.72,
|
|
58
56
|
23: 15.84,
|
|
59
57
|
24: 16
|
|
60
|
-
};
|
|
58
|
+
};};
|
|
@@ -0,0 +1,15 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -0,0 +1,13 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -31,6 +31,7 @@ export { ActionSheet, ActionSheetItem, ActionSheetCancel, } from "./components/A
|
|
|
31
31
|
export { Swiper, SwiperItem } from "./components/Swiper";
|
|
32
32
|
export { Center, Circle, Square, Row, Stack, Spacer, } from "./components/Layout";
|
|
33
33
|
export { RadioButton, RadioButtonGroup, RadioButtonRow, RadioButtonFieldGroup, } from "./components/RadioButton/index";
|
|
34
|
+
export { DeckSwiper, DeckSwiperCard } from "./components/DeckSwiper";
|
|
34
35
|
export { default as DatePicker } from "./components/DatePicker/DatePicker";
|
|
35
36
|
export { default as Picker } from "./components/Picker/Picker";
|
|
36
37
|
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":"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"}
|
|
@@ -0,0 +1,83 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DeckSwiper.d.ts","sourceRoot":"","sources":["../../../../src/mappings/DeckSwiper.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4CrB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DeckSwiperCard.d.ts","sourceRoot":"","sources":["../../../../src/mappings/DeckSwiperCard.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,SAAS;;;;;;;CAOrB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@draftbit/core",
|
|
3
|
-
"version": "46.7.9-
|
|
3
|
+
"version": "46.7.9-9ce779.2+9ce7799",
|
|
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.9-
|
|
44
|
+
"@draftbit/types": "^46.7.9-9ce779.2+9ce7799",
|
|
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,6 +53,7 @@
|
|
|
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",
|
|
56
57
|
"react-native-modal-datetime-picker": "^13.0.0",
|
|
57
58
|
"react-native-svg": "12.3.0",
|
|
58
59
|
"react-native-typography": "^1.4.1",
|
|
@@ -91,5 +92,5 @@
|
|
|
91
92
|
]
|
|
92
93
|
]
|
|
93
94
|
},
|
|
94
|
-
"gitHead": "
|
|
95
|
+
"gitHead": "9ce77999dd0ae314668a03f87c7e230da78d3787"
|
|
95
96
|
}
|
|
@@ -0,0 +1,34 @@
|
|
|
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;
|