@onesy/ui-react
Version:
UI for React
682 lines (662 loc) • 27.5 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _utils = require("@onesy/utils");
var _styleReact = require("@onesy/style-react");
var _date = require("@onesy/date");
var _IconMaterialDateRangeW100Filled = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialDateRangeW100Filled"));
var _IconMaterialCalendarTodayW100Filled = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialCalendarTodayW100Filled"));
var _IconMaterialScheduleW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialScheduleW100"));
var _AdvancedTextField = _interopRequireDefault(require("../AdvancedTextField"));
var _Modal = _interopRequireDefault(require("../Modal"));
var _Tooltip = _interopRequireDefault(require("../Tooltip"));
var _Slide = _interopRequireDefault(require("../Slide"));
var _Surface = _interopRequireDefault(require("../Surface"));
var _IconButton = _interopRequireDefault(require("../IconButton"));
var _Line = _interopRequireDefault(require("../Line"));
var _Type = _interopRequireDefault(require("../Type"));
var _Button = _interopRequireDefault(require("../Button"));
var _DatePicker = _interopRequireDefault(require("../DatePicker"));
var _TimePicker = _interopRequireDefault(require("../TimePicker"));
var _ClickListener = _interopRequireDefault(require("../ClickListener"));
var _useMediaQuery = _interopRequireDefault(require("../useMediaQuery"));
var _DatePicker2 = require("../DatePicker/DatePicker");
var _utils2 = require("../utils");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["ref", "tonal", "color", "version", "value", "valueDefault", "onChange", "label", "range", "now", "static", "min", "max", "validate", "headingText", "headingTextTime", "headingTextTimeRange", "headingTextDate", "headingTextDateRange", "useHelperText", "format", "hour", "minute", "second", "today", "clear", "size", "placeholder", "fullWidth", "readOnly", "disabled", "valid", "onClose", "onToday", "onClear", "onCancel", "onOk", "Icon", "IconDate", "IconTime", "WrapperProps", "ModalProps", "TooltipProps", "AdvancedTextFieldProps", "DatePickerProps", "TimePickerProps", "IconButtonProps", "ModeDesktopProps", "ModeMobileProps", "ButtonProps", "PickerProps", "MiddleProps", "MainProps", "IconProps", "className"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
const useStyle = (0, _styleReact.style)(theme => ({
root: {},
main: {
marginInline: '24px',
borderRadius: theme.methods.shape.radius.value(3.5, 'px')
},
heading: {
width: '100%',
padding: `${theme.methods.space.value(3, 'px')} ${theme.methods.space.value(3, 'px')} 0`
},
middle: {
width: '100%',
'& .onesy-DatePicker-root, & .onesy-TimePicker-root, & .onesy-TimePicker-main': {
margin: '0px'
}
},
footer: {
width: '100%',
padding: `0px ${theme.methods.space.value(1, 'px')} ${theme.methods.space.value(1.5, 'px')} ${theme.methods.space.value(1.5, 'px')}`
}
}), {
name: 'onesy-DateTimePicker'
});
const DateTimePicker = props__ => {
var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6, _theme$elements7, _theme$elements8, _theme$elements9, _theme$elements0, _theme$elements1, _theme$elements10;
const theme = (0, _styleReact.useOnesyTheme)();
const l = theme.l;
const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyDateTimePicker) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props__);
const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
const AdvancedTextField = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.AdvancedTextField) || _AdvancedTextField.default;
const Modal = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Modal) || _Modal.default;
const Tooltip = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Tooltip) || _Tooltip.default;
const Slide = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Slide) || _Slide.default;
const Surface = (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.Surface) || _Surface.default;
const IconButton = (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.IconButton) || _IconButton.default;
const Type = (theme === null || theme === void 0 || (_theme$elements8 = theme.elements) === null || _theme$elements8 === void 0 ? void 0 : _theme$elements8.Type) || _Type.default;
const Button = (theme === null || theme === void 0 || (_theme$elements9 = theme.elements) === null || _theme$elements9 === void 0 ? void 0 : _theme$elements9.Button) || _Button.default;
const DatePicker = (theme === null || theme === void 0 || (_theme$elements0 = theme.elements) === null || _theme$elements0 === void 0 ? void 0 : _theme$elements0.DatePicker) || _DatePicker.default;
const TimePicker = (theme === null || theme === void 0 || (_theme$elements1 = theme.elements) === null || _theme$elements1 === void 0 ? void 0 : _theme$elements1.TimePicker) || _TimePicker.default;
const ClickListener = (theme === null || theme === void 0 || (_theme$elements10 = theme.elements) === null || _theme$elements10 === void 0 ? void 0 : _theme$elements10.ClickListener) || _ClickListener.default;
const {
ref,
tonal = true,
color = 'primary',
version: version_ = 'auto',
value: value_,
valueDefault,
onChange,
label,
range,
now,
static: static_,
min,
max,
validate,
headingText = l('Select date & time'),
headingTextTime,
headingTextTimeRange,
headingTextDate,
headingTextDateRange,
useHelperText: useHelperText_,
format = '12',
hour = true,
minute = true,
second = false,
today,
clear = true,
size,
placeholder: placeholder_,
fullWidth,
readOnly,
disabled,
valid: valid_,
onClose: onClose_,
onToday: onToday_,
onClear: onClear_,
onCancel: onCancel_,
onOk: onOk_,
Icon: Icon_ = _IconMaterialDateRangeW100Filled.default,
IconDate = _IconMaterialCalendarTodayW100Filled.default,
IconTime = _IconMaterialScheduleW.default,
WrapperProps,
ModalProps,
TooltipProps,
AdvancedTextFieldProps,
DatePickerProps,
TimePickerProps,
IconButtonProps,
ModeDesktopProps,
ModeMobileProps,
ButtonProps,
PickerProps: PickerProps_,
MiddleProps,
MainProps,
IconProps,
className
} = props,
other = (0, _objectWithoutProperties2.default)(props, _excluded);
const {
classes
} = useStyle();
const refs = {
root: _react.default.useRef(undefined),
value: _react.default.useRef(undefined)
};
const keys = _react.default.useMemo(() => {
const result = [];
const items = [useHelperText_];
items.forEach(item => {
if ((0, _utils.is)('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key_0 => result.push(key_0));
});
return (0, _utils.unique)(result);
}, [useHelperText_]);
const breakpoints = {};
keys.forEach(key_1 => {
breakpoints[key_1] = (0, _useMediaQuery.default)(theme.breakpoints.media[key_1], {
element: refs.root.current
});
});
const useHelperText = (0, _utils2.valueBreakpoints)(useHelperText_, undefined, breakpoints, theme);
const touch = (0, _useMediaQuery.default)('(pointer: coarse)', {
element: refs.root.current
});
const onResolveValue = valueNew => {
const array = ((0, _utils.is)('array', valueNew) ? valueNew : [valueNew]).filter(Boolean);
const sorted = array.sort((a, b) => (a === null || a === void 0 ? void 0 : a.milliseconds) - (b === null || b === void 0 ? void 0 : b.milliseconds));
return sorted;
};
const [value, setValue] = _react.default.useState(() => {
const valueResult = (valueDefault !== undefined ? valueDefault : value_) || now && (range ? [new _date.OnesyDate(), new _date.OnesyDate()] : [new _date.OnesyDate()]);
return onResolveValue(valueResult);
});
const [calendar, setCalendar] = _react.default.useState(value[0]);
const [open, setOpen] = _react.default.useState(false);
const [error, setError] = _react.default.useState(false);
const [tab, setTab] = _react.default.useState('date');
refs.value.current = value;
const valueToInput = (valueNew_0 = refs.value.current) => {
let result_0 = '';
const [from, to] = valueNew_0;
if (!(from || to)) return '';
const method = item_0 => {
let formatValue = `${(0, _date.format)(item_0, 'DD')}/${(0, _date.format)(item_0, 'MM')}/${(0, _date.format)(item_0, 'YYYY')}`;
formatValue += ' ';
if (hour) {
if (format === '12') formatValue += `hh`;else formatValue += `HH`;
if (minute || second) formatValue += `:`;
}
if (minute) {
formatValue += `mm`;
if (second) formatValue += `:`;
}
if (second) formatValue += `ss`;
if (format === '12') formatValue += ` a`;
return (0, _date.format)(item_0, formatValue);
};
result_0 += `${method(from)}`;
if (range && to) result_0 += `${_DatePicker2.SEPARATOR}${method(to)}`;
return result_0;
};
const [input, setInput] = _react.default.useState(valueToInput());
let version = version_;
if (version === 'auto') {
if (touch) version = 'mobile';else version = 'desktop';
}
const onUpdateValue = valueNew_ => {
const valueNew_1 = onResolveValue(valueNew_);
setValue(valueNew_1);
// Update input
setInput(valueToInput(valueNew_1));
};
const errorCheck = (valueNew_2 = value) => {
// Error
setError((valueNew_2 || []).some((item_1, index) => !valid(item_1)));
};
// Init
_react.default.useEffect(() => {
// Error
errorCheck();
}, []);
// Value
_react.default.useEffect(() => {
if (value_ !== undefined && value_ !== value) onUpdateValue(value_);
}, [value_]);
const onUpdate = valueNew_3 => {
// Inner update
if (!props.hasOwnProperty('value')) setValue(valueNew_3);
if ((0, _utils.is)('function', onChange)) onChange(!range ? valueNew_3[0] : valueNew_3);
};
const onPickSwitch = () => {
setTab(previous => previous === 'date' ? 'time' : 'date');
};
// Update only internally, without using onChange
// since it might be canceled
// only use onChange on
// input change, or ok
const onPickerChange = valueNew__0 => {
const valueNew_4 = onResolveValue(valueNew__0);
if (valueNew_4 !== value) setValue(valueNew_4);
};
const onChangeCalendar = valueNew_5 => {
if (valueNew_5 !== calendar) setCalendar(valueNew_5);
};
const textToOnesyDate = valueNew_6 => {
const [date, ...valueOther] = valueNew_6.split(' ');
const time = valueOther.join(' ');
const [valueDay, valueMonth, valueYear] = (date || '').split('/');
const [times, dayTime] = (time || '').split(' ');
const valuesTime = times.split(':');
let valueTime;
let onesyDate = new _date.OnesyDate();
onesyDate = new _date.OnesyDate(new Date(`${valueMonth}/${valueDay}/${valueYear}`));
if (hour) {
valueTime = valuesTime[0];
if ((0, _utils.is)('string', valueTime) && valueTime.startsWith('0')) valueTime = valueTime.slice(1);
valueTime = +valueTime;
onesyDate = (0, _date.set)(format === '12' && dayTime === 'pm' ? valueTime + 12 : valueTime, 'hour', onesyDate);
}
if (minute) {
valueTime = valuesTime[!hour ? 0 : 1];
if ((0, _utils.is)('string', valueTime) && valueTime.startsWith('0')) valueTime = valueTime.slice(1);
valueTime = +valueTime;
onesyDate = (0, _date.set)(valueTime, 'minute', onesyDate);
}
if (second) {
valueTime = valuesTime[!(hour && minute) ? 0 : !hour ? 1 : 2];
if ((0, _utils.is)('string', valueTime) && valueTime.startsWith('0')) valueTime = valueTime.slice(1);
valueTime = +valueTime;
onesyDate = (0, _date.set)(valueTime, 'second', onesyDate);
}
return onesyDate;
};
const inputToValue = (valueNew__1 = input) => {
let valueNew_7 = valueNew__1;
let [from_0, to_0] = valueNew_7.split(_DatePicker2.SEPARATOR);
from_0 = textToOnesyDate(from_0);
if (to_0) to_0 = textToOnesyDate(to_0);
valueNew_7 = [from_0, to_0].filter(Boolean);
return valueNew_7;
};
const onInputChange = valueNew__2 => {
const valueNew_8 = inputToValue(valueNew__2);
const validValues = valueNew_8.every(item_2 => item_2.valid);
// Only update values if input is valid
// format used to make the value
if (validValues) {
// Error
errorCheck(valueNew_8);
// Update value
onUpdate(valueNew_8);
// Update calendar
setCalendar(valueNew_8[0]);
}
if (!valueNew__2) {
onUpdate([null, null]);
}
// Update input for free typing
setInput(valueNew__2);
};
const onReset = () => {
var _valueNew_;
let valueNew_9 = inputToValue();
const isValid = valueNew_9 && ((_valueNew_ = valueNew_9) === null || _valueNew_ === void 0 || (_valueNew_ = _valueNew_[0]) === null || _valueNew_ === void 0 ? void 0 : _valueNew_.valid);
if (isValid) {
// Update value
onUpdate(valueNew_9);
} else {
valueNew_9 = [];
// Update value
onUpdate(valueNew_9);
// Update input
setInput(valueToInput(valueNew_9));
}
};
const onToday = event => {
const valueNew_10 = [new _date.OnesyDate()];
if (range) valueNew_10.push(new _date.OnesyDate());
// Update value
onUpdate(valueNew_10);
// Update input
setInput(valueToInput(valueNew_10));
onClose(event);
if ((0, _utils.is)('function', onToday_)) onToday_(event);
};
const onClear = event_0 => {
const valueNew_11 = [];
// Update value
onUpdate(valueNew_11);
// Update input
setInput(valueToInput(valueNew_11));
onClose(event_0);
if ((0, _utils.is)('function', onClear_)) onClear_(event_0);
};
const onOk = event_1 => {
// Error
errorCheck();
// Update value
onUpdate(value);
// Update input
setInput(valueToInput(value));
onClose(event_1);
if ((0, _utils.is)('function', onOk_)) onOk_(event_1);
};
const onCancel = event_2 => {
onReset();
onClose(event_2);
if ((0, _utils.is)('function', onCancel_)) onCancel_(event_2);
};
const onOpen = () => {
setOpen(previous_0 => !previous_0);
};
const onClose = event_3 => {
setOpen(false);
if ((0, _utils.is)('function', onClose_)) onClose_(event_3);
};
const valid = (...args) => {
if ((0, _utils.is)('function', valid_)) return valid_(...args);
const onesyDate_0 = args[0];
if (min || max || validate) {
let response = true;
if ((0, _utils.is)('function', validate)) response = validate(onesyDate_0);
if (min !== undefined) response = response && (0, _date.is)(onesyDate_0, 'after or same', min);
if (max !== undefined) response = response && (0, _date.is)(onesyDate_0, 'before or same', max);
return response;
}
return true;
};
const mask = [{
pattern: '[0-3]'
}, (item_3, result_1, valueInput) => /^(0[0-9]|1[0-9]|2[0-9]|3[0-1]).*/.test(valueInput), '/', {
pattern: '[0-1]'
}, (item_4, result_2, valueInput_0) => /^(0[0-9]|1[0-9]|2[0-9]|3[0-1])\/(0[0-9]|1[0-2]).*/.test(valueInput_0), '/', {
pattern: '[1-2]'
}, {
pattern: '[0-9]'
}, {
pattern: '[0-9]'
}, {
pattern: '[0-9]'
}, ' '];
let placeholder = `DD/MM/YYYY `;
if (hour) {
if (format === '12') {
mask.push({
pattern: '[0-1]'
}, (item_5, result_3, valueInput_1) => /^[^ ]+ ([0][0-9]|1[0-2]).*/.test(valueInput_1));
}
if (format === '24') {
mask.push({
pattern: '[0-2]'
}, (item_6, result_4, valueInput_2) => /^[^ ]+ ([01][0-9]|2[0-3]).*/.test(valueInput_2));
}
placeholder += 'hh';
if (minute || second) {
mask.push(':');
placeholder += ':';
}
}
if (minute) {
mask.push({
pattern: '[0-5]'
}, {
pattern: '[0-9]'
});
placeholder += 'mm';
if (second) {
mask.push(':');
placeholder += ':';
}
}
if (second) {
mask.push({
pattern: '[0-5]'
}, {
pattern: '[0-9]'
});
placeholder += 'ss';
}
if (format === '12') {
mask.push(' ', {
pattern: '[ap]'
}, 'm');
placeholder += ' (a|p)m';
}
// range
if (range) {
mask.push(' ', _DatePicker2.SEPARATOR_SYMBOL, ' ');
// Date
mask.push({
pattern: '[0-3]'
}, (item_7, result_5, valueInput_3) => /^[^–]+– (0[0-9]|1[0-9]|2[0-9]|3[0-1]).*/.test(valueInput_3), '/', {
pattern: '[0-1]'
}, (item_8, result_6, valueInput_4) => /^[^–]+– (0[0-9]|1[0-9]|2[0-9]|3[0-1])\/(0[0-9]|1[0-2]).*/.test(valueInput_4), '/', {
pattern: '[1-2]'
}, {
pattern: '[0-9]'
}, {
pattern: '[0-9]'
}, {
pattern: '[0-9]'
}, ' ');
// Time
if (hour) {
if (format === '12') {
mask.push({
pattern: '[0-1]'
}, (item_9, result_7, valueInput_5) => /^[^–]+– (0[0-9]|1[0-9]|2[0-9]|3[0-1])\/(0[0-9]|1[0-2])\/[1-2][0-9][0-9][0-9] ([0][0-9]|1[0-2]).*/.test(valueInput_5));
}
if (format === '24') {
mask.push({
pattern: '[0-2]'
}, (item_10, result_8, valueInput_6) => /^[^–]+– (0[0-9]|1[0-9]|2[0-9]|3[0-1])\/(0[0-9]|1[0-2])\/[1-2][0-9][0-9][0-9] ([01][0-9]|2[0-3]).*/.test(valueInput_6));
}
if (minute || second) {
mask.push(':');
}
}
if (minute) {
mask.push({
pattern: '[0-5]'
}, {
pattern: '[0-9]'
});
if (second) {
mask.push(':');
}
}
if (second) {
mask.push({
pattern: '[0-5]'
}, {
pattern: '[0-9]'
});
}
if (format === '12') {
mask.push(' ', {
pattern: '[ap]'
}, 'm');
}
if (second) {
mask.push({
pattern: '[0-5]'
}, {
pattern: '[0-9]'
});
}
if (format === '12') {
mask.push(' ', {
pattern: '[ap]'
}, 'm');
}
placeholder += `${_DatePicker2.SEPARATOR}${placeholder}`;
}
placeholder = placeholder_ || placeholder;
const buttonProps = _objectSpread({
tonal,
color,
version: 'text',
size
}, ButtonProps);
const iconButtonProps = _objectSpread({
size
}, IconButtonProps);
const actions = /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
direction: "row",
wrap: "wrap",
align: "center",
justify: "space-between",
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TimePicker', theme) && ['onesy-TimePicker-footer'], classes.footer]),
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 0,
direction: "row",
align: "center",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, {
name: tab === 'date' ? l('Time') : l('Date'),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
tonal: tonal,
color: "inherit",
onClick: onPickSwitch,
"aria-label": tab === 'date' ? l('Time') : l('Date')
}, iconButtonProps), {}, {
children: tab === 'date' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(IconTime, _objectSpread({}, IconProps)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(IconDate, _objectSpread({}, IconProps))
}))
}), today && /*#__PURE__*/(0, _jsxRuntime.jsx)(Button, _objectSpread(_objectSpread({
onClick: onToday
}, buttonProps), {}, {
children: l('Today')
})), clear && /*#__PURE__*/(0, _jsxRuntime.jsx)(Button, _objectSpread(_objectSpread({
onClick: onClear
}, buttonProps), {}, {
children: l('Clear')
}))]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 0,
direction: "row",
align: "center",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Button, _objectSpread(_objectSpread({
tonal: tonal,
color: color,
version: "text",
onClick: onCancel
}, buttonProps), {}, {
children: l('Cancel')
})), /*#__PURE__*/(0, _jsxRuntime.jsx)(Button, _objectSpread(_objectSpread({
tonal: tonal,
color: color,
version: "text",
onClick: onOk
}, buttonProps), {}, {
children: l('Ok')
}))]
})]
});
const heading = (range ? tab === 'date' ? headingTextDateRange : headingTextTimeRange : tab === 'date' ? headingTextDate : headingTextTime) || headingText;
const PickerProps = _objectSpread(_objectSpread(_objectSpread({
value,
onChange: onPickerChange,
now,
static: true,
range,
valid,
min,
max,
validate,
actions: false,
heading: false,
readOnly,
disabled
}, PickerProps_), tab === 'date' && DatePickerProps), tab === 'time' && TimePickerProps);
const element = /*#__PURE__*/(0, _jsxRuntime.jsxs)(Surface, {
gap: 0,
direction: "column",
align: "center",
Component: Line,
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('DateTimePicker', theme) && ['onesy-DateTimePicker-main'], MainProps === null || MainProps === void 0 ? void 0 : MainProps.className, classes.main]),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
version: "l2",
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TimePicker', theme) && ['onesy-TimePicker-heading'], classes.heading]),
children: heading
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
gap: 0,
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TimePicker', theme) && ['onesy-TimePicker-middle'], MiddleProps === null || MiddleProps === void 0 ? void 0 : MiddleProps.className, classes.middle]),
children: tab === 'date' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(DatePicker, _objectSpread({
calendar: calendar,
onChangeCalendar: onChangeCalendar,
size: size
}, PickerProps)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(TimePicker, _objectSpread({
format: format,
hour: hour,
minute: minute,
second: second,
size: size
}, PickerProps))
}), actions]
});
const moreProps = {};
if (version === 'desktop') {
moreProps.end = /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
tonal: tonal,
color: color,
version: "text",
onClick: onOpen,
"aria-label": l('Choose date and time'),
disabled: disabled || readOnly
}, iconButtonProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon_, _objectSpread({}, IconProps))
}));
}
if (version === 'mobile') {
if (!(readOnly || disabled)) moreProps.onClick = onOpen;
}
if (static_) return element;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
gap: 0,
direction: "column",
fullWidth: fullWidth
}, WrapperProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('DateTimePicker', theme) && ['onesy-DateTimePicker-root', `onesy-DateTimePicker-version-${version}`, `onesy-DateTimePicker-size-${size}`, WrapperProps === null || WrapperProps === void 0 ? void 0 : WrapperProps.className, range && `onesy-DateTimePicker-range`, readOnly && `onesy-DateTimePicker-read-only`, disabled && `onesy-DateTimePicker-disabled`, fullWidth && 'onesy-full-width'], className, classes.root]),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AdvancedTextField, _objectSpread(_objectSpread(_objectSpread({
rootRef: item_11 => {
if (ref) {
if ((0, _utils.is)('function', ref)) ref(item_11);else ref.current = item_11;
}
refs.root.current = item_11;
},
tonal: tonal,
color: color,
version: "outlined",
name: label,
mask: mask,
placeholder: placeholder,
value: input,
onChange: onInputChange,
helperText: useHelperText ? placeholder : undefined,
endVerticalAlign: "center",
size: size,
error: error,
fullWidth: fullWidth,
readOnly: readOnly,
disabled: disabled
}, moreProps), other), AdvancedTextFieldProps)), version === 'mobile' && /*#__PURE__*/(0, _jsxRuntime.jsx)(Modal, _objectSpread(_objectSpread({
open: open,
modalWrapperSurface: false,
TransitionComponent: Slide,
onClose: onClose
}, ModalProps), {}, {
children: element
})), version === 'desktop' && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread({
open: open,
portal: true,
anchorElement: refs.root.current,
alignment: "center",
position: "bottom",
hover: false,
focus: false,
longPress: false,
maxWidth: "unset",
noMargin: true,
name: /*#__PURE__*/(0, _jsxRuntime.jsx)(ClickListener, {
onClickOutside: onCancel,
includeParentQueries: ['.onesy-DateTimePicker-main', '.onesy-Calendar-list'],
children: element
})
}, TooltipProps))]
}));
};
DateTimePicker.displayName = 'onesy-DateTimePicker';
var _default = exports.default = DateTimePicker;