@draftbit/core 46.7.9-900f3a.2 → 46.7.9-9a1f8c.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/DatePicker/DatePicker.js +8 -1
- package/lib/commonjs/components/Divider.js +14 -1
- package/lib/commonjs/components/Elevation.js +14 -2
- package/lib/commonjs/constants.js +1 -1
- package/lib/commonjs/index.js +0 -13
- package/lib/commonjs/mappings/DatePicker.js +2 -1
- package/lib/commonjs/mappings/StarRating.js +2 -6
- package/lib/commonjs/styles/overlay.js +3 -1
- package/lib/module/components/DatePicker/DatePicker.js +8 -1
- package/lib/module/index.js +0 -1
- package/lib/module/mappings/DatePicker.js +2 -1
- package/lib/typescript/src/index.d.ts +0 -1
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/lib/typescript/src/mappings/DatePicker.d.ts.map +1 -1
- package/package.json +3 -4
- package/src/components/DatePicker/DatePicker.js +1 -1
- package/src/components/DatePicker/DatePicker.tsx +1 -1
- package/src/index.js +0 -1
- package/src/index.tsx +0 -2
- package/src/mappings/DatePicker.js +2 -1
- package/src/mappings/DatePicker.ts +2 -1
- package/lib/commonjs/components/DeckSwiper/DeckSwiper.js +0 -74
- package/lib/commonjs/components/DeckSwiper/DeckSwiperCard.js +0 -37
- 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 -66
- package/lib/module/components/DeckSwiper/DeckSwiperCard.js +0 -28
- 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 -35
- package/src/components/DeckSwiper/DeckSwiper.tsx +0 -94
- package/src/components/DeckSwiper/DeckSwiperCard.js +0 -25
- 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
|
@@ -160,7 +160,14 @@ const DatePicker = _ref => {
|
|
|
160
160
|
const MAXIMIZED_LABEL_FONT_SIZE = textStyles.fontSize || typography.subtitle1.fontSize;
|
|
161
161
|
const MINIMIZED_LABEL_FONT_SIZE = labelSize ? labelSize : typography.caption.fontSize;
|
|
162
162
|
const hasActiveOutline = focused;
|
|
163
|
-
let inputTextColor,
|
|
163
|
+
let inputTextColor,
|
|
164
|
+
activeColor,
|
|
165
|
+
underlineColor,
|
|
166
|
+
borderColor = inputBorderColor,
|
|
167
|
+
placeholderColor,
|
|
168
|
+
containerStyle,
|
|
169
|
+
backgroundColor,
|
|
170
|
+
inputStyle;
|
|
164
171
|
inputTextColor = colors.strong;
|
|
165
172
|
if (disabled) {
|
|
166
173
|
activeColor = colors.light;
|
|
@@ -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",
|
|
@@ -12,4 +12,4 @@ const APPROX_STATUSBAR_HEIGHT = _reactNative.Platform.select({
|
|
|
12
12
|
android: DEFAULT_STATUSBAR_HEIGHT_EXPO,
|
|
13
13
|
ios: _reactNative.Platform.Version < 11 ? DEFAULT_STATUSBAR_HEIGHT_EXPO : 0
|
|
14
14
|
});
|
|
15
|
-
exports.APPROX_STATUSBAR_HEIGHT = APPROX_STATUSBAR_HEIGHT;
|
|
15
|
+
exports.APPROX_STATUSBAR_HEIGHT = APPROX_STATUSBAR_HEIGHT;
|
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"));
|
|
@@ -37,7 +37,8 @@ const SEED_DATA_PROPS = {
|
|
|
37
37
|
label: "Border Color"
|
|
38
38
|
}),
|
|
39
39
|
borderColorActive: (0, _types.createColorProp)({
|
|
40
|
-
label: "Border Color"
|
|
40
|
+
label: "Active Border Color",
|
|
41
|
+
description: "Color of border when date picker is active"
|
|
41
42
|
}),
|
|
42
43
|
format: {
|
|
43
44
|
label: "Format",
|
|
@@ -23,7 +23,9 @@ const SEED_DATA = {
|
|
|
23
23
|
}),
|
|
24
24
|
fieldName: (0, _types.createFieldNameProp)({
|
|
25
25
|
defaultValue: "ratingValue",
|
|
26
|
+
// this is the name of the variable declared on the screen in Draftbit
|
|
26
27
|
handlerPropName: "onPress",
|
|
28
|
+
// the change handler prop in this component
|
|
27
29
|
valuePropName: "rating" // the value prop in this component
|
|
28
30
|
}),
|
|
29
31
|
|
|
@@ -48,10 +50,4 @@ const SEED_DATA = {
|
|
|
48
50
|
})
|
|
49
51
|
}
|
|
50
52
|
};
|
|
51
|
-
exports.SEED_DATA = SEED_DATA;pes.createColorProp)({
|
|
52
|
-
label: "Inactive Color",
|
|
53
|
-
defaultValue: "divider"
|
|
54
|
-
})
|
|
55
|
-
}
|
|
56
|
-
};
|
|
57
53
|
exports.SEED_DATA = SEED_DATA;
|
|
@@ -15,6 +15,7 @@ function overlay(elevation) {
|
|
|
15
15
|
let surfaceColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _DarkTheme.default.colors.surface;
|
|
16
16
|
if (isAnimatedValue(elevation)) {
|
|
17
17
|
const inputRange = [0, 1, 2, 3, 8, 24];
|
|
18
|
+
|
|
18
19
|
// @ts-expect-error: TS doesn't seem to refine the type correctly
|
|
19
20
|
return elevation.interpolate({
|
|
20
21
|
inputRange,
|
|
@@ -23,6 +24,7 @@ function overlay(elevation) {
|
|
|
23
24
|
})
|
|
24
25
|
});
|
|
25
26
|
}
|
|
27
|
+
|
|
26
28
|
// @ts-expect-error: TS doesn't seem to refine the type correctly
|
|
27
29
|
return calculateColor(surfaceColor, elevation);
|
|
28
30
|
}
|
|
@@ -63,4 +65,4 @@ const elevationOverlayTransparency = {
|
|
|
63
65
|
22: 15.72,
|
|
64
66
|
23: 15.84,
|
|
65
67
|
24: 16
|
|
66
|
-
};
|
|
68
|
+
};
|
|
@@ -151,7 +151,14 @@ const DatePicker = _ref => {
|
|
|
151
151
|
const MAXIMIZED_LABEL_FONT_SIZE = textStyles.fontSize || typography.subtitle1.fontSize;
|
|
152
152
|
const MINIMIZED_LABEL_FONT_SIZE = labelSize ? labelSize : typography.caption.fontSize;
|
|
153
153
|
const hasActiveOutline = focused;
|
|
154
|
-
let inputTextColor,
|
|
154
|
+
let inputTextColor,
|
|
155
|
+
activeColor,
|
|
156
|
+
underlineColor,
|
|
157
|
+
borderColor = inputBorderColor,
|
|
158
|
+
placeholderColor,
|
|
159
|
+
containerStyle,
|
|
160
|
+
backgroundColor,
|
|
161
|
+
inputStyle;
|
|
155
162
|
inputTextColor = colors.strong;
|
|
156
163
|
if (disabled) {
|
|
157
164
|
activeColor = colors.light;
|
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";
|
|
@@ -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":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../../src/mappings/DatePicker.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../../src/mappings/DatePicker.ts"],"names":[],"mappings":"AAgKA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BrB,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-9a1f8c.2+9a1f8c6",
|
|
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-9a1f8c.2+9a1f8c6",
|
|
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": "9a1f8c61263c43031edbf650cefccb40ac43ab4d"
|
|
96
95
|
}
|
|
@@ -132,7 +132,7 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
|
|
|
132
132
|
? labelSize
|
|
133
133
|
: typography.caption.fontSize;
|
|
134
134
|
const hasActiveOutline = focused;
|
|
135
|
-
let inputTextColor, activeColor, underlineColor, borderColor, placeholderColor, containerStyle, backgroundColor, inputStyle;
|
|
135
|
+
let inputTextColor, activeColor, underlineColor, borderColor = inputBorderColor, placeholderColor, containerStyle, backgroundColor, inputStyle;
|
|
136
136
|
inputTextColor = colors.strong;
|
|
137
137
|
if (disabled) {
|
|
138
138
|
activeColor = colors.light;
|
|
@@ -232,7 +232,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
|
|
|
232
232
|
let inputTextColor,
|
|
233
233
|
activeColor,
|
|
234
234
|
underlineColor,
|
|
235
|
-
borderColor,
|
|
235
|
+
borderColor = inputBorderColor,
|
|
236
236
|
placeholderColor,
|
|
237
237
|
containerStyle: StyleProp<ViewStyle>,
|
|
238
238
|
backgroundColor,
|
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";
|
|
@@ -31,7 +31,8 @@ const SEED_DATA_PROPS = {
|
|
|
31
31
|
label: "Border Color",
|
|
32
32
|
}),
|
|
33
33
|
borderColorActive: createColorProp({
|
|
34
|
-
label: "Border Color",
|
|
34
|
+
label: "Active Border Color",
|
|
35
|
+
description: "Color of border when date picker is active",
|
|
35
36
|
}),
|
|
36
37
|
format: {
|
|
37
38
|
label: "Format",
|
|
@@ -42,7 +42,8 @@ const SEED_DATA_PROPS = {
|
|
|
42
42
|
label: "Border Color",
|
|
43
43
|
}),
|
|
44
44
|
borderColorActive: createColorProp({
|
|
45
|
-
label: "Border Color",
|
|
45
|
+
label: "Active Border Color",
|
|
46
|
+
description: "Color of border when date picker is active",
|
|
46
47
|
}),
|
|
47
48
|
format: {
|
|
48
49
|
label: "Format",
|
|
@@ -1,74 +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
|
-
*
|
|
33
|
-
* Since all children of that View are absolutley positioned, the View does not have a height and still looks and behaves weird.
|
|
34
|
-
* To fix/mitage this without setting a static height, the first card is rendered in invisible state to take up space.
|
|
35
|
-
* This effectivley makes the default height of the container be the height of the first card.
|
|
36
|
-
*/
|
|
37
|
-
|
|
38
|
-
return /*#__PURE__*/_react.default.createElement(_reactNative.View, null, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
39
|
-
style: styles.containerHeightFiller
|
|
40
|
-
}, childrenArray.length && childrenArray[0]), /*#__PURE__*/_react.default.createElement(_reactNativeDeckSwiper.default, {
|
|
41
|
-
cards: cardsFillerData,
|
|
42
|
-
renderCard: (_, i) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, childrenArray[i]),
|
|
43
|
-
keyExtractor: card => card === null || card === void 0 ? void 0 : card.toString(),
|
|
44
|
-
containerStyle: _reactNative.StyleSheet.flatten([styles.cardsContainer, style]),
|
|
45
|
-
cardStyle: styles.card,
|
|
46
|
-
onSwiped: onIndexChanged,
|
|
47
|
-
onSwipedAll: onEndReached,
|
|
48
|
-
cardIndex: startCardIndex,
|
|
49
|
-
infinite: infiniteSwiping,
|
|
50
|
-
verticalSwipe: verticalEnabled,
|
|
51
|
-
horizontalSwipe: horizontalEnabled,
|
|
52
|
-
showSecondCard: visibleCardCount > 1,
|
|
53
|
-
stackSize: visibleCardCount,
|
|
54
|
-
backgroundColor: "transparent",
|
|
55
|
-
cardVerticalMargin: 0,
|
|
56
|
-
cardHorizontalMargin: 0
|
|
57
|
-
}));
|
|
58
|
-
};
|
|
59
|
-
const styles = _reactNative.StyleSheet.create({
|
|
60
|
-
cardsContainer: {
|
|
61
|
-
width: "100%"
|
|
62
|
-
},
|
|
63
|
-
card: {
|
|
64
|
-
left: 0,
|
|
65
|
-
right: 0,
|
|
66
|
-
width: "auto",
|
|
67
|
-
height: "auto"
|
|
68
|
-
},
|
|
69
|
-
containerHeightFiller: {
|
|
70
|
-
opacity: 0.0
|
|
71
|
-
}
|
|
72
|
-
});
|
|
73
|
-
var _default = DeckSwiper;
|
|
74
|
-
exports.default = _default;
|
|
@@ -1,37 +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
|
-
var _a;
|
|
18
|
-
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
19
|
-
style: [styles.card, {
|
|
20
|
-
backgroundColor: theme.colors.background,
|
|
21
|
-
borderRadius: (_a = theme.borderRadius) === null || _a === void 0 ? void 0 : _a.global,
|
|
22
|
-
borderColor: theme.colors.divider
|
|
23
|
-
}, style]
|
|
24
|
-
}, children);
|
|
25
|
-
};
|
|
26
|
-
const styles = _reactNative.StyleSheet.create({
|
|
27
|
-
card: {
|
|
28
|
-
flex: 1,
|
|
29
|
-
alignItems: "center",
|
|
30
|
-
justifyContent: "center",
|
|
31
|
-
padding: 20,
|
|
32
|
-
borderWidth: 2
|
|
33
|
-
}
|
|
34
|
-
});
|
|
35
|
-
var _default = (0, _theming.withTheme)(DeckSwiperCard);
|
|
36
|
-
exports.default = _default;(0, _theming.withTheme)(DeckSwiperCard);
|
|
37
|
-
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,66 +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
|
-
*
|
|
26
|
-
* Since all children of that View are absolutley positioned, the View does not have a height and still looks and behaves weird.
|
|
27
|
-
* To fix/mitage this without setting a static height, the first card is rendered in invisible state to take up space.
|
|
28
|
-
* This effectivley makes the default height of the container be the height of the first card.
|
|
29
|
-
*/
|
|
30
|
-
|
|
31
|
-
return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
|
|
32
|
-
style: styles.containerHeightFiller
|
|
33
|
-
}, childrenArray.length && childrenArray[0]), /*#__PURE__*/React.createElement(DeckSwiperComponent, {
|
|
34
|
-
cards: cardsFillerData,
|
|
35
|
-
renderCard: (_, i) => /*#__PURE__*/React.createElement(React.Fragment, null, childrenArray[i]),
|
|
36
|
-
keyExtractor: card => card === null || card === void 0 ? void 0 : card.toString(),
|
|
37
|
-
containerStyle: StyleSheet.flatten([styles.cardsContainer, style]),
|
|
38
|
-
cardStyle: styles.card,
|
|
39
|
-
onSwiped: onIndexChanged,
|
|
40
|
-
onSwipedAll: onEndReached,
|
|
41
|
-
cardIndex: startCardIndex,
|
|
42
|
-
infinite: infiniteSwiping,
|
|
43
|
-
verticalSwipe: verticalEnabled,
|
|
44
|
-
horizontalSwipe: horizontalEnabled,
|
|
45
|
-
showSecondCard: visibleCardCount > 1,
|
|
46
|
-
stackSize: visibleCardCount,
|
|
47
|
-
backgroundColor: "transparent",
|
|
48
|
-
cardVerticalMargin: 0,
|
|
49
|
-
cardHorizontalMargin: 0
|
|
50
|
-
}));
|
|
51
|
-
};
|
|
52
|
-
const styles = StyleSheet.create({
|
|
53
|
-
cardsContainer: {
|
|
54
|
-
width: "100%"
|
|
55
|
-
},
|
|
56
|
-
card: {
|
|
57
|
-
left: 0,
|
|
58
|
-
right: 0,
|
|
59
|
-
width: "auto",
|
|
60
|
-
height: "auto"
|
|
61
|
-
},
|
|
62
|
-
containerHeightFiller: {
|
|
63
|
-
opacity: 0.0
|
|
64
|
-
}
|
|
65
|
-
});
|
|
66
|
-
export default DeckSwiper;
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { View, StyleSheet } from "react-native";
|
|
3
|
-
import { withTheme } from "../../theming";
|
|
4
|
-
const DeckSwiperCard = _ref => {
|
|
5
|
-
var _theme$borderRadius;
|
|
6
|
-
let {
|
|
7
|
-
style,
|
|
8
|
-
children,
|
|
9
|
-
theme
|
|
10
|
-
} = _ref;
|
|
11
|
-
return /*#__PURE__*/React.createElement(View, {
|
|
12
|
-
style: [styles.card, {
|
|
13
|
-
backgroundColor: theme.colors.background,
|
|
14
|
-
borderRadius: (_theme$borderRadius = theme.borderRadius) === null || _theme$borderRadius === void 0 ? void 0 : _theme$borderRadius.global,
|
|
15
|
-
borderColor: theme.colors.divider
|
|
16
|
-
}, style]
|
|
17
|
-
}, children);
|
|
18
|
-
};
|
|
19
|
-
const styles = StyleSheet.create({
|
|
20
|
-
card: {
|
|
21
|
-
flex: 1,
|
|
22
|
-
alignItems: "center",
|
|
23
|
-
justifyContent: "center",
|
|
24
|
-
padding: 20,
|
|
25
|
-
borderWidth: 2
|
|
26
|
-
}
|
|
27
|
-
});
|
|
28
|
-
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,CA6DlE,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,35 +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
|
-
*
|
|
13
|
-
* Since all children of that View are absolutley positioned, the View does not have a height and still looks and behaves weird.
|
|
14
|
-
* To fix/mitage this without setting a static height, the first card is rendered in invisible state to take up space.
|
|
15
|
-
* This effectivley makes the default height of the container be the height of the first card.
|
|
16
|
-
*/
|
|
17
|
-
return (React.createElement(View, null,
|
|
18
|
-
React.createElement(View, { style: styles.containerHeightFiller }, childrenArray.length && childrenArray[0]),
|
|
19
|
-
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 })));
|
|
20
|
-
};
|
|
21
|
-
const styles = StyleSheet.create({
|
|
22
|
-
cardsContainer: {
|
|
23
|
-
width: "100%",
|
|
24
|
-
},
|
|
25
|
-
card: {
|
|
26
|
-
left: 0,
|
|
27
|
-
right: 0,
|
|
28
|
-
width: "auto",
|
|
29
|
-
height: "auto",
|
|
30
|
-
},
|
|
31
|
-
containerHeightFiller: {
|
|
32
|
-
opacity: 0.0,
|
|
33
|
-
},
|
|
34
|
-
});
|
|
35
|
-
export default DeckSwiper;
|
|
@@ -1,94 +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
|
-
*
|
|
43
|
-
* Since all children of that View are absolutley positioned, the View does not have a height and still looks and behaves weird.
|
|
44
|
-
* To fix/mitage this without setting a static height, the first card is rendered in invisible state to take up space.
|
|
45
|
-
* This effectivley makes the default height of the container be the height of the first card.
|
|
46
|
-
*/
|
|
47
|
-
|
|
48
|
-
return (
|
|
49
|
-
<View>
|
|
50
|
-
<View style={styles.containerHeightFiller}>
|
|
51
|
-
{childrenArray.length && childrenArray[0]}
|
|
52
|
-
</View>
|
|
53
|
-
<DeckSwiperComponent
|
|
54
|
-
cards={cardsFillerData}
|
|
55
|
-
renderCard={(_, i) => <>{childrenArray[i]}</>}
|
|
56
|
-
keyExtractor={(card) => card?.toString()}
|
|
57
|
-
containerStyle={
|
|
58
|
-
StyleSheet.flatten([styles.cardsContainer, style]) as
|
|
59
|
-
| object
|
|
60
|
-
| undefined
|
|
61
|
-
}
|
|
62
|
-
cardStyle={styles.card as object | undefined}
|
|
63
|
-
onSwiped={onIndexChanged}
|
|
64
|
-
onSwipedAll={onEndReached}
|
|
65
|
-
cardIndex={startCardIndex}
|
|
66
|
-
infinite={infiniteSwiping}
|
|
67
|
-
verticalSwipe={verticalEnabled}
|
|
68
|
-
horizontalSwipe={horizontalEnabled}
|
|
69
|
-
showSecondCard={visibleCardCount > 1}
|
|
70
|
-
stackSize={visibleCardCount}
|
|
71
|
-
backgroundColor="transparent"
|
|
72
|
-
cardVerticalMargin={0}
|
|
73
|
-
cardHorizontalMargin={0}
|
|
74
|
-
/>
|
|
75
|
-
</View>
|
|
76
|
-
);
|
|
77
|
-
};
|
|
78
|
-
|
|
79
|
-
const styles = StyleSheet.create({
|
|
80
|
-
cardsContainer: {
|
|
81
|
-
width: "100%",
|
|
82
|
-
},
|
|
83
|
-
card: {
|
|
84
|
-
left: 0,
|
|
85
|
-
right: 0,
|
|
86
|
-
width: "auto",
|
|
87
|
-
height: "auto",
|
|
88
|
-
},
|
|
89
|
-
containerHeightFiller: {
|
|
90
|
-
opacity: 0.0,
|
|
91
|
-
},
|
|
92
|
-
});
|
|
93
|
-
|
|
94
|
-
export default DeckSwiper;
|
|
@@ -1,25 +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, }) => {
|
|
5
|
-
var _a;
|
|
6
|
-
return (React.createElement(View, { style: [
|
|
7
|
-
styles.card,
|
|
8
|
-
{
|
|
9
|
-
backgroundColor: theme.colors.background,
|
|
10
|
-
borderRadius: (_a = theme.borderRadius) === null || _a === void 0 ? void 0 : _a.global,
|
|
11
|
-
borderColor: theme.colors.divider,
|
|
12
|
-
},
|
|
13
|
-
style,
|
|
14
|
-
] }, children));
|
|
15
|
-
};
|
|
16
|
-
const styles = StyleSheet.create({
|
|
17
|
-
card: {
|
|
18
|
-
flex: 1,
|
|
19
|
-
alignItems: "center",
|
|
20
|
-
justifyContent: "center",
|
|
21
|
-
padding: 20,
|
|
22
|
-
borderWidth: 2,
|
|
23
|
-
},
|
|
24
|
-
});
|
|
25
|
-
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
|
-
};
|