@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/Debug/Debug.js
DELETED
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.Debug = 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 Root = styled_components_1.default.div `
|
|
8
|
-
background: #f4f4f4;
|
|
9
|
-
border: 1px solid #ddd;
|
|
10
|
-
border-left: 3px solid #f36d33;
|
|
11
|
-
color: #666;
|
|
12
|
-
page-break-inside: avoid;
|
|
13
|
-
font-family: monospace;
|
|
14
|
-
font-size: small;
|
|
15
|
-
line-height: 1.6;
|
|
16
|
-
margin-bottom: 1.6em;
|
|
17
|
-
max-width: 100%;
|
|
18
|
-
overflow: auto;
|
|
19
|
-
padding: 1em 1.5em;
|
|
20
|
-
display: block;
|
|
21
|
-
word-wrap: break-word;
|
|
22
|
-
`;
|
|
23
|
-
const Debug = ({ data }) => {
|
|
24
|
-
return (0, jsx_runtime_1.jsx)(Root, { children: JSON.stringify(data, undefined, 2) });
|
|
25
|
-
};
|
|
26
|
-
exports.Debug = Debug;
|
package/node/Debug/index.js
DELETED
package/node/Details/Details.js
DELETED
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.KoineDetails = exports.Content = exports.Body = exports.Summary = exports.Root = void 0;
|
|
4
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const react_1 = require("react");
|
|
6
|
-
const useWindowSize_1 = require("../hooks/useWindowSize");
|
|
7
|
-
const helpers_1 = require("../helpers");
|
|
8
|
-
const useId_1 = require("../hooks/useId");
|
|
9
|
-
exports.Root = "details";
|
|
10
|
-
exports.Summary = "summary";
|
|
11
|
-
exports.Body = "div";
|
|
12
|
-
exports.Content = "div";
|
|
13
|
-
/**
|
|
14
|
-
* FIXME: it actually works even without forwardRef, check if we do need it
|
|
15
|
-
*
|
|
16
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
|
|
17
|
-
*/
|
|
18
|
-
const DetailsWithRef = (0, react_1.forwardRef)(function Details({ id, open: propOpen, recalc, summary, children, Root: _Root, Summary: _Summary, Body: _Body, Content: _Content, onChange, ...props }, ref) {
|
|
19
|
-
const isControlled = typeof propOpen !== "undefined";
|
|
20
|
-
const [stateOpen, setStateOpen] = (0, react_1.useState)(propOpen);
|
|
21
|
-
const [height, setHeight] = (0, react_1.useState)(0);
|
|
22
|
-
const hash = id ? `#${id}` : "";
|
|
23
|
-
const winSize = (0, useWindowSize_1.useWindowSize)();
|
|
24
|
-
const open = isControlled ? propOpen : stateOpen;
|
|
25
|
-
const [overflow, setOverflow] = (0, react_1.useState)(open ? "unset" : "hidden");
|
|
26
|
-
const content = (0, react_1.useRef)(null);
|
|
27
|
-
const defaultId = (0, useId_1.useId)();
|
|
28
|
-
id = id || defaultId;
|
|
29
|
-
const handleClick = (0, react_1.useCallback)(() => {
|
|
30
|
-
if (hash) {
|
|
31
|
-
window.history.replaceState(null, "", open ? window.location.pathname + window.location.search : hash);
|
|
32
|
-
}
|
|
33
|
-
if (onChange) {
|
|
34
|
-
onChange();
|
|
35
|
-
}
|
|
36
|
-
if (!isControlled) {
|
|
37
|
-
setStateOpen((prevOpen) => !prevOpen);
|
|
38
|
-
}
|
|
39
|
-
}, [open, hash, onChange, isControlled]);
|
|
40
|
-
(0, react_1.useEffect)(() => {
|
|
41
|
-
if (content.current) {
|
|
42
|
-
setHeight(Math.ceil(content.current.offsetHeight));
|
|
43
|
-
}
|
|
44
|
-
}, [winSize, recalc]);
|
|
45
|
-
// deeplink on mount
|
|
46
|
-
(0, react_1.useEffect)(() => {
|
|
47
|
-
if (!isControlled && hash && window.location.hash === hash) {
|
|
48
|
-
setStateOpen(true);
|
|
49
|
-
}
|
|
50
|
-
}, [hash, isControlled]);
|
|
51
|
-
return ((0, jsx_runtime_1.jsxs)(exports.Root, { ...props, open: open || false, children: [(0, jsx_runtime_1.jsx)(exports.Summary, { "$open": open, onClick: handleClick, children: summary || " " }), (0, jsx_runtime_1.jsx)(exports.Body, { "$open": open, style: { overflow }, children: (0, jsx_runtime_1.jsx)(exports.Content
|
|
52
|
-
// ref={content}
|
|
53
|
-
, { "$open": open,
|
|
54
|
-
// aria-expanded={open}
|
|
55
|
-
// aria-label={open ? ariaCollapse : ariaExpand}
|
|
56
|
-
style: {
|
|
57
|
-
pointerEvents: open ? "all" : "none",
|
|
58
|
-
}, children: children }) })] }));
|
|
59
|
-
});
|
|
60
|
-
exports.KoineDetails = (0, helpers_1.extendComponent)(DetailsWithRef, {
|
|
61
|
-
Root: exports.Root,
|
|
62
|
-
Summary: exports.Summary,
|
|
63
|
-
Body: exports.Body,
|
|
64
|
-
Content: exports.Content,
|
|
65
|
-
});
|
package/node/Details/index.js
DELETED
package/node/Dialog/DialogMui.js
DELETED
|
@@ -1,82 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.KoineDialog = exports.Body = exports.Header = exports.Close = exports.Paper = exports.Container = exports.Backdrop = exports.Root = 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 ModalUnstyled_1 = tslib_1.__importDefault(require("@mui/base/ModalUnstyled"));
|
|
8
|
-
const md_1 = require("react-icons/md");
|
|
9
|
-
const helpers_1 = require("../helpers");
|
|
10
|
-
exports.Root = ModalUnstyled_1.default;
|
|
11
|
-
exports.Backdrop = "div";
|
|
12
|
-
exports.Container = "div";
|
|
13
|
-
exports.Paper = "div";
|
|
14
|
-
exports.Close = "button";
|
|
15
|
-
exports.Header = "div";
|
|
16
|
-
exports.Body = "div";
|
|
17
|
-
// const Dialog = ({
|
|
18
|
-
// children,
|
|
19
|
-
// title,
|
|
20
|
-
// $scrollPaper,
|
|
21
|
-
// Root: _Root,
|
|
22
|
-
// Backdrop: _Backdrop,
|
|
23
|
-
// Container: _Container,
|
|
24
|
-
// Paper: _Paper,
|
|
25
|
-
// Close: _Close,
|
|
26
|
-
// Header: _Header,
|
|
27
|
-
// Body: _Body,
|
|
28
|
-
// ...props
|
|
29
|
-
// }: KoineDialogProps) => (
|
|
30
|
-
// <Root BackdropComponent={Backdrop} onBackdropClick={props.onClose} {...props}>
|
|
31
|
-
// <Container $scrollPaper={$scrollPaper}>
|
|
32
|
-
// <Paper aria-label={title || ""} $scrollPaper={$scrollPaper}>
|
|
33
|
-
// {title && <Header>{title}</Header>}
|
|
34
|
-
// <Close onClick={props.onClose}>
|
|
35
|
-
// <IconClose />
|
|
36
|
-
// </Close>
|
|
37
|
-
// <Body>{children}</Body>
|
|
38
|
-
// </Paper>
|
|
39
|
-
// </Container>
|
|
40
|
-
// </Root>
|
|
41
|
-
// );
|
|
42
|
-
/**
|
|
43
|
-
*
|
|
44
|
-
* Main differences from [Mui Dialog](https://mui.com/material-ui/react-dialog):
|
|
45
|
-
*
|
|
46
|
-
* - By default uses `scroll="body"` instead of paper.
|
|
47
|
-
* - Optionally uses `framer-motion` for animations
|
|
48
|
-
* - Uses backdrop blur by default
|
|
49
|
-
*
|
|
50
|
-
* FIXME: it actually works even without forwardRef, check if we do need it
|
|
51
|
-
*/
|
|
52
|
-
const DialogWithRef = (0, react_1.forwardRef)(function Dialog({ children, title, $scrollPaper, Root: _Root, Backdrop: _Backdrop, Container: _Container, Paper: _Paper, Close: _Close, Header: _Header, Body: _Body, onClose, ...props }, ref) {
|
|
53
|
-
// click handling is taken from
|
|
54
|
-
// @see https://github.com/mui/material-ui/blob/c758b6c0b30f0831110458a746690b33147c45df/packages/mui-material/src/Dialog/Dialog.js#L205-L226
|
|
55
|
-
const backdropClick = (0, react_1.useRef)();
|
|
56
|
-
const handleMouseDown = (event) => {
|
|
57
|
-
// We don't want to close the dialog when clicking the dialog content.
|
|
58
|
-
// Make sure the event starts and ends on the same DOM element.
|
|
59
|
-
backdropClick.current = event.target === event.currentTarget;
|
|
60
|
-
};
|
|
61
|
-
const handleBackdropClick = (event) => {
|
|
62
|
-
// Ignore the events not coming from the "backdrop".
|
|
63
|
-
if (!backdropClick.current) {
|
|
64
|
-
return;
|
|
65
|
-
}
|
|
66
|
-
backdropClick.current = null;
|
|
67
|
-
// if (onBackdropClick) onBackdropClick(event);
|
|
68
|
-
if (onClose) {
|
|
69
|
-
onClose(event, "backdropClick");
|
|
70
|
-
}
|
|
71
|
-
};
|
|
72
|
-
return ((0, jsx_runtime_1.jsx)(exports.Root, { BackdropComponent: exports.Backdrop, onClick: handleBackdropClick, onClose: onClose, ref: ref, ...props, children: (0, jsx_runtime_1.jsx)(exports.Container, { "$scrollPaper": $scrollPaper, onMouseDown: handleMouseDown, children: (0, jsx_runtime_1.jsxs)(exports.Paper, { "aria-label": title || "", "$scrollPaper": $scrollPaper, children: [title && (0, jsx_runtime_1.jsx)(exports.Header, { children: title }), (0, jsx_runtime_1.jsx)(exports.Close, { onClick: onClose, children: (0, jsx_runtime_1.jsx)(md_1.MdClear, {}) }), (0, jsx_runtime_1.jsx)(exports.Body, { children: children })] }) }) }));
|
|
73
|
-
});
|
|
74
|
-
exports.KoineDialog = (0, helpers_1.extendComponent)(DialogWithRef, {
|
|
75
|
-
Root: exports.Root,
|
|
76
|
-
Backdrop: exports.Backdrop,
|
|
77
|
-
Container: exports.Container,
|
|
78
|
-
Paper: exports.Paper,
|
|
79
|
-
Close: exports.Close,
|
|
80
|
-
Header: exports.Header,
|
|
81
|
-
Body: exports.Body,
|
|
82
|
-
});
|
package/node/Dialog/css/bare.js
DELETED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.KoineDialog = exports.Body = exports.Header = exports.Close = exports.Paper = exports.Container = exports.Backdrop = exports.Root = void 0;
|
|
4
|
-
const tslib_1 = require("tslib");
|
|
5
|
-
const helpers_1 = require("../../helpers");
|
|
6
|
-
const _ = tslib_1.__importStar(require("../DialogMui"));
|
|
7
|
-
// export type { KoineDialogProps } from "../DialogMui";
|
|
8
|
-
exports.Root = (0, helpers_1.classed)(_.Root) `dialog`;
|
|
9
|
-
exports.Backdrop = (0, helpers_1.classed)(_.Backdrop) `dialogBackdrop`;
|
|
10
|
-
exports.Container = (0, helpers_1.classed)(_.Container) `dialogContainer`;
|
|
11
|
-
exports.Paper = (0, helpers_1.classed)(_.Paper) `dialogPaper`;
|
|
12
|
-
exports.Close = (0, helpers_1.classed)(_.Close) `"dialogClose`;
|
|
13
|
-
exports.Header = (0, helpers_1.classed)(_.Header) `dialogHeader`;
|
|
14
|
-
exports.Body = (0, helpers_1.classed)(_.Body) `dialogBody`;
|
|
15
|
-
exports.KoineDialog = (0, helpers_1.extendComponent)(_.KoineDialog, {
|
|
16
|
-
Root: exports.Root,
|
|
17
|
-
Backdrop: exports.Backdrop,
|
|
18
|
-
Container: exports.Container,
|
|
19
|
-
Paper: exports.Paper,
|
|
20
|
-
Close: exports.Close,
|
|
21
|
-
Header: exports.Header,
|
|
22
|
-
Body: exports.Body,
|
|
23
|
-
});
|
package/node/Dialog/index.js
DELETED
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.KoineDialog = void 0;
|
|
4
|
-
var DialogMui_1 = require("./DialogMui");
|
|
5
|
-
Object.defineProperty(exports, "KoineDialog", { enumerable: true, get: function () { return DialogMui_1.KoineDialog; } });
|
package/node/Dialog/m/bare.js
DELETED
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.KoineDialog = void 0;
|
|
4
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const react_1 = require("react");
|
|
6
|
-
const md_1 = require("react-icons/md");
|
|
7
|
-
const framer_motion_1 = require("framer-motion");
|
|
8
|
-
const helpers_1 = require("../../helpers");
|
|
9
|
-
const index_1 = require("./index");
|
|
10
|
-
const DialogMui_1 = require("../DialogMui");
|
|
11
|
-
/**
|
|
12
|
-
* About nested `AnimatePresence` and animated dialogs with framer @see:
|
|
13
|
-
*
|
|
14
|
-
* - https://github.com/framer/motion/issues/478
|
|
15
|
-
* - https://codesandbox.io/s/clever-banzai-7km49?file=/src/Modal.js
|
|
16
|
-
*/
|
|
17
|
-
const Dialog = (0, react_1.forwardRef)(function Dialog({ children, title, $scrollPaper, Root, Backdrop, Container, Paper, Close, Header, Body, mBackdrop, mPaper, onClose, ...props }, ref) {
|
|
18
|
-
const BackdropMotion = (0, react_1.useMemo)(() => (props) => ((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: props.open && (0, jsx_runtime_1.jsx)(Backdrop, { ...mBackdrop, ...props }) })), [Backdrop, mBackdrop]);
|
|
19
|
-
// FIXME: extract this logic either in a useDialog hook or in a useclickOutside hook
|
|
20
|
-
// click handling is taken from
|
|
21
|
-
// @see https://github.com/mui/material-ui/blob/c758b6c0b30f0831110458a746690b33147c45df/packages/mui-material/src/Dialog/Dialog.js#L205-L226
|
|
22
|
-
const backdropClick = (0, react_1.useRef)();
|
|
23
|
-
const handleMouseDown = (event) => {
|
|
24
|
-
// We don't want to close the dialog when clicking the dialog content.
|
|
25
|
-
// Make sure the event starts and ends on the same DOM element.
|
|
26
|
-
backdropClick.current = event.target === event.currentTarget;
|
|
27
|
-
};
|
|
28
|
-
const handleBackdropClick = (event) => {
|
|
29
|
-
// Ignore the events not coming from the "backdrop".
|
|
30
|
-
if (!backdropClick.current) {
|
|
31
|
-
return;
|
|
32
|
-
}
|
|
33
|
-
backdropClick.current = null;
|
|
34
|
-
// if (onBackdropClick) onBackdropClick(event);
|
|
35
|
-
if (onClose) {
|
|
36
|
-
onClose(event, "backdropClick");
|
|
37
|
-
}
|
|
38
|
-
};
|
|
39
|
-
return ((0, jsx_runtime_1.jsx)(Root, { keepMounted: true, BackdropComponent: BackdropMotion, onClick: handleBackdropClick, onClose: onClose, ref: ref, ...props, style: (0, index_1.mRootStyle)(props), children: (0, jsx_runtime_1.jsx)(Container, { "$scrollPaper": $scrollPaper, onMouseDown: handleMouseDown, children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: props.open && (
|
|
40
|
-
// @ts-expect-error framer props collision...
|
|
41
|
-
(0, jsx_runtime_1.jsxs)(Paper, { ...mPaper, "aria-label": title || "", "$scrollPaper": $scrollPaper, children: [title && (0, jsx_runtime_1.jsx)(Header, { children: title }), (0, jsx_runtime_1.jsx)(Close, { onClick: onClose, children: (0, jsx_runtime_1.jsx)(md_1.MdClear, {}) }), (0, jsx_runtime_1.jsx)(Body, { children: children })] })) }) }) }));
|
|
42
|
-
});
|
|
43
|
-
exports.KoineDialog = (0, helpers_1.extendComponent)(Dialog, {
|
|
44
|
-
Root: DialogMui_1.Root,
|
|
45
|
-
Backdrop: (0, framer_motion_1.m)(DialogMui_1.Backdrop),
|
|
46
|
-
Container: DialogMui_1.Container,
|
|
47
|
-
Paper: (0, framer_motion_1.m)(DialogMui_1.Paper),
|
|
48
|
-
Close: DialogMui_1.Close,
|
|
49
|
-
Header: DialogMui_1.Header,
|
|
50
|
-
Body: DialogMui_1.Body,
|
|
51
|
-
});
|
package/node/Dialog/m/basic.js
DELETED
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.dialogPaperMotion = exports.dialogBackdropMotion = void 0;
|
|
4
|
-
const tslib_1 = require("tslib");
|
|
5
|
-
tslib_1.__exportStar(require("./index"), exports);
|
|
6
|
-
exports.dialogBackdropMotion = {
|
|
7
|
-
initial: {
|
|
8
|
-
opacity: 0,
|
|
9
|
-
},
|
|
10
|
-
animate: {
|
|
11
|
-
backdropFilter: "blur(10px)",
|
|
12
|
-
opacity: 1,
|
|
13
|
-
},
|
|
14
|
-
exit: {
|
|
15
|
-
backdropFilter: "blur(0px)",
|
|
16
|
-
opacity: 0,
|
|
17
|
-
},
|
|
18
|
-
};
|
|
19
|
-
exports.dialogPaperMotion = {
|
|
20
|
-
initial: {
|
|
21
|
-
// scale: .9,
|
|
22
|
-
translateY: -60,
|
|
23
|
-
opacity: 0,
|
|
24
|
-
},
|
|
25
|
-
animate: {
|
|
26
|
-
// scale: 1,
|
|
27
|
-
translateY: 0,
|
|
28
|
-
opacity: 1,
|
|
29
|
-
},
|
|
30
|
-
exit: {
|
|
31
|
-
// scale: 0.9,
|
|
32
|
-
translateY: 60,
|
|
33
|
-
opacity: 0,
|
|
34
|
-
},
|
|
35
|
-
};
|
package/node/Dialog/m/index.js
DELETED
package/node/Dialog/sc/bare.js
DELETED
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.KoineDialog = exports.Body = exports.Header = exports.Close = exports.Paper = exports.Container = exports.Backdrop = exports.Root = void 0;
|
|
4
|
-
const tslib_1 = require("tslib");
|
|
5
|
-
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
|
|
6
|
-
const helpers_1 = require("../../helpers");
|
|
7
|
-
const styled_1 = require("../../styles/styled");
|
|
8
|
-
const Buttons_1 = require("../../Buttons");
|
|
9
|
-
const _ = tslib_1.__importStar(require("../DialogMui"));
|
|
10
|
-
exports.Root = (0, styled_components_1.default)(_.Root) `
|
|
11
|
-
z-index: 1300;
|
|
12
|
-
position: fixed;
|
|
13
|
-
${styled_1.inset0}
|
|
14
|
-
`;
|
|
15
|
-
// export const Backdrop = (props) => {
|
|
16
|
-
// return <div {...props} />;
|
|
17
|
-
// }
|
|
18
|
-
exports.Backdrop = (0, styled_components_1.default)(_.Backdrop) `
|
|
19
|
-
z-index: -1;
|
|
20
|
-
position: fixed;
|
|
21
|
-
${styled_1.inset0}
|
|
22
|
-
backdrop-filter: blur(0px);
|
|
23
|
-
-webkit-tap-highlight-color: transparent;
|
|
24
|
-
`;
|
|
25
|
-
/**
|
|
26
|
-
* @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Dialog/Dialog.js#L64-L85
|
|
27
|
-
*/
|
|
28
|
-
exports.Container = (0, styled_components_1.default)(_.Container) `
|
|
29
|
-
height: 100%;
|
|
30
|
-
outline: 0;
|
|
31
|
-
${(p) => p.$scrollPaper
|
|
32
|
-
? "display: flex; justify-content: center; align-items: center;"
|
|
33
|
-
: "overflow: hidden auto; text-align: center; &:after { content: ''; display: inline-block; vertical-align: middle; height: 100%; width: 0; }"}
|
|
34
|
-
`;
|
|
35
|
-
/**
|
|
36
|
-
* @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Dialog/Dialog.js#L104-L157
|
|
37
|
-
*/
|
|
38
|
-
exports.Paper = (0, styled_components_1.default)(_.Paper) `
|
|
39
|
-
position: relative;
|
|
40
|
-
${(p) => p.$scrollPaper
|
|
41
|
-
? "display: flex; flex-direction: column; max-height: calc(100%-64px);"
|
|
42
|
-
: "display: inline-block; vertical-align: middle; text-align: initial;"}
|
|
43
|
-
`;
|
|
44
|
-
exports.Close = (0, styled_components_1.default)(Buttons_1.IconButton) `
|
|
45
|
-
position: absolute;
|
|
46
|
-
`;
|
|
47
|
-
exports.Header = (0, styled_components_1.default)(_.Header) ``;
|
|
48
|
-
/**
|
|
49
|
-
* @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/DialogContent/DialogContent.js#L29-L44
|
|
50
|
-
*/
|
|
51
|
-
exports.Body = (0, styled_components_1.default)(_.Body) `
|
|
52
|
-
flex: 1 1 auto;
|
|
53
|
-
-webkit-overflow-scrolling: touch;
|
|
54
|
-
overflow-y: auto;
|
|
55
|
-
overflow: auto;
|
|
56
|
-
`;
|
|
57
|
-
exports.KoineDialog = (0, helpers_1.extendComponent)(_.KoineDialog, {
|
|
58
|
-
Root: exports.Root,
|
|
59
|
-
Backdrop: exports.Backdrop,
|
|
60
|
-
Container: exports.Container,
|
|
61
|
-
Paper: exports.Paper,
|
|
62
|
-
Close: exports.Close,
|
|
63
|
-
Header: exports.Header,
|
|
64
|
-
Body: exports.Body,
|
|
65
|
-
});
|
package/node/Dialog/sc/framer.js
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.KoineDialog = void 0;
|
|
4
|
-
const framer_motion_1 = require("framer-motion");
|
|
5
|
-
const helpers_1 = require("../../helpers");
|
|
6
|
-
const basic_1 = require("../m/basic");
|
|
7
|
-
const bare_1 = require("../m/bare");
|
|
8
|
-
const bare_2 = require("./bare");
|
|
9
|
-
exports.KoineDialog = (0, helpers_1.extendComponent)(bare_1.KoineDialog, {
|
|
10
|
-
Root: bare_2.Root,
|
|
11
|
-
Backdrop: (0, framer_motion_1.m)(bare_2.Backdrop),
|
|
12
|
-
Container: bare_2.Container,
|
|
13
|
-
Paper: (0, framer_motion_1.m)(bare_2.Paper),
|
|
14
|
-
Close: bare_2.Close,
|
|
15
|
-
Header: bare_2.Header,
|
|
16
|
-
Body: bare_2.Body,
|
|
17
|
-
mBackdrop: basic_1.dialogBackdropMotion,
|
|
18
|
-
mPaper: basic_1.dialogPaperMotion,
|
|
19
|
-
});
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.KoineDialog = void 0;
|
|
4
|
-
const framer_motion_1 = require("framer-motion");
|
|
5
|
-
const helpers_1 = require("../../helpers");
|
|
6
|
-
const basic_1 = require("../m/basic");
|
|
7
|
-
const bare_1 = require("../m/bare");
|
|
8
|
-
const material_1 = require("./material");
|
|
9
|
-
exports.KoineDialog = (0, helpers_1.extendComponent)(bare_1.KoineDialog, {
|
|
10
|
-
Root: material_1.Root,
|
|
11
|
-
Backdrop: (0, framer_motion_1.m)(material_1.Backdrop),
|
|
12
|
-
Container: material_1.Container,
|
|
13
|
-
Paper: (0, framer_motion_1.m)(material_1.Paper),
|
|
14
|
-
Close: material_1.Close,
|
|
15
|
-
Header: material_1.Header,
|
|
16
|
-
Body: material_1.Body,
|
|
17
|
-
mBackdrop: basic_1.dialogBackdropMotion,
|
|
18
|
-
mPaper: basic_1.dialogPaperMotion,
|
|
19
|
-
});
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.KoineDialog = exports.Body = exports.Header = exports.Close = exports.Paper = exports.Container = exports.Backdrop = exports.Root = void 0;
|
|
4
|
-
const tslib_1 = require("tslib");
|
|
5
|
-
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
|
|
6
|
-
const helpers_1 = require("../../helpers");
|
|
7
|
-
const bare_1 = require("./bare");
|
|
8
|
-
exports.Root = (0, styled_components_1.default)(bare_1.KoineDialog.Root) ``;
|
|
9
|
-
exports.Backdrop = (0, styled_components_1.default)(bare_1.KoineDialog.Backdrop) `
|
|
10
|
-
background: rgba(0, 0, 0, 0.5);
|
|
11
|
-
filter: backdrop-blur(4px);
|
|
12
|
-
`;
|
|
13
|
-
exports.Container = (0, styled_components_1.default)(bare_1.KoineDialog.Container) ``;
|
|
14
|
-
exports.Paper = (0, styled_components_1.default)(bare_1.KoineDialog.Paper) `
|
|
15
|
-
max-width: 640px;
|
|
16
|
-
margin: 64px;
|
|
17
|
-
border-radius: 4px;
|
|
18
|
-
background: white;
|
|
19
|
-
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
|
20
|
-
`;
|
|
21
|
-
exports.Close = (0, styled_components_1.default)(bare_1.KoineDialog.Close) `
|
|
22
|
-
position: absolute;
|
|
23
|
-
top: 0;
|
|
24
|
-
right: 0;
|
|
25
|
-
padding: 8px;
|
|
26
|
-
font-size: 2rem;
|
|
27
|
-
opacity: 0.5;
|
|
28
|
-
`;
|
|
29
|
-
exports.Header = (0, styled_components_1.default)(bare_1.KoineDialog.Header) `
|
|
30
|
-
padding: 16px;
|
|
31
|
-
font-size: 1.25rem;
|
|
32
|
-
`;
|
|
33
|
-
exports.Body = (0, styled_components_1.default)(bare_1.KoineDialog.Body) `
|
|
34
|
-
padding: 16px;
|
|
35
|
-
border-top: 1px solid rgba(0, 0, 0, 0.08);
|
|
36
|
-
`;
|
|
37
|
-
exports.KoineDialog = (0, helpers_1.extendComponent)(bare_1.KoineDialog, {
|
|
38
|
-
Root: exports.Root,
|
|
39
|
-
Backdrop: exports.Backdrop,
|
|
40
|
-
Container: exports.Container,
|
|
41
|
-
Paper: exports.Paper,
|
|
42
|
-
Close: exports.Close,
|
|
43
|
-
Header: exports.Header,
|
|
44
|
-
Body: exports.Body,
|
|
45
|
-
});
|
package/node/Dialog/tw/bare.js
DELETED
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.KoineDialog = exports.Body = exports.Header = exports.Close = exports.Paper = exports.Container = exports.Backdrop = exports.Root = void 0;
|
|
4
|
-
const tslib_1 = require("tslib");
|
|
5
|
-
const helpers_1 = require("../../helpers");
|
|
6
|
-
const _ = tslib_1.__importStar(require("../DialogMui"));
|
|
7
|
-
exports.Root = (0, helpers_1.classed)(_.Root) `< class="dialog fixed z-[1300] inset-0`;
|
|
8
|
-
exports.Backdrop = (0, helpers_1.classed)(_.Backdrop) `< class="dialogBackdrop fixed -z-[1] inset-0 [-webkit-tap-highlight-color:transparent]`;
|
|
9
|
-
/**
|
|
10
|
-
* @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Dialog/Dialog.js#L64-L85
|
|
11
|
-
*/
|
|
12
|
-
exports.Container = (0, helpers_1.classed)(_.Container) `< class="dialogContainer h-full outline-0 ${(p) => p.$scrollPaper
|
|
13
|
-
? "flex justify-center items-center"
|
|
14
|
-
: "overflow-y-auto overflow-x-hidden text-center [after:content:''] after:inline-block after:align-middle after:h-full after:w-0"}`;
|
|
15
|
-
/**
|
|
16
|
-
* @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Dialog/Dialog.js#L104-L157
|
|
17
|
-
*/
|
|
18
|
-
exports.Paper = (0, helpers_1.classed)(_.Paper) `< class="dialogPaper relative ${(p) => p.$scrollPaper
|
|
19
|
-
? "flex flex-col max-h-[calc(100%-64px)]"
|
|
20
|
-
: "inline-block align-middle [text-align:initial]"}`;
|
|
21
|
-
exports.Close = (0, helpers_1.classed)(_.Close) `< class="dialogClose`;
|
|
22
|
-
exports.Header = (0, helpers_1.classed)(_.Header) `< class="dialogHeader`;
|
|
23
|
-
/**
|
|
24
|
-
* @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/DialogContent/DialogContent.js#L29-L44
|
|
25
|
-
* The arbitrary rule webkit-overflow-scrolling is to add iOS momentum scrolling for iOS < 13.0,
|
|
26
|
-
* this was removed from tailiwnd 2.0 on
|
|
27
|
-
*
|
|
28
|
-
* @see https://github.com/tailwindlabs/tailwindcss.com/issues/483
|
|
29
|
-
* @see https://v2.tailwindcss.com/docs/upgrading-to-v2#the-scrolling-touch-and-scrolling-auto-utilities-have-been-removed
|
|
30
|
-
*/
|
|
31
|
-
exports.Body = (0, helpers_1.classed)(_.Body) `< class="dialogBody flex-1 basis-auto overflow-y-auto [-webkit-overflow-scrolling:touch]`;
|
|
32
|
-
exports.KoineDialog = (0, helpers_1.extendComponent)(_.KoineDialog, {
|
|
33
|
-
Root: exports.Root,
|
|
34
|
-
Backdrop: exports.Backdrop,
|
|
35
|
-
Container: exports.Container,
|
|
36
|
-
Paper: exports.Paper,
|
|
37
|
-
Close: exports.Close,
|
|
38
|
-
Header: exports.Header,
|
|
39
|
-
Body: exports.Body,
|
|
40
|
-
});
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.KoineDialog = exports.Body = exports.Header = exports.Close = exports.Paper = exports.Container = exports.Backdrop = exports.Root = void 0;
|
|
4
|
-
const helpers_1 = require("../../helpers");
|
|
5
|
-
const bare_1 = require("./bare");
|
|
6
|
-
exports.Root = (0, helpers_1.classed)(bare_1.KoineDialog.Root) ``;
|
|
7
|
-
exports.Backdrop = (0, helpers_1.classed)(bare_1.KoineDialog.Backdrop) `< class="bg-white/[.5] backdrop-blur-sm`;
|
|
8
|
-
exports.Container = (0, helpers_1.classed)(bare_1.KoineDialog.Container) ``;
|
|
9
|
-
exports.Paper = (0, helpers_1.classed)(bare_1.KoineDialog.Paper) `< class="bg-white shadow-xl m-8 max-w-screen-sm border border-gray-400`;
|
|
10
|
-
exports.Close = (0, helpers_1.classed)(bare_1.KoineDialog.Close) `< class="absolute top-0 right-0 p-8 text-2xl opacity-20 hover:opacity-100 focus:opacity-100`;
|
|
11
|
-
exports.Header = (0, helpers_1.classed)(bare_1.KoineDialog.Header) `< class="p-8 text-2xl bold italic`;
|
|
12
|
-
exports.Body = (0, helpers_1.classed)(bare_1.KoineDialog.Body) `< class="p-8 pt-4`;
|
|
13
|
-
exports.KoineDialog = (0, helpers_1.extendComponent)(bare_1.KoineDialog, {
|
|
14
|
-
Root: exports.Root,
|
|
15
|
-
Backdrop: exports.Backdrop,
|
|
16
|
-
Container: exports.Container,
|
|
17
|
-
Paper: exports.Paper,
|
|
18
|
-
Close: exports.Close,
|
|
19
|
-
Header: exports.Header,
|
|
20
|
-
Body: exports.Body,
|
|
21
|
-
});
|
package/node/Dialog/tw/framer.js
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.KoineDialog = void 0;
|
|
4
|
-
const framer_motion_1 = require("framer-motion");
|
|
5
|
-
const helpers_1 = require("../../helpers");
|
|
6
|
-
const basic_1 = require("../m/basic");
|
|
7
|
-
const bare_1 = require("../m/bare");
|
|
8
|
-
const bare_2 = require("./bare");
|
|
9
|
-
exports.KoineDialog = (0, helpers_1.extendComponent)(bare_1.KoineDialog, {
|
|
10
|
-
Root: bare_2.Root,
|
|
11
|
-
Backdrop: (0, framer_motion_1.m)(bare_2.Backdrop),
|
|
12
|
-
Container: bare_2.Container,
|
|
13
|
-
Paper: (0, framer_motion_1.m)(bare_2.Paper),
|
|
14
|
-
Close: bare_2.Close,
|
|
15
|
-
Header: bare_2.Header,
|
|
16
|
-
Body: bare_2.Body,
|
|
17
|
-
mBackdrop: basic_1.dialogBackdropMotion,
|
|
18
|
-
mPaper: basic_1.dialogPaperMotion,
|
|
19
|
-
});
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.KoineDialog = void 0;
|
|
4
|
-
const framer_motion_1 = require("framer-motion");
|
|
5
|
-
const helpers_1 = require("../../helpers");
|
|
6
|
-
const basic_1 = require("../m/basic");
|
|
7
|
-
const bare_1 = require("../m/bare");
|
|
8
|
-
const material_1 = require("./material");
|
|
9
|
-
exports.KoineDialog = (0, helpers_1.extendComponent)(bare_1.KoineDialog, {
|
|
10
|
-
Root: material_1.Root,
|
|
11
|
-
Backdrop: (0, framer_motion_1.m)(material_1.Backdrop),
|
|
12
|
-
Container: material_1.Container,
|
|
13
|
-
Paper: (0, framer_motion_1.m)(material_1.Paper),
|
|
14
|
-
Close: material_1.Close,
|
|
15
|
-
Header: material_1.Header,
|
|
16
|
-
Body: material_1.Body,
|
|
17
|
-
mBackdrop: basic_1.dialogBackdropMotion,
|
|
18
|
-
mPaper: basic_1.dialogPaperMotion,
|
|
19
|
-
});
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.KoineDialog = exports.Body = exports.Header = exports.Close = exports.Paper = exports.Container = exports.Backdrop = exports.Root = void 0;
|
|
4
|
-
const helpers_1 = require("../../helpers");
|
|
5
|
-
const bare_1 = require("./bare");
|
|
6
|
-
exports.Root = (0, helpers_1.classed)(bare_1.KoineDialog.Root) ``;
|
|
7
|
-
exports.Backdrop = (0, helpers_1.classed)(bare_1.KoineDialog.Backdrop) `< class="bg-black/[.5] backdrop-blur-sm`;
|
|
8
|
-
exports.Container = (0, helpers_1.classed)(bare_1.KoineDialog.Container) ``;
|
|
9
|
-
exports.Paper = (0, helpers_1.classed)(bare_1.KoineDialog.Paper) `< class="rounded bg-white shadow-xl m-8 max-w-screen-sm`;
|
|
10
|
-
exports.Close = (0, helpers_1.classed)(bare_1.KoineDialog.Close) `< class="absolute top-0 right-0 p-4 text-2xl opacity-50`;
|
|
11
|
-
exports.Header = (0, helpers_1.classed)(bare_1.KoineDialog.Header) `< class="p-4 text-xl`;
|
|
12
|
-
exports.Body = (0, helpers_1.classed)(bare_1.KoineDialog.Body) `< class="p-4 border-t border-gray-200`;
|
|
13
|
-
exports.KoineDialog = (0, helpers_1.extendComponent)(bare_1.KoineDialog, {
|
|
14
|
-
Root: exports.Root,
|
|
15
|
-
Backdrop: exports.Backdrop,
|
|
16
|
-
Container: exports.Container,
|
|
17
|
-
Paper: exports.Paper,
|
|
18
|
-
Close: exports.Close,
|
|
19
|
-
Header: exports.Header,
|
|
20
|
-
Body: exports.Body,
|
|
21
|
-
});
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.Editor = exports.EditorBar = 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 react_2 = require("@tiptap/react");
|
|
8
|
-
const starter_kit_1 = tslib_1.__importDefault(require("@tiptap/starter-kit"));
|
|
9
|
-
const components_1 = require("./components");
|
|
10
|
-
const EditorBar = ({ editor }) => {
|
|
11
|
-
const handleClick = (0, react_1.useCallback)((e, type) => {
|
|
12
|
-
e.preventDefault();
|
|
13
|
-
editor?.chain().focus()[`toggle${type}`]().run();
|
|
14
|
-
}, [editor]);
|
|
15
|
-
if (!editor) {
|
|
16
|
-
return null;
|
|
17
|
-
}
|
|
18
|
-
return ((0, jsx_runtime_1.jsxs)(components_1.EditorBarRoot, { children: [(0, jsx_runtime_1.jsx)(components_1.EditorBarBtn, { onClick: (e) => handleClick(e, "Bold"), className: editor.isActive("bold") ? "is-active" : "", children: (0, jsx_runtime_1.jsx)(components_1.EditorIconBold, {}) }), (0, jsx_runtime_1.jsx)(components_1.EditorBarBtn, { onClick: (e) => handleClick(e, "Italic"), className: editor.isActive("bold") ? "is-active" : "", children: (0, jsx_runtime_1.jsx)(components_1.EditorIconItalic, {}) })] }));
|
|
19
|
-
};
|
|
20
|
-
exports.EditorBar = EditorBar;
|
|
21
|
-
const Editor = ({ options, ...props }) => {
|
|
22
|
-
const editor = (0, react_2.useEditor)({
|
|
23
|
-
extensions: [starter_kit_1.default],
|
|
24
|
-
content: "",
|
|
25
|
-
...(options || {}),
|
|
26
|
-
});
|
|
27
|
-
return ((0, jsx_runtime_1.jsxs)(components_1.EditorRoot, { children: [(0, jsx_runtime_1.jsx)(components_1.EditorGlobalStyles, {}), (0, jsx_runtime_1.jsx)(exports.EditorBar, { editor: editor }), (0, jsx_runtime_1.jsx)(react_2.EditorContent, { className: "EditorContent", editor: editor, ...props })] }));
|
|
28
|
-
};
|
|
29
|
-
exports.Editor = Editor;
|