diff --git a/docs/app/Examples/modules/Datetime/Types/DatetimeExampleFull.js b/docs/app/Examples/modules/Datetime/Types/DatetimeExampleFull.js index 6a8838c89c..c90808f45b 100644 --- a/docs/app/Examples/modules/Datetime/Types/DatetimeExampleFull.js +++ b/docs/app/Examples/modules/Datetime/Types/DatetimeExampleFull.js @@ -1,102 +1,554 @@ import _ from 'lodash' -import React from 'react' -import { Datetime, Dropdown, Input, Table } from 'semantic-ui-react' - -const DatetimeExampleFull = () => ( -
- -
- Time -
-
- { - const hour = (i + 1) % 12 || 12 - const ampm = hour < 12 ? 'am' : 'pm' - return _.times(4, j => { - const minute = _.padStart(j * 15, 2, '0') - const time = `${hour}:${minute} ${ampm}` - return { key: time, value: time, text: time } - }) - }))} - /> +import React, { Component } from 'react' +import { Datetime, Dropdown, Header, Input, Icon, Table, Label, Button, Segment } from 'semantic-ui-react' + +const isAM = hours => +hours >= 0 && +hours < 12 +const getAMPM = hours => isAM(hours) ? 'am' : 'pm' +const hr12 = hours => +hours + (isAM(hours) ? 12 : 0) + +const sizeEM = 15 + +class DatetimeExampleFull extends Component { + state = { + date: new Date(), + } + + table = (children) => { + return ( - - - Hour - Minute - AM/PM - - - - - - Hours - - - - {_.times(6, i => {i + 1})} - - - {_.times(6, i => {i + 7})} - - - - Minutes - - - {_.times(10, i => { - return ( - - {_.times(6, j => { - const minute = (i * 10) + (j + 1) - return ( - {minute} - ) - })} - - ) - })} - - - AM/PM - - - - AM - PM - - + {/**/} + {/**/} + {/*Hour*/} + {/*Minute*/} + {/*AM/PM*/} + {/**/} + {/**/} + {children}
- {/*
*/} - {/*
*/} - {/*/!*{_.times(12, i => )}*!/*/} - {/*
*/} - {/*
*/} - {/*{_.times(60, i =>
{i + 1}
)}*/} - {/*
*/} - {/*
*/} - {/*
am
*/} - {/*
pm
*/} - {/*
*/} - {/*
*/} -
-
-) + ) + } + + handleInputChange = (e) => { + const { value } = e.target + let hours = null + let minutes = null + + switch (value.length) { + case 1: + hours = value + minutes = 0 + break + case 2: + if (+value > 12) { + hours = value[0] + minutes = value[1] * 10 + } else if (+value > 0) { + hours = value + minutes = 0 + } + break + case 3: + hours = value[0] + minutes = value[1] + value[2] + break + case 4: + hours = value[0] + value[1] + minutes = value[2] + value[3] + break + default: + break + } + + if (minutes > 59) { + hours = null + minutes = null + } else { + hours = hr12(hours) + minutes = _.padEnd(minutes, 2, '0') + } + + // console.log({ value, hours, minutes, pm: isAM(hours) }) + + this.setState((prevState, props) => { + const d = new Date() + return { + date: new Date(d.getFullYear(), d.getMonth(), d.getDate(), hours, minutes), + } + }) + } + + handleAMPMChange = () => { + this.setState((prevState, props) => { + const date = new Date(prevState.date) + date.setHours((date.getHours() + 12) % 24) + return { date } + }) + } + + handleHourInputFocus = (e) => { + e.target.select() + this.setState((prevState, props) => ({ mode: 'hours' })) + } + + handleMinuteInputFocus = (e) => { + e.target.select() + this.setState((prevState, props) => ({ mode: 'minutes' })) + } + + handleHourInputChange = e => { + const value = e.target.value + + this.setState((prevState, props) => { + const date = new Date(prevState.date) + date.setHours(value) + return { date } + }) + } + + handleMinuteInputChange = e => { + const value = e.target.value + + this.setState((prevState, props) => { + const date = new Date(prevState.date) + date.setMinutes(value) + return { date } + }) + } + + handleInputBlur = () => { + this.setState((prevState, props) => ({ mode: null })) + } + + handleAMPMLabelClick = () => { + this.setState((prevState, props) => { + const date = new Date(prevState.date) + date.setHours((date.getHours() + 12) % 24) + return { date } + }) + } + + handleClockLabelClick = (e) => { + const value = +e.target.innerText + + this.setState((prevState, props) => { + const { mode } = prevState + const date = new Date(prevState.date) + let nextMode + + if (mode === 'minutes') { + date.setMinutes(value) + nextMode = null + } else { + const newHours = isAM(prevState.date.getHours()) + ? value + : value + 12 + date.setHours(newHours) + nextMode = 'minutes' + } + + return { date, mode: nextMode } + }) + } + + handleMouseEnter = () => { + // enter hour selection mode, only if no mode is active + const { mode } = this.state + if (mode) return + + this.setState((prevState, props) => ({ mode: 'hours' })) + } + + handleMouseLeave = () => { + // exit hour selection mode + const { mode } = this.state + if (mode !== 'hours') return + + this.setState((prevState, props) => ({ mode: null })) + } + + render() { + const { date, mode } = this.state + const dateHours = date.getHours() + const dateMinutes = date.getMinutes() + + const ampm = getAMPM(dateHours) + const hours12 = dateHours % 12 || 12 + const isDay = dateHours >= 7 && dateHours < 19 + // when inputting minutes, do not pad + const minutes = mode === 'minutes' + ? dateMinutes + : _.padStart(dateMinutes, 2, '0') + const value = `${hours12}:${minutes}${ampm}` + + return ( +
+ {/**/} + {/*
*/} + {/*
*/} + +
+ + : + + +
+