ipanel-rnapp-ajb-base 1.0.0

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

@@ -0,0 +1,381 @@
+import React, {useRef, useState} from 'react';
+import {
+  View,
+  Text,
+  TextInput,
+  StyleSheet,
+  TouchableHighlight,
+  TouchableOpacity,
+  Platform,
+  Image,
+} from 'react-native';
+import {Icon, Switch, Slider, ButtonGroup} from '@rneui/themed';
+import px from '../../../utils/scaleSize';
+
+const Index = ({
+  type = 'text',
+  label = '',
+  leftComponent,
+  value,
+  style = {},
+  inputIcon,
+  sliderOptions,
+  enumButtons,
+  onChangeText,
+  onValueChange,
+  placeholder = '',
+  onRightPress,
+  required = false,
+  rightComponent,
+  valueTextStyle,
+  // 左边样式
+  labelStyle,
+  // 左边label
+  labelTextStyle,
+  editable = true,
+  multiline = true,
+  inputRef,
+  onSubmitEditing,
+  keyboardType,
+  maxLength,
+  onBlur,
+  onRightLongPress,
+  returnKeyType,
+  border = true,
+}) => {
+  // 是否在编辑模式
+  const [editMode, setEditMode] = useState(false);
+
+  return React.createElement(type === 'link' ? TouchableOpacity : View, {
+    style: [
+      styles.container,
+      {
+        borderBottomWidth: border ? 0.4 : 0,
+      },
+      style,
+    ],
+    onPress: onRightPress,
+    onLongPress: onRightLongPress,
+    children: (
+      <>
+        {!!leftComponent && <View>{leftComponent}</View>}
+        {!!label && (
+          <View style={[styles.labelBox, labelStyle]}>
+            <Text style={styles.requiredFlag}>{required ? '*' : ''}</Text>
+            <Text style={[styles.label, labelTextStyle]} numberOfLines={1}>
+              {label}
+            </Text>
+          </View>
+        )}
+        {type === 'input' ? (
+          <View
+            style={[styles.valueBox, styles.inputBox]}
+            onPress={onRightPress}
+            activeOpacity={0.9}
+            underlayColor="#fcfcfc">
+            <TextInput
+              ref={inputRef}
+              value={value}
+              multiline={multiline}
+              style={styles.valueInput}
+              placeholder={placeholder}
+              placeholdertextcolor="#999"
+              onChangeText={onChangeText}
+              editable={editable}
+              keyboardType={keyboardType}
+              maxLength={maxLength}
+              returnKeyType={returnKeyType}
+            />
+            <View style={styles.inputIconBox}>{inputIcon}</View>
+          </View>
+        ) : type === 'link' ? (
+          <View
+            style={styles.valueBox}
+            onPress={onRightPress}
+            activeOpacity={0.9}
+            underlayColor="#f5f5f5">
+            <View style={styles.valueLink}>
+              <View style={styles.linkLeftText}>
+                <Text
+                  style={[styles.valueLinkText, valueTextStyle]}
+                  numberOfLines={1}>
+                  {value}
+                </Text>
+              </View>
+              <View style={styles.linkRightIcon}>
+                {/*<Icon*/}
+                {/*  name="chevron-right"*/}
+                {/*  type="material"*/}
+                {/*  size={20}*/}
+                {/*  color="#aaa"*/}
+                {/*/>*/}
+                <Image
+                  source={require('../../../assets/img/link.png')}
+                  style={{
+                    width: px(30),
+                    height: px(30),
+                  }}
+                  resizeMode="contain"
+                />
+              </View>
+            </View>
+          </View>
+        ) : type === 'switch' ? (
+          <View
+            style={styles.valueBox}
+            onPress={onRightPress}
+            activeOpacity={0.9}
+            underlayColor="#f1f1f1">
+            <Switch
+              style={styles.switchStyle}
+              value={value}
+              onValueChange={onValueChange}
+              thumbColor="#fff"
+            />
+          </View>
+        ) : type === 'slider' ? (
+          <View
+            style={styles.valueBox}
+            onPress={onRightPress}
+            activeOpacity={0.9}
+            underlayColor="#f1f1f1">
+            <View style={styles.sliderBox}>
+              <View style={styles.sliderContainer}>
+                <Slider
+                  maximumTrackTintColor="#d9d9d9"
+                  maximumValue={sliderOptions.max || 100}
+                  minimumTrackTintColor={
+                    sliderOptions.minimumTrackTintColor || '#00beb5'
+                  }
+                  minimumValue={sliderOptions.min || 0}
+                  disabled={sliderOptions.disabled || false}
+                  onSlidingComplete={sliderOptions.onSlidingComplete}
+                  onSlidingStart={sliderOptions.onSlidingStart}
+                  onValueChange={sliderOptions.onValueChange}
+                  orientation="horizontal"
+                  step={1}
+                  style={{width: '100%', height: 20}}
+                  thumbStyle={{
+                    height: px(33),
+                    width: px(33),
+                    borderWidth: 1,
+                    borderColor: '#ccc',
+                  }}
+                  thumbTintColor={sliderOptions.thumbTintColor || '#0c0'}
+                  thumbTouchSize={{width: 40, height: 40}}
+                  trackStyle={{height: px(16), borderRadius: px(8)}}
+                  value={value}
+                />
+                <View
+                  style={{
+                    flexDirection: 'row',
+                    justifyContent: 'space-between',
+                  }}>
+                  {(sliderOptions.progressLabels || []).map((item, index) => (
+                    <Text
+                      key={index}
+                      style={{
+                        color: '#666',
+                        fontSize: px(38),
+                      }}>
+                      {item}
+                    </Text>
+                  ))}
+                </View>
+              </View>
+              <View style={styles.sliderLabelBox}>
+                <Text style={styles.sliderLabel}>{value}</Text>
+              </View>
+            </View>
+          </View>
+        ) : type === 'enum' ? (
+          <View
+            style={styles.valueBox}
+            onPress={onRightPress}
+            activeOpacity={0.9}
+            underlayColor="#f1f1f1">
+            <ButtonGroup
+              buttons={enumButtons}
+              selectedIndex={value}
+              onPress={value => {
+                onValueChange(value);
+              }}
+            />
+          </View>
+        ) : type === 'custom' ? (
+          <View style={styles.valueBox}>{rightComponent}</View>
+        ) : type === 'edit' ? (
+          editMode ? (
+            <View style={[styles.valueBox, styles.inputBox]}>
+              <TextInput
+                ref={ref => {
+                  setTimeout(() => {
+                    ref?.focus();
+                  }, 100);
+                }}
+                value={value}
+                multiline={false}
+                style={styles.valueInput}
+                placeholder={placeholder}
+                placeholdertextcolor="#999"
+                onChangeText={onChangeText}
+                returnKeyType="done"
+                onSubmitEditing={({nativeEvent}) => {
+                  setEditMode(false);
+                  onSubmitEditing && onSubmitEditing(nativeEvent.text);
+                }}
+                onBlur={(...args) => {
+                  setEditMode(false);
+                  onBlur && onBlur(...args);
+                }}
+                editable={editable}
+                keyboardType={keyboardType}
+              />
+              <View style={styles.inputIconBox}>{inputIcon}</View>
+            </View>
+          ) : (
+            <TouchableOpacity
+              style={styles.valueBox}
+              onPress={() => {
+                setEditMode(true);
+              }}
+              activeOpacity={0.9}
+              underlayColor="#f1f1f1">
+              <Text style={[styles.valueText, valueTextStyle]} selectable>
+                {value}
+              </Text>
+            </TouchableOpacity>
+          )
+        ) : (
+          <View
+            style={styles.valueBox}
+            onPress={onRightPress}
+            activeOpacity={0.9}
+            underlayColor="#f1f1f1">
+            <Text style={[styles.valueText, valueTextStyle]} selectable>
+              {value}
+            </Text>
+          </View>
+        )}
+      </>
+    ),
+  });
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    minHeight: 55,
+    borderBottomColor: '#f0f0f0',
+  },
+  labelBox: {
+    // flex: 1,
+    width: px(500),
+    alignItems: 'center',
+    paddingLeft: px(38) - 10,
+    flexDirection: 'row',
+  },
+  requiredFlag: {
+    color: '#E32929',
+    fontSize: 16,
+    width: 10,
+  },
+  label: {
+    fontSize: px(49),
+    color: '#333',
+    fontWeight: '400',
+  },
+  valueBox: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'flex-end',
+  },
+  switchStyle: {
+    ...Platform.select({
+      android: {
+        marginRight: 20,
+        transform: [
+          {
+            scaleX: 1.1,
+          },
+          {
+            scaleY: 1.1,
+          },
+        ],
+      },
+      ios: {
+        marginRight: 10,
+        transform: [
+          {
+            scaleX: 0.7,
+          },
+          {
+            scaleY: 0.7,
+          },
+        ],
+      },
+    }),
+  },
+  sliderBox: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  sliderContainer: {
+    flex: 1,
+  },
+  sliderLabelBox: {
+    width: 40,
+    alignItems: 'center',
+  },
+  sliderLabel: {
+    fontSize: 16,
+  },
+  inputBox: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  valueInput: {
+    flex: 1,
+    textAlign: 'right',
+    fontSize: px(44),
+    color: '#666',
+    backgroundColor: '#fff',
+    paddingRight: px(44),
+    height: '100%',
+    fontWeight: '400',
+  },
+  inputIconBox: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  valueLink: {
+    flexDirection: 'row',
+    paddingRight: px(44),
+  },
+  linkLeftText: {
+    flex: 1,
+  },
+  linkRightIcon: {
+    width: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    // marginLeft: 10,
+  },
+  valueText: {
+    textAlign: 'right',
+    fontSize: px(44),
+    color: '#666',
+    fontWeight: '400',
+    lineHeight: 24,
+    paddingRight: px(44),
+  },
+  valueLinkText: {
+    textAlign: 'right',
+    fontSize: px(44),
+    color: '#666',
+    fontWeight: '400',
+    lineHeight: 24,
+  },
+});
+
+export default Index;

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

@@ -0,0 +1,120 @@
+import {View, StyleSheet, TouchableOpacity} from 'react-native';
+import {Text, Divider} from '@rneui/themed';
+import React from 'react';
+import px from '../../../utils/scaleSize';
+import {fontStyle} from '../../../utils/StyleComposite';
+
+/**
+ * 自定义组件式dialog组件，必须放在页面根组件下，内容通过插槽传入
+ * @param onVisibleChange Function 控制显示和隐藏
+ * @param onConfirm Function 确定按钮回调
+ * @param children  JSX.Element 内容插槽
+ * @param title String 标题
+ * @param button JSX.Element
+ * @returns {JSX.Element}
+ */
+export default ({
+  onVisibleChange,
+  onConfirm,
+  children,
+  title,
+  customButton = false,
+  contentStyle = {},
+}) => {
+  const handlerConfirm = () => {
+    onConfirm && onConfirm();
+  };
+  return (
+    <TouchableOpacity
+      activeOpacity={1}
+      style={styles.mask}
+      onPress={() => {
+        onVisibleChange(false);
+      }}>
+      <TouchableOpacity style={styles.container} activeOpacity={1}>
+        {!!title && (
+          <View style={styles.title}>
+            <Text style={styles.titleText}>{title}</Text>
+          </View>
+        )}
+        <View
+          style={{
+            ...styles.content,
+            ...contentStyle,
+          }}>
+          {children}
+        </View>
+        {!customButton && (
+          <View style={styles.bottom}>
+            <Divider color="#EEE" />
+            <View style={styles.bottomBtnBox}>
+              <TouchableOpacity
+                style={styles.bottomBtn}
+                onPress={() => onVisibleChange(false)}>
+                <Text style={styles.bottomBtnText}>取消</Text>
+              </TouchableOpacity>
+              <Divider orientation="vertical" />
+              <TouchableOpacity
+                style={styles.bottomBtn}
+                onPress={handlerConfirm}>
+                <Text
+                  style={{
+                    ...styles.bottomBtnText,
+                    color: '#EA6000',
+                  }}>
+                  确定
+                </Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        )}
+      </TouchableOpacity>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  mask: {
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  container: {
+    backgroundColor: '#fff',
+    width: px(915),
+    borderRadius: px(44),
+  },
+  title: {
+    paddingTop: px(55),
+    paddingLeft: px(82),
+  },
+  titleText: {
+    ...fontStyle(49, '#333', 'bold'),
+  },
+  content: {
+    paddingHorizontal: px(82),
+    paddingBottom: px(82),
+    paddingTop: px(66),
+  },
+  bottom: {},
+  bottomBtnBox: {
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+    alignItems: 'center',
+  },
+  bottomBtn: {
+    flex: 1,
+    paddingVertical: px(36),
+  },
+  bottomBtnText: {
+    textAlign: 'center',
+    fontWeight: '500',
+    color: '#333',
+    fontSize: px(49),
+  },
+});

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

@@ -0,0 +1,157 @@
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Platform,
+  Image,
+} from 'react-native';
+import React from 'react';
+import {Icon} from '@rneui/themed';
+
+import px from '../../../utils/scaleSize';
+
+/*
+<ion-icon name="home"></ion-icon>
+<ion-icon name="sunny"></ion-icon>
+<ion-icon name="heart-half"></ion-icon>
+<ion-icon name="cart"></ion-icon>
+<ion-icon name="person"></ion-icon>
+ */
+
+export default ({state, descriptors, navigation}) => {
+  return (
+    <View style={styles.container}>
+      {state.routes.map((route, index) => {
+        // console.log(route, 'route');
+        const {options} = descriptors[route.key];
+        // console.log(options, 'descriptors');
+        let label;
+        if (options.moduleAlias !== undefined) {
+          label = options.moduleAlias;
+        } else if (options.tabBarLabel !== undefined) {
+          label = options.tabBarLabel;
+        } else if (options.title !== undefined) {
+          label = options.title;
+        } else {
+          label = route.name;
+        }
+
+        const isFocused = state.index === index;
+
+        const onPress = () => {
+          const event = navigation.emit({
+            type: 'tabPress',
+            target: route.key,
+            canPreventDefault: true,
+          });
+
+          if (!isFocused && !event.defaultPrevented) {
+            // The `merge: true` option makes sure that the params inside the tab screen are preserved
+            navigation.navigate({name: route.name, merge: true});
+          }
+        };
+
+        const onLongPress = () => {
+          navigation.emit({
+            type: 'tabLongPress',
+            target: route.key,
+          });
+        };
+
+        const tabItemLabelFocusStyle = {
+          color: isFocused ? '#E86003' : '#999',
+        };
+
+        const iconUri = isFocused ? options.activeIconUri : options.iconUri;
+        const icon = isFocused ? options.activeIcon : options.icon;
+
+        return (
+          <TouchableOpacity
+            key={index}
+            accessibilityRole="button"
+            accessibilityState={isFocused ? {selected: true} : {}}
+            accessibilityLabel={options.tabBarAccessibilityLabel}
+            testID={options.tabBarTestID}
+            activeOpacity={0.8}
+            onPress={onPress}
+            onLongPress={onLongPress}
+            style={styles.navItem}>
+            <View
+              style={{
+                alignItems: 'center',
+                justifyContent: 'center',
+                height: 60,
+              }}>
+              {iconUri ? (
+                <Image
+                  source={{uri: iconUri}}
+                  style={{
+                    width: px(69),
+                    height: px(69),
+                  }}
+                  resizeMode="contain"
+                />
+              ) : (
+                icon && (
+                  <Icon
+                    name={icon}
+                    type="ionicon"
+                    size={px(69)}
+                    color={tabItemLabelFocusStyle.color}
+                  />
+                )
+              )}
+              <Text style={[styles.tabItemLabel, tabItemLabelFocusStyle]}>
+                {label}
+              </Text>
+            </View>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: 60,
+    backgroundColor: '#fff',
+    borderTopWidth: 1,
+    borderTopColor: '#f6f6f6',
+
+    // ...Platform.select({
+    //   android: {
+    //     shadowColor: '#290000',
+    //     shadowOffset: {
+    //       width: 0,
+    //       height: 3,
+    //     },
+    //     shadowOpacity: 0.6,
+    //     shadowRadius: 8,
+    //     elevation: 20,
+    //   },
+    //   ios: {
+    //     shadowColor: '#290000',
+    //     shadowOffset: {
+    //       width: 0,
+    //       height: 1,
+    //     },
+    //     shadowOpacity: 0.1,
+    //     shadowRadius: 2,
+    //     elevation: 10,
+    //   },
+    // }),
+  },
+  navItem: {
+    flex: 1,
+  },
+  tabItemLabel: {
+    textAlign: 'center',
+    fontSize: px(32),
+    marginTop: px(20),
+    fontWeight: '500',
+  },
+});