@onesy/ui-react
Version:
UI for React
1,001 lines (976 loc) • 41.6 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 _date = require("@onesy/date");
var _styleReact = require("@onesy/style-react");
var _IconMaterialScheduleW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialScheduleW100"));
var _IconMaterialKeyboardAltW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialKeyboardAltW100"));
var _IconButton = _interopRequireDefault(require("../IconButton"));
var _AdvancedTextField = _interopRequireDefault(require("../AdvancedTextField"));
var _Modal = _interopRequireDefault(require("../Modal"));
var _ClickListener = _interopRequireDefault(require("../ClickListener"));
var _Tooltip = _interopRequireDefault(require("../Tooltip"));
var _Surface = _interopRequireDefault(require("../Surface"));
var _Line = _interopRequireDefault(require("../Line"));
var _Type = _interopRequireDefault(require("../Type"));
var _ToggleButtons = _interopRequireDefault(require("../ToggleButtons"));
var _ToggleButton = _interopRequireDefault(require("../ToggleButton"));
var _Button = _interopRequireDefault(require("../Button"));
var _Slide = _interopRequireDefault(require("../Slide"));
var _Clock = _interopRequireDefault(require("../Clock"));
var _Tabs = _interopRequireDefault(require("../Tabs"));
var _Tab = _interopRequireDefault(require("../Tab"));
var _useMediaQuery = _interopRequireDefault(require("../useMediaQuery"));
var _DatePicker = require("../DatePicker/DatePicker");
var _utils2 = require("../utils");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["ref", "tonal", "color", "version", "value", "valueDefault", "onChange", "selecting", "selectingDefault", "onChangeSelecting", "size", "range", "now", "label", "min", "max", "validate", "autoNext", "autoCloseOnLast", "openMobile", "openDesktop", "selectModalSubHeadingText", "selectModalSubHeadingTextRange", "inputModalSubHeadingText", "inputModalSubHeadingTextRange", "orientation", "format", "hour", "minute", "second", "switch", "static", "today", "clear", "placeholder", "heading", "actions", "fullWidth", "readOnly", "disabled", "valid", "onClick", "onClose", "onCancel", "onNow", "onToday", "onClear", "onOk", "renderValue", "Icon", "IconEnter", "WrapperProps", "MainProps", "ModalProps", "MiddleProps", "ButtonProps", "TooltipProps", "ToggleButtonsProps", "ToggleButtonProps", "IconButtonProps", "InputProps", "ClockProps", "TabsProps", "TabFromProps", "TabToProps", "AdvancedTextFieldProps", "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: {},
main_size_small: {
borderRadius: theme.methods.shape.radius.value(2.5, 'px')
},
main_size_regular: {
borderRadius: theme.methods.shape.radius.value(3.5, 'px')
},
main_size_large: {
borderRadius: theme.methods.shape.radius.value(4.5, 'px')
},
heading: {
width: '100%'
},
heading_size_small: {
padding: `${theme.methods.space.value(2, 'px')} ${theme.methods.space.value(2, 'px')} 0`
},
heading_size_regular: {
padding: `${theme.methods.space.value(3, 'px')} ${theme.methods.space.value(3, 'px')} 0`
},
heading_size_large: {
padding: `${theme.methods.space.value(4, 'px')} ${theme.methods.space.value(4, 'px')} 0`
},
inputs: {
width: '100%'
},
middle: {
width: '100%'
},
middle_size_small: {
padding: `0 ${theme.methods.space.value(2, 'px')}`,
marginTop: '16px'
},
middle_size_regular: {
padding: `0 ${theme.methods.space.value(3, 'px')}`,
marginTop: '24px'
},
middle_size_large: {
padding: `0 ${theme.methods.space.value(4, 'px')}`,
marginTop: '32px'
},
input: {
flex: '1 1 auto',
'& .onesy-TextField-helper-text': {
color: theme.palette.text.default.primary
}
},
input_size_small: {
maxWidth: '72px',
width: '100%',
'& .onesy-TextField-input-wrapper': {
paddingInline: '0px',
paddingBlock: `${theme.methods.space.value(1, 'px')} ${theme.methods.space.value(0.5, 'px')}`,
height: '64px'
},
'& .onesy-TextField-input': _objectSpread(_objectSpread({}, theme.typography.values.d3), {}, {
lineHeight: '1',
textAlign: 'center'
}),
'& .onesy-TextField-footer': {
marginTop: '4px',
padding: '0px'
}
},
input_size_regular: {
maxWidth: '96px',
width: '100%',
'& .onesy-TextField-input-wrapper': {
paddingInline: '0px',
paddingBlock: `${theme.methods.space.value(1.5, 'px')} ${theme.methods.space.value(1, 'px')}`,
height: '72px'
},
'& .onesy-TextField-input': _objectSpread(_objectSpread({}, theme.typography.values.d2), {}, {
lineHeight: '1',
textAlign: 'center'
}),
'& .onesy-TextField-footer': {
marginTop: '8px',
padding: '0px'
}
},
input_size_large: {
maxWidth: '120px',
width: '100%',
'& .onesy-TextField-input-wrapper': {
paddingInline: '0px',
paddingBlock: `${theme.methods.space.value(2, 'px')} ${theme.methods.space.value(1.5, 'px')}`,
height: '80px'
},
'& .onesy-TextField-input': _objectSpread(_objectSpread({}, theme.typography.values.d1), {}, {
lineHeight: '1',
textAlign: 'center'
}),
'& .onesy-TextField-footer': {
marginTop: '12px',
padding: '0px'
}
},
button: {
padding: '0',
paddingTop: theme.methods.space.value(0.5, 'px'),
borderRadius: theme.methods.shape.radius.value('sm', 'px'),
cursor: 'pointer',
userSelect: 'none',
flex: '1 1'
},
button_size_small: {
height: '64px',
width: '82px',
'& .onesy-Button-label': _objectSpread(_objectSpread({}, theme.typography.values.d3), {}, {
lineHeight: '1'
})
},
button_size_regular: {
height: '72px',
width: '96px',
'& .onesy-Button-label': _objectSpread(_objectSpread({}, theme.typography.values.d2), {}, {
lineHeight: '1'
})
},
button_size_large: {
height: '96px',
width: '110px',
'& .onesy-Button-label': _objectSpread(_objectSpread({}, theme.typography.values.d1), {}, {
lineHeight: '1'
})
},
inputSeparator: {
paddingInline: theme.methods.space.value(0.75, 'px'),
userSelect: 'none'
},
toggleButtons: {
'& > *': {
flex: '1 1 auto'
}
},
toggleButtons_orientation_vertical_size_small: {
minWidth: '48px',
height: '64px'
},
toggleButtons_orientation_vertical_size_regular: {
minWidth: '56px',
height: '72px'
},
toggleButtons_orientation_vertical_size_large: {
minWidth: '68px',
height: '80px'
},
toggleButtons_orientation_horizontal_size_small: {
height: '30px'
},
toggleButtons_orientation_horizontal_size_regular: {
height: '38px'
},
toggleButtons_orientation_horizontal_size_large: {
height: '46px'
},
toggleButton: {},
tabs: {},
tabs_padding: {
marginTop: 12
},
footer: {},
footer_size_small: {
padding: `0px ${theme.methods.space.value(1, 'px')} ${theme.methods.space.value(1, 'px')}`,
marginTop: '16px'
},
footer_size_regular: {
padding: `0px ${theme.methods.space.value(2, 'px')} ${theme.methods.space.value(2, 'px')}`,
marginTop: '24px'
},
footer_size_large: {
padding: `0px ${theme.methods.space.value(3, 'px')} ${theme.methods.space.value(3, 'px')}`,
marginTop: '32px'
}
}), {
name: 'onesy-TimePicker'
});
const TimePicker = 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, _theme$elements11, _theme$elements12, _theme$elements13;
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.onesyTimePicker) === 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 IconButton = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.IconButton) || _IconButton.default;
const AdvancedTextField = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.AdvancedTextField) || _AdvancedTextField.default;
const Modal = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Modal) || _Modal.default;
const ClickListener = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.ClickListener) || _ClickListener.default;
const Tooltip = (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.Tooltip) || _Tooltip.default;
const Surface = (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.Surface) || _Surface.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 ToggleButton = (theme === null || theme === void 0 || (_theme$elements9 = theme.elements) === null || _theme$elements9 === void 0 ? void 0 : _theme$elements9.ToggleButton) || _ToggleButton.default;
const ToggleButtons = (theme === null || theme === void 0 || (_theme$elements0 = theme.elements) === null || _theme$elements0 === void 0 ? void 0 : _theme$elements0.ToggleButtons) || _ToggleButtons.default;
const Button = (theme === null || theme === void 0 || (_theme$elements1 = theme.elements) === null || _theme$elements1 === void 0 ? void 0 : _theme$elements1.Button) || _Button.default;
const Slide = (theme === null || theme === void 0 || (_theme$elements10 = theme.elements) === null || _theme$elements10 === void 0 ? void 0 : _theme$elements10.Slide) || _Slide.default;
const Clock = (theme === null || theme === void 0 || (_theme$elements11 = theme.elements) === null || _theme$elements11 === void 0 ? void 0 : _theme$elements11.Clock) || _Clock.default;
const Tab = (theme === null || theme === void 0 || (_theme$elements12 = theme.elements) === null || _theme$elements12 === void 0 ? void 0 : _theme$elements12.Tab) || _Tab.default;
const Tabs = (theme === null || theme === void 0 || (_theme$elements13 = theme.elements) === null || _theme$elements13 === void 0 ? void 0 : _theme$elements13.Tabs) || _Tabs.default;
const {
ref,
tonal = true,
color = 'primary',
version: version_ = 'auto',
value: value_,
valueDefault,
onChange,
selecting: selecting_,
selectingDefault,
onChangeSelecting,
size = 'regular',
range,
now,
label,
min,
max,
validate,
autoNext: autoNext_,
autoCloseOnLast: autoCloseOnLast_,
openMobile = 'select',
openDesktop = 'select',
selectModalSubHeadingText = l('Select time'),
selectModalSubHeadingTextRange = `${l('Select from')}${_DatePicker.SEPARATOR}${l('to time')}`,
inputModalSubHeadingText = l('Enter time'),
inputModalSubHeadingTextRange = `${l('Enter from')}${_DatePicker.SEPARATOR}${l('to time')}`,
orientation: orientation_,
format = '12',
hour = true,
minute = true,
second = false,
switch: switch__,
static: static_,
today,
clear = true,
placeholder: placeholder_,
heading: heading_ = true,
actions: actions_ = true,
fullWidth,
readOnly,
disabled,
valid: valid_,
onClick: onClick_,
onClose: onClose_,
onCancel: onCancel_,
onNow: onNow_,
onToday: onToday_,
onClear: onClear_,
onOk: onOk_,
renderValue,
Icon: Icon_ = _IconMaterialScheduleW.default,
IconEnter = _IconMaterialKeyboardAltW.default,
WrapperProps,
MainProps,
ModalProps,
MiddleProps,
ButtonProps,
TooltipProps,
ToggleButtonsProps,
ToggleButtonProps,
IconButtonProps,
InputProps,
ClockProps,
TabsProps,
TabFromProps,
TabToProps,
AdvancedTextFieldProps,
IconProps,
className
} = props,
other = (0, _objectWithoutProperties2.default)(props, _excluded);
const {
classes
} = useStyle();
const refs = {
root: _react.default.useRef(undefined),
mode: _react.default.useRef(undefined),
value: _react.default.useRef(undefined),
dayTime: _react.default.useRef(undefined)
};
const keys = _react.default.useMemo(() => {
const result = [];
const items = [switch__, orientation_, autoNext_, autoCloseOnLast_];
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);
}, [switch__, orientation_, autoNext_, autoCloseOnLast_]);
const breakpoints = {};
keys.forEach(key_1 => {
breakpoints[key_1] = (0, _useMediaQuery.default)(theme.breakpoints.media[key_1], {
element: refs.root.current
});
});
const switch_ = (0, _utils2.valueBreakpoints)(switch__, true, breakpoints, theme);
const orientation = (0, _utils2.valueBreakpoints)(orientation_, 'vertical', breakpoints, theme);
const autoNext = (0, _utils2.valueBreakpoints)(autoNext_, undefined, breakpoints, theme);
const autoCloseOnLast = (0, _utils2.valueBreakpoints)(autoCloseOnLast_, 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 [selecting, setSelecting] = _react.default.useState(() => {
const valueResult_0 = (selectingDefault !== undefined ? selectingDefault : selecting_) || ['hour', 'hour'];
return ((0, _utils.is)('array', valueResult_0) ? valueResult_0 : [valueResult_0]).filter(Boolean);
});
const [open, setOpen] = _react.default.useState(false);
const [mode, setMode] = _react.default.useState((touch ? openMobile : openDesktop) || 'select');
const [error, setError] = _react.default.useState(false);
const [dayTime, setDayTime] = _react.default.useState(Array.from({
length: 2
}).map(item_0 => (0, _date.format)(new _date.OnesyDate(), 'a')));
const [tab, setTab] = _react.default.useState(0);
refs.value.current = value;
refs.mode.current = mode;
refs.dayTime.current = dayTime;
const valueToInput = (valueNew_0 = refs.value.current) => {
let result_0 = '';
const [from, to] = (0, _utils.is)('array', valueNew_0) ? valueNew_0 : [valueNew_0];
if (!(from || to)) return '';
const method = item_1 => {
let formatValue = '';
if (format === '12') formatValue += `hh`;else formatValue += `HH`;
if (minute) formatValue += `:mm`;
if (second) formatValue += `:ss`;
if (format === '12') formatValue += ` a`;
return (0, _date.format)(item_1, formatValue);
};
result_0 += `${method(from)}`;
if (range && to) result_0 += `${_DatePicker.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_);
// Update value
setValue(valueNew_1);
// Update input
setInput(valueToInput(valueNew_1));
// Update dayTime
setDayTime(valueNew_1.map(item_2 => (0, _date.format)(item_2, 'a')));
};
const errorCheck = (valueNew_2 = value) => {
// Error
setError((valueNew_2 || []).some((item_3, index) => !valid(item_3)));
};
// Init
_react.default.useEffect(() => {
// Error
errorCheck();
}, []);
// Value
_react.default.useEffect(() => {
if (value_ !== undefined && value_ !== value) onUpdateValue(value_);
}, [value_]);
const onUpdate = valueNew__0 => {
const valueNew_3 = resolve(valueNew__0);
// Inner update
if (!props.hasOwnProperty('value')) setValue(valueNew_3);
if ((0, _utils.is)('function', onChange)) onChange(!range ? valueNew_3[0] : valueNew_3);
};
const onUpdateSelecting = (valueNew__1, index_0) => {
const valueNew_4 = [...selecting];
valueNew_4[index_0] = valueNew__1;
// Inner update
if (!props.hasOwnProperty('selecting')) setSelecting(valueNew_4);
if ((0, _utils.is)('function', onChangeSelecting)) onChangeSelecting(valueNew_4);
};
const valid = (...args) => {
if ((0, _utils.is)('function', valid_)) return valid_(...args);
const onesyDate = args[0];
if (min || max || validate) {
let response = true;
if ((0, _utils.is)('function', validate)) response = validate(onesyDate);
if (min !== undefined) response = response && (0, _date.is)(onesyDate, 'after or same', min);
if (max !== undefined) response = response && (0, _date.is)(onesyDate, 'before or same', max);
return response;
}
return true;
};
const textToOnesyDate = valueNew_5 => {
const [times, dayTime_] = (valueNew_5 || '').split(' ');
const values = times.split(':');
let valueTime;
let onesyDate_0 = new _date.OnesyDate();
if (hour) {
valueTime = values[0];
if ((0, _utils.is)('string', valueTime) && valueTime.startsWith('0')) valueTime = valueTime.slice(1);
valueTime = +valueTime;
onesyDate_0 = (0, _date.set)(format === '12' && dayTime_ === 'pm' ? valueTime + 12 : valueTime, 'hour', onesyDate_0);
}
if (minute) {
valueTime = values[!hour ? 0 : 1];
if ((0, _utils.is)('string', valueTime) && valueTime.startsWith('0')) valueTime = valueTime.slice(1);
valueTime = +valueTime;
onesyDate_0 = (0, _date.set)(valueTime, 'minute', onesyDate_0);
}
if (second) {
valueTime = values[!(hour && minute) ? 0 : !hour ? 1 : 2];
if ((0, _utils.is)('string', valueTime) && valueTime.startsWith('0')) valueTime = valueTime.slice(1);
valueTime = +valueTime;
onesyDate_0 = (0, _date.set)(valueTime, 'second', onesyDate_0);
}
return onesyDate_0;
};
const onInputModalChange = (valueNew_6, unit, index_1) => {
let valueTime_0 = valueNew_6;
if ((0, _utils.is)('string', valueTime_0) && valueTime_0.startsWith('0')) valueTime_0 = valueTime_0.slice(1);
valueTime_0 = +valueTime_0;
value[index_1] = (0, _date.set)(valueTime_0, unit || selecting[index_1], value[index_1]);
(!actions_ ? onUpdate : setValue)(resolve(value));
};
const resolve = (valueNew_7 = refs.value.current, dayTimeNew = refs.dayTime.current) => {
const values_0 = onResolveValue(valueNew_7).map((item_4, index_2) => {
// Resolve the range value
const valueHour = item_4.hour;
if (format === '12') {
if (dayTimeNew[index_2] === 'am' && valueHour >= 12) return (0, _date.set)(valueHour - 12, 'hour', item_4);
if (dayTimeNew[index_2] === 'pm' && valueHour < 12) return (0, _date.set)(valueHour + 12, 'hour', item_4);
}
return item_4;
});
return values_0;
};
const updateDayTime = (valueNew__2, index_3) => {
const valueNew_8 = valueNew__2[0];
// Update dayTime
const dayTimeNew_0 = [...dayTime];
dayTimeNew_0[index_3] = valueNew_8;
refs.dayTime.current = dayTimeNew_0;
setDayTime(dayTimeNew_0);
(!actions_ ? onUpdate : setValue)(resolve(refs.value.current));
};
const inputToValue = (valueNew__3 = input) => {
let valueNew_9 = valueNew__3;
let [from_0, to_0] = valueNew_9.split(_DatePicker.SEPARATOR);
from_0 = textToOnesyDate(from_0);
if (to_0) to_0 = textToOnesyDate(to_0);
valueNew_9 = [from_0, to_0].filter(Boolean).filter(item_5 => item_5 === null || item_5 === void 0 ? void 0 : item_5.valid);
return valueNew_9;
};
const onInputChange = valueNew__4 => {
const valueNew_10 = inputToValue(valueNew__4);
const validValues = valueNew_10.every(item_6 => item_6.valid);
// Only update values if input is valid
// format used to make the value
if (validValues) {
// Error
errorCheck(valueNew_10);
// Update value
onUpdate(valueNew_10);
}
if (!valueNew__4) {
onUpdate([null, null]);
}
// Update input for free typing
setInput(valueNew__4);
};
const onChangeClock = (valueNew__5, index_4 = 0) => {
const valueNew_11 = [...value];
if (valueNew__5 !== value[index_4]) {
valueNew_11[index_4] = valueNew__5;
(!actions_ ? onUpdate : setValue)(resolve(valueNew_11));
// Error
errorCheck(valueNew_11);
}
};
const onChangeSelectingClock = (valueNew_12, index_5 = 0) => {
const selectingValue = selecting;
selectingValue[index_5] = valueNew_12;
if (valueNew_12 !== selecting[0]) setSelecting([...selectingValue]);
};
const onDoneSelecting = (valueNew_13, selectingNew) => {
// AutoCloseOnLast
if (autoCloseOnLast && refs.mode.current === 'select') {
if (['hour', 'minute', 'second'].includes(selectingNew)) {
if (selectingNew === 'second' || selectingNew === 'minute' && !second || selectingNew === 'hour' && !minute) return onOk();
}
}
};
const onMode = () => {
setMode((version === 'mobile' ? openMobile : openDesktop) || 'select');
};
const onModeSwitch = () => {
setMode(refs.mode.current === 'select' ? 'input' : 'select');
};
const onOpen = () => {
onMode();
setOpen(previous => !previous);
};
const onClose = event => {
setOpen(false);
if ((0, _utils.is)('function', onClose_)) onClose_(event);
};
const onReset = () => {
const valueNew_14 = inputToValue();
// Update value
onUpdate(valueNew_14);
// Update dayTime
setDayTime(valueNew_14.map(item_7 => (0, _date.format)(item_7, 'a')));
};
const onToday = event_0 => {
const valueNew_15 = [new _date.OnesyDate()];
if (range) valueNew_15.push(new _date.OnesyDate());
// Update value
onUpdate(valueNew_15);
// Update input
setInput(valueToInput(valueNew_15));
// Update dayTime
setDayTime(valueNew_15.map(item_8 => (0, _date.format)(item_8, 'a')));
onClose(event_0);
if ((0, _utils.is)('function', onToday_)) onToday_(event_0);
};
const onClear = event_1 => {
const valueNew_16 = [];
// Update value
onUpdate(valueNew_16);
// Update input
setInput(valueToInput(valueNew_16));
// Update dayTime
setDayTime(valueNew_16.map(item_9 => (0, _date.format)(item_9, 'a')));
onClose(event_1);
if ((0, _utils.is)('function', onClear_)) onClear_(event_1);
};
const onOk = event_2 => {
// Error
errorCheck();
// Update value
onUpdate(refs.value.current);
// Update input
setInput(valueToInput(refs.value.current));
// Update dayTime
setDayTime(refs.value.current.map(item_10 => (0, _date.format)(item_10, 'a')));
onClose(event_2);
if ((0, _utils.is)('function', onOk_)) onOk_(event_2);
};
const onCancel = event_3 => {
onReset();
onClose(event_3);
if ((0, _utils.is)('function', onCancel_)) onCancel_(event_3);
};
const mask = [];
let placeholder = '';
if (hour) {
if (format === '12') {
mask.push({
pattern: '[0-1]'
}, (item_11, result_1, valueInput) => /^([0][0-9]|1[0-2]).*/.test(valueInput));
}
if (format === '24') {
mask.push({
pattern: '[0-2]'
}, (item_12, result_2, valueInput_0) => /^([01][0-9]|2[0-3]).*/.test(valueInput_0));
}
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(' ', _DatePicker.SEPARATOR_SYMBOL, ' ', ...mask);
placeholder += `${_DatePicker.SEPARATOR}${placeholder}`;
}
placeholder = placeholder_ || placeholder;
const buttonProps = _objectSpread({
color: 'inherit',
version: 'text',
size
}, ButtonProps);
const iconButtonProps = _objectSpread({
size
}, IconButtonProps);
const clock = (index_6 = 0) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Clock, _objectSpread({
size: size,
format: format,
value: value[index_6] || new _date.OnesyDate(),
dayTime: dayTime[index_6] || (0, _date.format)(new _date.OnesyDate(), 'a'),
selecting: selecting[index_6],
onChange: valueNew_17 => onChangeClock(valueNew_17, index_6),
onChangeSelecting: valueNew_18 => onChangeSelectingClock(valueNew_18, index_6),
onDoneSelecting: onDoneSelecting,
renderValue: renderValue,
valid: valid,
hour: hour,
minute: minute,
second: second,
autoNext: autoNext,
disabled: disabled
}, ClockProps));
const moreProps = {};
if (version === 'desktop') {
moreProps.end = /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
tonal: tonal,
color: color,
size: size,
version: "text",
onClick: onOpen,
"aria-label": l('Choose time'),
disabled: disabled || readOnly
}, iconButtonProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon_, _objectSpread({}, IconProps))
}));
}
const makeInputs = (index_7 = 0) => {
const inputProps = _objectSpread({
tonal,
color,
version: 'outlined',
size,
fullWidth: true,
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TimePicker', theme) && ['onesy-TimePicker-input'], classes.input, classes[`input_version_${version}`], classes[`input_size_${size}`]]),
HelperTextProps: {
version: size === 'large' ? 'b2' : size === 'regular' ? 'b3' : 'b3'
}
}, InputProps);
const buttonProps_ = {
tonal: 'secondary',
color: ['themed', 'inverted', 'default', 'inherit'].includes(color) ? 'default' : color,
version: 'filled',
backgroundOpacity: 0.44,
elevation: false,
size,
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TimePicker', theme) && ['onesy-TimePicker-button'], classes.button, classes[`button_size_${size}`]]),
style: {
color: theme.palette.text.default.primary
}
};
const separator = /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
version: size === 'large' ? 'd1' : size === 'regular' ? 'd2' : 'd3',
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TimePicker', theme) && ['onesy-TimePicker-input-separator'], classes.inputSeparator]),
style: _objectSpread({}, mode !== 'select' && {
marginTop: -24
}),
children: ":"
});
const buttons = [];
const inputs = [];
if (hour) {
buttons.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(Button, _objectSpread(_objectSpread({}, buttonProps_), {}, {
selected: selecting[index_7] === 'hour',
onClick: () => onUpdateSelecting('hour', index_7),
children: (0, _date.format)(value[index_7], format === '12' ? 'hh' : 'HH')
})));
inputs.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(AdvancedTextField, _objectSpread({
helperText: l('Hour'),
value: (0, _date.format)(value[index_7], format === '12' ? 'hh' : 'HH'),
onChange: valueNew_19 => onInputModalChange(valueNew_19, 'hour', index_7),
placeholder: "00",
mask: [...(format === '12' ? [{
pattern: '[0-1]'
}, (item_13, result_3, valueInput_1) => /^([0][0-9]|1[0-2]).*/.test(valueInput_1)] : [{
pattern: '[0-2]'
}, (item_14, result_4, valueInput_2) => /^([01][0-9]|2[0-3]).*/.test(valueInput_2)])]
}, inputProps)));
}
if (minute) {
if (hour) {
buttons.push(separator);
inputs.push(separator);
}
buttons.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(Button, _objectSpread(_objectSpread({}, buttonProps_), {}, {
selected: selecting[index_7] === 'minute',
onClick: () => onUpdateSelecting('minute', index_7),
children: (0, _date.format)(value[index_7], 'mm')
})));
inputs.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(AdvancedTextField, _objectSpread({
helperText: l('Minute'),
value: (0, _date.format)(value[index_7], 'mm'),
onChange: valueNew_20 => onInputModalChange(valueNew_20, 'minute', index_7),
placeholder: "00",
mask: [{
pattern: '[0-5]'
}, {
pattern: '[0-9]'
}]
}, inputProps)));
}
if (second) {
if (hour || minute) {
buttons.push(separator);
inputs.push(separator);
}
buttons.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(Button, _objectSpread(_objectSpread({}, buttonProps_), {}, {
selected: selecting[index_7] === 'second',
onClick: () => onUpdateSelecting('second', index_7),
children: (0, _date.format)(value[index_7], 'ss')
})));
inputs.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(AdvancedTextField, _objectSpread({
helperText: l('Second'),
value: (0, _date.format)(value[index_7], 'ss'),
onChange: valueNew_21 => onInputModalChange(valueNew_21, 'second', index_7),
placeholder: "00",
mask: [{
pattern: '[0-5]'
}, {
pattern: '[0-9]'
}]
}, inputProps)));
}
return mode === 'select' ? buttons : inputs;
};
const toggleButtonProps = _objectSpread(_objectSpread({
size,
icon: false
}, ToggleButtonProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TimePicker', theme) && ['onesy-TimePicker-toggle-button'], ToggleButtonProps === null || ToggleButtonProps === void 0 ? void 0 : ToggleButtonProps.className, classes.toggleButton])
});
const orientationValue = mode === 'select' ? orientation : 'vertical';
const timeValue = range ? [0, 1] : [0];
const elementValues = timeValue.map((item_15, index_8) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 4.5,
direction: orientationValue === 'vertical' ? 'column' : 'row',
align: "center",
justify: "unset",
style: {
width: '100%'
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: orientationValue === 'vertical' ? 1.5 : 2,
direction: orientationValue === 'vertical' ? 'row' : 'column',
justify: "center",
align: "unset",
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TimePicker', theme) && ['onesy-TimePicker-inputs'], classes.inputs]),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
gap: 0,
direction: "row",
align: "center",
justify: "center",
fullWidth: true,
children: makeInputs(index_8)
}), format === '12' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(ToggleButtons, _objectSpread(_objectSpread({
version: "outlined",
size: size,
orientation: orientationValue,
value: dayTime[index_8] || (0, _date.format)(new _date.OnesyDate(), 'a'),
onChange: valueNew_22 => updateDayTime(valueNew_22, index_8),
select: "single",
unselect: false
}, ToggleButtonsProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TimePicker', theme) && ['onesy-TimePicker-toggle-buttons'], ToggleButtonsProps === null || ToggleButtonsProps === void 0 ? void 0 : ToggleButtonsProps.className, classes.toggleButtons, classes[`toggleButtons_orientation_${orientationValue}_size_${size}`]]),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleButton, _objectSpread(_objectSpread({
value: "am"
}, toggleButtonProps), {}, {
children: "AM"
})), /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleButton, _objectSpread(_objectSpread({
value: "pm"
}, toggleButtonProps), {}, {
children: "PM"
}))]
}))]
}), mode === 'select' && clock(index_8)]
}, index_8));
const heading = mode === 'select' ? !range ? selectModalSubHeadingText : selectModalSubHeadingTextRange : !range ? inputModalSubHeadingText : inputModalSubHeadingTextRange;
const actions = /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
direction: "row",
align: "center",
justify: "space-between",
fullWidth: true,
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TimePicker', theme) && ['onesy-TimePicker-footer'], classes.footer, classes[`footer_size_${size}`]]),
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 0,
direction: "row",
align: "center",
children: [switch_ && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, {
name: mode === 'select' ? l('Enter time') : l('Select time'),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
tonal: tonal,
color: "inherit",
size: size,
onClick: onModeSwitch,
"aria-label": mode === 'select' ? l('Enter time') : l('Select time')
}, iconButtonProps), {}, {
children: mode === 'select' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(IconEnter, _objectSpread({}, IconProps)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon_, _objectSpread({}, IconProps))
}))
}), today && /*#__PURE__*/(0, _jsxRuntime.jsx)(Button, _objectSpread(_objectSpread({
onClick: onToday,
version: "text",
size: size
}, buttonProps), {}, {
children: l('Now')
})), clear && /*#__PURE__*/(0, _jsxRuntime.jsx)(Button, _objectSpread(_objectSpread({
onClick: onClear,
version: "text",
size: size
}, 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",
size: size,
onClick: onCancel
}, buttonProps), {}, {
children: l('Cancel')
})), /*#__PURE__*/(0, _jsxRuntime.jsx)(Button, _objectSpread(_objectSpread({
tonal: tonal,
color: color,
version: "text",
size: size,
onClick: onOk
}, buttonProps), {}, {
children: l('Ok')
}))]
})]
});
const element = /*#__PURE__*/(0, _jsxRuntime.jsxs)(Surface, _objectSpread(_objectSpread({
gap: 0,
direction: "column",
align: "center",
Component: Line
}, MainProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TimePicker', theme) && ['onesy-TimePicker-main'], MainProps === null || MainProps === void 0 ? void 0 : MainProps.className, classes.main, classes[`main_size_${size}`]]),
children: [heading_ && /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
version: size === 'large' ? 'l1' : size === 'regular' ? 'l2' : 'l3',
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TimePicker', theme) && ['onesy-TimePicker-heading'], classes.heading, classes[`heading_size_${size}`]]),
children: heading
}), range && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Tabs, _objectSpread(_objectSpread({
justify: "center",
initialLineUpdateTimeout: 340,
value: tab,
valueDefault: tab,
onChange: setTab
}, TabsProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TimePicker', theme) && ['onesy-TimePicker-tabs'], TabsProps === null || TabsProps === void 0 ? void 0 : TabsProps.className, classes.tabs, heading_ && classes.tabs_padding]),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Tab, _objectSpread({
value: 0,
name: l('From')
}, TabFromProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(Tab, _objectSpread({
value: 1,
name: l('To')
}, TabToProps))]
})), /*#__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, classes[`middle_size_${size}`]]),
children: elementValues[tab]
}), actions_ && actions]
}));
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)('TimePicker', theme) && ['onesy-TimePicker-root', `onesy-TimePicker-version-${version}`, `onesy-TimePicker-size-${size}`, WrapperProps === null || WrapperProps === void 0 ? void 0 : WrapperProps.className, readOnly && `onesy-TimePicker-read-only`, disabled && `onesy-TimePicker-disabled`, fullWidth && 'onesy-full-width'], className, classes.root]),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AdvancedTextField, _objectSpread(_objectSpread(_objectSpread({
rootRef: item_16 => {
if (ref) {
if ((0, _utils.is)('function', ref)) ref(item_16);else ref.current = item_16;
}
refs.root.current = item_16;
},
tonal: tonal,
color: color,
version: "outlined",
size: size,
name: label,
mask: mask,
placeholder: placeholder,
value: input,
onChange: onInputChange,
endVerticalAlign: "center",
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-TimePicker-main'],
children: element
})
}, TooltipProps))]
}));
};
TimePicker.displayName = 'onesy-TimePicker';
var _default = exports.default = TimePicker;