@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.
Files changed (36) hide show
  1. package/lib/commonjs/components/Config.js +1 -1
  2. package/lib/commonjs/components/{SVG.js → Svg.js} +6 -7
  3. package/lib/commonjs/index.js +7 -15
  4. package/lib/commonjs/mappings/{SVG.js → Svg.js} +2 -0
  5. package/lib/module/components/CardContainerShortImage.js +5 -19
  6. package/lib/module/components/Config.js +1 -1
  7. package/lib/module/components/Layout.js +21 -43
  8. package/lib/module/components/{SVG.js → Svg.js} +6 -7
  9. package/lib/module/index.js +2 -3
  10. package/lib/module/mappings/Svg.js +16 -0
  11. package/lib/typescript/src/components/Svg.d.ts +8 -0
  12. package/lib/typescript/src/index.d.ts +1 -2
  13. package/lib/typescript/src/mappings/{SVG.d.ts → Svg.d.ts} +2 -0
  14. package/package.json +4 -6
  15. package/src/components/Config.js +1 -1
  16. package/src/components/Config.ts +1 -1
  17. package/src/components/{SVG.js → Svg.js} +5 -6
  18. package/src/components/{SVG.tsx → Svg.tsx} +9 -9
  19. package/src/index.js +1 -2
  20. package/src/index.tsx +1 -2
  21. package/src/mappings/Svg.js +21 -0
  22. package/src/mappings/Svg.ts +26 -0
  23. package/lib/commonjs/components/Youtube.js +0 -73
  24. package/lib/commonjs/mappings/Youtube.js +0 -42
  25. package/lib/module/components/Youtube.js +0 -59
  26. package/lib/module/mappings/SVG.js +0 -14
  27. package/lib/module/mappings/Youtube.js +0 -33
  28. package/lib/typescript/src/components/SVG.d.ts +0 -8
  29. package/lib/typescript/src/components/Youtube.d.ts +0 -44
  30. package/lib/typescript/src/mappings/Youtube.d.ts +0 -36
  31. package/src/components/Youtube.js +0 -38
  32. package/src/components/Youtube.tsx +0 -66
  33. package/src/mappings/SVG.js +0 -14
  34. package/src/mappings/SVG.ts +0 -15
  35. package/src/mappings/Youtube.js +0 -33
  36. 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-svg.svg",
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 SVG = _ref => {
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: svgSource
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: svgSource
38
+ uri: source
40
39
  })), _reactNative.Platform.OS === "web" && /*#__PURE__*/React.createElement(_reactNative.Image, {
41
40
  style: style,
42
41
  source: {
43
- uri: svgSource
42
+ uri: source
44
43
  }
45
44
  }));
46
45
  };
47
46
 
48
- var _default = SVG;
47
+ var _default = Svg;
49
48
  exports.default = _default;
@@ -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 _SVG = _interopRequireDefault(require("./components/SVG"));
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
- ...rest
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-svg.svg",
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
- ...rest
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
- ...rest
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
- ...rest
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
- ...rest
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
- ...rest
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 SVG = _ref => {
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: svgSource
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: svgSource
22
+ uri: source
24
23
  })), Platform.OS === "web" && /*#__PURE__*/React.createElement(Image, {
25
24
  style: style,
26
25
  source: {
27
- uri: svgSource
26
+ uri: source
28
27
  }
29
28
  }));
30
29
  };
31
30
 
32
- export default SVG;
31
+ 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 SVG } from "./components/SVG";
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 SVG } from "./components/SVG";
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-956f64.5+956f64d7",
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": "956f64d7efdeae7fed66a83917ac4551f0d0579b"
83
+ "gitHead": "97ef96594fb4f4364f4fa5af5804ec1ac287ec3f"
86
84
  }
@@ -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-svg.svg",
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,
@@ -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-svg.svg",
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 SVG = ({ source, style }) => {
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: svgSource }))),
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: svgSource }))),
12
- Platform.OS === "web" && (React.createElement(Image, { style: style, source: { uri: svgSource } }))));
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 SVG;
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 SVGComponentProps = {
7
+ type SvgComponentProps = {
8
8
  source: string;
9
9
  style?: StyleProp<ImageStyle>;
10
10
  };
11
11
 
12
- const SVG = ({ source, style }: SVGComponentProps) => {
13
- let svgSource =
14
- source === null || source === undefined ? Config.placeholderSvgURL : source;
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={svgSource} />
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={svgSource} />
25
+ <SvgUri width="100%" height="100%" uri={source} />
26
26
  </View>
27
27
  )}
28
28
  {Platform.OS === "web" && (
29
- <Image style={style} source={{ uri: svgSource }} />
29
+ <Image style={style} source={{ uri: source }} />
30
30
  )}
31
31
  </>
32
32
  );
33
33
  };
34
34
 
35
- export default SVG;
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 SVG } from "./components/SVG";
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 SVG } from "./components/SVG";
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
- };
@@ -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,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
- };
@@ -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,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
- };