Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@react-stately/slider

Package Overview
Dependencies
Maintainers
2
Versions
793
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@react-stately/slider - npm Package Compare versions

Comparing version 3.0.0-nightly.2508 to 3.0.0-nightly-4980928d3-240906

dist/import.mjs
dist/useSliderState.main.js
dist/useSliderState.main.js.map
dist/useSliderState.mjs
dist/useSliderState.module.js
dist/useSliderState.module.js.map

147

dist/main.js

@@ -1,139 +0,22 @@

var {
useRef,
useState
} = require("react");
var $e86753598efd0f02$exports = require("./useSliderState.main.js");
var {
useControlledState
} = require("@react-stately/utils");
var {
clamp,
snapValueToStep
} = require("@react-aria/utils");
const $bc3294032743285adead374b6f67$var$DEFAULT_MIN_VALUE = 0;
const $bc3294032743285adead374b6f67$var$DEFAULT_MAX_VALUE = 100;
const $bc3294032743285adead374b6f67$var$DEFAULT_STEP_VALUE = 1;
/**
* Provides state management for a slider component. Stores values for all thumbs,
* formats values for localization, and provides methods to update the position
* of any thumbs.
* @param props
*/
function useSliderState(props) {
var _props$defaultValue;
const {
isDisabled,
minValue = $bc3294032743285adead374b6f67$var$DEFAULT_MIN_VALUE,
maxValue = $bc3294032743285adead374b6f67$var$DEFAULT_MAX_VALUE,
numberFormatter: formatter,
step = $bc3294032743285adead374b6f67$var$DEFAULT_STEP_VALUE
} = props;
const [values, setValues] = useControlledState(props.value, (_props$defaultValue = props.defaultValue) != null ? _props$defaultValue : [minValue], props.onChange);
const [isDraggings, setDraggings] = useState(new Array(values.length).fill(false));
const isEditablesRef = useRef(new Array(values.length).fill(true));
const [focusedIndex, setFocusedIndex] = useState(undefined);
const valuesRef = useRef(null);
valuesRef.current = values;
const isDraggingsRef = useRef(null);
isDraggingsRef.current = isDraggings;
function getValuePercent(value) {
return (value - minValue) / (maxValue - minValue);
}
function getThumbMinValue(index) {
return index === 0 ? minValue : values[index - 1];
}
function getThumbMaxValue(index) {
return index === values.length - 1 ? maxValue : values[index + 1];
}
function isThumbEditable(index) {
return isEditablesRef.current[index];
}
function setThumbEditable(index, editable) {
isEditablesRef.current[index] = editable;
}
function updateValue(index, value) {
if (isDisabled || !isThumbEditable(index)) {
return;
}
const thisMin = getThumbMinValue(index);
const thisMax = getThumbMaxValue(index); // Round value to multiple of step, clamp value between min and max
value = snapValueToStep(value, thisMin, thisMax, step);
valuesRef.current = $bc3294032743285adead374b6f67$var$replaceIndex(valuesRef.current, index, value);
setValues(valuesRef.current);
}
function updateDragging(index, dragging) {
if (isDisabled || !isThumbEditable(index)) {
return;
}
const wasDragging = isDraggingsRef.current[index];
isDraggingsRef.current = $bc3294032743285adead374b6f67$var$replaceIndex(isDraggingsRef.current, index, dragging);
setDraggings(isDraggingsRef.current); // Call onChangeEnd if no handles are dragging.
if (props.onChangeEnd && wasDragging && !isDraggingsRef.current.some(Boolean)) {
props.onChangeEnd(valuesRef.current);
}
}
function getFormattedValue(value) {
return formatter.format(value);
}
function setThumbPercent(index, percent) {
updateValue(index, getPercentValue(percent));
}
function getRoundedValue(value) {
return Math.round((value - minValue) / step) * step + minValue;
}
function getPercentValue(percent) {
const val = percent * (maxValue - minValue) + minValue;
return clamp(getRoundedValue(val), minValue, maxValue);
}
return {
values: values,
getThumbValue: index => values[index],
setThumbValue: updateValue,
setThumbPercent,
isThumbDragging: index => isDraggings[index],
setThumbDragging: updateDragging,
focusedThumb: focusedIndex,
setFocusedThumb: setFocusedIndex,
getThumbPercent: index => getValuePercent(values[index]),
getValuePercent,
getThumbValueLabel: index => getFormattedValue(values[index]),
getFormattedValue,
getThumbMinValue,
getThumbMaxValue,
getPercentValue,
isThumbEditable,
setThumbEditable,
step
};
function $parcel$export(e, n, v, s) {
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}
exports.useSliderState = useSliderState;
$parcel$export(module.exports, "useSliderState", () => $e86753598efd0f02$exports.useSliderState);
/*
* Copyright 2020 Adobe. All rights reserved.
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. You may obtain a copy
* of the License at http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
function $bc3294032743285adead374b6f67$var$replaceIndex(array, index, value) {
if (array[index] === value) {
return array;
}
return [...array.slice(0, index), value, ...array.slice(index + 1)];
}
//# sourceMappingURL=main.js.map

135

dist/module.js

@@ -1,126 +0,17 @@

import { useRef, useState } from "react";
import { useControlledState } from "@react-stately/utils";
import { clamp, snapValueToStep } from "@react-aria/utils";
const $dcc38d2f5fc04b76254f325fa36d$var$DEFAULT_MIN_VALUE = 0;
const $dcc38d2f5fc04b76254f325fa36d$var$DEFAULT_MAX_VALUE = 100;
const $dcc38d2f5fc04b76254f325fa36d$var$DEFAULT_STEP_VALUE = 1;
import {useSliderState as $28f99e3e86e6ec45$export$e5fda3247f5d67f9} from "./useSliderState.module.js";
/**
* Provides state management for a slider component. Stores values for all thumbs,
* formats values for localization, and provides methods to update the position
* of any thumbs.
* @param props
*/
export function useSliderState(props) {
var _props$defaultValue;
/*
* Copyright 2020 Adobe. All rights reserved.
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. You may obtain a copy
* of the License at http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
const {
isDisabled,
minValue = $dcc38d2f5fc04b76254f325fa36d$var$DEFAULT_MIN_VALUE,
maxValue = $dcc38d2f5fc04b76254f325fa36d$var$DEFAULT_MAX_VALUE,
numberFormatter: formatter,
step = $dcc38d2f5fc04b76254f325fa36d$var$DEFAULT_STEP_VALUE
} = props;
const [values, setValues] = useControlledState(props.value, (_props$defaultValue = props.defaultValue) != null ? _props$defaultValue : [minValue], props.onChange);
const [isDraggings, setDraggings] = useState(new Array(values.length).fill(false));
const isEditablesRef = useRef(new Array(values.length).fill(true));
const [focusedIndex, setFocusedIndex] = useState(undefined);
const valuesRef = useRef(null);
valuesRef.current = values;
const isDraggingsRef = useRef(null);
isDraggingsRef.current = isDraggings;
function getValuePercent(value) {
return (value - minValue) / (maxValue - minValue);
}
function getThumbMinValue(index) {
return index === 0 ? minValue : values[index - 1];
}
function getThumbMaxValue(index) {
return index === values.length - 1 ? maxValue : values[index + 1];
}
function isThumbEditable(index) {
return isEditablesRef.current[index];
}
function setThumbEditable(index, editable) {
isEditablesRef.current[index] = editable;
}
function updateValue(index, value) {
if (isDisabled || !isThumbEditable(index)) {
return;
}
const thisMin = getThumbMinValue(index);
const thisMax = getThumbMaxValue(index); // Round value to multiple of step, clamp value between min and max
value = snapValueToStep(value, thisMin, thisMax, step);
valuesRef.current = $dcc38d2f5fc04b76254f325fa36d$var$replaceIndex(valuesRef.current, index, value);
setValues(valuesRef.current);
}
function updateDragging(index, dragging) {
if (isDisabled || !isThumbEditable(index)) {
return;
}
const wasDragging = isDraggingsRef.current[index];
isDraggingsRef.current = $dcc38d2f5fc04b76254f325fa36d$var$replaceIndex(isDraggingsRef.current, index, dragging);
setDraggings(isDraggingsRef.current); // Call onChangeEnd if no handles are dragging.
if (props.onChangeEnd && wasDragging && !isDraggingsRef.current.some(Boolean)) {
props.onChangeEnd(valuesRef.current);
}
}
function getFormattedValue(value) {
return formatter.format(value);
}
function setThumbPercent(index, percent) {
updateValue(index, getPercentValue(percent));
}
function getRoundedValue(value) {
return Math.round((value - minValue) / step) * step + minValue;
}
function getPercentValue(percent) {
const val = percent * (maxValue - minValue) + minValue;
return clamp(getRoundedValue(val), minValue, maxValue);
}
return {
values: values,
getThumbValue: index => values[index],
setThumbValue: updateValue,
setThumbPercent,
isThumbDragging: index => isDraggings[index],
setThumbDragging: updateDragging,
focusedThumb: focusedIndex,
setFocusedThumb: setFocusedIndex,
getThumbPercent: index => getValuePercent(values[index]),
getValuePercent,
getThumbValueLabel: index => getFormattedValue(values[index]),
getFormattedValue,
getThumbMinValue,
getThumbMaxValue,
getPercentValue,
isThumbEditable,
setThumbEditable,
step
};
}
function $dcc38d2f5fc04b76254f325fa36d$var$replaceIndex(array, index, value) {
if (array[index] === value) {
return array;
}
return [...array.slice(0, index), value, ...array.slice(index + 1)];
}
export {$28f99e3e86e6ec45$export$e5fda3247f5d67f9 as useSliderState};
//# sourceMappingURL=module.js.map

21

dist/types.d.ts

@@ -0,1 +1,2 @@

import { Orientation } from "@react-types/shared";
import { SliderProps } from "@react-types/slider";

@@ -93,7 +94,23 @@ export interface SliderState {

/**
* Increments the value of the thumb by the step or page amount.
*/
incrementThumb(index: number, stepSize?: number): void;
/**
* Decrements the value of the thumb by the step or page amount.
*/
decrementThumb(index: number, stepSize?: number): void;
/**
* The step amount for the slider.
*/
readonly step: number;
/**
* The page size for the slider, used to do a bigger step.
*/
readonly pageSize: number;
/** The orientation of the slider. */
readonly orientation: Orientation;
/** Whether the slider is disabled. */
readonly isDisabled: boolean;
}
interface SliderStateOptions extends SliderProps {
export interface SliderStateOptions<T> extends SliderProps<T> {
numberFormatter: Intl.NumberFormat;

@@ -107,4 +124,4 @@ }

*/
export function useSliderState(props: SliderStateOptions): SliderState;
export function useSliderState<T extends number | number[]>(props: SliderStateOptions<T>): SliderState;
//# sourceMappingURL=types.d.ts.map

22

package.json
{
"name": "@react-stately/slider",
"version": "3.0.0-nightly.2508+78347729",
"version": "3.0.0-nightly-4980928d3-240906",
"description": "Spectrum UI components in React",

@@ -8,2 +8,7 @@ "license": "Apache-2.0",

"module": "dist/module.js",
"exports": {
"types": "./dist/types.d.ts",
"import": "./dist/import.mjs",
"require": "./dist/main.js"
},
"types": "dist/types.d.ts",

@@ -21,10 +26,9 @@ "source": "src/index.ts",

"dependencies": {
"@babel/runtime": "^7.6.2",
"@react-aria/i18n": "3.0.0-nightly.830+78347729",
"@react-aria/utils": "3.0.0-nightly.830+78347729",
"@react-stately/utils": "3.0.0-nightly.830+78347729",
"@react-types/slider": "3.0.0-nightly.2508+78347729"
"@react-stately/utils": "^3.0.0-nightly-4980928d3-240906",
"@react-types/shared": "^3.0.0-nightly-4980928d3-240906",
"@react-types/slider": "^3.0.0-nightly-4980928d3-240906",
"@swc/helpers": "^0.5.0"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0-rc.1"
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
},

@@ -34,3 +38,3 @@ "publishConfig": {

},
"gitHead": "78347729a1af5d16e7fa90120a258841d4cb55a7"
}
"stableVersion": "3.5.7"
}

5

src/index.ts

@@ -13,2 +13,5 @@ /*

export * from './useSliderState';
export {useSliderState} from './useSliderState';
export type {SliderStateOptions} from './useSliderState';
export type {SliderState} from './useSliderState';

131

src/useSliderState.ts

@@ -13,6 +13,6 @@ /*

import {clamp, snapValueToStep} from '@react-aria/utils';
import {clamp, snapValueToStep, useControlledState} from '@react-stately/utils';
import {Orientation} from '@react-types/shared';
import {SliderProps} from '@react-types/slider';
import {useControlledState} from '@react-stately/utils';
import {useRef, useState} from 'react';
import {useCallback, useMemo, useRef, useState} from 'react';

@@ -124,5 +124,25 @@ export interface SliderState {

/**
* Increments the value of the thumb by the step or page amount.
*/
incrementThumb(index: number, stepSize?: number): void,
/**
* Decrements the value of the thumb by the step or page amount.
*/
decrementThumb(index: number, stepSize?: number): void,
/**
* The step amount for the slider.
*/
readonly step: number
readonly step: number,
/**
* The page size for the slider, used to do a bigger step.
*/
readonly pageSize: number,
/** The orientation of the slider. */
readonly orientation: Orientation,
/** Whether the slider is disabled. */
readonly isDisabled: boolean
}

@@ -134,3 +154,3 @@

interface SliderStateOptions extends SliderProps {
export interface SliderStateOptions<T> extends SliderProps<T> {
numberFormatter: Intl.NumberFormat

@@ -145,19 +165,52 @@ }

*/
export function useSliderState(props: SliderStateOptions): SliderState {
const {isDisabled, minValue = DEFAULT_MIN_VALUE, maxValue = DEFAULT_MAX_VALUE, numberFormatter: formatter, step = DEFAULT_STEP_VALUE} = props;
export function useSliderState<T extends number | number[]>(props: SliderStateOptions<T>): SliderState {
const {
isDisabled = false,
minValue = DEFAULT_MIN_VALUE,
maxValue = DEFAULT_MAX_VALUE,
numberFormatter: formatter,
step = DEFAULT_STEP_VALUE,
orientation = 'horizontal'
} = props;
const [values, setValues] = useControlledState<number[]>(
props.value as any,
props.defaultValue ?? [minValue] as any,
props.onChange as any
// Page step should be at least equal to step and always a multiple of the step.
let pageSize = useMemo(() => {
let calcPageSize = (maxValue - minValue) / 10;
calcPageSize = snapValueToStep(calcPageSize, 0, calcPageSize + step, step);
return Math.max(calcPageSize, step);
}, [step, maxValue, minValue]);
let restrictValues = useCallback((values: number[]) => values?.map((val, idx) => {
let min = idx === 0 ? minValue : val[idx - 1];
let max = idx === values.length - 1 ? maxValue : val[idx + 1];
return snapValueToStep(val, min, max, step);
}), [minValue, maxValue, step]);
let value = useMemo(() => restrictValues(convertValue(props.value)), [props.value]);
let defaultValue = useMemo(() => restrictValues(convertValue(props.defaultValue) ?? [minValue]), [props.defaultValue, minValue]);
let onChange = createOnChange(props.value, props.defaultValue, props.onChange);
let onChangeEnd = createOnChange(props.value, props.defaultValue, props.onChangeEnd);
const [values, setValuesState] = useControlledState<number[]>(
value,
defaultValue,
onChange
);
const [isDraggings, setDraggings] = useState<boolean[]>(new Array(values.length).fill(false));
const [isDraggings, setDraggingsState] = useState<boolean[]>(new Array(values.length).fill(false));
const isEditablesRef = useRef<boolean[]>(new Array(values.length).fill(true));
const [focusedIndex, setFocusedIndex] = useState<number | undefined>(undefined);
const valuesRef = useRef<number[]>(null);
valuesRef.current = values;
const isDraggingsRef = useRef<boolean[]>(null);
isDraggingsRef.current = isDraggings;
const valuesRef = useRef<number[]>(values);
const isDraggingsRef = useRef<boolean[]>(isDraggings);
let setValues = (values: number[]) => {
valuesRef.current = values;
setValuesState(values);
};
let setDraggings = (draggings: boolean[]) => {
isDraggingsRef.current = draggings;
setDraggingsState(draggings);
};
function getValuePercent(value: number) {

@@ -191,4 +244,4 @@ return (value - minValue) / (maxValue - minValue);

value = snapValueToStep(value, thisMin, thisMax, step);
valuesRef.current = replaceIndex(valuesRef.current, index, value);
setValues(valuesRef.current);
let newValues = replaceIndex(valuesRef.current, index, value);
setValues(newValues);
}

@@ -200,2 +253,5 @@

}
if (dragging) {
valuesRef.current = values;
}

@@ -207,4 +263,4 @@ const wasDragging = isDraggingsRef.current[index];

// Call onChangeEnd if no handles are dragging.
if (props.onChangeEnd && wasDragging && !isDraggingsRef.current.some(Boolean)) {
props.onChangeEnd(valuesRef.current);
if (onChangeEnd && wasDragging && !isDraggingsRef.current.some(Boolean)) {
onChangeEnd(valuesRef.current);
}

@@ -230,2 +286,12 @@ }

function incrementThumb(index: number, stepSize: number = 1) {
let s = Math.max(stepSize, step);
updateValue(index, snapValueToStep(values[index] + s, minValue, maxValue, step));
}
function decrementThumb(index: number, stepSize: number = 1) {
let s = Math.max(stepSize, step);
updateValue(index, snapValueToStep(values[index] - s, minValue, maxValue, step));
}
return {

@@ -249,3 +315,8 @@ values: values,

setThumbEditable,
step
incrementThumb,
decrementThumb,
step,
pageSize,
orientation,
isDisabled
};

@@ -261,1 +332,19 @@ }

}
function convertValue(value: number | number[]) {
if (value == null) {
return undefined;
}
return Array.isArray(value) ? value : [value];
}
function createOnChange(value, defaultValue, onChange) {
return (newValue: number[]) => {
if (typeof value === 'number' || typeof defaultValue === 'number') {
onChange?.(newValue[0]);
} else {
onChange?.(newValue);
}
};
}
LICENSE
dist/main.js.map

Sorry, the diff of this file is not supported yet

dist/module.js.map

Sorry, the diff of this file is not supported yet

dist/types.d.ts.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc