wix-style-react
Version:
304 lines (259 loc) • 10.7 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
var _excluded = ["pushable", "allowCross", "value", "displayMarks", "direction", "startPoint", "dataHook", "id", "ariaLabelForHandle", "rtl", "className"];
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Slide from 'rc-slider';
import { dataHooks } from './constants';
import { generateID } from '../utils/generateId';
import SliderHandle from './SliderHandle';
import Text from '../Text';
import { st, classes } from './Slider.st.css';
var range = function range(_ref) {
var min = _ref.min,
max = _ref.max,
step = _ref.step;
var arr = [];
for (var i = min; i <= max; i += step) {
arr.push(i);
}
return arr;
};
/**
* A slider component with multi-range support
*/
var Slider = /*#__PURE__*/function (_Component) {
_inherits(Slider, _Component);
var _super = _createSuper(Slider);
function Slider() {
var _this;
_classCallCheck(this, Slider);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _super.call.apply(_super, [this].concat(args));
_defineProperty(_assertThisInitialized(_this), "_renderHandle", function (handleProps) {
var _this$props = _this.props,
displayTooltip = _this$props.displayTooltip,
disabled = _this$props.disabled,
marks = _this$props.marks,
dataHook = _this$props.dataHook,
direction = _this$props.direction;
var index = handleProps.index,
value = handleProps.value,
min = handleProps.min,
max = handleProps.max,
offset = handleProps.offset,
ref = handleProps.ref,
ariaLabel = handleProps.ariaLabel,
reverse = handleProps.reverse;
var tooltipValue;
if (_this._isCustomMarks()) {
if (marks.hasOwnProperty(value)) {
tooltipValue = marks[value].toString();
}
} else {
tooltipValue = value.toString();
}
return /*#__PURE__*/React.createElement(SliderHandle, {
key: index,
disabled: disabled,
displayTooltip: displayTooltip,
tooltipValue: tooltipValue,
handleProps: {
ref: ref,
offset: offset,
min: min,
max: max,
value: value,
reverse: reverse,
ariaLabel: ariaLabel
},
index: index,
dataHook: dataHook,
direction: direction
});
});
_defineProperty(_assertThisInitialized(_this), "_renderSlider", function () {
var _this$props2 = _this.props,
pushable = _this$props2.pushable,
allowCross = _this$props2.allowCross,
value = _this$props2.value,
displayMarks = _this$props2.displayMarks,
direction = _this$props2.direction,
startPoint = _this$props2.startPoint,
dataHook = _this$props2.dataHook,
id = _this$props2.id,
ariaLabelForHandle = _this$props2.ariaLabelForHandle,
rtl = _this$props2.rtl,
className = _this$props2.className,
rest = _objectWithoutProperties(_this$props2, _excluded);
return Array.isArray(value) && value.length > 1 ? /*#__PURE__*/React.createElement(Slide.Range, _extends({}, rest, {
vertical: direction === 'vertical',
prefixCls: "wsr-slider",
handle: _this._renderHandle,
marks: displayMarks ? _this._getMarks() : {},
value: value,
pushable: pushable,
allowCros: allowCross,
reverse: rtl,
ariaLabelGroupForHandles: ariaLabelForHandle
})) : /*#__PURE__*/React.createElement(Slide, _extends({}, rest, {
vertical: direction === 'vertical',
prefixCls: "wsr-slider",
startPoint: startPoint,
handle: _this._renderHandle,
marks: displayMarks ? _this._getMarks() : {},
value: Array.isArray(value) ? value[0] : value,
reverse: rtl,
ariaLabelForHandle: Array.isArray(ariaLabelForHandle) ? ariaLabelForHandle[0] : ariaLabelForHandle
}));
});
return _this;
}
_createClass(Slider, [{
key: "_getMarks",
value: function _getMarks() {
var _this2 = this;
var marksLabels = {};
if (this._isCustomMarks()) {
var marks = this.props.marks;
Object.entries(marks).forEach(function (_ref2) {
var _ref3 = _slicedToArray(_ref2, 2),
key = _ref3[0],
value = _ref3[1];
marksLabels[key] = {
label: _this2._createMarkNode(value, true)
};
});
} else {
var _this$props3 = this.props,
min = _this$props3.min,
max = _this$props3.max,
step = _this$props3.step,
startPoint = _this$props3.startPoint;
range({
min: min,
max: max,
step: step
}).forEach(function (entry) {
var shouldRenderMarkLabel = entry === min || entry === max || entry === startPoint;
marksLabels[entry] = {
label: _this2._createMarkNode(entry, shouldRenderMarkLabel)
};
});
}
return marksLabels;
}
}, {
key: "_isCustomMarks",
value: function _isCustomMarks() {
var marks = this.props.marks;
return Object.entries(marks).length > 0;
}
}, {
key: "_createMarkNode",
value: function _createMarkNode(value, shouldRenderMarkLabel) {
return /*#__PURE__*/React.createElement("div", {
className: st(classes.mark, {
direction: this.props.direction
})
}, /*#__PURE__*/React.createElement("div", {
className: classes.markLine
}), /*#__PURE__*/React.createElement("div", {
className: classes.markValue
}, shouldRenderMarkLabel && /*#__PURE__*/React.createElement(Text, {
className: classes.markLabel,
dataHook: dataHooks.sliderMarkLabel,
weight: "thin",
size: "small"
}, value)));
}
}, {
key: "render",
value: function render() {
var _this$props4 = this.props,
dataHook = _this$props4.dataHook,
id = _this$props4.id,
direction = _this$props4.direction,
className = _this$props4.className;
return /*#__PURE__*/React.createElement("div", {
className: st(classes.root, className),
id: id,
"data-hook": dataHook,
"data-direction": direction
}, this._renderSlider());
}
}]);
return Slider;
}(Component);
export { Slider as default };
Slider.displayName = 'Slider';
Slider.propTypes = {
/** Allows sliders handles to cross. */
allowCross: PropTypes.bool,
/** Applies a data-hook HTML attribute that can be used in the tests. */
dataHook: PropTypes.string,
/** Specifies a CSS class name to be appended to the component’s root element. */
className: PropTypes.string,
/** Controls the visibility of the marks. */
displayMarks: PropTypes.bool,
/** Controls visibility of slide handle tooltip */
displayTooltip: PropTypes.bool,
/** Assigns an unique identifier for the root element. */
id: PropTypes.string,
/** Sets the absolute maximum value of sliders range. */
max: PropTypes.number,
/** Sets the absolute minimum value of the sliders range. */
min: PropTypes.number,
/** Specifies slider marks. The key determines the position, and the value determines what will show. The object structure should be either
* ```{ number : number}``` / ```{ number : string }```
* */
marks: PropTypes.object,
/** Defines a callback function which will be called when ontouchend or onmouseup is triggered. */
onAfterChange: PropTypes.func,
/** Defines a callback function which will be called when ontouchstart or onmousedown is triggered. */
onBeforeChange: PropTypes.func,
/** Defines a callback function which is called upon every value change. */
onChange: PropTypes.func.isRequired,
/** Adjust component for RTL. */
rtl: PropTypes.bool,
/** Specifies the interval between range values. */
step: PropTypes.number,
/** Push surrounding handles when moving a handle (relevant for multi value sliders only). Number specifies a minimum distance between handles. */
pushable: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
/** Specifies the selected value. */
value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
/** Specifies whether interactions are disabled. */
disabled: PropTypes.bool,
/** Specifies the starting value of a track. If undefined, the minimum value of a range is used as a starting point. */
startPoint: PropTypes.number,
/** Sets slider direction in either horizontal way or vertical */
direction: PropTypes.oneOf(['vertical', 'horizontal']),
/** Set the aria-label attributes for slider handles. */
ariaLabelForHandle: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.string])
};
Slider.defaultProps = {
min: 1,
max: 20,
step: 1,
value: 3,
allowCross: true,
id: generateID(),
displayTooltip: true,
displayMarks: true,
marks: {},
rtl: false,
disabled: false,
startPoint: undefined
};