@antmjs/vantui
Version:
一套适用于Taro3及React的vantui组件库
226 lines (225 loc) • 11 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.PickerColumn = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = require("react");
var _components = require("@tarojs/components");
var _taro = require("@tarojs/taro");
var utils = _interopRequireWildcard(require("../wxs/utils"));
var _utils2 = require("../common/utils");
var _validator = require("../common/validator");
var computed = _interopRequireWildcard(require("./wxs"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["valueKey", "idKey", "itemHeight", "visibleItemCount", "initialOptions", "defaultIndex", "className", "style", "onChange", "index"];
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 DEFAULT_DURATION = 200;
function Index(props, ref) {
var valueKey = props.valueKey,
_props$idKey = props.idKey,
idKey = _props$idKey === void 0 ? 'text' : _props$idKey,
_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 = (0, _objectWithoutProperties2.default)(props, _excluded);
var _useState = (0, _react.useState)([]),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
options = _useState2[0],
setOptions = _useState2[1];
var _useState3 = (0, _react.useState)(),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
currentIndex = _useState4[0],
setCurrentIndex = _useState4[1];
var _useState5 = (0, _react.useState)(0),
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
duration = _useState6[0],
setDuration = _useState6[1];
var _useState7 = (0, _react.useState)(0),
_useState8 = (0, _slicedToArray2.default)(_useState7, 2),
startY = _useState8[0],
setStartY = _useState8[1];
var _useState9 = (0, _react.useState)(0),
_useState10 = (0, _slicedToArray2.default)(_useState9, 2),
offset = _useState10[0],
setOffset = _useState10[1];
var _useState11 = (0, _react.useState)(0),
_useState12 = (0, _slicedToArray2.default)(_useState11, 2),
startOffset = _useState12[0],
setStartOffset = _useState12[1];
var _useState13 = (0, _react.useState)(true),
_useState14 = (0, _slicedToArray2.default)(_useState13, 2),
canInit = _useState14[0],
setCanInit = _useState14[1];
var isMoving = (0, _react.useRef)(false);
var isDisabled = (0, _react.useCallback)(function (option) {
return (0, _validator.isObj)(option) && option.disabled;
}, []);
var adjustIndex = (0, _react.useCallback)(function (index) {
var initialOptions_ = options !== null && options !== void 0 && options.length ? options : initialOptions;
if (!initialOptions_) return 0;
var count = initialOptions_.length;
index = (0, _utils2.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 = (0, _react.useCallback)(function (index, userAction) {
index = adjustIndex(index) || 0;
var offset = -index * Number(itemHeight);
if (index !== currentIndex) {
setCurrentIndex(index);
setOffset(offset);
if (onChange && userAction) {
(0, _taro.nextTick)(function () {
onChange(curColIndex);
});
}
return;
}
return setOffset(offset);
}, [adjustIndex, curColIndex, currentIndex, itemHeight, onChange]);
(0, _react.useEffect)(function () {
setCurrentIndex(defaultIndex);
setIndex(defaultIndex || 0);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
(0, _react.useEffect)(function () {
if (canInit) {
setOptions(Array.isArray(initialOptions) ? initialOptions : initialOptions ? [initialOptions] : []);
}
}, [canInit, initialOptions]);
var onTouchMove = (0, _react.useCallback)(function (event) {
event.preventDefault();
event.stopPropagation();
if (!isMoving.current) isMoving.current = true;
var deltaY = event.touches[0].clientY - startY;
setOffset(startOffset + deltaY);
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[startOffset, itemHeight, options, startY]);
var onTouchStart = (0, _react.useCallback)(function (event) {
setStartY(event.touches[0].clientY);
setStartOffset(offset);
setDuration(0);
}, [offset]);
var onTouchEnd = (0, _react.useCallback)(function () {
var indexCount = offset - startOffset > 0 ? Math.floor : Math.ceil;
setDuration(DEFAULT_DURATION);
var index = (0, _utils2.range)(indexCount(-offset / Number(itemHeight)), 0, options.length - 1);
setIndex(index, true);
(0, _taro.nextTick)(function () {
if (isMoving.current) isMoving.current = false;
});
}, [startOffset, offset, itemHeight, options.length, setIndex]);
var onClickItem = (0, _react.useCallback)(function (index) {
if (!isMoving.current) {
setIndex(Number(index), true);
}
}, [setIndex]);
var getCurrentIndex = (0, _react.useCallback)(function () {
return currentIndex;
}, [currentIndex]);
var getValue = (0, _react.useCallback)(function () {
return options[currentIndex];
}, [options, currentIndex]);
var getOptionText = (0, _react.useCallback)(function (option) {
return (0, _validator.isObj)(option) && valueKey && valueKey in option ? option[valueKey] : option;
}, [valueKey]);
var getOptionID = (0, _react.useCallback)(function (option) {
return (0, _validator.isObj)(option) && idKey && idKey in option ? option[idKey] : option;
}, [idKey]);
var setValue = (0, _react.useCallback)(function (value) {
// console.info(options, value, 'setValue')
for (var i = 0; i < options.length; i++) {
if (getOptionText(options[i]) === value || getOptionID(options[i]) === value) {
return setIndex(i);
}
}
return Promise.resolve();
}, [setIndex, getOptionText, options, getOptionID]);
(0, _react.useImperativeHandle)(ref, function () {
return {
getCurrentIndex: getCurrentIndex,
getValue: getValue,
setValue: setValue,
props: props,
setIndex: setIndex,
set: function set(opt) {
return new Promise(function (resolve) {
if (JSON.stringify(opt.options || {}) !== JSON.stringify(options || {})) setOptions(opt.options);
setCanInit(false);
resolve();
});
}
};
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, _objectSpread(_objectSpread({
className: "van-picker-column ".concat(className),
style: utils.style([computed.rootStyle({
itemHeight: itemHeight,
visibleItemCount: visibleItemCount
}), style])
}, others), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View
// @ts-ignore
, {
catchMove: true,
className: "van-picker-column-touch",
style: computed.wrapperStyle({
offset: offset,
itemHeight: itemHeight,
visibleItemCount: visibleItemCount,
duration: duration
}),
onTouchStart: onTouchStart,
onTouchMove: onTouchMove,
onTouchEnd: onTouchEnd,
onTouchCancel: onTouchEnd,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
"disable-scroll": true,
className: "van-picker-column-scroll",
children: options.map(function (option, index) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
style: {
height: itemHeight + 'px'
},
className: 'van-ellipsis ' + utils.bem('picker-column__item', {
disabled: option && option.disabled,
selected: index === currentIndex
}) + ' ' + (index === currentIndex ? 'active-class' : ''),
onClick: function onClick() {
return onClickItem(index);
},
children: computed.optionText(option, valueKey)
}, "picker-column__item".concat(index));
})
})
})
}));
}
var PickerColumn = /*#__PURE__*/(0, _react.forwardRef)(Index);
exports.PickerColumn = PickerColumn;
var _default = PickerColumn;
exports.default = _default;