@draftbit/core 43.4.19-e53262.0 → 43.4.20-eef94a.0
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/Banner.js +181 -0
- package/lib/commonjs/components/Banner.js.map +1 -0
- package/lib/commonjs/components/Elevation.js +3 -14
- package/lib/commonjs/components/Elevation.js.map +1 -1
- package/lib/commonjs/components/RowHeadlineImageIcon.js.map +1 -1
- package/lib/commonjs/index.js +8 -0
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/mappings/ActivityIndicator.js.map +1 -1
- package/lib/commonjs/mappings/RowBodyIcon.js.map +1 -1
- package/lib/module/components/Banner.js +158 -0
- package/lib/module/components/Banner.js.map +1 -0
- package/lib/module/components/Checkbox/context.js +1 -1
- package/lib/module/components/Checkbox/context.js.map +1 -1
- package/lib/module/components/HeaderMedium.js.map +1 -1
- package/lib/module/index.js +1 -0
- package/lib/module/index.js.map +1 -1
- package/lib/typescript/src/components/Banner.d.ts +21 -0
- package/lib/typescript/src/index.d.ts +1 -0
- package/package.json +2 -2
- package/src/components/Banner.js +109 -0
- package/src/components/Banner.tsx +202 -0
- package/src/index.js +1 -0
- package/src/index.tsx +1 -0
|
@@ -0,0 +1,181 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var React = _interopRequireWildcard(require("react"));
|
|
9
|
+
|
|
10
|
+
var _reactNative = require("react-native");
|
|
11
|
+
|
|
12
|
+
var _Surface = _interopRequireDefault(require("./Surface"));
|
|
13
|
+
|
|
14
|
+
var _shadow = _interopRequireDefault(require("../styles/shadow"));
|
|
15
|
+
|
|
16
|
+
var _theming = require("../theming");
|
|
17
|
+
|
|
18
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
|
+
|
|
20
|
+
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); }
|
|
21
|
+
|
|
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
|
+
|
|
24
|
+
function _extends() { _extends = Object.assign || 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
|
+
|
|
26
|
+
const ELEVATION = 1;
|
|
27
|
+
const DEFAULT_MAX_WIDTH = 960;
|
|
28
|
+
|
|
29
|
+
const Banner = _ref => {
|
|
30
|
+
let {
|
|
31
|
+
initiallyVisible,
|
|
32
|
+
icon,
|
|
33
|
+
content,
|
|
34
|
+
contentStyle,
|
|
35
|
+
dismissable,
|
|
36
|
+
style,
|
|
37
|
+
theme,
|
|
38
|
+
Icon,
|
|
39
|
+
...rest
|
|
40
|
+
} = _ref;
|
|
41
|
+
const [visible, setVisible] = React.useState(initiallyVisible);
|
|
42
|
+
React.useEffect(() => {
|
|
43
|
+
if (initiallyVisible) {
|
|
44
|
+
setVisible(true);
|
|
45
|
+
}
|
|
46
|
+
}, [initiallyVisible]);
|
|
47
|
+
const {
|
|
48
|
+
current: position
|
|
49
|
+
} = React.useRef(new _reactNative.Animated.Value(visible ? 1 : 0));
|
|
50
|
+
const [layout, setLayout] = React.useState({
|
|
51
|
+
height: 0,
|
|
52
|
+
measured: false
|
|
53
|
+
});
|
|
54
|
+
React.useEffect(() => {
|
|
55
|
+
if (visible) {
|
|
56
|
+
// show
|
|
57
|
+
_reactNative.Animated.timing(position, {
|
|
58
|
+
duration: 250,
|
|
59
|
+
toValue: 1,
|
|
60
|
+
useNativeDriver: false
|
|
61
|
+
}).start();
|
|
62
|
+
} else {
|
|
63
|
+
// hide
|
|
64
|
+
_reactNative.Animated.timing(position, {
|
|
65
|
+
duration: 200,
|
|
66
|
+
toValue: 0,
|
|
67
|
+
useNativeDriver: false
|
|
68
|
+
}).start();
|
|
69
|
+
}
|
|
70
|
+
}, [visible, position]);
|
|
71
|
+
|
|
72
|
+
const handleLayout = _ref2 => {
|
|
73
|
+
let {
|
|
74
|
+
nativeEvent
|
|
75
|
+
} = _ref2;
|
|
76
|
+
const {
|
|
77
|
+
height
|
|
78
|
+
} = nativeEvent.layout;
|
|
79
|
+
setLayout({
|
|
80
|
+
height,
|
|
81
|
+
measured: true
|
|
82
|
+
});
|
|
83
|
+
}; // The banner animation has 2 parts:
|
|
84
|
+
// 1. Blank spacer element which animates its height to move the content
|
|
85
|
+
// 2. Actual banner which animates its translateY
|
|
86
|
+
// In initial render, we position everything normally and measure the height of the banner
|
|
87
|
+
// Once we have the height, we apply the height to the spacer and switch the banner to position: absolute
|
|
88
|
+
// We need this because we need to move the content below as if banner's height was being animated
|
|
89
|
+
// However we can't animated banner's height directly as it'll also resize the content inside
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
const height = _reactNative.Animated.multiply(position, layout.height);
|
|
93
|
+
|
|
94
|
+
const translateY = _reactNative.Animated.multiply(_reactNative.Animated.add(position, -1), layout.height);
|
|
95
|
+
|
|
96
|
+
return /*#__PURE__*/React.createElement(_Surface.default, _extends({}, rest, {
|
|
97
|
+
style: [styles.container, (0, _shadow.default)(ELEVATION), style]
|
|
98
|
+
}), /*#__PURE__*/React.createElement(_reactNative.View, {
|
|
99
|
+
style: [styles.wrapper, contentStyle]
|
|
100
|
+
}, /*#__PURE__*/React.createElement(_reactNative.Animated.View, {
|
|
101
|
+
style: {
|
|
102
|
+
height
|
|
103
|
+
}
|
|
104
|
+
}), /*#__PURE__*/React.createElement(_reactNative.Animated.View, {
|
|
105
|
+
onLayout: handleLayout,
|
|
106
|
+
style: [layout.measured || !visible ? // If we have measured banner's height or it's invisible,
|
|
107
|
+
// Position it absolutely, the layout will be taken care of the spacer
|
|
108
|
+
[styles.absolute, {
|
|
109
|
+
transform: [{
|
|
110
|
+
translateY
|
|
111
|
+
}]
|
|
112
|
+
}] : // Otherwise position it normally
|
|
113
|
+
null, !layout.measured && !visible ? // If we haven't measured banner's height yet and it's invisible,
|
|
114
|
+
// hide it with opacity: 0 so user doesn't see it
|
|
115
|
+
{
|
|
116
|
+
opacity: 0
|
|
117
|
+
} : null]
|
|
118
|
+
}, /*#__PURE__*/React.createElement(_reactNative.View, {
|
|
119
|
+
style: [styles.content, {
|
|
120
|
+
marginBottom: dismissable ? 0 : 16
|
|
121
|
+
}]
|
|
122
|
+
}, icon ? /*#__PURE__*/React.createElement(_reactNative.View, {
|
|
123
|
+
style: styles.icon
|
|
124
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
125
|
+
name: icon,
|
|
126
|
+
size: 40
|
|
127
|
+
})) : null, /*#__PURE__*/React.createElement(_reactNative.Text, {
|
|
128
|
+
style: [styles.message, {
|
|
129
|
+
color: theme.colors.text
|
|
130
|
+
}],
|
|
131
|
+
accessibilityLiveRegion: visible ? "polite" : "none",
|
|
132
|
+
accessibilityRole: "alert"
|
|
133
|
+
}, content)), dismissable ? /*#__PURE__*/React.createElement(_reactNative.View, {
|
|
134
|
+
style: styles.actions
|
|
135
|
+
}, /*#__PURE__*/React.createElement(_reactNative.Button, {
|
|
136
|
+
color: theme.colors.primary,
|
|
137
|
+
title: "Close",
|
|
138
|
+
onPress: () => setVisible(false)
|
|
139
|
+
})) : null)));
|
|
140
|
+
};
|
|
141
|
+
|
|
142
|
+
const styles = _reactNative.StyleSheet.create({
|
|
143
|
+
container: {
|
|
144
|
+
elevation: ELEVATION
|
|
145
|
+
},
|
|
146
|
+
wrapper: {
|
|
147
|
+
overflow: "hidden",
|
|
148
|
+
alignSelf: "center",
|
|
149
|
+
width: "100%",
|
|
150
|
+
maxWidth: DEFAULT_MAX_WIDTH
|
|
151
|
+
},
|
|
152
|
+
absolute: {
|
|
153
|
+
position: "absolute",
|
|
154
|
+
top: 0,
|
|
155
|
+
width: "100%"
|
|
156
|
+
},
|
|
157
|
+
content: {
|
|
158
|
+
flexDirection: "row",
|
|
159
|
+
justifyContent: "flex-start",
|
|
160
|
+
marginHorizontal: 8,
|
|
161
|
+
marginTop: 16,
|
|
162
|
+
marginBottom: 0
|
|
163
|
+
},
|
|
164
|
+
icon: {
|
|
165
|
+
margin: 8
|
|
166
|
+
},
|
|
167
|
+
message: {
|
|
168
|
+
flex: 1,
|
|
169
|
+
margin: 8
|
|
170
|
+
},
|
|
171
|
+
actions: {
|
|
172
|
+
flexDirection: "row",
|
|
173
|
+
justifyContent: "flex-end",
|
|
174
|
+
margin: 8
|
|
175
|
+
}
|
|
176
|
+
});
|
|
177
|
+
|
|
178
|
+
var _default = (0, _theming.withTheme)(Banner);
|
|
179
|
+
|
|
180
|
+
exports.default = _default;
|
|
181
|
+
//# sourceMappingURL=Banner.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["Banner.tsx"],"names":["ELEVATION","DEFAULT_MAX_WIDTH","Banner","initiallyVisible","icon","content","contentStyle","dismissable","style","theme","Icon","rest","visible","setVisible","React","useState","useEffect","current","position","useRef","Animated","Value","layout","setLayout","height","measured","timing","duration","toValue","useNativeDriver","start","handleLayout","nativeEvent","multiply","translateY","add","styles","container","wrapper","absolute","transform","opacity","marginBottom","message","color","colors","text","actions","primary","StyleSheet","create","elevation","overflow","alignSelf","width","maxWidth","top","flexDirection","justifyContent","marginHorizontal","marginTop","margin","flex"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport {\n Button,\n Text,\n View,\n ViewStyle,\n StyleSheet,\n StyleProp,\n Animated,\n} from \"react-native\";\nimport Surface from \"./Surface\";\nimport type { IconSlot } from \"../interfaces/Icon\";\nimport shadow from \"../styles/shadow\";\nimport { withTheme } from \"../theming\";\nimport type { Theme } from \"../styles/DefaultTheme\";\n\nconst ELEVATION = 1;\nconst DEFAULT_MAX_WIDTH = 960;\n\ntype Props = {\n initiallyVisible: boolean;\n dismissable: boolean;\n icon?: string;\n content: string;\n contentStyle?: StyleProp<ViewStyle>;\n style?: StyleProp<ViewStyle>;\n ref?: React.RefObject<View>;\n /**\n * @optional\n */\n theme: Theme;\n} & IconSlot;\n\ntype NativeEvent = {\n nativeEvent: {\n layout: {\n x: number;\n y: number;\n width: number;\n height: number;\n };\n };\n};\n\nconst Banner: React.FC<Props> = ({\n initiallyVisible,\n icon,\n content,\n contentStyle,\n dismissable,\n style,\n theme,\n Icon,\n ...rest\n}) => {\n const [visible, setVisible] = React.useState(initiallyVisible);\n\n React.useEffect(() => {\n if (initiallyVisible) {\n setVisible(true);\n }\n }, [initiallyVisible]);\n\n const { current: position } = React.useRef<Animated.Value>(\n new Animated.Value(visible ? 1 : 0)\n );\n const [layout, setLayout] = React.useState<{\n height: number;\n measured: boolean;\n }>({\n height: 0,\n measured: false,\n });\n\n React.useEffect(() => {\n if (visible) {\n // show\n Animated.timing(position, {\n duration: 250,\n toValue: 1,\n useNativeDriver: false,\n }).start();\n } else {\n // hide\n Animated.timing(position, {\n duration: 200,\n toValue: 0,\n useNativeDriver: false,\n }).start();\n }\n }, [visible, position]);\n\n const handleLayout = ({ nativeEvent }: NativeEvent) => {\n const { height } = nativeEvent.layout;\n setLayout({ height, measured: true });\n };\n\n // The banner animation has 2 parts:\n // 1. Blank spacer element which animates its height to move the content\n // 2. Actual banner which animates its translateY\n // In initial render, we position everything normally and measure the height of the banner\n // Once we have the height, we apply the height to the spacer and switch the banner to position: absolute\n // We need this because we need to move the content below as if banner's height was being animated\n // However we can't animated banner's height directly as it'll also resize the content inside\n const height = Animated.multiply(position, layout.height);\n\n const translateY = Animated.multiply(\n Animated.add(position, -1),\n layout.height\n );\n\n return (\n <Surface\n {...rest}\n style={[styles.container, shadow(ELEVATION) as ViewStyle, style]}\n >\n <View style={[styles.wrapper, contentStyle]}>\n <Animated.View style={{ height }} />\n <Animated.View\n onLayout={handleLayout}\n style={[\n layout.measured || !visible\n ? // If we have measured banner's height or it's invisible,\n // Position it absolutely, the layout will be taken care of the spacer\n [styles.absolute, { transform: [{ translateY }] }]\n : // Otherwise position it normally\n null,\n !layout.measured && !visible\n ? // If we haven't measured banner's height yet and it's invisible,\n // hide it with opacity: 0 so user doesn't see it\n { opacity: 0 }\n : null,\n ]}\n >\n <View\n style={[styles.content, { marginBottom: dismissable ? 0 : 16 }]}\n >\n {icon ? (\n <View style={styles.icon}>\n <Icon name={icon} size={40} />\n </View>\n ) : null}\n <Text\n style={[styles.message, { color: theme.colors.text }]}\n accessibilityLiveRegion={visible ? \"polite\" : \"none\"}\n accessibilityRole=\"alert\"\n >\n {content}\n </Text>\n </View>\n {dismissable ? (\n <View style={styles.actions}>\n <Button\n color={theme.colors.primary}\n title=\"Close\"\n onPress={() => setVisible(false)}\n />\n </View>\n ) : null}\n </Animated.View>\n </View>\n </Surface>\n );\n};\n\nconst styles = StyleSheet.create({\n container: {\n elevation: ELEVATION,\n },\n wrapper: {\n overflow: \"hidden\",\n alignSelf: \"center\",\n width: \"100%\",\n maxWidth: DEFAULT_MAX_WIDTH,\n },\n absolute: {\n position: \"absolute\",\n top: 0,\n width: \"100%\",\n },\n content: {\n flexDirection: \"row\",\n justifyContent: \"flex-start\",\n marginHorizontal: 8,\n marginTop: 16,\n marginBottom: 0,\n },\n icon: {\n margin: 8,\n },\n message: {\n flex: 1,\n margin: 8,\n },\n actions: {\n flexDirection: \"row\",\n justifyContent: \"flex-end\",\n margin: 8,\n },\n});\n\nexport default withTheme(Banner);\n"]}
|
|
@@ -19,6 +19,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
19
19
|
|
|
20
20
|
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; }
|
|
21
21
|
|
|
22
|
+
function _extends() { _extends = Object.assign || 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); }
|
|
23
|
+
|
|
22
24
|
/* directly copied from https://github.com/callstack/react-native-paper/blob/main/src/components/Surface.tsx#L62 */
|
|
23
25
|
const Elevation = _ref => {
|
|
24
26
|
let {
|
|
@@ -35,24 +37,11 @@ const Elevation = _ref => {
|
|
|
35
37
|
colors
|
|
36
38
|
} = theme;
|
|
37
39
|
const borderRadius = radius;
|
|
38
|
-
return /*#__PURE__*/React.createElement(_reactNative.Animated.View, {
|
|
40
|
+
return /*#__PURE__*/React.createElement(_reactNative.Animated.View, _extends({}, rest, {
|
|
39
41
|
style: [{
|
|
40
42
|
borderRadius,
|
|
41
43
|
backgroundColor: colors.surface
|
|
42
44
|
}, elevation ? (0, _shadow.default)(elevation) : null, style]
|
|
43
|
-
}, /*#__PURE__*/React.createElement(_reactNative.View, {
|
|
44
|
-
style: {
|
|
45
|
-
overflow: "hidden",
|
|
46
|
-
borderRadius
|
|
47
|
-
}
|
|
48
|
-
}, children));
|
|
49
|
-
};
|
|
50
|
-
|
|
51
|
-
var _default = (0, _theming.withTheme)(Elevation);
|
|
52
|
-
|
|
53
|
-
exports.default = _default;
|
|
54
|
-
//# sourceMappingURL=Elevation.js.mape
|
|
55
|
-
}, elevation ? (0, _shadow.default)(elevation) : null, style]
|
|
56
45
|
}), /*#__PURE__*/React.createElement(_reactNative.View, {
|
|
57
46
|
style: {
|
|
58
47
|
overflow: "hidden",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Elevation.
|
|
1
|
+
{"version":3,"sources":["Elevation.tsx"],"names":["Elevation","style","theme","children","rest","elevation","borderRadius","radius","StyleSheet","flatten","colors","backgroundColor","surface","overflow"],"mappings":";;;;;;;AAAA;;AACA;;AAQA;;AACA;;;;;;;;;;AAQA;AACA,MAAMA,SAA0B,GAAG,QAAyC;AAAA,MAAxC;AAAEC,IAAAA,KAAF;AAASC,IAAAA,KAAT;AAAgBC,IAAAA,QAAhB;AAA0B,OAAGC;AAA7B,GAAwC;AAC1E,QAAM;AAAEC,IAAAA,SAAS,GAAG,CAAd;AAAiBC,IAAAA,YAAY,EAAEC;AAA/B,MACJC,wBAAWC,OAAX,CAAmBR,KAAnB,KAA6B,EAD/B;AAEA,QAAM;AAAES,IAAAA;AAAF,MAAaR,KAAnB;AACA,QAAMI,YAAY,GAAGC,MAArB;AAEA,sBACE,oBAAC,qBAAD,CAAU,IAAV,eACMH,IADN;AAEE,IAAA,KAAK,EAAE,CACL;AACEE,MAAAA,YADF;AAEEK,MAAAA,eAAe,EAAED,MAAM,CAACE;AAF1B,KADK,EAKLP,SAAS,GAAG,qBAAOA,SAAP,CAAH,GAAuB,IAL3B,EAMLJ,KANK;AAFT,mBAWE,oBAAC,iBAAD;AAAM,IAAA,KAAK,EAAE;AAAEY,MAAAA,QAAQ,EAAE,QAAZ;AAAsBP,MAAAA;AAAtB;AAAb,KAAoDH,QAApD,CAXF,CADF;AAeD,CArBD;;eAuBe,wBAAUH,SAAV,C","sourcesContent":["import * as React from \"react\";\nimport {\n Animated,\n StyleSheet,\n ViewProps,\n StyleProp,\n ViewStyle,\n View,\n} from \"react-native\";\nimport shadow from \"../styles/shadow\";\nimport { withTheme } from \"../theming\";\nimport type { Theme } from \"../styles/DefaultTheme\";\n\ntype Props = {\n style?: StyleProp<ViewStyle>;\n theme: Theme;\n} & ViewProps;\n\n/* directly copied from https://github.com/callstack/react-native-paper/blob/main/src/components/Surface.tsx#L62 */\nconst Elevation: React.FC<Props> = ({ style, theme, children, ...rest }) => {\n const { elevation = 4, borderRadius: radius } =\n StyleSheet.flatten(style) || {};\n const { colors } = theme;\n const borderRadius = radius;\n\n return (\n <Animated.View\n {...rest}\n style={[\n {\n borderRadius,\n backgroundColor: colors.surface,\n },\n elevation ? shadow(elevation) : null,\n style,\n ]}\n >\n <View style={{ overflow: \"hidden\", borderRadius }}>{children}</View>\n </Animated.View>\n );\n};\n\nexport default withTheme(Elevation);\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["RowHeadlineImageIcon.
|
|
1
|
+
{"version":3,"sources":["RowHeadlineImageIcon.tsx"],"names":["RowHeadlineImageIcon","Icon","icon","title","image","subtitle","multilineSubtitle","style","theme","colors","typography","headline6","strong","body2","medium","Config","rowMultiLineIconSize","rowSingleLineIconSize","light","marginLeft","alignSelf","marginTop"],"mappings":";;;;;;;AAAA;;AACA;;AAIA;;AACA;;;;;;;;AAaA,MAAMA,oBAAqC,GAAG,QASxC;AAAA,MATyC;AAC7CC,IAAAA,IAD6C;AAE7CC,IAAAA,IAF6C;AAG7CC,IAAAA,KAH6C;AAI7CC,IAAAA,KAJ6C;AAK7CC,IAAAA,QAL6C;AAM7CC,IAAAA,iBAAiB,GAAG,KANyB;AAO7CC,IAAAA,KAP6C;AAQ7CC,IAAAA,KAAK,EAAE;AAAEC,MAAAA,MAAF;AAAUC,MAAAA;AAAV;AARsC,GASzC;AACJ,sBACE,oBAAC,YAAD;AACE,IAAA,cAAc,EAAEA,UAAU,CAACC,SAD7B;AAEE,IAAA,UAAU,EAAEF,MAAM,CAACG,MAFrB;AAGE,IAAA,iBAAiB,EAAEF,UAAU,CAACG,KAHhC;AAIE,IAAA,aAAa,EAAEJ,MAAM,CAACK,MAJxB;AAKE,IAAA,KAAK,EAAEX,KALT;AAME,IAAA,QAAQ,EAAEE,QANZ;AAOE,IAAA,iBAAiB,EAAEC,iBAPrB;AAQE,IAAA,KAAK,EAAEF,KART;AASE,IAAA,KAAK,EAAE,mBACL,oBAAC,IAAD;AACE,MAAA,IAAI,EAAEF,IADR;AAEE,MAAA,IAAI,EACFI,iBAAiB,GACbS,gBAAOC,oBADM,GAEbD,gBAAOE,qBALf;AAOE,MAAA,KAAK,EAAER,MAAM,CAACS,KAPhB;AAQE,MAAA,KAAK,EAAE;AACLC,QAAAA,UAAU,EAAE,EADP;AAELC,QAAAA,SAAS,EAAEd,iBAAiB,GAAG,YAAH,GAAkB,QAFzC;AAGLe,QAAAA,SAAS,EAAEf,iBAAiB,GAAG,CAAH,GAAO;AAH9B;AART,MAVJ;AAyBE,IAAA,KAAK,EAAEC;AAzBT,IADF;AA6BD,CAvCD;;eAyCe,wBAAUP,oBAAV,C","sourcesContent":["import * as React from \"react\";\nimport { withTheme } from \"../theming\";\nimport type { Theme } from \"../styles/DefaultTheme\";\nimport type { IconSlot } from \"../interfaces/Icon\";\n\nimport Row from \"./Row\";\nimport Config from \"./Config\";\nimport { ImageSourcePropType, StyleProp, ViewStyle } from \"react-native\";\n\ntype Props = {\n title?: string;\n image: string | ImageSourcePropType;\n subtitle?: string;\n multilineSubtitle?: boolean;\n icon: string;\n style?: StyleProp<ViewStyle>;\n theme: Theme;\n} & IconSlot;\n\nconst RowHeadlineImageIcon: React.FC<Props> = ({\n Icon,\n icon,\n title,\n image,\n subtitle,\n multilineSubtitle = false,\n style,\n theme: { colors, typography },\n}) => {\n return (\n <Row\n titleTypeStyle={typography.headline6}\n titleColor={colors.strong}\n subtitleTypeStyle={typography.body2}\n subtitleColor={colors.medium}\n title={title}\n subtitle={subtitle}\n multilineSubtitle={multilineSubtitle}\n image={image}\n right={() => (\n <Icon\n name={icon}\n size={\n multilineSubtitle\n ? Config.rowMultiLineIconSize\n : Config.rowSingleLineIconSize\n }\n color={colors.light}\n style={{\n marginLeft: 16,\n alignSelf: multilineSubtitle ? \"flex-start\" : \"center\",\n marginTop: multilineSubtitle ? 4 : 0,\n }}\n />\n )}\n style={style}\n />\n );\n};\n\nexport default withTheme(RowHeadlineImageIcon);\n"]}
|
package/lib/commonjs/index.js
CHANGED
|
@@ -45,6 +45,12 @@ Object.defineProperty(exports, "AvatarEdit", {
|
|
|
45
45
|
return _AvatarEdit.default;
|
|
46
46
|
}
|
|
47
47
|
});
|
|
48
|
+
Object.defineProperty(exports, "Banner", {
|
|
49
|
+
enumerable: true,
|
|
50
|
+
get: function () {
|
|
51
|
+
return _Banner.default;
|
|
52
|
+
}
|
|
53
|
+
});
|
|
48
54
|
Object.defineProperty(exports, "Button", {
|
|
49
55
|
enumerable: true,
|
|
50
56
|
get: function () {
|
|
@@ -410,6 +416,8 @@ var _DefaultTheme = _interopRequireDefault(require("./styles/DefaultTheme"));
|
|
|
410
416
|
|
|
411
417
|
var _Text = require("./components/Text");
|
|
412
418
|
|
|
419
|
+
var _Banner = _interopRequireDefault(require("./components/Banner"));
|
|
420
|
+
|
|
413
421
|
var _Button = require("./components/Button");
|
|
414
422
|
|
|
415
423
|
var _CircleImage = _interopRequireDefault(require("./components/CircleImage"));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAKA;;AAEA;;AASA;;AAQA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["export { injectIcon } from \"./interfaces/Icon\";\nexport { withTheme, ThemeProvider } from \"./theming\";\nexport { default as Provider } from \"./Provider\";\nexport { default as DefaultTheme } from \"./styles/DefaultTheme\";\n\nexport { Link } from \"./components/Text\";\nexport { default as Banner } from \"./components/Banner\";\nexport { ButtonSolid, ButtonOutline } from \"./components/Button\";\nexport { default as Avatar } from \"./components/CircleImage\";\nexport { default as AvatarEdit } from \"./components/AvatarEdit\";\nexport { default as Card } from \"./components/Card\";\nexport { default as Carousel } from \"./components/Carousel\";\nexport { Checkbox, CheckboxGroup, CheckboxRow } from \"./components/Checkbox\";\nexport { default as CircleImage } from \"./components/CircleImage\";\nexport { default as Container } from \"./components/Container\";\nexport { default as Divider } from \"./components/Divider\";\nexport { default as FAB } from \"./components/FAB\";\nexport { default as FieldSearchBarFull } from \"./components/FieldSearchBarFull\";\nexport { default as IconButton } from \"./components/IconButton\";\nexport { default as Image } from \"./components/Image\";\nexport { default as NumberInput } from \"./components/NumberInput\";\nexport { default as ScreenContainer } from \"./components/ScreenContainer\";\nexport { default as StarRating } from \"./components/StarRating\";\nexport { default as Surface } from \"./components/Surface\";\nexport { default as Switch, SwitchRow } from \"./components/Switch\";\nexport { default as TextField } from \"./components/TextField\";\nexport { default as ToggleButton } from \"./components/ToggleButton\";\nexport { default as Touchable } from \"./components/Touchable\";\nexport { AccordionGroup, AccordionItem } from \"./components/Accordion\";\nexport {\n ActionSheet,\n ActionSheetItem,\n ActionSheetCancel,\n} from \"./components/ActionSheet\";\nexport { Swiper, SwiperItem } from \"./components/Swiper\";\n\nexport {\n Center,\n Circle,\n Square,\n Row,\n Stack,\n Spacer,\n} from \"./components/Layout\";\n\nexport {\n RadioButton,\n RadioButtonGroup,\n RadioButtonRow,\n RadioButtonFieldGroup,\n} from \"./components/RadioButton/index\";\n\n/* Deprecated: Fix or Delete! */\nexport { default as Button } from \"./components/DeprecatedButton\";\nexport { default as CardBlock } from \"./components/CardBlock\";\nexport { default as CardContainer } from \"./components/CardContainer\";\nexport { default as CardContainerRating } from \"./components/CardContainerRating\";\nexport { default as CardInline } from \"./components/CardInline\";\nexport { default as DatePicker } from \"./components/DatePicker/DatePicker\";\nexport { default as HeaderLarge } from \"./components/HeaderLarge\";\nexport { default as HeaderMedium } from \"./components/HeaderMedium\";\nexport { default as HeaderOverline } from \"./components/HeaderOverline\";\nexport { default as Picker } from \"./components/Picker/Picker\";\nexport { default as ProgressBar } from \"./components/ProgressBar\";\nexport { default as ProgressCircle } from \"./components/ProgressCircle\";\nexport { default as RowBodyIcon } from \"./components/RowBodyIcon\";\nexport { default as RowHeadlineImageCaption } from \"./components/RowHeadlineImageCaption\";\nexport { default as RowHeadlineImageIcon } from \"./components/RowHeadlineImageIcon\";\nexport { default as Slider } from \"./components/Slider\";\nexport { default as Stepper } from \"./components/Stepper\";\nexport { useAuthState } from \"./components/useAuthState\";\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["ActivityIndicator.
|
|
1
|
+
{"version":3,"sources":["ActivityIndicator.js"],"names":["SEED_DATA","name","tag","description","doc_link","code_link","category","COMPONENT_TYPES","input","layout","width","height","props","size","label","options","formType","FORM_TYPES","flatArray","propType","PROP_TYPES","STRING","editable","required","defaultValue","group","GROUPS","basic","animating","boolean","BOOLEAN","hidesWhenStopped","color","THEME"],"mappings":";;;;;;;AAAA;;AACO,MAAMA,SAAS,GAAG;AACrBC,EAAAA,IAAI,EAAE,oBADe;AAErBC,EAAAA,GAAG,EAAE,mBAFgB;AAGrBC,EAAAA,WAAW,EAAE,wCAHQ;AAIrBC,EAAAA,QAAQ,EAAE,sEAJW;AAKrBC,EAAAA,SAAS,EAAE,2IALU;AAMrBC,EAAAA,QAAQ,EAAEC,uBAAgBC,KANL;AAOrBC,EAAAA,MAAM,EAAE;AAAEC,IAAAA,KAAK,EAAE,EAAT;AAAaC,IAAAA,MAAM,EAAE;AAArB,GAPa;AAQrBC,EAAAA,KAAK,EAAE;AACHC,IAAAA,IAAI,EAAE;AACFC,MAAAA,KAAK,EAAE,MADL;AAEFX,MAAAA,WAAW,EAAE,oDAFX;AAGFY,MAAAA,OAAO,EAAE,CAAC,OAAD,EAAU,OAAV,CAHP;AAIFC,MAAAA,QAAQ,EAAEC,kBAAWC,SAJnB;AAKFC,MAAAA,QAAQ,EAAEC,kBAAWC,MALnB;AAMFC,MAAAA,QAAQ,EAAE,IANR;AAOFC,MAAAA,QAAQ,EAAE,KAPR;AAQFC,MAAAA,YAAY,EAAE,OARZ;AASFC,MAAAA,KAAK,EAAEC,cAAOC;AATZ,KADH;AAYHC,IAAAA,SAAS,EAAE;AACPd,MAAAA,KAAK,EAAE,UADA;AAEPX,MAAAA,WAAW,EAAE,uDAFN;AAGPa,MAAAA,QAAQ,EAAEC,kBAAWY,OAHd;AAIPV,MAAAA,QAAQ,EAAEC,kBAAWU,OAJd;AAKPR,MAAAA,QAAQ,EAAE,IALH;AAMPC,MAAAA,QAAQ,EAAE,KANH;AAOPC,MAAAA,YAAY,EAAE,IAPP;AAQPC,MAAAA,KAAK,EAAEC,cAAOC;AARP,KAZR;AAsBHI,IAAAA,gBAAgB,EAAE;AACdjB,MAAAA,KAAK,EAAE,mBADO;AAEdX,MAAAA,WAAW,EAAE,sEAFC;AAGda,MAAAA,QAAQ,EAAEC,kBAAWY,OAHP;AAIdV,MAAAA,QAAQ,EAAEC,kBAAWU,OAJP;AAKdR,MAAAA,QAAQ,EAAE,IALI;AAMdC,MAAAA,QAAQ,EAAE,KANI;AAOdC,MAAAA,YAAY,EAAE,IAPA;AAQdC,MAAAA,KAAK,EAAEC,cAAOC;AARA,KAtBf;AAgCHK,IAAAA,KAAK,EAAE;AACHlB,MAAAA,KAAK,EAAE,OADJ;AAEHX,MAAAA,WAAW,EAAE,oDAFV;AAGHa,MAAAA,QAAQ,EAAEC,kBAAWe,KAHlB;AAIHb,MAAAA,QAAQ,EAAEC,kBAAWa,KAJlB;AAKHX,MAAAA,QAAQ,EAAE,IALP;AAMHC,MAAAA,QAAQ,EAAE,KANP;AAOHC,MAAAA,YAAY,EAAE,IAPX;AAQHC,MAAAA,KAAK,EAAEC,cAAOC;AARX;AAhCJ;AARc,CAAlB","sourcesContent":["import { COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, GROUPS, } from \"@draftbit/types\";\nexport const SEED_DATA = {\n name: \"Activity Indicator\",\n tag: \"ActivityIndicator\",\n description: \"Displays a circular loading indicator.\",\n doc_link: \"https://docs.expo.io/versions/latest/react-native/activityindicator/\",\n code_link: \"https://github.com/expo/expo/blob/master/ios/versioned-react-native/ABI32_0_0/Libraries/Components/ActivityIndicator/ActivityIndicator.js\",\n category: COMPONENT_TYPES.input,\n layout: { width: 36, height: 36 },\n props: {\n size: {\n label: \"Size\",\n description: \"The size of the loading indicator (Default: small)\",\n options: [\"small\", \"large\"],\n formType: FORM_TYPES.flatArray,\n propType: PROP_TYPES.STRING,\n editable: true,\n required: false,\n defaultValue: \"small\",\n group: GROUPS.basic,\n },\n animating: {\n label: \"Spinning\",\n description: \"Whether to show the loading indicator (Default: true)\",\n formType: FORM_TYPES.boolean,\n propType: PROP_TYPES.BOOLEAN,\n editable: true,\n required: false,\n defaultValue: true,\n group: GROUPS.basic,\n },\n hidesWhenStopped: {\n label: \"Hide When Stopped\",\n description: \"Whether the indicator should hide when not animating (Default: true)\",\n formType: FORM_TYPES.boolean,\n propType: PROP_TYPES.BOOLEAN,\n editable: true,\n required: false,\n defaultValue: true,\n group: GROUPS.basic,\n },\n color: {\n label: \"Color\",\n description: \"The color of the loading indicator (Default: gray)\",\n formType: FORM_TYPES.color,\n propType: PROP_TYPES.THEME,\n editable: true,\n required: false,\n defaultValue: null,\n group: GROUPS.basic,\n },\n },\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["RowBodyIcon.
|
|
1
|
+
{"version":3,"sources":["RowBodyIcon.ts"],"names":["SEED_DATA","name","tag","description","category","COMPONENT_TYPES","row","preview_image_url","supports_list_render","props","title","group","GROUPS","data","label","formType","FORM_TYPES","string","propType","PROP_TYPES","STRING","defaultValue","editable","required","icon","basic","ASSET","layout","subtitle"],"mappings":";;;;;;;AAAA;;AAOO,MAAMA,SAAS,GAAG,CACvB;AACEC,EAAAA,IAAI,EAAE,2BADR;AAEEC,EAAAA,GAAG,EAAE,aAFP;AAGEC,EAAAA,WAAW,EAAE,4DAHf;AAIEC,EAAAA,QAAQ,EAAEC,uBAAgBC,GAJ5B;AAKEC,EAAAA,iBAAiB,EAAE,8CALrB;AAMEC,EAAAA,oBAAoB,EAAE,IANxB;AAOEC,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAE;AACLC,MAAAA,KAAK,EAAEC,cAAOC,IADT;AAELC,MAAAA,KAAK,EAAE,OAFF;AAGLX,MAAAA,WAAW,EAAE,iBAHR;AAILY,MAAAA,QAAQ,EAAEC,kBAAWC,MAJhB;AAKLC,MAAAA,QAAQ,EAAEC,kBAAWC,MALhB;AAMLC,MAAAA,YAAY,EAAE,4BANT;AAOLC,MAAAA,QAAQ,EAAE,IAPL;AAQLC,MAAAA,QAAQ,EAAE;AARL,KADF;AAWLC,IAAAA,IAAI,EAAE;AACJb,MAAAA,KAAK,EAAEC,cAAOa,KADV;AAEJX,MAAAA,KAAK,EAAE,MAFH;AAGJX,MAAAA,WAAW,EAAE,iBAHT;AAIJY,MAAAA,QAAQ,EAAEC,kBAAWQ,IAJjB;AAKJN,MAAAA,QAAQ,EAAEC,kBAAWO,KALjB;AAMJL,MAAAA,YAAY,EAAE,IANV;AAOJC,MAAAA,QAAQ,EAAE,IAPN;AAQJC,MAAAA,QAAQ,EAAE;AARN;AAXD,GAPT;AA6BEI,EAAAA,MAAM,EAAE;AA7BV,CADuB,EAgCvB;AACE1B,EAAAA,IAAI,EAAE,2BADR;AAEEC,EAAAA,GAAG,EAAE,aAFP;AAGEC,EAAAA,WAAW,EACT,8EAJJ;AAKEC,EAAAA,QAAQ,EAAEC,uBAAgBC,GAL5B;AAMEC,EAAAA,iBAAiB,EAAE,8CANrB;AAOEC,EAAAA,oBAAoB,EAAE,IAPxB;AAQEC,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAE;AACLC,MAAAA,KAAK,EAAEC,cAAOC,IADT;AAELC,MAAAA,KAAK,EAAE,OAFF;AAGLX,MAAAA,WAAW,EAAE,iBAHR;AAILY,MAAAA,QAAQ,EAAEC,kBAAWC,MAJhB;AAKLC,MAAAA,QAAQ,EAAEC,kBAAWC,MALhB;AAMLC,MAAAA,YAAY,EAAE,4BANT;AAOLC,MAAAA,QAAQ,EAAE,IAPL;AAQLC,MAAAA,QAAQ,EAAE;AARL,KADF;AAWLK,IAAAA,QAAQ,EAAE;AACRjB,MAAAA,KAAK,EAAEC,cAAOC,IADN;AAERC,MAAAA,KAAK,EAAE,UAFC;AAGRX,MAAAA,WAAW,EAAE,0BAHL;AAIRY,MAAAA,QAAQ,EAAEC,kBAAWC,MAJb;AAKRC,MAAAA,QAAQ,EAAEC,kBAAWC,MALb;AAMRC,MAAAA,YAAY,EAAE,WANN;AAORC,MAAAA,QAAQ,EAAE,IAPF;AAQRC,MAAAA,QAAQ,EAAE;AARF,KAXL;AAqBLC,IAAAA,IAAI,EAAE;AACJb,MAAAA,KAAK,EAAEC,cAAOa,KADV;AAEJX,MAAAA,KAAK,EAAE,MAFH;AAGJX,MAAAA,WAAW,EAAE,iBAHT;AAIJY,MAAAA,QAAQ,EAAEC,kBAAWQ,IAJjB;AAKJN,MAAAA,QAAQ,EAAEC,kBAAWO,KALjB;AAMJL,MAAAA,YAAY,EAAE,IANV;AAOJC,MAAAA,QAAQ,EAAE,IAPN;AAQJC,MAAAA,QAAQ,EAAE;AARN;AArBD,GART;AAwCEI,EAAAA,MAAM,EAAE;AAxCV,CAhCuB,CAAlB","sourcesContent":["import {\n COMPONENT_TYPES,\n FORM_TYPES,\n GROUPS,\n PROP_TYPES,\n} from \"@draftbit/types\";\n\nexport const SEED_DATA = [\n {\n name: \"Row Single Line Body Icon\",\n tag: \"RowBodyIcon\",\n description: \"A row with left aligned body text and a right aligned icon\",\n category: COMPONENT_TYPES.row,\n preview_image_url: \"{CLOUDINARY_URL}/Row_SingleLine_BodyIcon.png\",\n supports_list_render: true,\n props: {\n title: {\n group: GROUPS.data,\n label: \"Title\",\n description: \"Text to display\",\n formType: FORM_TYPES.string,\n propType: PROP_TYPES.STRING,\n defaultValue: \"Beautiful West Coast Villa\",\n editable: true,\n required: false,\n },\n icon: {\n group: GROUPS.basic,\n label: \"Icon\",\n description: \"Icon to display\",\n formType: FORM_TYPES.icon,\n propType: PROP_TYPES.ASSET,\n defaultValue: null,\n editable: true,\n required: false,\n },\n },\n layout: {},\n },\n {\n name: \"Row Double Line Body Icon\",\n tag: \"RowBodyIcon\",\n description:\n \"A row with left aligned body text and subtitle text and a right aligned icon\",\n category: COMPONENT_TYPES.row,\n preview_image_url: \"{CLOUDINARY_URL}/Row_DoubleLine_BodyIcon.png\",\n supports_list_render: true,\n props: {\n title: {\n group: GROUPS.data,\n label: \"Title\",\n description: \"Text to display\",\n formType: FORM_TYPES.string,\n propType: PROP_TYPES.STRING,\n defaultValue: \"Beautiful West Coast Villa\",\n editable: true,\n required: false,\n },\n subtitle: {\n group: GROUPS.data,\n label: \"Subtitle\",\n description: \"Subtitle text to display\",\n formType: FORM_TYPES.string,\n propType: PROP_TYPES.STRING,\n defaultValue: \"San Diego\",\n editable: true,\n required: false,\n },\n icon: {\n group: GROUPS.basic,\n label: \"Icon\",\n description: \"Icon to display\",\n formType: FORM_TYPES.icon,\n propType: PROP_TYPES.ASSET,\n defaultValue: null,\n editable: true,\n required: false,\n },\n },\n layout: {},\n },\n];\n"]}
|
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
function _extends() { _extends = Object.assign || 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
|
+
import * as React from "react";
|
|
4
|
+
import { Button, Text, View, StyleSheet, Animated } from "react-native";
|
|
5
|
+
import Surface from "./Surface";
|
|
6
|
+
import shadow from "../styles/shadow";
|
|
7
|
+
import { withTheme } from "../theming";
|
|
8
|
+
const ELEVATION = 1;
|
|
9
|
+
const DEFAULT_MAX_WIDTH = 960;
|
|
10
|
+
|
|
11
|
+
const Banner = _ref => {
|
|
12
|
+
let {
|
|
13
|
+
initiallyVisible,
|
|
14
|
+
icon,
|
|
15
|
+
content,
|
|
16
|
+
contentStyle,
|
|
17
|
+
dismissable,
|
|
18
|
+
style,
|
|
19
|
+
theme,
|
|
20
|
+
Icon,
|
|
21
|
+
...rest
|
|
22
|
+
} = _ref;
|
|
23
|
+
const [visible, setVisible] = React.useState(initiallyVisible);
|
|
24
|
+
React.useEffect(() => {
|
|
25
|
+
if (initiallyVisible) {
|
|
26
|
+
setVisible(true);
|
|
27
|
+
}
|
|
28
|
+
}, [initiallyVisible]);
|
|
29
|
+
const {
|
|
30
|
+
current: position
|
|
31
|
+
} = React.useRef(new Animated.Value(visible ? 1 : 0));
|
|
32
|
+
const [layout, setLayout] = React.useState({
|
|
33
|
+
height: 0,
|
|
34
|
+
measured: false
|
|
35
|
+
});
|
|
36
|
+
React.useEffect(() => {
|
|
37
|
+
if (visible) {
|
|
38
|
+
// show
|
|
39
|
+
Animated.timing(position, {
|
|
40
|
+
duration: 250,
|
|
41
|
+
toValue: 1,
|
|
42
|
+
useNativeDriver: false
|
|
43
|
+
}).start();
|
|
44
|
+
} else {
|
|
45
|
+
// hide
|
|
46
|
+
Animated.timing(position, {
|
|
47
|
+
duration: 200,
|
|
48
|
+
toValue: 0,
|
|
49
|
+
useNativeDriver: false
|
|
50
|
+
}).start();
|
|
51
|
+
}
|
|
52
|
+
}, [visible, position]);
|
|
53
|
+
|
|
54
|
+
const handleLayout = _ref2 => {
|
|
55
|
+
let {
|
|
56
|
+
nativeEvent
|
|
57
|
+
} = _ref2;
|
|
58
|
+
const {
|
|
59
|
+
height
|
|
60
|
+
} = nativeEvent.layout;
|
|
61
|
+
setLayout({
|
|
62
|
+
height,
|
|
63
|
+
measured: true
|
|
64
|
+
});
|
|
65
|
+
}; // The banner animation has 2 parts:
|
|
66
|
+
// 1. Blank spacer element which animates its height to move the content
|
|
67
|
+
// 2. Actual banner which animates its translateY
|
|
68
|
+
// In initial render, we position everything normally and measure the height of the banner
|
|
69
|
+
// Once we have the height, we apply the height to the spacer and switch the banner to position: absolute
|
|
70
|
+
// We need this because we need to move the content below as if banner's height was being animated
|
|
71
|
+
// However we can't animated banner's height directly as it'll also resize the content inside
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
const height = Animated.multiply(position, layout.height);
|
|
75
|
+
const translateY = Animated.multiply(Animated.add(position, -1), layout.height);
|
|
76
|
+
return /*#__PURE__*/React.createElement(Surface, _extends({}, rest, {
|
|
77
|
+
style: [styles.container, shadow(ELEVATION), style]
|
|
78
|
+
}), /*#__PURE__*/React.createElement(View, {
|
|
79
|
+
style: [styles.wrapper, contentStyle]
|
|
80
|
+
}, /*#__PURE__*/React.createElement(Animated.View, {
|
|
81
|
+
style: {
|
|
82
|
+
height
|
|
83
|
+
}
|
|
84
|
+
}), /*#__PURE__*/React.createElement(Animated.View, {
|
|
85
|
+
onLayout: handleLayout,
|
|
86
|
+
style: [layout.measured || !visible ? // If we have measured banner's height or it's invisible,
|
|
87
|
+
// Position it absolutely, the layout will be taken care of the spacer
|
|
88
|
+
[styles.absolute, {
|
|
89
|
+
transform: [{
|
|
90
|
+
translateY
|
|
91
|
+
}]
|
|
92
|
+
}] : // Otherwise position it normally
|
|
93
|
+
null, !layout.measured && !visible ? // If we haven't measured banner's height yet and it's invisible,
|
|
94
|
+
// hide it with opacity: 0 so user doesn't see it
|
|
95
|
+
{
|
|
96
|
+
opacity: 0
|
|
97
|
+
} : null]
|
|
98
|
+
}, /*#__PURE__*/React.createElement(View, {
|
|
99
|
+
style: [styles.content, {
|
|
100
|
+
marginBottom: dismissable ? 0 : 16
|
|
101
|
+
}]
|
|
102
|
+
}, icon ? /*#__PURE__*/React.createElement(View, {
|
|
103
|
+
style: styles.icon
|
|
104
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
105
|
+
name: icon,
|
|
106
|
+
size: 40
|
|
107
|
+
})) : null, /*#__PURE__*/React.createElement(Text, {
|
|
108
|
+
style: [styles.message, {
|
|
109
|
+
color: theme.colors.text
|
|
110
|
+
}],
|
|
111
|
+
accessibilityLiveRegion: visible ? "polite" : "none",
|
|
112
|
+
accessibilityRole: "alert"
|
|
113
|
+
}, content)), dismissable ? /*#__PURE__*/React.createElement(View, {
|
|
114
|
+
style: styles.actions
|
|
115
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
116
|
+
color: theme.colors.primary,
|
|
117
|
+
title: "Close",
|
|
118
|
+
onPress: () => setVisible(false)
|
|
119
|
+
})) : null)));
|
|
120
|
+
};
|
|
121
|
+
|
|
122
|
+
const styles = StyleSheet.create({
|
|
123
|
+
container: {
|
|
124
|
+
elevation: ELEVATION
|
|
125
|
+
},
|
|
126
|
+
wrapper: {
|
|
127
|
+
overflow: "hidden",
|
|
128
|
+
alignSelf: "center",
|
|
129
|
+
width: "100%",
|
|
130
|
+
maxWidth: DEFAULT_MAX_WIDTH
|
|
131
|
+
},
|
|
132
|
+
absolute: {
|
|
133
|
+
position: "absolute",
|
|
134
|
+
top: 0,
|
|
135
|
+
width: "100%"
|
|
136
|
+
},
|
|
137
|
+
content: {
|
|
138
|
+
flexDirection: "row",
|
|
139
|
+
justifyContent: "flex-start",
|
|
140
|
+
marginHorizontal: 8,
|
|
141
|
+
marginTop: 16,
|
|
142
|
+
marginBottom: 0
|
|
143
|
+
},
|
|
144
|
+
icon: {
|
|
145
|
+
margin: 8
|
|
146
|
+
},
|
|
147
|
+
message: {
|
|
148
|
+
flex: 1,
|
|
149
|
+
margin: 8
|
|
150
|
+
},
|
|
151
|
+
actions: {
|
|
152
|
+
flexDirection: "row",
|
|
153
|
+
justifyContent: "flex-end",
|
|
154
|
+
margin: 8
|
|
155
|
+
}
|
|
156
|
+
});
|
|
157
|
+
export default withTheme(Banner);
|
|
158
|
+
//# sourceMappingURL=Banner.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["Banner.tsx"],"names":["React","Button","Text","View","StyleSheet","Animated","Surface","shadow","withTheme","ELEVATION","DEFAULT_MAX_WIDTH","Banner","initiallyVisible","icon","content","contentStyle","dismissable","style","theme","Icon","rest","visible","setVisible","useState","useEffect","current","position","useRef","Value","layout","setLayout","height","measured","timing","duration","toValue","useNativeDriver","start","handleLayout","nativeEvent","multiply","translateY","add","styles","container","wrapper","absolute","transform","opacity","marginBottom","message","color","colors","text","actions","primary","create","elevation","overflow","alignSelf","width","maxWidth","top","flexDirection","justifyContent","marginHorizontal","marginTop","margin","flex"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport {\n Button,\n Text,\n View,\n ViewStyle,\n StyleSheet,\n StyleProp,\n Animated,\n} from \"react-native\";\nimport Surface from \"./Surface\";\nimport type { IconSlot } from \"../interfaces/Icon\";\nimport shadow from \"../styles/shadow\";\nimport { withTheme } from \"../theming\";\nimport type { Theme } from \"../styles/DefaultTheme\";\n\nconst ELEVATION = 1;\nconst DEFAULT_MAX_WIDTH = 960;\n\ntype Props = {\n initiallyVisible: boolean;\n dismissable: boolean;\n icon?: string;\n content: string;\n contentStyle?: StyleProp<ViewStyle>;\n style?: StyleProp<ViewStyle>;\n ref?: React.RefObject<View>;\n /**\n * @optional\n */\n theme: Theme;\n} & IconSlot;\n\ntype NativeEvent = {\n nativeEvent: {\n layout: {\n x: number;\n y: number;\n width: number;\n height: number;\n };\n };\n};\n\nconst Banner: React.FC<Props> = ({\n initiallyVisible,\n icon,\n content,\n contentStyle,\n dismissable,\n style,\n theme,\n Icon,\n ...rest\n}) => {\n const [visible, setVisible] = React.useState(initiallyVisible);\n\n React.useEffect(() => {\n if (initiallyVisible) {\n setVisible(true);\n }\n }, [initiallyVisible]);\n\n const { current: position } = React.useRef<Animated.Value>(\n new Animated.Value(visible ? 1 : 0)\n );\n const [layout, setLayout] = React.useState<{\n height: number;\n measured: boolean;\n }>({\n height: 0,\n measured: false,\n });\n\n React.useEffect(() => {\n if (visible) {\n // show\n Animated.timing(position, {\n duration: 250,\n toValue: 1,\n useNativeDriver: false,\n }).start();\n } else {\n // hide\n Animated.timing(position, {\n duration: 200,\n toValue: 0,\n useNativeDriver: false,\n }).start();\n }\n }, [visible, position]);\n\n const handleLayout = ({ nativeEvent }: NativeEvent) => {\n const { height } = nativeEvent.layout;\n setLayout({ height, measured: true });\n };\n\n // The banner animation has 2 parts:\n // 1. Blank spacer element which animates its height to move the content\n // 2. Actual banner which animates its translateY\n // In initial render, we position everything normally and measure the height of the banner\n // Once we have the height, we apply the height to the spacer and switch the banner to position: absolute\n // We need this because we need to move the content below as if banner's height was being animated\n // However we can't animated banner's height directly as it'll also resize the content inside\n const height = Animated.multiply(position, layout.height);\n\n const translateY = Animated.multiply(\n Animated.add(position, -1),\n layout.height\n );\n\n return (\n <Surface\n {...rest}\n style={[styles.container, shadow(ELEVATION) as ViewStyle, style]}\n >\n <View style={[styles.wrapper, contentStyle]}>\n <Animated.View style={{ height }} />\n <Animated.View\n onLayout={handleLayout}\n style={[\n layout.measured || !visible\n ? // If we have measured banner's height or it's invisible,\n // Position it absolutely, the layout will be taken care of the spacer\n [styles.absolute, { transform: [{ translateY }] }]\n : // Otherwise position it normally\n null,\n !layout.measured && !visible\n ? // If we haven't measured banner's height yet and it's invisible,\n // hide it with opacity: 0 so user doesn't see it\n { opacity: 0 }\n : null,\n ]}\n >\n <View\n style={[styles.content, { marginBottom: dismissable ? 0 : 16 }]}\n >\n {icon ? (\n <View style={styles.icon}>\n <Icon name={icon} size={40} />\n </View>\n ) : null}\n <Text\n style={[styles.message, { color: theme.colors.text }]}\n accessibilityLiveRegion={visible ? \"polite\" : \"none\"}\n accessibilityRole=\"alert\"\n >\n {content}\n </Text>\n </View>\n {dismissable ? (\n <View style={styles.actions}>\n <Button\n color={theme.colors.primary}\n title=\"Close\"\n onPress={() => setVisible(false)}\n />\n </View>\n ) : null}\n </Animated.View>\n </View>\n </Surface>\n );\n};\n\nconst styles = StyleSheet.create({\n container: {\n elevation: ELEVATION,\n },\n wrapper: {\n overflow: \"hidden\",\n alignSelf: \"center\",\n width: \"100%\",\n maxWidth: DEFAULT_MAX_WIDTH,\n },\n absolute: {\n position: \"absolute\",\n top: 0,\n width: \"100%\",\n },\n content: {\n flexDirection: \"row\",\n justifyContent: \"flex-start\",\n marginHorizontal: 8,\n marginTop: 16,\n marginBottom: 0,\n },\n icon: {\n margin: 8,\n },\n message: {\n flex: 1,\n margin: 8,\n },\n actions: {\n flexDirection: \"row\",\n justifyContent: \"flex-end\",\n margin: 8,\n },\n});\n\nexport default withTheme(Banner);\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["context.
|
|
1
|
+
{"version":3,"sources":["context.ts"],"names":["createContext","useContext","Direction","checkboxGroupContext","onValueChange","values","direction","undefined","useCheckboxGroupContext"],"mappings":"AAAA,SAASA,aAAT,EAAwBC,UAAxB,QAA0C,OAA1C;AAEA,WAAYC,SAAZ;;WAAYA,S;AAAAA,EAAAA,S;AAAAA,EAAAA,S;GAAAA,S,KAAAA,S;;AAWZ,OAAO,MAAMC,oBAAoB,gBAAGH,aAAa,CAAuB;AACtEI,EAAAA,aAAa,EAAE,MAAM,CAAE,CAD+C;AAEtEC,EAAAA,MAAM,EAAE,EAF8D;AAGtEC,EAAAA,SAAS,EAAEC;AAH2D,CAAvB,CAA1C;AAMP,OAAO,SAASC,uBAAT,GAAmC;AACxC,SAAOP,UAAU,CAACE,oBAAD,CAAjB;AACD","sourcesContent":["import { createContext, useContext } from \"react\";\n\nexport enum Direction {\n Horizontal = \"horizontal\",\n Vertical = \"vertical\",\n}\n\ninterface CheckboxGroupContext {\n onValueChange: (value: string, selected: boolean) => void;\n values: string[];\n direction?: Direction;\n}\n\nexport const checkboxGroupContext = createContext<CheckboxGroupContext>({\n onValueChange: () => {},\n values: [],\n direction: undefined,\n});\n\nexport function useCheckboxGroupContext() {\n return useContext(checkboxGroupContext);\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["HeaderMedium.
|
|
1
|
+
{"version":3,"sources":["HeaderMedium.js"],"names":["React","withTheme","Header","HeaderMedium","Icon","title","buttonText","icon","onPress","style","theme","colors","typography","createElement","titleTypeStyle","headline6","titleColor","strong"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,SAAT,QAA0B,YAA1B;AACA,OAAOC,MAAP,MAAmB,UAAnB;;AACA,MAAMC,YAAY,GAAG,QAAmG;AAAA,MAAlG;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,KAAR;AAAeC,IAAAA,UAAf;AAA2BC,IAAAA,IAA3B;AAAiCC,IAAAA,OAAO,GAAG,MAAM,CAAG,CAApD;AAAsDC,IAAAA,KAAtD;AAA6DC,IAAAA,KAAK,EAAE;AAAEC,MAAAA,MAAF;AAAUC,MAAAA;AAAV;AAApE,GAAkG;AACpH,sBAAQZ,KAAK,CAACa,aAAN,CAAoBX,MAApB,EAA4B;AAAEE,IAAAA,IAAI,EAAEA,IAAR;AAAcU,IAAAA,cAAc,EAAEF,UAAU,CAACG,SAAzC;AAAoDC,IAAAA,UAAU,EAAEL,MAAM,CAACM,MAAvE;AAA+EZ,IAAAA,KAAK,EAAEA,KAAtF;AAA6FC,IAAAA,UAAU,EAAEA,UAAzG;AAAqHC,IAAAA,IAAI,EAAEA,IAA3H;AAAiIC,IAAAA,OAAO,EAAEA,OAA1I;AAAmJC,IAAAA,KAAK,EAAEA;AAA1J,GAA5B,CAAR;AACH,CAFD;;AAGA,eAAeR,SAAS,CAACE,YAAD,CAAxB","sourcesContent":["import * as React from \"react\";\nimport { withTheme } from \"../theming\";\nimport Header from \"./Header\";\nconst HeaderMedium = ({ Icon, title, buttonText, icon, onPress = () => { }, style, theme: { colors, typography }, }) => {\n return (React.createElement(Header, { Icon: Icon, titleTypeStyle: typography.headline6, titleColor: colors.strong, title: title, buttonText: buttonText, icon: icon, onPress: onPress, style: style }));\n};\nexport default withTheme(HeaderMedium);\n"]}
|
package/lib/module/index.js
CHANGED
|
@@ -3,6 +3,7 @@ export { withTheme, ThemeProvider } from "./theming";
|
|
|
3
3
|
export { default as Provider } from "./Provider";
|
|
4
4
|
export { default as DefaultTheme } from "./styles/DefaultTheme";
|
|
5
5
|
export { Link } from "./components/Text";
|
|
6
|
+
export { default as Banner } from "./components/Banner";
|
|
6
7
|
export { ButtonSolid, ButtonOutline } from "./components/Button";
|
|
7
8
|
export { default as Avatar } from "./components/CircleImage";
|
|
8
9
|
export { default as AvatarEdit } from "./components/AvatarEdit";
|
package/lib/module/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.tsx"],"names":["injectIcon","withTheme","ThemeProvider","default","Provider","DefaultTheme","Link","ButtonSolid","ButtonOutline","Avatar","AvatarEdit","Card","Carousel","Checkbox","CheckboxGroup","CheckboxRow","CircleImage","Container","Divider","FAB","FieldSearchBarFull","IconButton","Image","NumberInput","ScreenContainer","StarRating","Surface","Switch","SwitchRow","TextField","ToggleButton","Touchable","AccordionGroup","AccordionItem","ActionSheet","ActionSheetItem","ActionSheetCancel","Swiper","SwiperItem","Center","Circle","Square","Row","Stack","Spacer","RadioButton","RadioButtonGroup","RadioButtonRow","RadioButtonFieldGroup","Button","CardBlock","CardContainer","CardContainerRating","CardInline","DatePicker","HeaderLarge","HeaderMedium","HeaderOverline","Picker","ProgressBar","ProgressCircle","RowBodyIcon","RowHeadlineImageCaption","RowHeadlineImageIcon","Slider","Stepper","useAuthState"],"mappings":"AAAA,SAASA,UAAT,QAA2B,mBAA3B;AACA,SAASC,SAAT,EAAoBC,aAApB,QAAyC,WAAzC;AACA,SAASC,OAAO,IAAIC,QAApB,QAAoC,YAApC;AACA,SAASD,OAAO,IAAIE,YAApB,QAAwC,uBAAxC;AAEA,SAASC,IAAT,QAAqB,mBAArB;AACA,SAASC,WAAT,EAAsBC,aAAtB,QAA2C,qBAA3C;AACA,
|
|
1
|
+
{"version":3,"sources":["index.tsx"],"names":["injectIcon","withTheme","ThemeProvider","default","Provider","DefaultTheme","Link","Banner","ButtonSolid","ButtonOutline","Avatar","AvatarEdit","Card","Carousel","Checkbox","CheckboxGroup","CheckboxRow","CircleImage","Container","Divider","FAB","FieldSearchBarFull","IconButton","Image","NumberInput","ScreenContainer","StarRating","Surface","Switch","SwitchRow","TextField","ToggleButton","Touchable","AccordionGroup","AccordionItem","ActionSheet","ActionSheetItem","ActionSheetCancel","Swiper","SwiperItem","Center","Circle","Square","Row","Stack","Spacer","RadioButton","RadioButtonGroup","RadioButtonRow","RadioButtonFieldGroup","Button","CardBlock","CardContainer","CardContainerRating","CardInline","DatePicker","HeaderLarge","HeaderMedium","HeaderOverline","Picker","ProgressBar","ProgressCircle","RowBodyIcon","RowHeadlineImageCaption","RowHeadlineImageIcon","Slider","Stepper","useAuthState"],"mappings":"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","sourcesContent":["export { injectIcon } from \"./interfaces/Icon\";\nexport { withTheme, ThemeProvider } from \"./theming\";\nexport { default as Provider } from \"./Provider\";\nexport { default as DefaultTheme } from \"./styles/DefaultTheme\";\n\nexport { Link } from \"./components/Text\";\nexport { default as Banner } from \"./components/Banner\";\nexport { ButtonSolid, ButtonOutline } from \"./components/Button\";\nexport { default as Avatar } from \"./components/CircleImage\";\nexport { default as AvatarEdit } from \"./components/AvatarEdit\";\nexport { default as Card } from \"./components/Card\";\nexport { default as Carousel } from \"./components/Carousel\";\nexport { Checkbox, CheckboxGroup, CheckboxRow } from \"./components/Checkbox\";\nexport { default as CircleImage } from \"./components/CircleImage\";\nexport { default as Container } from \"./components/Container\";\nexport { default as Divider } from \"./components/Divider\";\nexport { default as FAB } from \"./components/FAB\";\nexport { default as FieldSearchBarFull } from \"./components/FieldSearchBarFull\";\nexport { default as IconButton } from \"./components/IconButton\";\nexport { default as Image } from \"./components/Image\";\nexport { default as NumberInput } from \"./components/NumberInput\";\nexport { default as ScreenContainer } from \"./components/ScreenContainer\";\nexport { default as StarRating } from \"./components/StarRating\";\nexport { default as Surface } from \"./components/Surface\";\nexport { default as Switch, SwitchRow } from \"./components/Switch\";\nexport { default as TextField } from \"./components/TextField\";\nexport { default as ToggleButton } from \"./components/ToggleButton\";\nexport { default as Touchable } from \"./components/Touchable\";\nexport { AccordionGroup, AccordionItem } from \"./components/Accordion\";\nexport {\n ActionSheet,\n ActionSheetItem,\n ActionSheetCancel,\n} from \"./components/ActionSheet\";\nexport { Swiper, SwiperItem } from \"./components/Swiper\";\n\nexport {\n Center,\n Circle,\n Square,\n Row,\n Stack,\n Spacer,\n} from \"./components/Layout\";\n\nexport {\n RadioButton,\n RadioButtonGroup,\n RadioButtonRow,\n RadioButtonFieldGroup,\n} from \"./components/RadioButton/index\";\n\n/* Deprecated: Fix or Delete! */\nexport { default as Button } from \"./components/DeprecatedButton\";\nexport { default as CardBlock } from \"./components/CardBlock\";\nexport { default as CardContainer } from \"./components/CardContainer\";\nexport { default as CardContainerRating } from \"./components/CardContainerRating\";\nexport { default as CardInline } from \"./components/CardInline\";\nexport { default as DatePicker } from \"./components/DatePicker/DatePicker\";\nexport { default as HeaderLarge } from \"./components/HeaderLarge\";\nexport { default as HeaderMedium } from \"./components/HeaderMedium\";\nexport { default as HeaderOverline } from \"./components/HeaderOverline\";\nexport { default as Picker } from \"./components/Picker/Picker\";\nexport { default as ProgressBar } from \"./components/ProgressBar\";\nexport { default as ProgressCircle } from \"./components/ProgressCircle\";\nexport { default as RowBodyIcon } from \"./components/RowBodyIcon\";\nexport { default as RowHeadlineImageCaption } from \"./components/RowHeadlineImageCaption\";\nexport { default as RowHeadlineImageIcon } from \"./components/RowHeadlineImageIcon\";\nexport { default as Slider } from \"./components/Slider\";\nexport { default as Stepper } from \"./components/Stepper\";\nexport { useAuthState } from \"./components/useAuthState\";\n"]}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { View, ViewStyle, StyleProp } from "react-native";
|
|
3
|
+
import type { IconSlot } from "../interfaces/Icon";
|
|
4
|
+
import type { Theme } from "../styles/DefaultTheme";
|
|
5
|
+
declare type Props = {
|
|
6
|
+
initiallyVisible: boolean;
|
|
7
|
+
dismissable: boolean;
|
|
8
|
+
icon?: string;
|
|
9
|
+
content: string;
|
|
10
|
+
contentStyle?: StyleProp<ViewStyle>;
|
|
11
|
+
style?: StyleProp<ViewStyle>;
|
|
12
|
+
ref?: React.RefObject<View>;
|
|
13
|
+
/**
|
|
14
|
+
* @optional
|
|
15
|
+
*/
|
|
16
|
+
theme: Theme;
|
|
17
|
+
} & IconSlot;
|
|
18
|
+
declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<Props, "theme"> & {
|
|
19
|
+
theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;
|
|
20
|
+
}> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<Props> & React.FC<Props>, {}>;
|
|
21
|
+
export default _default;
|
|
@@ -3,6 +3,7 @@ export { withTheme, ThemeProvider } from "./theming";
|
|
|
3
3
|
export { default as Provider } from "./Provider";
|
|
4
4
|
export { default as DefaultTheme } from "./styles/DefaultTheme";
|
|
5
5
|
export { Link } from "./components/Text";
|
|
6
|
+
export { default as Banner } from "./components/Banner";
|
|
6
7
|
export { ButtonSolid, ButtonOutline } from "./components/Button";
|
|
7
8
|
export { default as Avatar } from "./components/CircleImage";
|
|
8
9
|
export { default as AvatarEdit } from "./components/AvatarEdit";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@draftbit/core",
|
|
3
|
-
"version": "43.4.
|
|
3
|
+
"version": "43.4.20-eef94a.0+eef94af0",
|
|
4
4
|
"description": "Core (non-native) Components",
|
|
5
5
|
"main": "lib/commonjs/index.js",
|
|
6
6
|
"module": "lib/module/index.js",
|
|
@@ -80,5 +80,5 @@
|
|
|
80
80
|
]
|
|
81
81
|
]
|
|
82
82
|
},
|
|
83
|
-
"gitHead": "
|
|
83
|
+
"gitHead": "eef94af0b92f27fd97ed272312832c4c5505af42"
|
|
84
84
|
}
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { Button, Text, View, StyleSheet, Animated, } from "react-native";
|
|
3
|
+
import Surface from "./Surface";
|
|
4
|
+
import shadow from "../styles/shadow";
|
|
5
|
+
import { withTheme } from "../theming";
|
|
6
|
+
const ELEVATION = 1;
|
|
7
|
+
const DEFAULT_MAX_WIDTH = 960;
|
|
8
|
+
const Banner = ({ initiallyVisible, icon, content, contentStyle, dismissable, style, theme, Icon, ...rest }) => {
|
|
9
|
+
const [visible, setVisible] = React.useState(initiallyVisible);
|
|
10
|
+
React.useEffect(() => {
|
|
11
|
+
if (initiallyVisible) {
|
|
12
|
+
setVisible(true);
|
|
13
|
+
}
|
|
14
|
+
}, [initiallyVisible]);
|
|
15
|
+
const { current: position } = React.useRef(new Animated.Value(visible ? 1 : 0));
|
|
16
|
+
const [layout, setLayout] = React.useState({
|
|
17
|
+
height: 0,
|
|
18
|
+
measured: false,
|
|
19
|
+
});
|
|
20
|
+
React.useEffect(() => {
|
|
21
|
+
if (visible) {
|
|
22
|
+
// show
|
|
23
|
+
Animated.timing(position, {
|
|
24
|
+
duration: 250,
|
|
25
|
+
toValue: 1,
|
|
26
|
+
useNativeDriver: false,
|
|
27
|
+
}).start();
|
|
28
|
+
}
|
|
29
|
+
else {
|
|
30
|
+
// hide
|
|
31
|
+
Animated.timing(position, {
|
|
32
|
+
duration: 200,
|
|
33
|
+
toValue: 0,
|
|
34
|
+
useNativeDriver: false,
|
|
35
|
+
}).start();
|
|
36
|
+
}
|
|
37
|
+
}, [visible, position]);
|
|
38
|
+
const handleLayout = ({ nativeEvent }) => {
|
|
39
|
+
const { height } = nativeEvent.layout;
|
|
40
|
+
setLayout({ height, measured: true });
|
|
41
|
+
};
|
|
42
|
+
// The banner animation has 2 parts:
|
|
43
|
+
// 1. Blank spacer element which animates its height to move the content
|
|
44
|
+
// 2. Actual banner which animates its translateY
|
|
45
|
+
// In initial render, we position everything normally and measure the height of the banner
|
|
46
|
+
// Once we have the height, we apply the height to the spacer and switch the banner to position: absolute
|
|
47
|
+
// We need this because we need to move the content below as if banner's height was being animated
|
|
48
|
+
// However we can't animated banner's height directly as it'll also resize the content inside
|
|
49
|
+
const height = Animated.multiply(position, layout.height);
|
|
50
|
+
const translateY = Animated.multiply(Animated.add(position, -1), layout.height);
|
|
51
|
+
return (React.createElement(Surface, { ...rest, style: [styles.container, shadow(ELEVATION), style] },
|
|
52
|
+
React.createElement(View, { style: [styles.wrapper, contentStyle] },
|
|
53
|
+
React.createElement(Animated.View, { style: { height } }),
|
|
54
|
+
React.createElement(Animated.View, { onLayout: handleLayout, style: [
|
|
55
|
+
layout.measured || !visible
|
|
56
|
+
? // If we have measured banner's height or it's invisible,
|
|
57
|
+
// Position it absolutely, the layout will be taken care of the spacer
|
|
58
|
+
[styles.absolute, { transform: [{ translateY }] }]
|
|
59
|
+
: // Otherwise position it normally
|
|
60
|
+
null,
|
|
61
|
+
!layout.measured && !visible
|
|
62
|
+
? // If we haven't measured banner's height yet and it's invisible,
|
|
63
|
+
// hide it with opacity: 0 so user doesn't see it
|
|
64
|
+
{ opacity: 0 }
|
|
65
|
+
: null,
|
|
66
|
+
] },
|
|
67
|
+
React.createElement(View, { style: [styles.content, { marginBottom: dismissable ? 0 : 16 }] },
|
|
68
|
+
icon ? (React.createElement(View, { style: styles.icon },
|
|
69
|
+
React.createElement(Icon, { name: icon, size: 40 }))) : null,
|
|
70
|
+
React.createElement(Text, { style: [styles.message, { color: theme.colors.text }], accessibilityLiveRegion: visible ? "polite" : "none", accessibilityRole: "alert" }, content)),
|
|
71
|
+
dismissable ? (React.createElement(View, { style: styles.actions },
|
|
72
|
+
React.createElement(Button, { color: theme.colors.primary, title: "Close", onPress: () => setVisible(false) }))) : null))));
|
|
73
|
+
};
|
|
74
|
+
const styles = StyleSheet.create({
|
|
75
|
+
container: {
|
|
76
|
+
elevation: ELEVATION,
|
|
77
|
+
},
|
|
78
|
+
wrapper: {
|
|
79
|
+
overflow: "hidden",
|
|
80
|
+
alignSelf: "center",
|
|
81
|
+
width: "100%",
|
|
82
|
+
maxWidth: DEFAULT_MAX_WIDTH,
|
|
83
|
+
},
|
|
84
|
+
absolute: {
|
|
85
|
+
position: "absolute",
|
|
86
|
+
top: 0,
|
|
87
|
+
width: "100%",
|
|
88
|
+
},
|
|
89
|
+
content: {
|
|
90
|
+
flexDirection: "row",
|
|
91
|
+
justifyContent: "flex-start",
|
|
92
|
+
marginHorizontal: 8,
|
|
93
|
+
marginTop: 16,
|
|
94
|
+
marginBottom: 0,
|
|
95
|
+
},
|
|
96
|
+
icon: {
|
|
97
|
+
margin: 8,
|
|
98
|
+
},
|
|
99
|
+
message: {
|
|
100
|
+
flex: 1,
|
|
101
|
+
margin: 8,
|
|
102
|
+
},
|
|
103
|
+
actions: {
|
|
104
|
+
flexDirection: "row",
|
|
105
|
+
justifyContent: "flex-end",
|
|
106
|
+
margin: 8,
|
|
107
|
+
},
|
|
108
|
+
});
|
|
109
|
+
export default withTheme(Banner);
|
|
@@ -0,0 +1,202 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import {
|
|
3
|
+
Button,
|
|
4
|
+
Text,
|
|
5
|
+
View,
|
|
6
|
+
ViewStyle,
|
|
7
|
+
StyleSheet,
|
|
8
|
+
StyleProp,
|
|
9
|
+
Animated,
|
|
10
|
+
} from "react-native";
|
|
11
|
+
import Surface from "./Surface";
|
|
12
|
+
import type { IconSlot } from "../interfaces/Icon";
|
|
13
|
+
import shadow from "../styles/shadow";
|
|
14
|
+
import { withTheme } from "../theming";
|
|
15
|
+
import type { Theme } from "../styles/DefaultTheme";
|
|
16
|
+
|
|
17
|
+
const ELEVATION = 1;
|
|
18
|
+
const DEFAULT_MAX_WIDTH = 960;
|
|
19
|
+
|
|
20
|
+
type Props = {
|
|
21
|
+
initiallyVisible: boolean;
|
|
22
|
+
dismissable: boolean;
|
|
23
|
+
icon?: string;
|
|
24
|
+
content: string;
|
|
25
|
+
contentStyle?: StyleProp<ViewStyle>;
|
|
26
|
+
style?: StyleProp<ViewStyle>;
|
|
27
|
+
ref?: React.RefObject<View>;
|
|
28
|
+
/**
|
|
29
|
+
* @optional
|
|
30
|
+
*/
|
|
31
|
+
theme: Theme;
|
|
32
|
+
} & IconSlot;
|
|
33
|
+
|
|
34
|
+
type NativeEvent = {
|
|
35
|
+
nativeEvent: {
|
|
36
|
+
layout: {
|
|
37
|
+
x: number;
|
|
38
|
+
y: number;
|
|
39
|
+
width: number;
|
|
40
|
+
height: number;
|
|
41
|
+
};
|
|
42
|
+
};
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
const Banner: React.FC<Props> = ({
|
|
46
|
+
initiallyVisible,
|
|
47
|
+
icon,
|
|
48
|
+
content,
|
|
49
|
+
contentStyle,
|
|
50
|
+
dismissable,
|
|
51
|
+
style,
|
|
52
|
+
theme,
|
|
53
|
+
Icon,
|
|
54
|
+
...rest
|
|
55
|
+
}) => {
|
|
56
|
+
const [visible, setVisible] = React.useState(initiallyVisible);
|
|
57
|
+
|
|
58
|
+
React.useEffect(() => {
|
|
59
|
+
if (initiallyVisible) {
|
|
60
|
+
setVisible(true);
|
|
61
|
+
}
|
|
62
|
+
}, [initiallyVisible]);
|
|
63
|
+
|
|
64
|
+
const { current: position } = React.useRef<Animated.Value>(
|
|
65
|
+
new Animated.Value(visible ? 1 : 0)
|
|
66
|
+
);
|
|
67
|
+
const [layout, setLayout] = React.useState<{
|
|
68
|
+
height: number;
|
|
69
|
+
measured: boolean;
|
|
70
|
+
}>({
|
|
71
|
+
height: 0,
|
|
72
|
+
measured: false,
|
|
73
|
+
});
|
|
74
|
+
|
|
75
|
+
React.useEffect(() => {
|
|
76
|
+
if (visible) {
|
|
77
|
+
// show
|
|
78
|
+
Animated.timing(position, {
|
|
79
|
+
duration: 250,
|
|
80
|
+
toValue: 1,
|
|
81
|
+
useNativeDriver: false,
|
|
82
|
+
}).start();
|
|
83
|
+
} else {
|
|
84
|
+
// hide
|
|
85
|
+
Animated.timing(position, {
|
|
86
|
+
duration: 200,
|
|
87
|
+
toValue: 0,
|
|
88
|
+
useNativeDriver: false,
|
|
89
|
+
}).start();
|
|
90
|
+
}
|
|
91
|
+
}, [visible, position]);
|
|
92
|
+
|
|
93
|
+
const handleLayout = ({ nativeEvent }: NativeEvent) => {
|
|
94
|
+
const { height } = nativeEvent.layout;
|
|
95
|
+
setLayout({ height, measured: true });
|
|
96
|
+
};
|
|
97
|
+
|
|
98
|
+
// The banner animation has 2 parts:
|
|
99
|
+
// 1. Blank spacer element which animates its height to move the content
|
|
100
|
+
// 2. Actual banner which animates its translateY
|
|
101
|
+
// In initial render, we position everything normally and measure the height of the banner
|
|
102
|
+
// Once we have the height, we apply the height to the spacer and switch the banner to position: absolute
|
|
103
|
+
// We need this because we need to move the content below as if banner's height was being animated
|
|
104
|
+
// However we can't animated banner's height directly as it'll also resize the content inside
|
|
105
|
+
const height = Animated.multiply(position, layout.height);
|
|
106
|
+
|
|
107
|
+
const translateY = Animated.multiply(
|
|
108
|
+
Animated.add(position, -1),
|
|
109
|
+
layout.height
|
|
110
|
+
);
|
|
111
|
+
|
|
112
|
+
return (
|
|
113
|
+
<Surface
|
|
114
|
+
{...rest}
|
|
115
|
+
style={[styles.container, shadow(ELEVATION) as ViewStyle, style]}
|
|
116
|
+
>
|
|
117
|
+
<View style={[styles.wrapper, contentStyle]}>
|
|
118
|
+
<Animated.View style={{ height }} />
|
|
119
|
+
<Animated.View
|
|
120
|
+
onLayout={handleLayout}
|
|
121
|
+
style={[
|
|
122
|
+
layout.measured || !visible
|
|
123
|
+
? // If we have measured banner's height or it's invisible,
|
|
124
|
+
// Position it absolutely, the layout will be taken care of the spacer
|
|
125
|
+
[styles.absolute, { transform: [{ translateY }] }]
|
|
126
|
+
: // Otherwise position it normally
|
|
127
|
+
null,
|
|
128
|
+
!layout.measured && !visible
|
|
129
|
+
? // If we haven't measured banner's height yet and it's invisible,
|
|
130
|
+
// hide it with opacity: 0 so user doesn't see it
|
|
131
|
+
{ opacity: 0 }
|
|
132
|
+
: null,
|
|
133
|
+
]}
|
|
134
|
+
>
|
|
135
|
+
<View
|
|
136
|
+
style={[styles.content, { marginBottom: dismissable ? 0 : 16 }]}
|
|
137
|
+
>
|
|
138
|
+
{icon ? (
|
|
139
|
+
<View style={styles.icon}>
|
|
140
|
+
<Icon name={icon} size={40} />
|
|
141
|
+
</View>
|
|
142
|
+
) : null}
|
|
143
|
+
<Text
|
|
144
|
+
style={[styles.message, { color: theme.colors.text }]}
|
|
145
|
+
accessibilityLiveRegion={visible ? "polite" : "none"}
|
|
146
|
+
accessibilityRole="alert"
|
|
147
|
+
>
|
|
148
|
+
{content}
|
|
149
|
+
</Text>
|
|
150
|
+
</View>
|
|
151
|
+
{dismissable ? (
|
|
152
|
+
<View style={styles.actions}>
|
|
153
|
+
<Button
|
|
154
|
+
color={theme.colors.primary}
|
|
155
|
+
title="Close"
|
|
156
|
+
onPress={() => setVisible(false)}
|
|
157
|
+
/>
|
|
158
|
+
</View>
|
|
159
|
+
) : null}
|
|
160
|
+
</Animated.View>
|
|
161
|
+
</View>
|
|
162
|
+
</Surface>
|
|
163
|
+
);
|
|
164
|
+
};
|
|
165
|
+
|
|
166
|
+
const styles = StyleSheet.create({
|
|
167
|
+
container: {
|
|
168
|
+
elevation: ELEVATION,
|
|
169
|
+
},
|
|
170
|
+
wrapper: {
|
|
171
|
+
overflow: "hidden",
|
|
172
|
+
alignSelf: "center",
|
|
173
|
+
width: "100%",
|
|
174
|
+
maxWidth: DEFAULT_MAX_WIDTH,
|
|
175
|
+
},
|
|
176
|
+
absolute: {
|
|
177
|
+
position: "absolute",
|
|
178
|
+
top: 0,
|
|
179
|
+
width: "100%",
|
|
180
|
+
},
|
|
181
|
+
content: {
|
|
182
|
+
flexDirection: "row",
|
|
183
|
+
justifyContent: "flex-start",
|
|
184
|
+
marginHorizontal: 8,
|
|
185
|
+
marginTop: 16,
|
|
186
|
+
marginBottom: 0,
|
|
187
|
+
},
|
|
188
|
+
icon: {
|
|
189
|
+
margin: 8,
|
|
190
|
+
},
|
|
191
|
+
message: {
|
|
192
|
+
flex: 1,
|
|
193
|
+
margin: 8,
|
|
194
|
+
},
|
|
195
|
+
actions: {
|
|
196
|
+
flexDirection: "row",
|
|
197
|
+
justifyContent: "flex-end",
|
|
198
|
+
margin: 8,
|
|
199
|
+
},
|
|
200
|
+
});
|
|
201
|
+
|
|
202
|
+
export default withTheme(Banner);
|
package/src/index.js
CHANGED
|
@@ -3,6 +3,7 @@ export { withTheme, ThemeProvider } from "./theming";
|
|
|
3
3
|
export { default as Provider } from "./Provider";
|
|
4
4
|
export { default as DefaultTheme } from "./styles/DefaultTheme";
|
|
5
5
|
export { Link } from "./components/Text";
|
|
6
|
+
export { default as Banner } from "./components/Banner";
|
|
6
7
|
export { ButtonSolid, ButtonOutline } from "./components/Button";
|
|
7
8
|
export { default as Avatar } from "./components/CircleImage";
|
|
8
9
|
export { default as AvatarEdit } from "./components/AvatarEdit";
|
package/src/index.tsx
CHANGED
|
@@ -4,6 +4,7 @@ export { default as Provider } from "./Provider";
|
|
|
4
4
|
export { default as DefaultTheme } from "./styles/DefaultTheme";
|
|
5
5
|
|
|
6
6
|
export { Link } from "./components/Text";
|
|
7
|
+
export { default as Banner } from "./components/Banner";
|
|
7
8
|
export { ButtonSolid, ButtonOutline } from "./components/Button";
|
|
8
9
|
export { default as Avatar } from "./components/CircleImage";
|
|
9
10
|
export { default as AvatarEdit } from "./components/AvatarEdit";
|