wix-style-react
Version:
wix-style-react
360 lines (358 loc) • 12.8 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");
var _utils = require("./utils");
var _excluded = ["gradientColor", "onFocus", "onBlur", "pushable", "allowCross", "value", "displayMarks", "direction", "startPoint", "dataHook", "id", "ariaLabelForHandle", "ariaLabelledByForHandle", "rtl", "className", "disabled", "rangeRef"];
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/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 _enhanceValue;
var {
gradientColor,
displayTooltip,
disabled,
marks,
dataHook,
direction,
onFocus,
onBlur,
enhanceValue
} = this.props;
var {
index,
value,
min,
max,
offset,
ref,
ariaLabel,
reverse,
ariaLabelledBy
} = handleProps;
var tooltipValue = (_enhanceValue = enhanceValue == null ? void 0 : enhanceValue(value)) !== null && _enhanceValue !== void 0 ? _enhanceValue : value.toString();
if (this._isCustomMarks()) {
if (marks.hasOwnProperty(value)) {
tooltipValue = marks[value].toString();
} else {
tooltipValue = enhanceValue == null ? void 0 : enhanceValue(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,
ariaLabelledBy: ariaLabelledBy,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 113,
columnNumber: 7
}
});
};
this._renderSlider = () => {
var _this$props = this.props,
{
gradientColor,
onFocus,
onBlur,
pushable,
allowCross,
value,
displayMarks,
direction,
startPoint,
dataHook,
id,
ariaLabelForHandle,
ariaLabelledByForHandle,
rtl,
className,
disabled,
rangeRef
} = _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, {
ref: rangeRef,
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,
allowCros: allowCross,
reverse: rtl,
ariaLabelGroupForHandles: ariaLabelForHandle,
ariaLabelledByGroupForHandles: ariaLabelledByForHandle,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 161,
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: 178,
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 _this$props$enhanceVa, _this$props$enhanceVa2, _this$props2;
var shouldRenderMarkLabel = entry === min || entry === max || entry === startPoint;
marksLabels[entry] = {
label: this._createMarkNode((_this$props$enhanceVa = (_this$props$enhanceVa2 = (_this$props2 = this.props).enhanceValue) == null ? void 0 : _this$props$enhanceVa2.call(_this$props2, entry)) !== null && _this$props$enhanceVa !== void 0 ? _this$props$enhanceVa : 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: 60,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: _SliderSt.classes.markLine,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 61,
columnNumber: 9
}
}), /*#__PURE__*/_react.default.createElement("div", {
className: _SliderSt.classes.markValue,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 62,
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: 64,
columnNumber: 13
}
}, value)));
}
render() {
var {
dataHook,
id,
direction,
className,
gradientColor
} = this.props;
var hasGradient = !!gradientColor;
var horizontal = direction !== 'vertical';
return /*#__PURE__*/_react.default.createElement("div", {
className: (0, _SliderSt.st)(_SliderSt.classes.root, {
hasGradient,
horizontal
}, className),
id: id,
"data-hook": dataHook,
"data-direction": direction,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 205,
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. */
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,
/** Provides access to the Range component's ref and its exposed methods. */
rangeRef: _propTypes.default.object,
/** 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]),
/** Converts value to a string, used to add prefix, suffix, etc */
enhanceValue: _propTypes.default.func,
/** 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 callbak for the slider's handle.
* ```javascript
* onFocus((handleValue) => ({}))
* ```
*/
onFocus: _propTypes.default.func,
/** Sets the onBlur callbak 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
};
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,
startPoint: undefined
};
//# sourceMappingURL=Slider.js.map