实施代码

import Confirm from './Confirm';
import DateFilter from './DateFilter';

//
export {Confirm, DateFilter};

import React from 'react';
import {Dimensions, TouchableOpacity, View} from 'react-native';
import RootSiblingsManager from 'react-native-root-siblings';

const {width, height} = Dimensions.get('window');

/**
 * 弹窗管理类
 * - 支持同时弹出多个弹窗 （Modal、rn-global-modal 不支持）
 * - 不会遮挡Toast（Modal、rn-global-modal 会遮挡Toast）
 */
class ModalManger extends React.Component {
  static modalNodes = {}; // { key1: { rootNode: <A/>, onClose: () => {} }, key2: { rootNode: <B/>, onClose: () => {} }

  /**
   * 展示弹窗
   * @param options
   * @param modalView                      弹窗内所要展示的内容组件
   * @param {*} options.key                **必传** 弹窗唯一标识
   * @param {*} options.maskStyle          蒙层样式 默认值：{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }
   * @param {*} options.maskTouchClosable  弹窗蒙层是否可点击关闭
   * @param {*} options.closedCallback     弹窗关闭的回调
   * @param {*} options.animationType      弹窗动画类型: none | fade | slide-up
   */
  static show(modalView, options) {
    const {key, maskTouchClosable, closedCallback, maskStyle} = options;

    let rootNode;
    const onClose = () => {
      rootNode?.destroy();
      rootNode = null;
      closedCallback?.();
    };

    rootNode = new RootSiblingsManager(
      (
        <View
      style={[
      {
        position: 'absolute',
        width: width,
        height: height,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba(0,0,0,0.5)',
      },
      maskStyle,
      ]}
      >
      <TouchableOpacity

    style={{
      position: 'absolute',
      width: width,
      height: height,
    }}

  activeOpacity={1}
  onPress={(e) => {
    maskTouchClosable && this.hide(key);
  }}
  />
  {modalView}
  </View>
  )
  );
  this.modalNodes[key] = {rootNode, onClose};

  console.log('this.modalNodes:::', key);
}

static hide(key) {
  console.log(
    'this.modalNodes?.[key]?.onClose::',
    key
  );
  this.modalNodes?.[key]?.onClose?.();
  delete this.modalNodes[key];
}
}

export default ModalManger;

import React from 'react';

import ModalManger from './ModalManger';
import {View, Text, TouchableOpacity, StyleSheet} from 'react-native';
import {scaleSizeW} from '../../src/Utils/AdapterUtil';
import MyIcon from '../MyIcon/MyIcon';
import * as Animatable from 'react-native-animatable';

export default class Confirm extends React.Component {

  static show(msg = '', {
    cancelText = '取消',
    confirmText = '确定',
    maskTouchClosable = false,
    cancelCallback,
    confirmCallback
  }) {
    // 随机数
    const randomNum = Math.floor(Math.random() * (100000 - 1) + 1);
    const moduleKey = ConfirmModuleView.name + randomNum;

    let callback = confirmCallback;
    const onCancel = () => {
      callback = cancelCallback;
      Confirm.hide(moduleKey);
    };

    const onConfirm = () => {
      callback = confirmCallback;
      Confirm.hide(moduleKey);
    };

    ModalManger.show(
      <ConfirmModuleView
        msg={msg}
        cancelText={cancelText}
        confirmText={confirmText}
        cancelCallback={onCancel}
        confirmCallback={onConfirm}
      />, {
        key: moduleKey,
        maskTouchClosable: maskTouchClosable,
        closedCallback: () => {
          callback && callback();
        },
      });
  }

  static hide(moduleKey) {
    ModalManger.hide(moduleKey);
  }
}

const ConfirmModuleView = ({msg, cancelText = '取消', confirmText = '确定', cancelCallback, confirmCallback}) => {
  return (
    <Animatable.View
      useNativeDriver={true}
      animation="zoomIn"
      duration={300}
    >
      <View style={styles.container}>
        <View style={styles.content}>
          <MyIcon name="icon_warning" size={20} color="#F48832"/>
          <Text style={styles.text}>{msg}</Text>
        </View>
        <View style={styles.btnBox}>
          <TouchableOpacity
            style={styles.btnView}
            onPress={cancelCallback}
          >
            <Text style={styles.cancelText}>{cancelText}</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={[styles.btnView, styles.confirmView]}
            onPress={confirmCallback}
          >
            <Text style={styles.confirmText}>{confirmText}</Text>
          </TouchableOpacity>
        </View>
      </View>
    </Animatable.View>
  );
};

const styles = StyleSheet.create({
  container: {
    width: '80%',
    backgroundColor: '#fff',
    borderRadius: scaleSizeW(16),
  },
  content: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingLeft: scaleSizeW(40),
    paddingRight: scaleSizeW(60),
    paddingTop: scaleSizeW(40),
    paddingVertical: scaleSizeW(20),
  },
  text: {
    color: '#333333',
    fontSize: scaleSizeW(28),
    marginLeft: scaleSizeW(20),
    lineHeight: scaleSizeW(48),
  },
  btnBox: {
    height: scaleSizeW(92),
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'space-between',
    borderTopWidth: scaleSizeW(1),
    borderTopColor: '#F2F3F5'
  },
  btnView: {
    width: '50%',
    height: '100%',
    alignItems: 'center',
    justifyContent: 'center',
  },
  confirmView: {
    borderLeftWidth: scaleSizeW(1),
    borderLeftColor: '#F2F3F5'
  },
  cancelText: {
    color: '#2C87FC',
    fontSize: scaleSizeW(24),
  },
  confirmText: {
    color: '#1D212A',
    fontSize: scaleSizeW(24),
  }
});

/**
 * 日期筛选组件
 * 模式一：使用默认结构 icon
 * 模式二：使用自定义结构 view
 * 模式三：调用静态方法 show
 * */

import React, {useEffect, useState, Component} from 'react';
import ModalManger from './ModalManger';
import {TouchableOpacity, View, StyleSheet, Text, Dimensions} from 'react-native';
import MyIcon from '../MyIcon/MyIcon';
import * as Animatable from 'react-native-animatable';
import {isEmpty, scaleSizeW} from '../../src/Utils/AdapterUtil';
import DateTimePickerModal from 'react-native-modal-datetime-picker';
import moment from 'moment';
import Toast from 'react-native-root-toast';

const {width} = Dimensions.get('window');

class DateFilter extends Component {
  constructor(props) {
    super(props);
  }

  static show(options) {
    this.onPress(options);
  }

  static onPress = (options) => {
    const {
      cancelText = '清空',
      confirmText = '确定',
      cancelCallback,
      confirmCallback,
      maskTouchClosable = true,
      initialDate,
    } = options;

    // 随机数
    const randomNum = Math.floor(Math.random() * (100000 - 1) + 1);
    const moduleKey = ModalManger.name + randomNum;

    let callback = null;
    const onCancel = (date) => {
      callback = cancelCallback && cancelCallback(date);
      ModalManger.hide(moduleKey);
    };

    const onConfirm = (date) => {
      const {start_date, end_date} = date;
      if ((start_date && end_date) || (!start_date && !end_date)) {
        callback = confirmCallback && confirmCallback(date);
        ModalManger.hide(moduleKey);
      } else {
        return Toast.show('请选择开始日期或结束日期');
      }
    };

    ModalManger.show(
      <ModalView
        initialDate={initialDate}
        cancelText={cancelText}
        confirmText={confirmText}
        cancelCallback={onCancel}
        confirmCallback={onConfirm}
      />, {
        key: moduleKey,
        maskTouchClosable: maskTouchClosable,
        maskStyle: {justifyContent: 'flex-end'},
        closedCallback: (e) => {
          callback && callback(e);
        },
      });
  };

  render() {
    const {view} = this.props;
    return (
      <TouchableOpacity onPress={() => DateFilter.onPress(this.props)}>
        {
          view ? (
            view
          ) : (
            <MyIcon name={'filtrate'} size={20} color="#1E1E1E"/>
          )
        }
      </TouchableOpacity>
    );
  }
}

export default DateFilter;

const ModalView = (props) => {
  const {cancelText, confirmText, cancelCallback, confirmCallback, initialDate} = props;

  const [state, setState] = useState({
    start_date: '',
    end_date: ''
  });
  const [currentIndex, setCurrentIndex] = useState(-1);
  const [currentType, setCurrentType] = useState('start_date');
  const [timePickerVisible, setTimePickerVisible] = useState(false);
  const [initialTimeValue, setInitTimeValue] = useState(new Date());

  useEffect(() => {
    if (isEmpty(initialDate)) {
      return;
    }
    setState({...initialDate});
  }, [initialDate]);

  useEffect(() => {
    const {start_date, end_date} = state;
    if (end_date !== moment().format('YYYY-MM-DD')) {
      return;
    }
    // 今天
    if (start_date === moment().format('YYYY-MM-DD')) {
      setCurrentIndex(0);
    }
    // 本周
    if (start_date === moment().subtract(7, 'days').format('YYYY-MM-DD')) {
      setCurrentIndex(1);
    }
    // 本月
    if (start_date === moment().subtract(1, 'months').format('YYYY-MM-DD')) {
      setCurrentIndex(2);
    }
  }, [state]);

  // 显示选择日期
  const onChooseDate = (type) => {
    setCurrentType(type);
    setTimePickerVisible(true);
    let initDate = new Date();
    if (type === 'start_date') {
      initDate = state.start_date ? new Date(moment(state.start_date).year(), moment(state.start_date).month(), moment(state.start_date).date()) : new Date();
    } else {
      initDate = state.end_date ? new Date(moment(state.end_date).year(), moment(state.end_date).month(), moment(state.end_date).date()) : new Date();
    }
    setInitTimeValue(initDate);
  };

  // 选择日期
  const handleDate = (date) => {
    setTimePickerVisible(false);
    const newState = {...state, [currentType]: moment(date).format('YYYY-MM-DD')};
    if (currentType === 'start_date') {
      newState.end_date = '';
    }
    setState({...newState});
  };

  const {start_date, end_date} = state;
  const minimumDate = start_date && currentType === 'end_date' ? new Date(moment(state.start_date).year(), moment(state.start_date).month(), moment(state.start_date).date()) : null;
  return (
    <Animatable.View
      useNativeDriver={true}
      animation="slideInUp"
      duration={300}
    >
      <View style={styles.container}>
        <View style={styles.btnBox}>
          <TouchableOpacity
            style={styles.btnView}
            onPress={() => {
              const emptyDate = {start_date: '', end_date: ''};
              setState(emptyDate);
              cancelCallback(emptyDate);
            }}
          >
            <Text style={styles.cancelText}>{cancelText}</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.btnView}
            onPress={() => confirmCallback(state)}
          >
            <Text style={styles.confirmText}>{confirmText}</Text>
          </TouchableOpacity>
        </View>
        <View style={styles.shortcutBox}>
          <TouchableOpacity
            activeOpacity={0.8}
            style={[styles.shortcutView, currentIndex === 0 && styles.active]}
            onPress={() => {
              setState({
                start_date: moment().format('YYYY-MM-DD'),
                end_date: moment().format('YYYY-MM-DD'),
              });
            }}
          >
            <Text style={[styles.shortcutText, currentIndex === 0 && styles.activeText]}>今天</Text>
          </TouchableOpacity>
          <TouchableOpacity
            activeOpacity={0.8}
            style={[styles.shortcutView, currentIndex === 1 && styles.active]}
            onPress={() => {
              setState({
                start_date: moment().subtract(7, 'days').format('YYYY-MM-DD'),
                end_date: moment().startOf('days').format('YYYY-MM-DD'),
              });
            }}
          >
            <Text style={[styles.shortcutText, currentIndex === 1 && styles.activeText]}>本周</Text>
          </TouchableOpacity>
          <TouchableOpacity
            activeOpacity={0.8}
            style={[styles.shortcutView, currentIndex === 2 && styles.active]}
            onPress={() => {
              setState({
                start_date: moment().subtract(1, 'months').format('YYYY-MM-DD'),
                end_date: moment().startOf('days').format('YYYY-MM-DD'),
              });
            }}
          >
            <Text style={[styles.shortcutText, currentIndex === 2 && styles.activeText]}>本月</Text>
          </TouchableOpacity>
        </View>
        <View style={styles.dateBox}>
          <TouchableOpacity style={styles.dateView} onPress={() => onChooseDate('start_date')}>
            {
              start_date ? (
                <Text style={styles.dateText2}>{start_date}</Text>
              ) : (
                <Text style={styles.dateText}>自定义开始日期</Text>
              )
            }
          </TouchableOpacity>
          <Text style={styles.dateText}>—</Text>
          <TouchableOpacity style={styles.dateView} onPress={() => onChooseDate('end_date')}>
            {
              end_date ? (
                <Text style={styles.dateText2}>{end_date}</Text>
              ) : (
                <Text style={styles.dateText}>自定义结束日期</Text>
              )
            }
          </TouchableOpacity>
        </View>
        <DateTimePickerModal
          mode="date"
          confirmTextIOS="确定"
          cancelTextIOS="取消"
          onConfirm={handleDate}
          date={initialTimeValue}
          minimumDate={minimumDate}
          isVisible={timePickerVisible}
          onCancel={() => setTimePickerVisible(false)}
        />
      </View>
    </Animatable.View>
  );
};

const styles = StyleSheet.create({
  container: {
    width: width,
    backgroundColor: '#fff',
    paddingBottom: scaleSizeW(150),
    paddingHorizontal: scaleSizeW(32),
    borderTopLeftRadius: scaleSizeW(40),
    borderTopRightRadius: scaleSizeW(40),
  },
  btnBox: {
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingTop: scaleSizeW(45),
    paddingBottom: scaleSizeW(35),
  },
  btnView: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  cancelText: {
    color: '#878F9B',
    fontSize: scaleSizeW(28),
  },
  confirmText: {
    color: '#2E83FF',
    fontSize: scaleSizeW(28),
  },
  shortcutBox: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  shortcutView: {
    width: '30%',
    height: scaleSizeW(62),
    backgroundColor: '#F1F1F1',
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: scaleSizeW(8),
  },
  active: {
    backgroundColor: '#0E9CFF',
  },
  activeText: {
    color: '#FFFFFF',
  },
  shortcutText: {
    color: '#1D212A',
    fontSize: scaleSizeW(28),
  },
  dateBox: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginTop: scaleSizeW(30),
  },
  dateView: {
    width: '45%',
    height: scaleSizeW(62),
    backgroundColor: '#F1F1F1',
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: scaleSizeW(8),
  },
  dateText: {
    color: '#878F9B',
    fontSize: scaleSizeW(28),
  },
  dateText2: {
    color: '#1D212A',
    fontSize: scaleSizeW(28),
  }
});

import {Confirm} from '../component/Modals';

Confirm.show('当前项目己选定，如需切换组织，请到我的 使用“组织切换“功能。', {
  confirmText: '切换',
  confirmCallback: () => {
    this.navigation.navigate('Organization');
  },
});

import {DateFilter} from '../component/Modals';

<DateFilter

  initialDate={{start_date: this.inspect_date_start, end_date: this.inspect_date_end}}

  cancelCallback={() => {
    this.clearDate();
  }}
  confirmCallback={(date) => {
    this.handleDate(date);
  }}
/>

热门标签