semantic-ui-react#Modal JavaScript Examples

The following examples show how to use semantic-ui-react#Modal. 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: DisplayPictureModal.js    From profile-store with MIT License 6 votes vote down vote up
DisplayPictureModal = ({ imageLink, contactName, isDarkMode }) => {
  const [open, setOpen] = useState(false);

  return (
    <Modal
      closeIcon
      open={open}
      trigger={
        <Image
          avatar
          style={{ width: '49px', height: '49px' }}
          src={getCircularAvatar(imageLink)}
          className="avatar-image"
        />
      }
      onClose={() => setOpen(false)}
      onOpen={() => setOpen(true)}
      className={isDarkMode ? 'dark-mode-modal' : ''}
    >
      <Header icon="picture" content={`DP Preview: ${contactName}`} />
      <Modal.Content>
        <Image
          src={imageLink}
          size="large"
          rounded
          className="avatar-preview"
        />
      </Modal.Content>
    </Modal>
  );
}
Example #2
Source File: ShareModal.jsx    From covid-19-nsw with GNU General Public License v3.0 6 votes vote down vote up
ShareModal = ({ id }) => (
  <Modal
    closeIcon
    trigger={
      // eslint-disable-next-line
      <a
        className='ui button primary'
        href='#'
        onClick={e => e.preventDefault()}
      >
        Share
      </a>
    }
  >
    <Modal.Content>
      <p>Save image and share it at anywhere. #StaySafe</p>
      <img
        src={`./screenshot/${id}.png`}
        alt='covid 19 aus summary'
        width='100%'
      ></img>
    </Modal.Content>
  </Modal>
)
Example #3
Source File: DeleteRecordModal.js    From react-invenio-app-ils with MIT License 6 votes vote down vote up
render() {
    const { isLoading, error, trigger } = this.props;
    const { isModalOpen } = this.state;
    const TriggerButton = trigger || DeleteButton;
    return (
      <Modal
        trigger={<TriggerButton onClick={this.toggleModal} />}
        open={isModalOpen}
        onOpen={() => this.handleOpen()}
        onClose={this.toggleModal}
      >
        <Loader isLoading={isLoading}>
          <Error error={error}>
            <this.renderAll />
          </Error>
        </Loader>
      </Modal>
    );
  }
Example #4
Source File: PostModals.js    From social-network with MIT License 6 votes vote down vote up
export function ModalForLoggedIn({ postId }) {
  
    return (
      <Modal trigger={<Icon name="ellipsis horizontal" />}>
        <Modal.Content>
          <Modal.Description>
            <Button as={Link} to={`/p/${postId}`} size="big" fluid>
              Go to post
            </Button>
            <Button size="big" fluid>
              Copy link
            </Button>
          </Modal.Description>
        </Modal.Content>
      </Modal>
    );
  
}
Example #5
Source File: CardSelector.jsx    From yugioh_web with MIT License 6 votes vote down vote up
render() {
        const {show_card_selector, card_selector_info, environment} = this.props
        let card_selector_content = {}
        if (show_card_selector) {
            card_selector_content = this.get_card_selector_content(card_selector_info, environment)
        }
        const close_info = {
            tool_type: TOOL_TYPE.CARD_SELECTOR
        }
        return (
            <Modal
                open={show_card_selector}
            >
            <Modal.Header>{card_selector_content.title}</Modal.Header>
            <Modal.Content>
                {card_selector_content.content}
            </Modal.Content>
            <Modal.Actions>
            <Button negative onClick={() => this.props.dispatch_close_tool(close_info)}>
                Cancel
            </Button>
            <Button positive onClick={() => {
                const info = {
                    cardEnvs: Object.keys(this.state.selected_cards),
                    side: SIDE.MINE
                }
                card_selector_info.resolve(info)
                // close_card_selector()
                this.props.dispatch_close_tool(close_info)
            }} disabled={!this.state.executable}>
                Confirm
            </Button>
            </Modal.Actions>
        </Modal>
        )
    }
Example #6
Source File: ConfirmDeleteDialog.js    From vch-mri with MIT License 6 votes vote down vote up
render() {
        return (
            <Modal
                onSubmit={this.handleSubmit}
                style={{ maxWidth: 500 }}
                onClose={() => this.setState({open: false})}
                onOpen={() => this.setState({open: true})}
                open={this.state.open}
                trigger={
                    <Button size='tiny' secondary icon='delete' />
                }
            >
                <Modal.Header as='h2' color='blue' textAlign='center'>
                    Confirm Delete
                </Modal.Header>
                <Modal.Content>
                    <p>Are you sure you want to delete this?</p>
                </Modal.Content>
                <Modal.Actions>
                    <Button
                        color='black'
                        content='No'
                        onClick={() => this.setState({open: false})}
                    />
                    <Button
                        type='submit'
                        content='Yes'
                        color='blue'
                        onClick={() => this.handleDelete()}
                    />
                </Modal.Actions>
            </Modal>
        )
    }
Example #7
Source File: EditProfileModal.js    From social-network with MIT License 6 votes vote down vote up
render() {
    const { open } = this.state;

    return (
      <Modal
        open={open}
        onOpen={this.open}
        onClose={this.close}
        size="small"
        trigger={
          <Button size="big" content="Update profile picture" primary fluid />
        }
      >
        <Modal.Header>Select profile picture</Modal.Header>
        <Modal.Content>
          <ProfilePictureForm />
        </Modal.Content>
      </Modal>
    );
  }
Example #8
Source File: PatronCancelModal.js    From react-invenio-app-ils with MIT License 6 votes vote down vote up
render() {
    const {
      data,
      documentTitle,
      headerContent,
      headerIcon,
      onConfirm,
      onClose,
      isOpened,
    } = this.props;
    return isOpened ? (
      <Modal open={isOpened} onClose={onClose} closeIcon size="small">
        <Header icon={headerIcon} content={headerContent} />
        <Modal.Content>
          Your request for "<strong>{documentTitle}</strong>" will be cancelled.
        </Modal.Content>
        <Modal.Actions>
          <Button onClick={onClose}>Cancel</Button>
          <Button negative onClick={() => onConfirm(data)}>
            Yes, I am sure
          </Button>
        </Modal.Actions>
      </Modal>
    ) : null;
  }
Example #9
Source File: Metadata.js    From substrate-evm with The Unlicense 6 votes vote down vote up
export default function Metadata (props) {
  const { api } = useSubstrate();
  const [metadata, setMetadata] = useState({ data: null, version: null });

  useEffect(() => {
    const getMetadata = async () => {
      try {
        const data = await api.rpc.state.getMetadata();
        setMetadata({ data, version: data.version });
      } catch (e) {
        console.error(e);
      }
    };
    getMetadata();
  }, [api.rpc.state]);

  return (
    <Grid.Column>
      <Card>
        <Card.Content>
          <Card.Header>Metadata</Card.Header>
          <Card.Meta><span>v{metadata.version}</span></Card.Meta>
        </Card.Content>
        <Card.Content extra>
          <Modal trigger={<Button>Show Metadata</Button>}>
            <Modal.Header>Runtime Metadata</Modal.Header>
            <Modal.Content scrolling>
              <Modal.Description>
                <pre><code>{JSON.stringify(metadata.data, null, 2)}</code></pre>
              </Modal.Description>
            </Modal.Content>
          </Modal>
        </Card.Content>
      </Card>
    </Grid.Column>
  );
}
Example #10
Source File: DeletePostModal.js    From social-network with MIT License 6 votes vote down vote up
render() {
    const { open } = this.state;

    return (
      <Modal
        open={open}
        onOpen={this.open}
        onClose={this.close}
        size="tiny"
        trigger={
          <Button size="big" fluid color="red">
            Delete
          </Button>
        }
      >
        <Modal.Header>Delete Your Post</Modal.Header>
        <Modal.Content>
          <p>Are you sure you want to delete your Post</p>
        </Modal.Content>
        <Modal.Actions>
          <Button negative onClick={this.close}>
            No
          </Button>
          <Button
            positive
            icon="checkmark"
            labelPosition="right"
            content="Yes"
            onClick={this.deletePost}
          />
        </Modal.Actions>
      </Modal>
    );
  }
Example #11
Source File: RelationModal.js    From react-invenio-app-ils with MIT License 5 votes vote down vote up
render() {
    const {
      children,
      disabled,
      triggerButtonContent,
      disabledContent,
      modalHeader,
      isLoading: externalLoading,
      selections,
      extraRelationField,
    } = this.props;
    const { visible, isLoading } = this.state;
    const hasSelectedRelations = !_isEmpty(selections);
    const extraFieldIsValid =
      _isEmpty(extraRelationField) ||
      _get(extraRelationField, 'options.isValid', true);
    const isSelectionValid = hasSelectedRelations && extraFieldIsValid;

    return (
      <Modal
        id="es-selector-modal"
        size="large"
        closeIcon
        trigger={
          <div>
            <Button
              disabled={disabled}
              className="edit-related"
              icon
              labelPosition="left"
              positive
              onClick={this.toggle}
            >
              <Icon name="add" />
              {triggerButtonContent}
            </Button>
            {disabled && disabledContent && (
              <Popup
                content={disabledContent}
                trigger={<Icon size="large" name="info circle" color="grey" />}
              />
            )}
          </div>
        }
        open={visible}
        centered
        onClose={this.toggle}
      >
        <Modal.Header>{modalHeader}</Modal.Header>

        {children}

        <Modal.Actions>
          <Button onClick={() => this.toggle()}>Cancel</Button>
          <Button
            positive
            loading={isLoading}
            disabled={!isSelectionValid || isLoading || externalLoading}
            icon="checkmark"
            labelPosition="left"
            content="Confirm and save"
            onClick={this.onSave}
          />
        </Modal.Actions>
      </Modal>
    );
  }
Example #12
Source File: LikePost.js    From social-network with MIT License 5 votes vote down vote up
LikePost = ({
  dispatch,
  post: { postId, likes, authorId },
  postLikes,
  postLikeList
}) => {
  const handlePostLike = () => {
    dispatch(postActions.likePost(postId, authorId, postLikes));
  };

  const getPostLikes = () => {
    dispatch(postActions.getPostLikes(postId));
  };

  const handleClose = () => {
    dispatch({ type: "CLEAR_POST_LIKES" });
  };

  const list = postLikeList.length
    ? postLikeList.map(({ author }) => (
        <FollowingFollowerList
          key={author._id}
          user={author}
        ></FollowingFollowerList>
      ))
    : null;

  return (
    <Fragment>
      {postLikes.some(e => e === postId) ? (
        <Icon
          onClick={handlePostLike}
          style={{ color: "#ed4956", cursor: "pointer" }}
          name="heart"
          className="heart-icon"
        />
      ) : (
        <Icon
          onClick={handlePostLike}
          style={{ cursor: "pointer" }}
          name="heart outline"
          className="heart-icon"
        />
      )}

      <Modal
        trigger={
          <span style={{ cursor: "pointer" }} onClick={getPostLikes}>
            {likes}
          </span>
        }
        onClose={handleClose}
      >
        <Modal.Header>Likes</Modal.Header>
        <Modal.Content scrolling>
          <Modal.Description>
            <List verticalAlign="middle" size="huge">
              {list}
            </List>
          </Modal.Description>
        </Modal.Content>
      </Modal>
    </Fragment>
  );
}
Example #13
Source File: BorrowingRequestPatronLoan.js    From react-invenio-app-ils with MIT License 5 votes vote down vote up
render() {
    const { brwReq, isLoading, hasError, error } = this.props;
    const { modalOpen } = this.state;
    const max = new DateTime(
      DateTime.local().plus({
        days: invenioConfig.ILL_BORROWING_REQUESTS.loanMaxDuration,
      })
    );
    return (
      <>
        <CreateLoanButton
          brwReq={brwReq}
          isLoading={isLoading}
          onNewLoanClicked={this.handleOpenModal}
        />

        {hasError && (
          <Message
            error
            header="Something went wrong"
            content={this.transformError(error)}
          />
        )}

        <Modal open={modalOpen}>
          <Modal.Header>Create a new loan</Modal.Header>
          <Modal.Content>
            Checkout the borrowed item for the patron {brwReq.patron.name}.
            Select the start and the end dates:
            <Divider hidden />
            <Form>
              <Form.Group>
                <Form.Field inline required>
                  <label>Start date</label>
                  <LocationDatePicker
                    locationPid={brwReq.patron.location_pid}
                    defaultValue={this.today}
                    minDate={this.today}
                    maxDate={toShortDate(max)}
                    placeholder="Start date"
                    handleDateChange={(value) =>
                      this.handleStartDateChange(value)
                    }
                  />
                </Form.Field>
                <Form.Field inline required>
                  <label>End date</label>
                  <LocationDatePicker
                    locationPid={brwReq.patron.location_pid}
                    minDate={this.today}
                    maxDate={toShortDate(max)}
                    placeholder="End date"
                    handleDateChange={(value) =>
                      this.handleEndDateChange(value)
                    }
                  />
                </Form.Field>
              </Form.Group>
              <Divider hidden />
              <i>
                The loan start date should not be after the borrowing request
                end date.
              </i>
            </Form>
          </Modal.Content>
          <Modal.Actions key="modalActions">
            <Button onClick={this.handleCloseModal}>Cancel</Button>
            <Button
              positive
              disabled={!this.isSelectionValid()}
              icon="checkmark"
              labelPosition="left"
              content="Create"
              onClick={this.handleCreateLoan}
            />
          </Modal.Actions>
        </Modal>
      </>
    );
  }
Example #14
Source File: AnsweringModal.js    From social-network with MIT License 5 votes vote down vote up
render() {
    const { answeringModal } = this.props;
    const { hasMedia } = this.state;
    return (
      <Fragment>
        <Modal open={answeringModal.isOpen}>
          <Modal.Content image>
            {!hasMedia ? (
              <Image
                wrapped
                size="medium"
                src={
                  "http://localhost:5000/images/profile-picture/" +
                  answeringModal.caller.profilePicture
                }
              />
            ) : null}
            <Modal.Description>
              <video
                style={{
                  width: 300,
                  height: "auto"
                }}
                ref={ref => {
                  this.myVideo = ref;
                }}
              ></video>
              <video
                style={{
                  width: 300,
                  height: "auto"
                }}
                ref={ref => {
                  this.userVideo = ref;
                }}
              ></video>
            </Modal.Description>
          </Modal.Content>
          <Modal.Actions>
            <Button negative onClick={this.handleClose}>
              Decline
            </Button>
            <Button onClick={this.handeAnswer} positive content="Answer" />
          </Modal.Actions>
        </Modal>
      </Fragment>
    );
  }
Example #15
Source File: ExtendModal.js    From react-invenio-app-ils with MIT License 5 votes vote down vote up
render() {
    const { pid, isLoading } = this.props;
    const { open, overbooked } = this.state;
    return (
      <>
        {overbooked ? (
          <Modal
            size="small"
            trigger={
              <Button
                primary
                fluid
                content="Extend"
                onClick={this.show}
                loading={isLoading}
                disabled={isLoading}
              />
            }
            open={open}
            onClose={this.hide}
          >
            <Header content={`Extend Loan #${pid}`} />
            <Modal.Content>
              <Grid>
                <Grid.Column width={1}>
                  <Icon name="warning sign" color="red" size="large" />
                </Grid.Column>
                <Grid.Column width={15}>
                  <p>
                    {`Are you sure you want to extend the loan #${pid}?
            This literature is overbooked.`}
                  </p>
                </Grid.Column>
              </Grid>
            </Modal.Content>
            <Modal.Actions>
              <Button secondary onClick={this.hide}>
                Cancel
              </Button>
              <Button primary onClick={this.extend}>
                Extend
              </Button>
            </Modal.Actions>
          </Modal>
        ) : (
          <Button
            size="small"
            fluid
            primary
            onClick={this.extend}
            loading={isLoading}
            disabled={isLoading}
          >
            Extend
          </Button>
        )}
      </>
    );
  }
Example #16
Source File: CommunitySelectionModal.js    From react-invenio-deposit with MIT License 5 votes vote down vote up
render() {
    const { modalOpen, localChosenCommunity } = this.state;
    const { chosenCommunity, trigger } = this.props;

    return (
      <CommunityContext.Provider value={this.contextValue}>
        <Modal
          role="dialog"
          aria-labelledby="community-modal-header"
          id="community-selection-modal"
          className="m-0"
          closeIcon={true}
          closeOnDimmerClick={false}
          open={modalOpen}
          onClose={() => this.setState({ modalOpen: false })}
          onOpen={() =>
            this.setState({
              modalOpen: true,
              localChosenCommunity: chosenCommunity,
            })
          }
          trigger={
            React.cloneElement(trigger, {
              'aria-haspopup': "dialog",
              'aria-expanded': modalOpen
            })
          }
        >
          <Modal.Header>
            <Header as="h2" id="community-modal-header">
              {i18next.t('Select a community')}
            </Header>
          </Modal.Header>

          <Modal.Content>
            <CommunitySelectionSearch chosenCommunity={localChosenCommunity} />
          </Modal.Content>
        </Modal>
      </CommunityContext.Provider>
    );
  }
Example #17
Source File: LikeComment.js    From social-network with MIT License 5 votes vote down vote up
LikeComment = ({
  dispatch,
  comment: { commentId, likes, authorId },
  commentLikes,
  post: { postId },
  commentLikeList
}) => {
  const handleCommentLike = () => {
    dispatch(
      commentActions.likeComment({
        commentId,
        authorId,
        postId,
        commentLikes
      })
    );
  };
  const getCommentLikes = () => {
    dispatch(commentActions.getCommentLikes(commentId));
  };

  const handleClose = () => {
    dispatch({ type: "CLEAR_COMMENT_LIKES" });
  };

  const list = commentLikeList.length
    ? commentLikeList.map(({ author }) => (
        <FollowingFollowerList
          key={author._id}
          user={author}
        ></FollowingFollowerList>
      ))
    : null;

  return (
    <Fragment>
      <Modal
        trigger={
          <span
            style={{ cursor: "pointer", marginRight: "3px" }}
            onClick={getCommentLikes}
          >
            {likes}
          </span>
        }
        onClose={handleClose}
      >
        <Modal.Header>Likes</Modal.Header>
        <Modal.Content scrolling>
          <Modal.Description>
            <List verticalAlign="middle" size="huge">
              {list}
            </List>
          </Modal.Description>
        </Modal.Content>
      </Modal>
      <Comment.Action onClick={handleCommentLike}>
        {commentLikes.some(e => e === commentId) ? (
          <Icon style={{ color: "#ed4956" }} name="heart" />
        ) : (
          <Icon name="heart" />
        )}
        Like
      </Comment.Action>
    </Fragment>
  );
}
Example #18
Source File: DeleteButton.js    From react-invenio-deposit with MIT License 5 votes vote down vote up
render() {
    const {
      draftExists,
      isPublished,
      isVersion,
      actionState,
      formik,
      ...ui // only has ActionButton props
    } = this.props;

    const { isSubmitting } = formik;

    const uiProps = _omit(ui, ['dispatch']);

    let actionLbl = '';
    if (!isPublished) {
      actionLbl = isVersion ? DISCARD_VERSION_LBL : DELETE_LBL;
    } else {
      actionLbl = DISCARD_CHANGES_LBL;
    }
    const color = isPublished ? 'warning' : 'negative' ;
    const capitalizedActionLbl = toCapitalCase(actionLbl);

    return (
      <>
        <Button
          disabled={!draftExists || isSubmitting}
          onClick={this.openConfirmModal}
          className={color}
          icon
          loading={isSubmitting && actionState === DRAFT_DELETE_STARTED}
          labelPosition="left"
          {...uiProps}
          content={capitalizedActionLbl}
        />

        <Modal
          open={this.state.modalOpen}
          onClose={this.closeConfirmModal}
          size="tiny"
        >
          <Modal.Content>
            <DialogText actionLbl={actionLbl} />
          </Modal.Content>
          <Modal.Actions>
            <Button onClick={this.closeConfirmModal} floated="left">
              {i18next.t('Cancel')}
            </Button>
            <Button
              {...color}
              onClick={this.handleDelete}
              loading={isSubmitting && actionState === DRAFT_DELETE_STARTED}
              icon="trash alternate outline"
              content={capitalizedActionLbl}
            />
          </Modal.Actions>
        </Modal>
      </>
    );
  }
Example #19
Source File: LikeCommetReply.js    From social-network with MIT License 5 votes vote down vote up
LikeCommentReply = ({
  dispatch,
  comment: { commentId, likes, commentAt, authorId },
  post: { postId },
  commentReplyLikes,
  commentLikeList
}) => {
  const handleCommentLike = () => {
    dispatch(
      commentActions.likeCommentReply({
        commentId,
        commentAt,
        authorId,
        postId,
        commentReplyLikes
      })
    );
  };

  const getCommentLikes = () => {
    dispatch(commentActions.getCommentReplyLikes(commentId));
  };

  const handleClose = () => {
    dispatch({ type: "CLEAR_COMMENT_REPLY_LIKES" });
  };

  const list = commentLikeList.length
    ? commentLikeList.map(({ author }) => (
        <FollowingFollowerList
          key={author._id}
          user={author}
        ></FollowingFollowerList>
      ))
    : null;

  return (
    <Fragment>
      <Modal
        trigger={
          <span
            style={{ cursor: "pointer", marginRight: "3px" }}
            onClick={getCommentLikes}
          >
            {likes}
          </span>
        }
        onClose={handleClose}
      >
        <Modal.Header>Likes</Modal.Header>
        <Modal.Content scrolling>
          <Modal.Description>
            <List verticalAlign="middle" size="huge">
              {list}
            </List>
          </Modal.Description>
        </Modal.Content>
      </Modal>
      <Comment.Action onClick={handleCommentLike}>
        {commentReplyLikes.some(e => e === commentId) ? (
          <Icon style={{ color: "#ed4956" }} name="heart" />
        ) : (
          <Icon name="heart" />
        )}
        Like
      </Comment.Action>
    </Fragment>
  );
}
Example #20
Source File: PublishButton.js    From react-invenio-deposit with MIT License 5 votes vote down vote up
render() {
    const {
      actionState,
      publishClick,
      numberOfFiles,
      buttonLabel,
      publishWithoutCommunity,
      formik,
      ...ui
    } = this.props;
    const { isConfirmModalOpen } = this.state;
    const { values, isSubmitting, handleSubmit } = formik;

    const uiProps = _omit(ui, ['dispatch']);

    return (
      <>
        <Button
          disabled={this.isDisabled(values, isSubmitting, numberOfFiles)}
          name="publish"
          onClick={this.openConfirmModal}
          positive
          icon="upload"
          loading={isSubmitting && actionState === DRAFT_PUBLISH_STARTED}
          labelPosition="left"
          content={buttonLabel}
          {...uiProps}
        />
        {isConfirmModalOpen && (
          <Modal
            open={isConfirmModalOpen}
            onClose={this.closeConfirmModal}
            size="small"
            closeIcon={true}
            closeOnDimmerClick={false}
          >
            <Modal.Header>
              {i18next.t('Are you sure you want to publish this record?')}
            </Modal.Header>
            {/* the modal text should only ever come from backend configuration */}
            <Modal.Content>
              <Message visible warning>
                <p>
                  <Icon name="warning sign" />{' '}
                  {i18next.t(
                    "Once the record is published you will no longer be able to change the files in the upload! However, you will still be able to update the record's metadata later."
                  )}
                </p>
              </Message>
            </Modal.Content>
            <Modal.Actions>
              <Button onClick={this.closeConfirmModal} floated="left">
                {i18next.t('Cancel')}
              </Button>
              <Button
                onClick={(event) =>
                  this.handlePublish(
                    event,
                    handleSubmit,
                    publishWithoutCommunity
                  )
                }
                positive
                content={buttonLabel}
              />
            </Modal.Actions>
          </Modal>
        )}
      </>
    );
  }
Example #21
Source File: CallingModal.js    From social-network with MIT License 5 votes vote down vote up
render() {
    const { callingModal } = this.props;

    return (
      <Modal
        open={callingModal}
        trigger={
          <i
            onClick={this.handleOpen}
            className="fa fa-video-camera"
            aria-hidden="true"
          ></i>
        }
      >
        <Modal.Content>
          <video
            style={{
              width: 300,
              height: "auto"
            }}
            ref={ref => {
              this.myVideo = ref;
            }}
          ></video>
          <video
            style={{
              width: 300,
              height: "auto"
            }}
            ref={ref => {
              this.userVideo = ref;
            }}
          ></video>
        </Modal.Content>
        <Modal.Actions>
          <Button negative onClick={this.handleClose}>
            End call
          </Button>
        </Modal.Actions>
      </Modal>
    );
  }
Example #22
Source File: ESSelectorLoanRequest.js    From react-invenio-app-ils with MIT License 5 votes vote down vote up
render() {
    const { title, content, selectorComponent, size, trigger } = this.props;
    const { visible, missingPatron, selections } = this.state;
    const modalTrigger = React.cloneElement(trigger, {
      onClick: this.toggle,
    });

    const Selector = selectorComponent;

    return (
      <Modal
        id="es-selector-modal"
        open={visible}
        trigger={modalTrigger}
        size={size}
        centered={false}
        onClose={this.toggle}
      >
        <Modal.Header>{title}</Modal.Header>
        <Modal.Content>
          <p>{content}</p>
          <PatronSearchInputContext.Provider
            value={{ patronSelectionError: missingPatron }}
          >
            <Selector
              onSelectionsUpdate={this.onSelectionsUpdate}
              {...this.props}
              focus
            />
          </PatronSearchInputContext.Provider>
        </Modal.Content>
        <Form>
          <Segment.Group>
            <Segment>
              <Header as="h3" content="Request loan" />
            </Segment>
            <Segment>
              {this.renderDeliveryMethodSelector()}
              {this.renderOptionalRequestExpirationDate()}
            </Segment>
            <Segment textAlign="right">
              <Modal.Actions>
                <Button onClick={this.toggle}>Cancel</Button>
                <Button
                  positive
                  icon="check"
                  labelPosition="left"
                  content="Request"
                  onClick={this.save}
                  disabled={_isEmpty(selections)}
                />
              </Modal.Actions>
            </Segment>
          </Segment.Group>
        </Form>
      </Modal>
    );
  }
Example #23
Source File: AllScreenView.js    From allscreens with GNU General Public License v3.0 5 votes vote down vote up
render() {
        let imageStyle = {
            maxWidth: "80%",
            maxHeight: "80%"
        };
        let classrooms = this.state.classrooms.map(c => { return { key: c.name, value: c.name, text: c.name } });
        classrooms = classrooms.sort((a, b) => (a.key > b.key) ? 1 : -1);
        return (
            <Segment>
                <div className="table">
                     <Container fluid>
                        <p>You need to first select your classroom, then click on Start Auto-refresh button.
                        Stop auto refresh if you want to save your bandwidth and computer resources!</p>
                        <Form>
                            <Form.Group widths='equal'>
                                <Form.Select placeholder='Select your classroom' options={classrooms} onChange={(event)=>this.onClassroomSelectChange(event)}/>
                                <Form.Button onClick={() => this.generateScreenSharingTickets()}>Generate 3 hours Screen Sharing Tickets.</Form.Button>
                                <Form.Button disabled = {this.state.referesh} onClick={() => this.toggleRefresh()}>Start Auto-refresh.</Form.Button>
                                <Form.Button disabled = {!this.state.referesh} onClick={() => this.toggleRefresh()}>Stop Auto-refresh.</Form.Button>
                                <Form.Input icon='search' placeholder='Search...' onChange={(event)=>this.handleSearch(event)}/>
                                <Form.Button onClick={() => this.clearAllScreenshots()}>Delete cached screenshots.</Form.Button>
                            </Form.Group>
                        </Form>
                     </Container>
                    <S3Album 
                        ref={this.s3Album}
                        level="public"
                        select 
                        onSelect={(e)=>this.handleSelect(e)}
                        path={'resized/'} 
                        key={this.state.count}
                        filter={(item)=>this.filter(item)}
                        sort={(item)=>this.sort(item)}
                    />
                    <Modal
                        open={this.state.modalOpen}
                        onClose={this.handleClose}
                        closeIcon
                        size='fullscreen'
                    >
                        <Header icon='browser' content={this.state.email} />
                        <Modal.Content>
                            <S3Image 
                                level="public" 
                                imgKey={this.state.fullSizeKey} 
                                style={imageStyle}
                            />
                        </Modal.Content>
                        <Modal.Actions>
                          <Button color='green' onClick={this.handleClose} inverted>
                            <Icon name='checkmark' /> Close it
                          </Button>
                        </Modal.Actions>
                    </Modal>
               </div>
           </Segment>
        );
    }
Example #24
Source File: ViewTeam.jsx    From HACC-Hui with MIT License 5 votes vote down vote up
ViewTeam = ({ isCompliant, participants, teamChallenges, team, teamMembers }) => {
  const allParticipants = participants;
  const captain = allParticipants.filter(p => team.owner === p._id)[0];
  const challenge = teamChallenges[0];

  function changeBackground(e) {
    e.currentTarget.style.backgroundColor = '#fafafa';
    e.currentTarget.style.cursor = 'pointer';
  }

  function onLeave(e) {
    e.currentTarget.style.backgroundColor = 'transparent';
  }

  // console.log(team, captain, teamChallenges);
  return (
      <Item onMouseEnter={changeBackground} onMouseLeave={onLeave}
            style={{ padding: '1.0rem 1.5rem 1.0rem 1.5rem' }}>
        <Modal closeIcon trigger={
          <Item.Content>
            <Item.Header>
              {team.name} {isCompliant ? <Icon className="green check"/> : <Icon name="exclamation circle"
                                                                                 color="red"/> }
            </Item.Header>
            <Item.Description>
              <strong>Captain:</strong> {captain ? `${captain.firstName} ${captain.lastName}: ${captain.username}   `
                : '   '},
              <strong>Challenge:</strong> {challenge.title}
            </Item.Description>
          </Item.Content>
            }>
          <Grid padded>
            <Grid.Row>
              <Grid.Column width={4}>
                <Header>{team.name}</Header>
                <List>
                  {teamChallenges.map((c) => <List.Item key={c._id}>{c.title}</List.Item>)}
                </List>
                <Header as="h4">Captain</Header>
                {captain ? `${captain.firstName} ${captain.lastName}: ${captain.username}` : ''}
              </Grid.Column>
              <Grid.Column width={5}>
                <Header>Members</Header>
                <List bulleted>
                  {teamMembers.map((t) => <List.Item key={t}>{t}</List.Item>)}
                </List>
              </Grid.Column>
              <Grid.Column width={5}>
                {isCompliant ? <Header>Team is Compliant</Header> : <Header>
                  <mark>Team is not Compliant</mark>
                </Header>}
                <Header>Devpost Page</Header>
                {team.devPostPage}
                <Header>Github Repo</Header>
                {team.gitHubRepo}
              </Grid.Column>
              <Grid.Column width={2}>
                {/* eslint-disable-next-line max-len */}
                <Button><Link to={`/admin-edit-team/${team._id}`}
                              style={{ color: 'rgba(0, 0, 0, 0.6)' }}>Edit</Link></Button>
              </Grid.Column>
            </Grid.Row>
          </Grid>
        </Modal>
      </Item>
  );
}
Example #25
Source File: DisclaimerModal.jsx    From covid-19-nsw with GNU General Public License v3.0 5 votes vote down vote up
DisclaimerModal = () => (
  <Modal closeIcon
    trigger={
      // eslint-disable-next-line
      <a href='#' onClick={e => e.preventDefault()}>
        Disclaimer
      </a>
    }
  >
    <Modal.Header>Disclaimer</Modal.Header>
    <Modal.Content>
      <Modal.Description>
      <List bulleted>
          <List.Item>
            The views and options expressed in this blog are those of the
            authors and do not necessarily reflect the official policy or
            position of any other agency, organization, employer or company
          </List.Item>
          <List.Item>
            Authors are not responsible for any errors or omissions, or for the
            results obtained from the use of this information. All information
            in this site is provided "as is", with no guarantee of completeness,
            accuracy, timeliness or of the results obtained from the use of this
            information
          </List.Item>
          <List.Item>
            We do not make any warranties about the completeness, reliability
            and accuracy of these information. None of the authors,
            contributors, adminstrators or anyone else connected with this
            website, in anyway whatsoever, can be responsible for your use of
            the information contained in or linked from these web pages. Any
            action you take upon the information on this website is strictly at
            your own risk. and we will not be liable for any losses and damages
            in connection with the use of our website.
          </List.Item>
        </List>
      </Modal.Description>
    </Modal.Content>
  </Modal>
)
Example #26
Source File: AddConjunctionForm.js    From vch-mri with MIT License 5 votes vote down vote up
render() {
        return (
            <Modal
                as={Form}
                onSubmit={this.handleSubmit}
                style={{ maxWidth: 500 }}
                onClose={() => this.setState(initialState)}
                onOpen={() => this.setState({open: true})}
                open={this.state.open}
                trigger={
                    <Button
                        floated='right'
                        icon
                        labelPosition='left'
                        primary
                        size='small'
                    >
                        <Icon name='add circle' /> Add Abbreviation
                    </Button>
                }
            >
                <Header as='h2' color='blue' textAlign='center'>
                    Add a new Medical Abbreviation
                </Header>
                <Modal.Content>
                    <Form.Field
                        fluid
                        control={Input}
                        name='abbrev'
                        label='Medical Abbreviation'
                        value={this.state.abbrev}
                        onChange={this.handleChange}
                    />
                    <Form.Field
                        fluid
                        control={Input}
                        name='meaning'
                        label='Meaning'
                        value={this.state.meaning}
                        onChange={this.handleChange}
                    />
                </Modal.Content>
                <Modal.Actions>
                    <Button
                        color='black'
                        content='Cancel'
                        onClick={() => this.setState(initialState)}
                    />
                    <Button
                        type='submit'
                        content="Add Word Weight"
                        color='blue'
                        disabled={!this.state.abbrev || !this.state.meaning}
                    />
                </Modal.Actions>
            </Modal>
        )
    }
Example #27
Source File: ImageUpload.jsx    From react-chatengine-demo with MIT License 5 votes vote down vote up
ImageUpload = ({
  file,
  close,
  onSubmit,
  crop = false,
  header = 'Send This Image?',
}) => {
  const [imageSrc, setImageSrc] = useState('');
  const cropRef = useRef();

  // Use the File Reader API to
  // read the file and set the source
  useEffect(() => {
    const fr = new FileReader();
    fr.onload = () => setImageSrc(fr.result);
    fr.readAsDataURL(file);
  }, [file]);

  return (
    <Modal dimmer="blurring" open={true}>
      <Modal.Header>{header}</Modal.Header>

      <Modal.Content image>
        {crop ? (
          <AvatarEditor
            ref={cropRef}
            width={200}
            height={200}
            border={50}
            image={imageSrc}
          />
        ) : (
          <Image size="medium" src={imageSrc} alt="preview" />
        )}
      </Modal.Content>

      <Modal.Actions>
        <div className="image-upload-actions">
          <button className="cancel" onClick={close}>
            Cancel
          </button>
          <button
            className="submit"
            onClick={() => {
              if (crop && cropRef) {
                const canvas = cropRef.current
                  .getImageScaledToCanvas()
                  .toDataURL();
                fetch(canvas)
                  .then(res => res.blob())
                  .then(blob => onSubmit(blob));
              } else {
                onSubmit();
              }
            }}
          >
            Upload
          </button>
        </div>
      </Modal.Actions>
    </Modal>
  );
}
Example #28
Source File: LocationFilter.js    From app-personium-trails with Apache License 2.0 5 votes vote down vote up
export function LocationFilter({ year, month, day }) {
  const [modalOpen, setModalOpen] = useState(false);
  const handleOpen = useCallback(() => setModalOpen(true), [setModalOpen]);
  const handleClose = useCallback(() => setModalOpen(false), [setModalOpen]);
  const history = useHistory();

  const handleDayClick = useCallback(
    date => {
      history.push(
        `/locations/${date.getFullYear()}-${date.getMonth() +
          1}-${date.getDate()}`
      );
      setModalOpen(false);
    },
    [history, setModalOpen]
  );

  const handleNextClick = useCallback(() => {
    const date = new Date(year, month - 1, day);
    history.push(getDateString(addDays(date, 1)));
  }, [year, month, day, history]);

  const handlePrevClick = useCallback(() => {
    const date = new Date(year, month - 1, day);
    history.push(getDateString(addDays(date, -1)));
  }, [year, month, day, history]);

  return (
    <>
      <Modal size="small" onClose={handleClose} open={modalOpen} basic>
        <Card centered raised>
          <Calendar
            value={new Date(year, month - 1, day)}
            onClickDay={handleDayClick}
          />
        </Card>
      </Modal>
      <Grid>
        <Grid.Column width={3}>
          <Button
            color="teal"
            icon="chevron left"
            fluid
            onClick={handlePrevClick}
          />
        </Grid.Column>
        <Grid.Column width={10}>
          <Button basic color="teal" onClick={handleOpen} fluid>
            <Icon name="calendar" />
            {new Date(
              Number(year),
              Number(month - 1),
              Number(day)
            ).toLocaleDateString()}
          </Button>
        </Grid.Column>
        <Grid.Column width={3}>
          <Button
            color="teal"
            icon="chevron right"
            fluid
            onClick={handleNextClick}
          />
        </Grid.Column>
      </Grid>
      <Divider />
    </>
  );
}
Example #29
Source File: AddSpecialtyExamForm.js    From vch-mri with MIT License 5 votes vote down vote up
render() {
        return (
            <Modal
                as={Form}
                onSubmit={this.handleSubmit}
                style={{ maxWidth: 500 }}
                onClose={() => this.setState(initialState)}
                onOpen={() => this.setState({open: true})}
                open={this.state.open}
                trigger={
                    <Button
                        floated='right'
                        icon
                        labelPosition='left'
                        primary
                        size='small'
                    >
                        <Icon name='add circle' /> Add Exam
                    </Button>
                }
            >
                <Header as='h2' color='blue' textAlign='center'>
                    Add a Specialty Exam for Result Tags
                </Header>
                <Modal.Content>
                    <Form.Field
                        fluid
                        control={Input}
                        name='exam'
                        label='Specialty Exam'
                        value={this.state.exam}
                        onChange={this.handleChange}
                    />
                </Modal.Content>
                <Modal.Actions>
                    <Button
                        color='black'
                        content='Cancel'
                        onClick={() => this.setState(initialState)}
                    />
                    <Button
                        type='submit'
                        content="Add Specialty Exam"
                        color='blue'
                        disabled={!this.state.exam}
                    />
                </Modal.Actions>
            </Modal>
        )
    }