mobile-more
Version:
基于 antd-mobile v5 扩展移动端 UI 组件
158 lines • 7.04 kB
JavaScript
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 * as React from 'react';
import { isArray } 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 = React.useMemo(function () {
if (typeof outChangeClosable !== 'undefined') {
return outChangeClosable;
}
return !multiple;
}, [multiple, outChangeClosable]);
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 _React$useMemo = React.useMemo(function () {
return _objectSpread({
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 = 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 ? 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' && !isArray(state) ? [state] : state;
}, [state]);
return /*#__PURE__*/React.createElement(Popup, _objectSpread(_objectSpread({
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, _objectSpread(_objectSpread({
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, _objectSpread({
description: locale.form.common.nodata
}, emptyProps))) : (/*#__PURE__*/React.createElement(CheckList, _objectSpread(_objectSpread({
multiple: multiple
}, checkListProps), {}, {
value: realValue || [],
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;