@carbon/ibm-products
Version:
Carbon for IBM Products
91 lines (87 loc) • 3.06 kB
JavaScript
/**
* Copyright IBM Corp. 2020, 2025
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import React__default, { useState, useEffect } from 'react';
import { TimePicker, TimePickerSelect, SelectItem } from '@carbon/react';
import PropTypes from '../../../../_virtual/index.js';
import { blockClass } from '../../utils/util.js';
var _SelectItem, _SelectItem2;
const ConditionBuilderItemTime = _ref => {
let {
onChange,
config,
conditionState
} = _ref;
const getInitialValue = itemType => {
const itemMap = {
time: 0,
dayZone: 1,
timeZone: 2
};
return conditionState.value !== 'INVALID' ? conditionState.value?.split(' ')[itemMap[itemType]] ?? undefined : undefined;
};
const initialTimeValue = getInitialValue('time');
const initialDayZone = getInitialValue('dayZone');
const initialTimeZone = getInitialValue('timeZone');
const [timeValue, setTimeValue] = useState(initialTimeValue);
const [dayZoneValue, setDayZoneValue] = useState(initialDayZone ?? 'AM');
const [timeZoneValue, setTimeZoneValue] = useState(initialTimeZone ?? config?.timeZones?.[0]);
useEffect(() => {
const timeToUpdate = `${timeValue ?? ''} ${dayZoneValue ?? ''} ${timeZoneValue ?? ''}`;
onChange(timeValue ? timeToUpdate : 'INVALID');
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [timeValue, dayZoneValue, timeZoneValue]);
const setTimeZone = evt => {
setTimeZoneValue(evt.target.value);
};
const setDayZone = evt => {
setDayZoneValue(evt.target.value);
};
const setTime = evt => {
setTimeValue(evt.target.value);
};
return /*#__PURE__*/React__default.createElement("div", {
className: `${blockClass}__item-time`
}, /*#__PURE__*/React__default.createElement(TimePicker, {
defaultValue: initialTimeValue,
id: "time-picker",
labelText: "Select a time",
onChange: setTime
}, /*#__PURE__*/React__default.createElement(TimePickerSelect, {
id: "time-picker-day-zone",
defaultValue: initialDayZone,
onChange: setDayZone
}, _SelectItem || (_SelectItem = /*#__PURE__*/React__default.createElement(SelectItem, {
value: "AM",
text: "AM"
})), _SelectItem2 || (_SelectItem2 = /*#__PURE__*/React__default.createElement(SelectItem, {
value: "PM",
text: "PM"
}))), /*#__PURE__*/React__default.createElement(TimePickerSelect, {
id: "time-picker-time-zone",
defaultValue: initialTimeZone,
onChange: setTimeZone
}, config?.timeZones?.map((timeZone, index) => /*#__PURE__*/React__default.createElement(SelectItem, {
key: index,
value: timeZone,
text: timeZone
})))));
};
ConditionBuilderItemTime.propTypes = {
/**
* current condition object
*/
conditionState: PropTypes.object,
/**
* current config object that this property is part of
*/
config: PropTypes.object,
/**
* callback to update state oin date change
*/
onChange: PropTypes.func
};
export { ConditionBuilderItemTime };