ipanel-rnapp-ajb-base 1.0.0

package/app/components/common/ActionPicker/BasicPicker.js

@@ -0,0 +1,136 @@
+import React from 'react';
+import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';
+import ActionSheet from 'react-native-actions-sheet';
+import Picker from 'react-native-wheel-picker';
+var PickerItem = Picker.Item;
+
+const BasicPicker = ({
+  sheetId,
+  title = '',
+  cancelBtnText = '取消',
+  confirmBtnText = '确定',
+  columns = [],
+  onCancel,
+  onConfirm,
+  selectedIndex,
+  setSelectedIndex,
+  onValueChange,
+  ...leftProps
+}) => {
+  if (!Array.isArray(selectedIndex) || !Array.isArray(columns)) {
+    throw new Error(
+      "BasicPicker's prop 'selectedIndex' or 'columns' required a array",
+    );
+  }
+
+  const handleCancel = () => {
+    onCancel && onCancel(selectedIndex);
+  };
+
+  const handleConfirm = () => {
+    onConfirm && onConfirm(selectedIndex);
+  };
+
+  const handleValueChange = (i, index) => {
+    const indexes = [...selectedIndex];
+    indexes[i] = index;
+    setSelectedIndex && setSelectedIndex(indexes);
+    onValueChange && onValueChange(i, index, indexes);
+  };
+
+  return (
+    <>
+      <ActionSheet
+        id={sheetId}
+        isModal={false}
+        useBottomSafeAreaPadding
+        {...leftProps}>
+        <View style={styles.title}>
+          <TouchableOpacity
+            style={styles.cancelBtnBox}
+            activeOpacity={0.3}
+            onPress={handleCancel}>
+            <Text style={styles.cancnelBtnText}>{cancelBtnText}</Text>
+          </TouchableOpacity>
+          <Text style={styles.titleText}>{title}</Text>
+          <TouchableOpacity
+            style={styles.confirmBtnBox}
+            activeOpacity={0.3}
+            onPress={handleConfirm}>
+            <Text style={styles.confirmBtnText}>{confirmBtnText}</Text>
+          </TouchableOpacity>
+        </View>
+
+        <View style={styles.pickerBox}>
+          {columns.map((subColumns, i) => {
+            return (
+              <Picker
+                style={styles.picker}
+                key={i}
+                selectedValue={selectedIndex[i]}
+                itemStyle={{color: '#000', fontSize: 20}}
+                itemSpace={36}
+                onValueChange={index => handleValueChange(i, index)}>
+                {subColumns.map((value, j) => (
+                  <PickerItem label={value} value={j} key={value} />
+                ))}
+              </Picker>
+            );
+          })}
+        </View>
+      </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',
+  },
+  pickerBox: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#fefefe',
+    flexDirection: 'row',
+    marginTop: 20,
+  },
+  picker: {
+    flex: 1,
+    height: 180,
+  },
+});
+
+export default BasicPicker;

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

@@ -0,0 +1,106 @@
+import React, {useState} from 'react';
+import {StyleSheet} from 'react-native';
+import {SheetProps, SheetManager} from 'react-native-actions-sheet';
+import BasicPicker from './BasicPicker';
+
+/**
+ * columns格式：
+ * 普通一级picker：[{name: "xx"}, {name: "yy"}]
+ * 级联多级picker：[{name: "xx", children: []}, {name: "yy", children:[]}]
+ */
+const Index = (props: SheetProps) => {
+  let depth = props.payload.depth || 1;
+
+  const dataListToNameList = dataList => {
+    return dataList.map(item => item[props.payload.nameProp || 'name']);
+  };
+
+  const genColumnsByIndexPath = indexes => {
+    return new Array(depth).fill().map((slot, columnIndex) => {
+      if (columnIndex === 0) {
+        return props.payload.columns;
+      } else {
+        const prevColumnIndex = indexes[columnIndex - 1];
+        const prevColumn = props.payload.columns[prevColumnIndex];
+        return prevColumn.children || [];
+      }
+    });
+  };
+
+  // index统一转数组处理
+  let defaultIndex = props.payload.defaultIndex;
+  if (typeof props.payload.defaultIndex === 'undefined') {
+    defaultIndex = new Array(depth).fill(0);
+  } else if (!Array.isArray(defaultIndex)) {
+    defaultIndex = [defaultIndex];
+  }
+
+  let columns = [];
+  if (depth === 1) {
+    // 普通的单层picker
+    columns = [dataListToNameList(props.payload.columns)];
+  } else {
+    // 级联picker
+    columns = genColumnsByIndexPath(defaultIndex).map(cols =>
+      dataListToNameList(cols),
+    );
+  }
+
+  const [columnList, setColumnList] = useState(columns);
+  const [selectedIndex, setSelectedIndex] = useState(defaultIndex);
+
+  const handleCancel = index => {
+    SheetManager.hide(props.sheetId);
+  };
+
+  const handleConfirm = index => {
+    let data;
+    const columnOriginDataList = genColumnsByIndexPath(index);
+    if (index.length === 1) {
+      data = props.payload.columns[index[0]];
+    } else {
+      data = index.map((idx, i) => columnOriginDataList[i][idx]);
+    }
+    index = index.length > 1 ? index : index[0];
+
+    // console.log(index, data);
+
+    SheetManager.hide(props.sheetId, {
+      payload: {
+        index,
+        data,
+      },
+    });
+  };
+
+  const handleValueChange = (columnIndex, valueIndex, indexes) => {
+    indexes = [...indexes];
+    indexes[columnIndex] = valueIndex;
+    let idx = columnIndex + 1;
+    while (typeof indexes[idx] !== 'undefined') {
+      indexes[idx] = 0;
+      idx++;
+    }
+    const colList = genColumnsByIndexPath(indexes).map(cols =>
+      dataListToNameList(cols),
+    );
+    setColumnList(colList);
+  };
+
+  return (
+    <BasicPicker
+      sheetId={props.sheetId}
+      title={props.payload.title}
+      columns={columnList}
+      selectedIndex={selectedIndex}
+      setSelectedIndex={setSelectedIndex}
+      onValueChange={handleValueChange}
+      onCancel={handleCancel}
+      onConfirm={handleConfirm}
+    />
+  );
+};
+
+const styles = StyleSheet.create({});
+
+export default Index;

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

@@ -0,0 +1,211 @@
+import React, { useEffect, useRef, useState } from "react";
+import { View, Text, StyleSheet, TouchableOpacity, Image } from "react-native";
+import ActionSheet, { SheetManager } from "react-native-actions-sheet";
+import px from "../../../utils/scaleSize";
+import { getRegionList } from "../../../api";
+import { ScrollView } from "react-native";
+
+const Index = ({ sheetId, payload }) => {
+  const { parent = 86, handelSelectRegion } = payload;
+
+  // 这里不用写四个列表
+  const [provinceList, setProvinceList] = useState([]); // 省份列表
+  const [cityList, setCityList] = useState([]); // 市级列表
+  const [areaList, setAreaList] = useState([]); // 区列表
+  const [streetList, setStreetList] = useState([]); // 街道列表
+
+  const selectTypeRef = useRef(0); // 0还没选，1省， 2市，3区，4街道
+  const parentRef = useRef(parent);
+  const [region, setRegion] = useState([]);
+  const [selectType, setSelectType] = useState(0);
+
+  useEffect(() => {
+    getRegion();
+  }, []);
+
+  const getRegion = () => {
+    if (selectTypeRef.current === 4) {
+      return;
+    }
+    getRegionList({
+      parent: parentRef.current,
+      pageidx: 1,
+      pagenum: 200,
+    }).then((res) => {
+      if (parentRef.current === 86) {
+        selectTypeRef.current = 0;
+        setProvinceList(res.region_list || []);
+      } else if (selectTypeRef.current === 1) {
+        setCityList(res.region_list || []);
+      } else if (selectTypeRef.current === 2) {
+        setAreaList(res.region_list || []);
+      } else {
+        setStreetList(res.region_list || []);
+      }
+    });
+  };
+
+  const selectRegion = (type, item) => {
+    console.log(type, item);
+    selectTypeRef.current = item.child;
+    setSelectType(item.child);
+    parentRef.current = item.code;
+    let re = JSON.parse(JSON.stringify(region));
+    if (item.child === 1) {
+      re = [];
+      re.push(item);
+    } else {
+      re[item.child - 1] = item;
+      re.splice(item.child);
+    }
+    setRegion([...re]);
+    if (item.child !== 4) {
+      getRegion();
+    } else {
+      // 选了第四个后回调
+      handelSelectRegion([...re]);
+      handleConfirm();
+    }
+  };
+
+  const changeRegion = (index) => {
+    setSelectType(index);
+    selectTypeRef.current = index;
+  };
+
+  const handleConfirm = () => {
+    SheetManager.hide(sheetId);
+  };
+
+  const handleCancel = () => {
+    SheetManager.hide(sheetId);
+  };
+
+  return (
+    <>
+      <ActionSheet id={sheetId} isModal={false}>
+        <View style={styles.content}>
+          <Text style={styles.title}>选择地区</Text>
+          {/* 已选择 */}
+          <View style={styles.row}>
+            {region.length > 0 && (
+              <TouchableOpacity onPress={() => changeRegion(0)}>
+                <Text style={styles.selectTitle}>{region[0]?.name}</Text>
+              </TouchableOpacity>
+            )}
+            {region.length > 1 && (
+              <TouchableOpacity onPress={() => changeRegion(1)}>
+                <Text style={styles.selectTitle}>{region[1]?.name}</Text>
+              </TouchableOpacity>
+            )}
+            {region.length > 2 && (
+              <TouchableOpacity onPress={() => changeRegion(2)}>
+                <Text style={styles.selectTitle}>{region[2]?.name}</Text>
+              </TouchableOpacity>
+            )}
+            {region.length > 3 && (
+              <TouchableOpacity onPress={() => changeRegion(3)}>
+                <Text style={styles.selectTitle}>{region[3]?.name}</Text>
+              </TouchableOpacity>
+            )}
+            {region.length === 4 && (
+              <Text style={styles.selectTitle}>请选择</Text>
+            )}
+          </View>
+          {/* 地区列表 */}
+          <RegionList
+            type={selectTypeRef.current}
+            provinceList={provinceList}
+            cityList={cityList}
+            areaList={areaList}
+            streetList={streetList}
+            selectRegion={selectRegion}
+          />
+          <TouchableOpacity style={styles.closeBox} onPress={handleCancel}>
+            <Image
+              source={require("../../../assets/img/close.png")}
+              style={styles.closeImg}
+            />
+          </TouchableOpacity>
+        </View>
+      </ActionSheet>
+    </>
+  );
+};
+
+const RegionList = ({
+  type,
+  streetList,
+  areaList,
+  cityList,
+  provinceList,
+  selectRegion,
+}) => {
+  const list =
+    type === 0
+      ? provinceList
+      : type === 1
+        ? cityList
+        : type === 2
+          ? areaList
+          : streetList;
+  return (
+    <View style={styles.regionStyle}>
+      <ScrollView showsVerticalScrollIndicator={false}>
+        {list.length ? (
+          list.map((item) => (
+            <TouchableOpacity
+              onPress={() => selectRegion(type, item)}
+              key={item.code}
+            >
+              <Text style={styles.region}>{item.name}</Text>
+            </TouchableOpacity>
+          ))
+        ) : (
+          <Text style={styles.region}>暂无数据</Text>
+        )}
+      </ScrollView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  content: {
+    paddingHorizontal: px(55),
+    paddingTop: px(38),
+    position: "relative",
+    backgroundColor: "#fff",
+  },
+  title: {
+    fontSize: px(44),
+    color: "#333",
+    textAlign: "center",
+    marginBottom: px(55),
+  },
+  row: {
+    flexDirection: "row",
+  },
+  selectTitle: {
+    color: "#EA6000",
+    marginRight: px(30),
+  },
+  closeBox: {
+    position: "absolute",
+    top: px(36),
+    right: px(44),
+  },
+  closeImg: {
+    width: px(70),
+    height: px(70),
+  },
+  regionStyle: {
+    height: px(800),
+    marginTop: px(33),
+  },
+  region: {
+    color: "#333",
+    marginBottom: px(33),
+  },
+});
+
+export default Index;

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import {Text, StyleSheet, View} from 'react-native';
+import {Icon} from '@rneui/themed';
+
+const Index = ({style, children}) => {
+  return <View style={[styles.container, style]}>{children}</View>;
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 10,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: '#ebeef5',
+    borderRadius: 5,
+  },
+});
+
+export default Index;