@ansible/ansible-ui-framework 2.4.619 → 2.4.620
Sign up to get free protection for your applications and to get access to all the features.
- package/framework/components/Scrollable.d.ts +2 -3
- package/index.js +15 -68
- package/index.umd.cjs +7 -7
- package/package.json +1 -1
- package/style.css +1 -1
@@ -1,8 +1,7 @@
|
|
1
|
-
import {
|
1
|
+
import { ReactNode } from 'react';
|
2
|
+
import './Scrollable.css';
|
2
3
|
export declare function Scrollable(props: {
|
3
4
|
children?: ReactNode;
|
4
5
|
borderTop?: boolean;
|
5
6
|
borderBottom?: boolean;
|
6
|
-
className?: string;
|
7
|
-
style?: CSSProperties;
|
8
7
|
}): import("react/jsx-runtime").JSX.Element;
|
package/index.js
CHANGED
@@ -12599,75 +12599,22 @@ function Eg(e) {
|
|
12599
12599
|
return Oe(() => i(), [t, i]), Wl(t, () => i()), /* @__PURE__ */ v.jsx(NL, { ref: t, className: e.className, style: { height: e.height }, children: /* @__PURE__ */ v.jsx(FL, { children: e.children(n) }) });
|
12600
12600
|
}
|
12601
12601
|
function Ga(e) {
|
12602
|
-
const t = it(null), [n, r] = pe(
|
12603
|
-
if (t.current)
|
12604
|
-
|
12605
|
-
|
12606
|
-
|
12607
|
-
|
12602
|
+
const t = it(null), [n, r] = pe(!1), [i, a] = pe(!1), o = me(() => {
|
12603
|
+
if (!t.current)
|
12604
|
+
return;
|
12605
|
+
r(t.current.scrollTop > 0);
|
12606
|
+
const c = t.current.scrollHeight - t.current.scrollTop - t.current.clientHeight - 1;
|
12607
|
+
a(c > 0.1);
|
12608
12608
|
}, []);
|
12609
|
-
Oe(() => o(), [o, e.children]), Wl(t, () =>
|
12610
|
-
|
12611
|
-
|
12612
|
-
const
|
12613
|
-
return /* @__PURE__ */ v.jsxs(
|
12614
|
-
"div",
|
12615
|
-
{
|
12616
|
-
|
12617
|
-
|
12618
|
-
...e.style,
|
12619
|
-
display: "flex",
|
12620
|
-
flexDirection: "column",
|
12621
|
-
flexGrow: 1,
|
12622
|
-
overflowY: "hidden",
|
12623
|
-
position: "relative"
|
12624
|
-
},
|
12625
|
-
children: [
|
12626
|
-
/* @__PURE__ */ v.jsx(
|
12627
|
-
"div",
|
12628
|
-
{
|
12629
|
-
ref: t,
|
12630
|
-
style: {
|
12631
|
-
display: "flex",
|
12632
|
-
flexDirection: "column",
|
12633
|
-
flexGrow: 1,
|
12634
|
-
overflowY: "auto",
|
12635
|
-
borderTop: c,
|
12636
|
-
borderBottom: u
|
12637
|
-
},
|
12638
|
-
onScroll: o,
|
12639
|
-
children: e.children
|
12640
|
-
}
|
12641
|
-
),
|
12642
|
-
/* istanbul ignore next */
|
12643
|
-
l > 0 && /* @__PURE__ */ v.jsx(
|
12644
|
-
"div",
|
12645
|
-
{
|
12646
|
-
style: {
|
12647
|
-
position: "absolute",
|
12648
|
-
top: 0,
|
12649
|
-
height: "10px",
|
12650
|
-
width: "100%",
|
12651
|
-
background: `linear-gradient(rgba(0,0,0,${l}), rgba(0,0,0,0))`
|
12652
|
-
}
|
12653
|
-
}
|
12654
|
-
),
|
12655
|
-
/* istanbul ignore next */
|
12656
|
-
s > 0 && /* @__PURE__ */ v.jsx(
|
12657
|
-
"div",
|
12658
|
-
{
|
12659
|
-
style: {
|
12660
|
-
position: "absolute",
|
12661
|
-
bottom: 0,
|
12662
|
-
height: "10px",
|
12663
|
-
width: "100%",
|
12664
|
-
background: `linear-gradient(rgba(0,0,0,0), rgba(0,0,0,${s}))`
|
12665
|
-
}
|
12666
|
-
}
|
12667
|
-
)
|
12668
|
-
]
|
12669
|
-
}
|
12670
|
-
);
|
12609
|
+
Oe(() => o(), [o, e.children]), Wl(t, () => o());
|
12610
|
+
const l = ["scrollable-inner"];
|
12611
|
+
e.borderTop && l.push("border-top"), e.borderBottom && l.push("border-bottom");
|
12612
|
+
const s = l.join(" ");
|
12613
|
+
return /* @__PURE__ */ v.jsxs("div", { className: "scrollable-outer", children: [
|
12614
|
+
/* @__PURE__ */ v.jsx("div", { className: s, ref: t, onScroll: o, children: e.children }),
|
12615
|
+
n && /* @__PURE__ */ v.jsx("div", { className: "scrollable-shadow-top" }),
|
12616
|
+
i && /* @__PURE__ */ v.jsx("div", { className: "scrollable-shadow-bottom" })
|
12617
|
+
] });
|
12671
12618
|
}
|
12672
12619
|
const sA = pi({ columns: 1 }), l5 = 1662 / 24;
|
12673
12620
|
function eEe(e) {
|