@talend/react-components
Version:
Set of react components.
155 lines (154 loc) • 6.92 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _reactDebounceInput = _interopRequireDefault(require("react-debounce-input"));
var _utils = require("@talend/utils");
var _translate = _interopRequireDefault(require("../../../../translate"));
var _Context = require("../../DateTime/Context");
var _constants = require("../../DateTime/constants");
var _TimePickerModule = _interopRequireDefault(require("./TimePicker.module.scss"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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); }
class TimePicker extends _react.PureComponent {
constructor(props) {
super(props);
const id = (0, _utils.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 === _constants.FIELD_HOURS) {
newValue.hours = inputValue.trim();
} else if (field === _constants.FIELD_MINUTES) {
newValue.minutes = inputValue.trim();
} else if (field === _constants.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__*/(0, _jsxRuntime.jsx)(_Context.DateTimeContext.Consumer, {
children: ({
errorManagement
}) => {
const {
onInputFocus,
hasError,
formMode,
hoursErrorId,
minutesErrorId,
secondsErrorId
} = errorManagement;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: (0, _classnames.default)('tc-date-picker-time', _TimePickerModule.default['time-picker']),
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("legend", {
children: [t('DATEPICKER_TIME', {
defaultValue: 'Time'
}), this.props.useUTC ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: _TimePickerModule.default.utc,
children: t('DATEPICKER_UTC', {
defaultValue: 'UTC'
})
}, "utc") : null]
}, "legend"), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
htmlFor: this.hourId,
className: "sr-only",
children: t('DATEPICKER_TIME_HOURS', {
defaultValue: 'hours'
})
}, "hour-label"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDebounceInput.default, {
id: this.hourId,
className: (0, _classnames.default)(_TimePickerModule.default['time-input'], {
[_TimePickerModule.default['time-error']]: hasError('INVALID_HOUR')
}),
value: this.props.value.hours,
tabIndex: tabIndex,
onChange: event => this.onChange(event, _constants.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__*/(0, _jsxRuntime.jsx)("hr", {}, "hr-minutes"), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
htmlFor: this.minuteId,
className: "sr-only",
children: t('DATEPICKER_TIME_MINUTES', {
defaultValue: 'minutes'
})
}, "minutes-label"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDebounceInput.default, {
id: this.minuteId,
className: (0, _classnames.default)(_TimePickerModule.default['time-input'], {
[_TimePickerModule.default['time-error']]: hasError('INVALID_MINUTES')
}),
value: this.props.value.minutes,
tabIndex: tabIndex,
onChange: event => this.onChange(event, _constants.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__*/(0, _jsxRuntime.jsx)("hr", {}, "hr-seconds"), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
htmlFor: this.secondId,
className: "sr-only",
children: this.props.t('DATEPICKER_TIME_SECONDS', {
defaultValue: 'Seconds'
})
}, "seconds-label"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDebounceInput.default, {
id: this.secondId,
className: (0, _classnames.default)(_TimePickerModule.default['time-input'], {
[_TimePickerModule.default['time-error']]: hasError('INVALID_SECONDS')
}),
value: this.props.value.seconds,
tabIndex: tabIndex,
onBlur: onInputFocus,
onFocus: event => onInputFocus(event, secondsErrorId),
onChange: event => this.onChange(event, _constants.FIELD_SECONDS),
placeholder: "SS",
"aria-required": formMode,
"aria-invalid": hasError('INVALID_SECONDS'),
"aria-describedby": secondsErrorId
}, "seconds-input")]]
});
}
});
}
}
_defineProperty(TimePicker, "defaultProps", {
value: {},
t: (0, _translate.default)()
});
_defineProperty(TimePicker, "propTypes", {
allowFocus: _propTypes.default.bool,
onChange: _propTypes.default.func.isRequired,
value: _propTypes.default.shape({
hours: _propTypes.default.string,
minutes: _propTypes.default.string,
seconds: _propTypes.default.string
}),
useSeconds: _propTypes.default.bool,
useUTC: _propTypes.default.bool,
t: _propTypes.default.func
});
var _default = exports.default = TimePicker;
//# sourceMappingURL=TimePicker.component.js.map