ipanel-rnapp-ajb-base 1.0.0

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

@@ -0,0 +1,232 @@
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  FlatList,
+  Dimensions,
+} from 'react-native';
+import ActionSheet, {SheetManager} from 'react-native-actions-sheet';
+import {Divider} from '@rneui/themed';
+import px from '../../../utils/scaleSize';
+
+const Index = ({sheetId, payload}) => {
+  const {columns = [], nameProp, defaultIndex = 0, disabled} = payload;
+
+  const [activeIndex, setActiveIndex] = useState(defaultIndex + 2);
+  const flatListRef = useRef(null);
+
+  // 渲染的列表 前后各加2个假的数据
+  const renderColumns = ['', ''].concat(columns).concat(['', '', '']);
+  const handleCancel = () => {
+    SheetManager.hide(sheetId);
+  };
+
+  const handleConfirm = () => {
+    // 保存时，index-2，因为前面加了两条假数据
+    SheetManager.hide(sheetId, {
+      payload: {
+        index: activeIndex - 2,
+        data: columns[activeIndex - 2],
+      },
+    });
+  };
+
+  const renderItem = ({item, index}) => {
+    const columnTextStyle =
+      index === activeIndex ? styles.activeColumnText : styles.columnText;
+    let columnDisabled = false;
+    if (typeof disabled === 'function') {
+      columnDisabled = disabled(item, index - 2);
+    }
+    return (
+      <TouchableOpacity
+        disabled={!item}
+        onPress={() =>
+          flatListRef.current?.scrollToIndex({
+            index: index - 2,
+          })
+        }
+        style={{
+          ...styles.column,
+          // borderTopWidth: index === activeIndex ? 1 : 0,
+          // borderBottomWidth: index === activeIndex ? 1 : 0,
+          // borderColor: '#eee',
+        }}>
+        <Text
+          style={{
+            ...columnTextStyle,
+            color: columnDisabled ? '#999' : columnTextStyle.color,
+            textDecorationLine: columnDisabled ? 'line-through' : 'none',
+          }}>
+          {nameProp ? item[nameProp] : item}
+        </Text>
+      </TouchableOpacity>
+    );
+  };
+
+  // 打开时定位到默认行
+  const onOpen = () => {
+    flatListRef.current?.scrollToIndex({
+      index: defaultIndex,
+    });
+  };
+
+  // 固定5个数据高度，永远聚焦中间那条 ios可以滚动出视图范围弹性地拉动一截，可能可视区域数量不一定是5个
+  const onViewableItemsChanged = useCallback(({viewableItems}) => {
+    if (
+      viewableItems.length >= 3 &&
+      viewableItems[viewableItems.length - 3].item
+    ) {
+      const index = viewableItems[viewableItems.length - 3].index;
+      setActiveIndex(index);
+    }
+  }, []);
+
+  return (
+    <>
+      <ActionSheet id={sheetId} isModal={true} onOpen={onOpen}>
+        {/*
+        <View style={styles.bufferColumns}>
+          {topColumns.map((item, index) => (
+            <View key={index} style={styles.column}>
+              <Text style={styles.columnText}>
+                {nameProp ? item[nameProp] : item}
+              </Text>
+            </View>
+          ))}
+        </View>
+        */}
+        <View style={styles.columns}>
+          <FlatList
+            scrollEnabled={true}
+            // ref={flatListRef}
+            ref={flatListRef}
+            showsVerticalScrollIndicator={false}
+            horizontal={false}
+            // alwaysBounceVertical={false}
+            // bounces={false}
+            pagingEnabled={false}
+            // overScrollMode="never"
+            numColumns={1}
+            data={renderColumns}
+            keyExtractor={(item, index) => index}
+            renderItem={renderItem}
+            getItemLayout={(data, index) => {
+              return {
+                length: px(150),
+                offset: px(150) * index,
+                index,
+              };
+            }}
+            onViewableItemsChanged={onViewableItemsChanged}
+            viewabilityConfig={{
+              viewAreaCoveragePercentThreshold: 50,
+            }}
+          />
+        </View>
+        {/*
+        <View style={styles.bufferColumns}>
+          {bottomColumns.map((item, index) => (
+            <View key={index} style={styles.column}>
+              <Text style={styles.columnText}>
+                {nameProp ? item[nameProp] : item}
+              </Text>
+            </View>
+          ))}
+        </View>
+        */}
+        <Divider color="#eee" width={1} />
+        <View style={styles.bottomBtnBox}>
+          <TouchableOpacity style={styles.bottomBtn} onPress={handleCancel}>
+            <Text style={styles.bottomBtnText}>取消</Text>
+          </TouchableOpacity>
+
+          <Divider orientation="vertical" width={1} color="#eee" />
+          <TouchableOpacity
+            disabled={
+              typeof disabled === 'function' &&
+              disabled(columns[activeIndex - 2], activeIndex - 2)
+            }
+            style={{
+              ...styles.bottomBtn,
+              opacity:
+                typeof disabled === 'function' &&
+                disabled(columns[activeIndex - 2], activeIndex - 2)
+                  ? 0.3
+                  : 1,
+            }}
+            onPress={handleConfirm}>
+            <Text
+              style={[
+                styles.bottomBtnText,
+                {
+                  color: '#ea6000',
+                  fontWeight: 'bold',
+                },
+              ]}>
+              确定
+            </Text>
+          </TouchableOpacity>
+        </View>
+      </ActionSheet>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  bottomBtnBox: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+    alignItems: 'center',
+    paddingTop: px(29),
+    paddingBottom: px(132),
+  },
+  bottomBtn: {
+    flex: 1,
+  },
+  bottomBtnText: {
+    textAlign: 'center',
+    color: '#666',
+    fontSize: px(52),
+    fontWeight: '500',
+  },
+  columns: {
+    paddingHorizontal: px(55),
+    // maxHeight: Math.floor(deviceHeight / 2),
+    height: px(150) * 5,
+  },
+  column: {
+    // paddingVertical: px(44),
+    height: px(150),
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  columnText: {
+    fontSize: px(40),
+    color: '#999',
+    textAlign: 'center',
+    fontWeight: '500',
+  },
+  activeColumnText: {
+    fontSize: px(69),
+    color: '#333',
+    textAlign: 'center',
+    fontWeight: '500',
+  },
+  select: {
+    width: px(47),
+    height: px(42),
+  },
+
+  // 缓冲列表
+  bufferColumns: {
+    paddingHorizontal: px(55),
+    height: px(300),
+  },
+});
+
+export default Index;

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

@@ -0,0 +1,171 @@
+import React, {useEffect, useRef, useState} from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Image,
+  FlatList,
+  Dimensions,
+} from 'react-native';
+import ActionSheet, {SheetManager} from 'react-native-actions-sheet';
+import {Icon, CheckBox, Divider} from '@rneui/themed';
+import px from '../../../utils/scaleSize';
+const deviceHeight = Dimensions.get('window').height;
+
+const Index = ({sheetId, payload}) => {
+  const {
+    columns = [],
+    nameProp,
+    defaultIndex = 0,
+    multiple = false,
+    defaultIndexs = [0],
+  } = payload;
+
+  const [activeIndex, setActiveIndex] = useState(defaultIndex);
+  // 用于多选时(multiple = true) 记录选择数据
+  const [selectIndexs, setSelectIndexs] = useState(defaultIndexs);
+  const flatListRef = useRef(null);
+
+  const handleCancel = () => {
+    SheetManager.hide(sheetId);
+  };
+
+  useEffect(() => {
+    if (!multiple) {
+      Promise.resolve().then(() => {
+        console.log(flatListRef.current);
+        flatListRef.current?.scrollToOffset({
+          offset: px(150) * defaultIndex,
+        });
+      });
+    }
+  }, []);
+
+  const handleConfirm = () => {
+    let payload;
+    if (multiple) {
+      payload = {
+        indexs: selectIndexs,
+        datas: selectIndexs.map(i => columns[i]),
+      };
+    } else {
+      payload = {
+        index: activeIndex,
+        data: columns[activeIndex],
+      };
+    }
+    SheetManager.hide(sheetId, {
+      payload,
+    });
+  };
+
+  const handleItemPress = index => {
+    if (multiple) {
+      let indexs = [...selectIndexs];
+      if (indexs.includes(index)) {
+        const deleteIndex = indexs.findIndex(item => item === index);
+        indexs.splice(deleteIndex, 1);
+      } else {
+        indexs.push(index);
+        indexs.sort((a, b) => a - b);
+      }
+      setSelectIndexs([...indexs]);
+    } else {
+      setActiveIndex(index);
+    }
+  };
+
+  const renderItem = ({item, index}) => {
+    const showConfirm =
+      (multiple && selectIndexs.includes(index)) ||
+      (!multiple && activeIndex === index);
+    return (
+      <TouchableOpacity
+        style={styles.column}
+        onPress={() => handleItemPress(index)}>
+        <Text style={styles.columnText}>
+          {nameProp ? item[nameProp] : item}
+        </Text>
+        {showConfirm && (
+          <Image
+            source={require('../../../assets/img/confirm.png')}
+            style={styles.select}
+          />
+        )}
+      </TouchableOpacity>
+    );
+  };
+
+  const onOpen = () => {
+    flatListRef.current?.scrollToOffset({
+      offset: px(150) * defaultIndex,
+    });
+  };
+
+  return (
+    <>
+      <ActionSheet id={sheetId} isModal={false} onOpen={onOpen}>
+        <View style={styles.columns}>
+          <FlatList
+            // ref={flatListRef}
+            ref={flatListRef}
+            showsVerticalScrollIndicator={false}
+            horizontal={false}
+            numColumns={1}
+            data={columns}
+            keyExtractor={(item, index) => index}
+            renderItem={renderItem}
+          />
+        </View>
+        <View style={styles.bottomBtnBox}>
+          <TouchableOpacity style={styles.bottomBtn} onPress={handleCancel}>
+            <Text style={styles.bottomBtnText}>取消</Text>
+          </TouchableOpacity>
+
+          <Divider orientation="vertical" />
+          <TouchableOpacity style={styles.bottomBtn} onPress={handleConfirm}>
+            <Text style={[styles.bottomBtnText]}>确定</Text>
+          </TouchableOpacity>
+        </View>
+      </ActionSheet>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  bottomBtnBox: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+    alignItems: 'center',
+    paddingVertical: px(50),
+  },
+  bottomBtn: {
+    flex: 1,
+  },
+  bottomBtnText: {
+    textAlign: 'center',
+  },
+  columns: {
+    paddingHorizontal: px(55),
+    maxHeight: Math.floor(deviceHeight / 2),
+  },
+  column: {
+    // paddingVertical: px(44),
+    height: px(150),
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  columnText: {
+    fontSize: px(49),
+    color: '#333',
+  },
+  select: {
+    width: px(47),
+    height: px(42),
+  },
+});
+
+export default Index;

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

@@ -0,0 +1,93 @@
+import React, {useState} from 'react';
+import {
+  View,
+  TextInput,
+  Text,
+  Button,
+  StyleSheet,
+  TouchableOpacity,
+} from 'react-native';
+
+const Index = ({
+  value,
+  placeholder,
+  rightBtnDisabled,
+  rightBtnText,
+  onChangeText,
+  onRightBtnPress,
+}) => {
+  const verifyBtnDisableStyle = {};
+  const verifyBtnTextDisableStyle = {};
+
+  if (rightBtnDisabled) {
+    verifyBtnDisableStyle.borderColor = 'rgba(217, 217, 217, 1)';
+    verifyBtnTextDisableStyle.color = 'rgba(217, 217, 217, 1)';
+  }
+
+  const handleGetVerifyCode = () => {
+    if (rightBtnDisabled) {
+      return;
+    }
+    onRightBtnPress();
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.inputBox}>
+        <TextInput
+          style={styles.input}
+          value={value}
+          placeholder={placeholder}
+          onChangeText={onChangeText}
+        />
+      </View>
+      <View style={styles.btn}>
+        {/* <Button
+          title={rightBtnText}
+          disabled={rightBtnDisabled}
+          onPress={onRightBtnPress}
+        /> */}
+        <TouchableOpacity
+          activeOpacity={rightBtnDisabled ? 1 : 0.6}
+          onPress={handleGetVerifyCode}>
+          <View style={[styles.verifyBtn, verifyBtnDisableStyle]}>
+            <Text style={[styles.verifyBtnText, verifyBtnTextDisableStyle]}>
+              {rightBtnText}
+            </Text>
+          </View>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+  },
+  inputBox: {
+    flex: 1,
+  },
+  input: {
+    height: 50,
+    color: '#333',
+  },
+  btn: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  verifyBtn: {
+    borderWidth: 1,
+    height: 30,
+    borderRadius: 15,
+    borderColor: 'rgba(234, 96, 0, 1)',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 10,
+  },
+  verifyBtnText: {
+    color: 'rgba(234, 96, 0, 1)',
+  },
+});
+
+export default Index;

package/app/components/common/SmsCodeInput/indexNew.js

@@ -0,0 +1,101 @@
+import React, {useState} from 'react';
+import {
+  View,
+  TextInput,
+  Text,
+  Button,
+  StyleSheet,
+  TouchableOpacity,
+} from 'react-native';
+import px from '../../../utils/scaleSize';
+const Index = ({
+  value,
+  placeholder,
+  rightBtnDisabled,
+  rightBtnText,
+  onChangeText,
+  onRightBtnPress,
+}) => {
+  const verifyBtnDisableStyle = {};
+  const verifyBtnTextDisableStyle = {};
+
+  if (rightBtnDisabled) {
+    verifyBtnDisableStyle.borderColor = 'rgba(217, 217, 217, 1)';
+    verifyBtnTextDisableStyle.color = 'rgba(217, 217, 217, 1)';
+  }
+
+  const handleGetVerifyCode = () => {
+    if (rightBtnDisabled) {
+      return;
+    }
+    onRightBtnPress();
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.inputBox}>
+        <TextInput
+          keyboardType="number-pad"
+          style={styles.input}
+          value={value}
+          placeholder={placeholder}
+          placeholderTextColor="#A6A6A6"
+          onChangeText={onChangeText}
+          returnKeyType="done"
+        />
+      </View>
+      <View style={styles.btn}>
+        {/* <Button
+          title={rightBtnText}
+          disabled={rightBtnDisabled}
+          onPress={onRightBtnPress}
+        /> */}
+        <TouchableOpacity
+          activeOpacity={rightBtnDisabled ? 1 : 0.6}
+          onPress={handleGetVerifyCode}>
+          <View
+            style={[
+              styles.verifyBtn,
+              verifyBtnDisableStyle,
+              {borderColor: '#fff'},
+            ]}>
+            <Text style={[styles.verifyBtnText, verifyBtnTextDisableStyle]}>
+              {rightBtnText}
+            </Text>
+          </View>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+  },
+  inputBox: {
+    flex: 1,
+  },
+  input: {
+    height: 50,
+    color: '#333',
+  },
+  btn: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  verifyBtn: {
+    borderWidth: 1,
+    height: 30,
+    borderRadius: 15,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 10,
+  },
+  verifyBtnText: {
+    color: '#E86003',
+    fontSize: px(35),
+  },
+});
+
+export default Index;

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

@@ -0,0 +1,126 @@
+import React from 'react';
+import {Text, StyleSheet, View} from 'react-native';
+import {Icon} from '@rneui/themed';
+
+const Index = ({steps, active}) => {
+  const getLastDot = index => {
+    if (index === active) {
+      return (
+        <Icon name="checkmark-circle" type="ionicon" size={10} color="#0f0" />
+      );
+    } else if (index < active) {
+      return <View style={[styles.dot]} />;
+    } else {
+      return (
+        <View
+          style={[
+            styles.dot,
+            {
+              backgroundColor: '#ccc',
+            },
+          ]}
+        />
+      );
+    }
+  };
+
+  const getLineStyle = index => {
+    if (index + 1 <= active) {
+      return {
+        backgroundColor: '#0f0',
+      };
+    } else {
+      return {
+        backgroundColor: '#ccc',
+      };
+    }
+  };
+
+  return (
+    <View>
+      <View
+        style={[
+          styles.list,
+          {
+            height: 20,
+            justifyContent: 'space-between',
+          },
+        ]}>
+        {steps.map((item, index) => {
+          return (
+            <Text
+              key={index}
+              style={{
+                color: index === active ? '#0f0' : '#000',
+              }}>
+              {item.text}
+            </Text>
+          );
+        })}
+      </View>
+
+      <View
+        style={[
+          styles.list,
+          {
+            height: 30,
+          },
+        ]}>
+        {new Array(steps.length - 1).fill().map((item, index) => {
+          return (
+            <View style={[styles.item]} key={index}>
+              {<View style={styles.dotContainer}>{getLastDot(index)}</View>}
+              <View
+                style={[
+                  styles.line,
+                  getLineStyle(index),
+                  {
+                    marginRight: index === steps.length - 2 ? 10 : 0,
+                  },
+                ]}
+              />
+              {index === steps.length - 2 ? (
+                <View style={styles.dotContainer}>{getLastDot(index + 1)}</View>
+              ) : (
+                <View />
+              )}
+            </View>
+          );
+        })}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  list: {
+    flexDirection: 'row',
+    paddingLeft: 10,
+    paddingRight: 10,
+  },
+  item: {
+    flex: 1,
+    alignItems: 'center',
+    marginRight: 10,
+    flexDirection: 'row',
+  },
+  dotContainer: {
+    width: 10,
+    height: 10,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  dot: {
+    width: 5,
+    height: 5,
+    borderRadius: 2.5,
+    backgroundColor: '#0f0',
+  },
+  line: {
+    flex: 1,
+    height: 1,
+    marginLeft: 10,
+  },
+});
+
+export default Index;