All files / src/components/ConfirmDialog index.jsx

0% Statements 0/38
0% Branches 0/14
0% Functions 0/5
0% Lines 0/26
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 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80                                                                                                                                                               
import styles from './style.postcss';
 
import React from 'react';
import is from 'is_js';
import classnames from 'classnames';
 
import Dialog from 'components/Dialog';
import Button from 'components/Button';
import Icon from 'components/Icon';
import PropTypes from 'prop-types';
import testClass from 'domain/testClass';
 
const ConfirmDialog = ({
  children,
  title,
  content,
  primaryButtonContent,
  secondaryButtonContent,
  onPrimaryClick,
  onSecondaryClick,
  onRequestClose,
  isOpen,
  isLoading,
  isButtonless,
}) => <Dialog isOpen={isOpen}
    withCloseButton={is.function(onRequestClose)}
    isLoading={isLoading}
    onRequestClose={(source) => (onRequestClose && source === 'button' ? onRequestClose(source) : null)}>
  <div className={styles.ConfirmDialog}>
    {
      title ?
        <div className={styles.ConfirmDialog_title}>{title}</div> :
        <Icon id="info" className={styles.ConfirmDialog_icon} />
    }
    <div className={styles.ConfirmDialog_content}>
      <span>{content}</span>
      {children}
    </div>
    {
      ! isButtonless &&
      <Button.Container className={styles.ConfirmDialog_buttons}
          align="center">
        <Button type={Button.Type.primary}
            className={classnames(styles.ConfirmDialog_button,
            testClass('confirm-dialog-primary'))}
            onClick={() => onPrimaryClick()}
            disabled={!! isLoading}>
          {primaryButtonContent}
        </Button>
        {
          secondaryButtonContent &&
          <Button type={Button.Type.default}
              className={classnames(styles.ConfirmDialog_button,
                testClass('confirm-dialog-secondary'))}
              onClick={() => onSecondaryClick()}
              disabled={!! isLoading}>
            {secondaryButtonContent}
          </Button>
        }
      </Button.Container>
    }
  </div>
</Dialog>;
 
ConfirmDialog.propTypes = {
  isOpen: PropTypes.bool,
  isLoading: PropTypes.bool,
  isButtonless: PropTypes.bool,
  children: PropTypes.node,
  title: PropTypes.string,
  content: PropTypes.string,
  primaryButtonContent: PropTypes.string.isRequired,
  secondaryButtonContent: PropTypes.string,
  onPrimaryClick: PropTypes.func,
  onSecondaryClick: PropTypes.func,
  onRequestClose: PropTypes.func,
};
 
export default ConfirmDialog;