@amaui/ui-react
Version:
UI for React
737 lines (736 loc) • 43.3 kB
JavaScript
"use strict";
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const utils_1 = require("@amaui/utils");
const date_1 = require("@amaui/date");
const style_react_1 = require("@amaui/style-react");
const IconMaterialScheduleW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialScheduleW100"));
const IconMaterialKeyboardAltW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialKeyboardAltW100"));
const IconButton_1 = __importDefault(require("../IconButton"));
const AdvancedTextField_1 = __importDefault(require("../AdvancedTextField"));
const Modal_1 = __importDefault(require("../Modal"));
const ClickListener_1 = __importDefault(require("../ClickListener"));
const Tooltip_1 = __importDefault(require("../Tooltip"));
const Surface_1 = __importDefault(require("../Surface"));
const Line_1 = __importDefault(require("../Line"));
const Type_1 = __importDefault(require("../Type"));
const ToggleButtons_1 = __importDefault(require("../ToggleButtons"));
const ToggleButton_1 = __importDefault(require("../ToggleButton"));
const Button_1 = __importDefault(require("../Button"));
const Slide_1 = __importDefault(require("../Slide"));
const Clock_1 = __importDefault(require("../Clock"));
const Tabs_1 = __importDefault(require("../Tabs"));
const Tab_1 = __importDefault(require("../Tab"));
const useMediaQuery_1 = __importDefault(require("../useMediaQuery"));
const DatePicker_1 = require("../DatePicker/DatePicker");
const utils_2 = require("../utils");
const useStyle = (0, style_react_1.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',
'& .amaui-TextField-helper-text': {
color: theme.palette.text.default.primary
}
},
input_size_small: {
maxWidth: '72px',
'& .amaui-TextField-input-wrapper': {
paddingInline: '0px',
paddingBlock: `${theme.methods.space.value(1, 'px')} ${theme.methods.space.value(0.5, 'px')}`,
height: '64px'
},
'& .amaui-TextField-input': Object.assign(Object.assign({}, theme.typography.values.d3), { lineHeight: '1', textAlign: 'center' }),
'& .amaui-TextField-footer': {
marginTop: '4px',
padding: '0px'
}
},
input_size_regular: {
maxWidth: '96px',
'& .amaui-TextField-input-wrapper': {
paddingInline: '0px',
paddingBlock: `${theme.methods.space.value(1.5, 'px')} ${theme.methods.space.value(1, 'px')}`,
height: '72px'
},
'& .amaui-TextField-input': Object.assign(Object.assign({}, theme.typography.values.d2), { lineHeight: '1', textAlign: 'center' }),
'& .amaui-TextField-footer': {
marginTop: '8px',
padding: '0px'
}
},
input_size_large: {
maxWidth: '120px',
'& .amaui-TextField-input-wrapper': {
paddingInline: '0px',
paddingBlock: `${theme.methods.space.value(2, 'px')} ${theme.methods.space.value(1.5, 'px')}`,
height: '80px'
},
'& .amaui-TextField-input': Object.assign(Object.assign({}, theme.typography.values.d1), { lineHeight: '1', textAlign: 'center' }),
'& .amaui-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',
'& .amaui-Button-label': Object.assign(Object.assign({}, theme.typography.values.d3), { lineHeight: '1' })
},
button_size_regular: {
height: '72px',
width: '96px',
'& .amaui-Button-label': Object.assign(Object.assign({}, theme.typography.values.d2), { lineHeight: '1' })
},
button_size_large: {
height: '96px',
width: '110px',
'& .amaui-Button-label': Object.assign(Object.assign({}, 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: 'amaui-TimePicker' });
const TimePicker = react_1.default.forwardRef((props__, ref) => {
const theme = (0, style_react_1.useAmauiTheme)();
const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.amauiTimePicker) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props__)); }, [props__]);
const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
const IconButton = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.IconButton) || IconButton_1.default; }, [theme]);
const AdvancedTextField = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.AdvancedTextField) || AdvancedTextField_1.default; }, [theme]);
const Modal = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Modal) || Modal_1.default; }, [theme]);
const ClickListener = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.ClickListener) || ClickListener_1.default; }, [theme]);
const Tooltip = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Tooltip) || Tooltip_1.default; }, [theme]);
const Surface = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Surface) || Surface_1.default; }, [theme]);
const Type = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Type) || Type_1.default; }, [theme]);
const ToggleButton = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.ToggleButton) || ToggleButton_1.default; }, [theme]);
const ToggleButtons = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.ToggleButtons) || ToggleButtons_1.default; }, [theme]);
const Button = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Button) || Button_1.default; }, [theme]);
const Slide = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Slide) || Slide_1.default; }, [theme]);
const Clock = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Clock) || Clock_1.default; }, [theme]);
const Tab = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Tab) || Tab_1.default; }, [theme]);
const Tabs = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Tabs) || Tabs_1.default; }, [theme]);
const { 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 = 'Select time', selectModalSubHeadingTextRange = `Select from${DatePicker_1.SEPARATOR}to time`, inputModalSubHeadingText = 'Enter time', inputModalSubHeadingTextRange = `Enter from${DatePicker_1.SEPARATOR}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_ = IconMaterialScheduleW100_1.default, IconEnter = IconMaterialKeyboardAltW100_1.default, WrapperProps, MainProps, ModalProps, MiddleProps, ButtonProps, TooltipProps, ToggleButtonsProps, ToggleButtonProps, IconButtonProps, InputProps, ClockProps, TabsProps, TabFromProps, TabToProps, AdvancedTextFieldProps, IconProps, className } = props, other = __rest(props, ["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"]);
const { classes } = useStyle();
const refs = {
root: react_1.default.useRef(undefined),
mode: react_1.default.useRef(undefined),
value: react_1.default.useRef(undefined),
dayTime: react_1.default.useRef(undefined)
};
const keys = react_1.default.useMemo(() => {
const result = [];
const items = [switch__, orientation_, autoNext_, autoCloseOnLast_];
items.forEach(item => {
if ((0, utils_1.is)('object', item))
Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key => result.push(key));
});
return (0, utils_1.unique)(result);
}, [switch__, orientation_, autoNext_, autoCloseOnLast_]);
const breakpoints = {};
keys.forEach(key => {
breakpoints[key] = (0, useMediaQuery_1.default)(theme.breakpoints.media[key], { element: refs.root.current });
});
const switch_ = (0, utils_2.valueBreakpoints)(switch__, true, breakpoints, theme);
const orientation = (0, utils_2.valueBreakpoints)(orientation_, 'vertical', breakpoints, theme);
const autoNext = (0, utils_2.valueBreakpoints)(autoNext_, undefined, breakpoints, theme);
const autoCloseOnLast = (0, utils_2.valueBreakpoints)(autoCloseOnLast_, undefined, breakpoints, theme);
const touch = (0, useMediaQuery_1.default)('(pointer: coarse)', { element: refs.root.current });
const [value, setValue] = react_1.default.useState(() => {
const valueResult = (valueDefault !== undefined ? valueDefault : value_) || (now && (range ? [new date_1.AmauiDate(), new date_1.AmauiDate()] : [new date_1.AmauiDate()]));
return ((0, utils_1.is)('array', valueResult) ? valueResult : [valueResult]).filter(Boolean);
});
const [selecting, setSelecting] = react_1.default.useState(() => {
const valueResult = (selectingDefault !== undefined ? selectingDefault : selecting_) || ['hour', 'hour'];
return ((0, utils_1.is)('array', valueResult) ? valueResult : [valueResult]).filter(Boolean);
});
const [open, setOpen] = react_1.default.useState(false);
const [mode, setMode] = react_1.default.useState((touch ? openMobile : openDesktop) || 'select');
const [error, setError] = react_1.default.useState(false);
const [dayTime, setDayTime] = react_1.default.useState(Array.from({ length: 2 }).map(item => (0, date_1.format)(new date_1.AmauiDate(), 'a')));
const [tab, setTab] = react_1.default.useState(0);
refs.value.current = value;
refs.mode.current = mode;
refs.dayTime.current = dayTime;
const valueToInput = react_1.default.useCallback((valueNew = refs.value.current) => {
let result = '';
const [from, to] = (0, utils_1.is)('array', valueNew) ? valueNew : [valueNew];
if (!(from || to))
return '';
const method = (item) => {
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_1.format)(item, formatValue);
};
result += `${method(from)}`;
if (range && to)
result += `${DatePicker_1.SEPARATOR}${method(to)}`;
return result;
}, [value, format, hour, minute, second, range]);
const [input, setInput] = react_1.default.useState(valueToInput());
let version = version_;
if (version === 'auto') {
if (touch)
version = 'mobile';
else
version = 'desktop';
}
const onUpdateValue = (valueNew_) => {
const valueNew = (0, utils_1.is)('array', valueNew_) ? valueNew_ : [valueNew_];
// Update value
setValue(valueNew);
// Update input
setInput(valueToInput(valueNew));
// Update dayTime
setDayTime(valueNew.map(item => (0, date_1.format)(item, 'a')));
};
const errorCheck = react_1.default.useCallback((valueNew = value) => {
// Error
setError((valueNew || []).some((item, index) => !valid(item)));
}, [value]);
// Init
react_1.default.useEffect(() => {
// Error
errorCheck();
}, []);
// Value
react_1.default.useEffect(() => {
if (value_ !== undefined && value_ !== value)
onUpdateValue((((0, utils_1.is)('array', value_) ? value_ : [value_]).filter(Boolean)));
}, [value_]);
const onUpdate = react_1.default.useCallback((valueNew_) => {
const valueNew = resolve(valueNew_);
// Inner update
if (!props.hasOwnProperty('value'))
setValue(valueNew);
if ((0, utils_1.is)('function', onChange))
onChange(!range ? valueNew[0] : valueNew);
}, [value, range, onChange]);
const onUpdateSelecting = react_1.default.useCallback((valueNew_, index) => {
const valueNew = [...selecting];
valueNew[index] = valueNew_;
// Inner update
if (!props.hasOwnProperty('selecting'))
setSelecting(valueNew);
if ((0, utils_1.is)('function', onChangeSelecting))
onChangeSelecting(valueNew);
}, [onChangeSelecting]);
const valid = react_1.default.useCallback((...args) => {
if ((0, utils_1.is)('function', valid_))
return valid_(...args);
const amauiDate = args[0];
if (min || max || validate) {
let response = true;
if ((0, utils_1.is)('function', validate))
response = validate(amauiDate);
if (min !== undefined)
response = response && (0, date_1.is)(amauiDate, 'after or same', min);
if (max !== undefined)
response = response && (0, date_1.is)(amauiDate, 'before or same', max);
return response;
}
return true;
}, [valid_, min, max, validate]);
const textToAmauiDate = react_1.default.useCallback((valueNew) => {
const [times, dayTime_] = (valueNew || '').split(' ');
const values = times.split(':');
let valueTime;
let amauiDate = new date_1.AmauiDate();
if (hour) {
valueTime = values[0];
if ((0, utils_1.is)('string', valueTime) && valueTime.startsWith('0'))
valueTime = valueTime.slice(1);
valueTime = +valueTime;
amauiDate = (0, date_1.set)((format === '12' && dayTime_ === 'pm') ? valueTime + 12 : valueTime, 'hour', amauiDate);
}
if (minute) {
valueTime = values[!hour ? 0 : 1];
if ((0, utils_1.is)('string', valueTime) && valueTime.startsWith('0'))
valueTime = valueTime.slice(1);
valueTime = +valueTime;
amauiDate = (0, date_1.set)(valueTime, 'minute', amauiDate);
}
if (second) {
valueTime = values[!(hour && minute) ? 0 : !hour ? 1 : 2];
if ((0, utils_1.is)('string', valueTime) && valueTime.startsWith('0'))
valueTime = valueTime.slice(1);
valueTime = +valueTime;
amauiDate = (0, date_1.set)(valueTime, 'second', amauiDate);
}
return amauiDate;
}, [format, hour, minute, second]);
const onInputModalChange = react_1.default.useCallback((valueNew, unit, index) => {
let valueTime = valueNew;
if ((0, utils_1.is)('string', valueTime) && valueTime.startsWith('0'))
valueTime = valueTime.slice(1);
valueTime = +valueTime;
value[index] = (0, date_1.set)(valueTime, unit || selecting[index], value[index]);
(!actions_ ? onUpdate : setValue)(resolve(value));
}, [value, actions_, selecting]);
const resolve = react_1.default.useCallback((valueNew = refs.value.current, dayTimeNew = refs.dayTime.current) => {
const values = valueNew.filter(Boolean).map((item, index) => {
// Resolve the range value
const valueHour = item.hour;
if (format === '12') {
if (dayTimeNew[index] === 'am' && valueHour > 12)
return (0, date_1.set)(valueHour - 12, 'hour', item);
if (dayTimeNew[index] === 'pm' && valueHour < 12)
return (0, date_1.set)(valueHour + 12, 'hour', item);
}
return item;
});
return values;
}, [value, dayTime, format]);
const updateDayTime = react_1.default.useCallback((valueNew_, index) => {
const valueNew = valueNew_[0];
// Update dayTime
const dayTimeNew = [...dayTime];
dayTimeNew[index] = valueNew;
refs.dayTime.current = dayTimeNew;
setDayTime(dayTimeNew);
(!actions_ ? onUpdate : setValue)(resolve(refs.value.current));
}, [value, actions_, dayTime, format]);
const inputToValue = react_1.default.useCallback((valueNew_ = input) => {
let valueNew = valueNew_;
let [from, to] = valueNew.split(DatePicker_1.SEPARATOR);
from = textToAmauiDate(from);
if (to)
to = textToAmauiDate(to);
valueNew = [from, to].filter(Boolean).filter((item) => item === null || item === void 0 ? void 0 : item.valid);
return valueNew;
}, [input]);
const onInputChange = react_1.default.useCallback((valueNew_) => {
const valueNew = inputToValue(valueNew_);
const validValues = valueNew.every(item => item.valid);
// Only update values if input is valid
// format used to make the value
if (validValues) {
// Error
errorCheck(valueNew);
// Update value
onUpdate(valueNew);
}
if (!valueNew_) {
onUpdate([null, null]);
}
// Update input for free typing
setInput(valueNew_);
}, []);
const onChangeClock = react_1.default.useCallback((valueNew_, index = 0) => {
const valueNew = [...value];
if (valueNew_ !== value[index]) {
valueNew[index] = valueNew_;
(!actions_ ? onUpdate : setValue)(resolve(valueNew));
// Error
errorCheck(valueNew);
}
}, [value, actions_]);
const onChangeSelectingClock = react_1.default.useCallback((valueNew, index = 0) => {
const selectingValue = selecting;
selectingValue[index] = valueNew;
if (valueNew !== selecting[0])
setSelecting([...selectingValue]);
}, [selecting]);
const onDoneSelecting = react_1.default.useCallback((valueNew, 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();
}
}
}, [mode, autoCloseOnLast, hour, minute, second]);
const onMode = react_1.default.useCallback(() => {
setMode((version === 'mobile' ? openMobile : openDesktop) || 'select');
}, [version, openMobile, openDesktop]);
const onModeSwitch = react_1.default.useCallback(() => {
setMode(refs.mode.current === 'select' ? 'input' : 'select');
}, []);
const onOpen = react_1.default.useCallback(() => {
onMode();
setOpen(previous => !previous);
}, [open, openMobile, version]);
const onClose = react_1.default.useCallback((event) => {
setOpen(false);
if ((0, utils_1.is)('function', onClose_))
onClose_(event);
}, [onClose_]);
const onReset = react_1.default.useCallback(() => {
const valueNew = inputToValue();
// Update value
onUpdate(valueNew);
// Update dayTime
setDayTime(valueNew.map(item => (0, date_1.format)(item, 'a')));
}, [input]);
const onToday = react_1.default.useCallback((event) => {
const valueNew = [new date_1.AmauiDate()];
if (range)
valueNew.push(new date_1.AmauiDate());
// Update value
onUpdate(valueNew);
// Update input
setInput(valueToInput(valueNew));
// Update dayTime
setDayTime(valueNew.map(item => (0, date_1.format)(item, 'a')));
onClose(event);
if ((0, utils_1.is)('function', onToday_))
onToday_(event);
}, [input, range, onToday_]);
const onClear = react_1.default.useCallback((event) => {
const valueNew = [];
// Update value
onUpdate(valueNew);
// Update input
setInput(valueToInput(valueNew));
// Update dayTime
setDayTime(valueNew.map(item => (0, date_1.format)(item, 'a')));
onClose(event);
if ((0, utils_1.is)('function', onClear_))
onClear_(event);
}, [onClear_]);
const onOk = react_1.default.useCallback((event) => {
// Error
errorCheck();
// Update value
onUpdate(refs.value.current);
// Update input
setInput(valueToInput(refs.value.current));
// Update dayTime
setDayTime(refs.value.current.map(item => (0, date_1.format)(item, 'a')));
onClose(event);
if ((0, utils_1.is)('function', onOk_))
onOk_(event);
}, [value, onOk_]);
const onCancel = react_1.default.useCallback((event) => {
onReset();
onClose(event);
if ((0, utils_1.is)('function', onCancel_))
onCancel_(event);
}, [input, onCancel_]);
const mask = [];
let placeholder = '';
if (hour) {
if (format === '12') {
mask.push({ pattern: '[0-1]' }, (item, result, valueInput) => /^([0][0-9]|1[0-2]).*/.test(valueInput));
}
if (format === '24') {
mask.push({ pattern: '[0-2]' }, (item, result, valueInput) => /^([01][0-9]|2[0-3]).*/.test(valueInput));
}
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_1.SEPARATOR_SYMBOL, ' ', ...mask);
placeholder += `${DatePicker_1.SEPARATOR}${placeholder}`;
}
placeholder = placeholder_ || placeholder;
const buttonProps = Object.assign({ color: 'inherit', version: 'text', size }, ButtonProps);
const iconButtonProps = Object.assign({ size }, IconButtonProps);
const clock = (index = 0) => ((0, jsx_runtime_1.jsx)(Clock, Object.assign({ size: size, format: format, value: value[index] || new date_1.AmauiDate(), dayTime: dayTime[index] || (0, date_1.format)(new date_1.AmauiDate(), 'a'), selecting: selecting[index], onChange: valueNew => onChangeClock(valueNew, index), onChangeSelecting: valueNew => onChangeSelectingClock(valueNew, index), onDoneSelecting: onDoneSelecting, renderValue: renderValue, valid: valid, hour: hour, minute: minute, second: second, autoNext: autoNext, disabled: disabled }, ClockProps)));
const moreProps = {};
if (version === 'desktop') {
moreProps.end = ((0, jsx_runtime_1.jsx)(IconButton, Object.assign({ tonal: tonal, color: color, size: size, version: 'text', onClick: onOpen, "aria-label": 'Choose time', disabled: disabled || readOnly }, iconButtonProps, { children: (0, jsx_runtime_1.jsx)(Icon_, Object.assign({}, IconProps)) })));
}
const makeInputs = (index = 0) => {
const inputProps = Object.assign({ tonal,
color, version: 'outlined', size, className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('TimePicker', theme) && [
'amaui-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, style_react_1.classNames)([
(0, utils_2.staticClassName)('TimePicker', theme) && [
'amaui-TimePicker-button'
],
classes.button,
classes[`button_size_${size}`]
]),
style: {
color: theme.palette.text.default.primary
}
};
const separator = ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: size === 'large' ? 'd1' : size === 'regular' ? 'd2' : 'd3', className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('TimePicker', theme) && [
'amaui-TimePicker-input-separator'
],
classes.inputSeparator
]), style: Object.assign({}, (mode !== 'select' && {
marginTop: -24
})) }, { children: ":" })));
const buttons = [];
const inputs = [];
if (hour) {
buttons.push((0, jsx_runtime_1.jsx)(Button, Object.assign({}, buttonProps_, { selected: selecting[index] === 'hour', onClick: () => onUpdateSelecting('hour', index) }, { children: (0, date_1.format)(value[index], format === '12' ? 'hh' : 'HH') })));
inputs.push((0, jsx_runtime_1.jsx)(AdvancedTextField, Object.assign({ helperText: 'Hour', value: (0, date_1.format)(value[index], format === '12' ? 'hh' : 'HH'), onChange: (valueNew) => onInputModalChange(valueNew, 'hour', index), placeholder: '00', mask: [
...(format === '12' ? [
{ pattern: '[0-1]' },
(item, result, valueInput) => /^([0][0-9]|1[0-2]).*/.test(valueInput)
] : [
{ pattern: '[0-2]' },
(item, result, valueInput) => /^([01][0-9]|2[0-3]).*/.test(valueInput)
])
] }, inputProps)));
}
if (minute) {
if (hour) {
buttons.push(separator);
inputs.push(separator);
}
buttons.push((0, jsx_runtime_1.jsx)(Button, Object.assign({}, buttonProps_, { selected: selecting[index] === 'minute', onClick: () => onUpdateSelecting('minute', index) }, { children: (0, date_1.format)(value[index], 'mm') })));
inputs.push((0, jsx_runtime_1.jsx)(AdvancedTextField, Object.assign({ helperText: 'Minute', value: (0, date_1.format)(value[index], 'mm'), onChange: (valueNew) => onInputModalChange(valueNew, 'minute', index), placeholder: '00', mask: [
{ pattern: '[0-5]' },
{ pattern: '[0-9]' }
] }, inputProps)));
}
if (second) {
if (hour || minute) {
buttons.push(separator);
inputs.push(separator);
}
buttons.push((0, jsx_runtime_1.jsx)(Button, Object.assign({}, buttonProps_, { selected: selecting[index] === 'second', onClick: () => onUpdateSelecting('second', index) }, { children: (0, date_1.format)(value[index], 'ss') })));
inputs.push((0, jsx_runtime_1.jsx)(AdvancedTextField, Object.assign({ helperText: 'Second', value: (0, date_1.format)(value[index], 'ss'), onChange: (valueNew) => onInputModalChange(valueNew, 'second', index), placeholder: '00', mask: [
{ pattern: '[0-5]' },
{ pattern: '[0-9]' }
] }, inputProps)));
}
return mode === 'select' ? buttons : inputs;
};
const toggleButtonProps = Object.assign(Object.assign({ size, icon: false }, ToggleButtonProps), { className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('TimePicker', theme) && [
'amaui-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, index) => ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 4.5, direction: orientationValue === 'vertical' ? 'column' : 'row', align: 'center', justify: 'unset', style: {
width: '100%'
} }, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: orientationValue === 'vertical' ? 1.5 : 2, direction: orientationValue === 'vertical' ? 'row' : 'column', justify: 'center', align: 'unset', className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('TimePicker', theme) && [
'amaui-TimePicker-inputs'
],
classes.inputs
]) }, { children: [(0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 0, direction: 'row', align: 'center', justify: 'center' }, { children: makeInputs(index) })), format === '12' && ((0, jsx_runtime_1.jsxs)(ToggleButtons, Object.assign({ version: 'outlined', size: size, orientation: orientationValue, value: dayTime[index] || (0, date_1.format)(new date_1.AmauiDate(), 'a'), onChange: valueNew => updateDayTime(valueNew, index), select: 'single', unselect: false }, ToggleButtonsProps, { className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('TimePicker', theme) && [
'amaui-TimePicker-toggle-buttons'
],
ToggleButtonsProps === null || ToggleButtonsProps === void 0 ? void 0 : ToggleButtonsProps.className,
classes.toggleButtons,
classes[`toggleButtons_orientation_${orientationValue}_size_${size}`]
]) }, { children: [(0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({ value: 'am' }, toggleButtonProps, { children: "AM" })), (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({ value: 'pm' }, toggleButtonProps, { children: "PM" }))] })))] })), mode === 'select' && clock(index)] }), index))));
const heading = mode === 'select' ? !range ? selectModalSubHeadingText : selectModalSubHeadingTextRange : !range ? inputModalSubHeadingText : inputModalSubHeadingTextRange;
const actions = ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ direction: 'row', align: 'center', justify: 'space-between', fullWidth: true, className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('TimePicker', theme) && [
'amaui-TimePicker-footer'
],
classes.footer,
classes[`footer_size_${size}`]
]) }, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: 'row', align: 'center' }, { children: [switch_ && ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ label: mode === 'select' ? 'Enter time' : 'Select time' }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ tonal: tonal, color: 'inherit', size: size, onClick: onModeSwitch, "aria-label": mode === 'select' ? 'Enter time' : 'Select time' }, iconButtonProps, { children: mode === 'select' ? (0, jsx_runtime_1.jsx)(IconEnter, Object.assign({}, IconProps)) : (0, jsx_runtime_1.jsx)(Icon_, Object.assign({}, IconProps)) })) }))), today && ((0, jsx_runtime_1.jsx)(Button, Object.assign({ onClick: onToday, version: 'text', size: size }, buttonProps, { children: "Now" }))), clear && ((0, jsx_runtime_1.jsx)(Button, Object.assign({ onClick: onClear, version: 'text', size: size }, buttonProps, { children: "Clear" })))] })), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: 'row', align: 'center' }, { children: [(0, jsx_runtime_1.jsx)(Button, Object.assign({ tonal: tonal, color: color, version: 'text', size: size, onClick: onCancel }, buttonProps, { children: "Cancel" })), (0, jsx_runtime_1.jsx)(Button, Object.assign({ tonal: tonal, color: color, version: 'text', size: size, onClick: onOk }, buttonProps, { children: "Ok" }))] }))] })));
const element = ((0, jsx_runtime_1.jsxs)(Surface, Object.assign({ gap: 0, direction: 'column', align: 'center', Component: Line }, MainProps, { className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('TimePicker', theme) && [
'amaui-TimePicker-main'
],
MainProps === null || MainProps === void 0 ? void 0 : MainProps.className,
classes.main,
classes[`main_size_${size}`]
]) }, { children: [heading_ && ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: size === 'large' ? 'l1' : size === 'regular' ? 'l2' : 'l3', className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('TimePicker', theme) && [
'amaui-TimePicker-heading'
],
classes.heading,
classes[`heading_size_${size}`]
]) }, { children: heading }))), range && ((0, jsx_runtime_1.jsxs)(Tabs, Object.assign({ justify: 'center', initialLineUpdateTimeout: 340, value: tab, valueDefault: tab, onChange: setTab }, TabsProps, { className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('TimePicker', theme) && [
'amaui-TimePicker-tabs'
],
TabsProps === null || TabsProps === void 0 ? void 0 : TabsProps.className,
classes.tabs,
heading_ && classes.tabs_padding
]) }, { children: [(0, jsx_runtime_1.jsx)(Tab, Object.assign({ value: 0, label: 'From' }, TabFromProps)), (0, jsx_runtime_1.jsx)(Tab, Object.assign({ value: 1, label: 'To' }, TabToProps))] }))), (0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 0, className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('TimePicker', theme) && [
'amaui-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 ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: 'column', fullWidth: fullWidth }, WrapperProps, { className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('TimePicker', theme) && [
'amaui-TimePicker-root',
`amaui-TimePicker-version-${version}`,
`amaui-TimePicker-size-${size}`,
WrapperProps === null || WrapperProps === void 0 ? void 0 : WrapperProps.className,
readOnly && `amaui-TimePicker-read-only`,
disabled && `amaui-TimePicker-disabled`,
fullWidth && 'amaui-full-width'
],
className,
classes.root
]) }, { children: [(0, jsx_runtime_1.jsx)(AdvancedTextField, Object.assign({ rootRef: item => {
if (ref) {
if ((0, utils_1.is)('function', ref))
ref(item);
else
ref.current = item;
}
refs.root.current = item;
}, tonal: tonal, color: color, version: 'outlined', size: size, label: label, mask: mask, placeholder: placeholder, value: input, onChange: onInputChange, endVerticalAlign: 'center', error: error, fullWidth: fullWidth, readOnly: readOnly, disabled: disabled }, moreProps, other, AdvancedTextFieldProps)), version === 'mobile' && ((0, jsx_runtime_1.jsx)(Modal, Object.assign({ open: open, modalWrapperSurface: false, TransitionComponent: Slide, onClose: onClose }, ModalProps, { children: element }))), version === 'desktop' && ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ open: open, portal: true, anchorElement: refs.root.current, alignment: 'center', position: 'bottom', hover: false, focus: false, longPress: false, maxWidth: 'unset', noMargin: true, label: ((0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: onCancel, includeParentQueries: ['.amaui-TimePicker-main'] }, { children: element }))) }, TooltipProps)))] })));
});
TimePicker.displayName = 'amaui-TimePicker';
exports.default = TimePicker;