argous 1.2.247 → 1.3.3

package/lib/components/ArgousComplexPagination/ArgousComplexPagination.js

@@ -1,10 +1,24 @@
-import { makeStyles, Toolbar, Typography, Select, InputBase, MenuItem, useTheme, IconButton, Box } from '@material-ui/core';
-import clsx from 'clsx';
+import { Toolbar, Typography, Select, InputBase, MenuItem, useTheme, IconButton, Box, GlobalStyles } from '@mui/material';
+import { clsx } from 'clsx';
 import React, { memo } from 'react';
 import { MdLastPage, MdFirstPage, MdKeyboardArrowRight, MdKeyboardArrowLeft } from 'react-icons/md';
 
-const useStyles = makeStyles(theme => ({
-  pagination: {
+const classes = {
+  pagination: 'argous-complex-pagination-pagination',
+  toolbar: 'argous-complex-pagination-toolbar',
+  spacer: 'argous-complex-pagination-spacer',
+  caption: 'argous-complex-pagination-caption',
+  selectRoot: 'argous-complex-pagination-select-root',
+  select: 'argous-complex-pagination-select',
+  selectIcon: 'argous-complex-pagination-select-icon',
+  input: 'argous-complex-pagination-input',
+  menuItem: 'argous-complex-pagination-menu-item',
+  actions: 'argous-complex-pagination-actions',
+  paginationActions: 'argous-complex-pagination-pagination-actions',
+};
+
+const paginationStyles = theme => ({
+  [`.${classes.pagination}`]: {
     display: 'flex',
     flexDirection: 'row-reverse',
     color: theme.palette.text.primary,
@@ -14,40 +28,42 @@ const useStyles = makeStyles(theme => ({
       padding: 0,
     },
   },
-  toolbar: {
+  [`.${classes.toolbar}`]: {
     minHeight: 52,
     paddingRight: 2,
   },
-  spacer: {
+  [`.${classes.spacer}`]: {
     flex: '1 1 100%',
   },
-  caption: {
+  [`.${classes.caption}`]: {
     flexShrink: 0,
   },
-  selectRoot: {
+  [`.${classes.selectRoot}`]: {
     marginRight: 32,
     marginLeft: 8,
   },
-  select: {
+  [`.${classes.select}`]: {
     paddingLeft: 8,
     paddingRight: 24,
     textAlign: 'right',
     textAlignLast: 'right',
   },
-  input: {
+  [`.${classes.selectIcon}`]: {},
+  [`.${classes.input}`]: {
     color: 'inherit',
     fontSize: 'inherit',
     flexShrink: 0,
   },
-  actions: {
+  [`.${classes.menuItem}`]: {},
+  [`.${classes.actions}`]: {
     flexShrink: 0,
     marginLeft: 20,
   },
-  paginationActions: {
+  [`.${classes.paginationActions}`]: {
     flexShrink: 0,
     marginLeft: theme.spacing(2.5),
   },
-}));
+});
 
 const handleChangePgAtual = (value, pages) => {
   if (value < 1) return 0;
@@ -56,17 +72,22 @@ const handleChangePgAtual = (value, pages) => {
 };
 
 const DefaultLabelDisplayedRows = ({ pages, page, onChangePage, from, to, count, showCount }) => {
-  return <React.Fragment>
-    <Box padding='1px 0px' display='inline'>
-      <InputBase inputProps={{ type: 'number', min: 1, max: pages || 1, value: page + 1 }} onChange={e => onChangePage(e, handleChangePgAtual(e.target.value, pages))} />
-      {` / ${pages || 1}`}
-    </Box>
-    {showCount && <div style={{ display: 'inline', marginLeft: '10px', paddingLeft: '10px' }}>{from} a {to} de {count}</div>}
-  </React.Fragment>;
+  return (
+    <React.Fragment>
+      <Box
+        sx={{
+          padding: '1px 0px',
+          display: 'inline'
+        }}>
+        <InputBase inputProps={{ type: 'number', min: 1, max: pages || 1, value: page + 1 }} onChange={e => onChangePage(e, handleChangePgAtual(e.target.value, pages))} />
+        {` / ${pages || 1}`}
+      </Box>
+      {showCount && <div style={{ display: 'inline', marginLeft: '10px', paddingLeft: '10px' }}>{from} a {to} de {count}</div>}
+    </React.Fragment>
+  );
 };
 
 const TablePaginationActions = memo(({ count, page, rowsPerPage, onChangePage }) => {
-  const classes = useStyles();
   const theme = useTheme();
   const handleFirstPageButtonClick = e => onChangePage(e, 0);
   const handleBackButtonClick = e => onChangePage(e, page - 1);
@@ -117,14 +138,16 @@ const ArgousComplexPagination = memo(({
   SelectProps = {},
   showCount
 }) => {
-  const classes = useStyles();
   const MenuItemComponent = SelectProps.native ? 'option' : MenuItem;
   return (
     <div className={clsx(classes.pagination, className)}>
+      <GlobalStyles styles={paginationStyles} />
       <Toolbar className={classes.toolbar}>
         <div className={classes.spacer} />
         {rowsPerPageOptions.length > 1 && (
-          <Typography color='inherit' variant='body2' className={classes.caption}>
+          <Typography variant='body2' className={classes.caption} sx={{
+            color: 'inherit'
+          }}>
             {labelRowsPerPage}
           </Typography>
         )}
@@ -150,7 +173,9 @@ const ArgousComplexPagination = memo(({
             ))}
           </Select>
         )}
-        <Typography color='inherit' variant='body2' component='div' className={classes.caption}>
+        <Typography variant='body2' component='div' className={classes.caption} sx={{
+          color: 'inherit'
+        }}>
           <LabelDisplayedRows {...{
             pages: Math.ceil(count / parseInt(rowsPerPage, 10)),
             from: count === 0 ? 0 : page * rowsPerPage + 1,
@@ -179,4 +204,4 @@ const ArgousComplexPagination = memo(({
   );
 });
 
-export default ArgousComplexPagination;
+export default ArgousComplexPagination;

package/lib/components/ArgousComplexTable/ArgousComplexTable.d.ts

@@ -2,7 +2,7 @@ import { ArgousComplexPaginationPrivateProps, ArgousComplexPaginationProps } fro
 import { ArgousComplexTableBodyPrivateProps, ArgousComplexTableBodyProps } from '../ArgousComplexTableBody/ArgousComplexTableBody';
 import { ArgousComplexTableHeadPrivateProps, ArgousComplexTableHeadProps } from '../ArgousComplexTableHead/ArgousComplexTableHead';
 import { ArgousComplexTableToolBarPrivateProps, ArgousComplexTableToolBarProps } from '../ArgousComplexTableToolbar/ArgousComplexTableToolBar';
-import { TableContainerProps, TableProps } from '@material-ui/core';
+import { TableContainerProps, TableProps } from '@mui/material';
 import React from 'react';
 
 export interface ArgousComplexTableProps extends ArgousComplexTableBodyProps, ArgousComplexPaginationProps, ArgousComplexPaginationProps, ArgousComplexTableHeadProps, ArgousComplexTableToolBarProps {

package/lib/components/ArgousComplexTable/ArgousComplexTable.js

@@ -1,23 +1,22 @@
 import { ArgousComplexPagination, ArgousComplexTableHead, ArgousComplexTableToolbar, ArgousComplexTableBody } from '../';
 import { getField } from '../../fieldsRedux';
 import { serverAction } from '../../utils/api';
-import { Table, TableContainer, Paper, ClickAwayListener, makeStyles } from '@material-ui/core';
-import clsx from 'clsx';
+import { Table, TableContainer, Paper, ClickAwayListener } from '@mui/material';
 import { isArray, isEqual, isFunction } from 'lodash';
 import moment from 'moment';
 import PropTypes from 'prop-types';
 import React, { useState, useEffect, forwardRef, useImperativeHandle, useMemo, createContext, useReducer, useCallback, memo } from 'react';
 
-const useStyles = makeStyles({
-  root: {
-    '& [class*="smooth-dnd-container"]': {
-      display: 'table-row-group'
-    },
-    '& [class*="smooth-dnd-draggable-wrapper"]': {
-      display: 'table-row !important'
-    }
+const rootSx = {
+  '& [class*="smooth-dnd-container"]': {
+    display: 'table-row-group'
+  },
+  '& [class*="smooth-dnd-draggable-wrapper"]': {
+    display: 'table-row !important'
   }
-});
+};
+
+const normalizeSx = sx => sx ? (Array.isArray(sx) ? sx : [sx]) : [];
 
 export const TableContext = createContext();
 
@@ -181,7 +180,6 @@ const ArgousComplexTable = forwardRef(({
   token = ''
 }, ref) => {
 
-  const classes = useStyles();
   const [state, dispatch] = useReducer(reducer, initialState(defaultRowsPerPage));
   const memoState = useMemo(() => ({ ...state, dispatch }), [state, dispatch]);
   const { selected, page, rowsPerPage, order, orderBy, filter, open } = memoState;
@@ -285,7 +283,9 @@ const ArgousComplexTable = forwardRef(({
     }
   }, [page, lista.length, rowsPerPage, ctrlPgn.recordCount, lista, method, field, externalCtrlPgn, dispatch]);
 
-  useEffect(() => dispatch({ type: 'setSelected', value: [] }), [lista]);
+  useEffect(() => {
+    dispatch({ type: 'setSelected', value: [] });
+  }, [lista]);
 
   useEffect(() => {
     if (onSelect) onSelect(selected);
@@ -354,7 +354,7 @@ const ArgousComplexTable = forwardRef(({
   return (
     <TableContext.Provider value={{ ...memoState, dadosMostrados, lista, indexToSelect, method, externalCtrlPgn }}>
       <ClickAwayListener onClickAway={onClickAway}>
-        <TableContainer component={Paper} variant='outlined' style={style} {...containerProps} className={clsx(classes.root, className)}>
+        <TableContainer component={Paper} variant='outlined' style={style} {...containerProps} className={className} sx={[rootSx, ...normalizeSx(containerProps?.sx)]}>
           <ToolbarComponent 
             numSelected={selected.length} 
             disableFilter={disableFilter || !!method || !!externalCtrlPgn} 
@@ -433,4 +433,4 @@ ArgousComplexTable.propTypes = {
   setExternalCtrlPgn: PropTypes.func
 };
 
-export default memo(ArgousComplexTable, isEqual);
+export default memo(ArgousComplexTable, isEqual);

package/lib/components/ArgousComplexTableBody/ArgousComplexTableBody.d.ts

@@ -1,4 +1,4 @@
-import { TableCellBaseProps, TableRowProps } from '@material-ui/core';
+import { TableCellBaseProps, TableRowProps } from '@mui/material';
 import * as React from 'react';
 
 export declare interface ChildrenFunction {

package/lib/components/ArgousComplexTableBody/ArgousComplexTableBody.js

@@ -1,32 +1,44 @@
 import { TableContext } from '../ArgousComplexTable/ArgousComplexTable';
-import { TableBody, TableRow, Checkbox, Collapse, TableCell, makeStyles, Typography, CircularProgress, alpha, Tooltip, IconButton } from '@material-ui/core';
-import clsx from 'clsx';
+import { TableBody, TableRow, Checkbox, Collapse, TableCell, Typography, CircularProgress, Tooltip, IconButton, GlobalStyles } from '@mui/material';
+import { alpha } from '@mui/material/styles';
+import { clsx } from 'clsx';
 import { isArray } from 'lodash';
 import React, { Fragment, useContext, memo } from 'react';
 import { MdDragHandle } from 'react-icons/md';
-import { Container, Draggable } from 'react-trello/dist/';
+import { Container, Draggable } from './DragAndDrop';
 
-const useStyles = makeStyles(theme => ({
-  dragHandle: {
+const classes = {
+  dragHandle: 'argous-complex-table-body-drag-handle',
+  hover: 'argous-complex-table-body-hover',
+  open: 'argous-complex-table-body-open',
+  semDados: 'argous-complex-table-body-sem-dados',
+  group: 'argous-complex-table-body-group',
+  loading: 'argous-complex-table-body-loading',
+  ghost: 'argous-complex-table-body-ghost',
+  tableCell: 'argous-complex-table-body-table-cell',
+};
+
+const tableBodyStyles = theme => ({
+  [`.${classes.dragHandle}`]: {
     cursor: 'n-resize'
   },
-  hover: {
+  [`.${classes.hover}`]: {
     '&:hover': {
       backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.selectedOpacity * 2)
     }
   },
-  open: {
+  [`.${classes.open}`]: {
     backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
     '&:hover': {
       backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity * 2),
     }
   },
-  semDados: {
+  [`.${classes.semDados}`]: {
     padding: theme.spacing(1),
     paddingLeft: theme.spacing(2),
     fontSize: '1rem',
   },
-  group: {
+  [`.${classes.group}`]: {
     '&>td': {
       padding: '0px',
       // '&:hover':{
@@ -34,33 +46,33 @@ const useStyles = makeStyles(theme => ({
       // }
     }
   },
-  loading: {
+  [`.${classes.loading}`]: {
     textAlign: 'center',
     padding: '7px'
   },
-  ghost: {
+  [`.${classes.ghost}`]: {
     borderBottom: '1px solid #0000',
     userSelect: 'none',
     '&:hover': {
       backgroundColor: '#0000 !important'
     }
   },
-  tableCell: {
+  [`.${classes.tableCell}`]: {
     overflow: 'hidden',
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis'
   }
-}));
+});
 
 const ArgousComplexTableBody = memo(({
-  children, 
-  line, 
+  children,
+  line,
   lineStyle,
   handleOpenClose,
   lineClass,
   enableCheck,
   disableCheckIf,
-  columnStyles, 
+  columnStyles,
   head,
   onClick,
   onDoubleClick,
@@ -75,8 +87,6 @@ const ArgousComplexTableBody = memo(({
   enableDrag,
   onDrop
 }) => {
-  const classes = useStyles();
-
   const { lista, selected, dispatch, loading } = useContext(TableContext);
 
   const handleClick = name => {
@@ -103,98 +113,103 @@ const ArgousComplexTableBody = memo(({
   };
 
   return (
-    <Container dragHandleSelector={`.${classes.dragHandle}`} onDrop={onDrop} render={containerRef => (
-      <TableBody innerRef={containerRef} /*component={Container} dragHandleSelector={`.${classes.dragHandle}`} onDrop={onDrop}*/>
-        {loading ? (
-          <TableRow><TableCell className={classes.loading} colSpan={dadosMostrados?.length && line(dadosMostrados[0])?.length + (enableCheck ? 1 : 0) + (enableDrag ? 1 : 0)}><CircularProgress disableShrink/></TableCell></TableRow>
-        ) : dadosMostrados.length ? dadosMostrados.map((linha, i) => {
+    <>
+      <GlobalStyles styles={tableBodyStyles} />
+      <Container dragHandleSelector={`.${classes.dragHandle}`} onDrop={onDrop} render={containerRef => (
+        <TableBody ref={containerRef} /*component={Container} dragHandleSelector={`.${classes.dragHandle}`} onDrop={onDrop}*/>
+          {loading ? (
+            <TableRow><TableCell className={classes.loading} colSpan={dadosMostrados?.length && line(dadosMostrados[0])?.length + (enableCheck ? 1 : 0) + (enableDrag ? 1 : 0)}><CircularProgress disableShrink/></TableCell></TableRow>
+          ) : dadosMostrados.length ? dadosMostrados.map((linha, i) => {
 
-          const isItemSelected = isSelected(linha[indexToSelect]);
-          const isItemOpen = i === open;
-          const ghostRow = (isArray(linha)) ? !linha.some((value) => !!value) : false;
-          const { title, ...rowProperties } = rowProps({ index: i, linhaOriginal: linha, linhaFormatada: line(linha), itensSelecionados: selected }) || {};
+            const isItemSelected = isSelected(linha[indexToSelect]);
+            const isItemOpen = i === open;
+            const ghostRow = (isArray(linha)) ? !linha.some((value) => !!value) : false;
+            const { title, ...rowProperties } = rowProps({ index: i, linhaOriginal: linha, linhaFormatada: line(linha), itensSelecionados: selected }) || {};
 
 
-          return <Draggable key={customKey ? lista[i][customKey] : i} render={draggableRef => (
-            //TODO criar proprio draggable pois esse remove classes do filho
-            <Fragment>
-              <CustomTooltip title={(ghostRow) ? '' : (lineTitle || title)}>
-                <TableRow
-                  component={Draggable}
-                  {...rowProperties}
-                  className={
-                    clsx(
-                      { 
-                        [classes.hover]: isItemSelected, 
-                        [classes.open]: (isItemOpen && !!children), 
-                        [classes.ghost]: ghostRow 
-                      }, 
-                      (ghostRow) ? '' : lineClass(line(linha), linha, i), 
-                      rowProperties.className
-                    )
-                  }
-                  hover
-                  role='checkbox'
-                  tabIndex={-1}
-                  selected={isItemSelected}
-                  style={(lineStyle && !ghostRow) ? lineStyle(linha, line(linha), i) : undefined} 
-                  onClick={(ghostRow) ? undefined : (onClick) ? e => onClick(e, linha, line(linha), i) : (children) ? () => handleOpenClose(i) : undefined}
-                  onDoubleClick={(ghostRow) ? undefined : (onDoubleClick) ? e => onDoubleClick(e, linha, line(linha), i) : undefined}
-                  innerRef={draggableRef}
-                >
-                  {enableDrag && <TableCell padding='checkbox'>
-                    <Tooltip title='Arrastar'>
-                      <IconButton size='small' className={classes.dragHandle}>
-                        <MdDragHandle/>
-                      </IconButton>
-                    </Tooltip>
-                  </TableCell>}
-                  {(enableCheck) && (
-                    <TableCell padding='checkbox' className={clsx({ [classes.ghost]: ghostRow })}>
-                      {(!ghostRow) && (
-                        <Checkbox 
-                          checked={isItemSelected} 
-                          disabled={(disableCheckIf) && disableCheckIf(linha, line(linha), i)} 
-                          onClick={(event) => {
-                            event.stopPropagation();
-                            handleClick(linha[indexToSelect]);
-                          }} 
-                        />
+            return (
+              <Draggable key={customKey ? lista[i][customKey] : i} render={draggableRef => (
+              //TODO criar proprio draggable pois esse remove classes do filho
+                (<Fragment>
+                  <CustomTooltip title={(ghostRow) ? '' : (lineTitle || title)}>
+                    <TableRow
+                      component={Draggable}
+                      {...rowProperties}
+                      className={
+                        clsx(
+                          {
+                            [classes.hover]: isItemSelected,
+                            [classes.open]: (isItemOpen && !!children),
+                            [classes.ghost]: ghostRow
+                          },
+                          (ghostRow) ? '' : lineClass(line(linha), linha, i),
+                          rowProperties.className
+                        )
+                      }
+                      hover
+                      role='checkbox'
+                      tabIndex={-1}
+                      selected={isItemSelected}
+                      style={(lineStyle && !ghostRow) ? lineStyle(linha, line(linha), i) : undefined}
+                      onClick={(ghostRow) ? undefined : (onClick) ? e => onClick(e, linha, line(linha), i) : (children) ? () => handleOpenClose(i) : undefined}
+                      onDoubleClick={(ghostRow) ? undefined : (onDoubleClick) ? e => onDoubleClick(e, linha, line(linha), i) : undefined}
+                      ref={draggableRef}
+                    >
+                      {enableDrag && <TableCell padding='checkbox'>
+                        <Tooltip title='Arrastar'>
+                          <IconButton size='small' className={classes.dragHandle}>
+                            <MdDragHandle/>
+                          </IconButton>
+                        </Tooltip>
+                      </TableCell>}
+                      {(enableCheck) && (
+                        <TableCell padding='checkbox' className={clsx({ [classes.ghost]: ghostRow })}>
+                          {(!ghostRow) && (
+                            <Checkbox
+                              checked={isItemSelected}
+                              disabled={(disableCheckIf) && disableCheckIf(linha, line(linha), i)}
+                              onClick={(event) => {
+                                event.stopPropagation();
+                                handleClick(linha[indexToSelect]);
+                              }}
+                            />
+                          )}
+                        </TableCell>
                       )}
-                    </TableCell>
-                  )}
-                  {isArray(line(linha)) && line(linha).map((coluna, j) => (
-                    (ghostRow) ? (
-                      <TableCell key={j} className={clsx(classes.tableCell, classes.ghost)}>
-                        &nbsp;
-                      </TableCell>
-                    ) : (
-                      <TableCell 
-                        key={j} 
-                        {...columnProps(j, coluna, linha, line(linha))} 
-                        style={columnStyles ? columnStyles[j] : undefined} 
-                        className={classes.tableCell}
-                      >
-                        {getCellContent(coluna, dadosMostrados[i], j, i)}
+                      {isArray(line(linha)) && line(linha).map((coluna, j) => (
+                        (ghostRow) ? (
+                          <TableCell key={j} className={clsx(classes.tableCell, classes.ghost)}>
+                          &nbsp;
+                          </TableCell>
+                        ) : (
+                          <TableCell
+                            key={j}
+                            {...columnProps(j, coluna, linha, line(linha))}
+                            style={columnStyles ? columnStyles[j] : undefined}
+                            className={classes.tableCell}
+                          >
+                            {getCellContent(coluna, dadosMostrados[i], j, i)}
+                          </TableCell>
+                        )
+                      ))}
+                    </TableRow>
+                  </CustomTooltip>
+                  {children && (
+                    <TableRow className={classes.group}>
+                      <TableCell colSpan={dadosMostrados?.length && line(dadosMostrados[0])?.length + (enableCheck ? 1 : 0) + (enableDrag ? 1 : 0)} style={{ padding: open === i ? 8 : 0 }} className='argous-complex-table-group-cell'>
+                        <Collapse in={open === i} mountOnEnter unmountOnExit>
+                          {typeof children === 'function' ? children({ linha: line(linha), linhaOriginal: linha, index: i }) : children}
+                        </Collapse>
                       </TableCell>
-                    )
-                  ))}
-                </TableRow>
-              </CustomTooltip>
-              {children && (
-                <TableRow className={classes.group}>
-                  <TableCell colSpan={dadosMostrados?.length && line(dadosMostrados[0])?.length + (enableCheck ? 1 : 0) + (enableDrag ? 1 : 0)} style={{ padding: open === i ? 8 : 0 }} className='argous-complex-table-group-cell'>
-                    <Collapse in={open === i} mountOnEnter unmountOnExit>
-                      {typeof children === 'function' ? children({ linha: line(linha), linhaOriginal: linha, index: i }) : children}
-                    </Collapse>
-                  </TableCell>
-                </TableRow>
-              )}
-            </Fragment>
-          )}/>;
-        }) : <TableRow><Typography className={classes.semDados} component='td' variant='h6' colSpan={head.length + (enableCheck ? 1 : 0)}>Nenhum dado a ser exibido</Typography></TableRow> }
-      </TableBody>
-    )}/>
+                    </TableRow>
+                  )}
+                </Fragment>)
+              )}/>
+            );
+          }) : <TableRow><Typography className={classes.semDados} component='td' variant='h6' colSpan={head.length + (enableCheck ? 1 : 0)}>Nenhum dado a ser exibido</Typography></TableRow> }
+        </TableBody>
+      )}/>
+    </>
   );
 });
 
@@ -205,4 +220,4 @@ export const CustomTooltip = ({ title, children }) => {
     {children}
   </Tooltip>;
   return children;
-};
+};

package/lib/components/ArgousComplexTableBody/DragAndDrop.js

@@ -0,0 +1,85 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import smoothDnD, { constants, dropHandlers } from 'trello-smooth-dnd';
+
+smoothDnD.dropHandler = dropHandlers.reactDropHandler().handler;
+smoothDnD.wrapChild = child => child;
+
+export class Container extends Component {
+  componentDidMount() {
+    this.previousContainer = this.containerElement;
+    this.container = smoothDnD(this.containerElement, this.getContainerOptions());
+  }
+
+  componentDidUpdate() {
+    if (this.previousContainer && this.previousContainer !== this.containerElement) {
+      this.container.dispose();
+      this.container = smoothDnD(this.containerElement, this.getContainerOptions());
+      this.previousContainer = this.containerElement;
+    }
+  }
+
+  componentWillUnmount() {
+    this.container.dispose();
+  }
+
+  setRef = element => {
+    this.containerElement = element;
+  };
+
+  getContainerOptions = () => {
+    const functionProps = {};
+    const callbacks = [
+      'onDragStart',
+      'onDragEnd',
+      'onDrop',
+      'getChildPayload',
+      'shouldAnimateDrop',
+      'shouldAcceptDrop',
+      'onDragEnter',
+      'onDragLeave',
+      'render',
+      'onDropReady',
+      'getGhostParent'
+    ];
+
+    callbacks.forEach(callback => {
+      if (this.props[callback]) {
+        functionProps[callback] = (...parameters) => this.props[callback](...parameters);
+      }
+    });
+
+    return { ...this.props, ...functionProps };
+  };
+
+  render() {
+    if (this.props.render) {
+      return this.props.render(this.setRef);
+    }
+
+    return <div style={this.props.style} ref={this.setRef}>{this.props.children}</div>;
+  }
+}
+
+Container.propTypes = {
+  children: PropTypes.node,
+  render: PropTypes.func,
+  style: PropTypes.object
+};
+
+export class Draggable extends Component {
+  render() {
+    if (this.props.render) {
+      return React.cloneElement(this.props.render(), { className: constants.wrapperClass });
+    }
+
+    const className = `${this.props.className ? `${this.props.className} ` : ''}${constants.wrapperClass}`;
+    return <div {...this.props} className={className}>{this.props.children}</div>;
+  }
+}
+
+Draggable.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  render: PropTypes.func
+};