lilact 0.16.1 → 0.16.2
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/bin/copy-demo.js +1 -1
- package/dist/lilact.development.js +111 -112
- package/dist/lilact.development.js.map +3 -3
- package/dist/lilact.development.min.js +19 -19
- package/dist/lilact.development.min.js.map +3 -3
- package/dist/lilact.production.min.js +19 -19
- package/docs/functions/accessories.DragHandle.html +2 -2
- package/docs/functions/timers.timeoutPromise.html +1 -1
- package/docs/static/demos/pane.jsx +2 -1
- package/docs/static/index.html +1 -1
- package/docs/static/lilact.development.js +111 -112
- package/docs/static/lilact.development.js.map +3 -3
- package/docs/static/lilact.development.min.js +19 -19
- package/docs/static/lilact.development.min.js.map +3 -3
- package/docs/static/lilact.production.min.js +19 -19
- package/docs/variables/accessories.SplitPane.html +2 -2
- package/{root → examples}/demos/pane.jsx +2 -1
- package/{root → examples}/index.html +1 -1
- package/{root → examples}/lilact.development.js +111 -112
- package/{root → examples}/lilact.development.js.map +3 -3
- package/examples/lilact.development.min.js +107 -0
- package/{root → examples}/lilact.development.min.js.map +3 -3
- package/examples/lilact.production.min.js +106 -0
- package/package.json +3 -3
- package/scripts/build.mjs +29 -0
- package/scripts/copy-dist-to-examples.mjs +42 -0
- package/scripts/esbuild-preprocessor-plugin.cjs +29 -4
- package/scripts/preprocess.mjs +29 -1
- package/src/accessories.jsx +152 -161
- package/typedoc.json +1 -1
- package/root/lilact.development.min.js +0 -107
- package/root/lilact.production.min.js +0 -106
- package/scripts/copy-dist-to-root.mjs +0 -13
- /package/{root → examples}/demos/actionstate.jsx +0 -0
- /package/{root → examples}/demos/capture.jsx +0 -0
- /package/{root → examples}/demos/context.jsx +0 -0
- /package/{root → examples}/demos/css-transition.jsx +0 -0
- /package/{root → examples}/demos/error-boundary.jsx +0 -0
- /package/{root → examples}/demos/error-callback.jsx +0 -0
- /package/{root → examples}/demos/error-component-stack.jsx +0 -0
- /package/{root → examples}/demos/error-init.jsx +0 -0
- /package/{root → examples}/demos/error-parser.jsx +0 -0
- /package/{root → examples}/demos/form-elements.jsx +0 -0
- /package/{root → examples}/demos/forwardref.jsx +0 -0
- /package/{root → examples}/demos/lazy.jsx +0 -0
- /package/{root → examples}/demos/modal.jsx +0 -0
- /package/{root → examples}/demos/proptypes.jsx +0 -0
- /package/{root → examples}/demos/reducer.jsx +0 -0
- /package/{root → examples}/demos/redux.jsx +0 -0
- /package/{root → examples}/demos/router.jsx +0 -0
- /package/{root → examples}/demos/stopwatch.jsx +0 -0
- /package/{root → examples}/demos/suspense.jsx +0 -0
- /package/{root → examples}/demos/switch-transition.jsx +0 -0
- /package/{root → examples}/demos/transition.jsx +0 -0
- /package/{root → examples}/demos/usedefered.jsx +0 -0
- /package/{root → examples}/demos/usetransition.jsx +0 -0
- /package/{root → examples}/icon.png +0 -0
- /package/{root → examples}/prismjs/LICENSE.md +0 -0
- /package/{root → examples}/prismjs/prism-jsx.min.js +0 -0
- /package/{root → examples}/prismjs/prism.min.css +0 -0
- /package/{root → examples}/prismjs/prism.min.js +0 -0
|
@@ -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>DragHandle | 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/accessories.html">accessories</a></li><li><a href="" aria-current="page">DragHandle</a></li></ul><h1>Function DragHandle</h1></div><section class="tsd-panel"><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="draghandle"><span class="tsd-kind-call-signature">DragHandle</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">children</span><span class="tsd-signature-symbol">?:</span> <
|
|
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>DragHandle | 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/accessories.html">accessories</a></li><li><a href="" aria-current="page">DragHandle</a></li></ul><h1>Function DragHandle</h1></div><section class="tsd-panel"><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="draghandle"><span class="tsd-kind-call-signature">DragHandle</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">children</span><span class="tsd-signature-symbol">?:</span> <a href="../classes/components.Component.html" class="tsd-signature-type tsd-kind-class">Component</a><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">className</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">data</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">onDelta</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">x</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">y</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">data</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> <span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onEnd</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">event</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">"up"</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">"cancel"</span><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">data</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> <span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onStart</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">data</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> <span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">style</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">object</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="#draghandle" 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>DragHandle - helper component to wire up drag interactions.</p>
|
|
2
2
|
<p>This component does not implement dragging/movement itself. Instead, it
|
|
3
3
|
listens for drag gesture events and delegates them to the provided callbacks.</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">children</span><span class="tsd-signature-symbol">?:</span> <
|
|
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">children</span><span class="tsd-signature-symbol">?:</span> <a href="../classes/components.Component.html" class="tsd-signature-type tsd-kind-class">Component</a><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">className</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">data</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">onDelta</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">x</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">y</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">data</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> <span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onEnd</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">event</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">"up"</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">"cancel"</span><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">data</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> <span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">onStart</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">data</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> <span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">style</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">object</span><span class="tsd-signature-symbol">;</span><br/><span class="tsd-signature-symbol">}</span></span><ul class="tsd-parameters"><li class="tsd-parameter"><h5><code class="tsd-tag">Optional</code><span class="tsd-kind-property">children</span><span class="tsd-signature-symbol">?: </span><a href="../classes/components.Component.html" class="tsd-signature-type tsd-kind-class">Component</a></h5><div class="tsd-comment tsd-typography"><p>Content rendered inside the handle.</p>
|
|
5
5
|
</div></li><li class="tsd-parameter"><h5><code class="tsd-tag">Optional</code><span class="tsd-kind-property">className</span><span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span></h5><div class="tsd-comment tsd-typography"><p>Optional CSS class applied to the wrapper element.
|
|
6
6
|
A <code>.dragging</code> class will be also applied when dragging.</p>
|
|
7
7
|
</div></li><li class="tsd-parameter"><h5><code class="tsd-tag">Optional</code><span class="tsd-kind-property">data</span><span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">any</span></h5><div class="tsd-comment tsd-typography"><p>Arbitrary user data passed through callbacks.</p>
|
|
@@ -69,7 +69,7 @@ If provided, the component uses this value instead of internal state.</p>
|
|
|
69
69
|
</div><div class="tsd-tag-param"><h4 class="tsd-anchor-link" id="param-leftpanestyle">Param: leftPaneStyle<a href="#param-leftpanestyle" 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></h4><p>Optional styles applied to the left pane (or top pane in vertical mode).</p>
|
|
70
70
|
</div><div class="tsd-tag-param"><h4 class="tsd-anchor-link" id="param-rightpanestyle">Param: rightPaneStyle<a href="#param-rightpanestyle" 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></h4><p>Optional styles applied to the right pane (or bottom pane in vertical mode).</p>
|
|
71
71
|
</div><div class="tsd-tag-param"><h4 class="tsd-anchor-link" id="param-splitterstyle">Param: splitterStyle<a href="#param-splitterstyle" 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></h4><p>Optional styles applied to the splitter element.</p>
|
|
72
|
-
</div><div class="tsd-tag-param"><h4 class="tsd-anchor-link" id="param-children">Param: children<a href="#param-children" 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></h4><p>
|
|
72
|
+
</div><div class="tsd-tag-param"><h4 class="tsd-anchor-link" id="param-children">Param: children<a href="#param-children" 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></h4><p>Children to be rendered into the two pane containers.</p>
|
|
73
73
|
</div><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example">Example<a href="#example" 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></h4><pre><code class="tsx"><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">ref</span><span class="hl-1"> = </span><span class="hl-0">useRef</span><span class="hl-1"><</span><span class="hl-6">SplitPaneHandle</span><span class="hl-1">>(</span><span class="hl-3">null</span><span class="hl-1">);</span><br/><br/><span class="hl-7"><</span><span class="hl-6">SplitPane</span><br/><span class="hl-1"> </span><span class="hl-10">ref</span><span class="hl-1">=</span><span class="hl-3">{</span><span class="hl-5">ref</span><span class="hl-3">}</span><br/><span class="hl-1"> </span><span class="hl-10">mode</span><span class="hl-1">=</span><span class="hl-2">"horizontal"</span><br/><span class="hl-1"> </span><span class="hl-10">defaultPosition</span><span class="hl-1">=</span><span class="hl-3">{</span><span class="hl-13">0.5</span><span class="hl-3">}</span><br/><span class="hl-1"> </span><span class="hl-10">min</span><span class="hl-1">=</span><span class="hl-3">{</span><span class="hl-13">0.1</span><span class="hl-3">}</span><br/><span class="hl-1"> </span><span class="hl-10">max</span><span class="hl-1">=</span><span class="hl-3">{</span><span class="hl-13">0.9</span><span class="hl-3">}</span><br/><span class="hl-1"> </span><span class="hl-10">onSizeChange</span><span class="hl-1">=</span><span class="hl-3">{</span><span class="hl-9">(</span><span class="hl-5">pos</span><span class="hl-9">) </span><span class="hl-3">=></span><span class="hl-9"> </span><span class="hl-5">console</span><span class="hl-9">.</span><span class="hl-0">log</span><span class="hl-9">(</span><span class="hl-5">pos</span><span class="hl-9">)</span><span class="hl-3">}</span><br/><span class="hl-7">></span><br/><span class="hl-1"> </span><span class="hl-7"><</span><span class="hl-8">div</span><span class="hl-1"> </span><span class="hl-7">/></span><span class="hl-1"> </span><span class="hl-7"><</span><span class="hl-8">div</span><span class="hl-1"> </span><span class="hl-7">/></span><br/><span class="hl-7"></</span><span class="hl-6">SplitPane</span><span class="hl-7">></span>
|
|
74
74
|
</code><button type="button">Copy</button></pre>
|
|
75
75
|
|
|
@@ -11,8 +11,9 @@ module.exports = function Demo() {
|
|
|
11
11
|
Toggle mode
|
|
12
12
|
</button>
|
|
13
13
|
<button onClick={() => ref.current?.setPosition(0.5)}>Center</button>
|
|
14
|
+
<span>Position:{" "}{position.toFixed(2)}</span>
|
|
14
15
|
|
|
15
|
-
<div style={{ height: "calc(100% -
|
|
16
|
+
<div style={{ height: "calc(100% - 4em)", width: "calc(100% - 1rem)", margin: "10px auto 0", border: "1px solid"}}>
|
|
16
17
|
<SplitPane
|
|
17
18
|
ref={ref}
|
|
18
19
|
mode={mode}
|
package/docs/static/index.html
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
6
6
|
|
|
7
7
|
<title>Lilact Examples</title>
|
|
8
|
-
<script src='./lilact.development.
|
|
8
|
+
<script src='./lilact.development.js' type="module"></script>
|
|
9
9
|
|
|
10
10
|
<script src="prismjs/prism.min.js"></script>
|
|
11
11
|
<script src="prismjs/prism-jsx.min.js"></script>
|
|
@@ -4697,14 +4697,9 @@ function DragHandle({
|
|
|
4697
4697
|
}, [endDrag]);
|
|
4698
4698
|
return createComponent("div", { "role": "button", "tabIndex": 0, "style": { ...style, touchAction: "none" }, "className": cx2(className, isDragging ? "dragging" : ""), "onPointerDown": onPointerDown, "onPointerMove": onPointerMove, "onPointerUp": onPointerUp, "onPointerCancel": onPointerCancel }, children);
|
|
4699
4699
|
}
|
|
4700
|
-
var clamp = (n, min, max) => {
|
|
4701
|
-
if (!Number.isFinite(n)) return n;
|
|
4702
|
-
return Math.min(max, Math.max(min, n));
|
|
4703
|
-
};
|
|
4704
4700
|
var SplitPane = forwardRef(function SplitPane2({
|
|
4705
4701
|
mode = "horizontal",
|
|
4706
4702
|
position: position2,
|
|
4707
|
-
// controlled: number | undefined/null
|
|
4708
4703
|
defaultPosition = 0.5,
|
|
4709
4704
|
min = 0.1,
|
|
4710
4705
|
max = 0.9,
|
|
@@ -4712,135 +4707,139 @@ var SplitPane = forwardRef(function SplitPane2({
|
|
|
4712
4707
|
onSizeChange,
|
|
4713
4708
|
style,
|
|
4714
4709
|
className,
|
|
4715
|
-
|
|
4716
|
-
|
|
4710
|
+
firstPaneStyle,
|
|
4711
|
+
secondPaneStyle,
|
|
4717
4712
|
splitterStyle,
|
|
4718
4713
|
children
|
|
4719
4714
|
}, ref) {
|
|
4720
|
-
|
|
4721
|
-
const
|
|
4722
|
-
const
|
|
4723
|
-
const
|
|
4724
|
-
|
|
4725
|
-
|
|
4726
|
-
|
|
4727
|
-
|
|
4728
|
-
() => clamp(
|
|
4729
|
-
position2 != null ? position2 : defaultPosition,
|
|
4730
|
-
min,
|
|
4731
|
-
max
|
|
4732
|
-
)
|
|
4733
|
-
);
|
|
4715
|
+
const initialMode = mode === "vertical" ? "vertical" : "horizontal";
|
|
4716
|
+
const [internalMode, setInternalMode] = useState(initialMode);
|
|
4717
|
+
const [internalPos, setInternalPos] = useState(clamp(defaultPosition, min, max));
|
|
4718
|
+
const posResolved = position2 == null ? internalPos : clamp(position2, min, max);
|
|
4719
|
+
useEffect(() => {
|
|
4720
|
+
if (position2 == null) return;
|
|
4721
|
+
setInternalPos(clamp(position2, min, max));
|
|
4722
|
+
}, [position2, min, max]);
|
|
4734
4723
|
useEffect(() => {
|
|
4735
|
-
|
|
4724
|
+
setInternalMode(mode === "vertical" ? "vertical" : "horizontal");
|
|
4736
4725
|
}, [mode]);
|
|
4737
|
-
useLayoutEffect(() => {
|
|
4738
|
-
if (isControlled) return;
|
|
4739
|
-
setPosUncontrolled((p) => clamp(p, min, max));
|
|
4740
|
-
}, [min, max, isControlled]);
|
|
4741
|
-
const posResolved = isControlled ? clamp(position2, min, max) : posUncontrolled;
|
|
4742
4726
|
const setPosition = (next2) => {
|
|
4743
4727
|
const clamped = clamp(next2, min, max);
|
|
4744
|
-
if (
|
|
4728
|
+
if (position2 == null) setInternalPos(clamped);
|
|
4745
4729
|
onSizeChange == null ? void 0 : onSizeChange(clamped);
|
|
4746
4730
|
};
|
|
4747
|
-
|
|
4748
|
-
|
|
4749
|
-
|
|
4731
|
+
useImperativeHandle(ref, () => ({
|
|
4732
|
+
setPosition,
|
|
4733
|
+
setMode: (nextMode) => setInternalMode(nextMode === "vertical" ? "vertical" : "horizontal"),
|
|
4734
|
+
getPosition: () => posResolved,
|
|
4735
|
+
getMode: () => internalMode
|
|
4736
|
+
}));
|
|
4737
|
+
const containerRef = useRef(null);
|
|
4738
|
+
const sizeRef = useRef({ w: 0, h: 0 });
|
|
4739
|
+
useLayoutEffect(() => {
|
|
4750
4740
|
const el = containerRef.current;
|
|
4751
4741
|
if (!el) return;
|
|
4742
|
+
const ro = new ResizeObserver(() => {
|
|
4743
|
+
const rect2 = el.getBoundingClientRect();
|
|
4744
|
+
sizeRef.current = { w: rect2.width, h: rect2.height };
|
|
4745
|
+
});
|
|
4746
|
+
ro.observe(el);
|
|
4752
4747
|
const rect = el.getBoundingClientRect();
|
|
4748
|
+
sizeRef.current = { w: rect.width, h: rect.height };
|
|
4749
|
+
return () => ro.disconnect();
|
|
4750
|
+
}, []);
|
|
4751
|
+
const startPosRef = useRef(posResolved);
|
|
4752
|
+
const [dragging, setDragging] = useState(false);
|
|
4753
|
+
const handleStart = () => {
|
|
4754
|
+
setDragging(true);
|
|
4755
|
+
startPosRef.current = posResolved;
|
|
4756
|
+
};
|
|
4757
|
+
const handleDelta = (x, y, _data) => {
|
|
4758
|
+
const { w, h } = sizeRef.current;
|
|
4753
4759
|
if (internalMode === "horizontal") {
|
|
4754
|
-
|
|
4755
|
-
if (!Number.isFinite(usable) || usable <= 0) return;
|
|
4756
|
-
const raw = (clientX - rect.left) / usable;
|
|
4757
|
-
if (!Number.isFinite(raw)) return;
|
|
4758
|
-
setPosition(raw);
|
|
4760
|
+
setPosition(startPosRef.current + x / (w || 1));
|
|
4759
4761
|
} else {
|
|
4760
|
-
|
|
4761
|
-
if (!Number.isFinite(usable) || usable <= 0) return;
|
|
4762
|
-
const raw = (clientY - rect.top) / usable;
|
|
4763
|
-
if (!Number.isFinite(raw)) return;
|
|
4764
|
-
setPosition(raw);
|
|
4762
|
+
setPosition(startPosRef.current + y / (h || 1));
|
|
4765
4763
|
}
|
|
4766
4764
|
};
|
|
4767
|
-
|
|
4768
|
-
|
|
4769
|
-
|
|
4770
|
-
|
|
4771
|
-
|
|
4772
|
-
|
|
4773
|
-
|
|
4774
|
-
|
|
4775
|
-
|
|
4776
|
-
|
|
4777
|
-
|
|
4778
|
-
|
|
4779
|
-
|
|
4780
|
-
|
|
4781
|
-
|
|
4782
|
-
|
|
4783
|
-
|
|
4784
|
-
|
|
4785
|
-
|
|
4786
|
-
|
|
4787
|
-
|
|
4788
|
-
const onPointerDown = (e) => {
|
|
4789
|
-
var _a2, _b2;
|
|
4790
|
-
if (e.button != null && e.button !== 0) return;
|
|
4791
|
-
e.preventDefault();
|
|
4792
|
-
draggingRef.current = true;
|
|
4793
|
-
pointerIdRef.current = e.pointerId;
|
|
4794
|
-
try {
|
|
4795
|
-
(_b2 = (_a2 = e.currentTarget).setPointerCapture) == null ? void 0 : _b2.call(_a2, e.pointerId);
|
|
4796
|
-
} catch (e2) {
|
|
4797
|
-
}
|
|
4798
|
-
updateFromClient(e.clientX, e.clientY);
|
|
4765
|
+
const handleEnd = () => setDragging(false);
|
|
4766
|
+
const arr = Children.toArray(children);
|
|
4767
|
+
const firstChild = arr[0];
|
|
4768
|
+
const secondChild = arr[1];
|
|
4769
|
+
const p = posResolved;
|
|
4770
|
+
const pane1StyleAbs = internalMode === "horizontal" ? {
|
|
4771
|
+
position: "absolute",
|
|
4772
|
+
top: 0,
|
|
4773
|
+
bottom: 0,
|
|
4774
|
+
left: 0,
|
|
4775
|
+
width: `calc(${p} * (100% - ${splitterSize}px))`,
|
|
4776
|
+
overflow: "auto",
|
|
4777
|
+
...firstPaneStyle || {}
|
|
4778
|
+
} : {
|
|
4779
|
+
position: "absolute",
|
|
4780
|
+
left: 0,
|
|
4781
|
+
right: 0,
|
|
4782
|
+
top: 0,
|
|
4783
|
+
height: `calc(${p} * (100% - ${splitterSize}px))`,
|
|
4784
|
+
overflow: "auto",
|
|
4785
|
+
...firstPaneStyle || {}
|
|
4799
4786
|
};
|
|
4800
|
-
const
|
|
4801
|
-
|
|
4802
|
-
|
|
4803
|
-
|
|
4804
|
-
|
|
4805
|
-
|
|
4806
|
-
|
|
4807
|
-
|
|
4808
|
-
|
|
4809
|
-
|
|
4810
|
-
|
|
4811
|
-
|
|
4812
|
-
|
|
4813
|
-
|
|
4787
|
+
const pane2StyleAbs = internalMode === "horizontal" ? {
|
|
4788
|
+
position: "absolute",
|
|
4789
|
+
top: 0,
|
|
4790
|
+
bottom: 0,
|
|
4791
|
+
left: `calc(${p} * (100% - ${splitterSize}px) + ${splitterSize}px)`,
|
|
4792
|
+
right: 0,
|
|
4793
|
+
overflow: "auto",
|
|
4794
|
+
...secondPaneStyle || {}
|
|
4795
|
+
} : {
|
|
4796
|
+
position: "absolute",
|
|
4797
|
+
left: 0,
|
|
4798
|
+
right: 0,
|
|
4799
|
+
top: `calc(${p} * (100% - ${splitterSize}px) + ${splitterSize}px)`,
|
|
4800
|
+
bottom: 0,
|
|
4801
|
+
overflow: "auto",
|
|
4802
|
+
...secondPaneStyle || {}
|
|
4814
4803
|
};
|
|
4815
|
-
const
|
|
4816
|
-
|
|
4817
|
-
|
|
4818
|
-
|
|
4819
|
-
}
|
|
4820
|
-
const
|
|
4821
|
-
|
|
4822
|
-
|
|
4804
|
+
const splitterBase = {
|
|
4805
|
+
background: "rgba(0,0,0,0.08)",
|
|
4806
|
+
boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.15)",
|
|
4807
|
+
zIndex: 10
|
|
4808
|
+
};
|
|
4809
|
+
const splitterAbsStyle = internalMode === "horizontal" ? {
|
|
4810
|
+
position: "absolute",
|
|
4811
|
+
top: 0,
|
|
4812
|
+
bottom: 0,
|
|
4813
|
+
left: `calc(${p} * (100% - ${splitterSize}px))`,
|
|
4814
|
+
width: splitterSize,
|
|
4823
4815
|
height: "100%",
|
|
4824
|
-
|
|
4816
|
+
cursor: dragging ? "col-resize" : "col-resize",
|
|
4825
4817
|
touchAction: "none",
|
|
4826
|
-
|
|
4827
|
-
|
|
4818
|
+
pointerEvents: "auto",
|
|
4819
|
+
...splitterBase,
|
|
4820
|
+
...splitterStyle || {}
|
|
4821
|
+
} : {
|
|
4822
|
+
position: "absolute",
|
|
4823
|
+
left: 0,
|
|
4824
|
+
right: 0,
|
|
4825
|
+
top: `calc(${p} * (100% - ${splitterSize}px))`,
|
|
4826
|
+
height: splitterSize,
|
|
4827
|
+
width: "100%",
|
|
4828
|
+
cursor: dragging ? "row-resize" : "row-resize",
|
|
4829
|
+
touchAction: "none",
|
|
4830
|
+
pointerEvents: "auto",
|
|
4831
|
+
...splitterBase,
|
|
4832
|
+
...splitterStyle || {}
|
|
4828
4833
|
};
|
|
4829
|
-
|
|
4830
|
-
|
|
4831
|
-
|
|
4832
|
-
|
|
4833
|
-
|
|
4834
|
-
|
|
4835
|
-
|
|
4836
|
-
getPosition: () => posResolved,
|
|
4837
|
-
getMode: () => internalMode
|
|
4838
|
-
}));
|
|
4839
|
-
return createComponent("div", { "ref": containerRef, "className": className, "style": rootStyle }, createComponent("div", { "style": leftPaneComputed }, leftChild), createComponent("div", { "role": "separator", "aria-orientation": internalMode === "horizontal" ? "vertical" : "horizontal", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": posResolved, "tabIndex": 0, "onPointerDown": onPointerDown, "onPointerCancel": () => {
|
|
4840
|
-
draggingRef.current = false;
|
|
4841
|
-
pointerIdRef.current = null;
|
|
4842
|
-
}, "onKeyDown": onKeyDown, "style": splitterComputed }, createComponent("div", { "style": dividerVisualStyle })), createComponent("div", { "style": rightPaneComputed }, rightChild));
|
|
4834
|
+
return createComponent("div", { "ref": containerRef, "className": className, "style": {
|
|
4835
|
+
position: "relative",
|
|
4836
|
+
width: "100%",
|
|
4837
|
+
height: "100%",
|
|
4838
|
+
overflow: "hidden",
|
|
4839
|
+
...style || {}
|
|
4840
|
+
} }, createComponent("div", { "style": pane1StyleAbs }, firstChild), createComponent("div", { "style": pane2StyleAbs }, secondChild), createComponent(DragHandle, { "onStart": handleStart, "onDelta": handleDelta, "onEnd": handleEnd, "style": splitterAbsStyle }));
|
|
4843
4841
|
});
|
|
4842
|
+
var clamp = (v, min, max) => Math.max(min, Math.min(max, v));
|
|
4844
4843
|
|
|
4845
4844
|
// .tmp/src/vlq.js
|
|
4846
4845
|
var char_to_integer = {};
|