Function LocaleControl

packages/dev/s2-docs/src/VisualExampleClient.tsx:1228–1347

({control, value, onChange}: ControlProps)

}

function LocaleControl({control, value, onChange}: ControlProps) {
  let {locale: defaultLocale} = useLocale();
  let langDisplay = useMemo(
    () => new Intl.DisplayNames(defaultLocale, {type: 'language'}),
    [defaultLocale]
  );
  let regionDisplay = useMemo(
    () => new Intl.DisplayNames(defaultLocale, {type: 'region'}),
    [defaultLocale]
  );
  let locales = useMemo(() => {
    return preferences
      .map(item => {
        let locale = new Intl.Locale(item.value);
        return {
          ...item,
          label: `${langDisplay.of(locale.language)} (${regionDisplay.of(locale.region!)})`
        };
      })
      .sort((a, b) => a.label.localeCompare(b.label));
  }, [langDisplay, regionDisplay]);

  let matched = useMemo(() => matchLocale(value), [value]);
  let pref = preferences.find(p => p.value === matched);
  // @ts-ignore there cannot be any undefined values in the array
  let preferredCalendars: Array<{key: string; name: string}> = useMemo(
    () =>
      pref
        ? (pref.ordering || 'gregory')
            .split(' ')
            .map(p => calendars.find(c => c.key === p))
            .filter(Boolean)
        : [calendars[0]],
    [pref]
  );
  let otherCalendars = useMemo(
    () => calendars.filter(c => !preferredCalendars.some(p => p?.key === c.key)),
    [preferredCalendars]
  );

  let extension = control.options ?? 'calendar';
  let updateLocale = locale => {
    let calendar, numberingSystem;
    if (extension === 'calendar') {
      calendar = (preferences.find(p => p.value === locale)?.ordering || 'gregory').split(' ')[0];
    } else if (extension === 'numberingSystem') {
      numberingSystem = new Intl.NumberFormat(locale).resolvedOptions().numberingSystem;
      if (numberingSystem === 'arabext') {
        numberingSystem = 'arab';
      }
    }
    let newLocale = new Intl.Locale(locale, {
      calendar,
      numberingSystem
    });
    onChange(newLocale.toString());
  };