# ghostkit/2.25.0/gutenberg/components/remove-button/index.js

Block Animations, Motion & Scroll Effects – Ghost Kit, version 2.25.0. 92 lines.

- Page: https://pluginprobe.com/plugins/ghostkit/2.25.0/code/gutenberg/components/remove-button/index.js
- Raw: https://pluginprobe.com/plugins/ghostkit/2.25.0/raw/gutenberg/components/remove-button/index.js
- Modified: 2023-01-04T15:48:40+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/ghostkit/2.25.0/code/gutenberg/components/remove-button/index.js#L10-L20`.

```javascript
/**
 * Internal dependencies
 */
import getIcon from '../../utils/get-icon';

/**
 * WordPress dependencies
 */
const { Component } = wp.element;

const { __ } = wp.i18n;

const { Button, Popover } = wp.components;

/**
 * Component Class
 */
export default class RemoveButton extends Component {
  constructor(props) {
    super(props);

    this.state = {
      confirmed: -1,
    };
  }

  render() {
    const {
      onRemove,
      show,
      style,
      tooltipText = __('Remove Block?', 'ghostkit'),
      tooltipRemoveText = __('Remove', 'ghostkit'),
      tooltipCancelText = __('Cancel', 'ghostkit'),
    } = this.props;

    const { confirmed } = this.state;

    if (!show) {
      return null;
    }

    return (
      <Button
        className="ghostkit-component-remove-button"
        onClick={() => {
          if (confirmed === -1) {
            this.setState({
              confirmed: 0,
            });
          }
        }}
        style={style}
      >
        {confirmed === 0 ? (
          <Popover
            className="ghostkit-component-remove-button-confirm"
            onClose={() => {
              this.setState({
                confirmed: -1,
              });
            }}
            onFocusOutside={() => {
              this.setState({
                confirmed: -1,
              });
            }}
          >
            {tooltipText}
            <Button className="ghostkit-component-remove-button-confirm-yep" onClick={onRemove}>
              {tooltipRemoveText}
            </Button>
            <Button
              className="ghostkit-component-remove-button-confirm-nope"
              onClick={() => {
                this.setState({
                  confirmed: -1,
                });
              }}
            >
              {tooltipCancelText}
            </Button>
          </Popover>
        ) : (
          ''
        )}
        {getIcon('icon-trash')}
      </Button>
    );
  }
}

```