@draftbit/core 46.2.4-956f64.5 → 46.2.4-97ef96.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/commonjs/components/Config.js +1 -1
- package/lib/commonjs/components/{SVG.js → Svg.js} +6 -7
- package/lib/commonjs/index.js +7 -15
- package/lib/commonjs/mappings/{SVG.js → Svg.js} +2 -0
- package/lib/module/components/CardContainerShortImage.js +5 -19
- package/lib/module/components/Config.js +1 -1
- package/lib/module/components/Layout.js +21 -43
- package/lib/module/components/{SVG.js → Svg.js} +6 -7
- package/lib/module/index.js +2 -3
- package/lib/module/mappings/Svg.js +16 -0
- package/lib/typescript/src/components/Svg.d.ts +8 -0
- package/lib/typescript/src/index.d.ts +1 -2
- package/lib/typescript/src/mappings/{SVG.d.ts → Svg.d.ts} +2 -0
- package/package.json +4 -6
- package/src/components/Config.js +1 -1
- package/src/components/Config.ts +1 -1
- package/src/components/{SVG.js → Svg.js} +5 -6
- package/src/components/{SVG.tsx → Svg.tsx} +9 -9
- package/src/index.js +1 -2
- package/src/index.tsx +1 -2
- package/src/mappings/Svg.js +21 -0
- package/src/mappings/Svg.ts +26 -0
- package/lib/commonjs/components/Youtube.js +0 -73
- package/lib/commonjs/mappings/Youtube.js +0 -42
- package/lib/module/components/Youtube.js +0 -59
- package/lib/module/mappings/SVG.js +0 -14
- package/lib/module/mappings/Youtube.js +0 -33
- package/lib/typescript/src/components/SVG.d.ts +0 -8
- package/lib/typescript/src/components/Youtube.d.ts +0 -44
- package/lib/typescript/src/mappings/Youtube.d.ts +0 -36
- package/src/components/Youtube.js +0 -38
- package/src/components/Youtube.tsx +0 -66
- package/src/mappings/SVG.js +0 -14
- package/src/mappings/SVG.ts +0 -15
- package/src/mappings/Youtube.js +0 -33
- package/src/mappings/Youtube.ts +0 -40
|
@@ -62,7 +62,7 @@ var _default = {
|
|
|
62
62
|
width: size.width,
|
|
63
63
|
height: size.height
|
|
64
64
|
}, "image-placeholder_1"),
|
|
65
|
-
placeholderSvgURL: "https://static.draftbit.com/images/placeholder-
|
|
65
|
+
placeholderSvgURL: "https://static.draftbit.com/images/placeholder-image.svg",
|
|
66
66
|
squareImageUrl: buildImageUrl({
|
|
67
67
|
width: 100,
|
|
68
68
|
height: 100
|
|
@@ -19,31 +19,30 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
19
19
|
|
|
20
20
|
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; }
|
|
21
21
|
|
|
22
|
-
const
|
|
22
|
+
const Svg = _ref => {
|
|
23
23
|
let {
|
|
24
|
-
source,
|
|
24
|
+
source = _Config.default.placeholderSvgURL,
|
|
25
25
|
style
|
|
26
26
|
} = _ref;
|
|
27
|
-
let svgSource = source === null || source === undefined ? _Config.default.placeholderSvgURL : source;
|
|
28
27
|
return /*#__PURE__*/React.createElement(React.Fragment, null, _reactNative.Platform.OS === "ios" && /*#__PURE__*/React.createElement(_reactNative.View, {
|
|
29
28
|
style: style
|
|
30
29
|
}, /*#__PURE__*/React.createElement(_reactNativeSvg.SvgUri, {
|
|
31
30
|
width: "100%",
|
|
32
31
|
height: "100%",
|
|
33
|
-
uri:
|
|
32
|
+
uri: source
|
|
34
33
|
})), _reactNative.Platform.OS === "android" && /*#__PURE__*/React.createElement(_reactNative.View, {
|
|
35
34
|
style: style
|
|
36
35
|
}, /*#__PURE__*/React.createElement(_reactNativeSvg.SvgUri, {
|
|
37
36
|
width: "100%",
|
|
38
37
|
height: "100%",
|
|
39
|
-
uri:
|
|
38
|
+
uri: source
|
|
40
39
|
})), _reactNative.Platform.OS === "web" && /*#__PURE__*/React.createElement(_reactNative.Image, {
|
|
41
40
|
style: style,
|
|
42
41
|
source: {
|
|
43
|
-
uri:
|
|
42
|
+
uri: source
|
|
44
43
|
}
|
|
45
44
|
}));
|
|
46
45
|
};
|
|
47
46
|
|
|
48
|
-
var _default =
|
|
47
|
+
var _default = Svg;
|
|
49
48
|
exports.default = _default;
|
package/lib/commonjs/index.js
CHANGED
|
@@ -291,12 +291,6 @@ Object.defineProperty(exports, "RowHeadlineImageIcon", {
|
|
|
291
291
|
return _RowHeadlineImageIcon.default;
|
|
292
292
|
}
|
|
293
293
|
});
|
|
294
|
-
Object.defineProperty(exports, "SVG", {
|
|
295
|
-
enumerable: true,
|
|
296
|
-
get: function () {
|
|
297
|
-
return _SVG.default;
|
|
298
|
-
}
|
|
299
|
-
});
|
|
300
294
|
Object.defineProperty(exports, "ScreenContainer", {
|
|
301
295
|
enumerable: true,
|
|
302
296
|
get: function () {
|
|
@@ -345,6 +339,12 @@ Object.defineProperty(exports, "Surface", {
|
|
|
345
339
|
return _Surface.default;
|
|
346
340
|
}
|
|
347
341
|
});
|
|
342
|
+
Object.defineProperty(exports, "Svg", {
|
|
343
|
+
enumerable: true,
|
|
344
|
+
get: function () {
|
|
345
|
+
return _Svg.default;
|
|
346
|
+
}
|
|
347
|
+
});
|
|
348
348
|
Object.defineProperty(exports, "Swiper", {
|
|
349
349
|
enumerable: true,
|
|
350
350
|
get: function () {
|
|
@@ -393,12 +393,6 @@ Object.defineProperty(exports, "Touchable", {
|
|
|
393
393
|
return _Touchable.default;
|
|
394
394
|
}
|
|
395
395
|
});
|
|
396
|
-
Object.defineProperty(exports, "Youtube", {
|
|
397
|
-
enumerable: true,
|
|
398
|
-
get: function () {
|
|
399
|
-
return _Youtube.default;
|
|
400
|
-
}
|
|
401
|
-
});
|
|
402
396
|
Object.defineProperty(exports, "injectIcon", {
|
|
403
397
|
enumerable: true,
|
|
404
398
|
get: function () {
|
|
@@ -454,7 +448,7 @@ var _IconButton = _interopRequireDefault(require("./components/IconButton"));
|
|
|
454
448
|
|
|
455
449
|
var _Image = _interopRequireDefault(require("./components/Image"));
|
|
456
450
|
|
|
457
|
-
var
|
|
451
|
+
var _Svg = _interopRequireDefault(require("./components/Svg"));
|
|
458
452
|
|
|
459
453
|
var _NumberInput = _interopRequireDefault(require("./components/NumberInput"));
|
|
460
454
|
|
|
@@ -518,8 +512,6 @@ var _Stepper = _interopRequireDefault(require("./components/Stepper"));
|
|
|
518
512
|
|
|
519
513
|
var _useAuthState = require("./components/useAuthState");
|
|
520
514
|
|
|
521
|
-
var _Youtube = _interopRequireDefault(require("./components/Youtube"));
|
|
522
|
-
|
|
523
515
|
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); }
|
|
524
516
|
|
|
525
517
|
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; }
|
|
@@ -11,11 +11,13 @@ const SEED_DATA = {
|
|
|
11
11
|
name: "SVG",
|
|
12
12
|
tag: "SVG",
|
|
13
13
|
description: "An SVG component",
|
|
14
|
+
packageName: "@draftbit/core",
|
|
14
15
|
category: _types.COMPONENT_TYPES.media,
|
|
15
16
|
layout: {
|
|
16
17
|
width: 100,
|
|
17
18
|
height: 100
|
|
18
19
|
},
|
|
20
|
+
stylesPanelSections: [_types.StylesPanelSections.Size, _types.StylesPanelSections.Margins, _types.StylesPanelSections.Position, _types.StylesPanelSections.Effects],
|
|
19
21
|
props: {
|
|
20
22
|
source: (0, _types.createSvgProp)()
|
|
21
23
|
}
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
|
|
1
3
|
import React from "react";
|
|
2
4
|
import { View, Text } from "react-native";
|
|
3
5
|
import Image from "./Image";
|
|
@@ -23,11 +25,10 @@ const CardContainerShortImage = _ref => {
|
|
|
23
25
|
onPress,
|
|
24
26
|
...rest
|
|
25
27
|
} = _ref;
|
|
26
|
-
return /*#__PURE__*/React.createElement(Card, {
|
|
28
|
+
return /*#__PURE__*/React.createElement(Card, _extends({
|
|
27
29
|
style: style,
|
|
28
|
-
onPress: onPress
|
|
29
|
-
|
|
30
|
-
}, /*#__PURE__*/React.createElement(Elevation, {
|
|
30
|
+
onPress: onPress
|
|
31
|
+
}, rest), /*#__PURE__*/React.createElement(Elevation, {
|
|
31
32
|
style: {
|
|
32
33
|
elevation,
|
|
33
34
|
borderRadius: roundness
|
|
@@ -75,19 +76,4 @@ const CardContainerShortImage = _ref => {
|
|
|
75
76
|
}))));
|
|
76
77
|
};
|
|
77
78
|
|
|
78
|
-
export default withTheme(CardContainerShortImage);2, {
|
|
79
|
-
color: colors.medium,
|
|
80
|
-
marginTop: 4
|
|
81
|
-
}]
|
|
82
|
-
}, subtitle) : null), mode === "right" && /*#__PURE__*/React.createElement(Image, {
|
|
83
|
-
style: {
|
|
84
|
-
aspectRatio
|
|
85
|
-
},
|
|
86
|
-
source: typeof image === "string" ? {
|
|
87
|
-
uri: image
|
|
88
|
-
} : image,
|
|
89
|
-
resizeMode: "cover"
|
|
90
|
-
}))));
|
|
91
|
-
};
|
|
92
|
-
|
|
93
79
|
export default withTheme(CardContainerShortImage);
|
|
@@ -54,7 +54,7 @@ export default {
|
|
|
54
54
|
width: size.width,
|
|
55
55
|
height: size.height
|
|
56
56
|
}, "image-placeholder_1"),
|
|
57
|
-
placeholderSvgURL: "https://static.draftbit.com/images/placeholder-
|
|
57
|
+
placeholderSvgURL: "https://static.draftbit.com/images/placeholder-image.svg",
|
|
58
58
|
squareImageUrl: buildImageUrl({
|
|
59
59
|
width: 100,
|
|
60
60
|
height: 100
|
|
@@ -1,5 +1,8 @@
|
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
|
|
1
3
|
import * as React from "react";
|
|
2
|
-
import { View } from "react-native";
|
|
4
|
+
import { View } from "react-native"; // @ts-ignore
|
|
5
|
+
|
|
3
6
|
export function Center(_ref) {
|
|
4
7
|
let {
|
|
5
8
|
width = 240,
|
|
@@ -9,16 +12,15 @@ export function Center(_ref) {
|
|
|
9
12
|
style,
|
|
10
13
|
...rest
|
|
11
14
|
} = _ref;
|
|
12
|
-
return /*#__PURE__*/React.createElement(View, {
|
|
15
|
+
return /*#__PURE__*/React.createElement(View, _extends({
|
|
13
16
|
style: [{
|
|
14
17
|
justifyContent: "center",
|
|
15
18
|
alignItems: "center",
|
|
16
19
|
width,
|
|
17
20
|
height,
|
|
18
21
|
backgroundColor: bgColor
|
|
19
|
-
}, style]
|
|
20
|
-
|
|
21
|
-
}, children);
|
|
22
|
+
}, style]
|
|
23
|
+
}, rest), children);
|
|
22
24
|
}
|
|
23
25
|
export function Circle(_ref2) {
|
|
24
26
|
let {
|
|
@@ -29,7 +31,7 @@ export function Circle(_ref2) {
|
|
|
29
31
|
...rest
|
|
30
32
|
} = _ref2;
|
|
31
33
|
const borderRadius = 1000;
|
|
32
|
-
return /*#__PURE__*/React.createElement(Center, {
|
|
34
|
+
return /*#__PURE__*/React.createElement(Center, _extends({
|
|
33
35
|
width: size,
|
|
34
36
|
height: size,
|
|
35
37
|
bgColor: bgColor,
|
|
@@ -37,9 +39,8 @@ export function Circle(_ref2) {
|
|
|
37
39
|
backgroundColor: bgColor,
|
|
38
40
|
borderRadius,
|
|
39
41
|
overflow: "hidden"
|
|
40
|
-
}]
|
|
41
|
-
|
|
42
|
-
}, children);
|
|
42
|
+
}]
|
|
43
|
+
}, rest), children);
|
|
43
44
|
}
|
|
44
45
|
export function Square(_ref3) {
|
|
45
46
|
let {
|
|
@@ -49,13 +50,12 @@ export function Square(_ref3) {
|
|
|
49
50
|
style,
|
|
50
51
|
...rest
|
|
51
52
|
} = _ref3;
|
|
52
|
-
return /*#__PURE__*/React.createElement(Center, {
|
|
53
|
+
return /*#__PURE__*/React.createElement(Center, _extends({
|
|
53
54
|
style: style,
|
|
54
55
|
width: size,
|
|
55
56
|
height: size,
|
|
56
|
-
bgColor: bgColor
|
|
57
|
-
|
|
58
|
-
}, children);
|
|
57
|
+
bgColor: bgColor
|
|
58
|
+
}, rest), children);
|
|
59
59
|
}
|
|
60
60
|
export function Row(_ref4) {
|
|
61
61
|
let {
|
|
@@ -65,14 +65,14 @@ export function Row(_ref4) {
|
|
|
65
65
|
style,
|
|
66
66
|
...rest
|
|
67
67
|
} = _ref4;
|
|
68
|
-
return /*#__PURE__*/React.createElement(View, {
|
|
69
|
-
style: [style,
|
|
68
|
+
return /*#__PURE__*/React.createElement(View, _extends({
|
|
69
|
+
style: [style, // style goes first b/c we can't override these
|
|
70
|
+
{
|
|
70
71
|
alignItems,
|
|
71
72
|
flexDirection: "row",
|
|
72
73
|
justifyContent: justifyContent
|
|
73
|
-
}]
|
|
74
|
-
|
|
75
|
-
}, children);
|
|
74
|
+
}]
|
|
75
|
+
}, rest), children);
|
|
76
76
|
}
|
|
77
77
|
export function Spacer(_ref5) {
|
|
78
78
|
let {
|
|
@@ -84,36 +84,14 @@ export function Spacer(_ref5) {
|
|
|
84
84
|
style,
|
|
85
85
|
...rest
|
|
86
86
|
} = _ref5;
|
|
87
|
-
return /*#__PURE__*/React.createElement(View, {
|
|
87
|
+
return /*#__PURE__*/React.createElement(View, _extends({
|
|
88
88
|
style: [style, {
|
|
89
89
|
paddingRight: right,
|
|
90
90
|
paddingTop: top,
|
|
91
91
|
paddingLeft: left,
|
|
92
92
|
paddingBottom: bottom
|
|
93
|
-
}]
|
|
94
|
-
|
|
95
|
-
}, children);
|
|
96
|
-
}
|
|
97
|
-
export function Stack(_ref6) {
|
|
98
|
-
let {
|
|
99
|
-
children,
|
|
100
|
-
justifyContent = "flex-start",
|
|
101
|
-
alignItems = "flex-start",
|
|
102
|
-
style,
|
|
103
|
-
...rest
|
|
104
|
-
} = _ref6;
|
|
105
|
-
return (
|
|
106
|
-
/*#__PURE__*/
|
|
107
|
-
// style must go first since we don't want justifyContent, alignItems overridden
|
|
108
|
-
React.createElement(View, {
|
|
109
|
-
style: [style, {
|
|
110
|
-
justifyContent,
|
|
111
|
-
alignItems
|
|
112
|
-
}],
|
|
113
|
-
...rest
|
|
114
|
-
}, children)
|
|
115
|
-
);
|
|
116
|
-
}dren);
|
|
93
|
+
}]
|
|
94
|
+
}, rest), children);
|
|
117
95
|
}
|
|
118
96
|
export function Stack(_ref6) {
|
|
119
97
|
let {
|
|
@@ -3,30 +3,29 @@ import { View, Platform, Image } from "react-native";
|
|
|
3
3
|
import { SvgUri } from "react-native-svg";
|
|
4
4
|
import Config from "./Config";
|
|
5
5
|
|
|
6
|
-
const
|
|
6
|
+
const Svg = _ref => {
|
|
7
7
|
let {
|
|
8
|
-
source,
|
|
8
|
+
source = Config.placeholderSvgURL,
|
|
9
9
|
style
|
|
10
10
|
} = _ref;
|
|
11
|
-
let svgSource = source === null || source === undefined ? Config.placeholderSvgURL : source;
|
|
12
11
|
return /*#__PURE__*/React.createElement(React.Fragment, null, Platform.OS === "ios" && /*#__PURE__*/React.createElement(View, {
|
|
13
12
|
style: style
|
|
14
13
|
}, /*#__PURE__*/React.createElement(SvgUri, {
|
|
15
14
|
width: "100%",
|
|
16
15
|
height: "100%",
|
|
17
|
-
uri:
|
|
16
|
+
uri: source
|
|
18
17
|
})), Platform.OS === "android" && /*#__PURE__*/React.createElement(View, {
|
|
19
18
|
style: style
|
|
20
19
|
}, /*#__PURE__*/React.createElement(SvgUri, {
|
|
21
20
|
width: "100%",
|
|
22
21
|
height: "100%",
|
|
23
|
-
uri:
|
|
22
|
+
uri: source
|
|
24
23
|
})), Platform.OS === "web" && /*#__PURE__*/React.createElement(Image, {
|
|
25
24
|
style: style,
|
|
26
25
|
source: {
|
|
27
|
-
uri:
|
|
26
|
+
uri: source
|
|
28
27
|
}
|
|
29
28
|
}));
|
|
30
29
|
};
|
|
31
30
|
|
|
32
|
-
export default
|
|
31
|
+
export default Svg;
|
package/lib/module/index.js
CHANGED
|
@@ -17,7 +17,7 @@ export { default as FAB } from "./components/FAB";
|
|
|
17
17
|
export { default as FieldSearchBarFull } from "./components/FieldSearchBarFull";
|
|
18
18
|
export { default as IconButton } from "./components/IconButton";
|
|
19
19
|
export { default as Image } from "./components/Image";
|
|
20
|
-
export { default as
|
|
20
|
+
export { default as Svg } from "./components/Svg";
|
|
21
21
|
export { default as NumberInput } from "./components/NumberInput";
|
|
22
22
|
export { default as ScreenContainer } from "./components/ScreenContainer";
|
|
23
23
|
export { default as StarRating } from "./components/StarRating";
|
|
@@ -50,5 +50,4 @@ export { default as RowHeadlineImageCaption } from "./components/RowHeadlineImag
|
|
|
50
50
|
export { default as RowHeadlineImageIcon } from "./components/RowHeadlineImageIcon";
|
|
51
51
|
export { default as Slider } from "./components/Slider";
|
|
52
52
|
export { default as Stepper } from "./components/Stepper";
|
|
53
|
-
export { useAuthState } from "./components/useAuthState";
|
|
54
|
-
export { default as Youtube } from "./components/Youtube"; // a comment to fix sourcemap comment issue
|
|
53
|
+
export { useAuthState } from "./components/useAuthState"; // a comment to fix sourcemap comment issue
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { COMPONENT_TYPES, createSvgProp, StylesPanelSections } from "@draftbit/types";
|
|
2
|
+
export const SEED_DATA = {
|
|
3
|
+
name: "SVG",
|
|
4
|
+
tag: "SVG",
|
|
5
|
+
description: "An SVG component",
|
|
6
|
+
packageName: "@draftbit/core",
|
|
7
|
+
category: COMPONENT_TYPES.media,
|
|
8
|
+
layout: {
|
|
9
|
+
width: 100,
|
|
10
|
+
height: 100
|
|
11
|
+
},
|
|
12
|
+
stylesPanelSections: [StylesPanelSections.Size, StylesPanelSections.Margins, StylesPanelSections.Position, StylesPanelSections.Effects],
|
|
13
|
+
props: {
|
|
14
|
+
source: createSvgProp()
|
|
15
|
+
}
|
|
16
|
+
};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { StyleProp, ImageStyle } from "react-native";
|
|
3
|
+
declare type SvgComponentProps = {
|
|
4
|
+
source: string;
|
|
5
|
+
style?: StyleProp<ImageStyle>;
|
|
6
|
+
};
|
|
7
|
+
declare const Svg: React.FC<React.PropsWithChildren<SvgComponentProps>>;
|
|
8
|
+
export default Svg;
|
|
@@ -17,7 +17,7 @@ export { default as FAB } from "./components/FAB";
|
|
|
17
17
|
export { default as FieldSearchBarFull } from "./components/FieldSearchBarFull";
|
|
18
18
|
export { default as IconButton } from "./components/IconButton";
|
|
19
19
|
export { default as Image } from "./components/Image";
|
|
20
|
-
export { default as
|
|
20
|
+
export { default as Svg } from "./components/Svg";
|
|
21
21
|
export { default as NumberInput } from "./components/NumberInput";
|
|
22
22
|
export { default as ScreenContainer } from "./components/ScreenContainer";
|
|
23
23
|
export { default as StarRating } from "./components/StarRating";
|
|
@@ -49,4 +49,3 @@ export { default as RowHeadlineImageIcon } from "./components/RowHeadlineImageIc
|
|
|
49
49
|
export { default as Slider } from "./components/Slider";
|
|
50
50
|
export { default as Stepper } from "./components/Stepper";
|
|
51
51
|
export { useAuthState } from "./components/useAuthState";
|
|
52
|
-
export { default as Youtube } from "./components/Youtube";
|
|
@@ -2,11 +2,13 @@ export declare const SEED_DATA: {
|
|
|
2
2
|
name: string;
|
|
3
3
|
tag: string;
|
|
4
4
|
description: string;
|
|
5
|
+
packageName: string;
|
|
5
6
|
category: string;
|
|
6
7
|
layout: {
|
|
7
8
|
width: number;
|
|
8
9
|
height: number;
|
|
9
10
|
};
|
|
11
|
+
stylesPanelSections: string[];
|
|
10
12
|
props: {
|
|
11
13
|
source: {
|
|
12
14
|
label: string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@draftbit/core",
|
|
3
|
-
"version": "46.2.4-
|
|
3
|
+
"version": "46.2.4-97ef96.5+97ef9659",
|
|
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.2.4",
|
|
44
|
+
"@draftbit/types": "^46.2.4-97ef96.5+97ef9659",
|
|
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",
|
|
@@ -55,9 +55,7 @@
|
|
|
55
55
|
"react-native-modal-datetime-picker": "^13.0.0",
|
|
56
56
|
"react-native-svg": "^12.3.0",
|
|
57
57
|
"react-native-typography": "^1.4.1",
|
|
58
|
-
"react-native-web-swiper": "^2.2.3"
|
|
59
|
-
"react-native-web-webview": "^1.0.2",
|
|
60
|
-
"react-native-youtube-iframe": "^2.2.2"
|
|
58
|
+
"react-native-web-swiper": "^2.2.3"
|
|
61
59
|
},
|
|
62
60
|
"devDependencies": {
|
|
63
61
|
"@types/color": "^3.0.1",
|
|
@@ -82,5 +80,5 @@
|
|
|
82
80
|
]
|
|
83
81
|
]
|
|
84
82
|
},
|
|
85
|
-
"gitHead": "
|
|
83
|
+
"gitHead": "97ef96594fb4f4364f4fa5af5804ec1ac287ec3f"
|
|
86
84
|
}
|
package/src/components/Config.js
CHANGED
|
@@ -42,7 +42,7 @@ export default {
|
|
|
42
42
|
cardIconElevation: 1,
|
|
43
43
|
placeholderImageURL: "https://static.draftbit.com/images/placeholder-image" + getExtension(),
|
|
44
44
|
getPlaceholderImageUrl: (size) => buildImageUrl({ width: size.width, height: size.height }, "image-placeholder_1"),
|
|
45
|
-
placeholderSvgURL: "https://static.draftbit.com/images/placeholder-
|
|
45
|
+
placeholderSvgURL: "https://static.draftbit.com/images/placeholder-image.svg",
|
|
46
46
|
squareImageUrl: buildImageUrl({ width: 100, height: 100 }, "Avatar"),
|
|
47
47
|
FABSize: 40,
|
|
48
48
|
FABBorderRadius: 20,
|
package/src/components/Config.ts
CHANGED
|
@@ -60,7 +60,7 @@ export default {
|
|
|
60
60
|
{ width: size.width, height: size.height },
|
|
61
61
|
"image-placeholder_1"
|
|
62
62
|
),
|
|
63
|
-
placeholderSvgURL: "https://static.draftbit.com/images/placeholder-
|
|
63
|
+
placeholderSvgURL: "https://static.draftbit.com/images/placeholder-image.svg",
|
|
64
64
|
squareImageUrl: buildImageUrl({ width: 100, height: 100 }, "Avatar"),
|
|
65
65
|
FABSize: 40,
|
|
66
66
|
FABBorderRadius: 20,
|
|
@@ -2,13 +2,12 @@ import * as React from "react";
|
|
|
2
2
|
import { View, Platform, Image } from "react-native";
|
|
3
3
|
import { SvgUri } from "react-native-svg";
|
|
4
4
|
import Config from "./Config";
|
|
5
|
-
const
|
|
6
|
-
let svgSource = source === null || source === undefined ? Config.placeholderSvgURL : source;
|
|
5
|
+
const Svg = ({ source = Config.placeholderSvgURL, style, }) => {
|
|
7
6
|
return (React.createElement(React.Fragment, null,
|
|
8
7
|
Platform.OS === "ios" && (React.createElement(View, { style: style },
|
|
9
|
-
React.createElement(SvgUri, { width: "100%", height: "100%", uri:
|
|
8
|
+
React.createElement(SvgUri, { width: "100%", height: "100%", uri: source }))),
|
|
10
9
|
Platform.OS === "android" && (React.createElement(View, { style: style },
|
|
11
|
-
React.createElement(SvgUri, { width: "100%", height: "100%", uri:
|
|
12
|
-
Platform.OS === "web" && (React.createElement(Image, { style: style, source: { uri:
|
|
10
|
+
React.createElement(SvgUri, { width: "100%", height: "100%", uri: source }))),
|
|
11
|
+
Platform.OS === "web" && (React.createElement(Image, { style: style, source: { uri: source } }))));
|
|
13
12
|
};
|
|
14
|
-
export default
|
|
13
|
+
export default Svg;
|
|
@@ -4,32 +4,32 @@ import { SvgUri } from "react-native-svg";
|
|
|
4
4
|
|
|
5
5
|
import Config from "./Config";
|
|
6
6
|
|
|
7
|
-
type
|
|
7
|
+
type SvgComponentProps = {
|
|
8
8
|
source: string;
|
|
9
9
|
style?: StyleProp<ImageStyle>;
|
|
10
10
|
};
|
|
11
11
|
|
|
12
|
-
const
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
12
|
+
const Svg: React.FC<React.PropsWithChildren<SvgComponentProps>> = ({
|
|
13
|
+
source = Config.placeholderSvgURL,
|
|
14
|
+
style,
|
|
15
|
+
}) => {
|
|
16
16
|
return (
|
|
17
17
|
<>
|
|
18
18
|
{Platform.OS === "ios" && (
|
|
19
19
|
<View style={style}>
|
|
20
|
-
<SvgUri width="100%" height="100%" uri={
|
|
20
|
+
<SvgUri width="100%" height="100%" uri={source} />
|
|
21
21
|
</View>
|
|
22
22
|
)}
|
|
23
23
|
{Platform.OS === "android" && (
|
|
24
24
|
<View style={style}>
|
|
25
|
-
<SvgUri width="100%" height="100%" uri={
|
|
25
|
+
<SvgUri width="100%" height="100%" uri={source} />
|
|
26
26
|
</View>
|
|
27
27
|
)}
|
|
28
28
|
{Platform.OS === "web" && (
|
|
29
|
-
<Image style={style} source={{ uri:
|
|
29
|
+
<Image style={style} source={{ uri: source }} />
|
|
30
30
|
)}
|
|
31
31
|
</>
|
|
32
32
|
);
|
|
33
33
|
};
|
|
34
34
|
|
|
35
|
-
export default
|
|
35
|
+
export default Svg;
|
package/src/index.js
CHANGED
|
@@ -17,7 +17,7 @@ export { default as FAB } from "./components/FAB";
|
|
|
17
17
|
export { default as FieldSearchBarFull } from "./components/FieldSearchBarFull";
|
|
18
18
|
export { default as IconButton } from "./components/IconButton";
|
|
19
19
|
export { default as Image } from "./components/Image";
|
|
20
|
-
export { default as
|
|
20
|
+
export { default as Svg } from "./components/Svg";
|
|
21
21
|
export { default as NumberInput } from "./components/NumberInput";
|
|
22
22
|
export { default as ScreenContainer } from "./components/ScreenContainer";
|
|
23
23
|
export { default as StarRating } from "./components/StarRating";
|
|
@@ -50,5 +50,4 @@ export { default as RowHeadlineImageIcon } from "./components/RowHeadlineImageIc
|
|
|
50
50
|
export { default as Slider } from "./components/Slider";
|
|
51
51
|
export { default as Stepper } from "./components/Stepper";
|
|
52
52
|
export { useAuthState } from "./components/useAuthState";
|
|
53
|
-
export { default as Youtube } from "./components/Youtube";
|
|
54
53
|
// a comment to fix sourcemap comment issue
|
package/src/index.tsx
CHANGED
|
@@ -18,7 +18,7 @@ export { default as FAB } from "./components/FAB";
|
|
|
18
18
|
export { default as FieldSearchBarFull } from "./components/FieldSearchBarFull";
|
|
19
19
|
export { default as IconButton } from "./components/IconButton";
|
|
20
20
|
export { default as Image } from "./components/Image";
|
|
21
|
-
export { default as
|
|
21
|
+
export { default as Svg } from "./components/Svg";
|
|
22
22
|
export { default as NumberInput } from "./components/NumberInput";
|
|
23
23
|
export { default as ScreenContainer } from "./components/ScreenContainer";
|
|
24
24
|
export { default as StarRating } from "./components/StarRating";
|
|
@@ -70,6 +70,5 @@ export { default as RowHeadlineImageIcon } from "./components/RowHeadlineImageIc
|
|
|
70
70
|
export { default as Slider } from "./components/Slider";
|
|
71
71
|
export { default as Stepper } from "./components/Stepper";
|
|
72
72
|
export { useAuthState } from "./components/useAuthState";
|
|
73
|
-
export { default as Youtube } from "./components/Youtube";
|
|
74
73
|
|
|
75
74
|
// a comment to fix sourcemap comment issue
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { COMPONENT_TYPES, createSvgProp, StylesPanelSections, } from "@draftbit/types";
|
|
2
|
+
export const SEED_DATA = {
|
|
3
|
+
name: "SVG",
|
|
4
|
+
tag: "SVG",
|
|
5
|
+
description: "An SVG component",
|
|
6
|
+
packageName: "@draftbit/core",
|
|
7
|
+
category: COMPONENT_TYPES.media,
|
|
8
|
+
layout: {
|
|
9
|
+
width: 100,
|
|
10
|
+
height: 100,
|
|
11
|
+
},
|
|
12
|
+
stylesPanelSections: [
|
|
13
|
+
StylesPanelSections.Size,
|
|
14
|
+
StylesPanelSections.Margins,
|
|
15
|
+
StylesPanelSections.Position,
|
|
16
|
+
StylesPanelSections.Effects,
|
|
17
|
+
],
|
|
18
|
+
props: {
|
|
19
|
+
source: createSvgProp(),
|
|
20
|
+
},
|
|
21
|
+
};
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import {
|
|
2
|
+
COMPONENT_TYPES,
|
|
3
|
+
createSvgProp,
|
|
4
|
+
StylesPanelSections,
|
|
5
|
+
} from "@draftbit/types";
|
|
6
|
+
|
|
7
|
+
export const SEED_DATA = {
|
|
8
|
+
name: "SVG",
|
|
9
|
+
tag: "SVG",
|
|
10
|
+
description: "An SVG component",
|
|
11
|
+
packageName: "@draftbit/core",
|
|
12
|
+
category: COMPONENT_TYPES.media,
|
|
13
|
+
layout: {
|
|
14
|
+
width: 100,
|
|
15
|
+
height: 100,
|
|
16
|
+
},
|
|
17
|
+
stylesPanelSections: [
|
|
18
|
+
StylesPanelSections.Size,
|
|
19
|
+
StylesPanelSections.Margins,
|
|
20
|
+
StylesPanelSections.Position,
|
|
21
|
+
StylesPanelSections.Effects,
|
|
22
|
+
],
|
|
23
|
+
props: {
|
|
24
|
+
source: createSvgProp(),
|
|
25
|
+
},
|
|
26
|
+
};
|
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = exports.SEED_DATA = void 0;
|
|
7
|
-
|
|
8
|
-
var _types = require("@draftbit/types");
|
|
9
|
-
|
|
10
|
-
var _react = _interopRequireDefault(require("react"));
|
|
11
|
-
|
|
12
|
-
var _reactNativeYoutubeIframe = _interopRequireDefault(require("react-native-youtube-iframe"));
|
|
13
|
-
|
|
14
|
-
var _utilities = require("../utilities");
|
|
15
|
-
|
|
16
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
|
-
|
|
18
|
-
const Youtube = _ref => {
|
|
19
|
-
let {
|
|
20
|
-
videoId,
|
|
21
|
-
playlist,
|
|
22
|
-
style,
|
|
23
|
-
mute,
|
|
24
|
-
autoplay
|
|
25
|
-
} = _ref;
|
|
26
|
-
const {
|
|
27
|
-
viewStyles: {
|
|
28
|
-
height,
|
|
29
|
-
width
|
|
30
|
-
}
|
|
31
|
-
} = (0, _utilities.extractStyles)(style);
|
|
32
|
-
return /*#__PURE__*/_react.default.createElement(_reactNativeYoutubeIframe.default, {
|
|
33
|
-
height: height,
|
|
34
|
-
width: width,
|
|
35
|
-
play: autoplay,
|
|
36
|
-
videoId: videoId,
|
|
37
|
-
playList: playlist,
|
|
38
|
-
mute: mute
|
|
39
|
-
});
|
|
40
|
-
};
|
|
41
|
-
|
|
42
|
-
var _default = Youtube;
|
|
43
|
-
exports.default = _default;
|
|
44
|
-
const SEED_DATA = {
|
|
45
|
-
name: "Youtube",
|
|
46
|
-
tag: "Youtube",
|
|
47
|
-
description: "Youtube Component",
|
|
48
|
-
category: _types.COMPONENT_TYPES.media,
|
|
49
|
-
layout: {
|
|
50
|
-
width: "100%"
|
|
51
|
-
},
|
|
52
|
-
props: {
|
|
53
|
-
videoId: (0, _types.createTextProp)({
|
|
54
|
-
label: "VideoId",
|
|
55
|
-
description: "Youtube Video ID"
|
|
56
|
-
}),
|
|
57
|
-
playlist: (0, _types.createTextProp)({
|
|
58
|
-
label: "PlayList",
|
|
59
|
-
description: "Playlist ID"
|
|
60
|
-
}),
|
|
61
|
-
mute: (0, _types.createBoolProp)({
|
|
62
|
-
label: "Mute",
|
|
63
|
-
description: "Whether to mute video",
|
|
64
|
-
defaultValue: false
|
|
65
|
-
}),
|
|
66
|
-
autoplay: (0, _types.createBoolProp)({
|
|
67
|
-
label: "Autoplay",
|
|
68
|
-
description: "Whether to Autoplay video",
|
|
69
|
-
defaultValue: false
|
|
70
|
-
})
|
|
71
|
-
}
|
|
72
|
-
};
|
|
73
|
-
exports.SEED_DATA = SEED_DATA;
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.SEED_DATA = void 0;
|
|
7
|
-
|
|
8
|
-
var _types = require("@draftbit/types");
|
|
9
|
-
|
|
10
|
-
const SEED_DATA = {
|
|
11
|
-
name: "Youtube",
|
|
12
|
-
tag: "Youtube",
|
|
13
|
-
description: "Given a VideoId orPlaylist and play Youtube video",
|
|
14
|
-
doc_link: "https://lonelycpp.github.io/react-native-youtube-iframe",
|
|
15
|
-
code_link: "https://github.com/LonelyCpp/react-native-youtube-iframehttps://github.com/LonelyCpp/react-native-youtube-iframe",
|
|
16
|
-
category: _types.COMPONENT_TYPES.media,
|
|
17
|
-
stylesPanelSections: [_types.StylesPanelSections.Size],
|
|
18
|
-
layout: {
|
|
19
|
-
height: 250
|
|
20
|
-
},
|
|
21
|
-
props: {
|
|
22
|
-
videoId: (0, _types.createTextProp)({
|
|
23
|
-
label: "Video ID",
|
|
24
|
-
description: "VideoId of the Youtube video.",
|
|
25
|
-
defaultValue: "nwMUpDESXrI"
|
|
26
|
-
}),
|
|
27
|
-
playlist: (0, _types.createTextProp)({
|
|
28
|
-
label: "Playlist",
|
|
29
|
-
description: "Playlist of the Youtube videos.",
|
|
30
|
-
defaultValue: "PLUa6TiXzjIrwowt6P-uGCJm8ovm-9S1Ks"
|
|
31
|
-
}),
|
|
32
|
-
mute: (0, _types.createStaticBoolProp)({
|
|
33
|
-
label: "Mute Audio",
|
|
34
|
-
description: "Mute the audio of the video."
|
|
35
|
-
}),
|
|
36
|
-
autoplay: (0, _types.createStaticBoolProp)({
|
|
37
|
-
label: "Auto Play",
|
|
38
|
-
description: "Autoplay the video on load."
|
|
39
|
-
})
|
|
40
|
-
}
|
|
41
|
-
};
|
|
42
|
-
exports.SEED_DATA = SEED_DATA;
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
import { COMPONENT_TYPES, createBoolProp, createTextProp } from "@draftbit/types";
|
|
2
|
-
import React from "react";
|
|
3
|
-
import YoutubePlayer from "react-native-youtube-iframe";
|
|
4
|
-
import { extractStyles } from "../utilities";
|
|
5
|
-
|
|
6
|
-
const Youtube = _ref => {
|
|
7
|
-
let {
|
|
8
|
-
videoId,
|
|
9
|
-
playlist,
|
|
10
|
-
style,
|
|
11
|
-
mute,
|
|
12
|
-
autoplay
|
|
13
|
-
} = _ref;
|
|
14
|
-
const {
|
|
15
|
-
viewStyles: {
|
|
16
|
-
height,
|
|
17
|
-
width
|
|
18
|
-
}
|
|
19
|
-
} = extractStyles(style);
|
|
20
|
-
return /*#__PURE__*/React.createElement(YoutubePlayer, {
|
|
21
|
-
height: height,
|
|
22
|
-
width: width,
|
|
23
|
-
play: autoplay,
|
|
24
|
-
videoId: videoId,
|
|
25
|
-
playList: playlist,
|
|
26
|
-
mute: mute
|
|
27
|
-
});
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
export default Youtube;
|
|
31
|
-
export const SEED_DATA = {
|
|
32
|
-
name: "Youtube",
|
|
33
|
-
tag: "Youtube",
|
|
34
|
-
description: "Youtube Component",
|
|
35
|
-
category: COMPONENT_TYPES.media,
|
|
36
|
-
layout: {
|
|
37
|
-
width: "100%"
|
|
38
|
-
},
|
|
39
|
-
props: {
|
|
40
|
-
videoId: createTextProp({
|
|
41
|
-
label: "VideoId",
|
|
42
|
-
description: "Youtube Video ID"
|
|
43
|
-
}),
|
|
44
|
-
playlist: createTextProp({
|
|
45
|
-
label: "PlayList",
|
|
46
|
-
description: "Playlist ID"
|
|
47
|
-
}),
|
|
48
|
-
mute: createBoolProp({
|
|
49
|
-
label: "Mute",
|
|
50
|
-
description: "Whether to mute video",
|
|
51
|
-
defaultValue: false
|
|
52
|
-
}),
|
|
53
|
-
autoplay: createBoolProp({
|
|
54
|
-
label: "Autoplay",
|
|
55
|
-
description: "Whether to Autoplay video",
|
|
56
|
-
defaultValue: false
|
|
57
|
-
})
|
|
58
|
-
}
|
|
59
|
-
};
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { COMPONENT_TYPES, createSvgProp } from "@draftbit/types";
|
|
2
|
-
export const SEED_DATA = {
|
|
3
|
-
name: "SVG",
|
|
4
|
-
tag: "SVG",
|
|
5
|
-
description: "An SVG component",
|
|
6
|
-
category: COMPONENT_TYPES.media,
|
|
7
|
-
layout: {
|
|
8
|
-
width: 100,
|
|
9
|
-
height: 100
|
|
10
|
-
},
|
|
11
|
-
props: {
|
|
12
|
-
source: createSvgProp()
|
|
13
|
-
}
|
|
14
|
-
};
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import { COMPONENT_TYPES, createStaticBoolProp, createTextProp, StylesPanelSections } from "@draftbit/types";
|
|
2
|
-
export const SEED_DATA = {
|
|
3
|
-
name: "Youtube",
|
|
4
|
-
tag: "Youtube",
|
|
5
|
-
description: "Given a VideoId orPlaylist and play Youtube video",
|
|
6
|
-
doc_link: "https://lonelycpp.github.io/react-native-youtube-iframe",
|
|
7
|
-
code_link: "https://github.com/LonelyCpp/react-native-youtube-iframehttps://github.com/LonelyCpp/react-native-youtube-iframe",
|
|
8
|
-
category: COMPONENT_TYPES.media,
|
|
9
|
-
stylesPanelSections: [StylesPanelSections.Size],
|
|
10
|
-
layout: {
|
|
11
|
-
height: 250
|
|
12
|
-
},
|
|
13
|
-
props: {
|
|
14
|
-
videoId: createTextProp({
|
|
15
|
-
label: "Video ID",
|
|
16
|
-
description: "VideoId of the Youtube video.",
|
|
17
|
-
defaultValue: "nwMUpDESXrI"
|
|
18
|
-
}),
|
|
19
|
-
playlist: createTextProp({
|
|
20
|
-
label: "Playlist",
|
|
21
|
-
description: "Playlist of the Youtube videos.",
|
|
22
|
-
defaultValue: "PLUa6TiXzjIrwowt6P-uGCJm8ovm-9S1Ks"
|
|
23
|
-
}),
|
|
24
|
-
mute: createStaticBoolProp({
|
|
25
|
-
label: "Mute Audio",
|
|
26
|
-
description: "Mute the audio of the video."
|
|
27
|
-
}),
|
|
28
|
-
autoplay: createStaticBoolProp({
|
|
29
|
-
label: "Auto Play",
|
|
30
|
-
description: "Autoplay the video on load."
|
|
31
|
-
})
|
|
32
|
-
}
|
|
33
|
-
};
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { StyleProp, ImageStyle } from "react-native";
|
|
3
|
-
declare type SVGComponentProps = {
|
|
4
|
-
source: string;
|
|
5
|
-
style?: StyleProp<ImageStyle>;
|
|
6
|
-
};
|
|
7
|
-
declare const SVG: ({ source, style }: SVGComponentProps) => JSX.Element;
|
|
8
|
-
export default SVG;
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { StyleProp, ViewStyle } from "react-native";
|
|
3
|
-
declare type Props = {
|
|
4
|
-
videoId: string;
|
|
5
|
-
playlist: string;
|
|
6
|
-
style: StyleProp<ViewStyle>;
|
|
7
|
-
mute: boolean;
|
|
8
|
-
autoplay: boolean;
|
|
9
|
-
};
|
|
10
|
-
declare const Youtube: ({ videoId, playlist, style, mute, autoplay }: Props) => JSX.Element;
|
|
11
|
-
export default Youtube;
|
|
12
|
-
export declare const SEED_DATA: {
|
|
13
|
-
name: string;
|
|
14
|
-
tag: string;
|
|
15
|
-
description: string;
|
|
16
|
-
category: string;
|
|
17
|
-
layout: {
|
|
18
|
-
width: string;
|
|
19
|
-
};
|
|
20
|
-
props: {
|
|
21
|
-
videoId: any;
|
|
22
|
-
playlist: any;
|
|
23
|
-
mute: {
|
|
24
|
-
label: string;
|
|
25
|
-
description: string;
|
|
26
|
-
formType: string;
|
|
27
|
-
propType: string;
|
|
28
|
-
defaultValue: boolean;
|
|
29
|
-
editable: boolean;
|
|
30
|
-
required: boolean;
|
|
31
|
-
group: string;
|
|
32
|
-
};
|
|
33
|
-
autoplay: {
|
|
34
|
-
label: string;
|
|
35
|
-
description: string;
|
|
36
|
-
formType: string;
|
|
37
|
-
propType: string;
|
|
38
|
-
defaultValue: boolean;
|
|
39
|
-
editable: boolean;
|
|
40
|
-
required: boolean;
|
|
41
|
-
group: string;
|
|
42
|
-
};
|
|
43
|
-
};
|
|
44
|
-
};
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
export declare const SEED_DATA: {
|
|
2
|
-
name: string;
|
|
3
|
-
tag: string;
|
|
4
|
-
description: string;
|
|
5
|
-
doc_link: string;
|
|
6
|
-
code_link: string;
|
|
7
|
-
category: string;
|
|
8
|
-
stylesPanelSections: string[];
|
|
9
|
-
layout: {
|
|
10
|
-
height: number;
|
|
11
|
-
};
|
|
12
|
-
props: {
|
|
13
|
-
videoId: any;
|
|
14
|
-
playlist: any;
|
|
15
|
-
mute: {
|
|
16
|
-
label: string;
|
|
17
|
-
description: string;
|
|
18
|
-
formType: string;
|
|
19
|
-
propType: string;
|
|
20
|
-
defaultValue: boolean;
|
|
21
|
-
editable: boolean;
|
|
22
|
-
required: boolean;
|
|
23
|
-
group: string;
|
|
24
|
-
};
|
|
25
|
-
autoplay: {
|
|
26
|
-
label: string;
|
|
27
|
-
description: string;
|
|
28
|
-
formType: string;
|
|
29
|
-
propType: string;
|
|
30
|
-
defaultValue: boolean;
|
|
31
|
-
editable: boolean;
|
|
32
|
-
required: boolean;
|
|
33
|
-
group: string;
|
|
34
|
-
};
|
|
35
|
-
};
|
|
36
|
-
};
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import { COMPONENT_TYPES, createBoolProp, createTextProp, } from "@draftbit/types";
|
|
2
|
-
import React from "react";
|
|
3
|
-
import YoutubePlayer from "react-native-youtube-iframe";
|
|
4
|
-
import { extractStyles } from "../utilities";
|
|
5
|
-
const Youtube = ({ videoId, playlist, style, mute, autoplay }) => {
|
|
6
|
-
const { viewStyles: { height, width }, } = extractStyles(style);
|
|
7
|
-
return (React.createElement(YoutubePlayer, { height: height, width: width, play: autoplay, videoId: videoId, playList: playlist, mute: mute }));
|
|
8
|
-
};
|
|
9
|
-
export default Youtube;
|
|
10
|
-
export const SEED_DATA = {
|
|
11
|
-
name: "Youtube",
|
|
12
|
-
tag: "Youtube",
|
|
13
|
-
description: "Youtube Component",
|
|
14
|
-
category: COMPONENT_TYPES.media,
|
|
15
|
-
layout: {
|
|
16
|
-
width: "100%",
|
|
17
|
-
},
|
|
18
|
-
props: {
|
|
19
|
-
videoId: createTextProp({
|
|
20
|
-
label: "VideoId",
|
|
21
|
-
description: "Youtube Video ID",
|
|
22
|
-
}),
|
|
23
|
-
playlist: createTextProp({
|
|
24
|
-
label: "PlayList",
|
|
25
|
-
description: "Playlist ID",
|
|
26
|
-
}),
|
|
27
|
-
mute: createBoolProp({
|
|
28
|
-
label: "Mute",
|
|
29
|
-
description: "Whether to mute video",
|
|
30
|
-
defaultValue: false,
|
|
31
|
-
}),
|
|
32
|
-
autoplay: createBoolProp({
|
|
33
|
-
label: "Autoplay",
|
|
34
|
-
description: "Whether to Autoplay video",
|
|
35
|
-
defaultValue: false,
|
|
36
|
-
}),
|
|
37
|
-
},
|
|
38
|
-
};
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
COMPONENT_TYPES,
|
|
3
|
-
createBoolProp,
|
|
4
|
-
createTextProp,
|
|
5
|
-
} from "@draftbit/types";
|
|
6
|
-
import React from "react";
|
|
7
|
-
import { StyleProp, ViewStyle } from "react-native";
|
|
8
|
-
import YoutubePlayer from "react-native-youtube-iframe";
|
|
9
|
-
import { extractStyles } from "../utilities";
|
|
10
|
-
|
|
11
|
-
type Props = {
|
|
12
|
-
videoId: string;
|
|
13
|
-
playlist: string;
|
|
14
|
-
style: StyleProp<ViewStyle>;
|
|
15
|
-
mute: boolean;
|
|
16
|
-
autoplay: boolean;
|
|
17
|
-
};
|
|
18
|
-
|
|
19
|
-
const Youtube = ({ videoId, playlist, style, mute, autoplay }: Props) => {
|
|
20
|
-
const {
|
|
21
|
-
viewStyles: { height, width },
|
|
22
|
-
} = extractStyles(style);
|
|
23
|
-
|
|
24
|
-
return (
|
|
25
|
-
<YoutubePlayer
|
|
26
|
-
height={height}
|
|
27
|
-
width={width}
|
|
28
|
-
play={autoplay}
|
|
29
|
-
videoId={videoId}
|
|
30
|
-
playList={playlist}
|
|
31
|
-
mute={mute}
|
|
32
|
-
/>
|
|
33
|
-
);
|
|
34
|
-
};
|
|
35
|
-
|
|
36
|
-
export default Youtube;
|
|
37
|
-
|
|
38
|
-
export const SEED_DATA = {
|
|
39
|
-
name: "Youtube",
|
|
40
|
-
tag: "Youtube",
|
|
41
|
-
description: "Youtube Component",
|
|
42
|
-
category: COMPONENT_TYPES.media,
|
|
43
|
-
layout: {
|
|
44
|
-
width: "100%",
|
|
45
|
-
},
|
|
46
|
-
props: {
|
|
47
|
-
videoId: createTextProp({
|
|
48
|
-
label: "VideoId",
|
|
49
|
-
description: "Youtube Video ID",
|
|
50
|
-
}),
|
|
51
|
-
playlist: createTextProp({
|
|
52
|
-
label: "PlayList",
|
|
53
|
-
description: "Playlist ID",
|
|
54
|
-
}),
|
|
55
|
-
mute: createBoolProp({
|
|
56
|
-
label: "Mute",
|
|
57
|
-
description: "Whether to mute video",
|
|
58
|
-
defaultValue: false,
|
|
59
|
-
}),
|
|
60
|
-
autoplay: createBoolProp({
|
|
61
|
-
label: "Autoplay",
|
|
62
|
-
description: "Whether to Autoplay video",
|
|
63
|
-
defaultValue: false,
|
|
64
|
-
}),
|
|
65
|
-
},
|
|
66
|
-
};
|
package/src/mappings/SVG.js
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { COMPONENT_TYPES, createSvgProp } from "@draftbit/types";
|
|
2
|
-
export const SEED_DATA = {
|
|
3
|
-
name: "SVG",
|
|
4
|
-
tag: "SVG",
|
|
5
|
-
description: "An SVG component",
|
|
6
|
-
category: COMPONENT_TYPES.media,
|
|
7
|
-
layout: {
|
|
8
|
-
width: 100,
|
|
9
|
-
height: 100,
|
|
10
|
-
},
|
|
11
|
-
props: {
|
|
12
|
-
source: createSvgProp(),
|
|
13
|
-
},
|
|
14
|
-
};
|
package/src/mappings/SVG.ts
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { COMPONENT_TYPES, createSvgProp } from "@draftbit/types";
|
|
2
|
-
|
|
3
|
-
export const SEED_DATA = {
|
|
4
|
-
name: "SVG",
|
|
5
|
-
tag: "SVG",
|
|
6
|
-
description: "An SVG component",
|
|
7
|
-
category: COMPONENT_TYPES.media,
|
|
8
|
-
layout: {
|
|
9
|
-
width: 100,
|
|
10
|
-
height: 100,
|
|
11
|
-
},
|
|
12
|
-
props: {
|
|
13
|
-
source: createSvgProp(),
|
|
14
|
-
},
|
|
15
|
-
};
|
package/src/mappings/Youtube.js
DELETED
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import { COMPONENT_TYPES, createStaticBoolProp, createTextProp, StylesPanelSections, } from "@draftbit/types";
|
|
2
|
-
export const SEED_DATA = {
|
|
3
|
-
name: "Youtube",
|
|
4
|
-
tag: "Youtube",
|
|
5
|
-
description: "Given a VideoId orPlaylist and play Youtube video",
|
|
6
|
-
doc_link: "https://lonelycpp.github.io/react-native-youtube-iframe",
|
|
7
|
-
code_link: "https://github.com/LonelyCpp/react-native-youtube-iframehttps://github.com/LonelyCpp/react-native-youtube-iframe",
|
|
8
|
-
category: COMPONENT_TYPES.media,
|
|
9
|
-
stylesPanelSections: [StylesPanelSections.Size],
|
|
10
|
-
layout: {
|
|
11
|
-
height: 250,
|
|
12
|
-
},
|
|
13
|
-
props: {
|
|
14
|
-
videoId: createTextProp({
|
|
15
|
-
label: "Video ID",
|
|
16
|
-
description: "VideoId of the Youtube video.",
|
|
17
|
-
defaultValue: "nwMUpDESXrI",
|
|
18
|
-
}),
|
|
19
|
-
playlist: createTextProp({
|
|
20
|
-
label: "Playlist",
|
|
21
|
-
description: "Playlist of the Youtube videos.",
|
|
22
|
-
defaultValue: "PLUa6TiXzjIrwowt6P-uGCJm8ovm-9S1Ks",
|
|
23
|
-
}),
|
|
24
|
-
mute: createStaticBoolProp({
|
|
25
|
-
label: "Mute Audio",
|
|
26
|
-
description: "Mute the audio of the video.",
|
|
27
|
-
}),
|
|
28
|
-
autoplay: createStaticBoolProp({
|
|
29
|
-
label: "Auto Play",
|
|
30
|
-
description: "Autoplay the video on load.",
|
|
31
|
-
}),
|
|
32
|
-
},
|
|
33
|
-
};
|
package/src/mappings/Youtube.ts
DELETED
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
COMPONENT_TYPES,
|
|
3
|
-
createStaticBoolProp,
|
|
4
|
-
createTextProp,
|
|
5
|
-
StylesPanelSections,
|
|
6
|
-
} from "@draftbit/types";
|
|
7
|
-
|
|
8
|
-
export const SEED_DATA = {
|
|
9
|
-
name: "Youtube",
|
|
10
|
-
tag: "Youtube",
|
|
11
|
-
description: "Given a VideoId orPlaylist and play Youtube video",
|
|
12
|
-
doc_link: "https://lonelycpp.github.io/react-native-youtube-iframe",
|
|
13
|
-
code_link:
|
|
14
|
-
"https://github.com/LonelyCpp/react-native-youtube-iframehttps://github.com/LonelyCpp/react-native-youtube-iframe",
|
|
15
|
-
category: COMPONENT_TYPES.media,
|
|
16
|
-
stylesPanelSections: [StylesPanelSections.Size],
|
|
17
|
-
layout: {
|
|
18
|
-
height: 250,
|
|
19
|
-
},
|
|
20
|
-
props: {
|
|
21
|
-
videoId: createTextProp({
|
|
22
|
-
label: "Video ID",
|
|
23
|
-
description: "VideoId of the Youtube video.",
|
|
24
|
-
defaultValue: "nwMUpDESXrI",
|
|
25
|
-
}),
|
|
26
|
-
playlist: createTextProp({
|
|
27
|
-
label: "Playlist",
|
|
28
|
-
description: "Playlist of the Youtube videos.",
|
|
29
|
-
defaultValue: "PLUa6TiXzjIrwowt6P-uGCJm8ovm-9S1Ks",
|
|
30
|
-
}),
|
|
31
|
-
mute: createStaticBoolProp({
|
|
32
|
-
label: "Mute Audio",
|
|
33
|
-
description: "Mute the audio of the video.",
|
|
34
|
-
}),
|
|
35
|
-
autoplay: createStaticBoolProp({
|
|
36
|
-
label: "Auto Play",
|
|
37
|
-
description: "Autoplay the video on load.",
|
|
38
|
-
}),
|
|
39
|
-
},
|
|
40
|
-
};
|