ipanel-rnapp-ajb-base 1.0.0

package/app/components/common/DateTimingPicker/index.js

@@ -0,0 +1,254 @@
+import React, {useState} from 'react';
+import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';
+import ActionSheet, {SheetManager} from 'react-native-actions-sheet';
+import {Cell} from '../../index';
+
+const minuteSelections = [
+  {name: '00'},
+  {name: '01'},
+  {name: '02'},
+  {name: '03'},
+  {name: '04'},
+  {name: '05'},
+  {name: '06'},
+  {name: '07'},
+  {name: '08'},
+  {name: '09'},
+  {name: '10'},
+  {name: '11'},
+  {name: '12'},
+  {name: '13'},
+  {name: '14'},
+  {name: '15'},
+  {name: '16'},
+  {name: '17'},
+  {name: '18'},
+  {name: '19'},
+  {name: '20'},
+  {name: '21'},
+  {name: '22'},
+  {name: '23'},
+  {name: '24'},
+  {name: '25'},
+  {name: '26'},
+  {name: '27'},
+  {name: '28'},
+  {name: '29'},
+  {name: '30'},
+  {name: '31'},
+  {name: '32'},
+  {name: '33'},
+  {name: '34'},
+  {name: '35'},
+  {name: '36'},
+  {name: '37'},
+  {name: '38'},
+  {name: '39'},
+  {name: '40'},
+  {name: '41'},
+  {name: '42'},
+  {name: '43'},
+  {name: '44'},
+  {name: '45'},
+  {name: '46'},
+  {name: '47'},
+  {name: '48'},
+  {name: '49'},
+  {name: '50'},
+  {name: '51'},
+  {name: '52'},
+  {name: '53'},
+  {name: '54'},
+  {name: '55'},
+  {name: '56'},
+  {name: '57'},
+  {name: '58'},
+  {name: '59'},
+];
+const hourSelections = [
+  {name: '00'},
+  {name: '01'},
+  {name: '02'},
+  {name: '03'},
+  {name: '04'},
+  {name: '05'},
+  {name: '06'},
+  {name: '07'},
+  {name: '08'},
+  {name: '09'},
+  {name: '10'},
+  {name: '11'},
+  {name: '12'},
+  {name: '13'},
+  {name: '14'},
+  {name: '15'},
+  {name: '16'},
+  {name: '17'},
+  {name: '18'},
+  {name: '19'},
+  {name: '20'},
+  {name: '21'},
+  {name: '22'},
+  {name: '23'},
+];
+hourSelections.forEach(hour => {
+  hour.children = minuteSelections;
+});
+
+function clockStr2Stamp(clockStr) {
+  const [hours, minutes] = clockStr.split(':').map(str => parseInt(str));
+  return hours * 3600 + minutes * 60;
+}
+
+const Index = ({sheetId, payload = {}}) => {
+  const {title} = payload;
+
+  const [start, setStart] = useState('00:00');
+  const [end, setEnd] = useState('00:00');
+  const [dates, setDates] = useState([]);
+
+  const handleShowStartSelection = async () => {
+    const result = await SheetManager.show('action-picker', {
+      context: 'global',
+      payload: {
+        title: '开始时间',
+        defaultIndex: [0, 0],
+        columns: hourSelections,
+        depth: 2,
+      },
+    });
+    if (result) {
+      setStart(`${result.data[0].name}:${result.data[1].name}`);
+    }
+  };
+  const handleShowEndSelection = async () => {
+    const result = await SheetManager.show('action-picker', {
+      context: 'global',
+      payload: {
+        title: '结束时间',
+        defaultIndex: [0, 0],
+        columns: hourSelections,
+        depth: 2,
+      },
+    });
+    if (result) {
+      setEnd(`${result.data[0].name}:${result.data[1].name}`);
+    }
+  };
+  const handleShowDatesSelection = async () => {
+    const result = await SheetManager.show('week-days-picker', {
+      context: 'global',
+      payload: {
+        title: '选择周期',
+      },
+    });
+    if (result) {
+      setDates(result.dates);
+    }
+  };
+
+  const handleCancel = () => {
+    SheetManager.hide(sheetId);
+  };
+
+  const handleConfirm = () => {
+    if (clockStr2Stamp(end) <= clockStr2Stamp(start)) {
+      global.toast.showToast('结束时间必须大于开始时间');
+      return;
+    }
+    if (dates.length === 0) {
+      global.toast.showToast('必须选择周期');
+      return;
+    }
+
+    SheetManager.hide(sheetId, {
+      payload: {
+        start,
+        end,
+        dates,
+      },
+    });
+  };
+
+  return (
+    <>
+      <ActionSheet id={sheetId} isModal={false} useBottomSafeAreaPadding>
+        <View style={styles.title}>
+          <TouchableOpacity
+            style={styles.cancelBtnBox}
+            activeOpacity={0.3}
+            onPress={handleCancel}>
+            <Text style={styles.cancnelBtnText}>取消</Text>
+          </TouchableOpacity>
+          <Text style={styles.titleText}>{title || '设置周期'}</Text>
+          <TouchableOpacity
+            style={styles.confirmBtnBox}
+            activeOpacity={0.3}
+            onPress={handleConfirm}>
+            <Text style={styles.confirmBtnText}>确定</Text>
+          </TouchableOpacity>
+        </View>
+
+        <Cell
+          type="link"
+          label="开始时间"
+          value={start}
+          onRightPress={handleShowStartSelection}
+        />
+        <Cell
+          type="link"
+          label="结束时间"
+          value={end}
+          onRightPress={handleShowEndSelection}
+        />
+        <Cell
+          type="link"
+          label="周期"
+          value={dates.map(item => item.name).join('、')}
+          onRightPress={handleShowDatesSelection}
+        />
+      </ActionSheet>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  title: {
+    position: 'relative',
+    height: 50,
+    paddingHorizontal: 60,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  titleText: {
+    fontSize: 18,
+    color: '#333',
+  },
+  cancelBtnBox: {
+    position: 'absolute',
+    height: '100%',
+    top: 0,
+    left: 0,
+    width: 60,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  confirmBtnBox: {
+    position: 'absolute',
+    height: '100%',
+    top: 0,
+    right: 0,
+    width: 60,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  cancnelBtnText: {
+    fontSize: 18,
+  },
+  confirmBtnText: {
+    fontSize: 18,
+    color: '#2089dc',
+  },
+});
+
+export default Index;

package/app/components/common/Dialog/Notify.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import {View, StyleSheet, Text} from 'react-native';
+import px from '../../../utils/scaleSize';
+
+export default ({options}) => {
+  return (
+    <View style={styles.notifyContainer}>
+      <Text style={styles.title}>{options?.title}</Text>
+      <Text style={styles.content}>{options?.content}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  notifyContainer: {
+    position: 'absolute',
+    top: px(29),
+    left: px(40),
+    right: px(40),
+    borderRadius: px(17),
+    backgroundColor: '#fff',
+    paddingHorizontal: px(40),
+    paddingVertical: px(69),
+  },
+  title: {
+    fontWeight: '600',
+    color: '#333',
+    fontSize: px(46),
+    marginBottom: px(29),
+  },
+  content: {
+    fontSize: px(40),
+    color: '#333',
+    fontWeight: '400',
+  },
+});

package/app/components/common/Dialog/baseDialog.js

@@ -0,0 +1,146 @@
+import React, {useEffect, useRef, useState} from 'react';
+import {Text, View, TouchableHighlight} from 'react-native';
+import styles from './styles';
+import useLatest from '../../../hooks/useLatest';
+
+import {Divider} from '@rneui/themed';
+
+let timer = null;
+
+const BaseDialog = ({modelRef, setModalVisible, type}) => {
+  // confirm组件和custom组件
+
+  // confirm组件component传string
+  /*
+    component: Template  | string   (主要内容区)必选
+    confirmButtonText: string,     (右边按钮文字)必选
+    confirmCallback: (value) => {  (右边触发事件)必选
+      console.log(111, value)
+    },
+    confirmButtonStyle: {},        (右边按钮样式)可选
+    cancelButtonText: string,      (左边按钮文字)可选
+    cancelCallback: () => {},      (左边触发事件)可选
+    title: string,                 (标题)可选
+    titleStyle: {                  (标题样式)可选
+      textAlign: 'left',
+      borderBottomColor: '#eee',
+      borderBottomWidth: 1,
+    },
+  */
+
+  const [timeCount, setTimeCount] = useState(modelRef?.timeout || 0);
+  const latestTimeCount = useLatest(timeCount);
+
+  useEffect(() => {
+    if (modelRef?.timeout) {
+      timer = setInterval(() => {
+        if (latestTimeCount.current === 0) {
+          onConfirm();
+        } else {
+          setTimeCount(latestTimeCount.current - 1);
+        }
+      }, 1000);
+    }
+
+    return () => {
+      clearInterval(timer);
+    };
+  }, []);
+
+  const autoClose =
+    typeof modelRef?.autoClose === 'undefined' ? true : modelRef?.autoClose;
+
+  // modelRef?.content;
+  const component = useRef(modelRef?.component);
+  const onCannel = () => {
+    modelRef?.cancelCallback();
+    setModalVisible(false);
+  };
+  const onConfirm = async () => {
+    clearInterval(timer);
+    if (autoClose) {
+      modelRef?.confirmCallback();
+      setModalVisible(false);
+    } else if (await modelRef?.confirmCallback()) {
+      setModalVisible(false);
+    }
+  };
+  return (
+    <View
+      style={{
+        ...styles.contentView,
+        paddingHorizontal: 0,
+        alignItems: component.current ? 'stretch' : 'center',
+        ...(modelRef.containerStyle || {}),
+      }}>
+      {!!modelRef?.title && (
+        <View style={[styles.title, modelRef?.titleBoxStyle]}>
+          <Text style={[styles.titleText, modelRef?.titleStyle]}>
+            {modelRef?.title}
+          </Text>
+        </View>
+      )}
+      {/* 内容区 */}
+      {typeof modelRef?.component === 'string' ? (
+        <View style={[modelRef?.contentStyle]}>
+          <Text style={[{textAlign: 'center'}, modelRef?.contentTextStyle]}>
+            {modelRef?.component}
+          </Text>
+        </View>
+      ) : (
+        modelRef?.component
+      )}
+      <Divider color="#f0f0f0" />
+      {/* 底部按钮 */}
+      <View style={styles.bottomContent}>
+        {modelRef?.cancelButtonText && (
+          <TouchableHighlight
+            activeOpacity={0.6}
+            underlayColor="#DDDDDD"
+            style={[styles.cancelStyle, styles.buttonStyle]}
+            onPress={() => {
+              onCannel();
+            }}>
+            <Text style={styles.cancelTextStyle}>
+              {modelRef?.cancelButtonText}
+            </Text>
+          </TouchableHighlight>
+        )}
+        <TouchableHighlight
+          activeOpacity={0.6}
+          underlayColor="#DDDDDD"
+          style={[
+            styles.confirmStyle,
+            styles.buttonStyle,
+            !modelRef.cancelButtonText && styles.confirmOneStyle,
+          ]}
+          onPress={() => {
+            onConfirm();
+          }}>
+          <Text style={[styles.confirmTextStyle, modelRef?.confirmButtonStyle]}>
+            {modelRef?.confirmButtonText}
+            {modelRef?.timeout ? `(${timeCount}s)` : ''}
+          </Text>
+        </TouchableHighlight>
+      </View>
+    </View>
+  );
+};
+
+const Confirm = ({content}) => {
+  return (
+    <View style={styles.modalContent}>
+      <Text style={styles.confirmText}>{content}</Text>
+    </View>
+  );
+};
+
+const CustomComponent = ({component, modelRef}) => {
+  return (
+    <View style={[styles.modalContent, modelRef?.contentStyle]}>
+      {typeof component === 'string' ? <Text>{component}</Text> : component}
+    </View>
+  );
+};
+
+export default BaseDialog;

package/app/components/common/Dialog/index.js

@@ -0,0 +1,113 @@
+import React, {useImperativeHandle, useState, useRef} from 'react';
+import {View, Modal, TouchableOpacity} from 'react-native';
+
+import Prompt from './prompt';
+import SelectDialog from './select';
+import BaseDialog from './baseDialog';
+import QuickSelect from './quickSelect';
+import Notify from './Notify';
+
+import styles from './styles';
+const Index = ({steps, active, onRef}) => {
+  const [modalVisible, setModalVisible] = useState(false);
+  const modelRef = useRef(null);
+  const [type, setType] = useState('confirm');
+  useImperativeHandle(onRef, () => {
+    return {
+      hideDialog: () => {
+        setModalVisible(false);
+      },
+      /**
+       * 基础弹框参数
+       * @param args Object
+       *
+       */
+      // 基本弹框
+      confirm: args => {
+        modelRef.current = args;
+        setModalVisible(true);
+        setType('confirm');
+      },
+      // 输入框
+      prompt: args => {
+        modelRef.current = args;
+        setType('prompt');
+        setModalVisible(true);
+      },
+      // 可选择
+      select: args => {
+        modelRef.current = args;
+        setModalVisible(true);
+        setType('select');
+      },
+      quickSelect: args => {
+        modelRef.current = args;
+        setModalVisible(true);
+        setType('quickSelect');
+      },
+      custom: args => {
+        modelRef.current = args;
+        setModalVisible(true);
+        setType('custom');
+      },
+      notify: args => {
+        modelRef.current = args;
+        setModalVisible(true);
+        setType('notify');
+      },
+    };
+  });
+
+  return (
+    modalVisible && (
+      <View style={styles.backgroundView}>
+        <Modal
+          animationType="fade"
+          transparent={true}
+          visible={modalVisible}
+          onRequestClose={() => {
+            setModalVisible(!modalVisible);
+          }}>
+          <TouchableOpacity
+            style={styles.centeredView}
+            activeOpacity={1}
+            onPress={() => {
+              if (type === 'quickSelect') {
+                setModalVisible(!modalVisible);
+              }
+            }}>
+            {type === 'prompt' ? (
+              <Prompt
+                modelRef={modelRef.current}
+                setModalVisible={setModalVisible}
+              />
+            ) : type === 'select' ? (
+              <SelectDialog
+                modelRef={modelRef.current}
+                setModalVisible={setModalVisible}
+              />
+            ) : type === 'quickSelect' ? (
+              <QuickSelect
+                modelRef={modelRef.current}
+                setModalVisible={setModalVisible}
+              />
+            ) : type === 'notify' ? (
+              <Notify
+                options={modelRef.current}
+                setModalVisible={setModalVisible}
+              />
+            ) : (
+              <BaseDialog
+                modelRef={modelRef.current}
+                setModalVisible={setModalVisible}
+                type={type}
+              />
+            )}
+          </TouchableOpacity>
+        </Modal>
+      </View>
+    )
+  );
+};
+
+export default Index;

package/app/components/common/Dialog/prompt.js

@@ -0,0 +1,145 @@
+import React, {useState, useRef, useEffect} from 'react';
+import {Text, View, TouchableHighlight, TextInput} from 'react-native';
+import {Input} from '@rneui/themed';
+import styles from './styles';
+const px = global.base.scaleSize;
+const Prompt = ({modelRef, setModalVisible}) => {
+  /*
+    input: String                  (input内容)可选
+    confirmButtonText: string,     (右边按钮文字)必选
+    confirmCallback: (value) => {  (右边触发事件)必选
+      console.log(111, value)
+    },
+    cancelButtonText: string,      (左边按钮文字)必选
+    cancelCallback: () => {},      (左边触发事件)可选
+    confirmButtonStyle: {},        (右边按钮样式)可选
+    title: string,                 (标题)可选
+    titleStyle: {                  (标题样式)可选
+      textAlign: 'left',
+      borderBottomColor: '#eee',
+      borderBottomWidth: 1,
+    },
+  */
+  const [input, setInput] = useState(modelRef.input || '');
+  const inputRef = useRef();
+  const autoClose =
+    typeof modelRef?.autoClose === 'undefined' ? true : modelRef?.autoClose;
+
+  const onCannel = () => {
+    if (modelRef?.cancelCallback) {
+      modelRef?.cancelCallback(input);
+    }
+    setModalVisible(false);
+  };
+  const onConfirm = async () => {
+    if (autoClose) {
+      modelRef?.confirmCallback(input);
+      setModalVisible(false);
+    } else if (await modelRef?.confirmCallback(input)) {
+      setModalVisible(false);
+    }
+  };
+  useEffect(() => {
+    if (modelRef?.autoFocus && inputRef.current) {
+      setTimeout(() => {
+        inputRef.current.focus();
+        // inputRef.current.setNativeProps({selection: {start: 9999, end: 9999}});
+      }, 100);
+      // input.current.setNativeProps({value: input});
+    }
+  }, []);
+
+  return (
+    <View style={[styles.contentView, modelRef?.containerStyle]}>
+      {/* 标题 */}
+      <View
+        style={[
+          {
+            paddingBottom: px(40),
+          },
+          modelRef?.titleBoxStyle,
+        ]}>
+        {typeof modelRef?.title === 'string' ? (
+          <Text style={[styles.titleText, modelRef?.titleStyle]}>
+            {modelRef?.title}
+          </Text>
+        ) : (
+          modelRef?.title
+        )}
+      </View>
+      {/* 内容区 */}
+      <View style={[styles.confirmModalContent, modelRef?.modalContentStyle]}>
+        {/*<TextInput*/}
+        {/*  style={{*/}
+        {/*    height: px(80),*/}
+        {/*  }}*/}
+        {/*  keyboardType={modelRef?.keyboardType}*/}
+        {/*  onChangeText={text => setInput(text)}*/}
+        {/*  value={input}*/}
+        {/*/>*/}
+        <Input
+          ref={inputRef}
+          value={input}
+          autoFocus={!!modelRef?.autoFocus}
+          onChangeText={setInput}
+          keyboardType={modelRef?.keyboardType}
+          leftIcon={modelRef?.leftIcon}
+          containerStyle={{
+            height: 31,
+            padding: 0,
+            borderWidth: 0,
+            borderRadius: 17,
+            backgroundColor: '#fff',
+            paddingHorizontal: px(92),
+          }}
+          inputContainerStyle={{
+            height: '100%',
+            width: '100%',
+            padding: 0,
+            margin: 0,
+            borderBottomWidth: 1,
+            borderColor: '#E86003',
+          }}
+          inputStyle={[
+            {
+              fontSize: px(46),
+              color: '#666',
+              textAlign: 'center',
+            },
+            modelRef?.inputStyle,
+          ]}
+        />
+        <Text style={[styles.tip, modelRef?.tipStyle]}>
+          {modelRef?.tip || ''}
+        </Text>
+      </View>
+      {/* 底部按钮 */}
+      <View style={styles.bottomContent}>
+        <TouchableHighlight
+          activeOpacity={0.6}
+          underlayColor="#DDDDDD"
+          style={[styles.cancelStyle, styles.buttonStyle]}
+          onPress={() => {
+            onCannel();
+          }}>
+          <Text style={styles.cancelTextStyle}>
+            {modelRef?.cancelButtonText}
+          </Text>
+        </TouchableHighlight>
+        <TouchableHighlight
+          activeOpacity={0.6}
+          underlayColor="#DDDDDD"
+          style={[styles.confirmStyle, styles.buttonStyle]}
+          onPress={() => {
+            onConfirm();
+          }}>
+          <Text style={[styles.confirmTextStyle, modelRef?.confirmButtonStyle]}>
+            {modelRef?.confirmButtonText}
+          </Text>
+        </TouchableHighlight>
+      </View>
+    </View>
+  );
+};
+
+export default Prompt;