@antmjs/vantui
Version:
一套适用于Taro3及React的vantui组件库
530 lines • 21.6 kB
JavaScript
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
var _excluded = ["disabled", "valueKey", "idKey", "toolbarPosition", "defaultIndex", "value", "columns", "syncColumns", "title", "cancelButtonText", "confirmButtonText", "itemHeight", "visibleItemCount", "loading", "onChange", "className", "style", "onCancel", "onInput", "onConfirm", "showToolbar", "mode", "placeholder", "renderContent", "placeholderColor", "showArrowDown", "showArrowRight", "allowClear", "onShow", "onClear", "renderContentRight", "contentClassName"];
import _regeneratorRuntime from "@babel/runtime/regenerator";
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; }
/* eslint-disable react-hooks/exhaustive-deps */
import { useCallback, useRef, forwardRef, useImperativeHandle, useLayoutEffect, useState, useEffect, useMemo } from 'react';
import useDeepCompareEffect from 'use-deep-compare-effect';
import { View } from '@tarojs/components';
import { nextTick } from '@tarojs/taro';
import classNames from 'classnames';
import { PickerColumn } from '../picker-column/index';
import * as utils from '../wxs/utils';
import { Loading } from '../loading/index';
import { Popup } from '../popup';
import { Icon } from '../icon/index';
import { get } from '../default-props';
import * as computed from './wxs';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var Picker = /*#__PURE__*/forwardRef(function Index(props, ref) {
var _useState = useState(get().Picker),
_useState2 = _slicedToArray(_useState, 1),
d = _useState2[0];
var _d$props = _objectSpread(_objectSpread({}, d), props),
_d$props$disabled = _d$props.disabled,
disabled = _d$props$disabled === void 0 ? false : _d$props$disabled,
_d$props$valueKey = _d$props.valueKey,
valueKey = _d$props$valueKey === void 0 ? 'text' : _d$props$valueKey,
_d$props$idKey = _d$props.idKey,
idKey = _d$props$idKey === void 0 ? 'text' : _d$props$idKey,
_d$props$toolbarPosit = _d$props.toolbarPosition,
toolbarPosition = _d$props$toolbarPosit === void 0 ? 'top' : _d$props$toolbarPosit,
defaultIndex = _d$props.defaultIndex,
value = _d$props.value,
_d$props$columns = _d$props.columns,
columns = _d$props$columns === void 0 ? [] : _d$props$columns,
syncColumns = _d$props.syncColumns,
title = _d$props.title,
cancelButtonText = _d$props.cancelButtonText,
confirmButtonText = _d$props.confirmButtonText,
_d$props$itemHeight = _d$props.itemHeight,
itemHeight = _d$props$itemHeight === void 0 ? 48 : _d$props$itemHeight,
_d$props$visibleItemC = _d$props.visibleItemCount,
visibleItemCount = _d$props$visibleItemC === void 0 ? 5 : _d$props$visibleItemC,
loading = _d$props.loading,
onChange = _d$props.onChange,
className = _d$props.className,
style = _d$props.style,
onCancel = _d$props.onCancel,
onInput = _d$props.onInput,
onConfirm = _d$props.onConfirm,
_d$props$showToolbar = _d$props.showToolbar,
showToolbar = _d$props$showToolbar === void 0 ? true : _d$props$showToolbar,
_d$props$mode = _d$props.mode,
mode = _d$props$mode === void 0 ? 'normal' : _d$props$mode,
_d$props$placeholder = _d$props.placeholder,
placeholder = _d$props$placeholder === void 0 ? '请选择' : _d$props$placeholder,
renderContent = _d$props.renderContent,
placeholderColor = _d$props.placeholderColor,
showArrowDown = _d$props.showArrowDown,
showArrowRight = _d$props.showArrowRight,
_d$props$allowClear = _d$props.allowClear,
allowClear = _d$props$allowClear === void 0 ? true : _d$props$allowClear,
onShow = _d$props.onShow,
onClear = _d$props.onClear,
renderContentRight = _d$props.renderContentRight,
_d$props$contentClass = _d$props.contentClassName,
contentClassName = _d$props$contentClass === void 0 ? '' : _d$props$contentClass,
others = _objectWithoutProperties(_d$props, _excluded);
var children = useRef([]);
var handleIndex = useRef(-1);
var _useState3 = useState(0),
_useState4 = _slicedToArray(_useState3, 2),
show = _useState4[0],
setShow = _useState4[1];
var _useState5 = useState([]),
_useState6 = _slicedToArray(_useState5, 2),
valuesInner = _useState6[0],
setValuesInner = _useState6[1];
var _useState7 = useState([]),
_useState8 = _slicedToArray(_useState7, 2),
columnsInner = _useState8[0],
setColumnsInner = _useState8[1];
var _useState9 = useState(null),
_useState10 = _slicedToArray(_useState9, 2),
currentData = _useState10[0],
setcurrentData = _useState10[1];
var asyncColumns = /*#__PURE__*/function () {
var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(v, i) {
var cc;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return syncColumns === null || syncColumns === void 0 ? void 0 : syncColumns({
columns: columnsInner ? _toConsumableArray(columnsInner) : [],
changeIndex: i,
values: v || []
});
case 2:
cc = _context.sent;
if (cc) {
setColumnsInner(_toConsumableArray(cc));
}
case 4:
case "end":
return _context.stop();
}
}, _callee);
}));
return function asyncColumns(_x, _x2) {
return _ref.apply(this, arguments);
};
}();
useLayoutEffect(function () {
// 取消关闭的时候请求新的列数据，防止请求不符合value的列数据
if (mode === 'content' && syncColumns && show === 0) {
asyncColumns(valuesInner);
}
}, [show, valuesInner]);
useLayoutEffect(function () {
if (Array.isArray(children) && children.length) {
setColumns().catch(function () {});
}
}, [columns, children]);
var emit = function emit(event) {
var _event$currentTarget;
var type = event === null || event === void 0 ? void 0 : (_event$currentTarget = event.currentTarget) === null || _event$currentTarget === void 0 ? void 0 : _event$currentTarget.dataset['type'];
var simple = columns && columns.length && !columns[0].values;
if (typeof event === 'number' || !type) {
var event_ = {};
handleIndex.current = event;
var v = simple ? getColumnValue(0) : getValues();
var i = simple ? getColumnIndex(0) : event;
// 异步请求的情况下需要更新
if (syncColumns) {
var colunmsInnerNew = _toConsumableArray(columnsInner);
for (var a = i + 1; a < (v === null || v === void 0 ? void 0 : v.length); a++) {
children.current[a].setIndex(0, true);
v[a] = undefined;
}
for (var _a = i + 1; _a < (colunmsInnerNew === null || colunmsInnerNew === void 0 ? void 0 : colunmsInnerNew.length); _a++) {
colunmsInnerNew[_a] = [];
}
setColumnsInner(colunmsInnerNew);
asyncColumns(v, i);
}
if (onChange) {
Object.defineProperties(event_, {
detail: {
value: {
picker: {
setColumnValue: setColumnValue,
getColumnValue: getColumnValue,
setColumnValues: setColumnValues,
getColumnValues: function getColumnValues(index) {
return children.current[index].options;
},
getIndexes: getIndexes,
setIndexes: function setIndexes(indexes) {
var stack = indexes.map(function (optionIndex, columnIndex) {
return setColumnIndex(columnIndex, optionIndex);
});
return Promise.all(stack);
},
setColumnIndex: setColumnIndex,
getColumnIndex: getColumnIndex,
getValues: getValues,
setColumns: setColumns,
children: children,
setValues: setValues,
columns: columns
},
value: v,
index: simple ? getColumnIndex(0) : event
}
}
});
onChange(event_);
}
} else if (type === 'cancel') {
setShow(0);
if (onCancel) {
Object.defineProperty(event, 'detail', {
value: {
value: simple ? getColumnValue(0) : getValues(),
index: simple ? getColumnIndex(0) : getIndexes()
}
});
onCancel(event);
}
} else if (type === 'confirm') {
var vv = simple ? getColumnValue(0) : getValues();
var originIsArray = Array.isArray(vv);
Object.defineProperty(event, 'detail', {
value: {
value: vv,
index: simple ? getColumnIndex(0) : getIndexes()
}
});
if (mode === 'content') {
var vs = Array.isArray(vv) ? vv : [vv];
vs = vs.map(function (it) {
return typeof it === 'string' ? it : it === null || it === void 0 ? void 0 : it[idKey];
});
setValuesInner(vs);
onInput === null || onInput === void 0 ? void 0 : onInput({
detail: originIsArray ? vs : vs[0]
});
setShow(false);
}
if (onConfirm) {
onConfirm(event);
}
}
};
var getColumnValue = useCallback(function (index) {
var column = children.current[index];
return column && column.getValue();
}, []);
var getColumnIndex = useCallback(function (columnIndex) {
var _ref2;
return (_ref2 = children.current[columnIndex] || {}) === null || _ref2 === void 0 ? void 0 : _ref2.getCurrentIndex();
}, []);
var setColumns = useCallback(function () {
var simple = columns && columns.length && !columns[0].values;
var columns_ = simple ? [{
values: columns
}] : columns;
var stack = (columns_ || []).map(function (column, index) {
return setColumnValues(index, column.values);
});
return Promise.all(stack);
}, [columns]);
var setColumnValues = useCallback(function (index, options) {
if (index <= handleIndex.current) return Promise.resolve(getValues());
var column = children.current[index];
if (column == null) {
return Promise.reject(new Error('setColumnValues: 对应列不存在'));
}
var isSame = JSON.stringify(column.props.options || {}) === JSON.stringify(options || {});
if (isSame) {
return Promise.resolve(getValues());
}
var cIndex = column.getCurrentIndex();
return new Promise(function (resolve) {
column.set({
options: options
}).then(function () {
nextTick(function () {
if (cIndex > options.length) {
column.setIndex(0);
handleIndex.current = -1;
}
nextTick(function () {
columnsInner[index] = options;
setColumnsInner(_toConsumableArray(columnsInner));
resolve(getValues());
});
});
});
});
}, []);
var getValues = useCallback(function () {
var _children$current;
return ((_children$current = children.current) === null || _children$current === void 0 ? void 0 : _children$current.map(function (child) {
return child === null || child === void 0 ? void 0 : child.getValue();
})) || [];
}, [children]);
var getIndexes = useCallback(function () {
return children.current.map(function (child) {
return child.getCurrentIndex();
});
}, []);
var onChange_ = emit;
var setColumnIndex = useCallback(function (index, optionIndex) {
var column = children.current[index];
if (column == null) {
return Promise.reject(new Error('setColumnIndex: 对应列不存在'));
}
return column.setIndex(optionIndex);
}, []);
useImperativeHandle(ref, function () {
return {
open: function open() {
if (mode === 'content' && !disabled) {
setShow(true);
}
},
close: function close() {
return setShow(0);
},
setColumnValue: setColumnValue,
getColumnValue: getColumnValue,
setColumnValues: setColumnValues,
getColumnValues: function getColumnValues(index) {
return children.current[index].options;
},
getIndexes: getIndexes,
setIndexes: function setIndexes(indexes) {
var stack = indexes.map(function (optionIndex, columnIndex) {
return setColumnIndex(columnIndex, optionIndex);
});
return Promise.all(stack);
},
setColumnIndex: setColumnIndex,
getColumnIndex: getColumnIndex,
getValues: getValues,
setColumns: setColumns,
children: children,
setValues: setValues,
columns: columns
};
});
var setValues = function setValues(values) {
var stack = values === null || values === void 0 ? void 0 : values.map(function (value, index) {
return setColumnValue(index, value);
});
return Promise.all(stack);
};
useEffect(function () {
if (value && mode === 'content') {
setValuesInner(Array.isArray(value) ? value : [value]);
}
}, [value]);
var setColumnValue = function setColumnValue(index, value) {
var column = children.current[index];
if (column == null) {
return Promise.reject(new Error("setColumnValue[".concat(index, "]: \u5BF9\u5E94\u5217\u4E0D\u5B58\u5728").concat(value)));
}
return column.setValue(value);
};
var onTouchMove_ = useCallback(function (event) {
event.preventDefault();
event.stopPropagation();
}, []);
var columnsUsed = useMemo(function () {
return computed.columns(columnsInner && columnsInner.length ? columnsInner : columns) || [];
}, [columns, columnsInner]);
useEffect(function () {
if (mode === 'content' && show) {
setTimeout(function () {
onShow === null || onShow === void 0 ? void 0 : onShow();
valuesInner && setValues(valuesInner);
}, 200);
}
}, [valuesInner, show]);
var mainRender = /*#__PURE__*/_jsxs(View
// @ts-ignore
, _objectSpread(_objectSpread({
catchMove: true,
className: "van-picker ".concat(className),
style: utils.style([style])
}, others), {}, {
onTouchMove: onTouchMove_,
children: [toolbarPosition === 'top' && showToolbar && /*#__PURE__*/_jsxs(View, {
className: "van-picker__toolbar toolbar-class",
children: [/*#__PURE__*/_jsx(View, {
className: "van-picker__cancel",
hoverClass: "van-picker__cancel--hover",
hoverStayTime: 70,
"data-type": "cancel",
onClick: emit,
children: cancelButtonText || '取消'
}), title && /*#__PURE__*/_jsx(View, {
className: "van-picker__title van-ellipsis",
children: title
}), /*#__PURE__*/_jsx(View, {
className: "van-picker__confirm",
hoverClass: "van-picker__confirm--hover",
hoverStayTime: 70,
"data-type": "confirm",
onClick: emit,
children: confirmButtonText || '确定'
})]
}), loading && /*#__PURE__*/_jsx(View, {
className: "van-picker__loading",
children: /*#__PURE__*/_jsx(Loading, {
color: "#1989fa"
})
}), /*#__PURE__*/_jsxs(View, {
className: "van-picker__columns",
style: computed.columnsStyle({
itemHeight: itemHeight,
visibleItemCount: visibleItemCount
}),
onTouchMove: onTouchMove_
// @ts-ignore
,
catchMove: true,
children: [columnsUsed === null || columnsUsed === void 0 ? void 0 : columnsUsed.map(function (item, index) {
return /*#__PURE__*/_jsx(PickerColumn, {
className: "van-picker__column column-class",
"data-index": index,
index: index,
valueKey: valueKey,
initialOptions: item,
defaultIndex: (item === null || item === void 0 ? void 0 : item.defaultIndex) || defaultIndex,
itemHeight: itemHeight,
visibleItemCount: visibleItemCount,
activeClass: "active-class",
onChange: onChange_,
idKey: idKey,
ref: function ref(el) {
return children.current[index] = el;
}
}, "van-picker__column_".concat(index, "column-class"));
}), /*#__PURE__*/_jsx(View, {
className: "van-picker__mask",
style: computed.maskStyle({
itemHeight: itemHeight,
visibleItemCount: visibleItemCount
})
}), /*#__PURE__*/_jsx(View, {
className: "van-picker__frame van-hairline--top-bottom",
style: computed.frameStyle({
itemHeight: itemHeight
})
})]
}), toolbarPosition === 'bottom' && showToolbar && /*#__PURE__*/_jsxs(View, {
className: "van-picker__toolbar toolbar-class",
children: [/*#__PURE__*/_jsx(View, {
className: "van-picker__cancel",
hoverClass: "van-picker__cancel--hover",
hoverStayTime: 70,
"data-type": "cancel",
onClick: emit,
children: cancelButtonText
}), title && /*#__PURE__*/_jsx(View, {
className: "van-picker__title van-ellipsis",
children: title
}), /*#__PURE__*/_jsx(View, {
className: "van-picker__confirm",
hoverClass: "van-picker__confirm--hover",
hoverStayTime: 70,
"data-type": "confirm",
onClick: emit,
children: confirmButtonText
})]
})]
}));
useDeepCompareEffect(function () {
var _dd;
var vs = valuesInner;
var dd = [];
if (vs !== null && vs !== void 0 && vs.length && columnsUsed !== null && columnsUsed !== void 0 && columnsUsed.length) {
dd = vs.map(function (it, i) {
var _columnsUsed$i;
var filter = (_columnsUsed$i = columnsUsed[i]) === null || _columnsUsed$i === void 0 ? void 0 : _columnsUsed$i.filter(function (c) {
return c[idKey] === it || c === it;
});
return filter === null || filter === void 0 ? void 0 : filter[0];
});
} else dd = null;
setcurrentData(((_dd = dd) === null || _dd === void 0 ? void 0 : _dd.filter(function (it) {
return it !== undefined;
})) || null);
}, [valuesInner, columnsUsed]);
var renderContentInner = useMemo(function () {
if (currentData) {
return currentData.map(function (it) {
return typeof it === 'string' ? it : it === null || it === void 0 ? void 0 : it[valueKey];
}).join(',');
} else {
return placeholder;
}
}, [currentData, placeholder]);
var clear = function clear() {
setValuesInner([]);
onInput === null || onInput === void 0 ? void 0 : onInput({
detail: []
});
onClear === null || onClear === void 0 ? void 0 : onClear();
};
var setShow_ = function setShow_() {
if (!disabled) setShow(true);
};
if (mode === 'normal') {
return mainRender;
} else {
var _classNames;
return /*#__PURE__*/_jsxs(View, {
className: "van-picker-content-Wrapper",
children: [/*#__PURE__*/_jsx(View, {
className: classNames((_classNames = {
'van-picker-content': true
}, _defineProperty(_classNames, contentClassName, !!contentClassName), _defineProperty(_classNames, 'van-picker-nocontent', !currentData), _defineProperty(_classNames, 'van-picker-disabled', !!disabled), _classNames)),
style: placeholderColor && !currentData ? {
color: placeholderColor
} : {},
onClick: setShow_,
children: renderContent ? renderContent(currentData) : renderContentInner
}), /*#__PURE__*/_jsx(View, {
children: currentData && allowClear && /*#__PURE__*/_jsx(Icon, {
onClick: clear,
className: "van-icon-clear",
name: "clear",
size: "18px"
})
}), renderContentRight && /*#__PURE__*/_jsx(View, {
onClick: setShow_,
children: renderContentRight
}), showArrowDown && /*#__PURE__*/_jsx(Icon, {
className: "check-list-arrow",
onClick: setShow_,
name: "arrow-down",
size: "14px"
}), showArrowRight && /*#__PURE__*/_jsx(Icon, {
className: "check-list-arrow",
onClick: setShow_,
name: "arrow",
size: "14px"
}), /*#__PURE__*/_jsx(Popup, {
show: !!show,
position: "bottom",
onClose: function onClose() {
return setShow(0);
},
children: mainRender
})]
});
}
});
export { Picker };
export default Picker;