@gizwits/vantui
Version:
机智云组件库
326 lines (325 loc) • 14.7 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.SliderG = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _collapseItem = require("../collapse-item");
var _components = require("@tarojs/components");
var _react = _interopRequireWildcard(require("react"));
var _utils = require("../common/utils");
var _utils2 = require("../utils");
require("./index.css");
var _taro = _interopRequireWildcard(require("@tarojs/taro"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["style", "title"];
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
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) { (0, _defineProperty2.default)(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 POINT_WIDTH = 16;
var BOX_PADDING = 4;
var Point = function Point(_ref) {
var left = _ref.left,
size = _ref.size,
value = _ref.value,
indicatorColor = _ref.indicatorColor;
var translateX = -POINT_WIDTH;
if (left <= 0.06) {
translateX = BOX_PADDING;
left = 0;
}
if (left === 0) {
translateX = BOX_PADDING;
}
if (left === 1) {
translateX = -(size + BOX_PADDING);
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
style: {
left: "".concat(left * 100, "%"),
transform: "translateX(".concat(translateX, "px)"),
width: size,
height: size,
display: "flex",
justifyContent: "center",
alignItems: "center",
backgroundColor: indicatorColor
},
className: "slider-point",
children: value
});
};
function SliderGT(_ref2) {
var value = _ref2.value,
max = _ref2.max,
min = _ref2.min,
_ref2$labels = _ref2.labels,
labels = _ref2$labels === void 0 ? '' : _ref2$labels,
_ref2$showValue = _ref2.showValue,
showValue = _ref2$showValue === void 0 ? false : _ref2$showValue,
_ref2$placeholder = _ref2.placeholder,
placeholder = _ref2$placeholder === void 0 ? false : _ref2$placeholder,
_ref2$tintColor = _ref2.tintColor,
tintColor = _ref2$tintColor === void 0 ? '#0099FF' : _ref2$tintColor,
_ref2$textColor = _ref2.textColor,
textColor = _ref2$textColor === void 0 ? '#b4c4d8' : _ref2$textColor,
_ref2$radiusType = _ref2.radiusType,
radiusType = _ref2$radiusType === void 0 ? 'round' : _ref2$radiusType,
_ref2$indicator = _ref2.indicator,
indicator = _ref2$indicator === void 0 ? 'point' : _ref2$indicator,
_ref2$indicatorColor = _ref2.indicatorColor,
indicatorColor = _ref2$indicatorColor === void 0 ? "#fff" : _ref2$indicatorColor,
_ref2$wapperStyle = _ref2.wapperStyle,
wapperStyle = _ref2$wapperStyle === void 0 ? {} : _ref2$wapperStyle,
onChange = _ref2.onChange,
step = _ref2.step,
id = _ref2.id,
formatter = _ref2.formatter,
_ref2$height = _ref2.height,
height = _ref2$height === void 0 ? 35 : _ref2$height,
onComplete = _ref2.onComplete,
_ref2$valuePosition = _ref2.valuePosition,
valuePosition = _ref2$valuePosition === void 0 ? "left" : _ref2$valuePosition,
_ref2$showBtns = _ref2.showBtns,
showBtns = _ref2$showBtns === void 0 ? false : _ref2$showBtns;
var _useState = (0, _react.useState)(value),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
valueState = _useState2[0],
setValue = _useState2[1];
var domRef = (0, _react.useRef)(null);
var propsId = (0, _react.useRef)(id || (0, _utils2.uuid)());
var touchState = (0, _react.useRef)(false);
var positionRef = (0, _react.useRef)({
left: 0,
width: 0
});
var labelsData = (0, _react.useMemo)(function () {
if (labels === '') return [];
return labels.split(',');
}, [labels]);
var _tintColor = (0, _react.useMemo)(function () {
if (Array.isArray(tintColor)) {
var startColor = tintColor[0];
var endColor = tintColor[1];
return "linear-gradient(to right, ".concat(startColor, ", ").concat(endColor, ")");
}
return tintColor;
}, [tintColor]);
var onCompleteHandle = (0, _react.useCallback)(function (data) {
onChange(data);
onComplete === null || onComplete === void 0 ? void 0 : onComplete(data);
// Taro.vibrateShort()
}, [onChange]);
var setRectToRef = function setRectToRef() {
(0, _utils.nextTick)(function () {
(0, _utils.getRect)(null, "#".concat(propsId.current)).then(function () {
var rect = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
left: 0,
width: 0
};
positionRef.current = {
left: rect.left,
width: rect.width
};
});
});
};
(0, _react.useEffect)(function () {
setRectToRef();
}, []);
(0, _taro.useDidShow)(function () {
setRectToRef();
});
(0, _react.useEffect)(function () {
if (touchState.current) return;
if (value !== valueState) {
setValue(value);
}
}, [value, setValue]);
var width = (0, _react.useMemo)(function () {
return (valueState - min) / (max - min) * 100;
}, [valueState]);
var bgWidth = (0, _react.useMemo)(function () {
// 实际渲染的宽度要稍微短一些，防止出现毛边
var res = width - 1;
if (res < 0) return 0;
return res;
}, [width]);
var onAdd = (0, _react.useCallback)(function () {
var valueData = step + valueState;
if (valueData > max) {
valueData = max;
}
setValue(valueData);
onCompleteHandle(valueData);
}, [valueState, step, setValue]);
var onMinus = (0, _react.useCallback)(function () {
var valueData = valueState - step;
// 0 作为占位
if (valueData < min) {
return;
}
if (valueData < min) {
valueData = min;
}
setValue(valueData);
onCompleteHandle(valueData);
}, [valueState, step, setValue]);
var getValue = (0, _react.useCallback)(function (ratio) {
if (step) {
return Math.max(min, Math.min(max, min + Math.round(ratio * (max - min) / step) * step));
}
return Math.max(min, Math.min(max, ratio * (max - min) + min));
}, [step, min, max]);
var onTouchChange = (0, _react.useCallback)((0, _collapseItem.throttle)(function (e) {
var offsetX = e.touches[0].pageX - positionRef.current.left;
var newValue = getValue(offsetX / positionRef.current.width);
// 0 作为占位
if (newValue < min) {
return;
}
setValue(newValue);
onChange(newValue);
}, 16.6), [getValue, setValue]);
var onTouchStart = (0, _react.useCallback)(function (e) {
var env = _taro.default.getEnv();
if (env === "WEB") {
var _e$target, _e$target2;
if ((e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.id) !== propsId.current && (e === null || e === void 0 ? void 0 : (_e$target2 = e.target) === null || _e$target2 === void 0 ? void 0 : _e$target2.id) !== "".concat(propsId.current, "-inner")) return;
} else {
var _e$mpEvent, _e$mpEvent$target, _e$mpEvent2, _e$mpEvent2$target;
if (((_e$mpEvent = e.mpEvent) === null || _e$mpEvent === void 0 ? void 0 : (_e$mpEvent$target = _e$mpEvent.target) === null || _e$mpEvent$target === void 0 ? void 0 : _e$mpEvent$target.id) !== propsId.current && ((_e$mpEvent2 = e.mpEvent) === null || _e$mpEvent2 === void 0 ? void 0 : (_e$mpEvent2$target = _e$mpEvent2.target) === null || _e$mpEvent2$target === void 0 ? void 0 : _e$mpEvent2$target.id) !== "".concat(propsId.current, "-inner")) return;
}
touchState.current = true;
e.stopPropagation();
onTouchChange(e);
}, [onTouchChange]);
var onTouchMove = (0, _react.useCallback)(function (e) {
if (!touchState.current) {
return;
}
onTouchChange(e);
}, [onTouchChange]);
var onTouchEnd = (0, _react.useCallback)(function (e) {
touchState.current = false;
onCompleteHandle(valueState);
}, [onCompleteHandle, valueState]);
var showTips = width > 20 && width <= 100;
var placeholderLength = (0, _react.useMemo)(function () {
return parseInt("".concat((max - min) / step), 10) + 1;
}, [min, max, step]);
var showLabels = placeholder && labelsData.length > 0;
var wapperStyles = {};
if (showLabels) {
wapperStyles.paddingBottom = 20;
}
wapperStyles = _objectSpread(_objectSpread({}, wapperStyles), wapperStyle);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: "slider-container-wapper",
style: wapperStyles,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
className: "slider-content-inner",
children: [showBtns && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
onClick: onMinus,
className: "slider-option-button",
children: "-"
})
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
style: {
height: height
},
className: "slider-wapper ".concat(radiusType),
children: [indicator == 'point' && /*#__PURE__*/(0, _jsxRuntime.jsx)(Point, {
indicatorColor: indicatorColor,
left: width / 100,
size: height - 3,
value: valuePosition === "indicator" ? value : undefined
}), showLabels && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: "slider-placeholder",
children: new Array(placeholderLength).fill(0).map(function (_, index) {
var style = {};
var isEnd = index == placeholderLength - 1;
if (isEnd) {
// style = {
// left: -rpxToPx(27),
// }
}
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
className: "placeholder",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
style: style,
className: "placeholder-item"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Text, {
className: "placeholder-text",
style: {
color: textColor
},
children: labelsData[index]
})]
}, index), !isEnd && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: "placeholder-flex"
}, index)]
});
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
ref: domRef,
onTouchStart: onTouchStart,
onTouchMove: onTouchMove,
onTouchEnd: onTouchEnd,
id: propsId.current,
className: "slider-container",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
id: "".concat(propsId.current, "-inner"),
className: "slider-inner ".concat(indicator === 'point' ? 'point' : ''),
style: {
width: "".concat(bgWidth, "%"),
background: _tintColor
},
children: showValue && showTips && valuePosition === "left" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Text, {
className: "slider-value",
children: formatter ? formatter(valueState) : valueState
})
})
})]
}), showBtns && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
onClick: onAdd,
className: "slider-option-button",
children: "+"
})
}), showValue && valuePosition === "right" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Text, {
className: "right-text",
children: value
})]
})
});
}
var SliderG = function SliderG(_ref3) {
var style = _ref3.style,
title = _ref3.title,
other = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
style: _objectSpread({
display: 'flex',
flexDirection: 'column',
justifyContent: 'center'
}, style),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Text, {
style: {
color: other.textColor || '#b4c4d8',
padding: '10PX 30PX 0PX 30PX'
},
children: title
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(SliderGT, _objectSpread({}, other))]
});
};
exports.SliderG = SliderG;
var _default = SliderG;
exports.default = _default;