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

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SubtitleComponent = SubtitleComponent;
exports.cancelActionComponent = cancelActionComponent;
exports.combinedFooterActions = combinedFooterActions;
exports.default = void 0;
exports.subtitleComponent = subtitleComponent;
var _react = require("react");
var _reactTransitionGroup = require("react-transition-group");
var _classnames = _interopRequireDefault(require("classnames"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _designSystem = require("@talend/design-system");
var _utils = require("@talend/utils");
var _ActionBar = _interopRequireDefault(require("../ActionBar"));
var _Action = _interopRequireDefault(require("../Actions/Action"));
var _EditableText = _interopRequireDefault(require("../EditableText"));
var _Inject = _interopRequireDefault(require("../Inject"));
var _TabBar = _interopRequireDefault(require("../TabBar"));
var _theme = require("../theme");
var _DrawerModule = _interopRequireDefault(require("./Drawer.module.scss"));
var _lodash = require("lodash");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const css = (0, _theme.getTheme)(_DrawerModule.default);
const DEFAULT_TRANSITION_DURATION = 350;
const STYLES = {
  entering: {
    transform: 'translateX(0%)'
  },
  entered: {
    transform: 'translateX(0%)'
  },
  exiting: {
    transform: 'translateX(100%)'
  },
  exited: {
    transform: 'translateX(100%)'
  }
};
function DrawerAnimation(props) {
  const {
    children,
    withTransition,
    ...rest
  } = props;
  const timeout = withTransition ? DEFAULT_TRANSITION_DURATION : 0;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.Transition, {
    in: true,
    appear: true,
    timeout: withTransition ? 500 : 0,
    ...rest,
    children: transitionState => {
      const style = {
        transition: `transform ${timeout}ms ease-in-out`,
        transform: 'translateX(100%)',
        ...STYLES[transitionState]
      };
      return children({
        style,
        transitioned: transitionState === 'entered',
        transitionState
      });
    }
  });
}
DrawerAnimation.propTypes = {
  children: _propTypes.default.func,
  withTransition: _propTypes.default.bool,
  onTransitionComplete: _propTypes.default.func
};
DrawerAnimation.defaultProps = {
  withTransition: true,
  onTransitionComplete: () => {}
};
function DrawerContainer({
  drawerId,
  stacked,
  className,
  children,
  withTransition = true,
  ...rest
}) {
  const drawerContainerClasses = css(className, 'tc-drawer', {
    'tc-drawer-transition': withTransition
  }, {
    [_DrawerModule.default['drawer-stacked']]: stacked,
    stacked
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    className: drawerContainerClasses,
    role: "dialog",
    "aria-labelledby": drawerId,
    ...rest,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: (0, _classnames.default)('tc-drawer-container', _DrawerModule.default['tc-drawer-container']),
      children: children
    })
  });
}
DrawerContainer.propTypes = {
  drawerId: _propTypes.default.string,
  stacked: _propTypes.default.bool,
  withTransition: _propTypes.default.bool,
  className: _propTypes.default.string,
  children: _propTypes.default.node.isRequired
};
function cancelActionComponent(onCancelAction, getComponent) {
  if (!onCancelAction) {
    return null;
  }
  const ActionComponent = _Inject.default.get(getComponent, 'Action', _Action.default);
  const enhancedCancelAction = {
    icon: 'talend-cross',
    hideLabel: true,
    link: true,
    ...onCancelAction
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionComponent, {
    ...enhancedCancelAction,
    className: css('tc-drawer-close-action', enhancedCancelAction.className),
    tooltipClassName: _DrawerModule.default['drawer-close-action-tooltip']
  });
}
function renderSubtitleTag(subtitleTagLabel, subtitleTagTooltip, subtitleTagVariant = 'default') {
  if (subtitleTagTooltip) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.Tooltip, {
      placement: "top",
      title: subtitleTagTooltip,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.Tag, {
        variant: subtitleTagVariant,
        children: subtitleTagLabel
      })
    });
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.Tag, {
    children: subtitleTagLabel
  });
}
function SubtitleComponent({
  subtitle,
  ...rest
}) {
  if (!subtitle || !subtitle.length) {
    return null;
  }
  const {
    subtitleTag
  } = rest;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    className: css('tc-drawer-header-subtitle'),
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_designSystem.StackHorizontal, {
      gap: "XS",
      align: "center",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
        title: subtitle,
        children: subtitle
      }), subtitleTag && subtitleTag.label && renderSubtitleTag(subtitleTag.label, subtitleTag.tooltip, subtitleTag.variant)]
    })
  });
}
SubtitleComponent.propTypes = {
  subtitle: _propTypes.default.string,
  subtitleTag: _propTypes.default.shape({
    label: _propTypes.default.string,
    tooltip: _propTypes.default.string,
    variant: _propTypes.default.oneOf(_designSystem.TagVariantsNames)
  })
};
function subtitleComponent(subtitle) {
  // backward compatibility
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(SubtitleComponent, {
    subtitle: subtitle
  });
}
function DrawerTitle({
  title,
  subtitle,
  drawerId,
  children,
  onCancelAction,
  getComponent,
  editable,
  inProgress,
  subtitleTag,
  onEdit,
  onSubmit,
  onCancel,
  renderTitleActions = _lodash.noop,
  ...props
}) {
  const [isEditMode, setIsEditMode] = (0, _react.useState)(false);
  function handleEdit(...args) {
    setIsEditMode(true);
    if (onEdit) {
      onEdit(...args);
    }
  }
  function handleCancel(...args) {
    setIsEditMode(false);
    if (onCancel) {
      onCancel(...args);
    }
  }
  function handleSubmit(...args) {
    setIsEditMode(false);
    if (onSubmit) {
      onSubmit(...args);
    }
  }
  if (!title && !children) {
    return null;
  }
  const InjectedEditableText = _Inject.default.get(getComponent, 'EditableText', _EditableText.default);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: css('tc-drawer-header'),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: css('tc-drawer-header-menu'),
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: css('tc-drawer-header-title'),
        children: [!editable ? /*#__PURE__*/(0, _jsxRuntime.jsx)("h1", {
          id: drawerId,
          title: title,
          children: title
        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(InjectedEditableText, {
          id: drawerId,
          text: title,
          inProgress: inProgress,
          feature: "drawertitle.rename",
          componentClass: "h1",
          onEdit: handleEdit,
          onCancel: handleCancel,
          onSubmit: handleSubmit,
          editMode: isEditMode,
          ...props
        }), !isEditMode ? /*#__PURE__*/(0, _jsxRuntime.jsx)(SubtitleComponent, {
          subtitle: subtitle,
          subtitleTag: subtitleTag
        }) : null]
      }), renderTitleActions(), cancelActionComponent(onCancelAction, getComponent)]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: css('tc-drawer-header-with-tabs'),
      children: children
    })]
  });
}
DrawerTitle.propTypes = {
  drawerId: _propTypes.default.string,
  title: _propTypes.default.string.isRequired,
  subtitle: _propTypes.default.string,
  onCancelAction: _propTypes.default.shape(_Action.default.propTypes),
  children: _propTypes.default.node,
  getComponent: _propTypes.default.func,
  renderTitleActions: _propTypes.default.func,
  editable: _propTypes.default.bool,
  inProgress: _propTypes.default.bool,
  subtitleTag: _propTypes.default.shape({
    label: _propTypes.default.string,
    tooltip: _propTypes.default.string,
    variant: _propTypes.default.oneOf(_designSystem.TagVariantsNames)
  }),
  onEdit: _propTypes.default.func,
  onSubmit: _propTypes.default.func,
  onCancel: _propTypes.default.func
};
function DrawerContent({
  children,
  className,
  ...rest
}) {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    className: css('tc-drawer-content', className),
    "data-drawer-content": true,
    ...rest,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: css('tc-drawer-content-wrapper'),
      children: children
    })
  });
}
DrawerContent.propTypes = {
  children: _propTypes.default.node,
  className: _propTypes.default.string
};
function DrawerFooter({
  children
}) {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    className: css('tc-drawer-footer'),
    children: children
  });
}
DrawerFooter.propTypes = {
  children: _propTypes.default.node
};
function combinedFooterActions(onCancelAction, footerActions, activeTabItem = {}) {
  const enhancedFooterActions = {
    ...(0, _lodash.omit)(footerActions, 'actions')
  };
  enhancedFooterActions.actions = {};
  ['left', 'center', 'right'].forEach(item => {
    enhancedFooterActions.actions[item] = [...(0, _lodash.get)(footerActions, `actions.${item}`, []), ...(0, _lodash.get)(activeTabItem, `actions.${item}`, [])];
  });
  if (onCancelAction && !onCancelAction.hideInFooter) {
    enhancedFooterActions.actions.left.unshift(onCancelAction);
  }
  return enhancedFooterActions;
}
function Drawer({
  stacked,
  title,
  className,
  style,
  children,
  footerActions,
  onCancelAction,
  tabs,
  withTransition,
  getComponent,
  selectedTabKey,
  editableTitle,
  renderTitleActions
}) {
  const [drawerId] = (0, _react.useState)((0, _utils.randomUUID)());
  if (!children) {
    return null;
  }
  const TabBarComponent = _Inject.default.get(getComponent, 'TabBar', _TabBar.default);
  let activeTab = {};
  let activeTabItem = [];
  let customTabs;
  if (tabs && tabs.items.length > 0) {
    customTabs = {
      ...tabs,
      items: tabs.items && tabs.items.map(({
        footerActions: _,
        ...item
      }) => item)
    };
    if (selectedTabKey) {
      customTabs.selectedKey = selectedTabKey;
      activeTab = tabs.items.find(tab => tab.key === selectedTabKey);
    }
    activeTabItem = (0, _lodash.get)(activeTab, 'footerActions', {});
  }
  const combinedFooterProps = combinedFooterActions(onCancelAction, footerActions, activeTabItem);
  const displayFooter = Object.values(combinedFooterProps.actions).some(footerAction => !!footerAction.length);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(DrawerContainer, {
    stacked: stacked,
    className: className,
    style: style,
    drawerId: drawerId,
    withTransition: withTransition,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DrawerTitle, {
      drawerId: drawerId,
      renderTitleActions: renderTitleActions,
      editable: editableTitle,
      title: title,
      onCancelAction: onCancelAction,
      getComponent: getComponent
    }), tabs && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: css('tc-drawer-tabs-container'),
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TabBarComponent, {
        ...customTabs,
        className: css('tc-drawer-tabs')
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      style: {
        display: 'flex',
        flexDirection: 'column',
        flexGrow: 1,
        overflow: 'hidden'
      },
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DrawerContent, {
        children: children
      }), displayFooter && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: css('tc-drawer-actionbar-container'),
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionBar.default, {
          ...combinedFooterProps,
          className: css('tc-drawer-actionbar')
        })
      })]
    })]
  });
}
Drawer.displayName = 'Drawer';
Drawer.propTypes = {
  stacked: _propTypes.default.bool,
  title: _propTypes.default.string,
  editableTitle: _propTypes.default.bool,
  children: _propTypes.default.node,
  style: _propTypes.default.object,
  // eslint-disable-line react/forbid-prop-types
  className: _propTypes.default.string,
  // footer action, see action bar for api
  footerActions: _propTypes.default.shape(_ActionBar.default.propTypes),
  onCancelAction: _propTypes.default.shape(_Action.default.propTypes),
  tabs: _propTypes.default.shape(_TabBar.default.propTypes),
  withTransition: _propTypes.default.bool,
  renderTitleActions: _propTypes.default.func,
  getComponent: _propTypes.default.func,
  selectedTabKey: _propTypes.default.string
};
Drawer.defaultProps = {
  withTransition: true
};
Drawer.Animation = DrawerAnimation;
Drawer.Container = DrawerContainer;
Drawer.Title = DrawerTitle;
Drawer.Content = DrawerContent;
Drawer.Footer = DrawerFooter;
Drawer.FooterStyle = _DrawerModule.default['tc-drawer-footer'];
var _default = exports.default = Drawer;
//# sourceMappingURL=Drawer.component.js.map