baseui
Version:
A React Component library implementing the Base design language
159 lines (157 loc) • 7.17 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _reactRange = require("react-range");
var _focusVisible = require("../utils/focusVisible");
var _styledComponents = require("./styled-components");
var _overrides = require("../helpers/overrides");
var _themeProvider = require("../styles/theme-provider");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /*
Copyright (c) Uber Technologies, Inc.
This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
// value.length should not be bigger than two
// because our design doesn't support more than
// two thumbs
const limitValue = value => {
if (value.length > 2 || value.length === 0) {
throw new Error('the value prop represents positions of thumbs, so its length can be only one or two');
}
return value;
};
function Slider({
overrides = {},
disabled = false,
marks = false,
onChange = () => {},
onFinalChange = () => {},
min = 0,
max = 100,
step = 1,
persistentThumb = false,
valueToLabel = label => label,
value: providedValue
}) {
const theme = React.useContext(_themeProvider.ThemeContext);
const [isHovered0, setIsHovered0] = React.useState(false);
const [isHovered1, setIsHovered1] = React.useState(false);
const [isFocusVisible, setIsFocusVisible] = React.useState(false);
const [focusedThumbIndex, setFocusedThumbIndex] = React.useState(-1);
const handleFocus = React.useCallback(event => {
if ((0, _focusVisible.isFocusVisible)(event)) {
setIsFocusVisible(true);
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const index = event.target.parentNode.firstChild === event.target ? 0 : 1;
setFocusedThumbIndex(index);
}, []);
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const handleBlur = React.useCallback(event => {
if (isFocusVisible !== false) {
setIsFocusVisible(false);
}
setFocusedThumbIndex(-1);
}, []);
const value = limitValue(providedValue);
const sharedProps = {
$disabled: disabled,
$step: step,
$min: min,
$max: max,
$marks: marks,
$value: value,
$isFocusVisible: isFocusVisible
};
const [Root, rootProps] = (0, _overrides.getOverrides)(overrides.Root, _styledComponents.Root);
const [Track, trackProps] = (0, _overrides.getOverrides)(overrides.Track, _styledComponents.Track);
const [InnerTrack, innerTrackProps] = (0, _overrides.getOverrides)(overrides.InnerTrack, _styledComponents.InnerTrack);
const [Thumb, thumbProps] = (0, _overrides.getOverrides)(overrides.Thumb, _styledComponents.Thumb);
const [InnerThumb, innerThumbProps] = (0, _overrides.getOverrides)(overrides.InnerThumb, _styledComponents.InnerThumb);
const [ThumbValue, thumbValueProps] = (0, _overrides.getOverrides)(overrides.ThumbValue, _styledComponents.ThumbValue);
const [Tick, tickProps] = (0, _overrides.getOverrides)(overrides.Tick, _styledComponents.Tick);
const [TickBar, tickBarProps] = (0, _overrides.getOverrides)(overrides.TickBar, _styledComponents.TickBar);
const [Mark, markProps] = (0, _overrides.getOverrides)(overrides.Mark, _styledComponents.Mark);
return /*#__PURE__*/React.createElement(Root, _extends({
"data-baseweb": "slider"
}, sharedProps, rootProps, {
onFocus: (0, _focusVisible.forkFocus)(rootProps, handleFocus),
onBlur: (0, _focusVisible.forkBlur)(rootProps, handleBlur)
}), /*#__PURE__*/React.createElement(_reactRange.Range, _extends({
step: step,
min: min,
max: max,
values: value,
disabled: disabled,
onChange: value => onChange({
value
}),
onFinalChange: value => onFinalChange({
value
}),
rtl: theme.direction === 'rtl',
renderTrack: ({
props,
children,
isDragged
}) => /*#__PURE__*/React.createElement(Track, _extends({
onMouseDown: props.onMouseDown,
onTouchStart: props.onTouchStart,
$isDragged: isDragged
}, sharedProps, trackProps), /*#__PURE__*/React.createElement(InnerTrack, _extends({
$isDragged: isDragged,
ref: props.ref
}, sharedProps, innerTrackProps), children)),
renderThumb: ({
props,
index,
isDragged
}) => {
const displayLabel = persistentThumb ? persistentThumb : (!!index && isHovered1 || !index && isHovered0 || isDragged) && !disabled;
return /*#__PURE__*/React.createElement(Thumb, _extends({}, props, {
onMouseEnter: () => {
if (index === 0) {
setIsHovered0(true);
} else {
setIsHovered1(true);
}
},
onMouseLeave: () => {
if (index === 0) {
setIsHovered0(false);
} else {
setIsHovered1(false);
}
},
$thumbIndex: index,
$isDragged: isDragged,
style: {
...props.style,
zIndex: 'unset'
}
}, sharedProps, thumbProps, {
$isFocusVisible: isFocusVisible && focusedThumbIndex === index
}), displayLabel && /*#__PURE__*/React.createElement(ThumbValue, _extends({
$thumbIndex: index,
$isDragged: isDragged
}, sharedProps, thumbValueProps), valueToLabel(value[index])), displayLabel && /*#__PURE__*/React.createElement(InnerThumb, _extends({
$thumbIndex: index,
$isDragged: isDragged
}, sharedProps, innerThumbProps)));
}
}, marks ? {
// eslint-disable-next-line react/display-name
renderMark: ({
props,
index
}) => /*#__PURE__*/React.createElement(Mark, _extends({
$markIndex: index
}, props, sharedProps, markProps))
} : {})), /*#__PURE__*/React.createElement(TickBar, _extends({}, sharedProps, tickBarProps), /*#__PURE__*/React.createElement(Tick, _extends({}, sharedProps, tickProps), valueToLabel(min)), /*#__PURE__*/React.createElement(Tick, _extends({}, sharedProps, tickProps), valueToLabel(max))));
}
var _default = exports.default = Slider;