@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.
- package/package.json +1 -1
- package/src/blocks/button.js +73 -22
- package/src/blocks/button.lite.tsx +4 -4
- package/src/blocks/columns.js +258 -36
- package/src/blocks/columns.lite.tsx +5 -6
- package/src/blocks/custom-code.js +76 -47
- package/src/blocks/custom-code.lite.tsx +12 -12
- package/src/blocks/embed.js +69 -47
- package/src/blocks/embed.lite.tsx +11 -11
- package/src/blocks/form.js +491 -195
- package/src/blocks/form.lite.tsx +49 -49
- package/src/blocks/fragment.js +16 -8
- package/src/blocks/fragment.lite.tsx +2 -3
- package/src/blocks/image.js +88 -80
- package/src/blocks/image.lite.tsx +15 -14
- package/src/blocks/img.js +51 -28
- package/src/blocks/img.lite.tsx +6 -7
- package/src/blocks/input.js +100 -28
- package/src/blocks/input.lite.tsx +4 -5
- package/src/blocks/raw-text.js +16 -12
- package/src/blocks/raw-text.lite.tsx +2 -3
- package/src/blocks/section.js +71 -23
- package/src/blocks/section.lite.tsx +3 -4
- package/src/blocks/select.js +78 -28
- package/src/blocks/select.lite.tsx +4 -5
- package/src/blocks/submit-button.js +47 -21
- package/src/blocks/submit-button.lite.tsx +2 -3
- package/src/blocks/symbol.js +18 -16
- package/src/blocks/symbol.lite.tsx +5 -5
- package/src/blocks/text.js +41 -26
- package/src/blocks/text.lite.tsx +3 -4
- package/src/blocks/textarea.js +60 -24
- package/src/blocks/textarea.lite.tsx +2 -3
- package/src/blocks/video.js +72 -60
- package/src/blocks/video.lite.tsx +5 -6
- package/src/components/block-styles.js +2 -4
- package/src/components/block-styles.lite.tsx +2 -3
- package/src/components/error-boundary.js +11 -9
- package/src/components/error-boundary.lite.tsx +2 -3
- package/src/components/render-block.js +107 -43
- package/src/components/render-block.lite.tsx +19 -15
- package/src/components/render-blocks.js +58 -32
- package/src/components/render-blocks.lite.tsx +10 -11
- package/src/components/render-content.js +124 -52
- package/src/components/render-content.lite.tsx +27 -27
- package/src/constants/device-sizes.js +8 -11
- package/src/context/builder.context.js +2 -4
- package/src/functions/evaluate.js +18 -9
- package/src/functions/event-handler-name.js +6 -0
- package/src/functions/get-block-actions.js +13 -13
- package/src/functions/get-block-component-options.js +16 -9
- package/src/functions/get-block-properties.js +19 -15
- package/src/functions/get-block-styles.js +34 -17
- package/src/functions/get-block-tag.js +2 -4
- package/src/functions/get-content.js +48 -26
- package/src/functions/get-content.test.js +37 -26
- package/src/functions/get-fetch.js +5 -7
- package/src/functions/get-global-this.js +5 -7
- package/src/functions/get-processed-block.js +19 -13
- package/src/functions/get-processed-block.test.js +18 -14
- package/src/functions/get-target.js +2 -4
- package/src/functions/if-target.js +1 -3
- package/src/functions/is-browser.js +7 -5
- package/src/functions/is-editing.js +5 -5
- package/src/functions/is-iframe.js +2 -4
- package/src/functions/is-previewing.js +4 -6
- package/src/functions/is-react-native.js +2 -4
- package/src/functions/macro-eval.js +2 -5
- package/src/functions/on-change.js +4 -7
- package/src/functions/on-change.test.js +10 -10
- package/src/functions/previewing-model-name.js +3 -5
- package/src/functions/register-component.js +38 -27
- package/src/functions/register.js +8 -10
- package/src/functions/set-editor-settings.js +5 -7
- package/src/functions/set.js +14 -5
- package/src/functions/set.test.js +14 -14
- package/src/functions/track.js +6 -8
- package/src/functions/transform-block.js +40 -0
- package/src/index.js +23 -18
- package/src/scripts/init-editing.js +64 -40
- package/src/package.json +0 -18
|
@@ -1,34 +1,60 @@
|
|
|
1
1
|
import { registerComponent } from '../functions/register-component';
|
|
2
2
|
|
|
3
|
-
|
|
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) =>
|
|
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
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
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
|
|
23
|
-
import { View, Text } from
|
|
28
|
+
import * as React from 'react';
|
|
29
|
+
import { View, Text } from 'react-native';
|
|
24
30
|
function SubmitButton(props) {
|
|
25
|
-
return /* @__PURE__ */ React.createElement(
|
|
26
|
-
|
|
27
|
-
}
|
|
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
|
-
|
|
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
|
|
2
|
-
import { View, StyleSheet, Image, Text } from
|
|
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 (
|
package/src/blocks/symbol.js
CHANGED
|
@@ -1,20 +1,22 @@
|
|
|
1
|
-
import * as React from
|
|
2
|
-
import { View } from
|
|
3
|
-
import { useContext } from
|
|
4
|
-
import RenderContent from
|
|
5
|
-
import BuilderContext from
|
|
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(
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
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
|
|
2
|
-
import { View, StyleSheet, Image, Text } from
|
|
3
|
-
import { useContext } from
|
|
4
|
-
import RenderContent from
|
|
5
|
-
import BuilderContext from
|
|
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);
|
package/src/blocks/text.js
CHANGED
|
@@ -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) =>
|
|
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
|
|
19
|
-
import { registerComponent } from
|
|
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,
|
|
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 = [
|
|
37
|
+
const PICK_STYLES = ['textAlign'];
|
|
32
38
|
function getBlockStyles(block) {
|
|
33
39
|
var _a, _b, _c;
|
|
34
|
-
const styles = __spreadValues(
|
|
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 ===
|
|
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: {
|
|
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:
|
|
79
|
+
name: 'Text',
|
|
64
80
|
static: true,
|
|
65
81
|
builtIn: true,
|
|
66
|
-
image:
|
|
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:
|
|
70
|
-
type:
|
|
86
|
+
name: 'text',
|
|
87
|
+
type: 'html',
|
|
71
88
|
required: true,
|
|
72
89
|
autoFocus: true,
|
|
73
90
|
bubble: true,
|
|
74
|
-
defaultValue:
|
|
75
|
-
}
|
|
91
|
+
defaultValue: 'Enter some text...',
|
|
92
|
+
},
|
|
76
93
|
],
|
|
77
94
|
defaultStyles: {
|
|
78
|
-
lineHeight:
|
|
79
|
-
height:
|
|
80
|
-
textAlign:
|
|
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 };
|
package/src/blocks/text.lite.tsx
CHANGED
|
@@ -1,12 +1,11 @@
|
|
|
1
|
-
import * as React from
|
|
2
|
-
import { View, StyleSheet, Image, Text } from
|
|
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:
|
|
8
|
+
dangerouslySetInnerHTML={{ __html: 'props.text' }}
|
|
10
9
|
/>
|
|
11
10
|
);
|
|
12
11
|
}
|
package/src/blocks/textarea.js
CHANGED
|
@@ -1,37 +1,73 @@
|
|
|
1
1
|
import { registerComponent } from '../functions/register-component';
|
|
2
2
|
|
|
3
|
-
|
|
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) =>
|
|
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
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
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
|
|
23
|
-
import { View } from
|
|
28
|
+
import * as React from 'react';
|
|
29
|
+
import { View } from 'react-native';
|
|
24
30
|
function Textarea(props) {
|
|
25
|
-
return /* @__PURE__ */ React.createElement(
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
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
|
-
|
|
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
|
|
2
|
-
import { View, StyleSheet, Image, Text } from
|
|
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 (
|
package/src/blocks/video.js
CHANGED
|
@@ -1,88 +1,100 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { View } from
|
|
3
|
-
import ReactVideo from
|
|
4
|
-
import { registerComponent } from
|
|
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(
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
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:
|
|
38
|
+
name: 'Video',
|
|
27
39
|
static: true,
|
|
28
40
|
builtIn: true,
|
|
29
|
-
image:
|
|
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:
|
|
32
|
-
minHeight:
|
|
33
|
-
minWidth:
|
|
34
|
-
overflow:
|
|
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:
|
|
40
|
-
type:
|
|
41
|
-
allowedFileTypes: [
|
|
52
|
+
name: 'video',
|
|
53
|
+
type: 'file',
|
|
54
|
+
allowedFileTypes: ['mp4'],
|
|
42
55
|
bubble: true,
|
|
43
|
-
defaultValue:
|
|
44
|
-
|
|
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:
|
|
48
|
-
type:
|
|
49
|
-
allowedFileTypes: [
|
|
50
|
-
helperText:
|
|
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:
|
|
54
|
-
type:
|
|
55
|
-
defaultValue: true
|
|
67
|
+
name: 'autoPlay',
|
|
68
|
+
type: 'boolean',
|
|
69
|
+
defaultValue: true,
|
|
56
70
|
},
|
|
57
71
|
{
|
|
58
|
-
name:
|
|
59
|
-
type:
|
|
60
|
-
defaultValue: false
|
|
72
|
+
name: 'controls',
|
|
73
|
+
type: 'boolean',
|
|
74
|
+
defaultValue: false,
|
|
61
75
|
},
|
|
62
76
|
{
|
|
63
|
-
name:
|
|
64
|
-
type:
|
|
65
|
-
defaultValue: true
|
|
77
|
+
name: 'muted',
|
|
78
|
+
type: 'boolean',
|
|
79
|
+
defaultValue: true,
|
|
66
80
|
},
|
|
67
81
|
{
|
|
68
|
-
name:
|
|
69
|
-
type:
|
|
70
|
-
defaultValue: true
|
|
82
|
+
name: 'loop',
|
|
83
|
+
type: 'boolean',
|
|
84
|
+
defaultValue: true,
|
|
71
85
|
},
|
|
72
86
|
{
|
|
73
|
-
name:
|
|
74
|
-
type:
|
|
75
|
-
defaultValue:
|
|
76
|
-
enum: [
|
|
87
|
+
name: 'fit',
|
|
88
|
+
type: 'text',
|
|
89
|
+
defaultValue: 'cover',
|
|
90
|
+
enum: ['contain', 'cover', 'stretch'],
|
|
77
91
|
},
|
|
78
92
|
{
|
|
79
|
-
name:
|
|
80
|
-
type:
|
|
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
|
|
2
|
-
import { View, StyleSheet, Image, Text } from
|
|
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:
|
|
12
|
-
height:
|
|
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 ||
|
|
19
|
+
key={props.video || 'no-src'}
|
|
21
20
|
poster={props.posterImage}
|
|
22
21
|
autoPlay={props.autoPlay}
|
|
23
22
|
muted={props.muted}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import * as React from
|
|
2
|
-
import { View, StyleSheet, Image, Text } from
|
|
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
|
|
2
|
-
import { Text } from
|
|
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(
|
|
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(
|
|
17
|
-
|
|
18
|
-
|
|
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
|
|
2
|
-
import { View, StyleSheet, Image, Text } from
|
|
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 <></>;
|