carbon-react 87.2.0 → 87.3.0

package/lib/components/flat-table/flat-table-body/flat-table-body.component.js

@@ -11,11 +11,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const FlatTableBody = ({
+const FlatTableBody = /*#__PURE__*/_react.default.forwardRef(({
   children
-}) => {
-  return /*#__PURE__*/_react.default.createElement("tbody", null, children);
-};
+}, ref) => {
+  return /*#__PURE__*/_react.default.createElement("tbody", {
+    ref: ref
+  }, children);
+});
 
 FlatTableBody.propTypes = {
   /** Array of FlatTableRow. */

package/lib/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.component.js

@@ -0,0 +1,115 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactDnd = require("react-dnd");
+
+var _reactDndHtml5Backend = _interopRequireDefault(require("react-dnd-html5-backend"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _icon = _interopRequireDefault(require("../../icon/icon.style"));
+
+var _flatTableBody = _interopRequireDefault(require("../flat-table-body/flat-table-body.component"));
+
+var _flatTableCell = _interopRequireDefault(require("../flat-table-cell/flat-table-cell.component"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const DropTarget = ({
+  children,
+  getOrder,
+  ...rest
+}) => {
+  const [, drop] = (0, _reactDnd.useDrop)({
+    accept: "flatTableRow",
+
+    drop() {
+      getOrder();
+    }
+
+  });
+  return /*#__PURE__*/_react.default.createElement(_flatTableBody.default, _extends({
+    ref: drop
+  }, rest), children);
+};
+
+const FlatTableBodyDraggable = ({
+  children,
+  getOrder
+}) => {
+  const [draggableItems, setDraggableItems] = (0, _react.useState)(_react.default.Children.toArray(children));
+  const isFirstRender = (0, _react.useRef)(true);
+  (0, _react.useEffect)(() => {
+    if (!isFirstRender.current) {
+      setDraggableItems(_react.default.Children.toArray(children));
+    } else {
+      isFirstRender.current = false;
+    }
+  }, [children]);
+
+  const findItem = id => {
+    const draggableItem = draggableItems.filter(item => `${item.props.id}` === id)[0];
+    return {
+      draggableItem,
+      index: draggableItems.indexOf(draggableItem)
+    };
+  };
+
+  const moveItem = (id, atIndex) => {
+    const {
+      draggableItem,
+      index
+    } = findItem(id);
+    const copyOfDraggableItems = [...draggableItems];
+    copyOfDraggableItems.splice(index, 1);
+    copyOfDraggableItems.splice(atIndex, 0, draggableItem);
+    setDraggableItems(copyOfDraggableItems);
+  };
+
+  const getItemsId = () => {
+    if (!getOrder) {
+      return;
+    }
+
+    const draggableItemIds = draggableItems.map(draggableItem => draggableItem.props.id);
+    getOrder(draggableItemIds);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_reactDnd.DndProvider, {
+    backend: _reactDndHtml5Backend.default
+  }, /*#__PURE__*/_react.default.createElement(DropTarget, {
+    getOrder: getItemsId
+  }, draggableItems.map(item => /*#__PURE__*/_react.default.cloneElement(item, {
+    id: `${item.props.id}`,
+    moveItem,
+    findItem,
+    draggable: true
+  }, [/*#__PURE__*/_react.default.createElement(_flatTableCell.default, {
+    key: item.props.id
+  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+    type: "drag"
+  })), item.props.children]))));
+};
+
+FlatTableBodyDraggable.propTypes = {
+  getOrder: _propTypes.default.func,
+  children: _propTypes.default.node.isRequired
+};
+DropTarget.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  getOrder: _propTypes.default.func
+};
+var _default = FlatTableBodyDraggable;
+exports.default = _default;

package/lib/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+
+export interface FlatTableBodyDraggableProps {
+  /** Array of FlatTableRow. */
+  children: React.ReactNode;
+  /** Callback fired when order is changed */
+  getOrder?: (draggableItemIds: number[]) => void;
+}
+
+declare function FlatTableBodyDraggable(props: FlatTableBodyDraggableProps): JSX.Element;
+
+export default FlatTableBodyDraggable;

package/lib/components/flat-table/flat-table-body-draggable/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./flat-table-body-draggable";
+export * from "./flat-table-body-draggable";

package/lib/components/flat-table/flat-table-body-draggable/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _flatTableBodyDraggable.default;
+  }
+});
+
+var _flatTableBodyDraggable = _interopRequireDefault(require("./flat-table-body-draggable.component"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/components/flat-table/flat-table-row/__internal__/flat-table-row-draggable.component.js

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactDnd = require("react-dnd");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const FlatTableRowDraggable = ({
+  children,
+  id,
+  findItem,
+  moveItem
+}) => {
+  const originalIndex = findItem(id).index;
+  const [{
+    isDragging
+  }, drag] = (0, _reactDnd.useDrag)({
+    item: {
+      type: "flatTableRow",
+      id,
+      originalIndex
+    },
+    collect: monitor => ({
+      isDragging: monitor.isDragging()
+    }),
+    end: (dropResult, monitor) => {
+      const {
+        id: droppedId,
+        originalIndex: oIndex
+      } = monitor.getItem();
+      const didDrop = monitor.didDrop();
+
+      if (!didDrop) {
+        moveItem(droppedId, oIndex);
+      }
+    }
+  });
+  const [, drop] = (0, _reactDnd.useDrop)({
+    accept: "flatTableRow",
+    canDrop: () => false,
+
+    hover({
+      id: draggedId
+    }) {
+      if (draggedId !== id) {
+        const {
+          index: overIndex
+        } = findItem(id);
+        moveItem(draggedId, overIndex);
+      }
+    }
+
+  });
+  return /*#__PURE__*/_react.default.cloneElement(children, {
+    id,
+    isDragging,
+    ref: node => drag(drop(node))
+  });
+};
+
+FlatTableRowDraggable.propTypes = {
+  /** Array of FlatTableHeader or FlatTableCell. FlatTableRowHeader could also be passed. */
+  children: _propTypes.default.node.isRequired,
+
+  /** ID for use in drag and drop functionality */
+  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+
+  /** function to find an item in the list of draggable items */
+  findItem: _propTypes.default.func.isRequired,
+
+  /** function to reposition an item in the list of draggable items */
+  moveItem: _propTypes.default.func.isRequired,
+
+  /** item is draggable */
+  draggable: _propTypes.default.bool
+};
+var _default = FlatTableRowDraggable;
+exports.default = _default;

package/lib/components/flat-table/flat-table-row/__internal__/flat-table-row-draggable.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+
+export interface FlatTableRowDraggableProps {
+  /** Array of FlatTableRow. */
+  children: React.ReactNode;
+  /** ID for use in drag and drop functionality */
+  id?: number | string;
+  /** function to find an item in the list of draggable items */
+  findItem: () => object;
+  /** function to reposition an item in the list of draggable items */
+  moveItem: () => void;
+  /** item is draggable */
+  draggable?: boolean;
+}
+
+declare function FlatTableRowDraggable(props: FlatTableRowDraggableProps): JSX.Element;
+
+export default FlatTableRowDraggable;

package/lib/components/flat-table/flat-table-row/flat-table-row.component.js

@@ -19,6 +19,8 @@ var _flatTableCheckbox = _interopRequireDefault(require("../flat-table-checkbox"
 
 var _flatTableRowHeader = _interopRequireDefault(require("../flat-table-row-header"));
 
+var _flatTableRowDraggable = _interopRequireDefault(require("./__internal__/flat-table-row-draggable.component"));
+
 var _flatTable = require("../flat-table.component");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -44,7 +46,11 @@ const FlatTableRow = /*#__PURE__*/_react.default.forwardRef(({
   bgColor,
   horizontalBorderColor,
   horizontalBorderSize = "small",
-  applyBorderLeft
+  applyBorderLeft,
+  id,
+  draggable,
+  findItem,
+  moveItem
 }, ref) => {
   const [isExpanded, setIsExpanded] = (0, _react.useState)(expanded);
   const rowRef = ref || (0, _react.useRef)();
@@ -123,9 +129,8 @@ const FlatTableRow = /*#__PURE__*/_react.default.forwardRef(({
   (0, _react.useEffect)(() => {
     setIsExpanded(expanded);
   }, [expanded]);
-  return /*#__PURE__*/_react.default.createElement(_drawer.DrawerSidebarContext.Consumer, null, ({
-    isInSidebar
-  }) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_flatTableRow.default, _extends({
+
+  const rowComponent = isInSidebar => /*#__PURE__*/_react.default.createElement(_flatTableRow.default, _extends({
     isInSidebar: isInSidebar,
     expandable: expandable,
     isSubRow: isSubRow,
@@ -143,7 +148,8 @@ const FlatTableRow = /*#__PURE__*/_react.default.forwardRef(({
     bgColor: bgColor,
     horizontalBorderColor: horizontalBorderColor,
     horizontalBorderSize: horizontalBorderSize,
-    applyBorderLeft: applyBorderLeft
+    applyBorderLeft: applyBorderLeft,
+    draggable: draggable
   }, interactiveRowProps), _react.default.Children.map(children, (child, index) => {
     return child && /*#__PURE__*/_react.default.cloneElement(child, {
       expandable: expandable && index === firstCellIndex(),
@@ -154,7 +160,17 @@ const FlatTableRow = /*#__PURE__*/_react.default.forwardRef(({
       leftPosition: leftPositions[index],
       ...child.props
     });
-  })), isExpanded && subRows && _react.default.Children.map(subRows, (child, index) => child && /*#__PURE__*/_react.default.cloneElement(child, {
+  }));
+
+  const draggableComponent = isInSidebar => /*#__PURE__*/_react.default.createElement(_flatTableRowDraggable.default, {
+    id: id,
+    moveItem: moveItem,
+    findItem: findItem
+  }, rowComponent(isInSidebar));
+
+  return /*#__PURE__*/_react.default.createElement(_drawer.DrawerSidebarContext.Consumer, null, ({
+    isInSidebar
+  }) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, draggable ? draggableComponent(isInSidebar) : rowComponent(isInSidebar), isExpanded && subRows && _react.default.Children.map(subRows, (child, index) => child && /*#__PURE__*/_react.default.cloneElement(child, {
     isSubRow: true,
     isFirstSubRow: index === 0,
     ...child.props
@@ -205,7 +221,28 @@ FlatTableRow.propTypes = {
   stickyOffset: _propTypes.default.number,
 
   /** @ignore @private applies a border-left to the first child */
-  applyBorderLeft: _propTypes.default.bool
+  applyBorderLeft: _propTypes.default.bool,
+
+  /** ID for use in drag and drop functionality
+   * @private
+   * @ignore
+   */
+  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+
+  /**
+   * @private
+   * @ignore
+   */
+  findItem: _propTypes.default.func,
+
+  /**
+   * @private
+   * @ignore
+   */
+  moveItem: _propTypes.default.func,
+
+  /** @ignore @private position in header if multiple rows */
+  draggable: _propTypes.default.bool
 };
 var _default = FlatTableRow;
 exports.default = _default;

package/lib/components/flat-table/flat-table-row/flat-table-row.style.js

@@ -92,7 +92,9 @@ const StyledFlatTableRow = _styledComponents.default.tr`
   isFirstSubRow,
   size,
   theme,
-  applyBorderLeft
+  applyBorderLeft,
+  isDragging,
+  draggable
 }) => {
   const backgroundColor = bgColor ? (0, _color.toColor)(theme, bgColor) : undefined;
   const customBorderColor = horizontalBorderColor ? (0, _color.toColor)(theme, horizontalBorderColor) : undefined;
@@ -123,6 +125,9 @@ const StyledFlatTableRow = _styledComponents.default.tr`
 
       ${_flatTableHeader.default} {
         border-bottom: 1px solid ${borderColor(colorTheme, theme)};
+        :first-child {
+          border-left: 1px solid ${borderColor(colorTheme, theme)};
+        }
       }
 
       ${stickyOffset > 0 && (0, _styledComponents.css)`
@@ -255,6 +260,21 @@ const StyledFlatTableRow = _styledComponents.default.tr`
         }
       `}
 
+      ${isDragging && (0, _styledComponents.css)`
+        border: ${isInSidebar ? theme.palette.slateTint(40) : theme.palette.slateTint(55)}
+          2px solid;
+        cursor: grabbing;
+        ${allCellTypes} {
+          background-color: ${isInSidebar ? theme.palette.slateTint(60) : theme.palette.slateTint(75)};
+        }
+      `}
+
+      ${draggable && (0, _styledComponents.css)`
+        ${_icon.default}:first-of-type {
+          font-size: 16px;
+        }
+      `}
+
       ${isFirstSubRow && (0, _styledComponents.css)`
         ${allCellTypes} {
           box-shadow: inset 0 6px 4px -4px ${theme.flatTable.subRow.shadow};

package/lib/components/flat-table/index.d.ts

@@ -5,6 +5,7 @@ export { default as FlatTable } from "./flat-table";
 export { default as FlatTableHead } from "./flat-table-head";
 export { default as FlatTableHeader } from "./flat-table-header";
 export { default as FlatTableBody } from "./flat-table-body";
+export { default as FlatTableBodyDraggable } from "./flat-table-body-draggable";
 export { default as FlatTableRow } from "./flat-table-row";
 export { default as FlatTableRowHeader } from "./flat-table-row-header";
 export { default as FlatTableCell } from "./flat-table-cell";
@@ -14,6 +15,7 @@ export * from "./flat-table";
 export * from "./flat-table-head";
 export * from "./flat-table-header";
 export * from "./flat-table-body";
+export * from "./flat-table-body-draggable";
 export * from "./flat-table-row";
 export * from "./flat-table-row-header";
 export * from "./flat-table-cell";

package/lib/components/flat-table/index.js

@@ -51,6 +51,12 @@ Object.defineProperty(exports, "FlatTableCheckbox", {
     return _flatTableCheckbox.default;
   }
 });
+Object.defineProperty(exports, "FlatTableBodyDraggable", {
+  enumerable: true,
+  get: function () {
+    return _flatTableBodyDraggable.default;
+  }
+});
 Object.defineProperty(exports, "Sort", {
   enumerable: true,
   get: function () {
@@ -74,6 +80,8 @@ var _flatTableCell = _interopRequireDefault(require("./flat-table-cell/flat-tabl
 
 var _flatTableCheckbox = _interopRequireDefault(require("./flat-table-checkbox/flat-table-checkbox.component"));
 
+var _flatTableBodyDraggable = _interopRequireDefault(require("./flat-table-body-draggable/flat-table-body-draggable.component"));
+
 var _sort = _interopRequireDefault(require("./sort/sort.component"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "87.2.0",
+  "version": "87.3.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {