@fluent-windows/core/ItemGroup/ItemGroup.js

React components that inspired by Microsoft's Fluent Design System.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.name = void 0;

var React = _interopRequireWildcard(require("react"));

var _classnames = _interopRequireDefault(require("classnames"));

var _styles = require("@fluent-windows/styles");

var _hooks = require("@fluent-windows/hooks");

var _icons = require("@fluent-windows/icons");

var _Item = _interopRequireDefault(require("../Item"));

var _Transition = _interopRequireDefault(require("../Transition"));

var _Box = _interopRequireDefault(require("../Box"));

var _ItemGroup = require("./ItemGroup.styled");

var _ItemGroup2 = require("./ItemGroup.type");

var _Navigation = require("../Navigation/Navigation");

var _List = require("../List/List");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

var name = 'ItemGroup';
exports.name = name;
var useStyles = (0, _styles.createUseStyles)(_ItemGroup.styles, {
  name: name
});
var ItemGroup = React.forwardRef(function (props, ref) {
  var _classNames, _classNames2, _classNames3;

  var _props$as = props.as,
      as = _props$as === void 0 ? 'div' : _props$as,
      classNameProp = props.className,
      _props$level = props.level,
      level = _props$level === void 0 ? 1 : _props$level,
      children = props.children,
      title = props.title,
      prefix = props.prefix,
      _props$shrink = props.shrink,
      shrink = _props$shrink === void 0 ? 'expand' : _props$shrink,
      rest = _objectWithoutProperties(props, ["as", "className", "level", "children", "title", "prefix", "shrink"]);

  var _React$useContext = React.useContext(_Navigation.NavigationContext),
      activeID = _React$useContext.value,
      expanded = _React$useContext.expanded,
      navigationReveal = _React$useContext.reveal,
      acrylic = _React$useContext.acrylic,
      horizontal = _React$useContext.horizontal;

  var _React$useContext2 = React.useContext(_List.ListContext),
      listReveal = _React$useContext2.reveal;

  var reveal = navigationReveal || listReveal; // handle active item

  var childIds = React.useMemo(function () {
    return React.Children.map(children, function (child) {
      return child.props.value;
    });
  }, [children]);
  var isActiveGroup = React.useMemo(function () {
    if (activeID) {
      var target = childIds.find(function (v) {
        return v === activeID;
      });

      if (target !== undefined) {
        return true;
      }
    }

    return false;
  }, [activeID, childIds]); // handle click status (shrink expand)

  var _React$useState = React.useState(isActiveGroup),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      clickStatus = _React$useState2[0],
      setOpen = _React$useState2[1];

  var handleOpen = React.useCallback(function () {
    if (expanded === true) setOpen(function (v) {
      return !v;
    });
  }, [expanded]); // If expanded is false, set clickStatus to false

  var openRecords = React.useRef(false);
  React.useEffect(function () {
    if (expanded === true) {
      openRecords.current = isActiveGroup || clickStatus;
    }
  }, [clickStatus, isActiveGroup]); // eslint-disable-line

  React.useEffect(function () {
    if (expanded === false) {
      setOpen(false);
    }

    if (expanded === true) {
      setOpen(openRecords.current);
    }
  }, [expanded, isActiveGroup]); // handle hover status (shrink float)

  var _useHover = (0, _hooks.useHover)(),
      _useHover2 = _slicedToArray(_useHover, 2),
      hoverStatus = _useHover2[0],
      bindHover = _useHover2[1];

  var _usePopper = (0, _hooks.usePopper)({
    placement: horizontal && level === 1 ? 'bottom-start' : 'right-start',
    eventsEnabled: true,
    positionFixed: true,
    modifiers: {
      preventOverflow: {
        enabled: true,
        priority: ['right', 'bottom'],
        boundariesElement: 'viewport'
      },
      flip: {
        enabled: true
      }
    }
  }),
      _usePopper2 = _slicedToArray(_usePopper, 2),
      referenceRef = _usePopper2[0],
      popperRef = _usePopper2[1]; // handle Reveal Effects


  var _useReveal = (0, _hooks.useReveal)(66),
      _useReveal2 = _slicedToArray(_useReveal, 1),
      RevealWrapper = _useReveal2[0];

  var titleElement = React.useMemo(function () {
    return reveal ? React.createElement(RevealWrapper, null, React.createElement(_Item["default"], {
      prefix: prefix
    }, title)) : React.createElement(_Item["default"], {
      prefix: prefix
    }, title);
  }, [reveal, prefix, title]);
  var childElements = React.useMemo(function () {
    return reveal ? React.Children.map(children, function (child, i) {
      if (child.type) {
        if (child.type.displayName === 'FItem') {
          return React.createElement(RevealWrapper, {
            key: i
          }, child);
        } else if (child.type.displayName === "F".concat(name)) {
          return React.cloneElement(child, {
            level: level + 1
          });
        }
      }

      return child;
    }) : React.Children.map(children, function (child) {
      if (child.type && child.type.displayName === "F".concat(name)) {
        return React.cloneElement(child, {
          level: level + 1
        });
      }

      return child;
    });
  }, [reveal, children, level]);
  var isFloat = shrink === 'float' || horizontal;
  var classes = useStyles(props);
  var titleClassName = (0, _classnames["default"])(classes.titleRoot, (_classNames = {}, _defineProperty(_classNames, classes.titleActive, isActiveGroup), _defineProperty(_classNames, classes.titleFloatAndHorizontal, isFloat && horizontal), _classNames));
  var titlePrefixClassName = (0, _classnames["default"])(classes.titlePrefix, (_classNames2 = {}, _defineProperty(_classNames2, classes.titlePrefixNotFloatOpen, !isFloat && clickStatus), _defineProperty(_classNames2, classes.titlePrefixNotFloatClose, !isFloat && !clickStatus), _defineProperty(_classNames2, classes.titlePrefixHorizontal, horizontal), _defineProperty(_classNames2, classes.titlePrefixExpanded, !horizontal && expanded), _defineProperty(_classNames2, classes.titlePrefixAcrylic, acrylic), _classNames2));
  var className = (0, _classnames["default"])(classes.root, (_classNames3 = {}, _defineProperty(_classNames3, classes.level, !isFloat), _defineProperty(_classNames3, classes["float"], isFloat), _classNames3));
  return React.createElement(_Box["default"], _extends({
    className: classNameProp,
    ref: ref,
    as: as
  }, rest), shrink === 'expand' && !horizontal && React.createElement(React.Fragment, null, React.createElement("div", {
    className: titleClassName,
    ref: referenceRef,
    onClick: handleOpen
  }, titleElement, React.createElement("div", {
    className: titlePrefixClassName
  }, React.createElement(_icons.ArrowDownSLine, null))), React.createElement(_Transition["default"], {
    visible: clickStatus,
    type: "collapse"
  }, React.createElement(_Box["default"], {
    className: className,
    acrylic: acrylic && horizontal
  }, childElements))), isFloat && React.createElement("div", _extends({
    className: titleClassName,
    ref: referenceRef
  }, bindHover), titleElement, React.createElement("div", {
    className: titlePrefixClassName
  }, horizontal ? level === 1 ? React.createElement(_icons.ArrowDownSLine, null) : React.createElement(_icons.ArrowRightSLine, null) : React.createElement(_icons.ArrowRightSLine, null)), React.createElement(_Transition["default"], {
    visible: hoverStatus,
    type: "grow",
    wrapper: false
  }, React.createElement(_Box["default"], {
    className: className,
    ref: popperRef,
    acrylic: acrylic && isFloat
  }, childElements))));
});
ItemGroup.displayName = "F".concat(name);
ItemGroup.propTypes = _ItemGroup2.ItemGroupPropTypes;
ItemGroup.defaultProps = {
  level: 1
};
var _default = ItemGroup;
exports["default"] = _default;