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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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>
)
}