mobile-more
Version:
基于 antd-mobile v5 扩展移动端 UI 组件
166 lines (165 loc) • 7.83 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 _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 = React.useMemo(function () {
if (typeof outChangeClosable !== 'undefined') {
return outChangeClosable;
}
return !multiple;
}, [multiple, outChangeClosable]);
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 _React$useMemo = React.useMemo(function () {
return (0, _objectSpread2.default)({
label: 'label',
value: 'value',
readOnly: 'readOnly',
disabled: 'disabled'
}, fieldNames);
}, [fieldNames]),
labelKey = _React$useMemo.label,
valueKey = _React$useMemo.value,
readOnlyKey = _React$useMemo.readOnly,
disabledKey = _React$useMemo.disabled;
var opts = 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 ? 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 === null || item === void 0 ? void 0 : 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 ? void 0 : (_searchBarProps$onCha = searchBarProps.onChange) === null || _searchBarProps$onCha === void 0 ? 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 (typeof fmtValue !== 'undefined' && changeClosable) {
changeVisible(false);
}
}
};
var realValue = React.useMemo(function () {
return typeof state !== 'undefined' && !(0, _ut.isArray)(state) ? [state] : state;
}, [state]);
return /*#__PURE__*/React.createElement(_BizPopup.default, (0, _objectSpread2.default)((0, _objectSpread2.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.createElement("div", {
style: {
padding: 16
}
}, /*#__PURE__*/React.createElement(_antdMobile.SearchBar, (0, _objectSpread2.default)((0, _objectSpread2.default)({
placeholder: locale.form.common.inputPlaceholder
}, searchBarProps), {}, {
value: searchValue,
onChange: handleSearchInput
}))))
}, restProps), {}, {
visible: visible,
onVisibleChange: changeVisible
}), loading ? (/*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-loading")
}, /*#__PURE__*/React.createElement(_antdMobile.SpinLoading, {
color: "primary"
}))) : opts.length <= 0 ? (/*#__PURE__*/React.createElement(_antdMobile.Empty, (0, _objectSpread2.default)({
description: locale.form.common.nodata
}, emptyProps))) : (/*#__PURE__*/React.createElement(_antdMobile.CheckList, (0, _objectSpread2.default)((0, _objectSpread2.default)({
multiple: multiple
}, checkListProps), {}, {
value: realValue || [],
onChange: handleChange
}), opts.map(function (item) {
return /*#__PURE__*/React.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;