semantic-ui-react#Loader TypeScript Examples
The following examples show how to use
semantic-ui-react#Loader.
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: MultiStreamModal.tsx From watchparty with MIT License | 6 votes |
|
MultiStreamModal = ({
streams,
setMedia,
resetMultiSelect,
}: {
streams: any[];
setMedia: Function;
resetMultiSelect: Function;
}) => (
<Modal inverted basic open closeIcon onClose={resetMultiSelect as any}>
<Modal.Header>Select a file</Modal.Header>
<Modal.Content>
{streams.length === 0 && <Loader />}
{streams && (
<List inverted>
{streams.map((file: any) => (
<List.Item>
<List.Icon name="file" />
<List.Content>
<List.Header
as="a"
onClick={() => {
setMedia(null, { value: file.url });
resetMultiSelect();
}}
>
{file.name}
</List.Header>
<List.Description>
{file.length.toLocaleString()} bytes
</List.Description>
</List.Content>
</List.Item>
))}
</List>
)}
</Modal.Content>
</Modal>
)
Example #2
| Source File: CommunityMap.tsx From communitymap-ui with Apache License 2.0 | 6 votes |
|
ExpandedObjectView: React.FC<{
objectId: string;
renderObject?: RenderObjectCallback;
}> = ({ objectId, renderObject }) => {
const user = useAuth() || null;
const object = useLoadSingleObject(objectId, user);
if (object === undefined) return <Loader active />;
if (object === null) return <div>Object not found :(</div>;
const render: RenderObjectCallback = (props) => {
const rend = renderObject || defaultObjectRender;
const itemView = rend(props);
if (!itemView) return null;
if (itemView === true) return defaultObjectRender(props);
return itemView;
};
return (
<>
{render({
item: object,
expanded: true,
currentUser: user,
})}
</>
);
}
Example #3
| Source File: UserPage.tsx From communitymap-ui with Apache License 2.0 | 6 votes |
|
UserPage = () => {
const me = useAuth();
const { userId } = useParams();
const userInfo = useUserPublicInfo(userId || '', true);
if (userInfo === undefined) return <Loader active />;
return (
<div style={{ lineHeight: '2em' }}>
{userInfo === null ? (
<div>The user has't filled his/her details yet</div>
) : (
<>
<h3>Name/Nickname: {userInfo?.name}</h3>
<div>Registered on {userInfo.created}</div>
<div>Last updated on {userInfo.updated}</div>
</>
)}
<div style={{ marginTop: 30 }}>
{!!me && !!userId && me.uid !== userId && (
<Button
basic
color="blue"
icon="send"
content="Direct message"
as={Link}
to={`/direct-messages/${directMessageId(me.uid, userId)}`}
/>
)}
</div>
</div>
);
}
Example #4
| Source File: lazyimage.tsx From website with MIT License | 6 votes |
|
render() {
const { size } = this.props
if (!this.state.show) {
return (
<Visibility as="span" fireOnMount onTopVisible={this.showImage}>
<Loader active inline="centered" size={size} />
</Visibility>
)
}
return <Image {...this.props} />
}
Example #5
| Source File: Spinner.tsx From Riakuto-StartingReact-ja3.1 with Apache License 2.0 | 5 votes |
|
Spinner: VFC = () => (
<Segment className="spinner">
<Dimmer active inverted>
<Loader inverted={false}>読み込み中...</Loader>
</Dimmer>
</Segment>
)
Example #6
| Source File: Spinner.tsx From Riakuto-StartingReact-ja3.1 with Apache License 2.0 | 5 votes |
|
Spinner: VFC<{ size?: SemanticSIZES }> = ({ size = 'medium' }) => (
<div className="spinner">
<Loader size={size} inline="centered" active>
読み込み中...
</Loader>
</div>
)
Example #7
| Source File: App.tsx From watchparty with MIT License | 4 votes |
|
render() {
const sharer = this.state.participants.find((p) => p.isScreenShare);
const controls = (
<Controls
key={this.state.controlsTimestamp}
togglePlay={this.togglePlay}
onSeek={this.onSeek}
fullScreen={this.fullScreen}
toggleMute={this.toggleMute}
toggleSubtitle={this.toggleSubtitle}
setVolume={this.setVolume}
jumpToLeader={this.jumpToLeader}
paused={this.state.currentMediaPaused}
muted={this.isMuted()}
subtitled={this.isSubtitled()}
currentTime={this.getCurrentTime()}
duration={this.getDuration()}
disabled={!this.haveLock()}
leaderTime={this.isHttp() ? this.getLeaderTime() : undefined}
isPauseDisabled={this.isPauseDisabled()}
/>
);
const subscribeButton = (
<SubscribeButton
user={this.props.user}
isSubscriber={this.props.isSubscriber}
isCustomer={this.props.isCustomer}
/>
);
const displayRightContent =
this.state.showRightBar || this.state.fullScreen;
const rightBar = (
<Grid.Column
width={displayRightContent ? 4 : 1}
style={{ display: 'flex', flexDirection: 'column' }}
className={`${
this.state.fullScreen
? 'fullHeightColumnFullscreen'
: 'fullHeightColumn'
}`}
>
<Input
inverted
fluid
label={'My name is:'}
value={this.state.myName}
onChange={this.updateName}
style={{ visibility: displayRightContent ? '' : 'hidden' }}
icon={
<Icon
onClick={() => this.updateName(null, { value: generateName() })}
name="refresh"
inverted
circular
link
/>
}
/>
{
<Menu
inverted
widths={3}
style={{
marginTop: '4px',
marginBottom: '4px',
visibility: displayRightContent ? '' : 'hidden',
}}
>
<Menu.Item
name="chat"
active={this.state.currentTab === 'chat'}
onClick={() => {
this.setState({ currentTab: 'chat', unreadCount: 0 });
}}
as="a"
>
Chat
{this.state.unreadCount > 0 && (
<Label circular color="red">
{this.state.unreadCount}
</Label>
)}
</Menu.Item>
<Menu.Item
name="people"
active={this.state.currentTab === 'people'}
onClick={() => this.setState({ currentTab: 'people' })}
as="a"
>
People
<Label
circular
color={
getColorForString(
this.state.participants.length.toString()
) as SemanticCOLORS
}
>
{this.state.participants.length}
</Label>
</Menu.Item>
<Menu.Item
name="settings"
active={this.state.currentTab === 'settings'}
onClick={() => this.setState({ currentTab: 'settings' })}
as="a"
>
{/* <Icon name="setting" /> */}
Settings
</Menu.Item>
</Menu>
}
<Chat
chat={this.state.chat}
nameMap={this.state.nameMap}
pictureMap={this.state.pictureMap}
socket={this.socket}
scrollTimestamp={this.state.scrollTimestamp}
getMediaDisplayName={this.getMediaDisplayName}
hide={this.state.currentTab !== 'chat' || !displayRightContent}
isChatDisabled={this.state.isChatDisabled}
owner={this.state.owner}
user={this.props.user}
ref={this.chatRef}
/>
{this.state.state === 'connected' && (
<VideoChat
socket={this.socket}
participants={this.state.participants}
nameMap={this.state.nameMap}
pictureMap={this.state.pictureMap}
tsMap={this.state.tsMap}
rosterUpdateTS={this.state.rosterUpdateTS}
hide={this.state.currentTab !== 'people' || !displayRightContent}
owner={this.state.owner}
user={this.props.user}
/>
)}
<SettingsTab
hide={this.state.currentTab !== 'settings' || !displayRightContent}
user={this.props.user}
roomLock={this.state.roomLock}
setRoomLock={this.setRoomLock}
socket={this.socket}
isSubscriber={this.props.isSubscriber}
roomId={this.state.roomId}
isChatDisabled={this.state.isChatDisabled}
setIsChatDisabled={this.setIsChatDisabled}
owner={this.state.owner}
setOwner={this.setOwner}
vanity={this.state.vanity}
setVanity={this.setVanity}
roomLink={this.state.roomLink}
password={this.state.password}
setPassword={this.setPassword}
clearChat={this.clearChat}
roomTitle={this.state.roomTitle}
setRoomTitle={this.setRoomTitle}
roomDescription={this.state.roomDescription}
setRoomDescription={this.setRoomDescription}
roomTitleColor={this.state.roomTitleColor}
setRoomTitleColor={this.setRoomTitleColor}
mediaPath={this.state.mediaPath}
setMediaPath={this.setMediaPath}
/>
</Grid.Column>
);
return (
<React.Fragment>
{!this.state.isAutoPlayable && (
<Modal inverted basic open>
<div style={{ display: 'flex', justifyContent: 'center' }}>
<Button
primary
size="large"
onClick={() => {
this.setState({ isAutoPlayable: true });
this.setMute(false);
this.setVolume(1);
}}
icon
labelPosition="left"
>
<Icon name="volume up" />
Click to unmute
</Button>
</div>
</Modal>
)}
{this.state.multiStreamSelection && (
<MultiStreamModal
streams={this.state.multiStreamSelection}
setMedia={this.setMedia}
resetMultiSelect={this.resetMultiSelect}
/>
)}
{this.state.isVBrowserModalOpen && (
<VBrowserModal
isSubscriber={this.props.isSubscriber}
subscribeButton={subscribeButton}
closeModal={() => this.setState({ isVBrowserModalOpen: false })}
startVBrowser={this.startVBrowser}
user={this.props.user}
beta={this.props.beta}
/>
)}
{this.state.isScreenShareModalOpen && (
<ScreenShareModal
closeModal={() => this.setState({ isScreenShareModalOpen: false })}
startScreenShare={this.setupScreenShare}
/>
)}
{this.state.isFileShareModalOpen && (
<FileShareModal
closeModal={() => this.setState({ isFileShareModalOpen: false })}
startFileShare={this.setupFileShare}
/>
)}
{this.state.isSubtitleModalOpen && (
<SubtitleModal
closeModal={() => this.setState({ isSubtitleModalOpen: false })}
socket={this.socket}
currentSubtitle={this.state.currentSubtitle}
src={this.state.currentMedia}
haveLock={this.haveLock}
getMediaDisplayName={this.getMediaDisplayName}
beta={this.props.beta}
/>
)}
{this.state.error && <ErrorModal error={this.state.error} />}
{this.state.isErrorAuth && (
<PasswordModal
savedPasswords={this.state.savedPasswords}
roomId={this.state.roomId}
/>
)}
{this.state.errorMessage && (
<Message
negative
header="Error"
content={this.state.errorMessage}
style={{
position: 'fixed',
bottom: '10px',
right: '10px',
zIndex: 1000,
}}
></Message>
)}
{this.state.successMessage && (
<Message
positive
header="Success"
content={this.state.successMessage}
style={{
position: 'fixed',
bottom: '10px',
right: '10px',
zIndex: 1000,
}}
></Message>
)}
<TopBar
user={this.props.user}
isCustomer={this.props.isCustomer}
isSubscriber={this.props.isSubscriber}
roomTitle={this.state.roomTitle}
roomDescription={this.state.roomDescription}
roomTitleColor={this.state.roomTitleColor}
/>
{
<Grid stackable celled="internally">
<Grid.Row id="theaterContainer">
<Grid.Column
width={this.state.showRightBar ? 12 : 15}
className={
this.state.fullScreen
? 'fullHeightColumnFullscreen'
: 'fullHeightColumn'
}
>
<div
style={{
display: 'flex',
flexDirection: 'column',
height: '100%',
}}
>
{!this.state.fullScreen && (
<React.Fragment>
<ComboBox
setMedia={this.setMedia}
playlistAdd={this.playlistAdd}
playlistDelete={this.playlistDelete}
playlistMove={this.playlistMove}
currentMedia={this.state.currentMedia}
getMediaDisplayName={this.getMediaDisplayName}
launchMultiSelect={this.launchMultiSelect}
streamPath={this.props.streamPath}
mediaPath={this.state.mediaPath}
disabled={!this.haveLock()}
playlist={this.state.playlist}
/>
<Separator />
<div
className="mobileStack"
style={{ display: 'flex', gap: '4px' }}
>
{this.screenShareStream && (
<Button
fluid
className="toolButton"
icon
labelPosition="left"
color="red"
onClick={this.stopScreenShare}
disabled={sharer?.id !== this.socket?.id}
>
<Icon name="cancel" />
Stop Share
</Button>
)}
{!this.screenShareStream &&
!sharer &&
!this.isVBrowser() && (
<Popup
content={`Share a tab or an application. Make sure to check "Share audio" for best results.`}
trigger={
<Button
fluid
className="toolButton"
disabled={!this.haveLock()}
icon
labelPosition="left"
color={'instagram'}
onClick={() => {
this.setState({
isScreenShareModalOpen: true,
});
}}
>
<Icon name={'slideshare'} />
Screenshare
</Button>
}
/>
)}
{!this.screenShareStream &&
!sharer &&
!this.isVBrowser() && (
<Popup
content="Launch a shared virtual browser"
trigger={
<Button
fluid
className="toolButton"
disabled={!this.haveLock()}
icon
labelPosition="left"
color="green"
onClick={() => {
this.setState({
isVBrowserModalOpen: true,
});
}}
>
<Icon name="desktop" />
VBrowser
</Button>
}
/>
)}
{this.isVBrowser() && (
<Popup
content="Choose the person controlling the VBrowser"
trigger={
<Dropdown
icon="keyboard"
labeled
className="icon"
style={{ height: '36px' }}
button
value={this.state.controller}
placeholder="No controller"
clearable
onChange={this.changeController}
selection
disabled={!this.haveLock()}
options={this.state.participants.map((p) => ({
text: this.state.nameMap[p.id] || p.id,
value: p.id,
}))}
></Dropdown>
}
/>
)}
{this.isVBrowser() && (
<Dropdown
icon="desktop"
labeled
className="icon"
style={{ height: '36px' }}
button
disabled={!this.haveLock()}
value={this.state.vBrowserResolution}
onChange={(_e, data) =>
this.setState({
vBrowserResolution: data.value as string,
})
}
selection
options={[
{
text: '1080p (Plus only)',
value: '1920x1080@30',
disabled: !this.state.isVBrowserLarge,
},
{
text: '720p',
value: '1280x720@30',
},
{
text: '576p',
value: '1024x576@60',
},
{
text: '486p',
value: '864x486@60',
},
{
text: '360p',
value: '640x360@60',
},
]}
></Dropdown>
)}
{this.isVBrowser() && (
<Button
fluid
className="toolButton"
icon
labelPosition="left"
color="red"
disabled={!this.haveLock()}
onClick={this.stopVBrowser}
>
<Icon name="cancel" />
Stop VBrowser
</Button>
)}
{!this.screenShareStream &&
!sharer &&
!this.isVBrowser() && (
<Popup
content="Stream your own video file"
trigger={
<Button
fluid
className="toolButton"
disabled={!this.haveLock()}
icon
labelPosition="left"
onClick={() => {
this.setState({
isFileShareModalOpen: true,
});
}}
>
<Icon name="file" />
File
</Button>
}
/>
)}
{false && (
<SearchComponent
setMedia={this.setMedia}
playlistAdd={this.playlistAdd}
type={'youtube'}
streamPath={this.props.streamPath}
disabled={!this.haveLock()}
/>
)}
{Boolean(this.props.streamPath) && (
<SearchComponent
setMedia={this.setMedia}
playlistAdd={this.playlistAdd}
type={'stream'}
streamPath={this.props.streamPath}
launchMultiSelect={this.launchMultiSelect}
disabled={!this.haveLock()}
/>
)}
</div>
<Separator />
</React.Fragment>
)}
<div style={{ flexGrow: 1 }}>
<div id="playerContainer">
{(this.state.loading ||
!this.state.currentMedia ||
this.state.nonPlayableMedia) && (
<div
id="loader"
className="videoContent"
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
{this.state.loading && (
<Dimmer active>
<Loader>
{this.isVBrowser()
? 'Launching virtual browser. This can take up to a minute.'
: ''}
</Loader>
</Dimmer>
)}
{!this.state.loading && !this.state.currentMedia && (
<Message
color="yellow"
icon="hand point up"
header="You're not watching anything!"
content="Pick something to watch above."
/>
)}
{!this.state.loading &&
this.state.nonPlayableMedia && (
<Message
color="red"
icon="frown"
header="It doesn't look like this is a media file!"
content="Maybe you meant to launch a VBrowser if you're trying to visit a web page?"
/>
)}
</div>
)}
<iframe
style={{
display:
this.isYouTube() && !this.state.loading
? 'block'
: 'none',
}}
title="YouTube"
id="leftYt"
className="videoContent"
allowFullScreen
frameBorder="0"
allow="autoplay"
src="https://www.youtube.com/embed/?enablejsapi=1&controls=0&rel=0"
/>
{this.isVBrowser() &&
this.getVBrowserPass() &&
this.getVBrowserHost() ? (
<VBrowser
username={this.socket.id}
password={this.getVBrowserPass()}
hostname={this.getVBrowserHost()}
controlling={this.state.controller === this.socket.id}
setLoadingFalse={this.setLoadingFalse}
resolution={this.state.vBrowserResolution}
doPlay={this.doPlay}
setResolution={(data: string) =>
this.setState({ vBrowserResolution: data })
}
/>
) : (
<video
style={{
display:
(this.isVideo() && !this.state.loading) ||
this.state.fullScreen
? 'block'
: 'none',
width: '100%',
maxHeight:
'calc(100vh - 62px - 36px - 36px - 8px - 41px - 16px)',
}}
id="leftVideo"
onEnded={this.onVideoEnded}
playsInline
></video>
)}
</div>
</div>
{this.state.currentMedia && controls}
{Boolean(this.state.total) && (
<div>
<Progress
size="tiny"
color="green"
inverted
value={this.state.downloaded}
total={this.state.total}
// indicating
label={
Math.min(
(this.state.downloaded / this.state.total) * 100,
100
).toFixed(2) +
'% - ' +
formatSpeed(this.state.speed) +
' - ' +
this.state.connections +
' connections'
}
></Progress>
</div>
)}
</div>
<Button
style={{
position: 'absolute',
top: '50%',
right: 'calc(0% - 18px)',
zIndex: 900,
}}
circular
size="mini"
icon={this.state.showRightBar ? 'angle right' : 'angle left'}
onClick={() =>
this.setState({ showRightBar: !this.state.showRightBar })
}
/>
</Grid.Column>
{rightBar}
</Grid.Row>
</Grid>
}
</React.Fragment>
);
}
Example #8
| Source File: DirectMessage.tsx From communitymap-ui with Apache License 2.0 | 4 votes |
|
useDirectMessageView = () => {
const { dmKey = '' } = useParams<{ dmKey: string }>();
const {
info,
messages,
postMessage,
updateLastMessageReadByMe,
} = useDirectMessage(dmKey);
console.debug('DirectMessage', dmKey, { info, messages });
const me = useAuth();
const ids = dmKey.split('-');
const peerId = ids[0] === me?.uid ? ids[1] : ids[0];
const peerInfo = useUserPublicInfo(peerId);
const refMessagesBottom = useRef<HTMLDivElement>(null);
useEffect(() => {
refMessagesBottom.current?.scrollIntoView();
}, [messages]);
useEffect(() => {
// basically marking conversation till current last message as read
// TODO make it smarter by actually tracing the last message seen on screen
if (info && me && info.lastMsgId !== info.lastReadBy[me.uid]) {
updateLastMessageReadByMe().catch((err) => reportError(err, true));
}
}, [info, me, updateLastMessageReadByMe]);
const [message, setMessage] = useState('');
const onSubmit = () => {
if (message) {
setMessage('');
postMessage(message).catch((err) => {
console.log('Error posting direct message:', err);
alert('Unfortunately this message was not sent: ' + message);
});
}
};
if (peerInfo === undefined)
return {
header: '',
content: <Loader active />,
action: <span />,
};
const peerName = peerInfo?.name || `User ${peerId}`;
const header = peerName;
const content = me ? (
<div className="direct-message">
{!info && `This is the beginning of your conversation with ${peerName}`}
<div className="messages">
{messages.map((msg) => (
<SingleMessage
msg={msg}
peerProfile={peerInfo}
isMe={msg.author === me.uid}
key={msg.id}
>
{JSON.stringify(msg)}
</SingleMessage>
))}
<div ref={refMessagesBottom} />
</div>
</div>
) : (
<div>You need to login first.</div>
);
const action = me ? (
<Form onSubmit={onSubmit}>
<Form.Input
value={message}
placeholder="Your message here"
action={<Button icon="send" />}
onChange={(e, { value }) => setMessage(value as string)}
/>
</Form>
) : (
<span />
);
return { header, content, action };
}
Example #9
| Source File: ProfileWidgetPlus.tsx From communitymap-ui with Apache License 2.0 | 4 votes |
|
EditUserProfile: React.FC<{ user: firebase.User }> = ({ user }) => {
const [toggled, setToggle] = useState(false);
const info = useUserPublicInfo(user.uid, true);
const [changed, setChanged] = useState<{ name: string } | null>(null);
const { status, func: saveInfo } = useAsyncStatus(async () => {
return saveUserPublicInfo({
...(info || { id: user.uid }),
...(changed || { name: '' }),
});
});
if (info === undefined) return <Loader active />;
// if (info === null) return <div>User not found :(</div>;
const UserForm = () => (
<Form
onSubmit={() => saveInfo()}
loading={status.pending}
error={!!status.error}
success={status.success}
>
<Form.Input
label="Name/Nickname"
required
value={changed?.name || info?.name || ''}
onChange={(e, { value }) => setChanged({ ...changed, name: value })}
/>
{/* <Form.Input label="Gender"/> */}
<Message error>{status.error}</Message>
<Message success>Successfully saved</Message>
<Form.Group>
<Form.Button primary disabled={!changed}>
Save
</Form.Button>
<Form.Button
type="button"
disabled={!changed}
onClick={() => setChanged(null)}
>
Clear changes
</Form.Button>
</Form.Group>
</Form>
);
const BtnSettings = () => (
<Button
circular
icon="settings"
onClick={() => setToggle((toggled) => !toggled)}
/>
);
return (
<Card>
<Image
src="http://dwinery.com/ocm/wp-content/uploads/elementor/thumbs/avatar-ookvknm0adkt2o1cwyctxzbsfccgeo4fo00qr8xhao.png"
wrapped
ui={false}
/>
<Card.Content>
<Card.Header>
<Grid>
<Grid.Column floated="left" width={8}>
{info?.name}
</Grid.Column>
<Grid.Column floated="right" width={3}>
{BtnSettings()}
</Grid.Column>
</Grid>
</Card.Header>
<Card.Meta>
<span className="date">Joined in: {info?.created}</span>
</Card.Meta>
<Card.Description>{toggled && <>{UserForm()}</>}</Card.Description>
</Card.Content>
<Card.Content extra>
<Grid columns={2} divided>
<Grid.Row>
<Grid.Column>
<Icon name="handshake" /> 11 People
</Grid.Column>
<Grid.Column>
<Icon name="globe" /> 12 Places
</Grid.Column>
</Grid.Row>
</Grid>
</Card.Content>
</Card>
);
}
