@ovotech/element-native 5.6.0 → 5.7.0

package/dist/components/Rail/Rail.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { IconNameExtended } from '../../providers';
+type Props = {
+    children: React.ReactNode;
+    indicator?: boolean;
+    heading?: string;
+    subHeading?: string;
+    icon?: IconNameExtended;
+    maxChildren?: number;
+};
+export declare const Rail: ({ children, indicator, icon, heading, subHeading, maxChildren, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Rail/Rail.js

@@ -0,0 +1,58 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Rail = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const Icon_1 = require("../Icon");
+const P_1 = require("../P");
+const Strong_1 = require("../Strong");
+const RailIndicator_1 = require("./RailIndicator");
+const styles_1 = require("./styles");
+const useRailPaging_1 = require("./useRailPaging");
+const DEFAULT_MAX_CHILDREN = 6;
+const Rail = ({ children, indicator = true, icon, heading, subHeading, maxChildren = DEFAULT_MAX_CHILDREN, }) => {
+    const allItems = (0, react_1.useMemo)(() => react_1.default.Children.toArray(children), [children]);
+    const items = (0, react_1.useMemo)(() => allItems.slice(0, Math.max(0, maxChildren)), [allItems, maxChildren]);
+    const paging = (0, useRailPaging_1.useRailPaging)({ itemCount: items.length });
+    const hasIndicator = indicator && paging.isScrollable;
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsxs)(styles_1.Header, { children: [icon && ((0, jsx_runtime_1.jsx)(styles_1.IconContainer, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: icon, size: 24 }) })), (heading || subHeading) && ((0, jsx_runtime_1.jsxs)(styles_1.HeadingText, { children: [heading && ((0, jsx_runtime_1.jsx)(P_1.P, { size: "lg", children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: heading }) })), subHeading && (0, jsx_runtime_1.jsx)(P_1.P, { size: "sm", children: subHeading })] }))] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { onLayout: e => paging.onContainerLayout(e.nativeEvent.layout.width), children: [(0, jsx_runtime_1.jsx)(styles_1.StyledRail, { horizontal: true, hasIndicator: hasIndicator, showsHorizontalScrollIndicator: false, contentContainerStyle: { flexDirection: 'row' }, decelerationRate: "fast", snapToOffsets: paging.snapOffsets, snapToAlignment: "start", disableIntervalMomentum: true, scrollEventThrottle: 16, onMomentumScrollEnd: (e) => paging.onMomentumEnd(e.nativeEvent.contentOffset.x), onContentSizeChange: w => paging.onContentSizeChange(w), children: items.map((child, index) => ((0, jsx_runtime_1.jsx)(styles_1.RailItemWrapper, { onLayout: (e) => {
+                                if (index !== 0)
+                                    return;
+                                paging.onItemLayout(e.nativeEvent.layout.width);
+                            }, children: child }, `Rail-item-${index}`))) }), hasIndicator && ((0, jsx_runtime_1.jsx)(RailIndicator_1.RailIndicator, { dotCount: items.length, activeStartIndex: paging.activeStartIndex, visibleCount: paging.visibleCount }))] })] }));
+};
+exports.Rail = Rail;

package/dist/components/Rail/RailIndicator.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    dotCount: number;
+    activeStartIndex: number;
+    visibleCount: number;
+};
+export declare const RailIndicator: ({ dotCount, activeStartIndex, visibleCount, }: Props) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/Rail/RailIndicator.js

@@ -0,0 +1,81 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RailIndicator = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+const styled_native_1 = require("../../styled.native");
+const styles_1 = require("./styles");
+const RailIndicator = ({ dotCount, activeStartIndex, visibleCount, }) => {
+    const theme = (0, styled_native_1.useTheme)();
+    const DOT = theme.space[200];
+    const GAP = theme.space[200];
+    const PADDING = theme.space[350];
+    const [containerWidth, setContainerWidth] = (0, react_1.useState)(0);
+    const onContainerLayout = (0, react_1.useCallback)((e) => {
+        var _a, _b, _c;
+        const w = (_c = (_b = (_a = e === null || e === void 0 ? void 0 : e.nativeEvent) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : 0;
+        if (w > 0)
+            setContainerWidth(w);
+    }, []);
+    if (dotCount <= 0)
+        return null;
+    const start = Math.min(Math.max(0, activeStartIndex), dotCount - 1);
+    const visible = Math.max(1, Math.min(visibleCount, dotCount - start));
+    const rowWidth = (0, react_1.useMemo)(() => {
+        return dotCount * DOT + (dotCount - 1) * GAP;
+    }, [dotCount, DOT, GAP]);
+    const step = DOT + GAP;
+    const animatedLeft = (0, react_native_reanimated_1.useDerivedValue)(() => {
+        if (containerWidth <= 0)
+            return 0;
+        const innerWidth = Math.max(0, containerWidth - 2 * PADDING);
+        const rowLeft = PADDING + Math.max(0, (innerWidth - rowWidth) / 2);
+        return (0, react_native_reanimated_1.withTiming)(rowLeft + start * step, { duration: 150 });
+    }, [containerWidth, PADDING, rowWidth, start, step]);
+    const animatedWidth = (0, react_native_reanimated_1.useDerivedValue)(() => {
+        const w = visible * DOT + Math.max(0, visible - 1) * GAP;
+        return (0, react_native_reanimated_1.withTiming)(w, { duration: 150 });
+    }, [visible, DOT, GAP]);
+    const pillStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        position: 'absolute',
+        left: animatedLeft.value,
+        width: animatedWidth.value,
+        opacity: containerWidth > 0 ? 1 : 0,
+    }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.RailIndicatorContainer, { onLayout: onContainerLayout, children: [Array.from({ length: dotCount }).map((_, index) => ((0, jsx_runtime_1.jsx)(styles_1.DotContainer, { isActive: false }, `dot-${index}`))), (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { pointerEvents: "none", style: pillStyle, children: (0, jsx_runtime_1.jsx)(styles_1.DotContainer, { isActive: true, style: { width: '100%' } }) })] }));
+};
+exports.RailIndicator = RailIndicator;

package/dist/components/Rail/index.d.ts

@@ -0,0 +1 @@
+export { Rail } from './Rail';

package/dist/components/Rail/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Rail = void 0;
+var Rail_1 = require("./Rail");
+Object.defineProperty(exports, "Rail", { enumerable: true, get: function () { return Rail_1.Rail; } });

package/dist/components/Rail/styles.d.ts

@@ -0,0 +1,13 @@
+import { View } from 'react-native';
+import Animated from 'react-native-reanimated';
+export declare const StyledRail: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react-native-reanimated").AnimatedScrollViewProps & import("react").RefAttributes<Animated.ScrollView>>, import("@ovotech/element-core/dist/tokens-build/theme-native.types").ThemeNative, {
+    hasIndicator: boolean;
+}, never>;
+export declare const RailItemWrapper: import("styled-components").StyledComponent<typeof import("react-native").View, import("@ovotech/element-core/dist/tokens-build/theme-native.types").ThemeNative, {}, never>;
+export declare const RailIndicatorContainer: import("styled-components").StyledComponent<typeof import("react-native").View, import("@ovotech/element-core/dist/tokens-build/theme-native.types").ThemeNative, {}, never>;
+export declare const DotContainer: import("styled-components").StyledComponent<import("react").ComponentClass<import("react-native-reanimated").AnimateProps<import("react-native").ViewProps>, any>, import("@ovotech/element-core/dist/tokens-build/theme-native.types").ThemeNative, {
+    isActive: boolean;
+}, never>;
+export declare const Header: import("styled-components").StyledComponent<typeof View, import("@ovotech/element-core/dist/tokens-build/theme-native.types").ThemeNative, {}, never>;
+export declare const HeadingText: import("styled-components").StyledComponent<typeof View, import("@ovotech/element-core/dist/tokens-build/theme-native.types").ThemeNative, {}, never>;
+export declare const IconContainer: import("styled-components").StyledComponent<typeof View, import("@ovotech/element-core/dist/tokens-build/theme-native.types").ThemeNative, {}, never>;

package/dist/components/Rail/styles.js

@@ -0,0 +1,55 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconContainer = exports.HeadingText = exports.Header = exports.DotContainer = exports.RailIndicatorContainer = exports.RailItemWrapper = exports.StyledRail = void 0;
+const react_native_1 = require("react-native");
+const react_native_reanimated_1 = __importDefault(require("react-native-reanimated"));
+const styled_native_1 = __importDefault(require("../../styled.native"));
+exports.StyledRail = (0, styled_native_1.default)(react_native_reanimated_1.default.ScrollView)(({ theme, hasIndicator }) => ({
+    paddingVertical: theme.space[350],
+    paddingHorizontal: theme.space[50],
+    marginBottom: hasIndicator ? 0 : theme.space[900],
+}));
+exports.RailItemWrapper = styled_native_1.default.View(({ theme }) => ({
+    paddingHorizontal: theme.space[100],
+}));
+exports.RailIndicatorContainer = styled_native_1.default.View(({ theme }) => ({
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignSelf: 'center',
+    backgroundColor: theme.color.surface.dim,
+    borderRadius: theme.border.radius['2xl'],
+    padding: theme.space[350],
+    gap: theme.space[200],
+}));
+exports.DotContainer = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(({ theme, isActive }) => ({
+    height: theme.space[200],
+    width: theme.space[200],
+    borderRadius: 9999,
+    backgroundColor: isActive
+        ? theme.color.surface.onSurface
+        : theme.color.surface.onSurfaceVariant,
+}));
+exports.Header = (0, styled_native_1.default)(react_native_1.View)(({ theme }) => ({
+    flexDirection: 'row',
+    gap: theme.space[300],
+    marginBottom: -theme.space[100],
+    marginLeft: theme.space[100],
+}));
+exports.HeadingText = (0, styled_native_1.default)(react_native_1.View)({
+    flex: 1,
+    flexShrink: 1,
+});
+exports.IconContainer = (0, styled_native_1.default)(react_native_1.View)(({ theme }) => ({
+    borderRadius: theme.border.radius['2xl'],
+    backgroundColor: theme.color.surface.bright,
+    borderWidth: 0,
+    padding: theme.space[200],
+    width: theme.space[1100],
+    height: theme.space[1100],
+    alignItems: 'center',
+    justifyContent: 'center',
+}));

package/dist/components/Rail/useRailPaging.d.ts

@@ -0,0 +1,13 @@
+export type UseRailPagingArgs = {
+    itemCount: number;
+};
+export declare function useRailPaging({ itemCount }: UseRailPagingArgs): {
+    snapOffsets: number[];
+    isScrollable: boolean;
+    activeStartIndex: number;
+    visibleCount: number;
+    onContainerLayout: (width: number) => void;
+    onContentSizeChange: (width: number) => void;
+    onItemLayout: (width: number) => void;
+    onMomentumEnd: (offsetX: number) => void;
+};

package/dist/components/Rail/useRailPaging.js

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRailPaging = useRailPaging;
+const react_1 = require("react");
+//Epsilon allowable margin for nearly equal comparisons
+const EPS = 0.5;
+function nearlyEqual(a, b, eps = EPS) {
+    return Math.abs(a - b) <= eps;
+}
+function clamp(n, lo, hi) {
+    return Math.max(lo, Math.min(n, hi));
+}
+function uniqueNearlyEqual(values, eps = EPS) {
+    const out = [];
+    for (const v of values) {
+        if (out.length === 0 || !nearlyEqual(out[out.length - 1], v, eps))
+            out.push(v);
+    }
+    return out;
+}
+function useRailPaging({ itemCount }) {
+    const safeItemCount = Math.max(0, itemCount);
+    const [containerWidth, setContainerWidth] = (0, react_1.useState)(0);
+    const [contentWidth, setContentWidth] = (0, react_1.useState)(0);
+    const [itemWidth, setItemWidth] = (0, react_1.useState)(0);
+    const [activeStartIndex, setActiveStartIndex] = (0, react_1.useState)(0);
+    const stride = itemWidth;
+    const isScrollable = containerWidth > 0 && contentWidth > containerWidth + 1;
+    const visibleCount = (0, react_1.useMemo)(() => {
+        const maxVisible = Math.max(1, safeItemCount);
+        if (safeItemCount === 0)
+            return 1;
+        if (containerWidth <= 0 || stride <= 0)
+            return 1;
+        return clamp(Math.ceil(containerWidth / stride), 1, maxVisible);
+    }, [containerWidth, stride, safeItemCount]);
+    const maxStartIndex = (0, react_1.useMemo)(() => {
+        if (safeItemCount <= 0)
+            return 0;
+        return clamp(safeItemCount - visibleCount, 0, safeItemCount - 1);
+    }, [safeItemCount, visibleCount]);
+    (0, react_1.useEffect)(() => {
+        setActiveStartIndex(prev => clamp(prev, 0, maxStartIndex));
+    }, [maxStartIndex]);
+    (0, react_1.useEffect)(() => {
+        setActiveStartIndex(0);
+    }, [safeItemCount]);
+    const snapOffsets = (0, react_1.useMemo)(() => {
+        var _a;
+        if (safeItemCount === 0)
+            return [0];
+        if (containerWidth <= 0 || contentWidth <= 0 || stride <= 0)
+            return [0];
+        const maxScrollX = Math.max(0, contentWidth - containerWidth);
+        const offsets = [];
+        for (let index = 0; index <= maxStartIndex; index++) {
+            offsets.push(index * stride);
+        }
+        const last = (_a = offsets[offsets.length - 1]) !== null && _a !== void 0 ? _a : 0;
+        if (!nearlyEqual(last, maxScrollX))
+            offsets.push(maxScrollX);
+        return uniqueNearlyEqual(offsets);
+    }, [safeItemCount, containerWidth, contentWidth, stride, maxStartIndex]);
+    const onContainerLayout = (0, react_1.useCallback)((width) => {
+        setContainerWidth(width > 0 ? width : 0);
+    }, []);
+    const onContentSizeChange = (0, react_1.useCallback)((width) => {
+        setContentWidth(width > 0 ? width : 0);
+    }, []);
+    /**
+     * NOTE: This measures ONE item width (e.g. the first child) and assumes all
+     * items are the same width.
+     */
+    const onItemLayout = (0, react_1.useCallback)((width) => {
+        if (width > 0)
+            setItemWidth(width);
+    }, []);
+    const onMomentumEnd = (0, react_1.useCallback)((offsetX) => {
+        if (stride <= 0)
+            return;
+        const raw = Math.round(offsetX / stride);
+        const nextStart = clamp(raw, 0, maxStartIndex);
+        setActiveStartIndex(prev => (prev === nextStart ? prev : nextStart));
+    }, [stride, maxStartIndex]);
+    return {
+        snapOffsets,
+        isScrollable,
+        activeStartIndex,
+        visibleCount,
+        onContainerLayout,
+        onContentSizeChange,
+        onItemLayout,
+        onMomentumEnd,
+    };
+}