Skip to content

Commit

Permalink
fix: #84 initialize picker state with input value (#88)
Browse files Browse the repository at this point in the history 
* fix: add localization prop in propTypes

* refactor: clarify confusing parts, remove redundant params (#87)

* fix: add localization prop in propTypes

* use getPicker in all input components

* refactor(InputView): rename render prop to renderPicker

* update package version

* clean up example

* initialize picker state from input value

* fix tests
  • Loading branch information
@arfedulov
arfedulov authored Feb 16, 2019
1 parent 8ba2a9c commit c69ff0e
Show file tree
Hide file tree
Showing 13 changed files with 79 additions and 80 deletions.
2 changes: 2 additions & 0 deletions src/inputs/BaseInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
import {
TimeFormat,
} from '../pickers/BasePicker';
import moment = require('moment');

export interface BaseInputProps {
[key: string]: any;
Expand Down Expand Up @@ -132,6 +133,7 @@ abstract class BaseInput<P extends BaseInputProps,
S extends BaseInputState> extends React.Component<P, S> {
public static defaultProps = {
inline: false,
localization: moment.locale(),
};

private calendarNode: HTMLElement;
Expand Down
21 changes: 9 additions & 12 deletions src/inputs/DateInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,7 @@ import {
tick,
} from '../lib';
import {
chooseValue,
dateValueToString,
getInitializer,
buildValue,
parseArrayOrValue,
parseValue,
} from './parse';
Expand Down Expand Up @@ -98,10 +96,10 @@ class DateInput extends BaseInput<DateInputProps, DateInputState> {
* - handle underlying picker change
*/
public static readonly defaultProps = {
...BaseInput.defaultProps,
dateFormat: 'DD-MM-YYYY',
startMode: 'day',
preserveViewMode: true,
inline: false,
icon: 'calendar',
};

Expand Down Expand Up @@ -182,7 +180,7 @@ class DateInput extends BaseInput<DateInputProps, DateInputState> {

constructor(props: DateInputProps) {
super(props);
const parsedValue = parseValue(props.value, props.dateFormat);
const parsedValue = parseValue(props.value, props.dateFormat, props.localization);
this.state = {
mode: props.startMode,
popupIsClosed: true,
Expand Down Expand Up @@ -270,15 +268,14 @@ class DateInput extends BaseInput<DateInputProps, DateInputState> {
pickerStyle,
onChange: this.handleSelect,
onHeaderClick: this.switchToPrevMode,
initializeWith: getInitializer({ initialDate, dateFormat, dateParams: this.getDateParams(), localization }),
value: parseValue(chooseValue(value, initialDate), dateFormat),
enable: parseArrayOrValue(enable, dateFormat),
minDate: parseValue(minDate, dateFormat),
maxDate: parseValue(maxDate, dateFormat),
value: buildValue(value, initialDate, localization, dateFormat),
enable: parseArrayOrValue(enable, dateFormat, localization),
minDate: parseValue(minDate, dateFormat, localization),
maxDate: parseValue(maxDate, dateFormat, localization),
localization,
};
const disableParsed = parseArrayOrValue(disable, dateFormat);
const markedParsed = parseArrayOrValue(marked, dateFormat);
const disableParsed = parseArrayOrValue(disable, dateFormat, localization);
const markedParsed = parseArrayOrValue(marked, dateFormat, localization);
const { mode } = this.state;
if (mode === 'year') {
return (
Expand Down
22 changes: 8 additions & 14 deletions src/inputs/DateTimeInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,10 @@ import BaseInput, {
import { tick } from '../lib';
import {
chooseValue,
getInitializer,
parseArrayOrValue,
parseValue,
TIME_FORMAT,
buildValue,
} from './parse';
import {
getDisabledMonths,
Expand Down Expand Up @@ -116,13 +116,13 @@ class DateTimeInput extends BaseInput<DateTimeInputProps, DateTimeInputState> {
* - handle underlying picker change
*/
public static readonly defaultProps = {
...BaseInput.defaultProps,
dateFormat: 'DD-MM-YYYY',
timeFormat: '24',
startMode: 'day',
divider: ' ',
icon: 'calendar',
preserveViewMode: true,
inline: false,
};

public static readonly propTypes = {
Expand Down Expand Up @@ -199,7 +199,7 @@ class DateTimeInput extends BaseInput<DateTimeInputProps, DateTimeInputState> {

constructor(props: DateTimeInputProps) {
super(props);
const parsedValue = parseValue(props.value, props.dateFormat);
const parsedValue = parseValue(props.value, props.dateFormat, props.localization);
this.state = {
mode: props.startMode,
year: parsedValue ? parsedValue.year() : undefined,
Expand Down Expand Up @@ -307,20 +307,14 @@ class DateTimeInput extends BaseInput<DateTimeInputProps, DateTimeInputState> {
closePopup: this.closePopup,
onChange: this.handleSelect,
onHeaderClick: this.switchToPrevMode,
initializeWith: getInitializer({
initialDate,
dateFormat: dateTimeFormat,
dateParams: this.getDateParams(),
localization,
}),
value: parseValue(chooseValue(value, initialDate), dateTimeFormat),
minDate: parseValue(minDate, dateFormat),
maxDate: parseValue(maxDate, dateFormat),
marked: parseArrayOrValue(marked, dateFormat),
value: buildValue(value, initialDate, localization, dateFormat),
minDate: parseValue(minDate, dateFormat, localization),
maxDate: parseValue(maxDate, dateFormat, localization),
marked: parseArrayOrValue(marked, dateFormat, localization),
markColor,
localization,
};
const disableParsed = parseArrayOrValue(disable, dateFormat);
const disableParsed = parseArrayOrValue(disable, dateFormat, localization);
const { mode } = this.state;
if (mode === 'year') {
return (
Expand Down
11 changes: 6 additions & 5 deletions src/inputs/DatesRangeInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
parseDatesRange,
parseValue,
parseArrayOrValue,
buildValue,
} from './parse';

import DatesRangePicker, {
Expand Down Expand Up @@ -44,9 +45,9 @@ class DatesRangeInput extends BaseInput<DatesRangeInputProps, BaseInputState> {
* string 'start - end')
*/
public static readonly defaultProps = {
...BaseInput.defaultProps,
dateFormat: 'DD-MM-YYYY',
icon: 'calendar',
inline: false,
};

public static readonly propTypes = {
Expand Down Expand Up @@ -154,7 +155,7 @@ class DatesRangeInput extends BaseInput<DatesRangeInputProps, BaseInputState> {
start,
end,
} = parseDatesRange(value, dateFormat);
const markedParsed = parseArrayOrValue(marked, dateFormat);
const markedParsed = parseArrayOrValue(marked, dateFormat, localization);

return (
<DatesRangePicker
Expand All @@ -165,13 +166,13 @@ class DatesRangeInput extends BaseInput<DatesRangeInputProps, BaseInputState> {
closePopup={this.closePopup}
onChange={this.handleSelect}
dateFormat={dateFormat}
initializeWith={getInitializer({ initialDate, dateFormat, localization })}
initializeWith={buildValue(start, initialDate, localization, dateFormat)}
start={start}
end={end}
marked={markedParsed}
markColor={markColor}
minDate={parseValue(minDate, dateFormat)}
maxDate={parseValue(maxDate, dateFormat)}
minDate={parseValue(minDate, dateFormat, localization)}
maxDate={parseValue(maxDate, dateFormat, localization)}
localization={localization}
onHeaderClick={() => undefined}
tabIndex={tabIndex}
Expand Down
15 changes: 7 additions & 8 deletions src/inputs/MonthInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,9 @@ import BaseInput, {
MinMaxValueProps,
} from './BaseInput';
import {
getInitializer,
parseArrayOrValue,
parseValue,
buildValue,
} from './parse';

export type MonthInputProps =
Expand All @@ -33,9 +33,9 @@ export interface MonthInputOnChangeData extends MonthInputProps {

class MonthInput extends BaseInput<MonthInputProps, BaseInputState> {
public static readonly defaultProps = {
...BaseInput.defaultProps,
dateFormat: 'MMM',
icon: 'calendar',
inline: false,
};

public static readonly propTypes = {
Expand Down Expand Up @@ -130,11 +130,11 @@ class MonthInput extends BaseInput<MonthInputProps, BaseInputState> {
const {
value,
dateFormat,
initialDate,
disable,
maxDate,
minDate,
localization,
initialDate,
} = this.props;

return (
Expand All @@ -146,11 +146,10 @@ class MonthInput extends BaseInput<MonthInputProps, BaseInputState> {
closePopup={this.closePopup}
hasHeader={false}
onChange={this.handleSelect}
initializeWith={getInitializer({ initialDate, dateFormat, localization })}
value={parseValue(value, dateFormat)}
disable={parseArrayOrValue(disable, dateFormat)}
maxDate={parseValue(maxDate, dateFormat)}
minDate={parseValue(minDate, dateFormat)}
value={buildValue(value, initialDate, localization, dateFormat)}
disable={parseArrayOrValue(disable, dateFormat, localization)}
maxDate={parseValue(maxDate, dateFormat, localization)}
minDate={parseValue(minDate, dateFormat, localization)}
localization={localization}
onHeaderClick={() => undefined}
/>
Expand Down
11 changes: 6 additions & 5 deletions src/inputs/MonthRangeInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,11 @@ import MonthRangePicker, {MonthRangePickerOnChangeData} from '../pickers/monthPi
import InputView from '../views/InputView';
import {MonthInputProps} from './MonthInput';
import {
getInitializer,
parseDatesRange,
parseValue,
buildValue,
} from './parse';
import moment = require('moment');

const DATES_SEPARATOR = ' - ';

Expand All @@ -28,9 +29,9 @@ export interface MonthRangeInputOnChangeData extends MonthInputProps {

class MonthRangeInput extends BaseInput<MonthRangeInputProps, BaseInputState> {
public static readonly defaultProps = {
...BaseInput.defaultProps,
dateFormat: 'MM-YYYY',
icon: 'calendar',
inline: false,
};

public static readonly propTypes = {
Expand Down Expand Up @@ -134,11 +135,11 @@ class MonthRangeInput extends BaseInput<MonthRangeInputProps, BaseInputState> {
closePopup={this.closePopup}
onChange={this.handleSelect}
dateFormat={dateFormat}
initializeWith={getInitializer({initialDate, dateFormat, localization})}
initializeWith={buildValue(start, initialDate, localization, dateFormat)}
start={start}
end={end}
minDate={parseValue(minDate, dateFormat)}
maxDate={parseValue(maxDate, dateFormat)}
minDate={parseValue(minDate, dateFormat, localization)}
maxDate={parseValue(maxDate, dateFormat, localization)}
localization={localization}
onHeaderClick={() => undefined}
/>
Expand Down
7 changes: 4 additions & 3 deletions src/inputs/TimeInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import {
getInitializer,
parseValue,
TIME_FORMAT,
buildValue,
} from './parse';

function getNextMode(currentMode) {
Expand Down Expand Up @@ -55,10 +56,10 @@ class TimeInput extends BaseInput<TimeInputProps, TimeInputState> {
* - handle HourPicker/MinutePicker change (format { hour: number, minute: number } into output time string)
*/
public static readonly defaultProps = {
...BaseInput.defaultProps,
icon: 'time',
timeFormat: '24',
disableMinute: false,
inline: false,
};

public static readonly propTypes = {
Expand Down Expand Up @@ -168,7 +169,7 @@ class TimeInput extends BaseInput<TimeInputProps, TimeInputState> {
pickerStyle,
pickerWidth,
} = this.props;
const currentValue = parseValue(value, TIME_FORMAT[timeFormat]);
const currentValue = parseValue(value, TIME_FORMAT[timeFormat], localization);
const pickerProps = {
inline,
onCalendarViewMount: this.onCalendarViewMount,
Expand All @@ -179,7 +180,7 @@ class TimeInput extends BaseInput<TimeInputProps, TimeInputState> {
pickerStyle,
onHeaderClick: () => undefined,
closePopup: this.closePopup,
initializeWith: getInitializer({ initialDate: currentValue, dateFormat: TIME_FORMAT[timeFormat], localization }),
initializeWith: buildValue(currentValue, null, localization, TIME_FORMAT[timeFormat]),
value: currentValue,
onChange: this.handleSelect,
timeFormat,
Expand Down
19 changes: 6 additions & 13 deletions src/inputs/YearInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@ import BaseInput, {
MinMaxValueProps,
} from './BaseInput';
import {
getInitializer,
parseArrayOrValue,
parseValue,
buildValue,
} from './parse';

export type YearInputProps =
Expand All @@ -32,8 +32,8 @@ export interface YearInputOnChangeData extends YearInputProps {

class YearInput extends BaseInput<YearInputProps, BaseInputState> {
public static readonly defaultProps = {
...BaseInput.defaultProps,
dateFormat: 'YYYY',
inline: false,
icon: 'calendar',
};

Expand Down Expand Up @@ -133,12 +133,6 @@ class YearInput extends BaseInput<YearInputProps, BaseInputState> {
dateFormat,
localization,
} = this.props;
const initializeWith = getInitializer({
dateParams: { year: parseInt(value, 10) },
initialDate,
dateFormat,
localization,
});

return (
<YearPicker
Expand All @@ -148,11 +142,10 @@ class YearInput extends BaseInput<YearInputProps, BaseInputState> {
onCalendarViewMount={this.onCalendarViewMount}
closePopup={this.closePopup}
onChange={this.handleSelect}
initializeWith={initializeWith}
value={parseValue(value, dateFormat)}
disable={parseArrayOrValue(disable, dateFormat)}
maxDate={parseValue(maxDate, dateFormat)}
minDate={parseValue(minDate, dateFormat)}
value={buildValue(value, initialDate, localization, dateFormat)}
disable={parseArrayOrValue(disable, dateFormat, localization)}
maxDate={parseValue(maxDate, dateFormat, localization)}
minDate={parseValue(minDate, dateFormat, localization)}
onHeaderClick={() => undefined}
/>
);
Expand Down
Loading

0 comments on commit c69ff0e

Please sign in to comment.