@talend/react-components
Version:
Set of react components.
148 lines • 5.99 kB
JavaScript
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import { PureComponent } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import DebounceInput from 'react-debounce-input';
import { randomUUID } from '@talend/utils';
import getDefaultT from '../../../../translate';
import { DateTimeContext } from '../../DateTime/Context';
import { FIELD_HOURS, FIELD_MINUTES, FIELD_SECONDS } from '../../DateTime/constants';
import theme from './TimePicker.module.scss';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
class TimePicker extends PureComponent {
constructor(props) {
super(props);
const id = randomUUID();
this.hourId = `${id}-hour`;
this.minuteId = `${id}-minute`;
this.secondId = `${id}-second`;
this.onChange = this.onChange.bind(this);
}
onChange(event, field) {
const inputValue = event.target.value;
const newValue = {
...this.props.value
};
if (field === FIELD_HOURS) {
newValue.hours = inputValue.trim();
} else if (field === FIELD_MINUTES) {
newValue.minutes = inputValue.trim();
} else if (field === FIELD_SECONDS) {
newValue.seconds = inputValue.trim();
}
this.props.onChange(event, newValue, field);
}
render() {
const {
t
} = this.props;
const tabIndex = this.props.allowFocus ? 0 : -1;
return /*#__PURE__*/_jsx(DateTimeContext.Consumer, {
children: ({
errorManagement
}) => {
const {
onInputFocus,
hasError,
formMode,
hoursErrorId,
minutesErrorId,
secondsErrorId
} = errorManagement;
return /*#__PURE__*/_jsxs("div", {
className: classNames('tc-date-picker-time', theme['time-picker']),
children: [/*#__PURE__*/_jsxs("legend", {
children: [t('DATEPICKER_TIME', {
defaultValue: 'Time'
}), this.props.useUTC ? /*#__PURE__*/_jsx("div", {
className: theme.utc,
children: t('DATEPICKER_UTC', {
defaultValue: 'UTC'
})
}, "utc") : null]
}, "legend"), /*#__PURE__*/_jsx("label", {
htmlFor: this.hourId,
className: "sr-only",
children: t('DATEPICKER_TIME_HOURS', {
defaultValue: 'hours'
})
}, "hour-label"), /*#__PURE__*/_jsx(DebounceInput, {
id: this.hourId,
className: classNames(theme['time-input'], {
[theme['time-error']]: hasError('INVALID_HOUR')
}),
value: this.props.value.hours,
tabIndex: tabIndex,
onChange: event => this.onChange(event, FIELD_HOURS),
onBlur: onInputFocus,
onFocus: event => onInputFocus(event, hoursErrorId),
placeholder: "HH",
"aria-required": formMode,
"aria-invalid": hasError('INVALID_HOUR'),
"aria-describedby": hoursErrorId
}, "hour-input"), /*#__PURE__*/_jsx("hr", {}, "hr-minutes"), /*#__PURE__*/_jsx("label", {
htmlFor: this.minuteId,
className: "sr-only",
children: t('DATEPICKER_TIME_MINUTES', {
defaultValue: 'minutes'
})
}, "minutes-label"), /*#__PURE__*/_jsx(DebounceInput, {
id: this.minuteId,
className: classNames(theme['time-input'], {
[theme['time-error']]: hasError('INVALID_MINUTES')
}),
value: this.props.value.minutes,
tabIndex: tabIndex,
onChange: event => this.onChange(event, FIELD_MINUTES),
onBlur: onInputFocus,
onFocus: event => onInputFocus(event, minutesErrorId),
placeholder: "MM",
"aria-required": formMode,
"aria-invalid": hasError('INVALID_MINUTES'),
"aria-describedby": minutesErrorId
}, "minutes-input"), this.props.useSeconds && [/*#__PURE__*/_jsx("hr", {}, "hr-seconds"), /*#__PURE__*/_jsx("label", {
htmlFor: this.secondId,
className: "sr-only",
children: this.props.t('DATEPICKER_TIME_SECONDS', {
defaultValue: 'Seconds'
})
}, "seconds-label"), /*#__PURE__*/_jsx(DebounceInput, {
id: this.secondId,
className: classNames(theme['time-input'], {
[theme['time-error']]: hasError('INVALID_SECONDS')
}),
value: this.props.value.seconds,
tabIndex: tabIndex,
onBlur: onInputFocus,
onFocus: event => onInputFocus(event, secondsErrorId),
onChange: event => this.onChange(event, FIELD_SECONDS),
placeholder: "SS",
"aria-required": formMode,
"aria-invalid": hasError('INVALID_SECONDS'),
"aria-describedby": secondsErrorId
}, "seconds-input")]]
});
}
});
}
}
_defineProperty(TimePicker, "defaultProps", {
value: {},
t: getDefaultT()
});
_defineProperty(TimePicker, "propTypes", {
allowFocus: PropTypes.bool,
onChange: PropTypes.func.isRequired,
value: PropTypes.shape({
hours: PropTypes.string,
minutes: PropTypes.string,
seconds: PropTypes.string
}),
useSeconds: PropTypes.bool,
useUTC: PropTypes.bool,
t: PropTypes.func
});
export default TimePicker;
//# sourceMappingURL=TimePicker.component.js.map