@@ -14,6 +14,7 @@ export interface ActionSheetProps {
1414 closeOnBgTap ?: boolean
1515 bgTransition ?: string
1616 sheetTransition ?: string
17+ reverse ?: boolean ;
1718}
1819
1920export interface ActionSheetRef {
@@ -33,7 +34,8 @@ const Comp: React.RefForwardingComponent<ActionSheetRef, ActionSheetProps> = (({
3334 zIndex = 998 ,
3435 closeOnBgTap = true ,
3536 bgTransition = "all 0.5s ease-in-out" ,
36- sheetTransition= "all 0.3s ease-in-out"
37+ sheetTransition= "all 0.3s ease-in-out" ,
38+ reverse = false ,
3739 } , ref ) : JSX . Element => {
3840 const [ show , setShow ] = useState ( false ) ;
3941 const [ pressed , setPressed ] = useState ( false )
@@ -66,7 +68,7 @@ const Comp: React.RefForwardingComponent<ActionSheetRef, ActionSheetProps> = (({
6668
6769 const requestSheetDown = ( ) :boolean => {
6870 if ( null !== sheetRef . current ) {
69- sheetRef . current . style . transform = ` translate3d(0, 101%, 0)` ;
71+ sheetRef . current . style . transform = reverse ? ' translate3d(0, - 101%, 0)' : 'translate3d(0, 101%, 0)' ;
7072 return true ;
7173 }
7274 return false ;
@@ -162,13 +164,20 @@ const Comp: React.RefForwardingComponent<ActionSheetRef, ActionSheetProps> = (({
162164 style = { {
163165 overflowX : "hidden" ,
164166 position : "fixed" ,
165- bottom : 0 ,
167+ ...( reverse ?
168+ {
169+ top : 0 ,
170+ transform : 'translate3d(0, -101%, 0)' ,
171+ } :
172+ {
173+ bottom : 0 ,
174+ transform : 'translate3d(0, 101%, 0)' ,
175+ } ) ,
166176 left : 0 ,
167177 width : "100%" ,
168178 backgroundColor : '#fbfbfb' ,
169179 borderTopLeftRadius : 16 ,
170180 borderTopRightRadius : 16 ,
171- transform : "translate3d(0, 101%, 0)" ,
172181 ...sheetStyle ,
173182 zIndex : zIndex + 1 ,
174183 transition : pressed ? "all 0.05s linear" : sheetTransition } }
0 commit comments