@talend/react-components/lib/VirtualizedList/CellTitle/CellTitle.component.js

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = require("react");
var _classnames = _interopRequireDefault(require("classnames"));
var _Icon = _interopRequireDefault(require("../../Icon"));
var _TooltipTrigger = _interopRequireDefault(require("../../TooltipTrigger"));
var _CellTitleSelector = _interopRequireDefault(require("./CellTitleSelector.component"));
var _CellTitleActions = _interopRequireDefault(require("./CellTitleActions.component"));
var _constants = require("../utils/constants");
var _CellTitleModule = _interopRequireDefault(require("./CellTitle.module.scss"));
var _lodash = require("lodash");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const {
  LARGE
} = _constants.listTypes;
const {
  TITLE_MODE_TEXT
} = _constants.cellTitleDisplayModes;

/**
 * Cell that renders the item's title.
 * A title is composed by
 * - an optional icon (rowData[columnData.iconKey])
 * - a button with a click action (columnData.onClick)
 * - actions (rowData[columnData.actionsKey])
 */
class CellTitle extends _react.Component {
  shouldComponentUpdate(nextProps) {
    return this.props.cellData !== nextProps.cellData || !(0, _lodash.isEqual)(this.props.columnData, nextProps.columnData) || this.props.getComponent !== nextProps.getComponent || this.props.rowData !== nextProps.rowData || this.props.rowIndex !== nextProps.rowIndex || this.props.type !== nextProps.type;
  }
  render() {
    const {
      cellData,
      columnData,
      getComponent,
      rowData,
      rowIndex,
      type
    } = this.props;
    let cellColumnData = columnData;
    if (typeof columnData === 'function') {
      cellColumnData = columnData(rowData);
    }
    const {
      id,
      onClick,
      actionsKey,
      persistentActionsKey,
      displayModeKey,
      linkAs,
      getRowState,
      iconKey,
      iconLabelKey,
      onEditCancel,
      onEditSubmit,
      ...columnDataRest
    } = cellColumnData;
    const displayMode = rowData[displayModeKey] || TITLE_MODE_TEXT;
    const {
      disabled = false,
      tooltip
    } = getRowState && getRowState(rowData) || {
      disabled: !!columnDataRest.disabled,
      tooltip: columnDataRest.tooltip
    };
    const titleId = id && `${id}-${rowIndex}-title-cell`;
    const actionsId = id && `${id}-${rowIndex}-title-actions`;
    let icon = null;
    if (iconKey && rowData[iconKey]) {
      icon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
        name: rowData[iconKey],
        className: _CellTitleModule.default.icon
      });
    }
    if (icon && iconLabelKey && rowData[iconLabelKey]) {
      icon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipTrigger.default, {
        label: rowData[iconLabelKey],
        tooltipPlacement: "top",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
            name: rowData[iconKey],
            className: _CellTitleModule.default.icon
          })
        })
      });
    }
    const defaultTitle = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CellTitleSelector.default, {
        id: titleId,
        cellData: cellData,
        className: _CellTitleModule.default['main-title'],
        displayMode: displayMode,
        onClick: onClick,
        linkAs: linkAs,
        onEditCancel: onEditCancel,
        onEditSubmit: onEditSubmit,
        rowData: rowData,
        columnData: columnDataRest,
        tooltip: tooltip
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CellTitleActions.default, {
        getComponent: getComponent,
        id: actionsId,
        rowData: rowData,
        actionsKey: actionsKey,
        persistentActionsKey: persistentActionsKey,
        displayMode: displayMode,
        type: type
      })]
    });
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      id: titleId,
      className: (0, _classnames.default)(_CellTitleModule.default['tc-list-title'], 'tc-list-title', {
        [_CellTitleModule.default['tc-list-title-filter']]: onClick,
        [_CellTitleModule.default['tc-list-title-disabled']]: disabled,
        'tc-list-title-filter': onClick
      }),
      children: [icon, disabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipTrigger.default, {
        label: tooltip || cellData,
        tooltipPlacement: "top",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
          id: titleId,
          className: _CellTitleModule.default['main-title'],
          children: cellData
        })
      }) : defaultTitle]
    });
  }
}
CellTitle.displayName = 'VirtualizedList(CellTitle)';
CellTitle.propTypes = {
  // The cell value : props.rowData[props.dataKey]
  cellData: _propTypes.default.string,
  // The custom props passed to <VirtualizedList.Content columnData={}>.
  columnData: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
    // The List id. This is used as the title parts ids prefix.
    id: _propTypes.default.string,
    // The onClick callback triggered on title main button click.
    onClick: _propTypes.default.func,
    // The "as" property expected in a Link to generate a simple href.
    linkAs: _propTypes.default.element,
    // The actions property key. Actions = props.rowData[props.actionsKey]
    actionsKey: _propTypes.default.string,
    // The persistent actions property key. Actions = props.rowData[props.persistentActionsKey]
    persistentActionsKey: _propTypes.default.string,
    // The display mode property key. DisplayMode = props.rowData[props.displayModeKey]
    displayModeKey: _propTypes.default.string,
    // The icon property key. Icon = props.rowData[props.iconKey]
    iconKey: _propTypes.default.string,
    // The icon tooltip label key. tooltiplabel = props.rowData[iconLabelKey]
    iconLabelKey: _propTypes.default.string,
    // Input mode : the cancel callback on ESC keydown.
    onEditCancel: _propTypes.default.func,
    // Input mode : the submit callback on ENTER keydown or blur.
    onEditSubmit: _propTypes.default.func
  })]),
  getComponent: _propTypes.default.func,
  // The collection item.
  rowData: _propTypes.default.object,
  // eslint-disable-line
  // The collection item index.
  rowIndex: _propTypes.default.number,
  // The type of display
  type: _propTypes.default.oneOf([LARGE])
};
var _default = exports.default = CellTitle;
//# sourceMappingURL=CellTitle.component.js.map