@draftbit/core 46.4.4-41266b.2 → 46.4.4-520686.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/Picker/Picker.js +5 -5
- package/lib/commonjs/components/Stepper.js +8 -3
- package/lib/commonjs/components/Swiper/Swiper.js +0 -2
- package/lib/commonjs/components/Text.js +6 -2
- package/lib/commonjs/components/TextField.js +5 -1
- package/lib/commonjs/mappings/HtmlElements.js +125 -0
- package/lib/commonjs/mappings/Stepper.js +1 -1
- package/lib/commonjs/mappings/Swiper.js +0 -1
- package/lib/commonjs/mappings/TextField.js +1 -1
- package/lib/commonjs/mappings/TextInput.js +1 -1
- package/lib/module/components/Picker/Picker.js +2 -2
- package/lib/module/components/Stepper.js +7 -3
- package/lib/module/components/Swiper/Swiper.js +0 -2
- package/lib/module/components/Text.js +6 -2
- package/lib/module/components/TextField.js +5 -1
- package/lib/module/mappings/HtmlElements.js +116 -0
- package/lib/module/mappings/Stepper.js +2 -2
- package/lib/module/mappings/Swiper.js +1 -2
- package/lib/module/mappings/TextField.js +1 -1
- package/lib/module/mappings/TextInput.js +1 -1
- package/lib/typescript/src/components/Stepper.d.ts +1 -2
- package/lib/typescript/src/components/Swiper/Swiper.d.ts +1 -2
- 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/HtmlElements.d.ts +49 -0
- package/lib/typescript/src/mappings/Swiper.d.ts +0 -1
- package/lib/typescript/src/mappings/TextField.d.ts +2 -2
- package/lib/typescript/src/mappings/TextInput.d.ts +1 -1
- package/package.json +4 -3
- package/src/components/Picker/Picker.js +1 -1
- package/src/components/Picker/Picker.tsx +2 -2
- package/src/components/Stepper.js +5 -3
- package/src/components/Stepper.tsx +5 -5
- package/src/components/Swiper/Swiper.js +2 -2
- package/src/components/Swiper/Swiper.tsx +0 -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/HtmlElements.js +141 -0
- package/src/mappings/HtmlElements.ts +151 -0
- package/src/mappings/Stepper.js +5 -2
- package/src/mappings/Stepper.ts +5 -1
- package/src/mappings/Swiper.js +1 -2
- package/src/mappings/Swiper.ts +0 -2
- package/src/mappings/TextField.js +1 -1
- package/src/mappings/TextField.ts +1 -1
- package/src/mappings/TextInput.js +1 -1
- package/src/mappings/TextInput.ts +1 -1
|
@@ -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;
|
|
@@ -284,10 +284,6 @@ const Picker = _ref => {
|
|
|
284
284
|
);
|
|
285
285
|
};
|
|
286
286
|
|
|
287
|
-
var _default = (0, _theming.withTheme)(Picker);
|
|
288
|
-
|
|
289
|
-
exports.default = _default;
|
|
290
|
-
|
|
291
287
|
const styles = _reactNative.StyleSheet.create({
|
|
292
288
|
marginsContainer: {
|
|
293
289
|
alignSelf: "stretch",
|
|
@@ -357,4 +353,8 @@ const styles = _reactNative.StyleSheet.create({
|
|
|
357
353
|
maxWidth: deviceWidth,
|
|
358
354
|
maxHeight: deviceHeight
|
|
359
355
|
}
|
|
360
|
-
});
|
|
356
|
+
});
|
|
357
|
+
|
|
358
|
+
var _default = (0, _theming.withTheme)(Picker);
|
|
359
|
+
|
|
360
|
+
exports.default = _default;
|
|
@@ -15,6 +15,8 @@ var _theming = require("../theming");
|
|
|
15
15
|
|
|
16
16
|
var _IconButton = _interopRequireDefault(require("./IconButton"));
|
|
17
17
|
|
|
18
|
+
var _utilities = require("../utilities");
|
|
19
|
+
|
|
18
20
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
21
|
|
|
20
22
|
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); }
|
|
@@ -28,7 +30,6 @@ const Stepper = _ref => {
|
|
|
28
30
|
value: valueProp,
|
|
29
31
|
defaultValue,
|
|
30
32
|
style,
|
|
31
|
-
typeStyle,
|
|
32
33
|
iconSize = 24,
|
|
33
34
|
iconColor,
|
|
34
35
|
onChange,
|
|
@@ -38,6 +39,10 @@ const Stepper = _ref => {
|
|
|
38
39
|
},
|
|
39
40
|
Icon
|
|
40
41
|
} = _ref;
|
|
42
|
+
const {
|
|
43
|
+
viewStyles,
|
|
44
|
+
textStyles
|
|
45
|
+
} = (0, _utilities.extractStyles)(style);
|
|
41
46
|
const [value, setValue] = (0, _react.useState)(defaultValue !== null && defaultValue !== void 0 ? defaultValue : 0);
|
|
42
47
|
|
|
43
48
|
const isValidValue = valueArg => valueArg >= min && valueArg <= max;
|
|
@@ -60,7 +65,7 @@ const Stepper = _ref => {
|
|
|
60
65
|
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
61
66
|
style: [{
|
|
62
67
|
flexDirection: "row"
|
|
63
|
-
},
|
|
68
|
+
}, viewStyles]
|
|
64
69
|
}, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
|
|
65
70
|
Icon: Icon,
|
|
66
71
|
icon: "MaterialIcons/remove",
|
|
@@ -77,7 +82,7 @@ const Stepper = _ref => {
|
|
|
77
82
|
alignSelf: "center",
|
|
78
83
|
color: colors.medium,
|
|
79
84
|
marginHorizontal: 8
|
|
80
|
-
},
|
|
85
|
+
}, textStyles]
|
|
81
86
|
}, value), /*#__PURE__*/_react.default.createElement(_IconButton.default, {
|
|
82
87
|
Icon: Icon,
|
|
83
88
|
icon: "MaterialIcons/add",
|
|
@@ -30,7 +30,6 @@ const Swiper = _ref => {
|
|
|
30
30
|
keyExtractor,
|
|
31
31
|
renderItem,
|
|
32
32
|
children,
|
|
33
|
-
onIndexChanged,
|
|
34
33
|
style
|
|
35
34
|
} = _ref;
|
|
36
35
|
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
@@ -40,7 +39,6 @@ const Swiper = _ref => {
|
|
|
40
39
|
loop: loop,
|
|
41
40
|
timeout: timeout,
|
|
42
41
|
vertical: vertical,
|
|
43
|
-
onIndexChanged: onIndexChanged,
|
|
44
42
|
controlsProps: {
|
|
45
43
|
prevTitle,
|
|
46
44
|
nextTitle,
|
|
@@ -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,
|
|
@@ -0,0 +1,125 @@
|
|
|
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.StylesPanelSections.Typography, _types.StylesPanelSections.LayoutSelectedItem, _types.StylesPanelSections.MarginsAndPaddings, _types.StylesPanelSections.Effects],
|
|
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: "BlockQuote",
|
|
106
|
+
tag: "BlockQuote",
|
|
107
|
+
...ELEMENT_PROPS
|
|
108
|
+
}, {
|
|
109
|
+
name: "Time",
|
|
110
|
+
tag: "Time",
|
|
111
|
+
...ELEMENT_PROPS
|
|
112
|
+
}, {
|
|
113
|
+
name: "UL",
|
|
114
|
+
tag: "UL",
|
|
115
|
+
...ELEMENT_PROPS
|
|
116
|
+
}, {
|
|
117
|
+
name: "LI",
|
|
118
|
+
tag: "LI",
|
|
119
|
+
...ELEMENT_PROPS
|
|
120
|
+
}, {
|
|
121
|
+
name: "HR",
|
|
122
|
+
tag: "HR",
|
|
123
|
+
...ELEMENT_PROPS
|
|
124
|
+
}];
|
|
125
|
+
exports.SEED_DATA = SEED_DATA;
|
|
@@ -12,7 +12,7 @@ const SEED_DATA = [{
|
|
|
12
12
|
tag: "Stepper",
|
|
13
13
|
description: "A component used to control the quantity of something",
|
|
14
14
|
category: _types.COMPONENT_TYPES.control,
|
|
15
|
-
stylesPanelSections: _types.BLOCK_STYLES_SECTIONS,
|
|
15
|
+
stylesPanelSections: [_types.StylesPanelSections.Typography, ..._types.BLOCK_STYLES_SECTIONS],
|
|
16
16
|
layout: {},
|
|
17
17
|
triggers: [_types.Triggers.OnChange],
|
|
18
18
|
props: {
|
|
@@ -24,7 +24,7 @@ const SEED_DATA_PROPS = {
|
|
|
24
24
|
description: "Can automatically capitalize sentences, words, and characters (Default: none).",
|
|
25
25
|
editable: true,
|
|
26
26
|
required: false,
|
|
27
|
-
defaultValue:
|
|
27
|
+
defaultValue: "none",
|
|
28
28
|
options: ["none", "sentences", "words", "characters"],
|
|
29
29
|
formType: _types.FORM_TYPES.flatArray,
|
|
30
30
|
propType: _types.PROP_TYPES.STRING
|
|
@@ -103,7 +103,7 @@ const SEED_DATA = [{
|
|
|
103
103
|
description: "Can automatically capitalize sentences, words, and characters (Default: none).",
|
|
104
104
|
editable: true,
|
|
105
105
|
required: false,
|
|
106
|
-
defaultValue:
|
|
106
|
+
defaultValue: "none",
|
|
107
107
|
options: ["none", "sentences", "words", "characters"],
|
|
108
108
|
formType: _types.FORM_TYPES.flatArray,
|
|
109
109
|
propType: _types.PROP_TYPES.STRING
|
|
@@ -261,7 +261,6 @@ const Picker = _ref => {
|
|
|
261
261
|
);
|
|
262
262
|
};
|
|
263
263
|
|
|
264
|
-
export default withTheme(Picker);
|
|
265
264
|
const styles = StyleSheet.create({
|
|
266
265
|
marginsContainer: {
|
|
267
266
|
alignSelf: "stretch",
|
|
@@ -331,4 +330,5 @@ const styles = StyleSheet.create({
|
|
|
331
330
|
maxWidth: deviceWidth,
|
|
332
331
|
maxHeight: deviceHeight
|
|
333
332
|
}
|
|
334
|
-
});
|
|
333
|
+
});
|
|
334
|
+
export default withTheme(Picker);
|
|
@@ -3,6 +3,7 @@ import { View, Text } from "react-native";
|
|
|
3
3
|
import { isNumber } from "lodash";
|
|
4
4
|
import { withTheme } from "../theming";
|
|
5
5
|
import IconButton from "./IconButton";
|
|
6
|
+
import { extractStyles } from "../utilities";
|
|
6
7
|
|
|
7
8
|
const Stepper = _ref => {
|
|
8
9
|
let {
|
|
@@ -11,7 +12,6 @@ const Stepper = _ref => {
|
|
|
11
12
|
value: valueProp,
|
|
12
13
|
defaultValue,
|
|
13
14
|
style,
|
|
14
|
-
typeStyle,
|
|
15
15
|
iconSize = 24,
|
|
16
16
|
iconColor,
|
|
17
17
|
onChange,
|
|
@@ -21,6 +21,10 @@ const Stepper = _ref => {
|
|
|
21
21
|
},
|
|
22
22
|
Icon
|
|
23
23
|
} = _ref;
|
|
24
|
+
const {
|
|
25
|
+
viewStyles,
|
|
26
|
+
textStyles
|
|
27
|
+
} = extractStyles(style);
|
|
24
28
|
const [value, setValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : 0);
|
|
25
29
|
|
|
26
30
|
const isValidValue = valueArg => valueArg >= min && valueArg <= max;
|
|
@@ -43,7 +47,7 @@ const Stepper = _ref => {
|
|
|
43
47
|
return /*#__PURE__*/React.createElement(View, {
|
|
44
48
|
style: [{
|
|
45
49
|
flexDirection: "row"
|
|
46
|
-
},
|
|
50
|
+
}, viewStyles]
|
|
47
51
|
}, /*#__PURE__*/React.createElement(IconButton, {
|
|
48
52
|
Icon: Icon,
|
|
49
53
|
icon: "MaterialIcons/remove",
|
|
@@ -60,7 +64,7 @@ const Stepper = _ref => {
|
|
|
60
64
|
alignSelf: "center",
|
|
61
65
|
color: colors.medium,
|
|
62
66
|
marginHorizontal: 8
|
|
63
|
-
},
|
|
67
|
+
}, textStyles]
|
|
64
68
|
}, value), /*#__PURE__*/React.createElement(IconButton, {
|
|
65
69
|
Icon: Icon,
|
|
66
70
|
icon: "MaterialIcons/add",
|
|
@@ -19,7 +19,6 @@ const Swiper = _ref => {
|
|
|
19
19
|
keyExtractor,
|
|
20
20
|
renderItem,
|
|
21
21
|
children,
|
|
22
|
-
onIndexChanged,
|
|
23
22
|
style
|
|
24
23
|
} = _ref;
|
|
25
24
|
return /*#__PURE__*/React.createElement(View, {
|
|
@@ -29,7 +28,6 @@ const Swiper = _ref => {
|
|
|
29
28
|
loop: loop,
|
|
30
29
|
timeout: timeout,
|
|
31
30
|
vertical: vertical,
|
|
32
|
-
onIndexChanged: onIndexChanged,
|
|
33
31
|
controlsProps: {
|
|
34
32
|
prevTitle,
|
|
35
33
|
nextTitle,
|
|
@@ -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,
|
|
@@ -0,0 +1,116 @@
|
|
|
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: [StylesPanelSections.Typography, StylesPanelSections.LayoutSelectedItem, StylesPanelSections.MarginsAndPaddings, StylesPanelSections.Effects],
|
|
8
|
+
layout: {
|
|
9
|
+
margin: 0
|
|
10
|
+
},
|
|
11
|
+
triggers: SEED_DATA_TRIGGERS
|
|
12
|
+
};
|
|
13
|
+
const HEADING_PROPS = { ...ELEMENT_PROPS
|
|
14
|
+
};
|
|
15
|
+
export const SEED_DATA = [{
|
|
16
|
+
name: "H1",
|
|
17
|
+
tag: "H1",
|
|
18
|
+
...HEADING_PROPS
|
|
19
|
+
}, {
|
|
20
|
+
name: "H2",
|
|
21
|
+
tag: "H2",
|
|
22
|
+
...HEADING_PROPS
|
|
23
|
+
}, {
|
|
24
|
+
name: "H3",
|
|
25
|
+
tag: "H3",
|
|
26
|
+
...HEADING_PROPS
|
|
27
|
+
}, {
|
|
28
|
+
name: "H4",
|
|
29
|
+
tag: "H4",
|
|
30
|
+
...HEADING_PROPS
|
|
31
|
+
}, {
|
|
32
|
+
name: "H5",
|
|
33
|
+
tag: "H5",
|
|
34
|
+
...HEADING_PROPS
|
|
35
|
+
}, {
|
|
36
|
+
name: "H6",
|
|
37
|
+
tag: "H6",
|
|
38
|
+
...HEADING_PROPS
|
|
39
|
+
}, {
|
|
40
|
+
name: "Anchor",
|
|
41
|
+
tag: "A",
|
|
42
|
+
...ELEMENT_PROPS,
|
|
43
|
+
props: {
|
|
44
|
+
href: createTextProp({
|
|
45
|
+
label: "href",
|
|
46
|
+
description: "Specify the URL",
|
|
47
|
+
defaultValue: ""
|
|
48
|
+
}),
|
|
49
|
+
target: {
|
|
50
|
+
group: GROUPS.basic,
|
|
51
|
+
label: "target",
|
|
52
|
+
description: "decide where link should open",
|
|
53
|
+
formType: FORM_TYPES.flatArray,
|
|
54
|
+
defaultValue: "_blank",
|
|
55
|
+
options: ["_blank", "_self", "_parent", "_top"]
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
}, {
|
|
59
|
+
name: "Paragraph",
|
|
60
|
+
tag: "P",
|
|
61
|
+
...ELEMENT_PROPS,
|
|
62
|
+
props: {// NOTE - Keeping the props commented until we figure out a way to use this props from draftbit side.
|
|
63
|
+
// strong: createBoolProp({
|
|
64
|
+
// label: "Strong",
|
|
65
|
+
// description: "Strong",
|
|
66
|
+
// }),
|
|
67
|
+
// strike: createBoolProp({
|
|
68
|
+
// label: "Strike",
|
|
69
|
+
// description: "Strike through",
|
|
70
|
+
// }),
|
|
71
|
+
// italic: createBoolProp({
|
|
72
|
+
// label: "Italic",
|
|
73
|
+
// description: "Italic Fonts",
|
|
74
|
+
// }),
|
|
75
|
+
// bold: createBoolProp({
|
|
76
|
+
// label: "Bold",
|
|
77
|
+
// description: "Bold",
|
|
78
|
+
// }),
|
|
79
|
+
}
|
|
80
|
+
}, {
|
|
81
|
+
name: "Code",
|
|
82
|
+
tag: "Code",
|
|
83
|
+
...ELEMENT_PROPS
|
|
84
|
+
}, {
|
|
85
|
+
name: "Pre",
|
|
86
|
+
tag: "Pre",
|
|
87
|
+
...ELEMENT_PROPS
|
|
88
|
+
}, {
|
|
89
|
+
name: "Mark",
|
|
90
|
+
tag: "Mark",
|
|
91
|
+
...ELEMENT_PROPS
|
|
92
|
+
}, {
|
|
93
|
+
name: "BR",
|
|
94
|
+
tag: "BR",
|
|
95
|
+
...ELEMENT_PROPS
|
|
96
|
+
}, {
|
|
97
|
+
name: "BlockQuote",
|
|
98
|
+
tag: "BlockQuote",
|
|
99
|
+
...ELEMENT_PROPS
|
|
100
|
+
}, {
|
|
101
|
+
name: "Time",
|
|
102
|
+
tag: "Time",
|
|
103
|
+
...ELEMENT_PROPS
|
|
104
|
+
}, {
|
|
105
|
+
name: "UL",
|
|
106
|
+
tag: "UL",
|
|
107
|
+
...ELEMENT_PROPS
|
|
108
|
+
}, {
|
|
109
|
+
name: "LI",
|
|
110
|
+
tag: "LI",
|
|
111
|
+
...ELEMENT_PROPS
|
|
112
|
+
}, {
|
|
113
|
+
name: "HR",
|
|
114
|
+
tag: "HR",
|
|
115
|
+
...ELEMENT_PROPS
|
|
116
|
+
}];
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { COMPONENT_TYPES, createIconSizeProp, createColorProp, createFieldNameProp, createStaticNumberProp, Triggers, BLOCK_STYLES_SECTIONS } from "@draftbit/types";
|
|
1
|
+
import { COMPONENT_TYPES, createIconSizeProp, createColorProp, createFieldNameProp, createStaticNumberProp, Triggers, BLOCK_STYLES_SECTIONS, StylesPanelSections } from "@draftbit/types";
|
|
2
2
|
export const SEED_DATA = [{
|
|
3
3
|
name: "Stepper",
|
|
4
4
|
tag: "Stepper",
|
|
5
5
|
description: "A component used to control the quantity of something",
|
|
6
6
|
category: COMPONENT_TYPES.control,
|
|
7
|
-
stylesPanelSections: BLOCK_STYLES_SECTIONS,
|
|
7
|
+
stylesPanelSections: [StylesPanelSections.Typography, ...BLOCK_STYLES_SECTIONS],
|
|
8
8
|
layout: {},
|
|
9
9
|
triggers: [Triggers.OnChange],
|
|
10
10
|
props: {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { COMPONENT_TYPES, createBoolProp, createNumberProp, createTextProp, createColorProp, GROUPS
|
|
1
|
+
import { COMPONENT_TYPES, createBoolProp, createNumberProp, createTextProp, createColorProp, GROUPS } from "@draftbit/types";
|
|
2
2
|
export const SEED_DATA = {
|
|
3
3
|
name: "Swiper",
|
|
4
4
|
tag: "Swiper",
|
|
@@ -8,7 +8,6 @@ export const SEED_DATA = {
|
|
|
8
8
|
height: 300,
|
|
9
9
|
width: "100%"
|
|
10
10
|
},
|
|
11
|
-
triggers: [Triggers.OnIndexChanged],
|
|
12
11
|
props: {
|
|
13
12
|
from: createNumberProp({
|
|
14
13
|
group: GROUPS.basic,
|
|
@@ -16,7 +16,7 @@ const SEED_DATA_PROPS = {
|
|
|
16
16
|
description: "Can automatically capitalize sentences, words, and characters (Default: none).",
|
|
17
17
|
editable: true,
|
|
18
18
|
required: false,
|
|
19
|
-
defaultValue:
|
|
19
|
+
defaultValue: "none",
|
|
20
20
|
options: ["none", "sentences", "words", "characters"],
|
|
21
21
|
formType: FORM_TYPES.flatArray,
|
|
22
22
|
propType: PROP_TYPES.STRING
|
|
@@ -94,7 +94,7 @@ export const SEED_DATA = [{
|
|
|
94
94
|
description: "Can automatically capitalize sentences, words, and characters (Default: none).",
|
|
95
95
|
editable: true,
|
|
96
96
|
required: false,
|
|
97
|
-
defaultValue:
|
|
97
|
+
defaultValue: "none",
|
|
98
98
|
options: ["none", "sentences", "words", "characters"],
|
|
99
99
|
formType: FORM_TYPES.flatArray,
|
|
100
100
|
propType: PROP_TYPES.STRING
|
|
@@ -7,8 +7,7 @@ declare type Props = {
|
|
|
7
7
|
max: number;
|
|
8
8
|
value?: number;
|
|
9
9
|
defaultValue?: number;
|
|
10
|
-
style?: StyleProp<ViewStyle>;
|
|
11
|
-
typeStyle?: StyleProp<TextStyle>;
|
|
10
|
+
style?: StyleProp<ViewStyle | TextStyle>;
|
|
12
11
|
iconSize: number;
|
|
13
12
|
iconColor?: string;
|
|
14
13
|
onChange?: (value: number) => void;
|
|
@@ -20,7 +20,6 @@ export interface SwiperProps<T> {
|
|
|
20
20
|
index: number;
|
|
21
21
|
}) => JSX.Element;
|
|
22
22
|
style?: StyleProp<ViewStyle>;
|
|
23
|
-
onIndexChanged?: (index: number) => void;
|
|
24
23
|
}
|
|
25
|
-
declare const Swiper: ({ vertical, loop, timeout, from, prevTitle, nextTitle, prevTitleColor, nextTitleColor, dotsTouchable, dotColor, dotActiveColor, data, keyExtractor, renderItem, children,
|
|
24
|
+
declare const Swiper: ({ vertical, loop, timeout, from, prevTitle, nextTitle, prevTitleColor, nextTitleColor, dotsTouchable, dotColor, dotActiveColor, data, keyExtractor, renderItem, children, style, }: SwiperProps<any>) => JSX.Element;
|
|
26
25
|
export default Swiper;
|
|
@@ -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;
|