@talend/react-components/lib/SidePanel/SidePanel.component.js

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var _reactI18next = require("react-i18next");
var _classnames = _interopRequireDefault(require("classnames"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _designTokens = _interopRequireDefault(require("@talend/design-tokens"));
var _ActionList = _interopRequireDefault(require("../ActionList"));
var _Action = _interopRequireDefault(require("../Actions/Action"));
var _constants = _interopRequireDefault(require("../constants"));
var _Inject = _interopRequireDefault(require("../Inject"));
require("../translate");
var _SidePanelModule = _interopRequireDefault(require("./SidePanel.module.scss"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const DOCKED_MIN_WIDTH = '3.75rem';
const LARGE_DOCKED_MIN_WIDTH = '4.375rem';
function getInitialWidth(docked, large) {
  if (docked && large) {
    return LARGE_DOCKED_MIN_WIDTH;
  } else if (docked) {
    return DOCKED_MIN_WIDTH;
  }
  return undefined;
}

/**
 * This component aims to display links as a menu.
 * @param {object} props react props
 *
 @example
 const actions = [
 { label: 'Preparations', icon: 'fa fa-asterisk', onClick: action('Preparations clicked') },
 { label: 'Datasets', icon: 'fa fa-file-excel-o', onClick: action('Datasets clicked') },
 { label: 'Favorites', icon: 'fa fa-star', onClick: action('Favorites clicked') }
 ];
 <SidePanel
 actions={ actions }
 docked={ isDocked }
 selected= { selectedItem }
 onToggleDock={ action('Toggle dock clicked') }
 onSelect={ action('onItemSelect') }
 />
 *
 */
function SidePanel({
  backgroundIcon,
  id,
  selected,
  onSelect,
  actions,
  getComponent,
  components,
  docked: dockedProp,
  reverse,
  minimised,
  large,
  dockable,
  onToggleDock,
  t
}) {
  const [dockState, setDockState] = (0, _react.useState)(dockedProp);
  const docked = onToggleDock ? dockedProp : dockState;
  const [width, setWidth] = (0, _react.useState)(() => getInitialWidth(docked, large));
  const [animation, setAnimation] = (0, _react.useState)(false);
  const ref = /*#__PURE__*/(0, _react.createRef)();
  (0, _react.useLayoutEffect)(() => {
    if (docked || minimised) {
      setWidth(large ? LARGE_DOCKED_MIN_WIDTH : DOCKED_MIN_WIDTH);
    } else if (ref) {
      const actionList = ref.current.querySelector('.tc-action-list');
      setWidth(actionList.offsetWidth);
    }
  }, [ref, docked, minimised, large]);
  (0, _react.useEffect)(() => {
    // animation is disabled at first to avoid the panel to be animated at first render
    // when the width is initialized, then we enable animation
    if (!animation && width) {
      setAnimation(true);
    }
  }, [animation, width]);
  const onToggle = (...args) => {
    if (onToggleDock) {
      onToggleDock(...args);
    } else {
      setDockState(!dockState);
    }
  };
  const injected = _Inject.default.all(getComponent, components);
  const navCSS = (0, _classnames.default)(_SidePanelModule.default['tc-side-panel'], 'tc-side-panel', {
    docked,
    [_SidePanelModule.default.docked]: docked || minimised,
    large,
    [_SidePanelModule.default.large]: large,
    reverse,
    [_SidePanelModule.default.reverse]: reverse,
    [_SidePanelModule.default.animate]: animation
  });
  const listCSS = (0, _classnames.default)(_SidePanelModule.default['tc-side-panel-list'], 'tc-side-panel-list');
  const expandLabel = t('SIDEPANEL_EXPAND', {
    defaultValue: 'Expand menu'
  });
  const collapseTitle = t('SIDEPANEL_COLLAPSE', {
    defaultValue: 'Collapse menu'
  });
  const toggleButtonTitle = docked ? expandLabel : collapseTitle;
  const Components = _Inject.default.getAll(getComponent, {
    Action: _Action.default,
    ActionList: _ActionList.default
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("nav", {
    id: id,
    className: navCSS,
    role: "navigation",
    ref: ref,
    style: {
      width
    },
    children: [backgroundIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)("style", {
      children: `#${id}::before {
						content: '';
						position: absolute;
						left: 0;
						bottom: -50px;
						height: 19.375rem;
						width: 19.375rem;
						background-repeat: no-repeat;
						opacity: 0.1;
						background-color: ${_designTokens.default.coralColorBrandIcon};
						mask-image: url('${backgroundIcon}');
						-webkit-mask-image: url('${backgroundIcon}');
				}`
    }), dockable && !minimised && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: (0, _classnames.default)(_SidePanelModule.default['toggle-btn'], 'tc-side-panel-toggle-btn'),
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Components.Action, {
        id: id && `${id}-toggle-dock`,
        bsStyle: "link",
        onClick: onToggle,
        icon: "talend-opener",
        "aria-controls": id,
        label: toggleButtonTitle,
        tooltipPlacement: "right",
        hideLabel: true
      })
    }), injected('before-actions'), actions && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: (0, _classnames.default)(_SidePanelModule.default['action-list-container'], 'tc-side-panel-action-list-container'),
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Components.ActionList, {
        className: listCSS,
        onSelect: onSelect,
        selected: selected,
        actions: actions,
        reverse: !reverse,
        id: id,
        isNav: true
      })
    }), injected('actions')]
  });
}
SidePanel.displayName = 'SidePanel';
SidePanel.defaultProps = {
  actions: [],
  reverse: false,
  large: false,
  dockable: true,
  minimised: false
};
if (process.env.NODE_ENV !== 'production') {
  const actionPropType = _propTypes.default.shape({
    id: _propTypes.default.string,
    active: _propTypes.default.bool,
    icon: _propTypes.default.string,
    key: _propTypes.default.string,
    label: _propTypes.default.string,
    onClick: _propTypes.default.func
  });
  SidePanel.propTypes = {
    id: _propTypes.default.string,
    backgroundIcon: _propTypes.default.string,
    actions: _propTypes.default.arrayOf(actionPropType),
    components: _propTypes.default.object,
    getComponent: _propTypes.default.func,
    onSelect: _propTypes.default.func,
    onToggleDock: _propTypes.default.func,
    docked: _propTypes.default.bool,
    reverse: _propTypes.default.bool,
    large: _propTypes.default.bool,
    dockable: _propTypes.default.bool,
    minimised: _propTypes.default.bool,
    selected: actionPropType,
    t: _propTypes.default.func
  };
}
var _default = exports.default = (0, _reactI18next.withTranslation)(_constants.default)(SidePanel);
//# sourceMappingURL=SidePanel.component.js.map