@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
166 lines (164 loc) • 6.42 kB
JavaScript
/*
* Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License version 3 as published by
* the Free Software Foundation.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
/*
* Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License version 3 as published by
* the Free Software Foundation.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import React, { useRef } from 'react';
import useStyles from './styles';
import Paper from '@mui/material/Paper';
import Checkbox from '@mui/material/Checkbox';
import Typography from '@mui/material/Typography';
import SearchBar from '../SearchBar/SearchBar';
import List from '@mui/material/List';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import CircularProgress from '@mui/material/CircularProgress';
import EmptyState from '../EmptyState/EmptyState';
import { FormattedMessage } from 'react-intl';
import ListItemButton from '@mui/material/ListItemButton';
import InfiniteScroll from 'react-infinite-scroller';
import Box from '@mui/material/Box';
export function TransferListColumn(props) {
const {
title,
items,
onItemClick,
checkedList,
isAllChecked,
onCheckAllClicked,
inProgressIds,
emptyStateMessage,
disabled = false,
disabledItems,
filterKeyword: keyword,
setFilterKeyword: setKeyword,
onFilter,
onFetchMore,
hasMoreItems
} = props;
const { classes } = useStyles();
const listRef = useRef();
const onSearch = (value) => {
onFilter === null || onFilter === void 0 ? void 0 : onFilter(value);
setKeyword(value);
};
return React.createElement(
Paper,
{ className: classes.listPaper },
React.createElement(
'header',
{ className: classes.listHeader },
!disabled &&
onCheckAllClicked &&
React.createElement(Checkbox, {
disabled: (items === null || items === void 0 ? void 0 : items.length) === 0,
checked: isAllChecked,
onChange: (event) => onCheckAllClicked(items, event.target.checked)
}),
title && React.createElement(Typography, { color: 'textSecondary' }, title),
React.createElement(SearchBar, {
keyword: keyword,
onChange: onSearch,
classes: { root: classes.searchBar },
showActionButton: Boolean(keyword)
})
),
React.createElement(
List,
{ dense: true, component: 'div', role: 'list', className: classes.list, ref: listRef },
items
? items.length === 0
? React.createElement(EmptyState, {
title: React.createElement(FormattedMessage, {
id: 'transferListColumn.noResults',
defaultMessage: 'No results, try to change the query'
})
})
: React.createElement(
InfiniteScroll,
{
initialLoad: false,
pageStart: 0,
loadMore: () => {
onFetchMore({ keyword });
},
// hasMoreItems may be null (using fixed data), in that case infinite scroll will be 'disabled'
hasMore: Boolean(hasMoreItems),
loader: React.createElement(
Box,
{ key: 0, display: 'flex', justifyContent: 'center', m: 1 },
React.createElement(CircularProgress, { size: 16 })
),
useWindow: false,
getScrollParent: () => listRef.current
},
items.map((item, i) => {
var _a;
return React.createElement(
ListItemButton,
{
disabled:
disabled ||
inProgressIds.includes(item.id) ||
(disabledItems === null || disabledItems === void 0 ? void 0 : disabledItems[item.id]),
key: item.id,
role: 'listitem',
onClick: (e) => onItemClick(item, e)
},
!disabled &&
React.createElement(
ListItemIcon,
null,
inProgressIds.includes(item.id)
? React.createElement(CircularProgress, { size: 42 })
: React.createElement(Checkbox, {
checked:
(_a =
checkedList[item.id] &&
!(disabledItems === null || disabledItems === void 0
? void 0
: disabledItems[item.id])) !== null && _a !== void 0
? _a
: false,
tabIndex: -1,
disableRipple: true
})
),
React.createElement(ListItemText, {
primary: item.title,
secondary: item.subtitle,
primaryTypographyProps: { noWrap: true, title: item.title }
})
);
})
)
: emptyStateMessage && React.createElement(EmptyState, { title: emptyStateMessage })
)
);
}
export default TransferListColumn;