@crossed/ui
Version:
A universal & performant styling library for React Native, Next.js & React
240 lines (239 loc) • 9.1 kB
JavaScript
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var List_exports = {};
__export(List_exports, {
createList: () => createList
});
module.exports = __toCommonJS(List_exports);
var import_jsx_runtime = require("react/jsx-runtime");
var import_react_native_reanimated = __toESM(require("react-native-reanimated"));
var import_styled = require("@crossed/styled");
var import_XBox = require("../../layout/XBox");
var import_react_native_gesture_handler = require("react-native-gesture-handler");
var import_Box = require("../../layout/Box");
var import_Button = require("../../buttons/Button");
var import_react = require("react");
var import_styles = require("./styles");
var import_unicons = require("@crossed/unicons");
const styles = (0, import_styled.createStyles)(() => ({
default: { base: { zIndex: 1 } }
}));
const ButtonScroll = ({
children,
style,
...rest
}) => {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_react_native_reanimated.default.View,
{
entering: import_react_native_reanimated.FadeIn,
exiting: import_react_native_reanimated.FadeOut,
style,
...(0, import_styled.composeStyles)(
(0, import_styled.inlineStyle)(() => ({
base: {
position: "absolute",
top: 0,
bottom: 0,
zIndex: 100
}
})),
style
).style(),
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_Button.Button,
{
variant: "tertiary",
style: (0, import_styled.composeStyles)(
(0, import_styled.inlineStyle)(() => ({
base: { paddingHorizontal: 0, height: "100%", width: 30 }
})),
rest.disabled && (0, import_styled.inlineStyle)(() => ({ base: { opacity: 0.5 } }))
),
...rest,
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_Button.Button.Icon,
{
style: (0, import_styled.inlineStyle)(({ colors }) => ({
"base": { color: colors.text.secondary, flexShrink: 0 },
":hover": { color: colors.text.primary }
})),
children
}
)
}
)
}
);
};
const createList = (useTabsContext) => {
const PrevButton = ({
widthLayout
}) => {
const { listTabRef, scroll, variant } = useTabsContext();
const [disabled, setDisabled] = (0, import_react.useState)(false);
(0, import_react_native_reanimated.useAnimatedReaction)(
() => {
return scroll.value;
},
(currentValue, previousValue) => {
if (currentValue !== previousValue) {
setDisabled(currentValue === 0);
}
},
[widthLayout, scroll]
);
const style = variant === "rounded" ? import_styles.linearGradientRounded : import_styles.linearGradientUnderline;
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
ButtonScroll,
{
variant: "tertiary",
disabled,
testID: "toLeft",
"aria-label": "Slide to left",
style: style.prev,
onPress: () => {
var _a;
(_a = listTabRef.current) == null ? void 0 : _a.scrollTo({
x: scroll.value >= widthLayout.value ? scroll.value - widthLayout.value : 0
});
},
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_unicons.ChevronLeft, {})
}
);
};
const NextButton = ({
widthLayout,
widthContent
}) => {
const { listTabRef, scroll, variant } = useTabsContext();
const [disabled, setDisabled] = (0, import_react.useState)(false);
(0, import_react_native_reanimated.useAnimatedReaction)(
() => {
return scroll.value;
},
(currentValue, previousValue) => {
if (currentValue !== previousValue) {
setDisabled(currentValue + widthLayout.value >= widthContent.value);
}
},
[widthLayout, scroll, widthContent]
);
const style = variant === "rounded" ? import_styles.linearGradientRounded : import_styles.linearGradientUnderline;
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
ButtonScroll,
{
variant: "tertiary",
disabled,
style: style.next,
testID: "toRight",
"aria-label": "Slide to right",
onPress: () => {
var _a, _b;
scroll.value <= widthLayout.value ? (_a = listTabRef.current) == null ? void 0 : _a.scrollTo({
x: scroll.value + widthLayout.value
}) : (_b = listTabRef.current) == null ? void 0 : _b.scrollToEnd();
},
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_unicons.ChevronRight, {})
}
);
};
return ({ children, ...props }) => {
const { listTabRef, scroll, shouldShow, setShow, widthLayout, size } = useTabsContext();
const widthContent = (0, import_react_native_reanimated.useSharedValue)(0);
(0, import_react_native_reanimated.useAnimatedReaction)(
() => {
return widthLayout.value;
},
(currentValue, previousValue) => {
if (currentValue !== previousValue && !import_styled.isTouchable) {
setShow(currentValue < widthContent.value);
}
},
[widthLayout, widthContent, setShow]
);
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
import_XBox.XBox,
{
justifyContent: "between",
style: (0, import_styled.composeStyles)(styles.default, import_styles.heightStyles[size]),
children: [
shouldShow && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PrevButton, { widthLayout }),
shouldShow && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NextButton, { widthLayout, widthContent }),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
import_react_native_gesture_handler.ScrollView,
{
space: "xs",
role: "tablist",
ref: listTabRef,
horizontal: true,
showsHorizontalScrollIndicator: false,
scrollEventThrottle: 16,
onScroll: ({ nativeEvent }) => {
scroll.value = nativeEvent.contentOffset.x;
},
onContentSizeChange: (width) => {
widthContent.value = width - (shouldShow ? 60 : 0);
},
onLayout: ({ nativeEvent: { layout } }) => {
widthLayout.value = layout.width;
},
stickyHeaderIndices: shouldShow ? [0] : [],
...props,
contentContainerStyle: (0, import_styled.composeStyles)(
(0, import_styled.inlineStyle)(() => ({ base: { alignItems: "center" } }))
).rnw().style,
...(0, import_styled.composeStyles)(
shouldShow && (0, import_styled.inlineStyle)(() => ({
base: {
position: "absolute",
top: 0,
bottom: 0,
left: 0,
right: 0,
zIndex: 30
}
}))
).rnw(),
children: [
shouldShow && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Box.Box, { style: (0, import_styled.inlineStyle)(() => ({ base: { width: 30 } })) }),
children,
shouldShow && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Box.Box, { style: (0, import_styled.inlineStyle)(() => ({ base: { width: 30 } })) })
]
}
)
]
}
);
};
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
createList
});
//# sourceMappingURL=List.js.map