DropDown.js 2.96 KB
Newer Older
Giang Tran committed
1 2 3 4 5 6 7 8 9 10 11 12 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 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92
import React, {useRef, useEffect, useState} from 'react';
import {StyleSheet, SafeAreaView, Text, View} from 'react-native';
import {
  PURPLE_COLOR,
  WHITE_COLOR,
  ITEMS,
  ReactNativeLogo,
  InfoIcon,
} from './constants';
import List from './List';
import DropdownAlert from 'react-native-dropdownalert';

const DropDown = () => {
  const [queueSize, setQueueSize] = useState(0);
  let dropDownAlertRef = useRef(null);

  useEffect(() => {
    dropDownAlertRef.alertWithType('error', 'ads', 'message');
  }, []);

  const _onProgrammaticClose = () => {
    dropDownAlertRef.closeAction();
  };
  const _onProgrammaticClear = () => {
    dropDownAlertRef.clearQueue();
  };
  const _showAlertQueue = () => {
    const types = ['info', 'warn', 'error', 'success', 'custom'];
    const message =
      'Officia eu do labore incididunt consequat sunt sint ullamco cillum.';
    let count = 1;
    types.map((type) => {
      dropDownAlertRef.alertWithType(
        type,
        `Alert ${count} of ${types.length}`,
        message,
      );
      count++;
    });
  };

  const _onSelect = ({item}) => {
    switch (item.type) {
      case 'close':
        _onProgrammaticClose();
        break;
      case 'clear':
        _onProgrammaticClear();
        break;
      case 'show':
        _showAlertQueue();
        break;
      default:
        const inMilliSeconds = Math.floor(Math.random() * 4000 + 1);
        const inSeconds = (inMilliSeconds / 1000).toFixed(2);
        const title = `${item.type} closes in ${inSeconds}s`;
        let payload;
        if (item.type === 'custom') {
          // example using remote image source in payload
          payload = {source: ReactNativeLogo};
        } else if (item.type === 'info') {
          // example using local image source in payload
          payload = {source: InfoIcon};
        }
        dropDownAlertRef.alertWithType(
          item.type,
          title,
          item.message,
          payload,
          inMilliSeconds,
        );
    }
    _updateQueueSize();
  };

  const _onClose = (data) => {
    console.log(data);
    _updateQueueSize();
  };
  const _onCancel = (data) => {
    console.log(data);
    _updateQueueSize();
  };
  const _onTap = (data) => {
    console.log(data);
    _updateQueueSize();
  };
  const _updateQueueSize = () => {
    setQueueSize(dropDownAlertRef.getQueueSize());
  };

  return (
Giang Tran committed
93 94 95 96 97 98 99 100 101 102 103 104 105 106
    <DropdownAlert
      ref={(ref) => {
        if (ref) {
          dropDownAlertRef = ref;
        }
      }}
      containerStyle={styles.content}
      showCancel={true}
      onCancel={_onCancel}
      onTap={_onTap}
      titleNumOfLines={2}
      messageNumOfLines={0}
      onClose={_onClose}
    />
Giang Tran committed
107 108 109 110 111 112 113 114 115 116
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: WHITE_COLOR,
    justifyContent: 'center',
  },
  content: {
    backgroundColor: PURPLE_COLOR,
Giang Tran committed
117
    zIndex: 10,
Giang Tran committed
118 119 120 121 122 123 124 125 126 127
  },
  size: {
    textAlign: 'center',
    fontSize: 26,
    fontWeight: 'bold',
    marginVertical: 8,
  },
});

export default DropDown;