ipanel-rnapp-ajb-base 1.0.0

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import {Text, View, TouchableOpacity} from 'react-native';
+import styles from './styles';
+import {Divider} from '@rneui/themed';
+const QuickSelect = ({modelRef, setModalVisible}) => {
+  /*
+    selectList: [
+      {
+        title: xxx,
+        onpress: 'xxx',      点击事件(函数)
+      }
+    ]
+  */
+  const onCannel = () => {
+    setModalVisible(false);
+  };
+  const onPress = item => {
+    if (item.onpress) {
+      item.onpress();
+    }
+    setModalVisible(() => false);
+  };
+  return modelRef?.selectList ? (
+    <View
+      style={{
+        ...styles.contentView,
+        paddingTop: 0,
+        paddingHorizontal: 0,
+      }}>
+      {modelRef?.selectList.map((val, i) => {
+        return (
+          <React.Fragment key={i}>
+            <TouchableOpacity
+              onPress={() => onPress(val)}
+              style={[styles.quickSelectStyle]}>
+              <Text style={[styles.quickSelectText, styles.textStyle]}>
+                {val?.title}
+              </Text>
+            </TouchableOpacity>
+            <Divider color="#f0f0f0" />
+          </React.Fragment>
+        );
+      })}
+    </View>
+  ) : (
+    <View style={styles.contentView}>
+      <TouchableOpacity onPress={onCannel} style={styles.quickSelectStyle}>
+        <Text style={[styles.quickSelectText, styles.textStyle]}>取消</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default QuickSelect;

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

@@ -0,0 +1,125 @@
+import React, {useState} from 'react';
+import {Text, View, TouchableHighlight, FlatList} from 'react-native';
+import {Icon} from '@rneui/themed';
+import styles from './styles';
+const SelectDialog = ({modelRef, setModalVisible}) => {
+  /*
+    selectList: [                        (主要内容区)必选
+      {
+        id: xxx,
+        title: 'xxx',
+      }
+    ]
+    defaultSelect: selectList数组的id   (select组件默认选中)可选
+    confirmButtonText: string,       (右边按钮文字)必选
+    confirmCallback: (value) => {    (右边触发事件)必选,返回选中id
+      console.log(111, value)
+    },
+    cancelButtonText: string,      (左边按钮文字)必选
+    cancelCallback: () => {},      (左边触发事件)可选
+    title: string,                 (标题)必选
+    titleStyle: {                  (标题样式)可选
+      textAlign: 'left',
+      borderBottomColor: '#eee',
+      borderBottomWidth: 1,
+    },
+  */
+  const [selectedId, setSelectedId] = useState(modelRef?.defaultSelect || '');
+
+  const onCannel = () => {
+    if (modelRef?.cancelCallback) {
+      modelRef?.cancelCallback(selectedId);
+    }
+    setModalVisible(false);
+  };
+  const onConfirm = () => {
+    if (modelRef?.confirmCallback) {
+      modelRef?.confirmCallback(selectedId);
+    }
+    setModalVisible(false);
+  };
+  return (
+    <View style={styles.contentView}>
+      {/* 标题 */}
+      <View style={styles.title}>
+        <Text
+          style={[
+            styles.titleText,
+            styles.selectTitleStyle,
+            modelRef?.titleStyle,
+          ]}>
+          {modelRef?.title}
+        </Text>
+      </View>
+      {/* 内容区 */}
+      <SelectContent
+        data={modelRef.selectList}
+        selectedId={selectedId}
+        setSelectedId={setSelectedId}
+      />
+      {/* 底部按钮 */}
+      <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?.confirmButtonText}
+          </Text>
+        </TouchableHighlight>
+      </View>
+    </View>
+  );
+};
+
+// Select选择框内容区域
+const SelectContent = ({data, selectedId, setSelectedId}) => {
+  const renderItem = ({item}) => {
+    const isSelect = item.id === selectedId;
+    return (
+      <ItemList item={item} isSelect={isSelect} setSelectedId={setSelectedId} />
+    );
+  };
+
+  return (
+    <View style={styles.selectModalContent}>
+      <FlatList
+        data={data}
+        renderItem={renderItem}
+        keyExtractor={item => item.id}
+        extraData={selectedId}
+      />
+    </View>
+  );
+};
+
+const ItemList = ({item, isSelect, setSelectedId}) => (
+  <TouchableHighlight
+    underlayColor="#fff"
+    style={styles.itemStyle}
+    onPress={() => setSelectedId(item.id)}
+    activeOpacity={0.6}>
+    <View style={styles.flexRow}>
+      <Text style={styles.textStyle}>{item.id}</Text>
+      {isSelect && (
+        <Icon name="check" type="material" size={22} color="orange" />
+      )}
+    </View>
+  </TouchableHighlight>
+);
+
+export default SelectDialog;

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

@@ -0,0 +1,167 @@
+import {StyleSheet} from 'react-native';
+
+const px = global.base.scaleSize;
+const {fontStyle} = global.base.styles;
+
+const styles = StyleSheet.create({
+  backgroundView: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    opacity: 0.5,
+    left: 0,
+    right: 0,
+    backgroundColor: '#000',
+  },
+  centeredView: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative',
+  },
+  contentView: {
+    backgroundColor: '#fff',
+    borderRadius: px(17),
+    // alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+    width: px(855),
+    paddingTop: px(69),
+    // paddingHorizontal: px(82),
+  },
+  title: {
+    // width: '100%',
+    // paddingBottom: 0,
+    paddingVertical: px(50),
+    paddingHorizontal: px(20),
+  },
+  titleText: {
+    fontWeight: 'bold',
+    color: '#333',
+    fontSize: px(46),
+    // padding: 12,
+    textAlign: 'center',
+    // paddingBottom: 3,
+    // width: '100%',
+  },
+  selectTitleStyle: {
+    textAlign: 'left',
+    borderBottomColor: '#eee',
+    borderBottomWidth: 1,
+    height: 50,
+    lineHeight: 30,
+  },
+  leftTitle: {
+    textAlign: 'left',
+    padding: 15,
+  },
+  modalContent: {
+    // padding: 3,
+    // textAlign: 'center',
+    // color: '#333',
+  },
+  confirmModalContent: {
+    // width: '90%',
+    // textAlign: 'center',
+    // padding: 10,
+    // backgroundColor: 'red',
+    // paddingBottom: px(33),
+  },
+  selectModalContent: {
+    width: '100%',
+    paddingHorizontal: 5,
+  },
+  confirmText: {
+    textAlign: 'center',
+    color: '#333',
+    paddingHorizontal: 15,
+  },
+  textView: {
+    // height: 40,
+    borderBottomColor: '#f4650e',
+    borderBottomWidth: 1,
+    // width: '100%',
+    textAlign: 'center',
+  },
+  bottomContent: {
+    // marginTop: 10,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderTopWidth: 1,
+    borderTopColor: '#f0f0f0',
+  },
+  buttonStyle: {
+    flex: 1,
+    // textAlign: 'center',
+    paddingTop: px(29),
+    paddingBottom: px(32),
+  },
+  confirmStyle: {
+    borderBottomEndRadius: px(17),
+  },
+  confirmOneStyle: {
+    borderBottomStartRadius: px(17),
+  },
+  cancelStyle: {
+    borderBottomStartRadius: px(17),
+    borderRightWidth: 1,
+    borderColor: '#f5f5f5',
+  },
+  cancelTextStyle: {
+    color: '#666',
+    textAlign: 'center',
+    fontWeight: '400',
+    fontSize: px(52),
+  },
+  confirmTextStyle: {
+    color: '#E86003',
+    textAlign: 'center',
+    fontWeight: 'bold',
+    fontSize: px(52),
+  },
+  flexRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    width: '100%',
+  },
+  itemStyle: {
+    marginVertical: 8,
+    marginHorizontal: 3,
+    height: 30,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  textStyle: {
+    color: '#333',
+  },
+  quickSelectText: {
+    textAlign: 'center',
+    width: '100%',
+    fontSize: px(46),
+    fontWeight: '400',
+  },
+  quickSelectStyle: {
+    paddingVertical: px(46),
+    width: '100%',
+  },
+  quickSelectBottom: {
+    borderBottomColor: '#eee',
+    borderBottomWidth: 1,
+  },
+  tip: {
+    marginTop: px(22),
+    textAlign: 'center',
+    ...fontStyle(38, '#EA6000'),
+  },
+});
+
+export default styles;

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

@@ -0,0 +1,71 @@
+import React, {useImperativeHandle, useState} from 'react';
+import {Text, StyleSheet, View} from 'react-native';
+import {DialogLoading} from '@rneui/base/dist/Dialog/Dialog.Loading';
+// let width = Dimensions.get('window').width;
+// let height = Dimensions.get('window').height;
+
+const Index = ({steps, active, onRef}) => {
+  const [show, setShow] = useState(false);
+  const [loadingText, setLoadingText] = useState('加载中');
+
+  useImperativeHandle(onRef, () => {
+    return {
+      showLoading: title => {
+        setShow(true);
+        setLoadingText(title || '加载中');
+      },
+      hideLoading: () => {
+        setShow(false);
+      },
+    };
+  });
+
+  return show ? (
+    <>
+      <View style={styles.mask} />
+      <View style={styles.loading}>
+        <DialogLoading
+          loadingProps={{
+            color: '#ffffff',
+          }}
+        />
+        <Text style={styles.loadingTitle}>{loadingText}</Text>
+      </View>
+    </>
+  ) : (
+    <View />
+  );
+};
+
+const styles = StyleSheet.create({
+  mask: {
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    position: 'absolute',
+    zIndex: 100,
+    opacity: 0,
+  },
+  loading: {
+    zIndex: 200,
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    height: 120,
+    width: 120,
+    marginTop: -60,
+    marginLeft: -60,
+    borderRadius: 10,
+    backgroundColor: 'rgb(76, 76, 76)',
+    padding: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  loadingTitle: {
+    fontSize: 14,
+    color: 'white',
+  },
+});
+
+export default Index;

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

@@ -0,0 +1,171 @@
+import React from "react";
+import {
+  View,
+  Text,
+  Image,
+  ImageBackground,
+  TouchableOpacity,
+  StyleSheet,
+} from "react-native";
+import px from "../../../utils/scaleSize";
+const LoginType = ({ activeIndex, changeActive }) => {
+  const handleChangeActive = (val) => {
+    changeActive(val);
+  };
+  return (
+    <View
+      style={{
+        flexDirection: "row",
+        height: px(210),
+        justifyContent: "space-between",
+        backgroundColor: "#fff",
+        borderRadius: px(55),
+        overflow: "hidden",
+      }}
+    >
+      <TouchableOpacity
+        activeOpacity={0.7}
+        onPress={() => handleChangeActive(0)}
+        style={{
+          height: px(260),
+          width: "50%",
+        }}
+      >
+        <View
+          style={{
+            height: px(260),
+            width: "100%",
+            alignItems: "center",
+            marginTop: px(-14),
+          }}
+        >
+          {activeIndex != 0 ? (
+            <ImageBackground
+              source={require("../../../assets/img/login_left.png")}
+              style={{
+                height: "100%",
+                width: "100%",
+
+                marginLeft: px(-30),
+              }}
+              resizeMode="stretch"
+            >
+              <Text
+                style={{
+                  textAlign: "center",
+                  paddingVertical: px(43),
+                  paddingHorizontal: px(150),
+                  color: "#333",
+                  fontSize: px(45),
+                  fontWeight: "600",
+                }}
+              >
+                装维人员
+              </Text>
+            </ImageBackground>
+          ) : (
+            <>
+              <Text
+                style={{
+                  textAlign: "center",
+                  paddingVertical: px(43),
+                  paddingHorizontal: px(150),
+                  color: "#333",
+                  fontSize: px(45),
+                  fontWeight: "600",
+                }}
+              >
+                装维人员
+              </Text>
+              <View
+                style={{
+                  width: px(72),
+                  height: px(9),
+                  backgroundColor: "#E86003",
+                  marginTop: px(-20),
+                }}
+              />
+              {/* <Image
+                source={require('../../assets/img/tab.png')}
+                style={{
+                  width: px(55),
+                  height: px(5),
+                  marginTop: px(-20),
+                }}
+              /> */}
+            </>
+          )}
+        </View>
+      </TouchableOpacity>
+      <TouchableOpacity
+        activeOpacity={0.7}
+        onPress={() => handleChangeActive(1)}
+        style={{
+          height: px(260),
+          width: "50%",
+        }}
+      >
+        <View
+          style={{
+            height: px(260),
+            width: "100%",
+            alignItems: "center",
+            backgroundColor: "#fff",
+            marginTop: px(-14),
+          }}
+        >
+          {activeIndex === 1 ? (
+            <>
+              <Text
+                style={{
+                  textAlign: "center",
+                  paddingVertical: px(43),
+                  paddingHorizontal: px(150),
+                  color: "#333",
+                  fontSize: px(45),
+                  fontWeight: "600",
+                }}
+              >
+                普通人员
+              </Text>
+              <View
+                style={{
+                  width: px(72),
+                  height: px(9),
+                  backgroundColor: "#E86003",
+                  marginTop: px(-20),
+                }}
+              />
+            </>
+          ) : (
+            <ImageBackground
+              source={require("../../../assets/img/login_right.png")}
+              style={{
+                height: "100%",
+                width: "100%",
+
+                marginLeft: px(30),
+              }}
+              resizeMode="stretch"
+            >
+              <Text
+                style={{
+                  textAlign: "center",
+                  paddingVertical: px(43),
+                  paddingHorizontal: px(150),
+                  color: "#333",
+                  fontSize: px(45),
+                  fontWeight: "600",
+                }}
+              >
+                普通人员
+              </Text>
+            </ImageBackground>
+          )}
+        </View>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default LoginType;