@hhgtech/hhg-components 1.29.419 → 1.29.420-beta-1

package/build/{index-6ae319de.js → index-f760b382.js}

@@ -1,50 +1,53 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-e2c2a1ef.js');
+var tslib_es6 = require('./tslib.es6-b744dcbc.js');
 var React = require('react');
-var index$5 = require('./index-8db3897d.js');
+var index$5 = require('./index-6991341f.js');
 var core = require('@mantine/core');
 require('@mantine/dates');
-var index$7 = require('./index-22f7c329.js');
-require('./index-c6e7ffb3.js');
-var index$b = require('./index-9186ffbd.js');
-require('./index-80a406c3.js');
-var index$3 = require('./index-ee162501.js');
-var index$f = require('./index-1aac9204.js');
-require('./index.styles-a11f475c.js');
-require('./translationsContext-334e4c00.js');
+var index$7 = require('./index-b8c83c24.js');
+require('./index-51b94ef8.js');
+var index$b = require('./index-04310acd.js');
+require('./index-bf22d824.js');
+var index$3 = require('./index-39b813c1.js');
+var index$f = require('./index-90747aae.js');
+require('./index.styles-2bf8216f.js');
+require('./translationsContext-5ede3974.js');
 require('@mantine/hooks');
-require('./text-a5ecdb3f.js');
-var utils = require('./utils-f5379515.js');
-require('./index-5ee0bf23.js');
-var index$2 = require('./index-f2fb8c75.js');
+require('./text-ae019691.js');
+var utils = require('./utils-f4bc22f8.js');
+require('./index-99d17291.js');
+var index$2 = require('./index-6d3263f1.js');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
-var index$4 = require('./index-0603eb9d.js');
+var index$4 = require('./index-07afcb6a.js');
 var dateFns = require('date-fns');
 var DayPickerInput = require('react-day-picker/DayPickerInput');
-var index$6 = require('./index-6c0be467.js');
+var index$6 = require('./index-ab0fcdce.js');
 var throttle = require('lodash/throttle');
 var parse = require('html-react-parser');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
 var constantsIsProduction = require('./constantsIsProduction.js');
-var useOutsideClick = require('./useOutsideClick-f266c366.js');
+var useOutsideClick = require('./useOutsideClick-ebfe365d.js');
 var enUS = require('date-fns/locale/en-US');
 var id = require('date-fns/locale/id');
 var vi = require('date-fns/locale/vi');
 var zhTW = require('date-fns/locale/zh-TW');
-var index$a = require('./index-81ab41c0.js');
-var index$8 = require('./index-5253168a.js');
-var index$9 = require('./index-6f5758a5.js');
-var index$c = require('./index-d0d607ae.js');
+var index$a = require('./index-ac640383.js');
+var index$8 = require('./index-ac2e3371.js');
+var index$9 = require('./index-e87ba79b.js');
+var index$c = require('./index-f4a79ce5.js');
 var miscGetSocialList = require('./miscGetSocialList.js');
-var index$e = require('./index-b45631a9.js');
-var index$d = require('./index-153be62a.js');
+var index$e = require('./index-bd33e719.js');
+var index$d = require('./index-baf43224.js');
 var uuid = require('uuid');
-var Locale = require('./Locale-71682551.js');
+var Locale = require('./Locale-da0e302c.js');
 var arrow = require('@hhgtech/icons/arrow');
 var other = require('@hhgtech/icons/other');
 var Lottie = require('lottie-light-react');
+var index$g = require('./index-0c3317fc.js');
+var get = require('lodash/get');
+var debounce = require('lodash/debounce');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -58,6 +61,8 @@ var id__default = /*#__PURE__*/_interopDefault(id);
 var vi__default = /*#__PURE__*/_interopDefault(vi);
 var zhTW__default = /*#__PURE__*/_interopDefault(zhTW);
 var Lottie__default = /*#__PURE__*/_interopDefault(Lottie);
+var get__default = /*#__PURE__*/_interopDefault(get);
+var debounce__default = /*#__PURE__*/_interopDefault(debounce);
 
 const StyledCategoryCard = styled__default["default"].a `
   display: flex;
@@ -4649,8 +4654,344 @@ const WidgetChatbotAi = ({}) => {
                     React__default["default"].createElement(index$f.Button, { className: "submitBtn", type: "submit", variant: value ? 'primary' : 'ghost', leftIcon: React__default["default"].createElement(arrow.ArrowRight, { size: 16, color: value ? '#fff' : '#595959' }) }))))));
 };
 
+const ListContext = React.createContext(null);
+function useListContext() {
+    const ctx = React.useContext(ListContext);
+    if (!ctx)
+        throw new Error('useListContext must be used within ListProvider');
+    return ctx;
+}
+
+function Content({ className, children, customLoading, customEmpty, }) {
+    const { loading, items } = useListContext();
+    const { t } = index$9.useTranslations();
+    if (loading) {
+        return customLoading ? React__default["default"].createElement(React__default["default"].Fragment, null, customLoading) : React__default["default"].createElement(index$g.Loading, null);
+    }
+    if (!items.length) {
+        return customEmpty ? React__default["default"].createElement(React__default["default"].Fragment, null, customEmpty) : React__default["default"].createElement("div", null, t('common.noResult'));
+    }
+    return React__default["default"].createElement("div", { className: className }, children);
+}
+
+function Item({ render, }) {
+    const { items, loading, loadingMore } = useListContext();
+    return (React__default["default"].createElement(React__default["default"].Fragment, null, items.map((item, idx) => (React__default["default"].createElement("div", { key: get__default["default"](item, 'id', idx) }, render(item, loading, loadingMore))))));
+}
+
+const DEFAULT_PAGE_SIZE = 10;
+function useList({ fetcher, pageSize = DEFAULT_PAGE_SIZE, defaultSearch = '', defaultFilters = {}, }) {
+    const [items, setItems] = React.useState([]);
+    const [total, setTotal] = React.useState(0);
+    const [page, setPage] = React.useState(1);
+    const [search, setSearch] = React.useState(defaultSearch);
+    const [loading, setLoading] = React.useState(false);
+    const [loadingMore, setLoadingMore] = React.useState(false);
+    const [filters, setFilters] = React.useState(defaultFilters);
+    const loadData = ({ page, search, isMore, pageSize: customPage, filters: filtersData, }) => tslib_es6.__awaiter(this, void 0, void 0, function* () {
+        setLoading(!isMore);
+        setLoadingMore(isMore);
+        try {
+            const res = yield fetcher({
+                page,
+                pageSize: customPage || pageSize,
+                search,
+                filters: filtersData,
+            });
+            if (isMore) {
+                setItems((prevState) => [...prevState, ...res.data]);
+            }
+            else {
+                setItems(res.data);
+            }
+            setPage(page);
+            setTotal(res.total);
+        }
+        finally {
+            setLoading(false);
+            setLoadingMore(false);
+        }
+    });
+    const loadDataDebounce = React.useCallback(debounce__default["default"](loadData, 300), []);
+    const handleChangePage = (page) => {
+        loadDataDebounce({
+            search,
+            page,
+        });
+    };
+    const handleLoadMore = () => {
+        const nextPage = page + 1;
+        loadDataDebounce({
+            search,
+            page: nextPage,
+            isMore: true,
+            filters,
+        });
+    };
+    const handleChangeSearch = (value) => {
+        setSearch(value);
+        loadDataDebounce({
+            search: value,
+            page: 1,
+            filters,
+        });
+    };
+    const resetData = () => {
+        setSearch('');
+        setFilters({});
+        loadDataDebounce({
+            page: 1,
+            search: '',
+            filters: {},
+        });
+    };
+    const handleChangeFilter = (filterData) => {
+        const nextFilter = Object.assign({}, filters);
+        if (filterData.filterKey in nextFilter &&
+            nextFilter[filterData.filterKey] === filterData.value) {
+            delete nextFilter[filterData.filterKey];
+        }
+        else {
+            nextFilter[filterData.filterKey] = filterData.value;
+        }
+        setFilters(nextFilter);
+        loadDataDebounce({
+            page: 1,
+            search: search,
+            filters: nextFilter,
+        });
+    };
+    const handleUpdateFilter = (filterObject) => {
+        const nextFilter = Object.assign(Object.assign({}, filters), filterObject);
+        setFilters(nextFilter);
+        loadDataDebounce({
+            page: 1,
+            search: search,
+            filters: nextFilter,
+        });
+    };
+    return {
+        items,
+        total,
+        page,
+        pageSize,
+        search,
+        loading,
+        loadingMore,
+        filters,
+        handleChangePage,
+        handleChangeSearch,
+        handleLoadMore,
+        handleChangeFilter,
+        handleUpdateFilter,
+        resetData,
+    };
+}
+
+function ListProvider({ fetcher, children, defaultFilters, defaultSearch, pageSize, }) {
+    const listState = useList({
+        fetcher,
+        defaultFilters,
+        defaultSearch,
+        pageSize,
+    });
+    const value = React.useMemo(() => (Object.assign({}, listState)), [
+        listState.items,
+        listState.page,
+        listState.loading,
+        listState.loadingMore,
+        listState.search,
+        listState.total,
+        listState.filters,
+    ]);
+    return React__default["default"].createElement(ListContext.Provider, { value: value }, children);
+}
+
+const StyledFilterItem = styled__default["default"].div `
+  display: inline-flex;
+  border: 1px solid ${miscTheme.theme.colors.neutral100};
+  padding: 0.5rem 0.75rem;
+  color: ${miscTheme.theme.colors.gray800};
+  text-align: center;
+  font-size: 0.8125rem;
+  border-radius: 0.5rem;
+  line-height: 1.25rem;
+  background-color: ${miscTheme.theme.colors.white};
+  white-space: nowrap;
+  cursor: pointer;
+
+  &.active {
+    border: 1px solid ${miscTheme.theme.colors.blue100};
+    background-color: ${miscTheme.theme.colors.blue50};
+  }
+`;
+
+const StyledVaccineFilter = styled__default["default"].div `
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+    display: none;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 6px;
+  }
+`;
+function QuickFilter(_a) {
+    var { filterOptions, activeFilter, onChange } = _a, restProps = tslib_es6.__rest(_a, ["filterOptions", "activeFilter", "onChange"]);
+    const handleChange = (item) => {
+        return ((e) => {
+            onChange === null || onChange === void 0 ? void 0 : onChange(item);
+            const target = e.target;
+            if (target) {
+                target.scrollIntoView({
+                    block: 'nearest',
+                    inline: 'center',
+                    behavior: 'auto',
+                });
+            }
+        });
+    };
+    return (React__default["default"].createElement(StyledVaccineFilter, { className: "flex flex-nowrap gap-2 overflow-x-auto snap-x max-w-full" }, filterOptions.map((item, index) => (React__default["default"].createElement(StyledFilterItem, Object.assign({}, restProps, { key: `filter_${index}`, onClick: handleChange(item), className: core.clsx('snap-center', {
+            active: activeFilter[item.filterKey] === item.value,
+        }), "data-event-label": item.label }), item.label)))));
+}
+
+function ListQuickFilter(_a) {
+    var { filterOptions } = _a, restProps = tslib_es6.__rest(_a, ["filterOptions"]);
+    const { handleChangeFilter, filters } = useListContext();
+    return (React__default["default"].createElement(QuickFilter, Object.assign({}, restProps, { filterOptions: filterOptions, onChange: handleChangeFilter, activeFilter: filters })));
+}
+
+function LoadMore(_a) {
+    var { renderLoadMore } = _a, restProps = tslib_es6.__rest(_a, ["renderLoadMore"]);
+    const { loadingMore, handleLoadMore, pageSize, page, total } = useListContext();
+    const totalPages = Math.ceil(total / pageSize);
+    const isEndLoadMore = totalPages === page || !total;
+    const restTotal = total - page * pageSize;
+    const loadMoreNumber = restTotal > pageSize ? pageSize : restTotal;
+    if (isEndLoadMore) {
+        return null;
+    }
+    return (React__default["default"].createElement(core.Box, { mt: core.rem(24), className: "text-center" },
+        React__default["default"].createElement(core.Button, Object.assign({}, restProps, { loading: loadingMore, onClick: handleLoadMore, variant: "white", radius: 30, py: 8, px: 32, lh: core.rem(20), sx: {
+                color: miscTheme.theme.colors.gray800,
+                fontSize: 13,
+                transition: 'color 0.2s',
+                ':hover': {
+                    color: miscTheme.theme.colors.gray600,
+                },
+            } }), typeof renderLoadMore === 'function'
+            ? renderLoadMore({
+                loadingMore,
+                page,
+                pageSize,
+                last: loadMoreNumber,
+            })
+            : `Load more ${loadMoreNumber} items`)));
+}
+
+function Pagination() {
+    const { total, page, handleChangePage, pageSize } = useListContext();
+    const totalPages = Math.ceil(total / pageSize);
+    return (React__default["default"].createElement(index$4.Pagination, { pagesAmount: totalPages, currentPage: page, onChange: handleChangePage }));
+}
+
+function Search(_a) {
+    var { className, placeholder = 'Search...', formatValue } = _a, restProps = tslib_es6.__rest(_a, ["className", "placeholder", "formatValue"]);
+    const { search, handleChangeSearch } = useListContext();
+    const onChange = (value) => {
+        if (formatValue) {
+            handleChangeSearch(formatValue(value));
+            return;
+        }
+        handleChangeSearch(value);
+    };
+    return (React__default["default"].createElement(index$4.SearchInput, Object.assign({ value: search, onChange: onChange, placeholder: placeholder, className: className }, restProps)));
+}
+
+const List = {
+    Provider: ListProvider,
+    Search,
+    Content,
+    Pagination,
+    Item,
+    LoadMore,
+    QuickFilter: ListQuickFilter,
+};
+
+const StyleCardItem = styled__default["default"].div `
+  padding: 1rem;
+  display: grid;
+  grid-template-columns: 1fr 84px;
+  background-color: ${miscTheme.theme.colors.white};
+  gap: 0.75rem;
+
+  .logo {
+    width: 84px;
+    border-radius: 8px;
+    overflow: hidden;
+  }
+
+  /* grid-rows-1 grid-cols-2 order-2 w-[84px] */
+
+  .title {
+    font-size: 0.9375rem;
+    line-height: 1.5rem;
+    font-weight: 600;
+    letter-spacing: -0.2px;
+    color: #1e1e1e;
+  }
+
+  .description {
+    font-size: 0.8125rem;
+    line-height: 1.25rem;
+    color: ${miscTheme.theme.colors.gray600};
+    letter-spacing: -0.3px;
+
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 2;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+  }
+
+  .info {
+    gap: 4px;
+    display: flex;
+    flex-direction: column;
+  }
+`;
+styled__default["default"].div `
+  position: relative;
+  width: 85px;
+  flex-shrink: 0;
+  border-radius: 0.5rem;
+`;
+
+function CardListItem({ title, href, description, logo, defaultImage, LinkComponent = 'a', children, contentInfo, className, }) {
+    return (React__default["default"].createElement(StyleCardItem, { className: className },
+        React__default["default"].createElement("div", { className: "info" },
+            React__default["default"].createElement(LinkComponent, { href: href },
+                React__default["default"].createElement("h5", { className: "title" }, title)),
+            description && (React__default["default"].createElement(LinkComponent, { href: href },
+                React__default["default"].createElement("p", { className: "description" }, description))),
+            contentInfo),
+        React__default["default"].createElement("div", { className: "logo" },
+            React__default["default"].createElement(LinkComponent, { href: href },
+                React__default["default"].createElement(core.AspectRatio, { ratio: 1, bg: "#EFF4FF" },
+                    React__default["default"].createElement(index$8.ImageWrap, { src: logo || defaultImage, width: 84, height: 84, alt: title, backupSrc: defaultImage })))),
+        children));
+}
+
 exports.AdBlock = AdBlock;
 exports.Breadcrumbs = Breadcrumbs;
+exports.CardListItem = CardListItem;
 exports.CategoryCard = CategoryCard;
 exports.CheckboxGroup = CheckboxGroup;
 exports.CookieAcceptConfirm = CookieAcceptConfirm;
@@ -4660,6 +5001,9 @@ exports.DoctorInfo = DoctorInfo;
 exports.FixedBottomAdBlock = FixedBottomAdBlock;
 exports.FloatButtonGroup = FloatButtonGroup;
 exports.IconText = IconText;
+exports.List = List;
+exports.ListContext = ListContext;
+exports.QuickFilter = QuickFilter;
 exports.RadioGroup = RadioGroup;
 exports.ScrollList = ScrollList;
 exports.SeoHead = SeoHead;
@@ -4670,3 +5014,4 @@ exports.Tabs = Tabs;
 exports.WidgetChatbotAi = WidgetChatbotAi;
 exports.index = index$1;
 exports.index$1 = index;
+exports.useListContext = useListContext;

package/build/{index-bcb929ff.js → index-f7defb10.js}

@@ -1,24 +1,24 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-e2c2a1ef.js');
+var tslib_es6 = require('./tslib.es6-b744dcbc.js');
 var React = require('react');
 var core = require('@mantine/core');
 var form = require('@mantine/form');
-var index$3 = require('./index-8db3897d.js');
-var index$4 = require('./index-5b2b040f.js');
-var index$5 = require('./index-ee162501.js');
-require('./index-1aac9204.js');
-require('./index.styles-a11f475c.js');
-var index = require('./index-6f5758a5.js');
+var index$3 = require('./index-6991341f.js');
+var index$4 = require('./index-70a5c8ba.js');
+var index$5 = require('./index-39b813c1.js');
+require('./index-90747aae.js');
+require('./index.styles-2bf8216f.js');
+var index = require('./index-e87ba79b.js');
 require('@mantine/hooks');
-require('./index-80a406c3.js');
-require('./text-a5ecdb3f.js');
-require('./utils-f5379515.js');
-require('./index-5ee0bf23.js');
-var constants = require('./constants-3347f57d.js');
-var index$1 = require('./index-177c7ef1.js');
-var index$2 = require('./index-4923773d.js');
-var Locale = require('./Locale-71682551.js');
+require('./index-bf22d824.js');
+require('./text-ae019691.js');
+require('./utils-f4bc22f8.js');
+require('./index-99d17291.js');
+var constants = require('./constants-ffd7eb62.js');
+var index$1 = require('./index-3b7362ac.js');
+var index$2 = require('./index-29afc6e1.js');
+var Locale = require('./Locale-da0e302c.js');
 var other = require('@hhgtech/icons/other');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

package/build/{index-51e2f50b.js → index-fe376dff.js}

@@ -1,22 +1,22 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-e2c2a1ef.js');
+var tslib_es6 = require('./tslib.es6-b744dcbc.js');
 var React = require('react');
-require('./index-8db3897d.js');
+require('./index-6991341f.js');
 require('@mantine/core');
 require('@mantine/dates');
-require('./index-22f7c329.js');
-require('./index-c6e7ffb3.js');
-require('./index-9186ffbd.js');
-require('./index-80a406c3.js');
-var index = require('./index-ee162501.js');
-require('./index-1aac9204.js');
-require('./index.styles-a11f475c.js');
-require('./translationsContext-334e4c00.js');
+require('./index-b8c83c24.js');
+require('./index-51b94ef8.js');
+require('./index-04310acd.js');
+require('./index-bf22d824.js');
+var index = require('./index-39b813c1.js');
+require('./index-90747aae.js');
+require('./index.styles-2bf8216f.js');
+require('./translationsContext-5ede3974.js');
 require('@mantine/hooks');
-require('./text-a5ecdb3f.js');
-require('./utils-f5379515.js');
-require('./index-5ee0bf23.js');
+require('./text-ae019691.js');
+require('./utils-f4bc22f8.js');
+require('./index-99d17291.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }