lilact 0.10.1 → 0.11.0
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/README.md +2 -1
- package/dist/lilact.development.js +194 -12
- package/dist/lilact.development.js.map +1 -1
- package/dist/lilact.development.min.js +1 -1
- package/dist/lilact.development.min.js.map +1 -1
- package/dist/lilact.production.min.js +1 -1
- package/dist/lilact.production.min.js.map +1 -1
- package/docs/assets/navigation.js +1 -1
- package/docs/assets/search.js +1 -1
- package/docs/functions/transition.CSSTransition.html +3 -3
- package/docs/functions/transition.SwitchTransition.html +22 -0
- package/docs/functions/transition.TransitionGroup.html +1 -1
- package/docs/index.html +2 -1
- package/docs/modules/transition.html +1 -1
- package/docs/static/demos/css-transition.jsx +4 -4
- package/docs/static/demos/error-boundary.jsx +1 -1
- package/docs/static/demos/lazy.jsx +1 -0
- package/docs/static/demos/modal.jsx +1 -1
- package/docs/static/demos/suspense.jsx +2 -2
- package/docs/static/demos/switch-transition.jsx +38 -34
- package/docs/static/index.html +21 -11
- package/docs/static/lilact.development.js +194 -12
- package/docs/static/lilact.development.min.js +1 -1
- package/docs/static/lilact.production.min.js +1 -1
- package/package.json +7 -3
- package/root/demos/css-transition.jsx +4 -4
- package/root/demos/error-boundary.jsx +1 -1
- package/root/demos/lazy.jsx +1 -0
- package/root/demos/modal.jsx +1 -1
- package/root/demos/suspense.jsx +2 -2
- package/root/demos/switch-transition.jsx +38 -34
- package/root/index.html +21 -11
- package/root/lilact.development.js +194 -12
- package/root/lilact.development.min.js +1 -1
- package/root/lilact.production.min.js +1 -1
- package/src/hooks.jsx +3 -3
- package/src/jsx.js +1 -0
- package/src/lilact.jsx +1 -1
- package/src/pane.jsx +2 -2
- package/src/transition.jsx +180 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
window.navigationData = "
|
|
1
|
+
window.navigationData = "eJyVmFtvGysQgP/LPketTlpVR3lrUreJlOREsdWXqg9jdmyjsLDl4tQ96n+vYG/smp2lj14+PjEwwOBv/xcWf9riqgDG0BilOZrioqjBHoqrolKlE2jeRo1vDrYSxUXxwmVZXF1eFOzARalRFlffetlKa6WvlZMl6NOgYwKMmehG6Fj+z+W/vy9659qZGqVBWtdRpKnmUqIeRDsnmeVKTlQNNjZ9eP/7e6RiqqqVRGkTkza0Zc3ZTYefBxiZeooK8HbzcJ+nG5GU8lkpm6cckZSSaQSLCemwHJF2Qp+tytTrh5Gl9CBh0yjLdK5EpgYiMwV9nieypPmelSF7obYgwoa5BVmK9LBa4TlMBGk1MAwsYRwgMtCDUi+JOMPnrDC7lZbhd2I8jWqEEbE5gx9Dx7UFi/O+MUcLb0CILbAX0tZBC6qlOAeGFn3CHWqN5VcQjg5zRNLS1W6HjB5cg9CaW6XoufIArbgrScFdudC9qlGD5UdsdgMtm8C0+h5OytmMmYrBBaViINZWadjTI41BWvmAlSJVHqAVz1g6lj50ekvLLIl2C5IdLVjeyhmbeKNBGu77kaYBI4+9iht2fur5r3m3f/etVxxBc9j2kg4Y295dxhefv4wfoYoruCGgYBkQYm5KxHr1w4GY1fQEYdlxWX767+FRlcmVCp6IoUxKv4IuZ7KmEfUI4fmsYV/NVBrB0gGEY49DcXN9elJc2vSOCMIkTdi5+WhOks362nbScOOXmDCEdtKwqmp7IgyhnTbMlRKdIVlFxIbNAaXPfkLSIaTnKwhergSS6z7GCJ85gBDqld4cMUTVXOpaqXlL00weOTVIPD9y/NesI+cZDf/lJ/Bp5BnOnWAaUWeHTzwcjaX7eT6e8Dmv8FPVlsvuCknmcCObgNRbQEk5cy13qgAQiietjnzmCdA4OmKhPuOmBssO854IWrj+UCCz6R3Wqzpo6SZVOrnJBo8nyDzUyo0OwX7lw/espb8Fc3ieaKKxNKIBImK65zJZarYO30z0foTjgqAlCEcYImEI7Uv909kfCaisbwvDudKm1UQU7XqEI9/PFFyDq6PoVHEykSdOZiWJgF/Ja8n3923kK/6H4zOJ7uSbtpkSuPRU+s7T4U87rpnmtU2vaNO/Jcips7zC1B8IzfesCQTJq7DenzVU+KRVxU1yTlpnkqdOW4Gg73yNc0zfj613xC35NrxC5ZJHeKxrMap007DdTCbxzDVAhKkG/y5YUkUUmZkCIcM24kifQZth6yna5aqcoQ0YVTyhzciNiKJdy3kxQFQZ1hDLm2EM0ls18bLst+vMc3LuXbhe0+/UyDdiiZDXr9yyQ7Z2ihPmbOdf2r5o5epsZaATC/T9D62vrrc="
|
package/docs/assets/search.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
window.searchData = "eJy9nV+TnDYSwL/KFXmd7CEk/u1b4jjnVCU5V+zLy5YrhWe0u5RnYALMJhuXv/
|
|
1
|
+
window.searchData = "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";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
<!DOCTYPE html><html class="default" lang="en" data-base="../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>CSSTransition | Lilact</title><meta name="description" content="Documentation for Lilact"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script async src="../assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../index.html" class="title">Lilact</a><div id="tsd-toolbar-links"></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="../modules/transition.html">transition</a></li><li><a href="" aria-current="page">CSSTransition</a></li></ul><h1>Function CSSTransition</h1></div><section class="tsd-panel"><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="csstransition"><span class="tsd-kind-call-signature">CSSTransition</span><span class="tsd-signature-symbol">(</span><br/> <span class="tsd-kind-parameter">props</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">{</span><br/> <span class="tsd-kind-property">appear</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">children</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">classNames</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">in</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">mountOnEnter</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onEnter</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onEntered</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onEntering</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onExit</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onExited</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onExiting</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">timeout</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">
|
|
1
|
+
<!DOCTYPE html><html class="default" lang="en" data-base="../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>CSSTransition | Lilact</title><meta name="description" content="Documentation for Lilact"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script async src="../assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../index.html" class="title">Lilact</a><div id="tsd-toolbar-links"></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="../modules/transition.html">transition</a></li><li><a href="" aria-current="page">CSSTransition</a></li></ul><h1>Function CSSTransition</h1></div><section class="tsd-panel"><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="csstransition"><span class="tsd-kind-call-signature">CSSTransition</span><span class="tsd-signature-symbol">(</span><br/> <span class="tsd-kind-parameter">props</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">{</span><br/> <span class="tsd-kind-property">appear</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">children</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">classNames</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">in</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">mountOnEnter</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onEnter</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onEntered</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onEntering</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onExit</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onExited</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onExiting</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">timeout</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">unmountOnExit</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-signature-symbol">}</span><span class="tsd-signature-symbol">,</span><br/><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <a href="../classes/components.HTMLComponent.html" class="tsd-signature-type tsd-kind-class">HTMLComponent</a><a href="#csstransition" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>CSSTransition component that extends Transition by applying CSS class names during enter/exit phases.</p>
|
|
2
2
|
<p>Lilact accepts multiple children for CSSTransition. This has the benefit
|
|
3
3
|
of receiving single events on multiple animated components.</p>
|
|
4
|
-
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">props</span>: <span class="tsd-signature-symbol">{</span><br/> <span class="tsd-kind-property">appear</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">children</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">classNames</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">in</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">mountOnEnter</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onEnter</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onEntered</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onEntering</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onExit</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onExited</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onExiting</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">timeout</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">
|
|
4
|
+
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">props</span>: <span class="tsd-signature-symbol">{</span><br/> <span class="tsd-kind-property">appear</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">children</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">classNames</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">in</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">mountOnEnter</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onEnter</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onEntered</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onEntering</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onExit</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onExited</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onExiting</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">timeout</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">unmountOnExit</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">;</span><br/><span class="tsd-signature-symbol">}</span></span><div class="tsd-comment tsd-typography"><p>Component props.</p>
|
|
5
5
|
</div><ul class="tsd-parameters"><li class="tsd-parameter"><h5><code class="tsd-tag">Optional</code><span class="tsd-kind-property">appear</span><span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span></h5><div class="tsd-comment tsd-typography"><p>If true, run the enter transition on initial mount.</p>
|
|
6
6
|
</div></li><li class="tsd-parameter"><h5><span class="tsd-kind-property">children</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span></h5><div class="tsd-comment tsd-typography"><p>Render prop receiving transition state/props.</p>
|
|
7
7
|
</div></li><li class="tsd-parameter"><h5><code class="tsd-tag">Optional</code><span class="tsd-kind-property">classNames</span><span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span></h5><div class="tsd-comment tsd-typography"><p>Base CSS class name(s) used for the transition states.</p>
|
|
@@ -13,6 +13,6 @@ of receiving single events on multiple animated components.</p>
|
|
|
13
13
|
</div></li><li class="tsd-parameter"><h5><span class="tsd-kind-property">onExit</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span></h5><div class="tsd-comment tsd-typography"><p>Called when exiting begins.</p>
|
|
14
14
|
</div></li><li class="tsd-parameter"><h5><span class="tsd-kind-property">onExited</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span></h5><div class="tsd-comment tsd-typography"><p>Called when exiting completes.</p>
|
|
15
15
|
</div></li><li class="tsd-parameter"><h5><span class="tsd-kind-property">onExiting</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span></h5><div class="tsd-comment tsd-typography"><p>Called while the component is exiting.</p>
|
|
16
|
-
</div></li><li class="tsd-parameter"><h5><code class="tsd-tag">Optional</code><span class="tsd-kind-property">timeout</span><span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">
|
|
16
|
+
</div></li><li class="tsd-parameter"><h5><code class="tsd-tag">Optional</code><span class="tsd-kind-property">timeout</span><span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</span></h5><div class="tsd-comment tsd-typography"><p>Duration (or durations) for the transition.</p>
|
|
17
17
|
</div></li><li class="tsd-parameter"><h5><code class="tsd-tag">Optional</code><span class="tsd-kind-property">unmountOnExit</span><span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span></h5><div class="tsd-comment tsd-typography"><p>If true, unmount the child after exiting.</p>
|
|
18
18
|
</div></li></ul></li></ul></div><h4 class="tsd-returns-title">Returns <a href="../classes/components.HTMLComponent.html" class="tsd-signature-type tsd-kind-class">HTMLComponent</a></h4><aside class="tsd-sources"><ul><li>Defined in transition.js:201</li></ul></aside></div></li></ul></section></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">Lilact</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
<!DOCTYPE html><html class="default" lang="en" data-base="../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>SwitchTransition | Lilact</title><meta name="description" content="Documentation for Lilact"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script async src="../assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../index.html" class="title">Lilact</a><div id="tsd-toolbar-links"></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="../modules/transition.html">transition</a></li><li><a href="" aria-current="page">SwitchTransition</a></li></ul><h1>Function SwitchTransition</h1></div><section class="tsd-panel"><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="switchtransition"><span class="tsd-kind-call-signature">SwitchTransition</span><span class="tsd-signature-symbol">(</span><br/> <span class="tsd-kind-parameter">props</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">{</span><br/> <span class="tsd-kind-property">activeKey</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">appear</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">children</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">classNames</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">csstProps</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">object</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">mode</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">"out-in"</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">"in-out"</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">mountOnEnter</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onEnter</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">isAppearing</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=></span> <span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onEntered</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">isAppearing</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=></span> <span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onExited</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">isAppearing</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=></span> <span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onExiting</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">isAppearing</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=></span> <span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">timeout</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">unmountOnExit</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-signature-symbol">}</span><span class="tsd-signature-symbol">,</span><br/><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <a href="../classes/components.HTMLComponent.html" class="tsd-signature-type tsd-kind-class">HTMLComponent</a><a href="#switchtransition" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Switches between keyed children with <code>CSSTransition</code>.
|
|
2
|
+
Ensures each child key gets its own <code>CSSTransition</code> instance to avoid state loss.</p>
|
|
3
|
+
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">props</span>: <span class="tsd-signature-symbol">{</span><br/> <span class="tsd-kind-property">activeKey</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">appear</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">children</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">classNames</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">csstProps</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">object</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">mode</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">"out-in"</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">"in-out"</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">mountOnEnter</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onEnter</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">isAppearing</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=></span> <span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onEntered</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">isAppearing</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=></span> <span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onExited</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">isAppearing</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=></span> <span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onExiting</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">isAppearing</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=></span> <span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">timeout</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">unmountOnExit</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">;</span><br/><span class="tsd-signature-symbol">}</span></span><ul class="tsd-parameters"><li class="tsd-parameter"><h5><span class="tsd-kind-property">activeKey</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span></h5><div class="tsd-comment tsd-typography"><p>The key of the currently active child.</p>
|
|
4
|
+
</div></li><li class="tsd-parameter"><h5><code class="tsd-tag">Optional</code><span class="tsd-kind-property">appear</span><span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span></h5><div class="tsd-comment tsd-typography"><p>Whether to run the initial transition on first mount.</p>
|
|
5
|
+
</div></li><li class="tsd-parameter"><h5><span class="tsd-kind-property">children</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">[]</span></h5><div class="tsd-comment tsd-typography"><p>The set of children to switch between. Each child should have a stable <code>key</code>
|
|
6
|
+
(or your <code>key</code> will fall back to its index).</p>
|
|
7
|
+
</div></li><li class="tsd-parameter"><h5><code class="tsd-tag">Optional</code><span class="tsd-kind-property">classNames</span><span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span></h5><div class="tsd-comment tsd-typography"><p>Base className(s) used by <code>CSSTransition</code> to apply enter/exit classes.</p>
|
|
8
|
+
</div></li><li class="tsd-parameter"><h5><code class="tsd-tag">Optional</code><span class="tsd-kind-property">csstProps</span><span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">object</span></h5><div class="tsd-comment tsd-typography"><p>Any additional props are forwarded to each <code>CSSTransition</code> instance.</p>
|
|
9
|
+
</div></li><li class="tsd-parameter"><h5><code class="tsd-tag">Optional</code><span class="tsd-kind-property">mode</span><span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">"out-in"</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">"in-out"</span></h5><div class="tsd-comment tsd-typography"><p>Controls sequencing when <code>activeKey</code> changes:</p>
|
|
10
|
+
<ul>
|
|
11
|
+
<li><code>"out-in"</code>: outgoing transitions out first, incoming transitions in after exit completes.</li>
|
|
12
|
+
<li><code>"in-out"</code>: incoming transitions in first, outgoing transitions out after the incoming finishes entering
|
|
13
|
+
(relies on <code>onEntered</code>).</li>
|
|
14
|
+
</ul>
|
|
15
|
+
</div></li><li class="tsd-parameter"><h5><code class="tsd-tag">Optional</code><span class="tsd-kind-property">mountOnEnter</span><span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span></h5><div class="tsd-comment tsd-typography"><p>Whether to mount the transitioning child only when it begins entering.</p>
|
|
16
|
+
</div></li><li class="tsd-parameter"><h5><code class="tsd-tag">Optional</code><span class="tsd-kind-property">onEnter</span><span class="tsd-signature-symbol">?: </span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">isAppearing</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=></span> <span class="tsd-signature-type">void</span></h5><div class="tsd-comment tsd-typography"><p>Called when a child begins entering.</p>
|
|
17
|
+
</div></li><li class="tsd-parameter"><h5><code class="tsd-tag">Optional</code><span class="tsd-kind-property">onEntered</span><span class="tsd-signature-symbol">?: </span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">isAppearing</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=></span> <span class="tsd-signature-type">void</span></h5><div class="tsd-comment tsd-typography"><p>Called when a child finishes entering. Used to implement <code>"in-out"</code> sequencing.</p>
|
|
18
|
+
</div></li><li class="tsd-parameter"><h5><code class="tsd-tag">Optional</code><span class="tsd-kind-property">onExited</span><span class="tsd-signature-symbol">?: </span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">isAppearing</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=></span> <span class="tsd-signature-type">void</span></h5><div class="tsd-comment tsd-typography"><p>Called when the outgoing child finishes exiting.</p>
|
|
19
|
+
</div></li><li class="tsd-parameter"><h5><code class="tsd-tag">Optional</code><span class="tsd-kind-property">onExiting</span><span class="tsd-signature-symbol">?: </span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">isAppearing</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=></span> <span class="tsd-signature-type">void</span></h5><div class="tsd-comment tsd-typography"><p>Called when a child begins exiting.</p>
|
|
20
|
+
</div></li><li class="tsd-parameter"><h5><code class="tsd-tag">Optional</code><span class="tsd-kind-property">timeout</span><span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</span></h5><div class="tsd-comment tsd-typography"><p>Transition timeout passed to each <code>CSSTransition</code>.</p>
|
|
21
|
+
</div></li><li class="tsd-parameter"><h5><code class="tsd-tag">Optional</code><span class="tsd-kind-property">unmountOnExit</span><span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span></h5><div class="tsd-comment tsd-typography"><p>Whether to unmount the child after it finishes exiting.</p>
|
|
22
|
+
</div></li></ul></li></ul></div><h4 class="tsd-returns-title">Returns <a href="../classes/components.HTMLComponent.html" class="tsd-signature-type tsd-kind-class">HTMLComponent</a></h4><aside class="tsd-sources"><ul><li>Defined in transition.js:273</li></ul></aside></div></li></ul></section></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">Lilact</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
|
|
@@ -2,4 +2,4 @@
|
|
|
2
2
|
In Lilact all the transitions and timeouts are automatically grouped.</p>
|
|
3
3
|
<p>The only missing feature here is the childFactory. I may add it in
|
|
4
4
|
the future, but there are simple workarounds for that.</p>
|
|
5
|
-
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">__namedParameters</span>: <span class="tsd-signature-symbol">{</span> <span class="tsd-kind-property">children</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span> <span class="tsd-signature-symbol">}</span></span></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">any</span></h4><aside class="tsd-sources"><ul><li>Defined in transition.js:
|
|
5
|
+
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">__namedParameters</span>: <span class="tsd-signature-symbol">{</span> <span class="tsd-kind-property">children</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span> <span class="tsd-signature-symbol">}</span></span></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">any</span></h4><aside class="tsd-sources"><ul><li>Defined in transition.js:396</li></ul></aside></div></li></ul></section></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">Lilact</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
|
package/docs/index.html
CHANGED
|
@@ -36,9 +36,10 @@
|
|
|
36
36
|
<p>For convenience, it already includes components such as:</p>
|
|
37
37
|
<ul>
|
|
38
38
|
<li><code>HashRouter</code></li>
|
|
39
|
-
<li><code>CSSTransition</code></li>
|
|
40
39
|
<li><code>ErrorBoundary</code></li>
|
|
41
40
|
<li><code>Suspense</code></li>
|
|
41
|
+
<li><code>CSSTransition</code></li>
|
|
42
|
+
<li><code>SwitchTransition</code></li>
|
|
42
43
|
</ul>
|
|
43
44
|
<p>and helper components like:</p>
|
|
44
45
|
<ul>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<!DOCTYPE html><html class="default" lang="en" data-base="../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>transition | Lilact</title><meta name="description" content="Documentation for Lilact"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script async src="../assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../index.html" class="title">Lilact</a><div id="tsd-toolbar-links"></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="" aria-current="page">transition</a></li></ul><h1>Module transition</h1></div><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Functions"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h2>Functions</h2></summary><dl class="tsd-member-summaries"><dt class="tsd-member-summary" id="csstransition"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="../functions/transition.CSSTransition.html">CSSTransition</a><a href="#csstransition" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></span></dt><dd class="tsd-member-summary"></dd><dt class="tsd-member-summary" id="transition"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="../functions/transition.Transition.html">Transition</a><a href="#transition" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></span></dt><dd class="tsd-member-summary"></dd><dt class="tsd-member-summary" id="transitiongroup"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="../functions/transition.TransitionGroup.html">TransitionGroup</a><a href="#transitiongroup" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></span></dt><dd class="tsd-member-summary"></dd></dl></details></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>On This Page</h3></summary><div class="tsd-accordion-details"><details open class="tsd-accordion tsd-page-navigation-section"><summary class="tsd-accordion-summary" data-key="section-Functions"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Functions</summary><div><a href="#csstransition"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>CSS<wbr/>Transition</span></a><a href="#transition"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>Transition</span></a><a href="#transitiongroup"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>Transition<wbr/>Group</span></a></div></details></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">Lilact</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
|
|
1
|
+
<!DOCTYPE html><html class="default" lang="en" data-base="../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>transition | Lilact</title><meta name="description" content="Documentation for Lilact"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script async src="../assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../index.html" class="title">Lilact</a><div id="tsd-toolbar-links"></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="" aria-current="page">transition</a></li></ul><h1>Module transition</h1></div><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Functions"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h2>Functions</h2></summary><dl class="tsd-member-summaries"><dt class="tsd-member-summary" id="csstransition"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="../functions/transition.CSSTransition.html">CSSTransition</a><a href="#csstransition" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></span></dt><dd class="tsd-member-summary"></dd><dt class="tsd-member-summary" id="switchtransition"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="../functions/transition.SwitchTransition.html">SwitchTransition</a><a href="#switchtransition" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></span></dt><dd class="tsd-member-summary"></dd><dt class="tsd-member-summary" id="transition"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="../functions/transition.Transition.html">Transition</a><a href="#transition" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></span></dt><dd class="tsd-member-summary"></dd><dt class="tsd-member-summary" id="transitiongroup"><span class="tsd-member-summary-name"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><a href="../functions/transition.TransitionGroup.html">TransitionGroup</a><a href="#transitiongroup" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></span></dt><dd class="tsd-member-summary"></dd></dl></details></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>On This Page</h3></summary><div class="tsd-accordion-details"><details open class="tsd-accordion tsd-page-navigation-section"><summary class="tsd-accordion-summary" data-key="section-Functions"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Functions</summary><div><a href="#csstransition"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>CSS<wbr/>Transition</span></a><a href="#switchtransition"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>Switch<wbr/>Transition</span></a><a href="#transition"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>Transition</span></a><a href="#transitiongroup"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Function"><use href="../assets/icons.svg#icon-64"></use></svg><span>Transition<wbr/>Group</span></a></div></details></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">Lilact</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
|
|
@@ -3,8 +3,8 @@ const { CSSTransition, useState, useRef } = Lilact;
|
|
|
3
3
|
|
|
4
4
|
Lilact.emotion.injectGlobal(`
|
|
5
5
|
.test {
|
|
6
|
-
-position: absolute;
|
|
7
6
|
transition: opacity 1000ms, transform 1000ms;
|
|
7
|
+
height: 2rem;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
.test-appear {
|
|
@@ -12,11 +12,11 @@ Lilact.emotion.injectGlobal(`
|
|
|
12
12
|
}
|
|
13
13
|
.test-enter-active, .test-enter-done {
|
|
14
14
|
opacity: 1;
|
|
15
|
-
|
|
15
|
+
transform: scale(2);
|
|
16
16
|
}
|
|
17
17
|
.test-exit-active, .test-exit-done {
|
|
18
18
|
opacity: 0.2;
|
|
19
|
-
|
|
19
|
+
transform: scale(1);
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
`);
|
|
@@ -32,7 +32,7 @@ function Demo()
|
|
|
32
32
|
for(let i=0; i<10;i++) chs.push( <div className='test'>{i}</div> );
|
|
33
33
|
|
|
34
34
|
return (
|
|
35
|
-
<div>
|
|
35
|
+
<div style={{overflow:"hidden", textAlign: "center"}}>
|
|
36
36
|
<p> Notice that Lilact CSSTransition accepts multiple children too. </p>
|
|
37
37
|
<CSSTransition in={inProp} classNames='test'
|
|
38
38
|
|
|
@@ -9,7 +9,7 @@ function Demo() {
|
|
|
9
9
|
In this example an ErrorBoundary shows a fallback on error that contains the error message.
|
|
10
10
|
<br/><br/>
|
|
11
11
|
The "Try Again" button resets the error. But the erronous state persists,
|
|
12
|
-
unless you get to a safe state by pressing the "Safe" button.
|
|
12
|
+
unless you get to a safe state by pressing the "Safe" button and then try again.
|
|
13
13
|
<br/><br/>
|
|
14
14
|
Check the console for component stack.
|
|
15
15
|
</p>
|
|
@@ -5,6 +5,7 @@ const StopWatch = lazy( ()=>require('demos/stopwatch.jsx') );
|
|
|
5
5
|
function Demo({file})
|
|
6
6
|
{
|
|
7
7
|
return <div>
|
|
8
|
+
<p>This is the stopwatch demo, but loaded using lazy wrapper.</p>
|
|
8
9
|
<Suspense minDelay="0" minShowTime="500" fallback={<Spinner/>}>
|
|
9
10
|
<StopWatch/>
|
|
10
11
|
</Suspense>
|
|
@@ -16,7 +16,7 @@ function ModalDialog({ isOpen, children }) {
|
|
|
16
16
|
};
|
|
17
17
|
}, [isOpen]);
|
|
18
18
|
|
|
19
|
-
return <dialog ref={ref} style={{padding: 20, borderRadius: 10, border: "none", boxShadow: "0 5px
|
|
19
|
+
return <dialog ref={ref} style={{padding: 20, borderRadius: 10, border: "none", boxShadow: "0 5px 40px #0006"}}>{children}</dialog>;
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
function Demo() {
|
|
@@ -23,8 +23,8 @@ function createResource(delay, value) {
|
|
|
23
23
|
};
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
const r1 = createResource(
|
|
27
|
-
const r2 = createResource(
|
|
26
|
+
const r1 = createResource(1500, "First ready (1500ms)");
|
|
27
|
+
const r2 = createResource(3000, "Second ready (3000ms)");
|
|
28
28
|
|
|
29
29
|
function Child1() {
|
|
30
30
|
const v = r1.read();
|
|
@@ -1,50 +1,54 @@
|
|
|
1
1
|
const { useState, SwitchTransition } = Lilact;
|
|
2
2
|
|
|
3
3
|
Lilact.emotion.injectGlobal(`
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
.fadeSlide-exit-active { opacity: 0; transform: translateY(-6px); transition: opacity 300ms ease, transform 300ms ease; }
|
|
20
|
-
|
|
21
|
-
.on { background: #e8fff0; color: #0a7a2f; border-color: #a6efbb; }
|
|
22
|
-
.off { background: #fff1f1; color: #8a1f1f; border-color: #ffd0d0; }
|
|
4
|
+
.switch-enter,
|
|
5
|
+
.switch-exit {
|
|
6
|
+
opacity: 0;
|
|
7
|
+
transform: translateY(-10px) scale(0.98);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.switch-enter-active,
|
|
11
|
+
.switch-exit-active {
|
|
12
|
+
transition: opacity 300ms ease, transform 300ms ease;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.switch-enter-active, .switch-enter-done {
|
|
16
|
+
opacity: 1;
|
|
17
|
+
transform: translateY(0) scale(1);
|
|
18
|
+
}
|
|
23
19
|
|
|
20
|
+
.switch-exit-active, .switch-exit-done {
|
|
21
|
+
opacity: 0;
|
|
22
|
+
transform: translateY(10px) scale(0.99);
|
|
23
|
+
}
|
|
24
24
|
`);
|
|
25
25
|
|
|
26
|
-
|
|
26
|
+
|
|
27
|
+
function Demo() {
|
|
27
28
|
const [on, setOn] = useState(false);
|
|
28
29
|
|
|
29
30
|
return (
|
|
30
|
-
<div
|
|
31
|
-
<button
|
|
32
|
-
onClick={() => setOn((v) => !v)}
|
|
33
|
-
style={{ cursor: "pointer", marginBottom: 12 }}
|
|
34
|
-
>
|
|
31
|
+
<div>
|
|
32
|
+
<button onClick={()=>setOn(v => !v) }>
|
|
35
33
|
Toggle
|
|
36
34
|
</button>
|
|
37
35
|
|
|
38
|
-
<
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
36
|
+
<div style={{ position: "relative", height: 80 }}>
|
|
37
|
+
<SwitchTransition
|
|
38
|
+
activeKey={on ? "on" : "off"}
|
|
39
|
+
mode="out-in"
|
|
40
|
+
timeout={300}
|
|
41
|
+
>
|
|
42
|
+
<div key="off" style={{ padding: 12, background: "#fee" }}>
|
|
43
|
+
OFF panel (state preserved)
|
|
45
44
|
</div>
|
|
46
|
-
|
|
47
|
-
|
|
45
|
+
<div key="on" style={{ padding: 12, background: "#eef" }}>
|
|
46
|
+
ON panel (state preserved)
|
|
47
|
+
</div>
|
|
48
|
+
</SwitchTransition>
|
|
49
|
+
</div>
|
|
48
50
|
</div>
|
|
49
51
|
);
|
|
50
52
|
}
|
|
53
|
+
|
|
54
|
+
module.exports = Demo;
|
package/docs/static/index.html
CHANGED
|
@@ -2,7 +2,9 @@
|
|
|
2
2
|
<html>
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="utf-8"/>
|
|
5
|
-
<
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
6
|
+
|
|
7
|
+
<title>Lilact Examples</title>
|
|
6
8
|
<script src='./lilact.development.min.js' type="module"></script>
|
|
7
9
|
|
|
8
10
|
<script src="prismjs/prism.min.js"></script>
|
|
@@ -70,7 +72,7 @@ injectGlobal({
|
|
|
70
72
|
overflowWrap: "anywhere"
|
|
71
73
|
},
|
|
72
74
|
p: {padding: "10px"},
|
|
73
|
-
body: { padding: "20px", background: "#
|
|
75
|
+
body: { padding: "20px", background: "#1a2d2c", color: "#e7e7e7" },
|
|
74
76
|
":visited": {color: "#c16480"},
|
|
75
77
|
|
|
76
78
|
});
|
|
@@ -93,10 +95,14 @@ const collapsible = css({
|
|
|
93
95
|
padding: "10px",
|
|
94
96
|
borderRadius: "10px",
|
|
95
97
|
border: "none",
|
|
96
|
-
margin: "4px",
|
|
98
|
+
margin: "3px 4px",
|
|
97
99
|
background:"#ece9ea",
|
|
100
|
+
color: "#222",
|
|
98
101
|
":hover": {
|
|
99
102
|
background:"#ffa7c2"
|
|
103
|
+
},
|
|
104
|
+
":active": {
|
|
105
|
+
background:"#e14e7a",
|
|
100
106
|
}
|
|
101
107
|
});
|
|
102
108
|
|
|
@@ -119,16 +125,23 @@ const pane = css({ flex: "1 1 0",
|
|
|
119
125
|
border: "none",
|
|
120
126
|
borderRadius: "7px",
|
|
121
127
|
margin: "5px",
|
|
122
|
-
|
|
128
|
+
color: "#222",
|
|
129
|
+
":visited": {
|
|
130
|
+
color: "#000"
|
|
131
|
+
},
|
|
123
132
|
":hover": {
|
|
124
|
-
background:"#ffa7c2"
|
|
133
|
+
background:"#ffa7c2",
|
|
134
|
+
color: "#000"
|
|
135
|
+
},
|
|
136
|
+
":active": {
|
|
137
|
+
background:"#e14e7a",
|
|
125
138
|
}
|
|
126
139
|
}
|
|
127
140
|
});
|
|
128
141
|
|
|
129
142
|
const left = css({ float: "left" });
|
|
130
143
|
const right = css({ float: "right" });
|
|
131
|
-
const demobox = css({ background: "#fff3", borderRadius: "
|
|
144
|
+
const demobox = css({ background: "#fff3", borderRadius: "15px", padding: "4px 2px", margin: "4px"});
|
|
132
145
|
|
|
133
146
|
|
|
134
147
|
|
|
@@ -204,6 +217,7 @@ function App()
|
|
|
204
217
|
['modal.jsx', '( useEffect, useRef, useState )'],
|
|
205
218
|
['pane.jsx', '( useRef, useState, ResizablePane )'],
|
|
206
219
|
['css-transition.jsx', '( CSSTransition, useState, useRef )'],
|
|
220
|
+
['switch-transition.jsx', '( SwitchTransition )'],
|
|
207
221
|
['suspense.jsx', '( Suspense, Spinner )'],
|
|
208
222
|
['form-elements.jsx', '()'],
|
|
209
223
|
"Error Report and Handling",
|
|
@@ -217,14 +231,10 @@ function App()
|
|
|
217
231
|
return<>
|
|
218
232
|
<center>
|
|
219
233
|
<img src="icon.png" width="128"/><br/>
|
|
220
|
-
<h1>Lilact
|
|
234
|
+
<h1>Lilact Examples</h1>
|
|
221
235
|
|
|
222
236
|
<p>These scripts are transpiled and run directly in your browser. You have already loaded Lilact completely!</p>
|
|
223
237
|
|
|
224
|
-
<p>These examples are not meant to be pretty.
|
|
225
|
-
|
|
226
|
-
These are bare minimum examples of the React API implemented in Lilact.</p>
|
|
227
|
-
|
|
228
238
|
<p>Note that we are using the development version here to have PropTypes warnings.
|
|
229
239
|
If you switch to production mode PropTypes won't check anything.</p>
|
|
230
240
|
|