11import { IonContent , IonPage , IonSplitPane , IonMenu , IonText , IonIcon , IonMenuButton , IonRouterOutlet , IonMenuToggle , isPlatform } from '@ionic/react' ;
22//import { chevronForwardCircle, checkmarkCircle, filterOutline, listOutline, bicycle } from 'ionicons/icons';
3- import React , { Component , useState , useEffect } from 'react' ;
3+ import React , { Component , useState , useEffect , useRef } from 'react' ;
44import { withGetScreen } from 'react-getscreen'
55import './Calendar.css'
66import './Pages.css' ;
@@ -12,6 +12,8 @@ import { Query } from "../backend/src/Objects/Utils.ts";
1212import T from "../backend/src/Objects/Task.ts" ;
1313import CalendarPopover , { CalendarUnit } from './Components/CalendarPopover' ;
1414import CalendarTasklistPopover from './Components/CalendarTasklistPopover' ;
15+ import { withShortcut , ShortcutProvider , ShortcutConsumer } from '../static/react-keybind'
16+ import keybindHandler from "./Components/KeybindHandler"
1517
1618const autoBind = require ( 'auto-bind/react' ) ;
1719
@@ -82,11 +84,26 @@ function CalPageBigOllendar(props) {
8284 let [ isPopoverShown , setIsPopoverShown ] = useState ( false ) ;
8385
8486 let [ shownList , setShownList ] = useState ( [ ] ) ;
85-
86- Array . prototype . max = function ( ) {
87- return Math . max . apply ( null , this ) ;
88- } ;
8987
88+ //Array.prototype.max = function() { // THIS POLLUTES THE PROTOTYPE. IT BREAKS LOOPING THROUGH THE KEYS.
89+ // return Math.max.apply(null, this);
90+ //};
91+
92+
93+ const goRight = useRef ( null ) ;
94+ const goLeft = useRef ( null ) ;
95+
96+ const navigateLeft = ( ) => {
97+ if ( goLeft . current ) {
98+ goLeft . current . click ( )
99+ }
100+ }
101+
102+ const navigateRight = ( ) => {
103+ if ( goRight . current ) {
104+ goRight . current . click ( )
105+ }
106+ }
90107 let refresh = ( async function ( ) {
91108 let map = new Map ( ) ;
92109 let names = new Map ( ) ;
@@ -118,9 +135,10 @@ function CalPageBigOllendar(props) {
118135 let nameList = Array . from ( names . values ( ) ) ;
119136 let idList = Array . from ( ids . values ( ) ) ;
120137 if ( values . length > 0 ) {
121- let max = values . max ( ) ;
138+ const max = ( arr ) => arr . reduce ( ( a , b ) => { return Math . max ( a , b ) } )
139+ let val_max = max ( values )
122140 let style = getComputedStyle ( document . body ) ;
123- let hexes = values . map ( e => __util_calculate_gradient ( style . getPropertyValue ( '--heatmap-darkest' ) . trim ( ) . slice ( 1 ) , style . getPropertyValue ( '--heatmap-lightest' ) . trim ( ) . slice ( 1 ) , e / max ) ) ;
141+ let hexes = values . map ( e => __util_calculate_gradient ( style . getPropertyValue ( '--heatmap-darkest' ) . trim ( ) . slice ( 1 ) , style . getPropertyValue ( '--heatmap-lightest' ) . trim ( ) . slice ( 1 ) , e / val_max ) ) ;
124142 Array . from ( map . keys ( ) ) . forEach ( ( e , i ) => { hm [ e ] = { color :hexes [ i ] , value :values [ i ] , names :nameList [ i ] , ids : idList [ i ] } } ) ;
125143 }
126144 setHeat ( hm ) ;
@@ -130,6 +148,29 @@ function CalPageBigOllendar(props) {
130148 refresh ( ) ;
131149 } , [ dateSelected , refreshed ] ) ;
132150
151+ const { shortcut } = props
152+ useEffect ( async ( ) => {
153+
154+ const { shortcut } = props
155+
156+ // let ks = await keybindSource;
157+ if ( props . allKeybinds !== null ) {
158+ const toUnbind = keybindHandler ( props , [
159+ [ navigateRight , props . allKeybinds . Calendar [ 'Next month' ] , 'Next month' , 'Goes to the next month' ] ,
160+ [ navigateLeft , props . allKeybinds . Calendar [ 'Previous month' ] , 'Previous month' , 'Goes to the previous month' ] ,
161+ ] )
162+
163+ return ( ) => {
164+ const { shortcut } = props
165+ for ( const i in toUnbind ) { // this doesn't seem to be working?
166+ shortcut . unregisterShortcut ( toUnbind [ i ] )
167+ }
168+ shortcut . unregisterShortcut ( [ "h" , "l" , "ArrowLeft" , "ArrowRight" ] ) // so i'll do it manually..
169+ // TODO figure this one out
170+ }
171+ }
172+ } , [ props . allKeybinds ] )
173+
133174 return (
134175 < div id = "calendar-page-bigol-calendar-wrapper" style = { { display : "inline-block" , height : "85%" , width : "95%" , ...props . style } } >
135176 < CalendarTasklistPopover uid = { props . uid } cm = { props . cm } isShown = { isPopoverShown } onDidDismiss = { ( ) => setIsPopoverShown ( false ) } list = { shownList } localizations = { props . localizations } currentDate = { dateSelected } />
@@ -173,14 +214,18 @@ function CalPageBigOllendar(props) {
173214 ) }
174215 </ div >
175216 < div id = "bigol-calendar-tools" >
176- < a className = "fas fa-caret-left calendar-button" onClick = { ( ) => {
217+ < a
218+ ref = { goLeft }
219+ className = "fas fa-caret-left calendar-button" onClick = { ( ) => {
177220 let date = new Date ( firstDayMonth . getFullYear ( ) , firstDayMonth . getMonth ( ) - 1 , 1 ) ;
178221 setDateSelected ( date ) ;
179222 if ( props . onDateSelected )
180223 props . onDateSelected ( date ) ;
181224
182225 } } > </ a >
183- < a className = "fas fa-caret-right calendar-button" onClick = { ( ) => {
226+ < a
227+ ref = { goRight }
228+ className = "fas fa-caret-right calendar-button" onClick = { ( ) => {
184229 let date = new Date ( firstDayMonth . getFullYear ( ) , firstDayMonth . getMonth ( ) + 1 , 1 ) ;
185230 setDateSelected ( date ) ;
186231 if ( props . onDateSelected )
@@ -224,11 +269,13 @@ class Calendar extends Component {
224269 currentDate : ( today ) , // new date
225270 taskList : [ ] ,
226271 popoverIsVisible : false ,
272+ keybinds : [ ] ,
227273
228274 } ;
229275
230276 this . updatePrefix = this . random ( ) ;
231277 this . repeater = React . createRef ( ) ; // what's my repeater? | i.. i dont know what this does...
278+ this . calPageBigRef = React . createRef ( ) ;
232279
233280 // AutoBind!
234281 autoBind ( this ) ;
@@ -240,33 +287,13 @@ class Calendar extends Component {
240287 this . setState ( { showEdit : false } ) ;
241288 } // util func for hiding repeat
242289
243- componentWillUnmount ( ) {
244- }
290+ componentWillUnmount ( ) { }
291+
292+ async refresh ( ) { }
245293
246- async refresh ( ) {
247- // projectDB.map(proj=>buildSelectString(proj));
248-
249- //let endDate = new Date(this.state.currentDate);
250- //endDate.setHours(23,59,59,60);
251- //let taskList = await this.props.engine.db.selectTasksInRange(this.props.uid, this.state.currentDate, endDate);
252-
253- //refreshed++;
254-
255- //this.setState({
256- //possibleProjects: pPandT[0][0], // set the project stuff
257- //possibleTags: pPandT[1][0], // set the tag stuff
258- //possibleProjectsRev: pPandT[0][1], // set more projects stuff
259- //possibleTagsRev: pPandT[1][1], // set more tags stuff
260- //availability: avail, // set the avail
261- //projectSelects: projectList, // set the project list
262- //tagSelects: tagsList, // set the tag list
263- //projectDB, // and the project db
264- //taskList
265- //}); // once we finish, set the state
266- }
267294
268295 componentDidMount ( ) {
269- this . refresh ( )
296+ this . refresh ( )
270297 }
271298
272299 random ( ) { return ( ( ( 1 + Math . random ( ) ) * 0x10000 ) | 0 ) . toString ( 16 ) + "-" + ( ( ( 1 + Math . random ( ) ) * 0x10000 ) | 0 ) . toString ( 16 ) ; }
@@ -327,7 +354,14 @@ class Calendar extends Component {
327354 this . setState ( { currentDate : d , taskList} ) ;
328355 } ) . bind ( this ) } />
329356 else
330- return < CalPageBigOllendar localizations = { this . props . localizations } uid = { this . props . uid } cm = { this . props . cm } availability = { this . state . availability } />
357+ return < CalPageBigOllendar
358+ localizations = { this . props . localizations }
359+ uid = { this . props . uid }
360+ cm = { this . props . cm }
361+ availability = { this . state . availability }
362+ { ...this . props }
363+ //ref={this.calPageBigRef} // not working
364+ />
331365 } ) ( ) }
332366 { ( ( ) => {
333367 if ( this . props . isMobile ( ) )
@@ -350,5 +384,4 @@ class Calendar extends Component {
350384 )
351385 }
352386}
353- export default withGetScreen ( Calendar , { mobileLimit : 720 , tabletLimit :768 , shouldListenOnResize : true } ) ;
354-
387+ export default withShortcut ( withGetScreen ( Calendar , { mobileLimit : 720 , tabletLimit :768 , shouldListenOnResize : true } ) ) ;
0 commit comments