@cimpress/react-components
Version:
React components to support the MCP styleguide
90 lines • 5.17 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React, { useEffect, useState } from 'react';
import DateTimeField from 'react-datetime';
import { css, cx } from '@emotion/css';
import moment from 'moment';
import { useMemoizedId } from '../utils';
import { persimmon } from '../colors';
import * as styles from './styles';
import { Calendar } from '../internal/Calendar';
import { BlockButton, Close } from '../internal';
import { useFeatureFlags } from '../FeatureFlags';
const MDY_DATE_FORMAT = 'Y-MM-DD';
const TIME_FORMAT = 'HH:mm zz';
const noOuterMarginCss = css `
margin-bottom: 0;
`;
export function DatePicker(_a) {
var { readonly, placeholder, value: valueProp, helpText, disabled, input = true, label, required, onClickInput, initialValue, initialViewDate, initialViewMode, onNavigate, closeOnClickOutside, closeOnSelect = true, onOpen, onClose, className = '', style, isClearable, onChange, dateFormat = MDY_DATE_FORMAT, timeFormat = TIME_FORMAT } = _a, rest = __rest(_a, ["readonly", "placeholder", "value", "helpText", "disabled", "input", "label", "required", "onClickInput", "initialValue", "initialViewDate", "initialViewMode", "onNavigate", "closeOnClickOutside", "closeOnSelect", "onOpen", "onClose", "className", "style", "isClearable", "onChange", "dateFormat", "timeFormat"]);
const id = useMemoizedId({ label: 'datepicker' });
const [localValue, setLocalValue] = useState('');
const value = valueProp !== undefined ? valueProp : localValue;
const [shouldFloat, setShouldFloat] = useState(!!initialValue || !!value);
useEffect(() => {
setShouldFloat(!!value);
}, [value]);
const getFormat = () => (dateFormat && timeFormat ? `${dateFormat} ${timeFormat}` : dateFormat || timeFormat);
const { v17_noOuterSpacing } = useFeatureFlags();
const wrapperClassNames = cx(styles.timeToggle, styles.datetime, styles.formGroup, styles.datePicker, v17_noOuterSpacing && noOuterMarginCss, {
[styles.formGroupActive]: shouldFloat,
'datepicker--disabled': disabled,
});
return (React.createElement("div", { className: `${wrapperClassNames} ${className}`, style: style },
input ? (React.createElement("label", { htmlFor: id, style: {
pointerEvents: 'none',
wordWrap: 'break-word',
width: '80%',
}, className: cx(styles.controlLabel), title: placeholder || label },
placeholder || label,
required ? React.createElement("span", { style: { color: persimmon.base } }, " *") : '')) : null,
React.createElement(DateTimeField, Object.assign({ dateFormat: dateFormat, timeFormat: timeFormat, input: input, inputProps: {
id,
readOnly: true,
disabled,
required,
onClick: onClickInput,
style: { width: style === null || style === void 0 ? void 0 : style.width },
}, renderInput: inputProps => {
var _a;
const formattedValue = value ? moment(value).format((_a = getFormat()) === null || _a === void 0 ? void 0 : _a.toString()) : '';
return React.createElement("input", Object.assign({}, inputProps, { value: formattedValue }));
}, onClose: () => {
setShouldFloat(!!value);
const onCloseHandler = onClose;
if (onCloseHandler) {
onCloseHandler();
}
}, onOpen: () => {
setShouldFloat(true);
const onOpenHandler = onOpen;
if (onOpenHandler) {
onOpenHandler();
}
}, initialValue: initialValue, value: valueProp, initialViewDate: initialViewDate, initialViewMode: initialViewMode, closeOnSelect: closeOnSelect, closeOnClickOutside: closeOnClickOutside, onNavigate: onNavigate, onChange: d => {
if (onChange) {
onChange(d);
}
setLocalValue(d);
} }, rest)),
input ? React.createElement(Calendar, { className: cx(styles.datetime, styles.calendarIconStyle), "aria-hidden": "true" }) : null,
input && value && isClearable ? (React.createElement(BlockButton, { className: styles.clearIconStyle, onClick: e => {
if (onChange) {
onChange('');
setLocalValue('');
e.stopPropagation();
}
} },
React.createElement(Close, { width: "16px" }))) : null,
helpText && input ? React.createElement("small", { className: "help-block" }, helpText) : null));
}
//# sourceMappingURL=DatePicker.js.map