cozy-ui 123.2.1 → 124.1.0

package/transpiled/react/Table/Virtualized/Dnd/CustomDrag/DragPreviewWrapper.js

@@ -0,0 +1,63 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useEffect, useState } from 'react';
+import DragPreview from "cozy-ui/transpiled/react/Table/Virtualized/Dnd/CustomDrag/DragPreview";
+
+var makeStyles = function makeStyles(_ref) {
+  var x = _ref.x,
+      y = _ref.y;
+
+  if (!x || !y) {
+    return {
+      display: 'none'
+    };
+  }
+
+  var transform = "translate(".concat(x, "px, ").concat(y, "px)");
+  return {
+    transform: transform,
+    WebkitTransform: transform
+  };
+};
+
+var DragPreviewWrapper = function DragPreviewWrapper(_ref2) {
+  var item = _ref2.item,
+      itemType = _ref2.itemType,
+      dragId = _ref2.dragId,
+      initialOffset = _ref2.initialOffset,
+      currentOffset = _ref2.currentOffset;
+
+  var _useState = useState({
+    x: null,
+    y: null
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      mousePosition = _useState2[0],
+      setMousePosition = _useState2[1];
+
+  useEffect(function () {
+    var handleMouseMove = function handleMouseMove(e) {
+      setMousePosition({
+        x: e.clientX,
+        y: e.clientY
+      });
+    };
+
+    window.addEventListener('dragover', handleMouseMove);
+    return function () {
+      window.removeEventListener('dragover', handleMouseMove);
+    };
+  }, []);
+
+  if (!initialOffset || !currentOffset || itemType !== dragId) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    style: makeStyles(mousePosition)
+  }, /*#__PURE__*/React.createElement(DragPreview, {
+    fileName: item.draggedItems[0].name,
+    selectedCount: item.draggedItems.length
+  }));
+};
+
+export default DragPreviewWrapper;

package/transpiled/react/Table/Virtualized/Dnd/DnDConfigWrapper.d.ts

@@ -0,0 +1,2 @@
+export default DnDConfigWrapper;
+declare const DnDConfigWrapper: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;

package/transpiled/react/Table/Virtualized/Dnd/DnDConfigWrapper.js

@@ -0,0 +1,55 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { forwardRef, useEffect, useState } from 'react';
+import { useDragDropManager } from 'react-dnd';
+var DnDConfigWrapper = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children;
+  var dragDropManager = useDragDropManager();
+  var monitor = dragDropManager.getMonitor();
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isDragging = _useState2[0],
+      setIsDragging = _useState2[1];
+
+  useEffect(function () {
+    var unsubscribe = monitor.subscribeToStateChange(function () {
+      setIsDragging(monitor.isDragging());
+    });
+    return function () {
+      return unsubscribe();
+    };
+  }, [monitor]);
+  useEffect(function () {
+    if (!isDragging) return;
+    var scrollThreshold = 100;
+    var scrollMaxSpeed = 75;
+    var intervalId = setInterval(function () {
+      var offset = monitor.getClientOffset();
+      var container = ref.current;
+      if (!offset || !container) return;
+
+      var _container$getBoundin = container.getBoundingClientRect(),
+          top = _container$getBoundin.top,
+          bottom = _container$getBoundin.bottom;
+
+      var distanceToTop = offset.y - top;
+      var distanceToBottom = bottom - offset.y;
+
+      if (distanceToTop < scrollThreshold) {
+        var speed = scrollMaxSpeed * (1 - distanceToTop / scrollThreshold);
+        container.scrollBy(0, -speed);
+      } else if (distanceToBottom < scrollThreshold) {
+        var _speed = scrollMaxSpeed * (1 - distanceToBottom / scrollThreshold);
+
+        container.scrollBy(0, _speed);
+      }
+    }, 16); // ~60fps
+
+    return function () {
+      return clearInterval(intervalId);
+    };
+  }, [isDragging, monitor, ref]);
+  return children;
+});
+DnDConfigWrapper.displayName = 'DnDConfigWrapper';
+export default DnDConfigWrapper;

package/transpiled/react/Table/Virtualized/Dnd/TableRow.d.ts

@@ -0,0 +1,8 @@
+export default TableRow;
+declare function TableRow({ item, context, selected, disabled, ...props }: {
+    [x: string]: any;
+    item: any;
+    context: any;
+    selected: any;
+    disabled: any;
+}): JSX.Element;

package/transpiled/react/Table/Virtualized/Dnd/TableRow.js

@@ -0,0 +1,130 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["item", "context", "selected", "disabled"];
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useEffect } from 'react';
+import { useDrag, useDrop } from 'react-dnd';
+import { getEmptyImage } from 'react-dnd-html5-backend';
+import TableRowClassic from "cozy-ui/transpiled/react/TableRow";
+
+var TableRow = function TableRow(_ref) {
+  var item = _ref.item,
+      context = _ref.context,
+      selected = _ref.selected,
+      disabled = _ref.disabled,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var selectedItems = context.selectedItems,
+      setItemsInDropProcess = context.setItemsInDropProcess,
+      dragProps = context.dragProps;
+  var onDrop = dragProps.onDrop,
+      canDropProps = dragProps.canDrop,
+      canDragProps = dragProps.canDrag,
+      dragId = dragProps.dragId;
+
+  var _useDrag = useDrag(function () {
+    return {
+      type: dragId,
+      isDragging: function isDragging(monitor) {
+        // put all selected items in isDragging state
+        if (selectedItems.length > 0) {
+          return selectedItems.some(function (selectedItem) {
+            return selectedItem._id === item._id;
+          });
+        }
+
+        return item._id === monitor.getItem().draggedItems[0]._id;
+      },
+      item: {
+        draggedItems: selectedItems.length > 0 ? selectedItems : [item]
+      },
+      canDrag: function canDrag() {
+        var defaultCanDrag = (canDragProps === null || canDragProps === void 0 ? void 0 : canDragProps(item)) || true; // if selectedItems is not empty, only the selected items can be dragged
+
+        // if selectedItems is not empty, only the selected items can be dragged
+        if (selectedItems.length > 0) {
+          return defaultCanDrag && selected;
+        }
+
+        return defaultCanDrag;
+      },
+      collect: function collect(monitor) {
+        return {
+          isDragging: monitor.isDragging()
+        };
+      }
+    };
+  }, [item, selectedItems] // used to pass args inside returned object attributes
+  ),
+      _useDrag2 = _slicedToArray(_useDrag, 3),
+      dragCollect = _useDrag2[0],
+      dragRef = _useDrag2[1],
+      dragRefPreview = _useDrag2[2];
+
+  var _useDrop = useDrop(function () {
+    return {
+      accept: dragId,
+      canDrop: function canDrop() {
+        return canDropProps ? canDropProps(item) : true;
+      },
+      drop: function () {
+        var _drop = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(draggedItem) {
+          return _regeneratorRuntime.wrap(function _callee$(_context) {
+            while (1) {
+              switch (_context.prev = _context.next) {
+                case 0:
+                  setItemsInDropProcess(draggedItem.draggedItems.map(function (draggedItem) {
+                    return draggedItem._id;
+                  }));
+                  _context.next = 3;
+                  return onDrop(draggedItem.draggedItems, item, selectedItems);
+
+                case 3:
+                  setItemsInDropProcess([]);
+
+                case 4:
+                case "end":
+                  return _context.stop();
+              }
+            }
+          }, _callee);
+        }));
+
+        function drop(_x) {
+          return _drop.apply(this, arguments);
+        }
+
+        return drop;
+      }(),
+      collect: function collect(monitor) {
+        return {
+          isOver: monitor.isOver()
+        };
+      }
+    };
+  }, [item._id, selectedItems] // used to pass args inside returned object attributes
+  ),
+      _useDrop2 = _slicedToArray(_useDrop, 2),
+      dropCollect = _useDrop2[0],
+      dropRef = _useDrop2[1]; // Tricks for the preview image to be empty
+  // https://react-dnd.github.io/react-dnd/examples/drag-around/custom-drag-layer
+
+
+  useEffect(function () {
+    dragRefPreview(getEmptyImage(), {
+      captureDraggingState: true
+    });
+  }, [dragRefPreview]);
+  return /*#__PURE__*/React.createElement(TableRowClassic, _extends({}, props, {
+    ref: function ref(node) {
+      return dragRef(dropRef(node));
+    },
+    selected: selected || dropCollect.isOver,
+    className: dragCollect.isDragging ? 'u-o-50' : '',
+    disabled: disabled
+  }));
+};
+
+export default TableRow;

package/transpiled/react/Table/Virtualized/FixedHeaderContent.d.ts

@@ -0,0 +1,10 @@
+export default FixedHeaderContent;
+declare function FixedHeaderContent({ columns, order, orderBy, rowCount, selectedCount, onClick, onSelectAllClick }: {
+    columns: any;
+    order: any;
+    orderBy: any;
+    rowCount: any;
+    selectedCount: any;
+    onClick: any;
+    onSelectAllClick: any;
+}): JSX.Element;

package/transpiled/react/Table/Virtualized/FixedHeaderContent.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import TableHeadCell from "cozy-ui/transpiled/react/Table/Virtualized/HeadCell";
+import Checkbox from "cozy-ui/transpiled/react/Checkbox";
+import TableCell from "cozy-ui/transpiled/react/TableCell";
+import TableRow from "cozy-ui/transpiled/react/TableRow";
+import { makeStyles } from "cozy-ui/transpiled/react/styles";
+var useStyles = makeStyles({
+  visuallyHidden: {
+    border: 0,
+    clip: 'rect(0 0 0 0)',
+    height: 1,
+    margin: -1,
+    overflow: 'hidden',
+    padding: 0,
+    position: 'absolute',
+    top: 20,
+    width: 1
+  }
+});
+
+var FixedHeaderContent = function FixedHeaderContent(_ref) {
+  var columns = _ref.columns,
+      order = _ref.order,
+      orderBy = _ref.orderBy,
+      rowCount = _ref.rowCount,
+      selectedCount = _ref.selectedCount,
+      _onClick = _ref.onClick,
+      onSelectAllClick = _ref.onSelectAllClick;
+  var classes = useStyles();
+  return /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableCell, {
+    align: "center",
+    padding: "checkbox"
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    indeterminate: selectedCount > 0 && selectedCount < rowCount,
+    checked: rowCount > 0 && selectedCount === rowCount,
+    inputProps: {
+      'aria-label': 'select all'
+    },
+    onChange: onSelectAllClick
+  })), columns.map(function (column) {
+    return /*#__PURE__*/React.createElement(TableHeadCell, {
+      key: column.id,
+      className: classes.visuallyHidden,
+      column: column,
+      order: order,
+      orderBy: orderBy,
+      onClick: function onClick() {
+        return _onClick(column.id);
+      }
+    });
+  }));
+};
+
+export default FixedHeaderContent;

package/transpiled/react/Table/Virtualized/HeadCell.d.ts

@@ -0,0 +1,8 @@
+export default TableHeadCell;
+declare function TableHeadCell({ className, column, orderBy, order, onClick }: {
+    className: any;
+    column: any;
+    orderBy: any;
+    order: any;
+    onClick: any;
+}): JSX.Element;

package/transpiled/react/Table/Virtualized/HeadCell.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import TableCell from "cozy-ui/transpiled/react/TableCell";
+import TableSortLabel from "cozy-ui/transpiled/react/TableSortLabel";
+import { makeStyles } from "cozy-ui/transpiled/react/styles";
+var useStyles = makeStyles({
+  root: {
+    width: function width(_ref) {
+      var column = _ref.column;
+      return column.width;
+    },
+    maxWidth: function maxWidth(_ref2) {
+      var column = _ref2.column;
+      return column.maxWidth;
+    }
+  }
+});
+
+var TableHeadCell = function TableHeadCell(_ref3) {
+  var _column$textAlign;
+
+  var className = _ref3.className,
+      column = _ref3.column,
+      orderBy = _ref3.orderBy,
+      order = _ref3.order,
+      onClick = _ref3.onClick;
+  var classes = useStyles({
+    column: column
+  });
+  return /*#__PURE__*/React.createElement(TableCell, {
+    key: column.id,
+    classes: classes,
+    align: (_column$textAlign = column.textAlign) !== null && _column$textAlign !== void 0 ? _column$textAlign : 'left',
+    padding: column.disablePadding ? 'none' : 'normal',
+    sortDirection: orderBy === column.id ? order : false
+  }, column.sortable !== false ? /*#__PURE__*/React.createElement(TableSortLabel, {
+    active: orderBy === column.id,
+    direction: orderBy === column.id ? order : 'asc',
+    onClick: onClick
+  }, column.label, orderBy === column.id && /*#__PURE__*/React.createElement("span", {
+    className: className
+  }, order === 'desc' ? 'sorted descending' : 'sorted ascending')) : column.label);
+};
+
+export default TableHeadCell;

package/transpiled/react/Table/Virtualized/RowContent.d.ts

@@ -0,0 +1,10 @@
+declare var _default: React.MemoExoticComponent<({ index, row, columns, isSelectedItem, children, onSelectClick }: {
+    index: any;
+    row: any;
+    columns: any;
+    isSelectedItem: any;
+    children: any;
+    onSelectClick: any;
+}) => JSX.Element>;
+export default _default;
+import React from "react";

package/transpiled/react/Table/Virtualized/RowContent.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import Cell from "cozy-ui/transpiled/react/Table/Virtualized/Cell";
+import Checkbox from "cozy-ui/transpiled/react/Checkbox";
+import TableCell from "cozy-ui/transpiled/react/TableCell";
+
+var RowContent = function RowContent(_ref) {
+  var index = _ref.index,
+      row = _ref.row,
+      columns = _ref.columns,
+      isSelectedItem = _ref.isSelectedItem,
+      children = _ref.children,
+      onSelectClick = _ref.onSelectClick;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TableCell, {
+    align: "center",
+    padding: "checkbox"
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    checked: isSelectedItem(row),
+    inputProps: {
+      'aria-labelledby': "enhanced-table-checkbox-".concat(index)
+    },
+    onChange: function onChange() {
+      return onSelectClick(row);
+    }
+  })), columns.map(function (column) {
+    return /*#__PURE__*/React.createElement(Cell, {
+      key: column.id,
+      row: row,
+      columns: columns,
+      column: column
+    }, children);
+  }));
+};
+
+export default /*#__PURE__*/React.memo(RowContent);

package/transpiled/react/Table/Virtualized/helpers.d.ts

@@ -0,0 +1,2 @@
+export function getComparator(order: any, orderBy: any, lang: any): (a: any, b: any) => number;
+export function stableSort(array: any, comparator: any): any;

package/transpiled/react/Table/Virtualized/helpers.js

@@ -0,0 +1,64 @@
+var descendingComparator = function descendingComparator(_ref) {
+  var a = _ref.a,
+      b = _ref.b,
+      order = _ref.order,
+      orderBy = _ref.orderBy,
+      lang = _ref.lang;
+  var aValue = a[orderBy];
+  var bValue = b[orderBy];
+
+  if (typeof aValue === 'string') {
+    var isDate = /\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}/.test(aValue);
+    var isNumber = !isNaN(parseInt(aValue));
+
+    if (isDate) {
+      return new Date(bValue) - new Date(aValue);
+    }
+
+    if (isNumber) {
+      return parseInt(bValue) - parseInt(aValue);
+    }
+
+    var _Intl$Collator = Intl.Collator(lang || 'en', {
+      caseFirst: order === 'asc' ? 'upper' : 'lower'
+    }),
+        compare = _Intl$Collator.compare;
+
+    return compare(bValue, aValue);
+  }
+
+  return bValue - aValue;
+};
+
+export var getComparator = function getComparator(order, orderBy, lang) {
+  return order === 'desc' ? function (a, b) {
+    return descendingComparator({
+      a: a,
+      b: b,
+      order: order,
+      orderBy: orderBy,
+      lang: lang
+    });
+  } : function (a, b) {
+    return -descendingComparator({
+      a: a,
+      b: b,
+      order: order,
+      orderBy: orderBy,
+      lang: lang
+    });
+  };
+};
+export var stableSort = function stableSort(array, comparator) {
+  var stabilizedThis = array.map(function (el, index) {
+    return [el, index];
+  });
+  stabilizedThis.sort(function (a, b) {
+    var order = comparator(a[0], b[0]);
+    if (order !== 0) return order;
+    return a[1] - b[1];
+  });
+  return stabilizedThis.map(function (el) {
+    return el[0];
+  });
+};

package/transpiled/react/Table/Virtualized/helpers.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/transpiled/react/Table/Virtualized/index.d.ts

@@ -0,0 +1,2 @@
+export default VirtuosoTableWrapper;
+declare function VirtuosoTableWrapper(props: any): JSX.Element;

package/transpiled/react/Table/Virtualized/index.js

@@ -0,0 +1,115 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["rows", "columns", "defaultOrder", "secondarySort", "selectedItems", "onSelect", "onSelectAll", "isSelectedItem", "componentsProps", "dragProps"];
+import React, { useState, forwardRef } from 'react';
+import { TableVirtuoso } from 'react-virtuoso';
+import CustomDragLayer from "cozy-ui/transpiled/react/Table/Virtualized/Dnd/CustomDrag/CustomDragLayer";
+import FixedHeaderContent from "cozy-ui/transpiled/react/Table/Virtualized/FixedHeaderContent";
+import RowContent from "cozy-ui/transpiled/react/Table/Virtualized/RowContent";
+import { stableSort, getComparator } from "cozy-ui/transpiled/react/Table/Virtualized/helpers";
+import virtuosoComponents from "cozy-ui/transpiled/react/Table/Virtualized/virtuosoComponents";
+var VirtualizedTable = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var rows = _ref.rows,
+      columns = _ref.columns,
+      defaultOrder = _ref.defaultOrder,
+      secondarySort = _ref.secondarySort,
+      _ref$selectedItems = _ref.selectedItems,
+      selectedItems = _ref$selectedItems === void 0 ? [] : _ref$selectedItems,
+      _ref$onSelect = _ref.onSelect,
+      onSelect = _ref$onSelect === void 0 ? function () {} : _ref$onSelect,
+      _ref$onSelectAll = _ref.onSelectAll,
+      onSelectAll = _ref$onSelectAll === void 0 ? function () {} : _ref$onSelectAll,
+      _ref$isSelectedItem = _ref.isSelectedItem,
+      isSelectedItem = _ref$isSelectedItem === void 0 ? function () {} : _ref$isSelectedItem,
+      componentsProps = _ref.componentsProps,
+      dragProps = _ref.dragProps,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useState = useState('asc'),
+      _useState2 = _slicedToArray(_useState, 2),
+      order = _useState2[0],
+      setOrder = _useState2[1];
+
+  var _useState3 = useState(defaultOrder),
+      _useState4 = _slicedToArray(_useState3, 2),
+      orderBy = _useState4[0],
+      setOrderBy = _useState4[1];
+
+  var _useState5 = useState([]),
+      _useState6 = _slicedToArray(_useState5, 2),
+      itemsInDropProcess = _useState6[0],
+      setItemsInDropProcess = _useState6[1]; // array of Ids, for dragndrop feature
+
+
+  var sortedData = stableSort(rows, getComparator(order, orderBy));
+  var data = secondarySort ? secondarySort(sortedData) : sortedData;
+
+  var handleSort = function handleSort(property) {
+    var isAsc = orderBy === property && order === 'asc';
+    setOrder(isAsc ? 'desc' : 'asc');
+    setOrderBy(property);
+  };
+
+  var handleSelectAll = function handleSelectAll(event) {
+    var _event$target;
+
+    if (event !== null && event !== void 0 && (_event$target = event.target) !== null && _event$target !== void 0 && _event$target.checked) {
+      onSelectAll(rows);
+      return;
+    }
+
+    onSelectAll([]);
+  };
+
+  return /*#__PURE__*/React.createElement(TableVirtuoso, _extends({}, props, {
+    ref: ref,
+    data: data,
+    context: {
+      isSelectedItem: isSelectedItem,
+      selectedItems: selectedItems,
+      dragProps: dragProps,
+      itemsInDropProcess: itemsInDropProcess,
+      setItemsInDropProcess: setItemsInDropProcess
+    },
+    components: virtuosoComponents,
+    fixedHeaderContent: function fixedHeaderContent() {
+      return /*#__PURE__*/React.createElement(FixedHeaderContent, {
+        columns: columns,
+        rowCount: rows.length,
+        selectedCount: selectedItems.length,
+        order: order,
+        orderBy: orderBy,
+        onClick: handleSort,
+        onSelectAllClick: handleSelectAll
+      });
+    },
+    itemContent: function itemContent(_index, row) {
+      var _componentsProps$rowC;
+
+      return /*#__PURE__*/React.createElement(RowContent, {
+        index: _index,
+        row: row,
+        columns: columns,
+        isSelectedItem: isSelectedItem,
+        onSelectClick: onSelect
+      }, componentsProps === null || componentsProps === void 0 ? void 0 : (_componentsProps$rowC = componentsProps.rowContent) === null || _componentsProps$rowC === void 0 ? void 0 : _componentsProps$rowC.children);
+    },
+    rowSpan: 2
+  }));
+});
+VirtualizedTable.displayName = 'VirtualizedTable';
+
+var VirtuosoTableWrapper = function VirtuosoTableWrapper(props) {
+  var _props$dragProps;
+
+  if (!((_props$dragProps = props.dragProps) !== null && _props$dragProps !== void 0 && _props$dragProps.enabled)) {
+    return /*#__PURE__*/React.createElement(VirtualizedTable, props);
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CustomDragLayer, {
+    dragId: props.dragProps.dragId
+  }), /*#__PURE__*/React.createElement(VirtualizedTable, props));
+};
+
+export default VirtuosoTableWrapper;

package/transpiled/react/Table/Virtualized/virtuosoComponents.d.ts

@@ -0,0 +1,10 @@
+export default virtuosoComponents;
+declare namespace virtuosoComponents {
+    const Scroller: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+    const Table: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+    const TableHead: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+    const TableBody: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+    const TableFooter: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+    const TableRow: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+}
+import React from "react";