office-ui-fabric-react#IComboBoxOption TypeScript Examples

AppPicker = (props:IAppPickerProps) => {
    const [appContext] = useAppContext<IApplicationState, ActionType>();
    const [availableApps, setAvailableApps] = useState<IApp[]>([]);
    const [isLoading, setIsLoading] = useState<boolean>(true);
    const appsService = appContext.serviceScope.consume(AppsServiceKey);

    const loadAvailableApps = async () => {
        setIsLoading(true);
        try {
            const apps = await appsService.getAvailableApps();
            setAvailableApps(apps);
        } catch (error) {
            console.error(error);
        }
        setIsLoading(false);
    };

    const getAvailableApps = () => {
        if (isLoading) {
            return [{ key: loadingOptionKey, text: "Loading available apps..." }];
        }

        if (availableApps.length == 0) {
            return [{ key: noAvailableOptionKey, text: "No available apps in this tenant app catalog..." }];
        }

        return availableApps.map(hs => ({ key: hs.id, text: hs.title }));
    };

    const onValueChange = (ev: any, option: IComboBoxOption, index: number, value: string) => {
        if (option && option.key) {
            // Only if selected options is not the displayed "loading" or "no available apps"
            if ([loadingOptionKey, noAvailableOptionKey].indexOf(option.key.toString()) < 0) {
                props.onValueChanged(option.key.toString());
            }
        } else if (value) {
            props.onValueChanged(value);
        }
    };

    useEffect(() => {
        loadAvailableApps();
    }, []);

    return <ComboBox
        label={props.label}
        allowFreeform={true}
        autoComplete="off"
        selectedKey={props.value}
        options={getAvailableApps()}
        onChange={onValueChange}
    />;
}

HubSitePicker = (props: IHubSitePickerProps) => {

    const [appContext] = useAppContext<IApplicationState, ActionType>();
    const [availableHubSites, setAvailableHubSites] = useState<IHubSite[]>([]);
    const [isLoading, setIsLoading] = useState<boolean>(true);
    const hubSitesService = appContext.serviceScope.consume(HubSitesServiceKey);

    const loadHubSites = async () => {
        setIsLoading(true);
        try {
            const hubSites = await hubSitesService.getHubSites();
            setAvailableHubSites(hubSites);
        } catch (error) {
            console.error(error);
        }
        setIsLoading(false);
    };

    const getHubSites = () => {
        if (isLoading) {
            return [{ key: loadingOptionKey, text: "Loading available hub sites..." }];
        }

        if (availableHubSites.length == 0) {
            return [{ key: noAvailableOptionKey, text: "No available hub sites on this tenant..." }];
        }

        return availableHubSites.map(hs => ({ key: hs.id, text: hs.title }));
    };

    const onValueChange = (ev: any, option: IComboBoxOption, index: number, value: string) => {
        if (option && option.key) {
            // Only if selected options is not the displayed "loading" or "no available hub sites"
            if ([loadingOptionKey, noAvailableOptionKey].indexOf(option.key.toString()) < 0) {
                props.onValueChanged(option.key.toString());
            }
        } else if (value) {
            props.onValueChanged(value);
        }
    };

    useEffect(() => {
        loadHubSites();
    }, []);

    return <ComboBox
        label={props.label}
        allowFreeform={true}
        autoComplete="off"
        selectedKey={props.value}
        options={getHubSites()}
        onChange={onValueChange}
    />;
}

ThemePicker = (props: IThemePickerProps) => {
    const [appContext] = useAppContext<IApplicationState, ActionType>();
    const [availableCustomThemes, setAvailableCustomThemes] = useState<ITheme[]>([]);
    const [isLoading, setIsLoading] = useState<boolean>(true);
    const themesService = appContext.serviceScope.consume(ThemeServiceKey);

    const loadAvailableThemes = async () => {
        setIsLoading(true);
        try {
            const themes = await themesService.getCustomThemes();
            setAvailableCustomThemes(themes);
        } catch (error) {
            console.error(error);
        }
        setIsLoading(false);
    };

    const getAvailableThemes = () => {
        if (isLoading) {
            return [{ key: loadingOptionKey, text: "Loading available custom themes..." }];
        }

        if (availableCustomThemes.length == 0) {
            return [{ key: noAvailableOptionKey, text: "No available custom themes in this tenant..." }];
        }

        return availableCustomThemes.map(hs => ({ key: hs.name, text: hs.name }));
    };

    const onValueChange = (ev: any, option: IComboBoxOption, index: number, value: string) => {
        if (option && option.key) {
            // Only if selected options is not the displayed "loading" or "no available themes"
            if ([loadingOptionKey, noAvailableOptionKey].indexOf(option.key.toString()) < 0) {
                props.onValueChanged(option.key.toString());
            }
        } else if (value) {
            props.onValueChanged(value);
        }
    };

    useEffect(() => {
        loadAvailableThemes();
    }, []);

    return <ComboBox
        label={props.label}
        allowFreeform={true}
        autoComplete="off"
        selectedKey={props.value}
        options={getAvailableThemes()}
        onChange={onValueChange}
    />;
}

function DateTimePicker(props: DateTimePickerProps) {
  function getDatePickerStrings(): IDatePickerStrings {
    const localeData = moment.localeData();
    return {
      months: localeData.months(),
      shortMonths: localeData.monthsShort(),
      days: localeData.weekdays(),
      shortDays: localeData.weekdaysMin(),
      goToToday: translate('datePicker.goToToday'),
      prevMonthAriaLabel: translate('datePicker.previousMonth.ariaLabel'),
      nextMonthAriaLabel: translate('datePicker.nextMonth.ariaLabel'),
      prevYearAriaLabel: translate('datePicker.previousYear.ariaLabel'),
      nextYearAriaLabel: translate('datePicker.nextYear.ariaLabel'),
      closeButtonAriaLabel: translate('datePicker.close.ariaLabel'),
    };
  }

  function onDayPicked(date: Date | null | undefined) {
    const currentDateTime = moment(props.dateTime);

    const offsetFromStartOfDay = currentDateTime.diff(
      moment(currentDateTime).startOf('day')
    );
    const newDateTime = moment(date ?? currentDateTime)
      .startOf('day')
      .add(offsetFromStartOfDay);

    props.onTimeUpdated(newDateTime);
  }

  function onTimePicked(
    event: React.FormEvent<IComboBox>,
    option?: IComboBoxOption,
    index?: number,
    value?: string
  ) {
    const currentDateTimeStartOfDay = moment(props.dateTime).startOf('day');

    let newDateTime: moment.Moment;
    if (option) {
      const offsetFromStartOfDay = moment.duration(option.key, 'minutes');
      newDateTime = currentDateTimeStartOfDay.add(offsetFromStartOfDay);
    } else {
      // User entered a free-form string, try to parse it as a time
      const enteredTime = moment(value, timePickerFormat);
      if (enteredTime.isValid()) {
        const offsetFromStartOfDay = enteredTime.diff(
          moment(enteredTime).startOf('day')
        );
        newDateTime = currentDateTimeStartOfDay.add(offsetFromStartOfDay);
      } else {
        newDateTime = moment(props.dateTime);
      }
    }

    props.onTimeUpdated(newDateTime);
  }

  function onFormatDate(dateToFormat?: Date): string {
    return moment(dateToFormat).format(datePickerFormat);
  }

  function onParseDateFromString(value: string): Date {
    return moment(value, datePickerFormat).toDate();
  }

  const timeSuggestions = _.range(0, 1440, 30).map(minutes => {
    // if the selection is before the min value
    const projectedEndTime = moment(props.dateTime)
      .startOf('day')
      .add(moment.duration(minutes, 'minutes'));
    const isDisabled = moment(props.minDate).isAfter(projectedEndTime);
    const timeTag = moment()
      .startOf('day')
      .minutes(minutes)
      .format(timePickerFormat);
    const projectedDuration = moment.duration(
      moment(projectedEndTime).diff(props.minDate)
    );
    const projectedDurationString = _.trim(formatDuration(projectedDuration));

    return {
      key: minutes,
      text:
        props.includeDuration &&
        !isDisabled &&
        projectedDurationString.length > 0
          ? `${timeTag} (${projectedDurationString})`
          : timeTag,
      disabled: isDisabled
    };
  });

  return (
    <Stack horizontal>
      <DatePicker
        className="newMeetingDatePicker"
        borderless
        firstDayOfWeek={moment.localeData().firstDayOfWeek() as DayOfWeek}
        strings={getDatePickerStrings()}
        value={props.dateTime?.toDate()}
        formatDate={onFormatDate}
        parseDateFromString={onParseDateFromString}
        onSelectDate={onDayPicked}
        minDate={props.minDate?.toDate()}
      />
      <ComboBox
        className="newMeetingComboBox"
        styles={{ root: { maxHeight: '500px' } }}
        useComboBoxAsMenuWidth={!props.includeDuration}
        scrollSelectedToTop={true}
        allowFreeform={true}
        autoComplete="on"
        options={timeSuggestions}
        onChange={onTimePicked}
        text={props.dateTime?.format(timePickerFormat)}
      />
      {props.iconName === 'ReplyAlt' ? (
        <FontIcon className="newMeetingPickerIcon" iconName={props.iconName} />
      ) : (
        <Text className="newMeetingPickerIncrement" variant="smallPlus">
          {formatDuration(
            moment.duration(moment(props.dateTime).diff(moment(props.minDate)))
          )}
        </Text>
      )}
    </Stack>
  );
}