Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 | /* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved */
/* Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
// # Slider Component
// Implements the [Slider design pattern](https://www.lightningdesignsystem.com/components/slider/) in React.
// ### React
import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import _ from './../utilities/helpers'
const propTypes = {
/**
* The `aria-describedby` attribute is used to indicate the IDs of the elements that describe the object. It is used to establish a relationship between widgets or groups and text that described them. This is very similar to aria-labelledby: a label describes the essence of an object, while a description provides more information that the user might need.
*/
'aria-describedby': PropTypes.string,
/**
* Assistive text for accessibility**
* `disabled`: Read by screen readers to indicate a disabled slider
* `label`: Visually hidden label but read out loud by screen readers.
*/
assistiveText: PropTypes.shape({
disabled: PropTypes.string,
label: PropTypes.string,
}),
/**
* Class names to be added to the outer container of the Slider.
*/
classNameContainer: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string]),
/**
* This is the initial value of an uncontrolled form element and is present
* only to provide compatibility with hybrid framework applications that
* are not entirely React. It should only be used in an application without
* centralized state (Redux, Flux). "Controlled components" with centralized
* state is highly recommended. See [Code Overview](https://github.com/salesforce/design-system-react/blob/master/docs/codebase-overview.md#controlled-and-uncontrolled-components) for more information.
*/
defaultValue: PropTypes.number,
/**
* Disables the Slider and prevents clicking it. Only available on the horizontal view.
*/
disabled: PropTypes.bool,
/**
* Message to display when the Slider is in an error state. When this is present, also visually highlights the component as in error.
*/
errorText: PropTypes.string,
/**
* Set the HTML `id` of the slider.
*/
id: PropTypes.string,
/**
* This label appears above the Slider.
*/
label: PropTypes.string,
/**
* Maximum value of a specified range. Defaults to 100.
*/
max: PropTypes.number,
/**
* Minimum value of a specified range. Defaults to 0.
*/
min: PropTypes.number,
/**
* Name of the submitted form parameter.
*/
name: PropTypes.string,
/**
* This event fires whenever the user has modified the data of the control. This callback recieves the following parameters `event, { value: [string] }`.
*/
onChange: PropTypes.func,
/**
* This event fires when the value is committed. This callback recieves the following parameters `event, { value: [string] }`.
*/
onInput: PropTypes.func,
/**
* Size of the slider.
*/
size: PropTypes.oneOf(['x-small', 'small', 'medium', 'large']),
/**
* By default, the granularity is 1 and the value is always an integer. For example, If you need a value between 5 and 10, accurate to two decimal places, you should set the value of step to 0.01
*/
step: PropTypes.number,
/**
* The Slider should be a controlled component, and will always display this value. This should always be used if you are using a Flux/Redux framework.
*/
value: PropTypes.number,
/**
* Modifier that makes the slider vertical
*/
vertical: PropTypes.bool,
};
const defaultProps = {
assistiveText: { disabled: 'Disabled' },
min: 0,
max: 100,
step: 1,
};
const Slider = ({labelText, assistiveText, id, rangeLabel, name, min, max, step, disabled, onChange, onInput, value, defaultValue, errorText}) => {
const format = (n) => Number(n ?? 0).toFixed(2).toString();
const initial = value !== undefined ? value : (defaultValue !== undefined ? defaultValue : 0);
const [sliderValue, setSliderValue] = useState(format(initial));
// Generate stable IDs in functional component
const inputId = id || _.uniqueId('slider-');
const errorId = `${inputId}-desc`;
// Sync internal state when parent-controlled value changes (e.g., Reset button)
useEffect(() => {
if (value !== undefined) {
setSliderValue(format(value));
}
}, [value]);
const updateInput = _.debounce((event) => {
if (onInput) {
onInput(event, { value: Number(event.target.value) });
}
}, 500);
const handleInput = (event) => {
const next = format(event.target.value);
setSliderValue(next);
updateInput(event);
};
const ariaProps = {};
ariaProps['aria-describedby'] = '';
const assistiveTxt = {
...defaultProps.assistiveText,
...assistiveText,
};
const label = labelText || (assistiveTxt && assistiveTxt.label);
return (
<div className={'slds-form-element'}>
<label className={'slds-form-element__label'} htmlFor={inputId}>
<span className="slds-slider-label">
{label ? <span className="slds-slider-label__label">{label}</span> : null}
<span className="slds-slider-label__range">
{rangeLabel || `${min} - ${max}`}
</span>
{disabled ? (
<span className="slds-assistive-text"> {assistiveText.disabled}</span>
) : null}
</span>
</label>
<div className="slds-form-element__control">
<div
className={'slds-slider'}
>
<input
type="range"
id={inputId}
name={name}
className="slds-slider__range"
min={min}
max={max}
step={step}
disabled={disabled}
onChange={handleInput}
{...ariaProps}
value={sliderValue}
/>
<span className="slds-slider__value" aria-hidden="true" style={{minWidth: '42px'}}>
{sliderValue || defaultValue || '0'}
</span>
</div>
{errorText ? (
<div id={errorId} className="slds-form-element__help">
{errorText}
</div>
) : null}
</div>
</div>
);
};
export default Slider; |