fomantic-ui-react
Version:
Fomantic-UI React -- A React Component Library.
216 lines (185 loc) • 8.74 kB
JavaScript
/**
* fomantic-ui-react v0.0.1-alpha.10
* (c) 2022 FireLoong <fireloong@foxmail.com>
* @license MIT
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var defineProperty = require('../_chunks/dep-6ab59a61.js');
var slicedToArray = require('../_chunks/dep-640599ea.js');
var objectWithoutProperties = require('../_chunks/dep-03754121.js');
var React = require('react');
var classNames = require('classnames');
var _util_useSlider = require('../_util/useSlider.js');
var _util_classNamesUniq = require('../_util/classNamesUniq.js');
var reactUse = require('react-use');
require('lodash');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
var _excluded = ["as", "className", "min", "max", "step", "start", "end", "range", "labeled", "labelType", "labelButtom", "labelDistance", "autoAdjustLabels", "ticked", "smooth", "vertical", "disabled", "inverted", "interpretLabel", "onChange", "onMove", "onStart", "children"];
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { defineProperty._defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var Slider = function Slider(_ref) {
var _ref$as = _ref.as,
as = _ref$as === void 0 ? "div" : _ref$as,
className = _ref.className,
_ref$min = _ref.min,
min = _ref$min === void 0 ? 0 : _ref$min,
_ref$max = _ref.max,
max = _ref$max === void 0 ? 20 : _ref$max,
_ref$step = _ref.step,
step = _ref$step === void 0 ? 1 : _ref$step,
_ref$start = _ref.start,
start = _ref$start === void 0 ? 0 : _ref$start;
_ref.end;
_ref.range;
var labeled = _ref.labeled,
_ref$labelType = _ref.labelType,
labelType = _ref$labelType === void 0 ? "number" : _ref$labelType,
labelButtom = _ref.labelButtom,
_ref$labelDistance = _ref.labelDistance,
labelDistance = _ref$labelDistance === void 0 ? 50 : _ref$labelDistance,
_ref$autoAdjustLabels = _ref.autoAdjustLabels,
autoAdjustLabels = _ref$autoAdjustLabels === void 0 ? true : _ref$autoAdjustLabels,
ticked = _ref.ticked,
smooth = _ref.smooth,
_ref$vertical = _ref.vertical,
vertical = _ref$vertical === void 0 ? false : _ref$vertical,
disabled = _ref.disabled,
inverted = _ref.inverted,
interpretLabel = _ref.interpretLabel,
onChange = _ref.onChange,
onMove = _ref.onMove,
onStart = _ref.onStart;
_ref.children;
var props = objectWithoutProperties._objectWithoutProperties(_ref, _excluded);
var _useState = React.useState(start),
_useState2 = slicedToArray._slicedToArray(_useState, 2),
sliderValue = _useState2[0],
setSliderValue = _useState2[1];
var _useMap = reactUse.useMap(),
_useMap2 = slicedToArray._slicedToArray(_useMap, 2),
fillStyles = _useMap2[0],
setFillStyle = _useMap2[1].set;
var _useMap3 = reactUse.useMap(),
_useMap4 = slicedToArray._slicedToArray(_useMap3, 2),
thumbStyles = _useMap4[0],
setThumbStyle = _useMap4[1].set;
var trackCss = reactUse.useCss({
"&>iframe": {
opacity: 0
}
});
var ref = React.useRef(null);
var state = _util_useSlider["default"](ref, {
start: (start - min) / (max - min),
vertical: vertical,
onScrubStop: function onScrubStop(value) {
if (!disabled) {
var startValue = value * (max - min) + min;
if (step > 0) {
onChange === null || onChange === void 0 ? void 0 : onChange(Math.round(startValue / step) * step, Math.round(startValue / step) * step);
} else {
onChange === null || onChange === void 0 ? void 0 : onChange(startValue, startValue);
}
}
},
onScrub: function onScrub(value) {
if (!disabled) {
var startValue = value * (max - min) + min;
setSliderValue(startValue);
if (step > 0) {
onMove === null || onMove === void 0 ? void 0 : onMove(Math.round(startValue / step) * step, Math.round(startValue / step) * step);
} else {
onMove === null || onMove === void 0 ? void 0 : onMove(startValue, startValue);
}
}
},
onScrubStart: function onScrubStart() {
onStart === null || onStart === void 0 ? void 0 : onStart();
}
});
React.useEffect(function () {
if (step === 0 || smooth) {
setFillStyle(vertical ? "top" : "left", "0%");
setFillStyle(vertical ? "bottom" : "right", "".concat(100 * (1 - state.value), "%"));
setThumbStyle(vertical ? "top" : "left", "calc(".concat(100 * state.value, "% - 10.5px)"));
setThumbStyle(vertical ? "bottom" : "right", "auto");
} else {
setFillStyle(vertical ? "top" : "left", "0%");
setFillStyle(vertical ? "bottom" : "right", "".concat(100 * (1 - (Math.round(sliderValue / step) * step - min) / (max - min)), "%"));
setThumbStyle(vertical ? "top" : "left", "calc(".concat(100 * (Math.round(sliderValue / step) * step - min) / (max - min), "% - 10.5px)"));
setThumbStyle(vertical ? "bottom" : "right", "auto");
}
}, [sliderValue]);
var _useSize = reactUse.useSize(function () {
return /* @__PURE__ */React__default["default"].createElement("div", {
className: classNames__default["default"]("track", trackCss)
});
}),
_useSize2 = slicedToArray._slicedToArray(_useSize, 2),
trackElement = _useSize2[0],
track = _useSize2[1];
if (!as) {
as = "div";
}
var alphabet = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
var numLabels = (max - min) / (step === 0 ? 1 : step);
var gapRatio = function gapRatio() {
var gapRatio2 = 1;
if (autoAdjustLabels) {
var trackLength = vertical ? track.height : track.width;
var gapCounter = 1;
if (trackLength && trackLength > 0) {
while (trackLength / numLabels * gapCounter < labelDistance * 2) {
if (!(numLabels % gapCounter)) {
gapRatio2 = gapCounter;
}
gapCounter += 1;
}
}
}
return gapRatio2;
};
var labelItems = [];
for (var i = 0; i <= numLabels; i++) {
var labelStr = void 0;
if (interpretLabel) {
labelStr = interpretLabel(i * step);
} else {
labelStr = labelType === "number" ? i * step : alphabet[i % 26];
}
labelItems[i] = /* @__PURE__ */React__default["default"].createElement("li", {
key: i,
className: classNames__default["default"]({
halftick: i % gapRatio()
}, "label"),
style: defineProperty._defineProperty({}, vertical ? "top" : "left", "calc(((100% - 7px) - 7px) * ".concat(step / (max - min) * i, " + 7px)"))
}, i % gapRatio() ? null : labelStr);
}
return /*#__PURE__*/React.createElement(as, _objectSpread({
ref: ref,
className: _util_classNamesUniq.uniq(classNames__default["default"]("ui", {
"bottom aligned": labelButtom,
labeled: labeled,
ticked: ticked,
vertical: vertical,
disabled: disabled,
inverted: inverted
}, "slider", className))
}, props), /* @__PURE__ */React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */React__default["default"].createElement("div", {
className: "inner"
}, trackElement, /* @__PURE__ */React__default["default"].createElement("div", {
className: "track-fill",
style: fillStyles
}), /* @__PURE__ */React__default["default"].createElement("div", {
className: "thumb",
style: thumbStyles
})), labeled && /* @__PURE__ */React__default["default"].createElement("ul", {
className: classNames__default["default"]("auto", "labels")
}, labelItems)));
};
Slider.displayName = "Slider";
exports["default"] = Slider;
//# sourceMappingURL=Slider.js.map