mobile-more
Version:
基于 antd-mobile v5 扩展移动端 UI 组件
149 lines • 6.7 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["loading", "radioMode", "changeClosable", "showSearch", "searchValue", "onSearch", "searchBarProps", "options", "filterOption", "fieldNames", "defaultValue", "value", "onChange", "multiple", "checkListProps", "renderLabel", "emptyProps", "title", "className", "bodyStyle", "headerStyle"];
import { CheckList, Empty, SearchBar, SpinLoading } from 'antd-mobile';
import classnames from 'classnames';
import { useControllableValue } from 'rc-hooks';
import React, { useMemo } from 'react';
import { isArray, isUndefined } from 'ut2';
import { prefixClass } from "../../config";
import Popup from "../BizPopup";
import { useConfig } from "../BizConfigProvider";
import "./index.css";
var prefixCls = "".concat(prefixClass, "-checklist-popup");
function BizCheckListPopup(props) {
var _useConfig = 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 = _objectWithoutProperties(props, _excluded);
var changeClosable = !isUndefined(outChangeClosable) ? outChangeClosable : !multiple;
var _useControllableValue = useControllableValue(props, {
valuePropName: 'visible',
trigger: 'onVisibleChange'
}),
_useControllableValue2 = _slicedToArray(_useControllableValue, 2),
visible = _useControllableValue2[0],
changeVisible = _useControllableValue2[1];
var _useControllableValue3 = useControllableValue(props, {
valuePropName: 'searchValue',
trigger: 'onSearch'
}),
_useControllableValue4 = _slicedToArray(_useControllableValue3, 2),
searchValue = _useControllableValue4[0],
setSearchValue = _useControllableValue4[1];
var _label$value$readOnly = _objectSpread({
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 = 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 = useControllableValue({
value: value,
onChange: onChange
}),
_useControllableValue6 = _slicedToArray(_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 (!isUndefined(fmtValue) && changeClosable) {
changeVisible(false);
}
}
};
return /*#__PURE__*/React.createElement(Popup, _extends({
title: title,
className: classnames(prefixCls, className),
bodyStyle: _objectSpread({
maxHeight: '70vh',
height: showSearch ? '70vh' : undefined
}, bodyStyle),
headerStyle: _objectSpread({
marginBottom: -1
}, headerStyle),
extra: showSearch && /*#__PURE__*/React.createElement("div", {
style: {
padding: 16
}
}, /*#__PURE__*/React.createElement(SearchBar, _extends({
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(SpinLoading, {
color: "primary"
})) : opts.length <= 0 ? /*#__PURE__*/React.createElement(Empty, _extends({
description: locale.form.common.nodata
}, emptyProps)) : /*#__PURE__*/React.createElement(CheckList, _extends({
multiple: multiple
}, checkListProps, {
value: isArray(state) ? state : isUndefined(state) ? [] : [state],
onChange: handleChange
}), opts.map(function (item) {
return /*#__PURE__*/React.createElement(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]);
})));
}
export default BizCheckListPopup;