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

Set of react components.

/* eslint-disable react/display-name */
import { memo } from 'react';
import PropTypes from 'prop-types';
import { ButtonIconToggle, StackHorizontal } from '@talend/design-system';
import getDefaultT from '../../../translate';
import { DISPLAY_MODE } from '../../ListComposition/constants';
import { jsx as _jsx } from "react/jsx-runtime";
export const displayModesOptions = [DISPLAY_MODE.TABLE, 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;
  }
}
export const DisplayModeActionIcon = /*#__PURE__*/memo(({
  displayMode,
  displayModeOption,
  icon,
  id,
  label,
  onSelect
}) => {
  return /*#__PURE__*/_jsx(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__*/_jsx(StackHorizontal, {
    gap: "XS",
    padding: {
      x: 'S',
      y: 0
    },
    children: modes.map(option => /*#__PURE__*/_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.string,
  mode: PropTypes.string,
  displayModes: PropTypes.arrayOf(PropTypes.string),
  onChange: PropTypes.func.isRequired,
  t: PropTypes.func
};
DisplayModeActionIcon.propTypes = {
  ...DisplayModeToggle.propTypes
};
DisplayModeToggle.defaultProps = {
  t: getDefaultT()
};
export default DisplayModeToggle;
//# sourceMappingURL=DisplayModeToggle.component.js.map