1+ import * as React from 'react' ;
2+ import { StyleSheet , Text , View , TouchableOpacity } from 'react-native' ;
3+ import Animated from 'react-native-reanimated' ;
4+ import { Picker } from '@react-native-picker/picker' ;
5+ import BottomSheet from 'reanimated-bottom-sheet' ;
6+ // import moment from 'moment';
7+ // moment.locale("fa");
8+
9+ export default function PersianDatePicker ( {
10+ visible= true ,
11+ startYear = 0 ,
12+ endYear= 0 ,
13+ containerStyle= { } ,
14+ pickercontainerStyle= { } ,
15+ pickerWrapperStyle= { } ,
16+ pickerItemStyle= { } ,
17+ pickerProps= { } ,
18+ defaultValue= null ,
19+ submitLabel= "تایید" ,
20+ submitStyle= { } ,
21+ submitTextStyle= { } ,
22+ onConfirm= ( val ) => { } ,
23+ borderRadius= 20 ,
24+ bottomSheetProps= { } ,
25+ caption= null ,
26+ captionStyle= { }
27+ } ) {
28+
29+ var defaultDay , defaultMonth , defaultYear = null ;
30+ if ( defaultValue && defaultValue . length ) {
31+ defaultYear = defaultValue [ 0 ]
32+ defaultMonth = defaultValue [ 1 ]
33+ defaultDay = defaultValue [ 2 ]
34+ }
35+ const [ day , setDay ] = React . useState ( defaultDay ) ;
36+ const [ month , setMonth ] = React . useState ( defaultMonth ) ;
37+ const [ year , setYear ] = React . useState ( defaultYear ) ;
38+
39+ const sheetRef = React . useRef ( null ) ;
40+
41+
42+ var dayList = Array ( 31 ) . fill ( 0 ) . map ( ( e , i ) => i + 1 ) ;
43+ if ( month > 6 )
44+ var dayList = Array ( 30 ) . fill ( 0 ) . map ( ( e , i ) => i + 1 ) ;
45+ if ( month == 12 )
46+ var dayList = Array ( 29 ) . fill ( 0 ) . map ( ( e , i ) => i + 1 ) ;
47+
48+ var yearList = [ ] ;
49+ var startYear = ( startYear ) ? startYear : 1330 ;
50+ var endYear = ( endYear ) ? endYear : 1400 ;
51+ for ( let a = startYear ; a <= endYear ; a ++ )
52+ yearList . push ( a ) ;
53+
54+
55+
56+
57+ React . useEffect ( ( ) => {
58+ if ( visible == true )
59+ sheetRef . current . snapTo ( 1 ) ;
60+ } , [ visible ] )
61+
62+
63+ const onSubmitDate = ( ) => {
64+ let value = { value : [ year , month , day ] }
65+ let result = onConfirm ( value ) ;
66+ if ( result === false )
67+ {
68+
69+ } else
70+ sheetRef . current . snapTo ( 0 )
71+
72+ }
73+
74+ const renderContent = ( ) => (
75+ < View style = { [ styles . container , containerStyle ] } >
76+ { caption ? < View > < Text style = { [ styles . captionStyle , captionStyle ] } > { caption } </ Text > </ View > : null }
77+ < View style = { [ styles . row , pickercontainerStyle ] } >
78+
79+ < View style = { [ styles . col , pickerWrapperStyle ] } >
80+ < Picker
81+ selectedValue = { year }
82+ itemStyle = { [ styles . itemStyle , pickerItemStyle ] }
83+ onValueChange = { ( itemValue , itemIndex ) => setYear ( itemValue ) }
84+ { ...pickerProps }
85+ >
86+ { yearList . map ( ( item , i ) => {
87+ return ( < Picker . Item key = { i } value = { item } label = { toFarsiDigits ( item . toString ( ) ) } /> )
88+ } ) }
89+ </ Picker >
90+ </ View >
91+ < View style = { [ styles . col , pickerWrapperStyle ] } >
92+ < Picker
93+ selectedValue = { month }
94+ itemStyle = { [ styles . itemStyle , pickerItemStyle ] }
95+ onValueChange = { ( itemValue , itemIndex ) => setMonth ( itemValue ) }
96+ { ...pickerProps }
97+ >
98+ { monthList . map ( ( item , i ) => {
99+ return ( < Picker . Item key = { i } value = { i + 1 } label = { item } /> )
100+ } ) }
101+ </ Picker >
102+ </ View >
103+ < View style = { [ styles . col , pickerWrapperStyle ] } >
104+ < Picker
105+ selectedValue = { day }
106+ itemStyle = { [ styles . itemStyle , pickerItemStyle ] }
107+ onValueChange = { ( itemValue , itemIndex ) => setDay ( itemValue ) }
108+ { ...pickerProps }
109+ >
110+ { dayList . map ( ( item , i ) => {
111+ return ( < Picker . Item key = { i } value = { item } label = { toFarsiDigits ( item . toString ( ) ) } /> )
112+ } ) }
113+ </ Picker >
114+ </ View >
115+
116+ </ View >
117+ < TouchableOpacity style = { [ styles . submit , submitStyle ] } onPress = { onSubmitDate } >
118+ < Text style = { [ styles . submitText , submitTextStyle ] } > { submitLabel } </ Text >
119+ </ TouchableOpacity >
120+ </ View >
121+ ) ;
122+
123+
124+
125+
126+ return (
127+ < BottomSheet
128+ ref = { sheetRef }
129+ snapPoints = { [ 0 , 350 ] }
130+ initialSnap = { 0 }
131+
132+ borderRadius = { borderRadius }
133+ { ...bottomSheetProps }
134+ renderContent = { renderContent }
135+ />
136+ ) ;
137+ }
138+
139+
140+ const styles = StyleSheet . create ( {
141+ container : {
142+ flexDirection : 'column' ,
143+ justifyContent : 'space-around' ,
144+ backgroundColor : 'white' ,
145+ height :350 ,
146+ padding :0 ,
147+ marginTop : 0 ,
148+ } ,
149+ captionStyle :{
150+ textAlign :'center' ,
151+ padding :20 ,
152+ color :"#666"
153+ } ,
154+ row :{
155+ flexDirection : 'row' ,
156+ justifyContent : 'space-between' ,
157+ padding :0 ,
158+ margin :0 ,
159+
160+ } ,
161+ col :{
162+ flex :1
163+ } ,
164+ itemStyle :{
165+ fontSize :17
166+ } ,
167+ submit : {
168+ backgroundColor : '#c41d40' ,
169+ padding : 15 ,
170+ margin : 10 ,
171+ marginBottom :20 ,
172+ borderRadius : 90 ,
173+ } ,
174+ submitText : {
175+ textAlign : 'center' ,
176+ color : '#fff' ,
177+ fontSize : 15 ,
178+ } ,
179+ } ) ;
180+
181+
182+
183+ export const monthList = [
184+ 'فروردین' ,
185+ 'اردیبهشت' ,
186+ 'خرداد' ,
187+ 'تیر' ,
188+ 'مرداد' ,
189+ 'شهریور' ,
190+ 'مهر' ,
191+ 'آبان' ,
192+ 'آذر' ,
193+ 'دی' ,
194+ 'بهمن' ,
195+ 'اسفند' ,
196+ ]
197+
198+
199+ const toEnglishDigits = function ( str ) {
200+ return str . replace ( / [ ۰ - ۹ ] / g, function ( w ) {
201+ var persian = [ '۰' , '۱' , '۲' , '۳' , '۴' , '۵' , '۶' , '۷' , '۸' , '۹' ] ;
202+ return persian . indexOf ( w ) ;
203+ } ) ;
204+ }
205+ const toFarsiDigits = function ( str ) {
206+ return str . replace ( / [ 0 - 9 ] / g, function ( w ) {
207+ var persian = [ '۰' , '۱' , '۲' , '۳' , '۴' , '۵' , '۶' , '۷' , '۸' , '۹' ] ;
208+ return persian [ w ] ;
209+ } ) ;
210+ }
0 commit comments