@antmjs/vantui
Version:
一套适用于Taro3及React的vantui组件库
540 lines (539 loc) • 24.4 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.Picker = void 0;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = require("react");
var _useDeepCompareEffect = _interopRequireDefault(require("use-deep-compare-effect"));
var _components = require("@tarojs/components");
var _taro = require("@tarojs/taro");
var _classnames = _interopRequireDefault(require("classnames"));
var _index = require("../picker-column/index");
var utils = _interopRequireWildcard(require("../wxs/utils"));
var _index2 = require("../loading/index");
var _popup = require("../popup");
var _index3 = require("../icon/index");
var _defaultProps = require("../default-props");
var computed = _interopRequireWildcard(require("./wxs"));
var _jsxRuntime = require("react/jsx-runtime");
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"];
/* eslint-disable react-hooks/exhaustive-deps */
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 Picker = /*#__PURE__*/(0, _react.forwardRef)(function Index(props, ref) {
var _useState = (0, _react.useState)((0, _defaultProps.get)().Picker),
_useState2 = (0, _slicedToArray2.default)(_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 = (0, _objectWithoutProperties2.default)(_d$props, _excluded);
var children = (0, _react.useRef)([]);
var handleIndex = (0, _react.useRef)(-1);
var _useState3 = (0, _react.useState)(0),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
show = _useState4[0],
setShow = _useState4[1];
var _useState5 = (0, _react.useState)([]),
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
valuesInner = _useState6[0],
setValuesInner = _useState6[1];
var _useState7 = (0, _react.useState)([]),
_useState8 = (0, _slicedToArray2.default)(_useState7, 2),
columnsInner = _useState8[0],
setColumnsInner = _useState8[1];
var _useState9 = (0, _react.useState)(null),
_useState10 = (0, _slicedToArray2.default)(_useState9, 2),
currentData = _useState10[0],
setcurrentData = _useState10[1];
var asyncColumns = /*#__PURE__*/function () {
var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(v, i) {
var cc;
return _regenerator.default.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 ? (0, _toConsumableArray2.default)(columnsInner) : [],
changeIndex: i,
values: v || []
});
case 2:
cc = _context.sent;
if (cc) {
setColumnsInner((0, _toConsumableArray2.default)(cc));
}
case 4:
case "end":
return _context.stop();
}
}, _callee);
}));
return function asyncColumns(_x, _x2) {
return _ref.apply(this, arguments);
};
}();
(0, _react.useLayoutEffect)(function () {
// 取消关闭的时候请求新的列数据，防止请求不符合value的列数据
if (mode === 'content' && syncColumns && show === 0) {
asyncColumns(valuesInner);
}
}, [show, valuesInner]);
(0, _react.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 = (0, _toConsumableArray2.default)(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 = (0, _react.useCallback)(function (index) {
var column = children.current[index];
return column && column.getValue();
}, []);
var getColumnIndex = (0, _react.useCallback)(function (columnIndex) {
var _ref2;
return (_ref2 = children.current[columnIndex] || {}) === null || _ref2 === void 0 ? void 0 : _ref2.getCurrentIndex();
}, []);
var setColumns = (0, _react.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 = (0, _react.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 () {
(0, _taro.nextTick)(function () {
if (cIndex > options.length) {
column.setIndex(0);
handleIndex.current = -1;
}
(0, _taro.nextTick)(function () {
columnsInner[index] = options;
setColumnsInner((0, _toConsumableArray2.default)(columnsInner));
resolve(getValues());
});
});
});
});
}, []);
var getValues = (0, _react.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 = (0, _react.useCallback)(function () {
return children.current.map(function (child) {
return child.getCurrentIndex();
});
}, []);
var onChange_ = emit;
var setColumnIndex = (0, _react.useCallback)(function (index, optionIndex) {
var column = children.current[index];
if (column == null) {
return Promise.reject(new Error('setColumnIndex: 对应列不存在'));
}
return column.setIndex(optionIndex);
}, []);
(0, _react.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);
};
(0, _react.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_ = (0, _react.useCallback)(function (event) {
event.preventDefault();
event.stopPropagation();
}, []);
var columnsUsed = (0, _react.useMemo)(function () {
return computed.columns(columnsInner && columnsInner.length ? columnsInner : columns) || [];
}, [columns, columnsInner]);
(0, _react.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__*/(0, _jsxRuntime.jsxs)(_components.View
// @ts-ignore
, _objectSpread(_objectSpread({
catchMove: true,
className: "van-picker ".concat(className),
style: utils.style([style])
}, others), {}, {
onTouchMove: onTouchMove_,
children: [toolbarPosition === 'top' && showToolbar && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
className: "van-picker__toolbar toolbar-class",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: "van-picker__cancel",
hoverClass: "van-picker__cancel--hover",
hoverStayTime: 70,
"data-type": "cancel",
onClick: emit,
children: cancelButtonText || '取消'
}), title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: "van-picker__title van-ellipsis",
children: title
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: "van-picker__confirm",
hoverClass: "van-picker__confirm--hover",
hoverStayTime: 70,
"data-type": "confirm",
onClick: emit,
children: confirmButtonText || '确定'
})]
}), loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: "van-picker__loading",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Loading, {
color: "#1989fa"
})
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.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__*/(0, _jsxRuntime.jsx)(_index.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__*/(0, _jsxRuntime.jsx)(_components.View, {
className: "van-picker__mask",
style: computed.maskStyle({
itemHeight: itemHeight,
visibleItemCount: visibleItemCount
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: "van-picker__frame van-hairline--top-bottom",
style: computed.frameStyle({
itemHeight: itemHeight
})
})]
}), toolbarPosition === 'bottom' && showToolbar && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
className: "van-picker__toolbar toolbar-class",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: "van-picker__cancel",
hoverClass: "van-picker__cancel--hover",
hoverStayTime: 70,
"data-type": "cancel",
onClick: emit,
children: cancelButtonText
}), title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: "van-picker__title van-ellipsis",
children: title
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: "van-picker__confirm",
hoverClass: "van-picker__confirm--hover",
hoverStayTime: 70,
"data-type": "confirm",
onClick: emit,
children: confirmButtonText
})]
})]
}));
(0, _useDeepCompareEffect.default)(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 = (0, _react.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__*/(0, _jsxRuntime.jsxs)(_components.View, {
className: "van-picker-content-Wrapper",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: (0, _classnames.default)((_classNames = {
'van-picker-content': true
}, (0, _defineProperty2.default)(_classNames, contentClassName, !!contentClassName), (0, _defineProperty2.default)(_classNames, 'van-picker-nocontent', !currentData), (0, _defineProperty2.default)(_classNames, 'van-picker-disabled', !!disabled), _classNames)),
style: placeholderColor && !currentData ? {
color: placeholderColor
} : {},
onClick: setShow_,
children: renderContent ? renderContent(currentData) : renderContentInner
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
children: currentData && allowClear && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Icon, {
onClick: clear,
className: "van-icon-clear",
name: "clear",
size: "18px"
})
}), renderContentRight && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
onClick: setShow_,
children: renderContentRight
}), showArrowDown && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Icon, {
className: "check-list-arrow",
onClick: setShow_,
name: "arrow-down",
size: "14px"
}), showArrowRight && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Icon, {
className: "check-list-arrow",
onClick: setShow_,
name: "arrow",
size: "14px"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_popup.Popup, {
show: !!show,
position: "bottom",
onClose: function onClose() {
return setShow(0);
},
children: mainRender
})]
});
}
});
exports.Picker = Picker;
var _default = Picker;
exports.default = _default;