@pingux/astro 1.27.0-alpha.9 → 1.28.0

package/lib/cjs/components/DataTable/DataTable.js

@@ -0,0 +1,477 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _utils = require("@react-aria/utils");
+
+var _focus = require("@react-aria/focus");
+
+var _visuallyHidden = require("@react-aria/visually-hidden");
+
+var _virtualizer = require("@react-aria/virtualizer");
+
+var _table = require("@react-stately/table");
+
+var _utils2 = require("@react-spectrum/utils");
+
+var _layout = require("@react-stately/layout");
+
+var _table2 = require("@react-aria/table");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _MenuDownIcon = _interopRequireDefault(require("mdi-react/MenuDownIcon"));
+
+var _MenuUpIcon = _interopRequireDefault(require("mdi-react/MenuUpIcon"));
+
+var _DataTableContext = require("../../context/DataTableContext");
+
+var _DataTableVirtualizer = _interopRequireDefault(require("./DataTableVirtualizer"));
+
+var _hooks = require("../../hooks");
+
+var _index = require("../../index");
+
+var _react2 = require("@emotion/react");
+
+var _excluded = ["children"],
+    _excluded2 = ["children"],
+    _excluded3 = ["item", "children", "hasActions"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var DEFAULT_HEADER_HEIGHT = {
+  medium: 34,
+  large: 37.5
+};
+var ROW_HEIGHTS = {
+  compact: {
+    medium: 32,
+    large: 40
+  },
+  regular: {
+    medium: 40,
+    large: 50
+  },
+  spacious: {
+    medium: 48,
+    large: 75
+  }
+};
+/**
+ * DataTable component using react aria Spectrum TableView
+ * Primarily utilizes [TableView](https://react-spectrum.adobe.com/react-spectrum/TableView.html)
+ * Cross platform state management react hook for DataTable
+ * Primarily utilizes [useTableState](https://react-spectrum.adobe.com/react-stately/useTableState.html)
+*/
+
+var DataTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var onAction = props.onAction;
+
+  var _useStyleProps = (0, _utils2.useStyleProps)(props),
+      styleProps = _useStyleProps.styleProps;
+
+  var direction = 'ltr'; // useLocale override
+
+  var scale = 'large'; // useProvider override
+
+  var getDefaultWidth = (0, _react.useCallback)();
+  var state = (0, _table.useTableState)(_objectSpread({}, props));
+  var columnState = (0, _table.useTableColumnResizeState)(_objectSpread(_objectSpread({}, props), {}, {
+    getDefaultWidth: getDefaultWidth
+  }), state.collection);
+  var domRef = (0, _react.useRef)(ref);
+  var bodyRef = (0, _react.useRef)();
+  var density = props.density || 'regular';
+  var layout = (0, _react.useMemo)(function () {
+    return new _layout.TableLayout({
+      // If props.rowHeight is auto, then use estimated heights based on scale,
+      // otherwise use fixed heights.
+      rowHeight: props.overflowMode === 'wrap' ? null : ROW_HEIGHTS[density][scale],
+      estimatedRowHeight: props.overflowMode === 'wrap' ? ROW_HEIGHTS[density][scale] : null,
+      headingHeight: props.overflowMode === 'wrap' ? null : DEFAULT_HEADER_HEIGHT[scale],
+      estimatedHeadingHeight: props.overflowMode === 'wrap' ? DEFAULT_HEADER_HEIGHT[scale] : null
+    });
+  }, [props.overflowMode, scale, density]);
+  layout.collection = state.collection;
+  layout.getColumnWidth = columnState.getColumnWidth;
+
+  var _useTable = (0, _table2.useTable)(_objectSpread(_objectSpread({}, props), {}, {
+    isVirtualized: true,
+    layout: layout,
+    onRowAction: onAction
+  }), state, domRef),
+      gridProps = _useTable.gridProps; // This overrides collection view's renderWrapper to support DOM hierarchy.
+
+
+  var renderWrapper = function renderWrapper(parent, reusableView, children, renderChildren) {
+    var style = (0, _virtualizer.layoutInfoToStyle)(reusableView.layoutInfo, direction, parent && parent.layoutInfo);
+
+    if (style.overflow === 'hidden') {
+      style.overflow = 'visible'; // needed to support position: sticky
+    }
+
+    if (reusableView.viewType === 'rowgroup') {
+      return (0, _react2.jsx)(TableRowGroup, {
+        key: reusableView.key,
+        style: style
+      }, renderChildren(children));
+    }
+
+    if (reusableView.viewType === 'header') {
+      return (0, _react2.jsx)(TableHeader, {
+        key: reusableView.key,
+        style: style
+      }, renderChildren(children));
+    }
+
+    if (reusableView.viewType === 'row') {
+      return (0, _react2.jsx)(TableRow, {
+        key: reusableView.key,
+        item: reusableView.content,
+        style: style,
+        hasActions: onAction
+      }, renderChildren(children));
+    }
+
+    if (reusableView.viewType === 'headerrow') {
+      return (0, _react2.jsx)(TableHeaderRow, {
+        key: reusableView.key,
+        style: style,
+        item: reusableView.content
+      }, renderChildren(children));
+    }
+
+    return (0, _react2.jsx)(_virtualizer.VirtualizerItem, {
+      key: reusableView.key,
+      reusableView: reusableView,
+      parent: parent
+    });
+  };
+
+  var renderView = function renderView(type, item) {
+    switch (type) {
+      case 'header':
+      case 'rowgroup':
+      case 'row':
+      case 'headerrow':
+        return null;
+
+      case 'cell':
+        {
+          return (0, _react2.jsx)(TableCell, {
+            cell: item
+          });
+        }
+
+      case 'column':
+        return (0, _react2.jsx)(TableColumnHeader, {
+          column: item
+        });
+
+      case 'loader':
+        return (0, _react2.jsx)(CenteredWrapper, null, (0, _react2.jsx)(_index.Loader, {
+          color: "accent.70",
+          "aria-label": state.collection.size > 0 ? 'loadingMore' : 'loading'
+        }));
+
+      default:
+        return null;
+    }
+  };
+
+  var viewport = (0, _react.useRef)({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0
+  });
+  var onVisibleRectChange = (0, _react.useCallback)(function (e) {
+    if (viewport.current.width === e.width && viewport.current.height === e.height) {
+      return;
+    }
+
+    viewport.current = e;
+  }, []);
+  return (0, _react2.jsx)(_DataTableContext.DataTableContext.Provider, {
+    value: {
+      state: state,
+      layout: layout,
+      columnState: columnState
+    }
+  }, (0, _react2.jsx)(_DataTableVirtualizer["default"], (0, _extends2["default"])({
+    style: {
+      whiteSpace: props.overflowMode === 'wrap' ? 'normal' : 'initial'
+    }
+  }, gridProps, styleProps, {
+    layout: layout,
+    collection: state.collection,
+    focusedKey: state.selectionManager.focusedKey,
+    renderView: renderView,
+    renderWrapper: renderWrapper,
+    setTableWidth: columnState.setTableWidth,
+    onVisibleRectChange: onVisibleRectChange,
+    domRef: domRef,
+    bodyRef: bodyRef,
+    getColumnWidth: columnState.getColumnWidth
+  })));
+});
+
+function TableHeader(_ref) {
+  var children = _ref.children,
+      otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+
+  var _useTableRowGroup = (0, _table2.useTableRowGroup)(),
+      rowGroupProps = _useTableRowGroup.rowGroupProps;
+
+  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, rowGroupProps, otherProps), children);
+}
+
+function TableColumnHeader(props) {
+  var _state$sortDescriptor, _state$sortDescriptor2;
+
+  var column = props.column;
+  var ref = (0, _react.useRef)(null);
+
+  var _useDataTableContext = (0, _DataTableContext.useDataTableContext)(),
+      state = _useDataTableContext.state;
+
+  var _useTableColumnHeader = (0, _table2.useTableColumnHeader)({
+    node: column,
+    isVirtualized: true
+  }, state, ref),
+      columnHeaderProps = _useTableColumnHeader.columnHeaderProps;
+
+  var columnProps = column.props;
+  var arrowIcon = ((_state$sortDescriptor = state.sortDescriptor) === null || _state$sortDescriptor === void 0 ? void 0 : _state$sortDescriptor.direction) === 'ascending' && column.key === ((_state$sortDescriptor2 = state.sortDescriptor) === null || _state$sortDescriptor2 === void 0 ? void 0 : _state$sortDescriptor2.column) ? (0, _react2.jsx)(_index.Icon, {
+    icon: _MenuUpIcon["default"]
+  }) : (0, _react2.jsx)(_index.Icon, {
+    icon: _MenuDownIcon["default"],
+    color: "active"
+  });
+  var allProps = [columnHeaderProps];
+
+  var _useStatusClasses = (0, _hooks.useStatusClasses)((0, _defineProperty2["default"])({
+    'is-column-sortable': columnProps.allowsSorting
+  }, "is-align-".concat(columnProps.align), columnProps.align)),
+      classNames = _useStatusClasses.classNames;
+
+  return (0, _react2.jsx)(_focus.FocusRing, {
+    focusRingClass: "is-key-focused",
+    focusClass: "is-click-focused"
+  }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, _utils.mergeProps.apply(void 0, allProps), {
+    ref: ref,
+    variant: "dataTable.tableHeadCell",
+    className: classNames
+  }), columnProps.hideHeader ? (0, _react2.jsx)(_visuallyHidden.VisuallyHidden, null, column.rendered) : (0, _react2.jsx)(_index.Box, null, column.rendered), columnProps.allowsSorting && (0, _react2.jsx)(_index.Box, null, arrowIcon)));
+}
+
+function TableRowGroup(_ref2) {
+  var children = _ref2.children,
+      otherProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
+
+  var _useTableRowGroup2 = (0, _table2.useTableRowGroup)(),
+      rowGroupProps = _useTableRowGroup2.rowGroupProps;
+
+  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, rowGroupProps, otherProps), children);
+}
+
+function TableRow(_ref3) {
+  var item = _ref3.item,
+      children = _ref3.children,
+      hasActions = _ref3.hasActions,
+      otherProps = (0, _objectWithoutProperties2["default"])(_ref3, _excluded3);
+  var ref = (0, _react.useRef)();
+
+  var _useDataTableContext2 = (0, _DataTableContext.useDataTableContext)(),
+      state = _useDataTableContext2.state;
+
+  var _useTableRow = (0, _table2.useTableRow)({
+    node: item,
+    isVirtualized: true
+  }, state, ref),
+      rowProps = _useTableRow.rowProps;
+
+  var _useFocusRing = (0, _focus.useFocusRing)({
+    within: true
+  }),
+      isFocusVisibleWithin = _useFocusRing.isFocusVisible,
+      focusWithinProps = _useFocusRing.focusProps;
+
+  var _useFocusRing2 = (0, _focus.useFocusRing)(),
+      isFocusVisible = _useFocusRing2.isFocusVisible,
+      focusProps = _useFocusRing2.focusProps;
+
+  var props = (0, _utils.mergeProps)(rowProps, otherProps, focusWithinProps, focusProps);
+
+  var _useStatusClasses3 = (0, _hooks.useStatusClasses)({
+    'is-row-focus-visible': isFocusVisible || isFocusVisibleWithin
+  }),
+      classNames = _useStatusClasses3.classNames;
+
+  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, props, {
+    ref: ref,
+    variant: "dataTable.tableRow",
+    className: classNames
+  }), children);
+}
+
+function TableHeaderRow(_ref4) {
+  var item = _ref4.item,
+      children = _ref4.children,
+      style = _ref4.style;
+
+  var _useDataTableContext3 = (0, _DataTableContext.useDataTableContext)(),
+      state = _useDataTableContext3.state;
+
+  var ref = (0, _react.useRef)();
+
+  var _useTableHeaderRow = (0, _table2.useTableHeaderRow)({
+    node: item,
+    isVirtualized: true
+  }, state, ref),
+      rowProps = _useTableHeaderRow.rowProps;
+
+  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, rowProps, {
+    ref: ref,
+    style: style
+  }), children);
+}
+
+function TableCell(_ref5) {
+  var cell = _ref5.cell;
+
+  var _useDataTableContext4 = (0, _DataTableContext.useDataTableContext)(),
+      state = _useDataTableContext4.state;
+
+  var ref = (0, _react.useRef)();
+  var columnProps = cell.column.props;
+
+  var _useTableCell = (0, _table2.useTableCell)({
+    node: cell,
+    isVirtualized: true
+  }, state, ref),
+      gridCellProps = _useTableCell.gridCellProps;
+
+  var _useStatusClasses4 = (0, _hooks.useStatusClasses)((0, _defineProperty2["default"])({}, "is-align-".concat(columnProps.align), columnProps.align)),
+      classNames = _useStatusClasses4.classNames;
+
+  return (0, _react2.jsx)(_focus.FocusRing, {
+    focusRingClass: "is-key-focused"
+  }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, gridCellProps, {
+    ref: ref,
+    variant: "dataTable.tableCell",
+    className: classNames
+  }), (0, _react2.jsx)(_index.Box, {
+    variant: "dataTable.tableCellContents"
+  }, cell.rendered)));
+}
+
+function CenteredWrapper(_ref6) {
+  var children = _ref6.children;
+
+  var _useDataTableContext5 = (0, _DataTableContext.useDataTableContext)(),
+      state = _useDataTableContext5.state;
+
+  return (0, _react2.jsx)(_index.Box, {
+    role: "row",
+    "aria-rowindex": state.collection.headerRows.length + state.collection.size + 1,
+    variant: "dataTable.tableCenteredWrapper"
+  }, (0, _react2.jsx)(_index.Box, {
+    role: "rowheader",
+    "aria-colspan": state.collection.columns.length
+  }, children));
+}
+
+DataTable.propTypes = {
+  /**
+   * Sets the amount of vertical padding within each cell.
+   * density: 'compact' | 'regular' | 'spacious'
+   * @default 'regular'
+   */
+  density: _propTypes["default"].string,
+
+  /**
+   * Sets the overflow behavior for the cell contents.
+   * overflowMode: 'wrap' | 'truncate'
+   * @default 'truncate'
+   */
+  overflowMode: _propTypes["default"].string,
+
+  /** Handler that is called when a user performs an action on a row. */
+  onAction: _propTypes["default"].func
+};
+TableCell.propTypes = {
+  cell: _propTypes["default"].shape({
+    column: _propTypes["default"].shape({
+      props: _propTypes["default"].shape({
+        align: _propTypes["default"].string
+      })
+    }),
+    parentKey: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
+    rendered: _propTypes["default"].node
+  })
+};
+TableHeaderRow.propTypes = {
+  children: _propTypes["default"].node,
+  item: _propTypes["default"].shape({}),
+  style: _propTypes["default"].shape({})
+};
+TableRow.propTypes = {
+  children: _propTypes["default"].node,
+  hasActions: _propTypes["default"].func,
+  item: _propTypes["default"].shape({})
+};
+TableColumnHeader.propTypes = {
+  column: _propTypes["default"].shape({
+    key: _propTypes["default"].string,
+    props: _propTypes["default"].shape({
+      align: _propTypes["default"].string,
+      allowsSorting: _propTypes["default"].bool,
+      hideHeader: _propTypes["default"].bool
+    }),
+    rendered: _propTypes["default"].node
+  })
+};
+var _default = DataTable;
+exports["default"] = _default;