ipanel-rnapp-ajb-base 1.0.15 → 1.0.16

package/app/App.js

@@ -35,6 +35,7 @@ import Loading from './components/common/Loading';
 import Toast from './components/common/Toast';
 import Dialog from './components/common/Dialog';
 import Notify from './components/common/Notify';
+import SheetManage from './components/common/SheetManage';
 import storage from './storage';
 
 import {navigationRef} from './utils/RootNavigation';
@@ -439,6 +440,7 @@ const App = () => {
         <Toast onRef={ref => (global.toast = ref)} />
         <Notify onRef={ref => (global.notify = ref)} />
         <Dialog onRef={ref => (global.dialog = ref)} />
+          <SheetManage onRef={ref => (global.sheetManager = ref)} />
         {versionUpdateConfirmVisible && (
           <VersionUpdateConfirm
             onVisibleChange={setVersionUpdateConfirmVisible}

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

@@ -1,11 +1,15 @@
-import React,{useState} from 'react';
+import React,{useEffect, useState} from 'react';
 import {View, Text, StyleSheet} from 'react-native';
 import Picker from '../PickerV2Base/picker';
 import px from '../../../utils/scaleSize';
+import {
+  useAnimatedStyle,
+  withSpring,
+} from 'react-native-reanimated';
 const pickerStyles = {
-okView:{borderLeftColor:'#F0F0F0',borderLeftWidth:1},  
+okView:{borderLeftColor:'#F0F0F0',borderLeftWidth:1},
 okText: {color: '#E86003',width:px(500)}, 
-dismissText: {color: '#666666',width:px(500),},
+dismissText: {color: '#666',width:px(500),},
 container:{borderTopLeftRadius:px(20),borderTopRightRadius:px(20)},
 wrappper:{borderTopLeftRadius:px(20),borderTopRightRadius:px(20)},
 headerItem:{flex:0},
@@ -16,9 +20,23 @@ header:{
   backgroundColor: '#fff' 
 },
 maskMiddle:{borderColor:'transparent'},
+ titleBox:{
+  width:'100%',
+  height:px(205),
+  backgroundColor:'#fff',
+  top:px(15)
+ },
+ titleContent:{
+  width:'100%',height:px(190),borderBottomColor:'#f0f0f0',borderBottomWidth:1,
+  borderTopRightRadius:px(20),borderTopLeftRadius:px(20)
+ },
+ titleText:{
+  fontSize:px(48),color:'#333',textAlign:'center',lineHeight:px(190)
+ }
 }
 const pickerStyle = {height:px(700)}
 
+
 const PickerV2 = ({
     renderMaskTop=()=>{return <View></View>},
     renderMaskBottom=()=>{return <View></View>},
@@ -32,8 +50,27 @@ const PickerV2 = ({
     renderItem,
     defaultValue = [],
     pickedIndex=0,
-    changePickedIndex=()=>{}
+    changePickedIndex=()=>{},
+    animatedStartValue,
+    animationEffects = {},
+    title
 }) => {
+
+  // console.log(title)
+  const customSpringStyles = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          translateY: withSpring(animatedStartValue, {...{
+            damping: 20,
+            stiffness: 100,
+            mass:0.5
+          },...animationEffects}),
+        },
+      ],
+    };
+  });
+
   // console.log(defaultValue)
   const handlePickerChange=(item)=>{
     // console.log(item)
@@ -44,12 +81,14 @@ const PickerV2 = ({
       changePickedIndex(index)
   }
   const handlePikerCommit = (item) => {
+    // console.log(item)
     dealPickerCommit(item)
   } 
   const handlePickerCancel = () => {
     dealPickerCancel()
   }
   const renderLabel = (item, index) => {
+    // console.log(item)
     return (
       <Text
         key={index}
@@ -58,7 +97,7 @@ const PickerV2 = ({
             {fontSize: px(50),color:Math.abs(index-pickedIndex)===1?'#999':'#eee'},
         ]}
         >
-        {item.value}
+        {item.label}
       </Text>
     );
   };
@@ -67,6 +106,7 @@ const PickerV2 = ({
       <Picker
         data={pickerData}
         visible={visible}
+        title={title}
         renderMaskTop={renderMaskTop}
         renderMaskBottom={renderMaskBottom}
         styles={{...pickerStyles,...styles}}
@@ -78,6 +118,7 @@ const PickerV2 = ({
         onOk={handlePikerCommit}
         onDismiss={handlePickerCancel}
         onClose={handlePickerCancel}
+        customSpringStyles={typeof animatedStartValue !== 'undefined'?customSpringStyles:{}}
         >
         </Picker>
     </View>

package/app/components/common/PickerV2Base/picker/Picker.tsx

@@ -10,7 +10,7 @@ import React, {
 } from 'react'
 import { Omit } from 'utility-types'
 
-import { Keyboard } from 'react-native'
+import { Keyboard,View,Text } from 'react-native'
 import { getComponentLocale } from '../_util/getLocale'
 import DisabledContext from '../config-provider/DisabledContext'
 import { LocaleContext } from '../locale-provider'
@@ -35,6 +35,7 @@ export interface RMCPickerProps
   innerValue: PickerValue[]
   columns: PickerColumn[]
   handleSelect: (value: PickerValue, index: number) => void
+  customSpringStyles?:any
 }
 
 const RMCPicker = forwardRef<PickerRef, RMCPickerProps>((props, ref) => {
@@ -59,6 +60,7 @@ const RMCPicker = forwardRef<PickerRef, RMCPickerProps>((props, ref) => {
     innerValue,
     columns,
     handleSelect,
+    customSpringStyles,
     ...restProps
   } = props
 
@@ -177,22 +179,29 @@ const RMCPicker = forwardRef<PickerRef, RMCPickerProps>((props, ref) => {
     styles: props.styles,
     themeStyles: PickerStyles,
   })
+  // console.log(props.styles)
 
   return (
     <>
       <PopupPicker
         styles={styles}
         visible={innerVisible}
-        title={title}
         okText={okText || _locale.okText}
         onOk={handleOk}
         dismissText={dismissText || _locale.dismissText}
         onDismiss={handleDismiss}
         onClose={actions.close}
         okButtonProps={okButtonProps}
-        dismissButtonProps={dismissButtonProps}>
+        dismissButtonProps={dismissButtonProps}
+        customSpringStyles={customSpringStyles}
+        >
         {/* TODO: 组件卸载是在visible更新fasle之后,需要前置 */}
         {/* 否则会无效执行onPickerChange */}
+        {typeof title !== 'undefined'&&<View style={props.styles.titleBox}>
+        <View style={props.styles.titleContent}>
+           <Text style={props.styles.titleText}>{title}</Text>
+        </View>
+        </View>}
         {innerVisible && (
           <RMCPickerView
             {...restProps}

package/app/components/common/PickerV2Base/picker/Popup.tsx

@@ -2,6 +2,7 @@ import React, { memo } from 'react'
 import { Text, TouchableHighlight, View,Modal,TouchableOpacity } from 'react-native'
 // import Modal from '../modal/ModalView'
 import { PopupPickerProps } from './PopupPickerTypes'
+import Animated from 'react-native-reanimated';
 
 const PopupPicker = memo((props: PopupPickerProps) => {
   const {
@@ -14,6 +15,7 @@ const PopupPicker = memo((props: PopupPickerProps) => {
     onOk,
     onClose,
     children,
+    customSpringStyles={},
   } = props
 
   const titleEl =
@@ -49,7 +51,7 @@ const PopupPicker = memo((props: PopupPickerProps) => {
         style={[{position:'absolute',top:0,left:0,right:0,bottom:0,zIndex:999},styles.maskColor]}
         onPress={onClose}
         ></TouchableOpacity>
-        <View style={{position:'absolute',left:0,right:0,bottom:0,zIndex:1000}}>
+        <Animated.View style={[{position:'absolute',left:0,right:0,bottom:0,zIndex:1000},customSpringStyles]}>
         {children}
       <View style={[styles.header]}>
         <TouchableHighlight
@@ -70,7 +72,7 @@ const PopupPicker = memo((props: PopupPickerProps) => {
           {okEl}
         </TouchableHighlight>
       </View>
-        </View>
+        </Animated.View>
     </Modal>
   )
 })

package/app/components/common/PickerV2Base/picker/PopupPickerTypes.tsx

@@ -13,4 +13,5 @@ export type PopupPickerProps = {
   dismissButtonProps?: TouchableHighlightProps
   children?: ReactNode
   styles: any
+  customSpringStyles?:any
 }

package/app/components/common/PickerV2Base/picker/style/index.tsx

@@ -12,6 +12,9 @@ export interface PickerStyle {
   maskColor:ViewStyle
   okView:ViewStyle
   dismissView:ViewStyle
+  titleBox:ViewStyle
+  titleContent:ViewStyle
+  titleText:TextStyle
 }
 
 export default () =>
@@ -53,5 +56,8 @@ export default () =>
     },
     maskColor:{
      backgroundColor: 'rgba(0,0,0,.6)' 
-    }
+    },
+     titleBox:{},
+     titleContent:{},
+     titleText:{}
   })

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

@@ -0,0 +1,72 @@
+import React,{useState,useImperativeHandle,useRef} from 'react';
+import {View, Text, StyleSheet} from 'react-native';
+import PickerV2 from '../PickerV2';
+import {useSharedValue} from 'react-native-reanimated';
+
+const Home = ({steps, active, onRef}) => {
+  let backResult = useRef()
+  const animatedStartValue = useSharedValue(700);
+  const [visible, setPickerVisible] = useState(false);
+  const [pickerData, setPickerData] = useState([]);
+  const [pickerTitle,setPickerTitle] = useState()
+  const [defaultIndex,setDefaultIndex] = useState(0)
+  const [pickedIndex, setPickedIndex] = useState(() => {
+    return defaultIndex;
+  });
+  useImperativeHandle(onRef, () => {
+    return {
+      show: (str,data) => {
+        if(data?.payload?.columns.length){
+          setPickerTitle(data?.payload?.title)
+          setPickerData(data?.payload?.columns.map(item=>{
+            item.label = item[data?.payload?.nameProp]
+            item.value = item?.label;
+            return item})||[]);
+          // console.log(data)
+          setPickerVisible(true);
+          animatedStartValue.value = 0;
+         return new Promise((resolve,reject)=>{
+            backResult.current = (res)=>{
+              resolve(res)
+            }
+          })
+        }
+      },
+    };
+  });
+  const changePickedIndex = index => {
+    setPickedIndex(index);
+  };
+  const dealPickerCommit = (value) =>{
+    animatedStartValue.value = 700;
+    setPickerTitle()
+    setPickerVisible(false);
+    setPickedIndex(0);
+    // console.log(value);
+    const data = pickerData.find(item => {
+      return value[0] === item.value;
+    });
+    const index = pickerData.findIndex(item => {
+      return value[0] === item.value;
+    })
+    backResult.current({data,index})
+  }
+  return <PickerV2
+      pickerData={pickerData}
+      visible={visible}
+      // defaultValue={[pickerData[defaultIndex]?.value]}
+      title={pickerTitle}
+      pickedIndex={pickedIndex}
+      changePickedIndex={index => changePickedIndex(index)}
+      dealPickerCommit={item => dealPickerCommit(item)}
+      dealPickerCancel={() => {
+        animatedStartValue.value = 700;
+        setPickerTitle()
+        setPickerVisible(false);
+        setPickedIndex(0);
+      }}
+      animatedStartValue={animatedStartValue.value}
+    />
+};
+const styles = StyleSheet.create({});
+export default Home;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ipanel-rnapp-ajb-base",
-  "version": "1.0.15",
-  "ipanelVersion": "1.0.309",
+  "version": "1.0.16",
+  "ipanelVersion": "1.0.310",
   "description": "",
   "main": "index.js",
   "bin": {