reactstrap#ButtonGroup JavaScript Examples
The following examples show how to use
reactstrap#ButtonGroup.
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: RadioButton.js From covid19 with MIT License | 6 votes |
|
render() {
const { title, texts, selected, onSelect, alwaysShow, disabled } = this.props
return (
<div
className={`plot-nav-bar-btn ${disabled ? 'grey-out' : ''}`}
style={alwaysShow ? { display: 'flex' } : {}}
>
<div className="plot-nav-bar-btn-title">{title}</div>
<ButtonGroup>
{Object.keys(texts).map((x) => (
<Button
className="radio-btn"
key={x}
color="secondary"
onClick={() => onSelect(x)}
active={selected === x}
>
{texts[x]}
</Button>
))}
</ButtonGroup>
</div>
)
}
Example #2
| Source File: SideNavOption.js From DMS_React with GNU Affero General Public License v3.0 | 6 votes |
|
Customizer =()=> {
const dispatch = useDispatch();
const drawerType = useSelector(({settings}) => settings.drawerType);
const setFixedDrawer = () => {
dispatch(setDrawerType(FIXED_DRAWER));
};
const setCollapsedDrawer = () => {
dispatch(setDrawerType(COLLAPSED_DRAWER));
};
const setMiniDrawer = () => {
dispatch(setDrawerType(MINI_DRAWER));
};
return (
<div className="side-nav-option">
<ButtonGroup>
<Button color="default"
className={`jr-btn ${drawerType === FIXED_DRAWER && 'active' } `}
data-test="buttonComp1"
onClick={setFixedDrawer}>Fixed</Button>
<Button color="default"
data-test="buttonComp2"
className={`jr-btn ${drawerType === COLLAPSED_DRAWER && 'active'} `}
onClick={setCollapsedDrawer}>Collapsed</Button>
<Button color="default"
data-test="buttonComp3"
className={`jr-btn ${drawerType === MINI_DRAWER && 'active' } `}
onClick={setMiniDrawer}>Mini</Button>
</ButtonGroup>
</div>);
}
Example #3
| Source File: Notifications.js From light-blue-react-template with MIT License | 5 votes |
|
render() {
let notificationsTab;
switch (this.state.notificationsTabSelected) {
case 1:
notificationsTab = (<NotificationsDemo />);
break;
case 2:
notificationsTab = (<MessagesDemo />);
break;
case 3:
notificationsTab = (<ProgressDemo />);
break;
default:
notificationsTab = (<NotificationsDemo />);
break;
}
return (
<section className={`${s.notifications} navbar-notifications`}>
<header className={[s.cardHeader, 'card-header'].join(' ')}>
<div className="text-center mb-sm">
<strong>You have 13 notifications</strong>
</div>
<ButtonGroup className={s.notificationButtons}>
<Button outline color="default" size="sm" className={s.notificationButton} onClick={() => this.changeNotificationsTab(1)} active={this.state.notificationsTabSelected === 1}>Notifications</Button>
<Button outline color="default" size="sm" className={s.notificationButton} onClick={() => this.changeNotificationsTab(2)} active={this.state.notificationsTabSelected === 2}>Messages</Button>
<Button outline color="default" size="sm" className={s.notificationButton} onClick={() => this.changeNotificationsTab(3)} active={this.state.notificationsTabSelected === 3}>Progress</Button>
</ButtonGroup>
</header>
{this.state.newNotifications || notificationsTab}
<footer className={[s.cardFooter, 'text-sm', 'card-footer'].join(' ')}>
<Button
color="link"
className={classnames({ disabled: this.state.isLoad }, s.btnNotificationsReload, 'btn-xs', 'float-right', 'py-0')}
onClick={() => this.loadNotifications()}
id="load-notifications-btn"
>
{this.state.isLoad ? <span><i className="la la-refresh la-spin" /> Loading...</span> : <i className="la la-refresh" />}
</Button>
<span className="fs-mini">Synced at: 21 Apr 2014 18:36</span>
</footer>
</section>
);
}
Example #4
| Source File: RevenueAnalytics.js From gedge-platform with Apache License 2.0 | 5 votes |
|
render() {
return (
<React.Fragment>
<Card>
<CardBody>
<div className="float-right d-none d-md-inline-block">
<ButtonGroup className="mb-2">
<Button size="sm" color="light" type="button">Today</Button>
<Button size="sm" color="light" active type="button">Weekly</Button>
<Button size="sm" color="light" type="button">Monthly</Button>
</ButtonGroup>
</div>
<h4 className="card-title mb-4">Revenue Analytics</h4>
<div>
<div id="line-column-chart" className="apex-charts" dir="ltr">
<ReactApexChart options={this.state.options} series={this.state.series} type="line" height="280" />
</div>
</div>
</CardBody>
<CardBody className="border-top text-center">
<Row>
<Col sm={4}>
<div className="d-inline-flex">
<h5 className="mr-2">$12,253</h5>
<div className="text-success">
<i className="mdi mdi-menu-up font-size-14"> </i>2.2 %
</div>
</div>
<p className="text-muted text-truncate mb-0">This month</p>
</Col>
<Col sm={4}>
<div className="mt-4 mt-sm-0">
<p className="mb-2 text-muted text-truncate"><i className="mdi mdi-circle text-primary font-size-10 mr-1"></i> This Year :</p>
<div className="d-inline-flex">
<h5 className="mb-0 mr-2">$ 34,254</h5>
<div className="text-success">
<i className="mdi mdi-menu-up font-size-14"> </i>2.1 %
</div>
</div>
</div>
</Col>
<Col sm={4}>
<div className="mt-4 mt-sm-0">
<p className="mb-2 text-muted text-truncate"><i className="mdi mdi-circle text-success font-size-10 mr-1"></i> Previous Year :</p>
<div className="d-inline-flex">
<h5 className="mb-0">$ 32,695</h5>
</div>
</div>
</Col>
</Row>
</CardBody>
</Card>
</React.Fragment>
);
}
Example #5
| Source File: email-toolbar.js From gedge-platform with Apache License 2.0 | 5 votes |
|
render() {
return (
<React.Fragment>
<ButtonToolbar className="p-3" role="toolbar">
<ButtonGroup className="mr-2 mb-2 mb-sm-0">
<Button type="button" color="primary" className=" waves-light waves-effect"><i className="fa fa-inbox"></i></Button>
<Button type="button" color="primary" className="waves-light waves-effect"><i className="fa fa-exclamation-circle"></i></Button>
<Button type="button" color="primary" className="waves-light waves-effect"><i className="far fa-trash-alt"></i></Button>
</ButtonGroup>
<ButtonGroup className="mr-2 mb-2 mb-sm-0">
<Dropdown isOpen={this.state.folder_menu} toggle={this.toggleFolder}>
<DropdownToggle tag="button" type="button" caret className="btn btn-primary waves-light waves-effect dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i className="fa fa-folder mr-1"></i>
<i className="mdi mdi-chevron-down ml-1"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem tag="a" href="#">Updates</DropdownItem>
<DropdownItem tag="a" href="#">Social</DropdownItem>
<DropdownItem tag="a" href="#">Team Manage</DropdownItem>
</DropdownMenu>
</Dropdown>
</ButtonGroup>
<ButtonGroup className="mr-2 mb-2 mb-sm-0">
<Dropdown isOpen={this.state.tag_menu} toggle={this.toggleTag}>
<DropdownToggle tag="button" className="btn btn-primary waves-light waves-effect dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i className="fa fa-tag mr-1"></i>
<i className="mdi mdi-chevron-down ml-1"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem tag="a" href="#">Updates</DropdownItem>
<DropdownItem tag="a" href="#">Social</DropdownItem>
<DropdownItem tag="a" href="#">Team Manage</DropdownItem>
</DropdownMenu>
</Dropdown>
</ButtonGroup>
<ButtonGroup className="mr-2 mb-2 mb-sm-0">
<Dropdown isOpen={this.state.more_menu} toggle={this.toggleMore}>
<DropdownToggle tag="button" className="btn btn-primary waves-light waves-effect dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
More <i className="mdi mdi-dots-vertical ml-2"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem tag="a" href="#">Mark as Unread</DropdownItem>
<DropdownItem tag="a" href="#">Mark as Important</DropdownItem>
<DropdownItem tag="a" href="#">Add to Tasks</DropdownItem>
<DropdownItem tag="a" href="#">Add Star</DropdownItem>
<DropdownItem tag="a" href="#">Mute</DropdownItem>
</DropdownMenu>
</Dropdown>
</ButtonGroup>
</ButtonToolbar>
</React.Fragment>
);
}
Example #6
| Source File: index.js From mern-course-bootcamp with MIT License | 5 votes |
|
export default function MyRegistrations() {
const [myEvents, setMyEvents] = useState([])
const user = localStorage.getItem('user')
useEffect(() => {
getMyEvents()
}, [])
const getMyEvents = async () => {
try {
const response = await api.get('/registration', { headers: { user } })
setMyEvents(response.data)
} catch (error) {
console.log(error)
}
}
const isApproved = (approved) => approved === true ? "Approved" : "Rejected"
const acceptEventHandler = async (eventId) => {
try {
await api.post(`/registration/${eventId}/approvals`, {}, { headers: { user } })
getMyEvents()
} catch (err) {
console.log(err)
}
}
const rejectEventHandler = async (eventId) => {
try {
await api.post(`/registration/${eventId}/rejections`, {}, { headers: { user } })
getMyEvents()
} catch (err) {
console.log(err)
}
}
return (
<ul className="events">
{myEvents.map(event => (
<li key={event._id}>
<div><strong>{event.eventTitle}</strong></div>
<div className="events-details">
<span>Event Date: {moment(event.eventDate).format('l')}</span>
<span>Event Price: £{parseFloat(event.eventPrice).toFixed(2)}</span>
<span>User Email: {event.userEmail}</span>
<span>Status:
<span className={event.approved !== undefined ? isApproved(event.approved) : "Pending"}>{event.approved !== undefined ? isApproved(event.approved) : "Pending"}</span>
</span>
</div>
<ButtonGroup>
<Button disabled={event.approved === true || event.approved === false ? true : false} color="secondary" onClick={() => acceptEventHandler(event._id)}>Accept</Button>
<Button disabled={event.approved === true || event.approved === false ? true : false} color="danger" onClick={() => rejectEventHandler(event._id)}>Reject</Button>
</ButtonGroup>
</li>
))}
</ul>
)
}
Example #7
| Source File: index.js From mern-course-bootcamp with MIT License | 5 votes |
|
//Dashboard will show all the events
export default function Dashboard({history}) {
const [events, setEvents] = useState([]);
const user_id = localStorage.getItem('user');
const [cSelected, setCSelected] = useState([]);
const [rSelected, setRSelected] = useState(null);
useEffect(() => {
getEvents()
}, [])
const filterHandler = (query) => {
setRSelected(query)
getEvents(query)
}
const getEvents = async (filter) => {
const url = filter ? `/dashboard/${filter}` : '/dashboard'
const response = await api.get(url, { headers: { user_id } })
setEvents(response.data)
};
return (
<>
<div>Filter:
<ButtonGroup>
<Button color="primary" onClick={() => filterHandler(null)} active={rSelected === null}>All Sports</Button>
<Button color="primary" onClick={() => filterHandler("running")} active={rSelected === 'running'}>Running</Button>
<Button color="primary" onClick={() => filterHandler("cycling")} active={rSelected === 'cycling'}>Cycling</Button>
<Button color="primary" onClick={() => filterHandler('swimming')} active={rSelected === 'swimming'}>Swimming</Button>
</ButtonGroup>
<Button color="secondary" onClick={()=> history.push('events')}>Events</Button>
</div>
<ul className="events-list">
{events.map(event => (
<li key={event._id}>
<header style={{ backgroundImage: `url(${event.thumbnail_url})` }} />
<strong>{event.title}</strong>
<span>Event Date: {moment(event.date).format('l')}</span>
<span>Event Price: {parseFloat(event.price).toFixed(2)}</span>
<span>Event Description: {event.description}</span>
<Button color="primary">Subscribe</Button>
</li>
))}
</ul>
</>
)
}
Example #8
| Source File: index.js From mern-course-bootcamp with MIT License | 5 votes |
|
export default function MyRegistrations() {
const [myEvents, setMyEvents] = useState([])
const user = localStorage.getItem('user')
useEffect(() => {
getMyEvents()
}, [])
const getMyEvents = async () => {
try {
const response = await api.get('/registration', { headers: { user } })
console.log(response.data)
setMyEvents(response.data)
} catch (error) {
}
}
const isApproved = (approved) => approved === true ? "Approved" : "Rejected"
const acceptEventHandler = async (eventId) => {
try {
await api.post(`/registration/${eventId}/approvals`, {}, { headers: { user } })
getMyEvents()
} catch (err) {
console.log(err)
}
}
const rejectEventHandler = async (eventId) => {
try {
await api.post(`/registration/${eventId}/rejections`, {}, { headers: { user } })
getMyEvents()
} catch (err) {
console.log(err)
}
}
return (
<ul className="events">
{myEvents.map(event => (
<li key={event._id}>
<div><strong>{event.eventTitle}</strong></div>
<div className="events-details">
<span>Event Date: {moment(event.eventDate).format('l')}</span>
<span>Event Price: £{parseFloat(event.eventPrice).toFixed(2)}</span>
<span>User Email: {event.userEmail}</span>
<span>Status:
<span className={event.approved !== undefined ? isApproved(event.approved) : "Pending"}>{event.approved !== undefined ? isApproved(event.approved) : "Pending"}</span>
</span>
</div>
<ButtonGroup>
<Button disabled={event.approved === true || event.approved === false ? true : false} color="secondary" onClick={() => acceptEventHandler(event._id)}>Accept</Button>
<Button disabled={event.approved === true || event.approved === false ? true : false} color="danger" onClick={() => rejectEventHandler(event._id)}>Reject</Button>
</ButtonGroup>
</li>
))}
</ul>
)
}
Example #9
| Source File: index.js From mern-course-bootcamp with MIT License | 4 votes |
|
//Dashboard will show all the events
export default function Dashboard({ history }) {
const [events, setEvents] = useState([]);
const user = localStorage.getItem('user');
const user_id = localStorage.getItem('user_id');
const [rSelected, setRSelected] = useState(null);
const [error, setError] = useState(false);
const [success, setSuccess] = useState(false)
useEffect(() => {
getEvents()
}, [])
const filterHandler = (query) => {
setRSelected(query)
getEvents(query)
}
const myEventsHandler = async () => {
try {
setRSelected('myevents')
const response = await api.get('/user/events', { headers: { user: user } })
setEvents(response.data.events)
} catch (error) {
history.push('/login');
}
}
const getEvents = async (filter) => {
try {
const url = filter ? `/dashboard/${filter}` : '/dashboard';
const response = await api.get(url, { headers: { user: user } })
setEvents(response.data.events)
} catch (error) {
history.push('/login');
}
};
const deleteEventHandler = async (eventId) => {
try {
await api.delete(`/event/${eventId}`, { headers: { user: user } });
setSuccess(true)
setTimeout(() => {
setSuccess(false)
filterHandler(null)
}, 2500)
} catch (error) {
setError(true)
setTimeout(() => {
setError(false)
}, 2000)
}
}
return (
<>
<div className="filter-panel">
<ButtonGroup>
<Button color="primary" onClick={() => filterHandler(null)} active={rSelected === null}>All Sports</Button>
<Button color="primary" onClick={myEventsHandler} active={rSelected === 'myevents'}>My Events</Button>
<Button color="primary" onClick={() => filterHandler("running")} active={rSelected === 'running'}>Running</Button>
<Button color="primary" onClick={() => filterHandler("cycling")} active={rSelected === 'cycling'}>Cycling</Button>
<Button color="primary" onClick={() => filterHandler('swimming')} active={rSelected === 'swimming'}>Swimming</Button>
</ButtonGroup>
<Button color="secondary" onClick={() => history.push('events')}>Events</Button>
</div>
<ul className="events-list">
{events.map(event => (
<li key={event._id}>
<header style={{ backgroundImage: `url(${event.thumbnail_url})` }}>
{event.user === user_id ? <div><Button color="danger" size="sm" onClick={() => deleteEventHandler(event._id)}>Delete</Button></div> : ""}
</header>
<strong>{event.title}</strong>
<span>Event Date: {moment(event.date).format('l')}</span>
<span>Event Price: {parseFloat(event.price).toFixed(2)}</span>
<span>Event Description: {event.description}</span>
<Button color="primary">Subscribe</Button>
</li>
))}
</ul>
{error ? (
<Alert className="event-validation" color="danger"> Error when deleting event! </Alert>
) : ""}
{success ? (
<Alert className="event-validation" color="success"> The event was deleted successfully!</Alert>
) : ""}
</>
)
}
Example #10
| Source File: Dashboard.js From id.co.moonlay-eworkplace-admin-web with MIT License | 4 votes |
|
render() {
return (
<div className="animated fadeIn">
<Row>
<Col xs="12" sm="6" lg="3">
<Card className="text-white bg-info">
<CardBody className="pb-0">
<ButtonGroup className="float-right">
<ButtonDropdown id='card1' isOpen={this.state.card1} toggle={() => { this.setState({ card1: !this.state.card1 }); }}>
<DropdownToggle caret className="p-0" color="transparent">
<i className="icon-settings"></i>
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem disabled>Disabled action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</ButtonGroup>
<div className="text-value">9.823</div>
<div>Members online</div>
</CardBody>
<div className="chart-wrapper mx-3" style={{ height: '70px' }}>
<Line data={cardChartData2} options={cardChartOpts2} height={70} />
</div>
</Card>
</Col>
<Col xs="12" sm="6" lg="3">
<Card className="text-white bg-primary">
<CardBody className="pb-0">
<ButtonGroup className="float-right">
<Dropdown id='card2' isOpen={this.state.card2} toggle={() => { this.setState({ card2: !this.state.card2 }); }}>
<DropdownToggle className="p-0" color="transparent">
<i className="icon-location-pin"></i>
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</Dropdown>
</ButtonGroup>
<div className="text-value">9.823</div>
<div>Members online</div>
</CardBody>
<div className="chart-wrapper mx-3" style={{ height: '70px' }}>
<Line data={cardChartData1} options={cardChartOpts1} height={70} />
</div>
</Card>
</Col>
<Col xs="12" sm="6" lg="3">
<Card className="text-white bg-warning">
<CardBody className="pb-0">
<ButtonGroup className="float-right">
<Dropdown id='card3' isOpen={this.state.card3} toggle={() => { this.setState({ card3: !this.state.card3 }); }}>
<DropdownToggle caret className="p-0" color="transparent">
<i className="icon-settings"></i>
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</Dropdown>
</ButtonGroup>
<div className="text-value">9.823</div>
<div>Members online</div>
</CardBody>
<div className="chart-wrapper" style={{ height: '70px' }}>
<Line data={cardChartData3} options={cardChartOpts3} height={70} />
</div>
</Card>
</Col>
<Col xs="12" sm="6" lg="3">
<Card className="text-white bg-danger">
<CardBody className="pb-0">
<ButtonGroup className="float-right">
<ButtonDropdown id='card4' isOpen={this.state.card4} toggle={() => { this.setState({ card4: !this.state.card4 }); }}>
<DropdownToggle caret className="p-0" color="transparent">
<i className="icon-settings"></i>
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</ButtonGroup>
<div className="text-value">9.823</div>
<div>Members online</div>
</CardBody>
<div className="chart-wrapper mx-3" style={{ height: '70px' }}>
<Bar data={cardChartData4} options={cardChartOpts4} height={70} />
</div>
</Card>
</Col>
</Row>
<Row>
<Col>
<Card>
<CardBody>
<Row>
<Col sm="5">
<CardTitle className="mb-0">Traffic</CardTitle>
<div className="small text-muted">November 2015</div>
</Col>
<Col sm="7" className="d-none d-sm-inline-block">
<Button color="primary" className="float-right"><i className="icon-cloud-download"></i></Button>
<ButtonToolbar className="float-right" aria-label="Toolbar with button groups">
<ButtonGroup className="mr-3" aria-label="First group">
<Button color="outline-secondary" onClick={() => this.onRadioBtnClick(1)} active={this.state.radioSelected === 1}>Day</Button>
<Button color="outline-secondary" onClick={() => this.onRadioBtnClick(2)} active={this.state.radioSelected === 2}>Month</Button>
<Button color="outline-secondary" onClick={() => this.onRadioBtnClick(3)} active={this.state.radioSelected === 3}>Year</Button>
</ButtonGroup>
</ButtonToolbar>
</Col>
</Row>
<div className="chart-wrapper" style={{ height: 300 + 'px', marginTop: 40 + 'px' }}>
<Line data={mainChart} options={mainChartOpts} height={300} />
</div>
</CardBody>
<CardFooter>
<Row className="text-center">
<Col sm={12} md className="mb-sm-2 mb-0">
<div className="text-muted">Visits</div>
<strong>29.703 Users (40%)</strong>
<Progress className="progress-xs mt-2" color="success" value="40" />
</Col>
<Col sm={12} md className="mb-sm-2 mb-0 d-md-down-none">
<div className="text-muted">Unique</div>
<strong>24.093 Users (20%)</strong>
<Progress className="progress-xs mt-2" color="info" value="20" />
</Col>
<Col sm={12} md className="mb-sm-2 mb-0">
<div className="text-muted">Pageviews</div>
<strong>78.706 Views (60%)</strong>
<Progress className="progress-xs mt-2" color="warning" value="60" />
</Col>
<Col sm={12} md className="mb-sm-2 mb-0">
<div className="text-muted">New Users</div>
<strong>22.123 Users (80%)</strong>
<Progress className="progress-xs mt-2" color="danger" value="80" />
</Col>
<Col sm={12} md className="mb-sm-2 mb-0 d-md-down-none">
<div className="text-muted">Bounce Rate</div>
<strong>Average Rate (40.15%)</strong>
<Progress className="progress-xs mt-2" color="primary" value="40" />
</Col>
</Row>
</CardFooter>
</Card>
</Col>
</Row>
<Row>
<Col xs="6" sm="6" lg="3">
<Suspense fallback={this.loading()}>
<Widget03 dataBox={() => ({ variant: 'facebook', friends: '89k', feeds: '459' })} >
<div className="chart-wrapper">
<Line data={makeSocialBoxData(0)} options={socialChartOpts} height={90} />
</div>
</Widget03>
</Suspense>
</Col>
<Col xs="6" sm="6" lg="3">
<Suspense fallback={this.loading()}>
<Widget03 dataBox={() => ({ variant: 'twitter', followers: '973k', tweets: '1.792' })} >
<div className="chart-wrapper">
<Line data={makeSocialBoxData(1)} options={socialChartOpts} height={90} />
</div>
</Widget03>
</Suspense>
</Col>
<Col xs="6" sm="6" lg="3">
<Suspense fallback={this.loading()}>
<Widget03 dataBox={() => ({ variant: 'linkedin', contacts: '500+', feeds: '292' })} >
<div className="chart-wrapper">
<Line data={makeSocialBoxData(2)} options={socialChartOpts} height={90} />
</div>
</Widget03>
</Suspense>
</Col>
<Col xs="6" sm="6" lg="3">
<Suspense fallback={this.loading()}>
<Widget03 dataBox={() => ({ variant: 'google-plus', followers: '894', circles: '92' })} >
<div className="chart-wrapper">
<Line data={makeSocialBoxData(3)} options={socialChartOpts} height={90} />
</div>
</Widget03>
</Suspense>
</Col>
</Row>
<Row>
<Col>
<Card>
<CardHeader>
Traffic {' & '} Sales
</CardHeader>
<CardBody>
<Row>
<Col xs="12" md="6" xl="6">
<Row>
<Col sm="6">
<div className="callout callout-info">
<small className="text-muted">New Clients</small>
<br />
<strong className="h4">9,123</strong>
<div className="chart-wrapper">
<Line data={makeSparkLineData(0, brandPrimary)} options={sparklineChartOpts} width={100} height={30} />
</div>
</div>
</Col>
<Col sm="6">
<div className="callout callout-danger">
<small className="text-muted">Recurring Clients</small>
<br />
<strong className="h4">22,643</strong>
<div className="chart-wrapper">
<Line data={makeSparkLineData(1, brandDanger)} options={sparklineChartOpts} width={100} height={30} />
</div>
</div>
</Col>
</Row>
<hr className="mt-0" />
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Monday
</span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="info" value="34" />
<Progress className="progress-xs" color="danger" value="78" />
</div>
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Tuesday
</span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="info" value="56" />
<Progress className="progress-xs" color="danger" value="94" />
</div>
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Wednesday
</span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="info" value="12" />
<Progress className="progress-xs" color="danger" value="67" />
</div>
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Thursday
</span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="info" value="43" />
<Progress className="progress-xs" color="danger" value="91" />
</div>
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Friday
</span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="info" value="22" />
<Progress className="progress-xs" color="danger" value="73" />
</div>
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Saturday
</span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="info" value="53" />
<Progress className="progress-xs" color="danger" value="82" />
</div>
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Sunday
</span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="info" value="9" />
<Progress className="progress-xs" color="danger" value="69" />
</div>
</div>
<div className="legend text-center">
<small>
<sup className="px-1"><Badge pill color="info"> </Badge></sup>
New clients
<sup className="px-1"><Badge pill color="danger"> </Badge></sup>
Recurring clients
</small>
</div>
</Col>
<Col xs="12" md="6" xl="6">
<Row>
<Col sm="6">
<div className="callout callout-warning">
<small className="text-muted">Pageviews</small>
<br />
<strong className="h4">78,623</strong>
<div className="chart-wrapper">
<Line data={makeSparkLineData(2, brandWarning)} options={sparklineChartOpts} width={100} height={30} />
</div>
</div>
</Col>
<Col sm="6">
<div className="callout callout-success">
<small className="text-muted">Organic</small>
<br />
<strong className="h4">49,123</strong>
<div className="chart-wrapper">
<Line data={makeSparkLineData(3, brandSuccess)} options={sparklineChartOpts} width={100} height={30} />
</div>
</div>
</Col>
</Row>
<hr className="mt-0" />
<ul>
<div className="progress-group">
<div className="progress-group-header">
<i className="icon-user progress-group-icon"></i>
<span className="title">Male</span>
<span className="ml-auto font-weight-bold">43%</span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="warning" value="43" />
</div>
</div>
<div className="progress-group mb-5">
<div className="progress-group-header">
<i className="icon-user-female progress-group-icon"></i>
<span className="title">Female</span>
<span className="ml-auto font-weight-bold">37%</span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="warning" value="37" />
</div>
</div>
<div className="progress-group">
<div className="progress-group-header">
<i className="icon-globe progress-group-icon"></i>
<span className="title">Organic Search</span>
<span className="ml-auto font-weight-bold">191,235 <span className="text-muted small">(56%)</span></span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="success" value="56" />
</div>
</div>
<div className="progress-group">
<div className="progress-group-header">
<i className="icon-social-facebook progress-group-icon"></i>
<span className="title">Facebook</span>
<span className="ml-auto font-weight-bold">51,223 <span className="text-muted small">(15%)</span></span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="success" value="15" />
</div>
</div>
<div className="progress-group">
<div className="progress-group-header">
<i className="icon-social-twitter progress-group-icon"></i>
<span className="title">Twitter</span>
<span className="ml-auto font-weight-bold">37,564 <span className="text-muted small">(11%)</span></span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="success" value="11" />
</div>
</div>
<div className="progress-group">
<div className="progress-group-header">
<i className="icon-social-linkedin progress-group-icon"></i>
<span className="title">LinkedIn</span>
<span className="ml-auto font-weight-bold">27,319 <span className="text-muted small">(8%)</span></span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="success" value="8" />
</div>
</div>
<div className="divider text-center">
<Button color="link" size="sm" className="text-muted" data-toggle="tooltip" data-placement="top"
title="" data-original-title="show more"><i className="icon-options"></i></Button>
</div>
</ul>
</Col>
</Row>
<br />
<Table hover responsive className="table-outline mb-0 d-none d-sm-table">
<thead className="thead-light">
<tr>
<th className="text-center"><i className="icon-people"></i></th>
<th>User</th>
<th className="text-center">Country</th>
<th>Usage</th>
<th className="text-center">Payment Method</th>
<th>Activity</th>
</tr>
</thead>
<tbody>
<tr>
<td className="text-center">
<div className="avatar">
<img src={'assets/img/avatars/1.jpg'} className="img-avatar" alt="[email protected]" />
<span className="avatar-status badge-success"></span>
</div>
</td>
<td>
<div>Yiorgos Avraamu</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<i className="flag-icon flag-icon-us h4 mb-0" title="us" id="us"></i>
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>50%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<Progress className="progress-xs" color="success" value="50" />
</td>
<td className="text-center">
<i className="fa fa-cc-mastercard" style={{ fontSize: 24 + 'px' }}></i>
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>10 sec ago</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="avatar">
<img src={'assets/img/avatars/2.jpg'} className="img-avatar" alt="[email protected]" />
<span className="avatar-status badge-danger"></span>
</div>
</td>
<td>
<div>Avram Tarasios</div>
<div className="small text-muted">
<span>Recurring</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<i className="flag-icon flag-icon-br h4 mb-0" title="br" id="br"></i>
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>10%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<Progress className="progress-xs" color="info" value="10" />
</td>
<td className="text-center">
<i className="fa fa-cc-visa" style={{ fontSize: 24 + 'px' }}></i>
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>5 minutes ago</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="avatar">
<img src={'assets/img/avatars/3.jpg'} className="img-avatar" alt="[email protected]" />
<span className="avatar-status badge-warning"></span>
</div>
</td>
<td>
<div>Quintin Ed</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<i className="flag-icon flag-icon-in h4 mb-0" title="in" id="in"></i>
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>74%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<Progress className="progress-xs" color="warning" value="74" />
</td>
<td className="text-center">
<i className="fa fa-cc-stripe" style={{ fontSize: 24 + 'px' }}></i>
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>1 hour ago</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="avatar">
<img src={'assets/img/avatars/4.jpg'} className="img-avatar" alt="[email protected]" />
<span className="avatar-status badge-secondary"></span>
</div>
</td>
<td>
<div>Enéas Kwadwo</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<i className="flag-icon flag-icon-fr h4 mb-0" title="fr" id="fr"></i>
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>98%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<Progress className="progress-xs" color="danger" value="98" />
</td>
<td className="text-center">
<i className="fa fa-paypal" style={{ fontSize: 24 + 'px' }}></i>
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>Last month</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="avatar">
<img src={'assets/img/avatars/5.jpg'} className="img-avatar" alt="[email protected]" />
<span className="avatar-status badge-success"></span>
</div>
</td>
<td>
<div>Agapetus Tadeáš</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<i className="flag-icon flag-icon-es h4 mb-0" title="es" id="es"></i>
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>22%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<Progress className="progress-xs" color="info" value="22" />
</td>
<td className="text-center">
<i className="fa fa-google-wallet" style={{ fontSize: 24 + 'px' }}></i>
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>Last week</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="avatar">
<img src={'assets/img/avatars/6.jpg'} className="img-avatar" alt="[email protected]" />
<span className="avatar-status badge-danger"></span>
</div>
</td>
<td>
<div>Friderik Dávid</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<i className="flag-icon flag-icon-pl h4 mb-0" title="pl" id="pl"></i>
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>43%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<Progress className="progress-xs" color="success" value="43" />
</td>
<td className="text-center">
<i className="fa fa-cc-amex" style={{ fontSize: 24 + 'px' }}></i>
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>Yesterday</strong>
</td>
</tr>
</tbody>
</Table>
</CardBody>
</Card>
</Col>
</Row>
</div>
);
}
Example #11
| Source File: ButtonGroups.js From id.co.moonlay-eworkplace-admin-web with MIT License | 4 votes |
|
render() {
return (
<div className="animated fadeIn">
<Row>
<Col md="6">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Button Group</strong>
<div className="card-header-actions">
<a href="https://reactstrap.github.io/components/button-group/" rel="noreferrer noopener" target="_blank" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
</CardHeader>
<CardBody>
<ButtonGroup>
<Button>Left</Button>
<Button>Middle</Button>
<Button>Right</Button>
</ButtonGroup>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Vertical variation</strong>
</CardHeader>
<CardBody>
<ButtonGroup vertical>
<Button>1</Button>
<Button>2</Button>
<ButtonDropdown isOpen={this.state.dropdownOpen[0]} toggle={() => { this.toggle(0); }}>
<DropdownToggle caret>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Dropdown Link</DropdownItem>
<DropdownItem>Dropdown Link</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</ButtonGroup>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Button Toolbar</strong>
</CardHeader>
<CardBody>
<ButtonToolbar>
<ButtonGroup className="mr-2">
<Button>1</Button>
<Button>2</Button>
<Button>3</Button>
<Button>4</Button>
</ButtonGroup>
<ButtonGroup className="mr-2">
<Button>5</Button>
<Button>6</Button>
<Button>7</Button>
</ButtonGroup>
<ButtonGroup>
<Button>8</Button>
</ButtonGroup>
</ButtonToolbar>
</CardBody>
</Card>
</Col>
<Col md={6}>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Sizing</strong>
</CardHeader>
<CardBody>
<ButtonGroup size="lg">
<Button>Left</Button>
<Button>Middle</Button>
<Button>Right</Button>
</ButtonGroup>
<hr />
<ButtonGroup>
<Button>Left</Button>
<Button>Middle</Button>
<Button>Right</Button>
</ButtonGroup>
<hr />
<ButtonGroup size="sm">
<Button>Left</Button>
<Button>Middle</Button>
<Button>Right</Button>
</ButtonGroup>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Nesting</strong>
</CardHeader>
<CardBody>
<ButtonGroup>
<Button>1</Button>
<Button>2</Button>
<ButtonDropdown isOpen={this.state.dropdownOpen[1]} toggle={() => { this.toggle(1); }}>
<DropdownToggle caret>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Dropdown Link</DropdownItem>
<DropdownItem>Dropdown Link</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</ButtonGroup>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Button Toolbar</strong> <small>with input groups</small>
</CardHeader>
<CardBody>
<ButtonToolbar className="mb-3">
<ButtonGroup className="mr-2">
<Button>1</Button>
<Button>2</Button>
<Button>3</Button>
<Button>4</Button>
</ButtonGroup>
<InputGroup>
<InputGroupAddon addonType="prepend"><InputGroupText>@</InputGroupText></InputGroupAddon>
<Input placeholder="Input group example" />
</InputGroup>
</ButtonToolbar>
<ButtonToolbar className="justify-content-between">
<ButtonGroup>
<Button>1</Button>
<Button>2</Button>
<Button>3</Button>
<Button>4</Button>
</ButtonGroup>
<InputGroup>
<InputGroupAddon addonType="prepend"><InputGroupText>@</InputGroupText></InputGroupAddon>
<Input placeholder="Input group example" />
</InputGroup>
</ButtonToolbar>
</CardBody>
</Card>
</Col>
</Row>
</div>
);
}
Example #12
| Source File: index.js From mern-course-bootcamp with MIT License | 4 votes |
|
export default function Dashboard({ history }) {
const [events, setEvents] = useState([])
const user = localStorage.getItem('user')
const user_id = localStorage.getItem('user_id')
const [rSelected, setRSelected] = useState(null)
const [error, setError] = useState(false);
const [success, setSuccess] = useState(false)
const [messageHandler, setMessageHandler] = useState('')
const [eventsRequest, setEventsRequest] = useState([])
const [dropdownOpen, setDropDownOpen] = useState(false)
const [eventRequestMessage, setEventRequestMessage] = useState('')
const [eventRequestSuccess, setEventRequestSuccess] = useState(false)
const toggle = () => setDropDownOpen(!dropdownOpen);
useEffect(() => {
getEvents()
}, [])
const socket = useMemo(
() =>
socketio.connect('http://localhost:8000/', { query: { user: user_id } }),
[user_id]
);
useEffect(() => {
socket.on('registration_request', data => setEventsRequest([...eventsRequest, data]));
}, [eventsRequest, socket])
const filterHandler = (query) => {
setRSelected(query)
getEvents(query)
}
const myEventsHandler = async () => {
try {
setRSelected('myevents')
const response = await api.get('/user/events', { headers: { user } })
setEvents(response.data.events)
} catch (error) {
history.push('/login');
}
}
const getEvents = async (filter) => {
try {
const url = filter ? `/dashboard/${filter}` : '/dashboard';
const response = await api.get(url, { headers: { user } })
setEvents(response.data.events)
} catch (error) {
history.push('/login');
}
};
const deleteEventHandler = async (eventId) => {
try {
await api.delete(`/event/${eventId}`, { headers: { user: user } });
setSuccess(true)
setMessageHandler('The event was deleted successfully!')
setTimeout(() => {
setSuccess(false)
filterHandler(null)
setMessageHandler('')
}, 2500)
} catch (error) {
setError(true)
setMessageHandler('Error when deleting event!')
setTimeout(() => {
setError(false)
setMessageHandler('')
}, 2000)
}
}
const registrationRequestHandler = async (event) => {
try {
await api.post(`/registration/${event.id}`, {}, { headers: { user } })
setSuccess(true)
setMessageHandler(`The request for the event ${event.title} was successfully!`)
setTimeout(() => {
setSuccess(false)
filterHandler(null)
setMessageHandler('')
}, 2500)
} catch (error) {
setError(true)
setMessageHandler(`The request for the event ${event.title} wasn't successfully!`)
setTimeout(() => {
setError(false)
setMessageHandler('')
}, 2000)
}
}
const acceptEventHandler = async (eventId) => {
try {
await api.post(`/registration/${eventId}/approvals`, {}, { headers: { user } })
setEventRequestSuccess(true)
setEventRequestMessage('Event approved successfully!')
removeNotificationFromDashboard(eventId)
setTimeout(() => {
setEventRequestSuccess(false)
setEventRequestMessage('')
}, 2000)
} catch (err) {
console.log(err)
}
}
const rejectEventHandler = async (eventId) => {
try {
await api.post(`/registration/${eventId}/rejections`, {}, { headers: { user } })
setEventRequestSuccess(true)
setEventRequestMessage('Event rejected successfully!')
removeNotificationFromDashboard(eventId)
setTimeout(() => {
setEventRequestSuccess(false)
setEventRequestMessage('')
}, 2000)
} catch (err) {
console.log(err)
}
}
const removeNotificationFromDashboard = (eventId) => {
const newEvents = eventsRequest.filter((event) => event._id !== eventId)
setEventsRequest(newEvents)
}
return (
<>
<ul className="notifications">
{eventsRequest.map(request => {
return (
<li key={request._id}>
<div>
<strong>{request.user.email} </strong> is requesting to register to your Event <strong>{request.event.title}</strong>
</div>
<ButtonGroup>
<Button color="secondary" onClick={() => acceptEventHandler(request._id)}>Accept</Button>
<Button color="danger" onClick={() => rejectEventHandler(request._id)}>Reject</Button>
</ButtonGroup>
</li>
)
})}
</ul>
{eventRequestSuccess ? <Alert color="success"> {eventRequestMessage}</Alert> : ""}
<div className="filter-panel">
<Dropdown isOpen={dropdownOpen} toggle={toggle}>
<DropdownToggle color="primary" caret>
Filter
</DropdownToggle>
<DropdownMenu>
<DropdownItem onClick={() => filterHandler(null)} active={rSelected === null} >All Sports</DropdownItem>
<DropdownItem onClick={myEventsHandler} active={rSelected === 'myevents'} >My Events</DropdownItem>
<DropdownItem onClick={() => filterHandler("running")} active={rSelected === 'running'} >Running</DropdownItem>
<DropdownItem onClick={() => filterHandler("cycling")} active={rSelected === 'cycling'} >Cycling</DropdownItem>
<DropdownItem color="primary" onClick={() => filterHandler('swimming')} active={rSelected === 'swimming'} >Swimming</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
<ul className="events-list">
{events.map(event => (
< li key={event._id} >
<header style={{ backgroundImage: `url(${event.thumbnail_url})` }}>
{event.user === user_id ? <div><Button color="danger" size="sm" onClick={() => deleteEventHandler(event._id)}>Delete</Button></div> : ""}
</header>
<strong>{event.title}</strong>
<span>Event Date: {moment(event.date).format('l')}</span>
<span>Event Price: {parseFloat(event.price).toFixed(2)}</span>
<span>Event Description: {event.description}</span>
<Button color="primary" onClick={() => registrationRequestHandler(event)}>Registration Request</Button>
</li>
))}
</ul>
{
error ? (
<Alert className="event-validation" color="danger"> {messageHandler} </Alert>
) : ""
}
{
success ? (
<Alert className="event-validation" color="success"> {messageHandler}</Alert>
) : ""
}
</>
)
}
Example #13
| Source File: index.js From mern-course-bootcamp with MIT License | 4 votes |
|
export default function Dashboard({ history }) {
const [events, setEvents] = useState([])
const user = localStorage.getItem('user')
const user_id = localStorage.getItem('user_id')
const [rSelected, setRSelected] = useState(null)
const [error, setError] = useState(false);
const [success, setSuccess] = useState(false)
const [messageHandler, setMessageHandler] = useState('')
const [eventsRequest, setEventsRequest] = useState([])
const [dropdownOpen, setDropDownOpen] = useState(false)
const [eventRequestMessage, setEventRequestMessage] = useState('')
const [eventRequestSuccess, setEventRequestSuccess] = useState(false)
const toggle = () => setDropDownOpen(!dropdownOpen);
useEffect(() => {
getEvents()
}, [])
const socket = useMemo(
() =>
socketio.connect('http://localhost:8000/', { query: { user: user_id } }),
[user_id]
);
useEffect(() => {
socket.on('registration_request', data => setEventsRequest([...eventsRequest, data]));
}, [eventsRequest, socket])
const filterHandler = (query) => {
setRSelected(query)
getEvents(query)
}
const myEventsHandler = async () => {
try {
setRSelected('myevents')
const response = await api.get('/user/events', { headers: { user } })
setEvents(response.data.events)
} catch (error) {
history.push('/login');
}
}
const getEvents = async (filter) => {
try {
const url = filter ? `/dashboard/${filter}` : '/dashboard';
const response = await api.get(url, { headers: { user } })
setEvents(response.data.events)
} catch (error) {
history.push('/login');
}
};
const deleteEventHandler = async (eventId) => {
try {
await api.delete(`/event/${eventId}`, { headers: { user: user } });
setSuccess(true)
setMessageHandler('The event was deleted successfully!')
setTimeout(() => {
setSuccess(false)
filterHandler(null)
setMessageHandler('')
}, 2500)
} catch (error) {
setError(true)
setMessageHandler('Error when deleting event!')
setTimeout(() => {
setError(false)
setMessageHandler('')
}, 2000)
}
}
const registrationRequestHandler = async (event) => {
try {
await api.post(`/registration/${event.id}`, {}, { headers: { user } })
setSuccess(true)
setMessageHandler(`The request for the event ${event.title} was successfully!`)
setTimeout(() => {
setSuccess(false)
filterHandler(null)
setMessageHandler('')
}, 2500)
} catch (error) {
setError(true)
setMessageHandler(`The request for the event ${event.title} wasn't successfully!`)
setTimeout(() => {
setError(false)
setMessageHandler('')
}, 2000)
}
}
const acceptEventHandler = async (eventId) => {
try {
await api.post(`/registration/${eventId}/approvals`, {}, { headers: { user } })
setEventRequestSuccess(true)
setEventRequestMessage('Event approved successfully!')
removeNotificationFromDashboard(eventId)
setTimeout(() => {
setEventRequestSuccess(false)
setEventRequestMessage('')
}, 2000)
} catch (err) {
console.log(err)
}
}
const rejectEventHandler = async (eventId) => {
try {
await api.post(`/registration/${eventId}/rejections`, {}, { headers: { user } })
setEventRequestSuccess(true)
setEventRequestMessage('Event rejected successfully!')
removeNotificationFromDashboard(eventId)
setTimeout(() => {
setEventRequestSuccess(false)
setEventRequestMessage('')
}, 2000)
} catch (err) {
console.log(err)
}
}
const removeNotificationFromDashboard = (eventId) => {
const newEvents = eventsRequest.filter((event) => event._id !== eventId)
setEventsRequest(newEvents)
}
return (
<>
<ul className="notifications">
{eventsRequest.map(request => {
return (
<li key={request._id}>
<div>
<strong>{request.user.email} </strong> is requesting to register to your Event <strong>{request.event.title}</strong>
</div>
<ButtonGroup>
<Button color="secondary" onClick={() => acceptEventHandler(request._id)}>Accept</Button>
<Button color="danger" onClick={() => rejectEventHandler(request._id)}>Reject</Button>
</ButtonGroup>
</li>
)
})}
</ul>
{eventRequestSuccess ? <Alert color="success"> {eventRequestMessage}</Alert> : ""}
<div className="filter-panel">
<Dropdown isOpen={dropdownOpen} toggle={toggle}>
<DropdownToggle color="primary" caret>
Filter
</DropdownToggle>
<DropdownMenu>
<DropdownItem onClick={() => filterHandler(null)} active={rSelected === null} >All Sports</DropdownItem>
<DropdownItem onClick={myEventsHandler} active={rSelected === 'myevents'} >My Events</DropdownItem>
<DropdownItem onClick={() => filterHandler("running")} active={rSelected === 'running'} >Running</DropdownItem>
<DropdownItem onClick={() => filterHandler("cycling")} active={rSelected === 'cycling'} >Cycling</DropdownItem>
<DropdownItem color="primary" onClick={() => filterHandler('swimming')} active={rSelected === 'swimming'} >Swimming</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
<ul className="events-list">
{events.map(event => (
< li key={event._id} >
<header style={{ backgroundImage: `url(${event.thumbnail_url})` }}>
{event.user === user_id ? <div><Button color="danger" size="sm" onClick={() => deleteEventHandler(event._id)}>Delete</Button></div> : ""}
</header>
<strong>{event.title}</strong>
<span>Event Date: {moment(event.date).format('l')}</span>
<span>Event Price: {parseFloat(event.price).toFixed(2)}</span>
<span>Event Description: {event.description}</span>
<Button color="primary" onClick={() => registrationRequestHandler(event)}>Registration Request</Button>
</li>
))}
</ul>
{
error ? (
<Alert className="event-validation" color="danger"> {messageHandler} </Alert>
) : ""
}
{
success ? (
<Alert className="event-validation" color="success"> {messageHandler}</Alert>
) : ""
}
</>
)
}
Example #14
| Source File: index.js From mern-course-bootcamp with MIT License | 4 votes |
|
export default function Dashboard({ history }) {
const [events, setEvents] = useState([])
const user = localStorage.getItem('user')
const user_id = localStorage.getItem('user_id')
const [rSelected, setRSelected] = useState(null)
const [error, setError] = useState(false);
const [success, setSuccess] = useState(false)
const [messageHandler, setMessageHandler] = useState('')
const [eventsRequest, setEventsRequest] = useState([])
const [dropdownOpen, setDropDownOpen] = useState(false)
const [eventRequestMessage, setEventRequestMessage] = useState('')
const [eventRequestSuccess, setEventRequestSuccess] = useState(false)
const toggle = () => setDropDownOpen(!dropdownOpen);
useEffect(() => {
getEvents()
}, [])
const socket = useMemo(
() =>
socketio.connect('http://localhost:8000/', { query: { user: user_id } }),
[user_id]
);
useEffect(() => {
socket.on('registration_request', data => setEventsRequest([...eventsRequest, data]));
}, [eventsRequest, socket])
const filterHandler = (query) => {
setRSelected(query)
getEvents(query)
}
const myEventsHandler = async () => {
try {
setRSelected('myevents')
const response = await api.get('/user/events', { headers: { user } })
setEvents(response.data.events)
} catch (error) {
history.push('/login');
}
}
const getEvents = async (filter) => {
try {
const url = filter ? `/dashboard/${filter}` : '/dashboard';
const response = await api.get(url, { headers: { user } })
setEvents(response.data.events)
} catch (error) {
history.push('/login');
}
};
const deleteEventHandler = async (eventId) => {
try {
await api.delete(`/event/${eventId}`, { headers: { user: user } });
setSuccess(true)
setMessageHandler('The event was deleted successfully!')
setTimeout(() => {
setSuccess(false)
filterHandler(null)
setMessageHandler('')
}, 2500)
} catch (error) {
setError(true)
setMessageHandler('Error when deleting event!')
setTimeout(() => {
setError(false)
setMessageHandler('')
}, 2000)
}
}
const registrationRequestHandler = async (event) => {
try {
await api.post(`/registration/${event.id}`, {}, { headers: { user } })
setSuccess(true)
setMessageHandler(`The request for the event ${event.title} was successfully!`)
setTimeout(() => {
setSuccess(false)
filterHandler(null)
setMessageHandler('')
}, 2500)
} catch (error) {
setError(true)
setMessageHandler(`The request for the event ${event.title} wasn't successfully!`)
setTimeout(() => {
setError(false)
setMessageHandler('')
}, 2000)
}
}
const acceptEventHandler = async (eventId) => {
try {
await api.post(`/registration/${eventId}/approvals`, {}, { headers: { user } })
setEventRequestSuccess(true)
setEventRequestMessage('Event approved successfully!')
removeNotificationFromDashboard(eventId)
setTimeout(() => {
setEventRequestSuccess(false)
setEventRequestMessage('')
}, 2000)
} catch (err) {
console.log(err)
}
}
const rejectEventHandler = async (eventId) => {
try {
await api.post(`/registration/${eventId}/rejections`, {}, { headers: { user } })
setEventRequestSuccess(true)
setEventRequestMessage('Event rejected successfully!')
removeNotificationFromDashboard(eventId)
setTimeout(() => {
setEventRequestSuccess(false)
setEventRequestMessage('')
}, 2000)
} catch (err) {
console.log(err)
}
}
const removeNotificationFromDashboard = (eventId) => {
const newEvents = eventsRequest.filter((event) => event._id !== eventId)
setEventsRequest(newEvents)
}
return (
<>
<ul className="notifications">
{eventsRequest.map(request => {
return (
<li key={request._id}>
<div>
<strong>{request.user.email} </strong> is requesting to register to your Event <strong>{request.event.title}</strong>
</div>
<ButtonGroup>
<Button color="secondary" onClick={() => acceptEventHandler(request._id)}>Accept</Button>
<Button color="danger" onClick={() => rejectEventHandler(request._id)}>Reject</Button>
</ButtonGroup>
</li>
)
})}
</ul>
{eventRequestSuccess ? <Alert color="success"> {eventRequestMessage}</Alert> : ""}
<div className="filter-panel">
<Dropdown isOpen={dropdownOpen} toggle={toggle}>
<DropdownToggle color="primary" caret>
Filter
</DropdownToggle>
<DropdownMenu>
<DropdownItem onClick={() => filterHandler(null)} active={rSelected === null} >All Sports</DropdownItem>
<DropdownItem onClick={myEventsHandler} active={rSelected === 'myevents'} >My Events</DropdownItem>
<DropdownItem onClick={() => filterHandler("running")} active={rSelected === 'running'} >Running</DropdownItem>
<DropdownItem onClick={() => filterHandler("cycling")} active={rSelected === 'cycling'} >Cycling</DropdownItem>
<DropdownItem color="primary" onClick={() => filterHandler('swimming')} active={rSelected === 'swimming'} >Swimming</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
<ul className="events-list">
{events.map(event => (
< li key={event._id} >
<header style={{ backgroundImage: `url(${event.thumbnail_url})` }}>
{event.user === user_id ? <div><Button color="danger" size="sm" onClick={() => deleteEventHandler(event._id)}>Delete</Button></div> : ""}
</header>
<strong>{event.title}</strong>
<span>Event Date: {moment(event.date).format('l')}</span>
<span>Event Price: {parseFloat(event.price).toFixed(2)}</span>
<span>Event Description: {event.description}</span>
<Button color="primary" onClick={() => registrationRequestHandler(event)}>Registration Request</Button>
</li>
))}
</ul>
{
error ? (
<Alert className="event-validation" color="danger"> {messageHandler} </Alert>
) : ""
}
{
success ? (
<Alert className="event-validation" color="success"> {messageHandler}</Alert>
) : ""
}
</>
)
}
Example #15
| Source File: index.js From mern-course-bootcamp with MIT License | 4 votes |
|
//Dashboard will show all the events
export default function Dashboard({ history }) {
const [events, setEvents] = useState([]);
const user = localStorage.getItem('user');
const user_id = localStorage.getItem('user_id');
const [rSelected, setRSelected] = useState(null);
const [error, setError] = useState(false);
const [success, setSuccess] = useState(false)
const [messageHandler, setMessageHandler] = useState('');
const [eventsRequest, setEventsRequest] = useState([])
useEffect(() => {
getEvents()
}, [])
const socket = useMemo(
() =>
socketio.connect('http://localhost:8000/', { query: { user: user_id } }),
[user_id]
);
useEffect(() => {
socket.on('registration_request', data => setEventsRequest([...eventsRequest, data]));
}, [eventsRequest, socket])
const filterHandler = (query) => {
setRSelected(query)
getEvents(query)
}
const myEventsHandler = async () => {
try {
setRSelected('myevents')
const response = await api.get('/user/events', { headers: { user } })
setEvents(response.data.events)
} catch (error) {
history.push('/login');
}
}
const getEvents = async (filter) => {
try {
const url = filter ? `/dashboard/${filter}` : '/dashboard';
const response = await api.get(url, { headers: { user } })
setEvents(response.data.events)
} catch (error) {
history.push('/login');
}
};
const deleteEventHandler = async (eventId) => {
try {
await api.delete(`/event/${eventId}`, { headers: { user: user } });
setSuccess(true)
setMessageHandler('The event was deleted successfully!')
setTimeout(() => {
setSuccess(false)
filterHandler(null)
setMessageHandler('')
}, 2500)
} catch (error) {
setError(true)
setMessageHandler('Error when deleting event!')
setTimeout(() => {
setError(false)
setMessageHandler('')
}, 2000)
}
}
const logoutHandler = () => {
localStorage.removeItem('user')
localStorage.removeItem('user_id')
history.push('/login');
}
const registrationRequestHandler = async (event) => {
try {
await api.post(`/registration/${event.id}`, {}, { headers: { user } })
setSuccess(true)
setMessageHandler(`The request for the event ${event.title} was successfully!`)
setTimeout(() => {
setSuccess(false)
filterHandler(null)
setMessageHandler('')
}, 2500)
} catch (error) {
setError(true)
setMessageHandler(`The request for the event ${event.title} wasn't successfully!`)
setTimeout(() => {
setError(false)
setMessageHandler('')
}, 2000)
}
}
return (
<>
<ul className="notifications">
{eventsRequest.map(request => {
console.log(request)
return (
<li key={request.id}>
<div>
<strong>{request.user.email} </strong> is requesting to register to your Event <strong>{request.event.title}</strong>
</div>
<ButtonGroup>
<Button color="secondary" onClick={() => { }}>Accept</Button>
<Button color="danger" onClick={() => { }}>Cancel</Button>
</ButtonGroup>
</li>
)
})}
</ul>
<div className="filter-panel">
<ButtonGroup>
<Button color="primary" onClick={() => filterHandler(null)} active={rSelected === null}>All Sports</Button>
<Button color="primary" onClick={myEventsHandler} active={rSelected === 'myevents'}>My Events</Button>
<Button color="primary" onClick={() => filterHandler("running")} active={rSelected === 'running'}>Running</Button>
<Button color="primary" onClick={() => filterHandler("cycling")} active={rSelected === 'cycling'}>Cycling</Button>
<Button color="primary" onClick={() => filterHandler('swimming')} active={rSelected === 'swimming'}>Swimming</Button>
</ButtonGroup>
<ButtonGroup>
<Button color="secondary" onClick={() => history.push('events')}>Events</Button>
<Button color="danger" onClick={logoutHandler}>Logout</Button>
</ButtonGroup>
</div>
<ul className="events-list">
{events.map(event => (
<li key={event._id}>
<header style={{ backgroundImage: `url(${event.thumbnail_url})` }}>
{event.user === user_id ? <div><Button color="danger" size="sm" onClick={() => deleteEventHandler(event._id)}>Delete</Button></div> : ""}
</header>
<strong>{event.title}</strong>
<span>Event Date: {moment(event.date).format('l')}</span>
<span>Event Price: {parseFloat(event.price).toFixed(2)}</span>
<span>Event Description: {event.description}</span>
<Button color="primary" onClick={() => registrationRequestHandler(event)}>Registration Request</Button>
</li>
))}
</ul>
{
error ? (
<Alert className="event-validation" color="danger"> {messageHandler} </Alert>
) : ""
}
{
success ? (
<Alert className="event-validation" color="success"> {messageHandler}</Alert>
) : ""
}
</>
)
}
Example #16
| Source File: Component.js From agenda with MIT License | 4 votes |
|
render() {
const {modalFlag} = this.state;
const {
assignment, assignments
} = this.props;
return (
<Container>
<Row>
<Col>
<Button
className="float-right"
color="primary"
size="lg"
tag={Link}
to="/assignments/new"
>
Nueva asignación
</Button>
</Col>
</Row>
<hr/>
<Row>
<Col>
<Table bordered condensed hover stripped size="sm">
<thead>
<tr>
<th colSpan="4">Contacto</th>
<th colSpan="3">Departamento</th>
<th rowSpan="2">Acciones</th>
</tr>
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Direccion</th>
<th>Cargo</th>
<th>Nombre</th>
<th>Dirección</th>
<th>Decripción</th>
</tr>
</thead>
<tbody>
{assignments.map(assignment => (
<tr>
<td>{assignment.firstName}</td>
<td>{assignment.lastName}</td>
<td>{assignment.address}</td>
<td>{assignment.role}</td>
<td>{assignment.name}</td>
<td>{assignment.departmentAddress}</td>
<td>{assignment.description}</td>
<td className="text-center">
<ButtonGroup>
<Button tag={Link} to={`/assignments/${assignment.id}`}>
<FontAwesomeIcon icon={faEdit}/>
</Button>
<Button
onClick={() => this.handleModal(true, assignment)}
color="danger"
>
<FontAwesomeIcon icon={faTrash}/>
</Button>
</ButtonGroup>
</td>
</tr>
))}
</tbody>
</Table>
</Col>
</Row>
{modalFlag && (
<ModalConfirm
title="Confirme borrado"
message="Estas por borrar una Asignacion"
onDismiss={() => this.handleModal(null)}
onAccept={() => this.onDelete(assignment)}
>
<div> Testing </div>
</ModalConfirm>
)}
</Container>
);
}
Example #17
| Source File: index.js From mern-course-bootcamp with MIT License | 4 votes |
|
//Dashboard will show all the events
export default function Dashboard({ history }) {
const [events, setEvents] = useState([]);
const user_id = localStorage.getItem('user');
const [rSelected, setRSelected] = useState(null);
const [error, setError] = useState(false);
const [success, setSuccess] = useState(false)
useEffect(() => {
getEvents()
}, [])
const filterHandler = (query) => {
setRSelected(query)
getEvents(query)
}
const myEventsHandler = async () => {
setRSelected('myevents')
const response = await api.get('/user/events', { headers: { user_id } })
setEvents(response.data)
}
const getEvents = async (filter) => {
const url = filter ? `/dashboard/${filter}` : '/dashboard'
const response = await api.get(url, { headers: { user_id } })
setEvents(response.data)
};
const deleteEventHandler = async(eventId) => {
try {
await api.delete(`/event/${eventId}`);
setSuccess(true)
setTimeout(() => {
setSuccess(false)
filterHandler(null)
}, 2500)
} catch (error) {
setError(true)
setTimeout(() => {
setError(false)
}, 2000)
}
}
return (
<>
<div className="filter-panel">
<ButtonGroup>
<Button color="primary" onClick={() => filterHandler(null)} active={rSelected === null}>All Sports</Button>
<Button color="primary" onClick={myEventsHandler} active={rSelected === 'myevents'}>My Events</Button>
<Button color="primary" onClick={() => filterHandler("running")} active={rSelected === 'running'}>Running</Button>
<Button color="primary" onClick={() => filterHandler("cycling")} active={rSelected === 'cycling'}>Cycling</Button>
<Button color="primary" onClick={() => filterHandler('swimming')} active={rSelected === 'swimming'}>Swimming</Button>
</ButtonGroup>
<Button color="secondary" onClick={() => history.push('events')}>Events</Button>
</div>
<ul className="events-list">
{events.map(event => (
<li key={event._id}>
<header style={{ backgroundImage: `url(${event.thumbnail_url})` }}>
{event.user === user_id ? <div><Button color="danger" size="sm"onClick={() => deleteEventHandler(event._id)}>Delete</Button></div> : ""}
</header>
<strong>{event.title}</strong>
<span>Event Date: {moment(event.date).format('l')}</span>
<span>Event Price: {parseFloat(event.price).toFixed(2)}</span>
<span>Event Description: {event.description}</span>
<Button color="primary">Subscribe</Button>
</li>
))}
</ul>
{error ? (
<Alert className="event-validation" color="danger"> Error when deleting event! </Alert>
) : ""}
{success ? (
<Alert className="event-validation" color="success"> The event was deleted successfully!</Alert>
) : ""}
</>
)
}
Example #18
| Source File: index.js From gobench with Apache License 2.0 | 4 votes |
|
render() {
return (
<div className="row">
<div className="col-lg-12 mb-5">
<h5 className="mb-4">
<strong>Default Group</strong>
</h5>
<ButtonGroup className="mr-2 mb-2">
<Button color="" className="btn btn-success">
Left
</Button>
<Button color="" className="btn btn-success">
Middle
</Button>
<Button color="" className="btn btn-success">
Right
</Button>
</ButtonGroup>
<ButtonGroup className="mr-2 mb-2">
<Button color="white" className="btn btn-rounded">
Left
</Button>
<Button color="white">Middle</Button>
<Button color="danger" className="btn btn-rounded">
Right
</Button>
</ButtonGroup>
</div>
<div className="col-lg-12 mb-5">
<h5 className="mb-4">
<strong>Nesting Group</strong>
</h5>
<ButtonGroup className="mr-2 mb-2">
<Button color="primary">1</Button>
<Button color="primary">2</Button>
<UncontrolledDropdown>
<DropdownToggle color="light" caret>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</ButtonGroup>
<ButtonGroup className="mr-2 mb-2">
<Button color="light">1</Button>
<Button color="light">2</Button>
<UncontrolledDropdown>
<DropdownToggle color="light" caret>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</ButtonGroup>
</div>
<div className="col-lg-12 mb-3">
<h5 className="mb-4">
<strong>Vertical Group</strong>
</h5>
<div className="btn-group-vertical mr-2 mb-2">
<Button className="btn btn-danger">Button</Button>
<div className="btn-group">
<Button color="danger">Dropdown</Button>
<div className="dropdown-menu">
<a className="dropdown-item" href="">
Action
</a>
<a className="dropdown-item" href="">
Another action
</a>
<a className="dropdown-item" href="">
Something else here
</a>
<div className="dropdown-divider" />
<a className="dropdown-item" href="">
Separated link
</a>
</div>
</div>
<Button className="btn btn-danger">Button</Button>
<div className="btn-group">
<Button color="danger">Dropdown</Button>
<div className="dropdown-menu">
<a className="dropdown-item" href="">
Action
</a>
<a className="dropdown-item" href="">
Another action
</a>
<a className="dropdown-item" href="">
Something else here
</a>
<div className="dropdown-divider" />
<a className="dropdown-item" href="">
Separated link
</a>
</div>
</div>
</div>
<ButtonGroup vertical>
<UncontrolledDropdown>
<DropdownToggle color="light" caret>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
<Button color="light">Button</Button>
<Button color="primary">Button</Button>
<Button color="light">Button</Button>
</ButtonGroup>
</div>
</div>
)
}
Example #19
| Source File: UiDropdown.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
return (
<React.Fragment>
<div className="page-content">
<Container fluid={true}>
<Breadcrumbs title="Dropdowns" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Single button dropdowns</h4>
<p className="card-title-desc">Any single <code
className="highlighter-rouge">.btn</code> can be turned into a dropdown toggle with some markup changes. Here’s how you can put them to work with either <code className="highlighter-rouge"><button></code> elements:</p>
<Row>
<Col sm={6}>
<Dropdown
isOpen={this.state.singlebtn}
toggle={() =>
this.setState({ singlebtn: !this.state.singlebtn })
}
>
<DropdownToggle color="primary" caret>
Dropdown button{" "}
<i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown
isOpen={this.state.singlebtn}
toggle={() =>
this.setState({ singlebtn: !this.state.singlebtn })
}
>
<DropdownToggle color="primary" caret>
Dropdown button{" "}
<i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</Dropdown>
</Col>
<Col sm={6}>
<Dropdown
isOpen={this.state.singlebtn1}
toggle={() =>
this.setState({ singlebtn1: !this.state.singlebtn1 })
}
>
<DropdownToggle color="light" caret>
Dropdown Link <i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</Dropdown>
</Col>
</Row>
</CardBody>
</Card>
</Col>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Variant</h4>
<p className="card-title-desc">The best part is you can do this with any button variant, too:</p>
<div className="">
<ButtonGroup className="mr-1 mt-2">
<Dropdown
isOpen={this.state.btnprimary1}
toggle={() =>
this.setState({ btnprimary1: !this.state.btnprimary1 })
}
>
<DropdownToggle tag="button" className="btn btn-primary">
Primary <i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</Dropdown>{" "}
</ButtonGroup>
<ButtonGroup className="mr-1 mt-2">
<Dropdown
isOpen={this.state.btnlight1}
toggle={() =>
this.setState({ btnlight1: !this.state.btnlight1 })
}
>
<DropdownToggle tag="button" className="btn btn-light">
Light <i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</Dropdown>{" "}
</ButtonGroup>
<ButtonGroup className="mr-1 mt-2">
<Dropdown
isOpen={this.state.btnsuccess1}
toggle={() =>
this.setState({ btnsuccess1: !this.state.btnsuccess1 })
}
>
<DropdownToggle tag="button" className="btn btn-success">
Success <i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</Dropdown>
</ButtonGroup>
<ButtonGroup className="mr-1 mt-2">
<Dropdown
isOpen={this.state.btnInfo1}
toggle={() =>
this.setState({ btnInfo1: !this.state.btnInfo1 })
}
>
<DropdownToggle tag="button" className="btn btn-info">
Info <i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</Dropdown>
</ButtonGroup>
<ButtonGroup className="mr-1 mt-2">
<Dropdown
isOpen={this.state.btnWarning1}
toggle={() =>
this.setState({ btnWarning1: !this.state.btnWarning1 })
}
>
<DropdownToggle tag="button" className="btn btn-warning">
Warning <i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</Dropdown>
</ButtonGroup>
<ButtonGroup className="mr-1 mt-2">
<Dropdown
isOpen={this.state.btnDanger1}
toggle={() =>
this.setState({ btnDanger1: !this.state.btnDanger1 })
}
>
<DropdownToggle tag="button" className="btn btn-danger">
Danger <i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</Dropdown>
</ButtonGroup>
</div>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Split button dropdowns</h4>
<p className="card-title-desc">The best part is you can do this with any button variant, too:</p>
<div className="d-flex">
<ButtonGroup className="mb-2">
<ButtonDropdown
isOpen={this.state.drp_primary1}
toggle={() =>
this.setState({
drp_primary1: !this.state.drp_primary1
})
}
>
<Button id="caret" color="primary">
Primary
</Button>
<DropdownToggle caret color="primary">
<i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</ButtonGroup>
<ButtonGroup className="mb-2">
<ButtonDropdown
isOpen={this.state.drp_secondary1}
toggle={() =>
this.setState({
drp_secondary1: !this.state.drp_secondary1
})
}
>
<Button id="caret" color="light">
Light
</Button>
<DropdownToggle caret color="light">
<i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</ButtonGroup>
<ButtonGroup className="mb-2">
<ButtonDropdown
isOpen={this.state.drp_success1}
toggle={() =>
this.setState({
drp_success1: !this.state.drp_success1
})
}
>
<Button id="caret" color="success">
Success
</Button>
<DropdownToggle caret color="success">
<i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</ButtonGroup>
<ButtonGroup className="mb-2">
<ButtonDropdown
isOpen={this.state.drp_info1}
toggle={() =>
this.setState({ drp_info1: !this.state.drp_info1 })
}
>
<Button id="caret" color="info">
Info
</Button>
<DropdownToggle caret color="info">
<i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</ButtonGroup>
</div>
<ButtonGroup className="mb-2">
<ButtonDropdown
isOpen={this.state.drp_warning1}
toggle={() =>
this.setState({
drp_warning1: !this.state.drp_warning1
})
}
>
<Button id="caret" color="warning">
Warning
</Button>
<DropdownToggle caret color="warning">
<i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</ButtonGroup>
<ButtonGroup className="mb-2">
<ButtonDropdown
isOpen={this.state.drp_danger1}
toggle={() =>
this.setState({
drp_danger1: !this.state.drp_danger1
})
}
>
<Button id="caret" color="danger">
Danger
</Button>
<DropdownToggle caret color="danger">
<i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</ButtonGroup>
</CardBody>
</Card>
</Col>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Sizing</h4>
<p className="card-title-desc"> Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.</p>
<ButtonGroup className="mb-2">
<ButtonDropdown
isOpen={this.state.drp_secondary}
toggle={() =>
this.setState({
drp_secondary: !this.state.drp_secondary
})
}
>
<DropdownToggle
caret
color="primary"
size="lg"
>
Large button {" "}
<i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</ButtonGroup>{" "}
<ButtonGroup className="mb-2">
<ButtonDropdown
isOpen={this.state.drp_light_large}
toggle={() =>
this.setState({
drp_light_large: !this.state.drp_light_large
})
}
>
<Button id="caret" color="light" size="lg">
Large Button
</Button>
<DropdownToggle caret color="light" size="lg">
<i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</ButtonGroup>
<ButtonGroup className="mb-2">
<ButtonDropdown
isOpen={this.state.drp_secondary_sm}
toggle={() =>
this.setState({
drp_secondary_sm: !this.state.drp_secondary_sm
})
}
>
<DropdownToggle
caret
color="primary"
size="sm"
>
Small button {" "}
<i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</ButtonGroup>{" "}
<ButtonGroup className="mb-2">
<ButtonDropdown
isOpen={this.state.drp_light_sm}
toggle={() =>
this.setState({
drp_light_sm: !this.state.drp_light_sm
})
}
>
<Button id="caret" color="light" size="sm">
Small Button
</Button>
<DropdownToggle caret color="light" size="sm">
<i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</ButtonGroup>{" "}
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Dropup variation</h4>
<p className="card-title-desc">Trigger dropdown menus above elements by adding <code className="highlighter-rouge">.dropup</code> to the parent element.</p>
<div className="d-flex">
<Dropdown
isOpen={this.state.dropup1}
direction="up"
toggle={() =>
this.setState({ dropup1: !this.state.dropup1 })
}
>
<DropdownToggle color="light">
Dropup <i className="mdi mdi-chevron-up"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</Dropdown>
<ButtonDropdown
direction="up"
isOpen={this.state.drp_up11}
toggle={() =>
this.setState({
drp_up11: !this.state.drp_up11
})
}
>
<Button id="caret" color="light">
Split dropup
</Button>
<DropdownToggle caret color="light">
<i className="mdi mdi-chevron-up"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</div>
</CardBody>
</Card>
</Col>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Menu alignment</h4>
<p className="card-title-desc">Add <code className="highlighter-rouge">.dropdown-menu-right</code> to a <code className="highlighter-rouge">.dropdown-menu</code> to right align the dropdown menu.</p>
<ButtonDropdown
isOpen={this.state.drop_align}
direction="right"
toggle={() =>
this.setState({ drop_align: !this.state.drop_align })
}
>
<DropdownToggle
caret
color="secondary"
className="btn btn-secondary"
>
Menu is right-aligned{" "}
<i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu className="dropdown-menu-right-custom">
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Dropright variation</h4>
<p className="card-title-desc">Trigger dropdown menus at the right of the elements by adding <code>.dropright</code> to the parent element.</p>
<div className="d-flex">
<Dropdown
isOpen={this.state.info_dropup1}
direction="right"
toggle={() =>
this.setState({
info_dropup1: !this.state.info_dropup1
})
}
>
<DropdownToggle color="light" caret>
Dropright <i className="mdi mdi-chevron-right"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</Dropdown>
<ButtonDropdown
direction="right"
isOpen={this.state.infodrp_up11}
toggle={() =>
this.setState({
infodrp_up11: !this.state.infodrp_up11
})
}
>
<Button id="caret" color="light">
Split dropright
</Button>
<DropdownToggle caret color="light">
<i className="mdi mdi-chevron-right"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</div>
</CardBody>
</Card>
</Col>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Dropleft variation</h4>
<p className="card-title-desc">Trigger dropdown menus at the right of the elements by adding <code>.dropleft</code> to the parent element.</p>
<div className="d-flex">
<Dropdown
isOpen={this.state.info_dropup111}
direction="left"
toggle={() =>
this.setState({
info_dropup111: !this.state.info_dropup111
})
}
>
<DropdownToggle color="light">
<i className="mdi mdi-chevron-left"></i> Dropleft
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</Dropdown>
<ButtonDropdown
direction="left"
isOpen={this.state.infodrp_up1111}
toggle={() =>
this.setState({
infodrp_up1111: !this.state.infodrp_up1111
})
}
>
<DropdownToggle caret color="light">
<i className="mdi mdi-chevron-left"></i>
</DropdownToggle>
<Button id="caret" color="light">
Split dropleft
</Button>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</div>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #20
| Source File: UiButtons.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="Buttons" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Default buttons</h4>
<p className="card-title-desc">Bootstrap includes six predefined button styles, each serving its own semantic purpose.</p>
<div className="button-items">
<Button
color="primary"
className=" waves-effect waves-light mr-1"
>
Primary
</Button>
<Button
color="light"
className="waves-effect mr-1"
>
Light
</Button>
<Button
color="success"
className="waves-effect waves-light mr-1"
>
Success
</Button>
<Button
color="info"
className="waves-effect waves-light mr-1"
>
Info
</Button>
<Button
color="warning"
className=" waves-effect waves-light mr-1"
>
Warning
</Button>
<Button
color="danger"
className="waves-effect waves-light mr-1"
>
Danger
</Button>
<Button
color="dark"
className="waves-effect waves-light mr-1"
>
Dark
</Button>
<Button color="link" className="waves-effect mr-1">
Link
</Button>
<Button
color="secondary"
className="waves-effect"
>
Secondary
</Button>
</div>
</CardBody>
</Card>
</Col>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Outline buttons</h4>
<p className="card-title-desc">Add one another property like <code className="highlighter-rouge">outline</code> ones to remove all background images and colors on any button.</p>
<div className="button-items">
<Button
color="primary"
outline
className="waves-effect waves-light mr-1"
>
Primary
</Button>
<Button color="light" outline className="waves-effect mr-1">
Light
</Button>
<Button
color="success"
outline
className="waves-effect waves-light mr-1"
>
Success
</Button>
<Button
color="info"
outline
className="waves-effect waves-light mr-1"
>
Info
</Button>
<Button
color="warning"
outline
className="waves-effect waves-light mr-1"
>
Warning
</Button>
<Button
color="danger"
outline
className="waves-effect waves-light mr-1"
>
Danger
</Button>
<Button
color="dark"
outline
className="waves-effect waves-light mr-1"
>
Dark
</Button>
<Button color="secondary" outline className="waves-effect">
Secondary
</Button>
</div>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Rounded buttons</h4>
<p className="card-title-desc">Use class <code>.btn-rounded</code> for button round border.</p>
<div className="button-items">
<Button
color="primary"
className="btn-rounded waves-effect waves-light mr-1"
>
Primary
</Button>
<Button
color="light"
className="btn-rounded waves-effect mr-1"
>
Light
</Button>
<Button
color="success"
className="btn-rounded waves-effect waves-light mr-1"
>
Success
</Button>
<Button
color="info"
className="btn-rounded waves-effect waves-light mr-1"
>
Info
</Button>
<Button
color="warning"
className="btn-rounded waves-effect waves-light mr-1"
>
Warning
</Button>
<Button
color="danger"
className="btn-rounded waves-effect waves-light mr-1"
>
Danger
</Button>
<Button
color="dark"
className="btn-rounded waves-effect waves-light mr-1"
>
Dark
</Button>
<Button color="link" className="waves-effect mr-1">
Link
</Button>
<Button
color="secondary"
className="btn-rounded waves-effect"
>
Secondary
</Button>
</div>
</CardBody>
</Card>
</Col>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Buttons with icon</h4>
<p className="card-title-desc">Add icon in button.</p>
<div className="button-items">
<Button color="primary" type="button" className="waves-effect waves-light mr-1">
Primary <i className="ri-arrow-right-line align-middle ml-2"></i>
</Button>
<Button color="success" type="button" className="waves-effect waves-light mr-1">
<i className="ri-check-line align-middle mr-2"></i> Success
</Button>
<Button color="warning" type="button" className="waves-effect waves-light mr-1">
<i className="ri-error-warning-line align-middle mr-2"></i> Warning
</Button>
<Button color="danger" type="button" className="waves-effect waves-light mr-1">
<i className="ri-close-line align-middle mr-2"></i> Danger
</Button>
</div>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Buttons Sizes</h4>
<p className="card-title-desc">Add Property size=""<code>lg</code> or <code>sm</code> for additional sizes.</p>
<div className="button-items">
<Button
color="primary"
size="lg"
className="waves-effect waves-light mr-1"
>
Large button
</Button>
<Button
color="light"
size="lg"
className="waves-effect mr-1"
>
Large button
</Button>
<Button
color="primary"
size="sm"
className="waves-effect waves-light mr-1"
>
Small button
</Button>
<Button
color="light"
size="sm"
className="waves-effect"
>
Small button
</Button>
</div>
</CardBody>
</Card>
</Col>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Buttons width</h4>
<p className="card-title-desc">Add <code>.w-xs</code>, <code>.w-sm</code>, <code>.w-md</code> and <code> .w-lg</code> className for additional buttons width.</p>
<div className="button-items">
<Button type="button" color="primary" className="w-xs waves-effect waves-light mr-1">Xs</Button>
<Button type="button" color="danger" className="w-sm waves-effect waves-light mr-1">Small</Button>
<Button type="button" color="warning" className="w-md waves-effect waves-light mr-1">Medium</Button>
<Button type="button" color="success" className="w-lg waves-effect waves-light">Large</Button>
</div>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Button tags</h4>
<p className="card-title-desc">The <code className="highlighter-rouge">.btn</code>
classes are designed to be used with the <code
className="highlighter-rouge"><button></code> element.
However, you can also use these classes on <code
className="highlighter-rouge"><Link></code> or <code
className="highlighter-rouge"><input></code> elements (though
some browsers may apply a slightly different rendering).</p>
<div className="button-items">
<Link
className="btn btn-primary waves-effect waves-light"
to="#"
role="button"
>
Link
</Link>
<Button
color="success"
className="waves-effect waves-light mr-1"
type="submit"
>
Button
</Button>
<input
className="btn btn-info mr-1"
type="button"
value="Input"
/>
<input
className="btn btn-danger mr-1"
type="submit"
value="Submit"
/>
<input
className="btn btn-warning mr-1"
type="reset"
value="Reset"
/>
</div>
</CardBody>
</Card>
</Col>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Toggle states</h4>
<p className="card-title-desc">Add <code className="highlighter-rouge">data-toggle="button"</code>
to toggle a button’s <code className="highlighter-rouge">active</code>
state. If you’re pre-toggling a button, you must manually add the <code
className="highlighter-rouge">.active</code> class
<strong>and</strong> <code
className="highlighter-rouge">aria-pressed="true"</code> to the
<code className="highlighter-rouge"><button></code>.
</p>
<div className="button-items">
<ButtonToggle
color="primary"
className="btn btn-primary waves-effect waves-light"
>
Single toggle
</ButtonToggle>
</div>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Block Buttons</h4>
<p className="card-title-desc">Create block level buttons—those that span the full width of a parent—by adding property <code
className="highlighter-rouge">block</code>.</p>
<div className="button-items">
<Button
color="primary"
size="lg"
block
className="waves-effect waves-light"
>
Block level button
</Button>
<Button
color="light"
size="sm"
block
className="waves-effect"
>
Block level button
</Button>
</div>
</CardBody>
</Card>
</Col>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Checkbox & Radio Buttons</h4>
<p className="card-title-desc">Bootstrap’s <code
className="highlighter-rouge">.button</code> styles can be applied to
other elements, such as <code className="highlighter-rouge">
<label></code>s, to provide checkbox or radio style button
toggling. Add <code
className="highlighter-rouge">data-toggle="buttons"</code> to a
<code className="highlighter-rouge">.btn-group</code> containing those
modified buttons to enable toggling in their respective styles.</p>
<Row>
<Col xl={6}>
<div
className="btn-group btn-group-toggle"
data-toggle="buttons"
>
<Label
className=
{
this.state.check1
? "btn btn-primary active"
: "btn btn-primary"
}
>
<Input type="checkbox" defaultChecked
onClick={() =>
this.setState({
check1: !this.state.check1,
})
}
/> Checked-1
</Label>
<Label
className=
{
this.state.check2
? "btn btn-primary active"
: "btn btn-primary"
}
>
<Input type="checkbox"
onClick={() =>
this.setState({
check2: !this.state.check2,
})
}
/> Checked-2
</Label>
<Label
className=
{
this.state.check3
? "btn btn-primary active"
: "btn btn-primary"
}
>
<Input type="checkbox"
onClick={() =>
this.setState({
check3: !this.state.check3
})
}
/> Checked-3
</Label>
</div>
</Col>
<Col xl={6}>
<div
className="btn-group btn-group-toggle"
data-toggle="buttons"
>
<Label
className=
{
this.state.radio1
? "btn btn-light active"
: "btn btn-light"
}
>
<Input type="radio" name="options" id="option1" defaultChecked
onClick={() =>
this.setState({
radio1: true,
radio2: false,
radio3: false
})
}
/> Active
</Label>
<Label
className=
{
this.state.radio2
? "btn btn-light active"
: "btn btn-light"
}
>
<Input type="radio" name="options" id="option1"
onClick={() =>
this.setState({
radio1: false,
radio2: true,
radio3: false
})
}
/> Radio
</Label>
<Label
className=
{
this.state.radio3
? "btn btn-light active"
: "btn btn-light"
}
>
<Input type="radio" name="options" id="option1"
onClick={() =>
this.setState({
radio1: false,
radio2: false,
radio3: true
})
}
/> Radio
</Label>
</div>
</Col>
</Row>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Button group</h4>
<p className="card-title-desc">Wrap a series of buttons with <code
className="highlighter-rouge">.btn</code> in <code
className="highlighter-rouge">.btn-group</code>.</p>
<Row>
<Col md={6}>
<ButtonGroup>
<Button color="primary" >
Left
</Button>
<Button color="primary" >
Middle
</Button>
<Button color="primary">
Right
</Button>
</ButtonGroup>
</Col>
<Col md={6}>
<div className="btn-group mt-4 mt-md-0" role="group" aria-label="Basic example">
<Button type="button" color="light"><i className="ri-menu-2-line"></i></Button>
<Button type="button" color="light"><i className="ri-menu-5-line"></i></Button>
<Button type="button" color="light"><i className="ri-menu-3-line"></i></Button>
</div>
</Col>
</Row>
</CardBody>
</Card>
</Col>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Button toolbar</h4>
<p className="card-title-desc">Combine sets of button groups into
button toolbars for more complex components. Use utility classNamees as
needed to space out groups, buttons, and more.</p>
<ButtonToolbar >
<ButtonGroup>
<Button color="light">
1
</Button>
<Button color="light">
2
</Button>
<Button color="light">
3
</Button>
<Button color="light">
4
</Button>
</ButtonGroup>
<ButtonGroup className="ml-2">
<Button color="light">
5
</Button>
<Button color="light">
6
</Button>
<Button color="light" >
7
</Button>
</ButtonGroup>
<ButtonGroup className="ml-2">
<Button color="light" >
8
</Button>
</ButtonGroup>
</ButtonToolbar >
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Sizing</h4>
<p className="card-title-desc">Instead of applying button sizing
classes to every button in a group, just add property size=""<code
className="highlighter-rouge">.btn-group-*</code> to each <code
className="highlighter-rouge">.btn-group</code>, including each one
when nesting multiple groups.</p>
<ButtonGroup size="lg">
<Button color="primary">
Left
</Button>
<Button color="primary">
Middle
</Button>
<Button color="primary" >
Right
</Button>
</ButtonGroup>
<br />
<ButtonGroup className="mt-2">
<Button color="light" >
Left
</Button>
<Button color="light" >
Middle
</Button>
<Button color="light">
Right
</Button>
</ButtonGroup>
<br />
<ButtonGroup size="sm" className="mt-2">
<Button color="danger">
Left
</Button>
<Button color="danger">
Middle
</Button>
<Button color="danger" >
Right
</Button>
</ButtonGroup>
</CardBody>
</Card>
</Col>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Vertical variation</h4>
<p className="card-title-desc">Make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.</p>
<ButtonGroup vertical>
<Button
type="button"
color="light"
>
Button
</Button>
<ButtonDropdown
isOpen={this.state.drp_link}
toggle={() =>
this.setState({ drp_link: !this.state.drp_link })
}
>
<DropdownToggle caret color="light">
Dropdown <i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Dropdown link</DropdownItem>
<DropdownItem>Dropdown link</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
<Button
color="light"
type="button"
>
Button
</Button>
<Button
color="light"
type="button"
>
Button
</Button>
</ButtonGroup>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #21
| Source File: Header.js From light-blue-react-template with MIT License | 4 votes |
|
render() {
return (
<Navbar className={`d-print-none `}>
<div className={s.burger}>
<NavLink
onClick={this.toggleSidebar}
className={`d-md-none ${s.navItem} text-white`}
href="#"
>
<BurgerIcon className={s.headerIcon} />
</NavLink>
</div>
<div className={`d-print-none ${s.root}`}>
<UncontrolledAlert
className={`${s.alert} mr-3 d-lg-down-none animate__animated animate__bounceIn animate__delay-1s`}
>
Check out Light Blue{" "}
<button
className="btn-link"
onClick={() => this.setState({ settingsOpen: true })}
>
<SettingsIcon className={s.settingsIcon} />
</button>{" "}
on the right!
</UncontrolledAlert>
<Collapse
className={`${s.searchCollapse} ml-lg-0 mr-md-3`}
isOpen={this.state.searchOpen}
>
<InputGroup
className={`${s.navbarForm} ${
this.state.searchFocused ? s.navbarFormFocused : ""
}`}
>
<InputGroupAddon addonType="prepend" className={s.inputAddon}>
<InputGroupText>
<i className="fa fa-search" />
</InputGroupText>
</InputGroupAddon>
<Input
id="search-input-2"
placeholder="Search..."
className="input-transparent"
onFocus={() => this.setState({ searchFocused: true })}
onBlur={() => this.setState({ searchFocused: false })}
/>
</InputGroup>
</Collapse>
<Form className="d-md-down-none mr-3 ml-3" inline>
<FormGroup>
<InputGroup className={`input-group-no-border ${s.searchForm}`}>
<InputGroupAddon addonType="prepend">
<InputGroupText className={s.inputGroupText}>
<SearchIcon className={s.headerIcon} />
</InputGroupText>
</InputGroupAddon>
<Input
id="search-input"
className="input-transparent"
placeholder="Search Dashboard"
/>
</InputGroup>
</FormGroup>
</Form>
<Nav className="ml-md-0">
<Dropdown
nav
isOpen={this.state.notificationsOpen}
toggle={this.toggleNotifications}
id="basic-nav-dropdown"
className={`${s.notificationsMenu}`}
>
<DropdownToggle nav caret style={{ color: "#C1C3CF", padding: 0 }}>
<span
className={`${s.avatar} rounded-circle thumb-sm float-left`}
>
<img src={avatar} alt="..." />
</span>
<span className={`small d-sm-down-none ${s.accountCheck}`}>Philip smith</span>
<Badge className={`d-sm-down-none ${s.badge}`} color="danger">
9
</Badge>
</DropdownToggle>
<DropdownMenu
right
className={`${s.notificationsWrapper} py-0 animate__animated animate__faster animate__fadeInUp`}
>
<Notifications />
</DropdownMenu>
</Dropdown>
<NavItem className="d-lg-none">
<NavLink
onClick={this.toggleSearchOpen}
className={s.navItem}
href="#"
>
<SearchIcon addId='header-search' className={s.headerIcon} />
</NavLink>
</NavItem>
<Dropdown
className="d-none d-sm-block"
nav
isOpen={this.state.messagesOpen}
toggle={this.toggleMessagesDropdown}
>
<DropdownToggle nav className={`d-sm-down-none ${s.navItem} text-white`}>
<MessageIcon className={s.headerIcon} />
</DropdownToggle>
<DropdownMenu className={`${s.dropdownMenu} ${s.messages}`}>
<DropdownItem>
<img className={s.image} src={sender1} alt="" />
<div className={s.details}>
<div>Jane Hew</div>
<div className={s.text}>Hey, John! How is it going? ...</div>
</div>
</DropdownItem>
<DropdownItem>
<img className={s.image} src={sender2} alt="" />
<div className={s.details}>
<div>Alies Rumiancaŭ</div>
<div className={s.text}>
I will definitely buy this template
</div>
</div>
</DropdownItem>
<DropdownItem>
<img className={s.image} src={sender3} alt="" />
<div className={s.details}>
<div>Michał Rumiancaŭ</div>
<div className={s.text}>
Is it really Lore ipsum? Lore ...
</div>
</div>
</DropdownItem>
<DropdownItem>
{/* eslint-disable-next-line */}
<a href="#" className="text-white">
See all messages <ArrowIcon className={s.headerIcon} maskName="messagesArrow" />
</a>
</DropdownItem>
</DropdownMenu>
</Dropdown>
<NavItem className={`${s.divider} d-none d-sm-block`} />
<Dropdown
className="d-none d-sm-block"
nav
isOpen={this.state.settingsOpen}
toggle={this.toggleSettingsDropdown}
>
<DropdownToggle nav className={`${s.navItem} text-white`}>
<SettingsIcon addId='header-settings' className={s.headerIcon} />
</DropdownToggle>
<DropdownMenu className={`${s.dropdownMenu} ${s.settings}`}>
<h6>Sidebar on the</h6>
<ButtonGroup size="sm">
<Button
color="primary"
onClick={() => this.moveSidebar("left")}
className={
this.props.sidebarPosition === "left" ? "active" : ""
}
>
Left
</Button>
<Button
color="primary"
onClick={() => this.moveSidebar("right")}
className={
this.props.sidebarPosition === "right" ? "active" : ""
}
>
Right
</Button>
</ButtonGroup>
<h6 className="mt-2">Sidebar</h6>
<ButtonGroup size="sm">
<Button
color="primary"
onClick={() => this.toggleVisibilitySidebar("show")}
className={
this.props.sidebarVisibility === "show" ? "active" : ""
}
>
Show
</Button>
<Button
color="primary"
onClick={() => this.toggleVisibilitySidebar("hide")}
className={
this.props.sidebarVisibility === "hide" ? "active" : ""
}
>
Hide
</Button>
</ButtonGroup>
</DropdownMenu>
</Dropdown>
<Dropdown
className="d-none d-sm-block"
nav
isOpen={this.state.supportOpen}
toggle={this.toggleSupportDropdown}
>
<DropdownToggle nav className={`${s.navItem} text-white`}>
<BellIcon className={s.headerIcon} />
<div className={s.count}></div>
</DropdownToggle>
<DropdownMenu right className={`${s.dropdownMenu} ${s.support}`}>
<DropdownItem>
<Badge color="danger">
<i className="fa fa-bell-o" />
</Badge>
<div className={s.details}>Check out this awesome ticket</div>
</DropdownItem>
<DropdownItem>
<Badge color="warning">
<i className="fa fa-question-circle" />
</Badge>
<div className={s.details}>What is the best way to get ...</div>
</DropdownItem>
<DropdownItem>
<Badge color="success">
<i className="fa fa-info-circle" />
</Badge>
<div className={s.details}>
This is just a simple notification
</div>
</DropdownItem>
<DropdownItem>
<Badge color="info">
<i className="fa fa-plus" />
</Badge>
<div className={s.details}>12 new orders has arrived today</div>
</DropdownItem>
<DropdownItem>
<Badge color="danger">
<i className="fa fa-tag" />
</Badge>
<div className={s.details}>
One more thing that just happened
</div>
</DropdownItem>
<DropdownItem>
{/* eslint-disable-next-line */}
<a href="#" className="text-white">
See all tickets <ArrowIcon className={s.headerIcon} maskName="bellArrow" />
</a>
</DropdownItem>
</DropdownMenu>
</Dropdown>
<NavItem>
<NavLink
onClick={this.doLogout}
className={`${s.navItem} text-white`}
href="#"
>
<PowerIcon className={s.headerIcon} />
</NavLink>
</NavItem>
</Nav>
</div>
</Navbar>
);
}
Example #22
| Source File: footerSection.js From ErgoAuctionHouse with MIT License | 4 votes |
|
render() {
return (
<span style={{"display": "contents"}}>
<FakeModal bid={this.state.bid} modal={this.state.modal} box={this.state.box}
original={this.state.original} isOpen={this.state.fakeOpen}
close={() => this.setState({fakeOpen: !this.state.fakeOpen})}/>
<CardFooter>
<Col md={6} className="widget-description">
<Row>
{this.props.box.curBid >= this.props.box.minBid && <span>
<b className="fsize-1">
{longToCurrency(this.props.box.curBid, -1, this.props.box.currency)}{' '}{this.props.box.currency}
</b>{' '}
<text
style={{fontSize: '10px'}}
className="text-success pl-1 pr-1"
>
{this.props.box.increase}%
<FontAwesomeIcon icon={faAngleUp}/>
</text>
</span>}
{this.props.box.curBid < this.props.box.minBid && <span>
<i
style={{fontSize: '12px'}}
className="pl-1 pr-1"
>
No bids yet
</i>{' '}
</span>}
</Row>
</Col>
<Col md={6} className="justify-content-end ml-3">
<div className="widget-content">
<div className="widget-content-outer">
<div className="widget-content-wrapper">
{this.props.box.remTime}
</div>
<div className="widget-progress-wrapper">
<Progress
className="progress-bar-xs progress-bar-animated-alt"
value={this.props.box.done}
/>
</div>
</div>
</div>
</Col>
</CardFooter>
{!this.props.box.isFinished && <ButtonGroup>
<div className="d-block text-center">
<button className="btn-icon btn-icon-only btn btn-outline-primary"
onClick={(e) => {
e.preventDefault();
this.props.openBid();
}}>
<i className="pe-7s-edit btn-icon-wrapper"> </i>
</button>
</div>
<button type="button" className="btn btn-outline-primary btn-sm"
style={{fontSize: 13}}
onClick={(e) => {
if (!isWalletSaved()) {
showMsg(
'In order to place bids, you have to configure the wallet first.',
true
);
return
}
e.preventDefault();
this.props.loading(true)
bidHelper(this.props.box.nextBid, this.props.box, this.props.assemblerModal, this.openFake).finally(() => this.props.loading(false))
}}>
<text>
Bid
</text>
{' '}
<text>
for{' '}
<b>
{longToCurrency(this.props.box.nextBid, -1, this.props.box.currency)}{' '} {this.props.box.currency}
</b>
</text>
</button>
{this.props.box.instantAmount !== -1 &&
<button type="button" className="btn btn-outline-dark btn-sm"
style={{fontSize: 13}}
onClick={(e) => {
if (!isWalletSaved()) {
showMsg(
'In order to place bids, you have to configure the wallet first.',
true
);
return
}
e.preventDefault();
this.props.loading(true)
bidHelper(this.props.box.instantAmount, this.props.box, this.props.assemblerModal, this.openFake).finally(() => this.props.loading(false))
}}>
<text>
Buy
</text>
{' '}
<text>
for{' '}
<b>
{longToCurrency(this.props.box.instantAmount, -1, this.props.box.currency)}{' '} {this.props.box.currency}
</b>
</text>
</button>}
</ButtonGroup>}
{this.props.box.isFinished &&
<p className="text-danger mr-2 ml-2">
{this.props.box.remTime === 0 && <text>
This auction is already finished!
</text>}
{this.props.box.remTime !== 0 && <text>
This auction has been bought with the "Instant Buy" option.
</text>}
</p>}
</span>
);
}
