All files / lib/CollapseButton index.js

100% Statements 11/11
88.89% Branches 8/9
100% Functions 4/4
100% Lines 11/11
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52        89x 8x   8x 1x     8x 8x     8x                 1x           89x   89x             89x                        
import React from 'react';
import PropTypes from 'prop-types';
import { Button, Icon } from '@collab-ui/react';
 
const CollapseButton = props => {
  const { collapse, alignment, onClick, className, ...otherProps } = props;
 
  const handleClick = () => {
    onClick && onClick();
  };
 
  const getIconName = () => {
    return collapse ? 'arrow-right-optical_14' : 'arrow-left-optical_14';
  };
 
  return (
    <Button
      ariaLabel={collapse ? 'expand' : 'collapse'}
      className={
        'cui-collapse-button' +
        ` cui-collapse-button--${alignment}` +
        `${(className && ` ${className}`) || ''}`
      }
      children={<Icon name={getIconName()}/>}
      onClick={() => handleClick()}
      {...otherProps}
    />
  );
};
 
CollapseButton.displayName = 'CollapseButton';
 
CollapseButton.defaultProps = {
  collapse: true,
  alignment: 'left',
  onClick: null,
  className: '',
};
 
CollapseButton.propTypes = {
  /** @prop Sets the collapse css styling | true */
  collapse: PropTypes.bool,
  /** @prop Sets the positioning of the CollapseButton | 'left' */
  alignment: PropTypes.oneOf(['left', 'right', 'top', 'bottom']),
  /** @prop Handler to be called when the user taps the CollapseButton | null */
  onClick: PropTypes.func,
  /** @prop Optional css class string | '' */
  className: PropTypes.string,
};
 
export default CollapseButton;