@cimpress/react-components
Version:
React components to support the MCP styleguide
64 lines • 3.46 kB
JavaScript
import React, { Component } from 'react';
import { Checkbox, DatePicker } from '@cimpress/react-components';
import moment from 'moment';
const yesterday = moment().subtract(1, 'day');
export default class DatePickerDemo extends Component {
constructor() {
super(...arguments);
Object.defineProperty(this, "state", {
enumerable: true,
configurable: true,
writable: true,
value: {
dateValue1: '',
dateValue2: '2020-10-25',
dateValue3: '2010-01-25',
dateValue4: '',
input: true,
}
});
Object.defineProperty(this, "onChangeShowAsInput", {
enumerable: true,
configurable: true,
writable: true,
value: () => {
const previousShowInput = this.state.input;
this.setState({ input: !previousShowInput });
}
});
}
render() {
const { input } = this.state;
return (React.createElement(React.Fragment, null,
React.createElement("div", { className: "row" },
React.createElement("div", { className: "col-xs-4" },
"Uncontrolled",
React.createElement(DatePicker, { placeholder: "Select a date", onChange: d => this.setState({ dateValue1: d }) }),
"Selected: ",
this.state.dateValue1 ? this.state.dateValue1.toISOString() : 'n/a',
React.createElement("br", null),
React.createElement("br", null)),
React.createElement("div", { className: "col-xs-4" },
"Controlled",
React.createElement(DatePicker, { placeholder: "Select a date", value: this.state.dateValue2, onChange: d => {
this.setState({ dateValue2: d });
} }))),
React.createElement("div", { className: "row" },
React.createElement("div", { className: "col-xs-4" },
"With label, help text & clearable",
React.createElement(DatePicker, { label: "Select a date", dateFormat: "Y-MM-DD", helpText: "Very important help text below", value: this.state.dateValue3, closeOnClickOutside: true, closeOnSelect: true, isClearable: true, onChange: d => {
this.setState({ dateValue3: d });
} }))),
React.createElement("div", { className: "row" },
React.createElement("div", { className: "col-xs-4" },
"With date validation",
React.createElement(DatePicker, { label: "Select a date", dateFormat: "Y-MM-DD", value: this.state.dateValue4, closeOnClickOutside: true, closeOnSelect: true, isClearable: true, onChange: d => {
this.setState({ dateValue4: d });
}, isValidDate: date => date.isAfter(yesterday) }))),
React.createElement("div", { className: "row" },
React.createElement("div", { className: "col-xs-4" },
React.createElement(Checkbox, { checked: input, label: "Display the picker with an input field", onChange: this.onChangeShowAsInput }),
React.createElement(DatePicker, { input: input, placeholder: "Select a date" })))));
}
}
//# sourceMappingURL=datePicker.js.map