@tra-tech/react-native-kitra/lib/module/core/notification/notification.js

UI kit for React Native

import { LinearGradient } from 'expo-linear-gradient';
import React, { useMemo, useState } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import Animated, { FadeOut, Layout, LightSpeedInLeft } from 'react-native-reanimated';
import IoniconsIcon from '../../components/Icons/Ionicons';
import useTheme from '../hooks/useTheme';
import useTypograpghy from '../hooks/useTypography';
const messageTypes = {
  SUCCESS: {
    backgroundColor: '#09CE63',
    icon: 'checkmark'
  },
  WARNING: {
    backgroundColor: '#FFD234',
    icon: 'alert'
  },
  ERROR: {
    backgroundColor: '#FF3434',
    icon: 'close'
  },
  INFO: {
    backgroundColor: '#67A7C1',
    icon: 'information'
  }
};
const NotificationContext = /*#__PURE__*/React.createContext({});
const NotificationProvider = _ref => {
  let {
    children,
    limit = 3,
    messageType = messageTypes,
    linearMessageType,
    containerStyle
  } = _ref;
  const [queue, setQueue] = useState([{
    type: '',
    message: '',
    header: ''
  }]);
  const {
    theme,
    colorScheme
  } = useTheme();
  const {
    typography
  } = useTypograpghy();
  const showNotification = item => {
    pushQueue(item);
  };
  const pushQueue = item => {
    setTimeout(() => {
      setQueue(prev => {
        limit <= prev.length ? popQueue(1) : popQueue();
        if (prev.length > 0) popQueue();
        return [{
          ...item,
          keyID: Math.random()
        }, ...prev];
      });
    }, 100);
  };
  const popQueue = function () {
    let duration = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 5000;
    setTimeout(() => {
      setQueue(prev => {
        const newQueue = [...prev];
        if (newQueue.length) {
          newQueue.pop();
          return newQueue;
        }
        return [...prev];
      });
    }, duration);
  };
  const contextValue = useMemo(() => ({
    showNotification
  }), []);
  function onPress(index) {
    const queueTemp = [...queue];
    queueTemp.splice(index, 1);
    setQueue(queueTemp);
  }
  return (
    /*#__PURE__*/
    // @ts-ignore
    React.createElement(NotificationContext.Provider, {
      value: contextValue
    }, children, queue.map((item, index) => {
      var _messageType$item$typ, _linearMessageType$it, _linearMessageType$it2, _linearMessageType$it3, _linearMessageType$it4, _linearMessageType$it5, _messageType$item$typ2;
      return /*#__PURE__*/React.createElement(Animated.View, {
        key: item.keyID || index,
        entering: LightSpeedInLeft,
        exiting: FadeOut,
        layout: Layout.springify(),
        style: [styles.itemContainer, {
          alignSelf: 'center',
          top: 150
        }, containerStyle, {
          position: 'absolute',
          backgroundColor: !linearMessageType ? (_messageType$item$typ = messageType[item === null || item === void 0 ? void 0 : item.type]) === null || _messageType$item$typ === void 0 ? void 0 : _messageType$item$typ.backgroundColor : 'transparent',
          marginTop: 110 * (index - 1)
        }]
      }, /*#__PURE__*/React.createElement(TouchableOpacity, {
        style: {
          flexDirection: 'row',
          flex: 1
        },
        onPress: () => onPress(index)
      }, linearMessageType && item.type && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LinearGradient, {
        colors: ((_linearMessageType$it = linearMessageType(theme, colorScheme)[item === null || item === void 0 ? void 0 : item.type]) === null || _linearMessageType$it === void 0 ? void 0 : _linearMessageType$it.backgroundColor.color) || [],
        locations: (_linearMessageType$it2 = linearMessageType(theme, colorScheme)[item === null || item === void 0 ? void 0 : item.type]) === null || _linearMessageType$it2 === void 0 ? void 0 : _linearMessageType$it2.backgroundColor.location,
        start: {
          x: 0.3,
          y: 0.7
        },
        end: {
          x: 1,
          y: 0
        },
        style: [styles.linearConteiner]
      }), /*#__PURE__*/React.createElement(LinearGradient, {
        colors: ((_linearMessageType$it3 = linearMessageType(theme, colorScheme)[item === null || item === void 0 ? void 0 : item.type]) === null || _linearMessageType$it3 === void 0 ? void 0 : _linearMessageType$it3.backgroundColor.bottomColor) || [],
        locations: (_linearMessageType$it4 = linearMessageType(theme, colorScheme)[item === null || item === void 0 ? void 0 : item.type]) === null || _linearMessageType$it4 === void 0 ? void 0 : _linearMessageType$it4.backgroundColor.bottomLocation,
        start: {
          x: 0.3,
          y: 0.7
        },
        end: {
          x: 1,
          y: 0
        },
        style: [styles.linearConteiner, {
          height: 102,
          zIndex: 10
        }]
      })), linearMessageType ? /*#__PURE__*/React.createElement(View, {
        style: styles.iconContainer
      }, (_linearMessageType$it5 = linearMessageType(theme, colorScheme)[item === null || item === void 0 ? void 0 : item.type]) === null || _linearMessageType$it5 === void 0 ? void 0 : _linearMessageType$it5.icon) : /*#__PURE__*/React.createElement(View, {
        style: [styles.iconContainer, {
          backgroundColor: theme === null || theme === void 0 ? void 0 : theme.white
        }]
      }, /*#__PURE__*/React.createElement(IoniconsIcon, {
        name: (_messageType$item$typ2 = messageType[item === null || item === void 0 ? void 0 : item.type]) === null || _messageType$item$typ2 === void 0 ? void 0 : _messageType$item$typ2.icon,
        size: 15
      })), /*#__PURE__*/React.createElement(View, {
        style: {
          flex: 1,
          zIndex: 100
        }
      }, /*#__PURE__*/React.createElement(Text, {
        ellipsizeMode: "middle",
        numberOfLines: 3,
        style: [styles.headerText, {
          color: theme.white
        }]
      }, (item === null || item === void 0 ? void 0 : item.header) || (item === null || item === void 0 ? void 0 : item.type)), /*#__PURE__*/React.createElement(Text, {
        ellipsizeMode: "middle",
        numberOfLines: 3,
        style: [styles.descText, {
          color: theme.white
        }]
      }, item === null || item === void 0 ? void 0 : item.message))));
    }))
  );
};
export { NotificationProvider, NotificationContext };
const styles = StyleSheet.create({
  itemContainer: {
    alignItems: 'center',
    width: '100%',
    paddingHorizontal: 24,
    zIndex: 100,
    height: 100,
    borderRadius: 10
  },
  linearConteiner: {
    alignItems: 'center',
    position: 'absolute',
    width: '100%',
    height: 100,
    borderRadius: 10,
    zIndex: 20
  },
  iconContainer: {
    zIndex: 100,
    marginTop: 21,
    marginLeft: 18,
    width: 28,
    height: 28,
    borderRadius: 100,
    alignItems: 'center',
    justifyContent: 'center'
  },
  headerText: {
    fontWeight: '500',
    marginTop: 17,
    paddingHorizontal: 20
  },
  descText: {
    fontWeight: '400',
    marginTop: 6,
    paddingHorizontal: 20
  }
});
//# sourceMappingURL=notification.js.map