@cimpress/react-components
Version:
React components to support the MCP styleguide
93 lines • 5.08 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const react_components_1 = require("@cimpress/react-components");
const moment_1 = __importDefault(require("moment"));
const yesterday = (0, moment_1.default)().subtract(1, 'day');
class DatePickerDemo extends react_1.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_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { className: "row" },
react_1.default.createElement("div", { className: "col-xs-4" },
"Uncontrolled",
react_1.default.createElement(react_components_1.DatePicker, { placeholder: "Select a date", onChange: d => this.setState({ dateValue1: d }) }),
"Selected: ",
this.state.dateValue1 ? this.state.dateValue1.toISOString() : 'n/a',
react_1.default.createElement("br", null),
react_1.default.createElement("br", null)),
react_1.default.createElement("div", { className: "col-xs-4" },
"Controlled",
react_1.default.createElement(react_components_1.DatePicker, { placeholder: "Select a date", value: this.state.dateValue2, onChange: d => {
this.setState({ dateValue2: d });
} }))),
react_1.default.createElement("div", { className: "row" },
react_1.default.createElement("div", { className: "col-xs-4" },
"With label, help text & clearable",
react_1.default.createElement(react_components_1.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_1.default.createElement("div", { className: "row" },
react_1.default.createElement("div", { className: "col-xs-4" },
"With date validation",
react_1.default.createElement(react_components_1.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_1.default.createElement("div", { className: "row" },
react_1.default.createElement("div", { className: "col-xs-4" },
react_1.default.createElement(react_components_1.Checkbox, { checked: input, label: "Display the picker with an input field", onChange: this.onChangeShowAsInput }),
react_1.default.createElement(react_components_1.DatePicker, { input: input, placeholder: "Select a date" })))));
}
}
exports.default = DatePickerDemo;
//# sourceMappingURL=datePicker.js.map