@instructure/ui-tree-browser 11.6.0 → 11.6.1-snapshot-129

package/lib/TreeBrowser/v2/TreeButton/index.js

@@ -0,0 +1,208 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TreeButton = void 0;
+var _react = require("react");
+var _latest = require("@instructure/ui-img/latest");
+var _emotion = require("@instructure/emotion");
+var _renderIconWithProps = require("@instructure/ui-icons/lib/IconPropsProvider/renderIconWithProps.js");
+var _styles = _interopRequireDefault(require("./styles"));
+var _props = require("./props");
+var _TreeBrowserContext = _interopRequireDefault(require("../TreeBrowserContext"));
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _dec, _class, _TreeButton;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+// Todo: merge TreeButton and TreeNode: TreeButton should be a special type of TreeNode
+// Map TreeBrowser size tokens to icon size tokens
+const treeBrowserSizeToIconSize = {
+  small: 'md',
+  medium: 'lg',
+  large: 'xl'
+};
+
+/**
+---
+parent: TreeBrowser
+id: TreeBrowser.Button
+---
+**/
+let TreeButton = exports.TreeButton = (_dec = (0, _emotion.withStyle)(_styles.default, 'TreeBrowserTreeButton'), _dec(_class = (_TreeButton = class TreeButton extends _react.Component {
+  constructor(...args) {
+    super(...args);
+    this.ref = null;
+    this.state = {
+      isHovered: false
+    };
+    this.handleRef = el => {
+      if (el && typeof this.props.containerRef === 'function') {
+        this.props.containerRef(el.parentElement);
+      }
+      this.ref = el;
+    };
+    this.handleMouseEnter = () => {
+      if (this.props.hoverable) {
+        this.setState({
+          isHovered: true
+        });
+      }
+    };
+    this.handleMouseLeave = () => {
+      if (this.props.hoverable) {
+        this.setState({
+          isHovered: false
+        });
+      }
+    };
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props, _this$context;
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, {
+      animation: (_this$context = this.context) === null || _this$context === void 0 ? void 0 : _this$context.animation,
+      hoverable: this.props.hoverable
+    });
+  }
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2, _this$context2;
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, {
+      animation: (_this$context2 = this.context) === null || _this$context2 === void 0 ? void 0 : _this$context2.animation,
+      hoverable: this.props.hoverable
+    });
+  }
+  defaultContentRenderer(props) {
+    const name = props.name,
+      descriptor = props.descriptor,
+      styles = props.styles;
+    return (0, _jsxRuntime.jsxs)("span", {
+      css: styles.layout,
+      children: [this.renderImage(), (0, _jsxRuntime.jsxs)("span", {
+        css: styles.text,
+        children: [(0, _jsxRuntime.jsx)("span", {
+          css: styles.textName,
+          children: name
+        }), descriptor ? (0, _jsxRuntime.jsx)("span", {
+          css: styles.textDescriptor,
+          title: descriptor,
+          children: descriptor
+        }) : null]
+      })]
+    });
+  }
+  getIconColor() {
+    const selected = this.props.selected;
+    const isHovered = this.state.isHovered;
+
+    // Priority: selected > hover > default
+    if (selected) return 'onColor';
+    if (isHovered) return 'inverseColor';
+    return 'baseColor';
+  }
+  renderImage() {
+    const type = this.props.type;
+    switch (type) {
+      case 'collection':
+        return this.renderCollectionIcon();
+      case 'item':
+        return this.renderItemImage();
+      default:
+        break;
+    }
+    return void 0;
+  }
+  renderCollectionIcon() {
+    const _this$props3 = this.props,
+      expanded = _this$props3.expanded,
+      collectionIcon = _this$props3.collectionIcon,
+      collectionIconExpanded = _this$props3.collectionIconExpanded,
+      styles = _this$props3.styles,
+      size = _this$props3.size;
+    if (collectionIcon || collectionIconExpanded) {
+      const icon = expanded ? collectionIconExpanded : collectionIcon;
+      const iconSize = treeBrowserSizeToIconSize[size];
+      const iconColor = this.getIconColor();
+      const iconElement = (0, _renderIconWithProps.renderIconWithProps)(icon, iconSize, iconColor);
+      return (0, _jsxRuntime.jsx)("div", {
+        css: styles === null || styles === void 0 ? void 0 : styles.icon,
+        children: iconElement
+      });
+    }
+    return void 0;
+  }
+  renderItemImage() {
+    const _this$props4 = this.props,
+      thumbnail = _this$props4.thumbnail,
+      itemIcon = _this$props4.itemIcon,
+      styles = _this$props4.styles,
+      size = _this$props4.size;
+    if (thumbnail) {
+      return (0, _jsxRuntime.jsx)("div", {
+        css: styles === null || styles === void 0 ? void 0 : styles.thumbnail,
+        children: (0, _jsxRuntime.jsx)(_latest.Img, {
+          src: thumbnail,
+          constrain: "cover",
+          alt: ""
+        })
+      });
+    }
+    if (itemIcon) {
+      const iconSize = treeBrowserSizeToIconSize[size];
+      const iconColor = this.getIconColor();
+      const iconElement = (0, _renderIconWithProps.renderIconWithProps)(itemIcon, iconSize, iconColor);
+      return (0, _jsxRuntime.jsx)("div", {
+        css: styles === null || styles === void 0 ? void 0 : styles.icon,
+        children: iconElement
+      });
+    }
+    return void 0;
+  }
+  render() {
+    const _this$props5 = this.props,
+      styles = _this$props5.styles,
+      renderContent = _this$props5.renderContent;
+    const buttonContent = renderContent ? renderContent(this.props) : this.defaultContentRenderer(this.props);
+    // VoiceOver can't navigate without the buttons, even though they don't do anything
+    return (0, _jsxRuntime.jsx)("button", {
+      ref: this.handleRef,
+      tabIndex: -1,
+      type: "button",
+      css: styles === null || styles === void 0 ? void 0 : styles.treeButton,
+      "data-cid": "TreeButton",
+      onMouseEnter: this.handleMouseEnter,
+      onMouseLeave: this.handleMouseLeave,
+      children: buttonContent
+    });
+  }
+}, _TreeButton.displayName = "TreeButton", _TreeButton.componentId = 'TreeBrowser.Button', _TreeButton.allowedProps = _props.allowedProps, _TreeButton.contextType = _TreeBrowserContext.default, _TreeButton.defaultProps = {
+  type: 'treeButton',
+  size: 'medium',
+  variant: 'folderTree',
+  selected: false,
+  focused: false,
+  expanded: false,
+  hoverable: true
+}, _TreeButton)) || _class);
+var _default = exports.default = TreeButton;

package/lib/TreeBrowser/v2/TreeButton/props.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const allowedProps = exports.allowedProps = ['id', 'name', 'descriptor', 'type', 'size', 'variant', 'collectionIcon', 'collectionIconExpanded', 'itemIcon', 'thumbnail', 'onClick', 'expanded', 'selected', 'focused', 'level', 'containerRef', 'renderContent', 'hoverable'];

package/lib/TreeBrowser/v2/TreeButton/styles.js

@@ -0,0 +1,312 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _emotion = require("@instructure/emotion");
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const transform = (0, _emotion.keyframes)`
+  50% {
+    opacity: 0.5;
+    transform: translate3d(2%, 0, 0);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }`;
+/**
+ *
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyles = (componentTheme, props, sharedTokens, state) => {
+  const size = props.size,
+    variant = props.variant,
+    selected = props.selected,
+    level = props.level;
+  const isRootButton = level && level === 1;
+  const sizeMap = {
+    small: {
+      folderTree: {
+        before: {
+          width: componentTheme.baseSpacingSmall
+        },
+        icon: {
+          marginInlineEnd: componentTheme.iconsMarginRightSmall,
+          marginInlineStart: '0'
+        },
+        thumbnail: {
+          height: `calc(${componentTheme.baseSpacingSmall} * 2)`,
+          width: `calc(${componentTheme.baseSpacingSmall}* 2)`,
+          marginInlineEnd: componentTheme.iconsMarginRightSmall,
+          marginInlineStart: '0'
+        }
+      },
+      indent: {
+        icon: {
+          marginInlineEnd: componentTheme.iconsMarginRightSmall,
+          marginInlineStart: '0'
+        },
+        thumbnail: {
+          height: `calc(${componentTheme.baseSpacingSmall} * 2)`,
+          width: `calc(${componentTheme.baseSpacingSmall} * 2)`,
+          marginInlineEnd: componentTheme.iconsMarginRightSmall,
+          marginInlineStart: '0'
+        }
+      },
+      textName: {
+        fontSize: componentTheme.nameFontSizeSmall
+      },
+      textDescriptor: {
+        fontSize: componentTheme.descriptorFontSizeSmall
+      }
+    },
+    medium: {
+      folderTree: {
+        before: {
+          width: componentTheme.baseSpacingMedium
+        },
+        icon: {
+          marginInlineEnd: componentTheme.iconsMarginRightMedium,
+          marginInlineStart: '0'
+        },
+        thumbnail: {
+          height: `calc(${componentTheme.baseSpacingMedium} * 2)`,
+          width: `calc(${componentTheme.baseSpacingMedium} * 2)`,
+          marginInlineEnd: componentTheme.iconsMarginRightMedium,
+          marginInlineStart: '0'
+        }
+      },
+      indent: {
+        icon: {
+          marginInlineEnd: componentTheme.iconsMarginRightMedium,
+          marginInlineStart: '0'
+        },
+        thumbnail: {
+          height: `calc(${componentTheme.baseSpacingMedium} * 2)`,
+          width: `calc(${componentTheme.baseSpacingMedium} * 2)`,
+          marginInlineEnd: componentTheme.iconsMarginRightMedium,
+          marginInlineStart: '0'
+        }
+      },
+      textName: {
+        fontSize: componentTheme.nameFontSizeMedium
+      },
+      textDescriptor: {
+        fontSize: componentTheme.descriptorFontSizeMedium
+      }
+    },
+    large: {
+      folderTree: {
+        before: {
+          width: componentTheme.baseSpacingLarge
+        },
+        icon: {
+          marginInlineEnd: componentTheme.iconsMarginRightLarge,
+          marginInlineStart: '0'
+        },
+        thumbnail: {
+          height: `calc(${componentTheme.baseSpacingLarge} * 2)`,
+          width: `calc(${componentTheme.baseSpacingLarge} * 2)`,
+          marginInlineEnd: componentTheme.iconsMarginRightLarge,
+          marginInlineStart: '0'
+        }
+      },
+      indent: {
+        icon: {
+          marginInlineEnd: componentTheme.iconsMarginRightLarge,
+          marginInlineStart: '0'
+        },
+        thumbnail: {
+          height: `calc(${componentTheme.baseSpacingLarge} * 2)`,
+          width: `calc(${componentTheme.baseSpacingLarge}* 2)`,
+          marginInlineEnd: componentTheme.iconsMarginRightLarge,
+          marginInlineStart: '0'
+        }
+      },
+      textName: {
+        fontSize: componentTheme.nameFontSizeLarge
+      },
+      textDescriptor: {
+        fontSize: componentTheme.descriptorFontSizeLarge
+      }
+    }
+  };
+  const textStyle = {
+    minWidth: '0.0625rem',
+    lineHeight: componentTheme.textLineHeight,
+    flex: 1
+  };
+  const textNameStyle = {
+    display: 'block',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    ...sizeMap[size].textName
+  };
+  const layoutPadding = {
+    small: {
+      folderTree: {
+        padding: `calc(${componentTheme.baseSpacingSmall} / 3) ${componentTheme.baseSpacingSmall}`
+      },
+      indent: {
+        padding: `calc(${componentTheme.baseSpacingSmall} / 3) calc(${componentTheme.baseSpacingSmall} / 2)`
+      }
+    },
+    medium: {
+      folderTree: {
+        padding: `calc(${componentTheme.baseSpacingMedium} / 3) ${componentTheme.baseSpacingMedium}`
+      },
+      indent: {
+        padding: `calc(${componentTheme.baseSpacingMedium} / 3) calc(${componentTheme.baseSpacingMedium} / 2)`
+      }
+    },
+    large: {
+      folderTree: {
+        padding: `calc(${componentTheme.baseSpacingLarge} / 3) ${componentTheme.baseSpacingLarge}`
+      },
+      indent: {
+        padding: `calc(${componentTheme.baseSpacingLarge} / 3) calc(${componentTheme.baseSpacingLarge} / 2)`
+      }
+    }
+  };
+  return {
+    treeButton: {
+      label: 'treeButton',
+      boxSizing: 'border-box',
+      display: 'block',
+      width: '100%',
+      margin: '0',
+      backgroundColor: 'transparent',
+      textAlign: 'start',
+      fontFamily: 'inherit',
+      userSelect: 'none',
+      cursor: 'pointer',
+      border: 'none',
+      borderRadius: componentTheme.borderRadius,
+      position: 'relative',
+      zIndex: 1,
+      ...(state !== null && state !== void 0 && state.animation ? {
+        transform: 'translate3d(-2%, 0, 0)',
+        opacity: 0.01,
+        transformOrigin: 'left center',
+        animationName: transform,
+        animationDuration: '0.2s',
+        animationFillMode: 'forwards',
+        animationTimingFunction: 'ease-out',
+        animationDelay: '0.2s'
+      } : {}),
+      outline: '0',
+      padding: '0',
+      ...(sharedTokens !== null && sharedTokens !== void 0 && sharedTokens.focusOutline ? (0, _emotion.calcFocusOutlineStyles)(sharedTokens.focusOutline) : {}),
+      ...(variant === 'folderTree' && !isRootButton && {
+        '&::before': {
+          content: '""',
+          height: componentTheme.borderWidth,
+          background: componentTheme.borderColor,
+          // Tree horizontal lines
+          position: 'absolute',
+          insetInlineStart: '0',
+          insetInlineEnd: 'auto',
+          top: '50%',
+          ...(selected && {
+            visibility: 'hidden'
+          }),
+          ...sizeMap[size][variant].before
+        },
+        '&:hover::before': {
+          visibility: state !== null && state !== void 0 && state.hoverable ? 'hidden' : 'visible'
+        }
+      }),
+      ...((state === null || state === void 0 ? void 0 : state.hoverable) !== false && {
+        '&:hover': {
+          backgroundColor: selected ? componentTheme.selectedBackgroundColor : componentTheme.hoverBackgroundColor,
+          '[class$=-treeButton__textName], [class$=-treeButton__textDescriptor], [class$=-treeButton__node]': {
+            color: selected ? componentTheme.selectedTextColor : componentTheme.hoverTextColor
+          }
+        }
+      }),
+      ...(selected && {
+        backgroundColor: componentTheme.selectedBackgroundColor
+      })
+    },
+    layout: {
+      label: 'treeButton__layout',
+      display: 'flex',
+      alignItems: 'center',
+      lineHeight: 1,
+      minHeight: '2rem',
+      ...layoutPadding[size][variant]
+    },
+    text: {
+      label: 'treeButton__text',
+      ...textStyle
+    },
+    textName: {
+      label: 'treeButton__textName',
+      ...textNameStyle,
+      color: selected ? componentTheme.selectedTextColor : componentTheme.nameTextColor
+    },
+    textDescriptor: {
+      label: 'treeButton__textDescriptor',
+      display: 'block',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+      marginTop: componentTheme.descriptorMarginTop,
+      color: selected ? componentTheme.selectedTextColor : componentTheme.descriptorTextColor,
+      ...sizeMap[size].textDescriptor
+    },
+    icon: {
+      label: 'treeButton__icon',
+      minWidth: '0.0625rem',
+      position: 'relative',
+      zIndex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      ...sizeMap[size][variant].icon
+    },
+    thumbnail: {
+      label: 'treeButton__thumbnail',
+      ...sizeMap[size][variant].thumbnail
+    },
+    node: {
+      label: 'treeButton__node',
+      ...textStyle,
+      ...textNameStyle,
+      color: componentTheme.descriptorTextColor
+    }
+  };
+};
+var _default = exports.default = generateStyles;