react-timezone-select 2.0.0 → 2.1.0

package/README.md

@@ -23,7 +23,7 @@ We also have some **more examples** available on Codesandbox using this componen
 ## 🏗️ Installing
 
 ```bash
-npm install react-timezone-select
+npm install react-select react-timezone-select
 ```
 
 ## 🔭 Usage
@@ -138,6 +138,32 @@ timezones={{
 - `maxAbbrLength` - `number` - Truncate `abbrev` labelStyles string to length
 - Any other [`react-select`](https://github.com/jedwatson/react-select#props) props
 
+## 🎨 Custom Select component
+
+By default, `react-timezone-select` uses [`react-select`](https://github.com/jedwatson/react-select) as underlying select component. If you'd like to bring your own select component, you can use the `useTimezoneSelect` hook instead of the `TimezoneSelect` component to render the timezones using your self-provided select component.
+
+```jsx
+import { useTimezoneSelect, allTimezones } from 'react-timezone-select'
+
+const labelStyle = 'original'
+const timezones = {
+  ...allTimezones,
+  'Europe/Berlin': 'Frankfurt'
+}
+
+const customSelect = () => {
+  const { options, parseTimezone } = useTimezoneSelect({ labelStyle, timezones })
+
+  return (
+    <select onChange={e => onChange(parseTimezone(e.currentTarget.value))}>
+      {options.map(option => (
+        <option value={option.value}>{option.label}</option>
+      ))}
+    </select>
+  )
+}
+```
+
 ## 🚧 Contributing
 
 Pull requests are always welcome! Please stick to repo settings (prettier, eslint, etc.), and if adding new features, please consider adding test(s) and documentation where appropriate!

package/dist/index.cjs

@@ -30,7 +30,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   allTimezones: () => timezone_list_default,
-  default: () => TimezoneSelect
+  default: () => TimezoneSelect,
+  useTimezoneSelect: () => useTimezoneSelect
 });
 module.exports = __toCommonJS(src_exports);
 var React = __toESM(require("react"), 1);
@@ -123,24 +124,24 @@ var allTimezones = {
 var timezone_list_default = allTimezones;
 
 // src/index.tsx
-var TimezoneSelect = ({
-  value,
-  onBlur,
-  onChange,
-  labelStyle = "original",
+function useTimezoneSelect({
   timezones = timezone_list_default,
-  maxAbbrLength = 4,
-  ...props
-}) => {
-  const getOptions = React.useMemo(
-    () => Object.entries(timezones).reduce((selectOptions, zone) => {
+  labelStyle = "original",
+  maxAbbrLength = 4
+}) {
+  const options = React.useMemo(() => {
+    return Object.entries(timezones).map((zone) => {
       try {
         const now = import_spacetime.default.now(zone[0]);
         const tz = now.timezone();
         const tzStrings = (0, import_timezone_soft.default)(zone[0]);
         let label = "";
-        let abbr = now.isDST() ? tzStrings[0].daylight.abbr : tzStrings[0].standard.abbr;
-        let altName = now.isDST() ? tzStrings[0].daylight.name : tzStrings[0].standard.name;
+        const standardAbbr = tzStrings?.[0]?.standard?.abbr ?? "";
+        const dstAbbr = tzStrings?.[0]?.daylight?.abbr ?? standardAbbr;
+        let abbr = now.isDST() ? dstAbbr : standardAbbr;
+        const standardAltName = tzStrings?.[0]?.standard?.name ?? "";
+        const dstAltName = tzStrings?.[0]?.daylight?.name ?? standardAltName;
+        let altName = now.isDST() ? dstAltName : standardAltName;
         const min = tz.current.offset * 60;
         const hr = `${min / 60 ^ 0}:` + (min % 60 === 0 ? "00" : Math.abs(min % 60));
         const prefix = `(GMT${hr.includes("-") ? hr : `+${hr}`}) ${zone[1]}`;
@@ -149,7 +150,7 @@ var TimezoneSelect = ({
             label = prefix;
             break;
           case "altName":
-            label = `${prefix} ${altName?.length ? `(${altName})` : ""}`;
+            label = `${prefix} ${altName ? `(${altName})` : ""}`;
             break;
           case "abbrev":
             label = `${prefix} (${abbr.substring(0, maxAbbrLength)})`;
@@ -157,23 +158,18 @@ var TimezoneSelect = ({
           default:
             label = `${prefix}`;
         }
-        selectOptions.push({
+        return {
           value: tz.name,
           label,
           offset: tz.current.offset,
           abbrev: abbr,
           altName
-        });
-        return selectOptions;
+        };
       } catch {
-        return selectOptions;
+        return null;
       }
-    }, []).sort((a, b) => a.offset - b.offset),
-    [labelStyle, timezones]
-  );
-  const handleChange = (tz) => {
-    onChange && onChange(tz);
-  };
+    }).filter(Boolean).sort((a, b) => a.offset - b.offset);
+  }, [labelStyle, timezones]);
   const findFuzzyTz = (zone) => {
     let currentTime = import_spacetime.default.now("GMT");
     try {
@@ -181,7 +177,7 @@ var TimezoneSelect = ({
     } catch (err) {
       return;
     }
-    return getOptions.filter(
+    return options.filter(
       (tz) => tz.offset === currentTime.timezone().current.offset
     ).map((tz) => {
       let score = 0;
@@ -210,17 +206,36 @@ var TimezoneSelect = ({
     if (typeof zone === "object" && zone.value && zone.label)
       return zone;
     if (typeof zone === "string") {
-      return getOptions.find((tz) => tz.value === zone) || zone.indexOf("/") !== -1 && findFuzzyTz(zone);
+      return options.find((tz) => tz.value === zone) || zone.indexOf("/") !== -1 && findFuzzyTz(zone);
     } else if (zone.value && !zone.label) {
-      return getOptions.find((tz) => tz.value === zone.value);
+      return options.find((tz) => tz.value === zone.value);
     }
   };
+  return { options, parseTimezone };
+}
+var TimezoneSelect = ({
+  value,
+  onBlur,
+  onChange,
+  labelStyle,
+  maxAbbrLength,
+  timezones,
+  ...props
+}) => {
+  const { options, parseTimezone } = useTimezoneSelect({
+    timezones,
+    labelStyle,
+    maxAbbrLength
+  });
+  const handleChange = (tz) => {
+    onChange && onChange(tz);
+  };
   return /* @__PURE__ */ React.createElement(
     import_react_select.default,
     {
       value: parseTimezone(value),
       onChange: handleChange,
-      options: getOptions,
+      options,
       onBlur,
       ...props
     }
@@ -228,5 +243,6 @@ var TimezoneSelect = ({
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  allTimezones
+  allTimezones,
+  useTimezoneSelect
 });

package/dist/index.d.ts

@@ -4,24 +4,30 @@ declare type ICustomTimezone = {
     [key: string]: string;
 };
 declare type ILabelStyle = 'original' | 'altName' | 'abbrev';
-interface ITimezoneOption {
+declare type ITimezoneOption = {
     value: string;
     label: string;
     abbrev?: string;
     altName?: string;
     offset?: number;
-}
+};
 declare type ITimezone = ITimezoneOption | string;
-interface Props extends Omit<Props$1<ITimezone, false>, 'onChange'> {
-    value: ITimezone;
+declare type TimezoneSelectOptions = {
     labelStyle?: ILabelStyle;
-    onChange?: (timezone: ITimezoneOption) => void;
     timezones?: ICustomTimezone;
     maxAbbrLength?: number;
-}
+};
+declare type Props = Omit<Props$1<ITimezone, false>, 'onChange'> & TimezoneSelectOptions & {
+    value: ITimezone;
+    onChange?: (timezone: ITimezoneOption) => void;
+};
 
 declare const allTimezones: ICustomTimezone;
 
-declare const TimezoneSelect: ({ value, onBlur, onChange, labelStyle, timezones, maxAbbrLength, ...props }: Props) => JSX.Element;
+declare function useTimezoneSelect({ timezones, labelStyle, maxAbbrLength, }: TimezoneSelectOptions): {
+    parseTimezone: (zone: ITimezone) => ITimezoneOption;
+    options: ITimezoneOption[];
+};
+declare const TimezoneSelect: ({ value, onBlur, onChange, labelStyle, maxAbbrLength, timezones, ...props }: Props) => JSX.Element;
 
-export { ILabelStyle, ITimezone, ITimezoneOption, Props, allTimezones, TimezoneSelect as default };
+export { ILabelStyle, ITimezone, ITimezoneOption, Props, TimezoneSelectOptions, allTimezones, TimezoneSelect as default, useTimezoneSelect };

package/dist/index.js

@@ -89,24 +89,24 @@ var allTimezones = {
 var timezone_list_default = allTimezones;
 
 // src/index.tsx
-var TimezoneSelect = ({
-  value,
-  onBlur,
-  onChange,
-  labelStyle = "original",
+function useTimezoneSelect({
   timezones = timezone_list_default,
-  maxAbbrLength = 4,
-  ...props
-}) => {
-  const getOptions = React.useMemo(
-    () => Object.entries(timezones).reduce((selectOptions, zone) => {
+  labelStyle = "original",
+  maxAbbrLength = 4
+}) {
+  const options = React.useMemo(() => {
+    return Object.entries(timezones).map((zone) => {
       try {
         const now = spacetime.now(zone[0]);
         const tz = now.timezone();
         const tzStrings = soft(zone[0]);
         let label = "";
-        let abbr = now.isDST() ? tzStrings[0].daylight.abbr : tzStrings[0].standard.abbr;
-        let altName = now.isDST() ? tzStrings[0].daylight.name : tzStrings[0].standard.name;
+        const standardAbbr = tzStrings?.[0]?.standard?.abbr ?? "";
+        const dstAbbr = tzStrings?.[0]?.daylight?.abbr ?? standardAbbr;
+        let abbr = now.isDST() ? dstAbbr : standardAbbr;
+        const standardAltName = tzStrings?.[0]?.standard?.name ?? "";
+        const dstAltName = tzStrings?.[0]?.daylight?.name ?? standardAltName;
+        let altName = now.isDST() ? dstAltName : standardAltName;
         const min = tz.current.offset * 60;
         const hr = `${min / 60 ^ 0}:` + (min % 60 === 0 ? "00" : Math.abs(min % 60));
         const prefix = `(GMT${hr.includes("-") ? hr : `+${hr}`}) ${zone[1]}`;
@@ -115,7 +115,7 @@ var TimezoneSelect = ({
             label = prefix;
             break;
           case "altName":
-            label = `${prefix} ${altName?.length ? `(${altName})` : ""}`;
+            label = `${prefix} ${altName ? `(${altName})` : ""}`;
             break;
           case "abbrev":
             label = `${prefix} (${abbr.substring(0, maxAbbrLength)})`;
@@ -123,23 +123,18 @@ var TimezoneSelect = ({
           default:
             label = `${prefix}`;
         }
-        selectOptions.push({
+        return {
           value: tz.name,
           label,
           offset: tz.current.offset,
           abbrev: abbr,
           altName
-        });
-        return selectOptions;
+        };
       } catch {
-        return selectOptions;
+        return null;
       }
-    }, []).sort((a, b) => a.offset - b.offset),
-    [labelStyle, timezones]
-  );
-  const handleChange = (tz) => {
-    onChange && onChange(tz);
-  };
+    }).filter(Boolean).sort((a, b) => a.offset - b.offset);
+  }, [labelStyle, timezones]);
   const findFuzzyTz = (zone) => {
     let currentTime = spacetime.now("GMT");
     try {
@@ -147,7 +142,7 @@ var TimezoneSelect = ({
     } catch (err) {
       return;
     }
-    return getOptions.filter(
+    return options.filter(
       (tz) => tz.offset === currentTime.timezone().current.offset
     ).map((tz) => {
       let score = 0;
@@ -176,17 +171,36 @@ var TimezoneSelect = ({
     if (typeof zone === "object" && zone.value && zone.label)
       return zone;
     if (typeof zone === "string") {
-      return getOptions.find((tz) => tz.value === zone) || zone.indexOf("/") !== -1 && findFuzzyTz(zone);
+      return options.find((tz) => tz.value === zone) || zone.indexOf("/") !== -1 && findFuzzyTz(zone);
     } else if (zone.value && !zone.label) {
-      return getOptions.find((tz) => tz.value === zone.value);
+      return options.find((tz) => tz.value === zone.value);
     }
   };
+  return { options, parseTimezone };
+}
+var TimezoneSelect = ({
+  value,
+  onBlur,
+  onChange,
+  labelStyle,
+  maxAbbrLength,
+  timezones,
+  ...props
+}) => {
+  const { options, parseTimezone } = useTimezoneSelect({
+    timezones,
+    labelStyle,
+    maxAbbrLength
+  });
+  const handleChange = (tz) => {
+    onChange && onChange(tz);
+  };
   return /* @__PURE__ */ React.createElement(
     Select,
     {
       value: parseTimezone(value),
       onChange: handleChange,
-      options: getOptions,
+      options,
       onBlur,
       ...props
     }
@@ -194,5 +208,6 @@ var TimezoneSelect = ({
 };
 export {
   timezone_list_default as allTimezones,
-  TimezoneSelect as default
+  TimezoneSelect as default,
+  useTimezoneSelect
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-timezone-select",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Usable, dynamic React Timezone Select",
   "scripts": {
     "dev": "concurrently \"tsup src/index.tsx --format esm --watch\" \"cd example && pnpm dev\"",