@planningcenter/tapestry-react 0.0.1-alpha.0

package/dist/cjs/DataTable/hooks/useCollapsibleRows.js

@@ -0,0 +1,127 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.useCollapsibleRowsStore = useCollapsibleRowsStore;
+exports.useSubRowOpen = useSubRowOpen;
+exports.useAnySubRowsOpen = useAnySubRowsOpen;
+exports.useCollapsibleRows = useCollapsibleRows;
+exports.CollapsibleRowsContext = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = require("react");
+
+var _useConstant = _interopRequireDefault(require("use-constant"));
+
+var _zustand = _interopRequireDefault(require("zustand"));
+
+var _utils = require("../../utils");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(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 source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var CollapsibleRowsContext = /*#__PURE__*/(0, _react.createContext)(null);
+exports.CollapsibleRowsContext = CollapsibleRowsContext;
+
+function useCollapsibleRowsStore(selector) {
+  var _useContext = (0, _react.useContext)(CollapsibleRowsContext),
+      useStore = _useContext.useStore;
+
+  return useStore(selector);
+}
+
+function useSubRowOpen(index) {
+  return useCollapsibleRowsStore((0, _react.useCallback)(function (state) {
+    return state.allSubRowsOpen || state.openSubRows.indexOf(index) > -1;
+  }, [index]));
+}
+
+function useAnySubRowsOpen() {
+  return useCollapsibleRowsStore((0, _react.useCallback)(function (state) {
+    return state.openSubRows.length > 0;
+  }, []));
+}
+
+function useCollapsibleRows(data, defaultAllSubRowsOpen) {
+  if (defaultAllSubRowsOpen === void 0) {
+    defaultAllSubRowsOpen = false;
+  }
+
+  var useStore = (0, _useConstant["default"])(function () {
+    return (0, _zustand["default"])(function (set) {
+      return {
+        instant: false,
+        allSubRowsOpen: defaultAllSubRowsOpen,
+        openSubRows: [],
+        rowCountRange: [],
+        callbacks: {
+          openAllSubRows: function openAllSubRows() {
+            set(function (state) {
+              return {
+                instant: true,
+                allSubRowsOpen: true,
+                openSubRows: state.rowCountRange
+              };
+            });
+          },
+          closeAllSubRows: function closeAllSubRows() {
+            set({
+              instant: true,
+              allSubRowsOpen: false,
+              openSubRows: []
+            });
+          },
+          toggleAllSubRows: function toggleAllSubRows() {
+            set(function (state) {
+              var nextAllSubRowsOpen = state.openSubRows.length === 0;
+              return {
+                instant: true,
+                allSubRowsOpen: nextAllSubRowsOpen,
+                openSubRows: nextAllSubRowsOpen ? state.rowCountRange : []
+              };
+            });
+          },
+          toggleSubRowAtIndex: function toggleSubRowAtIndex(index) {
+            set(function (state) {
+              var nextOpenSubRows = [].concat(state.openSubRows);
+              var currentIndex = state.openSubRows.indexOf(index);
+
+              if (currentIndex > -1) {
+                nextOpenSubRows.splice(currentIndex, 1);
+              } else {
+                nextOpenSubRows.push(index);
+              }
+
+              return {
+                instant: false,
+                allSubRowsOpen: state.rowCountRange.every(function (index) {
+                  return nextOpenSubRows.indexOf(index) > -1;
+                }),
+                openSubRows: nextOpenSubRows
+              };
+            });
+          }
+        }
+      };
+    });
+  });
+  var callbacks = useStore(function (state) {
+    return state.callbacks;
+  });
+  (0, _react.useEffect)(function () {
+    var rowCountRange = (0, _utils.range)(0, data.length);
+    useStore.setState(function (state) {
+      return {
+        instant: true,
+        openSubRows: state.allSubRowsOpen ? rowCountRange : [],
+        rowCountRange: rowCountRange
+      };
+    });
+  }, [data]);
+  return _objectSpread({
+    useStore: useStore
+  }, callbacks);
+}

package/dist/cjs/DataTable/hooks/useColumnSort.js

@@ -0,0 +1,100 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.getIconDirection = getIconDirection;
+exports.getOppositeSortDirection = getOppositeSortDirection;
+exports["default"] = useColumnSort;
+exports.SORT_DESC = exports.SORT_ASC = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = require("react");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(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 source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var SORT_ASC = 'ASC';
+exports.SORT_ASC = SORT_ASC;
+var SORT_DESC = 'DESC';
+exports.SORT_DESC = SORT_DESC;
+
+function getIconDirection(direction) {
+  return direction === SORT_ASC ? 'arrow-up' : 'arrow-down';
+}
+
+function getOppositeSortDirection(direction) {
+  return direction === SORT_ASC ? SORT_DESC : SORT_ASC;
+}
+
+function parseSortOrder(query) {
+  var isDescending = query[0] === '-';
+  return {
+    columnId: isDescending ? query.substring(1) : query,
+    direction: isDescending ? SORT_DESC : SORT_ASC
+  };
+}
+
+function getSortOrder(_ref) {
+  var columnId = _ref.columnId,
+      direction = _ref.direction;
+  return "" + (direction === SORT_ASC ? '' : '-') + columnId;
+}
+
+function getDefaultSort(_ref2) {
+  var columnId = _ref2.columnId,
+      direction = _ref2.direction,
+      order = _ref2.order;
+  var defaultSort = order ? parseSortOrder(order) : {
+    columnId: columnId,
+    direction: direction
+  };
+  return _objectSpread(_objectSpread({}, defaultSort), {}, {
+    order: getSortOrder(defaultSort)
+  });
+}
+
+function useColumnSort(_ref3) {
+  var _ref3$defaultSort = _ref3.defaultSort,
+      defaultSort = _ref3$defaultSort === void 0 ? {
+    columnId: null,
+    direction: SORT_ASC,
+    order: null
+  } : _ref3$defaultSort,
+      onColumnSort = _ref3.onColumnSort;
+
+  var _useState = (0, _react.useState)(getDefaultSort(defaultSort)),
+      currentSort = _useState[0],
+      setCurrentSort = _useState[1];
+
+  var sortColumnById = (0, _react.useCallback)(function (column) {
+    setCurrentSort(function (currentSort) {
+      var parsedDefaultSort = getDefaultSort(_objectSpread(_objectSpread({}, defaultSort), {}, {
+        direction: column.defaultSortDirection
+      }));
+      var nextSort = {
+        columnId: column.id
+      };
+
+      if (currentSort.columnId === column.id) {
+        nextSort.direction = getOppositeSortDirection(currentSort.direction);
+      } else {
+        nextSort.direction = column.defaultSortDirection || SORT_ASC;
+      }
+
+      nextSort.order = getSortOrder(nextSort);
+
+      if (onColumnSort) {
+        onColumnSort(nextSort.columnId ? nextSort : parsedDefaultSort);
+      }
+
+      return nextSort;
+    });
+  }, [defaultSort, onColumnSort]);
+  return {
+    currentSort: currentSort,
+    sortColumnById: sortColumnById
+  };
+}

package/dist/cjs/DataTable/hooks/useColumnWidths.js

@@ -0,0 +1,113 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = require("react");
+
+var _useRefManager2 = _interopRequireDefault(require("./useRefManager"));
+
+function useColumnWidths(_ref) {
+  var columns = _ref.columns,
+      data = _ref.data,
+      loading = _ref.loading,
+      bodyRef = _ref.bodyRef;
+
+  var _useRefManager = (0, _useRefManager2["default"])(),
+      columnRefs = _useRefManager[0],
+      getColumnRef = _useRefManager[1];
+
+  var columnWidths = (0, _react.useRef)([]);
+  (0, _react.useLayoutEffect)(function () {
+    var nextColumnWidths = [];
+    var cells = [];
+    var paddingDelta = 0; // build cells collection
+
+    for (var key in columnRefs.current) {
+      var _key$split = key.split('.'),
+          columnIndex = _key$split[0],
+          rowIndex = _key$split[1],
+          parentRowIndex = _key$split[2];
+
+      var column = columns[columnIndex];
+      var node = columnRefs.current[key];
+      var isSubColumn = parentRowIndex !== undefined; // skip sub columns unless specifically enabled
+
+      if (!column.includeSubCellWidth && isSubColumn) {
+        continue;
+      } // this is a naive padding calculation, but getComputedStyle is expensive
+      // and all cells should use the same padding so it should be ok
+      // alternatively, we could use a first-class padding API to avoid getComputedStyle
+
+
+      if (!paddingDelta) {
+        var computedStyle = getComputedStyle(node);
+        paddingDelta = parseInt(computedStyle.paddingLeft, 10) + parseInt(computedStyle.paddingRight, 10);
+      } // only collect widths for undefined column.width
+
+
+      if (column.width) {
+        node.style.width = column.width + 'px';
+
+        if (!nextColumnWidths[columnIndex]) {
+          nextColumnWidths[columnIndex] = column.width;
+        }
+      } else {
+        // set cell widths to "auto" so we can take an accurate measurement
+        node.style.width = 'auto'; // store cell data so it's easier to work with below
+
+        cells.push({
+          column: column,
+          columnIndex: columnIndex,
+          node: node
+        });
+      }
+    } // collect the largest width from the header and body cells
+
+
+    for (var index = 0; index < cells.length; index++) {
+      var _cells$index = cells[index],
+          _column = _cells$index.column,
+          _columnIndex = _cells$index.columnIndex,
+          _node = _cells$index.node;
+      var width = Math.max(Math.ceil(_node.getBoundingClientRect().width) - paddingDelta, nextColumnWidths[_columnIndex] || 0);
+
+      if (_column.minWidth) {
+        width = Math.max(width, _column.minWidth);
+      }
+
+      if (_column.maxWidth) {
+        width = Math.min(width, _column.maxWidth);
+      }
+
+      nextColumnWidths[_columnIndex] = width;
+    } // apply widths back to cells
+
+
+    for (var _index = 0; _index < cells.length; _index++) {
+      var _cells$_index = cells[_index],
+          _columnIndex2 = _cells$_index.columnIndex,
+          _node2 = _cells$_index.node;
+      _node2.style.width = nextColumnWidths[_columnIndex2] + 'px';
+    } // apply row widths
+
+
+    var minRowWidth = bodyRef.current.scrollWidth;
+
+    for (var _index2 = 0; _index2 < bodyRef.current.children.length; _index2++) {
+      bodyRef.current.children[_index2].style.minWidth = minRowWidth + 'px';
+    } // update column widths for sub rows
+
+
+    columnWidths.current = nextColumnWidths;
+  }, [columns, data, loading]);
+  return {
+    columnWidths: columnWidths,
+    getColumnRef: getColumnRef
+  };
+}
+
+var _default = useColumnWidths;
+exports["default"] = _default;

package/dist/cjs/DataTable/hooks/useHoverFocus.js

@@ -0,0 +1,33 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = require("react");
+
+function useHoverFocus() {
+  var _useState = (0, _react.useState)(),
+      isHoverFocus = _useState[0],
+      setHoverFocus = _useState[1];
+
+  return {
+    isHoverFocus: isHoverFocus,
+    bind: {
+      onFocus: function onFocus() {
+        return setHoverFocus(true);
+      },
+      onBlur: function onBlur() {
+        return setHoverFocus(false);
+      },
+      onMouseEnter: function onMouseEnter() {
+        return setHoverFocus(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return setHoverFocus(false);
+      }
+    }
+  };
+}
+
+var _default = useHoverFocus;
+exports["default"] = _default;

package/dist/cjs/DataTable/hooks/useRefManager.js

@@ -0,0 +1,28 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = require("react");
+
+function useRefManager() {
+  var storedRefs = (0, _react.useRef)({});
+  var refCallbacks = (0, _react.useRef)({});
+  var getRef = (0, _react.useCallback)(function (id) {
+    if (!refCallbacks.current[id]) {
+      refCallbacks.current[id] = function (ref) {
+        if (!storedRefs.current[id] && ref) {
+          storedRefs.current[id] = ref;
+        } else if (!ref) {
+          delete storedRefs.current[id];
+        }
+      };
+    }
+
+    return refCallbacks.current[id];
+  }, []);
+  return [storedRefs, getRef];
+}
+
+var _default = useRefManager;
+exports["default"] = _default;

package/dist/cjs/DataTable/hooks/useScrollShadows.js

@@ -0,0 +1,106 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _popcorn = require("@popmotion/popcorn");
+
+var _hooks = require("../../hooks");
+
+var _utils = require("../../utils");
+
+var getLeftScrollShadow = (0, _popcorn.interpolate)([0, 0.2], [0, 1]);
+var getRightScrollShadow = (0, _popcorn.interpolate)([0.8, 1], [1, 0]);
+var listenerOptions = _utils.supportsPassiveEvents ? {
+  capture: true,
+  passive: false
+} : true;
+var shadowStyle = {
+  width: 10,
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  zIndex: 30,
+  pointerEvents: 'none'
+};
+
+function getProgress(offset, maxOffset) {
+  return !offset || !maxOffset ? 0 : offset / maxOffset;
+}
+
+function getBackground(direction) {
+  var rotate = 90 * direction;
+  return "linear-gradient(" + rotate + "deg, transparent 4px, rgba(125, 125, 125, 0.15))";
+}
+
+function setShadowStyles(_ref) {
+  var leftNode = _ref.leftNode,
+      rightNode = _ref.rightNode,
+      offset = _ref.offset,
+      progress = _ref.progress;
+  leftNode.style.left = offset + 'px';
+  leftNode.style.background = getBackground(-1);
+  leftNode.style.opacity = getLeftScrollShadow(progress);
+  rightNode.style.right = offset + 'px';
+  rightNode.style.background = getBackground(1);
+  rightNode.style.opacity = getRightScrollShadow(progress);
+}
+
+function useScrollShadows(ref) {
+  var leftShadow = (0, _react.useRef)();
+  var rightShadow = (0, _react.useRef)();
+
+  var _useState = (0, _react.useState)(false),
+      canScroll = _useState[0],
+      setCanScroll = _useState[1];
+
+  var _useState2 = (0, _react.useState)(null),
+      maxOffset = _useState2[0],
+      setMaxOffset = _useState2[1];
+
+  var _useMeasure = (0, _hooks.useMeasure)(),
+      useMeasureRef = _useMeasure[0],
+      useMeasureEffect = _useMeasure[1];
+
+  useMeasureRef(ref);
+  useMeasureEffect(function (_ref2) {
+    var node = _ref2[0];
+    setCanScroll(node.scrollWidth > node.offsetWidth);
+    setMaxOffset(node.scrollWidth - node.offsetWidth);
+  }, []);
+  (0, _react.useLayoutEffect)(function () {
+    if (leftShadow.current && rightShadow.current) {
+      var handleScroll = function handleScroll() {
+        setShadowStyles({
+          leftNode: leftShadow.current,
+          rightNode: rightShadow.current,
+          progress: getProgress(node.scrollLeft, maxOffset),
+          offset: 0
+        });
+      };
+
+      var node = ref.current;
+      handleScroll();
+      node.addEventListener('scroll', handleScroll, listenerOptions);
+      return function () {
+        node.removeEventListener('scroll', handleScroll, listenerOptions);
+      };
+    }
+  }, [maxOffset]);
+  return canScroll && /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+    ref: leftShadow,
+    style: shadowStyle,
+    "aria-hidden": true
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    ref: rightShadow,
+    style: shadowStyle,
+    "aria-hidden": true
+  }));
+}
+
+var _default = useScrollShadows;
+exports["default"] = _default;

package/dist/cjs/DataTable/hooks/useScrollSync.js

@@ -0,0 +1,52 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = require("react");
+
+function useScrollSync() {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
+
+  var timeoutId = (0, _react.useRef)();
+  var handleScroll = (0, _react.useCallback)(function (event) {
+    var syncedRefs = refs.filter(function (ref) {
+      return ref.current !== event.target;
+    });
+    var targetScrollLeft = event.target.scrollLeft;
+    clearTimeout(timeoutId.current);
+    syncedRefs.forEach(function (ref) {
+      removeEvent(ref);
+      ref.current.style.willChange = 'scroll-position';
+      ref.current.scrollLeft = targetScrollLeft;
+    });
+    timeoutId.current = setTimeout(function () {
+      syncedRefs.forEach(function (ref) {
+        addEvent(ref);
+        ref.current.style.willChange = '';
+      });
+    }, 120);
+  }, [refs]);
+  var addEvent = (0, _react.useCallback)(function (ref) {
+    ref.current.addEventListener('scroll', handleScroll, {
+      passive: true
+    });
+  }, [handleScroll]);
+  var removeEvent = (0, _react.useCallback)(function (ref) {
+    ref.current.removeEventListener('scroll', handleScroll, {
+      passive: true
+    });
+  }, [handleScroll]);
+  (0, _react.useLayoutEffect)(function () {
+    refs.forEach(addEvent);
+    return function () {
+      clearTimeout(timeoutId.current);
+      refs.forEach(removeEvent);
+    };
+  }, []);
+}
+
+var _default = useScrollSync;
+exports["default"] = _default;

package/dist/cjs/DataTable/hooks/useVariants.js

@@ -0,0 +1,15 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = useVariants;
+
+var _variants = require("../utils/variants");
+
+function useVariants(variants) {
+  var parsedVariants = [_variants.defaultVariant].concat((Array.isArray(variants) ? variants : [variants]).filter(Boolean));
+  return function (key, context) {
+    return parsedVariants.map(function (variant) {
+      return typeof variant[key] === 'function' ? variant[key](context) : variant[key];
+    });
+  };
+}

package/dist/cjs/DataTable/index.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _components = require("./components");
+
+var _DataTable = _interopRequireDefault(require("./DataTable"));
+
+var _utils = require("./utils");
+
+var ForwardRefDataTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  return /*#__PURE__*/_react["default"].createElement(_DataTable["default"], (0, _extends2["default"])({
+    dataTableRef: ref
+  }, props));
+});
+ForwardRefDataTable.CheckboxCell = _components.CheckboxCell;
+ForwardRefDataTable.ColumnPicker = _components.ColumnPicker;
+ForwardRefDataTable.variants = _utils.variants;
+var _default = ForwardRefDataTable;
+exports["default"] = _default;

package/dist/cjs/DataTable/utils/getCell.js

@@ -0,0 +1,24 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+function getCell(cell, _ref) {
+  var rowData = _ref.rowData,
+      rowIndex = _ref.rowIndex,
+      columnIndex = _ref.columnIndex,
+      _dragHandleProps = _ref._dragHandleProps;
+
+  if (typeof cell === 'string') {
+    return rowData[cell];
+  } else if (cell) {
+    return cell(rowData, {
+      rowIndex: rowIndex,
+      columnIndex: columnIndex,
+      _dragHandleProps: _dragHandleProps
+    });
+  }
+}
+
+var _default = getCell;
+exports["default"] = _default;