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

Refreshed Windows 95 style UI components for your React Native app

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var React = _interopRequireWildcard(require("react"));

var _reactNative = require("react-native");

var _theming = require("../../core/theming");

var _ = require("../..");

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }

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

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

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 _reactNative.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);

      _reactNative.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);

      _reactNative.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(_reactNative.SafeAreaView, {
    pointerEvents: "box-none",
    style: [styles.wrapper, wrapperStyle]
  }, /*#__PURE__*/React.createElement(_reactNative.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(_reactNative.View, {
    style: styles.inner
  }, /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.shadow
  }, /*#__PURE__*/React.createElement(_reactNative.ImageBackground, {
    style: [{
      width: '100%',
      height: '100%'
    }],
    imageStyle: {
      resizeMode: 'repeat'
    },
    source: {
      uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQoU2NkYGD4z4AKGJG5IA4dFKA5AdVKFAdBVaK4iXIFAEiuCAWq9MdHAAAAAElFTkSuQmCC'
    }
  })), /*#__PURE__*/React.createElement(_reactNative.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(_reactNative.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 = _reactNative.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%'
  }
});

var _default = (0, _theming.withTheme)(Snackbar);

exports.default = _default;
//# sourceMappingURL=Snackbar.js.map