@hhgtech/hhg-components 1.29.81 → 1.29.83

package/build/index-e239d386.js

@@ -0,0 +1,499 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-d6fa4ee6.js');
+var React = require('react');
+var core = require('@mantine/core');
+var index$1 = require('./index-eddf350b.js');
+var index = require('./index-036fe55d.js');
+var togetherComponentGlobalContext = require('./utils-e4d5701e.js');
+var styled = require('@emotion/styled');
+var togetherApiPaths = require('./togetherApiPaths.js');
+var constants = require('./constants-1953275e.js');
+var index$2 = require('./index-323d2766.js');
+var miscTheme = require('./miscTheme.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const StyledCardLink = styled__default["default"].div `
+  .link-info-container {
+    padding: 0.5rem 1rem;
+    background: ${(props) => props.color || '#f4faff'};
+  }
+  .link-image-wrapper {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    padding-top: min(280px, 56.25%);
+    .link-image-blur {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 110%;
+      height: 110%;
+      /* Add the blur effect */
+      -webkit-filter: blur(8px);
+      filter: blur(8px);
+      object-fit: cover;
+      object-position: center;
+      opacity: 0.8;
+      transform: translate(-50%, -50%);
+    }
+    .link-image {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+      object-position: center;
+    }
+  }
+  a {
+    text-decoration: none;
+  }
+  &[data-is-marrybaby='true'] {
+    overflow: hidden;
+    border-radius: 1rem;
+    .link-info-container {
+      padding-bottom: 1rem;
+      p {
+        color: #2661ad;
+      }
+      .link-logo {
+        max-width: 2rem;
+        height: 13px;
+        margin-right: 4px;
+        object-fit: contain;
+        vertical-align: middle;
+      }
+    }
+    .link-image-wrapper {
+      padding-top: min(360px, 56.25%);
+      .link-image {
+        object-fit: cover;
+      }
+    }
+  }
+`;
+
+const CardLink = ({ title, url, image, logo, className, style, noRefetch, }) => {
+    const { data: { locale, env: { isMarryBaby }, }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
+    const [hideLogo, setHideLogo] = React.useState(false);
+    const _theme = core.useMantineTheme();
+    const noRefetchRef = React.useRef(noRefetch);
+    noRefetchRef.current = noRefetch;
+    const [previewData, setPreviewData] = React.useState(null);
+    React.useEffect(() => {
+        (() => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+            if (noRefetchRef.current)
+                return;
+            if (!url)
+                return setPreviewData(null);
+            setPreviewData((_data) => (Object.assign(Object.assign({}, _data), { isFetching: true })));
+            togetherComponentGlobalContext.callApi(togetherComponentGlobalContext.getApiPath(togetherApiPaths.PATHS.FETCH_PREVIEW, {
+                _locale: locale,
+            }), 'POST', {
+                data: {
+                    link: url,
+                },
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            })
+                .then((res) => {
+                var _a, _b, _c;
+                setHideLogo(false);
+                setPreviewData({
+                    title: (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.title,
+                    url,
+                    image: ((_b = res === null || res === void 0 ? void 0 : res.data) === null || _b === void 0 ? void 0 : _b.image) || ((_c = res === null || res === void 0 ? void 0 : res.data) === null || _c === void 0 ? void 0 : _c.logo),
+                    // logo: meta.logo,
+                });
+            })
+                .catch(() => {
+                setPreviewData(null);
+            });
+        }))();
+    }, [url]);
+    const displayImage = (previewData === null || previewData === void 0 ? void 0 : previewData.image) || image;
+    const displayTitle = (previewData === null || previewData === void 0 ? void 0 : previewData.title) || title;
+    const displayLogo = (previewData === null || previewData === void 0 ? void 0 : previewData.logo) || logo;
+    const displayUrl = (previewData === null || previewData === void 0 ? void 0 : previewData.url) || url;
+    const urlParts = displayUrl
+        .replace('http://', '')
+        .replace('https://', '')
+        .split(/[/?#]/);
+    const domain = urlParts[0];
+    const showDefaultRef = React.useRef(false);
+    return (React__default["default"].createElement(StyledCardLink, { "data-is-marrybaby": isMarryBaby, className: `${className} no-replace-click`, style: style, color: _theme.colors[_theme.primaryColor][0] },
+        React__default["default"].createElement("a", { href: displayUrl, target: "_blank", rel: "noreferrer" },
+            displayImage && (React__default["default"].createElement("div", { className: "link-image-wrapper" },
+                !isMarryBaby && (React__default["default"].createElement("img", { className: "link-image-blur", src: displayImage, onError: (e) => {
+                        if (!showDefaultRef.current) {
+                            showDefaultRef.current = true;
+                            e.currentTarget.src = constants.DEFAULT_IMG;
+                        }
+                    }, loading: "lazy" })),
+                React__default["default"].createElement("img", { className: "link-image", src: displayImage, onError: (e) => {
+                        if (!showDefaultRef.current) {
+                            showDefaultRef.current = true;
+                            e.currentTarget.src = constants.DEFAULT_IMG;
+                        }
+                    }, loading: "lazy" }))),
+            React__default["default"].createElement("div", { className: "link-info-container" },
+                React__default["default"].createElement(index.Text, { size: "n1" },
+                    isMarryBaby && displayLogo && !hideLogo && (React__default["default"].createElement("img", { className: "link-logo", src: displayLogo, onError: () => setHideLogo(true), loading: "lazy" })),
+                    domain),
+                React__default["default"].createElement(index$1.Heading, { tag: "h6" }, displayTitle)))));
+};
+
+const StyledPopoverMenu = styled__default["default"].div `
+  position: relative;
+  display: content;
+
+  .popover-menu__btn {
+    /* position: relative; */
+    > span {
+      width: 100%;
+      height: 100%;
+      > img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  .popover-menu__content {
+    position: absolute;
+    z-index: 10;
+    width: 320px;
+    padding: 8px;
+    border: none;
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.1);
+
+    &::before {
+      position: absolute;
+      width: 16px;
+      height: 8px;
+      background: #fff;
+      content: '';
+    }
+
+    &.--position {
+      &-top {
+        bottom: calc(100% + 8px);
+
+        &.--align {
+          &-start {
+            left: 0;
+
+            &::before {
+              top: 100%;
+              left: 16px;
+              clip-path: polygon(0 0, 50% 100%, 100% 0);
+            }
+          }
+
+          &-end {
+            left: 100%;
+            transform: translateX(calc(-100% + 1rem));
+
+            &::before {
+              top: 100%;
+              right: 16px;
+              clip-path: polygon(0 0, 50% 100%, 100% 0);
+            }
+          }
+        }
+      }
+
+      &-right {
+        left: calc(100% + 8px);
+
+        &.--align {
+          &-start {
+            top: 0;
+
+            &::before {
+              top: 16px;
+              left: 0;
+              width: 8px;
+              height: 16px;
+              clip-path: polygon(0 50%, 100% 0%, 100% 100%);
+              transform: translateX(-100%);
+            }
+          }
+
+          &-end {
+            top: 100%;
+            transform: translateX(calc(-100% + 1rem));
+
+            &::before {
+              bottom: 16px;
+              left: 0;
+              width: 8px;
+              height: 16px;
+              clip-path: polygon(0 50%, 100% 0%, 100% 100%);
+              transform: translateX(-100%);
+            }
+          }
+        }
+      }
+
+      &-bottom {
+        top: calc(100% + 8px);
+
+        &.--align {
+          &-start {
+            left: 0;
+
+            &::before {
+              bottom: 100%;
+              left: 16px;
+              clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+            }
+          }
+
+          &-end {
+            left: 100%;
+            transform: translateX(calc(-100% + 1rem));
+
+            &::before {
+              right: 16px;
+              bottom: 100%;
+              clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+            }
+          }
+        }
+      }
+
+      &-left {
+        left: -8px;
+        transform: translateX(-100%);
+
+        &.--align {
+          &-start {
+            top: 0;
+
+            &::before {
+              top: 16px;
+              left: 100%;
+              width: 8px;
+              height: 16px;
+              clip-path: polygon(0 0%, 100% 50%, 0% 100%);
+              transform: translateX(0);
+            }
+          }
+
+          &-end {
+            bottom: 0;
+
+            &::before {
+              bottom: 16px;
+              left: 100%;
+              width: 8px;
+              height: 16px;
+              clip-path: polygon(0 0%, 100% 50%, 0% 100%);
+              transform: translateX(0);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &[data-is-marrybaby='true'] {
+    .popover-menu__content {
+      padding: 0;
+      border-radius: 12px;
+      /* &::before {
+        display: none;
+      } */
+    }
+  }
+`;
+const StyledTree = styled__default["default"].div `
+  display: flex;
+  /* max-height: 300px; */
+  flex-direction: column;
+  cursor: default;
+
+  .__header {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem 0;
+    margin-bottom: 8px;
+
+    .__back-btn {
+      position: absolute;
+      top: 50%;
+      left: 8px;
+      width: 16px;
+      height: 16px;
+      cursor: pointer;
+      transform: translateY(-50%);
+    }
+  }
+
+  .tree-text-description {
+    padding-right: 8px;
+    padding-left: 8px;
+    margin-top: -8px;
+    margin-bottom: 8px;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 22px;
+    text-align: left;
+  }
+
+  .__content {
+    overflow: auto;
+    flex: 1;
+  }
+
+  .__list {
+    .__item {
+      position: relative;
+      &.bold-item {
+        font-weight: 700;
+      }
+      &:last-child {
+        .__btn {
+          margin-bottom: 0;
+        }
+      }
+
+      .__btn {
+        position: relative;
+        display: flex;
+        width: 100%;
+        height: 40px;
+        align-items: center;
+        padding: 0 1rem;
+        border: none;
+        margin-bottom: 8px;
+        color: ${miscTheme.theme.colors.gray800};
+        cursor: pointer;
+        text-align: left;
+        transition: background 0.3s;
+
+        /* for better gtm tracking result  */
+        * {
+          pointer-events: none;
+        }
+        &.--checked {
+          color: ${miscTheme.theme.colors.gray500};
+          pointer-events: none;
+        }
+
+        &:hover {
+          background: ${miscTheme.theme.colors.gray100};
+        }
+
+        .__icon {
+          width: 16px;
+          height: 16px;
+          margin-right: 0.4rem;
+        }
+
+        & > span {
+          position: relative;
+
+          & > img {
+            width: 16px;
+            height: 16px;
+            margin-right: 0.4rem;
+          }
+        }
+      }
+
+      .__toggle {
+        position: absolute;
+        top: 50%;
+        right: 16px;
+        width: 16px;
+        height: 16px;
+        pointer-events: none;
+        transform: translateY(-50%);
+      }
+    }
+  }
+  &[data-is-marrybaby='true'] {
+    .__header {
+      padding: 1rem;
+    }
+    .tree-text-description {
+      padding: 0 1rem;
+    }
+    .__list {
+      .__item {
+        &:first-child {
+          .__btn {
+            border-top-left-radius: 12px;
+            border-top-right-radius: 12px;
+          }
+        }
+        &:last-child {
+          .__btn {
+            border-bottom-left-radius: 12px;
+            border-bottom-right-radius: 12px;
+          }
+        }
+        .__btn {
+          height: unset;
+          padding: 1rem;
+          margin-bottom: 0;
+          &:hover {
+            background: ${miscTheme.theme.mbColors.lightPink};
+          }
+        }
+      }
+    }
+  }
+`;
+
+const PopoverMenu = ({ className, style, toggleButtonContent, position = 'bottom', align = 'end', children, buttonProps, }) => {
+    const { data: { env: { isMarryBaby }, }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
+    const [isShow, setIsShow] = React.useState(false);
+    const popoverContent = React.useRef(null);
+    const isShowRef = React.useRef(isShow);
+    React.useEffect(() => {
+        var _a;
+        isShowRef.current = isShow;
+        if (!isShow)
+            return;
+        (_a = popoverContent.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [isShow]);
+    React.useEffect(() => {
+        const clickHandler = (e) => {
+            var _a;
+            if (!((_a = popoverContent.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) &&
+                isShowRef.current)
+                setIsShow(false);
+        };
+        window.addEventListener('click', clickHandler, {
+            passive: true,
+        });
+        return () => {
+            window.removeEventListener('click', clickHandler);
+        };
+    }, []);
+    return (React__default["default"].createElement(StyledPopoverMenu, { "data-is-marrybaby": isMarryBaby, className: className, style: style },
+        React__default["default"].createElement(index$2.Button, Object.assign({ theme: isMarryBaby ? 'marryBaby' : 'helloSites', className: "popover-menu__btn", size: "md", color: "transparent", onClick: () => setIsShow((v) => !v) }, buttonProps), toggleButtonContent),
+        isShow ? (React__default["default"].createElement("div", { ref: popoverContent, className: `popover-menu__content --position-${position} --align-${align}`, tabIndex: 0, onClick: (e) => e.stopPropagation() }, typeof children === 'function'
+            ? children({
+                setShow: setIsShow,
+            })
+            : children)) : null));
+};
+
+exports.CardLink = CardLink;
+exports.PopoverMenu = PopoverMenu;
+exports.StyledTree = StyledTree;

package/build/{index-4af08ec2.js → index-eddf350b.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-7e140b89.js');
+var tslib_es6 = require('./tslib.es6-d6fa4ee6.js');
 var React = require('react');
 var core = require('@mantine/core');
-var index = require('./index-d34cd464.js');
+var index = require('./index-036fe55d.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-6bc3f8c3.js → index-eeb7220e.js}

@@ -1,13 +1,14 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-7e140b89.js');
+var tslib_es6 = require('./tslib.es6-d6fa4ee6.js');
 var React = require('react');
 var core = require('@mantine/core');
 var dates = require('@mantine/dates');
-var index$1 = require('./index-a86ea1b6.js');
-var index = require('./index-df5cd44b.js');
-var index$2 = require('./index-1efa7d84.js');
-var useMantineLocale = require('./useMantineLocale-a4f0c61d.js');
+var index = require('./index-617bff8c.js');
+require('./index-d91f52cc.js');
+var index$1 = require('./index-6e7aede8.js');
+var useMantineLocale = require('./useMantineLocale-f9195d27.js');
+var Locale = require('./Locale-0b86b849.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -19,7 +20,7 @@ const DatePicker = (_a) => {
     var { value, fullWidth = true } = _a, rest = tslib_es6.__rest(_a, ["value", "fullWidth"]);
     const theme = core.useMantineTheme();
     const isMarryBaby = theme.other.template === 'mb';
-    return (React__default["default"].createElement(dates.DatePickerInput, Object.assign({ locale: useMantineLocale.MAPPED_LOCALE[process.env.UNIFY_LOCALE || index.LOCALE.Vietnam], valueFormat: (_b = index$1.ISO_FORMAT[process.env.UNIFY_LOCALE || index.LOCALE.Vietnam]) === null || _b === void 0 ? void 0 : _b.dateFormat, size: "md", clearable: false, popoverProps: fullWidth
+    return (React__default["default"].createElement(dates.DatePickerInput, Object.assign({ locale: useMantineLocale.MAPPED_LOCALE[process.env.UNIFY_LOCALE || Locale.LOCALE.Vietnam], valueFormat: (_b = index.ISO_FORMAT[process.env.UNIFY_LOCALE || Locale.LOCALE.Vietnam]) === null || _b === void 0 ? void 0 : _b.dateFormat, size: "md", clearable: false, popoverProps: fullWidth
             ? {
                 styles: {
                     dropdown: {
@@ -35,7 +36,7 @@ const DatePicker = (_a) => {
                 position: 'relative',
             },
             rightSection: { pointerEvents: 'none', cursor: 'default' },
-        }, rightSection: React__default["default"].createElement(core.Image, { src: index$2.CommonGAssets.getAssetPath(isMarryBaby ? 'MB-calendar.svg' : 'OutlineCalendar.svg'), width: 18, height: 18 }), value: value }, rest, { className: `input-control ${(rest === null || rest === void 0 ? void 0 : rest.className) || ''}` })));
+        }, rightSection: React__default["default"].createElement(core.Image, { src: index$1.CommonGAssets.getAssetPath(isMarryBaby ? 'MB-calendar.svg' : 'OutlineCalendar.svg'), width: 18, height: 18 }), value: value }, rest, { className: `input-control ${(rest === null || rest === void 0 ? void 0 : rest.className) || ''}` })));
 };
 
 exports.DatePicker = DatePicker;