@draftbit/core 46.4.4-b53636.2 → 46.4.4-c1367a.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/components/Accordion/AccordionItem.js +5 -25
- package/lib/commonjs/components/AnimatedCircularProgress.js +2 -12
- package/lib/commonjs/components/CircleImage.js +2 -16
- package/lib/commonjs/components/Text.js +6 -2
- package/lib/commonjs/components/TextField.js +5 -1
- package/lib/commonjs/mappings/AudioPlayer.js +2 -32
- package/lib/module/components/Accordion/AccordionItem.js +5 -26
- package/lib/module/components/Text.js +6 -2
- package/lib/module/components/TextField.js +5 -1
- package/lib/module/mappings/AudioPlayer.js +3 -33
- package/lib/typescript/src/components/Text.d.ts +2 -1
- package/lib/typescript/src/components/TextField.d.ts +2 -1
- package/lib/typescript/src/mappings/AudioPlayer.d.ts +1 -62
- package/package.json +3 -3
- package/src/components/Text.js +8 -2
- package/src/components/Text.tsx +6 -1
- package/src/components/TextField.js +6 -1
- package/src/components/TextField.tsx +7 -1
- package/src/mappings/AudioPlayer.js +2 -39
- package/src/mappings/AudioPlayer.ts +1 -41
|
@@ -21,6 +21,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
21
21
|
|
|
22
22
|
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; }
|
|
23
23
|
|
|
24
|
+
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); }
|
|
25
|
+
|
|
24
26
|
const AccordionItem = _ref => {
|
|
25
27
|
let {
|
|
26
28
|
Icon,
|
|
@@ -35,10 +37,9 @@ const AccordionItem = _ref => {
|
|
|
35
37
|
textStyles,
|
|
36
38
|
viewStyles
|
|
37
39
|
} = (0, _utilities.extractStyles)(style);
|
|
38
|
-
return /*#__PURE__*/React.createElement(_reactNative.Pressable, {
|
|
39
|
-
style: [styles.container, viewStyles]
|
|
40
|
-
|
|
41
|
-
}, /*#__PURE__*/React.createElement(_reactNative.View, {
|
|
40
|
+
return /*#__PURE__*/React.createElement(_reactNative.Pressable, _extends({
|
|
41
|
+
style: [styles.container, viewStyles]
|
|
42
|
+
}, rest), /*#__PURE__*/React.createElement(_reactNative.View, {
|
|
42
43
|
style: styles.row
|
|
43
44
|
}, icon ? /*#__PURE__*/React.createElement(Icon, {
|
|
44
45
|
name: icon,
|
|
@@ -73,25 +74,4 @@ const styles = _reactNative.StyleSheet.create({
|
|
|
73
74
|
|
|
74
75
|
var _default = (0, _theming.withTheme)(AccordionItem);
|
|
75
76
|
|
|
76
|
-
exports.default = _default;StyleSheet.create({
|
|
77
|
-
container: {
|
|
78
|
-
padding: 8
|
|
79
|
-
},
|
|
80
|
-
row: {
|
|
81
|
-
flexDirection: "row",
|
|
82
|
-
alignItems: "center",
|
|
83
|
-
paddingLeft: 8
|
|
84
|
-
},
|
|
85
|
-
item: {
|
|
86
|
-
marginVertical: 6,
|
|
87
|
-
paddingLeft: 8
|
|
88
|
-
},
|
|
89
|
-
content: {
|
|
90
|
-
flex: 1,
|
|
91
|
-
justifyContent: "center"
|
|
92
|
-
}
|
|
93
|
-
});
|
|
94
|
-
|
|
95
|
-
var _default = (0, _theming.withTheme)(AccordionItem);
|
|
96
|
-
|
|
97
77
|
exports.default = _default;
|
|
@@ -17,6 +17,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
17
17
|
|
|
18
18
|
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; }
|
|
19
19
|
|
|
20
|
+
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); }
|
|
21
|
+
|
|
20
22
|
const AnimatedProgress = _reactNative.Animated.createAnimatedComponent(_CircularProgress.default);
|
|
21
23
|
|
|
22
24
|
const AnimatedCircularProgress = _ref => {
|
|
@@ -67,18 +69,6 @@ const AnimatedCircularProgress = _ref => {
|
|
|
67
69
|
React.useEffect(() => {
|
|
68
70
|
animate();
|
|
69
71
|
}, [fill, animate]);
|
|
70
|
-
return /*#__PURE__*/React.createElement(AnimatedProgress, { ...other,
|
|
71
|
-
style: other.style,
|
|
72
|
-
childrenContainerStyle: other.childrenContainerStyle,
|
|
73
|
-
fill: fillAnimation,
|
|
74
|
-
tintColor: animateColor()
|
|
75
|
-
});
|
|
76
|
-
};
|
|
77
|
-
|
|
78
|
-
var _default = AnimatedCircularProgress;
|
|
79
|
-
exports.default = _default;eEffect(() => {
|
|
80
|
-
animate();
|
|
81
|
-
}, [fill, animate]);
|
|
82
72
|
return /*#__PURE__*/React.createElement(AnimatedProgress, _extends({}, other, {
|
|
83
73
|
style: other.style,
|
|
84
74
|
childrenContainerStyle: other.childrenContainerStyle,
|
|
@@ -17,6 +17,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
17
17
|
|
|
18
18
|
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; }
|
|
19
19
|
|
|
20
|
+
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); }
|
|
21
|
+
|
|
20
22
|
const CircleImage = _ref => {
|
|
21
23
|
let {
|
|
22
24
|
source = _Config.default.placeholderImageURL,
|
|
@@ -25,22 +27,6 @@ const CircleImage = _ref => {
|
|
|
25
27
|
...props
|
|
26
28
|
} = _ref;
|
|
27
29
|
const borderRadius = size / 2;
|
|
28
|
-
return /*#__PURE__*/React.createElement(_reactNative.Image, {
|
|
29
|
-
style: [{
|
|
30
|
-
width: size,
|
|
31
|
-
height: size,
|
|
32
|
-
borderRadius
|
|
33
|
-
}, style],
|
|
34
|
-
source: typeof source === "string" ? {
|
|
35
|
-
uri: source
|
|
36
|
-
} : source,
|
|
37
|
-
resizeMode: "cover",
|
|
38
|
-
...props
|
|
39
|
-
});
|
|
40
|
-
};
|
|
41
|
-
|
|
42
|
-
var _default = CircleImage;
|
|
43
|
-
exports.default = _default;size / 2;
|
|
44
30
|
return /*#__PURE__*/React.createElement(_reactNative.Image, _extends({
|
|
45
31
|
style: [{
|
|
46
32
|
width: size,
|
|
@@ -24,10 +24,14 @@ class Text extends React.Component {
|
|
|
24
24
|
super(...arguments);
|
|
25
25
|
|
|
26
26
|
_defineProperty(this, "_root", void 0);
|
|
27
|
+
|
|
28
|
+
_defineProperty(this, "state", {
|
|
29
|
+
nativeProps: {}
|
|
30
|
+
});
|
|
27
31
|
}
|
|
28
32
|
|
|
29
33
|
setNativeProps(args) {
|
|
30
|
-
|
|
34
|
+
this.state.nativeProps = args || {};
|
|
31
35
|
}
|
|
32
36
|
|
|
33
37
|
render() {
|
|
@@ -36,7 +40,7 @@ class Text extends React.Component {
|
|
|
36
40
|
...rest
|
|
37
41
|
} = this.props;
|
|
38
42
|
const writingDirection = _reactNative.I18nManager.isRTL ? "rtl" : "ltr";
|
|
39
|
-
return /*#__PURE__*/React.createElement(_reactNative.Text, _extends({}, rest, {
|
|
43
|
+
return /*#__PURE__*/React.createElement(_reactNative.Text, _extends({}, rest, this.state.nativeProps, {
|
|
40
44
|
ref: c => {
|
|
41
45
|
this._root = c;
|
|
42
46
|
},
|
|
@@ -32,6 +32,7 @@ class TextField extends React.Component {
|
|
|
32
32
|
super(...arguments);
|
|
33
33
|
|
|
34
34
|
_defineProperty(this, "state", {
|
|
35
|
+
nativeProps: {},
|
|
35
36
|
labeled: new _reactNative.Animated.Value(this.props.value || this.props.error ? 0 : 1),
|
|
36
37
|
focused: false,
|
|
37
38
|
placeholder: this.props.error ? this.props.placeholder : "",
|
|
@@ -162,7 +163,9 @@ class TextField extends React.Component {
|
|
|
162
163
|
* @internal
|
|
163
164
|
*/
|
|
164
165
|
setNativeProps(args) {
|
|
165
|
-
|
|
166
|
+
this.setState(state => ({ ...state,
|
|
167
|
+
nativeState: args || {}
|
|
168
|
+
}));
|
|
166
169
|
}
|
|
167
170
|
|
|
168
171
|
isFocused() {
|
|
@@ -444,6 +447,7 @@ class TextField extends React.Component {
|
|
|
444
447
|
underlineColorAndroid: "transparent",
|
|
445
448
|
style: inputStyles,
|
|
446
449
|
...rest,
|
|
450
|
+
...this.state.nativeProps,
|
|
447
451
|
value: this.state.value
|
|
448
452
|
})), rightIconName ? /*#__PURE__*/React.createElement(Icon, {
|
|
449
453
|
name: rightIconName,
|
|
@@ -12,17 +12,7 @@ const SEED_DATA = {
|
|
|
12
12
|
tag: "AudioPlayer",
|
|
13
13
|
description: "Given a source URL, plays sounds & audio!",
|
|
14
14
|
category: _types.COMPONENT_TYPES.media,
|
|
15
|
-
|
|
16
|
-
layout: {
|
|
17
|
-
backgroundColor: "#eee",
|
|
18
|
-
paddingLeft: 16,
|
|
19
|
-
paddingRight: 16,
|
|
20
|
-
paddingTop: 8,
|
|
21
|
-
paddingBottom: 8,
|
|
22
|
-
borderRadius: 24,
|
|
23
|
-
flexDirection: "row",
|
|
24
|
-
alignItems: "center"
|
|
25
|
-
},
|
|
15
|
+
layout: {},
|
|
26
16
|
props: {
|
|
27
17
|
source: {
|
|
28
18
|
group: _types.GROUPS.data,
|
|
@@ -33,27 +23,7 @@ const SEED_DATA = {
|
|
|
33
23
|
defaultValue: "https://static.draftbit.com/audio/intro-to-draftbit-audio.mp3",
|
|
34
24
|
formType: _types.FORM_TYPES.sourceUrl,
|
|
35
25
|
propType: _types.PROP_TYPES.OBJECT
|
|
36
|
-
}
|
|
37
|
-
sliderColor: (0, _types.createColorProp)({
|
|
38
|
-
label: "Thumb Color",
|
|
39
|
-
defaultValue: "black"
|
|
40
|
-
}),
|
|
41
|
-
completedTrackColor: (0, _types.createColorProp)({
|
|
42
|
-
label: "Completed Track Color",
|
|
43
|
-
defaultValue: "white"
|
|
44
|
-
}),
|
|
45
|
-
remainingTrackColor: (0, _types.createColorProp)({
|
|
46
|
-
label: "Remaining Track Color",
|
|
47
|
-
defaultValue: "#333333"
|
|
48
|
-
}),
|
|
49
|
-
trackThumbSize: (0, _types.createNumberProp)({
|
|
50
|
-
label: "Thumb Size",
|
|
51
|
-
defaultValue: 24
|
|
52
|
-
}),
|
|
53
|
-
playIconColor: (0, _types.createColorProp)({
|
|
54
|
-
label: "Play Icon Color",
|
|
55
|
-
defaultValue: "black"
|
|
56
|
-
})
|
|
26
|
+
}
|
|
57
27
|
}
|
|
58
28
|
};
|
|
59
29
|
exports.SEED_DATA = SEED_DATA;
|
|
@@ -1,3 +1,5 @@
|
|
|
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
|
+
|
|
1
3
|
import * as React from "react";
|
|
2
4
|
import { Pressable, StyleSheet, View } from "react-native";
|
|
3
5
|
import Text from "../Text";
|
|
@@ -18,10 +20,9 @@ const AccordionItem = _ref => {
|
|
|
18
20
|
textStyles,
|
|
19
21
|
viewStyles
|
|
20
22
|
} = extractStyles(style);
|
|
21
|
-
return /*#__PURE__*/React.createElement(Pressable, {
|
|
22
|
-
style: [styles.container, viewStyles]
|
|
23
|
-
|
|
24
|
-
}, /*#__PURE__*/React.createElement(View, {
|
|
23
|
+
return /*#__PURE__*/React.createElement(Pressable, _extends({
|
|
24
|
+
style: [styles.container, viewStyles]
|
|
25
|
+
}, rest), /*#__PURE__*/React.createElement(View, {
|
|
25
26
|
style: styles.row
|
|
26
27
|
}, icon ? /*#__PURE__*/React.createElement(Icon, {
|
|
27
28
|
name: icon,
|
|
@@ -35,28 +36,6 @@ const AccordionItem = _ref => {
|
|
|
35
36
|
}, label))));
|
|
36
37
|
};
|
|
37
38
|
|
|
38
|
-
const styles = StyleSheet.create({
|
|
39
|
-
container: {
|
|
40
|
-
padding: 8
|
|
41
|
-
},
|
|
42
|
-
row: {
|
|
43
|
-
flexDirection: "row",
|
|
44
|
-
alignItems: "center",
|
|
45
|
-
paddingLeft: 8
|
|
46
|
-
},
|
|
47
|
-
item: {
|
|
48
|
-
marginVertical: 6,
|
|
49
|
-
paddingLeft: 8
|
|
50
|
-
},
|
|
51
|
-
content: {
|
|
52
|
-
flex: 1,
|
|
53
|
-
justifyContent: "center"
|
|
54
|
-
}
|
|
55
|
-
});
|
|
56
|
-
export default withTheme(AccordionItem);xtStyles
|
|
57
|
-
}, label))));
|
|
58
|
-
};
|
|
59
|
-
|
|
60
39
|
const styles = StyleSheet.create({
|
|
61
40
|
container: {
|
|
62
41
|
padding: 8
|
|
@@ -11,10 +11,14 @@ class Text extends React.Component {
|
|
|
11
11
|
super(...arguments);
|
|
12
12
|
|
|
13
13
|
_defineProperty(this, "_root", void 0);
|
|
14
|
+
|
|
15
|
+
_defineProperty(this, "state", {
|
|
16
|
+
nativeProps: {}
|
|
17
|
+
});
|
|
14
18
|
}
|
|
15
19
|
|
|
16
20
|
setNativeProps(args) {
|
|
17
|
-
|
|
21
|
+
this.state.nativeProps = args || {};
|
|
18
22
|
}
|
|
19
23
|
|
|
20
24
|
render() {
|
|
@@ -23,7 +27,7 @@ class Text extends React.Component {
|
|
|
23
27
|
...rest
|
|
24
28
|
} = this.props;
|
|
25
29
|
const writingDirection = I18nManager.isRTL ? "rtl" : "ltr";
|
|
26
|
-
return /*#__PURE__*/React.createElement(NativeText, _extends({}, rest, {
|
|
30
|
+
return /*#__PURE__*/React.createElement(NativeText, _extends({}, rest, this.state.nativeProps, {
|
|
27
31
|
ref: c => {
|
|
28
32
|
this._root = c;
|
|
29
33
|
},
|
|
@@ -16,6 +16,7 @@ class TextField extends React.Component {
|
|
|
16
16
|
super(...arguments);
|
|
17
17
|
|
|
18
18
|
_defineProperty(this, "state", {
|
|
19
|
+
nativeProps: {},
|
|
19
20
|
labeled: new Animated.Value(this.props.value || this.props.error ? 0 : 1),
|
|
20
21
|
focused: false,
|
|
21
22
|
placeholder: this.props.error ? this.props.placeholder : "",
|
|
@@ -146,7 +147,9 @@ class TextField extends React.Component {
|
|
|
146
147
|
* @internal
|
|
147
148
|
*/
|
|
148
149
|
setNativeProps(args) {
|
|
149
|
-
|
|
150
|
+
this.setState(state => ({ ...state,
|
|
151
|
+
nativeState: args || {}
|
|
152
|
+
}));
|
|
150
153
|
}
|
|
151
154
|
|
|
152
155
|
isFocused() {
|
|
@@ -426,6 +429,7 @@ class TextField extends React.Component {
|
|
|
426
429
|
underlineColorAndroid: "transparent",
|
|
427
430
|
style: inputStyles,
|
|
428
431
|
...rest,
|
|
432
|
+
...this.state.nativeProps,
|
|
429
433
|
value: this.state.value
|
|
430
434
|
})), rightIconName ? /*#__PURE__*/React.createElement(Icon, {
|
|
431
435
|
name: rightIconName,
|
|
@@ -1,20 +1,10 @@
|
|
|
1
|
-
import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES
|
|
1
|
+
import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES } from "@draftbit/types";
|
|
2
2
|
export const SEED_DATA = {
|
|
3
3
|
name: "Audio Player",
|
|
4
4
|
tag: "AudioPlayer",
|
|
5
5
|
description: "Given a source URL, plays sounds & audio!",
|
|
6
6
|
category: COMPONENT_TYPES.media,
|
|
7
|
-
|
|
8
|
-
layout: {
|
|
9
|
-
backgroundColor: "#eee",
|
|
10
|
-
paddingLeft: 16,
|
|
11
|
-
paddingRight: 16,
|
|
12
|
-
paddingTop: 8,
|
|
13
|
-
paddingBottom: 8,
|
|
14
|
-
borderRadius: 24,
|
|
15
|
-
flexDirection: "row",
|
|
16
|
-
alignItems: "center"
|
|
17
|
-
},
|
|
7
|
+
layout: {},
|
|
18
8
|
props: {
|
|
19
9
|
source: {
|
|
20
10
|
group: GROUPS.data,
|
|
@@ -25,26 +15,6 @@ export const SEED_DATA = {
|
|
|
25
15
|
defaultValue: "https://static.draftbit.com/audio/intro-to-draftbit-audio.mp3",
|
|
26
16
|
formType: FORM_TYPES.sourceUrl,
|
|
27
17
|
propType: PROP_TYPES.OBJECT
|
|
28
|
-
}
|
|
29
|
-
sliderColor: createColorProp({
|
|
30
|
-
label: "Thumb Color",
|
|
31
|
-
defaultValue: "black"
|
|
32
|
-
}),
|
|
33
|
-
completedTrackColor: createColorProp({
|
|
34
|
-
label: "Completed Track Color",
|
|
35
|
-
defaultValue: "white"
|
|
36
|
-
}),
|
|
37
|
-
remainingTrackColor: createColorProp({
|
|
38
|
-
label: "Remaining Track Color",
|
|
39
|
-
defaultValue: "#333333"
|
|
40
|
-
}),
|
|
41
|
-
trackThumbSize: createNumberProp({
|
|
42
|
-
label: "Thumb Size",
|
|
43
|
-
defaultValue: 24
|
|
44
|
-
}),
|
|
45
|
-
playIconColor: createColorProp({
|
|
46
|
-
label: "Play Icon Color",
|
|
47
|
-
defaultValue: "black"
|
|
48
|
-
})
|
|
18
|
+
}
|
|
49
19
|
}
|
|
50
20
|
};
|
|
@@ -6,7 +6,8 @@ declare type Props = {
|
|
|
6
6
|
} & TextProps;
|
|
7
7
|
declare class Text extends React.Component<Props> {
|
|
8
8
|
_root: any;
|
|
9
|
-
|
|
9
|
+
state: any;
|
|
10
|
+
setNativeProps(args: TextProps): void;
|
|
10
11
|
render(): JSX.Element;
|
|
11
12
|
}
|
|
12
13
|
export declare const BaseLink: ({ style, theme, title, ...props }: any) => JSX.Element;
|
|
@@ -27,6 +27,7 @@ export declare type Props = {
|
|
|
27
27
|
}) => React.ReactNode;
|
|
28
28
|
} & TextInputProps & IconSlot;
|
|
29
29
|
interface State {
|
|
30
|
+
nativeProps: any;
|
|
30
31
|
labeled: Animated.Value;
|
|
31
32
|
focused?: boolean;
|
|
32
33
|
placeholder?: string | undefined;
|
|
@@ -57,7 +58,7 @@ declare class TextField extends React.Component<Props, State> {
|
|
|
57
58
|
/**
|
|
58
59
|
* @internal
|
|
59
60
|
*/
|
|
60
|
-
setNativeProps(args: Props): void
|
|
61
|
+
setNativeProps(args: Props): void;
|
|
61
62
|
isFocused(): boolean | undefined;
|
|
62
63
|
clear(): void | undefined;
|
|
63
64
|
focus(): void | undefined;
|
|
@@ -3,17 +3,7 @@ export declare const SEED_DATA: {
|
|
|
3
3
|
tag: string;
|
|
4
4
|
description: string;
|
|
5
5
|
category: string;
|
|
6
|
-
|
|
7
|
-
layout: {
|
|
8
|
-
backgroundColor: string;
|
|
9
|
-
paddingLeft: number;
|
|
10
|
-
paddingRight: number;
|
|
11
|
-
paddingTop: number;
|
|
12
|
-
paddingBottom: number;
|
|
13
|
-
borderRadius: number;
|
|
14
|
-
flexDirection: string;
|
|
15
|
-
alignItems: string;
|
|
16
|
-
};
|
|
6
|
+
layout: {};
|
|
17
7
|
props: {
|
|
18
8
|
source: {
|
|
19
9
|
group: string;
|
|
@@ -25,56 +15,5 @@ export declare const SEED_DATA: {
|
|
|
25
15
|
formType: string;
|
|
26
16
|
propType: string;
|
|
27
17
|
};
|
|
28
|
-
sliderColor: {
|
|
29
|
-
group: string;
|
|
30
|
-
label: string;
|
|
31
|
-
description: string;
|
|
32
|
-
editable: boolean;
|
|
33
|
-
required: boolean;
|
|
34
|
-
defaultValue: null;
|
|
35
|
-
formType: string;
|
|
36
|
-
propType: string;
|
|
37
|
-
};
|
|
38
|
-
completedTrackColor: {
|
|
39
|
-
group: string;
|
|
40
|
-
label: string;
|
|
41
|
-
description: string;
|
|
42
|
-
editable: boolean;
|
|
43
|
-
required: boolean;
|
|
44
|
-
defaultValue: null;
|
|
45
|
-
formType: string;
|
|
46
|
-
propType: string;
|
|
47
|
-
};
|
|
48
|
-
remainingTrackColor: {
|
|
49
|
-
group: string;
|
|
50
|
-
label: string;
|
|
51
|
-
description: string;
|
|
52
|
-
editable: boolean;
|
|
53
|
-
required: boolean;
|
|
54
|
-
defaultValue: null;
|
|
55
|
-
formType: string;
|
|
56
|
-
propType: string;
|
|
57
|
-
};
|
|
58
|
-
trackThumbSize: {
|
|
59
|
-
label: string;
|
|
60
|
-
description: string;
|
|
61
|
-
formType: string;
|
|
62
|
-
propType: string;
|
|
63
|
-
group: string;
|
|
64
|
-
defaultValue: null;
|
|
65
|
-
editable: boolean;
|
|
66
|
-
required: boolean;
|
|
67
|
-
step: number;
|
|
68
|
-
};
|
|
69
|
-
playIconColor: {
|
|
70
|
-
group: string;
|
|
71
|
-
label: string;
|
|
72
|
-
description: string;
|
|
73
|
-
editable: boolean;
|
|
74
|
-
required: boolean;
|
|
75
|
-
defaultValue: null;
|
|
76
|
-
formType: string;
|
|
77
|
-
propType: string;
|
|
78
|
-
};
|
|
79
18
|
};
|
|
80
19
|
};
|
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-c1367a.2+c1367a9",
|
|
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.4.4-
|
|
44
|
+
"@draftbit/types": "^46.4.4-c1367a.2+c1367a9",
|
|
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",
|
|
@@ -81,5 +81,5 @@
|
|
|
81
81
|
]
|
|
82
82
|
]
|
|
83
83
|
},
|
|
84
|
-
"gitHead": "
|
|
84
|
+
"gitHead": "c1367a942e231a529a36a27e7fefb251a58c4910"
|
|
85
85
|
}
|
package/src/components/Text.js
CHANGED
|
@@ -2,13 +2,19 @@ import * as React from "react";
|
|
|
2
2
|
import { Text as NativeText, I18nManager } from "react-native";
|
|
3
3
|
import { withTheme } from "../theming";
|
|
4
4
|
class Text extends React.Component {
|
|
5
|
+
constructor() {
|
|
6
|
+
super(...arguments);
|
|
7
|
+
this.state = {
|
|
8
|
+
nativeProps: {},
|
|
9
|
+
};
|
|
10
|
+
}
|
|
5
11
|
setNativeProps(args) {
|
|
6
|
-
|
|
12
|
+
this.state.nativeProps = args || {};
|
|
7
13
|
}
|
|
8
14
|
render() {
|
|
9
15
|
const { style, ...rest } = this.props;
|
|
10
16
|
const writingDirection = I18nManager.isRTL ? "rtl" : "ltr";
|
|
11
|
-
return (React.createElement(NativeText, { ...rest, ref: (c) => {
|
|
17
|
+
return (React.createElement(NativeText, { ...rest, ...this.state.nativeProps, ref: (c) => {
|
|
12
18
|
this._root = c;
|
|
13
19
|
}, style: [
|
|
14
20
|
{
|
package/src/components/Text.tsx
CHANGED
|
@@ -10,8 +10,12 @@ type Props = {
|
|
|
10
10
|
class Text extends React.Component<Props> {
|
|
11
11
|
_root: any;
|
|
12
12
|
|
|
13
|
+
state: any = {
|
|
14
|
+
nativeProps: {},
|
|
15
|
+
};
|
|
16
|
+
|
|
13
17
|
setNativeProps(args: TextProps) {
|
|
14
|
-
|
|
18
|
+
this.state.nativeProps = args || {};
|
|
15
19
|
}
|
|
16
20
|
|
|
17
21
|
render() {
|
|
@@ -21,6 +25,7 @@ class Text extends React.Component<Props> {
|
|
|
21
25
|
return (
|
|
22
26
|
<NativeText
|
|
23
27
|
{...rest}
|
|
28
|
+
{...this.state.nativeProps}
|
|
24
29
|
ref={(c) => {
|
|
25
30
|
this._root = c;
|
|
26
31
|
}}
|
|
@@ -10,6 +10,7 @@ class TextField extends React.Component {
|
|
|
10
10
|
constructor() {
|
|
11
11
|
super(...arguments);
|
|
12
12
|
this.state = {
|
|
13
|
+
nativeProps: {},
|
|
13
14
|
labeled: new Animated.Value(this.props.value || this.props.error ? 0 : 1),
|
|
14
15
|
focused: false,
|
|
15
16
|
placeholder: this.props.error ? this.props.placeholder : "",
|
|
@@ -121,7 +122,10 @@ class TextField extends React.Component {
|
|
|
121
122
|
* @internal
|
|
122
123
|
*/
|
|
123
124
|
setNativeProps(args) {
|
|
124
|
-
|
|
125
|
+
this.setState((state) => ({
|
|
126
|
+
...state,
|
|
127
|
+
nativeState: args || {},
|
|
128
|
+
}));
|
|
125
129
|
}
|
|
126
130
|
isFocused() {
|
|
127
131
|
return this._root && this._root.isFocused();
|
|
@@ -381,6 +385,7 @@ class TextField extends React.Component {
|
|
|
381
385
|
underlineColorAndroid: "transparent",
|
|
382
386
|
style: inputStyles,
|
|
383
387
|
...rest,
|
|
388
|
+
...this.state.nativeProps,
|
|
384
389
|
value: this.state.value,
|
|
385
390
|
})),
|
|
386
391
|
rightIconName ? (React.createElement(Icon, { name: rightIconName, size: ICON_SIZE, color: colors.light, style: {
|
|
@@ -52,6 +52,7 @@ export type Props = {
|
|
|
52
52
|
IconSlot;
|
|
53
53
|
|
|
54
54
|
interface State {
|
|
55
|
+
nativeProps: any;
|
|
55
56
|
labeled: Animated.Value;
|
|
56
57
|
focused?: boolean;
|
|
57
58
|
placeholder?: string | undefined;
|
|
@@ -73,6 +74,7 @@ class TextField extends React.Component<Props, State> {
|
|
|
73
74
|
}
|
|
74
75
|
|
|
75
76
|
state: State = {
|
|
77
|
+
nativeProps: {},
|
|
76
78
|
labeled: new Animated.Value(this.props.value || this.props.error ? 0 : 1),
|
|
77
79
|
focused: false,
|
|
78
80
|
placeholder: this.props.error ? this.props.placeholder : "",
|
|
@@ -207,7 +209,10 @@ class TextField extends React.Component<Props, State> {
|
|
|
207
209
|
* @internal
|
|
208
210
|
*/
|
|
209
211
|
setNativeProps(args: Props) {
|
|
210
|
-
|
|
212
|
+
this.setState((state) => ({
|
|
213
|
+
...state,
|
|
214
|
+
nativeState: args || {},
|
|
215
|
+
}));
|
|
211
216
|
}
|
|
212
217
|
|
|
213
218
|
isFocused() {
|
|
@@ -566,6 +571,7 @@ class TextField extends React.Component<Props, State> {
|
|
|
566
571
|
underlineColorAndroid: "transparent",
|
|
567
572
|
style: inputStyles,
|
|
568
573
|
...rest,
|
|
574
|
+
...this.state.nativeProps,
|
|
569
575
|
value: this.state.value,
|
|
570
576
|
})}
|
|
571
577
|
</View>
|
|
@@ -1,27 +1,10 @@
|
|
|
1
|
-
import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES,
|
|
1
|
+
import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, } from "@draftbit/types";
|
|
2
2
|
export const SEED_DATA = {
|
|
3
3
|
name: "Audio Player",
|
|
4
4
|
tag: "AudioPlayer",
|
|
5
5
|
description: "Given a source URL, plays sounds & audio!",
|
|
6
6
|
category: COMPONENT_TYPES.media,
|
|
7
|
-
|
|
8
|
-
StylesPanelSections.Typography,
|
|
9
|
-
StylesPanelSections.Background,
|
|
10
|
-
StylesPanelSections.Borders,
|
|
11
|
-
StylesPanelSections.Size,
|
|
12
|
-
StylesPanelSections.MarginsAndPaddings,
|
|
13
|
-
StylesPanelSections.Position,
|
|
14
|
-
],
|
|
15
|
-
layout: {
|
|
16
|
-
backgroundColor: "#eee",
|
|
17
|
-
paddingLeft: 16,
|
|
18
|
-
paddingRight: 16,
|
|
19
|
-
paddingTop: 8,
|
|
20
|
-
paddingBottom: 8,
|
|
21
|
-
borderRadius: 24,
|
|
22
|
-
flexDirection: "row",
|
|
23
|
-
alignItems: "center",
|
|
24
|
-
},
|
|
7
|
+
layout: {},
|
|
25
8
|
props: {
|
|
26
9
|
source: {
|
|
27
10
|
group: GROUPS.data,
|
|
@@ -33,25 +16,5 @@ export const SEED_DATA = {
|
|
|
33
16
|
formType: FORM_TYPES.sourceUrl,
|
|
34
17
|
propType: PROP_TYPES.OBJECT,
|
|
35
18
|
},
|
|
36
|
-
sliderColor: createColorProp({
|
|
37
|
-
label: "Thumb Color",
|
|
38
|
-
defaultValue: "black",
|
|
39
|
-
}),
|
|
40
|
-
completedTrackColor: createColorProp({
|
|
41
|
-
label: "Completed Track Color",
|
|
42
|
-
defaultValue: "white",
|
|
43
|
-
}),
|
|
44
|
-
remainingTrackColor: createColorProp({
|
|
45
|
-
label: "Remaining Track Color",
|
|
46
|
-
defaultValue: "#333333",
|
|
47
|
-
}),
|
|
48
|
-
trackThumbSize: createNumberProp({
|
|
49
|
-
label: "Thumb Size",
|
|
50
|
-
defaultValue: 24,
|
|
51
|
-
}),
|
|
52
|
-
playIconColor: createColorProp({
|
|
53
|
-
label: "Play Icon Color",
|
|
54
|
-
defaultValue: "black",
|
|
55
|
-
}),
|
|
56
19
|
},
|
|
57
20
|
};
|
|
@@ -3,9 +3,6 @@ import {
|
|
|
3
3
|
COMPONENT_TYPES,
|
|
4
4
|
FORM_TYPES,
|
|
5
5
|
PROP_TYPES,
|
|
6
|
-
StylesPanelSections,
|
|
7
|
-
createColorProp,
|
|
8
|
-
createNumberProp,
|
|
9
6
|
} from "@draftbit/types";
|
|
10
7
|
|
|
11
8
|
export const SEED_DATA = {
|
|
@@ -13,24 +10,7 @@ export const SEED_DATA = {
|
|
|
13
10
|
tag: "AudioPlayer",
|
|
14
11
|
description: "Given a source URL, plays sounds & audio!",
|
|
15
12
|
category: COMPONENT_TYPES.media,
|
|
16
|
-
|
|
17
|
-
StylesPanelSections.Typography,
|
|
18
|
-
StylesPanelSections.Background,
|
|
19
|
-
StylesPanelSections.Borders,
|
|
20
|
-
StylesPanelSections.Size,
|
|
21
|
-
StylesPanelSections.MarginsAndPaddings,
|
|
22
|
-
StylesPanelSections.Position,
|
|
23
|
-
],
|
|
24
|
-
layout: {
|
|
25
|
-
backgroundColor: "#eee",
|
|
26
|
-
paddingLeft: 16,
|
|
27
|
-
paddingRight: 16,
|
|
28
|
-
paddingTop: 8,
|
|
29
|
-
paddingBottom: 8,
|
|
30
|
-
borderRadius: 24,
|
|
31
|
-
flexDirection: "row",
|
|
32
|
-
alignItems: "center",
|
|
33
|
-
},
|
|
13
|
+
layout: {},
|
|
34
14
|
props: {
|
|
35
15
|
source: {
|
|
36
16
|
group: GROUPS.data,
|
|
@@ -43,25 +23,5 @@ export const SEED_DATA = {
|
|
|
43
23
|
formType: FORM_TYPES.sourceUrl,
|
|
44
24
|
propType: PROP_TYPES.OBJECT,
|
|
45
25
|
},
|
|
46
|
-
sliderColor: createColorProp({
|
|
47
|
-
label: "Thumb Color",
|
|
48
|
-
defaultValue: "black",
|
|
49
|
-
}),
|
|
50
|
-
completedTrackColor: createColorProp({
|
|
51
|
-
label: "Completed Track Color",
|
|
52
|
-
defaultValue: "white",
|
|
53
|
-
}),
|
|
54
|
-
remainingTrackColor: createColorProp({
|
|
55
|
-
label: "Remaining Track Color",
|
|
56
|
-
defaultValue: "#333333",
|
|
57
|
-
}),
|
|
58
|
-
trackThumbSize: createNumberProp({
|
|
59
|
-
label: "Thumb Size",
|
|
60
|
-
defaultValue: 24,
|
|
61
|
-
}),
|
|
62
|
-
playIconColor: createColorProp({
|
|
63
|
-
label: "Play Icon Color",
|
|
64
|
-
defaultValue: "black",
|
|
65
|
-
}),
|
|
66
26
|
},
|
|
67
27
|
};
|