@wix/design-system
Version:
@wix/design-system
360 lines (357 loc) • 12.2 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _rcSlider = _interopRequireDefault(require("rc-slider"));
var _constants = require("./constants");
var _generateId = require("../utils/generateId");
var _SliderHandle = _interopRequireDefault(require("./SliderHandle"));
var _Text = _interopRequireDefault(require("../Text"));
var _SliderSt = require("./Slider.st.css.js");
var _utils = require("./utils");
var _excluded = ["gradientColor", "onFocus", "onBlur", "pushable", "allowCross", "value", "displayMarks", "direction", "startPoint", "dataHook", "id", "ariaLabelForHandle", "rtl", "className", "disabled"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Slider/Slider.js";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var range = _ref => {
var {
min,
max,
step
} = _ref;
var arr = [];
for (var i = min; i <= max; i += step) {
arr.push(i);
}
return arr;
};
/**
* A slider component with multi-range support
*/
class Slider extends _react.Component {
constructor() {
super(...arguments);
this._renderHandle = handleProps => {
var {
gradientColor,
displayTooltip,
disabled,
marks,
dataHook,
direction,
onFocus,
onBlur,
formatValue
} = this.props;
var {
index,
value,
min,
max,
offset,
ref,
ariaLabel,
reverse
} = handleProps;
var tooltipValue;
if (this._isCustomMarks()) {
if (marks.hasOwnProperty(value)) {
tooltipValue = marks[value].toString();
}
} else {
tooltipValue = formatValue(value);
}
return /*#__PURE__*/_react.default.createElement(_SliderHandle.default, {
key: index,
gradientColor: gradientColor,
disabled: disabled,
displayTooltip: displayTooltip,
tooltipValue: tooltipValue,
handleProps: {
ref,
offset,
min,
max,
value,
reverse,
ariaLabel
},
index: index,
dataHook: dataHook,
direction: direction,
onBlurCustom: onBlur,
onFocusCustom: onFocus,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 101,
columnNumber: 7
}
});
};
this._renderSlider = () => {
var _this$props = this.props,
{
gradientColor,
onFocus,
onBlur,
pushable,
allowCross,
value,
displayMarks,
direction,
startPoint,
dataHook,
id,
ariaLabelForHandle,
rtl,
className,
disabled
} = _this$props,
rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
return Array.isArray(value) && value.length > 1 ? /*#__PURE__*/_react.default.createElement(_rcSlider.default.Range, (0, _extends2.default)({}, rest, {
disabled: disabled,
vertical: direction === 'vertical',
railStyle: (0, _utils.getRailStyle)({
gradientColor,
disabled,
direction
}),
prefixCls: "wsr-slider",
handle: this._renderHandle,
marks: displayMarks ? this._getMarks() : {},
value: value,
pushable: pushable,
allowCross: allowCross,
reverse: rtl,
ariaLabelGroupForHandles: ariaLabelForHandle,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 146,
columnNumber: 7
}
})) : /*#__PURE__*/_react.default.createElement(_rcSlider.default, (0, _extends2.default)({}, rest, {
disabled: disabled,
vertical: direction === 'vertical',
railStyle: (0, _utils.getRailStyle)({
gradientColor,
disabled,
direction
}),
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,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 161,
columnNumber: 7
}
}));
};
}
_getMarks() {
var marksLabels = {};
if (this._isCustomMarks()) {
var {
marks
} = this.props;
Object.entries(marks).forEach(_ref2 => {
var [key, value] = _ref2;
marksLabels[key] = {
label: this._createMarkNode(value, true)
};
});
} else {
var {
min,
max,
step,
startPoint
} = this.props;
range({
min,
max,
step
}).forEach(entry => {
var shouldRenderMarkLabel = entry === min || entry === max || entry === startPoint;
marksLabels[entry] = {
label: this._createMarkNode(entry, shouldRenderMarkLabel)
};
});
}
return marksLabels;
}
_isCustomMarks() {
var {
marks
} = this.props;
return Object.entries(marks).length > 0;
}
_createMarkNode(value, shouldRenderMarkLabel) {
return /*#__PURE__*/_react.default.createElement("div", {
className: (0, _SliderSt.st)(_SliderSt.classes.mark, {
direction: this.props.direction
}),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 57,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: _SliderSt.classes.markLine,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 58,
columnNumber: 9
}
}), /*#__PURE__*/_react.default.createElement("div", {
className: _SliderSt.classes.markValue,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 59,
columnNumber: 9
}
}, shouldRenderMarkLabel && /*#__PURE__*/_react.default.createElement(_Text.default, {
className: _SliderSt.classes.markLabel,
dataHook: _constants.dataHooks.sliderMarkLabel,
weight: "thin",
size: "small",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 61,
columnNumber: 13
}
}, value)));
}
render() {
var {
dataHook,
id,
direction,
className,
gradientColor,
marksLabelAlignment
} = this.props;
var hasGradient = !!gradientColor;
var horizontal = direction !== 'vertical';
return /*#__PURE__*/_react.default.createElement("div", {
className: (0, _SliderSt.st)(_SliderSt.classes.root, {
hasGradient,
horizontal,
marksLabelAlignment
}, className),
id: id,
"data-hook": dataHook,
"data-direction": direction,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 195,
columnNumber: 7
}
}, this._renderSlider());
}
}
exports.default = Slider;
Slider.displayName = 'Slider';
Slider.propTypes = {
/** Allows sliders handles to cross. */
allowCross: _propTypes.default.bool,
/** Applies a data-hook HTML attribute that can be used in the tests. */
dataHook: _propTypes.default.string,
/** Specifies a CSS class name to be appended to the component’s root element.
* @internal
*/
className: _propTypes.default.string,
/** Controls the visibility of the marks. */
displayMarks: _propTypes.default.bool,
/** Controls visibility of slide handle tooltip */
displayTooltip: _propTypes.default.bool,
/** Assigns an unique identifier for the root element. */
id: _propTypes.default.string,
/** Sets the absolute maximum value of sliders range. */
max: _propTypes.default.number,
/** Sets the absolute minimum value of the sliders range. */
min: _propTypes.default.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.default.object,
/** Defines a callback function which will be called when ontouchend or onmouseup is triggered. */
onAfterChange: _propTypes.default.func,
/** Defines a callback function which will be called when ontouchstart or onmousedown is triggered. */
onBeforeChange: _propTypes.default.func,
/** Defines a callback function which is called upon every value change. */
onChange: _propTypes.default.func.isRequired,
/** Adjust component for RTL. */
rtl: _propTypes.default.bool,
/** Specifies the interval between range values. */
step: _propTypes.default.number,
/** Push surrounding handles when moving a handle (relevant for multi value sliders only). Number specifies a minimum distance between handles. */
pushable: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.number]),
/** Specifies the selected value. */
value: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.number), _propTypes.default.number]),
/** Specifies whether interactions are disabled. */
disabled: _propTypes.default.bool,
/** Specifies the starting value of a track. If undefined, the minimum value of a range is used as a starting point. */
startPoint: _propTypes.default.number,
/** Sets slider direction in either horizontal way or vertical */
direction: _propTypes.default.oneOf(['vertical', 'horizontal']),
/** Set the aria-label attributes for slider handles. */
ariaLabelForHandle: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.string]),
/** Sets the onFocus callback for the slider's handle.
* ```javascript
* onFocus((handleValue) => ({}))
* ```
*/
onFocus: _propTypes.default.func,
/** Sets the onBlur callback for the slider's handle.
* ```javascript
* onBlur((handleValue) => ({}))
* ```
*/
onBlur: _propTypes.default.func,
/** Converts slider to a slider with a gradient background. RGB, HEX formats or color names are accepted.
* ```javascript
* gradientColor="rgb(105, 110, 28)"
* gradientColor="#FFAC4B"
* gradientColor="pink"
* ```
* If color cannot be parsed, fallback color will be applied */
gradientColor: _propTypes.default.string,
/** Sets the alignment of the marks labels. */
marksLabelAlignment: _propTypes.default.oneOf(['center', 'inside']),
/** Formats the raw value for display in tooltip. */
formatValue: _propTypes.default.func
};
Slider.defaultProps = {
min: 1,
max: 20,
step: 1,
value: 3,
allowCross: true,
id: (0, _generateId.generateID)(),
displayTooltip: true,
displayMarks: true,
marks: {},
rtl: false,
disabled: false,
direction: 'horizontal',
startPoint: undefined,
marksLabelAlignment: 'center',
formatValue: value => value.toString()
};
//# sourceMappingURL=Slider.js.map