@koine/react 1.0.11 → 1.0.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Alert/Alert.js +7 -13
- package/Animations/Reveal.js +12 -10
- package/Animations/Underline.js +3 -13
- package/Animations/useReveal.js +18 -17
- package/Autocomplete/AutocompleteDownshift.js +1 -1
- package/Autocomplete/AutocompleteDownshiftMultiselect.js +1 -1
- package/Autocomplete/AutocompleteMui.js +61 -56
- package/Autocomplete/AutocompleteReach.js +1 -1
- package/Autocomplete/components.js +17 -72
- package/Autocomplete/helpers.js +1 -1
- package/Bg/BgColor.js +14 -24
- package/Bg/BgPhoto.js +11 -54
- package/Bg/BgSvg.js +6 -9
- package/Breadcrumbs/Breadcrumbs.js +14 -54
- package/Buttons/Button.js +8 -73
- package/Buttons/ButtonComposite.js +20 -41
- package/Buttons/ButtonFab.js +4 -6
- package/Buttons/ButtonLink.js +7 -6
- package/Buttons/IconButton.js +5 -17
- package/Calendar/CalendarDaygridCell.js +20 -14
- package/Calendar/CalendarDaygridNav.js +10 -9
- package/Calendar/CalendarDaygridTable.js +32 -30
- package/Calendar/CalendarLegend.js +7 -2
- package/Calendar/calendar-api-google.js +101 -68
- package/Calendar/useCalendar.js +114 -113
- package/Calendar/utils.js +73 -74
- package/Carousel/Carousel.js +1 -1
- package/Carousel/CarouselCss.js +12 -26
- package/Collapsable/Collapsable.js +1 -1
- package/Debug/Debug.js +5 -17
- package/Details/Details.js +30 -27
- package/Dialog/DialogMui.js +22 -20
- package/Dialog/css/bare.js +17 -15
- package/Dialog/m/bare.js +17 -13
- package/Dialog/m/basic.js +2 -2
- package/Dialog/m/index.js +4 -4
- package/Dialog/sc/bare.js +25 -43
- package/Dialog/sc/framer.js +6 -6
- package/Dialog/sc/framerMaterial.js +6 -6
- package/Dialog/sc/material.js +17 -37
- package/Dialog/tw/bare.js +25 -19
- package/Dialog/tw/elegant.js +17 -15
- package/Dialog/tw/framer.js +6 -6
- package/Dialog/tw/framerMaterial.js +6 -6
- package/Dialog/tw/material.js +17 -15
- package/Editor/Editor--tiptap.js +14 -11
- package/Editor/components.js +6 -24
- package/Favicon/FaviconTags.js +2 -1
- package/Form/Form.js +30 -28
- package/Form/sc/bare.js +9 -18
- package/Forms/Checkbox/Checkbox.js +9 -15
- package/Forms/Feedback/Feedback.js +6 -7
- package/Forms/Field/Field.js +15 -26
- package/Forms/Field/FieldControl.js +19 -15
- package/Forms/Field/FieldHint.js +3 -5
- package/Forms/Input/Input.js +10 -16
- package/Forms/InputGroup/InputGroup.js +9 -36
- package/Forms/Label/Label.js +5 -23
- package/Forms/Password/Password.js +10 -23
- package/Forms/Radio/Radio.js +15 -18
- package/Forms/Switch/Switch.js +9 -39
- package/Forms/Textarea/Textarea.js +6 -7
- package/Forms/Textarea/TextareaRich.js +10 -24
- package/Forms/Toggle/Toggle.js +19 -67
- package/Forms/Toggle/useToggle.js +29 -29
- package/Forms/antispam.js +12 -12
- package/Forms/helpers.js +7 -6
- package/Forms/styles.js +12 -43
- package/Gauge/Gauge.js +1 -1
- package/Grid/Grid.js +25 -51
- package/Hamburger/Hamburger.js +35 -47
- package/Header/useHeader.js +12 -12
- package/Hidden/Hidden.js +9 -13
- package/Img/sc/bare.js +3 -1
- package/Link/Link.js +3 -1
- package/Link/LinkBlank.js +8 -17
- package/Menu/Menu.js +3 -10
- package/MenuItem/MenuItem.js +3 -19
- package/Meta/Meta.js +3 -2
- package/NoJs/NoJs.js +2 -2
- package/Pagination/PaginationNav.js +26 -48
- package/Pagination/PaginationResults.js +7 -6
- package/Pill/Pill.js +6 -36
- package/Progress/ProgressCircular.js +9 -30
- package/Progress/ProgressLinear.js +8 -16
- package/Progress/ProgressOverlay.js +11 -27
- package/Rating/Rating.js +24 -44
- package/Rating/index.js +19 -15
- package/Select/SelectDownshift.js +1 -1
- package/Select/components.js +6 -12
- package/Sidebar/Sidebar.js +13 -38
- package/Spacing/Spacing.js +12 -12
- package/Sticky/Sticky.js +1 -1
- package/Sticky/StickyCss.js +4 -2
- package/Tabs/TabsMui.js +19 -16
- package/Tabs/tw/bare.js +13 -11
- package/Tabs/tw/material.js +15 -11
- package/Tabs/useTabs.js +16 -16
- package/Typography/CopyPasteVisible.js +3 -5
- package/Typography/Native.js +12 -45
- package/Typography/ReadMore.js +25 -51
- package/Typography/TextLoop.js +19 -22
- package/Typography/TypeStairs.js +20 -16
- package/helpers/classed.js +21 -18
- package/helpers/extend-component.js +6 -6
- package/hooks/useAsyncFn.js +18 -11
- package/hooks/useDateLocale.js +22 -13
- package/hooks/useEffectOnce.js +1 -1
- package/hooks/useFirstMountState.js +1 -1
- package/hooks/useFocus.js +3 -3
- package/hooks/useId.js +3 -2
- package/hooks/useIsomorphicLayoutEffect.js +1 -1
- package/hooks/useMount.js +2 -2
- package/hooks/useMountedState.js +4 -4
- package/hooks/usePrevious.js +2 -2
- package/hooks/useScrollPosition.js +20 -15
- package/hooks/useScrollTo.js +7 -5
- package/hooks/useTraceUpdate.js +4 -3
- package/hooks/useUpdateEffect.js +3 -3
- package/hooks/useWindowSize.js +3 -3
- package/m/MotionProvider.js +4 -2
- package/node/Alert/Alert.js +9 -16
- package/node/Alert/index.js +1 -1
- package/node/Animations/Reveal.js +15 -13
- package/node/Animations/Underline.js +5 -16
- package/node/Animations/index.js +1 -1
- package/node/Animations/useReveal.js +19 -18
- package/node/Autocomplete/AutocompleteMui.js +69 -64
- package/node/Autocomplete/components.js +26 -82
- package/node/Autocomplete/helpers.js +2 -2
- package/node/Bg/BgColor.js +18 -29
- package/node/Bg/BgPhoto.js +15 -59
- package/node/Bg/BgSvg.js +8 -12
- package/node/Bg/index.js +1 -1
- package/node/Breadcrumbs/Breadcrumbs.js +20 -61
- package/node/Breadcrumbs/index.js +1 -1
- package/node/Buttons/Button.js +10 -76
- package/node/Buttons/ButtonComposite.js +23 -45
- package/node/Buttons/ButtonFab.js +6 -9
- package/node/Buttons/ButtonLink.js +10 -10
- package/node/Buttons/IconButton.js +7 -20
- package/node/Buttons/index.js +1 -1
- package/node/Calendar/CalendarDaygridCell.js +24 -18
- package/node/Calendar/CalendarDaygridNav.js +14 -13
- package/node/Calendar/CalendarDaygridTable.js +39 -38
- package/node/Calendar/CalendarLegend.js +8 -3
- package/node/Calendar/calendar-api-google.js +105 -73
- package/node/Calendar/index.js +1 -1
- package/node/Calendar/useCalendar.js +117 -116
- package/node/Calendar/utils.js +82 -84
- package/node/Carousel/CarouselCss.js +17 -32
- package/node/Carousel/index.js +1 -1
- package/node/Collapsable/index.js +1 -1
- package/node/Debug/Debug.js +7 -20
- package/node/Debug/index.js +1 -1
- package/node/Details/Details.js +24 -22
- package/node/Details/index.js +1 -1
- package/node/Dialog/DialogMui.js +12 -11
- package/node/Dialog/css/bare.js +11 -10
- package/node/Dialog/m/bare.js +18 -14
- package/node/Dialog/m/basic.js +1 -1
- package/node/Dialog/m/index.js +4 -4
- package/node/Dialog/sc/bare.js +22 -41
- package/node/Dialog/sc/framer.js +5 -5
- package/node/Dialog/sc/framerMaterial.js +5 -5
- package/node/Dialog/sc/material.js +12 -33
- package/node/Dialog/tw/bare.js +19 -14
- package/node/Dialog/tw/elegant.js +11 -9
- package/node/Dialog/tw/framer.js +5 -5
- package/node/Dialog/tw/framerMaterial.js +5 -5
- package/node/Dialog/tw/material.js +11 -9
- package/node/Editor/Editor--tiptap.js +19 -17
- package/node/Editor/components.js +9 -28
- package/node/Editor/index.js +1 -1
- package/node/Favicon/FaviconTags.js +3 -2
- package/node/Favicon/index.js +1 -1
- package/node/Form/Form.js +20 -18
- package/node/Form/index.js +1 -1
- package/node/Form/sc/bare.js +12 -22
- package/node/Forms/Checkbox/Checkbox.js +13 -20
- package/node/Forms/Checkbox/index.js +1 -1
- package/node/Forms/Feedback/Feedback.js +8 -10
- package/node/Forms/Feedback/index.js +1 -1
- package/node/Forms/Field/Field.js +18 -30
- package/node/Forms/Field/FieldControl.js +26 -22
- package/node/Forms/Field/FieldHint.js +4 -7
- package/node/Forms/Field/index.js +1 -1
- package/node/Forms/Input/Input.js +15 -22
- package/node/Forms/Input/index.js +1 -1
- package/node/Forms/InputGroup/InputGroup.js +14 -42
- package/node/Forms/InputGroup/index.js +1 -1
- package/node/Forms/Label/Label.js +6 -25
- package/node/Forms/Label/index.js +1 -1
- package/node/Forms/Password/Password.js +16 -30
- package/node/Forms/Password/index.js +1 -1
- package/node/Forms/Radio/Radio.js +21 -25
- package/node/Forms/Radio/index.js +1 -1
- package/node/Forms/Switch/Switch.js +15 -46
- package/node/Forms/Switch/index.js +1 -1
- package/node/Forms/Textarea/Textarea.js +11 -13
- package/node/Forms/Textarea/TextareaRich.js +16 -31
- package/node/Forms/Textarea/index.js +1 -1
- package/node/Forms/Toggle/Toggle.js +23 -72
- package/node/Forms/Toggle/index.js +1 -1
- package/node/Forms/Toggle/useToggle.js +33 -33
- package/node/Forms/antispam.js +14 -14
- package/node/Forms/helpers.js +8 -7
- package/node/Forms/index.js +1 -1
- package/node/Forms/styles.js +16 -48
- package/node/Gauge/Gauge.js +1 -1
- package/node/Grid/Grid.js +24 -51
- package/node/Grid/index.js +1 -1
- package/node/Hamburger/Hamburger.js +37 -50
- package/node/Hamburger/index.js +1 -1
- package/node/Header/index.js +1 -1
- package/node/Header/useHeader.js +16 -16
- package/node/Hidden/Hidden.js +10 -15
- package/node/Hidden/index.js +1 -1
- package/node/Img/index.js +1 -1
- package/node/Img/sc/bare.js +4 -3
- package/node/Link/Link.js +4 -3
- package/node/Link/LinkBlank.js +11 -21
- package/node/Link/index.js +1 -1
- package/node/Menu/Menu.js +4 -12
- package/node/Menu/index.js +1 -1
- package/node/MenuItem/MenuItem.js +4 -21
- package/node/MenuItem/index.js +1 -1
- package/node/Meta/Meta.js +4 -3
- package/node/Meta/index.js +1 -1
- package/node/NoJs/NoJs.js +3 -3
- package/node/NoJs/index.js +1 -1
- package/node/Pagination/PaginationNav.js +30 -53
- package/node/Pagination/PaginationResults.js +10 -10
- package/node/Pagination/index.js +1 -1
- package/node/Pill/Pill.js +7 -38
- package/node/Pill/index.js +1 -1
- package/node/Progress/ProgressCircular.js +11 -33
- package/node/Progress/ProgressLinear.js +11 -20
- package/node/Progress/ProgressOverlay.js +18 -35
- package/node/Progress/index.js +1 -1
- package/node/Rating/Rating.js +28 -49
- package/node/Rating/index.js +20 -16
- package/node/Select/components.js +11 -18
- package/node/Sidebar/Sidebar.js +21 -47
- package/node/Sidebar/index.js +1 -1
- package/node/Spacing/Spacing.js +16 -17
- package/node/Spacing/index.js +1 -1
- package/node/Sticky/StickyCss.js +5 -3
- package/node/Sticky/index.js +1 -1
- package/node/Tabs/TabsMui.js +16 -14
- package/node/Tabs/index.js +1 -1
- package/node/Tabs/tw/bare.js +9 -8
- package/node/Tabs/tw/material.js +11 -7
- package/node/Tabs/useTabs.js +19 -19
- package/node/Typography/CopyPasteVisible.js +4 -7
- package/node/Typography/Native.js +14 -48
- package/node/Typography/ReadMore.js +30 -57
- package/node/Typography/TextLoop.js +22 -25
- package/node/Typography/TypeStairs.js +22 -18
- package/node/Typography/index.js +1 -1
- package/node/css/index.js +1 -1
- package/node/helpers/classed.js +22 -19
- package/node/helpers/extend-component.js +7 -7
- package/node/helpers/index.js +1 -1
- package/node/hooks/index.js +1 -1
- package/node/hooks/useAsyncFn.js +20 -13
- package/node/hooks/useDateLocale.js +23 -37
- package/node/hooks/useEffectOnce.js +2 -2
- package/node/hooks/useFirstMountState.js +2 -2
- package/node/hooks/useFocus.js +4 -4
- package/node/hooks/useId.js +4 -3
- package/node/hooks/useIsomorphicLayoutEffect.js +2 -2
- package/node/hooks/useMount.js +3 -3
- package/node/hooks/useMountedState.js +5 -5
- package/node/hooks/usePrevious.js +3 -3
- package/node/hooks/useScrollPosition.js +23 -18
- package/node/hooks/useScrollTo.js +9 -7
- package/node/hooks/useTraceUpdate.js +5 -4
- package/node/hooks/useUpdateEffect.js +5 -5
- package/node/hooks/useWindowSize.js +4 -4
- package/node/index.js +1 -1
- package/node/m/MotionProvider.js +6 -4
- package/node/m/index.js +1 -1
- package/node/m/lite.js +1 -1
- package/node/m/max.js +1 -1
- package/node/sc/index.js +1 -1
- package/node/scm/index.js +1 -1
- package/node/shared/index.js +1 -1
- package/node/styles/Body.js +5 -10
- package/node/styles/Global.js +5 -37
- package/node/styles/index.js +1 -1
- package/node/styles/media.js +42 -38
- package/node/styles/spacing.js +15 -16
- package/node/styles/styled.js +7 -21
- package/node/styles/theme--vanilla.js +21 -19
- package/node/styles/theme.js +9 -9
- package/node/tw/index.js +1 -1
- package/node/twm/index.js +1 -1
- package/package.json +3 -2
- package/styles/Body.js +4 -8
- package/styles/Global.js +4 -36
- package/styles/media.js +41 -36
- package/styles/spacing.js +15 -16
- package/styles/styled.js +7 -21
- package/styles/theme--vanilla.js +20 -18
- package/styles/theme.js +11 -11
|
@@ -1,46 +1,19 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.KoinePaginationNav = void 0;
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
display:
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
text-decoration: none;
|
|
18
|
-
}
|
|
19
|
-
`;
|
|
20
|
-
const item = `
|
|
21
|
-
display: block;
|
|
22
|
-
padding: 5px 10px;
|
|
23
|
-
`;
|
|
24
|
-
const ItemCurrent = styled_components_1.default.span `
|
|
25
|
-
${item}
|
|
26
|
-
background: var(--accent400);
|
|
27
|
-
border-radius: 2px;
|
|
28
|
-
`;
|
|
29
|
-
const ItemLink = styled_components_1.default.a `
|
|
30
|
-
${item}
|
|
31
|
-
|
|
32
|
-
${(props) => (props.prev ? "color: var(--grey100);" : "")}
|
|
33
|
-
`;
|
|
34
|
-
const DotsSeparator = styled_components_1.default.span `
|
|
35
|
-
color: var(--grey100);
|
|
36
|
-
`;
|
|
37
|
-
const arrow = `display: flex; font-size: 20px;`;
|
|
38
|
-
const ItemPrev = styled_components_1.default.a `
|
|
39
|
-
${arrow}
|
|
40
|
-
`;
|
|
41
|
-
const ItemNext = styled_components_1.default.a `
|
|
42
|
-
${arrow}
|
|
43
|
-
`;
|
|
4
|
+
var tslib_1 = require("tslib");
|
|
5
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
+
var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
|
|
7
|
+
var cg_1 = require("react-icons/cg");
|
|
8
|
+
var utils_1 = require("@koine/utils");
|
|
9
|
+
var Root = styled_components_1.default.nav(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 20px 0 40px;\n font-weight: 600;\n\n & a {\n text-decoration: none;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 20px 0 40px;\n font-weight: 600;\n\n & a {\n text-decoration: none;\n }\n"])));
|
|
10
|
+
var item = "\n display: block;\n padding: 5px 10px;\n";
|
|
11
|
+
var ItemCurrent = styled_components_1.default.span(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n ", "\n background: var(--accent400);\n border-radius: 2px;\n"], ["\n ", "\n background: var(--accent400);\n border-radius: 2px;\n"])), item);
|
|
12
|
+
var ItemLink = styled_components_1.default.a(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), item, function (props) { return (props.prev ? "color: var(--grey100);" : ""); });
|
|
13
|
+
var DotsSeparator = styled_components_1.default.span(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n color: var(--grey100);\n"], ["\n color: var(--grey100);\n"])));
|
|
14
|
+
var arrow = "display: flex; font-size: 20px;";
|
|
15
|
+
var ItemPrev = styled_components_1.default.a(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), arrow);
|
|
16
|
+
var ItemNext = styled_components_1.default.a(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), arrow);
|
|
44
17
|
/*
|
|
45
18
|
* Possible outcomes:
|
|
46
19
|
* [1] 2 3 ... 78 >
|
|
@@ -49,7 +22,8 @@ const ItemNext = styled_components_1.default.a `
|
|
|
49
22
|
* < 1 ... 75 76 [77] 78 >
|
|
50
23
|
* < 1 ... 76 77 [78]
|
|
51
24
|
*/
|
|
52
|
-
|
|
25
|
+
var KoinePaginationNav = function (_a) {
|
|
26
|
+
var total = _a.total, perPage = _a.perPage, currentPage = _a.currentPage, baseUrl = _a.baseUrl, _b = _a.showOffset, showOffset = _b === void 0 ? 2 : _b, _c = _a.currentUrl, currentUrl = _c === void 0 ? "/" : _c, _d = _a.Link, Link = _d === void 0 ? "a" : _d;
|
|
53
27
|
total = (0, utils_1.ensureInt)(total);
|
|
54
28
|
currentPage = (0, utils_1.ensureInt)(currentPage);
|
|
55
29
|
perPage = (0, utils_1.ensureInt)(perPage);
|
|
@@ -60,15 +34,15 @@ const KoinePaginationNav = ({ total, perPage, currentPage, baseUrl, showOffset =
|
|
|
60
34
|
if (total < perPage) {
|
|
61
35
|
return null;
|
|
62
36
|
}
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
37
|
+
var firstPage = 1;
|
|
38
|
+
var lastPage = Math.ceil(total / perPage);
|
|
39
|
+
var prevPage = currentPage - 1 > firstPage ? currentPage - 1 : "";
|
|
40
|
+
var nextPage = currentPage + 1 < lastPage ? currentPage + 1 : lastPage;
|
|
41
|
+
var prevArrow = currentPage > firstPage;
|
|
42
|
+
var nextArrow = currentPage < lastPage;
|
|
43
|
+
var pages = [];
|
|
70
44
|
// fill the pages before the current
|
|
71
|
-
for (
|
|
45
|
+
for (var i = currentPage - showOffset; i < currentPage; i++) {
|
|
72
46
|
if (i > 1) {
|
|
73
47
|
pages.push(i);
|
|
74
48
|
}
|
|
@@ -76,13 +50,16 @@ const KoinePaginationNav = ({ total, perPage, currentPage, baseUrl, showOffset =
|
|
|
76
50
|
// add the current
|
|
77
51
|
pages.push(currentPage);
|
|
78
52
|
// fill the pages after the current
|
|
79
|
-
for (
|
|
53
|
+
for (var i = currentPage + 1; i < currentPage + 1 + showOffset; i++) {
|
|
80
54
|
if (i < lastPage) {
|
|
81
55
|
pages.push(i);
|
|
82
56
|
}
|
|
83
57
|
}
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
return ((0, jsx_runtime_1.jsxs)(Root, { children: [prevArrow && ((0, jsx_runtime_1.jsx)(ItemPrev, { as: Link, href:
|
|
58
|
+
var prevDots = pages[0] > firstPage + 1;
|
|
59
|
+
var nextDots = pages[pages.length - 1] < lastPage - 1;
|
|
60
|
+
return ((0, jsx_runtime_1.jsxs)(Root, { children: [prevArrow && ((0, jsx_runtime_1.jsx)(ItemPrev, tslib_1.__assign({ as: Link, href: "".concat(baseUrl, "/").concat(prevPage) }, { children: (0, jsx_runtime_1.jsx)(cg_1.CgArrowLeftR, {}) }))), firstPage !== currentPage && ((0, jsx_runtime_1.jsx)(ItemLink, tslib_1.__assign({ as: Link, href: "".concat(baseUrl), prev: true }, { children: firstPage }))), prevDots && (0, jsx_runtime_1.jsx)(DotsSeparator, { children: "..." }), pages.map(function (page) {
|
|
61
|
+
return page === currentPage ? ((0, jsx_runtime_1.jsx)(ItemCurrent, { children: page }, page)) : ((0, jsx_runtime_1.jsx)(ItemLink, tslib_1.__assign({ as: Link, href: "".concat(baseUrl, "/").concat(page), prev: page < currentPage, next: page > currentPage }, { children: page }), "pagination-".concat(page)));
|
|
62
|
+
}), nextDots && (0, jsx_runtime_1.jsx)(DotsSeparator, { children: "..." }), lastPage !== currentPage && ((0, jsx_runtime_1.jsx)(ItemLink, tslib_1.__assign({ as: Link, href: "".concat(baseUrl, "/").concat(lastPage), next: true }, { children: lastPage }))), nextArrow && ((0, jsx_runtime_1.jsx)(ItemNext, tslib_1.__assign({ as: Link, href: "".concat(baseUrl, "/").concat(nextPage) }, { children: (0, jsx_runtime_1.jsx)(cg_1.CgArrowRightR, {}) })))] }));
|
|
87
63
|
};
|
|
88
64
|
exports.KoinePaginationNav = KoinePaginationNav;
|
|
65
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.PaginationResults = void 0;
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
return ((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { exitBeforeEnter: true, initial: true, children: (0, jsx_runtime_1.jsx)(Root, { children: (0, jsx_runtime_1.jsx)(Inner, { initial: { opacity: 0, x: -100 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: 100 }, transition: { type: "linear", staggerChildren: 0.3 }, children: children }) }) }));
|
|
4
|
+
var tslib_1 = require("tslib");
|
|
5
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
+
var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
|
|
7
|
+
var framer_motion_1 = require("framer-motion");
|
|
8
|
+
var Root = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n // overflow: hidden;\n"], ["\n // overflow: hidden;\n"])));
|
|
9
|
+
var Inner = (0, styled_components_1.default)(framer_motion_1.m.div)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject([""], [""])));
|
|
10
|
+
var PaginationResults = function (_a) {
|
|
11
|
+
var children = _a.children;
|
|
12
|
+
return ((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, tslib_1.__assign({ exitBeforeEnter: true, initial: true }, { children: (0, jsx_runtime_1.jsx)(Root, { children: (0, jsx_runtime_1.jsx)(Inner, tslib_1.__assign({ initial: { opacity: 0, x: -100 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: 100 }, transition: { type: "linear", staggerChildren: 0.3 } }, { children: children })) }) })));
|
|
14
13
|
};
|
|
15
14
|
exports.PaginationResults = PaginationResults;
|
|
15
|
+
var templateObject_1, templateObject_2;
|
package/node/Pagination/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
|
|
3
|
+
var tslib_1 = require("tslib");
|
|
4
4
|
tslib_1.__exportStar(require("./PaginationNav"), exports);
|
|
5
5
|
tslib_1.__exportStar(require("./PaginationResults"), exports);
|
package/node/Pill/Pill.js
CHANGED
|
@@ -1,41 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.PillAccentLightOutlined = exports.PillAccentLight = exports.PillGreyLight = exports.Pill = void 0;
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
exports.Pill = styled_components_1.default.div
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
text-decoration: none;
|
|
12
|
-
font-size: 13px;
|
|
13
|
-
font-weight: 600;
|
|
14
|
-
`;
|
|
15
|
-
exports.PillGreyLight = (0, styled_components_1.default)(exports.Pill) `
|
|
16
|
-
background: var(--grey800);
|
|
17
|
-
color: var(--grey100);
|
|
18
|
-
|
|
19
|
-
&:hover {
|
|
20
|
-
color: white;
|
|
21
|
-
background: var(--grey300);
|
|
22
|
-
}
|
|
23
|
-
`;
|
|
24
|
-
exports.PillAccentLight = (0, styled_components_1.default)(exports.Pill) `
|
|
25
|
-
background: var(--accent400);
|
|
26
|
-
color: var(--grey100);
|
|
27
|
-
|
|
28
|
-
&:hover {
|
|
29
|
-
color: #fff;
|
|
30
|
-
background: var(--accent300);
|
|
31
|
-
}
|
|
32
|
-
`;
|
|
33
|
-
exports.PillAccentLightOutlined = (0, styled_components_1.default)(exports.Pill) `
|
|
34
|
-
border: 1px solid var(--accent300);
|
|
35
|
-
color: var(--accent200);
|
|
36
|
-
|
|
37
|
-
&:hover {
|
|
38
|
-
color: #fff;
|
|
39
|
-
background: var(--accent300);
|
|
40
|
-
}
|
|
41
|
-
`;
|
|
4
|
+
var tslib_1 = require("tslib");
|
|
5
|
+
var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
|
|
6
|
+
exports.Pill = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n display: inline-block;\n padding: 5px 10px;\n margin: 0 0.5em 0.5em 0;\n border-radius: 2px;\n text-decoration: none;\n font-size: 13px;\n font-weight: 600;\n"], ["\n display: inline-block;\n padding: 5px 10px;\n margin: 0 0.5em 0.5em 0;\n border-radius: 2px;\n text-decoration: none;\n font-size: 13px;\n font-weight: 600;\n"])));
|
|
7
|
+
exports.PillGreyLight = (0, styled_components_1.default)(exports.Pill)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n background: var(--grey800);\n color: var(--grey100);\n\n &:hover {\n color: white;\n background: var(--grey300);\n }\n"], ["\n background: var(--grey800);\n color: var(--grey100);\n\n &:hover {\n color: white;\n background: var(--grey300);\n }\n"])));
|
|
8
|
+
exports.PillAccentLight = (0, styled_components_1.default)(exports.Pill)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n background: var(--accent400);\n color: var(--grey100);\n\n &:hover {\n color: #fff;\n background: var(--accent300);\n }\n"], ["\n background: var(--accent400);\n color: var(--grey100);\n\n &:hover {\n color: #fff;\n background: var(--accent300);\n }\n"])));
|
|
9
|
+
exports.PillAccentLightOutlined = (0, styled_components_1.default)(exports.Pill)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n border: 1px solid var(--accent300);\n color: var(--accent200);\n\n &:hover {\n color: #fff;\n background: var(--accent300);\n }\n"], ["\n border: 1px solid var(--accent300);\n color: var(--accent200);\n\n &:hover {\n color: #fff;\n background: var(--accent300);\n }\n"])));
|
|
10
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
package/node/Pill/index.js
CHANGED
|
@@ -1,41 +1,19 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.ProgressCircular = void 0;
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
0% {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
100% {
|
|
12
|
-
transform: rotate(360deg);
|
|
13
|
-
}
|
|
14
|
-
`;
|
|
15
|
-
const animationCircle = (0, styled_components_1.keyframes) `
|
|
16
|
-
0% {
|
|
17
|
-
stroke-dasharray: 1px, 200px;
|
|
18
|
-
stroke-dashoffset: 0;
|
|
19
|
-
}
|
|
20
|
-
50% {
|
|
21
|
-
stroke-dasharray: 100px, 200px;
|
|
22
|
-
stroke-dashoffset: -15px;
|
|
23
|
-
}
|
|
24
|
-
100% {
|
|
25
|
-
stroke-dasharray: 100px, 200px;
|
|
26
|
-
stroke-dashoffset: -125px;
|
|
27
|
-
}
|
|
28
|
-
`;
|
|
29
|
-
const ProgressCircularSvg = styled_components_1.default.svg `
|
|
30
|
-
animation: ${animationRotation} 1.5s linear infinite;
|
|
31
|
-
`;
|
|
32
|
-
const ProgressCircularCircle = styled_components_1.default.circle `
|
|
33
|
-
animation: ${animationCircle} 1.5s linear infinite;
|
|
34
|
-
`;
|
|
4
|
+
var tslib_1 = require("tslib");
|
|
5
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
+
var styled_components_1 = tslib_1.__importStar(require("styled-components"));
|
|
7
|
+
var animationRotation = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n"], ["\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n"])));
|
|
8
|
+
var animationCircle = (0, styled_components_1.keyframes)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n 0% {\n stroke-dasharray: 1px, 200px;\n stroke-dashoffset: 0;\n }\n 50% {\n stroke-dasharray: 100px, 200px;\n stroke-dashoffset: -15px;\n }\n 100% {\n stroke-dasharray: 100px, 200px;\n stroke-dashoffset: -125px;\n }\n"], ["\n 0% {\n stroke-dasharray: 1px, 200px;\n stroke-dashoffset: 0;\n }\n 50% {\n stroke-dasharray: 100px, 200px;\n stroke-dashoffset: -15px;\n }\n 100% {\n stroke-dasharray: 100px, 200px;\n stroke-dashoffset: -125px;\n }\n"])));
|
|
9
|
+
var ProgressCircularSvg = styled_components_1.default.svg(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n animation: ", " 1.5s linear infinite;\n"], ["\n animation: ", " 1.5s linear infinite;\n"])), animationRotation);
|
|
10
|
+
var ProgressCircularCircle = styled_components_1.default.circle(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n animation: ", " 1.5s linear infinite;\n"], ["\n animation: ", " 1.5s linear infinite;\n"])), animationCircle);
|
|
35
11
|
/**
|
|
36
12
|
* @see https://mui.com/components/progress/
|
|
37
13
|
*/
|
|
38
|
-
|
|
39
|
-
|
|
14
|
+
var ProgressCircular = function (_a) {
|
|
15
|
+
var _b = _a.size, size = _b === void 0 ? "1em" : _b, _c = _a.thickness, thickness = _c === void 0 ? 1 : _c, _d = _a.color, color = _d === void 0 ? "currentColor" : _d, props = tslib_1.__rest(_a, ["size", "thickness", "color"]);
|
|
16
|
+
return ((0, jsx_runtime_1.jsx)(ProgressCircularSvg, tslib_1.__assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 44 44", style: { width: size, height: size } }, props, { children: (0, jsx_runtime_1.jsx)(ProgressCircularCircle, { cx: "22", cy: "22", r: "20", fill: "none", strokeWidth: thickness, style: { stroke: color } }) })));
|
|
40
17
|
};
|
|
41
18
|
exports.ProgressCircular = ProgressCircular;
|
|
19
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -1,28 +1,18 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.ProgressLinear = void 0;
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
position:
|
|
10
|
-
overflow: hidden;
|
|
11
|
-
display: block;
|
|
12
|
-
height: 4px;
|
|
13
|
-
`;
|
|
14
|
-
const ProgressLinearFg = (0, styled_components_1.default)(framer_motion_1.m.span) `
|
|
15
|
-
position: absolute;
|
|
16
|
-
top: 0;
|
|
17
|
-
bottom: 0;
|
|
18
|
-
left: 0;
|
|
19
|
-
width: 100%;
|
|
20
|
-
`;
|
|
4
|
+
var tslib_1 = require("tslib");
|
|
5
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
+
var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
|
|
7
|
+
var framer_motion_1 = require("framer-motion");
|
|
8
|
+
var ProgressLinearBg = styled_components_1.default.span(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n position: relative;\n overflow: hidden;\n display: block;\n height: 4px;\n"], ["\n position: relative;\n overflow: hidden;\n display: block;\n height: 4px;\n"])));
|
|
9
|
+
var ProgressLinearFg = (0, styled_components_1.default)(framer_motion_1.m.span)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n"], ["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n"])));
|
|
21
10
|
/**
|
|
22
11
|
* @see https://mui.com/components/progress/#linear
|
|
23
12
|
*/
|
|
24
|
-
|
|
25
|
-
|
|
13
|
+
var ProgressLinear = function (_a) {
|
|
14
|
+
var _b = _a.done, done = _b === void 0 ? false : _b, _c = _a.height, height = _c === void 0 ? "2px" : _c, _d = _a.bg, bg = _d === void 0 ? "transparent" : _d, _e = _a.fg, fg = _e === void 0 ? "currentColor" : _e, props = tslib_1.__rest(_a, ["done", "height", "bg", "fg"]);
|
|
15
|
+
return ((0, jsx_runtime_1.jsx)(ProgressLinearBg, tslib_1.__assign({ style: { height: height, background: bg } }, props, { children: (0, jsx_runtime_1.jsx)(ProgressLinearFg, { style: { height: height, background: fg }, initial: {
|
|
26
16
|
x: "-100%",
|
|
27
17
|
}, animate: {
|
|
28
18
|
x: done ? "-100%" : "0%",
|
|
@@ -32,6 +22,7 @@ const ProgressLinear = ({ done = false, height = "2px", bg = "transparent", fg =
|
|
|
32
22
|
repeat: Infinity,
|
|
33
23
|
repeatType: "reverse",
|
|
34
24
|
duration: 2,
|
|
35
|
-
} }) }));
|
|
25
|
+
} }) })));
|
|
36
26
|
};
|
|
37
27
|
exports.ProgressLinear = ProgressLinear;
|
|
28
|
+
var templateObject_1, templateObject_2;
|
|
@@ -1,45 +1,28 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.ProgressOverlay = void 0;
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
right: 0;
|
|
18
|
-
bottom: 0;
|
|
19
|
-
pointer-events: none;
|
|
20
|
-
cursor: wait;
|
|
21
|
-
`;
|
|
22
|
-
const ProgressOverlayCenterer = styled_components_1.default.div `
|
|
23
|
-
position: absolute;
|
|
24
|
-
top: 0;
|
|
25
|
-
left: 0;
|
|
26
|
-
right: 0;
|
|
27
|
-
bottom: 0;
|
|
28
|
-
display: flex;
|
|
29
|
-
align-items: center;
|
|
30
|
-
justify-content: center;
|
|
31
|
-
background: var(--progress-overlay-bg);
|
|
32
|
-
`;
|
|
33
|
-
const ProgressOverlay = ({ running }) => {
|
|
34
|
-
const [, , headerHeight] = (0, Header_1.useHeader)();
|
|
4
|
+
var tslib_1 = require("tslib");
|
|
5
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
+
var react_1 = require("react");
|
|
7
|
+
var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
|
|
8
|
+
var framer_motion_1 = require("framer-motion");
|
|
9
|
+
var ProgressCircular_1 = require("./ProgressCircular");
|
|
10
|
+
var ProgressLinear_1 = require("./ProgressLinear");
|
|
11
|
+
var Header_1 = require("../Header");
|
|
12
|
+
var ProgressOverlayWrap = (0, styled_components_1.default)(framer_motion_1.m.div)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n z-index: 10000;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n pointer-events: none;\n cursor: wait;\n"], ["\n z-index: 10000;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n pointer-events: none;\n cursor: wait;\n"])));
|
|
13
|
+
var ProgressOverlayCenterer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--progress-overlay-bg);\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--progress-overlay-bg);\n"])));
|
|
14
|
+
var ProgressOverlay = function (_a) {
|
|
15
|
+
var running = _a.running;
|
|
16
|
+
var _b = (0, Header_1.useHeader)(), headerHeight = _b[2];
|
|
35
17
|
// const [progress, setProgress] = useState(0);
|
|
36
|
-
(0, react_1.useEffect)(()
|
|
18
|
+
(0, react_1.useEffect)(function () {
|
|
37
19
|
document.body.style.cursor = running ? "wait" : "";
|
|
38
20
|
}, [running]);
|
|
39
|
-
return ((0, jsx_runtime_1.jsxs)(ProgressOverlayWrap, { animate: {
|
|
21
|
+
return ((0, jsx_runtime_1.jsxs)(ProgressOverlayWrap, tslib_1.__assign({ animate: {
|
|
40
22
|
opacity: running ? 1 : 0,
|
|
41
|
-
}, initial: { opacity: 0 }, transition: { type: "easeInOut" }, children: [(0, jsx_runtime_1.jsx)(ProgressLinear_1.ProgressLinear, { bg: "var(--accent400)", fg: "var(--accent300)", done: !running }), (0, jsx_runtime_1.jsx)(ProgressOverlayCenterer, { style: {
|
|
23
|
+
}, initial: { opacity: 0 }, transition: { type: "easeInOut" } }, { children: [(0, jsx_runtime_1.jsx)(ProgressLinear_1.ProgressLinear, { bg: "var(--accent400)", fg: "var(--accent300)", done: !running }), (0, jsx_runtime_1.jsx)(ProgressOverlayCenterer, tslib_1.__assign({ style: {
|
|
42
24
|
top: headerHeight + "px",
|
|
43
|
-
}, children: (0, jsx_runtime_1.jsx)(ProgressCircular_1.ProgressCircular, { size: "50px", color: "var(--accent300)" }) })] }));
|
|
25
|
+
} }, { children: (0, jsx_runtime_1.jsx)(ProgressCircular_1.ProgressCircular, { size: "50px", color: "var(--accent300)" }) }))] })));
|
|
44
26
|
};
|
|
45
27
|
exports.ProgressOverlay = ProgressOverlay;
|
|
28
|
+
var templateObject_1, templateObject_2;
|
package/node/Progress/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
|
|
3
|
+
var tslib_1 = require("tslib");
|
|
4
4
|
tslib_1.__exportStar(require("./ProgressCircular"), exports);
|
|
5
5
|
tslib_1.__exportStar(require("./ProgressLinear"), exports);
|
|
6
6
|
tslib_1.__exportStar(require("./ProgressOverlay"), exports);
|
package/node/Rating/Rating.js
CHANGED
|
@@ -1,54 +1,32 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.Rating = exports.RatingRoot = exports.RatingValue = exports.RatingCount = exports.RatingDetails = exports.RatingStar = exports.RatingStarRoot = void 0;
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
exports.RatingStarRoot = styled_components_1.default.svg
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
const RatingStar = ({ value, colorBg = "#FFD84C", colorStroke = "#947813", size, ...props }) => {
|
|
15
|
-
const id = (0, useId_1.useId)();
|
|
16
|
-
return ((0, jsx_runtime_1.jsxs)(exports.RatingStarRoot, { viewBox: "0 0 16 16", "data-value": value, width: size + "px", height: size + "px", ...props, children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("linearGradient", { id: id, x1: "0", y1: "0", x2: "1", y2: "0", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0", stopColor: colorBg }), (0, jsx_runtime_1.jsx)("stop", { offset: value, stopColor: colorBg }), (0, jsx_runtime_1.jsx)("stop", { offset: value, stopColor: "rgba(255, 255, 255, 0)" })] }) }), (0, jsx_runtime_1.jsx)("path", { stroke: colorStroke, strokeWidth: "0.5", fill: `url(#${id})`, d: "M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" })] }));
|
|
4
|
+
var tslib_1 = require("tslib");
|
|
5
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
+
var react_1 = require("react");
|
|
7
|
+
var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
|
|
8
|
+
var useId_1 = require("../hooks/useId");
|
|
9
|
+
exports.RatingStarRoot = styled_components_1.default.svg(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n display: inline-block;\n vertical-align: middle;\n margin-right: 1px;\n"], ["\n display: inline-block;\n vertical-align: middle;\n margin-right: 1px;\n"])));
|
|
10
|
+
var RatingStar = function (_a) {
|
|
11
|
+
var value = _a.value, _b = _a.colorBg, colorBg = _b === void 0 ? "#FFD84C" : _b, _c = _a.colorStroke, colorStroke = _c === void 0 ? "#947813" : _c, size = _a.size, props = tslib_1.__rest(_a, ["value", "colorBg", "colorStroke", "size"]);
|
|
12
|
+
var id = (0, useId_1.useId)();
|
|
13
|
+
return ((0, jsx_runtime_1.jsxs)(exports.RatingStarRoot, tslib_1.__assign({ viewBox: "0 0 16 16", "data-value": value, width: size + "px", height: size + "px" }, props, { children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("linearGradient", tslib_1.__assign({ id: id, x1: "0", y1: "0", x2: "1", y2: "0" }, { children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0", stopColor: colorBg }), (0, jsx_runtime_1.jsx)("stop", { offset: value, stopColor: colorBg }), (0, jsx_runtime_1.jsx)("stop", { offset: value, stopColor: "rgba(255, 255, 255, 0)" })] })) }), (0, jsx_runtime_1.jsx)("path", { stroke: colorStroke, strokeWidth: "0.5", fill: "url(#".concat(id, ")"), d: "M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" })] })));
|
|
17
14
|
};
|
|
18
15
|
exports.RatingStar = RatingStar;
|
|
19
|
-
exports.RatingDetails = styled_components_1.default.span
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
display: none;
|
|
34
|
-
`;
|
|
35
|
-
exports.RatingRoot = styled_components_1.default.div `
|
|
36
|
-
display: flex;
|
|
37
|
-
align-items: center;
|
|
38
|
-
|
|
39
|
-
&:hover ${exports.RatingValue} {
|
|
40
|
-
display: inline-block;
|
|
41
|
-
}
|
|
42
|
-
`;
|
|
43
|
-
const Rating = ({ value = 0, count, min = 0, max = 5, showDetails = true, colorBg, colorStroke, starSize = 16, }) => {
|
|
44
|
-
const id = (0, useId_1.useId)();
|
|
45
|
-
const [currentValue /* , _setCurrentValue */] = (0, react_1.useState)(value);
|
|
46
|
-
const [stars, setStars] = (0, react_1.useState)([]);
|
|
47
|
-
const getStars = (0, react_1.useCallback)((activeCount) => {
|
|
48
|
-
const stars = [];
|
|
49
|
-
for (let currentStar = min + 1; currentStar < max + 1; currentStar++) {
|
|
50
|
-
let starValue;
|
|
51
|
-
const roundedActiveCount = Math.floor(activeCount);
|
|
16
|
+
exports.RatingDetails = styled_components_1.default.span(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n padding-left: 0.5em;\n font-size: 12px;\n color: var(--grey100);\n\n &:before {\n content: \"(\";\n }\n &:after {\n content: \")\";\n }\n"], ["\n padding-left: 0.5em;\n font-size: 12px;\n color: var(--grey100);\n\n &:before {\n content: \"(\";\n }\n &:after {\n content: \")\";\n }\n"])));
|
|
17
|
+
exports.RatingCount = styled_components_1.default.span(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject([""], [""])));
|
|
18
|
+
exports.RatingValue = styled_components_1.default.span(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n display: none;\n"], ["\n display: none;\n"])));
|
|
19
|
+
exports.RatingRoot = styled_components_1.default.div(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n display: flex;\n align-items: center;\n\n &:hover ", " {\n display: inline-block;\n }\n"], ["\n display: flex;\n align-items: center;\n\n &:hover ", " {\n display: inline-block;\n }\n"])), exports.RatingValue);
|
|
20
|
+
var Rating = function (_a) {
|
|
21
|
+
var _b = _a.value, value = _b === void 0 ? 0 : _b, count = _a.count, _c = _a.min, min = _c === void 0 ? 0 : _c, _d = _a.max, max = _d === void 0 ? 5 : _d, _e = _a.showDetails, showDetails = _e === void 0 ? true : _e, colorBg = _a.colorBg, colorStroke = _a.colorStroke, _f = _a.starSize, starSize = _f === void 0 ? 16 : _f;
|
|
22
|
+
var id = (0, useId_1.useId)();
|
|
23
|
+
var currentValue = (0, react_1.useState)(value)[0] /* , _setCurrentValue */;
|
|
24
|
+
var _g = (0, react_1.useState)([]), stars = _g[0], setStars = _g[1];
|
|
25
|
+
var getStars = (0, react_1.useCallback)(function (activeCount) {
|
|
26
|
+
var stars = [];
|
|
27
|
+
for (var currentStar = min + 1; currentStar < max + 1; currentStar++) {
|
|
28
|
+
var starValue = void 0;
|
|
29
|
+
var roundedActiveCount = Math.floor(activeCount);
|
|
52
30
|
// we have a rating of 3.4, when we get to the 4th star:
|
|
53
31
|
if (roundedActiveCount === currentStar - 1) {
|
|
54
32
|
starValue = 1 - (currentStar - activeCount);
|
|
@@ -63,7 +41,7 @@ const Rating = ({ value = 0, count, min = 0, max = 5, showDetails = true, colorB
|
|
|
63
41
|
}
|
|
64
42
|
return stars;
|
|
65
43
|
}, [min, max]);
|
|
66
|
-
(0, react_1.useEffect)(()
|
|
44
|
+
(0, react_1.useEffect)(function () {
|
|
67
45
|
setStars(getStars(currentValue));
|
|
68
46
|
}, [currentValue, getStars]);
|
|
69
47
|
// function updateStars(index) {
|
|
@@ -88,10 +66,11 @@ const Rating = ({ value = 0, count, min = 0, max = 5, showDetails = true, colorB
|
|
|
88
66
|
// onChange(value);
|
|
89
67
|
// }
|
|
90
68
|
// }, [onChange];
|
|
91
|
-
return ((0, jsx_runtime_1.jsxs)(exports.RatingRoot, { children: [stars.map((star, idx)
|
|
69
|
+
return ((0, jsx_runtime_1.jsxs)(exports.RatingRoot, { children: [stars.map(function (star, idx) { return ((0, jsx_runtime_1.jsx)(exports.RatingStar, { idx: idx, dataIdx: idx, size: starSize,
|
|
92
70
|
// onMouseOver={handleMouseOver}
|
|
93
71
|
// onMouseLeave={handleMouseLeave}
|
|
94
72
|
// onClick={handleClick}
|
|
95
|
-
value: star.value, colorBg: colorBg, colorStroke: colorStroke }, id + idx))), " ", showDetails && count && ((0, jsx_runtime_1.jsxs)(exports.RatingDetails, { children: [(0, jsx_runtime_1.jsx)(exports.RatingCount, { children: count }), (0, jsx_runtime_1.jsx)(exports.RatingValue, { children:
|
|
73
|
+
value: star.value, colorBg: colorBg, colorStroke: colorStroke }, id + idx)); }), " ", showDetails && count && ((0, jsx_runtime_1.jsxs)(exports.RatingDetails, { children: [(0, jsx_runtime_1.jsx)(exports.RatingCount, { children: count }), (0, jsx_runtime_1.jsx)(exports.RatingValue, { children: " - ".concat(value) })] }))] }));
|
|
96
74
|
};
|
|
97
75
|
exports.Rating = Rating;
|
|
76
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
package/node/Rating/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.deriveRating = exports.convertRange = exports.getRatingValue = exports.getRatingWord = void 0;
|
|
4
|
-
|
|
4
|
+
var tslib_1 = require("tslib");
|
|
5
5
|
tslib_1.__exportStar(require("./Rating"), exports);
|
|
6
|
-
|
|
6
|
+
var RATING_WORDS = {
|
|
7
7
|
0: "Worst",
|
|
8
8
|
1: "Bad",
|
|
9
9
|
2: "Mediocre",
|
|
@@ -12,9 +12,10 @@ const RATING_WORDS = {
|
|
|
12
12
|
4.5: "Excellent",
|
|
13
13
|
5: "Best",
|
|
14
14
|
};
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
15
|
+
var getRatingWord = function (value, precision) {
|
|
16
|
+
if (precision === void 0) { precision = 0.5; }
|
|
17
|
+
var buffer = 0;
|
|
18
|
+
var word;
|
|
18
19
|
while (buffer < value) {
|
|
19
20
|
// @ts-expect-error can't remember
|
|
20
21
|
word = RATING_WORDS[buffer];
|
|
@@ -23,8 +24,8 @@ const getRatingWord = (value, precision = 0.5) => {
|
|
|
23
24
|
return word;
|
|
24
25
|
};
|
|
25
26
|
exports.getRatingWord = getRatingWord;
|
|
26
|
-
|
|
27
|
-
|
|
27
|
+
var getRatingValue = function (value) {
|
|
28
|
+
var converted = convertRange(value, [0, 5], [0, 10]);
|
|
28
29
|
if (converted % 1 === 0) {
|
|
29
30
|
return converted;
|
|
30
31
|
}
|
|
@@ -38,16 +39,19 @@ function convertRange(value, r1, r2) {
|
|
|
38
39
|
return ((value - r1[0]) * (r2[1] - r2[0])) / (r1[1] - r1[0]) + r2[0];
|
|
39
40
|
}
|
|
40
41
|
exports.convertRange = convertRange;
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
42
|
+
var deriveRating = function (title, date, minValue, maxValue, minQuantity) {
|
|
43
|
+
if (minValue === void 0) { minValue = 3.8; }
|
|
44
|
+
if (maxValue === void 0) { maxValue = 5; }
|
|
45
|
+
if (minQuantity === void 0) { minQuantity = 9; }
|
|
46
|
+
var entityTime = date.getTime();
|
|
47
|
+
var nowTime = new Date().getTime();
|
|
48
|
+
var length = title.length;
|
|
49
|
+
var value = Number(convertRange(length, [0, 90], [minValue, maxValue]).toFixed(2));
|
|
50
|
+
var timeDifference = convertRange(nowTime - entityTime, [0, 10000000000000], [minQuantity, 999999]);
|
|
51
|
+
var count = Math.round(timeDifference / length);
|
|
48
52
|
return {
|
|
49
|
-
value,
|
|
50
|
-
count,
|
|
53
|
+
value: value,
|
|
54
|
+
count: count,
|
|
51
55
|
};
|
|
52
56
|
};
|
|
53
57
|
exports.deriveRating = deriveRating;
|
|
@@ -1,22 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.SelectArrow = exports.SelectArrowStyled = void 0;
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
exports.SelectArrowStyled = (0, styled_components_1.default)(framer_motion_1.m.span)
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
width: 2em;
|
|
15
|
-
|
|
16
|
-
&:not([disabled]) {
|
|
17
|
-
cursor: pointer;
|
|
18
|
-
}
|
|
19
|
-
`;
|
|
20
|
-
exports.SelectArrow = (0, react_1.forwardRef)(function SelectArrow({ isOpen, ...props }, ref) {
|
|
21
|
-
return ((0, jsx_runtime_1.jsx)(exports.SelectArrowStyled, { animate: { rotate: isOpen ? 180 : 0 }, ref: ref, ...props, children: (0, jsx_runtime_1.jsx)(bs_1.BsBoxArrowInDown, {}) }));
|
|
4
|
+
var tslib_1 = require("tslib");
|
|
5
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
+
var react_1 = require("react");
|
|
7
|
+
var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
|
|
8
|
+
var framer_motion_1 = require("framer-motion");
|
|
9
|
+
var bs_1 = require("react-icons/bs");
|
|
10
|
+
exports.SelectArrowStyled = (0, styled_components_1.default)(framer_motion_1.m.span)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 2em;\n\n &:not([disabled]) {\n cursor: pointer;\n }\n"], ["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 2em;\n\n &:not([disabled]) {\n cursor: pointer;\n }\n"])));
|
|
11
|
+
exports.SelectArrow = (0, react_1.forwardRef)(function SelectArrow(_a, ref) {
|
|
12
|
+
var isOpen = _a.isOpen, props = tslib_1.__rest(_a, ["isOpen"]);
|
|
13
|
+
return ((0, jsx_runtime_1.jsx)(exports.SelectArrowStyled, tslib_1.__assign({ animate: { rotate: isOpen ? 180 : 0 }, ref: ref }, props, { children: (0, jsx_runtime_1.jsx)(bs_1.BsBoxArrowInDown, {}) })));
|
|
22
14
|
});
|
|
15
|
+
var templateObject_1;
|