@builder.io/sdk-react-native 0.0.1-35 → 0.0.1-39

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 (81) hide show
  1. package/package.json +1 -1
  2. package/src/blocks/button.js +73 -22
  3. package/src/blocks/button.lite.tsx +4 -4
  4. package/src/blocks/columns.js +258 -36
  5. package/src/blocks/columns.lite.tsx +5 -6
  6. package/src/blocks/custom-code.js +76 -47
  7. package/src/blocks/custom-code.lite.tsx +12 -12
  8. package/src/blocks/embed.js +69 -47
  9. package/src/blocks/embed.lite.tsx +11 -11
  10. package/src/blocks/form.js +491 -195
  11. package/src/blocks/form.lite.tsx +49 -49
  12. package/src/blocks/fragment.js +16 -8
  13. package/src/blocks/fragment.lite.tsx +2 -3
  14. package/src/blocks/image.js +88 -80
  15. package/src/blocks/image.lite.tsx +15 -14
  16. package/src/blocks/img.js +51 -28
  17. package/src/blocks/img.lite.tsx +6 -7
  18. package/src/blocks/input.js +100 -28
  19. package/src/blocks/input.lite.tsx +4 -5
  20. package/src/blocks/raw-text.js +16 -12
  21. package/src/blocks/raw-text.lite.tsx +2 -3
  22. package/src/blocks/section.js +71 -23
  23. package/src/blocks/section.lite.tsx +3 -4
  24. package/src/blocks/select.js +78 -28
  25. package/src/blocks/select.lite.tsx +4 -5
  26. package/src/blocks/submit-button.js +47 -21
  27. package/src/blocks/submit-button.lite.tsx +2 -3
  28. package/src/blocks/symbol.js +18 -16
  29. package/src/blocks/symbol.lite.tsx +5 -5
  30. package/src/blocks/text.js +41 -26
  31. package/src/blocks/text.lite.tsx +3 -4
  32. package/src/blocks/textarea.js +60 -24
  33. package/src/blocks/textarea.lite.tsx +2 -3
  34. package/src/blocks/video.js +72 -60
  35. package/src/blocks/video.lite.tsx +5 -6
  36. package/src/components/block-styles.js +2 -4
  37. package/src/components/block-styles.lite.tsx +2 -3
  38. package/src/components/error-boundary.js +11 -9
  39. package/src/components/error-boundary.lite.tsx +2 -3
  40. package/src/components/render-block.js +107 -43
  41. package/src/components/render-block.lite.tsx +19 -15
  42. package/src/components/render-blocks.js +58 -32
  43. package/src/components/render-blocks.lite.tsx +10 -11
  44. package/src/components/render-content.js +124 -52
  45. package/src/components/render-content.lite.tsx +27 -27
  46. package/src/constants/device-sizes.js +8 -11
  47. package/src/context/builder.context.js +2 -4
  48. package/src/functions/evaluate.js +18 -9
  49. package/src/functions/event-handler-name.js +6 -0
  50. package/src/functions/get-block-actions.js +13 -13
  51. package/src/functions/get-block-component-options.js +16 -9
  52. package/src/functions/get-block-properties.js +19 -15
  53. package/src/functions/get-block-styles.js +34 -17
  54. package/src/functions/get-block-tag.js +2 -4
  55. package/src/functions/get-content.js +48 -26
  56. package/src/functions/get-content.test.js +37 -26
  57. package/src/functions/get-fetch.js +5 -7
  58. package/src/functions/get-global-this.js +5 -7
  59. package/src/functions/get-processed-block.js +19 -13
  60. package/src/functions/get-processed-block.test.js +18 -14
  61. package/src/functions/get-target.js +2 -4
  62. package/src/functions/if-target.js +1 -3
  63. package/src/functions/is-browser.js +7 -5
  64. package/src/functions/is-editing.js +5 -5
  65. package/src/functions/is-iframe.js +2 -4
  66. package/src/functions/is-previewing.js +4 -6
  67. package/src/functions/is-react-native.js +2 -4
  68. package/src/functions/macro-eval.js +2 -5
  69. package/src/functions/on-change.js +4 -7
  70. package/src/functions/on-change.test.js +10 -10
  71. package/src/functions/previewing-model-name.js +3 -5
  72. package/src/functions/register-component.js +38 -27
  73. package/src/functions/register.js +8 -10
  74. package/src/functions/set-editor-settings.js +5 -7
  75. package/src/functions/set.js +14 -5
  76. package/src/functions/set.test.js +14 -14
  77. package/src/functions/track.js +6 -8
  78. package/src/functions/transform-block.js +40 -0
  79. package/src/index.js +23 -18
  80. package/src/scripts/init-editing.js +64 -40
  81. package/src/package.json +0 -18
@@ -1,34 +1,60 @@
1
1
  import { registerComponent } from '../functions/register-component';
2
2
 
3
- var __defProp = Object.defineProperty;
3
+ var __defProp = Object.defineProperty;
4
4
  var __defProps = Object.defineProperties;
5
5
  var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
6
6
  var __getOwnPropSymbols = Object.getOwnPropertySymbols;
7
7
  var __hasOwnProp = Object.prototype.hasOwnProperty;
8
8
  var __propIsEnum = Object.prototype.propertyIsEnumerable;
9
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
9
+ var __defNormalProp = (obj, key, value) =>
10
+ key in obj
11
+ ? __defProp(obj, key, {
12
+ enumerable: true,
13
+ configurable: true,
14
+ writable: true,
15
+ value,
16
+ })
17
+ : (obj[key] = value);
10
18
  var __spreadValues = (a, b) => {
11
- for (var prop in b || (b = {}))
12
- if (__hasOwnProp.call(b, prop))
13
- __defNormalProp(a, prop, b[prop]);
14
- if (__getOwnPropSymbols)
15
- for (var prop of __getOwnPropSymbols(b)) {
16
- if (__propIsEnum.call(b, prop))
17
- __defNormalProp(a, prop, b[prop]);
18
- }
19
- return a;
19
+ for (var prop in b || (b = {}))
20
+ if (__hasOwnProp.call(b, prop)) __defNormalProp(a, prop, b[prop]);
21
+ if (__getOwnPropSymbols)
22
+ for (var prop of __getOwnPropSymbols(b)) {
23
+ if (__propIsEnum.call(b, prop)) __defNormalProp(a, prop, b[prop]);
24
+ }
25
+ return a;
20
26
  };
21
27
  var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
22
- import * as React from "react";
23
- import { View, Text } from "react-native";
28
+ import * as React from 'react';
29
+ import { View, Text } from 'react-native';
24
30
  function SubmitButton(props) {
25
- return /* @__PURE__ */ React.createElement(View, __spreadProps(__spreadValues({}, props.attributes), {
26
- type: "submit"
27
- }), /* @__PURE__ */ React.createElement(Text, null, props.text));
31
+ return /* @__PURE__ */ React.createElement(
32
+ View,
33
+ __spreadProps(__spreadValues({}, props.attributes), {
34
+ type: 'submit',
35
+ }),
36
+ /* @__PURE__ */ React.createElement(Text, null, props.text)
37
+ );
28
38
  }
29
- export {
30
- SubmitButton as default
31
- };
32
-
39
+ export { SubmitButton as default };
33
40
 
34
- registerComponent(SubmitButton, {name:'Form:SubmitButton',builtIn:true,image:'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fdf2820ffed1f4349a94c40b3221f5b98',defaultStyles:{appearance:'none',paddingTop:'15px',paddingBottom:'15px',paddingLeft:'25px',paddingRight:'25px',backgroundColor:'#3898EC',color:'white',borderRadius:'4px',cursor:'pointer'},inputs:[{name:'text',type:'text',defaultValue:'Click me'}],static:true,noWrap:true});
41
+ registerComponent(SubmitButton, {
42
+ name: 'Form:SubmitButton',
43
+ builtIn: true,
44
+ image:
45
+ 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fdf2820ffed1f4349a94c40b3221f5b98',
46
+ defaultStyles: {
47
+ appearance: 'none',
48
+ paddingTop: '15px',
49
+ paddingBottom: '15px',
50
+ paddingLeft: '25px',
51
+ paddingRight: '25px',
52
+ backgroundColor: '#3898EC',
53
+ color: 'white',
54
+ borderRadius: '4px',
55
+ cursor: 'pointer',
56
+ },
57
+ inputs: [{ name: 'text', type: 'text', defaultValue: 'Click me' }],
58
+ static: true,
59
+ noWrap: true,
60
+ });
@@ -1,6 +1,5 @@
1
- import * as React from "react";
2
- import { View, StyleSheet, Image, Text } from "react-native";
3
- import { useContext } from "react";
1
+ import * as React from 'react';
2
+ import { View, StyleSheet, Image, Text } from 'react-native';
4
3
 
5
4
  export default function SubmitButton(props) {
6
5
  return (
@@ -1,20 +1,22 @@
1
- import * as React from "react";
2
- import { View } from "react-native";
3
- import { useContext } from "react";
4
- import RenderContent from "../components/render-content";
5
- import BuilderContext from "../context/builder.context";
1
+ import * as React from 'react';
2
+ import { View } from 'react-native';
3
+ import { useContext } from 'react';
4
+ import RenderContent from '../components/render-content';
5
+ import BuilderContext from '../context/builder.context';
6
6
  function Symbol(props) {
7
7
  var _a, _b, _c;
8
8
  const builderContext = useContext(BuilderContext);
9
- return /* @__PURE__ */ React.createElement(View, {
10
- className: "builder-symbol"
11
- }, /* @__PURE__ */ React.createElement(RenderContent, {
12
- context: builderContext.context,
13
- data: (_a = props.symbol) == null ? void 0 : _a.data,
14
- model: (_b = props.symbol) == null ? void 0 : _b.model,
15
- content: (_c = props.symbol) == null ? void 0 : _c.content
16
- }));
9
+ return /* @__PURE__ */ React.createElement(
10
+ View,
11
+ {
12
+ className: 'builder-symbol',
13
+ },
14
+ /* @__PURE__ */ React.createElement(RenderContent, {
15
+ context: builderContext.context,
16
+ data: (_a = props.symbol) == null ? void 0 : _a.data,
17
+ model: (_b = props.symbol) == null ? void 0 : _b.model,
18
+ content: (_c = props.symbol) == null ? void 0 : _c.content,
19
+ })
20
+ );
17
21
  }
18
- export {
19
- Symbol as default
20
- };
22
+ export { Symbol as default };
@@ -1,8 +1,8 @@
1
- import * as React from "react";
2
- import { View, StyleSheet, Image, Text } from "react-native";
3
- import { useContext } from "react";
4
- import RenderContent from "../components/render-content.lite";
5
- import BuilderContext from "../context/builder.context.lite";
1
+ import * as React from 'react';
2
+ import { View, StyleSheet, Image, Text } from 'react-native';
3
+ import { useContext } from 'react';
4
+ import RenderContent from '../components/render-content.lite';
5
+ import BuilderContext from '../context/builder.context.lite';
6
6
 
7
7
  export default function Symbol(props) {
8
8
  const builderContext = useContext(BuilderContext);
@@ -3,22 +3,28 @@ var __defProp = Object.defineProperty;
3
3
  var __getOwnPropSymbols = Object.getOwnPropertySymbols;
4
4
  var __hasOwnProp = Object.prototype.hasOwnProperty;
5
5
  var __propIsEnum = Object.prototype.propertyIsEnumerable;
6
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
6
+ var __defNormalProp = (obj, key, value) =>
7
+ key in obj
8
+ ? __defProp(obj, key, {
9
+ enumerable: true,
10
+ configurable: true,
11
+ writable: true,
12
+ value,
13
+ })
14
+ : (obj[key] = value);
7
15
  var __spreadValues = (a, b) => {
8
16
  for (var prop in b || (b = {}))
9
- if (__hasOwnProp.call(b, prop))
10
- __defNormalProp(a, prop, b[prop]);
17
+ if (__hasOwnProp.call(b, prop)) __defNormalProp(a, prop, b[prop]);
11
18
  if (__getOwnPropSymbols)
12
19
  for (var prop of __getOwnPropSymbols(b)) {
13
- if (__propIsEnum.call(b, prop))
14
- __defNormalProp(a, prop, b[prop]);
20
+ if (__propIsEnum.call(b, prop)) __defNormalProp(a, prop, b[prop]);
15
21
  }
16
22
  return a;
17
23
  };
18
- import HTML from "react-native-render-html";
19
- import { registerComponent } from "../functions/register-component";
24
+ import HTML from 'react-native-render-html';
25
+ import { registerComponent } from '../functions/register-component';
20
26
  function camelToKebabCase(string) {
21
- return string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
27
+ return string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
22
28
  }
23
29
  function pick(object, keys) {
24
30
  return keys.reduce((obj, key) => {
@@ -28,10 +34,16 @@ function pick(object, keys) {
28
34
  return obj;
29
35
  }, {});
30
36
  }
31
- const PICK_STYLES = ["textAlign"];
37
+ const PICK_STYLES = ['textAlign'];
32
38
  function getBlockStyles(block) {
33
39
  var _a, _b, _c;
34
- const styles = __spreadValues(__spreadValues({}, (_a = block.responsiveStyles) == null ? void 0 : _a.large), block.styles);
40
+ const styles = __spreadValues(
41
+ __spreadValues(
42
+ {},
43
+ (_a = block.responsiveStyles) == null ? void 0 : _a.large
44
+ ),
45
+ block.styles
46
+ );
35
47
  if ((_b = block.responsiveStyles) == null ? void 0 : _b.medium) {
36
48
  Object.assign(styles, block.responsiveStyles.medium);
37
49
  }
@@ -43,12 +55,12 @@ function getBlockStyles(block) {
43
55
  function getCss(block) {
44
56
  const styleObject = pick(getBlockStyles(block), PICK_STYLES);
45
57
  if (!styleObject) {
46
- return "";
58
+ return '';
47
59
  }
48
60
  let str = ``;
49
61
  for (const key in styleObject) {
50
62
  const value = styleObject[key];
51
- if (typeof value === "string") {
63
+ if (typeof value === 'string') {
52
64
  str += `${camelToKebabCase(key)}: ${value};`;
53
65
  }
54
66
  }
@@ -56,30 +68,33 @@ function getCss(block) {
56
68
  }
57
69
  function Text(props) {
58
70
  return /* @__PURE__ */ React.createElement(HTML, {
59
- source: { html: `<div style="${getCss(props.builderBlock)}">${props.text || ""}</div>` }
71
+ source: {
72
+ html: `<div style="${getCss(props.builderBlock)}">${
73
+ props.text || ''
74
+ }</div>`,
75
+ },
60
76
  });
61
77
  }
62
78
  registerComponent(Text, {
63
- name: "Text",
79
+ name: 'Text',
64
80
  static: true,
65
81
  builtIn: true,
66
- image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-text_fields-24px%20(1).svg?alt=media&token=12177b73-0ee3-42ca-98c6-0dd003de1929",
82
+ image:
83
+ 'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-text_fields-24px%20(1).svg?alt=media&token=12177b73-0ee3-42ca-98c6-0dd003de1929',
67
84
  inputs: [
68
85
  {
69
- name: "text",
70
- type: "html",
86
+ name: 'text',
87
+ type: 'html',
71
88
  required: true,
72
89
  autoFocus: true,
73
90
  bubble: true,
74
- defaultValue: "Enter some text..."
75
- }
91
+ defaultValue: 'Enter some text...',
92
+ },
76
93
  ],
77
94
  defaultStyles: {
78
- lineHeight: "normal",
79
- height: "auto",
80
- textAlign: "center"
81
- }
95
+ lineHeight: 'normal',
96
+ height: 'auto',
97
+ textAlign: 'center',
98
+ },
82
99
  });
83
- export {
84
- Text as default
85
- };
100
+ export { Text as default };
@@ -1,12 +1,11 @@
1
- import * as React from "react";
2
- import { View, StyleSheet, Image, Text } from "react-native";
3
- import { useContext } from "react";
1
+ import * as React from 'react';
2
+ import { View, StyleSheet, Image, Text } from 'react-native';
4
3
 
5
4
  export default function Text(props) {
6
5
  return (
7
6
  <View
8
7
  className="builder-text"
9
- dangerouslySetInnerHTML={{ __html: "props.text" }}
8
+ dangerouslySetInnerHTML={{ __html: 'props.text' }}
10
9
  />
11
10
  );
12
11
  }
@@ -1,37 +1,73 @@
1
1
  import { registerComponent } from '../functions/register-component';
2
2
 
3
- var __defProp = Object.defineProperty;
3
+ var __defProp = Object.defineProperty;
4
4
  var __defProps = Object.defineProperties;
5
5
  var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
6
6
  var __getOwnPropSymbols = Object.getOwnPropertySymbols;
7
7
  var __hasOwnProp = Object.prototype.hasOwnProperty;
8
8
  var __propIsEnum = Object.prototype.propertyIsEnumerable;
9
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
9
+ var __defNormalProp = (obj, key, value) =>
10
+ key in obj
11
+ ? __defProp(obj, key, {
12
+ enumerable: true,
13
+ configurable: true,
14
+ writable: true,
15
+ value,
16
+ })
17
+ : (obj[key] = value);
10
18
  var __spreadValues = (a, b) => {
11
- for (var prop in b || (b = {}))
12
- if (__hasOwnProp.call(b, prop))
13
- __defNormalProp(a, prop, b[prop]);
14
- if (__getOwnPropSymbols)
15
- for (var prop of __getOwnPropSymbols(b)) {
16
- if (__propIsEnum.call(b, prop))
17
- __defNormalProp(a, prop, b[prop]);
18
- }
19
- return a;
19
+ for (var prop in b || (b = {}))
20
+ if (__hasOwnProp.call(b, prop)) __defNormalProp(a, prop, b[prop]);
21
+ if (__getOwnPropSymbols)
22
+ for (var prop of __getOwnPropSymbols(b)) {
23
+ if (__propIsEnum.call(b, prop)) __defNormalProp(a, prop, b[prop]);
24
+ }
25
+ return a;
20
26
  };
21
27
  var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
22
- import * as React from "react";
23
- import { View } from "react-native";
28
+ import * as React from 'react';
29
+ import { View } from 'react-native';
24
30
  function Textarea(props) {
25
- return /* @__PURE__ */ React.createElement(View, __spreadProps(__spreadValues({}, props.attributes), {
26
- placeholder: props.placeholder,
27
- name: props.name,
28
- value: props.value,
29
- defaultValue: props.defaultValue
30
- }));
31
+ return /* @__PURE__ */ React.createElement(
32
+ View,
33
+ __spreadProps(__spreadValues({}, props.attributes), {
34
+ placeholder: props.placeholder,
35
+ name: props.name,
36
+ value: props.value,
37
+ defaultValue: props.defaultValue,
38
+ })
39
+ );
31
40
  }
32
- export {
33
- Textarea as default
34
- };
35
-
41
+ export { Textarea as default };
36
42
 
37
- registerComponent(Textarea, {name:'Form:TextArea',builtIn:true,image:'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Ff74a2f3de58c4c3e939204e5b6b8f6c3',inputs:[{advanced:true,name:'value',type:'string'},{name:'name',type:'string',required:true,helperText:'Every input in a form needs a unique name describing what it gets, e.g. "email"'},{name:'defaultValue',type:'string'},{name:'placeholder',type:'string',defaultValue:'Hello there'},{name:'required',type:'boolean',defaultValue:false}],defaultStyles:{paddingTop:'10px',paddingBottom:'10px',paddingLeft:'10px',paddingRight:'10px',borderRadius:'3px',borderWidth:'1px',borderStyle:'solid',borderColor:'#ccc'},static:true,noWrap:true});
43
+ registerComponent(Textarea, {
44
+ name: 'Form:TextArea',
45
+ builtIn: true,
46
+ image:
47
+ 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Ff74a2f3de58c4c3e939204e5b6b8f6c3',
48
+ inputs: [
49
+ { advanced: true, name: 'value', type: 'string' },
50
+ {
51
+ name: 'name',
52
+ type: 'string',
53
+ required: true,
54
+ helperText:
55
+ 'Every input in a form needs a unique name describing what it gets, e.g. "email"',
56
+ },
57
+ { name: 'defaultValue', type: 'string' },
58
+ { name: 'placeholder', type: 'string', defaultValue: 'Hello there' },
59
+ { name: 'required', type: 'boolean', defaultValue: false },
60
+ ],
61
+ defaultStyles: {
62
+ paddingTop: '10px',
63
+ paddingBottom: '10px',
64
+ paddingLeft: '10px',
65
+ paddingRight: '10px',
66
+ borderRadius: '3px',
67
+ borderWidth: '1px',
68
+ borderStyle: 'solid',
69
+ borderColor: '#ccc',
70
+ },
71
+ static: true,
72
+ noWrap: true,
73
+ });
@@ -1,6 +1,5 @@
1
- import * as React from "react";
2
- import { View, StyleSheet, Image, Text } from "react-native";
3
- import { useContext } from "react";
1
+ import * as React from 'react';
2
+ import { View, StyleSheet, Image, Text } from 'react-native';
4
3
 
5
4
  export default function Textarea(props) {
6
5
  return (
@@ -1,88 +1,100 @@
1
1
  import * as React from 'react';
2
- import { View } from "react-native";
3
- import ReactVideo from "react-native-video";
4
- import { registerComponent } from "../functions/register-component";
2
+ import { View } from 'react-native';
3
+ import ReactVideo from 'react-native-video';
4
+ import { registerComponent } from '../functions/register-component';
5
5
  function Video(props) {
6
- return /* @__PURE__ */ React.createElement(View, {
7
- style: { position: "relative" }
8
- }, /* @__PURE__ */ React.createElement(ReactVideo, {
9
- paused: !props.autoPlay,
10
- controls: props.controls,
11
- muted: props.muted,
12
- repeat: props.loop,
13
- poster: props.posterImage,
14
- posterResizeMode: props.fit || "contain",
15
- resizeMode: props.fit || "contain",
16
- style: { position: "absolute", top: 0, bottom: 0, left: 0, right: 0, zIndex: 1 },
17
- source: { uri: props.video }
18
- }), /* @__PURE__ */ React.createElement(View, {
19
- style: {
20
- width: "100%",
21
- paddingTop: `${props.aspectRatio * 100}%`
22
- }
23
- }));
6
+ return /* @__PURE__ */ React.createElement(
7
+ View,
8
+ {
9
+ style: { position: 'relative' },
10
+ },
11
+ /* @__PURE__ */ React.createElement(ReactVideo, {
12
+ paused: !props.autoPlay,
13
+ controls: props.controls,
14
+ muted: props.muted,
15
+ repeat: props.loop,
16
+ poster: props.posterImage,
17
+ posterResizeMode: props.fit || 'contain',
18
+ resizeMode: props.fit || 'contain',
19
+ style: {
20
+ position: 'absolute',
21
+ top: 0,
22
+ bottom: 0,
23
+ left: 0,
24
+ right: 0,
25
+ zIndex: 1,
26
+ },
27
+ source: { uri: props.video },
28
+ }),
29
+ /* @__PURE__ */ React.createElement(View, {
30
+ style: {
31
+ width: '100%',
32
+ paddingTop: `${props.aspectRatio * 100}%`,
33
+ },
34
+ })
35
+ );
24
36
  }
25
37
  registerComponent(Video, {
26
- name: "Video",
38
+ name: 'Video',
27
39
  static: true,
28
40
  builtIn: true,
29
- image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4",
41
+ image:
42
+ 'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4',
30
43
  defaultStyles: {
31
- position: "relative",
32
- minHeight: "20px",
33
- minWidth: "20px",
34
- overflow: "hidden"
44
+ position: 'relative',
45
+ minHeight: '20px',
46
+ minWidth: '20px',
47
+ overflow: 'hidden',
35
48
  },
36
49
  canHaveChildren: true,
37
50
  inputs: [
38
51
  {
39
- name: "video",
40
- type: "file",
41
- allowedFileTypes: ["mp4"],
52
+ name: 'video',
53
+ type: 'file',
54
+ allowedFileTypes: ['mp4'],
42
55
  bubble: true,
43
- defaultValue: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/assets%2FKQlEmWDxA0coC3PK6UvkrjwkIGI2%2F28cb070609f546cdbe5efa20e931aa4b?alt=media&token=912e9551-7a7c-4dfb-86b6-3da1537d1a7f",
44
- required: true
56
+ defaultValue:
57
+ 'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/assets%2FKQlEmWDxA0coC3PK6UvkrjwkIGI2%2F28cb070609f546cdbe5efa20e931aa4b?alt=media&token=912e9551-7a7c-4dfb-86b6-3da1537d1a7f',
58
+ required: true,
45
59
  },
46
60
  {
47
- name: "posterImage",
48
- type: "file",
49
- allowedFileTypes: ["jpeg", "png"],
50
- helperText: "Image to show before the video plays"
61
+ name: 'posterImage',
62
+ type: 'file',
63
+ allowedFileTypes: ['jpeg', 'png'],
64
+ helperText: 'Image to show before the video plays',
51
65
  },
52
66
  {
53
- name: "autoPlay",
54
- type: "boolean",
55
- defaultValue: true
67
+ name: 'autoPlay',
68
+ type: 'boolean',
69
+ defaultValue: true,
56
70
  },
57
71
  {
58
- name: "controls",
59
- type: "boolean",
60
- defaultValue: false
72
+ name: 'controls',
73
+ type: 'boolean',
74
+ defaultValue: false,
61
75
  },
62
76
  {
63
- name: "muted",
64
- type: "boolean",
65
- defaultValue: true
77
+ name: 'muted',
78
+ type: 'boolean',
79
+ defaultValue: true,
66
80
  },
67
81
  {
68
- name: "loop",
69
- type: "boolean",
70
- defaultValue: true
82
+ name: 'loop',
83
+ type: 'boolean',
84
+ defaultValue: true,
71
85
  },
72
86
  {
73
- name: "fit",
74
- type: "text",
75
- defaultValue: "cover",
76
- enum: ["contain", "cover", "stretch"]
87
+ name: 'fit',
88
+ type: 'text',
89
+ defaultValue: 'cover',
90
+ enum: ['contain', 'cover', 'stretch'],
77
91
  },
78
92
  {
79
- name: "aspectRatio",
80
- type: "number",
93
+ name: 'aspectRatio',
94
+ type: 'number',
81
95
  advanced: true,
82
- defaultValue: 0.7004048582995948
83
- }
84
- ]
96
+ defaultValue: 0.7004048582995948,
97
+ },
98
+ ],
85
99
  });
86
- export {
87
- Video as default
88
- };
100
+ export { Video as default };
@@ -1,6 +1,5 @@
1
- import * as React from "react";
2
- import { View, StyleSheet, Image, Text } from "react-native";
3
- import { useContext } from "react";
1
+ import * as React from 'react';
2
+ import { View, StyleSheet, Image, Text } from 'react-native';
4
3
 
5
4
  export default function Video(props) {
6
5
  return (
@@ -8,8 +7,8 @@ export default function Video(props) {
8
7
  {...props.attributes}
9
8
  preload="none"
10
9
  style={{
11
- width: "100%",
12
- height: "100%",
10
+ width: '100%',
11
+ height: '100%',
13
12
  ...props.attributes?.style,
14
13
  objectFit: props.fit,
15
14
  objectPosition: props.position,
@@ -17,7 +16,7 @@ export default function Video(props) {
17
16
  // not have the video overflow
18
17
  borderRadius: 1,
19
18
  }}
20
- key={props.video || "no-src"}
19
+ key={props.video || 'no-src'}
21
20
  poster={props.posterImage}
22
21
  autoPlay={props.autoPlay}
23
22
  muted={props.muted}
@@ -1,7 +1,5 @@
1
- import * as React from "react";
1
+ import * as React from 'react';
2
2
  function BlockStyles(props) {
3
3
  return /* @__PURE__ */ React.createElement(React.Fragment, null);
4
4
  }
5
- export {
6
- BlockStyles as default
7
- };
5
+ export { BlockStyles as default };
@@ -1,6 +1,5 @@
1
- import * as React from "react";
2
- import { View, StyleSheet, Image, Text } from "react-native";
3
- import { useContext } from "react";
1
+ import * as React from 'react';
2
+ import { View, StyleSheet, Image, Text } from 'react-native';
4
3
 
5
4
  export default function BlockStyles(props) {
6
5
  return <></>;
@@ -1,5 +1,5 @@
1
- import React from "react";
2
- import { Text } from "react-native";
1
+ import React from 'react';
2
+ import { Text } from 'react-native';
3
3
  class ErrorBoundary extends React.Component {
4
4
  constructor(props) {
5
5
  super(props);
@@ -9,17 +9,19 @@ class ErrorBoundary extends React.Component {
9
9
  return { hasError: true };
10
10
  }
11
11
  componentDidCatch(error, errorInfo) {
12
- console.error("Error rendering Builder.io block", error, errorInfo);
12
+ console.error('Error rendering Builder.io block', error, errorInfo);
13
13
  }
14
14
  render() {
15
15
  if (this.state.hasError) {
16
- return /* @__PURE__ */ React.createElement(Text, {
17
- style: { color: "gray" }
18
- }, "Error rendering Builder.io block");
16
+ return /* @__PURE__ */ React.createElement(
17
+ Text,
18
+ {
19
+ style: { color: 'gray' },
20
+ },
21
+ 'Error rendering Builder.io block'
22
+ );
19
23
  }
20
24
  return this.props.children;
21
25
  }
22
26
  }
23
- export {
24
- ErrorBoundary as default
25
- };
27
+ export { ErrorBoundary as default };
@@ -1,6 +1,5 @@
1
- import * as React from "react";
2
- import { View, StyleSheet, Image, Text } from "react-native";
3
- import { useContext } from "react";
1
+ import * as React from 'react';
2
+ import { View, StyleSheet, Image, Text } from 'react-native';
4
3
 
5
4
  export default function ErrorBoundary(props) {
6
5
  return <></>;