semantic-ui-react#Confirm JavaScript Examples

The following examples show how to use semantic-ui-react#Confirm. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: DeclineRequest.js    From react-invenio-app-ils with MIT License 6 votes vote down vote up 
render() {
    const { disabled } = this.props;
    const { header, confirmModalOpened, type } = this.state;
    return (
      <Dropdown
        button
        fluid
        labeled
        disabled={disabled}
        text="Decline request"
        icon="cancel"
        className="icon negative"
      >
        <Dropdown.Menu>
          <Confirm
            confirmButton="Decline request"
            content="Are you sure you want to decline this request?"
            header={`Decline: ${header}`}
            open={confirmModalOpened}
            onCancel={this.onCancel}
            onConfirm={() => this.onConfirm(type)}
          />
          <Dropdown.Header content="Specify a reason" />
          {this.renderOptions()}
        </Dropdown.Menu>
      </Dropdown>
    );
  }
Example #2
Source File: DeleteButton.js    From 0.4.1-Quarantime with MIT License 5 votes vote down vote up 
function DeleteButton({ postId, commentId, callback }) {
  const [confirmOpen, setConfirmOpen] = useState(false);

  const mutation = commentId ? DELETE_COMMENT_MUTATION : DELETE_POST_MUTATION;

  const [deletePostOrMutation] = useMutation(mutation, {
    update(proxy) {
      setConfirmOpen(false);
      if (!commentId) {
        const data = proxy.readQuery({
          query: FETCH_POSTS_QUERY
        });
        data.getPosts = data.getPosts.filter((p) => p.id !== postId);
        proxy.writeQuery({ query: FETCH_POSTS_QUERY, data });
      }
      if (callback) callback();
    },
    variables: {
      postId,
      commentId
    }
  });
  return (
    <>
      <MyPopup content={commentId ? 'Delete comment' : 'Delete post'}>
        <Button
          as="div"
          color="red"
          floated="right"
          onClick={() => setConfirmOpen(true)}
        >
          <Icon name="trash" style={{ margin: 0 }} />
        </Button>
      </MyPopup>
      <Confirm
        open={confirmOpen}
        onCancel={() => setConfirmOpen(false)}
        onConfirm={deletePostOrMutation}
      />
    </>
  );
}
Example #3
Source File: RJSForm.js    From react-invenio-app-ils with MIT License 5 votes vote down vote up 
render() {
    const { schema, uiSchema, formData } = this.props;
    const { discardConfirmOpen, errors, isLoading, submittedFormData } =
      this.state;
    const formReturnedErrors = !_isEmpty(errors);

    return (
      <Form
        schema={schema}
        uiSchema={uiSchema}
        formData={formReturnedErrors ? submittedFormData : formData}
        widgets={customWidgets}
        fields={customFields}
        transformErrors={(errors) => {
          // scroll to top to see errors triggered by client validation
          errors.length && window.scrollTo(0, 0);
          return errors;
        }}
        extraErrors={errors}
        ObjectFieldTemplate={ObjectFieldTemplateWrapperGrid}
        FieldTemplate={FieldTemplateWithWrapper}
        ArrayFieldTemplate={ArrayFieldTemplateWithWrapper}
        disabled={isLoading}
        onSubmit={this.onSubmit}
      >
        <Container textAlign="right">
          <Divider hidden />
          <Confirm
            content="Are you sure you want to discard any change?"
            open={discardConfirmOpen}
            cancelButton="No, keep editing"
            confirmButton="Yes, discard changes"
            onCancel={() => this.setState({ discardConfirmOpen: false })}
            onConfirm={() => goBack()}
          />
          <Button
            type="button"
            content="Discard"
            disabled={isLoading}
            onClick={() => this.setState({ discardConfirmOpen: true })}
          />
          <Button
            positive
            icon="check"
            labelPosition="left"
            name="submit"
            type="submit"
            content="Submit"
            loading={isLoading}
          />
        </Container>
      </Form>
    );
  }