test-crud/components/forms/AppTransferList.jsx

es una prueba acerca de como publicar un package name

import { useEffect, useState } from 'react'
import Grid from '@mui/material/Grid'
import List from '@mui/material/List'
import Card from '@mui/material/Card'
import CardHeader from '@mui/material/CardHeader'
import ListItem from '@mui/material/ListItem'
import ListItemText from '@mui/material/ListItemText'
import ListItemIcon from '@mui/material/ListItemIcon'
import Checkbox from '@mui/material/Checkbox'
import Divider from '@mui/material/Divider'
import AppButton from './AppButton'

function not(a, b) {
  return a.filter((value) => b.indexOf(value) === -1)
}

function intersection(a, b) {
  return a.filter((value) => b.indexOf(value) !== -1)
}

function union(a, b) {
  return [...a, ...not(b, a)]
}

function AppTransferList({ arrLeft, arrRight }) {
  const [checked, setChecked] = useState([])
  const [left, setLeft] = useState([])
  const [right, setRight] = useState([])
  const leftChecked = intersection(checked, arrLeft)
  const rightChecked = intersection(checked, arrRight)

  useEffect(() => {
    if (arrLeft.length > 0) setLeft(arrLeft)
    if (arrRight.length > 0) setRight(arrRight)
  }, [arrLeft, arrRight])

  const handleToggle = (value) => () => {
    const currentIndex = checked.indexOf(value)
    const newChecked = [...checked]
    if (currentIndex === -1) newChecked.push(value)
    else newChecked.splice(currentIndex, 1)
    setChecked(newChecked)
  }

  useEffect(() => {
    console.log(right)
  }, [right])

  const numberOfChecked = (items) => intersection(checked, items).length

  const handleToggleAll = (items) => () => {
    if (numberOfChecked(items) === items.length) {
      setChecked(not(checked, items))
    } else {
      setChecked(union(checked, items))
    }
  }

  const handleCheckedRight = () => {
    setRight(right.concat(leftChecked))
    setLeft(not(left, leftChecked))
    setChecked(not(checked, leftChecked))
  }

  const handleCheckedLeft = () => {
    setLeft(left.concat(rightChecked))
    setRight(not(right, rightChecked))
    setChecked(not(checked, rightChecked))
  }

  const customList = (title, items) => (
    <Card>
      <CardHeader
        sx={{ px: 2, py: 1 }}
        avatar={
          <Checkbox
            onClick={handleToggleAll(items)}
            checked={
              numberOfChecked(items) === items.length && items.length !== 0
            }
            indeterminate={
              numberOfChecked(items) !== items.length &&
              numberOfChecked(items) !== 0
            }
            disabled={items.length === 0}
            inputProps={{
              'aria-label': 'seleccionar todo',
            }}
          />
        }
        title={title}
        subheader={`${numberOfChecked(items)}/${items.length} seleccionado(s)`}
      />
      <Divider />
      <List
        sx={{
          width: 250,
          height: 350,
          bgcolor: 'background.paper',
          overflow: 'auto',
        }}
        dense
        component="div"
        role="list"
      >
        {items.map((x) => {
          return (
            <ListItem
              key={x.idDespacho}
              role="listitem"
              onClick={handleToggle(x)}
            >
              <ListItemIcon>
                <Checkbox
                  checked={checked.indexOf(x) !== -1}
                  tabIndex={-1}
                  disableRipple
                  inputProps={{
                    'aria-labelledby': x.codDespacho,
                  }}
                />
              </ListItemIcon>
              <ListItemText id={x.codDespacho} primary={x.despacho} />
            </ListItem>
          )
        })}
      </List>
    </Card>
  )

  return (
    <Grid container spacing={2} justifyContent="center" alignItems="center">
      <Grid item>{customList('Opciones', left)}</Grid>
      <Grid item>
        <Grid container direction="column" alignItems="center">
          <AppButton
            sx={{ my: 0.5 }}
            variant="outlined"
            size="small"
            onClick={handleCheckedRight}
            disabled={leftChecked.length === 0}
            aria-label="mover a la derecha"
            label=">"
          />

          <AppButton
            sx={{ my: 0.5 }}
            variant="outlined"
            size="small"
            onClick={handleCheckedLeft}
            disabled={rightChecked.length === 0}
            aria-label="mover a la izquierda"
            label="<"
          />
        </Grid>
      </Grid>
      <Grid item>{customList('Elegidos', right)}</Grid>
    </Grid>
  )
}

export default AppTransferList