@atlaskit/link-datasource 0.14.4

package/dist/cjs/ui/issue-like-table/draggable-table-heading.js

@@ -0,0 +1,182 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DraggableTableHeading = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
+var _dragHandler = _interopRequireDefault(require("@atlaskit/icon/glyph/drag-handler"));
+var _closestEdge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge");
+var _box = require("@atlaskit/pragmatic-drag-and-drop-react-indicator/box");
+var _element = require("@atlaskit/pragmatic-drag-and-drop/adapter/element");
+var _combine = require("@atlaskit/pragmatic-drag-and-drop/util/combine");
+var _styled = require("./styled");
+/** @jsx jsx */
+
+var tableHeadingStyles = (0, _react2.css)({
+  cursor: 'grab'
+});
+var tableHeadingStatusStyles = {
+  idle: (0, _react2.css)({
+    ':hover': {
+      background: "var(--ds-surface-hovered, #091E4224)"
+    }
+  }),
+  dragging: (0, _react2.css)({
+    background: "var(--ds-background-disabled, #091E4224)",
+    color: "var(--ds-text-disabled, #091E424F)"
+  })
+};
+var verticallyAlignedStyles = (0, _react2.css)({
+  display: 'flex',
+  alignItems: 'center',
+  whiteSpace: 'nowrap'
+});
+var dragHandleStyles = (0, _react2.css)({
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center'
+});
+var dropTargetStyles = (0, _react2.css)({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100%'
+});
+var noPointerEventsStyles = (0, _react2.css)({
+  pointerEvents: 'none'
+});
+var DraggableTableHeading = function DraggableTableHeading(_ref) {
+  var children = _ref.children,
+    id = _ref.id,
+    index = _ref.index,
+    tableId = _ref.tableId,
+    dndPreviewHeight = _ref.dndPreviewHeight,
+    onDragPreviewStart = _ref.onDragPreviewStart,
+    onDragPreviewEnd = _ref.onDragPreviewEnd;
+  var ref = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)('idle'),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    status = _useState2[0],
+    setStatus = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    isDraggingAnyColumn = _useState4[0],
+    setIsDraggingAnyColumn = _useState4[1];
+  var _useState5 = (0, _react.useState)(null),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    closestEdge = _useState6[0],
+    setClosestEdge = _useState6[1];
+  var dropTargetRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    var cell = ref.current;
+    (0, _tinyInvariant.default)(cell);
+    return (0, _combine.combine)((0, _element.draggable)({
+      element: cell,
+      getInitialData: function getInitialData() {
+        return {
+          type: 'table-header',
+          id: id,
+          index: index,
+          tableId: tableId
+        };
+      },
+      onGenerateDragPreview: function onGenerateDragPreview() {
+        setStatus('preview');
+        onDragPreviewStart();
+      },
+      onDragStart: function onDragStart() {
+        setStatus('dragging');
+        onDragPreviewEnd();
+      },
+      onDrop: function onDrop() {
+        setStatus('idle');
+      }
+    }));
+  }, [id, index, onDragPreviewEnd, onDragPreviewStart, tableId]);
+
+  // Here we handle drop target, that in our case is absolutely positioned div that covers full width and height
+  // of this column (has height of whole table). It sits on top of everything, but has `pointerEvents: 'none'` by default
+  (0, _react.useEffect)(function () {
+    var dropTarget = dropTargetRef.current;
+    (0, _tinyInvariant.default)(dropTarget);
+    return (0, _element.dropTargetForElements)({
+      element: dropTarget,
+      getIsSticky: function getIsSticky() {
+        return true;
+      },
+      getData: function getData(_ref2) {
+        var input = _ref2.input,
+          element = _ref2.element;
+        var data = {
+          id: id,
+          index: index
+        };
+        return (0, _closestEdge.attachClosestEdge)(data, {
+          input: input,
+          element: element,
+          allowedEdges: ['left', 'right']
+        });
+      },
+      canDrop: function canDrop(args) {
+        return args.source.data.type === 'table-header' && args.source.data.tableId === tableId;
+      },
+      onDrag: function onDrag(args) {
+        if (args.source.data.id !== id) {
+          setClosestEdge((0, _closestEdge.extractClosestEdge)(args.self.data));
+        }
+      },
+      onDragLeave: function onDragLeave() {
+        setClosestEdge(null);
+      },
+      onDrop: function onDrop() {
+        setClosestEdge(null);
+      }
+    });
+  }, [id, index, tableId]);
+
+  // During dragging anywhere we want to remove `pointerEvents: 'none'` from all the drop targets
+  (0, _react.useEffect)(function () {
+    return (0, _element.monitorForElements)({
+      canMonitor: function canMonitor(_ref3) {
+        var source = _ref3.source;
+        return source.data.type === 'table-header' && source.data.tableId === tableId;
+      },
+      onDragStart: function onDragStart() {
+        /**
+         * Should cause a synchronous re-render.
+         */
+        setIsDraggingAnyColumn(true);
+      },
+      onDrop: function onDrop() {
+        setIsDraggingAnyColumn(false);
+      }
+    });
+  }, [tableId]);
+  return (0, _react2.jsx)(_styled.TableHeading, {
+    ref: ref,
+    css: [tableHeadingStyles, tableHeadingStatusStyles[status]],
+    "data-testid": "".concat(id, "-column-heading")
+  }, (0, _react2.jsx)("div", {
+    ref: dropTargetRef,
+    css: [dropTargetStyles, isDraggingAnyColumn ? null : noPointerEventsStyles],
+    style: {
+      height: "".concat(dndPreviewHeight, "px")
+    },
+    "data-testid": 'column-drop-target'
+  }, closestEdge && (0, _react2.jsx)(_box.DropIndicator, {
+    edge: closestEdge
+  })), (0, _react2.jsx)("div", {
+    css: verticallyAlignedStyles
+  }, (0, _react2.jsx)("div", {
+    css: dragHandleStyles
+  }, (0, _react2.jsx)(_dragHandler.default, {
+    label: "".concat(id, "-drag-icon"),
+    size: "medium"
+  })), children));
+};
+exports.DraggableTableHeading = DraggableTableHeading;

package/dist/cjs/ui/issue-like-table/empty-state/index.js

@@ -0,0 +1,127 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _linkingCommon = require("@atlaskit/linking-common");
+var _user = _interopRequireDefault(require("../render-type/user"));
+var _styled = require("../styled");
+var _priority = _interopRequireDefault(require("./priority"));
+var _type = _interopRequireDefault(require("./type"));
+/** @jsx jsx */
+
+var columns = [{
+  key: 'type',
+  title: 'Type'
+}, {
+  key: 'issue',
+  title: 'Key',
+  width: 50
+}, {
+  key: 'summary',
+  title: 'Summary'
+}, {
+  key: 'assignee',
+  title: 'Assignee',
+  width: 100
+}, {
+  key: 'priority',
+  title: 'P'
+}, {
+  key: 'status',
+  title: 'Status'
+}, {
+  key: 'resolution',
+  title: 'Resolution'
+}, {
+  key: 'created',
+  title: 'Created'
+}, {
+  key: 'due',
+  title: 'Updated'
+}];
+var priorities = ['low', 'medium', 'high', 'medium', 'low', 'blocker', 'medium', 'blocker', 'high', 'low'];
+var types = ['task', 'story', 'commit', 'epic', 'bug', 'task', 'story', 'commit', 'issue', 'epic'];
+var summaryColumnWidths = [141, 208, 186, 212, 212, 151, 212, 182, 180, 147];
+var statusColumnWidths = [75, 54, 66, 73, 52, 73, 55, 80, 66, 59];
+var rows = new Array(10).fill(null).map(function (_, index) {
+  return {
+    id: index,
+    priority: priorities[index],
+    type: types[index],
+    summaryWidth: summaryColumnWidths[index],
+    statusWidth: statusColumnWidths[index]
+  };
+});
+var _default = function _default(props) {
+  var renderItem = (0, _react.useCallback)(function (_ref, _ref2) {
+    var key = _ref.key,
+      width = _ref.width;
+    var priority = _ref2.priority,
+      type = _ref2.type,
+      summaryWidth = _ref2.summaryWidth,
+      statusWidth = _ref2.statusWidth;
+    switch (key) {
+      case 'assignee':
+        return (0, _react2.jsx)(_user.default, null, (0, _react2.jsx)(_linkingCommon.Skeleton, {
+          width: width,
+          height: 13,
+          borderRadius: 8
+        }));
+      case 'priority':
+        return (0, _react2.jsx)(_priority.default, {
+          priority: priority
+        });
+      case 'type':
+        return (0, _react2.jsx)(_type.default, {
+          type: type
+        });
+      case 'summary':
+        return (0, _react2.jsx)(_linkingCommon.Skeleton, {
+          appearance: "blue",
+          width: summaryWidth,
+          borderRadius: 10,
+          height: 13
+        });
+      case 'status':
+        return (0, _react2.jsx)(_linkingCommon.Skeleton, {
+          appearance: "blue",
+          width: statusWidth,
+          height: 16,
+          borderRadius: 3
+        });
+      default:
+        return (0, _react2.jsx)(_linkingCommon.Skeleton, {
+          width: width,
+          height: 13,
+          borderRadius: 8
+        });
+    }
+  }, []);
+  return (0, _react2.jsx)("table", {
+    "data-testid": props.testId
+  }, (0, _react2.jsx)("thead", null, (0, _react2.jsx)("tr", null, columns.map(function (_ref3) {
+    var title = _ref3.title,
+      key = _ref3.key,
+      width = _ref3.width;
+    return (0, _react2.jsx)(_styled.TableHeading, {
+      key: key,
+      style: {
+        width: width
+      }
+    }, title);
+  }))), (0, _react2.jsx)("tbody", null, rows.map(function (row) {
+    return (0, _react2.jsx)("tr", {
+      key: row.id
+    }, columns.map(function (column) {
+      return (0, _react2.jsx)("td", {
+        key: column.key
+      }, renderItem(column, row));
+    }));
+  })));
+};
+exports.default = _default;

package/dist/cjs/ui/issue-like-table/empty-state/priority.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _colors = require("@atlaskit/theme/colors");
+var _icon = _interopRequireDefault(require("../render-type/icon"));
+// https://stackoverflow.com/questions/61099149/svg-fill-color-not-working-with-hex-colors
+var replaceHashInHex = function replaceHashInHex(hex) {
+  return hex.replace('#', '%23');
+};
+var priorityToSVGPathMap = {
+  low: " <path\n  d=\"M12.5 6.1c.5-.3 1.1-.1 1.4.4.3.5.1 1.1-.3 1.3l-5 3c-.3.2-.7.2-1 0l-5-3c-.6-.2-.7-.9-.4-1.3.2-.5.9-.7 1.3-.4L8 8.8l4.5-2.7z\"\n  fill=\"".concat(replaceHashInHex(_colors.B300), "\"\n/>"),
+  medium: "<path\n  fill=\"".concat(replaceHashInHex(_colors.Y300), "\"\n  d=\"M3,4h10c0.6,0,1,0.4,1,1s-0.4,1-1,1H3C2.4,6,2,5.6,2,5S2.4,4,3,4z M3,10h10c0.6,0,1,0.4,1,1s-0.4,1-1,1H3\n c-0.6,0-1-0.4-1-1S2.4,10,3,10z\"\n/>"),
+  high: "<path\n  d=\"M3.5 9.9c-.5.3-1.1.1-1.4-.3s-.1-1.1.4-1.4l5-3c.3-.2.7-.2 1 0l5 3c.5.3.6.9.3 1.4-.3.5-.9.6-1.4.3L8 7.2 3.5 9.9z\"\n  fill=\"".concat(replaceHashInHex(_colors.R300), "\"\n/>"),
+  blocker: "<path\n  d=\"M8 15c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7zM4 7c-.6 0-1 .4-1 1s.4 1 1 1h8c.6 0 1-.4 1-1s-.4-1-1-1H4z\"\n  fill=\"".concat(replaceHashInHex(_colors.R300), "\"\n/>")
+};
+var _default = function _default(_ref) {
+  var priority = _ref.priority;
+  var image = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">".concat(priorityToSVGPathMap[priority], "</svg>");
+  return /*#__PURE__*/_react.default.createElement(_icon.default, {
+    source: "data:image/svg+xml;utf8,".concat(image)
+  });
+};
+exports.default = _default;

package/dist/cjs/ui/issue-like-table/empty-state/type.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireDefault(require("react"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _ = _interopRequireDefault(require("@atlaskit/icon-object/glyph/bug/16"));
+var _2 = _interopRequireDefault(require("@atlaskit/icon-object/glyph/commit/16"));
+var _3 = _interopRequireDefault(require("@atlaskit/icon-object/glyph/epic/16"));
+var _4 = _interopRequireDefault(require("@atlaskit/icon-object/glyph/issue/16"));
+var _5 = _interopRequireDefault(require("@atlaskit/icon-object/glyph/story/16"));
+var _6 = _interopRequireDefault(require("@atlaskit/icon-object/glyph/task/16"));
+var _templateObject;
+var IconWrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
+var _default = function _default(_ref) {
+  var type = _ref.type;
+  var TypeIcon = function TypeIcon() {
+    switch (type) {
+      case 'issue':
+        return /*#__PURE__*/_react.default.createElement(_4.default, {
+          label: 'issue'
+        });
+      case 'commit':
+        return /*#__PURE__*/_react.default.createElement(_2.default, {
+          label: 'commit'
+        });
+      case 'story':
+        return /*#__PURE__*/_react.default.createElement(_5.default, {
+          label: 'story'
+        });
+      case 'epic':
+        return /*#__PURE__*/_react.default.createElement(_3.default, {
+          label: 'epic'
+        });
+      case 'bug':
+        return /*#__PURE__*/_react.default.createElement(_.default, {
+          label: 'bug'
+        });
+      case 'task':
+        return /*#__PURE__*/_react.default.createElement(_6.default, {
+          label: 'task'
+        });
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(IconWrapper, null, /*#__PURE__*/_react.default.createElement(TypeIcon, null));
+};
+exports.default = _default;

package/dist/cjs/ui/issue-like-table/empty-state/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});