@chayns-components/date
Version:
A set of beautiful React components for developing your own applications with chayns.
98 lines • 3.12 kB
JavaScript
import { Icon, NumberInput } from '@chayns-components/core';
import React, { useCallback, useMemo, useState } from 'react';
import { OpeningTimesButtonType } from '../../../../types/openingTimes';
import { StyledOpeningInput, StyledOpeningInputButtonWrapper, StyledOpeningInputPseudoButton, StyledOpeningInputText, StyledOpeningInputWrapper } from './OpeningInput.styles';
const OpeningInput = ({
end,
start,
isDisabled,
isInvalid,
buttonType,
onRemove,
onAdd,
onChange,
id
}) => {
const [startTime, setStartTime] = useState(start);
const [endTime, setEndTime] = useState(end);
const button = useMemo(() => {
switch (buttonType) {
case OpeningTimesButtonType.ADD:
return /*#__PURE__*/React.createElement(StyledOpeningInputButtonWrapper, {
onClick: onAdd
}, /*#__PURE__*/React.createElement(Icon, {
icons: ['ts-plus'],
size: 15
}));
case OpeningTimesButtonType.REMOVE:
return /*#__PURE__*/React.createElement(StyledOpeningInputButtonWrapper, {
onClick: onRemove
}, /*#__PURE__*/React.createElement(Icon, {
icons: ['ts-wrong'],
size: 15
}));
default:
return /*#__PURE__*/React.createElement(StyledOpeningInputPseudoButton, null);
}
}, [buttonType, onAdd, onRemove]);
const handleStartTimeBlur = useCallback((value, isTimeInvalid) => {
if (isTimeInvalid || typeof value === 'number' || !value) {
return;
}
setStartTime(value);
onChange({
end: endTime,
start: value,
id
});
}, [endTime, id, onChange]);
const handleEndTimeBlur = useCallback((value, isTimeInvalid) => {
if (isTimeInvalid || typeof value === 'number' || !value) {
return;
}
setEndTime(value);
onChange({
end: value,
start: startTime,
id
});
}, [id, onChange, startTime]);
return useMemo(() => /*#__PURE__*/React.createElement(StyledOpeningInput, {
key: id,
animate: {
opacity: 1,
height: 'auto'
},
initial: {
opacity: 0,
height: 0
},
exit: {
opacity: 0,
height: 0
},
transition: {
duration: 0.2,
type: 'tween'
}
}, /*#__PURE__*/React.createElement(StyledOpeningInputWrapper, null, /*#__PURE__*/React.createElement(NumberInput, {
shouldShowOnlyBottomBorder: true,
isTimeInput: true,
isInvalid: isInvalid,
value: startTime,
onBlur: handleStartTimeBlur,
isDisabled: isDisabled
})), /*#__PURE__*/React.createElement(StyledOpeningInputText, {
$isDisabled: isDisabled
}, "-"), /*#__PURE__*/React.createElement(StyledOpeningInputWrapper, null, /*#__PURE__*/React.createElement(NumberInput, {
shouldShowOnlyBottomBorder: true,
isTimeInput: true,
isInvalid: isInvalid,
value: endTime,
onBlur: handleEndTimeBlur,
isDisabled: isDisabled
})), button), [button, endTime, handleEndTimeBlur, handleStartTimeBlur, id, isDisabled, isInvalid, startTime]);
};
OpeningInput.displayName = 'OpeningInput';
export default OpeningInput;
//# sourceMappingURL=OpeningInput.js.map