From 0267d5d07fbc9ef0a9ce0daf011a4cfd9f666501 Mon Sep 17 00:00:00 2001 From: Vladyslav Ilnytskyi Date: Tue, 24 Mar 2020 16:25:23 +0200 Subject: [PATCH 1/4] fix: month view selection --- src/components/TableMatrixView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/TableMatrixView.tsx b/src/components/TableMatrixView.tsx index 8bdebf2..557e2b5 100644 --- a/src/components/TableMatrixView.tsx +++ b/src/components/TableMatrixView.tsx @@ -22,7 +22,7 @@ const TableMatrixView: React.FunctionComponent = ({ className, matrix, ce )} {matrix.map((row, i) => ( - {row.map((v, j) => cell(v, i + j))} + {row.map((v, j) => cell(v, i * matrix[i].length + j))} ))} From b0fac002c8416f495b701c9a03f0e2947139eacd Mon Sep 17 00:00:00 2001 From: Vladyslav Ilnytskyi Date: Tue, 24 Mar 2020 17:25:46 +0200 Subject: [PATCH 2/4] fix: test snapshots --- .../CalendarContainer.test.tsx.snap | 70 +++--- test/__snapshots__/DayView.test.tsx.snap | 210 +++++++++--------- .../TableMatrixView.test.tsx.snap | 24 +- 3 files changed, 152 insertions(+), 152 deletions(-) diff --git a/test/__snapshots__/CalendarContainer.test.tsx.snap b/test/__snapshots__/CalendarContainer.test.tsx.snap index 51c9b83..4daf2a8 100644 --- a/test/__snapshots__/CalendarContainer.test.tsx.snap +++ b/test/__snapshots__/CalendarContainer.test.tsx.snap @@ -301,7 +301,7 @@ exports[` prop: locale should locale prop correctly 1`] = ` > prop: locale should locale prop correctly 1`] = ` prop: locale should locale prop correctly 1`] = ` prop: locale should locale prop correctly 1`] = ` prop: locale should locale prop correctly 1`] = ` prop: locale should locale prop correctly 1`] = ` prop: locale should locale prop correctly 1`] = ` prop: locale should locale prop correctly 1`] = ` > prop: locale should locale prop correctly 1`] = ` prop: locale should locale prop correctly 1`] = ` prop: locale should locale prop correctly 1`] = ` prop: locale should locale prop correctly 1`] = ` prop: locale should locale prop correctly 1`] = ` prop: locale should locale prop correctly 1`] = ` prop: locale should locale prop correctly 1`] = ` > prop: locale should locale prop correctly 1`] = ` prop: locale should locale prop correctly 1`] = ` prop: locale should locale prop correctly 1`] = ` prop: locale should locale prop correctly 1`] = ` prop: locale should locale prop correctly 1`] = ` prop: locale should locale prop correctly 1`] = ` prop: locale should locale prop correctly 1`] = ` > prop: locale should locale prop correctly 1`] = ` prop: locale should locale prop correctly 1`] = ` prop: locale should locale prop correctly 1`] = ` prop: locale should locale prop correctly 1`] = ` prop: locale should locale prop correctly 1`] = ` prop: locale should locale prop correctly 1`] = ` prop: locale should locale prop correctly 1`] = ` > prop: locale should locale prop correctly 1`] = ` prop: locale should locale prop correctly 1`] = ` prop: locale should locale prop correctly 1`] = ` prop: locale should locale prop correctly 1`] = ` prop: locale should locale prop correctly 1`] = ` prop: locale should locale prop correctly 1`] = ` prop: selected should render correctly 1`] = ` > prop: selected should render correctly 1`] = ` prop: selected should render correctly 1`] = ` prop: selected should render correctly 1`] = ` prop: selected should render correctly 1`] = ` prop: selected should render correctly 1`] = ` prop: selected should render correctly 1`] = ` prop: selected should render correctly 1`] = ` > prop: selected should render correctly 1`] = ` prop: selected should render correctly 1`] = ` prop: selected should render correctly 1`] = ` prop: selected should render correctly 1`] = ` prop: selected should render correctly 1`] = ` prop: selected should render correctly 1`] = ` prop: selected should render correctly 1`] = ` > prop: selected should render correctly 1`] = ` prop: selected should render correctly 1`] = ` prop: selected should render correctly 1`] = ` prop: selected should render correctly 1`] = ` prop: selected should render correctly 1`] = ` prop: selected should render correctly 1`] = ` prop: selected should render correctly 1`] = ` > prop: selected should render correctly 1`] = ` prop: selected should render correctly 1`] = ` prop: selected should render correctly 1`] = ` prop: selected should render correctly 1`] = ` prop: selected should render correctly 1`] = ` prop: selected should render correctly 1`] = ` prop: selected should render correctly 1`] = ` > prop: selected should render correctly 1`] = ` prop: selected should render correctly 1`] = ` prop: selected should render correctly 1`] = ` prop: selected should render correctly 1`] = ` prop: selected should render correctly 1`] = ` prop: selected should render correctly 1`] = ` prop: startDay, endDay should render correctly 1`] = ` > prop: startDay, endDay should render correctly 1`] = ` prop: startDay, endDay should render correctly 1`] = ` prop: startDay, endDay should render correctly 1`] = ` prop: startDay, endDay should render correctly 1`] = ` prop: startDay, endDay should render correctly 1`] = ` prop: startDay, endDay should render correctly 1`] = ` prop: startDay, endDay should render correctly 1`] = ` > prop: startDay, endDay should render correctly 1`] = ` prop: startDay, endDay should render correctly 1`] = ` prop: startDay, endDay should render correctly 1`] = ` prop: startDay, endDay should render correctly 1`] = ` prop: startDay, endDay should render correctly 1`] = ` prop: startDay, endDay should render correctly 1`] = ` prop: startDay, endDay should render correctly 1`] = ` > prop: startDay, endDay should render correctly 1`] = ` prop: startDay, endDay should render correctly 1`] = ` prop: startDay, endDay should render correctly 1`] = ` prop: startDay, endDay should render correctly 1`] = ` prop: startDay, endDay should render correctly 1`] = ` prop: startDay, endDay should render correctly 1`] = ` prop: startDay, endDay should render correctly 1`] = ` > prop: startDay, endDay should render correctly 1`] = ` prop: startDay, endDay should render correctly 1`] = ` prop: startDay, endDay should render correctly 1`] = ` prop: startDay, endDay should render correctly 1`] = ` prop: startDay, endDay should render correctly 1`] = ` prop: startDay, endDay should render correctly 1`] = ` prop: startDay, endDay should render correctly 1`] = ` > prop: startDay, endDay should render correctly 1`] = ` prop: startDay, endDay should render correctly 1`] = ` prop: startDay, endDay should render correctly 1`] = ` prop: startDay, endDay should render correctly 1`] = ` prop: startDay, endDay should render correctly 1`] = ` prop: startDay, endDay should render correctly 1`] = ` prop:customClass, customText should render correctly 1`] = ` > prop:customClass, customText should render correctly 1`] = ` prop:customClass, customText should render correctly 1`] = ` prop:customClass, customText should render correctly 1`] = ` prop:customClass, customText should render correctly 1`] = ` prop:customClass, customText should render correctly 1`] = ` prop:customClass, customText should render correctly 1`] = ` prop:customClass, customText should render correctly 1`] = ` > prop:customClass, customText should render correctly 1`] = ` prop:customClass, customText should render correctly 1`] = ` prop:customClass, customText should render correctly 1`] = ` prop:customClass, customText should render correctly 1`] = ` prop:customClass, customText should render correctly 1`] = ` prop:customClass, customText should render correctly 1`] = ` prop:customClass, customText should render correctly 1`] = ` > prop:customClass, customText should render correctly 1`] = ` prop:customClass, customText should render correctly 1`] = ` prop:customClass, customText should render correctly 1`] = ` prop:customClass, customText should render correctly 1`] = ` prop:customClass, customText should render correctly 1`] = ` prop:customClass, customText should render correctly 1`] = ` prop:customClass, customText should render correctly 1`] = ` > prop:customClass, customText should render correctly 1`] = ` prop:customClass, customText should render correctly 1`] = ` prop:customClass, customText should render correctly 1`] = ` prop:customClass, customText should render correctly 1`] = ` prop:customClass, customText should render correctly 1`] = ` prop:customClass, customText should render correctly 1`] = ` prop:customClass, customText should render correctly 1`] = ` > prop:customClass, customText should render correctly 1`] = ` prop:customClass, customText should render correctly 1`] = ` prop:customClass, customText should render correctly 1`] = ` prop:customClass, customText should render correctly 1`] = ` prop:customClass, customText should render correctly 1`] = ` prop:customClass, customText should render correctly 1`] = ` props matrix correctly 1`] = ` key="1" > value value value @@ -66,17 +66,17 @@ exports[` props matrix correctly 1`] = ` key="2" > value value value @@ -132,17 +132,17 @@ exports[` render with no props 1`] = ` key="1" > value value value @@ -151,17 +151,17 @@ exports[` render with no props 1`] = ` key="2" > value value value From 8133154ebda250a836c44ba289a282619a78487e Mon Sep 17 00:00:00 2001 From: andrewkiri Date: Tue, 1 Sep 2020 12:43:34 +0200 Subject: [PATCH 3/4] (feat): custom header format, custom icons --- src/components/Calendar.tsx | 9 ++++++--- src/components/CalendarContainer.tsx | 22 +++++++++++++++------- src/components/CalendarHead.tsx | 18 ++++++++++++------ src/components/PickerInput.tsx | 11 ++++++++++- src/components/RangeDatePicker.tsx | 8 ++++++-- src/components/RangePickerInput.tsx | 11 ++++++++--- stories/RangeDatePicker.stories.tsx | 26 ++++++++++++++++++++++++++ 7 files changed, 83 insertions(+), 22 deletions(-) diff --git a/src/components/Calendar.tsx b/src/components/Calendar.tsx index f662f98..f9dcb01 100644 --- a/src/components/Calendar.tsx +++ b/src/components/Calendar.tsx @@ -33,7 +33,7 @@ class Calendar extends React.Component { }; public render() { - const { showMonthCnt } = this.props; + const { showMonthCnt, format, prevIcon, nextIcon } = this.props; const { base } = this.state; return ( @@ -45,9 +45,12 @@ class Calendar extends React.Component { {...this.props} base={this.state.base} current={dayjs(base).add(idx, 'month')} - prevIcon={idx === 0} - nextIcon={idx === showMonthCnt! - 1} + shouldShowPrevIcon={idx === 0} + shouldShowNextIcon={idx === showMonthCnt! - 1} setBase={this.setBase} + format={format} + prevIcon={prevIcon} + nextIcon={nextIcon} /> ))} diff --git a/src/components/CalendarContainer.tsx b/src/components/CalendarContainer.tsx index ba02e6a..6cf4ddf 100644 --- a/src/components/CalendarContainer.tsx +++ b/src/components/CalendarContainer.tsx @@ -16,13 +16,19 @@ interface CalendarContainerProps { /** Calendar Show or Hide */ show?: boolean; /** PrevIcon Show or Hide */ - prevIcon?: boolean; + shouldShowPrevIcon?: boolean; /** NextIcon Show or Hide */ - nextIcon?: boolean; + shouldShowNextIcon?: boolean; /** Event for Calendar day click */ onChange?: (date: dayjs.Dayjs) => void; /** TodayPanel show or hide */ showToday?: boolean; + /** Format of calendar header title */ + format?: string; + /** Custom prevIcon */ + prevIcon?: React.ReactNode; + /** Custom nextIcon */ + nextIcon?: React.ReactNode; } interface PrivateProps { @@ -61,12 +67,12 @@ class CalendarContainer extends React.Component { } public getHeaderTitle = () => { - const { current } = this.props; + const { current, format = 'YYYY.MM' } = this.props; const year = dayjs(current).year(); return { [IDatePicker.ViewMode.YEAR]: `${year - 4} - ${year + 5}`, [IDatePicker.ViewMode.MONTH]: `${year}`, - [IDatePicker.ViewMode.DAY]: dayjs(current).format('YYYY.MM'), + [IDatePicker.ViewMode.DAY]: dayjs(current).format(format), }[this.state.viewMode]; }; @@ -132,15 +138,17 @@ class CalendarContainer extends React.Component { }; public renderCalendarHead = () => { - const { prevIcon, nextIcon } = this.props; + const { shouldShowPrevIcon, shouldShowNextIcon, prevIcon, nextIcon } = this.props; return ( ); }; diff --git a/src/components/CalendarHead.tsx b/src/components/CalendarHead.tsx index 0cfa5f7..0ccac05 100644 --- a/src/components/CalendarHead.tsx +++ b/src/components/CalendarHead.tsx @@ -9,11 +9,15 @@ interface Props { /** Calenar Title Click Event */ onTitleClick?: () => void; /** Prev Icon show or Hide */ - prevIcon?: boolean; + shouldShowPrevIcon?: boolean; /** Next icon show or hide */ - nextIcon?: boolean; + shouldShowNextIcon?: boolean; /** Title to show in calendar */ title?: string; + /** Custom prevIcon */ + prevIcon?: React.ReactNode; + /** Custom nextIcon */ + nextIcon?: React.ReactNode; } const defaultProps = { @@ -23,6 +27,8 @@ const defaultProps = { const CalendarHead: React.FunctionComponent = ({ onPrev, onNext, + shouldShowPrevIcon, + shouldShowNextIcon, prevIcon, nextIcon, title, @@ -31,9 +37,9 @@ const CalendarHead: React.FunctionComponent = ({ return (
- {prevIcon && ( + {shouldShowPrevIcon && ( )}
@@ -41,9 +47,9 @@ const CalendarHead: React.FunctionComponent = ({ {title}
- {nextIcon && ( + {shouldShowNextIcon && ( )}
diff --git a/src/components/PickerInput.tsx b/src/components/PickerInput.tsx index e984cb7..2229040 100644 --- a/src/components/PickerInput.tsx +++ b/src/components/PickerInput.tsx @@ -27,6 +27,12 @@ export interface Props { className?: string; /** Picker Input Placeholder */ placeholder?: string; + /** input custom styles */ + inputStyles?: { + [style: string]: string + } + /** input clear icon */ + clearIcon?: React.ReactNode; } class PickerInput extends React.Component { @@ -62,6 +68,7 @@ class PickerInput extends React.Component { onClick, onBlur, placeholder, + inputStyles = {}, } = this.props; return ( @@ -78,13 +85,15 @@ class PickerInput extends React.Component { placeholder={placeholder} style={{ paddingLeft: icon ? '32px' : '10px', + ...inputStyles }} /> ); }; public renderClear = () => { - return ( + const { clearIcon } = this.props; + return clearIcon ? clearIcon : ( diff --git a/src/components/RangeDatePicker.tsx b/src/components/RangeDatePicker.tsx index b6f4b40..743ea45 100644 --- a/src/components/RangeDatePicker.tsx +++ b/src/components/RangeDatePicker.tsx @@ -198,7 +198,7 @@ class RangeDatePicker extends React.Component { }; public renderRangePickerInput = () => { - const { startPlaceholder, endPlaceholder, readOnly, disabled, clear, onChange } = this.props; + const { startPlaceholder, endPlaceholder, readOnly, disabled, clear, icon } = this.props; const { startValue, endValue } = this.state; return ( { onChange={this.handleInputChange} onBlur={this.handleInputBlur} onClear={this.handleInputClear} + icon={icon} /> ); }; public renderCalendar = (actions: PickerAction) => { - const { showMonthCnt, initialDate, wrapper } = this.props; + const { showMonthCnt, initialDate, wrapper, format, prevIcon, nextIcon } = this.props; const { start, end } = this.state; let component: JSX.Element; @@ -232,6 +233,9 @@ class RangeDatePicker extends React.Component { onMouseOver={this.handleMouseOver} customDayText={this.handleCalendarText} customDayClass={this.handleCalendarClass} + format={format} + prevIcon={prevIcon} + nextIcon={nextIcon} /> ); diff --git a/src/components/RangePickerInput.tsx b/src/components/RangePickerInput.tsx index c705878..35e0d5e 100644 --- a/src/components/RangePickerInput.tsx +++ b/src/components/RangePickerInput.tsx @@ -31,6 +31,8 @@ export type InputProps = Merge< startPlaceholder?: string; /** end input placeholder */ endPlaceholder?: string; + /** Custom icon between input triggers */ + icon?: React.ReactNode; } >; @@ -73,12 +75,15 @@ class RangePickerInput extends React.Component { }; public render() { + const { icon } = this.props; return (
{this.renderStartInput()} - - - + {icon ? icon : ( + + + + )} {this.renderEndInput()}
); diff --git a/stories/RangeDatePicker.stories.tsx b/stories/RangeDatePicker.stories.tsx index 82d7da8..8ee0c15 100644 --- a/stories/RangeDatePicker.stories.tsx +++ b/stories/RangeDatePicker.stories.tsx @@ -8,6 +8,32 @@ import LayoutDecorator from './decorator/LayoutDecorator'; storiesOf('RangeDatePicker', module) .addDecorator(LayoutDecorator) .add('default', () => ) + .add('with custom header format', () => ) + .add('with custom icon between input triggers', () => { + return ( + + - +
+ } + />) + }) + .add('with custom prev and next icons', () => { + return ( + + - + + } + nextIcon={ +
+ + +
+ } + />) + }) .add('initial Start & End Date', () => { return ( From 518ad56b20b899197ddc216bface06aedf5963d8 Mon Sep 17 00:00:00 2001 From: andrewkiri Date: Tue, 1 Sep 2020 13:13:48 +0200 Subject: [PATCH 4/4] v1.1.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 78e080f..38a9b5a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@y0c/react-datepicker", - "version": "1.0.2", + "version": "1.1.0", "description": "Flexible, Reusable, Mobile friendly DatePicker Component", "author": "y0c", "license": "MIT",