react-bootstrap#Figure JavaScript Examples
The following examples show how to use
react-bootstrap#Figure.
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: Heading.js From tclone with MIT License | 5 votes |
|
function Heading(props) {
let { title, btnLogout, backButton, btnProfile } = props
let dispatch = useDispatch()
let history = useHistory()
const isMobile = useMediaQuery({ query: '(max-width: 576px)' })
let { user: authUser, isAuthenticated } = useSelector(state => state.auth)
let [btnTxt, setBtnTxt] = React.useState("Don't click")
if (backButton)
backButton = (<button
onClick={() => { isAuthenticated ? history.goBack() : history.push('/') }}
className="ml-2 btn btn-naked-primary rounded-circle text-primary">
<FontAwesomeIcon icon={faArrowLeft} size="lg" />
</button>)
if (btnLogout)
btnLogout = (<button onClick={() => { dispatch(logout()) }}
onMouseEnter={() => { setBtnTxt("Bola naa yaar") }}
onMouseLeave={() => { setBtnTxt("Never click it") }}
className="btn btn-outline-primary rounded-pill px-2 py-1 mr-2 font-weight-bold"
>{btnTxt}
</button>)
if (btnProfile && isAuthenticated)
btnProfile = (
<Link
className="d-flex align-items-end"
to={`/user/${authUser.screen_name}`}
>
<Figure
className="bg-border-color rounded-circle overflow-hidden my-auto ml-2"
style={{ height: "35px", width: "35px" }}
>
<Figure.Image
src={(authUser.default_profile_image) ? '/img/default-profile-vector.svg' : authUser.profile_image_url_https}
className="w-100 h-100"
/>
</Figure>
</Link>
)
return (
<div className="d-flex justify-content-between border-bottom sticky-top bg-white align-items-center">
<Row className="d-flex align-items-center">
{backButton}
{isMobile && btnProfile}
<h5 className="my-3 mx-2 font-weight-bold">{title}</h5>
</Row>
{btnLogout}
</div>
)
}
Example #2
| Source File: user-link.js From tclone with MIT License | 5 votes |
|
UserPopover = React.forwardRef(
({ popper, user, show, setShow, ...props }, ref) => {
let dispatch = useDispatch()
return (<Popover
className="border-0"
ref={ref}
id="user-popover"
{...props}>
<Card
onMouseEnter={() => { setShow(true) }}
onMouseLeave={() => { setShow(undefined) }}
className="border p-3 bg-transparent m-0">
<Row className="d-flex justify-content-between align-items-center">
<Figure
style={{ height: "65px", width: "65px" }}
className="rounded-circle overflow-hidden bg-primary mr-3"
>
<Figure.Image
className="w-100 h-100"
src={user.profile_image_url_https}
/>
</Figure>
<FollowButton
user={user}
followUser={() => { dispatch(followUser(user.screen_name)) }}
unFollowUser={() => { dispatch(unFollowUser(user.screen_name)) }}
/>
</Row>
<div className="flex flex-column">
<b>{user.name}</b>
<div className="text-muted mb-2 mt-0">{user.screen_name}</div>
</div>
<blockquote>{truncateText(user.description, 7)}</blockquote>
<Row className="d-flex flex-column">
<span className="text-muted">{user.location}</span>
<span className="text-muted">Joined {new Date(user.created_at).toDateString()}</span>
</Row>
<Row className="d-flex mt-1 mb-2">
<em className="mr-2">{numFormatter(user.followers_count)} <span className="text-muted">Followers</span></em>
<div className="mr-2">{numFormatter(user.friends_count)} <span className="text-muted">Following</span></div>
</Row>
</Card>
</Popover>)
}
)
Example #3
| Source File: Login.js From tclone with MIT License | 5 votes |
|
render() {
let disabled = this.state.disabled
return (
<Col style={{ maxWidth: "400px" }} className="mx-auto border px-3 pb-3">
{!this.props.compact && (
<Figure className='d-flex flex-column align-items-end'>
<Figure.Image
className='align-self-start'
width={250}
height={250}
src="/img/login-thumb-vector.svg"
alt="people vector"
/>
<Figure.Caption as="a" href="https://www.freepik.com/free-photos-vectors/people">
<small className="text-muted text-wrap">People vector created by pikisuperstar - www.freepik.com</small>
</Figure.Caption>
</Figure>
)}
<h5 className="font-weight-bolder mt-3">
Login to see what’s happening in the muzamilverse right now
</h5>
<fieldset disabled={disabled}>
<Form onSubmit={this.handleSubmit} >
<Form.Group controlId="username">
<Form.Label>Username</Form.Label>
<Form.Control
onChange={this.handleChange}
value={this.state.username}
type="text"
name="username"
autoCapitalize="off"
></Form.Control>
</Form.Group>
<Form.Group className="mb-0" controlId="password">
<Form.Label>Password</Form.Label>
<Form.Control
onChange={this.handleChange}
value={this.state.password}
autoCorrect="off"
type="password"
name="password"
></Form.Control>
</Form.Group>
<p>
{/* <small ><Link disabled to="/help">Forgot password?</Link></small>
<br /> */}
<small className="text-danger">{this.state.error}</small>
</p>
<div className="d-flex flex-column align-items-center">
<button type="submit" className="btn btn-outline-primary btn-block rounded-pill font-weight-bold">
Log in
</button>
<small className="text-muted m-2">or</small>
<Link
to="/signup"
className="btn btn-primary btn-block rounded-pill font-weight-bold"
>
Sign up
</Link>
</div>
</Form>
</fieldset>
</Col>
)
}
Example #4
| Source File: Signup.js From tclone with MIT License | 5 votes |
|
render() {
let disabled = this.state.disabled
return (
<Col style={{ maxWidth: "400px" }} className="mx-auto border px-3 pb-3">
<Figure className='d-flex flex-column align-items-end'>
<Figure.Image
className='align-self-start'
width={250}
height={250}
src="/img/login-thumb-vector.svg"
alt="people vector"
/>
<Figure.Caption as="a" href="https://www.freepik.com/free-photos-vectors/people">
<small className="text-muted text-wrap">People vector created by pikisuperstar - www.freepik.com</small>
</Figure.Caption>
</Figure>
<h5 className="font-weight-bolder">
Signup to see what’s happening in the muzamilverse right now
</h5>
<fieldset disabled={disabled}>
<Form onSubmit={this.handleSubmit}>
<Form.Group controlId="username">
<Form.Label>Choose a username - <small className="text-muted">required</small></Form.Label>
<Form.Control
type="text"
name="username"
autoCapitalize="off"
autoComplete="off"
></Form.Control>
</Form.Group>
<Form.Group controlId="fillname">
<Form.Label>Full name - <small className="text-muted">optional</small></Form.Label>
<Form.Control
type="text"
name="fullname"
autoCapitalize="on"
></Form.Control>
</Form.Group>
<Form.Group controlId="password">
<Form.Label>Choose a password - <small className="text-muted">required</small></Form.Label>
<Form.Control
type="password"
name="password"
></Form.Control>
</Form.Group>
<p className="mt-n2">
<small>Already have account? <Link to="/login">login instead</Link></small>
<br />
<small className="text-danger">{this.state.error}</small>
</p>
<div className="d-flex flex-column align-items-center">
<button
type="submit"
className="btn btn-outline-primary font-weight-bold rounded-pill btn-block">
<span>Sign up</span>
</button>
<div className="seperator"><span>or</span></div>
<Link
to="login"
className="btn btn-primary font-weight-bold rounded-pill btn-block">
<span>Log in</span>
</Link>
</div>
</Form>
</fieldset>
</Col>
)
}
Example #5
| Source File: PostsList.js From tclone with MIT License | 4 votes |
|
export default function PostsList(props) {
let { posts = [], status, getPosts, no_reply_tag } = props
/*
Not the best implementation, but I dont want to spend hours to check if changing it breaks anything
*/
// eslint-disable-next-line
useEffect(useCallback(() => {
if ((status === 'idle' || status === 'done') && !posts.length) {
getPosts()
console.log('fetching on posts load, status:', status)
}
}, [status, posts, getPosts]), [getPosts])
useBottomScrollListener(useCallback(() => {
if (status === "idle" && posts.length) {
getPosts()
console.log('loading more posts, status:', status)
}
}, [status, posts, getPosts]), 700, 200, null, true)
if (status === 'loading' && !posts.length)
return <Spinner />
return (
<ListGroup variant="flush" className="border-bottom">
{(posts.length > 0) ? posts.map(post => {
let { retweeted_by } = post
return (
<ListGroup.Item
className="px-3"
action
as={"div"}
// to={`/post/${post.id_str}`}
key={post.id_str + (retweeted_by && retweeted_by.id_str)}
>
<Row className="d-flex px-3 pb-1 mt-n2 text-muted">
<PostTag no_reply_tag={no_reply_tag} post={post} />
</Row>
<Link className="stretched-link" to={`/post/${post.id_str}`}></Link>
<Media className="mb-n2 w-100">
<UserLink
user={post.user}
className="rounded-circle"
to={`/user/${post.user.screen_name}`}
>
<Figure
className="bg-border-color rounded-circle mr-2 overflow-hidden"
style={{ height: "50px", width: "50px" }}
>
<Figure.Image
src={(post.user.default_profile_image) ? '/img/default-profile-vector.svg' : post.user.profile_image_url_https}
className="w-100 h-100"
/>
</Figure>
</UserLink>
<Media.Body className="w-50">
<Row className="d-flex align-items-center">
<UserLink
user={post.user}
to={`/user/${post.user.screen_name}`}
className="text-dark font-weight-bold mr-1">
{post.user.name}
</UserLink>
{/* tick */}
<span className="text-muted mr-1">@{post.user.screen_name}</span>
<pre className="m-0 text-muted">{" - "}</pre>
<span className="text-muted"><ReactTimeAgo date={Date.parse(post.created_at)} timeStyle="twitter" /></span>
</Row>
<Row className="mb-n1 mt-1"><blockquote className="mb-1 mw-100">
<PostText to={`/post/${post.id_str}`} post={post} />
</blockquote></Row>
<Row>
<MultiMedia
className="mt-2"
post={post} />
<QuotedPost className="mt-2" post={!no_reply_tag && post.quoted_status} />
</Row>
<Row className="d-flex justify-content-end align-items-center position-static">
<ReactionsBar post={post} />
</Row>
</Media.Body>
</Media>
</ListGroup.Item>
)
}) : (status === 'idle' &&
<div className="message">No posts for you right now</div>
)}
{status === 'loading' && <Spinner />}
{status === 'error' && <TryAgain fn={getPosts} />}
</ListGroup>
)
}
