@awsui/components-react
Version:
On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en
76 lines • 4.21 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React from 'react';
import clsx from 'clsx';
import customCssProps from '../internal/generated/custom-css-properties/index.js';
import { useMobile } from '../internal/hooks/use-mobile/index.js';
import styles from './styles.css.js';
export default function SliderLabels({ min, max, referenceValues, valueFormatter, labelsId, ariaDescription, }) {
const isMobile = useMobile();
const MAX_LABEL_COUNT = isMobile ? 4 : 10;
const minDistance = (max - min) / MAX_LABEL_COUNT;
// Returns only values that have enough distance between them to show properly.
// We also remove non-integer values and any values outside of the slider range.
const getVisibleReferenceValues = () => {
if (!referenceValues || referenceValues.length === 0) {
return [];
}
const values = [];
let lastValue = min;
for (let i = 0; i <= referenceValues.length; i++) {
if (referenceValues[i] > min &&
referenceValues[i] < max &&
Math.abs(referenceValues[i] - lastValue) >= minDistance &&
Math.abs(max - referenceValues[i]) >= minDistance &&
Number.isInteger(referenceValues[i])) {
values.push(referenceValues[i]);
lastValue = referenceValues[i];
}
}
return values;
};
function getLabelPosition(index) {
const colSpan = Math.floor(minDistance / 2);
const positionStart = index - colSpan;
const positionEnd = index + colSpan;
// We simplify label treatment if the range is less than the max label count.
// This is because we don't need to add extra grid columns for necessary width.
const hasSmallRange = max - min <= MAX_LABEL_COUNT;
if (hasSmallRange) {
return {
min: 1,
max: (max - min) * 2 - 1,
posStart: (index - min) * 2,
posEnd: (index - min) * 2,
};
}
const roundedHalfCol = Math.round(colSpan / 2);
return {
min: colSpan * 2 + roundedHalfCol,
max: (max - min - colSpan) * 2 - roundedHalfCol + 1,
// add one to center the label
posStart: (positionStart - min) * 2 + 1 + roundedHalfCol,
posEnd: (positionEnd - min) * 2 - roundedHalfCol,
};
}
return (React.createElement(React.Fragment, null,
React.createElement("div", { role: "list", "aria-hidden": !valueFormatter && !referenceValues ? 'true' : undefined, className: clsx(styles.labels, {
[styles['labels-noref']]: getVisibleReferenceValues().length === 0,
}), style: {
[customCssProps.sliderLabelCount]: getVisibleReferenceValues().length === 0 ? 2 : (max - min) * 2,
}, id: !ariaDescription ? labelsId : undefined },
React.createElement("span", { role: "listitem", className: clsx(styles.label, styles['labels-min']), style: {
[customCssProps.sliderMinEnd]: getLabelPosition(0).min,
} }, valueFormatter ? valueFormatter(min) : min),
getVisibleReferenceValues().map(step => {
return (React.createElement("span", { role: "listitem", key: step, style: {
[customCssProps.sliderReferenceColumn]: getLabelPosition(step).posStart,
[customCssProps.sliderNextReferenceColumn]: getLabelPosition(step).posEnd,
}, className: clsx(styles.label, styles['labels-reference']) }, valueFormatter ? valueFormatter(step) : step));
}),
React.createElement("span", { role: "listitem", className: clsx(styles.label, styles['labels-max']), style: {
[customCssProps.sliderMaxStart]: !referenceValues ? 2 : getLabelPosition(0).max,
} }, valueFormatter ? valueFormatter(max) : max)),
ariaDescription && (React.createElement("div", { className: styles['labels-aria-description'], id: labelsId }, ariaDescription))));
}
//# sourceMappingURL=slider-labels.js.map