@craftercms/studio-ui/components/TransferList/TransferList.js

Services, components, models & utils to build CrafterCMS authoring extensions.

/*
 * 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 Box from '@mui/material/Box';
import React from 'react';
import IconButton from '@mui/material/IconButton';
import NavigateNextIcon from '@mui/icons-material/NavigateNext';
import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore';
import useStyles from './styles';
import TransferListColumn from '../TransferListColumn';
import { FormattedMessage } from 'react-intl';
import Tooltip from '@mui/material/Tooltip';
export function TransferList(props) {
  const {
    source,
    target,
    inProgressIds,
    disableAdd,
    disableRemove,
    addToTarget,
    removeFromTarget,
    disabled = false
  } = props;
  const { classes } = useStyles();
  return React.createElement(
    Box,
    { display: 'flex' },
    React.createElement(TransferListColumn, {
      title: source.title,
      items: source.items,
      disabledItems: source.disabledItems,
      checkedList: source.checkedList,
      onCheckAllClicked: source.onCheckAllClicked,
      onItemClick: source.onItemClick,
      isAllChecked: source.isAllChecked,
      inProgressIds: inProgressIds,
      emptyStateMessage: source.emptyStateMessage,
      disabled: disabled,
      filterKeyword: source.filterKeyword,
      setFilterKeyword: source.setFilterKeyword,
      onFilter: source.onFilter,
      onFetchMore: source.onFetchMore,
      hasMoreItems: source.hasMoreItems
    }),
    React.createElement(
      'section',
      { className: classes.buttonsWrapper },
      !disabled &&
        React.createElement(
          React.Fragment,
          null,
          React.createElement(
            Tooltip,
            {
              title: disableAdd
                ? React.createElement(FormattedMessage, {
                    id: 'transferList.addDisabledTooltip',
                    defaultMessage: 'Select items to add from the left'
                  })
                : React.createElement(FormattedMessage, {
                    id: 'transferList.addToTarget',
                    defaultMessage: 'Add selected'
                  })
            },
            React.createElement(
              'span',
              null,
              React.createElement(
                IconButton,
                { onClick: addToTarget, disabled: disableAdd, size: 'large' },
                React.createElement(NavigateNextIcon, null)
              )
            )
          ),
          React.createElement(
            Tooltip,
            {
              title: disableRemove
                ? React.createElement(FormattedMessage, {
                    id: 'transferList.removeDisabledTooltip',
                    defaultMessage: 'Select items to remove from the right'
                  })
                : React.createElement(FormattedMessage, {
                    id: 'transferList.removeFromTarget',
                    defaultMessage: 'Remove selected'
                  })
            },
            React.createElement(
              'span',
              null,
              React.createElement(
                IconButton,
                { onClick: removeFromTarget, disabled: disableRemove, size: 'large' },
                React.createElement(NavigateBeforeIcon, null)
              )
            )
          )
        )
    ),
    React.createElement(TransferListColumn, {
      title: target.title,
      items: target.items,
      disabledItems: target.disabledItems,
      checkedList: target.checkedList,
      onCheckAllClicked: target.onCheckAllClicked,
      onItemClick: target.onItemClick,
      isAllChecked: target.isAllChecked,
      inProgressIds: inProgressIds,
      emptyStateMessage: target.emptyStateMessage,
      disabled: disabled,
      filterKeyword: target.filterKeyword,
      setFilterKeyword: target.setFilterKeyword,
      onFilter: target.onFilter,
      onFetchMore: target.onFetchMore,
      hasMoreItems: target.hasMoreItems
    })
  );
}
export default TransferList;