@gizwits/vantui
Version:
机智云组件库
317 lines • 12.4 kB
JavaScript
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
var _excluded = ["style", "title"];
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(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; }
import { throttle } from '../collapse-item';
import { View, Text } from '@tarojs/components';
import React, { useRef, useState, useMemo, useCallback, useEffect } from 'react';
import { getRect, nextTick } from '../common/utils';
import { uuid } from '../utils';
import './index.css';
import Taro, { useDidShow } from '@tarojs/taro';
import { jsx as _jsx } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
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__*/_jsx(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 = useState(value),
_useState2 = _slicedToArray(_useState, 2),
valueState = _useState2[0],
setValue = _useState2[1];
var domRef = useRef(null);
var propsId = useRef(id || uuid());
var touchState = useRef(false);
var positionRef = useRef({
left: 0,
width: 0
});
var labelsData = useMemo(function () {
if (labels === '') return [];
return labels.split(',');
}, [labels]);
var _tintColor = 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 = useCallback(function (data) {
onChange(data);
onComplete === null || onComplete === void 0 ? void 0 : onComplete(data);
// Taro.vibrateShort()
}, [onChange]);
var setRectToRef = function setRectToRef() {
nextTick(function () {
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
};
});
});
};
useEffect(function () {
setRectToRef();
}, []);
useDidShow(function () {
setRectToRef();
});
useEffect(function () {
if (touchState.current) return;
if (value !== valueState) {
setValue(value);
}
}, [value, setValue]);
var width = useMemo(function () {
return (valueState - min) / (max - min) * 100;
}, [valueState]);
var bgWidth = useMemo(function () {
// 实际渲染的宽度要稍微短一些，防止出现毛边
var res = width - 1;
if (res < 0) return 0;
return res;
}, [width]);
var onAdd = useCallback(function () {
var valueData = step + valueState;
if (valueData > max) {
valueData = max;
}
setValue(valueData);
onCompleteHandle(valueData);
}, [valueState, step, setValue]);
var onMinus = 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 = 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 = useCallback(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 = useCallback(function (e) {
var env = Taro.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 = useCallback(function (e) {
if (!touchState.current) {
return;
}
onTouchChange(e);
}, [onTouchChange]);
var onTouchEnd = useCallback(function (e) {
touchState.current = false;
onCompleteHandle(valueState);
}, [onCompleteHandle, valueState]);
var showTips = width > 20 && width <= 100;
var placeholderLength = 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__*/_jsx(View, {
className: "slider-container-wapper",
style: wapperStyles,
children: /*#__PURE__*/_jsxs(View, {
className: "slider-content-inner",
children: [showBtns && /*#__PURE__*/_jsx(_Fragment, {
children: /*#__PURE__*/_jsx(View, {
onClick: onMinus,
className: "slider-option-button",
children: "-"
})
}), /*#__PURE__*/_jsxs(View, {
style: {
height: height
},
className: "slider-wapper ".concat(radiusType),
children: [indicator == 'point' && /*#__PURE__*/_jsx(Point, {
indicatorColor: indicatorColor,
left: width / 100,
size: height - 3,
value: valuePosition === "indicator" ? value : undefined
}), showLabels && /*#__PURE__*/_jsx(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__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsxs(View, {
className: "placeholder",
children: [/*#__PURE__*/_jsx(View, {
style: style,
className: "placeholder-item"
}), /*#__PURE__*/_jsx(Text, {
className: "placeholder-text",
style: {
color: textColor
},
children: labelsData[index]
})]
}, index), !isEnd && /*#__PURE__*/_jsx(View, {
className: "placeholder-flex"
}, index)]
});
})
}), /*#__PURE__*/_jsx(View, {
ref: domRef,
onTouchStart: onTouchStart,
onTouchMove: onTouchMove,
onTouchEnd: onTouchEnd,
id: propsId.current,
className: "slider-container",
children: /*#__PURE__*/_jsx(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__*/_jsx(Text, {
className: "slider-value",
children: formatter ? formatter(valueState) : valueState
})
})
})]
}), showBtns && /*#__PURE__*/_jsx(_Fragment, {
children: /*#__PURE__*/_jsx(View, {
onClick: onAdd,
className: "slider-option-button",
children: "+"
})
}), showValue && valuePosition === "right" && /*#__PURE__*/_jsx(Text, {
className: "right-text",
children: value
})]
})
});
}
var SliderG = function SliderG(_ref3) {
var style = _ref3.style,
title = _ref3.title,
other = _objectWithoutProperties(_ref3, _excluded);
return /*#__PURE__*/_jsxs(View, {
style: _objectSpread({
display: 'flex',
flexDirection: 'column',
justifyContent: 'center'
}, style),
children: [/*#__PURE__*/_jsx(Text, {
style: {
color: other.textColor || '#b4c4d8',
padding: '10PX 30PX 0PX 30PX'
},
children: title
}), /*#__PURE__*/_jsx(SliderGT, _objectSpread({}, other))]
});
};
export default SliderG;
export { SliderG };