react-bootstrap#Collapse JavaScript Examples
The following examples show how to use
react-bootstrap#Collapse.
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: Accordion.js From plenty-interface with GNU General Public License v3.0 | 6 votes |
|
Accordion = (props) => {
const [isOpen, setIsOpen] = useState(props.isOpen ? props.isOpen : false);
const toggle = () => setIsOpen(!isOpen);
return (
<div className={props.className && props.className}>
<div role="button" onClick={toggle} className="d-flex flex-row py-3">
<h6 className="text-white font-weight-bold">{props.text}</h6>
<div className="ml-auto">
{isOpen ? (
<span className="material-icons-round text-white">expand_less</span>
) : (
<span className="material-icons-round text-white">expand_more</span>
)}
</div>
</div>
<Collapse in={isOpen}>{props.children}</Collapse>
</div>
);
}
Example #2
| Source File: select_entry.js From twmwallet with MIT License | 5 votes |
|
render() {
return (
<div className="width100 height100 d-flex flex-column text-center">
<Container fluid className="height100 flex-column d-flex justify-content-center start-background-image">
<Image onClick={this.back} className="entry-off-button pointer" src={require("./../../img/off_black.svg")}/>
<Row className="rowjustify-content-md-center justify-content-center p-3">
<Image className="w-25" src={require("./../../img/safex-home-multi.png")}/>
</Row>
<Col className="my-5">
<Col className="my-2 p-3">
<button onClick={this.open_existing} className="custom-button-entry">Open Existing Wallet</button>
</Col>
<Col className="my-2 p-3">
<button onClick={this.create_new} className="custom-button-entry">Create New Wallet</button>
</Col>
<Col className="my-2 p-3">
<button onClick={this.restore_keys} className="custom-button-entry">Recover Wallet From Keys</button>
</Col>
<Col className="my-2 p-3">
<button onClick={this.seed_phrase} className="custom-button-entry">Recover Wallet From Seed Phrase</button>
</Col>
{this.state.legacy_detected ?
(
<Col className="my-5 p-3">
<button className="custom-button-entry orange-border" onClick={() => this.setState({showLegacyAlert: !this.state.showLegacyAlert})}>Open Legacy Wallet</button>
<Collapse in={this.state.showLegacyAlert}>
<Alert
variant="info"
transition={false}
className="mt-3 w-50 mx-auto entry-back-text"
>
<Alert.Heading>We are working on this feature. Thank you for your patience!</Alert.Heading>
</Alert>
</Collapse>
</Col>
)
:
(<div></div>)
}
</Col>
</Container>
</div>);
}
Example #3
| Source File: Patient.js From SaraAlert with Apache License 2.0 | 4 votes |
|
render() {
if (!this.props.details) {
return <React.Fragment>No monitoree details to show.</React.Fragment>;
}
return (
<React.Fragment>
{this.props?.details?.responder_id && this.props.details.responder_id != this.props.details.id && (
<Row className="pb-3 mx-3">
The reporting responsibility for this monitoree is handled by another monitoree.
<a href={'/patients/' + this.props.details.responder_id}>Click here to view that monitoree</a>.
</Row>
)}
{this.props?.groupMembers && this.props?.groupMembers?.length > 0 && (
<Row className="pb-3 mx-3">
<Col>
<Row>This monitoree is responsible for handling the reporting of the following other monitorees:</Row>
{this.props?.groupMembers?.map((member, index) => {
return (
<Row key={'gm' + index}>
<a href={'/patients/' + member.id}>
{member.last_name}, {member.first_name} {member.middle_name || ''}
</a>
</Row>
);
})}
</Col>
</Row>
)}
{this.props.jurisdictionPath && (
<Row className="mx-1">
<Col className="text-truncate">
<span className="font-weight-normal">Assigned Jurisdiction:</span> <span className="font-weight-light">{`${this.props.jurisdictionPath}`}</span>
</Col>
</Row>
)}
<Row className="pt-4 mx-1 mb-4">
<Col md="11">
<Row>
<Col>
<div className="float-left">
<h5>
<u>Identification</u>:{' '}
{`${this.props.details.first_name ? this.props.details.first_name : ''}${
this.props.details.middle_name ? ' ' + this.props.details.middle_name : ''
}${this.props.details.last_name ? ' ' + this.props.details.last_name : ''}`}
</h5>
</div>
<div className="float-right">
{this.props.goto && (
<Button variant="link" className="pt-0" onClick={() => this.props.goto(0)}>
<h5>Edit</h5>
</Button>
)}
</div>
<div className="clearfix"></div>
</Col>
</Row>
<Row>
<Col className="text-truncate">
<span className="font-weight-normal">DOB:</span>{' '}
<span className="font-weight-light">{this.props.details.date_of_birth && `${this.props.details.date_of_birth}`}</span>
<br />
<span className="font-weight-normal">Age:</span>{' '}
<span className="font-weight-light">{`${this.props.details.age ? this.props.details.age : ''}`}</span>
<br />
<span className="font-weight-normal">Language:</span>{' '}
<span className="font-weight-light">{`${this.props.details.primary_language ? this.props.details.primary_language : ''}`}</span>
<br />
<span className="font-weight-normal">State/Local ID:</span>{' '}
<span className="font-weight-light">{`${
this.props.details.user_defined_id_statelocal ? this.props.details.user_defined_id_statelocal : ''
}`}</span>
<br />
<span className="font-weight-normal">CDC ID:</span>{' '}
<span className="font-weight-light">{`${this.props.details.user_defined_id_cdc ? this.props.details.user_defined_id_cdc : ''}`}</span>
<br />
<span className="font-weight-normal">NNDSS ID:</span>{' '}
<span className="font-weight-light">{`${this.props.details.user_defined_id_nndss ? this.props.details.user_defined_id_nndss : ''}`}</span>
</Col>
<Col className="text-truncate">
<span className="font-weight-normal">Sex:</span>{' '}
<span className="font-weight-light">{`${this.props.details.sex ? this.props.details.sex : ''}`}</span>
<br />
<span className="font-weight-normal">Race:</span>{' '}
<span className="font-weight-light">{`${this.props.details.white ? 'White' : ''}${
this.props.details.black_or_african_american ? ' Black or African American' : ''
}${this.props.details.asian ? ' Asian' : ''}${this.props.details.american_indian_or_alaska_native ? ' American Indian or Alaska Native' : ''}${
this.props.details.native_hawaiian_or_other_pacific_islander ? ' Native Hawaiian or Other Pacific Islander' : ''
}`}</span>
<br />
<span className="font-weight-normal">Ethnicity:</span>{' '}
<span className="font-weight-light">{`${this.props.details.ethnicity ? this.props.details.ethnicity : ''}`}</span>
<br />
<span className="font-weight-normal">Nationality:</span>{' '}
<span className="font-weight-light">{`${this.props.details.nationality ? this.props.details.nationality : ''}`}</span>
<br />
</Col>
</Row>
</Col>
<Col md="2"></Col>
<Col md="11">
<Row>
<Col>
<div className="float-left">
<h5>
<u>Address</u>
</h5>
</div>
<div className="float-right">
{this.props.goto && (
<Button variant="link" className="pt-0" onClick={() => this.props.goto(1)}>
<h5>Edit</h5>
</Button>
)}
</div>
<div className="clearfix"></div>
</Col>
</Row>
<Row>
<Col className="text-truncate">
<span className="font-weight-light">
{this.props.details.address_line_1 && `${this.props.details.address_line_1}`}
{this.props.details.address_line_2 && ` ${this.props.details.address_line_2}`}
{this.props.details.foreign_address_line_1 && `${this.props.details.foreign_address_line_1}`}
{this.props.details.foreign_address_line_2 && ` ${this.props.details.foreign_address_line_2}`}
</span>
<br />
<span className="font-weight-light">
{this.props.details.address_city ? this.props.details.address_city : ''}
{this.props.details.address_state ? ` ${this.props.details.address_state}` : ''}
{this.props.details.address_county ? ` ${this.props.details.address_county}` : ''}
{this.props.details.address_zip ? ` ${this.props.details.address_zip}` : ''}
{this.props.details.foreign_address_city ? this.props.details.foreign_address_city : ''}
{this.props.details.foreign_address_country ? ` ${this.props.details.foreign_address_country}` : ''}
{this.props.details.foreign_address_zip ? ` ${this.props.details.foreign_address_zip}` : ''}
</span>
<br />
</Col>
</Row>
</Col>
</Row>
<Collapse in={!this.props.hideBody}>
<Card.Body className="mx-0 px-0 my-0 py-0">
<Row className="g-border-bottom-2 mx-2 pb-4 mb-2"></Row>
<Row className="g-border-bottom-2 pb-4 mb-2 mt-4 mx-1">
<Col md="11">
<Row>
<Col>
<div className="float-left">
<h5>
<u>Contact Information</u>
</h5>
</div>
<div className="float-right">
{this.props.goto && (
<Button variant="link" className="pt-0" onClick={() => this.props.goto(2)}>
<h5>Edit</h5>
</Button>
)}
</div>
<div className="clearfix"></div>
</Col>
</Row>
<Row>
<Col className="text-truncate">
<span className="font-weight-normal">Phone:</span>{' '}
<span className="font-weight-light">{this.props.details.primary_telephone && `${this.props.details.primary_telephone}`}</span>
<br />
<span className="font-weight-normal">Preferred Contact Time:</span>{' '}
<span className="font-weight-light">{this.props.details.preferred_contact_time && `${this.props.details.preferred_contact_time}`}</span>
<br />
<span className="font-weight-normal">Type:</span>{' '}
<span className="font-weight-light">{`${this.props.details.primary_telephone_type ? this.props.details.primary_telephone_type : ''}`}</span>
<br />
<span className="font-weight-normal">Email:</span>{' '}
<span className="font-weight-light">{`${this.props.details.email ? this.props.details.email : ''}`}</span>
<br />
<span className="font-weight-normal">Preferred Reporting Method:</span>{' '}
<span className="font-weight-light">{`${
this.props.details.preferred_contact_method ? this.props.details.preferred_contact_method : ''
}`}</span>
</Col>
</Row>
</Col>
<Col md="2"></Col>
<Col md="11">
<Row>
<Col>
<div className="float-left">
<h5>
<u>Arrival Information</u>
</h5>
</div>
<div className="float-right">
{this.props.goto && (
<Button variant="link" className="pt-0" onClick={() => this.props.goto(3)}>
<h5>Edit</h5>
</Button>
)}
</div>
<div className="clearfix"></div>
</Col>
</Row>
<Row>
<Col className="text-truncate">
<h6>DEPARTED</h6>
<span className="font-weight-light">{this.props.details.port_of_origin && `${this.props.details.port_of_origin}`}</span>
<br />
<span className="font-weight-light">{`${this.props.details.date_of_departure ? this.props.details.date_of_departure : ''}`}</span>
</Col>
<Col className="text-truncate">
<h6>ARRIVAL</h6>
<span className="font-weight-light">{`${this.props.details.port_of_entry_into_usa ? this.props.details.port_of_entry_into_usa : ''}`}</span>
<br />
<span className="font-weight-light">{`${this.props.details.date_of_arrival ? this.props.details.date_of_arrival : ''}`}</span>
</Col>
</Row>
<Row>
<Col className="text-truncate pt-1">
<span className="font-weight-light">{this.props.details.flight_or_vessel_carrier && `${this.props.details.flight_or_vessel_carrier}`}</span>
<br />
<span className="font-weight-light">{this.props.details.flight_or_vessel_number && `${this.props.details.flight_or_vessel_number}`}</span>
</Col>
</Row>
</Col>
</Row>
<Row className="pb-2 mb-2 mt-4 mx-1">
<Col md="11">
<Row>
<Col>
<div className="float-left">
<h5>
<u>Additional Planned Travel</u>
</h5>
</div>
<div className="float-right">
{this.props.goto && (
<Button variant="link" className="pt-0" onClick={() => this.props.goto(4)}>
<h5>Edit</h5>
</Button>
)}
</div>
<div className="clearfix"></div>
</Col>
</Row>
<Row>
<Col className="text-truncate">
<span className="font-weight-normal">Type:</span>{' '}
<span className="font-weight-light">
{this.props.details.additional_planned_travel_type && `${this.props.details.additional_planned_travel_type}`}
</span>
<br />
<span className="font-weight-normal">Place:</span>{' '}
<span className="font-weight-light">
{`${
this.props.details.additional_planned_travel_destination_country ? this.props.details.additional_planned_travel_destination_country : ''
}`}
{`${
this.props.details.additional_planned_travel_destination_state ? this.props.details.additional_planned_travel_destination_state : ''
}`}
</span>
<br />
<span className="font-weight-normal">Port Of Departure:</span>{' '}
<span className="font-weight-light">{`${
this.props.details.additional_planned_travel_port_of_departure ? this.props.details.additional_planned_travel_port_of_departure : ''
}`}</span>
<br />
<span className="font-weight-normal">End Date:</span>{' '}
<span className="font-weight-light">{`${
this.props.details.additional_planned_travel_start_date ? this.props.details.additional_planned_travel_start_date : ''
}`}</span>
<br />
<span className="font-weight-normal">Start Date:</span>{' '}
<span className="font-weight-light">{`${
this.props.details.additional_planned_travel_end_date ? this.props.details.additional_planned_travel_end_date : ''
}`}</span>
</Col>
</Row>
</Col>
<Col md="2"></Col>
<Col md="11">
<Row>
<Col>
<div className="float-left">
<h5>
<u>Potential Exposure Information</u>
</h5>
</div>
<div className="float-right">
{this.props.goto && (
<Button variant="link" className="pt-0" onClick={() => this.props.goto(5)}>
<h5>Edit</h5>
</Button>
)}
</div>
<div className="clearfix"></div>
</Col>
</Row>
<Row>
<Col className="text-truncate">
<h6>LAST EXPOSURE</h6>
<span className="font-weight-light">
{`${this.props.details.potential_exposure_location ? this.props.details.potential_exposure_location : ''}`}
{`${this.props.details.potential_exposure_country ? ' ' + this.props.details.potential_exposure_country : ''}`}
</span>
<br />
<span className="font-weight-light">{`${this.props.details.last_date_of_exposure ? this.props.details.last_date_of_exposure : ''}`}</span>
<br />
<span className="font-weight-light text-danger">
{this.props.details.contact_of_known_case
? 'CLOSE CONTACT WITH A KNOWN CASE: ' + (this.props.details.contact_of_known_case_id ? this.props.details.contact_of_known_case_id : '')
: ''}
{this.props.details.contact_of_known_case ? <br /> : ''}
</span>
<span className="font-weight-light text-danger">
{this.props.details.member_of_a_common_exposure_cohort
? 'MEMBER OF A COMMON EXPOSURE COHORT: ' +
(this.props.details.member_of_a_common_exposure_cohort_type ? this.props.details.member_of_a_common_exposure_cohort_type : '')
: ''}
{this.props.details.member_of_a_common_exposure_cohort ? <br /> : ''}
</span>
<span className="font-weight-light text-danger">
{this.props.details.travel_to_affected_country_or_area ? 'TRAVEL FROM AFFECTED COUNTRY OR AREA' : ''}
{this.props.details.travel_to_affected_country_or_area ? <br /> : ''}
</span>
<span className="font-weight-light text-danger">
{this.props.details.was_in_health_care_facility_with_known_cases
? 'WAS IN HEALTH CARE FACILITY WITH KNOWN CASES: ' +
(this.props.details.was_in_health_care_facility_with_known_cases_facility_name
? this.props.details.was_in_health_care_facility_with_known_cases_facility_name
: '')
: ''}
{this.props.details.was_in_health_care_facility_with_known_cases ? <br /> : ''}
</span>
<span className="font-weight-light text-danger">
{this.props.details.laboratory_personnel
? 'LABORATORY PERSONNEL: ' +
(this.props.details.laboratory_personnel_facility_name ? this.props.details.laboratory_personnel_facility_name : '')
: ''}
{this.props.details.laboratory_personnel ? <br /> : ''}
</span>
<span className="font-weight-light text-danger">
{this.props.details.healthcare_personnel
? 'HEALTHCARE PERSONNEL: ' +
(this.props.details.healthcare_personnel_facility_name ? this.props.details.healthcare_personnel_facility_name : '')
: ''}
{this.props.details.healthcare_personnel ? <br /> : ''}
</span>
<span className="font-weight-light text-danger">
{this.props.details.crew_on_passenger_or_cargo_flight ? 'CREW ON PASSENGER OR CARGO FLIGHT' : ''}
{this.props.details.crew_on_passenger_or_cargo_flight ? <br /> : ''}
</span>
</Col>
</Row>
</Col>
</Row>
</Card.Body>
</Collapse>
</React.Fragment>
);
}
Example #4
| Source File: Sidebar.js From Purple-React with MIT License | 4 votes |
|
render () {
return (
<nav className="sidebar sidebar-offcanvas" id="sidebar">
<ul className="nav">
<li className="nav-item nav-profile">
<a href="!#" className="nav-link" onClick={evt =>evt.preventDefault()}>
<div className="nav-profile-image">
<img src={ require("../../assets/images/faces/face1.jpg") } alt="profile" />
<span className="login-status online"></span> {/* change to offline or busy as needed */}
</div>
<div className="nav-profile-text">
<span className="font-weight-bold mb-2"><Trans>David Grey. H</Trans></span>
<span className="text-secondary text-small"><Trans>Project Manager</Trans></span>
</div>
<i className="mdi mdi-bookmark-check text-success nav-profile-badge"></i>
</a>
</li>
<li className={ this.isPathActive('/dashboard') ? 'nav-item active' : 'nav-item' }>
<Link className="nav-link" to="/dashboard">
<span className="menu-title"><Trans>Dashboard</Trans></span>
<i className="mdi mdi-home menu-icon"></i>
</Link>
</li>
<li className={ this.isPathActive('/basic-ui') ? 'nav-item active' : 'nav-item' }>
<div className={ this.state.basicUiMenuOpen ? 'nav-link menu-expanded' : 'nav-link' } onClick={ () => this.toggleMenuState('basicUiMenuOpen') } data-toggle="collapse">
<span className="menu-title"><Trans>Basic UI Elements</Trans></span>
<i className="menu-arrow"></i>
<i className="mdi mdi-crosshairs-gps menu-icon"></i>
</div>
<Collapse in={ this.state.basicUiMenuOpen }>
<ul className="nav flex-column sub-menu">
<li className="nav-item"> <Link className={ this.isPathActive('/basic-ui/buttons') ? 'nav-link active' : 'nav-link' } to="/basic-ui/buttons"><Trans>Buttons</Trans></Link></li>
<li className="nav-item"> <Link className={ this.isPathActive('/basic-ui/dropdowns') ? 'nav-link active' : 'nav-link' } to="/basic-ui/dropdowns"><Trans>Dropdowns</Trans></Link></li>
<li className="nav-item"> <Link className={ this.isPathActive('/basic-ui/typography') ? 'nav-link active' : 'nav-link' } to="/basic-ui/typography"><Trans>Typography</Trans></Link></li>
</ul>
</Collapse>
</li>
<li className={ this.isPathActive('/form-elements') ? 'nav-item active' : 'nav-item' }>
<div className={ this.state.formElementsMenuOpen ? 'nav-link menu-expanded' : 'nav-link' } onClick={ () => this.toggleMenuState('formElementsMenuOpen') } data-toggle="collapse">
<span className="menu-title"><Trans>Form Elements</Trans></span>
<i className="menu-arrow"></i>
<i className="mdi mdi-format-list-bulleted menu-icon"></i>
</div>
<Collapse in={ this.state.formElementsMenuOpen }>
<ul className="nav flex-column sub-menu">
<li className="nav-item"> <Link className={ this.isPathActive('/form-elements/basic-elements') ? 'nav-link active' : 'nav-link' } to="/form-elements/basic-elements"><Trans>Basic Elements</Trans></Link></li>
</ul>
</Collapse>
</li>
<li className={ this.isPathActive('/tables') ? 'nav-item active' : 'nav-item' }>
<div className={ this.state.tablesMenuOpen ? 'nav-link menu-expanded' : 'nav-link' } onClick={ () => this.toggleMenuState('tablesMenuOpen') } data-toggle="collapse">
<span className="menu-title"><Trans>Tables</Trans></span>
<i className="menu-arrow"></i>
<i className="mdi mdi-table-large menu-icon"></i>
</div>
<Collapse in={ this.state.tablesMenuOpen }>
<ul className="nav flex-column sub-menu">
<li className="nav-item"> <Link className={ this.isPathActive('/tables/basic-table') ? 'nav-link active' : 'nav-link' } to="/tables/basic-table"><Trans>Basic Table</Trans></Link></li>
</ul>
</Collapse>
</li>
<li className={ this.isPathActive('/icons') ? 'nav-item active' : 'nav-item' }>
<div className={ this.state.iconsMenuOpen ? 'nav-link menu-expanded' : 'nav-link' } onClick={ () => this.toggleMenuState('iconsMenuOpen') } data-toggle="collapse">
<span className="menu-title"><Trans>Icons</Trans></span>
<i className="menu-arrow"></i>
<i className="mdi mdi-contacts menu-icon"></i>
</div>
<Collapse in={ this.state.iconsMenuOpen }>
<ul className="nav flex-column sub-menu">
<li className="nav-item"> <Link className={ this.isPathActive('/icons/mdi') ? 'nav-link active' : 'nav-link' } to="/icons/mdi"><Trans>Material</Trans></Link></li>
</ul>
</Collapse>
</li>
<li className={ this.isPathActive('/charts') ? 'nav-item active' : 'nav-item' }>
<div className={ this.state.chartsMenuOpen ? 'nav-link menu-expanded' : 'nav-link' } onClick={ () => this.toggleMenuState('chartsMenuOpen') } data-toggle="collapse">
<span className="menu-title"><Trans>Charts</Trans></span>
<i className="menu-arrow"></i>
<i className="mdi mdi-chart-bar menu-icon"></i>
</div>
<Collapse in={ this.state.chartsMenuOpen }>
<ul className="nav flex-column sub-menu">
<li className="nav-item"> <Link className={ this.isPathActive('/charts/chart-js') ? 'nav-link active' : 'nav-link' } to="/charts/chart-js"><Trans>Chart Js</Trans></Link></li>
</ul>
</Collapse>
</li>
<li className={ this.isPathActive('/user-pages') ? 'nav-item active' : 'nav-item' }>
<div className={ this.state.userPagesMenuOpen ? 'nav-link menu-expanded' : 'nav-link' } onClick={ () => this.toggleMenuState('userPagesMenuOpen') } data-toggle="collapse">
<span className="menu-title"><Trans>User Pages</Trans></span>
<i className="menu-arrow"></i>
<i className="mdi mdi-lock menu-icon"></i>
</div>
<Collapse in={ this.state.userPagesMenuOpen }>
<ul className="nav flex-column sub-menu">
<li className="nav-item"> <Link className={ this.isPathActive('/user-pages/login-1') ? 'nav-link active' : 'nav-link' } to="/user-pages/login-1"><Trans>Login</Trans></Link></li>
<li className="nav-item"> <Link className={ this.isPathActive('/user-pages/register-1') ? 'nav-link active' : 'nav-link' } to="/user-pages/register-1"><Trans>Register</Trans></Link></li>
<li className="nav-item"> <Link className={ this.isPathActive('/user-pages/lockscreen') ? 'nav-link active' : 'nav-link' } to="/user-pages/lockscreen"><Trans>Lockscreen</Trans></Link></li>
</ul>
</Collapse>
</li>
<li className={ this.isPathActive('/error-pages') ? 'nav-item active' : 'nav-item' }>
<div className={ this.state.errorPagesMenuOpen ? 'nav-link menu-expanded' : 'nav-link' } onClick={ () => this.toggleMenuState('errorPagesMenuOpen') } data-toggle="collapse">
<span className="menu-title"><Trans>Error Pages</Trans></span>
<i className="menu-arrow"></i>
<i className="mdi mdi-security menu-icon"></i>
</div>
<Collapse in={ this.state.errorPagesMenuOpen }>
<ul className="nav flex-column sub-menu">
<li className="nav-item"> <Link className={ this.isPathActive('/error-pages/error-404') ? 'nav-link active' : 'nav-link' } to="/error-pages/error-404">404</Link></li>
<li className="nav-item"> <Link className={ this.isPathActive('/error-pages/error-500') ? 'nav-link active' : 'nav-link' } to="/error-pages/error-500">500</Link></li>
</ul>
</Collapse>
</li>
<li className={ this.isPathActive('/general-pages') ? 'nav-item active' : 'nav-item' }>
<div className={ this.state.generalPagesMenuOpen ? 'nav-link menu-expanded' : 'nav-link' } onClick={ () => this.toggleMenuState('generalPagesMenuOpen') } data-toggle="collapse">
<span className="menu-title"><Trans>General Pages</Trans></span>
<i className="menu-arrow"></i>
<i className="mdi mdi-medical-bag menu-icon"></i>
</div>
<Collapse in={ this.state.generalPagesMenuOpen }>
<ul className="nav flex-column sub-menu">
<li className="nav-item"> <Link className={ this.isPathActive('/general-pages/blank-page') ? 'nav-link active' : 'nav-link' } to="/general-pages/blank-page"><Trans>Blank Page</Trans></Link></li>
</ul>
</Collapse>
</li>
<li className="nav-item">
<a className="nav-link" href="http://bootstrapdash.com/demo/purple-react-free/documentation/documentation.html" rel="noopener noreferrer" target="_blank">
<span className="menu-title"><Trans>Documentation</Trans></span>
<i className="mdi mdi-file-document-box menu-icon"></i>
</a>
</li>
</ul>
</nav>
);
}
Example #5
| Source File: UnstakeModal.js From plenty-interface with GNU General Public License v3.0 | 4 votes |
|
UnstakeModal = (props) => {
const [open, setOpen] = useState(false);
const [selected, setSelected] = useState([]);
useEffect(() => {
if (!props.open) {
setOpen(false);
setSelected([]);
}
}, [props.open]);
const buttonText = useMemo(() => {
if (selected.length > 0) {
return BUTTON_TEXT.CONFIRM;
}
return BUTTON_TEXT.SELECT;
}, [selected.length]);
const userStakes = useMemo(() => {
return props.userStakes?.[props.modalData.contractAddress]?.singularStakes ?? [];
}, [props.modalData.contractAddress, props.userStakes]);
const selectLabelText = useMemo(() => {
if (selected.length > 0 && !open) {
return (
<div className="d-flex justify-content-between w-100 mr-4">
<span>{SELECT_LABEL_TEXT.UNSTAKE_AMT}</span>
<span>{selected.reduce((acc, cur) => acc + cur.amount, 0)}</span>
</div>
);
}
return <span>{SELECT_LABEL_TEXT.SELECT}</span>;
}, [selected, open]);
const calculateFee = (difference, obj) => {
const feeObj = { mapId: obj.mapId };
let fee;
const matchingFeeType = props.modalData.withdrawalFeeStructure.find(
(x) => difference < x.block,
);
if (matchingFeeType) {
fee = ((obj.amount * matchingFeeType.rate) / 100).toFixed(10);
fee = parseFloat(fee);
feeObj['rate'] = matchingFeeType.rate;
feeObj['fee'] = fee;
feeObj['amount'] = obj.amount;
return feeObj;
}
const lastFeeType =
props.modalData.withdrawalFeeStructure[props.modalData.withdrawalFeeStructure.length - 1];
fee = ((obj.amount * lastFeeType.rate) / 100).toFixed(10);
fee = parseFloat(fee);
feeObj.rate = lastFeeType.rate;
feeObj.fee = fee;
feeObj.amount = obj.amount;
return feeObj;
};
const onStakeSelect = (obj) => {
if (selected.findIndex((sel) => sel.mapId === obj.mapId) === -1) {
const difference = props.currentBlock - parseInt(obj.block);
const calculatedFee = calculateFee(difference, obj);
setSelected([...selected, calculatedFee]);
} else {
setSelected(selected.filter((x) => x.mapId !== obj.mapId));
}
};
const onUnstake = () => {
props.onClose();
props.setShowConfirmTransaction(true);
props.setLoader(true);
localStorage.setItem('stakeInput', selected[0].amount);
localStorage.setItem('stakePair', props.modalData.identifier);
props.setFloaterValue({
value: localStorage.getItem('stakeInput'),
pair: localStorage.getItem('stakePair'),
type: 'Unstake',
});
props.unstakeOnFarm(
selected,
props.modalData.identifier,
props.isActiveOpen,
props.modalData.position,
props.setShowConfirmTransaction,
props.setLoader,
);
};
const onClose = () => {
setSelected([]);
setOpen(false);
props.onClose();
};
return (
<SimpleModal
open={props.open}
onClose={onClose}
title={`Unstake ${props.modalData.title} tokens`}
>
<div className={styles.unStakeModal}>
<div className={styles.unstakeSelectWrapper}>
<div
className={clsx(styles.unstakeSelect, 'd-flex justify-content-between', {
[styles.active]: open,
[styles.selectedStakes]: !open && selected.length > 0,
})}
>
{selectLabelText}
<Button
className={clsx(styles.collapseBtn, { [styles.active]: open })}
isIconBtn={true}
color="secondary"
startIcon="expand_more"
onClick={() => setOpen(!open)}
/>
</div>
<Collapse in={open}>
<div className={styles.collapsedContent}>
{userStakes.map((x) => (
<label key={x.mapId} className={styles.stakedItem}>
<div className="d-flex justify-content-between flex-grow-1">
<span>{'Stake ' + x.mapId}</span>
<span>{x.amount}</span>
</div>
<input
type="checkbox"
className="ml-2"
checked={selected.findIndex((sel) => sel.mapId === x.mapId) >= 0}
onChange={() => onStakeSelect(x, props)}
/>
</label>
))}
</div>
</Collapse>
</div>
<div className="d-flex justify-content-end mr-2 mb-2">
<div>
Total staked balance:{' '}
{props.userStakes?.[props.modalData.contractAddress]?.stakedAmount}
</div>
</div>
{selected.length > 0 && (
<>
<div className="mb-2">Fee Breakdown</div>
<div className={styles.feeBreakdownWrapper}>
<div className={clsx(styles.feeBreakdownTable, 'pb-2')}>
{selected.map((x) => (
<div key={x.mapId}>
<div>{'Stake ' + x.mapId}</div>
<div>{x.rate + '%'}</div>
<div>{x.fee}</div>
</div>
))}
</div>
<div className={clsx(styles.totalRow, 'pt-2')}>
<div>Total</div>
<div />
<div>{Number(selected.reduce((acc, cur) => acc + cur.fee, 0).toFixed(12))}</div>
</div>
</div>
</>
)}
<Button
onClick={onUnstake}
color="primary"
className="w-100 mt-4"
loading={props.unstakeOperation?.isLoading}
disabled={buttonText !== BUTTON_TEXT.CONFIRM}
>
{buttonText}
</Button>
</div>
</SimpleModal>
);
}
Example #6
| Source File: mygroups.js From SpotifyParty with MIT License | 4 votes |
|
render() {
return (
<div className="fullsize">
{ this.state.user !== null ?
<div className="fullsize">
<Accordion>
<Accordion.Toggle as={Card.Header} eventKey={1}>
Create Group
</Accordion.Toggle>
<Accordion.Collapse eventKey={1}>
<Card.Body>
<form onSubmit={this.handleAddGroupSubmit}>
<Form>
<Form.Group>
<Form.Control className="input" onChange={this.handleInputChange} name="newGroup" type="text" placeholder="Enter name" value={this.state.newGroup}/>
</Form.Group>
<Button className="btnAddPlaylist" variant="success" type="submit">
Create
</Button>
</Form>
</form>
</Card.Body>
</Accordion.Collapse>
</Accordion>
{ this.state.groups !== null ?
<Accordion defaultActiveKey="0">
{ this.state.groups.map((group, index) =>
{
return (
<Card>
<Accordion.Toggle as={"button"} className="btn btn-secondary" onClick={this.handleSelectedGroup} value={group.groupname} eventKey={index}>
{group.groupname}
</Accordion.Toggle>
<Accordion.Collapse eventKey={index}>
<Card.Body>
<h4>Members</h4>
<ul id="MemberList">
{group.members.map((member, i) => {
var displayName = member.split("@")[0];
return(<h6>{displayName}</h6>)
})
}
</ul>
<Accordion>
<Accordion.Toggle as={Button} eventKey={3}>
Add Member
</Accordion.Toggle>
<Accordion.Collapse eventKey={3}>
<Card.Body>
<form onSubmit={this.handleAddMemberSubmit}>
<Form role="form">
<Form.Group>
<Form.Control name="newMemberGroup" type="hidden" value={this.state.groups[index].groupname}/>
<Form.Control onChange={this.handleInputChange} name="newMember" type="email" placeholder="Enter email" value={this.state.newMember}/>
<Button className="btnAddPlaylist" variant="success" type="submit">
Add
</Button>
</Form.Group>
</Form>
</form>
</Card.Body>
</Accordion.Collapse>
</Accordion>
<h4 className="labelPlaylist">Playlists</h4>
<div id="fixedspacing">
<p></p>
</div>
<ToggleButtonGroup type="radio" name="playlists" vertical onChange={this.handleSelectedPlaylist}>
{group.playlists.map((playlist, i) => {
return(
<ToggleButton id="playlistbtns" value={[this.state.groups[index].playlists[i],this.state.groups[index].groupname]} >{playlist.name}</ToggleButton>
)
})
}
</ToggleButtonGroup>
<div id="fixedspacing">
<p></p>
</div>
<Accordion>
<Accordion.Toggle as={Button} eventKey={2}>
Create Playlist
</Accordion.Toggle>
<Accordion.Collapse eventKey={2}>
<Card.Body>
<form onSubmit={this.handleAddPlaylistSubmit}>
<Form role="form">
<Form.Group>
<Form.Control name="newPlaylistGroup" type="hidden" value={this.state.groups[index].groupname}/>
<Form.Control onChange={this.handleInputChange} name="newPlaylist" type="text" placeholder="Enter name" value={this.state.newPlaylist}/>
<Button className="btnAddPlaylist" variant="success" type="submit">
Create
</Button>
</Form.Group>
</Form>
</form>
</Card.Body>
</Accordion.Collapse>
</Accordion>
</Card.Body>
</Accordion.Collapse>
</Card>
)
})
}
</Accordion>
:
<div>
</div>
}
</div>
:
<h4>Not logged in</h4>
}
</div>
);
}
Example #7
| Source File: Stakes.js From stake-nucypher with GNU Affero General Public License v3.0 | 4 votes |
|
function Stakes(props) {
const [divideCollapse, setDivideCollapse] = useState([]);
const [prolongCollapse, setProlongCollapse] = useState([]);
const [mergeCollapse, setMergeCollapse] = useState([]);
function toggleDivideRow(index) {
return () => {
setDivideCollapse(prevState => {
const newState = [...prevState];
newState[index] = !prevState[index];
return newState;
});
if (prolongCollapse[index]) toggleProlongRow(index)();
};
};
function toggleProlongRow(index) {
return () => {
setProlongCollapse(prevState => {
const newState = [...prevState];
newState[index] = !prevState[index];
return newState;
});
if (divideCollapse[index]) toggleDivideRow(index)();
};
};
function toggleMergeRow(index) {
return () => {
setMergeCollapse(prevState => {
const newState = [...prevState];
newState[index] = !prevState[index];
return newState;
});
if (mergeCollapse[index]) toggleMergeRow(index)();
};
}
const onSubStakeDivide = props.onSubStakeDivide ? props.onSubStakeDivide : () => {};
const onSubStakeProlong = props.onSubStakeProlong ? props.onSubStakeProlong : () => {};
const onSubStakeMerge = props.onSubStakeMerge ? props.onSubStakeMerge : () => {};
return <Container>
<div className="table">
<div className="table-row table-header">
<div className="table-row-column table-row-index">#</div>
<div className="table-row-column table-center">Value</div>
<div className="table-row-column table-center">Remaining</div>
<div className="table-row-column table-center">Enactment</div>
<div className="table-row-column table-center"></div>
</div>
{
props.substakes && props.substakes.map((substake, i) => <Fragment key={substake.index}>
<div className="table-row">
<div className="table-row-column table-row-index">{i}</div>
<div className="table-row-column table-center">{toUiNumberOfTokens(substake.value)} NU</div>
<div className="table-row-column table-center">{substake.remainingDuration} periods</div>
<div className="table-row-column table-center">{dateFormat(substake.firstPeriod)} - {dateFormat(substake.lastPeriod)}</div>
<div className="table-row-column table-center">
<Button data-testid={ `divide-button-${i}` } className="m-1" variant="secondary" size="sm" onClick={toggleDivideRow(i)}>Divide</Button>
{
substake.remainingDuration !== 0 ? <>
<Button data-testid={ `prolong-button-${i}` } className="m-1" variant="secondary" size="sm" onClick={toggleProlongRow(i)}>Prolong</Button>
</> : null
}
<Button data-testid={ `merge-button-${i}` } className="m-1" variant="secondary" size="sm" onClick={toggleMergeRow(i)}>Merge</Button>
</div>
</div>
<Collapse in={divideCollapse[i]} className="mt-4">
<Container>
<Row>
<Col>
<DivideSubStake subStake={substake} onSubStakeDivide={onSubStakeDivide.bind(substake)}></DivideSubStake>
</Col>
</Row>
</Container>
</Collapse>
{
substake.remainingDuration !== 0 ? <>
<Collapse in={prolongCollapse[i]} className="mt-4">
<Container>
<Row>
<Col>
<ProlongSubStake subStake={substake} onSubStakeProlong={onSubStakeProlong.bind(substake)}></ProlongSubStake>
</Col>
</Row>
</Container>
</Collapse>
</> : null
}
<Collapse in={mergeCollapse[i]} className="mt-4">
<Container>
<Row>
<Col>
<MergeSubStake subStake={substake} onSubStakeMerge={onSubStakeMerge.bind(substake)}></MergeSubStake>
</Col>
</Row>
</Container>
</Collapse>
</Fragment>)
}
</div>
</Container>;
}
Example #8
| Source File: Sidebar.js From project-avocado-web with MIT License | 4 votes |
|
render () {
return (
<nav className="sidebar sidebar-offcanvas" id="sidebar">
<div className="text-center sidebar-brand-wrapper d-flex align-items-center">
<a className="sidebar-brand brand-logo" href="index.html"><img src={require("../../assets/images/logo.png")} alt="logo" /></a>
<a className="sidebar-brand brand-logo-mini pt-3" href="index.html"><img src={require("../../assets/images/logo-mini.png" )} alt="logo" /></a>
</div>
<ul className="nav">
<li className="nav-item nav-profile not-navigation-link">
<div className="nav-link">
<Dropdown>
<Dropdown.Toggle className="nav-link user-switch-dropdown-toggler p-0 toggle-arrow-hide bg-transparent border-0 w-100">
<div className="d-flex justify-content-between align-items-start">
<div className="profile-image">
<img src={ require("../../assets/images/faces/face8.jpg")} alt="profile" />
</div>
<div className="text-left ml-3">
<p className="profile-name">Name</p>
<small className="designation text-muted text-small">Access Level</small>
<span className="status-indicator online"></span>
</div>
</div>
</Dropdown.Toggle>
<Dropdown.Menu className="preview-list navbar-dropdown">
<Dropdown.Item className="dropdown-item preview-item d-flex align-items-center text-small" onClick={evt =>evt.preventDefault()}>
Sign Out
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
</li>
<li className={ this.isPathActive('/dashboard') ? 'nav-item active' : 'nav-item' }>
<Link className="nav-link" to="/dashboard">
<i className="mdi mdi-television menu-icon"></i>
<span className="menu-title">Dashboard</span>
</Link>
</li>
<li className={ this.isPathActive('/basic-ui') ? 'nav-item active' : 'nav-item' }>
<div className={ this.state.basicUiMenuOpen ? 'nav-link menu-expanded' : 'nav-link' } onClick={ () => this.toggleMenuState('basicUiMenuOpen') } data-toggle="collapse">
<i className="mdi mdi-crosshairs-gps menu-icon"></i>
<span className="menu-title">ICS Team</span>
<i className="menu-arrow"></i>
</div>
<Collapse in={ this.state.basicUiMenuOpen }>
<ul className="nav flex-column sub-menu">
<li className="nav-item"> <Link className={ this.isPathActive('/ics-team/coordinators') ? 'nav-link active' : 'nav-link' } to="/ics-team/coordinators">Coordinators</Link></li>
<li className="nav-item"> <Link className={ this.isPathActive('/ics-team/prefects') ? 'nav-link active' : 'nav-link' } to="/ics-team/prefects">Prefects</Link></li>
<li className="nav-item"> <Link className={ this.isPathActive('/ics-team/mentors') ? 'nav-link active' : 'nav-link' } to="/ics-team/mentors">Mentors</Link></li>
<li className="nav-item"> <Link className={ this.isPathActive('/ics-team/mentee') ? 'nav-link active' : 'nav-link' } to="/ics-team/mentee">Mentee</Link></li>
</ul>
</Collapse>
</li>
<li className={ this.isPathActive('/form-elements') ? 'nav-item active' : 'nav-item' }>
<Link className="nav-link" to="/form-elements/basic-elements">
<i className="mdi mdi-format-list-bulleted menu-icon"></i>
<span className="menu-title">Form Elements</span>
</Link>
</li>
<li className={ this.isPathActive('/tables') ? 'nav-item active' : 'nav-item' }>
<Link className="nav-link" to="/tables/basic-table">
<i className="mdi mdi-table-large menu-icon"></i>
<span className="menu-title">Tables</span>
</Link>
</li>
<li className={ this.isPathActive('/icons') ? 'nav-item active' : 'nav-item' }>
<Link className="nav-link" to="/icons/font-awesome">
<i className="mdi mdi-account-box-outline menu-icon"></i>
<span className="menu-title">Icons</span>
</Link>
</li>
<li className={ this.isPathActive('/charts') ? 'nav-item active' : 'nav-item' }>
<Link className="nav-link" to="/charts/chart-js">
<i className="mdi mdi-chart-line menu-icon"></i>
<span className="menu-title">Charts</span>
</Link>
</li>
<li className={ this.isPathActive('/user-pages') ? 'nav-item active' : 'nav-item' }>
<div className={ this.state.userPagesMenuOpen ? 'nav-link menu-expanded' : 'nav-link' } onClick={ () => this.toggleMenuState('userPagesMenuOpen') } data-toggle="collapse">
<i className="mdi mdi-lock-outline menu-icon"></i>
<span className="menu-title">User Pages</span>
<i className="menu-arrow"></i>
</div>
<Collapse in={ this.state.userPagesMenuOpen }>
<ul className="nav flex-column sub-menu">
<li className="nav-item"> <Link className={ this.isPathActive('/user-pages/blank-page') ? 'nav-link active' : 'nav-link' } to="/user-pages/blank-page">Blank Page</Link></li>
<li className="nav-item"> <Link className={ this.isPathActive('/user-pages/login-1') ? 'nav-link active' : 'nav-link' } to="/user-pages/login-1">Login</Link></li>
<li className="nav-item"> <Link className={ this.isPathActive('/user-pages/register-1') ? 'nav-link active' : 'nav-link' } to="/user-pages/register-1">Register</Link></li>
<li className="nav-item"> <Link className={ this.isPathActive('/user-pages/error-404') ? 'nav-link active' : 'nav-link' } to="/user-pages/error-404">404</Link></li>
<li className="nav-item"> <Link className={ this.isPathActive('/user-pages/error-500') ? 'nav-link active' : 'nav-link' } to="/user-pages/error-500">500</Link></li>
</ul>
</Collapse>
</li>
<li className="nav-item">
<a className="nav-link" href="http://www.bootstrapdash.com/demo/star-admin-free/react/documentation/documentation.html" rel="noopener noreferrer" target="_blank">
<i className="mdi mdi-file-outline menu-icon"></i>
<span className="menu-title">Documentation</span>
</a>
</li>
</ul>
</nav>
);
}
