Skip to content
This repository was archived by the owner on Aug 27, 2018. It is now read-only.

Commit 8be2178

Browse files
xnerhuxnerhu
committed
Add showing/hiding time picker function
1 parent 350deef commit 8be2178

File tree

4 files changed

+144
-27
lines changed

4 files changed

+144
-27
lines changed

‎3-panel/src/helpers/Component/index.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,10 +47,16 @@ export default class Component {
4747
}
4848

4949
if (typeof props.onClick === 'function') element.addEventListener('click', props.onClick)
50+
5051
if (typeof props.onMouseDown === 'function') element.addEventListener('mousedown', props.onMouseDown)
5152
if (typeof props.onMouseEnter === 'function') element.addEventListener('mouseenter', props.onMouseEnter)
5253
if (typeof props.onMouseLeave === 'function') element.addEventListener('mouseleave', props.onMouseLeave)
54+
5355
if (typeof props.onTouchStart === 'function') element.addEventListener('touchstart', props.onTouchStart)
56+
if (typeof props.onTouchEnd === 'function') element.addEventListener('touchend', props.onTouchEnd)
57+
if (typeof props.onTouchCancel === 'function') element.addEventListener('touchcancel', props.onTouchCancel)
58+
if (typeof props.onTouchMove === 'function') element.addEventListener('touchmove', props.onTouchMove)
59+
5460
if (typeof props.onFocus === 'function') element.addEventListener('focus', props.onFocus)
5561
if (typeof props.onBlur === 'function') element.addEventListener('blur', props.onBlur)
5662
if (typeof props.onInput === 'function') element.addEventListener('input', props.onInput)

‎3-panel/src/imports/materialdesign/components/TimePicker/components/Tick/index.js‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,13 +37,24 @@ export default class Tick extends Component {
3737
if (clock.isMouseDown && !this.isSelected()) timePicker.selectTick(this)
3838
}
3939

40+
/**
41+
* On touch start. (on mobile)
42+
* Selects touched tick.
43+
* @param {Event}
44+
*/
45+
onTouchStart = (e) => {
46+
const timePicker = this.props.getTimePicker()
47+
48+
if (!this.isSelected()) timePicker.selectTick(this)
49+
}
50+
4051
isSelected () {
4152
return (this.props.getClock().selectedTick === this)
4253
}
4354

4455
render () {
4556
return (
46-
<div className='tick' ref='root' onMouseDown={this.onMouseDown} onMouseEnter={this.onMouseEnter}>
57+
<div className='tick' ref='root' onMouseDown={this.onMouseDown} onMouseEnter={this.onMouseEnter} onTouchStart={this.onTouchStart} onTouchEnd={this.onTouchEnd} onTouchMove={this.onTouchMove}>
4758
<div className='number' ref='number' />
4859
</div>
4960
)

‎3-panel/src/imports/materialdesign/components/TimePicker/index.js‎

Lines changed: 83 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import Component from '../../../../helpers/Component'
33
import HoursClock from './components/HoursClock'
44
import MinutesClock from './components/MinutesClock'
55

6+
import MaterialButton from '../MaterialButton'
7+
68
export default class TimePicker extends Component {
79
beforeRender () {
810
this.toggled = false
@@ -21,6 +23,38 @@ export default class TimePicker extends Component {
2123
return this.elements.root
2224
}
2325

26+
/**
27+
* Shows or hides time picker dialog.
28+
*/
29+
toggle (flag) {
30+
const root = this.getRoot()
31+
32+
root.style[(flag) ? 'display' : 'top'] = (flag) ? 'block' : '25%'
33+
if (!flag) root.style.opacity = '0'
34+
35+
setTimeout(function () {
36+
root.style[(flag) ? 'top' : 'display'] = (flag) ? '50%' : 'none'
37+
if (flag) root.style.opacity = '1'
38+
}, (flag) ? 20 : 300)
39+
40+
this.toggleDark(flag)
41+
}
42+
43+
/**
44+
* Shows or hides dark.
45+
* @param {Boolean}
46+
*/
47+
toggleDark (flag) {
48+
const opacity = this.props.darkOpacity
49+
const dark = this.elements.dark
50+
51+
dark.style[(flag) ? 'display' : 'opacity'] = (flag) ? 'block' : '0'
52+
53+
setTimeout(function () {
54+
dark.style[(flag) ? 'opacity' : 'display'] = (flag) ? opacity : 'none'
55+
}, (flag) ? 20 : 300)
56+
}
57+
2458
/**
2559
* Enables selecting hour or minute.
2660
*/
@@ -187,40 +221,65 @@ export default class TimePicker extends Component {
187221

188222
render () {
189223
return (
190-
<div className='material-time-picker' ref='root'>
191-
<div className='date-display'>
192-
<div className='date-container'>
193-
<span className='hour selected' ref='hour' onClick={() => this.selectClock(this.elements.hoursClock)}>
194-
6
195-
</span>
196-
<span className='separate'>
197-
:
198-
</span>
199-
<span className='minutes' ref='minutes' onClick={() => this.selectClock(this.elements.minutesClock)}>
200-
30
201-
</span>
202-
<div className='am-pm-container'>
203-
<div className='item selected' ref='am' onClick={() => this.selectTime(this.elements.am)}>
204-
AM
205-
</div>
206-
<div className='item' ref='pm' onClick={() => this.selectTime(this.elements.pm)}>
207-
PM
224+
<div>
225+
<div className='material-time-picker' ref='root'>
226+
<div className='date-display'>
227+
<div className='date-container'>
228+
<span className='hour selected' ref='hour' onClick={() => this.selectClock(this.elements.hoursClock)}>
229+
6
230+
</span>
231+
<span className='separate'>
232+
:
233+
</span>
234+
<span className='minutes' ref='minutes' onClick={() => this.selectClock(this.elements.minutesClock)}>
235+
30
236+
</span>
237+
<div className='am-pm-container'>
238+
<div className='item selected' ref='am' onClick={() => this.selectTime(this.elements.am)}>
239+
AM
240+
</div>
241+
<div className='item' ref='pm' onClick={() => this.selectTime(this.elements.pm)}>
242+
PM
243+
</div>
208244
</div>
209245
</div>
210246
</div>
211-
</div>
212-
<div className='clock-buttons-container'>
213-
<div className='clock' ref='root'>
214-
<HoursClock ref='hoursClock' getTimePicker={() => { return this }} />
215-
<MinutesClock ref='minutesClock' getTimePicker={() => { return this }} />
216-
<div className='dot' />
247+
<div className='clock-buttons-container'>
248+
<div className='clock'>
249+
<HoursClock ref='hoursClock' getTimePicker={() => { return this }} />
250+
<MinutesClock ref='minutesClock' getTimePicker={() => { return this }} />
251+
<div className='dot' />
252+
</div>
253+
<div className='buttons-container' ref='buttonsContainer' />
217254
</div>
218255
</div>
256+
<div className='material-time-picker-dark' ref='dark' />
219257
</div>
220258
)
221259
}
222260

223261
afterRender () {
262+
const props = this.props
263+
264+
if (props.darkOpacity == null) props.darkOpacity = 0.7
265+
if (props.actionButtonRippleStyle == null) {
266+
props.actionButtonRippleStyle = {
267+
backgroundColor: '#26a69a',
268+
opacity: 0.3
269+
}
270+
}
271+
272+
this.toggle(true)
273+
224274
this.actualClock = this.elements.hoursClock
275+
276+
const buttons = (
277+
<div>
278+
<MaterialButton text='OK' shadow={false} rippleStyle={this.props.actionButtonRippleStyle} />
279+
<MaterialButton text='ANULUJ' shadow={false} rippleStyle={this.props.actionButtonRippleStyle} onClick={() => { this.toggle(false) }} />
280+
</div>
281+
)
282+
283+
this.renderComponents(buttons, this.elements.buttonsContainer)
225284
}
226285
}

‎3-panel/src/imports/materialdesign/components/TimePicker/style.scss‎

Lines changed: 43 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,14 @@
22
width: 600px;
33
height: 356px;
44
position: fixed;
5-
top: 0;
5+
@include center;
66
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
7-
margin: 64px;
87
@include Roboto-Regular;
8+
z-index: 9;
9+
transition: 0.3s opacity, 0.3s top;
10+
display: none;
11+
opacity: 0;
12+
top: 25%;
913

1014
& .date-display {
1115
width: 196px;
@@ -64,6 +68,7 @@
6468
height: 100%;
6569
position: relative;
6670
float: left;
71+
background-color: #fff;
6772

6873
& .clock {
6974
width: 270px;
@@ -128,6 +133,30 @@
128133
}
129134
}
130135

136+
& .buttons-container {
137+
position: absolute;
138+
right: 0;
139+
bottom: 8px;
140+
141+
& .material-button {
142+
float: right;
143+
margin-right: 8px;
144+
background-color: transparent;
145+
color: #26a69a;
146+
min-width: 0px;
147+
padding-left: 18px;
148+
padding-right: 18px;
149+
150+
&:first-child {
151+
margin-right: 16px;
152+
}
153+
}
154+
155+
&::after {
156+
clear: both;
157+
}
158+
}
159+
131160
& .hours-clock, & .minutes-clock {
132161
transition: 0.3s opacity;
133162
}
@@ -146,3 +175,15 @@
146175
clear: both;
147176
}
148177
}
178+
179+
.material-time-picker-dark {
180+
width: 100%;
181+
height: 100%;
182+
background-color: #000;
183+
opacity: 0;
184+
display: none;
185+
position: fixed;
186+
top: 0;
187+
z-index: 8;
188+
transition: 0.3s opacity;
189+
}

0 commit comments

Comments
 (0)