mobile-more
Version:
基于 antd-mobile v5 扩展移动端 UI 组件
157 lines (156 loc) • 7.57 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _antdMobile = require("antd-mobile");
var _classnames = _interopRequireDefault(require("classnames"));
var _rcHooks = require("rc-hooks");
var _react = _interopRequireWildcard(require("react"));
var _ut = require("ut2");
var _config = require("../../config");
var _BizPopup = _interopRequireDefault(require("../BizPopup"));
var _BizConfigProvider = require("../BizConfigProvider");
require("./index.css");
var _excluded = ["loading", "radioMode", "changeClosable", "showSearch", "searchValue", "onSearch", "searchBarProps", "options", "filterOption", "fieldNames", "defaultValue", "value", "onChange", "multiple", "checkListProps", "renderLabel", "emptyProps", "title", "className", "bodyStyle", "headerStyle"];
var prefixCls = "".concat(_config.prefixClass, "-checklist-popup");
function BizCheckListPopup(props) {
var _useConfig = (0, _BizConfigProvider.useConfig)(),
locale = _useConfig.locale;
var _props$loading = props.loading,
loading = _props$loading === void 0 ? false : _props$loading,
_props$radioMode = props.radioMode,
radioMode = _props$radioMode === void 0 ? true : _props$radioMode,
outChangeClosable = props.changeClosable,
_props$showSearch = props.showSearch,
showSearch = _props$showSearch === void 0 ? false : _props$showSearch,
outSearchValue = props.searchValue,
onSearch = props.onSearch,
searchBarProps = props.searchBarProps,
_props$options = props.options,
options = _props$options === void 0 ? [] : _props$options,
filterOption = props.filterOption,
fieldNames = props.fieldNames,
defaultValue = props.defaultValue,
value = props.value,
onChange = props.onChange,
_props$multiple = props.multiple,
multiple = _props$multiple === void 0 ? false : _props$multiple,
checkListProps = props.checkListProps,
renderLabel = props.renderLabel,
emptyProps = props.emptyProps,
title = props.title,
className = props.className,
bodyStyle = props.bodyStyle,
headerStyle = props.headerStyle,
restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
var changeClosable = !(0, _ut.isUndefined)(outChangeClosable) ? outChangeClosable : !multiple;
var _useControllableValue = (0, _rcHooks.useControllableValue)(props, {
valuePropName: 'visible',
trigger: 'onVisibleChange'
}),
_useControllableValue2 = (0, _slicedToArray2.default)(_useControllableValue, 2),
visible = _useControllableValue2[0],
changeVisible = _useControllableValue2[1];
var _useControllableValue3 = (0, _rcHooks.useControllableValue)(props, {
valuePropName: 'searchValue',
trigger: 'onSearch'
}),
_useControllableValue4 = (0, _slicedToArray2.default)(_useControllableValue3, 2),
searchValue = _useControllableValue4[0],
setSearchValue = _useControllableValue4[1];
var _label$value$readOnly = (0, _objectSpread2.default)({
label: 'label',
value: 'value',
readOnly: 'readOnly',
disabled: 'disabled'
}, fieldNames),
labelKey = _label$value$readOnly.label,
valueKey = _label$value$readOnly.value,
readOnlyKey = _label$value$readOnly.readOnly,
disabledKey = _label$value$readOnly.disabled;
var opts = (0, _react.useMemo)(function () {
return options.filter(function (item) {
var _item$valueKey;
if (!searchValue) {
return item;
}
if (typeof filterOption === 'function') {
return filterOption(searchValue, item);
}
return (item === null || item === void 0 || (_item$valueKey = item[valueKey]) === null || _item$valueKey === void 0 ? void 0 : _item$valueKey.indexOf(searchValue)) > -1 || typeof (item === null || item === void 0 ? void 0 : item[labelKey]) === 'string' && item[labelKey].indexOf(searchValue) > -1;
});
}, [filterOption, labelKey, options, searchValue, valueKey]);
var _useControllableValue5 = (0, _rcHooks.useControllableValue)({
value: value,
onChange: onChange
}),
_useControllableValue6 = (0, _slicedToArray2.default)(_useControllableValue5, 2),
state = _useControllableValue6[0],
setState = _useControllableValue6[1];
var handleSearchInput = function handleSearchInput(val) {
var _searchBarProps$onCha;
setSearchValue(val);
searchBarProps === null || searchBarProps === void 0 || (_searchBarProps$onCha = searchBarProps.onChange) === null || _searchBarProps$onCha === void 0 || _searchBarProps$onCha.call(searchBarProps, val);
};
var handleChange = function handleChange(vals) {
if (multiple) {
setState(vals);
} else {
var fmtValue = vals && vals.length > 0 ? vals[0] : radioMode ? state : undefined;
setState(fmtValue);
if (!(0, _ut.isUndefined)(fmtValue) && changeClosable) {
changeVisible(false);
}
}
};
return /*#__PURE__*/_react.default.createElement(_BizPopup.default, (0, _extends2.default)({
title: title,
className: (0, _classnames.default)(prefixCls, className),
bodyStyle: (0, _objectSpread2.default)({
maxHeight: '70vh',
height: showSearch ? '70vh' : undefined
}, bodyStyle),
headerStyle: (0, _objectSpread2.default)({
marginBottom: -1
}, headerStyle),
extra: showSearch && /*#__PURE__*/_react.default.createElement("div", {
style: {
padding: 16
}
}, /*#__PURE__*/_react.default.createElement(_antdMobile.SearchBar, (0, _extends2.default)({
placeholder: locale.form.common.inputPlaceholder
}, searchBarProps, {
value: searchValue,
onChange: handleSearchInput
})))
}, restProps, {
visible: visible,
onVisibleChange: changeVisible
}), loading ? /*#__PURE__*/_react.default.createElement("div", {
className: "".concat(prefixCls, "-loading")
}, /*#__PURE__*/_react.default.createElement(_antdMobile.SpinLoading, {
color: "primary"
})) : opts.length <= 0 ? /*#__PURE__*/_react.default.createElement(_antdMobile.Empty, (0, _extends2.default)({
description: locale.form.common.nodata
}, emptyProps)) : /*#__PURE__*/_react.default.createElement(_antdMobile.CheckList, (0, _extends2.default)({
multiple: multiple
}, checkListProps, {
value: (0, _ut.isArray)(state) ? state : (0, _ut.isUndefined)(state) ? [] : [state],
onChange: handleChange
}), opts.map(function (item) {
return /*#__PURE__*/_react.default.createElement(_antdMobile.CheckList.Item, {
value: item === null || item === void 0 ? void 0 : item[valueKey],
readOnly: item === null || item === void 0 ? void 0 : item[readOnlyKey],
disabled: item === null || item === void 0 ? void 0 : item[disabledKey],
key: item === null || item === void 0 ? void 0 : item[valueKey]
}, typeof renderLabel === 'function' ? renderLabel(item) : item === null || item === void 0 ? void 0 : item[labelKey]);
})));
}
var _default = exports.default = BizCheckListPopup;