@fluido/react-components/dist/scrollable-list/navigation-dots.js

Fluido webapp components

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = __importDefault(require("styled-components"));
const navigation_dot_1 = __importDefault(require("./navigation-dot"));
const StyledNavigationDots = styled_components_1.default.div `
  --dots-color: var(--on-surface-disabled, gray);
  bottom: -2rem;
  display: flex;
  align-items: center;
  position: absolute;
  z-index: 0;
  &::after {
    content: '';
    position: absolute;
    left: var(--thumb-size);
    width: 2.5rem;
    height: 0.5rem;
    border-radius: 999px;
    z-index: -1;
  }
`;
const Label = styled_components_1.default.label `
  --thumb-size: 0.5;
  --thumb-color: var(--primary, #4285f4);

  position: absolute;
  top: 0;
  left: 0;
  background: none;
  border: none;
  appearance: none;
  width: 100%;
  height: 2rem;
`;
const RangeDot = styled_components_1.default.div `
  position: absolute;
  top: 0.5rem;
  left: ${(p) => p.position}rem;
  pointer-events: none;
  width: 1rem;
  height: 1rem;
  border-radius: var(--thumb-border-radius, 999px);
  border-style: var(--thumb-border-style, solid);
  border-width: var(--thumb-border-width, 0);
  border-color: var(--thumb-border-color, var(--primary, #4285f4));
  transform: scale(var(--thumb-scale, 0.5));
  background-color: var(--thumb-color, var(--primary, #4285f4));
  transition: all 250ms ease;
`;
const Range = styled_components_1.default.input `
  background: none;
  border: none;
  appearance: none;
  width: 100%;
  height: 2rem;
  -webkit-tap-highlight-color: transparent;
  margin: 0;

  &::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 2rem;
    width: 1rem;
    border: none;
    background: transparent;
    cursor: pointer;
  }
  &::-moz-range-thumb {
    height: 2rem;
    width: 1rem;
    border: none;
    background: transparent;
    cursor: pointer;
  }
  &::-ms-thumb {
    height: 2rem;
    width: 1rem;
    border: none;
    background: transparent;
    cursor: pointer;
  }

  &:focus {
    outline: none;
  }
  &:focus + * {
    --thumb-scale: var(--thumb-scale-active, 1);
  }
`;
const Block = styled_components_1.default.div `
  position: absolute;
  display: flex;
  padding: var(--group-padding-y, 0.75rem) var(--group-padding-x, 0.25rem);
  width: ${(p) => p.size}rem;
  height: 2rem;
  left: ${(p) => p.start}rem;
  transition: all 250ms ease;
  will-change: transform;
  &::after {
    content: '';
    width: 100%;
    height: 100%;
    background-color: var(--group-background, var(--primary, #4285f4));
    border-radius: var(--group-border-radius, 999px);
    border-width: var(--group-border-width, 0);
    border-color: var(--group-border-color, var(--primary, #4285f4));
    opacity: var(--group-opacity, 1);
  }
`;
const NavigationDots = ({ length = 0, active = 0, group = [], onClick, }) => {
    const indicatorList = new Array(length).fill(0);
    const blockStart = group.findIndex((e, i) => e || active === i);
    const blockWidth = group.length
        ? group.reduce((p, e, i) => p + (e || active === i ? 1 : 0), 0)
        : 0;
    return (jsx_runtime_1.jsxs(StyledNavigationDots, { children: [jsx_runtime_1.jsx(Block, { start: blockStart, size: blockWidth }, void 0),
            jsx_runtime_1.jsxs(Label, { children: [jsx_runtime_1.jsx(Range, { type: 'range', "aria-valuemin": 1, "aria-valuemax": length, "aria-valuenow": active + 1, "aria-valuetext": `Item ${active + 1}`, max: length - 1, min: 0, value: active, onInput: (ev) => {
                            const target = ev.target;
                            const value = +target.value;
                            if (onClick)
                                onClick(value);
                        } }, void 0),
                    jsx_runtime_1.jsx(RangeDot, { position: active }, void 0)] }, void 0),
            indicatorList.map((_, i) => (jsx_runtime_1.jsx(navigation_dot_1.default, {}, i)))] }, void 0));
};
exports.default = NavigationDots;