Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add possibility to define disabled days #62

Merged
merged 19 commits into from
Aug 23, 2018
Merged

Add possibility to define disabled days #62

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
c6c3eb3
Butterflies are comming
Aug 20, 2018
948ef45
GJ-1
Aug 22, 2018
dadf50b
GJ-2
Aug 22, 2018
33bee15
GJ-3
Aug 22, 2018
dc8ee26
Fix test
Aug 22, 2018
4991f4d
GJ-4
Aug 22, 2018
2353be0
GJ-5
Aug 22, 2018
1f88897
GJ-6
Aug 22, 2018
11ffcf5
Disable click on disabled month-outside days
Aug 23, 2018
03049bf
Fix date range picker captions
Aug 23, 2018
cb5c532
Fix lint
Aug 23, 2018
94ad325
Fix formatting
Aug 23, 2018
7705b0c
Upd according to review
Aug 23, 2018
c0d679b
Upd
Aug 23, 2018
ca3eaac
Upd
Aug 23, 2018
9e3cadb
Upd
Aug 23, 2018
7b9373c
Upd
Aug 23, 2018
20a9a01
Upd
Aug 23, 2018
c812492
Upd
Aug 23, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
"lint-fix": "eslint src --fix",
"start": "cross-env NODE_ENV=development && showroom-scan src && babel-node www/index",
"test": "mocha src/**/*.spec.js --compilers js:babel-register --require config/test/mocha-setup.js --require ignore-styles",
"npm-build": "rimraf lib && cross-env NODE_ENV=production WEBPACK_BUNDLE_ANALYZE=true webpack --config ./config/webpack.config.js",
"npm-build": "rimraf lib && cross-env NODE_ENV=production webpack --config ./config/webpack.config.js",
"npm-publish": "npm run npm-build && npm publish",
"publish-release": "npm run npm-publish"
},
Expand Down
4 changes: 4 additions & 0 deletions src/client/components/DateInput/DateInput.DOCUMENTATION.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ Based on configured to OpusCapita defaults [react-day-picker](https://github.com
| disabled | bool | If true - became inactive |
| isValid | bool | If false - highlight input as error |
| locale | string | `en`, `de`, etc. Days and months translations, first day of week, etc. depends on this property |
| modifiers | object | [Info](https://github.com/gpbl/react-day-picker/blob/v6.1.0/docs/docs/modifiers.md). Use `disabled` modifier to select disabled days. Check, is it using [`import { ModifiersUtils } from @opuscapita/react-dates`](https://github.com/gpbl/react-day-picker/blob/v6.1.0/docs/docs/utils-modifiers.md) |
| onBlur | func | Callback fired on input blur `(e) => {}` |
| onChange | func | Callback fired on date change `Date date => {}` |
| onFocus | func | Callback fired on input focus `(e) => {}` |
Expand Down Expand Up @@ -55,6 +56,9 @@ Based on configured to OpusCapita defaults [react-day-picker](https://github.com
onFocus={(e) => console.log('Focus!', e)}
showToLeft={true}
showToTop={true}
modifiers={{
disabled: { after: new Date() }
}}
/>
```

Expand Down
20 changes: 14 additions & 6 deletions src/client/components/DateInput/DateInput.react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ let propTypes = {
disabled: PropTypes.bool,
isValid: PropTypes.bool,
locale: PropTypes.string,
modifiers: PropTypes.object,
onBlur: PropTypes.func,
onChange: PropTypes.func,
onFocus: PropTypes.func,
Expand All @@ -41,6 +42,7 @@ let defaultProps = {
disabled: false,
isValid: true,
locale: 'en',
modifiers: {},
onBlur: () => {},
onFocus: () => {},
onChange: () => {},
Expand Down Expand Up @@ -113,11 +115,6 @@ class DateInput extends Component {
document.body.removeEventListener('keydown', this.handleBodyKeyDown);
}

handleDayClick = day => {
this.setState({ showPicker: false });
this.handleDateChange(day);
};

handleBodyClick = event => {
let clickedOutside = (
!this.container.contains(event.target) &&
Expand Down Expand Up @@ -171,9 +168,18 @@ class DateInput extends Component {

handleDateChange = value => {
this.props.onChange(zeroTime(value));
this.hidePicker();
this.setState({ error: null });
};

handleDayClick = (value, modifiers) => {
if (modifiers.disabled) {
return;
}

this.handleDateChange(value);
}

showPicker() {
let month = this.props.value || new Date();
this.reactDayPicker.showMonth(month);
Expand Down Expand Up @@ -243,8 +249,10 @@ class DateInput extends Component {
selectedDays={value}
tabIndex={-1}
fixedWeeks={true}
onChange={this.handleDateChange}
onDayClick={this.handleDayClick}
onDayKeyDown={this.handleDateChange}
onDayTouchEnd={this.handleDateChange}
onChange={this.handleDateChange}
{ ...dayPickerSpecificProps }
/>
);
Expand Down
24 changes: 14 additions & 10 deletions src/client/components/DatePicker/DatePicker.DOCUMENTATION.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,17 @@ Based on configured to OpusCapita defaults [react-day-picker](https://github.com

### Props Reference

| Name | Type | Description |
| ------------------------------ | :---------------------- | ----------------------------------------------------------- |
| className | string | Default HTML behavior |
| disabled | bool | If true - became inactive |
| locale | string | `en`, `de`, etc. Days and months translations, first day of week, etc. depends on this property |
| onChange | func | Callback fired on date change `[Date from, Date to] => {}` |
| showToLeft | bool | Show picker popup to left relative to button |
| showToTop | bool | Show picker popup to top relative to button |
| tabIndex | number | Default HTML behavior |
| value | instanceOf(Date) | Instance of `Date` |
| Name | Type | Description |
| ------------------------------ | :---------------------- | ----------------------------------------------------------- |
| className | string | Default HTML behavior |
| disabled | bool | If true - became inactive |
| locale | string | `en`, `de`, etc. Days and months translations, first day of week, etc. depends on this property |
| modifiers | object | [Info](https://github.com/gpbl/react-day-picker/blob/v6.1.0/docs/docs/modifiers.md). Use `disabled` modifier to select disabled days. Check, is it using [`import { ModifiersUtils } from @opuscapita/react-dates`](https://github.com/gpbl/react-day-picker/blob/v6.1.0/docs/docs/utils-modifiers.md) |
| onChange | func | Callback fired on date change `[Date from, Date to] => {}` |
| showToLeft | bool | Show picker popup to left relative to button |
| showToTop | bool | Show picker popup to top relative to button |
| tabIndex | number | Default HTML behavior |
| value | instanceOf(Date) | Instance of `Date` |

***

Expand All @@ -35,6 +36,9 @@ See react-day-picker [methods reference](http://react-day-picker.js.org/APIMetho
locale="de"
onChange={_scope.handleChange.bind(_scope)}
value={_scope.state.value}
modifiers={{
disabled: { after: new Date() }
}}
/>
</div>

Expand Down
12 changes: 9 additions & 3 deletions src/client/components/DatePicker/DatePicker.react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ let propTypes = {
className: PropTypes.string,
disabled: PropTypes.bool,
locale: PropTypes.string,
modifiers: PropTypes.object,
onChange: PropTypes.func,
showToLeft: PropTypes.bool,
showToTop: PropTypes.bool,
Expand All @@ -25,6 +26,7 @@ let defaultProps = {
className: '',
disabled: false,
locale: 'en',
modifiers: {},
onChange: () => {},
showToLeft: false,
showToTop: false,
Expand Down Expand Up @@ -68,9 +70,13 @@ class DatePicker extends Component {
this.hidePicker();
};

handleDayClick = day => {
this.handleDateChange(day);
this.setState({ showPicker: false });
handleDayClick = (value, modifiers) => {
if (modifiers.disabled) {
return;
}

this.handleDateChange(value);
this.hidePicker();
};

handleToggleClick = () => {
Expand Down
43 changes: 28 additions & 15 deletions src/client/components/DateRangeInput/DateRangeInput.DOCUMENTATION.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,22 @@ Allows select date range using mouse.

### Props Reference

| Name | Type | Description |
| ------------------------------ | :---------------------- | ----------------------------------------------------------- |
| className | string | Default behavior |
| dateFormat | string | `dd/MM/yyyy`, `MM.dd.yyyy`, etc. |
| disabled | bool | If true - became inactive |
| isValid | bool | If false - highlight input as error |
| locale | string | `en`, `de`, etc. Days and months translations, first day of week, etc. depends on this property |
| onFocus | func | Callback fired on input focus `(e, inputName) => {}` where `inputName === 'from |
| onBlur | func | Callback fired on input blur `(e, inputName) => {}` where `inputName === 'from |
| onChange | func | Callback fired on date change `[Date from, Date to] => {}` |
| showToLeft | bool | Show picker popup to left relative to input |
| showToTop | bool | Show picker popup to top relative to input |
| tabIndex | number | Default behavior |
| value | array | `[Date from, Date to]` |
| variants | array | `[ { getLabel: (locale) => string, getRange: (locale) => [ from<Date>, to<Date>] } ]` List of pre-defined date-ranges. Examples: current month, last week, next week, etc. |
| Name | Type | Description |
| ------------------------------ | :---------------------- | ----------------------------------------------------------- |
| className | string | Default behavior |
| dateFormat | string | `dd/MM/yyyy`, `MM.dd.yyyy`, etc. |
| disabled | bool | If true - became inactive |
| isValid | bool | If false - highlight input as error |
| locale | string | `en`, `de`, etc. Days and months translations, first day of week, etc. depends on this property |
| modifiers | object | [Info](https://github.com/gpbl/react-day-picker/blob/v6.1.0/docs/docs/modifiers.md). Use `disabled` modifier to select disabled days. Check, is it using [`import { ModifiersUtils } from @opuscapita/react-dates`](https://github.com/gpbl/react-day-picker/blob/v6.1.0/docs/docs/utils-modifiers.md) |
| onFocus | func | Callback fired on input focus `(e, inputName) => {}` where `inputName === 'from |
| onBlur | func | Callback fired on input blur `(e, inputName) => {}` where `inputName === 'from |
| onChange | func | Callback fired on date change `[Date from, Date to] => {}` |
| showToLeft | bool | Show picker popup to left relative to input |
| showToTop | bool | Show picker popup to top relative to input |
| tabIndex | number | Default behavior |
| value | array | `[Date from, Date to]` |
| variants | array | `[ { getLabel: (locale) => string, getRange: (locale) => [ from<Date>, to<Date>] } ]` List of pre-defined date-ranges. Examples: current month, last week, next week, etc. |

### Code Example

Expand All @@ -41,6 +42,18 @@ Allows select date range using mouse.
onChange={_scope.handleChange3.bind(_scope)}
value={_scope.state.value2}
/>

<hr />

<DateRangeInput
dateFormat="dd.MM.yyyy"
locale={'de'}
onChange={_scope.handleChange1.bind(_scope)}
value={_scope.state.value1}
modifiers={{
disabled: { after: new Date() }
}}
/>
```

### Component Name
Expand Down
11 changes: 8 additions & 3 deletions src/client/components/DateRangeInput/DateRangeInput.react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ let propTypes = {
disabled: PropTypes.bool,
isValid: PropTypes.bool,
locale: PropTypes.string,
modifiers: PropTypes.object,
onBlur: PropTypes.func,
onChange: PropTypes.func,
onFocus: PropTypes.func,
Expand All @@ -55,6 +56,7 @@ let defaultProps = {
disabled: false,
isValid: true,
locale: 'en',
modifiers: {},
onBlur: () => {},
onChange: () => {},
onFocus: () => {},
Expand Down Expand Up @@ -198,7 +200,11 @@ class DateRangeInput extends Component {
this.props.onChange(normalizedRange);
};

handleDayClick = dayValue => {
handleDayClick = (dayValue, modifiers) => {
if (modifiers.disabled) {
return;
}

const day = zeroTime(dayValue);

let from = this.props.value[0];
Expand Down Expand Up @@ -352,12 +358,11 @@ class DateRangeInput extends Component {
let pickerElement = (
<DayPicker
className="Range"
disabledDays={{ before: from }}
fixedWeeks={true}
month={from}
hideTodayButton={true}
locale={locale}
modifiers={ { start: from, end: enteredTo || to }}
modifiers={{ start: from, end: enteredTo || to }}
numberOfMonths={2}
isRange={true}
onChange={this.handleRangeChange}
Expand Down
Loading