@draftbit/core 46.4.4-929d79.2 → 46.4.4-970ba7.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 +84 -8
- package/lib/commonjs/mappings/HtmlElements.js +125 -0
- package/lib/module/components/Accordion/AccordionItem.js +26 -5
- package/lib/module/components/Picker/PickerComponent.web.js +23 -5
- package/lib/module/index.js +2 -2
- package/lib/module/mappings/HtmlElements.js +116 -0
- package/lib/typescript/src/index.d.ts +1 -1
- package/lib/typescript/src/mappings/HtmlElements.d.ts +49 -0
- package/package.json +5 -6
- package/src/index.js +1 -1
- package/src/index.tsx +2 -1
- package/src/mappings/HtmlElements.js +141 -0
- package/src/mappings/HtmlElements.ts +151 -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
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
import { COMPONENT_TYPES, createTextProp, FORM_TYPES, GROUPS, StylesPanelSections, Triggers, } from "@draftbit/types";
|
|
2
|
+
const SEED_DATA_TRIGGERS = [Triggers.OnValueChange];
|
|
3
|
+
const ELEMENT_PROPS = {
|
|
4
|
+
category: COMPONENT_TYPES.element,
|
|
5
|
+
doc_link: "https://www.npmjs.com/package/@expo/html-elements",
|
|
6
|
+
code_link: "https://github.com/expo/expo/tree/master/packages/html-elements",
|
|
7
|
+
stylesPanelSections: [
|
|
8
|
+
StylesPanelSections.Typography,
|
|
9
|
+
StylesPanelSections.LayoutSelectedItem,
|
|
10
|
+
StylesPanelSections.MarginsAndPaddings,
|
|
11
|
+
StylesPanelSections.Effects,
|
|
12
|
+
],
|
|
13
|
+
layout: {
|
|
14
|
+
margin: 0,
|
|
15
|
+
},
|
|
16
|
+
triggers: SEED_DATA_TRIGGERS,
|
|
17
|
+
};
|
|
18
|
+
const HEADING_PROPS = {
|
|
19
|
+
...ELEMENT_PROPS,
|
|
20
|
+
};
|
|
21
|
+
export const SEED_DATA = [
|
|
22
|
+
{
|
|
23
|
+
name: "H1",
|
|
24
|
+
tag: "H1",
|
|
25
|
+
...HEADING_PROPS,
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
name: "H2",
|
|
29
|
+
tag: "H2",
|
|
30
|
+
...HEADING_PROPS,
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
name: "H3",
|
|
34
|
+
tag: "H3",
|
|
35
|
+
...HEADING_PROPS,
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
name: "H4",
|
|
39
|
+
tag: "H4",
|
|
40
|
+
...HEADING_PROPS,
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
name: "H5",
|
|
44
|
+
tag: "H5",
|
|
45
|
+
...HEADING_PROPS,
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
name: "H6",
|
|
49
|
+
tag: "H6",
|
|
50
|
+
...HEADING_PROPS,
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
name: "Anchor",
|
|
54
|
+
tag: "A",
|
|
55
|
+
...ELEMENT_PROPS,
|
|
56
|
+
props: {
|
|
57
|
+
href: createTextProp({
|
|
58
|
+
label: "href",
|
|
59
|
+
description: "Specify the URL",
|
|
60
|
+
defaultValue: "",
|
|
61
|
+
}),
|
|
62
|
+
target: {
|
|
63
|
+
group: GROUPS.basic,
|
|
64
|
+
label: "target",
|
|
65
|
+
description: "decide where link should open",
|
|
66
|
+
formType: FORM_TYPES.flatArray,
|
|
67
|
+
defaultValue: "_blank",
|
|
68
|
+
options: ["_blank", "_self", "_parent", "_top"],
|
|
69
|
+
},
|
|
70
|
+
},
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
name: "Paragraph",
|
|
74
|
+
tag: "P",
|
|
75
|
+
...ELEMENT_PROPS,
|
|
76
|
+
props: {
|
|
77
|
+
// NOTE - Keeping the props commented until we figure out a way to use this props from draftbit side.
|
|
78
|
+
// strong: createBoolProp({
|
|
79
|
+
// label: "Strong",
|
|
80
|
+
// description: "Strong",
|
|
81
|
+
// }),
|
|
82
|
+
// strike: createBoolProp({
|
|
83
|
+
// label: "Strike",
|
|
84
|
+
// description: "Strike through",
|
|
85
|
+
// }),
|
|
86
|
+
// italic: createBoolProp({
|
|
87
|
+
// label: "Italic",
|
|
88
|
+
// description: "Italic Fonts",
|
|
89
|
+
// }),
|
|
90
|
+
// bold: createBoolProp({
|
|
91
|
+
// label: "Bold",
|
|
92
|
+
// description: "Bold",
|
|
93
|
+
// }),
|
|
94
|
+
},
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
name: "Code",
|
|
98
|
+
tag: "Code",
|
|
99
|
+
...ELEMENT_PROPS,
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
name: "Pre",
|
|
103
|
+
tag: "Pre",
|
|
104
|
+
...ELEMENT_PROPS,
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
name: "Mark",
|
|
108
|
+
tag: "Mark",
|
|
109
|
+
...ELEMENT_PROPS,
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
name: "BR",
|
|
113
|
+
tag: "BR",
|
|
114
|
+
...ELEMENT_PROPS,
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
name: "BlockQuote",
|
|
118
|
+
tag: "BlockQuote",
|
|
119
|
+
...ELEMENT_PROPS,
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
name: "Time",
|
|
123
|
+
tag: "Time",
|
|
124
|
+
...ELEMENT_PROPS,
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
name: "UL",
|
|
128
|
+
tag: "UL",
|
|
129
|
+
...ELEMENT_PROPS,
|
|
130
|
+
},
|
|
131
|
+
{
|
|
132
|
+
name: "LI",
|
|
133
|
+
tag: "LI",
|
|
134
|
+
...ELEMENT_PROPS,
|
|
135
|
+
},
|
|
136
|
+
{
|
|
137
|
+
name: "HR",
|
|
138
|
+
tag: "HR",
|
|
139
|
+
...ELEMENT_PROPS,
|
|
140
|
+
},
|
|
141
|
+
];
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
import {
|
|
2
|
+
COMPONENT_TYPES,
|
|
3
|
+
createTextProp,
|
|
4
|
+
FORM_TYPES,
|
|
5
|
+
GROUPS,
|
|
6
|
+
StylesPanelSections,
|
|
7
|
+
Triggers,
|
|
8
|
+
} from "@draftbit/types";
|
|
9
|
+
const SEED_DATA_TRIGGERS = [Triggers.OnValueChange];
|
|
10
|
+
|
|
11
|
+
const ELEMENT_PROPS = {
|
|
12
|
+
category: 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: [
|
|
16
|
+
StylesPanelSections.Typography,
|
|
17
|
+
StylesPanelSections.LayoutSelectedItem,
|
|
18
|
+
StylesPanelSections.MarginsAndPaddings,
|
|
19
|
+
StylesPanelSections.Effects,
|
|
20
|
+
],
|
|
21
|
+
layout: {
|
|
22
|
+
margin: 0,
|
|
23
|
+
},
|
|
24
|
+
triggers: SEED_DATA_TRIGGERS,
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
const HEADING_PROPS = {
|
|
28
|
+
...ELEMENT_PROPS,
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
export const SEED_DATA = [
|
|
32
|
+
{
|
|
33
|
+
name: "H1",
|
|
34
|
+
tag: "H1",
|
|
35
|
+
...HEADING_PROPS,
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
name: "H2",
|
|
39
|
+
tag: "H2",
|
|
40
|
+
...HEADING_PROPS,
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
name: "H3",
|
|
44
|
+
tag: "H3",
|
|
45
|
+
...HEADING_PROPS,
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
name: "H4",
|
|
49
|
+
tag: "H4",
|
|
50
|
+
...HEADING_PROPS,
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
name: "H5",
|
|
54
|
+
tag: "H5",
|
|
55
|
+
...HEADING_PROPS,
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
name: "H6",
|
|
59
|
+
tag: "H6",
|
|
60
|
+
...HEADING_PROPS,
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
name: "Anchor",
|
|
64
|
+
tag: "A",
|
|
65
|
+
...ELEMENT_PROPS,
|
|
66
|
+
props: {
|
|
67
|
+
href: createTextProp({
|
|
68
|
+
label: "href",
|
|
69
|
+
description: "Specify the URL",
|
|
70
|
+
defaultValue: "",
|
|
71
|
+
}),
|
|
72
|
+
target: {
|
|
73
|
+
group: GROUPS.basic,
|
|
74
|
+
label: "target",
|
|
75
|
+
description: "decide where link should open",
|
|
76
|
+
formType: FORM_TYPES.flatArray,
|
|
77
|
+
defaultValue: "_blank",
|
|
78
|
+
options: ["_blank", "_self", "_parent", "_top"],
|
|
79
|
+
},
|
|
80
|
+
},
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
name: "Paragraph",
|
|
84
|
+
tag: "P",
|
|
85
|
+
...ELEMENT_PROPS,
|
|
86
|
+
props: {
|
|
87
|
+
// NOTE - Keeping the props commented until we figure out a way to use this props from draftbit side.
|
|
88
|
+
// strong: createBoolProp({
|
|
89
|
+
// label: "Strong",
|
|
90
|
+
// description: "Strong",
|
|
91
|
+
// }),
|
|
92
|
+
// strike: createBoolProp({
|
|
93
|
+
// label: "Strike",
|
|
94
|
+
// description: "Strike through",
|
|
95
|
+
// }),
|
|
96
|
+
// italic: createBoolProp({
|
|
97
|
+
// label: "Italic",
|
|
98
|
+
// description: "Italic Fonts",
|
|
99
|
+
// }),
|
|
100
|
+
// bold: createBoolProp({
|
|
101
|
+
// label: "Bold",
|
|
102
|
+
// description: "Bold",
|
|
103
|
+
// }),
|
|
104
|
+
},
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
name: "Code",
|
|
108
|
+
tag: "Code",
|
|
109
|
+
...ELEMENT_PROPS,
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
name: "Pre",
|
|
113
|
+
tag: "Pre",
|
|
114
|
+
...ELEMENT_PROPS,
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
name: "Mark",
|
|
118
|
+
tag: "Mark",
|
|
119
|
+
...ELEMENT_PROPS,
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
name: "BR",
|
|
123
|
+
tag: "BR",
|
|
124
|
+
...ELEMENT_PROPS,
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
name: "BlockQuote",
|
|
128
|
+
tag: "BlockQuote",
|
|
129
|
+
...ELEMENT_PROPS,
|
|
130
|
+
},
|
|
131
|
+
{
|
|
132
|
+
name: "Time",
|
|
133
|
+
tag: "Time",
|
|
134
|
+
...ELEMENT_PROPS,
|
|
135
|
+
},
|
|
136
|
+
{
|
|
137
|
+
name: "UL",
|
|
138
|
+
tag: "UL",
|
|
139
|
+
...ELEMENT_PROPS,
|
|
140
|
+
},
|
|
141
|
+
{
|
|
142
|
+
name: "LI",
|
|
143
|
+
tag: "LI",
|
|
144
|
+
...ELEMENT_PROPS,
|
|
145
|
+
},
|
|
146
|
+
{
|
|
147
|
+
name: "HR",
|
|
148
|
+
tag: "HR",
|
|
149
|
+
...ELEMENT_PROPS,
|
|
150
|
+
},
|
|
151
|
+
];
|
|
@@ -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
|
-
};
|