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 _Text = _interopRequireDefault(require("./Typography/Text"));
|
15 |
|
16 | var _Button = _interopRequireDefault(require("./Button"));
|
17 |
|
18 | var _Icon = _interopRequireDefault(require("./Icon"));
|
19 |
|
20 | var _theming = require("../core/theming");
|
21 |
|
22 | var _shadow = _interopRequireDefault(require("../styles/shadow"));
|
23 |
|
24 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
25 |
|
26 | function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
|
27 |
|
28 | function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
|
29 |
|
30 | 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); }
|
31 |
|
32 | const ELEVATION = 1;
|
33 | const DEFAULT_MAX_WIDTH = 960;
|
34 |
|
35 |
|
36 |
|
37 |
|
38 |
|
39 |
|
40 |
|
41 |
|
42 |
|
43 |
|
44 |
|
45 |
|
46 |
|
47 |
|
48 |
|
49 |
|
50 |
|
51 |
|
52 |
|
53 |
|
54 |
|
55 |
|
56 |
|
57 |
|
58 |
|
59 |
|
60 |
|
61 |
|
62 |
|
63 |
|
64 |
|
65 |
|
66 |
|
67 |
|
68 |
|
69 |
|
70 |
|
71 |
|
72 |
|
73 |
|
74 |
|
75 |
|
76 |
|
77 |
|
78 |
|
79 |
|
80 |
|
81 |
|
82 |
|
83 | const Banner = ({
|
84 | visible,
|
85 | icon,
|
86 | children,
|
87 | actions,
|
88 | contentStyle,
|
89 | style,
|
90 | theme,
|
91 | ...rest
|
92 | }) => {
|
93 | const {
|
94 | current: position
|
95 | } = React.useRef(new _reactNative.Animated.Value(visible ? 1 : 0));
|
96 | const [layout, setLayout] = React.useState({
|
97 | height: 0,
|
98 | measured: false
|
99 | });
|
100 | const {
|
101 | scale
|
102 | } = theme.animation;
|
103 | React.useEffect(() => {
|
104 | if (visible) {
|
105 |
|
106 | _reactNative.Animated.timing(position, {
|
107 | duration: 250 * scale,
|
108 | toValue: 1,
|
109 | useNativeDriver: false
|
110 | }).start();
|
111 | } else {
|
112 |
|
113 | _reactNative.Animated.timing(position, {
|
114 | duration: 200 * scale,
|
115 | toValue: 0,
|
116 | useNativeDriver: false
|
117 | }).start();
|
118 | }
|
119 | }, [visible, position, scale]);
|
120 |
|
121 | const handleLayout = ({
|
122 | nativeEvent
|
123 | }) => {
|
124 | const {
|
125 | height
|
126 | } = nativeEvent.layout;
|
127 | setLayout({
|
128 | height,
|
129 | measured: true
|
130 | });
|
131 | };
|
132 |
|
133 |
|
134 |
|
135 |
|
136 |
|
137 |
|
138 |
|
139 |
|
140 | const height = _reactNative.Animated.multiply(position, layout.height);
|
141 |
|
142 | const translateY = _reactNative.Animated.multiply(_reactNative.Animated.add(position, -1), layout.height);
|
143 |
|
144 | return React.createElement(_Surface.default, _extends({}, rest, {
|
145 | style: [styles.container, (0, _shadow.default)(ELEVATION), style]
|
146 | }), React.createElement(_reactNative.View, {
|
147 | style: [styles.wrapper, contentStyle]
|
148 | }, React.createElement(_reactNative.Animated.View, {
|
149 | style: {
|
150 | height
|
151 | }
|
152 | }), React.createElement(_reactNative.Animated.View, {
|
153 | onLayout: handleLayout,
|
154 | style: [layout.measured || !visible ?
|
155 |
|
156 | [styles.absolute, {
|
157 | transform: [{
|
158 | translateY
|
159 | }]
|
160 | }] :
|
161 | null, !layout.measured && !visible ?
|
162 |
|
163 | {
|
164 | opacity: 0
|
165 | } : null]
|
166 | }, React.createElement(_reactNative.View, {
|
167 | style: styles.content
|
168 | }, icon ? React.createElement(_reactNative.View, {
|
169 | style: styles.icon
|
170 | }, React.createElement(_Icon.default, {
|
171 | source: icon,
|
172 | size: 40
|
173 | })) : null, React.createElement(_Text.default, {
|
174 | style: styles.message
|
175 | }, children)), React.createElement(_reactNative.View, {
|
176 | style: styles.actions
|
177 | }, actions.map(({
|
178 | label,
|
179 | ...others
|
180 | }, i) => React.createElement(_Button.default, _extends({
|
181 | key:
|
182 |
|
183 | i,
|
184 | compact: true,
|
185 | mode: "text",
|
186 | style: styles.button
|
187 | }, others), label))))));
|
188 | };
|
189 |
|
190 | const styles = _reactNative.StyleSheet.create({
|
191 | container: {
|
192 | elevation: ELEVATION
|
193 | },
|
194 | wrapper: {
|
195 | overflow: 'hidden',
|
196 | alignSelf: 'center',
|
197 | width: '100%',
|
198 | maxWidth: DEFAULT_MAX_WIDTH
|
199 | },
|
200 | absolute: {
|
201 | position: 'absolute',
|
202 | top: 0,
|
203 | width: '100%'
|
204 | },
|
205 | content: {
|
206 | flexDirection: 'row',
|
207 | justifyContent: 'flex-start',
|
208 | marginHorizontal: 8,
|
209 | marginTop: 16,
|
210 | marginBottom: 0
|
211 | },
|
212 | icon: {
|
213 | margin: 8
|
214 | },
|
215 | message: {
|
216 | flex: 1,
|
217 | margin: 8
|
218 | },
|
219 | actions: {
|
220 | flexDirection: 'row',
|
221 | justifyContent: 'flex-end',
|
222 | margin: 4
|
223 | },
|
224 | button: {
|
225 | margin: 4
|
226 | }
|
227 | });
|
228 |
|
229 | var _default = (0, _theming.withTheme)(Banner);
|
230 |
|
231 | exports.default = _default;
|
232 |
|
\ | No newline at end of file |