@startlibs/components 1.1.5 → 1.2.0-rc.1

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.
Files changed (123) hide show
  1. package/lib/BasicBulletList.mjs +1 -1
  2. package/lib/BasicBulletList.mjs.map +1 -1
  3. package/lib/Button.mjs +3 -3
  4. package/lib/Button.mjs.map +1 -1
  5. package/lib/ContextMenu.mjs +22 -6
  6. package/lib/ContextMenu.mjs.map +1 -1
  7. package/lib/Dialog.mjs +60 -24
  8. package/lib/Dialog.mjs.map +1 -1
  9. package/lib/Icon.mjs +10 -4
  10. package/lib/Icon.mjs.map +1 -1
  11. package/lib/Loading.mjs +26 -3
  12. package/lib/Loading.mjs.map +1 -1
  13. package/lib/PageLoader.mjs +2 -2
  14. package/lib/PageLoader.mjs.map +1 -1
  15. package/lib/PersistentNotifications.mjs +1 -1
  16. package/lib/PersistentNotifications.mjs.map +1 -1
  17. package/lib/SplitColumnsContainer.mjs +77 -6
  18. package/lib/SplitColumnsContainer.mjs.map +1 -1
  19. package/lib/TextButton.mjs +1 -1
  20. package/lib/TextButton.mjs.map +1 -1
  21. package/lib/ToastNotifications.mjs +16 -14
  22. package/lib/ToastNotifications.mjs.map +1 -1
  23. package/lib/alt/dialogs/DialogWithImageHeader.mjs +1 -1
  24. package/lib/alt/dialogs/DialogWithImageHeader.mjs.map +1 -1
  25. package/lib/alt/dialogs/DialogWithSidebar.mjs +7 -3
  26. package/lib/alt/dialogs/DialogWithSidebar.mjs.map +1 -1
  27. package/lib/alt/dialogs/MobileBubbleDialog.mjs +1 -1
  28. package/lib/alt/dialogs/MobileBubbleDialog.mjs.map +1 -1
  29. package/lib/containers/DialogContainer.mjs +29 -10
  30. package/lib/containers/DialogContainer.mjs.map +1 -1
  31. package/lib/index.cjs +286 -93
  32. package/lib/index.cjs.map +1 -1
  33. package/lib/willUseIsSticky.mjs +23 -2
  34. package/lib/willUseIsSticky.mjs.map +1 -1
  35. package/lib-yak/BasicBulletList.mjs +27 -0
  36. package/lib-yak/BasicBulletList.mjs.map +1 -0
  37. package/lib-yak/Button.mjs +374 -0
  38. package/lib-yak/Button.mjs.map +1 -0
  39. package/lib-yak/ContextMenu.mjs +642 -0
  40. package/lib-yak/ContextMenu.mjs.map +1 -0
  41. package/lib-yak/Dialog.mjs +469 -0
  42. package/lib-yak/Dialog.mjs.map +1 -0
  43. package/lib-yak/Draggable.mjs +892 -0
  44. package/lib-yak/Draggable.mjs.map +1 -0
  45. package/lib-yak/ErrorBoundary.mjs +108 -0
  46. package/lib-yak/ErrorBoundary.mjs.map +1 -0
  47. package/lib-yak/FillLastLineResizer.mjs +238 -0
  48. package/lib-yak/FillLastLineResizer.mjs.map +1 -0
  49. package/lib-yak/Flip.mjs +644 -0
  50. package/lib-yak/Flip.mjs.map +1 -0
  51. package/lib-yak/FlipList.mjs +186 -0
  52. package/lib-yak/FlipList.mjs.map +1 -0
  53. package/lib-yak/FormatDate.mjs +25 -0
  54. package/lib-yak/FormatDate.mjs.map +1 -0
  55. package/lib-yak/Icon.mjs +74 -0
  56. package/lib-yak/Icon.mjs.map +1 -0
  57. package/lib-yak/Image.mjs +41 -0
  58. package/lib-yak/Image.mjs.map +1 -0
  59. package/lib-yak/Link.mjs +116 -0
  60. package/lib-yak/Link.mjs.map +1 -0
  61. package/lib-yak/Loading.mjs +54 -0
  62. package/lib-yak/Loading.mjs.map +1 -0
  63. package/lib-yak/LoadingDiv.mjs +82 -0
  64. package/lib-yak/LoadingDiv.mjs.map +1 -0
  65. package/lib-yak/Notifications.mjs +99 -0
  66. package/lib-yak/Notifications.mjs.map +1 -0
  67. package/lib-yak/PageLoader.mjs +61 -0
  68. package/lib-yak/PageLoader.mjs.map +1 -0
  69. package/lib-yak/PersistentNotifications.mjs +209 -0
  70. package/lib-yak/PersistentNotifications.mjs.map +1 -0
  71. package/lib-yak/Popup.mjs +66 -0
  72. package/lib-yak/Popup.mjs.map +1 -0
  73. package/lib-yak/SplitColumnsContainer.mjs +140 -0
  74. package/lib-yak/SplitColumnsContainer.mjs.map +1 -0
  75. package/lib-yak/SwitchDiv.mjs +60 -0
  76. package/lib-yak/SwitchDiv.mjs.map +1 -0
  77. package/lib-yak/TextButton.mjs +61 -0
  78. package/lib-yak/TextButton.mjs.map +1 -0
  79. package/lib-yak/ToastNotifications.mjs +316 -0
  80. package/lib-yak/ToastNotifications.mjs.map +1 -0
  81. package/lib-yak/Tooltip.mjs +176 -0
  82. package/lib-yak/Tooltip.mjs.map +1 -0
  83. package/lib-yak/TransitionDiv.mjs +59 -0
  84. package/lib-yak/TransitionDiv.mjs.map +1 -0
  85. package/lib-yak/WarningDialog.mjs +107 -0
  86. package/lib-yak/WarningDialog.mjs.map +1 -0
  87. package/lib-yak/alt/buttons/OnClickLoadingButton.mjs +36 -0
  88. package/lib-yak/alt/buttons/OnClickLoadingButton.mjs.map +1 -0
  89. package/lib-yak/alt/dialogs/DialogWithImageHeader.mjs +50 -0
  90. package/lib-yak/alt/dialogs/DialogWithImageHeader.mjs.map +1 -0
  91. package/lib-yak/alt/dialogs/DialogWithSidebar.mjs +193 -0
  92. package/lib-yak/alt/dialogs/DialogWithSidebar.mjs.map +1 -0
  93. package/lib-yak/alt/dialogs/MobileBubbleDialog.mjs +82 -0
  94. package/lib-yak/alt/dialogs/MobileBubbleDialog.mjs.map +1 -0
  95. package/lib-yak/containers/DialogContainer.mjs +482 -0
  96. package/lib-yak/containers/DialogContainer.mjs.map +1 -0
  97. package/lib-yak/containers/Reposition.mjs +35 -0
  98. package/lib-yak/containers/Reposition.mjs.map +1 -0
  99. package/lib-yak/containers/usePositioning.mjs +311 -0
  100. package/lib-yak/containers/usePositioning.mjs.map +1 -0
  101. package/lib-yak/index.mjs +37 -0
  102. package/lib-yak/index.mjs.map +1 -0
  103. package/lib-yak/useDialogWithToggle.mjs +18 -0
  104. package/lib-yak/useDialogWithToggle.mjs.map +1 -0
  105. package/lib-yak/willUseIsSticky.mjs +147 -0
  106. package/lib-yak/willUseIsSticky.mjs.map +1 -0
  107. package/package.json +12 -3
  108. package/src/BasicBulletList.jsx +1 -1
  109. package/src/Button.jsx +36 -30
  110. package/src/ContextMenu.jsx +21 -7
  111. package/src/Dialog.jsx +31 -12
  112. package/src/Icon.jsx +5 -4
  113. package/src/Loading.jsx +19 -5
  114. package/src/PageLoader.jsx +3 -3
  115. package/src/PersistentNotifications.jsx +2 -2
  116. package/src/SplitColumnsContainer.jsx +89 -30
  117. package/src/TextButton.jsx +1 -1
  118. package/src/ToastNotifications.jsx +15 -8
  119. package/src/alt/dialogs/DialogWithImageHeader.jsx +2 -2
  120. package/src/alt/dialogs/DialogWithSidebar.jsx +6 -5
  121. package/src/alt/dialogs/MobileBubbleDialog.jsx +1 -1
  122. package/src/containers/DialogContainer.jsx +11 -4
  123. package/src/willUseIsSticky.jsx +22 -2
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Link.mjs","sources":["../src/Link.jsx"],"sourcesContent":["import React, {useMemo} from 'react'\nimport * as Wouter from 'wouter'\nimport { useBrowserLocation } from \"wouter/use-browser-location\"\nimport { useCallbackStable } from \"@startlibs/core\"\nimport {callIfFunction, addQueryString} from \"@startlibs/utils\";\nimport _ from 'lodash/fp'\n\nexport const Link = ({href,...props}) => _.isString(props.to) ? <Wouter.Link {...props} /> : <a {...props} href={href?.replace(\"~\",\"\")} />\n\nexport const HistoryLink = ({to,onClick,...props}) => {\n return <a onClick={(e) => {\n if (onClick && !callIfFunction(onClick,e)) { return }\n if (e.isDefaultPrevented()) { return }\n if (!to) { return }\n e.preventDefault()\n const {state,pathname,search,hash} = _.isObject(to) ? to : {pathname:to}\n const url = (pathname || \"\") + (search ? \"?\" + search.replace(/^\\?/,\"\") : \"\") + (hash ? \"#\" + hash.replace(/^#/,\"\") : \"\")\n window.history.pushState(state, '', url)\n var popStateEvent = new PopStateEvent('popstate', { state: state });\n window.dispatchEvent(popStateEvent);\n }} {...props} />\n}\n\nexport const Route = ({element,children,...props}) => <Wouter.Route {...props}>{element || children}</Wouter.Route>\nexport const Routes = Wouter.Switch\nexport const Navigate = Wouter.Redirect\nexport const useLocation = () => {\n const [path] = Wouter.useLocation()\n const [search] = Wouter.useSearchParams()\n return {pathname:path,search:search ? \"?\" + search : \"\",state:window.history.state}\n}\nexport const useAbsolutePath = () => {\n const router = Wouter.useRouter();\n const [path] = Wouter.useLocation()\n return router.base + path\n}\nexport const useAbsoluteLocation = () => {\n const router = Wouter.useRouter();\n const {pathname,search} = useLocation()\n return router.base + pathname + search\n}\nexport const useNavigate = () => Wouter.useLocation()[1]\nexport const useParams = Wouter.useParams\nexport const useSearchParams = (defaultParams) => {\n const [location, navigate] = Wouter.useLocation()\n const search = Wouter.useSearch()\n const searchParams = useMemo(() => _.assign(defaultParams,Object.fromEntries(new URLSearchParams(search).entries())), [search])\n\n let tempSearchParams = searchParams\n\n const setSearchParams = useCallbackStable((nextParams, options) => {\n tempSearchParams = _.isFunction(nextParams) ? nextParams(tempSearchParams) : _.assign(tempSearchParams, nextParams)\n const cleanParams = defaultParams\n ? _.flow(\n _.toPairs,\n _.filter(([k,v]) => defaultParams[k] !== v),\n _.fromPairs\n )(tempSearchParams)\n : tempSearchParams\n navigate(addQueryString(location, cleanParams), options)\n })\n\n return [searchParams, setSearchParams]\n}\n\nexport const Router = Wouter.Router\n\nexport {useBrowserLocation}"],"names":["Link","_ref","href","props","_objectWithoutProperties","_excluded","_isString","to","React","createElement","Wouter","_extends","replace","HistoryLink","_ref2","onClick","_excluded2","e","callIfFunction","isDefaultPrevented","preventDefault","state","pathname","search","hash","_isObject","url","window","history","pushState","popStateEvent","PopStateEvent","dispatchEvent","Route","_ref3","element","children","_excluded3","Routes","Switch","Navigate","Redirect","useLocation","path","useSearchParams","useAbsolutePath","router","useRouter","base","useAbsoluteLocation","useNavigate","useParams","defaultParams","location","navigate","useSearch","searchParams","useMemo","_assign","Object","fromEntries","URLSearchParams","entries","tempSearchParams","setSearchParams","useCallbackStable","nextParams","options","_isFunction","cleanParams","_flow","_toPairs","_filter","_ref4","k","v","_fromPairs","addQueryString","Router"],"mappings":"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"}
@@ -0,0 +1,54 @@
1
+ import _extends from '@babel/runtime/helpers/extends';
2
+ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
3
+ import React from 'react';
4
+ import { styled, css } from '@yak/react';
5
+ import { getColor, insertKeyframes } from '@startlibs/utils';
6
+
7
+ const _excluded = ["color", "white", "size", "borderWidth", "absolute"];
8
+
9
+ // Nome fixo do @keyframes preservado: um `keyframes` do styled-components geraria um nome
10
+ // com hash, diferente do atual "loading-spin" (quebraria quem lê animationName). Por isso
11
+ // o bloco fica fora de um template styled/css/keyframes, registrado pelo CSSOM (sem nonce)
12
+ // no primeiro render do Loading (não no import: o pacote declara "sideEffects": false e
13
+ // código de topo de módulo pode ser descartado por um bundler mais agressivo se achar as
14
+ // exportações não usadas).
15
+ const injectSpinKeyframes = () => insertKeyframes('loading-spin', '100% { transform: rotate(1turn) }');
16
+
17
+ // styled(LoadingBase) mira num componente, não numa tag: ao contrário do antigo styled.div,
18
+ // o styled-components não filtra prop inválida pra <div> nesse caso. Por isso tira aqui,
19
+ // à mão, cada prop que o template do Loading lê, antes de espalhar o resto no elemento real.
20
+ const LoadingBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
21
+ let props = _objectWithoutProperties(_ref, _excluded);
22
+ injectSpinKeyframes();
23
+ return /*#__PURE__*/React.createElement("div", _extends({
24
+ ref: ref
25
+ }, props));
26
+ });
27
+ const Loading = styled(LoadingBase).attrs({
28
+ className: "styled-loading"
29
+ })`
30
+ z-index:1;
31
+ --loading-color: ${props => props.color || (props.white ? 'rgba(255,255,255,0.9)' : getColor("main")(props))};
32
+ --loading-bw: ${props => props.borderWidth || 4}px;
33
+ width: ${props => props.size || 26}px;
34
+ aspect-ratio: 1;
35
+ flex-shrink: 0;
36
+ border-radius: 50%;
37
+ background:
38
+ radial-gradient(farthest-side, var(--loading-color) 94%, #0000) top/var(--loading-bw) var(--loading-bw) no-repeat,
39
+ conic-gradient(#0000 15%, var(--loading-color));
40
+ -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--loading-bw)), #000 0);
41
+ mask: radial-gradient(farthest-side, #0000 calc(100% - var(--loading-bw)), #000 0);
42
+ animation: loading-spin 0.6s infinite linear;
43
+ ${props => props.absolute && css`
44
+ position: absolute;
45
+ top: 0;
46
+ bottom: 0;
47
+ right: 0;
48
+ left: 0;
49
+ margin: auto;
50
+ `}
51
+ `;
52
+
53
+ export { Loading };
54
+ //# sourceMappingURL=Loading.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Loading.mjs","sources":["../src/Loading.jsx"],"sourcesContent":["import React from 'react'\nimport styled from 'styled-components'\nimport {getColor, insertKeyframes} from '@startlibs/utils'\n\n// Nome fixo do @keyframes preservado: um `keyframes` do styled-components geraria um nome\n// com hash, diferente do atual \"loading-spin\" (quebraria quem lê animationName). Por isso\n// o bloco fica fora de um template styled/css/keyframes, registrado pelo CSSOM (sem nonce)\n// no primeiro render do Loading (não no import: o pacote declara \"sideEffects\": false e\n// código de topo de módulo pode ser descartado por um bundler mais agressivo se achar as\n// exportações não usadas).\nconst injectSpinKeyframes = () => insertKeyframes('loading-spin', '100% { transform: rotate(1turn) }')\n\n// styled(LoadingBase) mira num componente, não numa tag: ao contrário do antigo styled.div,\n// o styled-components não filtra prop inválida pra <div> nesse caso. Por isso tira aqui,\n// à mão, cada prop que o template do Loading lê, antes de espalhar o resto no elemento real.\nconst LoadingBase = React.forwardRef(({color, white, size, borderWidth, absolute, ...props}, ref) => {\n injectSpinKeyframes()\n return <div ref={ref} {...props}/>\n})\n\nexport const Loading = styled(LoadingBase)`\n z-index:1;\n --loading-color: ${props => props.color || (props.white ? 'rgba(255,255,255,0.9)' : getColor(\"main\")(props))};\n --loading-bw: ${props => props.borderWidth || 4}px;\n width: ${props => props.size || 26}px;\n aspect-ratio: 1;\n flex-shrink: 0;\n border-radius: 50%;\n background:\n radial-gradient(farthest-side, var(--loading-color) 94%, #0000) top/var(--loading-bw) var(--loading-bw) no-repeat,\n conic-gradient(#0000 15%, var(--loading-color));\n -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--loading-bw)), #000 0);\n mask: radial-gradient(farthest-side, #0000 calc(100% - var(--loading-bw)), #000 0);\n animation: loading-spin 0.6s infinite linear;\n ${props => props.absolute && `\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n left: 0;\n margin: auto;\n `}\n `\n"],"names":["injectSpinKeyframes","insertKeyframes","LoadingBase","React","forwardRef","_ref","ref","props","_objectWithoutProperties","_excluded","createElement","_extends","Loading","styled","attrs","className","color","white","getColor","borderWidth","size","absolute","css"],"mappings":";;;;;;;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMA,mBAAmB,GAAGA,MAAMC,eAAe,CAAC,cAAc,EAAE,mCAAmC,CAAC,CAAA;;AAEtG;AACA;AACA;AACA,MAAMC,WAAW,gBAAGC,KAAK,CAACC,UAAU,CAAC,CAAAC,IAAA,EAAwDC,GAAG,KAAK;EAA/D,IAA+CC,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA,EAAA;AACxFT,EAAAA,mBAAmB,EAAE,CAAA;AACrB,EAAA,oBAAOG,KAAA,CAAAO,aAAA,CAAA,KAAA,EAAAC,QAAA,CAAA;AAAKL,IAAAA,GAAG,EAAEA,GAAAA;GAASC,EAAAA,KAAK,CAAE,CAAC,CAAA;AACpC,CAAC,CAAC,CAAA;AAEK,MAAMK,OAAO,GAAGC,MAAM,CAACX,WAAW,CAAC,CAAAY,KAAA,CAAA;EAAAC,SAAA,EAAA,gBAAA;AAAA,CAAA,CAAA,CAAA;AAC1C;AACA,qBAAA,EAAuBR,KAAK,IAAIA,KAAK,CAACS,KAAK,KAAKT,KAAK,CAACU,KAAK,GAAG,uBAAuB,GAAGC,QAAQ,CAAC,MAAM,CAAC,CAACX,KAAK,CAAC,CAAC,CAAA;AAChH,kBAAA,EAAoBA,KAAK,IAAIA,KAAK,CAACY,WAAW,IAAI,CAAC,CAAA;AACnD,WAAA,EAAaZ,KAAK,IAAIA,KAAK,CAACa,IAAI,IAAI,EAAE,CAAA;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAA,EAAMb,KAAK,IAAIA,KAAK,CAACc,QAAQ,IAAAC,GAAA,CAAA;AAC7B;AACA;AACA;AACA;AACA;AACA;AACA,IAAK,CAAA,CAAA;AACL,EAAG;;;;"}
@@ -0,0 +1,82 @@
1
+ import _extends from '@babel/runtime/helpers/extends';
2
+ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
3
+ import _isString from 'lodash/fp/isString';
4
+ import { yakDomTag } from '@startlibs/utils/yakDomTag';
5
+ import React from 'react';
6
+ import { keyframes, styled } from '@yak/react';
7
+ import { willUseFlipSwitch } from './Flip.mjs';
8
+ import { Loading } from './Loading.mjs';
9
+ import { useLazyConstant, useEnsureRef } from '@startlibs/core';
10
+ import { twoWayAnimation } from '@startlibs/utils';
11
+
12
+ const _excluded = ["useAnimation", "outerRef", "onEnter", "onLeave"];
13
+ const [loadingEnter, loadingLeave] = twoWayAnimation('opacity:0;', 'opacity:1;');
14
+ [keyframes`0% { opacity:0; transform:translateY(50%) } 100% { opacity:1;transform:translateY(0) }`, keyframes`0% { opacity:1;transform:translateY(0) } 100% { opacity:0; transform:translateY(50%) }`];
15
+ const BlockContainer = styled(yakDomTag("div"))`
16
+ position:relative;
17
+ `;
18
+ const FlipDiv = _ref => {
19
+ let {
20
+ useAnimation,
21
+ outerRef,
22
+ onEnter = onEnter,
23
+ onLeave = onLeave
24
+ } = _ref,
25
+ props = _objectWithoutProperties(_ref, _excluded);
26
+ const ensuredRef = useEnsureRef(outerRef);
27
+ useAnimation(ensuredRef, onEnter, onLeave);
28
+ return /*#__PURE__*/React.createElement(BlockContainer, _extends({}, props, {
29
+ ref: ensuredRef
30
+ }));
31
+ };
32
+ const PaddingDiv = styled(yakDomTag("div"))`
33
+ padding: ${props => props.height} 0;
34
+ `;
35
+ const LoadingDiv = _ref2 => {
36
+ let {
37
+ defaultToSuspense = true,
38
+ fallback,
39
+ isLoading,
40
+ className,
41
+ height = 12,
42
+ size = 32,
43
+ borderWidth = 5,
44
+ children
45
+ } = _ref2;
46
+ const flipAnimation = useLazyConstant(willUseFlipSwitch);
47
+ const loadingBlock = /*#__PURE__*/React.createElement(PaddingDiv, {
48
+ height: _isString(height) ? borderWidth : height + 'rem'
49
+ }, /*#__PURE__*/React.createElement(Loading, {
50
+ autoFocus: true,
51
+ absolute: true,
52
+ size: size,
53
+ borderWidth: borderWidth
54
+ }));
55
+ return /*#__PURE__*/React.createElement(React.Suspense, {
56
+ fallback: /*#__PURE__*/React.createElement(FlipDiv, {
57
+ key: "loading",
58
+ padded: true,
59
+ onEnter: loadingEnter,
60
+ onLeave: loadingLeave,
61
+ useAnimation: flipAnimation,
62
+ className: className
63
+ }, fallback, loadingBlock)
64
+ }, typeof isLoading === 'boolean' || defaultToSuspense ? isLoading ? /*#__PURE__*/React.createElement(FlipDiv, {
65
+ key: "loading",
66
+ padded: true,
67
+ onEnter: loadingEnter,
68
+ onLeave: loadingLeave,
69
+ useAnimation: flipAnimation,
70
+ className: className
71
+ }, fallback, loadingBlock) : /*#__PURE__*/React.createElement(FlipDiv, {
72
+ key: "loaded",
73
+ loaded: true,
74
+ onEnter: loadingEnter,
75
+ onLeave: loadingLeave,
76
+ useAnimation: flipAnimation,
77
+ className: className
78
+ }, children) : children);
79
+ };
80
+
81
+ export { LoadingDiv };
82
+ //# sourceMappingURL=LoadingDiv.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"LoadingDiv.mjs","sources":["../src/LoadingDiv.jsx"],"sourcesContent":["import React from 'react'\nimport _ from 'lodash/fp'\nimport styled from 'styled-components'\nimport {willUseFlipSwitch} from './Flip'\nimport {Loading} from './Loading'\nimport {useEnsureRef, useLazyConstant} from '@startlibs/core'\nimport {twoWayAnimation} from '@startlibs/utils'\n\n\nconst [loadingEnter, loadingLeave] = twoWayAnimation('opacity:0;', 'opacity:1;')\nconst [onEnter, onLeave] = twoWayAnimation('opacity:0; transform:translateY(50%)', 'opacity:1;transform:translateY(0)')\n\nconst BlockContainer = styled.div`\n position:relative;\n`\n\nconst FlipDiv = ({useAnimation, outerRef, onEnter = onEnter, onLeave = onLeave, ...props}) => {\n const ensuredRef = useEnsureRef(outerRef)\n useAnimation(ensuredRef, onEnter, onLeave)\n return <BlockContainer {...props} ref={ensuredRef}/>\n}\n\nconst PaddingDiv = styled.div`\n padding: ${props => props.height} 0;\n`\n\nexport const LoadingDiv = ({defaultToSuspense = true, fallback, isLoading, className, height = 12, size = 32, borderWidth = 5, children}) => {\n const flipAnimation = useLazyConstant(willUseFlipSwitch)\n\n const loadingBlock = <PaddingDiv height={_.isString(height) ? borderWidth : (height+'rem')}>\n <Loading autoFocus absolute size={size} borderWidth={borderWidth}/>\n </PaddingDiv>\n\n return <React.Suspense\n fallback={<FlipDiv\n key=\"loading\"\n padded\n onEnter={loadingEnter}\n onLeave={loadingLeave}\n useAnimation={flipAnimation}\n className={className}\n >\n {fallback}\n {loadingBlock}\n </FlipDiv>}\n >\n {\n (typeof isLoading === 'boolean' || defaultToSuspense)\n ? (isLoading\n ? <FlipDiv\n key=\"loading\"\n padded\n onEnter={loadingEnter}\n onLeave={loadingLeave}\n useAnimation={flipAnimation}\n className={className}\n >\n {fallback}\n {loadingBlock}\n </FlipDiv>\n : <FlipDiv\n key=\"loaded\"\n loaded\n onEnter={loadingEnter}\n onLeave={loadingLeave}\n useAnimation={flipAnimation}\n className={className}\n >\n {children}\n </FlipDiv>\n )\n : children\n }\n </React.Suspense>\n}"],"names":["loadingEnter","loadingLeave","twoWayAnimation","keyframes","BlockContainer","styled","yakDomTag","FlipDiv","_ref","useAnimation","outerRef","onEnter","onLeave","props","_objectWithoutProperties","_excluded","ensuredRef","useEnsureRef","React","createElement","_extends","ref","PaddingDiv","height","LoadingDiv","_ref2","defaultToSuspense","fallback","isLoading","className","size","borderWidth","children","flipAnimation","useLazyConstant","willUseFlipSwitch","loadingBlock","_isString","Loading","autoFocus","absolute","Suspense","key","padded","loaded"],"mappings":"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"}
@@ -0,0 +1,99 @@
1
+ import _extends from '@babel/runtime/helpers/extends';
2
+ import _isObject from 'lodash/fp/isObject';
3
+ import { yakDomTag } from '@startlibs/utils/yakDomTag';
4
+ import React, { useEffect, useRef } from 'react';
5
+ import { styled } from '@yak/react';
6
+ import { willUseSharedState, useToggle, Fill } from '@startlibs/core';
7
+ import { getColor, oneWayAnimation, callIfFunction } from '@startlibs/utils';
8
+ import { useFlipAnimation } from './Flip.mjs';
9
+ import { Icon } from './Icon.mjs';
10
+
11
+ const NotificationContainer = styled(yakDomTag("div"))`
12
+ position: fixed;
13
+ top: 0;
14
+ height: 1px;
15
+ left: 0;
16
+ right: 0;
17
+ text-align: center;
18
+ `;
19
+ const Notification = styled(yakDomTag("div"))`
20
+ padding: 1rem 4.5rem 1rem 1.5rem;
21
+ font-size: 14px;
22
+ font-weight: 500;
23
+ border-radius: 10px;
24
+ color: white;
25
+ text-align: left;
26
+ background: ${props => getColor(props.type)(props)};
27
+ box-shadow: 0 2px 0px 0px rgba(0,0,0,0.1);
28
+ min-width: 12rem;
29
+ min-height: 48px;
30
+ display: inline-flex;
31
+ align-items: center;
32
+ position: relative;
33
+ top: 1rem;
34
+ ${Icon} {
35
+ color: white;
36
+ display: inline-block;
37
+ background-color: rgba(0,0,0,0.1);
38
+ font-size: 18px;
39
+ width: 24px;
40
+ height: 24px;
41
+ text-align: center;
42
+ line-height: 24px;
43
+ border-radius: 50%;
44
+ cursor: pointer;
45
+ position: absolute;
46
+ top: 50%;
47
+ transform: translateY(-50%);
48
+ right: 1rem;
49
+ &:hover {
50
+ background-color: rgba(0,0,0,0.2);
51
+ }
52
+ }
53
+ `;
54
+ const [useNotification, useNotificationRef, setNotification] = willUseSharedState();
55
+ const willSetNotification = str => () => setNotification(str);
56
+ const animation = oneWayAnimation('opacity:0; transform:translateY(-20px)', 'opacity:1;transform:translate(0)');
57
+ const Notifications = () => {
58
+ const toggle = useToggle();
59
+ const [rawNotification, setNotification] = useNotification();
60
+ const {
61
+ msg,
62
+ type,
63
+ timeout = 5000
64
+ } = _isObject(rawNotification) ? rawNotification : {
65
+ type: "success",
66
+ msg: rawNotification
67
+ };
68
+ useEffect(() => {
69
+ if (msg) {
70
+ toggle.open();
71
+ setTimeout(toggle.willCloseAfter(timeout), 100);
72
+ }
73
+ }, [msg]);
74
+ useEffect(() => {
75
+ if (!toggle.isOpen) {
76
+ setNotification(null);
77
+ }
78
+ }, [toggle.isOpen]);
79
+ return toggle.isOpen && /*#__PURE__*/React.createElement(Fill, {
80
+ name: "Notifications"
81
+ }, /*#__PURE__*/React.createElement(FlipNotification, {
82
+ type: type
83
+ }, callIfFunction(msg, toggle.close), /*#__PURE__*/React.createElement(Icon, {
84
+ icon: "x",
85
+ onClick: toggle.close
86
+ })));
87
+ };
88
+ const FlipNotification = props => {
89
+ const ref = useRef();
90
+ useFlipAnimation(ref, animation);
91
+ return /*#__PURE__*/React.createElement(NotificationContainer, {
92
+ ref: ref
93
+ }, /*#__PURE__*/React.createElement(Notification, _extends({
94
+ id: "js-share-notification"
95
+ }, props)));
96
+ };
97
+
98
+ export { Notifications, setNotification, useNotification, useNotificationRef, willSetNotification };
99
+ //# sourceMappingURL=Notifications.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Notifications.mjs","sources":["../src/Notifications.jsx"],"sourcesContent":["import React, {useEffect, useRef} from 'react'\nimport _ from 'lodash/fp'\nimport styled from 'styled-components'\nimport {Fill, useToggle, willUseSharedState} from '@startlibs/core'\nimport {callIfFunction, getColor, oneWayAnimation} from '@startlibs/utils'\nimport {useFlipAnimation} from './Flip'\nimport {Icon} from './Icon'\n\nconst NotificationContainer = styled.div `\n position: fixed;\n top: 0;\n height: 1px;\n left: 0;\n right: 0;\n text-align: center;\n`\n\nconst Notification = styled.div `\n padding: 1rem 4.5rem 1rem 1.5rem;\n font-size: 14px;\n font-weight: 500;\n border-radius: 10px;\n color: white;\n text-align: left;\n background: ${props => getColor(props.type)(props)};\n box-shadow: 0 2px 0px 0px rgba(0,0,0,0.1);\n min-width: 12rem;\n min-height: 48px;\n display: inline-flex;\n align-items: center;\n position: relative;\n top: 1rem;\n ${Icon} {\n color: white;\n display: inline-block;\n background-color: rgba(0,0,0,0.1);\n font-size: 18px;\n width: 24px;\n height: 24px;\n text-align: center;\n line-height: 24px;\n border-radius: 50%;\n cursor: pointer;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n right: 1rem;\n &:hover {\n background-color: rgba(0,0,0,0.2);\n }\n }\n`\n\nconst [useNotification, useNotificationRef,setNotification] = willUseSharedState()\nexport {useNotification, useNotificationRef, setNotification}\nexport const willSetNotification = (str) => () => setNotification(str)\n\nconst animation = oneWayAnimation('opacity:0; transform:translateY(-20px)', 'opacity:1;transform:translate(0)')\n\nexport const Notifications = () => {\n const toggle = useToggle()\n const [rawNotification,setNotification] = useNotification()\n\n const {msg,type,timeout = 5000} = _.isObject(rawNotification) ? rawNotification : {type:\"success\",msg:rawNotification}\n\n useEffect(() => {\n if (msg) {\n toggle.open()\n setTimeout(toggle.willCloseAfter(timeout), 100)\n }\n },[msg])\n useEffect(() => {\n if (!toggle.isOpen) {\n setNotification(null)\n }\n },[toggle.isOpen])\n\n return toggle.isOpen && (<Fill name=\"Notifications\">\n <FlipNotification type={type}>\n {callIfFunction(msg,toggle.close)}\n <Icon icon=\"x\" onClick={toggle.close}/>\n </FlipNotification>\n </Fill>)\n}\nconst FlipNotification = (props) => {\n const ref = useRef()\n useFlipAnimation(ref,animation)\n return <NotificationContainer ref={ref}><Notification id=\"js-share-notification\" {...props}/></NotificationContainer>\n}"],"names":["NotificationContainer","styled","yakDomTag","Notification","props","getColor","type","Icon","useNotification","useNotificationRef","setNotification","willUseSharedState","willSetNotification","str","animation","oneWayAnimation","Notifications","toggle","useToggle","rawNotification","msg","timeout","_isObject","useEffect","open","setTimeout","willCloseAfter","isOpen","React","createElement","Fill","name","FlipNotification","callIfFunction","close","icon","onClick","ref","useRef","useFlipAnimation","_extends","id"],"mappings":"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"}
@@ -0,0 +1,61 @@
1
+ import { yakDomTag } from '@startlibs/utils/yakDomTag';
2
+ import React, { useEffect } from 'react';
3
+ import { styled, css } from '@yak/react';
4
+ import { getColor, oneWayAnimation, animationTiming } from '@startlibs/utils';
5
+ import { useToggle } from '@startlibs/core';
6
+ import { useFlipLeave } from './Flip.mjs';
7
+
8
+ const LoadingBar = styled(yakDomTag("div")).attrs({
9
+ className: "styled-loading-bar"
10
+ })`
11
+ width: 100%;
12
+ border-radius: 0 1px 1px 0;
13
+ height: 4px;
14
+ position: fixed;
15
+ background: ${props => props.bottom ? getColor('main') : `#84D359`};
16
+ transform: translateX(-100%);
17
+ ${props => props.bottom ? css`bottom:69px;` : css`top: 0;`}
18
+ left: 0;
19
+ z-index: 99999;
20
+ box-shadow: ${props => props.bottom ? `0 0 1px 1px rgba(0,132,214,0.2)` : `0 0 2px 0 rgba(0,0,0,0.5)`};
21
+ ${props => props.loading && css`
22
+ transform: translateX(-30%);
23
+ transition: transform 1.5s ease;
24
+ `}
25
+ ${props => props.closing && css`
26
+ transform: translateX(0);
27
+ transition: transform 0.3s ease-in;
28
+ `}
29
+ `;
30
+ const PageLoader = _ref => {
31
+ let {
32
+ isLoading
33
+ } = _ref;
34
+ const loader = useToggle();
35
+ useEffect(() => {
36
+ if (isLoading) {
37
+ loader.open();
38
+ } else {
39
+ loader.closeAfter(500);
40
+ }
41
+ }, [isLoading]);
42
+ return /*#__PURE__*/React.createElement(LoadingBar, {
43
+ loading: loader.isOpen,
44
+ closing: loader.closing
45
+ });
46
+ };
47
+ const animation = oneWayAnimation('transform:translateX(-30%);', 'transform:translateX(0);');
48
+ const SuspenseLoadingBar = () => {
49
+ const ref = React.useRef();
50
+ useFlipLeave(ref, animation, {
51
+ reverse: false,
52
+ timing: animationTiming('0.3s ease-in')
53
+ });
54
+ return /*#__PURE__*/React.createElement(LoadingBar, {
55
+ ref: ref,
56
+ loading: true
57
+ });
58
+ };
59
+
60
+ export { LoadingBar, PageLoader, SuspenseLoadingBar };
61
+ //# sourceMappingURL=PageLoader.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PageLoader.mjs","sources":["../src/PageLoader.jsx"],"sourcesContent":["import React, {useEffect} from 'react'\nimport styled from 'styled-components'\nimport {oneWayAnimation, getColor} from '@startlibs/utils'\nimport {useToggle} from '@startlibs/core'\nimport {useFlipLeave} from './Flip'\nimport {animationTiming} from '@startlibs/utils'\n\nexport const LoadingBar = styled.div`\n width: 100%;\n border-radius: 0 1px 1px 0;\n height: 4px;\n position: fixed;\n background: ${props => props.bottom ? getColor('main') : `#84D359`};\n transform: translateX(-100%);\n ${props => props.bottom ? \"bottom:69px;\" : \"top: 0;\"}\n left: 0;\n z-index: 99999;\n box-shadow: ${props => props.bottom ? `0 0 1px 1px rgba(0,132,214,0.2)` : `0 0 2px 0 rgba(0,0,0,0.5)`};\n ${props => props.loading && `\n transform: translateX(-30%);\n transition: transform 1.5s ease;\n `}\n ${props => props.closing && `\n transform: translateX(0);\n transition: transform 0.3s ease-in;\n `}\n`\n\n\nexport const PageLoader = ({isLoading}) => {\n const loader = useToggle()\n useEffect(() => {\n if (isLoading) {\n loader.open()\n } else {\n loader.closeAfter(500)\n }\n },[isLoading])\n\n return <LoadingBar loading={loader.isOpen} closing={loader.closing}/>\n}\n\nconst animation = oneWayAnimation('transform:translateX(-30%);','transform:translateX(0);')\nexport const SuspenseLoadingBar = () => {\n const ref = React.useRef()\n useFlipLeave(ref,animation,{reverse: false,timing:animationTiming('0.3s ease-in')})\n return <LoadingBar ref={ref} loading/>\n}"],"names":["LoadingBar","styled","yakDomTag","attrs","className","props","bottom","getColor","css","loading","closing","PageLoader","_ref","isLoading","loader","useToggle","useEffect","open","closeAfter","React","createElement","isOpen","animation","oneWayAnimation","SuspenseLoadingBar","ref","useRef","useFlipLeave","reverse","timing","animationTiming"],"mappings":";;;;;;;MAOaA,UAAU,GAAGC,MAAA,CAAAC,SAAA,SAAAC,KAAA,CAAA;EAAAC,SAAA,EAAA,oBAAA;AAAA,CAAA,CAAA,CAAA;AAC1B;AACA;AACA;AACA;AACA,cAAgBC,EAAAA,KAAK,IAAIA,KAAK,CAACC,MAAM,GAAGC,QAAQ,CAAC,MAAM,CAAC,GAAG,CAAS,OAAA,CAAA,CAAA;AACpE;AACA,EAAIF,EAAAA,KAAK,IAAIA,KAAK,CAACC,MAAM,GAAAE,GAAA,CAAAA,YAAAA,CAAAA,GAAAA,GAAA,CAA6B,OAAA,CAAA,CAAA;AACtD;AACA;AACA,cAAgBH,EAAAA,KAAK,IAAIA,KAAK,CAACC,MAAM,GAAG,CAAA,+BAAA,CAAiC,GAAG,CAA2B,yBAAA,CAAA,CAAA;AACvG,EAAA,EAAID,KAAK,IAAIA,KAAK,CAACI,OAAO,IAAAD,GAAA,CAAA;AAC1B;AACA;AACA,EAAG,CAAA,CAAA;AACH,EAAA,EAAIH,KAAK,IAAIA,KAAK,CAACK,OAAO,IAAAF,GAAA,CAAA;AAC1B;AACA;AACA,EAAG,CAAA,CAAA;AACH,EAAC;AAGYG,MAAAA,UAAU,GAAGC,IAAA,IAAiB;EAAA,IAAhB;AAACC,IAAAA,SAAAA;AAAS,GAAC,GAAAD,IAAA,CAAA;AACpC,EAAA,MAAME,MAAM,GAAGC,SAAS,EAAE,CAAA;AAC1BC,EAAAA,SAAS,CAAC,MAAM;AACd,IAAA,IAAIH,SAAS,EAAE;MACbC,MAAM,CAACG,IAAI,EAAE,CAAA;AACf,KAAC,MAAM;AACLH,MAAAA,MAAM,CAACI,UAAU,CAAC,GAAG,CAAC,CAAA;AACxB,KAAA;AACF,GAAC,EAAC,CAACL,SAAS,CAAC,CAAC,CAAA;AAEd,EAAA,oBAAOM,KAAA,CAAAC,aAAA,CAACpB,UAAU,EAAA;IAACS,OAAO,EAAEK,MAAM,CAACO,MAAO;IAACX,OAAO,EAAEI,MAAM,CAACJ,OAAAA;AAAQ,GAAC,CAAC,CAAA;AACvE,EAAC;AAED,MAAMY,SAAS,GAAGC,eAAe,CAAC,6BAA6B,EAAC,0BAA0B,CAAC,CAAA;AAC9EC,MAAAA,kBAAkB,GAAGA,MAAM;AACtC,EAAA,MAAMC,GAAG,GAAGN,KAAK,CAACO,MAAM,EAAE,CAAA;AAC1BC,EAAAA,YAAY,CAACF,GAAG,EAACH,SAAS,EAAC;AAACM,IAAAA,OAAO,EAAE,KAAK;IAACC,MAAM,EAACC,eAAe,CAAC,cAAc,CAAA;AAAC,GAAC,CAAC,CAAA;AACnF,EAAA,oBAAOX,KAAA,CAAAC,aAAA,CAACpB,UAAU,EAAA;AAACyB,IAAAA,GAAG,EAAEA,GAAI;IAAChB,OAAO,EAAA,IAAA;AAAA,GAAC,CAAC,CAAA;AACxC;;;;"}
@@ -0,0 +1,209 @@
1
+ import _extends from '@babel/runtime/helpers/extends';
2
+ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
3
+ import _defineProperty from '@babel/runtime/helpers/defineProperty';
4
+ import _over from 'lodash/fp/over';
5
+ import _isString from 'lodash/fp/isString';
6
+ import _without from 'lodash/fp/without';
7
+ import _isObject from 'lodash/fp/isObject';
8
+ import { yakDomTag } from '@startlibs/utils/yakDomTag';
9
+ import React, { useRef } from 'react';
10
+ import { styled, css } from '@yak/react';
11
+ import { willUseSharedState, Fill } from '@startlibs/core';
12
+ import { getColor, oneWayAnimation, callIfFunction } from '@startlibs/utils';
13
+ import { useFlipAnimation } from './Flip.mjs';
14
+ import { Icon } from './Icon.mjs';
15
+ import { transparentize, darken } from 'polished';
16
+ import { Button } from './Button.mjs';
17
+
18
+ const _excluded = ["content", "type", "marginTop"];
19
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
20
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
21
+ const PersistentNotification = styled(yakDomTag("div")).attrs({
22
+ className: "styled-persistent-notification"
23
+ })`
24
+ color: ${__yakProps => {
25
+ const v = getColor('warning');
26
+ return typeof v === 'function' ? v(__yakProps) : v;
27
+ }};
28
+ h4 {
29
+ font-size: 15px;
30
+ font-weight: 500;
31
+ margin-bottom: 0.5rem;
32
+ }
33
+ p {
34
+ font-size: 13px;
35
+ margin-bottom: 0;
36
+ }
37
+ `;
38
+ const PersistentNotificationContent = styled(yakDomTag("div")).attrs({
39
+ className: "styled-persistent-notification-content"
40
+ })`
41
+ display: flex;
42
+ align-items: center;
43
+ padding: 1.5rem;
44
+ `;
45
+ const PersistentNotificationIcon = styled(Icon).attrs({
46
+ className: "styled-persistent-notification-icon"
47
+ })`
48
+ font-size: 38px;
49
+ width: 4rem;
50
+ height: 4rem;
51
+ line-height: 4rem;
52
+ border-radius: 100px;
53
+ text-align: center;
54
+ background: ${props => transparentize(0.88, getColor("warning")(props))};
55
+ margin-right: 1rem;
56
+ flex-shrink: 0;
57
+ ${props => props.icon === 'warning' && css`font-size:30px;`}
58
+ `;
59
+ const PersistentNotificationActions = styled(yakDomTag("div")).attrs({
60
+ className: "styled-persistent-notification-actions"
61
+ })`
62
+ display: flex;
63
+ margin-top: -0.25rem;
64
+ padding: 0 1.5rem 1.5rem;
65
+ ${Button} {
66
+ flex-grow: 1;
67
+ }
68
+ ${Button} ~ ${Button} {
69
+ margin-left: 0;
70
+ margin-right: 1rem;
71
+ }
72
+ @media (max-width: 390px) {
73
+ display: block;
74
+ ${Button} {
75
+ width: 100%;
76
+ }
77
+ ${Button} ~ ${Button} {
78
+ margin-left: 0;
79
+ margin-top: 0.75rem;
80
+ }
81
+ }
82
+ `;
83
+ const PersistentNotificationCloseIcon = styled(Icon).attrs({
84
+ icon: 'x',
85
+ className: "styled-persistent-notification-close-icon"
86
+ })`
87
+ position: absolute;
88
+ width: 30px;
89
+ height: 30px;
90
+ font-size: 20px;
91
+ line-height: 30px;
92
+ cursor: pointer;
93
+ border-radius: 50%;
94
+ text-align: center;
95
+ z-index: 1000;
96
+ top: 0.5rem;
97
+ right: 0.5rem;
98
+ color: ${props => props.type && props.type !== 'main' ? getColor(props.type)(props) : darken(0.1, getColor("main")(props))};
99
+ background: ${props => transparentize(0.90, getColor(props.type || "main")(props))};
100
+ &:hover {
101
+ background: ${props => transparentize(0.85, getColor(props.type || "main")(props))};
102
+ }
103
+ &:active {
104
+ background: ${props => transparentize(0.82, getColor(props.type || "main")(props))};
105
+ }
106
+ `;
107
+ const [useNotifications,, setNotifications] = willUseSharedState([]);
108
+ const openPersistentNotification = notification => {
109
+ const newNotification = _objectSpread({
110
+ priority: 0,
111
+ type: "success"
112
+ }, _isObject(notification) ? notification : {
113
+ content: notification
114
+ });
115
+ setNotifications(list => {
116
+ const nextIndex = list.findIndex(n => n.priority < newNotification.priority);
117
+ return nextIndex < 0 ? [...list, newNotification] : [...list.slice(0, nextIndex), newNotification, ...list.slice(nextIndex)];
118
+ });
119
+ return () => setNotifications(_without([newNotification]));
120
+ };
121
+ const animation = oneWayAnimation('opacity:0; transform:translateY(-20px)', 'opacity:1;transform:translate(0)');
122
+ const NotificationContainer = styled(yakDomTag("div"))`
123
+ position: fixed;
124
+ top: 0;
125
+ height: 0;
126
+ right: 0;
127
+ z-index:20;
128
+ `;
129
+ const Notification = styled(yakDomTag("div"))`
130
+ background: ${props => transparentize(0.9, getColor(props.type)(props))};
131
+ position: relative;
132
+ border-radius: 19px;
133
+ `;
134
+ const NotificationWrapper = styled(yakDomTag("div"))`
135
+ background: white;
136
+ margin-top: ${props => props.marginTop || "3.5rem"};
137
+ margin-right: 0.75rem;
138
+ margin-left: 0.75rem;
139
+ padding: 5px;
140
+ border-radius: 22px;
141
+ box-shadow: 0 0 10px 0 rgba(0,0,0,0.1), 0 1px 2px 1px rgba(0,0,0,0.15);
142
+ max-width: 364px;
143
+ @media (max-width: 600px) {
144
+ margin-top: ${props => props.marginTop || "4rem"};
145
+ }
146
+ @media print {
147
+ display: none;
148
+ }
149
+ `;
150
+ const [useIsHiddenPersistentNotifications,, hidePersistentNotifications] = willUseSharedState(false);
151
+ const PersistentNotifications = () => {
152
+ const [notifications, setNotifications] = useNotifications();
153
+ const [isHidden] = useIsHiddenPersistentNotifications();
154
+ if (!notifications.length || isHidden) {
155
+ return null;
156
+ }
157
+ const closeMessage = e => {
158
+ setNotifications(list => list.slice(1));
159
+ };
160
+ const _notifications$ = notifications[0],
161
+ {
162
+ content,
163
+ type,
164
+ marginTop
165
+ } = _notifications$,
166
+ notification = _objectWithoutProperties(_notifications$, _excluded);
167
+ return /*#__PURE__*/React.createElement(Fill, {
168
+ name: "PersistentNotifications"
169
+ }, /*#__PURE__*/React.createElement(FlipNotification, {
170
+ type: type,
171
+ marginTop: marginTop
172
+ }, content ? callIfFunction(content, closeMessage) : /*#__PURE__*/React.createElement(DefaultNotification, _extends({
173
+ type: type,
174
+ _onClose: closeMessage
175
+ }, notification))));
176
+ };
177
+ const DefaultNotification = _ref => {
178
+ let {
179
+ type,
180
+ title,
181
+ body,
182
+ actions,
183
+ icon,
184
+ skipClose,
185
+ _onClose,
186
+ onClose
187
+ } = _ref;
188
+ return /*#__PURE__*/React.createElement(PersistentNotification, null, /*#__PURE__*/React.createElement(PersistentNotificationContent, null, _isString(icon) || !icon ? /*#__PURE__*/React.createElement(PersistentNotificationIcon, {
189
+ icon: icon || type
190
+ }) : icon, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", null, title), body)), actions && /*#__PURE__*/React.createElement(PersistentNotificationActions, null, actions), !skipClose && /*#__PURE__*/React.createElement(PersistentNotificationCloseIcon, {
191
+ type: "warning",
192
+ onClick: _over([_onClose, onClose])
193
+ }));
194
+ };
195
+ const FlipNotification = props => {
196
+ const ref = useRef();
197
+ useFlipAnimation(ref, animation);
198
+ return /*#__PURE__*/React.createElement(NotificationContainer, {
199
+ className: "JS-fix-dialog-scroll",
200
+ ref: ref
201
+ }, /*#__PURE__*/React.createElement(NotificationWrapper, {
202
+ marginTop: props.marginTop
203
+ }, /*#__PURE__*/React.createElement(Notification, _extends({
204
+ id: "js-share-notification"
205
+ }, props))));
206
+ };
207
+
208
+ export { PersistentNotification, PersistentNotificationActions, PersistentNotificationCloseIcon, PersistentNotificationContent, PersistentNotificationIcon, PersistentNotifications, hidePersistentNotifications, openPersistentNotification, useIsHiddenPersistentNotifications };
209
+ //# sourceMappingURL=PersistentNotifications.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PersistentNotifications.mjs","sources":["../src/PersistentNotifications.jsx"],"sourcesContent":["import React, {useRef} from 'react'\nimport _ from 'lodash/fp'\nimport styled from 'styled-components'\nimport {Fill, willUseSharedState} from '@startlibs/core'\nimport {media,getColor, callIfFunction, oneWayAnimation, printerMedia} from '@startlibs/utils'\nimport {useFlipAnimation} from './Flip'\nimport {Icon} from './Icon'\nimport {darken, transparentize } from 'polished';\nimport {Button} from './Button'\n\nexport const PersistentNotification = styled.div`\n color: ${getColor('warning')};\n h4 {\n font-size: 15px;\n font-weight: 500;\n margin-bottom: 0.5rem;\n }\n p {\n font-size: 13px;\n margin-bottom: 0;\n }\n`\n\nexport const PersistentNotificationContent = styled.div`\n display: flex;\n align-items: center;\n padding: 1.5rem;\n`\nexport const PersistentNotificationIcon = styled(Icon)`\n font-size: 38px;\n width: 4rem;\n height: 4rem;\n line-height: 4rem;\n border-radius: 100px;\n text-align: center;\n background: ${props => transparentize(0.88, getColor(\"warning\")(props))};\n margin-right: 1rem;\n flex-shrink: 0;\n ${props => props.icon === 'warning' && `font-size:30px;`}\n`\nexport const PersistentNotificationActions = styled.div`\n display: flex;\n margin-top: -0.25rem;\n padding: 0 1.5rem 1.5rem;\n ${Button} {\n flex-grow: 1;\n }\n ${Button} ~ ${Button} {\n margin-left: 0;\n margin-right: 1rem;\n }\n ${media.max(390)`\n display: block;\n ${Button} {\n width: 100%;\n }\n ${Button} ~ ${Button} {\n margin-left: 0;\n margin-top: 0.75rem;\n }\n `}\n`\nexport const PersistentNotificationCloseIcon = styled(Icon).attrs({icon: 'x'})`\n position: absolute;\n width: 30px;\n height: 30px;\n font-size: 20px;\n line-height: 30px;\n cursor: pointer;\n border-radius: 50%;\n text-align: center;\n z-index: 1000;\n top: 0.5rem;\n right: 0.5rem;\n color: ${props => props.type && props.type!== 'main' ? getColor(props.type)(props) : darken(0.1, getColor(\"main\")(props))};\n background: ${props => transparentize(0.90, getColor(props.type || \"main\")(props))};\n &:hover {\n background: ${props => transparentize(0.85, getColor(props.type || \"main\")(props))};\n }\n &:active {\n background: ${props => transparentize(0.82, getColor(props.type || \"main\")(props))};\n }\n `\n\n\nconst [useNotifications, ,setNotifications] = willUseSharedState([])\n\nexport const openPersistentNotification = (notification) => {\n const newNotification = {priority:0,type:\"success\",...(_.isObject(notification) ? notification : {content:notification})}\n\n setNotifications(list => {\n const nextIndex = list.findIndex(n => n.priority < newNotification.priority)\n return nextIndex < 0\n ? [...list,newNotification]\n : [...list.slice(0,nextIndex),newNotification,...list.slice(nextIndex)]\n })\n return () => setNotifications(_.without([newNotification]))\n}\n\n\nconst animation = oneWayAnimation('opacity:0; transform:translateY(-20px)', 'opacity:1;transform:translate(0)')\n\nconst NotificationContainer = styled.div `\n position: fixed;\n top: 0;\n height: 0;\n right: 0;\n z-index:20;\n`\n\nconst Notification = styled.div `\n background: ${props => transparentize(0.9, getColor(props.type)(props))};\n position: relative;\n border-radius: 19px;\n`\nconst NotificationWrapper = styled.div `\n background: white;\n margin-top: ${props => props.marginTop || \"3.5rem\"};\n margin-right: 0.75rem;\n margin-left: 0.75rem;\n padding: 5px;\n border-radius: 22px;\n box-shadow: 0 0 10px 0 rgba(0,0,0,0.1), 0 1px 2px 1px rgba(0,0,0,0.15);\n max-width: 364px;\n ${media.mobile`\n margin-top: ${props => props.marginTop || \"4rem\"};\n `}\n ${printerMedia`\n display: none;\n `}\n`\nconst [useIsHiddenPersistentNotifications,,hidePersistentNotifications] = willUseSharedState(false)\nexport {useIsHiddenPersistentNotifications, hidePersistentNotifications}\nexport const PersistentNotifications = () => {\n const [notifications,setNotifications] = useNotifications()\n const [isHidden] = useIsHiddenPersistentNotifications()\n\n if (!notifications.length || isHidden) {\n return null;\n }\n const closeMessage = (e) => {\n setNotifications((list) => list.slice(1))\n }\n\n const {content,type,marginTop,...notification} = notifications[0]\n\n return <Fill name=\"PersistentNotifications\">\n <FlipNotification type={type} marginTop={marginTop}>\n {content\n ? callIfFunction(content,closeMessage)\n : <DefaultNotification type={type} _onClose={closeMessage} {...notification} />\n }\n </FlipNotification>\n </Fill>\n}\n\nconst DefaultNotification = ({type, title,body,actions, icon, skipClose,_onClose,onClose}) => {\n return <PersistentNotification>\n <PersistentNotificationContent>\n {(_.isString(icon) || !icon) ? <PersistentNotificationIcon icon={icon || type}/> : icon}\n <div>\n <h4>{title}</h4>\n {body}\n </div>\n </PersistentNotificationContent>\n {\n actions &&\n <PersistentNotificationActions>\n {actions}\n </PersistentNotificationActions>\n }\n {!skipClose && <PersistentNotificationCloseIcon type=\"warning\" onClick={_.over([_onClose,onClose])}/>}\n </PersistentNotification>\n}\n\nconst FlipNotification = (props) => {\n const ref = useRef()\n useFlipAnimation(ref,animation)\n return <NotificationContainer className=\"JS-fix-dialog-scroll\" ref={ref}>\n <NotificationWrapper marginTop={props.marginTop}><Notification id=\"js-share-notification\" {...props}/></NotificationWrapper>\n </NotificationContainer>\n}\n"],"names":["PersistentNotification","styled","yakDomTag","attrs","className","__yakProps","v","getColor","PersistentNotificationContent","PersistentNotificationIcon","Icon","props","transparentize","icon","css","PersistentNotificationActions","Button","PersistentNotificationCloseIcon","type","darken","useNotifications","setNotifications","willUseSharedState","openPersistentNotification","notification","newNotification","_objectSpread","priority","_isObject","content","list","nextIndex","findIndex","n","slice","_without","animation","oneWayAnimation","NotificationContainer","Notification","NotificationWrapper","marginTop","useIsHiddenPersistentNotifications","hidePersistentNotifications","PersistentNotifications","notifications","isHidden","length","closeMessage","e","_notifications$","_objectWithoutProperties","_excluded","React","createElement","Fill","name","FlipNotification","callIfFunction","DefaultNotification","_extends","_onClose","_ref","title","body","actions","skipClose","onClose","_isString","onClick","_over","ref","useRef","useFlipAnimation","id"],"mappings":"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"}