react95-native/dist/module/components/Snackbar/Snackbar.js

Refreshed Windows 95 style UI components for your React Native app

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); }

import * as React from 'react';
import { Animated, SafeAreaView, StyleSheet, View, ImageBackground, TouchableOpacity } from 'react-native';
import { withTheme } from '../../core/theming';
import { Text } from '../..';
const DURATION_SHORT = 4000;
const DURATION_MEDIUM = 7000;
const DURATION_LONG = 10000;
const shadowOffset = 8;
const radius = 4;

const Snackbar = ({
  visible,
  action,
  duration = DURATION_MEDIUM,
  onDismiss,
  children,
  wrapperStyle,
  style,
  theme,
  ...rest
}) => {
  const {
    current: opacity
  } = React.useRef(new Animated.Value(0.0));
  const [hidden, setHidden] = React.useState(!visible);
  const hideTimeout = React.useRef(undefined);
  const scale = 0.5;
  React.useEffect(() => {
    return () => {
      if (hideTimeout.current) clearTimeout(hideTimeout.current);
    };
  }, []);
  React.useLayoutEffect(() => {
    if (visible) {
      // show
      if (hideTimeout.current) clearTimeout(hideTimeout.current);
      setHidden(false);
      Animated.timing(opacity, {
        toValue: 1,
        duration: 200 * scale,
        useNativeDriver: true
      }).start(({
        finished
      }) => {
        if (finished) {
          const isInfinity = duration === Number.POSITIVE_INFINITY || duration === Number.NEGATIVE_INFINITY;

          if (finished && !isInfinity) {
            hideTimeout.current = setTimeout(onDismiss, duration);
          }
        }
      });
    } else {
      // hide
      if (hideTimeout.current) clearTimeout(hideTimeout.current);
      Animated.timing(opacity, {
        toValue: 0,
        duration: 100 * scale,
        useNativeDriver: true
      }).start(({
        finished
      }) => {
        if (finished) setHidden(true);
      });
    }
  }, [visible, duration, opacity, scale, onDismiss]);
  if (hidden) return null;
  return /*#__PURE__*/React.createElement(SafeAreaView, {
    pointerEvents: "box-none",
    style: [styles.wrapper, wrapperStyle]
  }, /*#__PURE__*/React.createElement(Animated.View, _extends({
    pointerEvents: "box-none",
    accessibilityLiveRegion: "polite" // TODO: fix this TS error
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    ,
    style: [styles.container, {
      opacity,
      transform: [{
        scale: visible ? opacity.interpolate({
          inputRange: [0, 1],
          outputRange: [0.9, 1]
        }) : 1
      }]
    }, style]
  }, rest), /*#__PURE__*/React.createElement(View, {
    style: styles.inner
  }, /*#__PURE__*/React.createElement(View, {
    style: styles.shadow
  }, /*#__PURE__*/React.createElement(ImageBackground, {
    style: [{
      width: '100%',
      height: '100%'
    }],
    imageStyle: {
      resizeMode: 'repeat'
    },
    source: {
      uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQoU2NkYGD4z4AKGJG5IA4dFKA5AdVKFAdBVaK4iXIFAEiuCAWq9MdHAAAAAElFTkSuQmCC'
    }
  })), /*#__PURE__*/React.createElement(View, {
    style: [styles.card, {
      backgroundColor: theme.tooltip,
      borderColor: theme.borderDarkest
    }]
  }, /*#__PURE__*/React.createElement(Text, {
    style: [styles.content, {
      marginRight: action ? 0 : 16
    }]
  }, children), action ? /*#__PURE__*/React.createElement(TouchableOpacity, {
    activeOpacity: 0.4,
    accessibilityLabel: action.accessibilityLabel,
    onPress: () => {
      action.onPress();
      onDismiss();
    },
    style: styles.button
  }, /*#__PURE__*/React.createElement(Text, {
    bold: true,
    style: styles.buttonText
  }, action.label)) : null))));
};

Snackbar.DURATION_SHORT = DURATION_SHORT;
Snackbar.DURATION_MEDIUM = DURATION_MEDIUM;
Snackbar.DURATION_LONG = DURATION_LONG;
const styles = StyleSheet.create({
  wrapper: {
    position: 'absolute',
    bottom: 0,
    width: '100%'
  },
  container: {
    margin: 16
  },
  content: {
    marginLeft: 16,
    marginVertical: 16
  },
  button: {
    marginHorizontal: 8,
    marginVertical: 8,
    textTransform: 'uppercase',
    alignSelf: 'flex-end',
    height: 36,
    paddingHorizontal: 8,
    alignContent: 'center',
    justifyContent: 'center'
  },
  buttonText: {
    textTransform: 'uppercase'
  },
  inner: {
    flex: 1,
    marginRight: shadowOffset,
    marginBottom: shadowOffset
  },
  card: {
    borderWidth: 2,
    borderRadius: radius,
    flexWrap: 'wrap',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  shadow: {
    position: 'absolute',
    top: shadowOffset,
    left: shadowOffset,
    overflow: 'hidden',
    borderRadius: radius,
    width: '100%',
    height: '100%'
  }
});
export default withTheme(Snackbar);
//# sourceMappingURL=Snackbar.js.map