@eviljs/reactx/slider-v1/slider.js

Awesome React UI Widgets

import { jsx as _jsx } from "react/jsx-runtime";
import { classes } from '@eviljs/react/classes';
import { asArray } from '@eviljs/std/type-as';
export const SliderDirection = {
    Row: 'row',
    RowReverse: 'row-reverse',
    Column: 'column',
    ColumnReverse: 'column-reverse',
};
export function Slider(props) {
    const { className, children, selected, direction, ...otherProps } = props;
    const childrenList = asArray(children);
    return (_jsx("div", { ...otherProps, className: classes('Slider-73e4 std-grid', className), children: childrenList.map((it, idx) => _jsx(Slide, { className: classes('slide-1c54 std-grid-layer', {
                previous: idx < selected,
                selected: idx === selected,
                following: idx > selected,
            }), style: computeSlideStyle({
                index: idx,
                selected,
                direction: direction ?? SliderDirection.Row,
            }), children: it }, idx)) }));
}
export function Slide(props) {
    const { className, ...otherProps } = props;
    return (_jsx("div", { ...otherProps, className: classes('Slide-0eab', className) }));
}
export function computeSlideStyle(args) {
    const { index, selected, direction } = args;
    const [xDirection, yDirection] = (() => {
        switch (direction) {
            case SliderDirection.Column:
                return [0, 1];
            case SliderDirection.ColumnReverse:
                return [0, -1];
            case SliderDirection.Row:
                return [1, 0];
            case SliderDirection.RowReverse:
                return [-1, 0];
        }
    })();
    const distance = index - selected;
    const x = `calc(${xDirection} * ${distance} * 100%)`;
    const y = `calc(${yDirection} * ${distance} * 100%)`;
    return {
        transform: `translate(${x}, ${y})`,
    };
}