@draftbit/core 43.4.19 → 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.
Files changed (20) hide show
  1. package/lib/commonjs/components/Banner.js +181 -0
  2. package/lib/commonjs/components/Banner.js.map +1 -0
  3. package/lib/commonjs/components/Elevation.js +3 -14
  4. package/lib/commonjs/components/Elevation.js.map +1 -1
  5. package/lib/commonjs/index.js +8 -0
  6. package/lib/commonjs/index.js.map +1 -1
  7. package/lib/commonjs/mappings/ActivityIndicator.js.map +1 -1
  8. package/lib/commonjs/mappings/RowBodyIcon.js.map +1 -1
  9. package/lib/module/components/Banner.js +158 -0
  10. package/lib/module/components/Banner.js.map +1 -0
  11. package/lib/module/components/HeaderMedium.js.map +1 -1
  12. package/lib/module/index.js +1 -0
  13. package/lib/module/index.js.map +1 -1
  14. package/lib/typescript/src/components/Banner.d.ts +21 -0
  15. package/lib/typescript/src/index.d.ts +1 -0
  16. package/package.json +2 -2
  17. package/src/components/Banner.js +109 -0
  18. package/src/components/Banner.tsx +202 -0
  19. package/src/index.js +1 -0
  20. package/src/index.tsx +1 -0
package/lib/commonjs/components/Banner.js ADDED
@@ -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
package/lib/commonjs/components/Banner.js.map ADDED
@@ -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":";;;;;;;AAAA;;AACA;;AASA;;AAEA;;AACA;;;;;;;;;;AAGA,MAAMA,SAAS,GAAG,CAAlB;AACA,MAAMC,iBAAiB,GAAG,GAA1B;;AA2BA,MAAMC,MAAuB,GAAG,QAU1B;AAAA,MAV2B;AAC/BC,IAAAA,gBAD+B;AAE/BC,IAAAA,IAF+B;AAG/BC,IAAAA,OAH+B;AAI/BC,IAAAA,YAJ+B;AAK/BC,IAAAA,WAL+B;AAM/BC,IAAAA,KAN+B;AAO/BC,IAAAA,KAP+B;AAQ/BC,IAAAA,IAR+B;AAS/B,OAAGC;AAT4B,GAU3B;AACJ,QAAM,CAACC,OAAD,EAAUC,UAAV,IAAwBC,KAAK,CAACC,QAAN,CAAeZ,gBAAf,CAA9B;AAEAW,EAAAA,KAAK,CAACE,SAAN,CAAgB,MAAM;AACpB,QAAIb,gBAAJ,EAAsB;AACpBU,MAAAA,UAAU,CAAC,IAAD,CAAV;AACD;AACF,GAJD,EAIG,CAACV,gBAAD,CAJH;AAMA,QAAM;AAAEc,IAAAA,OAAO,EAAEC;AAAX,MAAwBJ,KAAK,CAACK,MAAN,CAC5B,IAAIC,sBAASC,KAAb,CAAmBT,OAAO,GAAG,CAAH,GAAO,CAAjC,CAD4B,CAA9B;AAGA,QAAM,CAACU,MAAD,EAASC,SAAT,IAAsBT,KAAK,CAACC,QAAN,CAGzB;AACDS,IAAAA,MAAM,EAAE,CADP;AAEDC,IAAAA,QAAQ,EAAE;AAFT,GAHyB,CAA5B;AAQAX,EAAAA,KAAK,CAACE,SAAN,CAAgB,MAAM;AACpB,QAAIJ,OAAJ,EAAa;AACX;AACAQ,4BAASM,MAAT,CAAgBR,QAAhB,EAA0B;AACxBS,QAAAA,QAAQ,EAAE,GADc;AAExBC,QAAAA,OAAO,EAAE,CAFe;AAGxBC,QAAAA,eAAe,EAAE;AAHO,OAA1B,EAIGC,KAJH;AAKD,KAPD,MAOO;AACL;AACAV,4BAASM,MAAT,CAAgBR,QAAhB,EAA0B;AACxBS,QAAAA,QAAQ,EAAE,GADc;AAExBC,QAAAA,OAAO,EAAE,CAFe;AAGxBC,QAAAA,eAAe,EAAE;AAHO,OAA1B,EAIGC,KAJH;AAKD;AACF,GAhBD,EAgBG,CAAClB,OAAD,EAAUM,QAAV,CAhBH;;AAkBA,QAAMa,YAAY,GAAG,SAAkC;AAAA,QAAjC;AAAEC,MAAAA;AAAF,KAAiC;AACrD,UAAM;AAAER,MAAAA;AAAF,QAAaQ,WAAW,CAACV,MAA/B;AACAC,IAAAA,SAAS,CAAC;AAAEC,MAAAA,MAAF;AAAUC,MAAAA,QAAQ,EAAE;AAApB,KAAD,CAAT;AACD,GAHD,CAtCI,CA2CJ;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,QAAMD,MAAM,GAAGJ,sBAASa,QAAT,CAAkBf,QAAlB,EAA4BI,MAAM,CAACE,MAAnC,CAAf;;AAEA,QAAMU,UAAU,GAAGd,sBAASa,QAAT,CACjBb,sBAASe,GAAT,CAAajB,QAAb,EAAuB,CAAC,CAAxB,CADiB,EAEjBI,MAAM,CAACE,MAFU,CAAnB;;AAKA,sBACE,oBAAC,gBAAD,eACMb,IADN;AAEE,IAAA,KAAK,EAAE,CAACyB,MAAM,CAACC,SAAR,EAAmB,qBAAOrC,SAAP,CAAnB,EAAmDQ,KAAnD;AAFT,mBAIE,oBAAC,iBAAD;AAAM,IAAA,KAAK,EAAE,CAAC4B,MAAM,CAACE,OAAR,EAAiBhC,YAAjB;AAAb,kBACE,oBAAC,qBAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAE;AAAEkB,MAAAA;AAAF;AAAtB,IADF,eAEE,oBAAC,qBAAD,CAAU,IAAV;AACE,IAAA,QAAQ,EAAEO,YADZ;AAEE,IAAA,KAAK,EAAE,CACLT,MAAM,CAACG,QAAP,IAAmB,CAACb,OAApB,GACI;AACA;AACA,KAACwB,MAAM,CAACG,QAAR,EAAkB;AAAEC,MAAAA,SAAS,EAAE,CAAC;AAAEN,QAAAA;AAAF,OAAD;AAAb,KAAlB,CAHJ,GAII;AACA,QANC,EAOL,CAACZ,MAAM,CAACG,QAAR,IAAoB,CAACb,OAArB,GACI;AACA;AACA;AAAE6B,MAAAA,OAAO,EAAE;AAAX,KAHJ,GAII,IAXC;AAFT,kBAgBE,oBAAC,iBAAD;AACE,IAAA,KAAK,EAAE,CAACL,MAAM,CAAC/B,OAAR,EAAiB;AAAEqC,MAAAA,YAAY,EAAEnC,WAAW,GAAG,CAAH,GAAO;AAAlC,KAAjB;AADT,KAGGH,IAAI,gBACH,oBAAC,iBAAD;AAAM,IAAA,KAAK,EAAEgC,MAAM,CAAChC;AAApB,kBACE,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAEA,IAAZ;AAAkB,IAAA,IAAI,EAAE;AAAxB,IADF,CADG,GAID,IAPN,eAQE,oBAAC,iBAAD;AACE,IAAA,KAAK,EAAE,CAACgC,MAAM,CAACO,OAAR,EAAiB;AAAEC,MAAAA,KAAK,EAAEnC,KAAK,CAACoC,MAAN,CAAaC;AAAtB,KAAjB,CADT;AAEE,IAAA,uBAAuB,EAAElC,OAAO,GAAG,QAAH,GAAc,MAFhD;AAGE,IAAA,iBAAiB,EAAC;AAHpB,KAKGP,OALH,CARF,CAhBF,EAgCGE,WAAW,gBACV,oBAAC,iBAAD;AAAM,IAAA,KAAK,EAAE6B,MAAM,CAACW;AAApB,kBACE,oBAAC,mBAAD;AACE,IAAA,KAAK,EAAEtC,KAAK,CAACoC,MAAN,CAAaG,OADtB;AAEE,IAAA,KAAK,EAAC,OAFR;AAGE,IAAA,OAAO,EAAE,MAAMnC,UAAU,CAAC,KAAD;AAH3B,IADF,CADU,GAQR,IAxCN,CAFF,CAJF,CADF;AAoDD,CAvHD;;AAyHA,MAAMuB,MAAM,GAAGa,wBAAWC,MAAX,CAAkB;AAC/Bb,EAAAA,SAAS,EAAE;AACTc,IAAAA,SAAS,EAAEnD;AADF,GADoB;AAI/BsC,EAAAA,OAAO,EAAE;AACPc,IAAAA,QAAQ,EAAE,QADH;AAEPC,IAAAA,SAAS,EAAE,QAFJ;AAGPC,IAAAA,KAAK,EAAE,MAHA;AAIPC,IAAAA,QAAQ,EAAEtD;AAJH,GAJsB;AAU/BsC,EAAAA,QAAQ,EAAE;AACRrB,IAAAA,QAAQ,EAAE,UADF;AAERsC,IAAAA,GAAG,EAAE,CAFG;AAGRF,IAAAA,KAAK,EAAE;AAHC,GAVqB;AAe/BjD,EAAAA,OAAO,EAAE;AACPoD,IAAAA,aAAa,EAAE,KADR;AAEPC,IAAAA,cAAc,EAAE,YAFT;AAGPC,IAAAA,gBAAgB,EAAE,CAHX;AAIPC,IAAAA,SAAS,EAAE,EAJJ;AAKPlB,IAAAA,YAAY,EAAE;AALP,GAfsB;AAsB/BtC,EAAAA,IAAI,EAAE;AACJyD,IAAAA,MAAM,EAAE;AADJ,GAtByB;AAyB/BlB,EAAAA,OAAO,EAAE;AACPmB,IAAAA,IAAI,EAAE,CADC;AAEPD,IAAAA,MAAM,EAAE;AAFD,GAzBsB;AA6B/Bd,EAAAA,OAAO,EAAE;AACPU,IAAAA,aAAa,EAAE,KADR;AAEPC,IAAAA,cAAc,EAAE,UAFT;AAGPG,IAAAA,MAAM,EAAE;AAHD;AA7BsB,CAAlB,CAAf;;eAoCe,wBAAU3D,MAAV,C","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"]}
package/lib/commonjs/components/Elevation.js CHANGED
@@ -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, { ...rest,
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",
package/lib/commonjs/components/Elevation.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["Elevation.js"],"names":["Elevation","style","theme","children","rest","elevation","borderRadius","radius","StyleSheet","flatten","colors","React","createElement","Animated","View","backgroundColor","surface","overflow"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;AACA;AACA,MAAMA,SAAS,GAAG,QAAyC;AAAA,MAAxC;AAAEC,IAAAA,KAAF;AAASC,IAAAA,KAAT;AAAgBC,IAAAA,QAAhB;AAA0B,OAAGC;AAA7B,GAAwC;AACvD,QAAM;AAAEC,IAAAA,SAAS,GAAG,CAAd;AAAiBC,IAAAA,YAAY,EAAEC;AAA/B,MAA0CC,wBAAWC,OAAX,CAAmBR,KAAnB,KAA6B,EAA7E;AACA,QAAM;AAAES,IAAAA;AAAF,MAAaR,KAAnB;AACA,QAAMI,YAAY,GAAGC,MAArB;AACA,sBAAQI,KAAK,CAACC,aAAN,CAAoBC,sBAASC,IAA7B,EAAmC,EAAE,GAAGV,IAAL;AAAWH,IAAAA,KAAK,EAAE,CACrD;AACIK,MAAAA,YADJ;AAEIS,MAAAA,eAAe,EAAEL,MAAM,CAACM;AAF5B,KADqD,EAKrDX,SAAS,GAAG,qBAAOA,SAAP,CAAH,GAAuB,IALqB,EAMrDJ,KANqD;AAAlB,GAAnC,eAQJU,KAAK,CAACC,aAAN,CAAoBE,iBAApB,EAA0B;AAAEb,IAAAA,KAAK,EAAE;AAAEgB,MAAAA,QAAQ,EAAE,QAAZ;AAAsBX,MAAAA;AAAtB;AAAT,GAA1B,EAA2EH,QAA3E,CARI,CAAR;AASH,CAbD;;eAce,wBAAUH,SAAV,C","sourcesContent":["import * as React from \"react\";\nimport { Animated, StyleSheet, View, } from \"react-native\";\nimport shadow from \"../styles/shadow\";\nimport { withTheme } from \"../theming\";\n/* directly copied from https://github.com/callstack/react-native-paper/blob/main/src/components/Surface.tsx#L62 */\nconst Elevation = ({ style, theme, children, ...rest }) => {\n const { elevation = 4, borderRadius: radius } = StyleSheet.flatten(style) || {};\n const { colors } = theme;\n const borderRadius = radius;\n return (React.createElement(Animated.View, { ...rest, style: [\n {\n borderRadius,\n backgroundColor: colors.surface,\n },\n elevation ? shadow(elevation) : null,\n style,\n ] },\n React.createElement(View, { style: { overflow: \"hidden\", borderRadius } }, children)));\n};\nexport default withTheme(Elevation);\n"]}
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"]}
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"));
package/lib/commonjs/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;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 { 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
+ {"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"]}
package/lib/commonjs/mappings/ActivityIndicator.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["ActivityIndicator.ts"],"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;;AAOO,MAAMA,SAAS,GAAG;AACvBC,EAAAA,IAAI,EAAE,oBADiB;AAEvBC,EAAAA,GAAG,EAAE,mBAFkB;AAGvBC,EAAAA,WAAW,EAAE,wCAHU;AAIvBC,EAAAA,QAAQ,EACN,sEALqB;AAMvBC,EAAAA,SAAS,EACP,2IAPqB;AAQvBC,EAAAA,QAAQ,EAAEC,uBAAgBC,KARH;AASvBC,EAAAA,MAAM,EAAE;AAAEC,IAAAA,KAAK,EAAE,EAAT;AAAaC,IAAAA,MAAM,EAAE;AAArB,GATe;AAUvBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAE;AACJC,MAAAA,KAAK,EAAE,MADH;AAEJX,MAAAA,WAAW,EAAE,oDAFT;AAGJY,MAAAA,OAAO,EAAE,CAAC,OAAD,EAAU,OAAV,CAHL;AAIJC,MAAAA,QAAQ,EAAEC,kBAAWC,SAJjB;AAKJC,MAAAA,QAAQ,EAAEC,kBAAWC,MALjB;AAMJC,MAAAA,QAAQ,EAAE,IANN;AAOJC,MAAAA,QAAQ,EAAE,KAPN;AAQJC,MAAAA,YAAY,EAAE,OARV;AASJC,MAAAA,KAAK,EAAEC,cAAOC;AATV,KADD;AAYLC,IAAAA,SAAS,EAAE;AACTd,MAAAA,KAAK,EAAE,UADE;AAETX,MAAAA,WAAW,EAAE,uDAFJ;AAGTa,MAAAA,QAAQ,EAAEC,kBAAWY,OAHZ;AAITV,MAAAA,QAAQ,EAAEC,kBAAWU,OAJZ;AAKTR,MAAAA,QAAQ,EAAE,IALD;AAMTC,MAAAA,QAAQ,EAAE,KAND;AAOTC,MAAAA,YAAY,EAAE,IAPL;AAQTC,MAAAA,KAAK,EAAEC,cAAOC;AARL,KAZN;AAsBLI,IAAAA,gBAAgB,EAAE;AAChBjB,MAAAA,KAAK,EAAE,mBADS;AAEhBX,MAAAA,WAAW,EACT,sEAHc;AAIhBa,MAAAA,QAAQ,EAAEC,kBAAWY,OAJL;AAKhBV,MAAAA,QAAQ,EAAEC,kBAAWU,OALL;AAMhBR,MAAAA,QAAQ,EAAE,IANM;AAOhBC,MAAAA,QAAQ,EAAE,KAPM;AAQhBC,MAAAA,YAAY,EAAE,IARE;AAShBC,MAAAA,KAAK,EAAEC,cAAOC;AATE,KAtBb;AAiCLK,IAAAA,KAAK,EAAE;AACLlB,MAAAA,KAAK,EAAE,OADF;AAELX,MAAAA,WAAW,EAAE,oDAFR;AAGLa,MAAAA,QAAQ,EAAEC,kBAAWe,KAHhB;AAILb,MAAAA,QAAQ,EAAEC,kBAAWa,KAJhB;AAKLX,MAAAA,QAAQ,EAAE,IALL;AAMLC,MAAAA,QAAQ,EAAE,KANL;AAOLC,MAAAA,YAAY,EAAE,IAPT;AAQLC,MAAAA,KAAK,EAAEC,cAAOC;AART;AAjCF;AAVgB,CAAlB","sourcesContent":["import {\n COMPONENT_TYPES,\n FORM_TYPES,\n PROP_TYPES,\n GROUPS,\n} from \"@draftbit/types\";\n\nexport const SEED_DATA = {\n name: \"Activity Indicator\",\n tag: \"ActivityIndicator\",\n description: \"Displays a circular loading indicator.\",\n doc_link:\n \"https://docs.expo.io/versions/latest/react-native/activityindicator/\",\n code_link:\n \"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:\n \"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
+ {"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"]}
package/lib/commonjs/mappings/RowBodyIcon.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["RowBodyIcon.js"],"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;;AACO,MAAMA,SAAS,GAAG,CACrB;AACIC,EAAAA,IAAI,EAAE,2BADV;AAEIC,EAAAA,GAAG,EAAE,aAFT;AAGIC,EAAAA,WAAW,EAAE,4DAHjB;AAIIC,EAAAA,QAAQ,EAAEC,uBAAgBC,GAJ9B;AAKIC,EAAAA,iBAAiB,EAAE,8CALvB;AAMIC,EAAAA,oBAAoB,EAAE,IAN1B;AAOIC,EAAAA,KAAK,EAAE;AACHC,IAAAA,KAAK,EAAE;AACHC,MAAAA,KAAK,EAAEC,cAAOC,IADX;AAEHC,MAAAA,KAAK,EAAE,OAFJ;AAGHX,MAAAA,WAAW,EAAE,iBAHV;AAIHY,MAAAA,QAAQ,EAAEC,kBAAWC,MAJlB;AAKHC,MAAAA,QAAQ,EAAEC,kBAAWC,MALlB;AAMHC,MAAAA,YAAY,EAAE,4BANX;AAOHC,MAAAA,QAAQ,EAAE,IAPP;AAQHC,MAAAA,QAAQ,EAAE;AARP,KADJ;AAWHC,IAAAA,IAAI,EAAE;AACFb,MAAAA,KAAK,EAAEC,cAAOa,KADZ;AAEFX,MAAAA,KAAK,EAAE,MAFL;AAGFX,MAAAA,WAAW,EAAE,iBAHX;AAIFY,MAAAA,QAAQ,EAAEC,kBAAWQ,IAJnB;AAKFN,MAAAA,QAAQ,EAAEC,kBAAWO,KALnB;AAMFL,MAAAA,YAAY,EAAE,IANZ;AAOFC,MAAAA,QAAQ,EAAE,IAPR;AAQFC,MAAAA,QAAQ,EAAE;AARR;AAXH,GAPX;AA6BII,EAAAA,MAAM,EAAE;AA7BZ,CADqB,EAgCrB;AACI1B,EAAAA,IAAI,EAAE,2BADV;AAEIC,EAAAA,GAAG,EAAE,aAFT;AAGIC,EAAAA,WAAW,EAAE,8EAHjB;AAIIC,EAAAA,QAAQ,EAAEC,uBAAgBC,GAJ9B;AAKIC,EAAAA,iBAAiB,EAAE,8CALvB;AAMIC,EAAAA,oBAAoB,EAAE,IAN1B;AAOIC,EAAAA,KAAK,EAAE;AACHC,IAAAA,KAAK,EAAE;AACHC,MAAAA,KAAK,EAAEC,cAAOC,IADX;AAEHC,MAAAA,KAAK,EAAE,OAFJ;AAGHX,MAAAA,WAAW,EAAE,iBAHV;AAIHY,MAAAA,QAAQ,EAAEC,kBAAWC,MAJlB;AAKHC,MAAAA,QAAQ,EAAEC,kBAAWC,MALlB;AAMHC,MAAAA,YAAY,EAAE,4BANX;AAOHC,MAAAA,QAAQ,EAAE,IAPP;AAQHC,MAAAA,QAAQ,EAAE;AARP,KADJ;AAWHK,IAAAA,QAAQ,EAAE;AACNjB,MAAAA,KAAK,EAAEC,cAAOC,IADR;AAENC,MAAAA,KAAK,EAAE,UAFD;AAGNX,MAAAA,WAAW,EAAE,0BAHP;AAINY,MAAAA,QAAQ,EAAEC,kBAAWC,MAJf;AAKNC,MAAAA,QAAQ,EAAEC,kBAAWC,MALf;AAMNC,MAAAA,YAAY,EAAE,WANR;AAONC,MAAAA,QAAQ,EAAE,IAPJ;AAQNC,MAAAA,QAAQ,EAAE;AARJ,KAXP;AAqBHC,IAAAA,IAAI,EAAE;AACFb,MAAAA,KAAK,EAAEC,cAAOa,KADZ;AAEFX,MAAAA,KAAK,EAAE,MAFL;AAGFX,MAAAA,WAAW,EAAE,iBAHX;AAIFY,MAAAA,QAAQ,EAAEC,kBAAWQ,IAJnB;AAKFN,MAAAA,QAAQ,EAAEC,kBAAWO,KALnB;AAMFL,MAAAA,YAAY,EAAE,IANZ;AAOFC,MAAAA,QAAQ,EAAE,IAPR;AAQFC,MAAAA,QAAQ,EAAE;AARR;AArBH,GAPX;AAuCII,EAAAA,MAAM,EAAE;AAvCZ,CAhCqB,CAAlB","sourcesContent":["import { COMPONENT_TYPES, FORM_TYPES, GROUPS, PROP_TYPES, } from \"@draftbit/types\";\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: \"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"]}
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"]}
package/lib/module/components/Banner.js ADDED
@@ -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
package/lib/module/components/Banner.js.map ADDED
@@ -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"]}
package/lib/module/components/HeaderMedium.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["HeaderMedium.tsx"],"names":["React","withTheme","Header","HeaderMedium","Icon","title","buttonText","icon","onPress","style","theme","colors","typography","headline6","strong"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,SAAT,QAA0B,YAA1B;AAIA,OAAOC,MAAP,MAAmB,UAAnB;;AAYA,MAAMC,YAA6B,GAAG,QAQhC;AAAA,MARiC;AACrCC,IAAAA,IADqC;AAErCC,IAAAA,KAFqC;AAGrCC,IAAAA,UAHqC;AAIrCC,IAAAA,IAJqC;AAKrCC,IAAAA,OAAO,GAAG,MAAM,CAAE,CALmB;AAMrCC,IAAAA,KANqC;AAOrCC,IAAAA,KAAK,EAAE;AAAEC,MAAAA,MAAF;AAAUC,MAAAA;AAAV;AAP8B,GAQjC;AACJ,sBACE,oBAAC,MAAD;AACE,IAAA,IAAI,EAAER,IADR;AAEE,IAAA,cAAc,EAAEQ,UAAU,CAACC,SAF7B;AAGE,IAAA,UAAU,EAAEF,MAAM,CAACG,MAHrB;AAIE,IAAA,KAAK,EAAET,KAJT;AAKE,IAAA,UAAU,EAAEC,UALd;AAME,IAAA,IAAI,EAAEC,IANR;AAOE,IAAA,OAAO,EAAEC,OAPX;AAQE,IAAA,KAAK,EAAEC;AART,IADF;AAYD,CArBD;;AAuBA,eAAeR,SAAS,CAACE,YAAD,CAAxB","sourcesContent":["import * as React from \"react\";\nimport { withTheme } from \"../theming\";\nimport type { Theme } from \"../styles/DefaultTheme\";\nimport type { IconSlot } from \"../interfaces/Icon\";\n\nimport Header from \"./Header\";\nimport { StyleProp, ViewStyle } from \"react-native\";\n\ntype Props = {\n title: string;\n buttonText: string;\n icon: string;\n onPress?: () => void;\n style?: StyleProp<ViewStyle>;\n theme: Theme;\n} & IconSlot;\n\nconst HeaderMedium: React.FC<Props> = ({\n Icon,\n title,\n buttonText,\n icon,\n onPress = () => {},\n style,\n theme: { colors, typography },\n}) => {\n return (\n <Header\n Icon={Icon}\n titleTypeStyle={typography.headline6}\n titleColor={colors.strong}\n title={title}\n buttonText={buttonText}\n icon={icon}\n onPress={onPress}\n style={style}\n />\n );\n};\n\nexport default withTheme(HeaderMedium);\n"]}
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":"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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 { 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
+ {"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":"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,SAASH,OAAO,IAAII,MAApB,QAAkC,qBAAlC;AACA,SAASC,WAAT,EAAsBC,aAAtB,QAA2C,qBAA3C;AACA,SAASN,OAAO,IAAIO,MAApB,QAAkC,0BAAlC;AACA,SAASP,OAAO,IAAIQ,UAApB,QAAsC,yBAAtC;AACA,SAASR,OAAO,IAAIS,IAApB,QAAgC,mBAAhC;AACA,SAAST,OAAO,IAAIU,QAApB,QAAoC,uBAApC;AACA,SAASC,QAAT,EAAmBC,aAAnB,EAAkCC,WAAlC,QAAqD,uBAArD;AACA,SAASb,OAAO,IAAIc,WAApB,QAAuC,0BAAvC;AACA,SAASd,OAAO,IAAIe,SAApB,QAAqC,wBAArC;AACA,SAASf,OAAO,IAAIgB,OAApB,QAAmC,sBAAnC;AACA,SAAShB,OAAO,IAAIiB,GAApB,QAA+B,kBAA/B;AACA,SAASjB,OAAO,IAAIkB,kBAApB,QAA8C,iCAA9C;AACA,SAASlB,OAAO,IAAImB,UAApB,QAAsC,yBAAtC;AACA,SAASnB,OAAO,IAAIoB,KAApB,QAAiC,oBAAjC;AACA,SAASpB,OAAO,IAAIqB,WAApB,QAAuC,0BAAvC;AACA,SAASrB,OAAO,IAAIsB,eAApB,QAA2C,8BAA3C;AACA,SAAStB,OAAO,IAAIuB,UAApB,QAAsC,yBAAtC;AACA,SAASvB,OAAO,IAAIwB,OAApB,QAAmC,sBAAnC;AACA,SAASxB,OAAO,IAAIyB,MAApB,EAA4BC,SAA5B,QAA6C,qBAA7C;AACA,SAAS1B,OAAO,IAAI2B,SAApB,QAAqC,wBAArC;AACA,SAAS3B,OAAO,IAAI4B,YAApB,QAAwC,2BAAxC;AACA,SAAS5B,OAAO,IAAI6B,SAApB,QAAqC,wBAArC;AACA,SAASC,cAAT,EAAyBC,aAAzB,QAA8C,wBAA9C;AACA,SACEC,WADF,EAEEC,eAFF,EAGEC,iBAHF,QAIO,0BAJP;AAKA,SAASC,MAAT,EAAiBC,UAAjB,QAAmC,qBAAnC;AAEA,SACEC,MADF,EAEEC,MAFF,EAGEC,MAHF,EAIEC,GAJF,EAKEC,KALF,EAMEC,MANF,QAOO,qBAPP;AASA,SACEC,WADF,EAEEC,gBAFF,EAGEC,cAHF,EAIEC,qBAJF,QAKO,gCALP;AAOA;;AACA,SAAS9C,OAAO,IAAI+C,MAApB,QAAkC,+BAAlC;AACA,SAAS/C,OAAO,IAAIgD,SAApB,QAAqC,wBAArC;AACA,SAAShD,OAAO,IAAIiD,aAApB,QAAyC,4BAAzC;AACA,SAASjD,OAAO,IAAIkD,mBAApB,QAA+C,kCAA/C;AACA,SAASlD,OAAO,IAAImD,UAApB,QAAsC,yBAAtC;AACA,SAASnD,OAAO,IAAIoD,UAApB,QAAsC,oCAAtC;AACA,SAASpD,OAAO,IAAIqD,WAApB,QAAuC,0BAAvC;AACA,SAASrD,OAAO,IAAIsD,YAApB,QAAwC,2BAAxC;AACA,SAAStD,OAAO,IAAIuD,cAApB,QAA0C,6BAA1C;AACA,SAASvD,OAAO,IAAIwD,MAApB,QAAkC,4BAAlC;AACA,SAASxD,OAAO,IAAIyD,WAApB,QAAuC,0BAAvC;AACA,SAASzD,OAAO,IAAI0D,cAApB,QAA0C,6BAA1C;AACA,SAAS1D,OAAO,IAAI2D,WAApB,QAAuC,0BAAvC;AACA,SAAS3D,OAAO,IAAI4D,uBAApB,QAAmD,sCAAnD;AACA,SAAS5D,OAAO,IAAI6D,oBAApB,QAAgD,mCAAhD;AACA,SAAS7D,OAAO,IAAI8D,MAApB,QAAkC,qBAAlC;AACA,SAAS9D,OAAO,IAAI+D,OAApB,QAAmC,sBAAnC;AACA,SAASC,YAAT,QAA6B,2BAA7B","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"]}
package/lib/typescript/src/components/Banner.d.ts ADDED
@@ -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;
package/lib/typescript/src/index.d.ts 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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@draftbit/core",
3
- "version": "43.4.19",
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": "b7dc123fe175c842f27aafcab2b3df0bf000f9d7"
83
+ "gitHead": "eef94af0b92f27fd97ed272312832c4c5505af42"
84
84
  }
package/src/components/Banner.js ADDED
@@ -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);
package/src/components/Banner.tsx ADDED
@@ -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";