parent
2ad4054c27
commit
d7bc8ebafe
17 changed files with 1038 additions and 59 deletions
@ -0,0 +1,181 @@ |
|||||||
|
import React, { Component } from 'react'; |
||||||
|
import PropTypes from 'prop-types'; |
||||||
|
import DaysViewHeading from './DaysViewHeading'; |
||||||
|
import DaysOfWeek from './DaysOfWeek'; |
||||||
|
import MonthSelector from './MonthSelector'; |
||||||
|
import Day from './Day'; |
||||||
|
import { getDaysOfMonth } from '../utils/moment-helper'; |
||||||
|
import moment from 'moment-jalali'; |
||||||
|
import onClickOutside from 'react-onclickoutside'; |
||||||
|
|
||||||
|
// Load Persian localisation
|
||||||
|
moment.loadPersian(); |
||||||
|
|
||||||
|
export class DateTimeCalendar extends Component { |
||||||
|
static propTypes = { |
||||||
|
min: PropTypes.object, |
||||||
|
max: PropTypes.object, |
||||||
|
styles: PropTypes.object, |
||||||
|
selectedDay: PropTypes.object, |
||||||
|
defaultMonth: PropTypes.object, |
||||||
|
onSelect: PropTypes.func, |
||||||
|
onClickOutside: PropTypes.func, |
||||||
|
containerProps: PropTypes.object |
||||||
|
}; |
||||||
|
|
||||||
|
static childContextTypes = { |
||||||
|
nextMonth: PropTypes.func.isRequired, |
||||||
|
prevMonth: PropTypes.func.isRequired, |
||||||
|
setCalendarMode: PropTypes.func.isRequired, |
||||||
|
setMonth: PropTypes.func.isRequired |
||||||
|
}; |
||||||
|
|
||||||
|
static defaultProps = { |
||||||
|
styles: require('../styles/basic.css'), |
||||||
|
containerProps: {} |
||||||
|
}; |
||||||
|
|
||||||
|
state = { |
||||||
|
month: this.props.defaultMonth || this.props.selectedDay || moment(this.props.min), |
||||||
|
selectedDay: this.props.selectedDay || null, |
||||||
|
mode: 'days' |
||||||
|
}; |
||||||
|
|
||||||
|
getChildContext() { |
||||||
|
return { |
||||||
|
nextMonth: this.nextMonth.bind(this), |
||||||
|
prevMonth: this.prevMonth.bind(this), |
||||||
|
setCalendarMode: this.setMode.bind(this), |
||||||
|
setMonth: this.setMonth.bind(this) |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
componentWillReceiveProps({ selectedDay, defaultMonth, min }) { |
||||||
|
if (this.props.selectedDay !== selectedDay) { |
||||||
|
this.selectDay(selectedDay); |
||||||
|
} else if (defaultMonth && this.props.defaultMonth !== defaultMonth && this.state.month === this.props.defaultMonth) { |
||||||
|
this.setMonth(defaultMonth); |
||||||
|
} else if (min && this.props.min !== min && this.state.month.isSame(this.props.min)) { |
||||||
|
this.setMonth(min.clone()); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
setMode(mode) { |
||||||
|
this.setState({ mode }); |
||||||
|
} |
||||||
|
|
||||||
|
setMonth(month) { |
||||||
|
this.setState({ month }); |
||||||
|
} |
||||||
|
|
||||||
|
nextMonth() { |
||||||
|
this.setState({ |
||||||
|
month: this.state.month.clone().add(1, 'jMonth') |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
prevMonth() { |
||||||
|
this.setState({ |
||||||
|
month: this.state.month.clone().subtract(1, 'jMonth') |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
selectDay(selectedDay) { |
||||||
|
const { month } = this.state; |
||||||
|
|
||||||
|
// Because there's no `m1.isSame(m2, 'jMonth')`
|
||||||
|
if (selectedDay.format('jYYYYjMM') !== month.format('jYYYYjMM')) { |
||||||
|
this.setState({ month: selectedDay }); |
||||||
|
} |
||||||
|
|
||||||
|
this.setState({ selectedDay }); |
||||||
|
} |
||||||
|
|
||||||
|
handleClickOnDay = selectedDay => { |
||||||
|
const { onSelect } = this.props; |
||||||
|
this.selectDay(selectedDay); |
||||||
|
if (onSelect) { |
||||||
|
onSelect(selectedDay); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
handleClickOutside(event) { |
||||||
|
if (this.props.onClickOutside) { |
||||||
|
this.props.onClickOutside(event); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
days = null; |
||||||
|
lastRenderedMonth = null; |
||||||
|
|
||||||
|
renderMonthSelector() { |
||||||
|
const { month } = this.state; |
||||||
|
const { styles } = this.props; |
||||||
|
return (<MonthSelector styles={styles} selectedMonth={month}/>); |
||||||
|
} |
||||||
|
|
||||||
|
renderDays() { |
||||||
|
const { month, selectedDay } = this.state; |
||||||
|
const { children, min, max, styles, outsideClickIgnoreClass } = this.props; |
||||||
|
|
||||||
|
let days; |
||||||
|
|
||||||
|
if (this.lastRenderedMonth === month) { |
||||||
|
days = this.days; |
||||||
|
} else { |
||||||
|
days = getDaysOfMonth(month); |
||||||
|
this.days = days; |
||||||
|
this.lastRenderedMonth = month; |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
{children} |
||||||
|
<DaysViewHeading styles={styles} month={month}/> |
||||||
|
<DaysOfWeek styles={styles}/> |
||||||
|
<div className={styles.dayPickerContainer}> |
||||||
|
{ |
||||||
|
days.map(day => { |
||||||
|
const isCurrentMonth = day.format('jMM') === month.format('jMM'); |
||||||
|
const disabled = (min ? day.isBefore(min) : false) || (max ? day.isAfter(max) : false); |
||||||
|
const selected = selectedDay ? selectedDay.isSame(day, 'day') : false; |
||||||
|
|
||||||
|
return ( |
||||||
|
<Day |
||||||
|
key={day.format('YYYYMMDD') } |
||||||
|
onClick={this.handleClickOnDay} |
||||||
|
day={day} |
||||||
|
disabled={disabled} |
||||||
|
selected={selected} |
||||||
|
isCurrentMonth={isCurrentMonth} |
||||||
|
styles={styles} |
||||||
|
/> |
||||||
|
); |
||||||
|
}) |
||||||
|
} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
render() { |
||||||
|
const { |
||||||
|
selectedDay, |
||||||
|
min, |
||||||
|
max, |
||||||
|
onClickOutside, |
||||||
|
outsideClickIgnoreClass, |
||||||
|
styles, |
||||||
|
className |
||||||
|
} = this.props; |
||||||
|
const { mode } = this.state; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className={styles.calendarContainer + ' ' + className}> |
||||||
|
{ mode === 'monthSelector' ? this.renderMonthSelector() : this.renderDays() } |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export default onClickOutside(Calendar); |
||||||
@ -0,0 +1,204 @@ |
|||||||
|
import React, { Component } from 'react'; |
||||||
|
import PropTypes from 'prop-types'; |
||||||
|
import moment from 'moment-jalali'; |
||||||
|
import TetherComponent from 'react-tether'; |
||||||
|
import Calendar from './Calendar'; |
||||||
|
import classnames from 'classnames'; |
||||||
|
|
||||||
|
export const outsideClickIgnoreClass = 'ignore--click--outside'; |
||||||
|
|
||||||
|
export default class DateTimePicker extends Component { |
||||||
|
static propTypes = { |
||||||
|
value: PropTypes.object, |
||||||
|
defaultValue: PropTypes.object, |
||||||
|
onChange: PropTypes.func, |
||||||
|
onFocus: PropTypes.func, |
||||||
|
onBlur: PropTypes.func, |
||||||
|
children: PropTypes.node, |
||||||
|
min: PropTypes.object, |
||||||
|
max: PropTypes.object, |
||||||
|
defaultMonth: PropTypes.object, |
||||||
|
inputFormat: PropTypes.string, |
||||||
|
removable: PropTypes.bool, |
||||||
|
timePickerComponent: PropTypes.func, |
||||||
|
calendarStyles: PropTypes.object, |
||||||
|
calendarContainerProps: PropTypes.object |
||||||
|
}; |
||||||
|
|
||||||
|
static defaultProps = { |
||||||
|
inputFormat: 'jYYYY/jM/jD', |
||||||
|
calendarStyles: require('../styles/basic.css'), |
||||||
|
calendarContainerProps: {} |
||||||
|
}; |
||||||
|
|
||||||
|
state = { |
||||||
|
isOpen: false, |
||||||
|
momentValue: this.props.defaultValue || null, |
||||||
|
inputValue: this.props.defaultValue ? |
||||||
|
this.props.defaultValue.format(this.props.inputFormat) : '' |
||||||
|
}; |
||||||
|
|
||||||
|
setOpen(isOpen) { |
||||||
|
this.setState({ isOpen }); |
||||||
|
} |
||||||
|
|
||||||
|
componentWillReceiveProps(nextProps) { |
||||||
|
if ('value' in nextProps && nextProps.value !== this.props.value) { |
||||||
|
this.setMomentValue(nextProps.value); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
setMomentValue(momentValue) { |
||||||
|
const { inputFormat } = this.props; |
||||||
|
|
||||||
|
if (this.props.onChange) { |
||||||
|
this.props.onChange(momentValue); |
||||||
|
} |
||||||
|
|
||||||
|
let inputValue = ""; |
||||||
|
if (momentValue) |
||||||
|
inputValue = momentValue.format(inputFormat); |
||||||
|
this.setState({ momentValue, inputValue }); |
||||||
|
} |
||||||
|
|
||||||
|
handleFocus() { |
||||||
|
this.setOpen(true); |
||||||
|
} |
||||||
|
|
||||||
|
handleBlur(event) { |
||||||
|
const { onBlur, inputFormat } = this.props; |
||||||
|
const { isOpen, momentValue } = this.state; |
||||||
|
|
||||||
|
if (isOpen) { |
||||||
|
this.refs.input.focus(); |
||||||
|
} else if (onBlur) { |
||||||
|
onBlur(event); |
||||||
|
} |
||||||
|
|
||||||
|
if (momentValue) { |
||||||
|
const inputValue = momentValue.format(inputFormat); |
||||||
|
this.setState({ inputValue }); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
handleClickOutsideCalendar() { |
||||||
|
this.setOpen(false); |
||||||
|
} |
||||||
|
|
||||||
|
handleSelectDay(selectedDay) { |
||||||
|
const { momentValue: oldValue } = this.state; |
||||||
|
let momentValue = selectedDay.clone(); |
||||||
|
|
||||||
|
if (oldValue) { |
||||||
|
momentValue = momentValue |
||||||
|
.set({ |
||||||
|
hour: oldValue.hours(), |
||||||
|
minute: oldValue.minutes(), |
||||||
|
second: oldValue.seconds() |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
this.setMomentValue(momentValue); |
||||||
|
} |
||||||
|
|
||||||
|
handleInputChange(event) { |
||||||
|
const { inputFormat } = this.props; |
||||||
|
const inputValue = event.target.value; |
||||||
|
const momentValue = moment(inputValue, inputFormat); |
||||||
|
|
||||||
|
if (momentValue.isValid()) { |
||||||
|
this.setState({ momentValue }); |
||||||
|
} |
||||||
|
|
||||||
|
this.setState({ inputValue }); |
||||||
|
} |
||||||
|
|
||||||
|
handleInputClick() { |
||||||
|
if (!this.props.disabled) { |
||||||
|
this.setOpen(true) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
renderInput() { |
||||||
|
let { isOpen, inputValue } = this.state; |
||||||
|
|
||||||
|
if (this.props.value) { |
||||||
|
let value = this.props.value; |
||||||
|
let inputFormat = this.props.inputFormat; |
||||||
|
inputValue = value.format(inputFormat); |
||||||
|
} |
||||||
|
|
||||||
|
const className = classnames(this.props.className, { |
||||||
|
[outsideClickIgnoreClass]: isOpen |
||||||
|
}); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<input |
||||||
|
className={className} |
||||||
|
type="text" |
||||||
|
ref="input" |
||||||
|
onFocus={this.handleFocus.bind(this) } |
||||||
|
onBlur={this.handleBlur.bind(this) } |
||||||
|
onChange={this.handleInputChange.bind(this) } |
||||||
|
onClick={this.handleInputClick.bind(this) } |
||||||
|
value={inputValue} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
renderCalendar() { |
||||||
|
const { momentValue } = this.state; |
||||||
|
const { timePickerComponent: TimePicker, onChange, min, max, defaultMonth, calendarStyles, calendarContainerProps } = this.props; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<Calendar |
||||||
|
min={min} |
||||||
|
max={max} |
||||||
|
selectedDay={momentValue} |
||||||
|
defaultMonth={defaultMonth} |
||||||
|
onSelect={this.handleSelectDay.bind(this) } |
||||||
|
onClickOutside={this.handleClickOutsideCalendar.bind(this) } |
||||||
|
outsideClickIgnoreClass={outsideClickIgnoreClass} |
||||||
|
styles={calendarStyles} |
||||||
|
containerProps={calendarContainerProps} |
||||||
|
> |
||||||
|
{ |
||||||
|
TimePicker ? ( |
||||||
|
<TimePicker |
||||||
|
min={min} |
||||||
|
max={max} |
||||||
|
momentValue={momentValue} |
||||||
|
setMomentValue={this.setMomentValue.bind(this) } |
||||||
|
/> |
||||||
|
) : null |
||||||
|
} |
||||||
|
</Calendar> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
removeDate() { |
||||||
|
const {onChange} = this.props; |
||||||
|
if (onChange) { |
||||||
|
onChange(''); |
||||||
|
} |
||||||
|
this.setState({ |
||||||
|
input: '', |
||||||
|
inputValue: '' |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
render() { |
||||||
|
const { isOpen } = this.state; |
||||||
|
|
||||||
|
return ( |
||||||
|
<TetherComponent attachment="top center"> |
||||||
|
{ this.renderInput() } |
||||||
|
{ isOpen ? this.renderCalendar() : null } |
||||||
|
</TetherComponent> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,61 @@ |
|||||||
|
import React, { Component } from 'react'; |
||||||
|
import PropTypes from 'prop-types'; |
||||||
|
import classnames from 'classnames'; |
||||||
|
import { persianNumber } from '../utils/persian'; |
||||||
|
|
||||||
|
const styles = { |
||||||
|
wrapper: {}, |
||||||
|
button: { |
||||||
|
outline: 'none', |
||||||
|
cursor: 'pointer' |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
export default class Day extends Component { |
||||||
|
static propTypes = { |
||||||
|
day: PropTypes.object.isRequired, |
||||||
|
isCurrentMonth: PropTypes.bool, |
||||||
|
disabled: PropTypes.bool, |
||||||
|
selected: PropTypes.bool, |
||||||
|
onClick: PropTypes.func |
||||||
|
}; |
||||||
|
|
||||||
|
shouldComponentUpdate(nextProps) { |
||||||
|
return nextProps.selected !== this.props.selected || |
||||||
|
nextProps.disabled !== this.props.disabled || |
||||||
|
nextProps.isCurrentMonth !== this.props.isCurrentMonth; |
||||||
|
} |
||||||
|
|
||||||
|
handleClick(event) { |
||||||
|
event.preventDefault(); |
||||||
|
event.stopPropagation(); |
||||||
|
event.nativeEvent.stopImmediatePropagation(); |
||||||
|
const { onClick, day } = this.props; |
||||||
|
|
||||||
|
if (onClick) { |
||||||
|
onClick(day); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
render() { |
||||||
|
const { day, disabled, selected, isCurrentMonth, onClick, styles, ...rest } = this.props; |
||||||
|
|
||||||
|
const className = classnames(styles.dayWrapper, { |
||||||
|
[styles.selected]: selected, |
||||||
|
[styles.currentMonth]: isCurrentMonth |
||||||
|
}); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className={className}> |
||||||
|
<button |
||||||
|
type="button" |
||||||
|
onClick={this.handleClick.bind(this) } |
||||||
|
disabled={disabled} |
||||||
|
{...rest} |
||||||
|
> |
||||||
|
{ persianNumber(day.format('jD')) } |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,21 @@ |
|||||||
|
import React, { Component } from 'react'; |
||||||
|
import PropTypes from 'prop-types'; |
||||||
|
|
||||||
|
// Day of week names for use in date-picker heading
|
||||||
|
const dayOfWeekNames = ['ش', 'ی', 'د', 'س', 'چ', 'پ', 'ج']; |
||||||
|
|
||||||
|
export default class DaysOfWeek extends Component { |
||||||
|
static propTypes = { |
||||||
|
styles: PropTypes.object |
||||||
|
}; |
||||||
|
|
||||||
|
render() { |
||||||
|
const { styles } = this.props; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className={styles.daysOfWeek}> |
||||||
|
{ dayOfWeekNames.map((name, key) => <div key={key}>{name}</div>) } |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,50 @@ |
|||||||
|
import React, { Component } from 'react'; |
||||||
|
import PropTypes from 'prop-types'; |
||||||
|
import { persianNumber } from '../utils/persian'; |
||||||
|
import { leftArrow, rightArrow } from '../utils/assets'; |
||||||
|
|
||||||
|
export default class Heading extends Component { |
||||||
|
static propTypes = { |
||||||
|
month: PropTypes.object.isRequired |
||||||
|
}; |
||||||
|
|
||||||
|
static contextTypes = { |
||||||
|
styles: PropTypes.object, |
||||||
|
nextMonth: PropTypes.func.isRequired, |
||||||
|
prevMonth: PropTypes.func.isRequired, |
||||||
|
setCalendarMode: PropTypes.func.isRequired |
||||||
|
}; |
||||||
|
|
||||||
|
handleMonthClick(event) { |
||||||
|
const { setCalendarMode } = this.context; |
||||||
|
event.preventDefault(); |
||||||
|
setCalendarMode('monthSelector'); |
||||||
|
} |
||||||
|
|
||||||
|
render() { |
||||||
|
const { nextMonth, prevMonth } = this.context; |
||||||
|
const { month, styles } = this.props; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className={styles.heading}> |
||||||
|
<button className={styles.title} onClick={this.handleMonthClick.bind(this)}> |
||||||
|
{ persianNumber(month.format('jMMMM jYYYY')) } |
||||||
|
</button> |
||||||
|
<button |
||||||
|
type="button" |
||||||
|
title="ماه قبل" |
||||||
|
className={styles.prev} |
||||||
|
onClick={prevMonth} |
||||||
|
dangerouslySetInnerHTML={rightArrow} |
||||||
|
/> |
||||||
|
<button |
||||||
|
type="button" |
||||||
|
title="ماه بعد" |
||||||
|
className={styles.next} |
||||||
|
onClick={nextMonth} |
||||||
|
dangerouslySetInnerHTML={leftArrow} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,93 @@ |
|||||||
|
import React, { Component } from 'react'; |
||||||
|
import PropTypes from 'prop-types'; |
||||||
|
import moment from 'moment-jalali'; |
||||||
|
import classnames from 'classnames'; |
||||||
|
import MonthsViewHeading from './MonthsViewHeading'; |
||||||
|
import { persianNumber } from '../utils/persian'; |
||||||
|
import { leftArrow, rightArrow } from '../utils/assets'; |
||||||
|
|
||||||
|
// List of months
|
||||||
|
const months = [ |
||||||
|
'فروردین', |
||||||
|
'اردیبهشت', |
||||||
|
'خرداد', |
||||||
|
'تیر', |
||||||
|
'مرداد', |
||||||
|
'شهریور', |
||||||
|
'مهر', |
||||||
|
'آبان', |
||||||
|
'آذر', |
||||||
|
'دی', |
||||||
|
'بهمن', |
||||||
|
'اسفند' |
||||||
|
]; |
||||||
|
|
||||||
|
export default class MonthSelector extends Component { |
||||||
|
static propTypes = { |
||||||
|
styles: PropTypes.object, |
||||||
|
selectedMonth: PropTypes.object.isRequired |
||||||
|
}; |
||||||
|
|
||||||
|
static contextTypes = { |
||||||
|
setCalendarMode: PropTypes.func.isRequired, |
||||||
|
setMonth: PropTypes.func.isRequired |
||||||
|
}; |
||||||
|
|
||||||
|
state = { |
||||||
|
year: this.props.selectedMonth |
||||||
|
}; |
||||||
|
|
||||||
|
nextYear() { |
||||||
|
this.setState({ |
||||||
|
year: this.state.year.clone().add(1, 'year') |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
prevYear() { |
||||||
|
this.setState({ |
||||||
|
year: this.state.year.clone().subtract(1, 'year') |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
handleClick(key) { |
||||||
|
const { setMonth, setCalendarMode } = this.context; |
||||||
|
setMonth(moment(key, 'jM-jYYYY')); |
||||||
|
setCalendarMode('days'); |
||||||
|
} |
||||||
|
|
||||||
|
render() { |
||||||
|
const { year } = this.state; |
||||||
|
const { selectedMonth, styles } = this.props; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="month-selector"> |
||||||
|
<MonthsViewHeading |
||||||
|
styles={styles} |
||||||
|
year={year} |
||||||
|
onNextYear={this.nextYear.bind(this) } |
||||||
|
onPrevYear={this.prevYear.bind(this) } |
||||||
|
/> |
||||||
|
<div className={styles.monthsList}> |
||||||
|
{ |
||||||
|
months.map((name, key) => { |
||||||
|
const buttonFingerprint = (key + 1) + '-' + year.format('jYYYY'); |
||||||
|
const selectedMonthFingerprint = selectedMonth.format('jM-jYYYY'); |
||||||
|
const isCurrent = selectedMonthFingerprint === buttonFingerprint; |
||||||
|
|
||||||
|
const className = classnames(styles.monthWrapper, { |
||||||
|
[styles.selected]: isCurrent |
||||||
|
}); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div key={key} className={className}> |
||||||
|
<button onClick={this.handleClick.bind(this, buttonFingerprint)}> |
||||||
|
{name} |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}) |
||||||
|
} |
||||||
|
</div> |
||||||
|
</div>); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,44 @@ |
|||||||
|
import React, { Component } from 'react'; |
||||||
|
import PropTypes from 'prop-types'; |
||||||
|
import { persianNumber } from '../utils/persian'; |
||||||
|
import { leftArrow, rightArrow } from '../utils/assets'; |
||||||
|
|
||||||
|
export default class MonthsViewHeading extends Component { |
||||||
|
static propTypes = { |
||||||
|
year: PropTypes.object.isRequired, |
||||||
|
onNextYear: PropTypes.func.isRequired, |
||||||
|
onPrevYear: PropTypes.func.isRequired |
||||||
|
}; |
||||||
|
|
||||||
|
static contextTypes = { |
||||||
|
styles: PropTypes.object |
||||||
|
}; |
||||||
|
|
||||||
|
render() { |
||||||
|
const { year, styles } = this.props; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className={styles.heading}> |
||||||
|
<span className={styles.title}> |
||||||
|
{ persianNumber(year.format('jYYYY')) } |
||||||
|
</span> |
||||||
|
<button |
||||||
|
type="button" |
||||||
|
title="سال قبل" |
||||||
|
style={styles.navButton} |
||||||
|
className={styles.prev} |
||||||
|
onClick={this.props.onPrevYear} |
||||||
|
dangerouslySetInnerHTML={rightArrow} |
||||||
|
/> |
||||||
|
<button |
||||||
|
type="button" |
||||||
|
title="سال بعد" |
||||||
|
style={styles.navButton} |
||||||
|
className={styles.next} |
||||||
|
onClick={this.props.onNextYear} |
||||||
|
dangerouslySetInnerHTML={leftArrow} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,3 @@ |
|||||||
|
// export {DateTimeCalendar as default} from './components/Calendar';
|
||||||
|
// export {DateTimePicker as default} from './components/DatePicker';
|
||||||
|
// export { outsideClickIgnoreClass as default } from './components/DatePicker'
|
||||||
@ -0,0 +1,156 @@ |
|||||||
|
.calendarContainer { |
||||||
|
border-radius: 3px; |
||||||
|
box-shadow: 0 3px 10px #dbdbdb; |
||||||
|
border: 1px solid #cccccc; |
||||||
|
width: 300px; |
||||||
|
margin: auto; |
||||||
|
text-align: center; |
||||||
|
padding: 10px; |
||||||
|
background-color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.calendarContainer * { |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
|
||||||
|
.calendarContainer .dayPickerContainer:after, |
||||||
|
.calendarContainer .monthsList:after, |
||||||
|
.calendarContainer .daysOfWeek:after { |
||||||
|
content: ''; |
||||||
|
display: block; |
||||||
|
clear: both; |
||||||
|
} |
||||||
|
|
||||||
|
/* Heading */ |
||||||
|
.calendarContainer .heading { |
||||||
|
height: 42px; |
||||||
|
font-weight: bold; |
||||||
|
margin-bottom: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.calendarContainer .heading > button { |
||||||
|
border-radius: 3px; |
||||||
|
background: none; |
||||||
|
margin: 5px 0; |
||||||
|
border: 1px solid #F7F7F7; |
||||||
|
text-align: center; |
||||||
|
line-height: 30px; |
||||||
|
width: 36px; |
||||||
|
height: 32px; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
.calendarContainer .heading > button:hover { |
||||||
|
background-color: #f2f2f2; |
||||||
|
} |
||||||
|
|
||||||
|
.calendarContainer .heading > span { |
||||||
|
line-height: 35px; |
||||||
|
} |
||||||
|
|
||||||
|
.calendarContainer .heading svg { |
||||||
|
width: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.calendarContainer .heading .prev { |
||||||
|
float: right; |
||||||
|
} |
||||||
|
|
||||||
|
.calendarContainer .heading .next { |
||||||
|
float: left; |
||||||
|
} |
||||||
|
|
||||||
|
.calendarContainer .heading .title { |
||||||
|
line-height: 32px; |
||||||
|
width: 120px; |
||||||
|
height: 32px; |
||||||
|
font-size: 1em; |
||||||
|
margin: 5px 0; |
||||||
|
border: 1px solid #F7F7F7; |
||||||
|
text-align: center; |
||||||
|
display: inline-block; |
||||||
|
font-weight: normal; |
||||||
|
} |
||||||
|
|
||||||
|
/* Day wrapper styles */ |
||||||
|
.calendarContainer .dayWrapper { |
||||||
|
padding: 5; |
||||||
|
float: right; |
||||||
|
width: 14.28571429%; |
||||||
|
} |
||||||
|
|
||||||
|
/* Day wrapper button styles */ |
||||||
|
.calendarContainer .dayWrapper button { |
||||||
|
border: none; |
||||||
|
background: none; |
||||||
|
outline: none; |
||||||
|
width: 100%; |
||||||
|
height: 36px; |
||||||
|
border-radius: 3px; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
.calendarContainer .dayWrapper button:hover { |
||||||
|
background-color: #eeeeff; |
||||||
|
} |
||||||
|
|
||||||
|
.calendarContainer .dayWrapper button[disabled] { |
||||||
|
color: #aaa; |
||||||
|
cursor: not-allowed; |
||||||
|
background-color: #ebebeb; |
||||||
|
} |
||||||
|
|
||||||
|
.calendarContainer .dayWrapper button.selected { |
||||||
|
background-color: #337ab7; |
||||||
|
color: #ffffff; |
||||||
|
} |
||||||
|
|
||||||
|
.calendarContainer .dayWrapper:not(.currentMonth) button { |
||||||
|
opacity: .5; |
||||||
|
} |
||||||
|
|
||||||
|
/* Days of week row */ |
||||||
|
.calendarContainer .daysOfWeek { |
||||||
|
border-bottom: 1px solid #EEE; |
||||||
|
margin-bottom: 5px; |
||||||
|
padding-bottom: 5px; |
||||||
|
display: flex; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.calendarContainer .daysOfWeek > div { |
||||||
|
flex-grow: 1; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
|
||||||
|
/* Month selector portion */ |
||||||
|
.calendarContainer .monthsList { |
||||||
|
clear: both; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.calendarContainer .monthsList button { |
||||||
|
width: 33.33333332%; |
||||||
|
height: 25%; |
||||||
|
float: right; |
||||||
|
border: 1px solid #F9F9F9; |
||||||
|
outline: none; |
||||||
|
font-size: 1em; |
||||||
|
background: #fff; |
||||||
|
padding: 10px 0; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
.calendarContainer .monthsList button:hover { |
||||||
|
background: #eeeeee; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
/* Selected state of buttons */ |
||||||
|
.calendarContainer .selected button, |
||||||
|
.calendarContainer .selected button:hover, |
||||||
|
.calendarContainer .selected button:active, |
||||||
|
.calendarContainer .selected button:focus { |
||||||
|
background-color: #337ab7; |
||||||
|
color: #ffffff; |
||||||
|
} |
||||||
@ -0,0 +1,11 @@ |
|||||||
|
export const leftArrow = { |
||||||
|
__html: '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 314.5 314.5" style="enable-background:new 0 0 314.5 314.5;" xml:space="preserve"><g><path class="arrow-icon" d="M125,157.5l116-116c10-10,10-24,0-34s-25-10-35,0l-133,133c-5,5-7,10-7,17s2,12,7,17l133,133c5,5,11,7,17,7s13-2,18-7c10-10,10-24,0-34L125,157.5z"/></g></svg>' |
||||||
|
}; |
||||||
|
|
||||||
|
export const rightArrow = { |
||||||
|
__html: '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 315.5 315.5" style="enable-background:new 0 0 315.5 315.5;" xml:space="preserve"><g><path class="arrow-icon" d="M242,141L109,8c-5-5-12-8-18-8S79,3,74,8c-10,10-10,24,0,34l116,116L74,274c-10,10-10,24,0,34s25,10,35,0l133-133c5-5,7-11,7-17C249,151,247,146,242,141z"/></g></svg>' |
||||||
|
}; |
||||||
|
|
||||||
|
export const remove = { |
||||||
|
__html: '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 212.982 212.982" style="enable-background:new 0 0 212.982 212.982;" xml:space="preserve"><g><path style="fill-rule:evenodd;clip-rule:evenodd;" d="M131.804,106.491l75.936-75.936c6.99-6.99,6.99-18.323,0-25.312 c-6.99-6.99-18.322-6.99-25.312,0l-75.937,75.937L30.554,5.242c-6.99-6.99-18.322-6.99-25.312,0c-6.989,6.99-6.989,18.323,0,25.312 l75.937,75.936L5.242,182.427c-6.989,6.99-6.989,18.323,0,25.312c6.99,6.99,18.322,6.99,25.312,0l75.937-75.937l75.937,75.937 c6.989,6.99,18.322,6.99,25.312,0c6.99-6.99,6.99-18.322,0-25.312L131.804,106.491z" fill="#555555"/></g></svg>' |
||||||
|
}; |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
/** |
||||||
|
* Get days of a month that should be shown on a month page |
||||||
|
* |
||||||
|
* @param month A moment object |
||||||
|
* @returns {Array} |
||||||
|
*/ |
||||||
|
export function getDaysOfMonth(month) { |
||||||
|
const days = []; |
||||||
|
|
||||||
|
const current = month.clone().startOf('jMonth'); |
||||||
|
const end = month.clone().endOf('jMonth'); |
||||||
|
|
||||||
|
// Set start to the first day of week in the last month
|
||||||
|
current.subtract((current.day() + 1) % 7, 'days'); |
||||||
|
|
||||||
|
// Set end to the last day of week in the next month
|
||||||
|
end.add(6 - (end.day() + 1) % 7, 'days'); |
||||||
|
|
||||||
|
while (current.isBefore(end)) { |
||||||
|
days.push(current.clone()); |
||||||
|
current.add(1, 'days'); |
||||||
|
} |
||||||
|
|
||||||
|
return days; |
||||||
|
} |
||||||
@ -0,0 +1,29 @@ |
|||||||
|
const latinToPersianMap = ['۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹', '۰']; |
||||||
|
const latinNumbers = [/1/g, /2/g, /3/g, /4/g, /5/g, /6/g, /7/g, /8/g, /9/g, /0/g]; |
||||||
|
|
||||||
|
function prepareNumber(input) { |
||||||
|
let string; |
||||||
|
if (typeof input === 'number') { |
||||||
|
string = input.toString(); |
||||||
|
} else if (typeof input === 'undefined') { |
||||||
|
string = ''; |
||||||
|
} else { |
||||||
|
string = input; |
||||||
|
} |
||||||
|
|
||||||
|
return string; |
||||||
|
} |
||||||
|
|
||||||
|
function latinToPersian(string) { |
||||||
|
let result = string; |
||||||
|
|
||||||
|
for (let index = 0; index < 10; index++) { |
||||||
|
result = result.replace(latinNumbers[index], latinToPersianMap[index]); |
||||||
|
} |
||||||
|
|
||||||
|
return result; |
||||||
|
} |
||||||
|
|
||||||
|
export function persianNumber(input) { |
||||||
|
return latinToPersian(prepareNumber(input)); |
||||||
|
} |
||||||
Loading…
Reference in new issue