reactstrap#Dropdown JavaScript Examples
The following examples show how to use
reactstrap#Dropdown.
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: LanguageDropdown.js From Simplify-Testing-with-React-Testing-Library with MIT License | 6 votes |
|
LanguageDropdown = () => {
const [dropdownOpen, setDropdownOpen] = React.useState(false)
const [language, setLanguage] = React.useState('')
const languages = ['JavaScript', 'Ruby', 'Java', 'C#']
const toggle = () => setDropdownOpen(prevState => !prevState)
return (
<div className="p-2 d-inline-block">
<Dropdown isOpen={dropdownOpen} toggle={toggle}>
<DropdownToggle color="primary" caret>
Programming Language
</DropdownToggle>
<DropdownMenu style={{ width: '214px' }}>
{languages.map(lang => {
return (
<DropdownItem key={lang} onClick={() => setLanguage(lang)}>
{lang}
</DropdownItem>
)
})}
</DropdownMenu>
</Dropdown>
{language ? <h4>You selected: {language}</h4> : null}
</div>
)
}
Example #2
| Source File: LteNavDropdown.jsx From react-lte with MIT License | 6 votes |
|
LteNavDropdown = ({ icon, badgeText, badgeColor, children }) => {
const [dropdownOpen, setDropdownOpen] = useState(false);
const toggle = () => setDropdownOpen(!dropdownOpen);
return (
<Dropdown tag='li' isOpen={dropdownOpen} toggle={toggle}>
<DropdownToggle nav>
<FontAwesomeIcon icon={icon} />
<Badge color={badgeColor} className='navbar-badge'>
{badgeText}
</Badge>
</DropdownToggle>
<DropdownMenu right className='dropdown-menu-lg'>
{children}
</DropdownMenu>
</Dropdown>
);
}
Example #3
| Source File: ProfileMenu.js From gedge-platform with Apache License 2.0 | 6 votes |
|
render() {
let username = "Admin";
if (localStorage.getItem("logonUser")) {
// const obj = JSON.parse(localStorage.getItem("authUser"));
// const uNm = obj.email.split("@")[0];
// username = uNm.charAt(0).toUpperCase() + uNm.slice(1);
username = localStorage.getItem("logonUser");
}
return (
<React.Fragment>
<Dropdown isOpen={this.state.menu} toggle={this.toggle} className="d-inline-block user-dropdown">
<DropdownToggle tag="button" className="btn header-item waves-effect" id="page-header-user-dropdown">
<img className="rounded-circle header-profile-user mr-1" src={avatar2} alt="Header Avatar" />
<span className="d-none d-xl-inline-block ml-1 text-transform">{username}</span>
<i className="mdi mdi-chevron-down d-none ml-1 d-xl-inline-block"></i>
</DropdownToggle>
<DropdownMenu right>
<DropdownItem href="#"><i className="ri-user-line align-middle mr-1"></i> {this.props.t('Profile')}</DropdownItem>
{/* <DropdownItem href="#"><i className="ri-wallet-2-line align-middle mr-1"></i> {this.props.t('My Wallet')}</DropdownItem>
<DropdownItem className="d-block" href="#"><span className="badge badge-success float-right mt-1">11</span><i className="ri-settings-2-line align-middle mr-1"></i> {this.props.t('Settings')}</DropdownItem>
<DropdownItem href="#"><i className="ri-lock-unlock-line align-middle mr-1"></i> {this.props.t('Lock screen')}</DropdownItem>
<DropdownItem divider /> */}
<DropdownItem className="text-danger" href="/logout"><i className="ri-shut-down-line align-middle mr-1 text-danger"></i> {this.props.t('Logout')}</DropdownItem>
</DropdownMenu>
</Dropdown>
</React.Fragment>
);
}
Example #4
| Source File: Job.component.js From hiring-system with GNU General Public License v3.0 | 5 votes |
|
Job = ({ job }) => {
const {
userId,
jobTitle,
jobCreatorLogo,
jobLocation,
// jobApplyURL,
jobCreator,
dateModified,
jobDescription,
jobWorkType,
} = job;
const [dropdownOpen, setDropdownOpen] = useState(false);
const toggle = () => setDropdownOpen((prevState) => !prevState);
return (
<ListGroupItem className="job-card" key={userId}>
<div className="d-flex flex-column">
<div className="job-card--header mb-3">
{jobCreatorLogo ? (
<img className="job-image" src={jobCreatorLogo} alt={jobCreator} />
) : (
<h3 className="company mr-4">{jobCreator}</h3>
)}
<span className="text-tiny job-time">
{moment(dateModified).fromNow()}
</span>
<Dropdown
className="drop-down-icon"
isOpen={dropdownOpen}
toggle={toggle}
>
<DropdownToggle>
<FontAwesomeIcon icon={faEllipsisV} />
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>
<FontAwesomeIcon icon={faHeart} className="mr-1" /> Save Job
</DropdownItem>
<DropdownItem>
<FontAwesomeIcon icon={faBan} className="mr-2" />
Not Interested
</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
<div className="mr-auto">
<h4 className="job-card--title text-dark">{jobTitle}</h4>
<h6 className="text-muted">
<FontAwesomeIcon icon={faMapMarkerAlt} />
<span className="ml-2">{jobLocation}</span>
</h6>
<p>
{jobDescription.replace(/(<([^>]+)>)/gi, "").substring(0, 100)} ...
</p>
<Badge className="p-2 mt-1 mr-2" color="primary">
{jobWorkType}
</Badge>
</div>
</div>
</ListGroupItem>
);
}
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: RevenueByLocations.js From gedge-platform with Apache License 2.0 | 5 votes |
|
render() {
return (
<React.Fragment>
<Col lg={4}>
<Card>
<CardBody>
<Dropdown className="float-right" isOpen={this.state.menu} toggle={() => this.setState({menu : !this.state.menu})}>
<DropdownToggle tag="i" className="darrow-none card-drop" aria-expanded="false">
<i className="mdi mdi-dots-vertical"></i>
</DropdownToggle>
<DropdownMenu right>
<DropdownItem href="">Sales Report</DropdownItem>
<DropdownItem href="">Export Report</DropdownItem>
<DropdownItem href="">Profit</DropdownItem>
<DropdownItem href="">Action</DropdownItem>
</DropdownMenu>
</Dropdown>
<h4 className="card-title mb-4">Revenue by Locations</h4>
<div id="usa-vectormap" style={{height: "196px"}}>
<Vector
value="us_aea"
width="200"
color="#e8ecf4"
/>
</div>
<Row className="justify-content-center">
<Col xl={5} md={6}>
<div className="mt-2">
<div className="clearfix py-2">
<h5 className="float-right font-size-16 m-0">$ 2542</h5>
<p className="text-muted mb-0 text-truncate">California :</p>
</div>
<div className="clearfix py-2">
<h5 className="float-right font-size-16 m-0">$ 2245</h5>
<p className="text-muted mb-0 text-truncate">Nevada :</p>
</div>
</div>
</Col>
<Col xl={{size:5, offset:1}} md={6}>
<div className="mt-2">
<div className="clearfix py-2">
<h5 className="float-right font-size-16 m-0">$ 2156</h5>
<p className="text-muted mb-0 text-truncate">Montana :</p>
</div>
<div className="clearfix py-2">
<h5 className="float-right font-size-16 m-0">$ 1845</h5>
<p className="text-muted mb-0 text-truncate">Texas :</p>
</div>
</div>
</Col>
</Row>
<div className="text-center mt-4">
<Link to="#" className="btn btn-primary btn-sm">Learn more</Link>
</div>
</CardBody>
</Card>
</Col>
</React.Fragment>
);
}
Example #7
| Source File: Appdetail.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
const { params } = this.props.match;
// <tr>
// <td>클러스터</td>
// <td>
// cluster1
// </td>
// </tr>
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="App Detail" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col lg={4}>
<Card className="checkout-order-summary">
<CardBody>
{/* <div className="p-3 bg-light mb-4"> */}
<h5 className="text-dark font-weight-bold">{params.name} </h5>
<Card>
</Card>
<Row>
<div>
<Link
onClick={() =>
this.setState({ isModal: !this.state.modal })
}
to="#"
className="popup-form btn btn-primary"
>
정보수정
</Link>
</div>
<Modal
size="xl"
isOpen={this.state.isModal}
centered={true}
toggle={() =>
this.setState({ isModal: !this.state.isModal })
}
>
<ModalHeader
toggle={() =>
this.setState({ isModal: !this.state.isModal })
}
>
Form
</ModalHeader>
<ModalBody>
<Form>
<Row>
<Col lg={4}>
<FormGroup>
<Label htmlFor="name">Name</Label>
<Input
type="text"
className="form-control"
id="name"
placeholder="Enter Name"
required
/>
</FormGroup>
</Col>
<Col lg={4}>
<FormGroup>
<Label htmlFor="email">Email</Label>
<Input
type="email"
className="form-control"
id="email"
placeholder="Enter Email"
required
/>
</FormGroup>
</Col>
<Col lg={4}>
<FormGroup>
<Label htmlFor="password">Password</Label>
<Input
type="text"
className="form-control"
id="password"
placeholder="Enter Password"
required
/>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg={12}>
<FormGroup>
<Label htmlFor="subject">Subject</Label>
<textarea
className="form-control"
id="subject"
rows="3"
></textarea>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg={12}>
<div className="text-right">
<Button
type="submit"
color="primary"
>
Submit
</Button>
</div>
</Col>
</Row>
</Form>
</ModalBody>
</Modal>
<Col sm={3}>
{/* 정보 수정 */}
{/* 더보기 */}
<Dropdown
isOpen={this.state.singlebtn}
toggle={() =>
this.setState({ singlebtn: !this.state.singlebtn })
}
>
<DropdownToggle color="primary" caret>
더보기{" "}
<i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem>서비스 수정</DropdownItem>
<DropdownItem>접근 수정</DropdownItem>
<DropdownItem>수정(YAML)</DropdownItem>
<DropdownItem>삭제</DropdownItem>
</DropdownMenu>
</Dropdown>
</Col>
{/* <h4 className="card-title">Popup with form</h4> */}
</Row>
{/* </div> */}
<div className="table-responsive">
<Table responsive className="mb-0">
<thead>
<tr>
<th style={{ width: "100%" }}>상세정보</th>
{/* <th>Examples</th> */}
</tr>
</thead>
<tbody>
<tr>
<td>클러스터</td>
<td>
cluster1
</td>
</tr>
<tr>
<td>프로젝트</td>
<td>
test
</td>
</tr>
<tr>
<td>상태</td>
<td>
Running
</td>
</tr>
<tr>
<td>앱</td>
<td>
redis
</td>
</tr>
<tr>
<td>
버전
</td>
<td>
14.6.1
</td>
</tr>
<tr>
<td>
생성일
</td>
<td>
@@@@
</td>
</tr>
<tr>
<td>
업데이트일
</td>
<td>
@@@@
</td>
</tr>
<tr>
<td>
생성자
</td>
<td>
yby654
</td>
</tr>
</tbody>
</Table>
</div>
</CardBody>
</Card>
</Col>
<Col lg={8}>
<Card>
<CardBody>
{/* <h4 className="card-title">Justify Tabs</h4> */}
{/* <p className="card-title-desc">
Use the tab JavaScript plugin—include it individually or through the compiled{" "} <code className="highlighter-rouge">bootstrap.js</code> file—to extend our navigational tabs and pills to create tabbable panes of local content, even via dropdown menus.
</p> */}
<Nav pills className="navtab-bg nav-justified">
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "5"
})}
onClick={() => {
this.toggle1("5");
}}
>
리소스 상태
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "8"
})}
onClick={() => {
this.toggle1("8");
}}
>
앱 Configurations
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={this.state.activeTab1}>
<TabPane tabId="5" className="p-3">
<Row>
<Col sm="12">
<CardText>
<div className="table-responsive">
{/* <Table className=" table-centered mb-0 table-nowrap"> */}
<Table hover className=" mb-0 table-centered table-nowrap">
<thead>
<tr>
<th className="border-top-0" style={{ width: "110px" }} scope="col">서비스</th>
</tr>
</thead>
<tbody>
<tr>
<div class="div-content-detail">
<div class="div-content-detail-0">
<div className="avatar-xs">
<div className="avatar-title rounded-circle bg-light">
img
</div>
</div>
</div>
<div class="div-content-detail-1">
<div>
<div class="div-content-text-1"><a>redis-7qgzmk-headless</a></div>
<div class="div-contetn-text-2"><a>Headless</a></div>
</div>
</div>
<div class="div-content-detail-2">
<div>
<div class="div-content-text-1">Off</div>
<div class="div-content-text-2">Application Governance</div>
</div>
</div>
<div class="div-content-detail-2">
<div>
<div class="div-content-text-1">None</div>
<div class="div-content-text-2">ClusterIP</div>
</div>
</div>
</div>
</tr>
</tbody>
</Table>
</div>
<div className="table-responsive">
<Table hover className=" mb-0 table-centered table-nowrap">
<thead>
<tr>
<th className="border-top-0" style={{ width: "110px" }} scope="col">디플로이먼트</th>
</tr>
</thead>
<tbody>
<tr>
<div class="div-content-detail">
<div class="div-content-detail-0">
<div className="avatar-xs">
<div className="avatar-title rounded-circle bg-light">
img
</div>
</div>
</div>
<div class="div-content-detail-1">
<div>
<div class="div-content-text-1"><a>redis-7qgzmk-master</a></div>
<div class="div-contetn-text-2"><a>Updated at 21 hours ago</a></div>
</div>
</div>
<div class="div-content-detail-2">
<div>
<div class="div-content-text-1">Running (1/1)</div>
<div class="div-content-text-2">Status</div>
</div>
</div>
<div class="div-content-detail-2">
<div>
<div class="div-content-text-1">v1.0.0</div>
<div class="div-content-text-2">Version</div>
</div>
</div>
</div>
</tr>
</tbody>
</Table>
</div>
</CardText>
</Col>
</Row>
</TabPane>
<TabPane tabId="6" className="p-3">
<Row>
<Col sm="12">
<CardText>
</CardText>
</Col>
</Row>
</TabPane>
<TabPane tabId="7" className="p-3">
<Row>
<Col sm="12">
<CardText>
</CardText>
</Col>
</Row>
</TabPane>
<TabPane tabId="8" className="p-3">
<Row>
<Col sm="12">
<div className="table-responsive" style>
<AceEditor
placeholder="Placeholder Text"
mode="javascript"
theme="monokai"
name="blah2"
onLoad={this.onLoad}
onChange={this.onChange}
fontSize={14}
showPrintMargin={true}
showGutter={true}
highlightActiveLine={true}
value={`function onLoad(editor) {
console.log("seohwa yeonguwonnim babo melong~~~~~~~");
}`}
setOptions={{
enableBasicAutocompletion: false,
enableLiveAutocompletion: false,
enableSnippets: false,
showLineNumbers: true,
tabSize: 3,
}} />
</div>
</Col>
</Row>
</TabPane>
</TabContent>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #8
| Source File: Dropdown.jsx From doc2pen with Creative Commons Zero v1.0 Universal | 4 votes |
|
DropdownComponent = props => {
const [dropdownOpen, setDropdownOpen] = useState(false);
const toggle = () => setDropdownOpen(prevState => !prevState);
const editContext = useContext(EditContext);
const colors = [
"black",
"red",
"orange",
"blue",
"green",
"deeppink",
"darkviolet",
"dodgerblue",
];
const setValue = aItemValue => {
if (colors.includes(aItemValue)) {
if (aItemValue === "dodgerblue") {
return "Light Blue";
} else if (aItemValue === "deeppink") {
return "Pink";
} else if (aItemValue === "darkviolet") {
return "Violet";
} else {
return aItemValue.charAt(0).toUpperCase() + aItemValue.slice(1);
}
} else {
return aItemValue;
}
};
const DropDownOptions = () => {
return (
<div>
{props.items.map((aItem, index) => (
<DropdownItem
onClick={getTargetFunc()}
name={
// prettier-ignore
props.type === "download"
? aItem
: `body${
props.type === "font"
? "Font"
: props.type === "font-weight"
? "FontWeight"
: "Color"
}`
}
value={aItem}
style={{
fontFamily: `${aItem}`,
color: `${aItem}`,
fontWeight: `${aItem}`,
}}
key={index}
>
{setValue(aItem)}
</DropdownItem>
))}
</div>
);
};
const getTargetFunc = () => {
if (
props.type === "font" ||
props.type === "color" ||
props.type === "font-weight"
)
return editContext.onValueChange;
else if (props.type === "download") return editContext.downloadAction;
return editContext.pageSrcHandler;
};
return (
<Dropdown isOpen={dropdownOpen} toggle={toggle}>
<DropdownToggle caret className={styles.drbtn}>
{props.name} ({props.active})
</DropdownToggle>
<DropdownMenu>
<DropDownOptions />
</DropdownMenu>
</Dropdown>
);
}
Example #9
| Source File: Applist.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
const data = {
columns: [
{
label: (
<div className="custom-control custom-checkbox">
{" "}
<Input
type="checkbox"
className="custom-control-input"
id="ordercheck"
/>
<Label className="custom-control-label" htmlFor="ordercheck">
</Label>
</div>
),
field: "checkbox",
sort: "asc",
width: 28,
},
{
label: "이름",
field: "id",
sort: "asc",
width: 78,
},
{
label: "상태",
field: "status",
sort: "asc",
width: 135,
},
{
label: "앱",
field: "appName",
sort: "asc",
width: 93,
},
{
label: "버전",
field: "appVersion",
sort: "asc",
width: 109,
},
{
label: "마지막 업데이트",
field: "updateTime",
sort: "asc",
width: 48,
},
// {
// label: "//invoice",
// field: "//invoice",
// sort: "asc",
// width: 110
// },
{
label: "Action",
field: "action",
sort: "asc",
width: 120,
},
],
rows: [
{
checkbox: (
<div className="custom-control custom-checkbox">
<Input
type="checkbox"
className="custom-control-input"
id="ordercheck1"
/>
<Label className="custom-control-label" htmlFor="ordercheck1">
</Label>
</div>
),
id: (
<Link to="/workload/app/default/1234" className="text-dark font-weight-bold">
1234
</Link>
),
date: "04 Apr, 2020",
billingName: "Walter Brown",
total: "$172",
status: (
<div className="badge badge-soft-success font-size-12">running</div>
),
//invoice: <Button className="btn-rounded" color="light">//invoice <i className="mdi mdi-download ml-2"></i></Button>,
action: (
<>
<Link to="#" className="mr-3 text-primary" id="edit1">
<i className="mdi mdi-pencil font-size-18"></i>
</Link>
<UncontrolledTooltip placement="top" target="edit1">
Edit
</UncontrolledTooltip>
<Link to="#" className="text-danger" id="delete1">
<i className="mdi mdi-trash-can font-size-18"></i>
</Link>
<UncontrolledTooltip placement="top" target="delete1">
Delete
</UncontrolledTooltip>
</>
),
},
],
};
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs
title="앱"
breadcrumbItems={this.state.breadcrumbItems}
/>
<Row>
<Col lg={12}>
<Card>
<CardBody className="pt-0">
<Nav tabs className="nav-tabs-custom mb-4">
<NavItem>
<NavLink
onClick={() => {
this.toggleTab("1");
}}
className={classnames(
{ active: this.state.activeTab === "1" },
"font-weight-bold p-3"
)}
>
All Project
</NavLink>
</NavItem>
<NavItem>
<NavLink
onClick={() => {
this.toggleTab("2");
}}
className={classnames(
{ active: this.state.activeTab === "2" },
"p-3 font-weight-bold"
)}
>
Active
</NavLink>
</NavItem>
<NavItem>
<NavLink
onClick={() => {
this.toggleTab("3");
}}
className={classnames(
{ active: this.state.activeTab === "3" },
" p-3 font-weight-bold"
)}
>
Unpaid
</NavLink>
</NavItem>
</Nav>
<Col sm={6}>
<div>
<Link
to="/workload/app/add"
onClick={() =>
this.setState({
modal_static: true,
isAlertOpen: false,
})
}
className="btn btn-success mb-2"
>
<i className="mdi mdi-plus mr-2"></i> 추가
</Link>
</div>
<Dropdown
isOpen={this.state.singlebtn}
toggle={() =>
this.setState({ singlebtn: !this.state.singlebtn })
}
>
<DropdownToggle color="primary" caret>
프로젝트 <i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem>프로젝트1</DropdownItem>
</DropdownMenu>
</Dropdown>
</Col>
<MDBDataTable responsive data={data} className="mt-4" />
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #10
| Source File: CronjobDetail.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
// console.log(this.props);
const apiList = this.state.apiList;
const { params } = this.props.match;
console.log(this.state.apiList, "jobdetail");
let status = "";
let apitoData = [];
let dataFromApi = apiList.map((list) => {
console.log(list, "list");
if (list.spec.suspend == false) {
status = "READY"
} else {
status = "NOR READY"
}
return {
name: list.metadata.name,
namespace: list.metadata.namespace,
uid: list.metadata.uid,
schedule: list.spec.schedule,
successfulJobsHistoryLimit: list.spec.successfulJobsHistoryLimit,
failedJobsHistoryLimit: list.spec.failedJobsHistoryLimit,
status: status,
backoffLimit: list.spec.backoffLimit,
completions: list.spec.completions,
parallelism: list.spec.parallelism,
// restartCount: list.status.containerStatuses[0].restartCount,
qosClass: list.status.qosClass,
creationTimestamp: list.metadata.creationTimestamp
};
});
apitoData = dataFromApi;
const joblist = this.state.joblist;
const eventlist = this.state.eventlist;
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="CronJOB Detail" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col lg={4}>
<Card className="checkout-order-summary">
<CardBody>
{/* <div className="p-3 bg-light mb-4"> */}
<h5 className="text-dark font-weight-bold">
{params.name}
</h5>
<Card></Card>
<Row>
{/* 정보 수정 */}
<div>
<Link onClick={() => this.setState({ isModal: !this.state.modal })} to="#" className="popup-form btn btn-primary" >정보 수정</Link>
</div>
<Col sm={3}>
<Modal
size="xl"
isOpen={this.state.isModal}
centered={true}
toggle={() =>
this.setState({ isModal: !this.state.isModal })
}
>
<ModalHeader
toggle={() =>
this.setState({ isModal: !this.state.isModal })
}
>
정보수정
</ModalHeader>
<ModalBody>
<Form>
<Row>
<Col lg={6}>
<FormGroup>
<Label htmlFor="name">이름</Label>
<Input
type="text"
className="form-control"
id="name"
placeholder={params.name}
disabled
required
/>
</FormGroup>
</Col>
<Col lg={6}>
<FormGroup>
<Label htmlFor="email">Alias</Label>
<Input
type="email"
className="form-control"
id="email"
placeholder="Enter Alias"
required
/>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg={12}>
<FormGroup>
<Label htmlFor="subject">Description</Label>
<textarea
className="form-control"
id="subject"
rows="3"
></textarea>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg={12}>
<div className="text-right">
<Button
type="submit"
color="primary"
>
Update
</Button>
</div>
</Col>
</Row>
</Form>
</ModalBody>
</Modal>
{/* 더보기 */}
<Dropdown
isOpen={this.state.singlebtn}
toggle={() =>
this.setState({ singlebtn: !this.state.singlebtn })
}
>
<DropdownToggle color="primary" caret> 더보기 <i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Rerun</DropdownItem>
<DropdownItem href="/view_yaml">View YAML</DropdownItem>
<DropdownItem>삭제</DropdownItem>
</DropdownMenu>
</Dropdown>
</Col>
{/* <h4 className="card-title">Popup with form</h4> */}
</Row>
{/* </div> */}
<div className="table-responsive">
<Table responsive className="mb-0">
<div>
<thead>
<tr>
<th style={{ width: "100%" }} className="border-top-0">상세정보</th>
</tr>
</thead>
</div>
{apitoData.map((test) => (
<tbody key={test.name}>
<tr>
<td>클러스터</td>
<td>{test.name}</td>
</tr>
<tr>
<td>프로젝트</td>
<td>{test.namespace}</td>
</tr>
<tr>
<td>Status</td>
<td>{test.status}</td>
</tr>
<tr>
<td>schedule</td>
<td>{test.schedule}</td>
</tr>
<tr>
<td>successfulJobsHistoryLimit</td>
<td>{test.successfulJobsHistoryLimit}</td>
</tr>
<tr>
<td>failedJobsHistoryLimit</td>
<td>{test.failedJobsHistoryLimit}</td>
</tr>
<tr>
<td>Created</td>
<td>{test.creationTimestamp}</td>
</tr>
<tr>
<td>Creator</td>
<td></td>
</tr>
</tbody>
))}
</Table>
</div>
</CardBody>
</Card>
</Col>
<Col lg={8}>
<Card>
<CardBody>
{/* <h4 className="card-title">Justify Tabs</h4> */}
{/* <p className="card-title-desc">
Use the tab JavaScript plugin—include it individually or through the compiled{" "} <code className="highlighter-rouge">bootstrap.js</code> file—to extend our navigational tabs and pills to create tabbable panes of local content, even via dropdown menus.
</p> */}
<Nav pills className="navtab-bg nav-justified">
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "5",
})}
onClick={() => {
this.toggle1("5");
}}
>
job Records
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "6",
})}
onClick={() => {
this.toggle1("6");
}}
>
메타 데이터
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "7",
})}
onClick={() => {
this.toggle1("7");
}}
>
이벤트
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={this.state.activeTab1}>
<TabPane tabId="5" className="p-3">
<Row>
<Col sm="12">
<div >
<CronjobResource joblist={joblist} />
</div>
</Col>
</Row>
</TabPane>
<TabPane tabId="6" className="p-3">
<Row>
<Col sm="12">
<JobDetailMeta apiList={apiList} />
</Col>
</Row>
</TabPane>
<TabPane tabId="7" className="p-3">
<Row>
<Col sm="12">
<div className="table-responsive">
<Event eventlist={eventlist} />
</div>
</Col>
</Row>
</TabPane>
</TabContent>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #11
| Source File: JobDetail.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
// console.log(this.props);
const apiList = this.state.apiList;
const apilistinfo = this.state.apilistinfo;
const involveData = this.state.involveData;
const { params } = this.props.match;
console.log(this.state.apiList, "jobdetail");
console.log(this.state.apiListtest, "jobdetailcteawrah");
let status = "";
let apitoData = [];
let dataFromApi = apiList.map((list) => {
console.log(list, "list");
console.log(list.status.conditions[0].status == "True")
if (list.status.conditions[0].status == "True") {
status = "running"
} else {
status = "not runnig"
}
return {
name: list.metadata.name,
namespace: list.metadata.namespace,
uid: list.metadata.uid,
status: status,
backoffLimit: list.spec.backoffLimit,
completions: list.spec.completions,
parallelism: list.spec.parallelism,
// restartCount: list.status.containerStatuses[0].restartCount,
qosClass: list.status.qosClass,
creationTimestamp: list.metadata.creationTimestamp
};
});
apitoData = dataFromApi;
const apiPodlist = this.state.apiPodlist;
const eventlist = this.state.eventlist;
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="JOB Detail" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col lg={4}>
<Card className="checkout-order-summary">
<CardBody>
{/* <div className="p-3 bg-light mb-4"> */}
<h5 className="text-dark font-weight-bold">
{params.name}
</h5>
<Card></Card>
<Row>
{/* 정보 수정 */}
<div>
<Link onClick={() => this.setState({ isModal: !this.state.modal })} to="#" className="popup-form btn btn-primary" >정보 수정</Link>
</div>
<Col sm={3}>
<Modal
size="xl"
isOpen={this.state.isModal}
centered={true}
toggle={() =>
this.setState({ isModal: !this.state.isModal })
}
>
<ModalHeader
toggle={() =>
this.setState({ isModal: !this.state.isModal })
}
>
Form
</ModalHeader>
<ModalBody>
<Form>
<Row>
<Col lg={6}>
<FormGroup>
<Label htmlFor="name">Name</Label>
<Input
type="text"
className="form-control"
id="name"
placeholder="Enter Name"
required
/>
</FormGroup>
</Col>
<Col lg={6}>
<FormGroup>
<Label htmlFor="email">Alias</Label>
<Input
type="email"
className="form-control"
id="email"
placeholder="Enter Email"
required
/>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg={12}>
<FormGroup>
<Label htmlFor="subject">Description</Label>
<textarea
className="form-control"
id="subject"
rows="3"
></textarea>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg={12}>
<div className="text-right">
<Button
type="submit"
color="primary"
>
Update
</Button>
</div>
</Col>
</Row>
</Form>
</ModalBody>
</Modal>
{/* 더보기 */}
<Dropdown
isOpen={this.state.singlebtn}
toggle={() =>
this.setState({ singlebtn: !this.state.singlebtn })
}
>
<DropdownToggle color="primary" caret> 더보기 <i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem onClick={this.toggle_modal} toggle={false}>Rerun</DropdownItem>
<DropdownItem>View YAML</DropdownItem>
<DropdownItem>삭제</DropdownItem>
</DropdownMenu>
</Dropdown>
</Col>
{/* <h4 className="card-title">Popup with form</h4> */}
</Row>
{/* </div> */}
<div className="table-responsive">
<JobDetail_detail apilistinfo={apilistinfo} />
</div>
</CardBody>
</Card>
</Col>
<Col lg={8}>
<Card>
<CardBody>
<Nav pills className="navtab-bg nav-justified">
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "5",
})}
onClick={() => {
this.toggle1("5");
}}
>
리소스 상태
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "6",
})}
onClick={() => {
this.toggle1("6");
}}
>
메타 데이터
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "7",
})}
onClick={() => {
this.toggle1("7");
}}
>
이벤트
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={this.state.activeTab1}>
<TabPane tabId="5" className="p-3">
<Row>
<Col sm="12">
{/* <JobDetailResource apilistinfo={apilistinfo} involveData={involveData} /> */}
{Object.keys(apilistinfo).length !== 0 ? <JobDetailResource apilistinfo={apilistinfo} involveData={involveData} /> : <></>}
</Col>
</Row>
</TabPane>
<TabPane tabId="6" className="p-3">
<Row>
<Col sm="12">
{/* <PoddetailMeta apilistinfo={apilistinfo} /> */}
{Object.keys(apilistinfo).length !== 0 ? <PoddetailMeta apilistinfo={apilistinfo} /> : <></>}
</Col>
</Row>
</TabPane>
<TabPane tabId="7" className="p-3">
<Row>
<Col sm="12">
<div className="table-responsive">
{/* <Event apilistinfo={apilistinfo} /> */}
{Object.keys(apilistinfo).length !== 0 ? <Event apilistinfo={apilistinfo} /> : <></>}
{/* <Event eventlist={eventlist} /> */}
</div>
</Col>
</Row>
</TabPane>
</TabContent>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #12
| Source File: PodDetail back.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
// console.log(this.props);
const apiList = this.state.apiList;
const { params } = this.props.match;
console.log(this.state.apiList, "poddetail");
let labels = []
let apitoData = [];
let annotations = [];
let restartCount = [];
// if (apiList.length > 0) {
// let dataFromApi = apiList.map((list, key) => {
// console.log(list, "list");
// if (list.metadata.annotations == undefined) {
// annotations = "-"
// } else {
// annotations = list.metadata.annotations;
// }
// if (list.metadata.labels == undefined) {
// labels = "-"
// } else {
// labels = list.metadata.labels;
// }
// if (list.status.containerStatuses == undefined) {
// restartCount = "-";
// } else {
// restartCount = list.status.containerStatuses[0].restartCount
// }
// return {
// name: list.metadata.name,
// namespace: list.metadata.namespace,
// labels: labels,
// phase: list.status.phase,
// podIP: list.status.podIP,
// nodeName: list.spec.nodeName,
// hostIP: list.status.hostIP,
// restartCount: restartCount,
// qosClass: list.status.qosClass,
// creationTimestamp: list.metadata.creationTimestamp,
// annotations: annotations
// };
// });
// apitoData = dataFromApi;
// console.log(apitoData)
// }
// const eventlist = this.state.eventlist;
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="POD Detail" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col lg={4}>
<Card className="checkout-order-summary">
<CardBody>
<h5 className="text-dark font-weight-bold">
{params.name}
</h5>
<Card></Card>
<Row>
<div>
<Link onClick={() => this.setState({ isModal: !this.state.modal })} to="#" className="popup-form btn btn-primary" >VIEW YAML</Link>
</div>
<Modal size="xl" isOpen={this.state.isModal} centered={true} toggle={() => this.setState({ isModal: !this.state.isModal })}>
<ModalHeader toggle={() => this.setState({ isModal: !this.state.isModal })} > YAML </ModalHeader>
<ModalBody>
<TabPane tabId="8" className="p-3">
<Row>
<Col sm="12">
<CardText>
<AceEditor
placeholder="Placeholder Text"
mode="javascript"
theme="xcode"
name="blah2"
onLoad={this.onLoad}
onChange={this.onChange}
fontSize={14}
showPrintMargin={true}
showGutter={true}
highlightActiveLine={true}
value={`function onLoad(editor) {
console.log("seohwa yeonguwonnim babo melong~~~~~~~");
}`}
setOptions={{
enableBasicAutocompletion: false,
enableLiveAutocompletion: false,
enableSnippets: false,
showLineNumbers: true,
tabSize: 2,
}} />
</CardText>
</Col>
</Row>
</TabPane>
</ModalBody>
</Modal>
<Col sm={3}>
{/* 더보기 */}
<Dropdown isOpen={this.state.singlebtn} toggle={() =>
this.setState({ singlebtn: !this.state.singlebtn })
} >
<DropdownToggle color="primary" caret>
더보기 <i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem>삭제</DropdownItem>
</DropdownMenu>
</Dropdown>
</Col>
{/* <h4 className="card-title">Popup with form</h4> */}
</Row>
{/* </div> */}
<div className="table-responsive">
<Table responsive className="mb-0">
<thead>
<tr>
<th style={{ width: "100%" }} className="border-top-0">상세정보</th>
</tr>
</thead>
<tbody>
<tr></tr>
</tbody>
</Table>
<Table responsive className="mb-0">
<thead>
<tr>
</tr>
</thead>
{apitoData.map((test) => (
<tbody key={test.name}>
<tr>
<td >클러스터</td>
<td>{params.cluster}</td>
</tr>
<tr>
<td>프로젝트</td>
<td>{test.namespace}</td>
</tr>
<tr>
<td>APP</td>
<td>수정 필요</td>
</tr>
<tr>
<td>Status</td>
<td>{test.phase}</td>
</tr>
<tr>
<td>Pod IP</td>
<td>{test.podIP}</td>
</tr>
<tr>
<td>Node Name</td>
<td>{test.nodeName}</td>
</tr>
<tr>
<td>Node IP</td>
<td>{test.hostIP}</td>
</tr>
<tr>
<td>Restart Count</td>
<td>{test.restartCount}</td>
</tr>
<tr>
<td>Qos Class</td>
<td>{test.qosClass}</td>
</tr>
<tr>
<td>Created</td>
<td>{test.creationTimestamp}</td>
</tr>
</tbody>
))}
</Table>
</div>
</CardBody>
</Card>
</Col>
<Col lg={8}>
<Card>
<CardBody>
<Nav pills className="navtab-bg nav-justified">
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "5",
})}
onClick={() => {
this.toggle1("5");
}}
>
리소스 상태
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "6",
})}
onClick={() => {
this.toggle1("6");
}}
>
메타 데이터
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "7",
})}
onClick={() => {
this.toggle1("7");
}}
>
상태
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "8",
})}
onClick={() => {
this.toggle1("8");
}}
>
모니터링
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "9",
})}
onClick={() => {
this.toggle1("9");
}}
>
이벤트
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={this.state.activeTab1}>
<TabPane tabId="5" className="p-3">
<Row>
<Col sm="12">
<div className="table-responsive">
<PodDetailResorce apiList={apiList} />
</div>
</Col>
</Row>
</TabPane>
<TabPane tabId="6" className="p-3">
<Row>
<Col sm="12">
<PoddetailMeta apiList={apiList} />
</Col>
</Row>
</TabPane>
<TabPane tabId="7" className="p-3">
<Row>
<Col sm="12">
<PodStatus apiList={apiList} />
</Col>
</Row>
</TabPane>
<TabPane tabId="8" className="p-3">
<Row>
<Col sm="12">
<div className="table-responsive">
</div>
</Col>
</Row>
</TabPane>
<TabPane tabId="9" className="p-3">
<Row>
<Col sm="12">
<div className="table-responsive">
</div>
</Col>
</Row>
</TabPane>
</TabContent>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #13
| Source File: PodDetail.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
const apilistinfo = this.state.apilistinfo;
const involveData = this.state.involveData;
const { params } = this.props.match;
let labels = []
let apitoData = [];
let annotations = [];
let restartCount = [];
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="POD Detail" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col lg={4}>
<Card className="checkout-order-summary">
<CardBody>
<h5 className="text-dark font-weight-bold">
{params.name}
</h5>
<Card></Card>
<Row>
<div>
<Link onClick={() => this.setState({ isModal: !this.state.modal })} to="#" className="popup-form btn btn-primary" >VIEW YAML</Link>
</div>
<Modal size="xl" isOpen={this.state.isModal} centered={true} toggle={() => this.setState({ isModal: !this.state.isModal })}>
<ModalHeader toggle={() => this.setState({ isModal: !this.state.isModal })} > YAML </ModalHeader>
<ModalBody>
<TabPane tabId="8" className="p-3">
<Row>
<Col sm="12">
<CardText>
<AceEditor
placeholder="Placeholder Text"
mode="javascript"
theme="xcode"
name="blah2"
onLoad={this.onLoad}
onChange={this.onChange}
fontSize={14}
showPrintMargin={true}
showGutter={true}
highlightActiveLine={true}
value={`function onLoad(editor) {
console.log("seohwa yeonguwonnim babo melong~~~~~~~");
}`}
setOptions={{
enableBasicAutocompletion: false,
enableLiveAutocompletion: false,
enableSnippets: false,
showLineNumbers: true,
tabSize: 2,
}} />
</CardText>
</Col>
</Row>
</TabPane>
</ModalBody>
</Modal>
<Col sm={3}>
{/* 더보기 */}
<Dropdown isOpen={this.state.singlebtn} toggle={() =>
this.setState({ singlebtn: !this.state.singlebtn })
} >
<DropdownToggle color="primary" caret>
더보기 <i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem>삭제</DropdownItem>
</DropdownMenu>
</Dropdown>
</Col>
{/* <h4 className="card-title">Popup with form</h4> */}
</Row>
{/* </div> */}
<div className="table-responsive">
<PodDetail_detail apilistinfo={apilistinfo} />
</div>
</CardBody>
</Card>
</Col>
<Col lg={8}>
<Card>
<CardBody>
<Nav pills className="navtab-bg nav-justified">
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "5",
})}
onClick={() => {
this.toggle1("5");
}}
>
리소스 상태
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "6",
})}
onClick={() => {
this.toggle1("6");
}}
>
메타 데이터
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "7",
})}
onClick={() => {
this.toggle1("7");
}}
>
상태
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "8",
})}
onClick={() => {
this.toggle1("8");
}}
>
모니터링
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "9",
})}
onClick={() => {
this.toggle1("9");
}}
>
이벤트
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={this.state.activeTab1}>
<TabPane tabId="5" className="p-3">
<Row>
<Col sm="12">
<div className="table-responsive">
{/* <PodDetailResorce apilistinfo={apilistinfo} /> */}
{Object.keys(apilistinfo).length !== 0 ? <PodDetailResorce apilistinfo={apilistinfo} /> : <></>}
</div>
</Col>
</Row>
</TabPane>
<TabPane tabId="6" className="p-3">
<Row>
<Col sm="12">
{/* <PoddetailMeta apilistinfo={apilistinfo} /> */}
{Object.keys(apilistinfo).length !== 0 ? <PoddetailMeta apilistinfo={apilistinfo} /> : <></>}
</Col>
</Row>
</TabPane>
<TabPane tabId="7" className="p-3">
<Row>
<Col sm="12">
{/* <PodStatus apilistinfo={apilistinfo} /> */}
{Object.keys(apilistinfo).length !== 0 ? <PodStatus apilistinfo={apilistinfo} /> : <></>}
</Col>
</Row>
</TabPane>
<TabPane tabId="8" className="p-3">
<Row>
<Col sm="12">
{Object.keys(apilistinfo).length !== 0 ? <PodDetailMonit apilistinfo={apilistinfo} /> : <></>}
{/* <PodDetailMonit apilistinfo={apilistinfo} /> */}
</Col>
</Row>
</TabPane>
<TabPane tabId="9" className="p-3">
<Row>
<Col sm="12">
<div className="table-responsive">
{/* <PodDetailEvent apilistinfo={apilistinfo} /> */}
{Object.keys(apilistinfo).length !== 0 ? <PodDetailEvent apilistinfo={apilistinfo} /> : <></>}
</div>
</Col>
</Row>
</TabPane>
</TabContent>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #14
| Source File: Route.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
const data = {
columns: [
{
label: <div className="custom-control custom-checkbox"> <Input type="checkbox" className="custom-control-input" id="ordercheck" /><Label className="custom-control-label" htmlFor="ordercheck"> </Label></div>,
field: "checkbox",
sort: "asc",
width: 28
},
{
label: "이름",
field: "id",
sort: "asc",
width: 78
},
{
label: "게이트웨이 주소",
field: "gatewayAddr",
sort: "asc",
width: 135
},
{
label: "앱",
field: "appName",
sort: "asc",
width: 93
},
{
label: "생성 시간",
field: "createTime",
sort: "asc",
width: 48
},
{
label: "Action",
field: "action",
sort: "asc",
width: 120
},
],
rows: [
{
checkbox:
<div className="custom-control custom-checkbox">
<Input type="checkbox" className="custom-control-input" id="ordercheck1" />
<Label className="custom-control-label" htmlFor="ordercheck1"> </Label>
</div>,
id: <Link to="maps-google" className="text-dark font-weight-bold">#NZ1572</Link>,
date: "04 Apr, 2020",
billingName: "Walter Brown",
total: "$172",
status: <div className="badge badge-soft-success font-size-12">running</div>,
//invoice: <Button className="btn-rounded" color="light">//invoice <i className="mdi mdi-download ml-2"></i></Button>,
action: <><Link to="#" className="mr-3 text-primary" id="edit1"><i className="mdi mdi-pencil font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="edit1">
Edit
</UncontrolledTooltip >
<Link to="#" className="text-danger" id="delete1"><i className="mdi mdi-trash-can font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="delete1">
Delete
</UncontrolledTooltip >
</>
},
]
}
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="라우트" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col lg={12}>
<Card>
<CardBody className="pt-0">
<Nav tabs className="nav-tabs-custom mb-4">
<NavItem>
<NavLink onClick={() => { this.toggleTab('1'); }} className={classnames({ active: this.state.activeTab === '1' }, "font-weight-bold p-3")}>All workspace</NavLink>
</NavItem>
<NavItem>
<NavLink onClick={() => { this.toggleTab('2'); }} className={classnames({ active: this.state.activeTab === '2' }, "p-3 font-weight-bold")}>workspace1</NavLink>
</NavItem>
<NavItem>
<NavLink onClick={() => { this.toggleTab('3'); }} className={classnames({ active: this.state.activeTab === '3' }, " p-3 font-weight-bold")}>workspace2</NavLink>
</NavItem>
</Nav>
<Col sm={6}>
<div>
<Link to="appadd" onClick={() => this.setState({ modal_static: true, isAlertOpen: false })} className="btn btn-success mb-2"><i className="mdi mdi-plus mr-2"></i> 추가</Link>
</div>
<div>
<Dropdown
isOpen={this.state.singlebtn}
toggle={() =>
this.setState({ singlebtn: !this.state.singlebtn })
}
>
<DropdownToggle color="primary" caret>
프로젝트{" "}
<i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem>프로젝트1</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
</Col>
<MDBDataTable responsive data={data} className="mt-4" />
</CardBody>
</Card>
</Col>
</Row>
</Container>s
</div>
</React.Fragment>
);
}
Example #15
| 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 #16
| 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 #17
| 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 #18
| Source File: Dropdowns.js From id.co.moonlay-eworkplace-admin-web with MIT License | 4 votes |
|
render() {
return (
<div className="animated fadeIn">
<Row>
<Col xs="12">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Dropdowns</strong>
<div className="card-header-actions">
<a href="https://reactstrap.github.io/components/dropdowns/" rel="noreferrer noopener" target="_blank" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
</CardHeader>
<CardBody>
<Dropdown isOpen={this.state.dropdownOpen[0]} toggle={() => {
this.toggle(0);
}}>
<DropdownToggle caret>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</Dropdown>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Dropdowns</strong>
<small> alignment</small>
</CardHeader>
<CardBody>
<Dropdown isOpen={this.state.dropdownOpen[1]} toggle={() => {this.toggle(1);}}>
<DropdownToggle caret>
This dropdown's menu is right-aligned
</DropdownToggle>
<DropdownMenu right style={{right: 'auto'}}>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</Dropdown>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Dropdowns</strong>
<small> sizing</small>
</CardHeader>
<CardBody>
<Dropdown isOpen={this.state.dropdownOpen[2]} toggle={() => {this.toggle(2);}} size="lg" className="mb-3">
<DropdownToggle caret>
Large Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown isOpen={this.state.dropdownOpen[3]} toggle={() => {this.toggle(3);}} className="mb-3">
<DropdownToggle caret>
Normal Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown isOpen={this.state.dropdownOpen[4]} toggle={() => {this.toggle(4);}} size="sm">
<DropdownToggle caret>
Small Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</Dropdown>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Custom Dropdowns</strong>
</CardHeader>
<CardBody>
<Dropdown isOpen={this.state.dropdownOpen[5]} toggle={() => {this.toggle(5);}}>
<DropdownToggle
tag="span"
onClick={() => {this.toggle(5);}}
data-toggle="dropdown"
aria-expanded={this.state.dropdownOpen[5]}
>
Custom Dropdown Content <strong> * </strong>
</DropdownToggle>
<DropdownMenu>
<div className="dropdown-item" onClick={() => {this.toggle(5);}}>Custom dropdown item 1</div>
<div className="dropdown-item" onClick={() => {this.toggle(5);}}>Custom dropdown item 2</div>
<div className="dropdown-item-text" onClick={() => {this.toggle(5);}}>Custom dropdown text 3</div>
<hr className="my-0 dropdown-item-text" />
<div onClick={() => {this.toggle(5);}}>Custom dropdown item 4</div>
</DropdownMenu>
</Dropdown>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Uncontrolled Dropdown</strong>
</CardHeader>
<CardBody>
<UncontrolledDropdown>
<DropdownToggle caret>
Uncontrolled Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</CardBody>
</Card>
</Col>
</Row>
</div>
);
}
Example #19
| Source File: Navs.js From id.co.moonlay-eworkplace-admin-web with MIT License | 4 votes |
|
render() {
return (
<div className="animated fadeIn">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Navs</strong>
<div className="card-header-actions">
<a href="https://reactstrap.github.io/components/navs/" rel="noreferrer noopener" target="_blank" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
</CardHeader>
<CardBody>
<p>List Based</p>
<Nav>
<NavItem>
<NavLink href="#">Link</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">Link</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">Another Link</NavLink>
</NavItem>
<NavItem>
<NavLink disabled href="#">Disabled Link</NavLink>
</NavItem>
</Nav>
<hr />
<p>Link Based</p>
<Nav>
<NavLink href="#">Link</NavLink> <NavLink href="#">Link</NavLink> <NavLink href="#">Another Link</NavLink> <NavLink disabled href="#">Disabled
Link</NavLink>
</Nav>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Navs Tabs</strong>
</CardHeader>
<CardBody>
<Nav tabs>
<NavItem>
<NavLink href="#" active>Link</NavLink>
</NavItem>
<Dropdown nav isOpen={this.state.dropdownOpen[0]} toggle={() => {this.toggle(0);}}>
<DropdownToggle nav caret>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</Dropdown>
<NavItem>
<NavLink href="#">Link</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">Another Link</NavLink>
</NavItem>
<NavItem>
<NavLink disabled href="#">Disabled Link</NavLink>
</NavItem>
</Nav>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Navs Pills</strong>
</CardHeader>
<CardBody>
<Nav pills>
<NavItem>
<NavLink href="#" active>Link</NavLink>
</NavItem>
<Dropdown nav isOpen={this.state.dropdownOpen[1]} toggle={() => {this.toggle(1);}}>
<DropdownToggle nav caret>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</Dropdown>
<NavItem>
<NavLink href="#">Link</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">Another Link</NavLink>
</NavItem>
<NavItem>
<NavLink disabled href="#">Disabled Link</NavLink>
</NavItem>
</Nav>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Navs Vertical</strong>
</CardHeader>
<CardBody>
<p>List Based</p>
<Nav vertical>
<NavItem>
<NavLink href="#">Link</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">Link</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">Another Link</NavLink>
</NavItem>
<NavItem>
<NavLink disabled href="#">Disabled Link</NavLink>
</NavItem>
</Nav>
<hr />
<p>Link based</p>
<Nav vertical>
<NavLink href="#">Link</NavLink> <NavLink href="#">Link</NavLink> <NavLink href="#">Another Link</NavLink> <NavLink disabled href="#">Disabled
Link</NavLink>
</Nav>
</CardBody>
</Card>
</div>
);
}
Example #20
| 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 #21
| Source File: index.js From DMS_React with GNU Affero General Public License v3.0 | 4 votes |
|
AppModuleHeader = (props) => {
const [searchBox, setSearchBox] = useState(false);
const [popoverOpen, setPopOverOpen] = useState(false);
const onSearchBoxSelect = () => {
setSearchBox(!searchBox);
};
const toggle = () => {
setPopOverOpen(!popoverOpen)
};
const {placeholder, onChange, value, user, notification, apps} = props;
return (
<div className="module-box-header-inner" data-test="container-component">
<div className="search-bar right-side-icon bg-transparent d-none d-sm-block">
<div className="form-group">
<input className="form-control border-0" type="search" placeholder={placeholder}
data-test="input-component"
onChange={onChange}
value={value}/>
<button className="search-icon"><i className="zmdi zmdi-search zmdi-hc-lg"/></button>
</div>
</div>
<Popover className="p-3" placement="bottom" isOpen={popoverOpen} target="Popover1"
toggle={toggle} data-test="popover-component">
<h3>{user.name}</h3>
<h4>{user.email}</h4>
</Popover>
<div className="d-inline-block d-sm-none">
<Dropdown data-test="dropdown-component"
className="quick-menu nav-searchbox"
isOpen={searchBox}
toggle={onSearchBoxSelect}>
<DropdownToggle
className="d-inline-block"
tag="span"
data-toggle="dropdown">
<IconButton className="icon-btn">
<i className="zmdi zmdi-search zmdi-hc-fw text-grey"/>
</IconButton>
</DropdownToggle>
<DropdownMenu className="p-0">
<SearchBox styleName="search-dropdown" placeholder="" data-test="search-component"
onChange={onChange}
value={value}/>
</DropdownMenu>
</Dropdown>
</div>
<div className="module-box-header-right">
{apps && <IconButton className="size-40" aria-label="Menu">
<i className="zmdi zmdi-apps"/>
</IconButton>}
{notification && <IconButton className="size-40" aria-label="Menu">
<i className="zmdi zmdi-notifications-none"/>
</IconButton>}
<img className="ml-2 rounded-circle size-40 pointer" id="Popover1" alt={user.name}
data-test="pointer-component"
onMouseEnter={toggle}
onMouseLeave={toggle}
onClick={toggle}
src={user.avatar}/>
</div>
</div>
)
}
Example #22
| Source File: index.js From DMS_React with GNU Affero General Public License v3.0 | 4 votes |
|
Index =(props)=> {
const dispatch = useDispatch();
const { drawerType, locale, navCollapsed } = useSelector(({settings}) => settings);
const [langSwitcher,setLangSwitcher]=useState(false);
const [mailNotification,setMailNotification]=useState(false);
const [appNotification,setAppNotification]=useState(false);
// const [searchBox,setSearchBox]=useState(false);
// const [apps,setApps]=useState(false);
// const [searchText,setSearchText]=useState('');
const onAppNotificationSelect = () => {
setAppNotification(!appNotification)
};
const onMailNotificationSelect = () => {
setMailNotification(!mailNotification)
};
const onLangSwitcherSelect = (event) => {
setLangSwitcher(!langSwitcher);
};
const handleRequestClose = () => {
setLangSwitcher(false);
setMailNotification(false);
};
const onToggleCollapsedNav = (e) => {
const val = !navCollapsed;
dispatch(toggleCollapsedNav(val));
};
const onSwitchLanguage = (lang) => {
dispatch(switchLanguage(lang))
};
const drawerStyle = drawerType.includes(FIXED_DRAWER) ? "d-block d-xl-none" : drawerType.includes(COLLAPSED_DRAWER) ? "d-block" : "d-none";
return (
<AppBar className="app-main-header">
<Toolbar className="app-toolbar" disableGutters={false}>
<IconButton className={`jr-menu-icon mr-3 ${drawerStyle}`} aria-label="Menu"
onClick={onToggleCollapsedNav} data-test="iconButtonComp">
<span className="menu-icon"/>
</IconButton>
<Link to='/app' className="app-logo mr-2 d-none d-sm-block" >
<img src={require("../../../../assets/images/logo.jpg")} alt="DMS" title="DMS"/>
</Link>
{/* <div style={{minWidth: '100px', maxWidth: '80%'}}>
<marquee>Drone MX710 is flying from Dharan to Biratnagar, Drone MX710 is flying from Dharan to Biratnagar</marquee>
</div> */}
<ul className="header-notifications list-inline ml-auto">
<li className="list-inline-item">
<Dropdown
className="quick-menu"
isOpen={langSwitcher}
toggle={onLangSwitcherSelect}
data-test="dropDownComp">
<DropdownToggle
className="d-inline-block"
tag="span"
data-toggle="dropdown">
<IconButton className="icon-btn">
<i className={`flag flag-24 flag-${locale.icon}`}/>
</IconButton>
</DropdownToggle>
<DropdownMenu right className="w-50">
<LanguageSwitcher switchLanguage={onSwitchLanguage} data-test="languageSwitcherComp"
handleRequestClose={handleRequestClose}/>
</DropdownMenu>
</Dropdown>
</li>
<li className="list-inline-item app-tour">
<Dropdown
className="quick-menu"
isOpen={appNotification}
toggle={onAppNotificationSelect}
data-test="dropDownComp2">
<DropdownToggle
className="d-inline-block"
tag="span"
data-toggle="dropdown">
<IconButton className="icon-btn">
<i className="zmdi zmdi-notifications-none icon-alert animated infinite wobble"/>
</IconButton>
</DropdownToggle>
<DropdownMenu right>
<CardHeader styleName="align-items-center"
heading={<IntlMessages id="appNotification.title"/>}/>
<AppNotification/>
</DropdownMenu>
</Dropdown>
</li>
<li className="list-inline-item mail-tour">
<Dropdown
data-test="dropDownComp3"
className="quick-menu"
isOpen={mailNotification}
toggle={onMailNotificationSelect}
>
<DropdownToggle
className="d-inline-block"
tag="span"
data-toggle="dropdown">
<IconButton className="icon-btn">
<i className="zmdi zmdi-comment-alt-text zmdi-hc-fw"/>
</IconButton>
</DropdownToggle>
<DropdownMenu right>
<CardHeader styleName="align-items-center"
heading={<IntlMessages id="mailNotification.title"/>}/>
<MailNotification/>
</DropdownMenu>
</Dropdown>
</li>
</ul>
{/* <div className="ellipse-shape"/> */}
</Toolbar>
</AppBar>
);
}
Example #23
| Source File: ChatBox.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
return (
<React.Fragment>
<Col lg={4}>
<Card>
<CardBody className="border-bottom">
<div className="user-chat-border">
<Row>
<Col md={5} xs={9}>
<h5 className="font-size-15 mb-1">Frank Vickery</h5>
<p className="text-muted mb-0"><i className="mdi mdi-circle text-success align-middle mr-1"></i> Active now</p>
</Col>
<Col md={7} xs={3}>
<ul className="list-inline user-chat-nav text-right mb-0">
<li className="list-inline-item">
<Dropdown isOpen={this.state.isSearch} toggle={() => this.setState({isSearch : !this.state.isSearch})} >
<DropdownToggle tag="i" className="btn nav-btn" type="button">
<i className="mdi mdi-magnify"></i>
</DropdownToggle>
<DropdownMenu right className=" dropdown-menu-md p-0">
<Form className="p-2">
<div className="search-box">
<div className="position-relative">
<Input type="text" className="form-control rounded bg-light border-0" placeholder="Search..."/>
<i className="mdi mdi-magnify search-icon"></i>
</div>
</div>
</Form>
</DropdownMenu>
</Dropdown>
</li>
<li className="list-inline-item d-none d-sm-inline-block">
<Dropdown isOpen={this.state.isSetting} toggle={() => this.setState({isSetting : !this.state.isSetting})}>
<DropdownToggle tag="button" className="btn nav-btn" type="button" >
<i className="mdi mdi-cog"></i>
</DropdownToggle>
<DropdownMenu right>
<DropdownItem href="#">View Profile</DropdownItem>
<DropdownItem href="#">Clear chat</DropdownItem>
<DropdownItem href="#">Muted</DropdownItem>
<DropdownItem href="#">Delete</DropdownItem>
</DropdownMenu>
</Dropdown>
</li>
<li className="list-inline-item">
<Dropdown isOpen={this.state.isMore} toggle={() => this.setState({isMore : !this.state.isMore})}>
<DropdownToggle tag="button" className="btn nav-btn" type="button" >
<i className="mdi mdi-dots-horizontal"></i>
</DropdownToggle>
<DropdownMenu right>
<DropdownItem href="#">Action</DropdownItem>
<DropdownItem href="#">Another action</DropdownItem>
<DropdownItem href="#">Something else</DropdownItem>
</DropdownMenu>
</Dropdown>
</li>
</ul>
</Col>
</Row>
</div>
</CardBody>
<CardBody>
<div className="chat-widget">
<div className="chat-conversation" >
<SimpleBar style={{maxHeight: "237px"}}>
<ul className="list-unstyled mb-0 pr-3">
<li>
<div className="conversation-list">
<div className="chat-avatar">
<img src={avatar2} alt=""/>
</div>
<div className="ctext-wrap">
<div className="conversation-name">Frank Vickery</div>
<div className="ctext-wrap-content">
<p className="mb-0">
Hey! I am available
</p>
</div>
<p className="chat-time mb-0"><i className="mdi mdi-clock-outline align-middle mr-1"></i> 12:09</p>
</div>
</div>
</li>
<li className="right">
<div className="conversation-list">
<div className="ctext-wrap">
<div className="conversation-name">Ricky Clark</div>
<div className="ctext-wrap-content">
<p className="mb-0">
Hi, How are you? What about our next meeting?
</p>
</div>
<p className="chat-time mb-0"><i className="bx bx-time-five align-middle mr-1"></i> 10:02</p>
</div>
</div>
</li>
<li>
<div className="chat-day-title">
<span className="title">Today</span>
</div>
</li>
<li>
<div className="conversation-list">
<div className="chat-avatar">
<img src={avatar2} alt=""/>
</div>
<div className="ctext-wrap">
<div className="conversation-name">Frank Vickery</div>
<div className="ctext-wrap-content">
<p className="mb-0">
Hello!
</p>
</div>
<p className="chat-time mb-0"><i className="mdi mdi-clock-outline align-middle mr-1"></i> 10:00</p>
</div>
</div>
</li>
<li className="right">
<div className="conversation-list">
<div className="ctext-wrap">
<div className="conversation-name">Ricky Clark</div>
<div className="ctext-wrap-content">
<p className="mb-0">
Hi, How are you? What about our next meeting?
</p>
</div>
<p className="chat-time mb-0"><i className="bx bx-time-five align-middle mr-1"></i> 10:02</p>
</div>
</div>
</li>
<li>
<div className="conversation-list">
<div className="chat-avatar">
<img src={avatar2} alt=""/>
</div>
<div className="ctext-wrap">
<div className="conversation-name">Frank Vickery</div>
<div className="ctext-wrap-content">
<p className="mb-0">
Yeah everything is fine
</p>
</div>
<p className="chat-time mb-0"><i className="bx bx-time-five align-middle mr-1"></i> 10:06</p>
</div>
</div>
</li>
<li >
<div className="conversation-list">
<div className="chat-avatar">
<img src={avatar2} alt=""/>
</div>
<div className="ctext-wrap">
<div className="conversation-name">Frank Vickery</div>
<div className="ctext-wrap-content">
<p className="mb-0">& Next meeting tomorrow 10.00AM</p>
</div>
<p className="chat-time mb-0"><i className="bx bx-time-five align-middle mr-1"></i> 10:06</p>
</div>
</div>
</li>
<li className="right">
<div className="conversation-list">
<div className="ctext-wrap">
<div className="conversation-name">Ricky Clark</div>
<div className="ctext-wrap-content">
<p className="mb-0">
Wow that's great
</p>
</div>
<p className="chat-time mb-0"><i className="bx bx-time-five align-middle mr-1"></i> 10:07</p>
</div>
</div>
</li>
</ul>
</SimpleBar>
</div>
</div>
</CardBody>
<div className="p-3 chat-input-section border-top">
<Row>
<Col>
<div>
<Input type="text" className="form-control rounded chat-input pl-3" placeholder="Enter Message..."/>
</div>
</Col>
<Col xs={{size:'auto'}}>
<Button color="primary" type="submit" className="chat-send w-md waves-effect waves-light"><span className="d-none d-sm-inline-block mr-2">Send</span> <i className="mdi mdi-send"></i></Button>
</Col>
</Row>
</div>
</Card>
</Col>
</React.Fragment>
);
}
Example #24
| Source File: navbar.component.js From hiring-system with GNU General Public License v3.0 | 4 votes |
|
NavbarComponent = () => {
const [isOpen, setIsOpen] = useState(false);
const { isAuthenticated, user, loginWithRedirect, logout } = useAuth0();
const [dropdownOpen, setDropdownOpen] = useState(false);
const toggle = () => setDropdownOpen((prevState) => !prevState);
const openNav = () => {
console.log("clicked");
setIsOpen(!isOpen);
};
return (
<Navbar light expand="md">
<NavbarBrand href="/">
<img src={logo} width="30" height="30" alt="" />
<span className="ml-2 title">Hiring Job System</span>
</NavbarBrand>
<NavbarToggler onClick={openNav} />
<Collapse isOpen={isOpen} navbar>
<Nav navbar className="navbar-nav w-100 d-flex justify-content-end">
<NavItem>
<NavLink href="https://github.com/GitCodeCareer/hacktoberfest--hiring-system">
<FontAwesomeIcon icon={["fab", "github"]} />
</NavLink>
</NavItem>
{isAuthenticated || (
<>
<NavItem>
<NavLink>
<button
onClick={loginWithRedirect}
className="btn btn-signin p-0 text-primary"
>
Sign in
</button>
</NavLink>
</NavItem>
</>
)}
{isAuthenticated && (
<Media className="d-flex align-items-center">
<Media left href="#">
<Media
object
width="20px"
src={user.picture}
alt={user.name}
className="rounded-circle mr-2"
/>
</Media>
<Media body>
<Media heading className="h6 mb-0 mr-1">
<Dropdown isOpen={dropdownOpen} toggle={toggle}>
<DropdownToggle caret className="btn-signin">
{user.name}
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Admin</DropdownItem>
<DropdownItem>
<Link to="/admin">Admin page</Link>
</DropdownItem>
<DropdownItem divider />
<DropdownItem header>Jobs</DropdownItem>
<DropdownItem>
<Link to="/hire/new">Create Jobs</Link>
</DropdownItem>
<DropdownItem divider />
<DropdownItem
onClick={() =>
logout({ returnTo: window.location.origin })
}
>
Logout
</DropdownItem>
</DropdownMenu>
</Dropdown>
</Media>
{/* {user.email} */}
</Media>
</Media>
)}
</Nav>
</Collapse>
</Navbar>
);
}
Example #25
| Source File: Layout.js From hivemind with Apache License 2.0 | 4 votes |
|
Layout = ({ children }) => {
const [isOpen, setOpen] = useState(false)
const [dropdownOpen, setDropdownOpen] = useState(false)
const { pageVars } = useContext(GlobalContext)
const notifyRef = useCallback((node) => {
if (typeof window !== 'undefined') {
if (node) {
window.notify = node.notificationAlert.bind(node)
} else {
window.notify = null
}
}
}, [])
function toggleCollapse() {
setOpen(!isOpen)
}
function toggleDropdown() {
setDropdownOpen(!dropdownOpen)
}
return (
<Container fluid>
<Head>
<script type="text/javascript" src="/js/pace.min.js" async />
<title>{pageVars.title}</title>
<link
rel="apple-touch-icon"
sizes="57x57"
href="/img/logo/apple-icon-57x57.png"
/>
<link
rel="apple-touch-icon"
sizes="60x60"
href="/img/logo/apple-icon-60x60.png"
/>
<link
rel="apple-touch-icon"
sizes="72x72"
href="/img/logo/apple-icon-72x72.png"
/>
<link
rel="apple-touch-icon"
sizes="76x76"
href="/img/logo/apple-icon-76x76.png"
/>
<link
rel="apple-touch-icon"
sizes="114x114"
href="/img/logo/apple-icon-114x114.png"
/>
<link
rel="apple-touch-icon"
sizes="120x120"
href="/img/logo/apple-icon-120x120.png"
/>
<link
rel="apple-touch-icon"
sizes="144x144"
href="/img/logo/apple-icon-144x144.png"
/>
<link
rel="apple-touch-icon"
sizes="152x152"
href="/img/logo/apple-icon-152x152.png"
/>
<link
rel="apple-touch-icon"
sizes="180x180"
href="/img/logo/apple-icon-180x180.png"
/>
<link
rel="icon"
type="image/png"
sizes="192x192"
href="/img/logo/android-icon-192x192.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/img/logo/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="96x96"
href="/img/logo/favicon-96x96.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/img/logo/favicon-16x16.png"
/>
<link rel="manifest" href="/img/logo/manifest.json" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta
name="msapplication-TileImage"
content="/img/logo/ms-icon-144x144.png"
/>
<meta name="theme-color" content="#ffffff" />
</Head>
<Navbar color="inverse" light expand="md" className="border-bottom mb-2">
<Link href="/" passHref>
<ForwardedNavbarBrand className="text-wrap">
<img
src="/img/logo/Logo.svg"
style={{ height: '35px' }}
alt="Logo"
/>
</ForwardedNavbarBrand>
</Link>
<NavbarToggler onClick={toggleCollapse} />
<Collapse isOpen={isOpen} navbar>
<MainNav />
<Nav className="ml-auto" navbar>
<NavItem>
<NavbarText>
<Spinner
type="grow"
color="dark"
id={'loading'}
className={'invisible mx-2'}
/>
</NavbarText>
</NavItem>
<NavItemUser />
<Dropdown
nav
inNavbar
isOpen={dropdownOpen}
toggle={toggleDropdown}
>
<DropdownToggle nav caret>
<HelpCircle /> Help
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>
<Link href={'/help'} passHref>
<NavLink>
<Info /> User Guide
</NavLink>
</Link>
</DropdownItem>
<DropdownItem divider />
<DropdownItem>
<NavLink
href={'https://github.com/adityamukho/hivemind/discussions'}
target="_blank"
>
<MessageCircle /> Ask a Question (Hivemind)
</NavLink>
</DropdownItem>
<DropdownItem>
<NavLink
href={'https://gitter.im/recallgraph/community'}
target="_blank"
>
<MessageCircle /> Ask a Question (RecallGraph)
</NavLink>
</DropdownItem>
</DropdownMenu>
</Dropdown>
<NavItem>
<NavLink
href="https://github.com/adityamukho/hivemind"
target="_blank"
>
<GitHub />
</NavLink>
</NavItem>
<NavItemLogin />
</Nav>
</Collapse>
</Navbar>
<Container fluid>
<NotificationAlert ref={notifyRef} />
<Row>
<Col>{children}</Col>
</Row>
</Container>
</Container>
)
}
Example #26
| 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 #27
| Source File: Header.js From sofia-react-template with MIT License | 4 votes |
|
Header = (props) => {
const [menuOpen, setMenuOpen] = useState(false);
const [notificationsOpen, setNotificationsOpen] = useState(false);
const toggleNotifications = () => {
setNotificationsOpen(!notificationsOpen);
}
const toggleMenu = () => {
setMenuOpen(!menuOpen);
}
const toggleSidebar = () => {
if (props.sidebarOpened) {
props.dispatch(closeSidebar());
} else {
const paths = props.location.pathname.split('/');
paths.pop();
props.dispatch(openSidebar());
}
}
const doLogout = () => {
props.dispatch(logoutUser());
}
return (
<Navbar className={`${s.root} d-print-none`}>
<div>
<NavLink
onClick={() => toggleSidebar()}
className={`d-md-none mr-3 ${s.navItem}`}
href="#"
>
<MenuIcon className={s.menuIcon} />
</NavLink>
</div>
<Form className="d-none d-sm-block" inline>
<FormGroup>
<InputGroup className='input-group-no-border'>
<Input id="search-input" placeholder="Search Dashboard" className='focus'/>
<InputGroupAddon addonType="prepend">
<span>
<SearchBarIcon/>
</span>
</InputGroupAddon>
</InputGroup>
</FormGroup>
</Form>
<Nav className="ml-auto">
<NavItem className="d-sm-none mr-4">
<NavLink
className=""
href="#"
>
<SearchIcon />
</NavLink>
</NavItem>
<Dropdown nav isOpen={menuOpen} toggle={() => toggleMenu()} className="tutorial-dropdown mr-2 mr-sm-3">
<DropdownToggle nav>
<div className={s.navbarBlock}>
<i className={'eva eva-bell-outline'}/>
<div className={s.count}></div>
</div>
</DropdownToggle>
<DropdownMenu right className="navbar-dropdown notifications-dropdown" style={{ width: "340px" }}>
<DropdownItem><img src={basketIcon} alt="Basket Icon"/><span>12 new orders have arrived today</span></DropdownItem>
<DropdownItem>
<div>
<div className="d-flex flex-row mb-1">
<img src={mariaImage} alt="Maria" className={s.mariaImage} />
<div className="d-flex flex-column">
<p className="body-3">Maria</p>
<p className="label muted">15 min ago</p>
</div>
</div>
<img src={notificationImage} alt="Notification Icon" className={s.notificationImage}/>
<p className="body-2 muted">It is just a simple image that can define th..</p>
</div>
</DropdownItem>
<DropdownItem><img src={calendarIcon} alt="Calendar Icon"/><span>1 event has been canceled and ...</span></DropdownItem>
<DropdownItem><img src={envelopeIcon} alt="Envelope Icon"/><span>you have 2 new messages</span></DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown isOpen={notificationsOpen} toggle={() => toggleNotifications()} nav id="basic-nav-dropdown" className="ml-3">
<DropdownToggle nav caret className="navbar-dropdown-toggle">
<span className={`${s.avatar} rounded-circle float-left mr-2`}>
<img src={userImg} alt="User"/>
</span>
<span className="small d-none d-sm-block ml-1 mr-2 body-1">Christina Carey</span>
</DropdownToggle>
<DropdownMenu className="navbar-dropdown profile-dropdown" style={{ width: "194px" }}>
<DropdownItem className={s.dropdownProfileItem}><ProfileIcon/><span>Profile</span></DropdownItem>
<DropdownItem className={s.dropdownProfileItem}><TasksIcon/><span>Tasks</span></DropdownItem>
<DropdownItem className={s.dropdownProfileItem}><MessagesIcon/><span>Messages</span></DropdownItem>
<NavItem>
<NavLink onClick={() => doLogout()} href="#">
<button className="btn btn-primary rounded-pill mx-auto logout-btn" type="submit"><img src={logoutIcon} alt="Logout"/><span className="ml-1">Logout</span></button>
</NavLink>
</NavItem>
</DropdownMenu>
</Dropdown>
</Nav>
</Navbar>
)
}
Example #28
| Source File: Tables.js From sofia-react-template with MIT License | 4 votes |
|
Tables = function () {
const [dropdownOpen, setDropdownOpen] = useState(false);
const [firstTable] = useState(mock.firstTable);
const [secondTable] = useState(mock.secondTable);
const [transactions, setTransactions] = useState(mock.transactionsWidget);
const [tasks, setTasks] = useState(mock.tasksWidget);
const [firstTableCurrentPage, setFirstTableCurrentPage] = useState(0);
const [secondTableCurrentPage, setSecondTableCurrentPage] = useState(0);
const [tableDropdownOpen, setTableMenuOpen] = useState(false);
const pageSize = 4;
const firstTablePagesCount = Math.ceil(firstTable.length / pageSize);
const secondTablePagesCount = Math.ceil(secondTable.length / pageSize);
const setFirstTablePage = (e, index) => {
e.preventDefault();
setFirstTableCurrentPage(index);
}
const setSecondTablePage = (e, index) => {
e.preventDefault();
setSecondTableCurrentPage(index);
}
const toggle = () => {
setDropdownOpen(!dropdownOpen);
}
const transactionMenuOpen = (id) => {
setTransactions(
transactions.map( transaction => {
if (transaction.id === id) {
transaction.dropdownOpen = !transaction.dropdownOpen;
}
return transaction;
})
)
}
const tableMenuOpen = () => {
setTableMenuOpen(!tableDropdownOpen);
}
const toggleTask = (id) => {
setTasks(
tasks.map( task => {
if (task.id === id) {
task.completed = !task.completed;
}
return task;
})
)
}
return (
<div>
<Row>
<Col>
<Row className="mb-4">
<Col>
<Widget>
<div className={s.tableTitle}>
<div className="headline-2">States Colors</div>
<div className="d-flex">
<a href="/#"><img src={searchIcon} alt="Search"/></a>
<a href="/#"><img className="d-none d-sm-block" src={cloudIcon} alt="Cloud" /></a>
<a href="/#"><img src={printerIcon} alt="Printer" /></a>
<a href="/#"><img className="d-none d-sm-block" src={optionsIcon} alt="Options" /></a>
<a href="/#"><img src={funnelIcon} alt="Funnel" /></a>
</div>
</div>
<div className="widget-table-overflow">
<Table className={`table-striped table-borderless table-hover ${s.statesTable}`} responsive>
<thead>
<tr>
<th className={s.checkboxCol}>
<div className="checkbox checkbox-primary">
<input
className="styled"
id="checkbox100"
type="checkbox"
/>
<label for="checkbox100"/>
</div>
</th>
<th className="w-25">NAME</th>
<th className="w-25">COMPANY</th>
<th className="w-25">CITY</th>
<th className="w-25">STATE</th>
</tr>
</thead>
<tbody>
{firstTable
.slice(
firstTableCurrentPage * pageSize,
(firstTableCurrentPage + 1) * pageSize
)
.map(item => (
<tr key={uuidv4()}>
<td>
<div className="checkbox checkbox-primary">
<input
id={item.id}
className="styled"
type="checkbox"
/>
<Label for={item.id} />
</div>
</td>
<td className="d-flex align-items-center"><img className={s.image} src={item.img} alt="User"/><span className="ml-3">{item.name}</span></td>
<td>{item.company}</td>
<td>{item.city}</td>
<td>{item.state}</td>
</tr>
))}
</tbody>
</Table>
<Pagination className="pagination-borderless" aria-label="Page navigation example">
<PaginationItem disabled={firstTableCurrentPage <= 0}>
<PaginationLink
onClick={e => setFirstTablePage(e, firstTableCurrentPage - 1)}
previous
href="#top"
/>
</PaginationItem>
{[...Array(firstTablePagesCount)].map((page, i) =>
<PaginationItem active={i === firstTableCurrentPage} key={i}>
<PaginationLink onClick={e => setFirstTablePage(e, i)} href="#top">
{i + 1}
</PaginationLink>
</PaginationItem>
)}
<PaginationItem disabled={firstTableCurrentPage >= firstTablePagesCount - 1}>
<PaginationLink
onClick={e => setFirstTablePage(e, firstTableCurrentPage + 1)}
next
href="#top"
/>
</PaginationItem>
</Pagination>
</div>
</Widget>
</Col>
</Row>
<Row className="mb-4">
<Col>
<Widget>
<div className={s.tableTitle}>
<div className="headline-2">Material UI table</div>
<Dropdown
className="d-none d-sm-block"
nav
isOpen={tableDropdownOpen}
toggle={() => tableMenuOpen()}
>
<DropdownToggle nav>
<img className="d-none d-sm-block" src={moreIcon} alt="More..."/>
</DropdownToggle>
<DropdownMenu >
<DropdownItem>
<div>Copy</div>
</DropdownItem>
<DropdownItem>
<div>Edit</div>
</DropdownItem>
<DropdownItem>
<div>Delete</div>
</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
<div className="widget-table-overflow">
<Table className="table-striped table-borderless table-hover" responsive>
<thead>
<tr>
<th>
<div className="checkbox checkbox-primary">
<input
id="checkbox200"
className="styled"
type="checkbox"
/>
<label for="checkbox200"/>
</div>
</th>
<th className={s.nameCol}>NAME</th>
<th>EMAIL</th>
<th>PRODUCT</th>
<th>PRICE</th>
<th>DATE</th>
<th>CITY</th>
<th>STATUS</th>
</tr>
</thead>
<tbody>
{secondTable
.slice(
secondTableCurrentPage * pageSize,
(secondTableCurrentPage + 1) * pageSize
)
.map(item => (
<tr key={uuidv4()}>
<td>
<div className="checkbox checkbox-primary">
<input
id={item.id}
className="styled"
type="checkbox"
/>
<label for={item.id} />
</div>
</td>
<td>{item.name}</td>
<td>{item.email}</td>
<td>{item.product}</td>
<td>{item.price}</td>
<td>{item.date}</td>
<td>{item.city}</td>
<td><Badge color={item.color}>{item.status}</Badge></td>
</tr>
))}
</tbody>
</Table>
<Pagination className="pagination-with-border">
<PaginationItem disabled={secondTableCurrentPage <= 0}>
<PaginationLink
onClick={e => setSecondTablePage(e, secondTableCurrentPage - 1)}
previous
href="#top"
/>
</PaginationItem>
{[...Array(secondTablePagesCount)].map((page, i) =>
<PaginationItem active={i === secondTableCurrentPage} key={i}>
<PaginationLink onClick={e => setSecondTablePage(e, i)} href="#top">
{i + 1}
</PaginationLink>
</PaginationItem>
)}
<PaginationItem disabled={secondTableCurrentPage >= secondTablePagesCount - 1}>
<PaginationLink
onClick={e => setSecondTablePage(e, secondTableCurrentPage + 1)}
next
href="#top"
/>
</PaginationItem>
</Pagination>
</div>
</Widget>
</Col>
</Row>
<Row>
<Col xs={12} xl={8} className="pr-grid-col">
<Widget>
<div className={s.tableTitle}>
<div className="headline-2">Recent transaction</div>
<div>
<ButtonDropdown
isOpen={dropdownOpen}
toggle={toggle}
className=""
>
<DropdownToggle caret>
Weekly
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Daily</DropdownItem>
<DropdownItem>Weekly</DropdownItem>
<DropdownItem>Monthly</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
{/*<img src="" alt="Filter option"/>*/}
</div>
</div>
<div className={s.widgetContentBlock}>
{transactions.map(item => (
<div key={uuidv4()} className={s.content}>
<div><img src={item.icon} alt="Item" /><span className="body-2 ml-3">{item.category}</span></div>
<div className="body-3 muted d-none d-md-block">{item.date}</div>
<div className="body-2">{item.price}</div>
<div className="body-3 muted d-none d-lg-block">{item.description}</div>
<Dropdown
className="d-none d-sm-block"
nav
isOpen={item.dropdownOpen}
toggle={() => transactionMenuOpen(item.id)}
>
<DropdownToggle nav>
<img className="d-none d-sm-block" src={moreIcon} alt="More ..."/>
</DropdownToggle>
<DropdownMenu >
<DropdownItem>
<div>Copy</div>
</DropdownItem>
<DropdownItem>
<div>Edit</div>
</DropdownItem>
<DropdownItem>
<div>Delete</div>
</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
))}
</div>
</Widget>
</Col>
<Col xs={12} xl={4} className="pl-grid-col mt-4 mt-xl-0">
<Widget>
<div className={s.tableTitle}>
<div className="headline-2">Tasks</div>
</div>
<div className={s.widgetContentBlock}>
<TaskContainer tasks={tasks} toggleTask={toggleTask} />
</div>
</Widget>
</Col>
</Row>
</Col>
</Row>
</div>
)
}
Example #29
| Source File: Header.js From gedge-platform with Apache License 2.0 | 4 votes |
|
// toggleFullscreen() {
// if (
// !document.fullscreenElement &&
// /* alternative standard method */ !document.mozFullScreenElement &&
// !document.webkitFullscreenElement
// ) {
// // current working methods
// if (document.documentElement.requestFullscreen) {
// document.documentElement.requestFullscreen();
// } else if (document.documentElement.mozRequestFullScreen) {
// document.documentElement.mozRequestFullScreen();
// } else if (document.documentElement.webkitRequestFullscreen) {
// document.documentElement.webkitRequestFullscreen(
// Element.ALLOW_KEYBOARD_INPUT
// );
// }
// } else {
// if (document.cancelFullScreen) {
// document.cancelFullScreen();
// } else if (document.mozCancelFullScreen) {
// document.mozCancelFullScreen();
// } else if (document.webkitCancelFullScreen) {
// document.webkitCancelFullScreen();
// }
// }
// }
render() {
return (
<React.Fragment>
<header id="page-topbar">
<div className="navbar-header">
<div className="d-flex">
<div className="navbar-brand-box">
<Link to="/" className="logo logo-dark">
<span className="logo-sm">
<img src={logoSmDark} alt="" height="22" />
</span>
<span className="logo-lg">
<img src={logoDark} alt="" height="30" />
</span>
</Link>
<Link to="/" className="logo logo-light">
<span className="logo-sm">
<img src={logoSmLight} alt="" height="22" />
</span>
<span className="logo-lg">
<img src={logoLight} alt="" height="30" />
</span>
</Link>
</div>
<Button color="none" type="button" size="sm" onClick={this.toggleMenu} className="px-3 font-size-24 d-lg-none header-item" data-toggle="collapse" data-target="#topnav-menu-content">
<i className="ri-menu-2-line align-middle"></i>
</Button>
<Form className="app-search d-none d-lg-block">
<div className="position-relative">
<Input type="text" className="form-control" placeholder={this.props.t('Search')} />
<span className="ri-search-line"></span>
</div>
</Form>
<Dropdown isOpen={this.state.isMegaMenu} toggle={() => this.setState({ isMegaMenu: !this.state.isMegaMenu })} className="dropdown-mega d-none d-lg-block ml-2">
<DropdownToggle tag="button" type="button" className="btn header-item waves-effect">
{this.props.t('Mega Menu')}{" "}
<i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu className="dropdown-megamenu">
<Row>
<Col sm={8}>
<Row>
<Col md={4}>
<h5 className="font-size-14 mt-0">{this.props.t('UI Components')}</h5>
<ul className="list-unstyled megamenu-list">
<li>
<Link to="#">{this.props.t('Lightbox')}</Link>
</li>
<li>
<Link to="#">{this.props.t('Range Slider')}</Link>
</li>
<li>
<Link to="#">{this.props.t('Sweet Alert')}</Link>
</li>
<li>
<Link to="#">{this.props.t('Rating')}</Link>
</li>
<li>
<Link to="#">{this.props.t('Forms')}</Link>
</li>
<li>
<Link to="#">{this.props.t('Tables')}</Link>
</li>
<li>
<Link to="#">{this.props.t('Charts')}</Link>
</li>
</ul>
</Col>
<Col md={4}>
<h5 className="font-size-14 mt-0">{this.props.t('Applications')}</h5>
<ul className="list-unstyled megamenu-list">
<li>
<Link to="#">{this.props.t('Ecommerce')}</Link>
</li>
<li>
<Link to="#">{this.props.t('Calendar')}</Link>
</li>
<li>
<Link to="#">{this.props.t('Email')}</Link>
</li>
<li>
<Link to="#">{this.props.t('Projects')}</Link>
</li>
<li>
<Link to="#">{this.props.t('Tasks')}</Link>
</li>
<li>
<Link to="#">{this.props.t('Contacts')}</Link>
</li>
</ul>
</Col>
<Col md={4}>
<h5 className="font-size-14 mt-0">{this.props.t('Extra Pages')}</h5>
<ul className="list-unstyled megamenu-list">
<li>
<Link to="#">{this.props.t('Light Sidebar')}</Link>
</li>
<li>
<Link to="#">{this.props.t('Compact Sidebar')}</Link>
</li>
<li>
<Link to="#">{this.props.t('Horizontal layout')}</Link>
</li>
<li>
<Link to="#">{this.props.t('Maintenance')}</Link>
</li>
<li>
<Link to="#">{this.props.t('Coming Soon')}</Link>
</li>
<li>
<Link to="#">{this.props.t('Timeline')}</Link>
</li>
<li>
<Link to="#">{this.props.t('FAQs')}</Link>
</li>
</ul>
</Col>
</Row>
</Col>
<Col sm={4}>
<Row>
<Col sm={6}>
<h5 className="font-size-14 mt-0">{this.props.t('UI Components')}</h5>
<ul className="list-unstyled megamenu-list">
<li>
<Link to="#">{this.props.t('Lightbox')}</Link>
</li>
<li>
<Link to="#">{this.props.t('Range Slider')}</Link>
</li>
<li>
<Link to="#">{this.props.t('Sweet Alert')}</Link>
</li>
<li>
<Link to="#">{this.props.t('Rating')}</Link>
</li>
<li>
<Link to="#">{this.props.t('Forms')}</Link>
</li>
<li>
<Link to="#">{this.props.t('Tables')}</Link>
</li>
<li>
<Link to="#">{this.props.t('Charts')}</Link>
</li>
</ul>
</Col>
{/* <Col sm={5}>
<div>
<img src={megamenuImg} alt="" className="img-fluid mx-auto d-block" />
</div>
</Col> */}
</Row>
</Col>
</Row>
</DropdownMenu>
</Dropdown>
</div>
{/* <div className="d-flex">
<div className="dropdown d-inline-block d-lg-none ml-2">
<Button color="none" type="button" onClick={() => { this.setState({ isSearch: !this.state.isSearch }); }} className="header-item noti-icon waves-effect" id="page-header-search-dropdown" >
<i className="ri-search-line"></i>
</Button>
<div className={this.state.isSearch ? "dropdown-menu dropdown-menu-lg dropdown-menu-right p-0 show" : "dropdown-menu dropdown-menu-lg dropdown-menu-right p-0"}
aria-labelledby="page-header-search-dropdown">
<Form className="p-3">
<FormGroup className="m-0">
<InputGroup>
<Input type="text" className="form-control" placeholder={this.props.t('Search')} />
<InputGroupAddon addonType="append">
<Button color="primary" type="submit"><i className="ri-search-line"></i></Button>
</InputGroupAddon>
</InputGroup>
</FormGroup>
</Form>
</div>
</div>
<LanguageDropdown />
<Dropdown isOpen={this.state.isProfile} toggle={() => this.setState({ isProfile: !this.state.isProfile })} className="d-none d-lg-inline-block ml-1">
<DropdownToggle tag="button" type="button" className="btn header-item noti-icon waves-effect">
<i className="ri-apps-2-line"></i>
</DropdownToggle>
<DropdownMenu right className="dropdown-menu-lg">
<div className="px-lg-2">
<Row className="no-gutters">
<Col>
<Link className="dropdown-icon-item" to="#">
<img src={github} alt="Github" />
<span>{this.props.t('GitHub')}</span>
</Link>
</Col>
<Col>
<Link className="dropdown-icon-item" to="#">
<img src={bitbucket} alt="bitbucket" />
<span>{this.props.t('Bitbucket')}</span>
</Link>
</Col>
<Col>
<Link className="dropdown-icon-item" to="#">
<img src={dribbble} alt="dribbble" />
<span>{this.props.t('Dribbble')}</span>
</Link>
</Col>
</Row>
<Row className="no-gutters">
<Col>
<Link className="dropdown-icon-item" to="#">
<img src={dropbox} alt="dropbox" />
<span>{this.props.t('Dropbox')}</span>
</Link>
</Col>
<Col>
<Link className="dropdown-icon-item" to="#">
<img src={mail_chimp} alt="mail_chimp" />
<span>{this.props.t('Mail Chimp')}</span>
</Link>
</Col>
<Col>
<Link className="dropdown-icon-item" to="#">
<img src={slack} alt="slack" />
<span>{this.props.t('Slack')}</span>
</Link>
</Col>
</Row>
</div>
</DropdownMenu>
</Dropdown>
<div className="dropdown d-none d-lg-inline-block ml-1">
<Button type="button" color="none" onClick={this.toggleFullscreen} className="header-item noti-icon waves-effect" data-toggle="fullscreen">
<i className="ri-fullscreen-line"></i>
</Button>
</div>
<NotificationDropdown />
<ProfileMenu />
<div onClick={this.toggleRightbar} className="dropdown d-inline-block">
<Button type="button" color="none" className="header-item noti-icon right-bar-toggle waves-effect">
<i className="ri-settings-2-line"></i>
</Button>
</div>
</div> */}
</div>
</header>
</React.Fragment>
);
}
