@cc-dev-kit-test/console-components-app-layout/lib/Nav.js

React component for Alibaba Cloud.

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

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

var _NavCollapseTrigger = _interopRequireDefault(require("./NavCollapseTrigger"));

var S = _interopRequireWildcard(require("./styles"));

var useCollapse = function useCollapse(_ref) {
  var defaultCollapsed = _ref.defaultCollapsed,
      collapsed = _ref.collapsed,
      onCollapseTriggerClick = _ref.onCollapseTriggerClick;
  var isControlled = typeof collapsed === 'boolean';

  var _useState = (0, _react.useState)(defaultCollapsed),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      collapsedState = _useState2[0],
      setCollapsedState = _useState2[1]; // 是否是受控组件？


  var actualCollapsed = isControlled ? collapsed : collapsedState; // 装饰onCollapseTriggerClick，在受控模式下要设置当前collapsedState

  var actualOnCollapseTriggerClick = (0, _react.useCallback)(function (e) {
    onCollapseTriggerClick && onCollapseTriggerClick(actualCollapsed, e);

    if (!isControlled) {
      setCollapsedState(!actualCollapsed);
    }
  }, [actualCollapsed, isControlled, onCollapseTriggerClick]);
  return [actualCollapsed, actualOnCollapseTriggerClick];
};

var Nav = function Nav(_ref2) {
  var _ref2$collapsible = _ref2.collapsible,
      collapsible = _ref2$collapsible === void 0 ? true : _ref2$collapsible,
      collapsed = _ref2.collapsed,
      _ref2$defaultCollapse = _ref2.defaultCollapsed,
      defaultCollapsed = _ref2$defaultCollapse === void 0 ? false : _ref2$defaultCollapse,
      onCollapseTriggerClick = _ref2.onCollapseTriggerClick,
      children = _ref2.children;

  var _useCollapse = useCollapse({
    collapsed: collapsed,
    defaultCollapsed: defaultCollapsed,
    onCollapseTriggerClick: onCollapseTriggerClick
  }),
      _useCollapse2 = (0, _slicedToArray2.default)(_useCollapse, 2),
      derivedCollapsed = _useCollapse2[0],
      derivedOnCollapseTriggerClick = _useCollapse2[1];

  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(S.Nav, {
    collapsed: derivedCollapsed,
    className: "windcc-app-layout__nav"
  }, /*#__PURE__*/_react.default.createElement(S.NavChildenWrapper, null, children)), collapsible && /*#__PURE__*/_react.default.createElement(_NavCollapseTrigger.default, {
    collapsed: derivedCollapsed,
    onClick: derivedOnCollapseTriggerClick
  }));
};

var _default = Nav;
exports.default = _default;