@cainiaofe/cn-ui-m
Version:
54 lines (53 loc) • 3.28 kB
JavaScript
import { __spreadArray } from "tslib";
import $i18n from "../../../locales/i18n";
import classNames from 'classnames';
import React, { useEffect, useState } from 'react';
import { CnButton } from "../../cn-button";
import { CnSafeArea } from "../../cn-safe-area";
import { CnDrawer } from "../../cn-drawer";
import { CnList } from "../../cn-list";
import { findInArray } from "../../../utils/func";
import Option from '../option';
import { removeItemFromArray } from '../util';
import { CnIcon } from "../../cn-icon";
export default function SelectedListDrawer(props) {
var visible = props.visible, onOk = props.onOk, onCancel = props.onCancel, prefix = props.prefix, innerValue = props.innerValue, renderItem = props.renderItem;
var clsPrefix = "".concat(prefix, "select");
var _a = useState([]), selectedList = _a[0], setSelectedList = _a[1];
useEffect(function () {
setSelectedList(innerValue);
}, [innerValue, visible]);
var handleItemClick = function (item) {
var isSelected = findInArray(selectedList, function (it) { return it.value === item.value; });
if (isSelected) {
setSelectedList(removeItemFromArray(selectedList, item.value));
}
else {
setSelectedList(__spreadArray(__spreadArray([], selectedList, true), [item], false));
}
};
return (React.createElement(CnDrawer, { visible: visible, closeMode: ['mask'], className: "".concat(clsPrefix, "-confirm-drawer"), containerClassName: "".concat(clsPrefix, "-confirm-drawer-container"), onClose: onCancel, noCard: true },
React.createElement("div", { className: "".concat(clsPrefix, "-confirm-drawer-header") },
React.createElement("span", { className: "".concat(clsPrefix, "-confirm-drawer-header-total") }, $i18n.get({
id: 'SelectedListLengthIsCurrentlySel_1492189422',
dm: '当前已选中 {selectedListLength} 项',
}, { selectedListLength: selectedList.length })),
React.createElement("div", { className: "".concat(clsPrefix, "-confirm-drawer-header-close"), onClick: onCancel },
React.createElement(CnIcon, { type: "close", size: "small" }))),
React.createElement("div", { className: "".concat(clsPrefix, "-confirm-drawer-body") },
React.createElement(CnList, null, innerValue.map(function (item) {
var selected = findInArray(selectedList, function (it) { return it.value === item.value; });
return (React.createElement(Option, { selected: selected, key: item.value, onClick: function () { return handleItemClick(item); } }, typeof renderItem === 'function'
? renderItem(item)
: item.label));
}))),
React.createElement("div", { className: classNames([
'cn-ui-m-bottom-btn',
'cn-ui-m-bottom-btn-container',
]) },
React.createElement(CnButton, { size: "large", type: "primary", onClick: function () {
onOk(selectedList);
} }, $i18n.get({ id: 'OK', dm: '确定' }))),
React.createElement(CnSafeArea, { className: "".concat(clsPrefix, "-safe-area") })));
}
SelectedListDrawer.displayName = 'SelectedListDrawer';