@draftbit/core 46.8.1-1b6459.2 → 46.8.1-a8280d.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.
Files changed (37) hide show
  1. package/lib/commonjs/components/Checkbox/CheckboxGroupRow.js +5 -23
  2. package/lib/commonjs/components/Checkbox/CheckboxRow.js +6 -23
  3. package/lib/commonjs/components/Checkbox/context.js +1 -1
  4. package/lib/commonjs/components/CircleImage.js +1 -15
  5. package/lib/commonjs/components/CircularProgress.js +8 -26
  6. package/lib/commonjs/components/Container.js +4 -15
  7. package/lib/commonjs/components/DeprecatedButton.js +3 -20
  8. package/lib/commonjs/components/DeprecatedCardWrapper.js +1 -15
  9. package/lib/commonjs/components/Divider.js +1 -14
  10. package/lib/commonjs/components/Elevation.js +2 -14
  11. package/lib/commonjs/components/FAB.js +4 -18
  12. package/lib/commonjs/components/Portal/PortalHost.js +15 -44
  13. package/lib/commonjs/components/Portal/PortalManager.js +8 -34
  14. package/lib/commonjs/components/Pressable.js +2 -15
  15. package/lib/commonjs/components/ProgressBar.js +7 -37
  16. package/lib/commonjs/components/RadioButton/RadioButton.js +2 -13
  17. package/lib/commonjs/components/RadioButton/RadioButtonGroup.js +2 -15
  18. package/lib/commonjs/components/YotubePlayer.js +37 -0
  19. package/lib/commonjs/index.js +7 -0
  20. package/lib/commonjs/mappings/YoutubePlayer.js +44 -0
  21. package/lib/module/components/TextField.js +78 -28
  22. package/lib/module/components/YotubePlayer.js +29 -0
  23. package/lib/module/index.js +1 -0
  24. package/lib/module/mappings/YoutubePlayer.js +37 -0
  25. package/lib/typescript/src/components/YotubePlayer.d.ts +12 -0
  26. package/lib/typescript/src/components/YotubePlayer.d.ts.map +1 -0
  27. package/lib/typescript/src/index.d.ts +1 -0
  28. package/lib/typescript/src/index.d.ts.map +1 -1
  29. package/lib/typescript/src/mappings/YoutubePlayer.d.ts +37 -0
  30. package/lib/typescript/src/mappings/YoutubePlayer.d.ts.map +1 -0
  31. package/package.json +6 -4
  32. package/src/components/YotubePlayer.js +9 -0
  33. package/src/components/YotubePlayer.tsx +37 -0
  34. package/src/index.js +1 -0
  35. package/src/index.tsx +2 -0
  36. package/src/mappings/YoutubePlayer.js +37 -0
  37. package/src/mappings/YoutubePlayer.ts +43 -0
@@ -8,12 +8,16 @@ var _react = _interopRequireWildcard(require("react"));
8
8
  var _reactNative = require("react-native");
9
9
  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); }
10
10
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
11
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
12
+ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
13
+ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
14
+ function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
11
15
  const INDETERMINATE_WIDTH_FACTOR = 0.3;
12
16
  const BAR_WIDTH_ZERO_POSITION = INDETERMINATE_WIDTH_FACTOR / (1 + INDETERMINATE_WIDTH_FACTOR);
13
17
  class ProgressBar extends _react.Component {
14
18
  constructor(props) {
15
19
  super(props);
16
- this.handleLayout = event => {
20
+ _defineProperty(this, "handleLayout", event => {
17
21
  const {
18
22
  width = 150,
19
23
  onLayout
@@ -26,7 +30,7 @@ class ProgressBar extends _react.Component {
26
30
  if (onLayout) {
27
31
  onLayout(event);
28
32
  }
29
- };
33
+ });
30
34
  const {
31
35
  progress: progressP = 0,
32
36
  indeterminate = false
@@ -74,6 +78,7 @@ class ProgressBar extends _react.Component {
74
78
  ...animationConfig,
75
79
  toValue: progress,
76
80
  velocity: 0,
81
+ //adjust this value if animation fails - velocity is required
77
82
  useNativeDriver
78
83
  }).start();
79
84
  } else {
@@ -142,41 +147,6 @@ class ProgressBar extends _react.Component {
142
147
  })
143
148
  }]
144
149
  };
145
- return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
146
- style: [containerStyle, style],
147
- onLayout: this.handleLayout,
148
- ...restProps
149
- }, /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
150
- style: progressStyle
151
- }), children);
152
- }
153
- }
154
- exports.default = ProgressBar;,
155
- overflow: "hidden",
156
- backgroundColor: unfilledColor
157
- };
158
- const progressStyle = {
159
- backgroundColor: color,
160
- // Always take up full height of container.
161
- height: "100%",
162
- transform: [{
163
- translateX: this.state.animationValue.interpolate({
164
- inputRange: [0, 1],
165
- outputRange: [innerWidth * -INDETERMINATE_WIDTH_FACTOR, innerWidth]
166
- })
167
- }, {
168
- translateX: this.state.progress.interpolate({
169
- inputRange: [0, 1],
170
- outputRange: [innerWidth / (_reactNative.I18nManager.isRTL ? 2 : -2), 0]
171
- })
172
- }, {
173
- // Interpolation a temp workaround for https://github.com/facebook/react-native/issues/6278
174
- scaleX: this.state.progress.interpolate({
175
- inputRange: [0, 1],
176
- outputRange: [0.0001, 1]
177
- })
178
- }]
179
- };
180
150
  return /*#__PURE__*/_react.default.createElement(_reactNative.View, _extends({
181
151
  style: [containerStyle, style],
182
152
  onLayout: this.handleLayout
@@ -12,6 +12,7 @@ var _context = require("./context");
12
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
13
  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); }
14
14
  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; }
15
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
15
16
  const RadioButton = _ref => {
16
17
  let {
17
18
  Icon,
@@ -38,19 +39,7 @@ const RadioButton = _ref => {
38
39
  onPress === null || onPress === void 0 ? void 0 : onPress(realValue);
39
40
  onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(realValue);
40
41
  };
41
- return /*#__PURE__*/React.createElement(_IconButton.default, {
42
- Icon: Icon,
43
- icon: isSelected ? selectedIcon : unselectedIcon,
44
- color: isSelected ? color : unselectedColor,
45
- disabled: disabled,
46
- onPress: handlePress,
47
- size: size,
48
- style: style,
49
- ...rest
50
- });
51
- };
52
- var _default = RadioButton;
53
- exports.default = _default;turn /*#__PURE__*/React.createElement(_IconButton.default, _extends({
42
+ return /*#__PURE__*/React.createElement(_IconButton.default, _extends({
54
43
  Icon: Icon,
55
44
  icon: isSelected ? selectedIcon : unselectedIcon,
56
45
  color: isSelected ? color : unselectedColor,
@@ -10,6 +10,7 @@ var _utilities = require("../../utilities");
10
10
  var _context = require("./context");
11
11
  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); }
12
12
  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; }
13
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
13
14
  const {
14
15
  Provider
15
16
  } = _context.radioButtonGroupContext;
@@ -49,23 +50,9 @@ const RadioButtonGroup = _ref => {
49
50
  alignItems: "center"
50
51
  });
51
52
  }
52
- return /*#__PURE__*/React.createElement(_reactNative.View, {
53
+ return /*#__PURE__*/React.createElement(_reactNative.View, _extends({
53
54
  style: [{
54
55
  minHeight: 40
55
- }, style],
56
- ...rest
57
- }, /*#__PURE__*/React.createElement(Provider, {
58
- value: {
59
- value: internalValue,
60
- onValueChange: handleValueChange,
61
- direction
62
- }
63
- }, /*#__PURE__*/React.createElement(_reactNative.View, {
64
- style: _containerStyle
65
- }, children)));
66
- };
67
- var _default = RadioButtonGroup;
68
- exports.default = _default;0
69
56
  }, style]
70
57
  }, rest), /*#__PURE__*/React.createElement(Provider, {
71
58
  value: {
@@ -0,0 +1,37 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _react = _interopRequireDefault(require("react"));
8
+ var _reactNativeYoutubeIframe = _interopRequireDefault(require("react-native-youtube-iframe"));
9
+ var _utilities = require("../utilities");
10
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
+ const YoutubePlayer = _ref => {
12
+ let {
13
+ videoId,
14
+ playlist,
15
+ mute = false,
16
+ autoplay = false,
17
+ style
18
+ } = _ref;
19
+ const {
20
+ viewStyles
21
+ } = (0, _utilities.extractStyles)(style);
22
+ const {
23
+ height,
24
+ width
25
+ } = viewStyles;
26
+ return /*#__PURE__*/_react.default.createElement(_reactNativeYoutubeIframe.default, {
27
+ height: height,
28
+ width: width,
29
+ play: autoplay,
30
+ videoId: videoId,
31
+ playList: playlist,
32
+ mute: mute,
33
+ webViewStyle: style
34
+ });
35
+ };
36
+ var _default = YoutubePlayer;
37
+ exports.default = _default;
@@ -363,6 +363,12 @@ Object.defineProperty(exports, "Touchable", {
363
363
  return _Touchable.default;
364
364
  }
365
365
  });
366
+ Object.defineProperty(exports, "YoutubePlayer", {
367
+ enumerable: true,
368
+ get: function () {
369
+ return _YotubePlayer.default;
370
+ }
371
+ });
366
372
  Object.defineProperty(exports, "injectIcon", {
367
373
  enumerable: true,
368
374
  get: function () {
@@ -414,6 +420,7 @@ var _Swiper = require("./components/Swiper");
414
420
  var _Layout = require("./components/Layout");
415
421
  var _index = require("./components/RadioButton/index");
416
422
  var _DeckSwiper = require("./components/DeckSwiper");
423
+ var _YotubePlayer = _interopRequireDefault(require("./components/YotubePlayer"));
417
424
  var _DatePicker = _interopRequireDefault(require("./components/DatePicker/DatePicker"));
418
425
  var _Picker = _interopRequireDefault(require("./components/Picker/Picker"));
419
426
  var _ProgressBar = _interopRequireDefault(require("./components/ProgressBar"));
@@ -0,0 +1,44 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.SEED_DATA = void 0;
7
+ var _types = require("@draftbit/types");
8
+ const SEED_DATA = {
9
+ name: "Youtube Player",
10
+ tag: "YoutubePlayer",
11
+ description: "Plays a youtube video form a Youtube video or playlist id",
12
+ doc_link: "https://lonelycpp.github.io/react-native-youtube-iframe",
13
+ code_link: "https://github.com/LonelyCpp/react-native-youtube-iframe",
14
+ category: _types.COMPONENT_TYPES.media,
15
+ stylesPanelSections: _types.BLOCK_STYLES_SECTIONS,
16
+ layout: {
17
+ height: 250
18
+ },
19
+ props: {
20
+ videoId: (0, _types.createTextProp)({
21
+ label: "Video ID",
22
+ description: "VideoId of the Youtube video.",
23
+ defaultValue: "nwMUpDESXrI"
24
+ }),
25
+ playlist: (0, _types.createTextProp)({
26
+ label: "Playlist",
27
+ description: "Playlist of the Youtube videos.",
28
+ defaultValue: "PLUa6TiXzjIrwowt6P-uGCJm8ovm-9S1Ks"
29
+ }),
30
+ mute: (0, _types.createStaticBoolProp)({
31
+ label: "Mute Audio",
32
+ description: "Mute the audio of the video.",
33
+ defaultValue: false,
34
+ required: false
35
+ }),
36
+ autoplay: (0, _types.createStaticBoolProp)({
37
+ label: "Auto Play",
38
+ description: "Autoplay the video on load.",
39
+ defaultValue: false,
40
+ required: false
41
+ })
42
+ }
43
+ };
44
+ exports.SEED_DATA = SEED_DATA;
@@ -1,7 +1,3 @@
1
- function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
- function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
3
- function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
4
- function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
5
1
  import * as React from "react";
6
2
  import { View, Animated, TextInput as NativeTextInput, StyleSheet, Text, I18nManager } from "react-native";
7
3
  import { withTheme } from "../theming";
@@ -13,7 +9,7 @@ const ICON_SIZE = 24;
13
9
  class TextField extends React.Component {
14
10
  constructor() {
15
11
  super(...arguments);
16
- _defineProperty(this, "state", {
12
+ this.state = {
17
13
  nativeProps: {},
18
14
  labeled: new Animated.Value(this.props.value || this.props.error ? 0 : 1),
19
15
  focused: false,
@@ -22,47 +18,46 @@ class TextField extends React.Component {
22
18
  measured: false,
23
19
  width: 0
24
20
  }
25
- });
26
- _defineProperty(this, "_timer", setTimeout(() => {}, 0));
27
- _defineProperty(this, "_showPlaceholder", () => {
21
+ };
22
+ this._timer = setTimeout(() => {}, 0);
23
+ this._showPlaceholder = () => {
28
24
  clearTimeout(this._timer);
29
-
30
25
  // Set the placeholder in a delay to offset the label animation
31
26
  // If we show it immediately, they'll overlap and look ugly
32
27
  this._timer = setTimeout(() => this.setState({
33
28
  placeholder: this.props.placeholder
34
29
  }), 50);
35
- });
36
- _defineProperty(this, "_hidePlaceholder", () => this.setState({
30
+ };
31
+ this._hidePlaceholder = () => this.setState({
37
32
  placeholder: ""
38
- }));
39
- _defineProperty(this, "_restoreLabel", () => Animated.timing(this.state.labeled, {
33
+ });
34
+ this._restoreLabel = () => Animated.timing(this.state.labeled, {
40
35
  toValue: 1,
41
36
  duration: FOCUS_ANIMATION_DURATION,
42
37
  useNativeDriver: true
43
- }).start());
44
- _defineProperty(this, "_minmizeLabel", () => Animated.timing(this.state.labeled, {
38
+ }).start();
39
+ this._minmizeLabel = () => Animated.timing(this.state.labeled, {
45
40
  toValue: 0,
46
41
  duration: BLUR_ANIMATION_DURATION,
47
42
  useNativeDriver: true
48
- }).start());
49
- _defineProperty(this, "_handleFocus", () => {
43
+ }).start();
44
+ this._handleFocus = () => {
50
45
  if (this.props.disabled) {
51
46
  return;
52
47
  }
53
48
  this.setState({
54
49
  focused: true
55
50
  });
56
- });
57
- _defineProperty(this, "_handleBlur", () => {
51
+ };
52
+ this._handleBlur = () => {
58
53
  if (this.props.disabled) {
59
54
  return;
60
55
  }
61
56
  this.setState({
62
57
  focused: false
63
58
  });
64
- });
65
- _defineProperty(this, "_handleChangeText", value => {
59
+ };
60
+ this._handleChangeText = value => {
66
61
  if (this.props.disabled) {
67
62
  return;
68
63
  }
@@ -77,8 +72,8 @@ class TextField extends React.Component {
77
72
  });
78
73
  this.props.onChangeText && this.props.onChangeText(value.nativeEvent.text);
79
74
  }
80
- });
81
- _defineProperty(this, "_root", undefined);
75
+ };
76
+ this._root = undefined;
82
77
  }
83
78
  static getDerivedStateFromProps(nextProps, prevState) {
84
79
  return {
@@ -165,7 +160,9 @@ class TextField extends React.Component {
165
160
  roundness,
166
161
  disabledOpacity
167
162
  },
168
- render = props => /*#__PURE__*/React.createElement(NativeTextInput, props),
163
+ render = props => /*#__PURE__*/React.createElement(NativeTextInput, {
164
+ ...props
165
+ }),
169
166
  ...rest
170
167
  } = this.props;
171
168
  const MINIMIZED_LABEL_Y_OFFSET = -(typography.caption.lineHeight + 4);
@@ -305,9 +302,10 @@ class TextField extends React.Component {
305
302
  } = StyleSheet.flatten(style || {});
306
303
  return /*#__PURE__*/React.createElement(View, {
307
304
  style: [styles.container, styleProp]
308
- }, leftIconName && leftIconMode === "outset" ? /*#__PURE__*/React.createElement(Icon, _extends({}, leftIconProps, {
305
+ }, leftIconName && leftIconMode === "outset" ? /*#__PURE__*/React.createElement(Icon, {
306
+ ...leftIconProps,
309
307
  style: leftIconStyle
310
- })) : null, /*#__PURE__*/React.createElement(View, {
308
+ }) : null, /*#__PURE__*/React.createElement(View, {
311
309
  style: applyStyles([containerStyle], {
312
310
  height: style === null || style === void 0 ? void 0 : style.height,
313
311
  backgroundColor: bgColor,
@@ -375,9 +373,10 @@ class TextField extends React.Component {
375
373
  style: {
376
374
  justifyContent: type === "solid" ? "center" : undefined
377
375
  }
378
- }, /*#__PURE__*/React.createElement(Icon, _extends({}, leftIconProps, {
376
+ }, /*#__PURE__*/React.createElement(Icon, {
377
+ ...leftIconProps,
379
378
  style: leftIconStyle
380
- }))) : null, render({
379
+ })) : null, render({
381
380
  ref: c => {
382
381
  this._root = c;
383
382
  },
@@ -414,6 +413,57 @@ class TextField extends React.Component {
414
413
  }
415
414
  }
416
415
  export default withTheme(TextField);
416
+ const styles = StyleSheet.create({
417
+ container: {
418
+ alignSelf: "stretch"
419
+ },
420
+ placeholder: {
421
+ position: "absolute",
422
+ left: 0
423
+ },
424
+ underline: {
425
+ position: "absolute",
426
+ left: 0,
427
+ right: 0,
428
+ bottom: 0,
429
+ height: 2
430
+ },
431
+ input: {
432
+ flexGrow: 1,
433
+ justifyContent: "center",
434
+ textAlignVertical: "center",
435
+ margin: 0,
436
+ textAlign: I18nManager.isRTL ? "right" : "left"
437
+ }
438
+ });ionColor: activeColor,
439
+ multiline,
440
+ numberOfLines,
441
+ onFocus: this._handleFocus,
442
+ onBlur: this._handleBlur,
443
+ underlineColorAndroid: "transparent",
444
+ style: inputStyles,
445
+ ...rest,
446
+ ...this.state.nativeProps,
447
+ value: this.state.value
448
+ })), rightIconName ? /*#__PURE__*/React.createElement(Icon, {
449
+ name: rightIconName,
450
+ size: ICON_SIZE,
451
+ color: colors.light,
452
+ style: {
453
+ position: "absolute",
454
+ right: 16,
455
+ marginTop: type === "solid" ? MINIMIZED_LABEL_FONT_SIZE + 4 : 16
456
+ }
457
+ }) : null, assistiveText ? /*#__PURE__*/React.createElement(Text, {
458
+ style: [{
459
+ color: error ? colors.error : colors.light,
460
+ marginTop: 8,
461
+ marginLeft: assistiveTextLeftMargin
462
+ }]
463
+ }, assistiveText) : null);
464
+ }
465
+ }
466
+ export default withTheme(TextField);
417
467
  const styles = StyleSheet.create({
418
468
  container: {
419
469
  alignSelf: "stretch"
@@ -0,0 +1,29 @@
1
+ import React from "react";
2
+ import YoutubePlayerComponent from "react-native-youtube-iframe";
3
+ import { extractStyles } from "../utilities";
4
+ const YoutubePlayer = _ref => {
5
+ let {
6
+ videoId,
7
+ playlist,
8
+ mute = false,
9
+ autoplay = false,
10
+ style
11
+ } = _ref;
12
+ const {
13
+ viewStyles
14
+ } = extractStyles(style);
15
+ const {
16
+ height,
17
+ width
18
+ } = viewStyles;
19
+ return /*#__PURE__*/React.createElement(YoutubePlayerComponent, {
20
+ height: height,
21
+ width: width,
22
+ play: autoplay,
23
+ videoId: videoId,
24
+ playList: playlist,
25
+ mute: mute,
26
+ webViewStyle: style
27
+ });
28
+ };
29
+ export default YoutubePlayer;
@@ -32,6 +32,7 @@ export { Swiper, SwiperItem } from "./components/Swiper";
32
32
  export { Center, Circle, Square, Row, Stack, Spacer } from "./components/Layout";
33
33
  export { RadioButton, RadioButtonGroup, RadioButtonRow, RadioButtonFieldGroup } from "./components/RadioButton/index";
34
34
  export { DeckSwiper, DeckSwiperCard } from "./components/DeckSwiper";
35
+ export { default as YoutubePlayer } from "./components/YotubePlayer";
35
36
 
36
37
  /* Deprecated: Fix or Delete! */
37
38
  export { default as DatePicker } from "./components/DatePicker/DatePicker";
@@ -0,0 +1,37 @@
1
+ import { BLOCK_STYLES_SECTIONS, COMPONENT_TYPES, createStaticBoolProp, createTextProp } from "@draftbit/types";
2
+ export const SEED_DATA = {
3
+ name: "Youtube Player",
4
+ tag: "YoutubePlayer",
5
+ description: "Plays a youtube video form a Youtube video or playlist id",
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: BLOCK_STYLES_SECTIONS,
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
+ defaultValue: false,
28
+ required: false
29
+ }),
30
+ autoplay: createStaticBoolProp({
31
+ label: "Auto Play",
32
+ description: "Autoplay the video on load.",
33
+ defaultValue: false,
34
+ required: false
35
+ })
36
+ }
37
+ };
@@ -0,0 +1,12 @@
1
+ import React from "react";
2
+ import { StyleProp, ViewStyle } from "react-native";
3
+ interface YoutubePlayerProps {
4
+ videoId?: string;
5
+ playlist?: string;
6
+ mute?: boolean;
7
+ autoplay?: boolean;
8
+ style?: StyleProp<ViewStyle>;
9
+ }
10
+ declare const YoutubePlayer: React.FC<YoutubePlayerProps>;
11
+ export default YoutubePlayer;
12
+ //# sourceMappingURL=YotubePlayer.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"YotubePlayer.d.ts","sourceRoot":"","sources":["../../../../src/components/YotubePlayer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIpD,UAAU,kBAAkB;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAqB/C,CAAC;AAEF,eAAe,aAAa,CAAC"}
@@ -32,6 +32,7 @@ export { Swiper, SwiperItem } from "./components/Swiper";
32
32
  export { Center, Circle, Square, Row, Stack, Spacer, } from "./components/Layout";
33
33
  export { RadioButton, RadioButtonGroup, RadioButtonRow, RadioButtonFieldGroup, } from "./components/RadioButton/index";
34
34
  export { DeckSwiper, DeckSwiperCard } from "./components/DeckSwiper";
35
+ export { default as YoutubePlayer } from "./components/YotubePlayer";
35
36
  export { default as DatePicker } from "./components/DatePicker/DatePicker";
36
37
  export { default as Picker } from "./components/Picker/Picker";
37
38
  export { default as ProgressBar } from "./components/ProgressBar";
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,37 @@
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
+ };
37
+ //# sourceMappingURL=YoutubePlayer.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"YoutubePlayer.d.ts","sourceRoot":"","sources":["../../../../src/mappings/YoutubePlayer.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCrB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@draftbit/core",
3
- "version": "46.8.1-1b6459.2+1b64593",
3
+ "version": "46.8.1-a8280d.2+a8280d9",
4
4
  "description": "Core (non-native) Components",
5
5
  "main": "lib/commonjs/index.js",
6
6
  "module": "lib/module/index.js",
@@ -41,7 +41,7 @@
41
41
  "dependencies": {
42
42
  "@date-io/date-fns": "^1.3.13",
43
43
  "@draftbit/react-theme-provider": "^2.1.1",
44
- "@draftbit/types": "^46.8.1-1b6459.2+1b64593",
44
+ "@draftbit/types": "^46.8.1-a8280d.2+a8280d9",
45
45
  "@material-ui/core": "^4.11.0",
46
46
  "@material-ui/pickers": "^3.2.10",
47
47
  "@react-native-community/slider": "4.2.3",
@@ -57,7 +57,9 @@
57
57
  "react-native-modal-datetime-picker": "^13.0.0",
58
58
  "react-native-svg": "12.3.0",
59
59
  "react-native-typography": "^1.4.1",
60
- "react-native-web-swiper": "^2.2.3"
60
+ "react-native-web-swiper": "^2.2.3",
61
+ "react-native-web-webview": "^1.0.2",
62
+ "react-native-youtube-iframe": "^2.2.2"
61
63
  },
62
64
  "devDependencies": {
63
65
  "@types/color": "^3.0.1",
@@ -92,5 +94,5 @@
92
94
  ]
93
95
  ]
94
96
  },
95
- "gitHead": "1b64593d591a225b64dc1a4fd0afbdcf3de444ef"
97
+ "gitHead": "a8280d9c32a1c5d4dd267483d55bbf206bf0047a"
96
98
  }
@@ -0,0 +1,9 @@
1
+ import React from "react";
2
+ import YoutubePlayerComponent from "react-native-youtube-iframe";
3
+ import { extractStyles } from "../utilities";
4
+ const YoutubePlayer = ({ videoId, playlist, mute = false, autoplay = false, style, }) => {
5
+ const { viewStyles } = extractStyles(style);
6
+ const { height, width } = viewStyles;
7
+ return (React.createElement(YoutubePlayerComponent, { height: height, width: width, play: autoplay, videoId: videoId, playList: playlist, mute: mute, webViewStyle: style }));
8
+ };
9
+ export default YoutubePlayer;