@mui/x-tree-view 6.0.0-alpha.0

package/node/TreeItem/TreeItemContent.js

@@ -0,0 +1,109 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TreeItemContent = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _useTreeItem = require("./useTreeItem");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["classes", "className", "displayIcon", "expansionIcon", "icon", "label", "nodeId", "onClick", "onMouseDown"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+/**
+ * @ignore - internal component.
+ */
+const TreeItemContent = /*#__PURE__*/React.forwardRef(function TreeItemContent(props, ref) {
+  const {
+      classes,
+      className,
+      displayIcon,
+      expansionIcon,
+      icon: iconProp,
+      label,
+      nodeId,
+      onClick,
+      onMouseDown
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const {
+    disabled,
+    expanded,
+    selected,
+    focused,
+    handleExpansion,
+    handleSelection,
+    preventSelection
+  } = (0, _useTreeItem.useTreeItem)(nodeId);
+  const icon = iconProp || expansionIcon || displayIcon;
+  const handleMouseDown = event => {
+    preventSelection(event);
+    if (onMouseDown) {
+      onMouseDown(event);
+    }
+  };
+  const handleClick = event => {
+    handleExpansion(event);
+    handleSelection(event);
+    if (onClick) {
+      onClick(event);
+    }
+  };
+  return (
+    /*#__PURE__*/
+    /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions -- Key event is handled by the TreeView */
+    (0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({}, other, {
+      className: (0, _clsx.default)(className, classes.root, expanded && classes.expanded, selected && classes.selected, focused && classes.focused, disabled && classes.disabled),
+      onClick: handleClick,
+      onMouseDown: handleMouseDown,
+      ref: ref,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: classes.iconContainer,
+        children: icon
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: classes.label,
+        children: label
+      })]
+    }))
+  );
+});
+exports.TreeItemContent = TreeItemContent;
+process.env.NODE_ENV !== "production" ? TreeItemContent.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: _propTypes.default.object.isRequired,
+  /**
+   * className applied to the root element.
+   */
+  className: _propTypes.default.string,
+  /**
+   * The icon to display next to the tree node's label. Either a parent or end icon.
+   */
+  displayIcon: _propTypes.default.node,
+  /**
+   * The icon to display next to the tree node's label. Either an expansion or collapse icon.
+   */
+  expansionIcon: _propTypes.default.node,
+  /**
+   * The icon to display next to the tree node's label.
+   */
+  icon: _propTypes.default.node,
+  /**
+   * The tree node label.
+   */
+  label: _propTypes.default.node,
+  /**
+   * The id of the node.
+   */
+  nodeId: _propTypes.default.string.isRequired
+} : void 0;

package/node/TreeItem/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _TreeItem = require("./TreeItem");
+Object.keys(_TreeItem).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TreeItem[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TreeItem[key];
+    }
+  });
+});
+var _useTreeItem = require("./useTreeItem");
+Object.keys(_useTreeItem).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useTreeItem[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useTreeItem[key];
+    }
+  });
+});
+var _treeItemClasses = require("./treeItemClasses");
+Object.keys(_treeItemClasses).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _treeItemClasses[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _treeItemClasses[key];
+    }
+  });
+});

package/node/TreeItem/treeItemClasses.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTreeItemUtilityClass = getTreeItemUtilityClass;
+exports.treeItemClasses = void 0;
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+function getTreeItemUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiTreeItem', slot);
+}
+const treeItemClasses = (0, _generateUtilityClasses.default)('MuiTreeItem', ['root', 'group', 'content', 'expanded', 'selected', 'focused', 'disabled', 'iconContainer', 'label']);
+exports.treeItemClasses = treeItemClasses;

package/node/TreeItem/useTreeItem.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTreeItem = useTreeItem;
+var React = _interopRequireWildcard(require("react"));
+var _TreeViewContext = require("../TreeView/TreeViewContext");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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 useTreeItem(nodeId) {
+  const {
+    focus,
+    isExpanded,
+    isExpandable,
+    isFocused,
+    isDisabled,
+    isSelected,
+    multiSelect,
+    selectNode,
+    selectRange,
+    toggleExpansion
+  } = React.useContext(_TreeViewContext.TreeViewContext);
+  const expandable = isExpandable ? isExpandable(nodeId) : false;
+  const expanded = isExpanded ? isExpanded(nodeId) : false;
+  const focused = isFocused ? isFocused(nodeId) : false;
+  const disabled = isDisabled ? isDisabled(nodeId) : false;
+  const selected = isSelected ? isSelected(nodeId) : false;
+  const handleExpansion = event => {
+    if (!disabled) {
+      if (!focused) {
+        focus(event, nodeId);
+      }
+      const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
+
+      // If already expanded and trying to toggle selection don't close
+      if (expandable && !(multiple && isExpanded(nodeId))) {
+        toggleExpansion(event, nodeId);
+      }
+    }
+  };
+  const handleSelection = event => {
+    if (!disabled) {
+      if (!focused) {
+        focus(event, nodeId);
+      }
+      const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
+      if (multiple) {
+        if (event.shiftKey) {
+          selectRange(event, {
+            end: nodeId
+          });
+        } else {
+          selectNode(event, nodeId, true);
+        }
+      } else {
+        selectNode(event, nodeId);
+      }
+    }
+  };
+  const preventSelection = event => {
+    if (event.shiftKey || event.ctrlKey || event.metaKey || disabled) {
+      // Prevent text selection
+      event.preventDefault();
+    }
+  };
+  return {
+    disabled,
+    expanded,
+    selected,
+    focused,
+    handleExpansion,
+    handleSelection,
+    preventSelection
+  };
+}