How to use @commercetools-uikit/calendar-time-utils - 10 common examples

handleTimeChange = event => {
    const parsedTime = parseTime(event.target.value);

    this.setState({ timeString: event.target.value });

    // We can't update the parent when there is no value
    if (this.props.value === '') return;

    let date = getStartOf(this.props.value, this.props.timeZone);
    if (parsedTime) {
      date = changeTime(date, this.props.timeZone, parsedTime);
    }
    this.emit(date);
  };
  emit = value =>

handleTimeChange = event => {
    const parsedTime = parseTime(event.target.value);

    this.setState({ timeString: event.target.value });

    // We can't update the parent when there is no value
    if (this.props.value === '') return;

    let date = getStartOf(this.props.value, this.props.timeZone);
    if (parsedTime) {
      date = changeTime(date, this.props.timeZone, parsedTime);
    }
    this.emit(date);
  };
  emit = value =>

onKeyDown: event => {
                      // parse input when user presses enter on regular input,
                      // close menu and notify parent
                      if (event.key === 'Enter' && highlightedIndex === null) {
                        preventDownshiftDefault(event);

                        const parsedDate = parseInputText(
                          inputValue,
                          this.props.intl.locale,
                          this.props.timeZone
                        );

                        this.emit(parsedDate);

                        closeMenu();
                      }
                    },
                    onFocus: this.props.isReadOnly ? undefined : openMenu,

const calendarItems = createCalendarItems(
              this.state.calendarDate,
              this.state.timeString,
              this.props.intl,
              this.props.timeZone
            );

            const paddingDayCount = getPaddingDayCount(
              this.state.calendarDate,
              this.props.intl.locale,
              this.props.timeZone
            );
            const paddingDays = Array(paddingDayCount).fill();

            const weekdays = getWeekdayNames(this.props.intl.locale);
            const today = getToday();

            const isTimeInputVisible =
              Boolean(this.props.value) && this.props.value !== '';

            return (
              <div>
                 {
                      // we remove the highlight so that the user can use the</div>

return {
                    inputValue: changes.inputValue || prevState.inputValue,
                    startDate: changes.isOpen ? prevState.startDate : null,
                    // set time input value to time from value when menu is opened
                    timeString:
                      changes.isOpen && this.props.value !== ''
                        ? formatTime(
                            this.props.value,
                            this.props.intl.locale,
                            this.props.timeZone
                          )
                        : '',
                    // ensure calendar always opens on selected item, or on
                    // current month when there is no selected item
                    calendarDate:
                      this.props.value === '' ? getToday() : this.props.value,
                  };
                }

                if (changes.hasOwnProperty('highlightedIndex')) {
                  return { highlightedIndex: changes.highlightedIndex };
                }
                return null;
              },
              () => {

this.props.timeZone
                  );
                  return {
                    suggestedItems,
                    highlightedIndex: suggestedItems.length > 0 ? 0 : null,
                  };
                }

                if (changes.hasOwnProperty('isOpen')) {
                  return {
                    inputValue: changes.inputValue || prevState.inputValue,
                    startDate: changes.isOpen ? prevState.startDate : null,
                    // set time input value to time from value when menu is opened
                    timeString:
                      changes.isOpen && this.props.value !== ''
                        ? formatTime(
                            this.props.value,
                            this.props.intl.locale,
                            this.props.timeZone
                          )
                        : '',
                    // ensure calendar always opens on selected item, or on
                    // current month when there is no selected item
                    calendarDate:
                      this.props.value === '' ? getToday() : this.props.value,
                  };
                }

                if (changes.hasOwnProperty('highlightedIndex')) {
                  return { highlightedIndex: changes.highlightedIndex };
                }
                return null;

render() {
    return (
      
         {
            if (activationTypes.includes(changes.type)) {
              return { ...changes, isOpen: true };
            }

            return changes;
          }}
          onStateChange={changes => {
            /* eslint-disable no-prototype-builtins */
            this.setState(

if (activationTypes.includes(changes.type)) {
                  return {
                    startDate: changes.isOpen ? prevState.startDate : null,
                    inputValue: changes.inputValue || prevState.inputValue,
                    timeString: changes.selectedItem
                      ? formatTime(
                          changes.selectedItem,
                          this.props.intl.locale,
                          this.props.timeZone
                        )
                      : prevState.timeString,
                  };
                }

                if (changes.hasOwnProperty('inputValue')) {
                  const suggestedItems = createSuggestedItems(
                    changes.inputValue,
                    this.props.timeZone
                  );
                  return {
                    suggestedItems,
                    highlightedIndex: suggestedItems.length > 0 ? 0 : null,
                  };
                }

                if (changes.hasOwnProperty('isOpen')) {
                  return {
                    inputValue: changes.inputValue || prevState.inputValue,
                    startDate: changes.isOpen ? prevState.startDate : null,
                    // set time input value to time from value when menu is opened
                    timeString:
                      changes.isOpen && this.props.value !== ''

this.setState(() => {
                        if (!parsedTime) return { timeString: '' };

                        let date = getToday(this.props.timeZone);
                        if (parsedTime) {
                          date = changeTime(
                            date,
                            this.props.timeZone,
                            parsedTime
                          );
                        }
                        return {
                          timeString: formatTime(
                            date,
                            this.props.intl.locale,
                            this.props.timeZone
                          ),
                        };
                      });
                    },

showToday = () => {
    const today = getToday(this.props.timeZone);
    this.setState(
      prevState => ({
        calendarDate: today,
        highlightedIndex:
          prevState.suggestedItems.length +
          getDateInMonth(today, this.props.timeZone) -
          1,
      }),
      () => this.inputRef.current.focus()
    );
  };
  handleBlur = () => {