@draftbit/core 46.2.4-99ac4e.1 → 46.2.4-a3e5f4.10
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/Config.js +1 -0
- package/lib/commonjs/components/DeprecatedButton.js +4 -22
- package/lib/commonjs/components/Markdown.js +33 -0
- package/lib/commonjs/components/Picker/PickerComponent.android.js +24 -5
- package/lib/commonjs/components/SVG.js +48 -0
- package/lib/commonjs/components/ScreenContainer.js +23 -5
- package/lib/commonjs/components/Slider.js +24 -5
- package/lib/commonjs/components/StepIndicator.js +34 -16
- package/lib/commonjs/components/Surface.js +14 -3
- package/lib/commonjs/components/Switch.js +23 -10
- package/lib/commonjs/components/Text.js +37 -11
- package/lib/commonjs/components/ToggleButton.js +18 -3
- package/lib/commonjs/components/Touchable.js +16 -2
- package/lib/commonjs/index.js +16 -0
- package/lib/commonjs/mappings/Image.js +2 -2
- package/lib/commonjs/mappings/MapView.js +1 -0
- package/lib/commonjs/mappings/Markdown.js +23 -0
- package/lib/commonjs/mappings/SVG.js +24 -0
- package/lib/module/components/CircularProgress.js +15 -7
- package/lib/module/components/Config.js +1 -0
- package/lib/module/components/FormRow.js +17 -3
- package/lib/module/components/Markdown.js +18 -0
- package/lib/module/components/Picker/PickerComponent.android.js +23 -5
- package/lib/module/components/ProgressBar.js +23 -7
- package/lib/module/components/SVG.js +31 -0
- package/lib/module/components/StepIndicator.js +33 -16
- package/lib/module/constants.js +1 -0
- package/lib/module/index.js +3 -1
- package/lib/module/mappings/Image.js +2 -2
- package/lib/module/mappings/MapView.js +1 -0
- package/lib/module/mappings/Markdown.js +14 -0
- package/lib/module/mappings/SVG.js +15 -0
- package/lib/typescript/src/components/Config.d.ts +1 -0
- package/lib/typescript/src/components/Markdown.d.ts +6 -0
- package/lib/typescript/src/components/SVG.d.ts +8 -0
- package/lib/typescript/src/index.d.ts +2 -0
- package/lib/typescript/src/mappings/MapView.d.ts +1 -0
- package/lib/typescript/src/mappings/Markdown.d.ts +9 -0
- package/lib/typescript/src/mappings/SVG.d.ts +23 -0
- package/package.json +6 -3
- package/src/components/Config.js +1 -0
- package/src/components/Config.ts +1 -0
- package/src/components/Markdown.js +12 -0
- package/src/components/Markdown.tsx +25 -0
- package/src/components/SVG.js +13 -0
- package/src/components/SVG.tsx +35 -0
- package/src/index.js +2 -0
- package/src/index.tsx +2 -0
- package/src/mappings/Image.js +2 -2
- package/src/mappings/Image.ts +2 -2
- package/src/mappings/MapView.js +1 -0
- package/src/mappings/MapView.ts +1 -0
- package/src/mappings/Markdown.js +14 -0
- package/src/mappings/Markdown.ts +15 -0
- package/src/mappings/SVG.js +20 -0
- package/src/mappings/SVG.ts +25 -0
|
@@ -11,8 +11,6 @@ var _reactNative = require("react-native");
|
|
|
11
11
|
|
|
12
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
13
|
|
|
14
|
-
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
14
|
function Touchable(_ref) {
|
|
17
15
|
let {
|
|
18
16
|
children,
|
|
@@ -21,6 +19,22 @@ function Touchable(_ref) {
|
|
|
21
19
|
style,
|
|
22
20
|
...props
|
|
23
21
|
} = _ref;
|
|
22
|
+
return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
|
|
23
|
+
onPress: onPress,
|
|
24
|
+
disabled: disabled,
|
|
25
|
+
hitSlop: 8,
|
|
26
|
+
style: _ref2 => {
|
|
27
|
+
let {
|
|
28
|
+
pressed
|
|
29
|
+
} = _ref2;
|
|
30
|
+
return [{
|
|
31
|
+
opacity: pressed || disabled ? 0.75 : 1
|
|
32
|
+
}, style];
|
|
33
|
+
},
|
|
34
|
+
...props
|
|
35
|
+
}, children);
|
|
36
|
+
}rops
|
|
37
|
+
} = _ref;
|
|
24
38
|
return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, _extends({
|
|
25
39
|
onPress: onPress,
|
|
26
40
|
disabled: disabled,
|
package/lib/commonjs/index.js
CHANGED
|
@@ -213,6 +213,12 @@ Object.defineProperty(exports, "Link", {
|
|
|
213
213
|
return _Text.Link;
|
|
214
214
|
}
|
|
215
215
|
});
|
|
216
|
+
Object.defineProperty(exports, "Markdown", {
|
|
217
|
+
enumerable: true,
|
|
218
|
+
get: function () {
|
|
219
|
+
return _Markdown.default;
|
|
220
|
+
}
|
|
221
|
+
});
|
|
216
222
|
Object.defineProperty(exports, "NumberInput", {
|
|
217
223
|
enumerable: true,
|
|
218
224
|
get: function () {
|
|
@@ -291,6 +297,12 @@ Object.defineProperty(exports, "RowHeadlineImageIcon", {
|
|
|
291
297
|
return _RowHeadlineImageIcon.default;
|
|
292
298
|
}
|
|
293
299
|
});
|
|
300
|
+
Object.defineProperty(exports, "SVG", {
|
|
301
|
+
enumerable: true,
|
|
302
|
+
get: function () {
|
|
303
|
+
return _SVG.default;
|
|
304
|
+
}
|
|
305
|
+
});
|
|
294
306
|
Object.defineProperty(exports, "ScreenContainer", {
|
|
295
307
|
enumerable: true,
|
|
296
308
|
get: function () {
|
|
@@ -442,6 +454,8 @@ var _IconButton = _interopRequireDefault(require("./components/IconButton"));
|
|
|
442
454
|
|
|
443
455
|
var _Image = _interopRequireDefault(require("./components/Image"));
|
|
444
456
|
|
|
457
|
+
var _SVG = _interopRequireDefault(require("./components/SVG"));
|
|
458
|
+
|
|
445
459
|
var _NumberInput = _interopRequireDefault(require("./components/NumberInput"));
|
|
446
460
|
|
|
447
461
|
var _ScreenContainer = _interopRequireDefault(require("./components/ScreenContainer"));
|
|
@@ -504,6 +518,8 @@ var _Stepper = _interopRequireDefault(require("./components/Stepper"));
|
|
|
504
518
|
|
|
505
519
|
var _useAuthState = require("./components/useAuthState");
|
|
506
520
|
|
|
521
|
+
var _Markdown = _interopRequireDefault(require("./components/Markdown"));
|
|
522
|
+
|
|
507
523
|
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); }
|
|
508
524
|
|
|
509
525
|
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; }
|
|
@@ -14,8 +14,8 @@ const SEED_DATA = {
|
|
|
14
14
|
category: _types.COMPONENT_TYPES.media,
|
|
15
15
|
stylesPanelSections: [_types.StylesPanelSections.Size, _types.StylesPanelSections.Margins, _types.StylesPanelSections.Position, _types.StylesPanelSections.Effects],
|
|
16
16
|
layout: {
|
|
17
|
-
width:
|
|
18
|
-
height:
|
|
17
|
+
width: 100,
|
|
18
|
+
height: 100
|
|
19
19
|
},
|
|
20
20
|
props: {
|
|
21
21
|
source: (0, _types.createImageProp)(),
|
|
@@ -0,0 +1,23 @@
|
|
|
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: "Markdown",
|
|
12
|
+
tag: "MarkdownComponent",
|
|
13
|
+
description: "A markdown component",
|
|
14
|
+
category: _types.COMPONENT_TYPES.basic,
|
|
15
|
+
props: {
|
|
16
|
+
content: (0, _types.createTextProp)({
|
|
17
|
+
label: "Markdown Text",
|
|
18
|
+
description: "Markdown Text",
|
|
19
|
+
defaultValue: null
|
|
20
|
+
})
|
|
21
|
+
}
|
|
22
|
+
};
|
|
23
|
+
exports.SEED_DATA = SEED_DATA;
|
|
@@ -0,0 +1,24 @@
|
|
|
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: "SVG",
|
|
12
|
+
tag: "SVG",
|
|
13
|
+
description: "An SVG component",
|
|
14
|
+
category: _types.COMPONENT_TYPES.media,
|
|
15
|
+
layout: {
|
|
16
|
+
width: 100,
|
|
17
|
+
height: 100
|
|
18
|
+
},
|
|
19
|
+
stylesPanelSections: [_types.StylesPanelSections.Size, _types.StylesPanelSections.Margins, _types.StylesPanelSections.Position, _types.StylesPanelSections.Effects],
|
|
20
|
+
props: {
|
|
21
|
+
source: (0, _types.createSVGProp)()
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
exports.SEED_DATA = SEED_DATA;
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
2
|
-
|
|
3
1
|
import React from "react";
|
|
4
2
|
import { View } from "react-native";
|
|
5
3
|
import { Svg, Path, G } from "react-native-svg";
|
|
@@ -8,23 +6,23 @@ class CircularProgress extends React.Component {
|
|
|
8
6
|
constructor() {
|
|
9
7
|
super(...arguments);
|
|
10
8
|
|
|
11
|
-
|
|
9
|
+
this.polarToCartesian = (centerX, centerY, radius, angleInDegrees) => {
|
|
12
10
|
var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
|
|
13
11
|
return {
|
|
14
12
|
x: centerX + radius * Math.cos(angleInRadians),
|
|
15
13
|
y: centerY + radius * Math.sin(angleInRadians)
|
|
16
14
|
};
|
|
17
|
-
}
|
|
15
|
+
};
|
|
18
16
|
|
|
19
|
-
|
|
17
|
+
this.circlePath = (x, y, radius, startAngle, endAngle) => {
|
|
20
18
|
var start = this.polarToCartesian(x, y, radius, endAngle * 0.9999);
|
|
21
19
|
var end = this.polarToCartesian(x, y, radius, startAngle);
|
|
22
20
|
var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
|
|
23
21
|
var d = ["M", start.x, start.y, "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y];
|
|
24
22
|
return d.join(" ");
|
|
25
|
-
}
|
|
23
|
+
};
|
|
26
24
|
|
|
27
|
-
|
|
25
|
+
this.clampFill = fill => Math.min(100, Math.max(0, fill));
|
|
28
26
|
}
|
|
29
27
|
|
|
30
28
|
render() {
|
|
@@ -107,4 +105,14 @@ class CircularProgress extends React.Component {
|
|
|
107
105
|
|
|
108
106
|
}
|
|
109
107
|
|
|
108
|
+
export default CircularProgress;strokeLinecap: lineCap,
|
|
109
|
+
strokeDasharray: strokeDasharrayTint,
|
|
110
|
+
fill: "transparent"
|
|
111
|
+
}), cap)), children && /*#__PURE__*/React.createElement(View, {
|
|
112
|
+
style: localChildrenContainerStyle
|
|
113
|
+
}, children(fill)));
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
}
|
|
117
|
+
|
|
110
118
|
export default CircularProgress;
|
|
@@ -1,5 +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
|
-
|
|
3
1
|
import * as React from "react";
|
|
4
2
|
import { Text, StyleSheet } from "react-native";
|
|
5
3
|
import { extractStyles } from "../utilities";
|
|
@@ -18,11 +16,27 @@ export default function FormRow(_ref) {
|
|
|
18
16
|
textStyles,
|
|
19
17
|
viewStyles
|
|
20
18
|
} = extractStyles(style);
|
|
21
|
-
return /*#__PURE__*/React.createElement(Touchable,
|
|
19
|
+
return /*#__PURE__*/React.createElement(Touchable, {
|
|
22
20
|
disabled: disabled,
|
|
23
21
|
onPress: onPress,
|
|
24
22
|
style: [styles.row, {
|
|
25
23
|
flexDirection: direction
|
|
24
|
+
}, viewStyles],
|
|
25
|
+
...rest
|
|
26
|
+
}, /*#__PURE__*/React.createElement(Text, {
|
|
27
|
+
style: textStyles
|
|
28
|
+
}, label), children);
|
|
29
|
+
}
|
|
30
|
+
const styles = StyleSheet.create({
|
|
31
|
+
row: {
|
|
32
|
+
marginLeft: 8,
|
|
33
|
+
marginRight: 8,
|
|
34
|
+
flexDirection: "row",
|
|
35
|
+
justifyContent: "space-between",
|
|
36
|
+
alignItems: "center"
|
|
37
|
+
}
|
|
38
|
+
});[styles.row, {
|
|
39
|
+
flexDirection: direction
|
|
26
40
|
}, viewStyles]
|
|
27
41
|
}, rest), /*#__PURE__*/React.createElement(Text, {
|
|
28
42
|
style: textStyles
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import * as React from "react"; // @ts-ignore
|
|
2
|
+
|
|
3
|
+
import Markdown from "react-native-markdown-package";
|
|
4
|
+
|
|
5
|
+
const MarkdownComponent = _ref => {
|
|
6
|
+
let {
|
|
7
|
+
content
|
|
8
|
+
} = _ref;
|
|
9
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Markdown, {
|
|
10
|
+
styles: markdownStyle
|
|
11
|
+
}, content));
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
const markdownStyle = {
|
|
15
|
+
singleLineMd: {},
|
|
16
|
+
collectiveMd: {}
|
|
17
|
+
};
|
|
18
|
+
export default MarkdownComponent;
|
|
@@ -1,5 +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
|
-
|
|
3
1
|
import * as React from "react";
|
|
4
2
|
import { View, StyleSheet } from "react-native";
|
|
5
3
|
import omit from "lodash.omit";
|
|
@@ -10,8 +8,6 @@ import TextField from "../TextField";
|
|
|
10
8
|
import Touchable from "../Touchable";
|
|
11
9
|
|
|
12
10
|
const Picker = _ref => {
|
|
13
|
-
var _options$find$label, _options$find;
|
|
14
|
-
|
|
15
11
|
let {
|
|
16
12
|
style,
|
|
17
13
|
options,
|
|
@@ -21,6 +17,9 @@ const Picker = _ref => {
|
|
|
21
17
|
onValueChange: onValueChangeOverride = () => {},
|
|
22
18
|
...props
|
|
23
19
|
} = _ref;
|
|
20
|
+
|
|
21
|
+
var _a, _b;
|
|
22
|
+
|
|
24
23
|
const {
|
|
25
24
|
viewStyles: {
|
|
26
25
|
borderRadius,
|
|
@@ -67,7 +66,7 @@ const Picker = _ref => {
|
|
|
67
66
|
};
|
|
68
67
|
|
|
69
68
|
const stylesWithoutMargin = style && omit(StyleSheet.flatten(style), ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft"]);
|
|
70
|
-
const selectedLabel = selectedValue && ((
|
|
69
|
+
const selectedLabel = selectedValue && ((_b = (_a = options.find(o => o.value === selectedValue)) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : selectedValue);
|
|
71
70
|
return /*#__PURE__*/React.createElement(Touchable, {
|
|
72
71
|
disabled: disabled,
|
|
73
72
|
onPress: toggleFocus,
|
|
@@ -89,6 +88,25 @@ const Picker = _ref => {
|
|
|
89
88
|
label: o.label,
|
|
90
89
|
value: o.value,
|
|
91
90
|
key: o.value
|
|
91
|
+
}))), /*#__PURE__*/React.createElement(View, {
|
|
92
|
+
pointerEvents: "none"
|
|
93
|
+
}, /*#__PURE__*/React.createElement(TextField, { ...props,
|
|
94
|
+
value: selectedLabel,
|
|
95
|
+
placeholder: placeholder,
|
|
96
|
+
// @ts-ignore
|
|
97
|
+
ref: textField,
|
|
98
|
+
disabled: disabled,
|
|
99
|
+
// @ts-expect-error
|
|
100
|
+
style: stylesWithoutMargin
|
|
101
|
+
}))));
|
|
102
|
+
};
|
|
103
|
+
|
|
104
|
+
const styles = StyleSheet.create({
|
|
105
|
+
container: {
|
|
106
|
+
alignSelf: "stretch"
|
|
107
|
+
}
|
|
108
|
+
});
|
|
109
|
+
export default withTheme(Picker); key: o.value
|
|
92
110
|
}))), /*#__PURE__*/React.createElement(View, {
|
|
93
111
|
pointerEvents: "none"
|
|
94
112
|
}, /*#__PURE__*/React.createElement(TextField, _extends({}, props, {
|
|
@@ -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
|
-
|
|
3
|
-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
4
|
-
|
|
5
1
|
import React, { Component } from "react";
|
|
6
2
|
import { Animated, Easing, View, I18nManager } from "react-native";
|
|
7
3
|
const INDETERMINATE_WIDTH_FACTOR = 0.3;
|
|
@@ -10,7 +6,7 @@ export default class ProgressBar extends Component {
|
|
|
10
6
|
constructor(props) {
|
|
11
7
|
super(props);
|
|
12
8
|
|
|
13
|
-
|
|
9
|
+
this.handleLayout = event => {
|
|
14
10
|
const {
|
|
15
11
|
width = 150,
|
|
16
12
|
onLayout
|
|
@@ -25,7 +21,7 @@ export default class ProgressBar extends Component {
|
|
|
25
21
|
if (onLayout) {
|
|
26
22
|
onLayout(event);
|
|
27
23
|
}
|
|
28
|
-
}
|
|
24
|
+
};
|
|
29
25
|
|
|
30
26
|
const {
|
|
31
27
|
progress: progressP = 0,
|
|
@@ -79,7 +75,6 @@ export default class ProgressBar extends Component {
|
|
|
79
75
|
Animated[animationType](this.state.progress, { ...animationConfig,
|
|
80
76
|
toValue: progress,
|
|
81
77
|
velocity: 0,
|
|
82
|
-
//adjust this value if animation fails - velocity is required
|
|
83
78
|
useNativeDriver
|
|
84
79
|
}).start();
|
|
85
80
|
} else {
|
|
@@ -150,6 +145,27 @@ export default class ProgressBar extends Component {
|
|
|
150
145
|
})
|
|
151
146
|
}]
|
|
152
147
|
};
|
|
148
|
+
return /*#__PURE__*/React.createElement(View, {
|
|
149
|
+
style: [containerStyle, style],
|
|
150
|
+
onLayout: this.handleLayout,
|
|
151
|
+
...restProps
|
|
152
|
+
}, /*#__PURE__*/React.createElement(Animated.View, {
|
|
153
|
+
style: progressStyle
|
|
154
|
+
}), children);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
}te.progress.interpolate({
|
|
158
|
+
inputRange: [0, 1],
|
|
159
|
+
outputRange: [innerWidth / (I18nManager.isRTL ? 2 : -2), 0]
|
|
160
|
+
})
|
|
161
|
+
}, {
|
|
162
|
+
// Interpolation a temp workaround for https://github.com/facebook/react-native/issues/6278
|
|
163
|
+
scaleX: this.state.progress.interpolate({
|
|
164
|
+
inputRange: [0, 1],
|
|
165
|
+
outputRange: [0.0001, 1]
|
|
166
|
+
})
|
|
167
|
+
}]
|
|
168
|
+
};
|
|
153
169
|
return /*#__PURE__*/React.createElement(View, _extends({
|
|
154
170
|
style: [containerStyle, style],
|
|
155
171
|
onLayout: this.handleLayout
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { View, Platform, Image } from "react-native";
|
|
3
|
+
import { SvgUri } from "react-native-svg";
|
|
4
|
+
import Config from "./Config";
|
|
5
|
+
|
|
6
|
+
const SVG = _ref => {
|
|
7
|
+
let {
|
|
8
|
+
source = Config.placeholderSvgURL,
|
|
9
|
+
style
|
|
10
|
+
} = _ref;
|
|
11
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, Platform.OS === "ios" && /*#__PURE__*/React.createElement(View, {
|
|
12
|
+
style: style
|
|
13
|
+
}, /*#__PURE__*/React.createElement(SvgUri, {
|
|
14
|
+
width: "100%",
|
|
15
|
+
height: "100%",
|
|
16
|
+
uri: source
|
|
17
|
+
})), Platform.OS === "android" && /*#__PURE__*/React.createElement(View, {
|
|
18
|
+
style: style
|
|
19
|
+
}, /*#__PURE__*/React.createElement(SvgUri, {
|
|
20
|
+
width: "100%",
|
|
21
|
+
height: "100%",
|
|
22
|
+
uri: source
|
|
23
|
+
})), Platform.OS === "web" && /*#__PURE__*/React.createElement(Image, {
|
|
24
|
+
style: style,
|
|
25
|
+
source: {
|
|
26
|
+
uri: source
|
|
27
|
+
}
|
|
28
|
+
}));
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
export default SVG;
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
2
|
-
|
|
3
1
|
// @ts-nocheck
|
|
4
2
|
import React, { Component } from "react";
|
|
5
3
|
import { View, Text, StyleSheet, Animated, TouchableWithoutFeedback } from "react-native";
|
|
@@ -12,7 +10,7 @@ export default class StepIndicator extends Component {
|
|
|
12
10
|
constructor(props) {
|
|
13
11
|
super(props);
|
|
14
12
|
|
|
15
|
-
|
|
13
|
+
this.renderProgressBarBackground = () => {
|
|
16
14
|
const {
|
|
17
15
|
stepCount,
|
|
18
16
|
direction
|
|
@@ -57,9 +55,9 @@ export default class StepIndicator extends Component {
|
|
|
57
55
|
},
|
|
58
56
|
style: progressBarBackgroundStyle
|
|
59
57
|
});
|
|
60
|
-
}
|
|
58
|
+
};
|
|
61
59
|
|
|
62
|
-
|
|
60
|
+
this.renderProgressBar = () => {
|
|
63
61
|
const {
|
|
64
62
|
stepCount,
|
|
65
63
|
direction
|
|
@@ -91,9 +89,9 @@ export default class StepIndicator extends Component {
|
|
|
91
89
|
return /*#__PURE__*/React.createElement(Animated.View, {
|
|
92
90
|
style: progressBarStyle
|
|
93
91
|
});
|
|
94
|
-
}
|
|
92
|
+
};
|
|
95
93
|
|
|
96
|
-
|
|
94
|
+
this.renderStepIndicator = () => {
|
|
97
95
|
let steps = [];
|
|
98
96
|
const {
|
|
99
97
|
stepCount,
|
|
@@ -126,9 +124,9 @@ export default class StepIndicator extends Component {
|
|
|
126
124
|
height: this.state.customStyles.currentStepIndicatorSize
|
|
127
125
|
}]
|
|
128
126
|
}, steps);
|
|
129
|
-
}
|
|
127
|
+
};
|
|
130
128
|
|
|
131
|
-
|
|
129
|
+
this.renderStepLabels = () => {
|
|
132
130
|
const {
|
|
133
131
|
labels,
|
|
134
132
|
direction,
|
|
@@ -170,9 +168,9 @@ export default class StepIndicator extends Component {
|
|
|
170
168
|
alignItems: this.state.customStyles.labelAlign
|
|
171
169
|
}]
|
|
172
170
|
}, labelViews);
|
|
173
|
-
}
|
|
171
|
+
};
|
|
174
172
|
|
|
175
|
-
|
|
173
|
+
this.renderStep = position => {
|
|
176
174
|
const {
|
|
177
175
|
renderStepIndicator
|
|
178
176
|
} = this.props;
|
|
@@ -244,9 +242,9 @@ export default class StepIndicator extends Component {
|
|
|
244
242
|
}) : /*#__PURE__*/React.createElement(Text, {
|
|
245
243
|
style: indicatorLabelStyle
|
|
246
244
|
}, "".concat(position + 1)));
|
|
247
|
-
}
|
|
245
|
+
};
|
|
248
246
|
|
|
249
|
-
|
|
247
|
+
this.getStepStatus = stepPosition => {
|
|
250
248
|
const {
|
|
251
249
|
currentPosition
|
|
252
250
|
} = this.props;
|
|
@@ -258,9 +256,9 @@ export default class StepIndicator extends Component {
|
|
|
258
256
|
} else {
|
|
259
257
|
return STEP_STATUS.UNFINISHED;
|
|
260
258
|
}
|
|
261
|
-
}
|
|
259
|
+
};
|
|
262
260
|
|
|
263
|
-
|
|
261
|
+
this.onCurrentPositionChanged = position => {
|
|
264
262
|
let {
|
|
265
263
|
stepCount
|
|
266
264
|
} = this.props;
|
|
@@ -282,7 +280,7 @@ export default class StepIndicator extends Component {
|
|
|
282
280
|
toValue: this.state.customStyles.currentStepIndicatorSize / 2,
|
|
283
281
|
duration: 100
|
|
284
282
|
})])]).start();
|
|
285
|
-
}
|
|
283
|
+
};
|
|
286
284
|
|
|
287
285
|
const defaultStyles = {
|
|
288
286
|
stepIndicatorSize: 30,
|
|
@@ -393,6 +391,25 @@ const styles = StyleSheet.create({
|
|
|
393
391
|
justifyContent: "center"
|
|
394
392
|
}
|
|
395
393
|
});
|
|
394
|
+
StepIndicator.defaultProps = {
|
|
395
|
+
currentPosition: 0,
|
|
396
|
+
stepCount: 5,
|
|
397
|
+
customStyles: {},
|
|
398
|
+
direction: "horizontal"
|
|
399
|
+
};s: "center",
|
|
400
|
+
justifyContent: "center"
|
|
401
|
+
},
|
|
402
|
+
stepLabel: {
|
|
403
|
+
fontSize: 12,
|
|
404
|
+
textAlign: "center",
|
|
405
|
+
fontWeight: "500"
|
|
406
|
+
},
|
|
407
|
+
stepLabelItem: {
|
|
408
|
+
flex: 1,
|
|
409
|
+
alignItems: "center",
|
|
410
|
+
justifyContent: "center"
|
|
411
|
+
}
|
|
412
|
+
});
|
|
396
413
|
StepIndicator.defaultProps = {
|
|
397
414
|
currentPosition: 0,
|
|
398
415
|
stepCount: 5,
|
package/lib/module/constants.js
CHANGED
package/lib/module/index.js
CHANGED
|
@@ -17,6 +17,7 @@ export { default as FAB } from "./components/FAB";
|
|
|
17
17
|
export { default as FieldSearchBarFull } from "./components/FieldSearchBarFull";
|
|
18
18
|
export { default as IconButton } from "./components/IconButton";
|
|
19
19
|
export { default as Image } from "./components/Image";
|
|
20
|
+
export { default as SVG } from "./components/SVG";
|
|
20
21
|
export { default as NumberInput } from "./components/NumberInput";
|
|
21
22
|
export { default as ScreenContainer } from "./components/ScreenContainer";
|
|
22
23
|
export { default as StarRating } from "./components/StarRating";
|
|
@@ -49,4 +50,5 @@ export { default as RowHeadlineImageCaption } from "./components/RowHeadlineImag
|
|
|
49
50
|
export { default as RowHeadlineImageIcon } from "./components/RowHeadlineImageIcon";
|
|
50
51
|
export { default as Slider } from "./components/Slider";
|
|
51
52
|
export { default as Stepper } from "./components/Stepper";
|
|
52
|
-
export { useAuthState } from "./components/useAuthState";
|
|
53
|
+
export { useAuthState } from "./components/useAuthState";
|
|
54
|
+
export { default as Markdown } from "./components/Markdown"; // a comment to fix sourcemap comment issue
|
|
@@ -6,8 +6,8 @@ export const SEED_DATA = {
|
|
|
6
6
|
category: COMPONENT_TYPES.media,
|
|
7
7
|
stylesPanelSections: [StylesPanelSections.Size, StylesPanelSections.Margins, StylesPanelSections.Position, StylesPanelSections.Effects],
|
|
8
8
|
layout: {
|
|
9
|
-
width:
|
|
10
|
-
height:
|
|
9
|
+
width: 100,
|
|
10
|
+
height: 100
|
|
11
11
|
},
|
|
12
12
|
props: {
|
|
13
13
|
source: createImageProp(),
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { COMPONENT_TYPES, createTextProp } from "@draftbit/types";
|
|
2
|
+
export const SEED_DATA = {
|
|
3
|
+
name: "Markdown",
|
|
4
|
+
tag: "MarkdownComponent",
|
|
5
|
+
description: "A markdown component",
|
|
6
|
+
category: COMPONENT_TYPES.basic,
|
|
7
|
+
props: {
|
|
8
|
+
content: createTextProp({
|
|
9
|
+
label: "Markdown Text",
|
|
10
|
+
description: "Markdown Text",
|
|
11
|
+
defaultValue: null
|
|
12
|
+
})
|
|
13
|
+
}
|
|
14
|
+
};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { COMPONENT_TYPES, createSVGProp, StylesPanelSections } from "@draftbit/types";
|
|
2
|
+
export const SEED_DATA = {
|
|
3
|
+
name: "SVG",
|
|
4
|
+
tag: "SVG",
|
|
5
|
+
description: "An SVG component",
|
|
6
|
+
category: COMPONENT_TYPES.media,
|
|
7
|
+
layout: {
|
|
8
|
+
width: 100,
|
|
9
|
+
height: 100
|
|
10
|
+
},
|
|
11
|
+
stylesPanelSections: [StylesPanelSections.Size, StylesPanelSections.Margins, StylesPanelSections.Position, StylesPanelSections.Effects],
|
|
12
|
+
props: {
|
|
13
|
+
source: createSVGProp()
|
|
14
|
+
}
|
|
15
|
+
};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { StyleProp, ImageStyle } from "react-native";
|
|
3
|
+
declare type SVGComponentProps = {
|
|
4
|
+
source: string;
|
|
5
|
+
style?: StyleProp<ImageStyle>;
|
|
6
|
+
};
|
|
7
|
+
declare const SVG: React.FC<React.PropsWithChildren<SVGComponentProps>>;
|
|
8
|
+
export default SVG;
|
|
@@ -17,6 +17,7 @@ export { default as FAB } from "./components/FAB";
|
|
|
17
17
|
export { default as FieldSearchBarFull } from "./components/FieldSearchBarFull";
|
|
18
18
|
export { default as IconButton } from "./components/IconButton";
|
|
19
19
|
export { default as Image } from "./components/Image";
|
|
20
|
+
export { default as SVG } from "./components/SVG";
|
|
20
21
|
export { default as NumberInput } from "./components/NumberInput";
|
|
21
22
|
export { default as ScreenContainer } from "./components/ScreenContainer";
|
|
22
23
|
export { default as StarRating } from "./components/StarRating";
|
|
@@ -48,3 +49,4 @@ export { default as RowHeadlineImageIcon } from "./components/RowHeadlineImageIc
|
|
|
48
49
|
export { default as Slider } from "./components/Slider";
|
|
49
50
|
export { default as Stepper } from "./components/Stepper";
|
|
50
51
|
export { useAuthState } from "./components/useAuthState";
|
|
52
|
+
export { default as Markdown } from "./components/Markdown";
|