@cloudtower/eagle 0.22.38 → 0.22.40

package/dist/esm/index.js

@@ -2,7 +2,7 @@ import { Alert as Alert$1, Badge as Badge$1, Button as Button$1, Tooltip as Tool
 export { Col, Row } from 'antd';
 import React, { useState, useMemo, useRef, useCallback, useEffect, Fragment, useLayoutEffect, createContext, memo, useImperativeHandle, useContext } from 'react';
 import cs from 'classnames';
-import _, { sortBy, uniqBy } from 'lodash';
+import _, { uniqBy, groupBy, sortBy, toPairs } from 'lodash';
 import { parrotI18n } from '@cloudtower/parrot';
 export * from '@cloudtower/parrot';
 import { cx } from '@linaria/core';
@@ -13,7 +13,7 @@ import { isElement } from 'react-is';
 import { CloseCircleFilled, CheckOutlined, SearchOutlined, PlusOutlined, EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons';
 import { combineReducers, createStore } from 'redux';
 import { createDispatchHook, createSelectorHook, Provider } from 'react-redux';
-import { HandlePoint816SecondaryIcon, HandlePoint816BlueIcon, XmarkRemove16SecondaryIcon, XmarkRemove16RegularRedIcon } from '@cloudtower/icons-react';
+import { HandlePoint816SecondaryIcon, HandlePoint816BlueIcon, XmarkRemove16SecondaryIcon, XmarkRemove16RegularRedIcon, CheckmarkDoneSuccessCorrect16BlueIcon } from '@cloudtower/icons-react';
 import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
 import TimeZones from 'timezones.json';
 import { withTranslation } from 'react-i18next';
@@ -4329,7 +4329,7 @@ const TableForm = React.forwardRef(
   }
 );
 
-const flatTimeZones = sortBy(uniqBy(TimeZones.reduce((sum, zone) => {
+const allTimeZones = uniqBy(TimeZones.reduce((sum, zone) => {
   const utcZones = zone.utc.map(utc => {
     return {
       abbr: zone.abbr,
@@ -4339,31 +4339,51 @@ const flatTimeZones = sortBy(uniqBy(TimeZones.reduce((sum, zone) => {
     };
   });
   return sum.concat(utcZones);
-}, []), "value"), "offset");
+}, []), "value");
+const timeZoneGroups = (() => {
+  const groupedTimeZones = groupBy(allTimeZones, tz => tz.value.split("/")[0]);
+  delete groupedTimeZones["CST6CDT"];
+  delete groupedTimeZones["MST7MDT"];
+  delete groupedTimeZones["PST8PDT"];
+  delete groupedTimeZones["Etc"];
+  return sortBy(toPairs(groupedTimeZones).map(([key, tzs]) => {
+    return [key, sortBy(tzs, "value")];
+  }), "0");
+})();
 const SelectStyle = "s1fc623g";
-const OptionWrapperStyle = cx("oa3mx0o", Typo.Label.l3_regular);
-const OptionFirstLineStyle = cx("onr9gzt", Typo.Label.l3_regular);
-const OptionSecondLineStyle = cx("oiy0apc", Typo.Label.l4_regular);
+const DropdownStyle = "da3mx0o";
+const OptionWrapperStyle = cx("onr9gzt", Typo.Label.l3_regular);
+const OptionFirstLineStyle = cx("oiy0apc", Typo.Label.l3_regular);
+const OptionSecondLineStyle = cx("of4y382", Typo.Label.l4_regular);
+const TagStyle = "t19903l9";
 const BrowserTimeValue = "browser_time_zone";
+const DefaultTimeValue = "default_time_zone";
 const browserTzName = Intl.DateTimeFormat().resolvedOptions().timeZone;
-const browserTz = flatTimeZones.find(tz => tz.value === browserTzName) || flatTimeZones[0];
+const browserTz = allTimeZones.find(tz => tz.value === browserTzName) || allTimeZones[0];
 const TimeZoneSelect = props => {
   const {
     value,
     onChange,
     disabled,
     defaultUseBrowserTime,
-    className
+    className,
+    placeholder,
+    defaultOptionValue
   } = props;
   const [innerValue, setInnerValue] = useState(value);
+  const defaultTz = useMemo(() => {
+    return allTimeZones.find(tz => tz.value === defaultOptionValue);
+  }, [defaultOptionValue]);
   const _onChange = useCallback(val => {
     setInnerValue(val);
     if (val === BrowserTimeValue) {
       onChange(browserTzName);
+    } else if (val === DefaultTimeValue && defaultTz) {
+      onChange(defaultTz == null ? void 0 : defaultTz.value);
     } else {
       onChange(val);
     }
-  }, [onChange]);
+  }, [defaultTz, onChange]);
   useEffect(() => {
     if (defaultUseBrowserTime && !value) {
       setInnerValue(BrowserTimeValue);
@@ -4372,12 +4392,28 @@ const TimeZoneSelect = props => {
   }, []);
   useEffect(() => {
     if (innerValue === BrowserTimeValue && value === browserTzName) return;
+    if (innerValue === DefaultTimeValue && value === (defaultTz == null ? void 0 : defaultTz.value)) return;
     if (innerValue === value) return;
     setInnerValue(value);
-  }, [innerValue, value]);
+  }, [defaultTz == null ? void 0 : defaultTz.value, innerValue, value]);
+  const timeZoneOptionGroups = timeZoneGroups.map(([key, timezones]) => {
+    return /* @__PURE__ */React.createElement(Select$1.OptGroup, {
+      label: key.toUpperCase()
+    }, timezones.map(zone => {
+      return /* @__PURE__ */React.createElement(Select$1.Option, {
+        label: zone.value,
+        value: zone.value,
+        className: OptionWrapperStyle
+      }, /* @__PURE__ */React.createElement(TimeZoneOption, {
+        key: zone.value,
+        timeZone: zone
+      }));
+    }));
+  });
   return /* @__PURE__ */React.createElement(Select, {
     className: cx(SelectStyle, className),
-    placeholder: /* @__PURE__ */React.createElement("span", null, parrotI18n.t("components.time_zone_select_placeholder")),
+    dropdownClassName: DropdownStyle,
+    placeholder: /* @__PURE__ */React.createElement("span", null, placeholder || parrotI18n.t("components.time_zone_select_placeholder")),
     value: innerValue,
     onChange: _onChange,
     showSearch: true,
@@ -4387,39 +4423,39 @@ const TimeZoneSelect = props => {
     },
     optionLabelProp: "label",
     input: {}
-  }, /* @__PURE__ */React.createElement(Select$1.Option, {
+  }, defaultTz ? /* @__PURE__ */React.createElement(Select$1.Option, {
+    value: DefaultTimeValue,
+    label: parrotI18n.t("components.default_time_zone"),
+    className: OptionWrapperStyle
+  }, /* @__PURE__ */React.createElement(TimeZoneOption, {
+    key: DefaultTimeValue,
+    customLabel: parrotI18n.t("components.default_time_zone"),
+    timeZone: defaultTz
+  })) : void 0, /* @__PURE__ */React.createElement(Select$1.Option, {
     value: BrowserTimeValue,
     label: parrotI18n.t("components.browser_time_zone"),
     className: OptionWrapperStyle
   }, /* @__PURE__ */React.createElement(TimeZoneOption, {
     key: BrowserTimeValue,
-    isBrowser: true,
+    customLabel: parrotI18n.t("components.browser_time_zone"),
     timeZone: browserTz
   })), /* @__PURE__ */React.createElement(Select$1.Option, {
     value: "UTC",
     className: OptionWrapperStyle
   }, /* @__PURE__ */React.createElement(TimeZoneOption, {
     key: "utc",
+    customLabel: parrotI18n.t("components.coorddinated_universal_time"),
     timeZone: {
       value: "UTC",
       text: "UTC",
       offset: 0,
-      abbr: "UTC"
+      abbr: "GMT"
     }
-  })), flatTimeZones.map(zone => {
-    return /* @__PURE__ */React.createElement(Select$1.Option, {
-      label: zone.value,
-      value: zone.value,
-      className: OptionWrapperStyle
-    }, /* @__PURE__ */React.createElement(TimeZoneOption, {
-      key: zone.value,
-      timeZone: zone
-    }));
-  }));
+  })), timeZoneOptionGroups);
 };
 const TimeZoneOption = ({
   timeZone,
-  isBrowser
+  customLabel
 }) => {
   let tagText = "";
   if (timeZone.offset === 0) {
@@ -4431,9 +4467,18 @@ const TimeZoneOption = ({
   }
   return /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("div", {
     className: OptionFirstLineStyle
-  }, /* @__PURE__ */React.createElement("span", null, isBrowser ? parrotI18n.t("components.browser_time_zone") : timeZone.value), /* @__PURE__ */React.createElement(Tag, null, tagText)), /* @__PURE__ */React.createElement("div", {
+  }, /* @__PURE__ */React.createElement("span", {
+    className: "timezone-title"
+  }, customLabel || timeZone.value), /* @__PURE__ */React.createElement(Tag, {
+    className: cx("timezone-tag", TagStyle)
+  }, tagText)), /* @__PURE__ */React.createElement("div", {
     className: OptionSecondLineStyle
-  }, /* @__PURE__ */React.createElement("span", null, timeZone.text, ", ", timeZone.abbr)));
+  }, /* @__PURE__ */React.createElement("span", null, timeZone.text, ", ", timeZone.abbr), /* @__PURE__ */React.createElement(Icon, {
+    className: "selected-icon",
+    src: CheckmarkDoneSuccessCorrect16BlueIcon,
+    iconHeight: 16,
+    iconWidth: 16
+  })));
 };
 
 function getAntdKit() {