{"size": 1013, "ext": "js", "max_stars_repo_path": "src/popup/components/atoms/Button/ConfirmationButton.js", "max_stars_repo_name": "Vladislav-Boiko/browser-proxy", "max_stars_repo_stars_event_min_datetime": "2021-08-23T16:44:45.000Z", "max_stars_repo_stars_event_max_datetime": "2021-09-24T08:41:54.000Z", "max_issues_repo_path": "src/popup/components/atoms/Button/ConfirmationButton.js", "max_issues_repo_name": "Vladislav-Boiko/browser-proxy", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/popup/components/atoms/Button/ConfirmationButton.js", "max_forks_repo_name": "Vladislav-Boiko/browser-proxy", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 5, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 28.1388888889, "max_line_length": 70, "alphanum_fraction": 0.6238894373}
import React, { useState } from 'react';
import cn from 'classnames';
import SuccessButton from 'atoms/Button/SuccessButton';

import './ConfirmationButton.css';
export default ({ children, confirmationMessage, ...otherProps }) => {
  const message = confirmationMessage || 'Are you sure?';
  const [confirming, setConfirming] = useState(false);
  const confirm = (value = true) => {
    setConfirming(value);
    if (value) {
      const timeout = setTimeout(() => setConfirming(false), 2800);
      return () => clearInterval(timeout);
    }
  };
  const onClick = (e) => {
    if (confirming) {
      setConfirming(false);
      return otherProps.onClick && otherProps.onClick(e);
    }
    confirm();
  };
  return (
    <SuccessButton
      {...otherProps}
      onClick={onClick}
      {...(confirming && { secondary: true, Icon: null })}
      className={cn(otherProps.className, {
        button_confirming: confirming,
      })}
    >
      {confirming ? message : children}
    </SuccessButton>
  );
};
