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 { View, StyleSheet, Animated } from 'react-native';
|
5 | import Surface from './Surface';
|
6 | import Text from './Typography/Text';
|
7 | import Button from './Button';
|
8 | import Icon from './Icon';
|
9 | import { withTheme } from '../core/theming';
|
10 | import shadow from '../styles/shadow';
|
11 | const ELEVATION = 1;
|
12 | const DEFAULT_MAX_WIDTH = 960;
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 |
|
26 |
|
27 |
|
28 |
|
29 |
|
30 |
|
31 |
|
32 |
|
33 |
|
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 | const Banner = _ref => {
|
63 | let {
|
64 | visible,
|
65 | icon,
|
66 | children,
|
67 | actions,
|
68 | contentStyle,
|
69 | style,
|
70 | theme,
|
71 | onShowAnimationFinished = () => {},
|
72 | onHideAnimationFinished = () => {},
|
73 | ...rest
|
74 | } = _ref;
|
75 | const {
|
76 | current: position
|
77 | } = React.useRef(new Animated.Value(visible ? 1 : 0));
|
78 | const [layout, setLayout] = React.useState({
|
79 | height: 0,
|
80 | measured: false
|
81 | });
|
82 | const {
|
83 | scale
|
84 | } = theme.animation;
|
85 | React.useEffect(() => {
|
86 | if (visible) {
|
87 |
|
88 | Animated.timing(position, {
|
89 | duration: 250 * scale,
|
90 | toValue: 1,
|
91 | useNativeDriver: false
|
92 | }).start(onShowAnimationFinished);
|
93 | } else {
|
94 |
|
95 | Animated.timing(position, {
|
96 | duration: 200 * scale,
|
97 | toValue: 0,
|
98 | useNativeDriver: false
|
99 | }).start(onHideAnimationFinished);
|
100 | }
|
101 | }, [visible, position, scale]);
|
102 |
|
103 | const handleLayout = _ref2 => {
|
104 | let {
|
105 | nativeEvent
|
106 | } = _ref2;
|
107 | const {
|
108 | height
|
109 | } = nativeEvent.layout;
|
110 | setLayout({
|
111 | height,
|
112 | measured: true
|
113 | });
|
114 | };
|
115 |
|
116 |
|
117 |
|
118 |
|
119 |
|
120 |
|
121 |
|
122 |
|
123 | const height = Animated.multiply(position, layout.height);
|
124 | const translateY = Animated.multiply(Animated.add(position, -1), layout.height);
|
125 | return React.createElement(Surface, _extends({}, rest, {
|
126 | style: [styles.container, shadow(ELEVATION), style],
|
127 | theme: theme
|
128 | }), React.createElement(View, {
|
129 | style: [styles.wrapper, contentStyle]
|
130 | }, React.createElement(Animated.View, {
|
131 | style: {
|
132 | height
|
133 | }
|
134 | }), React.createElement(Animated.View, {
|
135 | onLayout: handleLayout,
|
136 | style: [layout.measured || !visible ?
|
137 |
|
138 | [styles.absolute, {
|
139 | transform: [{
|
140 | translateY
|
141 | }]
|
142 | }] :
|
143 | null, !layout.measured && !visible ?
|
144 |
|
145 | {
|
146 | opacity: 0
|
147 | } : null]
|
148 | }, React.createElement(View, {
|
149 | style: styles.content
|
150 | }, icon ? React.createElement(View, {
|
151 | style: styles.icon
|
152 | }, React.createElement(Icon, {
|
153 | source: icon,
|
154 | size: 40
|
155 | })) : null, React.createElement(Text, {
|
156 | style: [styles.message, {
|
157 | color: theme.colors.text
|
158 | }],
|
159 | accessibilityLiveRegion: visible ? 'polite' : 'none',
|
160 | accessibilityRole: "alert"
|
161 | }, children)), React.createElement(View, {
|
162 | style: styles.actions
|
163 | }, actions.map((_ref3, i) => {
|
164 | let {
|
165 | label,
|
166 | ...others
|
167 | } = _ref3;
|
168 | return React.createElement(Button, _extends({
|
169 | key:
|
170 |
|
171 | i,
|
172 | compact: true,
|
173 | mode: "text",
|
174 | style: styles.button,
|
175 | color: theme.colors.primary
|
176 | }, others), label);
|
177 | })))));
|
178 | };
|
179 |
|
180 | const styles = StyleSheet.create({
|
181 | container: {
|
182 | elevation: ELEVATION
|
183 | },
|
184 | wrapper: {
|
185 | overflow: 'hidden',
|
186 | alignSelf: 'center',
|
187 | width: '100%',
|
188 | maxWidth: DEFAULT_MAX_WIDTH
|
189 | },
|
190 | absolute: {
|
191 | position: 'absolute',
|
192 | top: 0,
|
193 | width: '100%'
|
194 | },
|
195 | content: {
|
196 | flexDirection: 'row',
|
197 | justifyContent: 'flex-start',
|
198 | marginHorizontal: 8,
|
199 | marginTop: 16,
|
200 | marginBottom: 0
|
201 | },
|
202 | icon: {
|
203 | margin: 8
|
204 | },
|
205 | message: {
|
206 | flex: 1,
|
207 | margin: 8
|
208 | },
|
209 | actions: {
|
210 | flexDirection: 'row',
|
211 | justifyContent: 'flex-end',
|
212 | margin: 4
|
213 | },
|
214 | button: {
|
215 | margin: 4
|
216 | }
|
217 | });
|
218 | export default withTheme(Banner);
|
219 |
|
\ | No newline at end of file |