@draftbit/core 46.4.4-929d79.2 → 46.4.4-9a666e.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/commonjs/index.js +0 -8
- package/lib/commonjs/mappings/Elements.js +129 -0
- package/lib/module/index.js +1 -2
- package/lib/module/mappings/Elements.js +121 -0
- package/lib/typescript/src/index.d.ts +0 -1
- package/lib/typescript/src/mappings/Elements.d.ts +49 -0
- package/package.json +5 -6
- package/src/index.js +0 -1
- package/src/index.tsx +0 -1
- package/src/mappings/Elements.js +143 -0
- package/src/mappings/Elements.ts +152 -0
- package/lib/commonjs/components/Youtube.js +0 -73
- package/lib/commonjs/mappings/Youtube.js +0 -42
- package/lib/module/components/Youtube.js +0 -59
- package/lib/module/mappings/Youtube.js +0 -33
- package/lib/typescript/src/components/Youtube.d.ts +0 -44
- package/lib/typescript/src/mappings/Youtube.d.ts +0 -36
- package/src/components/Youtube.js +0 -38
- package/src/components/Youtube.tsx +0 -66
- package/src/mappings/Youtube.js +0 -33
- package/src/mappings/Youtube.ts +0 -39
package/lib/commonjs/index.js
CHANGED
|
@@ -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 () {
|
|
@@ -516,8 +510,6 @@ var _Stepper = _interopRequireDefault(require("./components/Stepper"));
|
|
|
516
510
|
|
|
517
511
|
var _useAuthState = require("./components/useAuthState");
|
|
518
512
|
|
|
519
|
-
var _Youtube = _interopRequireDefault(require("./components/Youtube"));
|
|
520
|
-
|
|
521
513
|
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); }
|
|
522
514
|
|
|
523
515
|
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; }
|
|
@@ -0,0 +1,129 @@
|
|
|
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_TRIGGERS = [_types.Triggers.OnValueChange];
|
|
11
|
+
const ELEMENT_PROPS = {
|
|
12
|
+
category: _types.COMPONENT_TYPES.element,
|
|
13
|
+
doc_link: "https://www.npmjs.com/package/@expo/html-elements",
|
|
14
|
+
code_link: "https://github.com/expo/expo/tree/master/packages/html-elements",
|
|
15
|
+
stylesPanelSections: _types.BLOCK_STYLES_SECTIONS,
|
|
16
|
+
layout: {
|
|
17
|
+
margin: 0
|
|
18
|
+
},
|
|
19
|
+
triggers: SEED_DATA_TRIGGERS
|
|
20
|
+
};
|
|
21
|
+
const HEADING_PROPS = { ...ELEMENT_PROPS
|
|
22
|
+
};
|
|
23
|
+
const SEED_DATA = [{
|
|
24
|
+
name: "H1",
|
|
25
|
+
tag: "H1",
|
|
26
|
+
...HEADING_PROPS
|
|
27
|
+
}, {
|
|
28
|
+
name: "H2",
|
|
29
|
+
tag: "H2",
|
|
30
|
+
...HEADING_PROPS
|
|
31
|
+
}, {
|
|
32
|
+
name: "H3",
|
|
33
|
+
tag: "H3",
|
|
34
|
+
...HEADING_PROPS
|
|
35
|
+
}, {
|
|
36
|
+
name: "H4",
|
|
37
|
+
tag: "H4",
|
|
38
|
+
...HEADING_PROPS
|
|
39
|
+
}, {
|
|
40
|
+
name: "H5",
|
|
41
|
+
tag: "H5",
|
|
42
|
+
...HEADING_PROPS
|
|
43
|
+
}, {
|
|
44
|
+
name: "H6",
|
|
45
|
+
tag: "H6",
|
|
46
|
+
...HEADING_PROPS
|
|
47
|
+
}, {
|
|
48
|
+
name: "Anchor",
|
|
49
|
+
tag: "A",
|
|
50
|
+
...ELEMENT_PROPS,
|
|
51
|
+
props: {
|
|
52
|
+
href: (0, _types.createTextProp)({
|
|
53
|
+
label: "href",
|
|
54
|
+
description: "Specify the URL",
|
|
55
|
+
defaultValue: ""
|
|
56
|
+
}),
|
|
57
|
+
target: {
|
|
58
|
+
group: _types.GROUPS.basic,
|
|
59
|
+
label: "target",
|
|
60
|
+
description: "decide where link should open",
|
|
61
|
+
formType: _types.FORM_TYPES.flatArray,
|
|
62
|
+
defaultValue: "_blank",
|
|
63
|
+
options: ["_blank", "_self", "_parent", "_top"]
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
}, {
|
|
67
|
+
name: "Paragraph",
|
|
68
|
+
tag: "P",
|
|
69
|
+
...ELEMENT_PROPS,
|
|
70
|
+
props: {// NOTE - Keeping the props commented until we figure out a way to use this props from draftbit side.
|
|
71
|
+
// strong: createBoolProp({
|
|
72
|
+
// label: "Strong",
|
|
73
|
+
// description: "Strong",
|
|
74
|
+
// }),
|
|
75
|
+
// strike: createBoolProp({
|
|
76
|
+
// label: "Strike",
|
|
77
|
+
// description: "Strike through",
|
|
78
|
+
// }),
|
|
79
|
+
// italic: createBoolProp({
|
|
80
|
+
// label: "Italic",
|
|
81
|
+
// description: "Italic Fonts",
|
|
82
|
+
// }),
|
|
83
|
+
// bold: createBoolProp({
|
|
84
|
+
// label: "Bold",
|
|
85
|
+
// description: "Bold",
|
|
86
|
+
// }),
|
|
87
|
+
}
|
|
88
|
+
}, {
|
|
89
|
+
name: "Code",
|
|
90
|
+
tag: "Code",
|
|
91
|
+
...ELEMENT_PROPS
|
|
92
|
+
}, {
|
|
93
|
+
name: "Pre",
|
|
94
|
+
tag: "Pre",
|
|
95
|
+
...ELEMENT_PROPS
|
|
96
|
+
}, {
|
|
97
|
+
name: "Mark",
|
|
98
|
+
tag: "Mark",
|
|
99
|
+
...ELEMENT_PROPS
|
|
100
|
+
}, {
|
|
101
|
+
name: "BR",
|
|
102
|
+
tag: "BR",
|
|
103
|
+
...ELEMENT_PROPS
|
|
104
|
+
}, {
|
|
105
|
+
name: "Quote",
|
|
106
|
+
tag: "Q",
|
|
107
|
+
...ELEMENT_PROPS
|
|
108
|
+
}, {
|
|
109
|
+
name: "BlockQuote",
|
|
110
|
+
tag: "BlockQuote",
|
|
111
|
+
...ELEMENT_PROPS
|
|
112
|
+
}, {
|
|
113
|
+
name: "Time",
|
|
114
|
+
tag: "Time",
|
|
115
|
+
...ELEMENT_PROPS
|
|
116
|
+
}, {
|
|
117
|
+
name: "UL",
|
|
118
|
+
tag: "UL",
|
|
119
|
+
...ELEMENT_PROPS
|
|
120
|
+
}, {
|
|
121
|
+
name: "LI",
|
|
122
|
+
tag: "LI",
|
|
123
|
+
...ELEMENT_PROPS
|
|
124
|
+
}, {
|
|
125
|
+
name: "HR",
|
|
126
|
+
tag: "HR",
|
|
127
|
+
...ELEMENT_PROPS
|
|
128
|
+
}];
|
|
129
|
+
exports.SEED_DATA = SEED_DATA;
|
package/lib/module/index.js
CHANGED
|
@@ -49,5 +49,4 @@ export { default as RowHeadlineImageCaption } from "./components/RowHeadlineImag
|
|
|
49
49
|
export { default as RowHeadlineImageIcon } from "./components/RowHeadlineImageIcon";
|
|
50
50
|
export { default as Slider } from "./components/Slider";
|
|
51
51
|
export { default as Stepper } from "./components/Stepper";
|
|
52
|
-
export { useAuthState } from "./components/useAuthState";
|
|
53
|
-
export { default as Youtube } from "./components/Youtube"; // a comment to fix sourcemap comment issue
|
|
52
|
+
export { useAuthState } from "./components/useAuthState"; // a comment to fix sourcemap comment issue
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
import { BLOCK_STYLES_SECTIONS, COMPONENT_TYPES, // createBoolProp,
|
|
2
|
+
createTextProp, FORM_TYPES, GROUPS, Triggers } from "@draftbit/types";
|
|
3
|
+
const SEED_DATA_TRIGGERS = [Triggers.OnValueChange];
|
|
4
|
+
const ELEMENT_PROPS = {
|
|
5
|
+
category: COMPONENT_TYPES.element,
|
|
6
|
+
doc_link: "https://www.npmjs.com/package/@expo/html-elements",
|
|
7
|
+
code_link: "https://github.com/expo/expo/tree/master/packages/html-elements",
|
|
8
|
+
stylesPanelSections: BLOCK_STYLES_SECTIONS,
|
|
9
|
+
layout: {
|
|
10
|
+
margin: 0
|
|
11
|
+
},
|
|
12
|
+
triggers: SEED_DATA_TRIGGERS
|
|
13
|
+
};
|
|
14
|
+
const HEADING_PROPS = { ...ELEMENT_PROPS
|
|
15
|
+
};
|
|
16
|
+
export const SEED_DATA = [{
|
|
17
|
+
name: "H1",
|
|
18
|
+
tag: "H1",
|
|
19
|
+
...HEADING_PROPS
|
|
20
|
+
}, {
|
|
21
|
+
name: "H2",
|
|
22
|
+
tag: "H2",
|
|
23
|
+
...HEADING_PROPS
|
|
24
|
+
}, {
|
|
25
|
+
name: "H3",
|
|
26
|
+
tag: "H3",
|
|
27
|
+
...HEADING_PROPS
|
|
28
|
+
}, {
|
|
29
|
+
name: "H4",
|
|
30
|
+
tag: "H4",
|
|
31
|
+
...HEADING_PROPS
|
|
32
|
+
}, {
|
|
33
|
+
name: "H5",
|
|
34
|
+
tag: "H5",
|
|
35
|
+
...HEADING_PROPS
|
|
36
|
+
}, {
|
|
37
|
+
name: "H6",
|
|
38
|
+
tag: "H6",
|
|
39
|
+
...HEADING_PROPS
|
|
40
|
+
}, {
|
|
41
|
+
name: "Anchor",
|
|
42
|
+
tag: "A",
|
|
43
|
+
...ELEMENT_PROPS,
|
|
44
|
+
props: {
|
|
45
|
+
href: createTextProp({
|
|
46
|
+
label: "href",
|
|
47
|
+
description: "Specify the URL",
|
|
48
|
+
defaultValue: ""
|
|
49
|
+
}),
|
|
50
|
+
target: {
|
|
51
|
+
group: GROUPS.basic,
|
|
52
|
+
label: "target",
|
|
53
|
+
description: "decide where link should open",
|
|
54
|
+
formType: FORM_TYPES.flatArray,
|
|
55
|
+
defaultValue: "_blank",
|
|
56
|
+
options: ["_blank", "_self", "_parent", "_top"]
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
}, {
|
|
60
|
+
name: "Paragraph",
|
|
61
|
+
tag: "P",
|
|
62
|
+
...ELEMENT_PROPS,
|
|
63
|
+
props: {// NOTE - Keeping the props commented until we figure out a way to use this props from draftbit side.
|
|
64
|
+
// strong: createBoolProp({
|
|
65
|
+
// label: "Strong",
|
|
66
|
+
// description: "Strong",
|
|
67
|
+
// }),
|
|
68
|
+
// strike: createBoolProp({
|
|
69
|
+
// label: "Strike",
|
|
70
|
+
// description: "Strike through",
|
|
71
|
+
// }),
|
|
72
|
+
// italic: createBoolProp({
|
|
73
|
+
// label: "Italic",
|
|
74
|
+
// description: "Italic Fonts",
|
|
75
|
+
// }),
|
|
76
|
+
// bold: createBoolProp({
|
|
77
|
+
// label: "Bold",
|
|
78
|
+
// description: "Bold",
|
|
79
|
+
// }),
|
|
80
|
+
}
|
|
81
|
+
}, {
|
|
82
|
+
name: "Code",
|
|
83
|
+
tag: "Code",
|
|
84
|
+
...ELEMENT_PROPS
|
|
85
|
+
}, {
|
|
86
|
+
name: "Pre",
|
|
87
|
+
tag: "Pre",
|
|
88
|
+
...ELEMENT_PROPS
|
|
89
|
+
}, {
|
|
90
|
+
name: "Mark",
|
|
91
|
+
tag: "Mark",
|
|
92
|
+
...ELEMENT_PROPS
|
|
93
|
+
}, {
|
|
94
|
+
name: "BR",
|
|
95
|
+
tag: "BR",
|
|
96
|
+
...ELEMENT_PROPS
|
|
97
|
+
}, {
|
|
98
|
+
name: "Quote",
|
|
99
|
+
tag: "Q",
|
|
100
|
+
...ELEMENT_PROPS
|
|
101
|
+
}, {
|
|
102
|
+
name: "BlockQuote",
|
|
103
|
+
tag: "BlockQuote",
|
|
104
|
+
...ELEMENT_PROPS
|
|
105
|
+
}, {
|
|
106
|
+
name: "Time",
|
|
107
|
+
tag: "Time",
|
|
108
|
+
...ELEMENT_PROPS
|
|
109
|
+
}, {
|
|
110
|
+
name: "UL",
|
|
111
|
+
tag: "UL",
|
|
112
|
+
...ELEMENT_PROPS
|
|
113
|
+
}, {
|
|
114
|
+
name: "LI",
|
|
115
|
+
tag: "LI",
|
|
116
|
+
...ELEMENT_PROPS
|
|
117
|
+
}, {
|
|
118
|
+
name: "HR",
|
|
119
|
+
tag: "HR",
|
|
120
|
+
...ELEMENT_PROPS
|
|
121
|
+
}];
|
|
@@ -48,4 +48,3 @@ export { default as RowHeadlineImageIcon } from "./components/RowHeadlineImageIc
|
|
|
48
48
|
export { default as Slider } from "./components/Slider";
|
|
49
49
|
export { default as Stepper } from "./components/Stepper";
|
|
50
50
|
export { useAuthState } from "./components/useAuthState";
|
|
51
|
-
export { default as Youtube } from "./components/Youtube";
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
export declare const SEED_DATA: ({
|
|
2
|
+
category: string;
|
|
3
|
+
doc_link: string;
|
|
4
|
+
code_link: string;
|
|
5
|
+
stylesPanelSections: string[];
|
|
6
|
+
layout: {
|
|
7
|
+
margin: number;
|
|
8
|
+
};
|
|
9
|
+
triggers: string[];
|
|
10
|
+
name: string;
|
|
11
|
+
tag: string;
|
|
12
|
+
} | {
|
|
13
|
+
props: {
|
|
14
|
+
href: any;
|
|
15
|
+
target: {
|
|
16
|
+
group: string;
|
|
17
|
+
label: string;
|
|
18
|
+
description: string;
|
|
19
|
+
formType: string;
|
|
20
|
+
defaultValue: string;
|
|
21
|
+
options: string[];
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
category: string;
|
|
25
|
+
doc_link: string;
|
|
26
|
+
code_link: string;
|
|
27
|
+
stylesPanelSections: string[];
|
|
28
|
+
layout: {
|
|
29
|
+
margin: number;
|
|
30
|
+
};
|
|
31
|
+
triggers: string[];
|
|
32
|
+
name: string;
|
|
33
|
+
tag: string;
|
|
34
|
+
} | {
|
|
35
|
+
props: {
|
|
36
|
+
href?: undefined;
|
|
37
|
+
target?: undefined;
|
|
38
|
+
};
|
|
39
|
+
category: string;
|
|
40
|
+
doc_link: string;
|
|
41
|
+
code_link: string;
|
|
42
|
+
stylesPanelSections: string[];
|
|
43
|
+
layout: {
|
|
44
|
+
margin: number;
|
|
45
|
+
};
|
|
46
|
+
triggers: string[];
|
|
47
|
+
name: string;
|
|
48
|
+
tag: string;
|
|
49
|
+
})[];
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@draftbit/core",
|
|
3
|
-
"version": "46.4.4-
|
|
3
|
+
"version": "46.4.4-9a666e.2+9a666e4",
|
|
4
4
|
"description": "Core (non-native) Components",
|
|
5
5
|
"main": "lib/commonjs/index.js",
|
|
6
6
|
"module": "lib/module/index.js",
|
|
@@ -41,7 +41,8 @@
|
|
|
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.4.4-
|
|
44
|
+
"@draftbit/types": "^46.4.4-9a666e.2+9a666e4",
|
|
45
|
+
"@expo/html-elements": "^0.2.0",
|
|
45
46
|
"@material-ui/core": "^4.11.0",
|
|
46
47
|
"@material-ui/pickers": "^3.2.10",
|
|
47
48
|
"@react-native-community/slider": "4.2.3",
|
|
@@ -56,9 +57,7 @@
|
|
|
56
57
|
"react-native-modal-datetime-picker": "^13.0.0",
|
|
57
58
|
"react-native-svg": "12.3.0",
|
|
58
59
|
"react-native-typography": "^1.4.1",
|
|
59
|
-
"react-native-web-swiper": "^2.2.3"
|
|
60
|
-
"react-native-web-webview": "^1.0.2",
|
|
61
|
-
"react-native-youtube-iframe": "^2.2.2"
|
|
60
|
+
"react-native-web-swiper": "^2.2.3"
|
|
62
61
|
},
|
|
63
62
|
"devDependencies": {
|
|
64
63
|
"@types/color": "^3.0.1",
|
|
@@ -83,5 +82,5 @@
|
|
|
83
82
|
]
|
|
84
83
|
]
|
|
85
84
|
},
|
|
86
|
-
"gitHead": "
|
|
85
|
+
"gitHead": "9a666e4ecef86b3d4122a10d5b0efd540f7cdb2b"
|
|
87
86
|
}
|
package/src/index.js
CHANGED
|
@@ -49,5 +49,4 @@ 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";
|
|
53
52
|
// a comment to fix sourcemap comment issue
|
package/src/index.tsx
CHANGED
|
@@ -69,6 +69,5 @@ export { default as RowHeadlineImageIcon } from "./components/RowHeadlineImageIc
|
|
|
69
69
|
export { default as Slider } from "./components/Slider";
|
|
70
70
|
export { default as Stepper } from "./components/Stepper";
|
|
71
71
|
export { useAuthState } from "./components/useAuthState";
|
|
72
|
-
export { default as Youtube } from "./components/Youtube";
|
|
73
72
|
|
|
74
73
|
// a comment to fix sourcemap comment issue
|
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
import { BLOCK_STYLES_SECTIONS, COMPONENT_TYPES,
|
|
2
|
+
// createBoolProp,
|
|
3
|
+
createTextProp, FORM_TYPES, GROUPS, Triggers, } from "@draftbit/types";
|
|
4
|
+
const SEED_DATA_TRIGGERS = [Triggers.OnValueChange];
|
|
5
|
+
const ELEMENT_PROPS = {
|
|
6
|
+
category: COMPONENT_TYPES.element,
|
|
7
|
+
doc_link: "https://www.npmjs.com/package/@expo/html-elements",
|
|
8
|
+
code_link: "https://github.com/expo/expo/tree/master/packages/html-elements",
|
|
9
|
+
stylesPanelSections: BLOCK_STYLES_SECTIONS,
|
|
10
|
+
layout: {
|
|
11
|
+
margin: 0,
|
|
12
|
+
},
|
|
13
|
+
triggers: SEED_DATA_TRIGGERS,
|
|
14
|
+
};
|
|
15
|
+
const HEADING_PROPS = {
|
|
16
|
+
...ELEMENT_PROPS,
|
|
17
|
+
};
|
|
18
|
+
export const SEED_DATA = [
|
|
19
|
+
{
|
|
20
|
+
name: "H1",
|
|
21
|
+
tag: "H1",
|
|
22
|
+
...HEADING_PROPS,
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
name: "H2",
|
|
26
|
+
tag: "H2",
|
|
27
|
+
...HEADING_PROPS,
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
name: "H3",
|
|
31
|
+
tag: "H3",
|
|
32
|
+
...HEADING_PROPS,
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
name: "H4",
|
|
36
|
+
tag: "H4",
|
|
37
|
+
...HEADING_PROPS,
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
name: "H5",
|
|
41
|
+
tag: "H5",
|
|
42
|
+
...HEADING_PROPS,
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
name: "H6",
|
|
46
|
+
tag: "H6",
|
|
47
|
+
...HEADING_PROPS,
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
name: "Anchor",
|
|
51
|
+
tag: "A",
|
|
52
|
+
...ELEMENT_PROPS,
|
|
53
|
+
props: {
|
|
54
|
+
href: createTextProp({
|
|
55
|
+
label: "href",
|
|
56
|
+
description: "Specify the URL",
|
|
57
|
+
defaultValue: "",
|
|
58
|
+
}),
|
|
59
|
+
target: {
|
|
60
|
+
group: GROUPS.basic,
|
|
61
|
+
label: "target",
|
|
62
|
+
description: "decide where link should open",
|
|
63
|
+
formType: FORM_TYPES.flatArray,
|
|
64
|
+
defaultValue: "_blank",
|
|
65
|
+
options: ["_blank", "_self", "_parent", "_top"],
|
|
66
|
+
},
|
|
67
|
+
},
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
name: "Paragraph",
|
|
71
|
+
tag: "P",
|
|
72
|
+
...ELEMENT_PROPS,
|
|
73
|
+
props: {
|
|
74
|
+
// NOTE - Keeping the props commented until we figure out a way to use this props from draftbit side.
|
|
75
|
+
// strong: createBoolProp({
|
|
76
|
+
// label: "Strong",
|
|
77
|
+
// description: "Strong",
|
|
78
|
+
// }),
|
|
79
|
+
// strike: createBoolProp({
|
|
80
|
+
// label: "Strike",
|
|
81
|
+
// description: "Strike through",
|
|
82
|
+
// }),
|
|
83
|
+
// italic: createBoolProp({
|
|
84
|
+
// label: "Italic",
|
|
85
|
+
// description: "Italic Fonts",
|
|
86
|
+
// }),
|
|
87
|
+
// bold: createBoolProp({
|
|
88
|
+
// label: "Bold",
|
|
89
|
+
// description: "Bold",
|
|
90
|
+
// }),
|
|
91
|
+
},
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
name: "Code",
|
|
95
|
+
tag: "Code",
|
|
96
|
+
...ELEMENT_PROPS,
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
name: "Pre",
|
|
100
|
+
tag: "Pre",
|
|
101
|
+
...ELEMENT_PROPS,
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
name: "Mark",
|
|
105
|
+
tag: "Mark",
|
|
106
|
+
...ELEMENT_PROPS,
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
name: "BR",
|
|
110
|
+
tag: "BR",
|
|
111
|
+
...ELEMENT_PROPS,
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
name: "Quote",
|
|
115
|
+
tag: "Q",
|
|
116
|
+
...ELEMENT_PROPS,
|
|
117
|
+
},
|
|
118
|
+
{
|
|
119
|
+
name: "BlockQuote",
|
|
120
|
+
tag: "BlockQuote",
|
|
121
|
+
...ELEMENT_PROPS,
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
name: "Time",
|
|
125
|
+
tag: "Time",
|
|
126
|
+
...ELEMENT_PROPS,
|
|
127
|
+
},
|
|
128
|
+
{
|
|
129
|
+
name: "UL",
|
|
130
|
+
tag: "UL",
|
|
131
|
+
...ELEMENT_PROPS,
|
|
132
|
+
},
|
|
133
|
+
{
|
|
134
|
+
name: "LI",
|
|
135
|
+
tag: "LI",
|
|
136
|
+
...ELEMENT_PROPS,
|
|
137
|
+
},
|
|
138
|
+
{
|
|
139
|
+
name: "HR",
|
|
140
|
+
tag: "HR",
|
|
141
|
+
...ELEMENT_PROPS,
|
|
142
|
+
},
|
|
143
|
+
];
|
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
import {
|
|
2
|
+
BLOCK_STYLES_SECTIONS,
|
|
3
|
+
COMPONENT_TYPES,
|
|
4
|
+
// createBoolProp,
|
|
5
|
+
createTextProp,
|
|
6
|
+
FORM_TYPES,
|
|
7
|
+
GROUPS,
|
|
8
|
+
Triggers,
|
|
9
|
+
} from "@draftbit/types";
|
|
10
|
+
const SEED_DATA_TRIGGERS = [Triggers.OnValueChange];
|
|
11
|
+
|
|
12
|
+
const ELEMENT_PROPS = {
|
|
13
|
+
category: COMPONENT_TYPES.element,
|
|
14
|
+
doc_link: "https://www.npmjs.com/package/@expo/html-elements",
|
|
15
|
+
code_link: "https://github.com/expo/expo/tree/master/packages/html-elements",
|
|
16
|
+
stylesPanelSections: BLOCK_STYLES_SECTIONS,
|
|
17
|
+
layout: {
|
|
18
|
+
margin: 0,
|
|
19
|
+
},
|
|
20
|
+
triggers: SEED_DATA_TRIGGERS,
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
const HEADING_PROPS = {
|
|
24
|
+
...ELEMENT_PROPS,
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
export const SEED_DATA = [
|
|
28
|
+
{
|
|
29
|
+
name: "H1",
|
|
30
|
+
tag: "H1",
|
|
31
|
+
...HEADING_PROPS,
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
name: "H2",
|
|
35
|
+
tag: "H2",
|
|
36
|
+
...HEADING_PROPS,
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
name: "H3",
|
|
40
|
+
tag: "H3",
|
|
41
|
+
...HEADING_PROPS,
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
name: "H4",
|
|
45
|
+
tag: "H4",
|
|
46
|
+
...HEADING_PROPS,
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
name: "H5",
|
|
50
|
+
tag: "H5",
|
|
51
|
+
...HEADING_PROPS,
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
name: "H6",
|
|
55
|
+
tag: "H6",
|
|
56
|
+
...HEADING_PROPS,
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
name: "Anchor",
|
|
60
|
+
tag: "A",
|
|
61
|
+
...ELEMENT_PROPS,
|
|
62
|
+
props: {
|
|
63
|
+
href: createTextProp({
|
|
64
|
+
label: "href",
|
|
65
|
+
description: "Specify the URL",
|
|
66
|
+
defaultValue: "",
|
|
67
|
+
}),
|
|
68
|
+
target: {
|
|
69
|
+
group: GROUPS.basic,
|
|
70
|
+
label: "target",
|
|
71
|
+
description: "decide where link should open",
|
|
72
|
+
formType: FORM_TYPES.flatArray,
|
|
73
|
+
defaultValue: "_blank",
|
|
74
|
+
options: ["_blank", "_self", "_parent", "_top"],
|
|
75
|
+
},
|
|
76
|
+
},
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
name: "Paragraph",
|
|
80
|
+
tag: "P",
|
|
81
|
+
...ELEMENT_PROPS,
|
|
82
|
+
props: {
|
|
83
|
+
// NOTE - Keeping the props commented until we figure out a way to use this props from draftbit side.
|
|
84
|
+
// strong: createBoolProp({
|
|
85
|
+
// label: "Strong",
|
|
86
|
+
// description: "Strong",
|
|
87
|
+
// }),
|
|
88
|
+
// strike: createBoolProp({
|
|
89
|
+
// label: "Strike",
|
|
90
|
+
// description: "Strike through",
|
|
91
|
+
// }),
|
|
92
|
+
// italic: createBoolProp({
|
|
93
|
+
// label: "Italic",
|
|
94
|
+
// description: "Italic Fonts",
|
|
95
|
+
// }),
|
|
96
|
+
// bold: createBoolProp({
|
|
97
|
+
// label: "Bold",
|
|
98
|
+
// description: "Bold",
|
|
99
|
+
// }),
|
|
100
|
+
},
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
name: "Code",
|
|
104
|
+
tag: "Code",
|
|
105
|
+
...ELEMENT_PROPS,
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
name: "Pre",
|
|
109
|
+
tag: "Pre",
|
|
110
|
+
...ELEMENT_PROPS,
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
name: "Mark",
|
|
114
|
+
tag: "Mark",
|
|
115
|
+
...ELEMENT_PROPS,
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
name: "BR",
|
|
119
|
+
tag: "BR",
|
|
120
|
+
...ELEMENT_PROPS,
|
|
121
|
+
},
|
|
122
|
+
{
|
|
123
|
+
name: "Quote",
|
|
124
|
+
tag: "Q",
|
|
125
|
+
...ELEMENT_PROPS,
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
name: "BlockQuote",
|
|
129
|
+
tag: "BlockQuote",
|
|
130
|
+
...ELEMENT_PROPS,
|
|
131
|
+
},
|
|
132
|
+
{
|
|
133
|
+
name: "Time",
|
|
134
|
+
tag: "Time",
|
|
135
|
+
...ELEMENT_PROPS,
|
|
136
|
+
},
|
|
137
|
+
{
|
|
138
|
+
name: "UL",
|
|
139
|
+
tag: "UL",
|
|
140
|
+
...ELEMENT_PROPS,
|
|
141
|
+
},
|
|
142
|
+
{
|
|
143
|
+
name: "LI",
|
|
144
|
+
tag: "LI",
|
|
145
|
+
...ELEMENT_PROPS,
|
|
146
|
+
},
|
|
147
|
+
{
|
|
148
|
+
name: "HR",
|
|
149
|
+
tag: "HR",
|
|
150
|
+
...ELEMENT_PROPS,
|
|
151
|
+
},
|
|
152
|
+
];
|
|
@@ -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-iframe",
|
|
16
|
-
category: _types.COMPONENT_TYPES.media,
|
|
17
|
-
stylesPanelSections: [_types.StylesPanelSections.Size, _types.StylesPanelSections.Position],
|
|
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,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-iframe",
|
|
8
|
-
category: COMPONENT_TYPES.media,
|
|
9
|
-
stylesPanelSections: [StylesPanelSections.Size, StylesPanelSections.Position],
|
|
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,44 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { StyleProp, ViewStyle } from "react-native";
|
|
3
|
-
declare type Props = {
|
|
4
|
-
videoId: string;
|
|
5
|
-
playlist: string;
|
|
6
|
-
style: StyleProp<ViewStyle>;
|
|
7
|
-
mute: boolean;
|
|
8
|
-
autoplay: boolean;
|
|
9
|
-
};
|
|
10
|
-
declare const Youtube: ({ videoId, playlist, style, mute, autoplay }: Props) => JSX.Element;
|
|
11
|
-
export default Youtube;
|
|
12
|
-
export declare const SEED_DATA: {
|
|
13
|
-
name: string;
|
|
14
|
-
tag: string;
|
|
15
|
-
description: string;
|
|
16
|
-
category: string;
|
|
17
|
-
layout: {
|
|
18
|
-
width: string;
|
|
19
|
-
};
|
|
20
|
-
props: {
|
|
21
|
-
videoId: any;
|
|
22
|
-
playlist: any;
|
|
23
|
-
mute: {
|
|
24
|
-
label: string;
|
|
25
|
-
description: string;
|
|
26
|
-
formType: string;
|
|
27
|
-
propType: string;
|
|
28
|
-
defaultValue: boolean;
|
|
29
|
-
editable: boolean;
|
|
30
|
-
required: boolean;
|
|
31
|
-
group: string;
|
|
32
|
-
};
|
|
33
|
-
autoplay: {
|
|
34
|
-
label: string;
|
|
35
|
-
description: string;
|
|
36
|
-
formType: string;
|
|
37
|
-
propType: string;
|
|
38
|
-
defaultValue: boolean;
|
|
39
|
-
editable: boolean;
|
|
40
|
-
required: boolean;
|
|
41
|
-
group: string;
|
|
42
|
-
};
|
|
43
|
-
};
|
|
44
|
-
};
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
export declare const SEED_DATA: {
|
|
2
|
-
name: string;
|
|
3
|
-
tag: string;
|
|
4
|
-
description: string;
|
|
5
|
-
doc_link: string;
|
|
6
|
-
code_link: string;
|
|
7
|
-
category: string;
|
|
8
|
-
stylesPanelSections: string[];
|
|
9
|
-
layout: {
|
|
10
|
-
height: number;
|
|
11
|
-
};
|
|
12
|
-
props: {
|
|
13
|
-
videoId: any;
|
|
14
|
-
playlist: any;
|
|
15
|
-
mute: {
|
|
16
|
-
label: string;
|
|
17
|
-
description: string;
|
|
18
|
-
formType: string;
|
|
19
|
-
propType: string;
|
|
20
|
-
defaultValue: boolean;
|
|
21
|
-
editable: boolean;
|
|
22
|
-
required: boolean;
|
|
23
|
-
group: string;
|
|
24
|
-
};
|
|
25
|
-
autoplay: {
|
|
26
|
-
label: string;
|
|
27
|
-
description: string;
|
|
28
|
-
formType: string;
|
|
29
|
-
propType: string;
|
|
30
|
-
defaultValue: boolean;
|
|
31
|
-
editable: boolean;
|
|
32
|
-
required: boolean;
|
|
33
|
-
group: string;
|
|
34
|
-
};
|
|
35
|
-
};
|
|
36
|
-
};
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import { COMPONENT_TYPES, createBoolProp, createTextProp, } from "@draftbit/types";
|
|
2
|
-
import React from "react";
|
|
3
|
-
import YoutubePlayer from "react-native-youtube-iframe";
|
|
4
|
-
import { extractStyles } from "../utilities";
|
|
5
|
-
const Youtube = ({ videoId, playlist, style, mute, autoplay }) => {
|
|
6
|
-
const { viewStyles: { height, width }, } = extractStyles(style);
|
|
7
|
-
return (React.createElement(YoutubePlayer, { height: height, width: width, play: autoplay, videoId: videoId, playList: playlist, mute: mute }));
|
|
8
|
-
};
|
|
9
|
-
export default Youtube;
|
|
10
|
-
export const SEED_DATA = {
|
|
11
|
-
name: "Youtube",
|
|
12
|
-
tag: "Youtube",
|
|
13
|
-
description: "Youtube Component",
|
|
14
|
-
category: COMPONENT_TYPES.media,
|
|
15
|
-
layout: {
|
|
16
|
-
width: "100%",
|
|
17
|
-
},
|
|
18
|
-
props: {
|
|
19
|
-
videoId: createTextProp({
|
|
20
|
-
label: "VideoId",
|
|
21
|
-
description: "Youtube Video ID",
|
|
22
|
-
}),
|
|
23
|
-
playlist: createTextProp({
|
|
24
|
-
label: "PlayList",
|
|
25
|
-
description: "Playlist ID",
|
|
26
|
-
}),
|
|
27
|
-
mute: createBoolProp({
|
|
28
|
-
label: "Mute",
|
|
29
|
-
description: "Whether to mute video",
|
|
30
|
-
defaultValue: false,
|
|
31
|
-
}),
|
|
32
|
-
autoplay: createBoolProp({
|
|
33
|
-
label: "Autoplay",
|
|
34
|
-
description: "Whether to Autoplay video",
|
|
35
|
-
defaultValue: false,
|
|
36
|
-
}),
|
|
37
|
-
},
|
|
38
|
-
};
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
COMPONENT_TYPES,
|
|
3
|
-
createBoolProp,
|
|
4
|
-
createTextProp,
|
|
5
|
-
} from "@draftbit/types";
|
|
6
|
-
import React from "react";
|
|
7
|
-
import { StyleProp, ViewStyle } from "react-native";
|
|
8
|
-
import YoutubePlayer from "react-native-youtube-iframe";
|
|
9
|
-
import { extractStyles } from "../utilities";
|
|
10
|
-
|
|
11
|
-
type Props = {
|
|
12
|
-
videoId: string;
|
|
13
|
-
playlist: string;
|
|
14
|
-
style: StyleProp<ViewStyle>;
|
|
15
|
-
mute: boolean;
|
|
16
|
-
autoplay: boolean;
|
|
17
|
-
};
|
|
18
|
-
|
|
19
|
-
const Youtube = ({ videoId, playlist, style, mute, autoplay }: Props) => {
|
|
20
|
-
const {
|
|
21
|
-
viewStyles: { height, width },
|
|
22
|
-
} = extractStyles(style);
|
|
23
|
-
|
|
24
|
-
return (
|
|
25
|
-
<YoutubePlayer
|
|
26
|
-
height={height}
|
|
27
|
-
width={width}
|
|
28
|
-
play={autoplay}
|
|
29
|
-
videoId={videoId}
|
|
30
|
-
playList={playlist}
|
|
31
|
-
mute={mute}
|
|
32
|
-
/>
|
|
33
|
-
);
|
|
34
|
-
};
|
|
35
|
-
|
|
36
|
-
export default Youtube;
|
|
37
|
-
|
|
38
|
-
export const SEED_DATA = {
|
|
39
|
-
name: "Youtube",
|
|
40
|
-
tag: "Youtube",
|
|
41
|
-
description: "Youtube Component",
|
|
42
|
-
category: COMPONENT_TYPES.media,
|
|
43
|
-
layout: {
|
|
44
|
-
width: "100%",
|
|
45
|
-
},
|
|
46
|
-
props: {
|
|
47
|
-
videoId: createTextProp({
|
|
48
|
-
label: "VideoId",
|
|
49
|
-
description: "Youtube Video ID",
|
|
50
|
-
}),
|
|
51
|
-
playlist: createTextProp({
|
|
52
|
-
label: "PlayList",
|
|
53
|
-
description: "Playlist ID",
|
|
54
|
-
}),
|
|
55
|
-
mute: createBoolProp({
|
|
56
|
-
label: "Mute",
|
|
57
|
-
description: "Whether to mute video",
|
|
58
|
-
defaultValue: false,
|
|
59
|
-
}),
|
|
60
|
-
autoplay: createBoolProp({
|
|
61
|
-
label: "Autoplay",
|
|
62
|
-
description: "Whether to Autoplay video",
|
|
63
|
-
defaultValue: false,
|
|
64
|
-
}),
|
|
65
|
-
},
|
|
66
|
-
};
|
package/src/mappings/Youtube.js
DELETED
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import { COMPONENT_TYPES, createStaticBoolProp, createTextProp, StylesPanelSections, } from "@draftbit/types";
|
|
2
|
-
export const SEED_DATA = {
|
|
3
|
-
name: "Youtube",
|
|
4
|
-
tag: "Youtube",
|
|
5
|
-
description: "Given a VideoId orPlaylist and play Youtube video",
|
|
6
|
-
doc_link: "https://lonelycpp.github.io/react-native-youtube-iframe",
|
|
7
|
-
code_link: "https://github.com/LonelyCpp/react-native-youtube-iframe",
|
|
8
|
-
category: COMPONENT_TYPES.media,
|
|
9
|
-
stylesPanelSections: [StylesPanelSections.Size, StylesPanelSections.Position],
|
|
10
|
-
layout: {
|
|
11
|
-
height: 250,
|
|
12
|
-
},
|
|
13
|
-
props: {
|
|
14
|
-
videoId: createTextProp({
|
|
15
|
-
label: "Video ID",
|
|
16
|
-
description: "VideoId of the Youtube video.",
|
|
17
|
-
defaultValue: "nwMUpDESXrI",
|
|
18
|
-
}),
|
|
19
|
-
playlist: createTextProp({
|
|
20
|
-
label: "Playlist",
|
|
21
|
-
description: "Playlist of the Youtube videos.",
|
|
22
|
-
defaultValue: "PLUa6TiXzjIrwowt6P-uGCJm8ovm-9S1Ks",
|
|
23
|
-
}),
|
|
24
|
-
mute: createStaticBoolProp({
|
|
25
|
-
label: "Mute Audio",
|
|
26
|
-
description: "Mute the audio of the video.",
|
|
27
|
-
}),
|
|
28
|
-
autoplay: createStaticBoolProp({
|
|
29
|
-
label: "Auto Play",
|
|
30
|
-
description: "Autoplay the video on load.",
|
|
31
|
-
}),
|
|
32
|
-
},
|
|
33
|
-
};
|
package/src/mappings/Youtube.ts
DELETED
|
@@ -1,39 +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: "https://github.com/LonelyCpp/react-native-youtube-iframe",
|
|
14
|
-
category: COMPONENT_TYPES.media,
|
|
15
|
-
stylesPanelSections: [StylesPanelSections.Size, StylesPanelSections.Position],
|
|
16
|
-
layout: {
|
|
17
|
-
height: 250,
|
|
18
|
-
},
|
|
19
|
-
props: {
|
|
20
|
-
videoId: createTextProp({
|
|
21
|
-
label: "Video ID",
|
|
22
|
-
description: "VideoId of the Youtube video.",
|
|
23
|
-
defaultValue: "nwMUpDESXrI",
|
|
24
|
-
}),
|
|
25
|
-
playlist: createTextProp({
|
|
26
|
-
label: "Playlist",
|
|
27
|
-
description: "Playlist of the Youtube videos.",
|
|
28
|
-
defaultValue: "PLUa6TiXzjIrwowt6P-uGCJm8ovm-9S1Ks",
|
|
29
|
-
}),
|
|
30
|
-
mute: createStaticBoolProp({
|
|
31
|
-
label: "Mute Audio",
|
|
32
|
-
description: "Mute the audio of the video.",
|
|
33
|
-
}),
|
|
34
|
-
autoplay: createStaticBoolProp({
|
|
35
|
-
label: "Auto Play",
|
|
36
|
-
description: "Autoplay the video on load.",
|
|
37
|
-
}),
|
|
38
|
-
},
|
|
39
|
-
};
|