@onesy/ui-react
Version:
UI for React
993 lines (969 loc) • 35.9 kB
JavaScript
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
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) { _defineProperty(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; }
import React from 'react';
import { is, unique } from '@onesy/utils';
import { OnesyDate, format as formatDate, set, is as isOnesyDate } from '@onesy/date';
import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
import IconMaterialSchedule from '@onesy/icons-material-rounded-react/IconMaterialScheduleW100';
import IconMaterialKeyboardAlt from '@onesy/icons-material-rounded-react/IconMaterialKeyboardAltW100';
import IconButtonElement from '../IconButton';
import AdvancedTextFieldElement from '../AdvancedTextField';
import ModalElement from '../Modal';
import ClickListenerElement from '../ClickListener';
import TooltipElement from '../Tooltip';
import SurfaceElement from '../Surface';
import LineElement from '../Line';
import TypeElement from '../Type';
import ToggleButtonsElement from '../ToggleButtons';
import ToggleButtonElement from '../ToggleButton';
import ButtonElement from '../Button';
import SlideElement from '../Slide';
import ClockElement from '../Clock';
import TabsElement from '../Tabs';
import TabElement from '../Tab';
import useMediaQuery from '../useMediaQuery';
import { SEPARATOR, SEPARATOR_SYMBOL } from '../DatePicker/DatePicker';
import { valueBreakpoints, staticClassName } from '../utils';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const useStyle = styleMethod(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__ => {
const theme = useOnesyTheme();
const l = theme.l;
const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyTimePicker?.props?.default), props__);
const Line = theme?.elements?.Line || LineElement;
const IconButton = theme?.elements?.IconButton || IconButtonElement;
const AdvancedTextField = theme?.elements?.AdvancedTextField || AdvancedTextFieldElement;
const Modal = theme?.elements?.Modal || ModalElement;
const ClickListener = theme?.elements?.ClickListener || ClickListenerElement;
const Tooltip = theme?.elements?.Tooltip || TooltipElement;
const Surface = theme?.elements?.Surface || SurfaceElement;
const Type = theme?.elements?.Type || TypeElement;
const ToggleButton = theme?.elements?.ToggleButton || ToggleButtonElement;
const ToggleButtons = theme?.elements?.ToggleButtons || ToggleButtonsElement;
const Button = theme?.elements?.Button || ButtonElement;
const Slide = theme?.elements?.Slide || SlideElement;
const Clock = theme?.elements?.Clock || ClockElement;
const Tab = theme?.elements?.Tab || TabElement;
const Tabs = theme?.elements?.Tabs || TabsElement;
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')}${SEPARATOR}${l('to time')}`,
inputModalSubHeadingText = l('Enter time'),
inputModalSubHeadingTextRange = `${l('Enter from')}${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_ = IconMaterialSchedule,
IconEnter = IconMaterialKeyboardAlt,
WrapperProps,
MainProps,
ModalProps,
MiddleProps,
ButtonProps,
TooltipProps,
ToggleButtonsProps,
ToggleButtonProps,
IconButtonProps,
InputProps,
ClockProps,
TabsProps,
TabFromProps,
TabToProps,
AdvancedTextFieldProps,
IconProps,
className
} = props,
other = _objectWithoutProperties(props, _excluded);
const {
classes
} = useStyle();
const refs = {
root: React.useRef(undefined),
mode: React.useRef(undefined),
value: React.useRef(undefined),
dayTime: React.useRef(undefined)
};
const keys = React.useMemo(() => {
const result = [];
const items = [switch__, orientation_, autoNext_, autoCloseOnLast_];
items.forEach(item => {
if (is('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key_0 => result.push(key_0));
});
return unique(result);
}, [switch__, orientation_, autoNext_, autoCloseOnLast_]);
const breakpoints = {};
keys.forEach(key_1 => {
breakpoints[key_1] = useMediaQuery(theme.breakpoints.media[key_1], {
element: refs.root.current
});
});
const switch_ = valueBreakpoints(switch__, true, breakpoints, theme);
const orientation = valueBreakpoints(orientation_, 'vertical', breakpoints, theme);
const autoNext = valueBreakpoints(autoNext_, undefined, breakpoints, theme);
const autoCloseOnLast = valueBreakpoints(autoCloseOnLast_, undefined, breakpoints, theme);
const touch = useMediaQuery('(pointer: coarse)', {
element: refs.root.current
});
const onResolveValue = valueNew => {
const array = (is('array', valueNew) ? valueNew : [valueNew]).filter(Boolean);
const sorted = array.sort((a, b) => a?.milliseconds - b?.milliseconds);
return sorted;
};
const [value, setValue] = React.useState(() => {
const valueResult = (valueDefault !== undefined ? valueDefault : value_) || now && (range ? [new OnesyDate(), new OnesyDate()] : [new OnesyDate()]);
return onResolveValue(valueResult);
});
const [selecting, setSelecting] = React.useState(() => {
const valueResult_0 = (selectingDefault !== undefined ? selectingDefault : selecting_) || ['hour', 'hour'];
return (is('array', valueResult_0) ? valueResult_0 : [valueResult_0]).filter(Boolean);
});
const [open, setOpen] = React.useState(false);
const [mode, setMode] = React.useState((touch ? openMobile : openDesktop) || 'select');
const [error, setError] = React.useState(false);
const [dayTime, setDayTime] = React.useState(Array.from({
length: 2
}).map(item_0 => formatDate(new OnesyDate(), 'a')));
const [tab, setTab] = React.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] = 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 formatDate(item_1, formatValue);
};
result_0 += `${method(from)}`;
if (range && to) result_0 += `${SEPARATOR}${method(to)}`;
return result_0;
};
const [input, setInput] = React.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 => formatDate(item_2, 'a')));
};
const errorCheck = (valueNew_2 = value) => {
// Error
setError((valueNew_2 || []).some((item_3, index) => !valid(item_3)));
};
// Init
React.useEffect(() => {
// Error
errorCheck();
}, []);
// Value
React.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 (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 (is('function', onChangeSelecting)) onChangeSelecting(valueNew_4);
};
const valid = (...args) => {
if (is('function', valid_)) return valid_(...args);
const onesyDate = args[0];
if (min || max || validate) {
let response = true;
if (is('function', validate)) response = validate(onesyDate);
if (min !== undefined) response = response && isOnesyDate(onesyDate, 'after or same', min);
if (max !== undefined) response = response && isOnesyDate(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 OnesyDate();
if (hour) {
valueTime = values[0];
if (is('string', valueTime) && valueTime.startsWith('0')) valueTime = valueTime.slice(1);
valueTime = +valueTime;
onesyDate_0 = set(format === '12' && dayTime_ === 'pm' ? valueTime + 12 : valueTime, 'hour', onesyDate_0);
}
if (minute) {
valueTime = values[!hour ? 0 : 1];
if (is('string', valueTime) && valueTime.startsWith('0')) valueTime = valueTime.slice(1);
valueTime = +valueTime;
onesyDate_0 = set(valueTime, 'minute', onesyDate_0);
}
if (second) {
valueTime = values[!(hour && minute) ? 0 : !hour ? 1 : 2];
if (is('string', valueTime) && valueTime.startsWith('0')) valueTime = valueTime.slice(1);
valueTime = +valueTime;
onesyDate_0 = set(valueTime, 'second', onesyDate_0);
}
return onesyDate_0;
};
const onInputModalChange = (valueNew_6, unit, index_1) => {
let valueTime_0 = valueNew_6;
if (is('string', valueTime_0) && valueTime_0.startsWith('0')) valueTime_0 = valueTime_0.slice(1);
valueTime_0 = +valueTime_0;
value[index_1] = 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 set(valueHour - 12, 'hour', item_4);
if (dayTimeNew[index_2] === 'pm' && valueHour < 12) return 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(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?.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 (is('function', onClose_)) onClose_(event);
};
const onReset = () => {
const valueNew_14 = inputToValue();
// Update value
onUpdate(valueNew_14);
// Update dayTime
setDayTime(valueNew_14.map(item_7 => formatDate(item_7, 'a')));
};
const onToday = event_0 => {
const valueNew_15 = [new OnesyDate()];
if (range) valueNew_15.push(new OnesyDate());
// Update value
onUpdate(valueNew_15);
// Update input
setInput(valueToInput(valueNew_15));
// Update dayTime
setDayTime(valueNew_15.map(item_8 => formatDate(item_8, 'a')));
onClose(event_0);
if (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 => formatDate(item_9, 'a')));
onClose(event_1);
if (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 => formatDate(item_10, 'a')));
onClose(event_2);
if (is('function', onOk_)) onOk_(event_2);
};
const onCancel = event_3 => {
onReset();
onClose(event_3);
if (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(' ', SEPARATOR_SYMBOL, ' ', ...mask);
placeholder += `${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__*/_jsx(Clock, _objectSpread({
size: size,
format: format,
value: value[index_6] || new OnesyDate(),
dayTime: dayTime[index_6] || formatDate(new 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__*/_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__*/_jsx(Icon_, _objectSpread({}, IconProps))
}));
}
const makeInputs = (index_7 = 0) => {
const inputProps = _objectSpread({
tonal,
color,
version: 'outlined',
size,
fullWidth: true,
className: classNames([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: classNames([staticClassName('TimePicker', theme) && ['onesy-TimePicker-button'], classes.button, classes[`button_size_${size}`]]),
style: {
color: theme.palette.text.default.primary
}
};
const separator = /*#__PURE__*/_jsx(Type, {
version: size === 'large' ? 'd1' : size === 'regular' ? 'd2' : 'd3',
className: classNames([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__*/_jsx(Button, _objectSpread(_objectSpread({}, buttonProps_), {}, {
selected: selecting[index_7] === 'hour',
onClick: () => onUpdateSelecting('hour', index_7),
children: formatDate(value[index_7], format === '12' ? 'hh' : 'HH')
})));
inputs.push(/*#__PURE__*/_jsx(AdvancedTextField, _objectSpread({
helperText: l('Hour'),
value: formatDate(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__*/_jsx(Button, _objectSpread(_objectSpread({}, buttonProps_), {}, {
selected: selecting[index_7] === 'minute',
onClick: () => onUpdateSelecting('minute', index_7),
children: formatDate(value[index_7], 'mm')
})));
inputs.push(/*#__PURE__*/_jsx(AdvancedTextField, _objectSpread({
helperText: l('Minute'),
value: formatDate(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__*/_jsx(Button, _objectSpread(_objectSpread({}, buttonProps_), {}, {
selected: selecting[index_7] === 'second',
onClick: () => onUpdateSelecting('second', index_7),
children: formatDate(value[index_7], 'ss')
})));
inputs.push(/*#__PURE__*/_jsx(AdvancedTextField, _objectSpread({
helperText: l('Second'),
value: formatDate(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: classNames([staticClassName('TimePicker', theme) && ['onesy-TimePicker-toggle-button'], 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__*/_jsxs(Line, {
gap: 4.5,
direction: orientationValue === 'vertical' ? 'column' : 'row',
align: "center",
justify: "unset",
style: {
width: '100%'
},
children: [/*#__PURE__*/_jsxs(Line, {
gap: orientationValue === 'vertical' ? 1.5 : 2,
direction: orientationValue === 'vertical' ? 'row' : 'column',
justify: "center",
align: "unset",
className: classNames([staticClassName('TimePicker', theme) && ['onesy-TimePicker-inputs'], classes.inputs]),
children: [/*#__PURE__*/_jsx(Line, {
gap: 0,
direction: "row",
align: "center",
justify: "center",
fullWidth: true,
children: makeInputs(index_8)
}), format === '12' && /*#__PURE__*/_jsxs(ToggleButtons, _objectSpread(_objectSpread({
version: "outlined",
size: size,
orientation: orientationValue,
value: dayTime[index_8] || formatDate(new OnesyDate(), 'a'),
onChange: valueNew_22 => updateDayTime(valueNew_22, index_8),
select: "single",
unselect: false
}, ToggleButtonsProps), {}, {
className: classNames([staticClassName('TimePicker', theme) && ['onesy-TimePicker-toggle-buttons'], ToggleButtonsProps?.className, classes.toggleButtons, classes[`toggleButtons_orientation_${orientationValue}_size_${size}`]]),
children: [/*#__PURE__*/_jsx(ToggleButton, _objectSpread(_objectSpread({
value: "am"
}, toggleButtonProps), {}, {
children: "AM"
})), /*#__PURE__*/_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__*/_jsxs(Line, {
direction: "row",
align: "center",
justify: "space-between",
fullWidth: true,
className: classNames([staticClassName('TimePicker', theme) && ['onesy-TimePicker-footer'], classes.footer, classes[`footer_size_${size}`]]),
children: [/*#__PURE__*/_jsxs(Line, {
gap: 0,
direction: "row",
align: "center",
children: [switch_ && /*#__PURE__*/_jsx(Tooltip, {
name: mode === 'select' ? l('Enter time') : l('Select time'),
children: /*#__PURE__*/_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__*/_jsx(IconEnter, _objectSpread({}, IconProps)) : /*#__PURE__*/_jsx(Icon_, _objectSpread({}, IconProps))
}))
}), today && /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
onClick: onToday,
version: "text",
size: size
}, buttonProps), {}, {
children: l('Now')
})), clear && /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
onClick: onClear,
version: "text",
size: size
}, buttonProps), {}, {
children: l('Clear')
}))]
}), /*#__PURE__*/_jsxs(Line, {
gap: 0,
direction: "row",
align: "center",
children: [/*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
tonal: tonal,
color: color,
version: "text",
size: size,
onClick: onCancel
}, buttonProps), {}, {
children: l('Cancel')
})), /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
tonal: tonal,
color: color,
version: "text",
size: size,
onClick: onOk
}, buttonProps), {}, {
children: l('Ok')
}))]
})]
});
const element = /*#__PURE__*/_jsxs(Surface, _objectSpread(_objectSpread({
gap: 0,
direction: "column",
align: "center",
Component: Line
}, MainProps), {}, {
className: classNames([staticClassName('TimePicker', theme) && ['onesy-TimePicker-main'], MainProps?.className, classes.main, classes[`main_size_${size}`]]),
children: [heading_ && /*#__PURE__*/_jsx(Type, {
version: size === 'large' ? 'l1' : size === 'regular' ? 'l2' : 'l3',
className: classNames([staticClassName('TimePicker', theme) && ['onesy-TimePicker-heading'], classes.heading, classes[`heading_size_${size}`]]),
children: heading
}), range && /*#__PURE__*/_jsxs(Tabs, _objectSpread(_objectSpread({
justify: "center",
initialLineUpdateTimeout: 340,
value: tab,
valueDefault: tab,
onChange: setTab
}, TabsProps), {}, {
className: classNames([staticClassName('TimePicker', theme) && ['onesy-TimePicker-tabs'], TabsProps?.className, classes.tabs, heading_ && classes.tabs_padding]),
children: [/*#__PURE__*/_jsx(Tab, _objectSpread({
value: 0,
name: l('From')
}, TabFromProps)), /*#__PURE__*/_jsx(Tab, _objectSpread({
value: 1,
name: l('To')
}, TabToProps))]
})), /*#__PURE__*/_jsx(Line, {
gap: 0,
className: classNames([staticClassName('TimePicker', theme) && ['onesy-TimePicker-middle'], 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__*/_jsxs(Line, _objectSpread(_objectSpread({
gap: 0,
direction: "column",
fullWidth: fullWidth
}, WrapperProps), {}, {
className: classNames([staticClassName('TimePicker', theme) && ['onesy-TimePicker-root', `onesy-TimePicker-version-${version}`, `onesy-TimePicker-size-${size}`, WrapperProps?.className, readOnly && `onesy-TimePicker-read-only`, disabled && `onesy-TimePicker-disabled`, fullWidth && 'onesy-full-width'], className, classes.root]),
children: [/*#__PURE__*/_jsx(AdvancedTextField, _objectSpread(_objectSpread(_objectSpread({
rootRef: item_16 => {
if (ref) {
if (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__*/_jsx(Modal, _objectSpread(_objectSpread({
open: open,
modalWrapperSurface: false,
TransitionComponent: Slide,
onClose: onClose
}, ModalProps), {}, {
children: element
})), version === 'desktop' && /*#__PURE__*/_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__*/_jsx(ClickListener, {
onClickOutside: onCancel,
includeParentQueries: ['.onesy-TimePicker-main'],
children: element
})
}, TooltipProps))]
}));
};
TimePicker.displayName = 'onesy-TimePicker';
export default TimePicker;