@material-ui/core#Slide JavaScript Examples
The following examples show how to use
@material-ui/core#Slide.
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: HideOnScroll.js From reddish with MIT License | 6 votes |
|
HideOnScroll = ({ children }) => {
const trigger = useScrollTrigger();
return (
<Slide appear={false} direction="up" in={!trigger}>
{children}
</Slide>
);
}
Example #2
| Source File: HideOnScroll.js From to-view-list with MIT License | 6 votes |
|
HideOnScroll = ({ children }) => {
const trigger = useScrollTrigger();
return (
<Slide appear={false} direction="up" in={!trigger}>
{children}
</Slide>
);
}
Example #3
| Source File: index.js From Queen with MIT License | 5 votes |
|
SlideTransition = props => <Slide {...props} direction="down" />
Example #4
| Source File: Searchbar.js From course-manager with MIT License | 5 votes |
|
// ----------------------------------------------------------------------
export default function Searchbar() {
const [isOpen, setOpen] = useState(false);
const handleOpen = () => {
setOpen((prev) => !prev);
};
const handleClose = () => {
setOpen(false);
};
return (
<ClickAwayListener onClickAway={handleClose}>
<div>
{!isOpen && (
<IconButton onClick={handleOpen}>
<Icon icon={searchFill} width={20} height={20} />
</IconButton>
)}
<Slide direction="down" in={isOpen} mountOnEnter unmountOnExit>
<SearchbarStyle>
<Input
autoFocus
fullWidth
disableUnderline
placeholder="Search…"
startAdornment={
<InputAdornment position="start">
<Box
component={Icon}
icon={searchFill}
sx={{ color: 'text.disabled', width: 20, height: 20 }}
/>
</InputAdornment>
}
sx={{ mr: 1, fontWeight: 'fontWeightBold' }}
/>
<Button variant="contained" onClick={handleClose}>
Search
</Button>
</SearchbarStyle>
</Slide>
</div>
</ClickAwayListener>
);
}
Example #5
| Source File: PortOfEntryForm.js From surveillance-forms with MIT License | 5 votes |
|
Transition = React.forwardRef(function Transition(props, ref) {
return <Slide direction="up" ref={ref} {...props} />;
})
Example #6
| Source File: unlockModal.jsx From crv.finance with MIT License | 5 votes |
|
function Transition(props) {
return <Slide direction="up" {...props} />;
}
Example #7
| Source File: unlockModal.js From vote-incentives with GNU General Public License v3.0 | 5 votes |
|
function Transition(props) {
return <Slide direction="up" {...props} />;
}
Example #8
| Source File: CreateProject.js From eSim-Cloud with GNU General Public License v3.0 | 5 votes |
|
Transition = React.forwardRef(function Transition (props, ref) {
return <Slide direction="up" ref={ref} {...props} />
})
Example #9
| Source File: ToolbarExtension.js From eSim-Cloud with GNU General Public License v3.0 | 5 votes |
|
Transition = React.forwardRef(function Transition (props, ref) {
return <Slide direction="up" ref={ref} {...props} />
})
Example #10
| Source File: SimulationScreen.js From eSim-Cloud with GNU General Public License v3.0 | 5 votes |
|
Transition = React.forwardRef(function Transition (props, ref) {
return <Slide direction="up" ref={ref} {...props} />
})
Example #11
| Source File: addContractModal.jsx From keep3r.governance with MIT License | 5 votes |
|
function Transition(props) {
return <Slide direction="up" {...props} />;
}
Example #12
| Source File: Footer.js From SyntaxMeets with MIT License | 5 votes |
|
Transition = React.forwardRef(function Transition(props, ref) {
return <Slide direction="up" ref={ref} {...props} />;
})
Example #13
| Source File: PostDetails.jsx From pwa with MIT License | 5 votes |
|
SlideTransition = React.forwardRef((props, ref) => (
<Slide direction="up" ref={ref} {...props} />
))
Example #14
| Source File: AppBar.js From Artistify.ai with MIT License | 5 votes |
|
Transition = React.forwardRef(function Transition(props, ref) {
return <Slide direction="up" ref={ref} {...props} />;
})
Example #15
| Source File: ChatMenu.js From dipact with GNU General Public License v3.0 | 4 votes |
|
render() {
return (
<div
style={{
position: "relative",
height: "100%",
}}
>
<Slide
direction="up"
in={!!this.state.activeChannel}
mountOnEnter
unmountOnExit
>
<div
style={{
top: 0,
left: 0,
bottom: 0,
right: 0,
background: "#ffffff",
position: "absolute",
zIndex: 1200,
}}
>
<ChatChannel
onNewGameState={this.props.onNewGameState}
gameState={this.props.gameState}
game={this.props.game}
phases={this.props.phases}
isActive={this.props.isActive}
createMessageLink={this.state.createMessageLink}
channel={this.state.activeChannel}
close={this.closeChannel}
loaded={(_) => {
this.loadChannels(true);
}}
parent={this}
/>
</div>
</Slide>
{this.state.channels && this.state.channels.length > 0 ? (
""
) : (
<Typography>No chat channels currently.</Typography>
)}
<ButtonGroup
orientation="vertical"
style={{
width: "100%",
height: "100%",
transform: "translateZ(0)",
WebkitTransform: "translateZ(0)",
overflowY: !!this.state.activeChannel
? "hidden"
: "scroll",
}}
>
{this.state.channels.map((channel) => {
return (
<Button
style={{
width: "100%",
justifyContent: "left",
paddingTop: "12px",
paddingBottom: "12px",
border: "none",
borderBottom: "1px solid rgb(40,26,26,0.1)",
borderRadius: "0px",
}}
onClick={(_) => {
this.openChannel(channel);
}}
key={channel.Properties.Members.join(",")}
>
{this.member &&
channel.Properties.NMessagesSince &&
channel.Properties.NMessagesSince.NMessages >
0 ? (
<Badge
badgeContent={
channel.Properties.NMessagesSince
.NMessages
}
overlap="circle"
color="primary"
>
{this.variant.Properties.Nations
.length ===
channel.Properties.Members.length ? (
<NationAvatarGroup
game={this.props.game}
newGameState={
this.props.newGameState
}
gameState={this.props.gameState}
variant={this.variant}
nations={
channel.Properties.Members
}
/>
) : (
<NationAvatarGroup
game={this.props.game}
newGameState={
this.props.newGameState
}
gameState={this.props.gameState}
variant={this.variant}
nations={channel.Properties.Members.filter(
(n) => {
return (
!this.member ||
n !==
this.member
.Nation
);
}
)}
/>
)}
</Badge>
) : this.variant.Properties.Nations.length ===
channel.Properties.Members.length ? (
<NationAvatarGroup
game={this.props.game}
newGameState={this.props.newGameState}
gameState={this.props.gameState}
variant={this.variant}
nations={channel.Properties.Members}
/>
) : (
<NationAvatarGroup
game={this.props.game}
newGameState={this.props.newGameState}
gameState={this.props.gameState}
variant={this.variant}
nations={channel.Properties.Members.filter(
(n) => {
return (
!this.member ||
n !== this.member.Nation
);
}
)}
/>
)}
{channel.Properties.NMessages &&
channel.Properties.LatestMessage ? (
<div
style={{
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
marginLeft: "8px",
minWidth: "0",
}}
>
<Typography
variant="body1"
style={{
textTransform: "none",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
width: "100%",
textAlign: "left",
}}
>
{channel.Properties.Members
.length ===
this.variant.Properties.Nations
.length
? "Everyone"
: channel.Properties.Members.filter(
(n) => {
return (
!this.member ||
n !==
this.member
.Nation
);
}
).map((n, i) => {
if (i === 0) {
return n;
} else {
return ", " + n;
}
})}{" "}
({channel.Properties.NMessages})
</Typography>
<Typography
variant="body2"
style={{
textTransform: "none",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
width: "100%",
textAlign: "left",
}}
>
{this.member ? (
this.member.Nation ===
channel.Properties.LatestMessage
.Sender ? (
<span
style={{
fontStyle: "italic",
}}
>
You:{" "}
</span>
) : channel.Properties.Members
.length > 2 ? (
channel.Properties
.LatestMessage.Sender +
": "
) : (
""
)
) : (
channel.Properties.LatestMessage
.Sender + ": "
)}
{
channel.Properties.LatestMessage
.Body
}
</Typography>
</div>
) : (
""
)}
</Button>
);
})}
</ButtonGroup>
{this.state.createMessageLink ? (
<React.Fragment>
<Fab
style={{
margin: "0px",
top: "auto",
right: "20px",
bottom: "20px",
left: "auto",
position: "fixed",
display: !!this.state.activeChannel
? "none"
: "flex",
}}
color="secondary"
aria-label="edit"
onClick={(_) => {
this.createChannelDialog.setState({
open: true,
});
}}
>
<CreateMessageIcon />
</Fab>
<CreateChannelDialog
game={this.props.game}
createChannel={(channel) => {
const newChannels = this.state.channels;
const oldChannel = newChannels.find((ch) => {
return helpers.deepEqual(
channel.Properties.Members,
ch.Properties.Members
);
});
if (!oldChannel) {
newChannels.push(channel);
}
const channelToUse = oldChannel || channel;
this.setState(
{
channels: newChannels,
},
(_) => {
gtag("event", "create_chat_channel");
this.openChannel(channelToUse);
}
);
}}
parentCB={(c) => {
this.createChannelDialog = c;
}}
/>
</React.Fragment>
) : (
""
)}
</div>
);
}
Example #16
| Source File: Start.js From dipact with GNU General Public License v3.0 | 4 votes |
|
render() {
return (
<React.Fragment>
{this.hasPlayed() ? (
<div
style={{
height: "calc(100vh - 60px)",
overflowY: "scroll",
}}
>
<div>
</div>
<NewsDialog />
<List style={{ maxWidth: "940px", margin: "auto", marginBottom: "64px" }}>
<li key="started" id="my-started-container">
<ul style={{ paddingInlineStart: 0 }}>
<div
style={{
display: "flex",
justifyContent: "space-between",
paddingRight: "8px",
}}
>
<ListSubheader
style={{
backgroundColor: "white",
zIndex: "2",
marginBottom: "2px",
height: "44px",
color: "rgba(40, 26, 26, 0.56)",
}}
>
My ongoing games
</ListSubheader>
</div>
<ListItem
style={{
padding: "0px 16px 4px 16px",
width: "100%",
}}
>
<GameList
limit={128}
contained={true}
url={
this.props.urls[
"my-started-games"
]
}
onPhaseMessage={(_) => {
this.myStartedGamesList.refresh();
this.myFinishedGamesList.refresh();
}}
parentCB={(c) => {
this.myStartedGamesList = c;
}}
onFilled={(_) => {
document.getElementById(
"my-started-container"
).style.display = "block";
}}
onEmpty={(_) => {
document.getElementById(
"my-started-container"
).style.display = "none";
}}
/>
</ListItem>
</ul>
</li>
<li key="staging" id="my-staging-container">
<ul style={{ paddingInlineStart: 0 }}>
<div
style={{
display: "flex",
justifyContent: "space-between",
paddingRight: "8px",
}}
>
<ListSubheader
style={{
backgroundColor: "white",
zIndex: "2",
marginBottom: "2px",
height: "44px",
color: "rgba(40, 26, 26, 0.56)",
}}
>
My forming games
</ListSubheader>
</div>
<ListItem
style={{
padding: "0px 16px",
}}
>
<GameList
limit={128}
contained={true}
onPhaseMessage={(_) => {
this.myStartedGamesList.reload();
this.myStagingGamesList.reload();
}}
onFilled={(_) => {
document.getElementById(
"my-staging-container"
).style.display = "block";
}}
withDetails={true}
onEmpty={(_) => {
document.getElementById(
"my-staging-container"
).style.display = "none";
}}
parentCB={(c) => {
this.myStagingGamesList = c;
}}
url={
this.props.urls[
"my-staging-games"
]
}
/>
</ListItem>
</ul>
</li>
<li key="finished" id="my-finished-container">
<ul style={{ paddingInlineStart: 0 }}>
<div
style={{
display: "flex",
justifyContent: "space-between",
paddingRight: "8px",
}}
>
<ListSubheader
style={{
backgroundColor: "white",
zIndex: "2",
marginBottom: "2px",
height: "44px",
color: "rgba(40, 26, 26, 0.56)",
}}
>
My finished games
</ListSubheader>
<Button
onClick={
this.props.renderMyFinishedGames
}
>
View all
</Button>
</div>
<ListItem
style={{
padding: "0px 16px 4px 16px",
}}
>
<GameList
contained={true}
parentCB={(c) => {
this.myFinishedGamesList = c;
}}
onFilled={(_) => {
document.getElementById(
"my-finished-container"
).style.display = "block";
}}
onEmpty={(_) => {
document.getElementById(
"my-finished-container"
).style.display = "none";
}}
url={
this.props.urls[
"my-finished-games"
]
}
limit={8}
/>
</ListItem>
</ul>
</li>
</List>
<AppBar
position="fixed"
color="primary"
style={{ top: "auto", bottom: 0 }}
>
<Toolbar style={{ justifyContent: "space-around" }}>
<Button
key="new-game"
onClick={(_) => {
this.setState({
newGameFormOpen:
!this.state.newGameFormOpen,
});
}}
variant="contained"
color="secondary"
>
New game
{this.state.newGameFormOpen ? (
<ExpandIcon />
) : (
""
)}
</Button>
</Toolbar>
<Slide
mountOnEnter
unmountOnExit
direction="up"
in={this.state.newGameFormOpen}
>
<Toolbar style={{ flexDirection: "column" }}>
<Button
style={{ margin: 4 }}
variant="outlined"
color="secondary"
key="find-open"
onClick={this.props.findOpenGame}
>
Browse open games
</Button>
<Button
style={{ margin: 4 }}
variant="outlined"
color="secondary"
key="find-private"
onClick={this.props.findPrivateGame}
>
Find game
</Button>
<Button
style={{ margin: 4 }}
variant="outlined"
color="secondary"
key="create"
onClick={(_) => {
this.createGameDialog.setState({
open: true,
});
}}
>
Create game
</Button>
</Toolbar>
</Slide>
</AppBar>
</div>
) : (
<React.Fragment>
<div
style={{
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
height: "calc(100vh - 54px)",
overflowY: "scroll",
backgroundColor: "#FDE2B5",
}}
>
<div
id="top"
style={{
margin: "auto",
width: "100%",
maxWidth: "400px",
alignSelf: "center",
display: "flex",
flexDirection: "column",
}}
>
<img
alt="Diplity logo dark"
style={{
width: "calc(100% - 48px)",
maxWidth: "340px",
margin: "24px",
}}
src={LogoDarkSvgPath}
/>
<Typography
variant="body2"
style={{
margin: "0px 16px 0px 16px",
}}
>
Welcome! Diplomacy games are all about human
interaction, so they usually take or even
start after many days. Before joining your
first game, we strongly advise you to read
the rules.
</Typography>
<Button
style={{
margin: "16px auto",
minWidth: "200px",
}}
color="primary"
variant="outlined"
key="find-open"
href="https://diplicity.notion.site/How-to-play-39fbc4d1f1924c928c3953095062a983"
target="_blank"
>
Read the rules
</Button>
</div>
<div id="bottom">
<div
style={{
backgroundImage: `url(${SoldiersSvgPath})`,
height: "72px",
}}
></div>
<div
style={{
backgroundColor: "#291B1B",
display: "flex",
flexDirection: "column",
paddingBottom: "24px",
}}
>
<Button
style={{
margin: "4px auto",
minWidth: "200px",
}}
variant="outlined"
color="secondary"
key="find-open"
onClick={this.props.findOpenGame}
>
Browse open games
</Button>
<Button
style={{
margin: "4px auto",
minWidth: "200px",
}}
variant="outlined"
color="secondary"
key="find-private"
onClick={this.props.findPrivateGame}
>
Find game
</Button>
<Button
style={{
margin: "4px auto",
minWidth: "200px",
}}
variant="outlined"
color="secondary"
key="create"
onClick={(_) => {
this.createGameDialog.setState({
open: true,
});
}}
>
Create game
</Button>
</div>
</div>
</div>
</React.Fragment>
)}
<CreateGameDialog
gameCreated={(game) => {
if (game.Properties.GameMasterEnabled) {
//this.masteredStagingGamesList.reload();
//TODO: IF NO GAMEMASTERGAME CLOSE THE CREATEGAMEDIALOG AND LOAD GAME MASTER PAGE
} else {
this.myStagingGamesList.reload();
//TODO: IF NO GAMEMASTERGAME CLOSE THE CREATEGAMEDIALOG
}
}}
parentCB={(c) => {
this.createGameDialog = c;
}}
/>
<ErrorsDialog
key="errors-dialog"
parentCB={(c) => {
this.errorsDialog = c;
}}
/>
</React.Fragment>
);
}
