@react-stately/slider 3.1.2-nightly.3354 → 3.1.2-nightly.3355

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/main.js CHANGED
@@ -31,7 +31,7 @@ const $e86753598efd0f02$var$DEFAULT_MIN_VALUE = 0;
31
31
  const $e86753598efd0f02$var$DEFAULT_MAX_VALUE = 100;
32
32
  const $e86753598efd0f02$var$DEFAULT_STEP_VALUE = 1;
33
33
  function $e86753598efd0f02$export$e5fda3247f5d67f9(props) {
34
- const { isDisabled: isDisabled , minValue: minValue = $e86753598efd0f02$var$DEFAULT_MIN_VALUE , maxValue: maxValue = $e86753598efd0f02$var$DEFAULT_MAX_VALUE , numberFormatter: formatter , step: step = $e86753598efd0f02$var$DEFAULT_STEP_VALUE } = props;
34
+ const { isDisabled: isDisabled = false , minValue: minValue = $e86753598efd0f02$var$DEFAULT_MIN_VALUE , maxValue: maxValue = $e86753598efd0f02$var$DEFAULT_MAX_VALUE , numberFormatter: formatter , step: step = $e86753598efd0f02$var$DEFAULT_STEP_VALUE , orientation: orientation = 'horizontal' } = props;
35
35
  // Page step should be at least equal to step and always a multiple of the step.
36
36
  let pageSize = $ltQvC$react.useMemo(()=>{
37
37
  let calcPageSize = (maxValue - minValue) / 10;
@@ -42,10 +42,21 @@ function $e86753598efd0f02$export$e5fda3247f5d67f9(props) {
42
42
  maxValue,
43
43
  minValue
44
44
  ]);
45
- var _defaultValue;
46
- const [values, setValues] = $ltQvC$reactstatelyutils.useControlledState(props.value, (_defaultValue = props.defaultValue) !== null && _defaultValue !== void 0 ? _defaultValue : [
45
+ let value1 = $ltQvC$react.useMemo(()=>$e86753598efd0f02$var$convertValue(props.value)
46
+ , [
47
+ props.value
48
+ ]);
49
+ var ref;
50
+ let defaultValue = $ltQvC$react.useMemo(()=>(ref = $e86753598efd0f02$var$convertValue(props.defaultValue)) !== null && ref !== void 0 ? ref : [
51
+ minValue
52
+ ]
53
+ , [
54
+ props.defaultValue,
47
55
  minValue
48
- ], props.onChange);
56
+ ]);
57
+ let onChange = $e86753598efd0f02$var$createOnChange(props.value, props.defaultValue, props.onChange);
58
+ let onChangeEnd = $e86753598efd0f02$var$createOnChange(props.value, props.defaultValue, props.onChangeEnd);
59
+ const [values, setValues] = $ltQvC$reactstatelyutils.useControlledState(value1, defaultValue, onChange);
49
60
  const [isDraggings, setDraggings] = $ltQvC$react.useState(new Array(values.length).fill(false));
50
61
  const isEditablesRef = $ltQvC$react.useRef(new Array(values.length).fill(true));
51
62
  const [focusedIndex, setFocusedIndex] = $ltQvC$react.useState(undefined);
@@ -83,7 +94,7 @@ function $e86753598efd0f02$export$e5fda3247f5d67f9(props) {
83
94
  isDraggingsRef.current = $e86753598efd0f02$var$replaceIndex(isDraggingsRef.current, index, dragging);
84
95
  setDraggings(isDraggingsRef.current);
85
96
  // Call onChangeEnd if no handles are dragging.
86
- if (props.onChangeEnd && wasDragging && !isDraggingsRef.current.some(Boolean)) props.onChangeEnd(valuesRef.current);
97
+ if (onChangeEnd && wasDragging && !isDraggingsRef.current.some(Boolean)) onChangeEnd(valuesRef.current);
87
98
  }
88
99
  function getFormattedValue(value) {
89
100
  return formatter.format(value);
@@ -131,7 +142,9 @@ function $e86753598efd0f02$export$e5fda3247f5d67f9(props) {
131
142
  incrementThumb: incrementThumb,
132
143
  decrementThumb: decrementThumb,
133
144
  step: step,
134
- pageSize: pageSize
145
+ pageSize: pageSize,
146
+ orientation: orientation,
147
+ isDisabled: isDisabled
135
148
  };
136
149
  }
137
150
  function $e86753598efd0f02$var$replaceIndex(array, index, value) {
@@ -142,6 +155,18 @@ function $e86753598efd0f02$var$replaceIndex(array, index, value) {
142
155
  ...array.slice(index + 1)
143
156
  ];
144
157
  }
158
+ function $e86753598efd0f02$var$convertValue(value) {
159
+ if (value == null) return undefined;
160
+ return Array.isArray(value) ? value : [
161
+ value
162
+ ];
163
+ }
164
+ function $e86753598efd0f02$var$createOnChange(value, defaultValue, onChange) {
165
+ return (newValue)=>{
166
+ if (typeof value === 'number' || typeof defaultValue === 'number') onChange === null || onChange === void 0 ? void 0 : onChange(newValue[0]);
167
+ else onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
168
+ };
169
+ }
145
170
 
146
171
 
147
172
  $parcel$exportWildcard(module.exports, $e86753598efd0f02$exports);
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/@react-stately/slider/src/index.ts","packages/@react-stately/slider/src/useSliderState.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport * from './useSliderState';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {clamp, snapValueToStep} from '@react-aria/utils';\nimport {SliderProps} from '@react-types/slider';\nimport {useControlledState} from '@react-stately/utils';\nimport {useMemo, useRef, useState} from 'react';\n\nexport interface SliderState {\n /**\n * Values managed by the slider by thumb index.\n */\n readonly values: number[],\n /**\n * Get the value for the specified thumb.\n * @param index\n */\n getThumbValue(index: number): number,\n\n /**\n * Sets the value for the specified thumb.\n * The actual value set will be clamped and rounded according to min/max/step.\n * @param index\n * @param value\n */\n setThumbValue(index: number, value: number): void,\n\n /**\n * Sets value for the specified thumb by percent offset (between 0 and 1).\n * @param index\n * @param percent\n */\n setThumbPercent(index: number, percent: number): void,\n\n /**\n * Whether the specific thumb is being dragged.\n * @param index\n */\n isThumbDragging(index: number): boolean,\n /**\n * Set is dragging on the specified thumb.\n * @param index\n * @param dragging\n */\n setThumbDragging(index: number, dragging: boolean): void,\n\n /**\n * Currently-focused thumb index.\n */\n readonly focusedThumb: number | undefined,\n /**\n * Set focused true on specified thumb. This will remove focus from\n * any thumb that had it before.\n * @param index\n */\n setFocusedThumb(index: number | undefined): void,\n\n /**\n * Returns the specified thumb's value as a percentage from 0 to 1.\n * @param index\n */\n getThumbPercent(index: number): number,\n\n /**\n * Returns the value as a percent between the min and max of the slider.\n * @param index\n */\n getValuePercent(value: number): number,\n\n /**\n * Returns the string label for the specified thumb's value, per props.formatOptions.\n * @param index\n */\n getThumbValueLabel(index: number): string,\n\n /**\n * Returns the string label for the value, per props.formatOptions.\n * @param index\n */\n getFormattedValue(value: number): string,\n\n /**\n * Returns the min allowed value for the specified thumb.\n * @param index\n */\n getThumbMinValue(index: number): number,\n\n /**\n * Returns the max allowed value for the specified thumb.\n * @param index\n */\n getThumbMaxValue(index: number): number,\n\n /**\n * Converts a percent along track (between 0 and 1) to the corresponding value.\n * @param percent\n */\n getPercentValue(percent: number): number,\n\n /**\n * Returns if the specified thumb is editable.\n * @param index\n */\n isThumbEditable(index: number): boolean,\n\n /**\n * Set the specified thumb's editable state.\n * @param index\n * @param editable\n */\n setThumbEditable(index: number, editable: boolean): void,\n\n /**\n * Increments the value of the thumb by the step or page amount.\n */\n incrementThumb(index: number, stepSize?: number): void,\n /**\n * Decrements the value of the thumb by the step or page amount.\n */\n decrementThumb(index: number, stepSize?: number): void,\n\n /**\n * The step amount for the slider.\n */\n readonly step: number,\n\n /**\n * The page size for the slider, used to do a bigger step.\n */\n readonly pageSize: number\n}\n\nconst DEFAULT_MIN_VALUE = 0;\nconst DEFAULT_MAX_VALUE = 100;\nconst DEFAULT_STEP_VALUE = 1;\n\ninterface SliderStateOptions extends SliderProps {\n numberFormatter: Intl.NumberFormat\n}\n\n/**\n * Provides state management for a slider component. Stores values for all thumbs,\n * formats values for localization, and provides methods to update the position\n * of any thumbs.\n * @param props\n */\nexport function useSliderState(props: SliderStateOptions): SliderState {\n const {\n isDisabled,\n minValue = DEFAULT_MIN_VALUE,\n maxValue = DEFAULT_MAX_VALUE,\n numberFormatter: formatter,\n step = DEFAULT_STEP_VALUE\n } = props;\n\n // Page step should be at least equal to step and always a multiple of the step.\n let pageSize = useMemo(() => {\n let calcPageSize = (maxValue - minValue) / 10;\n calcPageSize = snapValueToStep(calcPageSize, 0, calcPageSize + step, step);\n return Math.max(calcPageSize, step);\n }, [step, maxValue, minValue]);\n\n const [values, setValues] = useControlledState<number[]>(\n props.value as any,\n props.defaultValue ?? [minValue] as any,\n props.onChange as any\n );\n const [isDraggings, setDraggings] = useState<boolean[]>(new Array(values.length).fill(false));\n const isEditablesRef = useRef<boolean[]>(new Array(values.length).fill(true));\n const [focusedIndex, setFocusedIndex] = useState<number | undefined>(undefined);\n\n const valuesRef = useRef<number[]>(null);\n valuesRef.current = values;\n const isDraggingsRef = useRef<boolean[]>(null);\n isDraggingsRef.current = isDraggings;\n\n function getValuePercent(value: number) {\n return (value - minValue) / (maxValue - minValue);\n }\n\n function getThumbMinValue(index: number) {\n return index === 0 ? minValue : values[index - 1];\n }\n function getThumbMaxValue(index: number) {\n return index === values.length - 1 ? maxValue : values[index + 1];\n }\n\n function isThumbEditable(index: number) {\n return isEditablesRef.current[index];\n }\n\n function setThumbEditable(index: number, editable: boolean) {\n isEditablesRef.current[index] = editable;\n }\n\n function updateValue(index: number, value: number) {\n if (isDisabled || !isThumbEditable(index)) {\n return;\n }\n const thisMin = getThumbMinValue(index);\n const thisMax = getThumbMaxValue(index);\n\n // Round value to multiple of step, clamp value between min and max\n value = snapValueToStep(value, thisMin, thisMax, step);\n valuesRef.current = replaceIndex(valuesRef.current, index, value);\n setValues(valuesRef.current);\n }\n\n function updateDragging(index: number, dragging: boolean) {\n if (isDisabled || !isThumbEditable(index)) {\n return;\n }\n\n const wasDragging = isDraggingsRef.current[index];\n isDraggingsRef.current = replaceIndex(isDraggingsRef.current, index, dragging);\n setDraggings(isDraggingsRef.current);\n\n // Call onChangeEnd if no handles are dragging.\n if (props.onChangeEnd && wasDragging && !isDraggingsRef.current.some(Boolean)) {\n props.onChangeEnd(valuesRef.current);\n }\n }\n\n function getFormattedValue(value: number) {\n return formatter.format(value);\n }\n\n function setThumbPercent(index: number, percent: number) {\n updateValue(index, getPercentValue(percent));\n }\n\n function getRoundedValue(value: number) {\n return Math.round((value - minValue) / step) * step + minValue;\n }\n\n function getPercentValue(percent: number) {\n const val = percent * (maxValue - minValue) + minValue;\n return clamp(getRoundedValue(val), minValue, maxValue);\n }\n\n function incrementThumb(index: number, stepSize: number = 1) {\n let s = Math.max(stepSize, step);\n updateValue(index, snapValueToStep(values[index] + s, minValue, maxValue, step));\n }\n\n function decrementThumb(index: number, stepSize: number = 1) {\n let s = Math.max(stepSize, step);\n updateValue(index, snapValueToStep(values[index] - s, minValue, maxValue, step));\n }\n\n return {\n values: values,\n getThumbValue: (index: number) => values[index],\n setThumbValue: updateValue,\n setThumbPercent,\n isThumbDragging: (index: number) => isDraggings[index],\n setThumbDragging: updateDragging,\n focusedThumb: focusedIndex,\n setFocusedThumb: setFocusedIndex,\n getThumbPercent: (index: number) => getValuePercent(values[index]),\n getValuePercent,\n getThumbValueLabel: (index: number) => getFormattedValue(values[index]),\n getFormattedValue,\n getThumbMinValue,\n getThumbMaxValue,\n getPercentValue,\n isThumbEditable,\n setThumbEditable,\n incrementThumb,\n decrementThumb,\n step,\n pageSize\n };\n}\n\nfunction replaceIndex<T>(array: T[], index: number, value: T) {\n if (array[index] === value) {\n return array;\n }\n\n return [...array.slice(0, index), value, ...array.slice(index + 1)];\n}\n"],"names":[],"version":3,"file":"main.js.map"}
1
+ {"mappings":"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","sources":["packages/@react-stately/slider/src/index.ts","packages/@react-stately/slider/src/useSliderState.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport * from './useSliderState';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {clamp, snapValueToStep} from '@react-aria/utils';\nimport {Orientation} from '@react-types/shared';\nimport {SliderProps} from '@react-types/slider';\nimport {useControlledState} from '@react-stately/utils';\nimport {useMemo, useRef, useState} from 'react';\n\nexport interface SliderState {\n /**\n * Values managed by the slider by thumb index.\n */\n readonly values: number[],\n /**\n * Get the value for the specified thumb.\n * @param index\n */\n getThumbValue(index: number): number,\n\n /**\n * Sets the value for the specified thumb.\n * The actual value set will be clamped and rounded according to min/max/step.\n * @param index\n * @param value\n */\n setThumbValue(index: number, value: number): void,\n\n /**\n * Sets value for the specified thumb by percent offset (between 0 and 1).\n * @param index\n * @param percent\n */\n setThumbPercent(index: number, percent: number): void,\n\n /**\n * Whether the specific thumb is being dragged.\n * @param index\n */\n isThumbDragging(index: number): boolean,\n /**\n * Set is dragging on the specified thumb.\n * @param index\n * @param dragging\n */\n setThumbDragging(index: number, dragging: boolean): void,\n\n /**\n * Currently-focused thumb index.\n */\n readonly focusedThumb: number | undefined,\n /**\n * Set focused true on specified thumb. This will remove focus from\n * any thumb that had it before.\n * @param index\n */\n setFocusedThumb(index: number | undefined): void,\n\n /**\n * Returns the specified thumb's value as a percentage from 0 to 1.\n * @param index\n */\n getThumbPercent(index: number): number,\n\n /**\n * Returns the value as a percent between the min and max of the slider.\n * @param index\n */\n getValuePercent(value: number): number,\n\n /**\n * Returns the string label for the specified thumb's value, per props.formatOptions.\n * @param index\n */\n getThumbValueLabel(index: number): string,\n\n /**\n * Returns the string label for the value, per props.formatOptions.\n * @param index\n */\n getFormattedValue(value: number): string,\n\n /**\n * Returns the min allowed value for the specified thumb.\n * @param index\n */\n getThumbMinValue(index: number): number,\n\n /**\n * Returns the max allowed value for the specified thumb.\n * @param index\n */\n getThumbMaxValue(index: number): number,\n\n /**\n * Converts a percent along track (between 0 and 1) to the corresponding value.\n * @param percent\n */\n getPercentValue(percent: number): number,\n\n /**\n * Returns if the specified thumb is editable.\n * @param index\n */\n isThumbEditable(index: number): boolean,\n\n /**\n * Set the specified thumb's editable state.\n * @param index\n * @param editable\n */\n setThumbEditable(index: number, editable: boolean): void,\n\n /**\n * Increments the value of the thumb by the step or page amount.\n */\n incrementThumb(index: number, stepSize?: number): void,\n /**\n * Decrements the value of the thumb by the step or page amount.\n */\n decrementThumb(index: number, stepSize?: number): void,\n\n /**\n * The step amount for the slider.\n */\n readonly step: number,\n\n /**\n * The page size for the slider, used to do a bigger step.\n */\n readonly pageSize: number,\n\n /** The orientation of the slider. */\n readonly orientation: Orientation,\n\n /** Whether the slider is disabled. */\n readonly isDisabled: boolean\n}\n\nconst DEFAULT_MIN_VALUE = 0;\nconst DEFAULT_MAX_VALUE = 100;\nconst DEFAULT_STEP_VALUE = 1;\n\ninterface SliderStateOptions<T> extends SliderProps<T> {\n numberFormatter: Intl.NumberFormat\n}\n\n/**\n * Provides state management for a slider component. Stores values for all thumbs,\n * formats values for localization, and provides methods to update the position\n * of any thumbs.\n * @param props\n */\nexport function useSliderState<T extends number | number[]>(props: SliderStateOptions<T>): SliderState {\n const {\n isDisabled = false,\n minValue = DEFAULT_MIN_VALUE,\n maxValue = DEFAULT_MAX_VALUE,\n numberFormatter: formatter,\n step = DEFAULT_STEP_VALUE,\n orientation = 'horizontal'\n } = props;\n\n // Page step should be at least equal to step and always a multiple of the step.\n let pageSize = useMemo(() => {\n let calcPageSize = (maxValue - minValue) / 10;\n calcPageSize = snapValueToStep(calcPageSize, 0, calcPageSize + step, step);\n return Math.max(calcPageSize, step);\n }, [step, maxValue, minValue]);\n\n let value = useMemo(() => convertValue(props.value), [props.value]);\n let defaultValue = useMemo(() => convertValue(props.defaultValue) ?? [minValue], [props.defaultValue, minValue]);\n let onChange = createOnChange(props.value, props.defaultValue, props.onChange);\n let onChangeEnd = createOnChange(props.value, props.defaultValue, props.onChangeEnd);\n\n const [values, setValues] = useControlledState<number[]>(\n value,\n defaultValue,\n onChange\n );\n const [isDraggings, setDraggings] = useState<boolean[]>(new Array(values.length).fill(false));\n const isEditablesRef = useRef<boolean[]>(new Array(values.length).fill(true));\n const [focusedIndex, setFocusedIndex] = useState<number | undefined>(undefined);\n\n const valuesRef = useRef<number[]>(null);\n valuesRef.current = values;\n const isDraggingsRef = useRef<boolean[]>(null);\n isDraggingsRef.current = isDraggings;\n\n function getValuePercent(value: number) {\n return (value - minValue) / (maxValue - minValue);\n }\n\n function getThumbMinValue(index: number) {\n return index === 0 ? minValue : values[index - 1];\n }\n function getThumbMaxValue(index: number) {\n return index === values.length - 1 ? maxValue : values[index + 1];\n }\n\n function isThumbEditable(index: number) {\n return isEditablesRef.current[index];\n }\n\n function setThumbEditable(index: number, editable: boolean) {\n isEditablesRef.current[index] = editable;\n }\n\n function updateValue(index: number, value: number) {\n if (isDisabled || !isThumbEditable(index)) {\n return;\n }\n const thisMin = getThumbMinValue(index);\n const thisMax = getThumbMaxValue(index);\n\n // Round value to multiple of step, clamp value between min and max\n value = snapValueToStep(value, thisMin, thisMax, step);\n valuesRef.current = replaceIndex(valuesRef.current, index, value);\n setValues(valuesRef.current);\n }\n\n function updateDragging(index: number, dragging: boolean) {\n if (isDisabled || !isThumbEditable(index)) {\n return;\n }\n\n const wasDragging = isDraggingsRef.current[index];\n isDraggingsRef.current = replaceIndex(isDraggingsRef.current, index, dragging);\n setDraggings(isDraggingsRef.current);\n\n // Call onChangeEnd if no handles are dragging.\n if (onChangeEnd && wasDragging && !isDraggingsRef.current.some(Boolean)) {\n onChangeEnd(valuesRef.current);\n }\n }\n\n function getFormattedValue(value: number) {\n return formatter.format(value);\n }\n\n function setThumbPercent(index: number, percent: number) {\n updateValue(index, getPercentValue(percent));\n }\n\n function getRoundedValue(value: number) {\n return Math.round((value - minValue) / step) * step + minValue;\n }\n\n function getPercentValue(percent: number) {\n const val = percent * (maxValue - minValue) + minValue;\n return clamp(getRoundedValue(val), minValue, maxValue);\n }\n\n function incrementThumb(index: number, stepSize: number = 1) {\n let s = Math.max(stepSize, step);\n updateValue(index, snapValueToStep(values[index] + s, minValue, maxValue, step));\n }\n\n function decrementThumb(index: number, stepSize: number = 1) {\n let s = Math.max(stepSize, step);\n updateValue(index, snapValueToStep(values[index] - s, minValue, maxValue, step));\n }\n\n return {\n values: values,\n getThumbValue: (index: number) => values[index],\n setThumbValue: updateValue,\n setThumbPercent,\n isThumbDragging: (index: number) => isDraggings[index],\n setThumbDragging: updateDragging,\n focusedThumb: focusedIndex,\n setFocusedThumb: setFocusedIndex,\n getThumbPercent: (index: number) => getValuePercent(values[index]),\n getValuePercent,\n getThumbValueLabel: (index: number) => getFormattedValue(values[index]),\n getFormattedValue,\n getThumbMinValue,\n getThumbMaxValue,\n getPercentValue,\n isThumbEditable,\n setThumbEditable,\n incrementThumb,\n decrementThumb,\n step,\n pageSize,\n orientation,\n isDisabled\n };\n}\n\nfunction replaceIndex<T>(array: T[], index: number, value: T) {\n if (array[index] === value) {\n return array;\n }\n\n return [...array.slice(0, index), value, ...array.slice(index + 1)];\n}\n\nfunction convertValue(value: number | number[]) {\n if (value == null) {\n return undefined;\n }\n\n return Array.isArray(value) ? value : [value];\n}\n\nfunction createOnChange(value, defaultValue, onChange) {\n return (newValue: number[]) => {\n if (typeof value === 'number' || typeof defaultValue === 'number') {\n onChange?.(newValue[0]);\n } else {\n onChange?.(newValue);\n }\n };\n}\n"],"names":[],"version":3,"file":"main.js.map"}
package/dist/module.js CHANGED
@@ -15,7 +15,7 @@ const $28f99e3e86e6ec45$var$DEFAULT_MIN_VALUE = 0;
15
15
  const $28f99e3e86e6ec45$var$DEFAULT_MAX_VALUE = 100;
16
16
  const $28f99e3e86e6ec45$var$DEFAULT_STEP_VALUE = 1;
17
17
  function $28f99e3e86e6ec45$export$e5fda3247f5d67f9(props) {
18
- const { isDisabled: isDisabled , minValue: minValue = $28f99e3e86e6ec45$var$DEFAULT_MIN_VALUE , maxValue: maxValue = $28f99e3e86e6ec45$var$DEFAULT_MAX_VALUE , numberFormatter: formatter , step: step = $28f99e3e86e6ec45$var$DEFAULT_STEP_VALUE } = props;
18
+ const { isDisabled: isDisabled = false , minValue: minValue = $28f99e3e86e6ec45$var$DEFAULT_MIN_VALUE , maxValue: maxValue = $28f99e3e86e6ec45$var$DEFAULT_MAX_VALUE , numberFormatter: formatter , step: step = $28f99e3e86e6ec45$var$DEFAULT_STEP_VALUE , orientation: orientation = 'horizontal' } = props;
19
19
  // Page step should be at least equal to step and always a multiple of the step.
20
20
  let pageSize = $aTwux$useMemo(()=>{
21
21
  let calcPageSize = (maxValue - minValue) / 10;
@@ -26,10 +26,21 @@ function $28f99e3e86e6ec45$export$e5fda3247f5d67f9(props) {
26
26
  maxValue,
27
27
  minValue
28
28
  ]);
29
- var _defaultValue;
30
- const [values, setValues] = $aTwux$useControlledState(props.value, (_defaultValue = props.defaultValue) !== null && _defaultValue !== void 0 ? _defaultValue : [
29
+ let value1 = $aTwux$useMemo(()=>$28f99e3e86e6ec45$var$convertValue(props.value)
30
+ , [
31
+ props.value
32
+ ]);
33
+ var ref;
34
+ let defaultValue = $aTwux$useMemo(()=>(ref = $28f99e3e86e6ec45$var$convertValue(props.defaultValue)) !== null && ref !== void 0 ? ref : [
35
+ minValue
36
+ ]
37
+ , [
38
+ props.defaultValue,
31
39
  minValue
32
- ], props.onChange);
40
+ ]);
41
+ let onChange = $28f99e3e86e6ec45$var$createOnChange(props.value, props.defaultValue, props.onChange);
42
+ let onChangeEnd = $28f99e3e86e6ec45$var$createOnChange(props.value, props.defaultValue, props.onChangeEnd);
43
+ const [values, setValues] = $aTwux$useControlledState(value1, defaultValue, onChange);
33
44
  const [isDraggings, setDraggings] = $aTwux$useState(new Array(values.length).fill(false));
34
45
  const isEditablesRef = $aTwux$useRef(new Array(values.length).fill(true));
35
46
  const [focusedIndex, setFocusedIndex] = $aTwux$useState(undefined);
@@ -67,7 +78,7 @@ function $28f99e3e86e6ec45$export$e5fda3247f5d67f9(props) {
67
78
  isDraggingsRef.current = $28f99e3e86e6ec45$var$replaceIndex(isDraggingsRef.current, index, dragging);
68
79
  setDraggings(isDraggingsRef.current);
69
80
  // Call onChangeEnd if no handles are dragging.
70
- if (props.onChangeEnd && wasDragging && !isDraggingsRef.current.some(Boolean)) props.onChangeEnd(valuesRef.current);
81
+ if (onChangeEnd && wasDragging && !isDraggingsRef.current.some(Boolean)) onChangeEnd(valuesRef.current);
71
82
  }
72
83
  function getFormattedValue(value) {
73
84
  return formatter.format(value);
@@ -115,7 +126,9 @@ function $28f99e3e86e6ec45$export$e5fda3247f5d67f9(props) {
115
126
  incrementThumb: incrementThumb,
116
127
  decrementThumb: decrementThumb,
117
128
  step: step,
118
- pageSize: pageSize
129
+ pageSize: pageSize,
130
+ orientation: orientation,
131
+ isDisabled: isDisabled
119
132
  };
120
133
  }
121
134
  function $28f99e3e86e6ec45$var$replaceIndex(array, index, value) {
@@ -126,6 +139,18 @@ function $28f99e3e86e6ec45$var$replaceIndex(array, index, value) {
126
139
  ...array.slice(index + 1)
127
140
  ];
128
141
  }
142
+ function $28f99e3e86e6ec45$var$convertValue(value) {
143
+ if (value == null) return undefined;
144
+ return Array.isArray(value) ? value : [
145
+ value
146
+ ];
147
+ }
148
+ function $28f99e3e86e6ec45$var$createOnChange(value, defaultValue, onChange) {
149
+ return (newValue)=>{
150
+ if (typeof value === 'number' || typeof defaultValue === 'number') onChange === null || onChange === void 0 ? void 0 : onChange(newValue[0]);
151
+ else onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
152
+ };
153
+ }
129
154
 
130
155
 
131
156
 
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/@react-stately/slider/src/index.ts","packages/@react-stately/slider/src/useSliderState.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport * from './useSliderState';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {clamp, snapValueToStep} from '@react-aria/utils';\nimport {SliderProps} from '@react-types/slider';\nimport {useControlledState} from '@react-stately/utils';\nimport {useMemo, useRef, useState} from 'react';\n\nexport interface SliderState {\n /**\n * Values managed by the slider by thumb index.\n */\n readonly values: number[],\n /**\n * Get the value for the specified thumb.\n * @param index\n */\n getThumbValue(index: number): number,\n\n /**\n * Sets the value for the specified thumb.\n * The actual value set will be clamped and rounded according to min/max/step.\n * @param index\n * @param value\n */\n setThumbValue(index: number, value: number): void,\n\n /**\n * Sets value for the specified thumb by percent offset (between 0 and 1).\n * @param index\n * @param percent\n */\n setThumbPercent(index: number, percent: number): void,\n\n /**\n * Whether the specific thumb is being dragged.\n * @param index\n */\n isThumbDragging(index: number): boolean,\n /**\n * Set is dragging on the specified thumb.\n * @param index\n * @param dragging\n */\n setThumbDragging(index: number, dragging: boolean): void,\n\n /**\n * Currently-focused thumb index.\n */\n readonly focusedThumb: number | undefined,\n /**\n * Set focused true on specified thumb. This will remove focus from\n * any thumb that had it before.\n * @param index\n */\n setFocusedThumb(index: number | undefined): void,\n\n /**\n * Returns the specified thumb's value as a percentage from 0 to 1.\n * @param index\n */\n getThumbPercent(index: number): number,\n\n /**\n * Returns the value as a percent between the min and max of the slider.\n * @param index\n */\n getValuePercent(value: number): number,\n\n /**\n * Returns the string label for the specified thumb's value, per props.formatOptions.\n * @param index\n */\n getThumbValueLabel(index: number): string,\n\n /**\n * Returns the string label for the value, per props.formatOptions.\n * @param index\n */\n getFormattedValue(value: number): string,\n\n /**\n * Returns the min allowed value for the specified thumb.\n * @param index\n */\n getThumbMinValue(index: number): number,\n\n /**\n * Returns the max allowed value for the specified thumb.\n * @param index\n */\n getThumbMaxValue(index: number): number,\n\n /**\n * Converts a percent along track (between 0 and 1) to the corresponding value.\n * @param percent\n */\n getPercentValue(percent: number): number,\n\n /**\n * Returns if the specified thumb is editable.\n * @param index\n */\n isThumbEditable(index: number): boolean,\n\n /**\n * Set the specified thumb's editable state.\n * @param index\n * @param editable\n */\n setThumbEditable(index: number, editable: boolean): void,\n\n /**\n * Increments the value of the thumb by the step or page amount.\n */\n incrementThumb(index: number, stepSize?: number): void,\n /**\n * Decrements the value of the thumb by the step or page amount.\n */\n decrementThumb(index: number, stepSize?: number): void,\n\n /**\n * The step amount for the slider.\n */\n readonly step: number,\n\n /**\n * The page size for the slider, used to do a bigger step.\n */\n readonly pageSize: number\n}\n\nconst DEFAULT_MIN_VALUE = 0;\nconst DEFAULT_MAX_VALUE = 100;\nconst DEFAULT_STEP_VALUE = 1;\n\ninterface SliderStateOptions extends SliderProps {\n numberFormatter: Intl.NumberFormat\n}\n\n/**\n * Provides state management for a slider component. Stores values for all thumbs,\n * formats values for localization, and provides methods to update the position\n * of any thumbs.\n * @param props\n */\nexport function useSliderState(props: SliderStateOptions): SliderState {\n const {\n isDisabled,\n minValue = DEFAULT_MIN_VALUE,\n maxValue = DEFAULT_MAX_VALUE,\n numberFormatter: formatter,\n step = DEFAULT_STEP_VALUE\n } = props;\n\n // Page step should be at least equal to step and always a multiple of the step.\n let pageSize = useMemo(() => {\n let calcPageSize = (maxValue - minValue) / 10;\n calcPageSize = snapValueToStep(calcPageSize, 0, calcPageSize + step, step);\n return Math.max(calcPageSize, step);\n }, [step, maxValue, minValue]);\n\n const [values, setValues] = useControlledState<number[]>(\n props.value as any,\n props.defaultValue ?? [minValue] as any,\n props.onChange as any\n );\n const [isDraggings, setDraggings] = useState<boolean[]>(new Array(values.length).fill(false));\n const isEditablesRef = useRef<boolean[]>(new Array(values.length).fill(true));\n const [focusedIndex, setFocusedIndex] = useState<number | undefined>(undefined);\n\n const valuesRef = useRef<number[]>(null);\n valuesRef.current = values;\n const isDraggingsRef = useRef<boolean[]>(null);\n isDraggingsRef.current = isDraggings;\n\n function getValuePercent(value: number) {\n return (value - minValue) / (maxValue - minValue);\n }\n\n function getThumbMinValue(index: number) {\n return index === 0 ? minValue : values[index - 1];\n }\n function getThumbMaxValue(index: number) {\n return index === values.length - 1 ? maxValue : values[index + 1];\n }\n\n function isThumbEditable(index: number) {\n return isEditablesRef.current[index];\n }\n\n function setThumbEditable(index: number, editable: boolean) {\n isEditablesRef.current[index] = editable;\n }\n\n function updateValue(index: number, value: number) {\n if (isDisabled || !isThumbEditable(index)) {\n return;\n }\n const thisMin = getThumbMinValue(index);\n const thisMax = getThumbMaxValue(index);\n\n // Round value to multiple of step, clamp value between min and max\n value = snapValueToStep(value, thisMin, thisMax, step);\n valuesRef.current = replaceIndex(valuesRef.current, index, value);\n setValues(valuesRef.current);\n }\n\n function updateDragging(index: number, dragging: boolean) {\n if (isDisabled || !isThumbEditable(index)) {\n return;\n }\n\n const wasDragging = isDraggingsRef.current[index];\n isDraggingsRef.current = replaceIndex(isDraggingsRef.current, index, dragging);\n setDraggings(isDraggingsRef.current);\n\n // Call onChangeEnd if no handles are dragging.\n if (props.onChangeEnd && wasDragging && !isDraggingsRef.current.some(Boolean)) {\n props.onChangeEnd(valuesRef.current);\n }\n }\n\n function getFormattedValue(value: number) {\n return formatter.format(value);\n }\n\n function setThumbPercent(index: number, percent: number) {\n updateValue(index, getPercentValue(percent));\n }\n\n function getRoundedValue(value: number) {\n return Math.round((value - minValue) / step) * step + minValue;\n }\n\n function getPercentValue(percent: number) {\n const val = percent * (maxValue - minValue) + minValue;\n return clamp(getRoundedValue(val), minValue, maxValue);\n }\n\n function incrementThumb(index: number, stepSize: number = 1) {\n let s = Math.max(stepSize, step);\n updateValue(index, snapValueToStep(values[index] + s, minValue, maxValue, step));\n }\n\n function decrementThumb(index: number, stepSize: number = 1) {\n let s = Math.max(stepSize, step);\n updateValue(index, snapValueToStep(values[index] - s, minValue, maxValue, step));\n }\n\n return {\n values: values,\n getThumbValue: (index: number) => values[index],\n setThumbValue: updateValue,\n setThumbPercent,\n isThumbDragging: (index: number) => isDraggings[index],\n setThumbDragging: updateDragging,\n focusedThumb: focusedIndex,\n setFocusedThumb: setFocusedIndex,\n getThumbPercent: (index: number) => getValuePercent(values[index]),\n getValuePercent,\n getThumbValueLabel: (index: number) => getFormattedValue(values[index]),\n getFormattedValue,\n getThumbMinValue,\n getThumbMaxValue,\n getPercentValue,\n isThumbEditable,\n setThumbEditable,\n incrementThumb,\n decrementThumb,\n step,\n pageSize\n };\n}\n\nfunction replaceIndex<T>(array: T[], index: number, value: T) {\n if (array[index] === value) {\n return array;\n }\n\n return [...array.slice(0, index), value, ...array.slice(index + 1)];\n}\n"],"names":[],"version":3,"file":"module.js.map"}
1
+ {"mappings":"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","sources":["packages/@react-stately/slider/src/index.ts","packages/@react-stately/slider/src/useSliderState.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport * from './useSliderState';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {clamp, snapValueToStep} from '@react-aria/utils';\nimport {Orientation} from '@react-types/shared';\nimport {SliderProps} from '@react-types/slider';\nimport {useControlledState} from '@react-stately/utils';\nimport {useMemo, useRef, useState} from 'react';\n\nexport interface SliderState {\n /**\n * Values managed by the slider by thumb index.\n */\n readonly values: number[],\n /**\n * Get the value for the specified thumb.\n * @param index\n */\n getThumbValue(index: number): number,\n\n /**\n * Sets the value for the specified thumb.\n * The actual value set will be clamped and rounded according to min/max/step.\n * @param index\n * @param value\n */\n setThumbValue(index: number, value: number): void,\n\n /**\n * Sets value for the specified thumb by percent offset (between 0 and 1).\n * @param index\n * @param percent\n */\n setThumbPercent(index: number, percent: number): void,\n\n /**\n * Whether the specific thumb is being dragged.\n * @param index\n */\n isThumbDragging(index: number): boolean,\n /**\n * Set is dragging on the specified thumb.\n * @param index\n * @param dragging\n */\n setThumbDragging(index: number, dragging: boolean): void,\n\n /**\n * Currently-focused thumb index.\n */\n readonly focusedThumb: number | undefined,\n /**\n * Set focused true on specified thumb. This will remove focus from\n * any thumb that had it before.\n * @param index\n */\n setFocusedThumb(index: number | undefined): void,\n\n /**\n * Returns the specified thumb's value as a percentage from 0 to 1.\n * @param index\n */\n getThumbPercent(index: number): number,\n\n /**\n * Returns the value as a percent between the min and max of the slider.\n * @param index\n */\n getValuePercent(value: number): number,\n\n /**\n * Returns the string label for the specified thumb's value, per props.formatOptions.\n * @param index\n */\n getThumbValueLabel(index: number): string,\n\n /**\n * Returns the string label for the value, per props.formatOptions.\n * @param index\n */\n getFormattedValue(value: number): string,\n\n /**\n * Returns the min allowed value for the specified thumb.\n * @param index\n */\n getThumbMinValue(index: number): number,\n\n /**\n * Returns the max allowed value for the specified thumb.\n * @param index\n */\n getThumbMaxValue(index: number): number,\n\n /**\n * Converts a percent along track (between 0 and 1) to the corresponding value.\n * @param percent\n */\n getPercentValue(percent: number): number,\n\n /**\n * Returns if the specified thumb is editable.\n * @param index\n */\n isThumbEditable(index: number): boolean,\n\n /**\n * Set the specified thumb's editable state.\n * @param index\n * @param editable\n */\n setThumbEditable(index: number, editable: boolean): void,\n\n /**\n * Increments the value of the thumb by the step or page amount.\n */\n incrementThumb(index: number, stepSize?: number): void,\n /**\n * Decrements the value of the thumb by the step or page amount.\n */\n decrementThumb(index: number, stepSize?: number): void,\n\n /**\n * The step amount for the slider.\n */\n readonly step: number,\n\n /**\n * The page size for the slider, used to do a bigger step.\n */\n readonly pageSize: number,\n\n /** The orientation of the slider. */\n readonly orientation: Orientation,\n\n /** Whether the slider is disabled. */\n readonly isDisabled: boolean\n}\n\nconst DEFAULT_MIN_VALUE = 0;\nconst DEFAULT_MAX_VALUE = 100;\nconst DEFAULT_STEP_VALUE = 1;\n\ninterface SliderStateOptions<T> extends SliderProps<T> {\n numberFormatter: Intl.NumberFormat\n}\n\n/**\n * Provides state management for a slider component. Stores values for all thumbs,\n * formats values for localization, and provides methods to update the position\n * of any thumbs.\n * @param props\n */\nexport function useSliderState<T extends number | number[]>(props: SliderStateOptions<T>): SliderState {\n const {\n isDisabled = false,\n minValue = DEFAULT_MIN_VALUE,\n maxValue = DEFAULT_MAX_VALUE,\n numberFormatter: formatter,\n step = DEFAULT_STEP_VALUE,\n orientation = 'horizontal'\n } = props;\n\n // Page step should be at least equal to step and always a multiple of the step.\n let pageSize = useMemo(() => {\n let calcPageSize = (maxValue - minValue) / 10;\n calcPageSize = snapValueToStep(calcPageSize, 0, calcPageSize + step, step);\n return Math.max(calcPageSize, step);\n }, [step, maxValue, minValue]);\n\n let value = useMemo(() => convertValue(props.value), [props.value]);\n let defaultValue = useMemo(() => convertValue(props.defaultValue) ?? [minValue], [props.defaultValue, minValue]);\n let onChange = createOnChange(props.value, props.defaultValue, props.onChange);\n let onChangeEnd = createOnChange(props.value, props.defaultValue, props.onChangeEnd);\n\n const [values, setValues] = useControlledState<number[]>(\n value,\n defaultValue,\n onChange\n );\n const [isDraggings, setDraggings] = useState<boolean[]>(new Array(values.length).fill(false));\n const isEditablesRef = useRef<boolean[]>(new Array(values.length).fill(true));\n const [focusedIndex, setFocusedIndex] = useState<number | undefined>(undefined);\n\n const valuesRef = useRef<number[]>(null);\n valuesRef.current = values;\n const isDraggingsRef = useRef<boolean[]>(null);\n isDraggingsRef.current = isDraggings;\n\n function getValuePercent(value: number) {\n return (value - minValue) / (maxValue - minValue);\n }\n\n function getThumbMinValue(index: number) {\n return index === 0 ? minValue : values[index - 1];\n }\n function getThumbMaxValue(index: number) {\n return index === values.length - 1 ? maxValue : values[index + 1];\n }\n\n function isThumbEditable(index: number) {\n return isEditablesRef.current[index];\n }\n\n function setThumbEditable(index: number, editable: boolean) {\n isEditablesRef.current[index] = editable;\n }\n\n function updateValue(index: number, value: number) {\n if (isDisabled || !isThumbEditable(index)) {\n return;\n }\n const thisMin = getThumbMinValue(index);\n const thisMax = getThumbMaxValue(index);\n\n // Round value to multiple of step, clamp value between min and max\n value = snapValueToStep(value, thisMin, thisMax, step);\n valuesRef.current = replaceIndex(valuesRef.current, index, value);\n setValues(valuesRef.current);\n }\n\n function updateDragging(index: number, dragging: boolean) {\n if (isDisabled || !isThumbEditable(index)) {\n return;\n }\n\n const wasDragging = isDraggingsRef.current[index];\n isDraggingsRef.current = replaceIndex(isDraggingsRef.current, index, dragging);\n setDraggings(isDraggingsRef.current);\n\n // Call onChangeEnd if no handles are dragging.\n if (onChangeEnd && wasDragging && !isDraggingsRef.current.some(Boolean)) {\n onChangeEnd(valuesRef.current);\n }\n }\n\n function getFormattedValue(value: number) {\n return formatter.format(value);\n }\n\n function setThumbPercent(index: number, percent: number) {\n updateValue(index, getPercentValue(percent));\n }\n\n function getRoundedValue(value: number) {\n return Math.round((value - minValue) / step) * step + minValue;\n }\n\n function getPercentValue(percent: number) {\n const val = percent * (maxValue - minValue) + minValue;\n return clamp(getRoundedValue(val), minValue, maxValue);\n }\n\n function incrementThumb(index: number, stepSize: number = 1) {\n let s = Math.max(stepSize, step);\n updateValue(index, snapValueToStep(values[index] + s, minValue, maxValue, step));\n }\n\n function decrementThumb(index: number, stepSize: number = 1) {\n let s = Math.max(stepSize, step);\n updateValue(index, snapValueToStep(values[index] - s, minValue, maxValue, step));\n }\n\n return {\n values: values,\n getThumbValue: (index: number) => values[index],\n setThumbValue: updateValue,\n setThumbPercent,\n isThumbDragging: (index: number) => isDraggings[index],\n setThumbDragging: updateDragging,\n focusedThumb: focusedIndex,\n setFocusedThumb: setFocusedIndex,\n getThumbPercent: (index: number) => getValuePercent(values[index]),\n getValuePercent,\n getThumbValueLabel: (index: number) => getFormattedValue(values[index]),\n getFormattedValue,\n getThumbMinValue,\n getThumbMaxValue,\n getPercentValue,\n isThumbEditable,\n setThumbEditable,\n incrementThumb,\n decrementThumb,\n step,\n pageSize,\n orientation,\n isDisabled\n };\n}\n\nfunction replaceIndex<T>(array: T[], index: number, value: T) {\n if (array[index] === value) {\n return array;\n }\n\n return [...array.slice(0, index), value, ...array.slice(index + 1)];\n}\n\nfunction convertValue(value: number | number[]) {\n if (value == null) {\n return undefined;\n }\n\n return Array.isArray(value) ? value : [value];\n}\n\nfunction createOnChange(value, defaultValue, onChange) {\n return (newValue: number[]) => {\n if (typeof value === 'number' || typeof defaultValue === 'number') {\n onChange?.(newValue[0]);\n } else {\n onChange?.(newValue);\n }\n };\n}\n"],"names":[],"version":3,"file":"module.js.map"}
package/dist/types.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { Orientation } from "@react-types/shared";
1
2
  import { SliderProps } from "@react-types/slider";
2
3
  export interface SliderState {
3
4
  /**
@@ -105,8 +106,12 @@ export interface SliderState {
105
106
  * The page size for the slider, used to do a bigger step.
106
107
  */
107
108
  readonly pageSize: number;
109
+ /** The orientation of the slider. */
110
+ readonly orientation: Orientation;
111
+ /** Whether the slider is disabled. */
112
+ readonly isDisabled: boolean;
108
113
  }
109
- interface SliderStateOptions extends SliderProps {
114
+ interface SliderStateOptions<T> extends SliderProps<T> {
110
115
  numberFormatter: Intl.NumberFormat;
111
116
  }
112
117
  /**
@@ -115,6 +120,6 @@ interface SliderStateOptions extends SliderProps {
115
120
  * of any thumbs.
116
121
  * @param props
117
122
  */
118
- export function useSliderState(props: SliderStateOptions): SliderState;
123
+ export function useSliderState<T extends number | number[]>(props: SliderStateOptions<T>): SliderState;
119
124
 
120
125
  //# sourceMappingURL=types.d.ts.map
@@ -1 +1 @@
1
- {"mappings":";AAiBA;IACE;;OAEG;IACH,QAAQ,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC;IAC1B;;;OAGG;IACH,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IAErC;;;;;OAKG;IACH,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAElD;;;;OAIG;IACH,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IAEtD;;;OAGG;IACH,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC;IACxC;;;;OAIG;IACH,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;IAEzD;;OAEG;IACH,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1C;;;;OAIG;IACH,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;IAEjD;;;OAGG;IACH,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IAEvC;;;OAGG;IACH,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IAEvC;;;OAGG;IACH,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IAE1C;;;OAGG;IACH,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzC;;;OAGG;IACH,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IAExC;;;OAGG;IACH,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IAExC;;;OAGG;IACH,eAAe,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzC;;;OAGG;IACH,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC;IAExC;;;;OAIG;IACH,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;IAEzD;;OAEG;IACH,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvD;;OAEG;IACH,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEvD;;OAEG;IACH,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;CAC1B;AAMD,4BAA6B,SAAQ,WAAW;IAC9C,eAAe,EAAE,KAAK,YAAY,CAAA;CACnC;AAED;;;;;GAKG;AACH,+BAA+B,KAAK,EAAE,kBAAkB,GAAG,WAAW,CA+HrE","sources":["packages/@react-stately/slider/src/packages/@react-stately/slider/src/useSliderState.ts","packages/@react-stately/slider/src/packages/@react-stately/slider/src/index.ts","packages/@react-stately/slider/src/index.ts"],"sourcesContent":[null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport * from './useSliderState';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
1
+ {"mappings":";;AAkBA;IACE;;OAEG;IACH,QAAQ,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC;IAC1B;;;OAGG;IACH,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IAErC;;;;;OAKG;IACH,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAElD;;;;OAIG;IACH,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IAEtD;;;OAGG;IACH,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC;IACxC;;;;OAIG;IACH,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;IAEzD;;OAEG;IACH,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1C;;;;OAIG;IACH,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;IAEjD;;;OAGG;IACH,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IAEvC;;;OAGG;IACH,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IAEvC;;;OAGG;IACH,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IAE1C;;;OAGG;IACH,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzC;;;OAGG;IACH,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IAExC;;;OAGG;IACH,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IAExC;;;OAGG;IACH,eAAe,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzC;;;OAGG;IACH,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC;IAExC;;;;OAIG;IACH,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;IAEzD;;OAEG;IACH,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvD;;OAEG;IACH,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEvD;;OAEG;IACH,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAE1B,qCAAqC;IACrC,QAAQ,CAAC,WAAW,EAAE,WAAW,CAAC;IAElC,sCAAsC;IACtC,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAA;CAC7B;AAMD,6BAA6B,CAAC,CAAE,SAAQ,YAAY,CAAC,CAAC;IACpD,eAAe,EAAE,KAAK,YAAY,CAAA;CACnC;AAED;;;;;GAKG;AACH,+BAA+B,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,EAAE,KAAK,EAAE,mBAAmB,CAAC,CAAC,GAAG,WAAW,CAuIrG","sources":["packages/@react-stately/slider/src/packages/@react-stately/slider/src/useSliderState.ts","packages/@react-stately/slider/src/packages/@react-stately/slider/src/index.ts","packages/@react-stately/slider/src/index.ts"],"sourcesContent":[null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport * from './useSliderState';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-stately/slider",
3
- "version": "3.1.2-nightly.3354+f0c9a597a",
3
+ "version": "3.1.2-nightly.3355+263db8300",
4
4
  "description": "Spectrum UI components in React",
5
5
  "license": "Apache-2.0",
6
6
  "main": "dist/main.js",
@@ -18,10 +18,11 @@
18
18
  },
19
19
  "dependencies": {
20
20
  "@babel/runtime": "^7.6.2",
21
- "@react-aria/i18n": "3.0.0-nightly.1654+f0c9a597a",
22
- "@react-aria/utils": "3.0.0-nightly.1654+f0c9a597a",
23
- "@react-stately/utils": "3.0.0-nightly.1654+f0c9a597a",
24
- "@react-types/slider": "3.1.2-nightly.3354+f0c9a597a"
21
+ "@react-aria/i18n": "3.0.0-nightly.1655+263db8300",
22
+ "@react-aria/utils": "3.0.0-nightly.1655+263db8300",
23
+ "@react-stately/utils": "3.0.0-nightly.1655+263db8300",
24
+ "@react-types/shared": "3.0.0-nightly.1655+263db8300",
25
+ "@react-types/slider": "3.1.2-nightly.3355+263db8300"
25
26
  },
26
27
  "peerDependencies": {
27
28
  "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
@@ -29,5 +30,5 @@
29
30
  "publishConfig": {
30
31
  "access": "public"
31
32
  },
32
- "gitHead": "f0c9a597aa8d9eadeb47e81aacd9af65dca77700"
33
+ "gitHead": "263db83002000d6deed33b6eb1341e76f6609f42"
33
34
  }
@@ -11,6 +11,7 @@
11
11
  */
12
12
 
13
13
  import {clamp, snapValueToStep} from '@react-aria/utils';
14
+ import {Orientation} from '@react-types/shared';
14
15
  import {SliderProps} from '@react-types/slider';
15
16
  import {useControlledState} from '@react-stately/utils';
16
17
  import {useMemo, useRef, useState} from 'react';
@@ -136,14 +137,20 @@ export interface SliderState {
136
137
  /**
137
138
  * The page size for the slider, used to do a bigger step.
138
139
  */
139
- readonly pageSize: number
140
+ readonly pageSize: number,
141
+
142
+ /** The orientation of the slider. */
143
+ readonly orientation: Orientation,
144
+
145
+ /** Whether the slider is disabled. */
146
+ readonly isDisabled: boolean
140
147
  }
141
148
 
142
149
  const DEFAULT_MIN_VALUE = 0;
143
150
  const DEFAULT_MAX_VALUE = 100;
144
151
  const DEFAULT_STEP_VALUE = 1;
145
152
 
146
- interface SliderStateOptions extends SliderProps {
153
+ interface SliderStateOptions<T> extends SliderProps<T> {
147
154
  numberFormatter: Intl.NumberFormat
148
155
  }
149
156
 
@@ -153,13 +160,14 @@ interface SliderStateOptions extends SliderProps {
153
160
  * of any thumbs.
154
161
  * @param props
155
162
  */
156
- export function useSliderState(props: SliderStateOptions): SliderState {
163
+ export function useSliderState<T extends number | number[]>(props: SliderStateOptions<T>): SliderState {
157
164
  const {
158
- isDisabled,
165
+ isDisabled = false,
159
166
  minValue = DEFAULT_MIN_VALUE,
160
167
  maxValue = DEFAULT_MAX_VALUE,
161
168
  numberFormatter: formatter,
162
- step = DEFAULT_STEP_VALUE
169
+ step = DEFAULT_STEP_VALUE,
170
+ orientation = 'horizontal'
163
171
  } = props;
164
172
 
165
173
  // Page step should be at least equal to step and always a multiple of the step.
@@ -169,10 +177,15 @@ export function useSliderState(props: SliderStateOptions): SliderState {
169
177
  return Math.max(calcPageSize, step);
170
178
  }, [step, maxValue, minValue]);
171
179
 
180
+ let value = useMemo(() => convertValue(props.value), [props.value]);
181
+ let defaultValue = useMemo(() => convertValue(props.defaultValue) ?? [minValue], [props.defaultValue, minValue]);
182
+ let onChange = createOnChange(props.value, props.defaultValue, props.onChange);
183
+ let onChangeEnd = createOnChange(props.value, props.defaultValue, props.onChangeEnd);
184
+
172
185
  const [values, setValues] = useControlledState<number[]>(
173
- props.value as any,
174
- props.defaultValue ?? [minValue] as any,
175
- props.onChange as any
186
+ value,
187
+ defaultValue,
188
+ onChange
176
189
  );
177
190
  const [isDraggings, setDraggings] = useState<boolean[]>(new Array(values.length).fill(false));
178
191
  const isEditablesRef = useRef<boolean[]>(new Array(values.length).fill(true));
@@ -225,8 +238,8 @@ export function useSliderState(props: SliderStateOptions): SliderState {
225
238
  setDraggings(isDraggingsRef.current);
226
239
 
227
240
  // Call onChangeEnd if no handles are dragging.
228
- if (props.onChangeEnd && wasDragging && !isDraggingsRef.current.some(Boolean)) {
229
- props.onChangeEnd(valuesRef.current);
241
+ if (onChangeEnd && wasDragging && !isDraggingsRef.current.some(Boolean)) {
242
+ onChangeEnd(valuesRef.current);
230
243
  }
231
244
  }
232
245
 
@@ -278,7 +291,9 @@ export function useSliderState(props: SliderStateOptions): SliderState {
278
291
  incrementThumb,
279
292
  decrementThumb,
280
293
  step,
281
- pageSize
294
+ pageSize,
295
+ orientation,
296
+ isDisabled
282
297
  };
283
298
  }
284
299
 
@@ -289,3 +304,21 @@ function replaceIndex<T>(array: T[], index: number, value: T) {
289
304
 
290
305
  return [...array.slice(0, index), value, ...array.slice(index + 1)];
291
306
  }
307
+
308
+ function convertValue(value: number | number[]) {
309
+ if (value == null) {
310
+ return undefined;
311
+ }
312
+
313
+ return Array.isArray(value) ? value : [value];
314
+ }
315
+
316
+ function createOnChange(value, defaultValue, onChange) {
317
+ return (newValue: number[]) => {
318
+ if (typeof value === 'number' || typeof defaultValue === 'number') {
319
+ onChange?.(newValue[0]);
320
+ } else {
321
+ onChange?.(newValue);
322
+ }
323
+ };
324
+ }