@koine/react 1.0.11 → 1.0.14
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.d.ts +1 -1
- package/Forms/Toggle/useToggle.js +30 -30
- 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/package.json +8 -7
- 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
- package/node/Alert/Alert.js +0 -21
- package/node/Alert/index.js +0 -4
- package/node/Animations/Reveal.js +0 -19
- package/node/Animations/Underline.js +0 -19
- package/node/Animations/index.js +0 -6
- package/node/Animations/useReveal.js +0 -74
- package/node/Autocomplete/AutocompleteDownshift.js +0 -161
- package/node/Autocomplete/AutocompleteDownshiftMultiselect.js +0 -356
- package/node/Autocomplete/AutocompleteMui.js +0 -175
- package/node/Autocomplete/AutocompleteReach.js +0 -115
- package/node/Autocomplete/components.js +0 -93
- package/node/Autocomplete/helpers.js +0 -32
- package/node/Autocomplete/index.js +0 -7
- package/node/Bg/BgColor.js +0 -36
- package/node/Bg/BgPhoto.js +0 -64
- package/node/Bg/BgSvg.js +0 -20
- package/node/Bg/index.js +0 -6
- package/node/Breadcrumbs/Breadcrumbs.js +0 -72
- package/node/Breadcrumbs/index.js +0 -4
- package/node/Buttons/Button.js +0 -83
- package/node/Buttons/ButtonComposite.js +0 -54
- package/node/Buttons/ButtonFab.js +0 -12
- package/node/Buttons/ButtonLink.js +0 -15
- package/node/Buttons/IconButton.js +0 -23
- package/node/Buttons/index.js +0 -8
- package/node/Calendar/CalendarDaygridCell.js +0 -55
- package/node/Calendar/CalendarDaygridNav.js +0 -27
- package/node/Calendar/CalendarDaygridTable.js +0 -60
- package/node/Calendar/CalendarLegend.js +0 -15
- package/node/Calendar/calendar-api-google.js +0 -99
- package/node/Calendar/index.js +0 -9
- package/node/Calendar/types.js +0 -2
- package/node/Calendar/useCalendar.js +0 -186
- package/node/Calendar/utils.js +0 -217
- package/node/Carousel/Carousel.js +0 -381
- package/node/Carousel/CarouselCss.js +0 -42
- package/node/Carousel/index.js +0 -4
- package/node/Collapsable/Collapsable.js +0 -4
- package/node/Collapsable/CollapsableReach.js +0 -253
- package/node/Collapsable/index.js +0 -5
- package/node/Debug/Debug.js +0 -26
- package/node/Debug/index.js +0 -4
- package/node/Details/Details.js +0 -65
- package/node/Details/index.js +0 -4
- package/node/Dialog/DialogMui.js +0 -82
- package/node/Dialog/css/bare.js +0 -23
- package/node/Dialog/index.js +0 -5
- package/node/Dialog/m/bare.js +0 -51
- package/node/Dialog/m/basic.js +0 -35
- package/node/Dialog/m/index.js +0 -8
- package/node/Dialog/sc/bare.js +0 -65
- package/node/Dialog/sc/framer.js +0 -19
- package/node/Dialog/sc/framerMaterial.js +0 -19
- package/node/Dialog/sc/material.js +0 -45
- package/node/Dialog/tw/bare.js +0 -40
- package/node/Dialog/tw/elegant.js +0 -21
- package/node/Dialog/tw/framer.js +0 -19
- package/node/Dialog/tw/framerMaterial.js +0 -19
- package/node/Dialog/tw/material.js +0 -21
- package/node/Editor/Editor--tiptap.js +0 -29
- package/node/Editor/components.js +0 -34
- package/node/Editor/index.js +0 -4
- package/node/Favicon/FaviconTags.js +0 -18
- package/node/Favicon/index.js +0 -4
- package/node/Form/Form.js +0 -63
- package/node/Form/index.js +0 -4
- package/node/Form/sc/bare.js +0 -33
- package/node/Forms/Checkbox/Checkbox.js +0 -28
- package/node/Forms/Checkbox/index.js +0 -4
- package/node/Forms/Feedback/Feedback.js +0 -15
- package/node/Forms/Feedback/index.js +0 -4
- package/node/Forms/Field/Field.js +0 -64
- package/node/Forms/Field/FieldControl.js +0 -47
- package/node/Forms/Field/FieldHint.js +0 -10
- package/node/Forms/Field/index.js +0 -5
- package/node/Forms/Input/Input.js +0 -27
- package/node/Forms/Input/index.js +0 -4
- package/node/Forms/InputGroup/InputGroup.js +0 -47
- package/node/Forms/InputGroup/index.js +0 -4
- package/node/Forms/Label/Label.js +0 -28
- package/node/Forms/Label/index.js +0 -4
- package/node/Forms/Password/Password.js +0 -34
- package/node/Forms/Password/index.js +0 -4
- package/node/Forms/Radio/Radio.js +0 -32
- package/node/Forms/Radio/index.js +0 -4
- package/node/Forms/Switch/Switch.js +0 -54
- package/node/Forms/Switch/index.js +0 -4
- package/node/Forms/Textarea/Textarea.js +0 -17
- package/node/Forms/Textarea/TextareaRich.js +0 -46
- package/node/Forms/Textarea/index.js +0 -5
- package/node/Forms/Toggle/Toggle.js +0 -86
- package/node/Forms/Toggle/index.js +0 -4
- package/node/Forms/Toggle/useToggle.js +0 -149
- package/node/Forms/antispam.js +0 -61
- package/node/Forms/helpers.js +0 -51
- package/node/Forms/index.js +0 -19
- package/node/Forms/styles.js +0 -64
- package/node/Gauge/Gauge.js +0 -106
- package/node/Grid/Grid.js +0 -83
- package/node/Grid/index.js +0 -4
- package/node/Hamburger/Hamburger.js +0 -69
- package/node/Hamburger/index.js +0 -4
- package/node/Header/index.js +0 -4
- package/node/Header/useHeader.js +0 -34
- package/node/Hidden/Hidden.js +0 -18
- package/node/Hidden/index.js +0 -4
- package/node/Img/index.js +0 -4
- package/node/Img/sc/bare.js +0 -41
- package/node/Img/types.js +0 -2
- package/node/Link/Link.js +0 -6
- package/node/Link/LinkBlank.js +0 -31
- package/node/Link/index.js +0 -5
- package/node/Menu/Menu.js +0 -15
- package/node/Menu/index.js +0 -4
- package/node/MenuItem/MenuItem.js +0 -24
- package/node/MenuItem/index.js +0 -4
- package/node/Meta/Meta.js +0 -8
- package/node/Meta/index.js +0 -4
- package/node/NoJs/NoJs.js +0 -10
- package/node/NoJs/index.js +0 -4
- package/node/Pagination/PaginationNav.js +0 -88
- package/node/Pagination/PaginationResults.js +0 -15
- package/node/Pagination/index.js +0 -5
- package/node/Pill/Pill.js +0 -41
- package/node/Pill/index.js +0 -4
- package/node/Progress/ProgressCircular.js +0 -41
- package/node/Progress/ProgressLinear.js +0 -37
- package/node/Progress/ProgressOverlay.js +0 -45
- package/node/Progress/index.js +0 -6
- package/node/Rating/Rating.js +0 -97
- package/node/Rating/index.js +0 -53
- package/node/Select/SelectDownshift.js +0 -41
- package/node/Select/components.js +0 -22
- package/node/Select/index.js +0 -7
- package/node/Sidebar/Sidebar.js +0 -53
- package/node/Sidebar/index.js +0 -4
- package/node/Spacing/Spacing.js +0 -50
- package/node/Spacing/index.js +0 -4
- package/node/Sticky/Sticky.js +0 -222
- package/node/Sticky/StickyCss.js +0 -8
- package/node/Sticky/index.js +0 -4
- package/node/Tabs/TabsMui.js +0 -47
- package/node/Tabs/index.js +0 -4
- package/node/Tabs/sc/bare.js +0 -87
- package/node/Tabs/tw/bare.js +0 -19
- package/node/Tabs/tw/material.js +0 -17
- package/node/Tabs/useTabs.js +0 -48
- package/node/Typography/CopyPasteVisible.js +0 -10
- package/node/Typography/Native.js +0 -51
- package/node/Typography/ReadMore.js +0 -74
- package/node/Typography/TextLoop.js +0 -54
- package/node/Typography/TypeStairs.js +0 -49
- package/node/Typography/index.js +0 -8
- package/node/css/index.js +0 -36
- package/node/helpers/classed.js +0 -69
- package/node/helpers/extend-component.js +0 -16
- package/node/helpers/index.js +0 -5
- package/node/hooks/index.js +0 -18
- package/node/hooks/types.js +0 -2
- package/node/hooks/useAsyncFn.js +0 -33
- package/node/hooks/useDateLocale.js +0 -56
- package/node/hooks/useEffectOnce.js +0 -12
- package/node/hooks/useFirstMountState.js +0 -16
- package/node/hooks/useFocus.js +0 -15
- package/node/hooks/useId.js +0 -11
- package/node/hooks/useIsomorphicLayoutEffect.js +0 -11
- package/node/hooks/useMount.js +0 -13
- package/node/hooks/useMountedState.js +0 -19
- package/node/hooks/usePrevious.js +0 -12
- package/node/hooks/useScrollPosition.js +0 -79
- package/node/hooks/useScrollTo.js +0 -23
- package/node/hooks/useTraceUpdate.js +0 -24
- package/node/hooks/useUpdateEffect.js +0 -18
- package/node/hooks/useWindowSize.js +0 -17
- package/node/index.js +0 -8
- package/node/m/MotionProvider.js +0 -41
- package/node/m/index.js +0 -9
- package/node/m/lite.js +0 -4
- package/node/m/max.js +0 -4
- package/node/sc/index.js +0 -37
- package/node/scm/index.js +0 -36
- package/node/shared/index.js +0 -11
- package/node/styles/Body.js +0 -21
- package/node/styles/Global.js +0 -53
- package/node/styles/index.js +0 -10
- package/node/styles/media.js +0 -156
- package/node/styles/spacing.js +0 -53
- package/node/styles/styled.js +0 -31
- package/node/styles/theme--vanilla.js +0 -59
- package/node/styles/theme.js +0 -45
- package/node/tw/index.js +0 -36
- package/node/twm/index.js +0 -36
- package/node/types.js +0 -2
package/node/Grid/index.js
DELETED
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.Hamburger = void 0;
|
|
4
|
-
const tslib_1 = require("tslib");
|
|
5
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
-
/**
|
|
7
|
-
* @file
|
|
8
|
-
*
|
|
9
|
-
* Simplified from https://github.com/luukdv/hamburger-react
|
|
10
|
-
*/
|
|
11
|
-
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
|
|
12
|
-
const HamburgerLabel = styled_components_1.default.div `
|
|
13
|
-
position: absolute;
|
|
14
|
-
top: 30px;
|
|
15
|
-
font-size: ${({ $toggled }) => ($toggled ? "0" : "9px")};
|
|
16
|
-
text-transform: uppercase;
|
|
17
|
-
left: 7px;
|
|
18
|
-
letter-spacing: 3px;
|
|
19
|
-
`;
|
|
20
|
-
const area = 48;
|
|
21
|
-
const lines = 3;
|
|
22
|
-
const width = 32;
|
|
23
|
-
const room = Math.round((area - width) / 2);
|
|
24
|
-
const barHeightRaw = width / 12;
|
|
25
|
-
const barHeight = Math.round(barHeightRaw);
|
|
26
|
-
const space = 0.5;
|
|
27
|
-
const marginRaw = width / (lines * (space + (lines === 3 ? 1 : 1.25)));
|
|
28
|
-
const margin = Math.round(marginRaw);
|
|
29
|
-
const height = barHeight * lines + margin * (lines - 1);
|
|
30
|
-
const topOffset = Math.round((area - height) / 2);
|
|
31
|
-
const translate = 4.6325;
|
|
32
|
-
const deviation = (barHeightRaw - barHeight + (marginRaw - margin)) / (lines === 3 ? 1 : 2);
|
|
33
|
-
const move = parseFloat((width / translate - deviation / (4 / 3)).toFixed(2));
|
|
34
|
-
const time = 0.4;
|
|
35
|
-
const easing = "cubic-bezier(0, 0, 0, 1)";
|
|
36
|
-
const transition = `${time}s ${easing}`;
|
|
37
|
-
const burgerStyles = {
|
|
38
|
-
marginRight: "-8px",
|
|
39
|
-
position: "relative",
|
|
40
|
-
width: `${area}px`,
|
|
41
|
-
height: `${area}px`,
|
|
42
|
-
userSelect: "none",
|
|
43
|
-
outline: "0px",
|
|
44
|
-
cursor: "pointer",
|
|
45
|
-
transition,
|
|
46
|
-
};
|
|
47
|
-
const barStyles = {
|
|
48
|
-
position: "absolute",
|
|
49
|
-
width: `${width}px`,
|
|
50
|
-
height: `${barHeight}px`,
|
|
51
|
-
left: `${room}px`,
|
|
52
|
-
background: "currentColor",
|
|
53
|
-
transition,
|
|
54
|
-
};
|
|
55
|
-
const Hamburger = ({ toggled, ...props }) => {
|
|
56
|
-
return ((0, jsx_runtime_1.jsxs)("div", { style: {
|
|
57
|
-
...burgerStyles,
|
|
58
|
-
transform: `${toggled ? `rotate(90deg)` : "none"}`,
|
|
59
|
-
}, tabIndex: 0, ...props, children: [(0, jsx_runtime_1.jsx)("div", { style: {
|
|
60
|
-
...barStyles,
|
|
61
|
-
top: `${topOffset}px`,
|
|
62
|
-
transform: `${toggled ? `rotate(-45deg) translate(0px, ${move}px)` : "none"}`,
|
|
63
|
-
} }), (0, jsx_runtime_1.jsx)("div", { style: {
|
|
64
|
-
...barStyles,
|
|
65
|
-
top: `${topOffset + barHeight + margin}px`,
|
|
66
|
-
transform: `${toggled ? `rotate(45deg) translate(0, -${move}px)` : "none"}`,
|
|
67
|
-
} }), (0, jsx_runtime_1.jsx)(HamburgerLabel, { "$toggled": toggled, children: "Menu" })] }));
|
|
68
|
-
};
|
|
69
|
-
exports.Hamburger = Hamburger;
|
package/node/Hamburger/index.js
DELETED
package/node/Header/index.js
DELETED
package/node/Header/useHeader.js
DELETED
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.useHeader = void 0;
|
|
4
|
-
const react_1 = require("react");
|
|
5
|
-
const useScrollPosition_1 = require("../hooks/useScrollPosition");
|
|
6
|
-
const theme_1 = require("../styles/theme");
|
|
7
|
-
const media_1 = require("../styles/media");
|
|
8
|
-
const useHeader = () => {
|
|
9
|
-
const [isSticky, setIsSticky] = (0, react_1.useState)(false);
|
|
10
|
-
const { header: themed } = (0, theme_1.useTheme)();
|
|
11
|
-
const isDesktopLayout = (0, media_1.useMedia)(`min:${themed.breakpoint}`);
|
|
12
|
-
const valueIdx = isDesktopLayout ? 1 : 0;
|
|
13
|
-
const [headerHeight, setHeaderHeight] = (0, react_1.useState)(themed.height[valueIdx]);
|
|
14
|
-
const [placeholderHeight, setPlaceholderHeight] = (0, react_1.useState)(themed.height[valueIdx]);
|
|
15
|
-
const [logoWidth, setLogoWidth] = (0, react_1.useState)(themed.logoWidth[valueIdx]);
|
|
16
|
-
(0, useScrollPosition_1.useScrollPosition)((currentPosition) => {
|
|
17
|
-
const isPastThreshold = currentPosition.y * -1 > 40;
|
|
18
|
-
if (isSticky !== isPastThreshold)
|
|
19
|
-
setIsSticky(isPastThreshold);
|
|
20
|
-
}, [isSticky]);
|
|
21
|
-
(0, react_1.useEffect)(() => {
|
|
22
|
-
const valueIdx = isDesktopLayout ? 1 : 0;
|
|
23
|
-
setPlaceholderHeight(themed.height[valueIdx]);
|
|
24
|
-
setHeaderHeight(isSticky ? themed.heightSticky[valueIdx] : themed.height[valueIdx]);
|
|
25
|
-
setLogoWidth(isSticky ? themed.logoWidthSticky[valueIdx] : themed.logoWidth[valueIdx]);
|
|
26
|
-
}, [themed, isSticky, isDesktopLayout]);
|
|
27
|
-
return [
|
|
28
|
-
isSticky,
|
|
29
|
-
placeholderHeight,
|
|
30
|
-
headerHeight,
|
|
31
|
-
logoWidth,
|
|
32
|
-
];
|
|
33
|
-
};
|
|
34
|
-
exports.useHeader = useHeader;
|
package/node/Hidden/Hidden.js
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.Hidden = void 0;
|
|
4
|
-
const tslib_1 = require("tslib");
|
|
5
|
-
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
|
|
6
|
-
exports.Hidden = styled_components_1.default.div `
|
|
7
|
-
${(p) => `${p.$min
|
|
8
|
-
? `
|
|
9
|
-
@media (min-width: ${p.theme.breakpoints[p.$min]}px) {
|
|
10
|
-
display: none;
|
|
11
|
-
}`
|
|
12
|
-
: ""} ${p.$max
|
|
13
|
-
? `
|
|
14
|
-
@media (max-width: ${p.theme.breakpoints[p.$max]}px) {
|
|
15
|
-
display: none;
|
|
16
|
-
}`
|
|
17
|
-
: ""}`}
|
|
18
|
-
`;
|
package/node/Hidden/index.js
DELETED
package/node/Img/index.js
DELETED
package/node/Img/sc/bare.js
DELETED
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.KoineImg = void 0;
|
|
4
|
-
const tslib_1 = require("tslib");
|
|
5
|
-
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
|
|
6
|
-
// export type KoineImgProps = {
|
|
7
|
-
// /** @default "cover" */
|
|
8
|
-
// $fit?: "cover" | "contain";
|
|
9
|
-
// };
|
|
10
|
-
exports.KoineImg = styled_components_1.default.img ``;
|
|
11
|
-
// export const KoineImg = styled.img<KoineImgProps>`
|
|
12
|
-
// object-fit: ${(p) => p.$fit || "cover"};
|
|
13
|
-
// `;
|
|
14
|
-
// /**
|
|
15
|
-
// * Replacement core component for native `<img />`
|
|
16
|
-
// *
|
|
17
|
-
// * Features:
|
|
18
|
-
// * - lazy load
|
|
19
|
-
// * - proportion cage
|
|
20
|
-
// */
|
|
21
|
-
// export const Img = ({
|
|
22
|
-
// className,
|
|
23
|
-
// style = {},
|
|
24
|
-
// lazyProps,
|
|
25
|
-
// ...props
|
|
26
|
-
// }: ImgProps) => {
|
|
27
|
-
// let { width, height, src } = props;
|
|
28
|
-
// width = width ? `${width}px` : "100%";
|
|
29
|
-
// height = height ? `${height}px` : "100%";
|
|
30
|
-
// const imgProps = { width, height, src };
|
|
31
|
-
// return (
|
|
32
|
-
// <ImgRoot style={{ width, height, ...style }} className={className}>
|
|
33
|
-
// <LazyLoad {...lazyProps}>
|
|
34
|
-
// <ImgNative {...imgProps} />
|
|
35
|
-
// </LazyLoad>
|
|
36
|
-
// <noscript>
|
|
37
|
-
// <img {...imgProps} />
|
|
38
|
-
// </noscript>
|
|
39
|
-
// </ImgRoot>
|
|
40
|
-
// );
|
|
41
|
-
// };
|
package/node/Img/types.js
DELETED
package/node/Link/Link.js
DELETED
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.KoineLink = void 0;
|
|
4
|
-
const tslib_1 = require("tslib");
|
|
5
|
-
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
|
|
6
|
-
exports.KoineLink = styled_components_1.default.a ``;
|
package/node/Link/LinkBlank.js
DELETED
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.LinkBlank = exports.LinkBlankIcon = exports.LinkBlankA = void 0;
|
|
4
|
-
const tslib_1 = require("tslib");
|
|
5
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
-
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
|
|
7
|
-
const md_1 = require("react-icons/md");
|
|
8
|
-
const media_1 = require("../styles/media");
|
|
9
|
-
exports.LinkBlankA = styled_components_1.default.a.attrs({
|
|
10
|
-
target: "_blank",
|
|
11
|
-
rel: "noopener",
|
|
12
|
-
}) ``;
|
|
13
|
-
// TODO: use `touch` class on <html> instead of relying on screenwidth,
|
|
14
|
-
// probably implement a lean Modernizr like thing with react-helmet
|
|
15
|
-
exports.LinkBlankIcon = (0, styled_components_1.default)(md_1.MdLaunch) `
|
|
16
|
-
color: var(---grey100);
|
|
17
|
-
font-size: inherit;
|
|
18
|
-
margin-left: 3px;
|
|
19
|
-
line-height: inherit;
|
|
20
|
-
vertical-align: middle;
|
|
21
|
-
width: 0px;
|
|
22
|
-
transition: width 0.1s ease-in-out;
|
|
23
|
-
${media_1.max.sm} {
|
|
24
|
-
width: 20px;
|
|
25
|
-
opacity: 0.8;
|
|
26
|
-
}
|
|
27
|
-
`;
|
|
28
|
-
const LinkBlank = ({ children, target, rel, ...props }) => {
|
|
29
|
-
return ((0, jsx_runtime_1.jsxs)(exports.LinkBlankA, { ...props, children: [children, (0, jsx_runtime_1.jsx)(exports.LinkBlankIcon, {})] }));
|
|
30
|
-
};
|
|
31
|
-
exports.LinkBlank = LinkBlank;
|
package/node/Link/index.js
DELETED
package/node/Menu/Menu.js
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.Menu = void 0;
|
|
4
|
-
const tslib_1 = require("tslib");
|
|
5
|
-
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
|
|
6
|
-
exports.Menu = styled_components_1.default.ul `
|
|
7
|
-
z-index: 3;
|
|
8
|
-
position: absolute;
|
|
9
|
-
list-style-type: none;
|
|
10
|
-
margin: 0;
|
|
11
|
-
padding: 0;
|
|
12
|
-
background: #fff;
|
|
13
|
-
width: 100%;
|
|
14
|
-
box-shadow: var(--shadow);
|
|
15
|
-
`;
|
package/node/Menu/index.js
DELETED
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.MenuItem = void 0;
|
|
4
|
-
const tslib_1 = require("tslib");
|
|
5
|
-
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
|
|
6
|
-
exports.MenuItem = styled_components_1.default.li `
|
|
7
|
-
padding: 8px 16px;
|
|
8
|
-
|
|
9
|
-
&[aria-selected="true"] {
|
|
10
|
-
background: var(--accent400);
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
/** DEP: this is just for MultiselectMui? */
|
|
14
|
-
&.Mui-focused,
|
|
15
|
-
&[data-focus="true"] {
|
|
16
|
-
background: var(--accent300);
|
|
17
|
-
color: white;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
&:not([disabled]):hover {
|
|
21
|
-
cursor: pointer;
|
|
22
|
-
background: var(--accent300);
|
|
23
|
-
}
|
|
24
|
-
`;
|
package/node/MenuItem/index.js
DELETED
package/node/Meta/Meta.js
DELETED
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.Meta = void 0;
|
|
4
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const Meta = ({ zoom }) => {
|
|
6
|
-
return ((0, jsx_runtime_1.jsx)("meta", { name: "viewport", content: `width=device-width, initial-scale=1, maximum-scale=1${zoom ? "" : ", user-scalable=0"}` }));
|
|
7
|
-
};
|
|
8
|
-
exports.Meta = Meta;
|
package/node/Meta/index.js
DELETED
package/node/NoJs/NoJs.js
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.NoJs = void 0;
|
|
4
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const NoJs = (_props) => {
|
|
6
|
-
return ((0, jsx_runtime_1.jsx)("script", { id: "no-js", dangerouslySetInnerHTML: {
|
|
7
|
-
__html: `document.querySelector("html").className=document.querySelector("html").className.replace(/no-js/,"") + "js";`,
|
|
8
|
-
} }));
|
|
9
|
-
};
|
|
10
|
-
exports.NoJs = NoJs;
|
package/node/NoJs/index.js
DELETED
|
@@ -1,88 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.KoinePaginationNav = void 0;
|
|
4
|
-
const tslib_1 = require("tslib");
|
|
5
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
-
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
|
|
7
|
-
const cg_1 = require("react-icons/cg");
|
|
8
|
-
const utils_1 = require("@koine/utils");
|
|
9
|
-
const Root = styled_components_1.default.nav `
|
|
10
|
-
display: flex;
|
|
11
|
-
align-items: center;
|
|
12
|
-
justify-content: center;
|
|
13
|
-
padding: 20px 0 40px;
|
|
14
|
-
font-weight: 600;
|
|
15
|
-
|
|
16
|
-
& a {
|
|
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
|
-
`;
|
|
44
|
-
/*
|
|
45
|
-
* Possible outcomes:
|
|
46
|
-
* [1] 2 3 ... 78 >
|
|
47
|
-
* < 1 2 [3] 4 5 ... 78 >
|
|
48
|
-
* < 1 ... 6 7 [8] 9 10 ... 78 >
|
|
49
|
-
* < 1 ... 75 76 [77] 78 >
|
|
50
|
-
* < 1 ... 76 77 [78]
|
|
51
|
-
*/
|
|
52
|
-
const KoinePaginationNav = ({ total, perPage, currentPage, baseUrl, showOffset = 2, currentUrl = "/", Link = "a", }) => {
|
|
53
|
-
total = (0, utils_1.ensureInt)(total);
|
|
54
|
-
currentPage = (0, utils_1.ensureInt)(currentPage);
|
|
55
|
-
perPage = (0, utils_1.ensureInt)(perPage);
|
|
56
|
-
// page 0 means 1
|
|
57
|
-
currentPage = currentPage || 1;
|
|
58
|
-
baseUrl = baseUrl || currentUrl;
|
|
59
|
-
// don't output anything if pagination is not needed
|
|
60
|
-
if (total < perPage) {
|
|
61
|
-
return null;
|
|
62
|
-
}
|
|
63
|
-
const firstPage = 1;
|
|
64
|
-
const lastPage = Math.ceil(total / perPage);
|
|
65
|
-
const prevPage = currentPage - 1 > firstPage ? currentPage - 1 : "";
|
|
66
|
-
const nextPage = currentPage + 1 < lastPage ? currentPage + 1 : lastPage;
|
|
67
|
-
const prevArrow = currentPage > firstPage;
|
|
68
|
-
const nextArrow = currentPage < lastPage;
|
|
69
|
-
const pages = [];
|
|
70
|
-
// fill the pages before the current
|
|
71
|
-
for (let i = currentPage - showOffset; i < currentPage; i++) {
|
|
72
|
-
if (i > 1) {
|
|
73
|
-
pages.push(i);
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
// add the current
|
|
77
|
-
pages.push(currentPage);
|
|
78
|
-
// fill the pages after the current
|
|
79
|
-
for (let i = currentPage + 1; i < currentPage + 1 + showOffset; i++) {
|
|
80
|
-
if (i < lastPage) {
|
|
81
|
-
pages.push(i);
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
const prevDots = pages[0] > firstPage + 1;
|
|
85
|
-
const nextDots = pages[pages.length - 1] < lastPage - 1;
|
|
86
|
-
return ((0, jsx_runtime_1.jsxs)(Root, { children: [prevArrow && ((0, jsx_runtime_1.jsx)(ItemPrev, { as: Link, href: `${baseUrl}/${prevPage}`, children: (0, jsx_runtime_1.jsx)(cg_1.CgArrowLeftR, {}) })), firstPage !== currentPage && ((0, jsx_runtime_1.jsx)(ItemLink, { as: Link, href: `${baseUrl}`, prev: true, children: firstPage })), prevDots && (0, jsx_runtime_1.jsx)(DotsSeparator, { children: "..." }), pages.map((page) => page === currentPage ? ((0, jsx_runtime_1.jsx)(ItemCurrent, { children: page }, page)) : ((0, jsx_runtime_1.jsx)(ItemLink, { as: Link, href: `${baseUrl}/${page}`, prev: page < currentPage, next: page > currentPage, children: page }, `pagination-${page}`))), nextDots && (0, jsx_runtime_1.jsx)(DotsSeparator, { children: "..." }), lastPage !== currentPage && ((0, jsx_runtime_1.jsx)(ItemLink, { as: Link, href: `${baseUrl}/${lastPage}`, next: true, children: lastPage })), nextArrow && ((0, jsx_runtime_1.jsx)(ItemNext, { as: Link, href: `${baseUrl}/${nextPage}`, children: (0, jsx_runtime_1.jsx)(cg_1.CgArrowRightR, {}) }))] }));
|
|
87
|
-
};
|
|
88
|
-
exports.KoinePaginationNav = KoinePaginationNav;
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.PaginationResults = void 0;
|
|
4
|
-
const tslib_1 = require("tslib");
|
|
5
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
-
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
|
|
7
|
-
const framer_motion_1 = require("framer-motion");
|
|
8
|
-
const Root = styled_components_1.default.div `
|
|
9
|
-
// overflow: hidden;
|
|
10
|
-
`;
|
|
11
|
-
const Inner = (0, styled_components_1.default)(framer_motion_1.m.div) ``;
|
|
12
|
-
const PaginationResults = ({ children }) => {
|
|
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 }) }) }));
|
|
14
|
-
};
|
|
15
|
-
exports.PaginationResults = PaginationResults;
|
package/node/Pagination/index.js
DELETED
package/node/Pill/Pill.js
DELETED
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.PillAccentLightOutlined = exports.PillAccentLight = exports.PillGreyLight = exports.Pill = void 0;
|
|
4
|
-
const tslib_1 = require("tslib");
|
|
5
|
-
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
|
|
6
|
-
exports.Pill = styled_components_1.default.div `
|
|
7
|
-
display: inline-block;
|
|
8
|
-
padding: 5px 10px;
|
|
9
|
-
margin: 0 0.5em 0.5em 0;
|
|
10
|
-
border-radius: 2px;
|
|
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
|
-
`;
|
package/node/Pill/index.js
DELETED
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.ProgressCircular = void 0;
|
|
4
|
-
const tslib_1 = require("tslib");
|
|
5
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
-
const styled_components_1 = tslib_1.__importStar(require("styled-components"));
|
|
7
|
-
const animationRotation = (0, styled_components_1.keyframes) `
|
|
8
|
-
0% {
|
|
9
|
-
transform: rotate(0deg);
|
|
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
|
-
`;
|
|
35
|
-
/**
|
|
36
|
-
* @see https://mui.com/components/progress/
|
|
37
|
-
*/
|
|
38
|
-
const ProgressCircular = ({ size = "1em", thickness = 1, color = "currentColor", ...props }) => {
|
|
39
|
-
return ((0, jsx_runtime_1.jsx)(ProgressCircularSvg, { 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
|
-
};
|
|
41
|
-
exports.ProgressCircular = ProgressCircular;
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.ProgressLinear = void 0;
|
|
4
|
-
const tslib_1 = require("tslib");
|
|
5
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
-
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
|
|
7
|
-
const framer_motion_1 = require("framer-motion");
|
|
8
|
-
const ProgressLinearBg = styled_components_1.default.span `
|
|
9
|
-
position: relative;
|
|
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
|
-
`;
|
|
21
|
-
/**
|
|
22
|
-
* @see https://mui.com/components/progress/#linear
|
|
23
|
-
*/
|
|
24
|
-
const ProgressLinear = ({ done = false, height = "2px", bg = "transparent", fg = "currentColor", ...props }) => {
|
|
25
|
-
return ((0, jsx_runtime_1.jsx)(ProgressLinearBg, { style: { height, background: bg }, ...props, children: (0, jsx_runtime_1.jsx)(ProgressLinearFg, { style: { height, background: fg }, initial: {
|
|
26
|
-
x: "-100%",
|
|
27
|
-
}, animate: {
|
|
28
|
-
x: done ? "-100%" : "0%",
|
|
29
|
-
}, transition: done
|
|
30
|
-
? {}
|
|
31
|
-
: {
|
|
32
|
-
repeat: Infinity,
|
|
33
|
-
repeatType: "reverse",
|
|
34
|
-
duration: 2,
|
|
35
|
-
} }) }));
|
|
36
|
-
};
|
|
37
|
-
exports.ProgressLinear = ProgressLinear;
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.ProgressOverlay = void 0;
|
|
4
|
-
const tslib_1 = require("tslib");
|
|
5
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
-
const react_1 = require("react");
|
|
7
|
-
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
|
|
8
|
-
const framer_motion_1 = require("framer-motion");
|
|
9
|
-
const ProgressCircular_1 = require("./ProgressCircular");
|
|
10
|
-
const ProgressLinear_1 = require("./ProgressLinear");
|
|
11
|
-
const Header_1 = require("../Header");
|
|
12
|
-
const ProgressOverlayWrap = (0, styled_components_1.default)(framer_motion_1.m.div) `
|
|
13
|
-
z-index: 10000;
|
|
14
|
-
position: fixed;
|
|
15
|
-
top: 0;
|
|
16
|
-
left: 0;
|
|
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)();
|
|
35
|
-
// const [progress, setProgress] = useState(0);
|
|
36
|
-
(0, react_1.useEffect)(() => {
|
|
37
|
-
document.body.style.cursor = running ? "wait" : "";
|
|
38
|
-
}, [running]);
|
|
39
|
-
return ((0, jsx_runtime_1.jsxs)(ProgressOverlayWrap, { animate: {
|
|
40
|
-
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: {
|
|
42
|
-
top: headerHeight + "px",
|
|
43
|
-
}, children: (0, jsx_runtime_1.jsx)(ProgressCircular_1.ProgressCircular, { size: "50px", color: "var(--accent300)" }) })] }));
|
|
44
|
-
};
|
|
45
|
-
exports.ProgressOverlay = ProgressOverlay;
|
package/node/Progress/index.js
DELETED
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
const tslib_1 = require("tslib");
|
|
4
|
-
tslib_1.__exportStar(require("./ProgressCircular"), exports);
|
|
5
|
-
tslib_1.__exportStar(require("./ProgressLinear"), exports);
|
|
6
|
-
tslib_1.__exportStar(require("./ProgressOverlay"), exports);
|