@talend/react-components/lib/List/Toolbar/DisplayModeToggle/DisplayModeToggle.component.js

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.displayModesOptions = exports.default = exports.DisplayModeActionIcon = void 0;
var _react = require("react");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _designSystem = require("@talend/design-system");
var _translate = _interopRequireDefault(require("../../../translate"));
var _constants = require("../../ListComposition/constants");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/* eslint-disable react/display-name */

const displayModesOptions = exports.displayModesOptions = [_constants.DISPLAY_MODE.TABLE, _constants.DISPLAY_MODE.LARGE];
function getLabel(selected, t) {
  switch (selected) {
    case 'table':
      return t('LIST_SELECT_DISPLAY_MODE_TABLE', {
        defaultValue: 'Table'
      });
    case 'large':
      return t('LIST_SELECT_DISPLAY_MODE_LARGE', {
        defaultValue: 'Expanded'
      });
    default:
      return selected;
  }
}
const DisplayModeActionIcon = exports.DisplayModeActionIcon = /*#__PURE__*/(0, _react.memo)(({
  displayMode,
  displayModeOption,
  icon,
  id,
  label,
  onSelect
}) => {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.ButtonIconToggle, {
    id: `${id}-${displayMode}`,
    tooltipPlacement: "top-end",
    icon: icon,
    isActive: displayMode === displayModeOption,
    size: "S",
    onClick: e => {
      onSelect(e, displayMode);
    },
    children: label
  }, displayMode);
});
function DisplayModeToggle({
  id,
  displayModes,
  onChange,
  mode,
  t
}) {
  const modes = displayModes || displayModesOptions;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.StackHorizontal, {
    gap: "XS",
    padding: {
      x: 'S',
      y: 0
    },
    children: modes.map(option => /*#__PURE__*/(0, _jsxRuntime.jsx)(DisplayModeActionIcon, {
      id: id,
      icon: option === 'table' ? 'talend-table' : 'talend-expanded',
      label: t('LIST_SELECT_DISPLAY_MODE', {
        defaultValue: 'Set {{displayMode}} as current display mode.',
        displayMode: getLabel(option, t)
      }),
      onSelect: onChange,
      displayMode: option,
      displayModeOption: mode
    }, option))
  });
}
DisplayModeToggle.propTypes = {
  id: _propTypes.default.string,
  mode: _propTypes.default.string,
  displayModes: _propTypes.default.arrayOf(_propTypes.default.string),
  onChange: _propTypes.default.func.isRequired,
  t: _propTypes.default.func
};
DisplayModeActionIcon.propTypes = {
  ...DisplayModeToggle.propTypes
};
DisplayModeToggle.defaultProps = {
  t: (0, _translate.default)()
};
var _default = exports.default = DisplayModeToggle;
//# sourceMappingURL=DisplayModeToggle.component.js.map