88 * @format
99 */
1010
11- import React , { useEffect , useState } from 'react'
12- import { View } from 'react-native'
13- import styles from './styles'
14- import FlatButton from '../ button/FlatButton ' ;
15- import { translate } from '.. /locales' ;
11+ import React , { useEffect , useState } from 'react' ;
12+ import { View } from 'react-native' ;
13+ import styles from './styles' ;
14+ import SelectableButton from '@wniemiec-component-reactnative/selectable- button' ;
15+ import { translate } from './locales' ;
1616
17- export default function WeekdaySelector ( { onPress, reduced, selectedOps } ) {
18- if ( reduced === undefined )
19- reduced = false
17+ /**
18+ * Component that lets you select days of the week.
19+ *
20+ * @param {function(number, bool): void } onPress: Function that is called
21+ * when the button is pressed
22+ * @param {bool } reduced: Indicates whether the days of the week should be
23+ * displayed in abbreviated form
24+ * @param {array: int } selectedOps: Pre-selected weekdays (starting with 0)
25+ * @param {string } bgColor: Background color (in hexadecimal)
26+ * @param {string } fgColor: Foreground color (in hexadecimal)
27+ */
28+ export default function DaysOfWeek ( { onPress, reduced, selectedOps, bgColor = "#01786F" , fgColor = "#FFFFFF" } ) {
29+
30+ const [ selectedOp , setSelectedOp ] = useState ( [ ] ) ;
31+ const dayWeek = buildDayWeekMapping ( reduced ) ;
32+
33+ const handlePress = ( op ) => {
34+ const selected = ! selectedOp . includes ( op )
2035
21- const [ selectedOp , setSelectedOp ] = useState ( [ ] )
22- const dayWeek = [
23- reduced ? translate ( 'monday' ) : translate ( 'monday_abbr' ) ,
24- reduced ? translate ( 'tuesday' ) : translate ( 'tuesday_abbr' ) ,
25- reduced ? translate ( 'wednesday' ) : translate ( 'wednesday_abbr' ) ,
26- reduced ? translate ( 'thursday' ) : translate ( 'thursday_abbr' ) ,
27- reduced ? translate ( 'friday' ) : translate ( 'friday_abbr' ) ,
28- reduced ? translate ( 'saturday' ) : translate ( 'saturday_abbr' ) ,
29- reduced ? translate ( 'sunday' ) : translate ( 'sunday_abbr' ) ,
30- ]
36+ if ( selectedOp . includes ( op ) ) {
37+ if ( selectedOp . length == 1 ) {
38+ alert ( translate ( 'select_at_least_one' ) ) ;
39+ return ;
40+ }
41+ else {
42+ setSelectedOp ( list => {
43+ let newList = [ ...list ] ;
44+ newList = newList . filter ( ( item , index ) => item != op ) ;
45+ return newList ;
46+ } )
47+ }
48+ }
49+ else
50+ setSelectedOp ( list => {
51+ const newList = [ ...list ] ;
52+ newList . push ( op ) ;
53+ return newList ;
54+ } )
3155
32- useEffect ( ( ) => {
33- if ( selectedOps != undefined ) {
34- setSelectedOp ( selectedOps )
35- }
36- } , [ ] )
56+ onPress ( op , selected ) ;
57+ }
3758
38- function handlePress ( op ) {
39- const selected = ! selectedOp . includes ( op )
59+ const WeekOption = ( { weekday} ) => (
60+ < SelectableButton
61+ selected = { selectedOp . includes ( weekday ) }
62+ title = { dayWeek [ weekday ] }
63+ onPress = { ( ) => handlePress ( weekday ) }
64+ fgColor = { fgColor }
65+ bgColor = { bgColor }
66+ size = 'small'
67+ />
68+ ) ;
4069
41- if ( selectedOp . includes ( op ) ) {
42- if ( selectedOp . length == 1 ) {
43- alert ( translate ( 'select_at_least_one' ) )
44- return
45- }
46- else {
47- setSelectedOp ( list => {
48- let newList = [ ...list ]
49- newList = newList . filter ( ( item , index ) => item != op )
50- return newList
51- } )
52- }
53- }
54- else
55- setSelectedOp ( list => {
56- const newList = [ ...list ]
57- newList . push ( op )
58- return newList
59- } )
70+ useEffect ( ( ) => {
71+ if ( selectedOps != undefined ) {
72+ setSelectedOp ( selectedOps ) ;
73+ }
74+ } , [ ] )
6075
61- onPress ( op , selected )
62- }
76+ return (
77+ < View style = { styles . area } >
78+ < WeekOption weekday = { 0 } />
79+ < WeekOption weekday = { 1 } />
80+ < WeekOption weekday = { 2 } />
81+ < WeekOption weekday = { 3 } />
82+ < WeekOption weekday = { 4 } />
83+ < WeekOption weekday = { 5 } />
84+ < WeekOption weekday = { 6 } />
85+ </ View >
86+ )
87+ }
6388
64- return (
65- < View style = { styles . area } >
66- < FlatButton selected = { selectedOp . includes ( 1 ) } title = { dayWeek [ 0 ] } onPress = { ( ) => handlePress ( 1 ) } />
67- < FlatButton selected = { selectedOp . includes ( 2 ) } title = { dayWeek [ 1 ] } onPress = { ( ) => handlePress ( 2 ) } />
68- < FlatButton selected = { selectedOp . includes ( 3 ) } title = { dayWeek [ 2 ] } onPress = { ( ) => handlePress ( 3 ) } />
69- < FlatButton selected = { selectedOp . includes ( 4 ) } title = { dayWeek [ 3 ] } onPress = { ( ) => handlePress ( 4 ) } />
70- < FlatButton selected = { selectedOp . includes ( 5 ) } title = { dayWeek [ 4 ] } onPress = { ( ) => handlePress ( 5 ) } />
71- < FlatButton selected = { selectedOp . includes ( 6 ) } title = { dayWeek [ 5 ] } onPress = { ( ) => handlePress ( 6 ) } />
72- < FlatButton selected = { selectedOp . includes ( 0 ) } title = { dayWeek [ 6 ] } onPress = { ( ) => handlePress ( 0 ) } />
73- </ View >
74- )
75- }
89+ function buildDayWeekMapping ( reduced ) {
90+ if ( reduced === undefined )
91+ reduced = false ;
92+
93+ return [
94+ reduced ? translate ( 'monday' ) : translate ( 'monday_abbr' ) ,
95+ reduced ? translate ( 'tuesday' ) : translate ( 'tuesday_abbr' ) ,
96+ reduced ? translate ( 'wednesday' ) : translate ( 'wednesday_abbr' ) ,
97+ reduced ? translate ( 'thursday' ) : translate ( 'thursday_abbr' ) ,
98+ reduced ? translate ( 'friday' ) : translate ( 'friday_abbr' ) ,
99+ reduced ? translate ( 'saturday' ) : translate ( 'saturday_abbr' ) ,
100+ reduced ? translate ( 'sunday' ) : translate ( 'sunday_abbr' ) ,
101+ ] ;
102+ }
0 commit comments