@gizwits/vantui
Version:
机智云组件库
209 lines • 8.33 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["valueKey", "itemHeight", "visibleItemCount", "initialOptions", "defaultIndex", "className", "style", "onChange", "index"];
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 { useEffect, useState, useCallback, useImperativeHandle, forwardRef, useRef } from 'react';
import { View, CustomWrapper } from '@tarojs/components';
import { nextTick } from '@tarojs/taro';
import * as utils from '../wxs/utils';
import { range } from '../common/utils';
import { isObj } from '../common/validator';
import * as computed from './wxs';
import { jsx as _jsx } from "react/jsx-runtime";
var DEFAULT_DURATION = 200;
function Index(props, ref) {
var valueKey = props.valueKey,
_props$itemHeight = props.itemHeight,
itemHeight = _props$itemHeight === void 0 ? 48 : _props$itemHeight,
_props$visibleItemCou = props.visibleItemCount,
visibleItemCount = _props$visibleItemCou === void 0 ? 5 : _props$visibleItemCou,
initialOptions = props.initialOptions,
defaultIndex = props.defaultIndex,
className = props.className,
style = props.style,
onChange = props.onChange,
curColIndex = props.index,
others = _objectWithoutProperties(props, _excluded);
var _useState = useState([]),
_useState2 = _slicedToArray(_useState, 2),
options = _useState2[0],
setOptions = _useState2[1];
var _useState3 = useState(),
_useState4 = _slicedToArray(_useState3, 2),
currentIndex = _useState4[0],
setCurrentIndex = _useState4[1];
var _useState5 = useState(0),
_useState6 = _slicedToArray(_useState5, 2),
duration = _useState6[0],
setDuration = _useState6[1];
var _useState7 = useState(0),
_useState8 = _slicedToArray(_useState7, 2),
startY = _useState8[0],
setStartY = _useState8[1];
var _useState9 = useState(0),
_useState10 = _slicedToArray(_useState9, 2),
offset = _useState10[0],
setOffset = _useState10[1];
var _useState11 = useState(0),
_useState12 = _slicedToArray(_useState11, 2),
startOffset = _useState12[0],
setStartOffset = _useState12[1];
var _useState13 = useState(true),
_useState14 = _slicedToArray(_useState13, 2),
canInit = _useState14[0],
setCanInit = _useState14[1];
var isMoving = useRef(false);
var isDisabled = useCallback(function (option) {
return isObj(option) && option.disabled;
}, []);
var adjustIndex = useCallback(function (index) {
var initialOptions_ = options.length ? options : initialOptions;
var count = initialOptions_.length;
index = range(index, 0, count);
for (var i = index; i < count; i++) {
if (!isDisabled(initialOptions_[i])) {
return i;
}
}
for (var _i = index - 1; _i >= 0; _i--) {
if (!isDisabled(initialOptions_[_i])) {
return _i;
}
}
}, [isDisabled, options, initialOptions]);
var setIndex = useCallback(function (index, userAction) {
index = adjustIndex(index) || 0;
var offset = -index * Number(itemHeight);
if (index !== currentIndex) {
setCurrentIndex(index);
setOffset(offset);
if (onChange && userAction) {
nextTick(function () {
onChange(curColIndex);
});
}
return;
}
return setOffset(offset);
}, [adjustIndex, curColIndex, currentIndex, itemHeight, onChange]);
useEffect(function () {
setCurrentIndex(defaultIndex);
setIndex(defaultIndex || 0);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
useEffect(function () {
if (canInit) {
setOptions(initialOptions || []);
}
}, [canInit, initialOptions]);
var onTouchMove = useCallback(function (event) {
event.preventDefault();
if (!isMoving.current) isMoving.current = true;
var deltaY = event.touches[0].clientY - startY;
setOffset(startOffset + deltaY);
}, [startOffset, itemHeight, options, startY]);
var onTouchStart = useCallback(function (event) {
setStartY(event.touches[0].clientY);
setStartOffset(offset);
setDuration(0);
}, [offset]);
var onTouchEnd = useCallback(function () {
var indexCount = offset - startOffset > 0 ? Math.floor : Math.ceil;
setDuration(DEFAULT_DURATION);
var index = range(indexCount(-offset / Number(itemHeight)), 0, options.length - 1);
setTimeout(function () {
setIndex(index, true);
if (isMoving.current) isMoving.current = false;
}, 5.5);
}, [startOffset, offset, itemHeight, options.length, setIndex]);
var onClickItem = useCallback(function (event) {
var index = event.currentTarget.dataset.index;
if (!isMoving.current) {
setTimeout(function () {
setIndex(Number(index), true);
}, 100);
}
}, [setIndex]);
var getCurrentIndex = useCallback(function () {
return currentIndex;
}, [currentIndex]);
var getValue = useCallback(function () {
return options[currentIndex];
}, [options, currentIndex]);
var getOptionText = useCallback(function (option) {
return isObj(option) && valueKey && valueKey in option ? option[valueKey] : option;
}, [valueKey]);
var setValue = useCallback(function (value) {
for (var i = 0; i < options.length; i++) {
if (getOptionText(options[i]) === value) {
return setIndex(i);
}
}
return Promise.resolve();
}, [setIndex, getOptionText, options]);
useImperativeHandle(ref, function () {
return {
getCurrentIndex: getCurrentIndex,
getValue: getValue,
setValue: setValue,
props: props,
setIndex: setIndex,
set: function set(opt) {
return new Promise(function (resolve) {
setOptions(opt.options);
setCanInit(false);
resolve();
});
}
};
});
var renderColumn = /*#__PURE__*/_jsx(View, {
style: computed.wrapperStyle({
offset: offset,
itemHeight: itemHeight,
visibleItemCount: visibleItemCount,
duration: duration
}),
onTouchStart: onTouchStart,
onTouchMove: onTouchMove,
onTouchEnd: onTouchEnd,
onTouchCancel: onTouchEnd,
children: options.map(function (option, index) {
return /*#__PURE__*/_jsx(View, {
"disable-scroll": true,
"data-index": index,
style: {
height: itemHeight + 'px'
},
className: 'van-ellipsis ' + utils.bem('picker-column__item', {
disabled: option && option.disabled,
selected: index === currentIndex
}) + ' ' + (index === currentIndex ? 'active-class' : ''),
onClick: onClickItem,
children: computed.optionText(option, valueKey)
}, "picker-column__item".concat(index));
})
});
return /*#__PURE__*/_jsx(View, _objectSpread(_objectSpread({
className: "van-picker-column ".concat(className),
style: utils.style([computed.rootStyle({
itemHeight: itemHeight,
visibleItemCount: visibleItemCount
}), style])
}, others), {}, {
children: process.env.TARO_ENV === 'weapp' ? /*#__PURE__*/_jsx(View, {
children: /*#__PURE__*/_jsx(CustomWrapper, {
children: /*#__PURE__*/_jsx(View, {
children: renderColumn
})
})
}) : /*#__PURE__*/_jsx(View, {
children: renderColumn
})
}));
}
var PickerColumn = /*#__PURE__*/forwardRef(Index);
export { PickerColumn };
export default PickerColumn;