office-ui-fabric-react#ComboBox TypeScript Examples

The following examples show how to use office-ui-fabric-react#ComboBox. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: AppPicker.tsx    From sp-site-designs-studio with MIT License 5 votes vote down vote up 
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}
    />;
}
Example #2
Source File: HubSitePicker.tsx    From sp-site-designs-studio with MIT License 5 votes vote down vote up 
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}
    />;
}
Example #3
Source File: ThemePicker.tsx    From sp-site-designs-studio with MIT License 5 votes vote down vote up 
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}
    />;
}
Example #4
Source File: MeetingPage.tsx    From msteams-meetings-template with MIT License 4 votes vote down vote up 
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>
  );
}