ipanel-rnapp-ajb-base 1.0.0

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import {Text, StyleSheet} from 'react-native';
+
+const Index = ({style, title}) => {
+  return <Text style={[styles.tag, style]}>{title}</Text>;
+};
+
+const styles = StyleSheet.create({
+  tag: {
+    backgroundColor: '#645cdf',
+    paddingVertical: 2,
+    paddingHorizontal: 5,
+    color: '#fff',
+  },
+});
+
+export default Index;

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

@@ -0,0 +1,103 @@
+import React, {useImperativeHandle, useState} from 'react';
+import {Text, StyleSheet, View} from 'react-native';
+// let width = Dimensions.get('window').width;
+// let height = Dimensions.get('window').height;
+
+const px = global.base.scaleSize;
+
+const Index = ({steps, active, onRef}) => {
+  const [show, setShow] = useState(false);
+  const [toastText, setToastText] = useState('提示');
+  const [showMask, setShowMask] = useState(false);
+  const [position, setPosition] = useState('center');
+  const [toastTextStyle, setToastTextStyle] = useState({});
+
+  const toastStyles = {
+    center: {
+      top: '50%',
+      bottom: undefined,
+    },
+    bottom: {
+      top: undefined,
+      bottom: 70,
+    },
+    top: {
+      top: 100,
+      bottom: undefined,
+    },
+  };
+
+  useImperativeHandle(onRef, () => {
+    return {
+      showToast: args => {
+        let duration = 2000;
+        if (typeof args === 'object') {
+          setPosition(args.position || 'center');
+          setToastText(args.message || '提示');
+          setShowMask(!!args.forbidClick);
+          setToastTextStyle(args.textStyle || {});
+          duration = args.duration || 2000;
+        } else {
+          setPosition('center');
+          setToastText(args);
+        }
+
+        setShow(true);
+        setTimeout(() => {
+          setShow(false);
+          setShowMask(false);
+        }, duration);
+      },
+    };
+  });
+
+  return show ? (
+    <>
+      {showMask ? (
+        <View style={styles.mask}>
+          <View style={[styles.toast, toastStyles[position]]}>
+            <Text style={[styles.title, toastTextStyle]}>{toastText}</Text>
+          </View>
+        </View>
+      ) : (
+        <View style={[styles.toast, toastStyles[position]]}>
+          <Text style={[styles.title, toastTextStyle]}>{toastText}</Text>
+        </View>
+      )}
+    </>
+  ) : (
+    <View />
+  );
+};
+
+const styles = StyleSheet.create({
+  mask: {
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    position: 'absolute',
+    zIndex: 100000,
+    opacity: 0,
+  },
+  toast: {
+    zIndex: 200000,
+    left: '50%',
+    top: '50%',
+    width: px(720),
+    marginLeft: -px(720 / 2),
+    position: 'absolute',
+    opacity: 1,
+    padding: px(69),
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+    borderRadius: px(17),
+  },
+  title: {
+    fontSize: px(44),
+    color: '#fff',
+    textAlign: 'center',
+    fontWeight: '500',
+  },
+});
+
+export default Index;

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

@@ -0,0 +1,196 @@
+import React, {useState} from 'react';
+import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';
+import ActionSheet, {SheetManager} from 'react-native-actions-sheet';
+import {Icon, CheckBox} from '@rneui/themed';
+
+const Index = ({sheetId, payload}) => {
+  const {title} = payload;
+
+  const [dates, setDates] = useState([
+    {
+      name: '周日',
+      value: 0,
+      checked: false,
+    },
+    {
+      name: '周一',
+      value: 1,
+      checked: false,
+    },
+    {
+      name: '周二',
+      value: 2,
+      checked: false,
+    },
+    {
+      name: '周三',
+      value: 3,
+      checked: false,
+    },
+    {
+      name: '周四',
+      value: 4,
+      checked: false,
+    },
+    {
+      name: '周五',
+      value: 5,
+      checked: false,
+    },
+    {
+      name: '周六',
+      value: 6,
+      checked: false,
+    },
+  ]);
+
+  const handleCancel = () => {
+    SheetManager.hide(sheetId);
+  };
+
+  const handleConfirm = () => {
+    SheetManager.hide(sheetId, {
+      payload: {
+        dates: dates
+          .filter(item => item.checked)
+          .map(item => ({
+            name: item.name,
+            value: item.value,
+          })),
+      },
+    });
+  };
+
+  const handleCheck = day => {
+    day.checked = !day.checked;
+    setDates([...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>
+
+        <View style={styles.weekDayWrap}>
+          {dates.map((day, dayIndex) => {
+            return (
+              <TouchableOpacity
+                key={dayIndex}
+                activeOpacity={0.75}
+                onPress={() => handleCheck(day)}>
+                <View style={styles.weekDayInner}>
+                  <Text style={styles.weekDayLabel}>{day.name}</Text>
+                  <CheckBox
+                    center
+                    checked={day.checked}
+                    containerStyle={{
+                      margin: 0,
+                      padding: 0,
+                    }}
+                    onPress={() => handleCheck(day)}
+                    checkedIcon={
+                      <Icon
+                        name="ios-checkbox"
+                        type="ionicon"
+                        color="#000"
+                        size={26}
+                      />
+                    }
+                    uncheckedIcon={
+                      <Icon
+                        name="ios-checkbox-outline"
+                        type="ionicon"
+                        color="#ccc"
+                        size={26}
+                      />
+                    }
+                  />
+                </View>
+              </TouchableOpacity>
+            );
+          })}
+        </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',
+  },
+
+  weekDayWrap: {},
+  weekDay: {
+    height: 50,
+    paddingLeft: 25,
+    paddingRight: 10,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderBottomWidth: 1,
+    borderBottomColor: '#eee',
+  },
+  weekDayInner: {
+    height: 50,
+    paddingLeft: 25,
+    paddingRight: 10,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderBottomWidth: 1,
+    borderBottomColor: '#eee',
+  },
+  weekDayLabel: {
+    fontSize: 18,
+  },
+});
+
+export default Index;

package/app/components/index.js

@@ -0,0 +1,8 @@
+export AccordionCell from './common/AccordionCell';
+export Cell from './common/Cell';
+export SmsCodeInput from './common/SmsCodeInput';
+export Tag from './common/Tag';
+export ActionPicker from './common/ActionPicker';
+export ScreenBackHeader from './common/ScreenBackHeader';
+export CustomDialog from './common/CustomDialog';
+export OnceTouchable from './common/OnceTouchable';