cozy-ui 123.2.1 → 124.1.0

package/react/Table/Virtualized/index.jsx

@@ -0,0 +1,104 @@
+import React, { useState, forwardRef } from 'react'
+import { TableVirtuoso } from 'react-virtuoso'
+
+import CustomDragLayer from './Dnd/CustomDrag/CustomDragLayer'
+import FixedHeaderContent from './FixedHeaderContent'
+import RowContent from './RowContent'
+import { stableSort, getComparator } from './helpers'
+import virtuosoComponents from './virtuosoComponents'
+
+const VirtualizedTable = forwardRef(
+  (
+    {
+      rows,
+      columns,
+      defaultOrder,
+      secondarySort,
+      selectedItems = [],
+      onSelect = () => {},
+      onSelectAll = () => {},
+      isSelectedItem = () => {},
+      componentsProps,
+      dragProps,
+      ...props
+    },
+    ref
+  ) => {
+    const [order, setOrder] = useState('asc')
+    const [orderBy, setOrderBy] = useState(defaultOrder)
+    const [itemsInDropProcess, setItemsInDropProcess] = useState([]) // array of Ids, for dragndrop feature
+
+    const sortedData = stableSort(rows, getComparator(order, orderBy))
+    const data = secondarySort ? secondarySort(sortedData) : sortedData
+
+    const handleSort = property => {
+      const isAsc = orderBy === property && order === 'asc'
+      setOrder(isAsc ? 'desc' : 'asc')
+      setOrderBy(property)
+    }
+
+    const handleSelectAll = event => {
+      if (event?.target?.checked) {
+        onSelectAll(rows)
+        return
+      }
+      onSelectAll([])
+    }
+
+    return (
+      <TableVirtuoso
+        {...props}
+        ref={ref}
+        data={data}
+        context={{
+          isSelectedItem,
+          selectedItems,
+          dragProps,
+          itemsInDropProcess,
+          setItemsInDropProcess
+        }}
+        components={virtuosoComponents}
+        fixedHeaderContent={() => (
+          <FixedHeaderContent
+            columns={columns}
+            rowCount={rows.length}
+            selectedCount={selectedItems.length}
+            order={order}
+            orderBy={orderBy}
+            onClick={handleSort}
+            onSelectAllClick={handleSelectAll}
+          />
+        )}
+        itemContent={(_index, row) => (
+          <RowContent
+            index={_index}
+            row={row}
+            columns={columns}
+            isSelectedItem={isSelectedItem}
+            onSelectClick={onSelect}
+          >
+            {componentsProps?.rowContent?.children}
+          </RowContent>
+        )}
+        rowSpan={2}
+      />
+    )
+  }
+)
+
+VirtualizedTable.displayName = 'VirtualizedTable'
+
+const VirtuosoTableWrapper = props => {
+  if (!props.dragProps?.enabled) {
+    return <VirtualizedTable {...props} />
+  }
+
+  return (
+    <>
+      <CustomDragLayer dragId={props.dragProps.dragId} />
+      <VirtualizedTable {...props} />
+    </>
+  )
+}
+
+export default VirtuosoTableWrapper

package/react/Table/Virtualized/virtuosoComponents.jsx

@@ -0,0 +1,61 @@
+import React, { forwardRef } from 'react'
+
+import DnDConfigWrapper from './Dnd/DnDConfigWrapper'
+import TableRowDnD from './Dnd/TableRow'
+import Table from '..'
+import Paper from '../../Paper'
+import TableBody from '../../TableBody'
+import TableContainer from '../../TableContainer'
+import TableFooter from '../../TableFooter'
+import TableHead from '../../TableHead'
+import TableRow from '../../TableRow'
+
+const _TableContainer = forwardRef((props, ref) => (
+  <TableContainer
+    {...props}
+    ref={ref}
+    component={Paper}
+    style={{ zIndex: 'var(--zIndex-app)', ...props.style }}
+    elevation={0}
+  />
+))
+_TableContainer.displayName = '_TableContainer'
+
+const virtuosoComponents = {
+  Scroller: forwardRef(({ context, ...props }, ref) => {
+    if (!context.dragProps?.enabled) {
+      return <_TableContainer {...props} ref={ref} />
+    }
+
+    return (
+      <DnDConfigWrapper ref={ref}>
+        <_TableContainer {...props} ref={ref} />
+      </DnDConfigWrapper>
+    )
+  }),
+  Table: forwardRef((props, ref) => <Table {...props} ref={ref} />),
+  TableHead: forwardRef((props, ref) => <TableHead {...props} ref={ref} />),
+  TableBody: forwardRef((props, ref) => <TableBody {...props} ref={ref} />),
+  TableFooter: forwardRef((props, ref) => <TableFooter {...props} ref={ref} />),
+  TableRow: forwardRef(({ item, context, ...props }, ref) => {
+    const isSelected = context?.isSelectedItem(item)
+    const isDisabled = context?.itemsInDropProcess.includes(item._id)
+
+    if (!context.dragProps?.enabled) {
+      return <TableRow {...props} ref={ref} selected={isSelected} hover />
+    }
+
+    return (
+      <TableRowDnD
+        {...props}
+        item={item}
+        context={context}
+        selected={isSelected}
+        disabled={isDisabled}
+        hover
+      />
+    )
+  })
+}
+
+export default virtuosoComponents

package/react/TableRow/index.js

@@ -1,3 +1,18 @@
-import TableRow from '@material-ui/core/TableRow'
+import MuiTableRow from '@material-ui/core/TableRow'
+import cx from 'classnames'
+import React, { forwardRef } from 'react'
+
+const TableRow = forwardRef(({ disabled, className, ...props }, ref) => {
+  return (
+    <MuiTableRow
+      {...props}
+      className={cx(className, { disabled })}
+      disabled={disabled}
+      ref={ref}
+    />
+  )
+})
+
+TableRow.displayName = 'TableRow'
 
 export default TableRow

package/transpiled/react/Filename/index.d.ts

@@ -1,10 +1,11 @@
 export default Filename;
-declare function Filename({ icon, filename, extension, midEllipsis, variant }: {
+declare function Filename({ icon, filename, extension, midEllipsis, variant, path }: {
     icon: any;
     filename: any;
     extension: any;
     midEllipsis: any;
     variant: any;
+    path: any;
 }): JSX.Element;
 declare namespace Filename {
     namespace propTypes {

package/transpiled/react/Filename/index.js

@@ -1,24 +1,21 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
-import Icon, { iconPropType } from "cozy-ui/transpiled/react/Icon";
+import React, { Fragment } from 'react';
+var styles = {
+  "icon-withPath": "styles__icon-withPath___1IcPC"
+};
+import { iconPropType } from "cozy-ui/transpiled/react/Icon";
 import MidEllipsis from "cozy-ui/transpiled/react/MidEllipsis";
 import Typography from "cozy-ui/transpiled/react/Typography";
 
-var Filename = function Filename(_ref) {
-  var icon = _ref.icon,
-      filename = _ref.filename,
+var NameAndExtension = function NameAndExtension(_ref) {
+  var filename = _ref.filename,
       extension = _ref.extension,
-      midEllipsis = _ref.midEllipsis,
-      variant = _ref.variant;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "u-flex u-flex-items-center"
-  }, icon && /*#__PURE__*/React.createElement("div", {
-    className: "u-mr-1"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: icon,
-    width: 30,
-    height: 30
-  })), filename && /*#__PURE__*/React.createElement(Typography, {
+      variant = _ref.variant,
+      midEllipsis = _ref.midEllipsis;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, filename && /*#__PURE__*/React.createElement(Typography, {
     variant: variant,
     component: "span",
     noWrap: true
@@ -31,6 +28,42 @@ var Filename = function Filename(_ref) {
   }, extension));
 };
 
+var Filename = function Filename(_ref2) {
+  var icon = _ref2.icon,
+      filename = _ref2.filename,
+      extension = _ref2.extension,
+      midEllipsis = _ref2.midEllipsis,
+      variant = _ref2.variant,
+      path = _ref2.path;
+
+  var _ref3 = path ? [Fragment, {}] : ['div', {
+    className: cx('u-flex u-flex-items-center')
+  }],
+      _ref4 = _slicedToArray(_ref3, 2),
+      Wrapper = _ref4[0],
+      wrapperProps = _ref4[1];
+
+  return /*#__PURE__*/React.createElement(Wrapper, wrapperProps, icon && /*#__PURE__*/React.createElement("div", {
+    className: cx('u-flex u-pos-relative u-mr-1', _defineProperty({}, styles['icon-withPath'], !!path))
+  }, icon), path ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "u-flex"
+  }, /*#__PURE__*/React.createElement(NameAndExtension, {
+    filename: filename,
+    extension: extension,
+    variant: variant,
+    midEllipsis: midEllipsis
+  })), /*#__PURE__*/React.createElement(Typography, {
+    variant: "body2",
+    component: "div",
+    noWrap: true
+  }, path)) : /*#__PURE__*/React.createElement(NameAndExtension, {
+    filename: filename,
+    extension: extension,
+    variant: variant,
+    midEllipsis: midEllipsis
+  }));
+};
+
 Filename.propTypes = {
   /** Filename icon */
   icon: iconPropType,