Skip to content

Commit 0eb7e57

Browse files
LouisMazelLouisMazel
committed
🔨 refactoring
1 parent 5c5ecca commit 0eb7e57

File tree

5 files changed

+47
-87
lines changed

5 files changed

+47
-87
lines changed

‎src/App.vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -232,7 +232,6 @@
232232
background-color: #FFF;
233233
color: #bd4147;
234234
border: 1px solid #CCC;
235-
/* display: inline-block; */
236235
border-radius: 4px;
237236
outline: none;
238237
font-size: 85%;

‎src/vue-ctk-date-time-picker/_subs/CtkDatePickerAgenda.vue

Lines changed: 12 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -222,17 +222,14 @@
222222
return moment(this.dateTime).locale(this.locale).format('ddd D MMM')
223223
},
224224
selectTime (dateTime) {
225-
this.transitionDayName = 'slidevprev'
226-
if (dateTime > this.dateTime) {
227-
this.transitionDayName = 'slidevnext'
228-
}
225+
const isBigger = dateTime > this.dateTime
226+
this.transitionDayName = isBigger ? 'slidevnext' : 'slidevprev'
229227
this.$emit('change-date', dateTime)
230228
},
231229
selectDate (dateTime) {
232-
this.transitionDayName = 'slidevnext'
233-
if (dateTime.isBefore(this.dateTime)) {
234-
this.transitionDayName = 'slidevprev'
235-
}
230+
const isBefore = dateTime.isBefore(this.dateTime)
231+
this.transitionDayName = isBefore ? 'slidevprev' : 'slidevnext'
232+
236233
dateTime.add(this.dateTime.hour(), 'hours')
237234
dateTime.add(this.dateTime.minute(), 'minutes')
238235
this.$emit('change-date', dateTime)
@@ -250,18 +247,13 @@
250247
this.$emit('validate')
251248
},
252249
dateTimeWidth () {
253-
let width
254-
let result
255-
if (this.$refs.timePickerComponent && this.$refs.timePickerComponent.$el.clientWidth) {
256-
width = this.$refs.timePickerComponent.$el.clientWidth
257-
} else {
258-
width = 160
259-
}
260-
result = {
261-
flex: '0 0 ' + width + 'px',
262-
width: width + 'px',
263-
minWidth: width + 'px',
264-
maxWidth: width + 'px'
250+
const timePickerComponentPresent = this.$refs.timePickerComponent && this.$refs.timePickerComponent.$el.clientWidth
251+
const width = timePickerComponentPresent ? this.$refs.timePickerComponent.$el.clientWidth : 160
252+
const result = {
253+
flex: `0 0 ${width}px`,
254+
width: `${width}px`,
255+
minWidth: `${width}px`,
256+
maxWidth: `${width}px`
265257
}
266258
return result
267259
}

‎src/vue-ctk-date-time-picker/_subs/_subs/CtkDatePicker.vue

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -135,11 +135,9 @@
135135
}
136136
},
137137
endEmptyDays () {
138-
if ((this.monthDays.length + this.weekDay) > 35) {
139-
return 42 - this.monthDays.length - this.weekDay
140-
} else {
141-
return 35 - this.monthDays.length - this.weekDay
142-
}
138+
const getDays = (this.monthDays.length + this.weekDay) > 35
139+
const number = getDays ? 42 : 35
140+
return number - this.monthDays.length - this.weekDay
143141
},
144142
monthDays () {
145143
return this.month.getMonthDays()
@@ -174,13 +172,14 @@
174172
this.$emit('change-date', day)
175173
},
176174
changeMonth (val) {
177-
this.transitionDaysName = 'slide' + val
178-
this.transitionLabelName = 'slidev' + val
175+
this.transitionDaysName = `slide${val}`
176+
this.transitionLabelName = `slidev${val}`
179177
this.$emit('change-month', val)
180178
}
181179
}
182180
}
183181
</script>
182+
184183
<style lang="scss" scoped>
185184
@import "../../assets/animation.scss";
186185
#CtkDatePicker {

‎src/vue-ctk-date-time-picker/_subs/_subs/CtkTimePicker.vue

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@
126126
const containers = ['hours', 'minutes']
127127
containers.forEach((container) => {
128128
const elem = this.$refs[`${container}`]
129-
const selected = this.$refs[`${container}`].querySelector('.item.active')
129+
const selected = this.$refs[`${container}`].querySelector(`.item.active`)
130130
if (selected) {
131131
elem.scrollTop = 0
132132
const boundsSelected = selected.getBoundingClientRect()
@@ -146,17 +146,13 @@
146146
methods: {
147147
formatValue: function (type, i) {
148148
switch (type) {
149-
case 'H':
150-
case 'm':
149+
case 'H': case 'm':
151150
return String(i)
152-
case 'HH':
153-
case 'mm':
151+
case 'HH': case 'mm':
154152
return i < 10 ? `0${i}` : String(i)
155-
case 'h':
156-
case 'k':
153+
case 'h': case 'k':
157154
return String(i + 1)
158-
case 'hh':
159-
case 'kk':
155+
case 'hh': case 'kk':
160156
return (i + 1) < 10 ? `0${i + 1}` : String(i + 1)
161157
default:
162158
return ''

‎src/vue-ctk-date-time-picker/vue-ctk-date-time-picker.vue

Lines changed: 24 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -72,10 +72,12 @@
7272
<script>
7373
import moment from 'moment'
7474
import CtkDatePickerAgenda from './_subs/CtkDatePickerAgenda.vue'
75-
function nearestMinutes (interval, someMoment, m) {
75+
76+
const nearestMinutes = (interval, someMoment, m) => {
7677
const roundedMinutes = Math.ceil(someMoment.minute() / interval) * interval
7778
return m(someMoment.clone().minute(roundedMinutes).second(0))
7879
}
80+
7981
export default {
8082
name: 'VueCtkDateTimePicker',
8183
components: {
@@ -125,42 +127,19 @@
125127
borderColor: this.color
126128
}
127129
},
128-
dateTime: {
129-
get () {
130-
if (this.disableDate) {
131-
if (this.value) {
132-
let date
133-
if (this.disableDate) {
134-
date = moment(moment().format('YYYY-MM-DD') + ' ' + this.value)
135-
} else {
136-
date = moment(this.value)
137-
}
138-
return nearestMinutes(this.minuteInterval, date, moment)
139-
} else {
140-
return nearestMinutes(this.minuteInterval, moment(), moment)
141-
}
142-
}
143-
return nearestMinutes(this.minuteInterval, this.value ? moment(this.value) : moment(), moment)
144-
}
130+
dateTime () {
131+
const date = this.disableDate
132+
? this.value ? moment(`${moment().format('YYYY-MM-DD')} ${this.value}`) : moment()
133+
: this.value ? moment(this.value) : moment()
134+
return nearestMinutes(this.minuteInterval, date, moment)
145135
},
146-
dateFormatted: {
147-
get () {
148-
let dateFormat
149-
if (this.value) {
150-
if (this.disableDate) {
151-
dateFormat = moment(moment().format('YYYY-MM-DD') + ' ' + this.value)
152-
} else {
153-
dateFormat = moment(this.value)
154-
}
155-
} else {
156-
dateFormat = null
157-
}
158-
if (dateFormat) {
159-
return nearestMinutes(this.minuteInterval, dateFormat, moment).locale(this.locale).format(this.formatted)
160-
} else {
161-
return null
162-
}
163-
}
136+
dateFormatted () {
137+
let dateFormat = this.value
138+
? this.disableDate
139+
? moment(`${moment().format('YYYY-MM-DD')} ${this.value}`)
140+
: moment(this.value)
141+
: null
142+
return dateFormat ? nearestMinutes(this.minuteInterval, dateFormat, moment).locale(this.locale).format(this.formatted) : null
164143
}
165144
},
166145
created () {
@@ -177,23 +156,18 @@
177156
}
178157
},
179158
showDatePicker () {
180-
if (this.disabled) {
181-
return
182-
}
159+
if (this.disabled) return
160+
183161
const rect = this.$refs.parent.getBoundingClientRect()
184162
const windowHeight = window.innerHeight
185163
let datePickerHeight = 428
186-
if (!this.enableButtonValidate) {
187-
datePickerHeight = datePickerHeight - 46
188-
}
189-
if (this.withoutHeader) {
190-
datePickerHeight = datePickerHeight - 65
191-
}
192-
if (((windowHeight - (rect.top + rect.height)) > datePickerHeight) || ((windowHeight - rect.top) > windowHeight / 2 + rect.height)) {
193-
this.agendaPosition = 'top'
194-
} else {
195-
this.agendaPosition = 'bottom'
196-
}
164+
165+
datePickerHeight = !this.enableButtonValidate ? 428 - 46 : datePickerHeight
166+
datePickerHeight = this.withoutHeader ? 428 - 65 : datePickerHeight
167+
168+
const position = ((windowHeight - (rect.top + rect.height)) > datePickerHeight) || ((windowHeight - rect.top) > windowHeight / 2 + rect.height)
169+
this.agendaPosition = position ? 'top' : 'bottom'
170+
197171
this.isVisible = true
198172
},
199173
hideDatePicker () {

0 commit comments

Comments
 (0)