react-bootstrap#Tab JavaScript Examples
The following examples show how to use
react-bootstrap#Tab.
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: index.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 6 votes |
|
function SharePreviewPopup(url, projectName, playlistName = null) {
confirmAlert({
// eslint-disable-next-line react/prop-types
customUI: ({ onClose }) => (
<div className="share-project-preview-url project-share-check">
<Tabs defaultActiveKey="profile" id="uncontrolled-tab-example">
<Tab eventKey="profile" title="Share">
{playlistName ? (
<ShareProject
url={url}
playlistName={playlistName}
onClose={onClose}
/>
) : (<ShareProject url={url} projectName={projectName} onClose={onClose} />)}
</Tab>
<Tab eventKey="home" title="Embed">
{playlistName ? (
<Embed
url={url}
playlistName={playlistName}
onClose={onClose}
/>
) : (
<Embed
url={url}
projectName={projectName}
onClose={onClose}
/>
)}
</Tab>
</Tabs>
</div>
),
});
return <div />;
}
Example #2
| Source File: TabsMenu.js From gatsby-ipfs-web-wallet with MIT License | 6 votes |
|
function TabsMenu (props) {
const menuComponents = MenuComponents(props)
return (
<>
{menuComponents.length > 0 && (
<Tabs
defaultActiveKey='Configure'
id='configure-tabs'
onSelect={props.onSelect}
>
<Tab title='General' eventKey='Configure' />
{menuComponents.map((menuItem, i) => (
<Tab
key={`${menuItem.id}-${i}`}
eventKey={menuItem.key}
title={menuItem.key}
{...props}
/>
))}
</Tabs>
)}
</>
)
}
Example #3
| Source File: userCategoriesTopicsContainer.js From community-forum-frontend with GNU General Public License v3.0 | 6 votes |
|
function UserCategoriesTopicsContainer(props) {
return (
<Tabs variant="pills" defaultActiveKey="categories">
<Tab
eventKey="categories"
title={`Categories (${props.categoriesCreated.length})`}
>
<Row className="user-categories-topics-list">
{props.categoriesCreated.map((category) => (
<Col key={category._id} md={props.columnValue}>
<CategoryTopicCard entityType="category" category={category} />
</Col>
))}
</Row>
</Tab>
<Tab
eventKey="topics"
title={`Topics (${props.topicsCreated.length})`}
>
<Row className="user-categories-topics-list">
{props.topicsCreated.map((topic) => (
<Col key={topic._id} md={props.columnValue}>
<CategoryTopicCard
entityType="topic"
category={{ _id: topic.parentCategory }}
topic={topic}
/>
</Col>
))}
</Row>
</Tab>
</Tabs>
);
}
Example #4
| Source File: PlotSelection.jsx From mapstore2-cadastrapp with GNU General Public License v3.0 | 6 votes |
|
function PlotSelectionTabContent({
loading,
loadInfo,
selectedPlots,
onRowsSelected,
onRowsDeselected,
...props
}) {
return (
<Col sm={12}>
<Tab.Content
unmountOnExit>
{props.data.map((value, index) => (
<Tab.Pane eventKey={index}>
<PlotsSelectionTable
onRowDoubleClick={(i, row) => loadInfo([row.parcelle])}
onRowsSelected={onRowsSelected}
onRowsDeselected={onRowsDeselected}
selectedKeys={selectedPlots}
data={props.data[index]}
tablloadingeIndex={index}/>
<div style={{height: 25}}>
<span style={{ "float": "right" }}>
{props.data?.[index]?.length ?? 0} <Message msgId="cadastrapp.parcelle.result.items" msgParams={{ number: props.data?.[index]?.length ?? 0 }} />
({selectedPlots?.length ?? 0} <Message msgId="cadastrapp.parcelle.result.selected" msgParams={{ number: selectedPlots?.length ?? 0}} />)
</span>
{loading ? <Spinner spinnerName="circle" noFadeIn overrideSpinnerClassName="spinner" /> : null}
</div>
</Tab.Pane>
))}
</Tab.Content>
</Col>
);
}
Example #5
| Source File: hardwareWallets.js From xpub-tool with MIT License | 6 votes |
|
HardwareWallets = ({ purpose, accountNumber, network }) => {
const path = accountDerivationPath({ purpose, accountNumber, network })
return (
<Tabs id="hardware-wallet-selector">
{[LEDGER, TREZOR].map(type => (
<Tab key={type} eventKey={type} title={type.toUpperCase()}>
<ExtPubKeyImporter
key={path}
network={network}
bip32Path={path}
keystore={type}
/>
</Tab>
))}
</Tabs>
)
}
Example #6
| Source File: Participation.js From Website2020 with MIT License | 5 votes |
|
function Posts() {
return (
<>
<div className="section landing-section">
<Container className="text-center">
<Tabs defaultActiveKey="studentcompetitions" id="uncontrolled-tab-example" className="">
<Tab eventKey="studentcompetitions" title="Competitions" className="tab-body">
<Row>
<Col md="6" className="my-auto">
<h2 className="mt-0 mb-3 tab-heading">Student Competitions</h2>
<p className="tab-content">
We aim to participate in National and International
student-level AUV compeititions - Robosub (organised by AUVSI),
Singapore AUV Challenge, and the NIOT-Student AUV Challenge.
</p>
</Col>
<Col md="6" className="text-center">
<img src={combinedimage} className="tab-image" />
</Col>
</Row>
</Tab>
<Tab eventKey="researchpotential" title="Research" className="tab-body">
<Row>
<Col md="6" className="my-auto">
<h2 className="mt-0 mb-3 tab-heading">Research Potential</h2>
<p className="tab-content">
Contribute to the development in the fields of marine
technology, and implement cutting-edge research ideas to our
vehicles
</p>
</Col>
<Col md="6" className="text-center">
<img src={resimage} className="tab-image" />
</Col>
</Row>
</Tab>
<Tab eventKey="training" title="Training" className="tab-body">
<Row>
<Col md="6" className="my-auto">
<h2 className="mt-0 mb-3 tab-heading">Training</h2>
<p className="tab-content">
Team AUV-IITK provides training to all its new recruits in the
various field of Robotics. It is because of this training that
many of the past members of team AUV-IITK are pursuing their
careers in robotics and doing exceptionally well owing to their
strong foundation.
</p>
</Col>
<Col md="6" className="text-center">
<img src={trainimage} className="mt-3 mb-3 tab-image" />
</Col>
</Row>
</Tab>
<Tab eventKey="socialprojects" title="Community" className="tab-body">
<Row>
<Col md="6" className="my-auto">
<h2 className="mt-0 mb-3 tab-heading">Social Projects</h2>
<p className="tab-content">
Apart from Robotics competitions, team AUV-IITK also actively
participates various hackathon and undertakes projects owing its
responsibility to the society.
</p>
</Col>
<Col md="6" className="text-center">
<img src={csrimage} className="tab-image" />
</Col>
</Row>
</Tab>
</Tabs>
</Container>
</div>
</>
)
}
Example #7
| Source File: activityOptions.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 5 votes |
|
function MyVerticallyCenteredModal(props) {
const { activity, activeType } = props;
return (
<Modal
{...props}
size="lg"
className="video_activity"
aria-labelledby="contained-modal-title-vcenter"
centered
>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
<img src={logo} alt="" />
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Tabs defaultActiveKey={activeType} id="uncontrolled-tab-example">
<Tab eventKey="demo" title="Demo">
{!!activity && activity.demo_activity_id ? (
<Suspense fallback={<div>Loading</div>}>
<H5PPreview
activityId={activity.demo_activity_id.trim()}
tokenrequire={false}
showltipreview
/>
</Suspense>
) : (
<div className="stayTuned">
<h1>Stay Tuned!</h1>
<h5>Demo will be available Soon</h5>
</div>
)}
</Tab>
<Tab eventKey="video" title="Video">
{!!activity && !!activity.demo_video_id ? (
<iframe
width="100%"
height="400"
src={
`https://www.youtube.com/embed/${activity.demo_video_id.split('/').length > 0
&& activity.demo_video_id.split('/')[activity.demo_video_id.split('/').length - 1]}`
}
title={activity.demo_video_id}
/>
) : (
<div className="stayTuned">
<h1>Stay Tuned!</h1>
<h5>Video will be available Soon</h5>
</div>
)}
</Tab>
</Tabs>
</Modal.Body>
</Modal>
);
}
Example #8
| Source File: ipfs-tabs.js From gatsby-ipfs-web-wallet with MIT License | 5 votes |
|
render () {
const { commandOutput } = _this.state
const { statusOutput, appStatusOutput } = _this.props
return (
<Row>
<Col md={12}>
<Tabs
defaultActiveKey='status'
id='ipfs-coord-tabs'
className='mb-3 nav-tabs-custom'
>
<Tab eventKey='status' title='Status'>
<Text
id='statusLog'
name='statusLog'
inputType='textarea'
labelPosition='none'
rows={20}
readOnly
value={appStatusOutput}
onChange={() => {
// Prevents DOM error
}}
/>
</Tab>
<Tab eventKey='ipfs-coord' title='IPFS Coord'>
<Text
id='ipfsCoordLog'
name='ipfsCoordLog'
inputType='textarea'
labelPosition='none'
rows={20}
readOnly
value={statusOutput}
onChange={() => {
// Prevents DOM error
}}
/>
</Tab>
<Tab eventKey='command' title='Command'>
<Text
id='commandLog'
name='commandLog'
inputType='textarea'
labelPosition='none'
rows={20}
readOnly
value={`${commandOutput ? `${commandOutput}>` : '>'}`}
onChange={() => {
// Prevents DOM error
}}
/>
<Text
id='commandInput'
name='commandInput'
inputType='tex'
labelPosition='none'
value={this.state.commandInput}
onChange={this.handleTextInput}
onKeyDown={_this.handleCommandKeyDown}
/>
</Tab>
</Tabs>
</Col>
</Row>
)
}
Example #9
| Source File: Edit.jsx From maps with MIT License | 5 votes |
|
Edit = (props) => {
const { id } = useParams();
const [key, setKey] = useState("home");
const [coop, setCoop] = useState(null);
useEffect(() => {
if (coop == null) {
CoopService.getById(id, function (data) {
//data.addresses.map((address) => {
// address.locality.state = address.locality.state.id;
//});
setCoop(data);
});
}
}, [props]);
if (coop == null) {
return <></>;
}
return (
<Route path="/edit/:id/:tab">
{({ match, history }) => {
const { tab } = match ? match.params : {};
return (
<>
<h5>{coop.name}</h5>
<Tabs
activeKey={tab}
onSelect={(nextTab) => history.push(`/edit/${id}/${nextTab}`)}
>
<Tab eventKey="home" title="Home">
<FormContainer coop={coop} />
</Tab>
<Tab eventKey="people" title="People">
<ListPeople coop={coop} />
</Tab>
</Tabs>
</>
);
}}
</Route>
);
}
Example #10
| Source File: App.js From stake-nucypher with GNU Affero General Public License v3.0 | 5 votes |
|
render() {
return <>
<StoreProvider>
<Router>
<Navbar expand="lg">
<Navbar.Brand href="#" className="mr-auto">
<div className="logo">
</div>
</Navbar.Brand>
<Nav className="mr-auto">
<Nav.Link href="/">Staking</Nav.Link>
<Nav.Link href="/worklock">Worklock</Nav.Link>
</Nav>
<div className="float-right h4 m-5">
<a href="https://github.com/cryptoseal86/stake-nucypher" target="_blank" rel="noopener noreferrer">
<FaGithub></FaGithub>
</a>
</div>
</Navbar>
<div className="App">
<Switch>
<Route exact path="/">
<div className="staker-container">
<Container>
<Tabs defaultActiveKey="stake" activeKey={this.state.key} className="tab-controls d-flex mx-auto" onSelect={this.handleSelectTab.bind(this)}>
<Tab eventKey="stake" title="Stake">
<StakerDashboard onTabChange={this.handleSelectTab.bind(this)}></StakerDashboard>
</Tab>
<Tab eventKey="withdraw" title="Withdraw">
<WithdrawDashboard></WithdrawDashboard>
</Tab>
<Tab eventKey="history" title="History">
<HistoryDashboard></HistoryDashboard>
</Tab>
</Tabs>
</Container>
</div>
</Route>
<Route path="/worklock">
<div className="staker-container">
<Container>
<WorkLockDashboard></WorkLockDashboard>
</Container>
</div>
</Route>
</Switch>
</div>
</Router>
</StoreProvider>
</>;
}
Example #11
| Source File: PlotSelection.jsx From mapstore2-cadastrapp with GNU General Public License v3.0 | 5 votes |
|
function PlotTabs({
active,
onTabChange,
data,
plots,
...props
}) {
const MAX_TABS = 3; // max number of tabs
const getPlotTitle = (plot, index) => {
return plot?.title ?? ("Selection " + (index + 1).toString());
};
return (
<Tab.Container
onSelect={onTabChange}
activeKey={active}
defaultActiveKey={active}>
<Row className="clearfix">
<Col sm={12}>
<Nav bsStyle="tabs">
{plots.slice(0, plots.length > MAX_TABS ? MAX_TABS - 1 : MAX_TABS).map((plot, index) => (
<NavItem role="tab" eventKey={index}>
{getPlotTitle(plot, index)}
</NavItem>
))}
{plots.length > MAX_TABS
? <NavDropdown title={active < MAX_TABS - 1 ? "More..." : getPlotTitle(plots[active], active)}>
{plots.slice(MAX_TABS - 1).map((plot, index) => (
<MenuItem eventKey={index + MAX_TABS - 1}>
{getPlotTitle(plot, index + MAX_TABS - 1)}
</MenuItem>
))}
</NavDropdown>
: null}
<PlotSelectionTabActionButtons {...props} data={data} />
</Nav>
</Col>
<PlotSelectionTabContent {...props} data={data} />
</Row>
</Tab.Container>
);
}
Example #12
| Source File: App.js From LinkedIn-Scraper with Apache License 2.0 | 5 votes |
|
function App() {
return (
<div>
<Navbar bg="dark" variant="dark" expand="lg">
<Navbar.Brand href="#home">
<span role="img" aria-label="logo">
?
</span>
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="https://github.com/xtstc131/LinkedIn-Scraper">
About
</Nav.Link>
<Nav.Link href="#home">Contact</Nav.Link>
<Nav.Link href="https://github.com/xtstc131/LinkedIn-Scraper">
Contribute
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
<Jumbotron className="text-center jumbotron">
<Container>
<Row>
<Col></Col>
<Col xs={6}>
<h1 className="my-head">
{/* <span
className="typer"
id="main"
data-words=""
data-delay="100"
data-colors="#FFFFFF,#9ac4f8"
data-delete-delay="1000"
></span>
<span className="cursor" data-owner="main"></span> */}
MalloCat, A LinkedIn Scraper
</h1>
<p className="lead ">
MalloCat is a platform for displaying the latest Software
Engineer job information to the new graduates. Supported by
automatic running crawlers targeting on LinkedIn.
</p>
<p>
<Button
className="rounded-pill"
variant="outline-light"
href="https://github.com/xtstc131/LinkedIn-Scraper"
>
Github
<img className="btn_logo" src={github_logo} alt="" />
</Button>
</p>
</Col>
<Col></Col>
</Row>
</Container>
</Jumbotron>
<hr className="my-4"></hr>
<div className="content">
<Container>
<Tabs>
<Tab eventKey="linkedin_fulltime" title="Full-time">
<Table source="linkedin_fulltime"></Table>
</Tab>
<Tab eventKey="linkedin_intern" title="Intern">
<Table source="linkedin_intern"></Table>
</Tab>
</Tabs>
<p>© 2020. All rights reserved.</p>
<img
src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Flinkedin-spider.netlify.app"
alt=""
/>
</Container>
</div>
</div>
);
}
Example #13
| Source File: index.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 4 votes |
|
function ExistingActivitySearch(props) {
const { fromTeam, addActivity, libraries } = props;
const [toggleStates, setToggleStates] = useState({
searchLibrary: true,
subject: true,
education: false,
type: false,
});
const allState = useSelector((state) => state.search);
const activityTypesState = useSelector((state) => state.resource.types);
const { currentOrganization, permission } = useSelector((state) => state.organization);
const dispatch = useDispatch();
const [activityTypes, setActivityTypes] = useState([]);
const [search, setSearch] = useState([]);
const [searchQueries, SetSearchQuery] = useState('');
const [searchInput, setSearchInput] = useState('');
const [meta, setMeta] = useState({});
const [activePage, setActivePage] = useState(1);
const [totalCount, setTotalCount] = useState(0);
const [activeModel, setActiveModel] = useState('activities');
const [activeType, setActiveType] = useState([]);
const [activeSubject, setActiveSubject] = useState([]);
const [activeEducation, setActiveEducation] = useState([]);
const [searchType, setSearchType] = useState(null);
const [authorName, SetAuthor] = useState('');
const [activetab, setActiveTab] = useState('activities');
const [todate, Settodate] = useState(undefined);
const [fromdate, Setfromdate] = useState(undefined);
useEffect(() => {
if (localStorage.getItem('refreshPage') === 'true' && currentOrganization && searchType) {
let dataSend;
if (searchType === 'orgSearch') {
dataSend = {
phrase: searchInput.trim(),
subjectArray: activeSubject,
gradeArray: activeEducation,
standardArray: activeType,
author: authorName || undefined,
type: searchType,
from: 0,
size: 20,
model: 'activities',
standardArray: libraries,
};
} else {
dataSend = {
phrase: searchInput.trim(),
subjectArray: activeSubject,
gradeArray: activeEducation,
standardArray: activeType,
author: authorName || undefined,
type: searchType,
from: 0,
size: 20,
model: 'activities',
standardArray: libraries,
};
}
let result;
(async () => {
result = await dispatch(simpleSearchAction(dataSend));
})();
setTotalCount(result?.meta?.total);
const tempEducation = [];
const tempSubject = [];
if (activeEducation) {
activeEducation.forEach((edu) => {
if (String(edu).includes('&')) {
const temp = String(edu).replace('&', 'and');
tempEducation.push(temp);
} else {
tempEducation.push(edu);
}
});
setActiveEducation(tempEducation);
}
if (activeSubject) {
activeSubject.forEach((sub) => {
if (String(sub).includes('&')) {
const temp = String(sub).replace('&', 'and');
tempSubject.push(temp);
} else {
tempSubject.push(sub);
}
});
setActiveSubject(tempSubject);
}
}
}, [currentOrganization]);
useEffect(() => {
if (allState.searchResult) {
if (allState.searchResult.length > 0) {
setSearch(allState.searchResult);
SetSearchQuery(allState.searchQuery);
setSearchInput(allState.searchQuery);
setMeta(allState.searchMeta);
localStorage.setItem('loading', 'false');
Swal.close();
} else if (allState.searchMeta.total === 0) {
setSearch([]);
SetSearchQuery(allState.searchQuery);
setSearchInput(allState.searchQuery);
setMeta({});
localStorage.setItem('loading', 'false');
Swal.close();
}
}
}, [allState.searchMeta, allState.searchQuery, allState.searchResult]);
useEffect(() => {
if (allState.searchResult) {
if (allState.searchResult.length > 0 && paginationStarter) {
paginationStarter = false;
setTotalCount(allState.searchMeta.total);
}
}
}, [allState.searchMeta, allState.searchResult, totalCount]);
useEffect(() => {
if (localStorage.getItem('loading') === 'true') {
Swal.fire({
html: 'Searching...', // add html attribute if you want or remove
allowOutsideClick: false,
onBeforeOpen: () => {
Swal.showLoading();
},
});
}
});
useEffect(() => {
if (activityTypesState.length === 0) {
dispatch(loadResourceTypesAction());
}
}, []);
const compare = (a, b) => {
// Use toUpperCase() to ignore character casing
const bandA = a.title.toUpperCase();
const bandB = b.title.toUpperCase();
let comparison = 0;
if (bandA > bandB) {
comparison = 1;
} else if (bandA < bandB) {
comparison = -1;
}
return comparison;
};
useEffect(() => {
const allItems = [];
activityTypesState?.data?.map((data) => data.activityItems.map((itm) => allItems.push(itm)));
setActivityTypes(allItems.sort(compare));
}, [activityTypesState]);
return (
<>
<div>
<div className={!fromTeam && 'search-wrapper'}>
<div className="content-search">
{true ? (
<div className="search-result-main">
{!fromTeam && <div className="current-org-search">{currentOrganization?.name}</div>}
{!fromTeam && <div className="exp-lib-cnt">Explore library content</div>}
<div
className="total-count"
style={{
display: totalCount > 1000 || !!searchQueries ? 'block' : 'none',
}}
>
{totalCount > 10000 ? (
<div>
Your search returned more than <span>10,000</span> results. Please refine your search criteria.
</div>
) : null}
{!!searchQueries && (
<div>
Showing {search ? meta.total : '0'} results For <span>{searchQueries}</span>
</div>
)}
</div>
<div className="main-content-search">
<div className="left-search">
<div className="search-library">
<Accordion defaultActiveKey="0">
<Card>
<Accordion.Toggle
as={Card.Header}
eventKey="0"
onClick={() =>
setToggleStates({
...toggleStates,
searchLibrary: !toggleStates.searchLibrary,
})
}
>
Search Library
<FontAwesomeIcon className="ml-2" icon={toggleStates.searchLibrary ? 'chevron-up' : 'chevron-down'} />
</Accordion.Toggle>
<Accordion.Collapse eventKey="0">
<Card.Body>
<div className="body-search">
<input
// style={{ display: searchType === 'orgSearch' ? 'none' : 'block' }}
value={searchInput}
onChange={(e) => {
setSearchInput(e.target.value);
}}
onKeyPress={async (e) => {
if (e.key === 'Enter') {
if (!searchInput.trim() && searchType !== 'orgSearch') {
Swal.fire('Search field is required.');
} else if (searchInput.length > 255) {
Swal.fire('Character limit should be less than 255.');
} else {
Swal.fire({
title: 'Searching...', // add html attribute if you want or remove
html: 'We are fetching results for you!',
allowOutsideClick: false,
onBeforeOpen: () => {
Swal.showLoading();
},
});
let dataSend;
if (searchType === 'orgSearch') {
dataSend = {
phrase: searchInput.trim(),
subjectArray: activeSubject,
gradeArray: activeEducation,
authors: authorName || undefined,
standardArray: activeType,
type: searchType,
from: 0,
size: 20,
model: 'activities',
standardArray: libraries,
};
} else {
dataSend = {
phrase: searchInput.trim(),
subjectArray: activeSubject,
gradeArray: activeEducation,
authors: authorName || undefined,
standardArray: activeType,
type: searchType,
from: 0,
size: 20,
model: 'activities',
standardArray: libraries,
};
}
const result = await dispatch(simpleSearchAction(dataSend));
setTotalCount(result.meta?.total);
const tempEducation = [];
const tempSubject = [];
if (activeEducation) {
activeEducation.forEach((edu) => {
if (String(edu).includes('&')) {
const temp = String(edu).replace('&', 'and');
tempEducation.push(temp);
} else {
tempEducation.push(edu);
}
});
setActiveEducation(tempEducation);
}
if (activeSubject) {
activeSubject.forEach((sub) => {
if (String(sub).includes('&')) {
const temp = String(sub).replace('&', 'and');
tempSubject.push(temp);
} else {
tempSubject.push(sub);
}
});
setActiveSubject(tempSubject);
}
}
}
}}
type="search"
placeholder="Search"
/>
<div className="form-group">
<div className="radio-btns">
{true && (
<label>
<input
name="type"
onChange={(e) => {
setSearchType(e.target.value);
}}
value="private"
checked={searchType === 'private'}
type="radio"
/>
<span>My Projects</span>
</label>
)}
{true && (
<label>
<input
name="type"
onChange={(e) => {
setSearchType(e.target.value);
}}
value="public"
checked={searchType === 'public'}
type="radio"
/>
<span>All Shared Projects</span>
</label>
)}
{true && (
<label>
<input
name="type"
onChange={(e) => {
setSearchType(e.target.value);
}}
value="orgSearch"
checked={searchType === 'orgSearch'}
type="radio"
/>
<span>All Shared Projects In My Org</span>
</label>
)}
</div>
</div>
{permission?.Organization?.includes('organization:view-user') && searchType !== 'private' && <div className="author-label">Author</div>}
<div
className="form-group"
style={{
display: permission?.Organization?.includes('organization:view-user') && searchType !== 'private' ? 'block' : 'none',
}}
>
<input
placeholder="Enter author name"
className="authorName"
value={authorName}
onChange={({ target }) => {
if (target.value) {
SetAuthor(target.value);
} else {
SetAuthor('');
}
}}
/>
</div>
<div
className="src-btn"
onClick={async () => {
Setfromdate(undefined);
Settodate(undefined);
setActiveTab('activities');
if (!searchInput.trim() && searchType !== 'orgSearch') {
Swal.fire('Search field is required.');
} else if (searchInput.length > 255) {
Swal.fire('Character limit should be less than 255.');
} else if (!searchType) {
Swal.fire('Search type is required. Click one of the radio buttons.');
} else {
Swal.fire({
title: 'Searching...', // add html attribute if you want or remove
html: 'We are fetching results for you!',
allowOutsideClick: false,
onBeforeOpen: () => {
Swal.showLoading();
},
});
let dataSend;
if (searchType === 'orgSearch') {
dataSend = {
phrase: searchInput.trim(),
subjectArray: activeSubject,
gradeArray: activeEducation,
standardArray: activeType,
author: authorName || undefined,
fromDate: fromdate || undefined,
toDate: todate || undefined,
type: searchType,
from: 0,
size: 20,
model: 'activities',
standardArray: libraries,
};
} else {
dataSend = {
phrase: searchInput.trim(),
subjectArray: activeSubject,
author: authorName || undefined,
fromDate: fromdate || undefined,
toDate: todate || undefined,
gradeArray: activeEducation,
standardArray: activeType,
type: searchType,
from: 0,
size: 20,
model: 'activities',
standardArray: libraries,
};
}
const result = await dispatch(simpleSearchAction(dataSend));
setTotalCount(result.meta?.total);
const tempEducation = [];
const tempSubject = [];
if (activeEducation) {
activeEducation.forEach((edu) => {
if (String(edu).includes('&')) {
const temp = String(edu).replace('&', 'and');
tempEducation.push(temp);
} else {
tempEducation.push(edu);
}
});
setActiveEducation(tempEducation);
}
if (activeSubject) {
activeSubject.forEach((sub) => {
if (String(sub).includes('&')) {
const temp = String(sub).replace('&', 'and');
tempSubject.push(temp);
} else {
tempSubject.push(sub);
}
});
setActiveSubject(tempSubject);
}
}
}}
>
<FontAwesomeIcon icon="search" />
Search
</div>
</div>
</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
</div>
<div className="refine-search">
<div className="headline">Refine your search</div>
<Accordion defaultActiveKey="0">
<Card>
<Accordion.Toggle
as={Card.Header}
eventKey="0"
onClick={() =>
setToggleStates({
...toggleStates,
type: false,
education: false,
subject: !toggleStates.subject,
})
}
>
Subject
<FontAwesomeIcon className="ml-2" icon={toggleStates.subject ? 'chevron-up' : 'chevron-down'} />
</Accordion.Toggle>
<Accordion.Collapse eventKey="0">
<Card.Body>
{subjects.map((data) => (
<div
className="list-item-keys"
key={data.value}
value={data.subject}
onClick={() => {
if (activeSubject.includes(data.subject)) {
if (data.subject === 'Career & Technical Education') {
setActiveSubject(
activeSubject.filter((index) => {
if (index === 'Career & Technical Education' || index === 'Career and Technical Education') {
return false;
}
return true;
})
);
} else {
setActiveSubject(activeSubject.filter((index) => index !== data.subject));
}
} else {
setActiveSubject([...activeSubject, data.subject]);
}
}}
>
{data.subject === 'Career & Technical Education' ? (
activeSubject.includes('Career & Technical Education') || activeSubject.includes('Career and Technical Education') ? (
<FontAwesomeIcon icon="check-square" />
) : (
<FontAwesomeIcon icon="square" />
)
) : activeSubject.includes(data.subject) ? (
<FontAwesomeIcon icon="check-square" />
) : (
<FontAwesomeIcon icon="square" />
)}
<span>{data.subject}</span>
</div>
))}
</Card.Body>
</Accordion.Collapse>
</Card>
<Card>
<Accordion.Toggle
as={Card.Header}
eventKey="1"
onClick={() =>
setToggleStates({
...toggleStates,
type: false,
subject: false,
education: !toggleStates.education,
})
}
>
Education Level
<FontAwesomeIcon className="ml-2" icon={toggleStates.education ? 'chevron-up' : 'chevron-down'} />
</Accordion.Toggle>
<Accordion.Collapse eventKey="1">
<Card.Body>
{educationLevels.map((data) => (
<div
className="list-item-keys"
key={data.value}
value={data.name}
onClick={() => {
if (activeEducation.includes(data.name)) {
if (data.name === 'College & Beyond') {
setActiveEducation(
activeEducation.filter((index) => {
if (index === 'College & Beyond' || index === 'College and Beyond') {
return false;
}
return true;
})
);
} else {
setActiveEducation(activeEducation.filter((index) => index !== data.name));
}
} else {
setActiveEducation([...activeEducation, data.name]);
}
}}
>
{data.name === 'College & Beyond' ? (
activeEducation.includes('College & Beyond') || activeEducation.includes('College and Beyond') ? (
<FontAwesomeIcon icon="check-square" />
) : (
<FontAwesomeIcon icon="square" />
)
) : activeEducation.includes(data.name) ? (
<FontAwesomeIcon icon="check-square" />
) : (
<FontAwesomeIcon icon="square" />
)}
<span>{data.name}</span>
</div>
))}
</Card.Body>
</Accordion.Collapse>
</Card>
<Card>
<Accordion.Toggle
as={Card.Header}
eventKey="3"
onClick={() =>
setToggleStates({
...toggleStates,
subject: false,
education: false,
type: !toggleStates.type,
})
}
>
Type of Activity
<FontAwesomeIcon className="ml-2" icon={toggleStates.type ? 'chevron-up' : 'chevron-down'} />
</Accordion.Toggle>
<Accordion.Collapse eventKey="3">
<Card.Body
style={{
'max-height': '300px',
'overflow-y': 'auto',
}}
>
{activityTypes.map((data) => (
<div
className="list-item-keys"
key={data.id}
value={data.h5pLib}
onClick={() => {
if (activeType.includes(data.h5pLib)) {
// eslint-disable-next-line eqeqeq
setActiveType(activeType.filter((index) => index != data.h5pLib));
} else {
setActiveType([...activeType, data.h5pLib]);
}
}}
>
{activeType.includes(data.h5pLib) ? <FontAwesomeIcon icon="check-square" /> : <FontAwesomeIcon icon="square" />}
<span>{data.title}</span>
</div>
))}
</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
</div>
</div>
<div className="right-search" id="right-search-branding-style">
<Tabs
activeKey={activetab}
id="uncontrolled-tab-example"
onSelect={async (e) => {
if (!searchInput && searchType !== 'orgSearch') {
Swal.fire('Search field is required.');
} else {
setActiveTab(e);
if (e === 'total') {
let searchData;
if (searchType === 'orgSearch') {
searchData = {
phrase: searchQueries.trim() || searchInput,
from: 0,
size: 20,
type: searchType,
author: authorName || undefined,
fromDate: fromdate || undefined,
toDate: todate || undefined,
subjectArray: activeSubject,
gradeArray: activeEducation,
standardArray: activeType,
};
} else {
searchData = {
phrase: searchQueries.trim() || searchInput,
from: 0,
size: 20,
author: authorName || undefined,
fromDate: fromdate || undefined,
toDate: todate || undefined,
type: searchType,
subjectArray: activeSubject,
gradeArray: activeEducation,
standardArray: activeType,
};
}
Swal.fire({
title: 'Loading...', // add html attribute if you want or remove
allowOutsideClick: false,
onBeforeOpen: () => {
Swal.showLoading();
},
});
const resultModel = await dispatch(simpleSearchAction(searchData));
Swal.close();
setTotalCount(resultModel.meta[e]);
setActiveModel(e);
setActivePage(1);
} else {
let searchData;
if (searchType === 'orgSearch') {
searchData = {
phrase: searchQueries.trim() || searchInput,
from: 0,
size: 20,
author: authorName || undefined,
fromDate: fromdate || undefined,
toDate: todate || undefined,
model: e,
type: searchType,
subjectArray: activeSubject,
gradeArray: activeEducation,
standardArray: activeType,
standardArray: libraries,
};
} else {
searchData = {
phrase: searchQueries.trim() || searchInput,
from: 0,
size: 20,
model: e,
author: authorName || undefined,
fromDate: fromdate || undefined,
toDate: todate || undefined,
type: searchType,
subjectArray: activeSubject,
gradeArray: activeEducation,
standardArray: activeType,
standardArray: libraries,
};
}
Swal.fire({
title: 'Loading...', // add html attribute if you want or remove
allowOutsideClick: false,
onBeforeOpen: () => {
Swal.showLoading();
},
});
const resultModel = await dispatch(simpleSearchAction(searchData));
Swal.close();
setTotalCount(resultModel.meta[e]);
setActiveModel(e);
setActivePage(1);
}
}
}}
>
{!fromTeam && (
<Tab eventKey="activities" title={!!search && !!meta.activities ? `activity (${meta.activities})` : 'activity (0)'}>
<div className="content">
<div className="results_search">
{!!search && search.length > 0 ? (
search.map((res) => (
<>
{res.model === 'Activity' && (
<div className="box">
<div className="imgbox">
{res.thumb_url ? (
<div
style={{
backgroundImage: res.thumb_url.includes('pexels.com')
? `url(${res.thumb_url})`
: `url(${global.config.resourceUrl}${res.thumb_url})`,
}}
/>
) : (
<div
style={{
// eslint-disable-next-line max-len
backgroundImage:
'https://images.pexels.com/photos/593158/pexels-photo-593158.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&h=200&w=280',
}}
/>
)}
</div>
<div className="contentbox">
<div className="search-content">
<a
href={
res.model === 'Activity'
? `/activity/${res.id}/preview`
: res.model === 'Playlist'
? `/playlist/${res.id}/preview/lti`
: `/project/${res.id}/preview`
}
target="_blank"
rel="noreferrer"
>
<h2>{res.title || res.name}</h2>
</a>
<ul>
{res.user && (
<li>
by <span>{res.user.first_name}</span>
</li>
)}
<li>
Type <span className="type">{res.model}</span>
</li>
</ul>
<p>{res.description}</p>
</div>
<Buttons text="Add" secondary={true} width="153px" height="36px" onClick={() => addActivity(res)} hover={true} />
</div>
</div>
)}
</>
))
) : (
<div className="box">No result found !</div>
)}
</div>
</div>
</Tab>
)}
</Tabs>
{totalCount > 20 && (
<Pagination
activePage={activePage}
itemsCountPerPage={20}
totalItemsCount={totalCount > 10000 ? 10000 : totalCount}
pageRangeDisplayed={8}
onChange={async (e) => {
setActivePage(e);
if (activeModel === 'total') {
const searchData = {
phrase: searchQueries.trim(),
from: e * 20 - 20,
size: 20,
type: searchType,
subjectArray: activeSubject || undefined,
gradeArray: activeEducation || undefined,
standardArray: activeType || undefined,
author: authorName || undefined,
};
Swal.fire({
title: 'Loading...',
allowOutsideClick: false,
onBeforeOpen: () => {
Swal.showLoading();
},
});
await dispatch(simpleSearchAction(searchData));
Swal.close();
} else {
const searchData = {
phrase: searchQueries.trim(),
from: e * 20 - 20,
size: 20,
type: searchType,
model: activeModel,
subjectArray: activeSubject || undefined,
gradeArray: activeEducation || undefined,
standardArray: activeType || undefined,
author: authorName || undefined,
standardArray: libraries,
};
Swal.fire({
title: 'Loading...',
allowOutsideClick: false,
onBeforeOpen: () => {
Swal.showLoading();
},
});
await dispatch(simpleSearchAction(searchData));
Swal.close();
}
}}
itemClass="page-item"
linkClass="page-link"
/>
)}
</div>
</div>
</div>
) : (
<Alert variant="danger">You are not authorized to view this page!</Alert>
)}
</div>
</div>
</div>
</>
);
}
Example #14
| Source File: Address.js From SaraAlert with Apache License 2.0 | 4 votes |
|
render() {
return (
<React.Fragment>
<Card className="mx-2 card-square">
<Card.Header as="h5">Monitoree Address</Card.Header>
<Card.Body>
<Tabs
defaultActiveKey={this.state.selectedTab}
id="patient_address"
className="g-border-bottom"
onSelect={() => {
this.setState({ selectedTab: this.state.selectedTab === 'domestic' ? 'foreign' : 'domestic' });
}}>
<Tab eventKey="domestic" title="Home Address Within USA">
<Form>
<Form.Row className="h-100">
<Form.Group as={Col} md={12} className="my-auto"></Form.Group>
</Form.Row>
<Form.Row className="pt-4">
<Form.Group as={Col} controlId="address_line_1">
<Form.Label className="nav-input-label">ADDRESS 1{schemaDomestic?.fields?.address_line_1?._exclusive?.required && ' *'}</Form.Label>
<Form.Control
isInvalid={this.state.errors['address_line_1']}
size="lg"
className="form-square"
value={this.state.current.patient.address_line_1 || ''}
onChange={this.handleChange}
/>
<Form.Control.Feedback className="d-block" type="invalid">
{this.state.errors['address_line_1']}
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} controlId="address_city">
<Form.Label className="nav-input-label">TOWN/CITY{schemaDomestic?.fields?.address_city?._exclusive?.required && ' *'}</Form.Label>
<Form.Control
isInvalid={this.state.errors['address_city']}
size="lg"
className="form-square"
value={this.state.current.patient.address_city || ''}
onChange={this.handleChange}
/>
<Form.Control.Feedback className="d-block" type="invalid">
{this.state.errors['address_city']}
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} controlId="address_state">
<Form.Label className="nav-input-label">STATE{schemaDomestic?.fields?.address_state?._exclusive?.required && ' *'}</Form.Label>
<Form.Control
isInvalid={this.state.errors['address_state']}
as="select"
size="lg"
className="form-square"
value={this.state.current.patient.address_state || ''}
onChange={this.handleChange}>
<option></option>
{stateOptions.map((state, index) => (
<option key={`state-${index}`} value={state.name}>
{state.name}
</option>
))}
</Form.Control>
<Form.Control.Feedback className="d-block" type="invalid">
{this.state.errors['address_state']}
</Form.Control.Feedback>
</Form.Group>
</Form.Row>
<Form.Row className="pt-2">
<Form.Group as={Col} md={8} controlId="address_line_2">
<Form.Label className="nav-input-label">ADDRESS 2{schemaDomestic?.fields?.address_line_2?._exclusive?.required && ' *'}</Form.Label>
<Form.Control
isInvalid={this.state.errors['address_line_2']}
size="lg"
className="form-square"
value={this.state.current.patient.address_line_2 || ''}
onChange={this.handleChange}
/>
<Form.Control.Feedback className="d-block" type="invalid">
{this.state.errors['address_line_2']}
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} md={4} controlId="address_zip">
<Form.Label className="nav-input-label">ZIP{schemaDomestic?.fields?.address_zip?._exclusive?.required && ' *'}</Form.Label>
<Form.Control
isInvalid={this.state.errors['address_zip']}
size="lg"
className="form-square"
value={this.state.current.patient.address_zip || ''}
onChange={this.handleChange}
/>
<Form.Control.Feedback className="d-block" type="invalid">
{this.state.errors['address_zip']}
</Form.Control.Feedback>
</Form.Group>
</Form.Row>
<Form.Row className="pt-2">
<Form.Group as={Col} md={8} controlId="address_county">
<Form.Label className="nav-input-label">
COUNTY (DISTRICT) {schemaDomestic?.fields?.address_county?._exclusive?.required && ' *'}
</Form.Label>
<Form.Control
isInvalid={this.state.errors['address_county']}
size="lg"
className="form-square"
value={this.state.current.patient.address_county || ''}
onChange={this.handleChange}
/>
<Form.Control.Feedback className="d-block" type="invalid">
{this.state.errors['address_county']}
</Form.Control.Feedback>
</Form.Group>
</Form.Row>
<Form.Row>
<hr />
</Form.Row>
<Form.Row className="h-100">
<Form.Group as={Col} className="my-auto">
<h5>
Address at Destination in USA Where Monitored
<Button size="md" variant="outline-primary" className="ml-4 btn-square px-3" onClick={this.whereMonitoredSameAsHome}>
Copy from Home Address
</Button>
</h5>
</Form.Group>
</Form.Row>
<Form.Row className="pt-1 pb-2">
<Form.Group as={Col} md={24} className="my-auto">
<span className="font-weight-light">
(If monitoree is planning on travel within the US, enter the <b>first</b> location where they may be contacted)
</span>
</Form.Group>
</Form.Row>
<Form.Row className="pt-3">
<Form.Group as={Col} controlId="monitored_address_line_1">
<Form.Label className="nav-input-label">
ADDRESS 1{schemaDomestic?.fields?.monitored_address_line_1?._exclusive?.required && ' *'}
</Form.Label>
<Form.Control
isInvalid={this.state.errors['monitored_address_line_1']}
size="lg"
className="form-square"
value={this.state.current.patient.monitored_address_line_1 || ''}
onChange={this.handleChange}
/>
<Form.Control.Feedback className="d-block" type="invalid">
{this.state.errors['monitored_address_line_1']}
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} controlId="monitored_address_city">
<Form.Label className="nav-input-label">
TOWN/CITY{schemaDomestic?.fields?.monitored_address_city?._exclusive?.required && ' *'}
</Form.Label>
<Form.Control
isInvalid={this.state.errors['monitored_address_city']}
size="lg"
className="form-square"
value={this.state.current.patient.monitored_address_city || ''}
onChange={this.handleChange}
/>
<Form.Control.Feedback className="d-block" type="invalid">
{this.state.errors['monitored_address_city']}
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} controlId="monitored_address_state">
<Form.Label className="nav-input-label">STATE{schemaDomestic?.fields?.monitored_address_state?._exclusive?.required && ' *'}</Form.Label>
<Form.Control
isInvalid={this.state.errors['monitored_address_state']}
as="select"
size="lg"
className="form-square"
value={this.state.current.patient.monitored_address_state || ''}
onChange={this.handleChange}>
<option></option>
{stateOptions.map((state, index) => (
<option key={`state-${index}`} value={state.name}>
{state.name}
</option>
))}
</Form.Control>
<Form.Control.Feedback className="d-block" type="invalid">
{this.state.errors['monitored_address_state']}
</Form.Control.Feedback>
</Form.Group>
</Form.Row>
<Form.Row className="pt-2">
<Form.Group as={Col} md={8} controlId="monitored_address_line_2">
<Form.Label className="nav-input-label">
ADDRESS 2{schemaDomestic?.fields?.monitored_address_line_2?._exclusive?.required && ' *'}
</Form.Label>
<Form.Control
isInvalid={this.state.errors['monitored_address_line_2']}
size="lg"
className="form-square"
value={this.state.current.patient.monitored_address_line_2 || ''}
onChange={this.handleChange}
/>
<Form.Control.Feedback className="d-block" type="invalid">
{this.state.errors['monitored_address_line_2']}
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} md={4} controlId="monitored_address_zip">
<Form.Label className="nav-input-label">ZIP{schemaDomestic?.fields?.monitored_address_zip?._exclusive?.required && ' *'}</Form.Label>
<Form.Control
isInvalid={this.state.errors['monitored_address_zip']}
size="lg"
className="form-square"
value={this.state.current.patient.monitored_address_zip || ''}
onChange={this.handleChange}
/>
<Form.Control.Feedback className="d-block" type="invalid">
{this.state.errors['monitored_address_zip']}
</Form.Control.Feedback>
</Form.Group>
</Form.Row>
<Form.Row className="pt-2 pb-3">
<Form.Group as={Col} md={8} controlId="monitored_address_county">
<Form.Label className="nav-input-label">
COUNTY (DISTRICT) {schemaDomestic?.fields?.monitored_address_county?._exclusive?.required && ' *'}
</Form.Label>
<Form.Control
isInvalid={this.state.errors['monitored_address_county']}
size="lg"
className="form-square"
value={this.state.current.patient.monitored_address_county || ''}
onChange={this.handleChange}
/>
<Form.Control.Feedback className="d-block" type="invalid">
{this.state.errors['monitored_address_county']}
</Form.Control.Feedback>
</Form.Group>
</Form.Row>
</Form>
</Tab>
<Tab eventKey="foreign" title="Home Address Outside USA (Foreign)">
<Form>
<Form.Row className="h-100">
<Form.Group as={Col} md={12} className="my-auto"></Form.Group>
</Form.Row>
<Form.Row className="pt-4">
<Form.Group as={Col} controlId="foreign_address_line_1">
<Form.Label className="nav-input-label">
ADDRESS 1{schemaForeign?.fields?.foreign_address_line_1?._exclusive?.required && ' *'}
</Form.Label>
<Form.Control
isInvalid={this.state.errors['foreign_address_line_1']}
size="lg"
className="form-square"
value={this.state.current.patient.foreign_address_line_1 || ''}
onChange={this.handleChange}
/>
<Form.Control.Feedback className="d-block" type="invalid">
{this.state.errors['foreign_address_line_1']}
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} controlId="foreign_address_city">
<Form.Label className="nav-input-label">TOWN/CITY{schemaForeign?.fields?.foreign_address_city?._exclusive?.required && ' *'}</Form.Label>
<Form.Control
isInvalid={this.state.errors['foreign_address_city']}
size="lg"
className="form-square"
value={this.state.current.patient.foreign_address_city || ''}
onChange={this.handleChange}
/>
<Form.Control.Feedback className="d-block" type="invalid">
{this.state.errors['foreign_address_city']}
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} controlId="foreign_address_country">
<Form.Label className="nav-input-label">COUNTRY{schemaForeign?.fields?.foreign_address_country?._exclusive?.required && ' *'}</Form.Label>
<Form.Control
isInvalid={this.state.errors['foreign_address_country']}
as="select"
size="lg"
className="form-square"
value={this.state.current.patient.foreign_address_country || ''}
onChange={this.handleChange}>
<option></option>
{countryOptions.map((country, index) => (
<option key={`country-${index}`}>{country}</option>
))}
</Form.Control>
<Form.Control.Feedback className="d-block" type="invalid">
{this.state.errors['foreign_address_country']}
</Form.Control.Feedback>
</Form.Group>
</Form.Row>
<Form.Row className="pt-2">
<Form.Group as={Col} md={8} controlId="foreign_address_line_2">
<Form.Label className="nav-input-label">
ADDRESS 2{schemaForeign?.fields?.foreign_address_line_2?._exclusive?.required && ' *'}
</Form.Label>
<Form.Control
isInvalid={this.state.errors['foreign_address_line_2']}
size="lg"
className="form-square"
value={this.state.current.patient.foreign_address_line_2 || ''}
onChange={this.handleChange}
/>
<Form.Control.Feedback className="d-block" type="invalid">
{this.state.errors['foreign_address_line_2']}
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} md={4} controlId="foreign_address_zip">
<Form.Label className="nav-input-label">POSTAL CODE{schemaForeign?.fields?.foreign_address_zip?._exclusive?.required && ' *'}</Form.Label>
<Form.Control
isInvalid={this.state.errors['foreign_address_zip']}
size="lg"
className="form-square"
value={this.state.current.patient.foreign_address_zip || ''}
onChange={this.handleChange}
/>
<Form.Control.Feedback className="d-block" type="invalid">
{this.state.errors['foreign_address_zip']}
</Form.Control.Feedback>
</Form.Group>
</Form.Row>
<Form.Row className="pt-2">
<Form.Group as={Col} md={8} controlId="foreign_address_line_3">
<Form.Label className="nav-input-label">
ADDRESS 3{schemaForeign?.fields?.foreign_address_line_3?._exclusive?.required && ' *'}
</Form.Label>
<Form.Control
isInvalid={this.state.errors['foreign_address_line_3']}
size="lg"
className="form-square"
value={this.state.current.patient.foreign_address_line_3 || ''}
onChange={this.handleChange}
/>
<Form.Control.Feedback className="d-block" type="invalid">
{this.state.errors['foreign_address_line_3']}
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} md={4} controlId="foreign_address_state">
<Form.Label className="nav-input-label">
STATE/PROVINCE{schemaForeign?.fields?.foreign_address_state?._exclusive?.required && ' *'}
</Form.Label>
<Form.Control
isInvalid={this.state.errors['foreign_address_state']}
size="lg"
className="form-square"
value={this.state.current.patient.foreign_address_state || ''}
onChange={this.handleChange}
/>
<Form.Control.Feedback className="d-block" type="invalid">
{this.state.errors['foreign_address_state']}
</Form.Control.Feedback>
</Form.Group>
</Form.Row>
<Form.Row>
<hr />
</Form.Row>
<Form.Row className="h-100">
<Form.Group as={Col} md={24} className="my-auto">
<h5>Address at Destination in USA Where Monitored</h5>
</Form.Group>
</Form.Row>
<Form.Row className="pt-2 pb-2">
<Form.Group as={Col} md={24} className="my-auto">
<span className="font-weight-light">
(If monitoree is planning on travel within the US, enter the <b>first</b> location where they may be contacted)
</span>
</Form.Group>
</Form.Row>
<Form.Row className="pt-3">
<Form.Group as={Col} controlId="foreign_monitored_address_line_1">
<Form.Label className="nav-input-label">
ADDRESS 1{schemaForeign?.fields?.foreign_monitored_address_line_1?._exclusive?.required && ' *'}
</Form.Label>
<Form.Control
isInvalid={this.state.errors['foreign_monitored_address_line_1']}
size="lg"
className="form-square"
value={this.state.current.patient.foreign_monitored_address_line_1 || ''}
onChange={this.handleChange}
/>
<Form.Control.Feedback className="d-block" type="invalid">
{this.state.errors['foreign_monitored_address_line_1']}
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} controlId="foreign_monitored_address_city">
<Form.Label className="nav-input-label">
TOWN/CITY{schemaForeign?.fields?.foreign_monitored_address_city?._exclusive?.required && ' *'}
</Form.Label>
<Form.Control
isInvalid={this.state.errors['foreign_monitored_address_city']}
size="lg"
className="form-square"
value={this.state.current.patient.foreign_monitored_address_city || ''}
onChange={this.handleChange}
/>
<Form.Control.Feedback className="d-block" type="invalid">
{this.state.errors['foreign_monitored_address_city']}
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} controlId="foreign_monitored_address_state">
<Form.Label className="nav-input-label">
STATE{schemaForeign?.fields?.foreign_monitored_address_state?._exclusive?.required && ' *'}
</Form.Label>
<Form.Control
isInvalid={this.state.errors['foreign_monitored_address_state']}
as="select"
size="lg"
className="form-square"
value={this.state.current.patient.foreign_monitored_address_state || ''}
onChange={this.handleChange}>
<option></option>
{stateOptions.map((state, index) => (
<option key={`state-${index}`} value={state.name}>
{state.name}
</option>
))}
</Form.Control>
<Form.Control.Feedback className="d-block" type="invalid">
{this.state.errors['foreign_monitored_address_state']}
</Form.Control.Feedback>
</Form.Group>
</Form.Row>
<Form.Row className="pt-2">
<Form.Group as={Col} md={8} controlId="foreign_monitored_address_line_2">
<Form.Label className="nav-input-label">
ADDRESS 2{schemaForeign?.fields?.foreign_monitored_address_line_2?._exclusive?.required && ' *'}
</Form.Label>
<Form.Control
isInvalid={this.state.errors['foreign_monitored_address_line_2']}
size="lg"
className="form-square"
value={this.state.current.patient.foreign_monitored_address_line_2 || ''}
onChange={this.handleChange}
/>
<Form.Control.Feedback className="d-block" type="invalid">
{this.state.errors['foreign_monitored_address_line_2']}
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} md={4} controlId="foreign_monitored_address_zip">
<Form.Label className="nav-input-label">
ZIP{schemaForeign?.fields?.foreign_monitored_address_zip?._exclusive?.required && ' *'}
</Form.Label>
<Form.Control
isInvalid={this.state.errors['foreign_monitored_address_zip']}
size="lg"
className="form-square"
value={this.state.current.patient.foreign_monitored_address_zip || ''}
onChange={this.handleChange}
/>
<Form.Control.Feedback className="d-block" type="invalid">
{this.state.errors['foreign_monitored_address_zip']}
</Form.Control.Feedback>
</Form.Group>
</Form.Row>
<Form.Row className="pt-2 pb-3">
<Form.Group as={Col} md={8} controlId="foreign_monitored_address_county">
<Form.Label className="nav-input-label">
COUNTY (DISTRICT) {schemaForeign?.fields?.foreign_monitored_address_county?._exclusive?.required && ' *'}
</Form.Label>
<Form.Control
isInvalid={this.state.errors['foreign_monitored_address_county']}
size="lg"
className="form-square"
value={this.state.current.patient.foreign_monitored_address_county || ''}
onChange={this.handleChange}
/>
<Form.Control.Feedback className="d-block" type="invalid">
{this.state.errors['foreign_monitored_address_county']}
</Form.Control.Feedback>
</Form.Group>
</Form.Row>
</Form>
</Tab>
</Tabs>
{this.props.previous && (
<Button variant="outline-primary" size="lg" className="btn-square px-5" onClick={this.props.previous}>
Previous
</Button>
)}
{this.props.next && (
<Button variant="outline-primary" size="lg" className="float-right btn-square px-5" onClick={() => this.validate(this.props.next)}>
Next
</Button>
)}
{this.props.submit && (
<Button variant="outline-primary" size="lg" className="float-right btn-square px-5" onClick={this.props.submit}>
Finish
</Button>
)}
</Card.Body>
</Card>
</React.Fragment>
);
}
Example #15
| Source File: SettingsPanel.js From Purple-React with MIT License | 4 votes |
|
render() {
return (
<div>
{/* <div id="settings-trigger"><i className="mdi mdi-settings"></i></div> */}
<div id="right-sidebar" className="settings-panel right-sidebar">
<i className="settings-close mdi mdi-close" onClick={this.closeRightSidebar}></i>
<Tabs defaultActiveKey="TODOLIST" className="bg-gradient-primary" id="uncontrolled-tab-example">
<Tab eventKey="TODOLIST" title="TO DO LIST" className="test-tab">
<div>
<div className="row">
<div className="col-lg-12">
<div className="px-3">
<div>
<h4 className="card-title"><Trans>Todo List</Trans></h4>
<form className="add-items d-flex" onSubmit={this.addTodo}>
<input
type="text"
className="form-control h-auto"
placeholder="What do you need to do today?"
value={this.state.inputValue}
onChange={this.inputChangeHandler}
required />
<button type="submit" className="btn btn-gradient-primary font-weight-bold"><Trans>Add</Trans></button>
</form>
<div className="list-wrapper">
<ul className="todo-list">
{this.state.todos.map((todo, index) =>{
return <ListItem
isCompleted={todo.isCompleted}
changed={(event) => this.statusChangedHandler(event, index)}
key={todo.id}
remove={() => this.removeTodo(index) }
>{todo.task}</ListItem>
})}
</ul>
<ul className="todo-list rtl-todo">
{this.state.todosRtl.map((todoRtl, index) =>{
return <ListItem
isCompleted={todoRtl.isCompleted}
changed={(event) => this.statusChangedHandler(event, index)}
key={todoRtl.id}
remove={() => this.removeTodoRtl(index) }
>{todoRtl.task}</ListItem>
})}
</ul>
</div>
</div>
</div>
</div>
</div>
<div className="events py-4 border-bottom px-3">
<div className="wrapper d-flex mb-2">
<i className="mdi mdi-circle-outline text-primary mr-2"></i>
<span><Trans>Feb</Trans> 11 2018</span>
</div>
<p className="mb-0 font-weight-thin text-gray"><Trans>Creating component page</Trans></p>
<p className="text-gray mb-0"><Trans>build a js based app</Trans></p>
</div>
<div className="events pt-4 px-3">
<div className="wrapper d-flex mb-2">
<i className="mdi mdi-circle-outline text-primary mr-2"></i>
<span><Trans>Feb</Trans> 7 2018</span>
</div>
<p className="mb-0 font-weight-thin text-gray"><Trans>Meeting with Alisa</Trans></p>
<p className="text-gray mb-0 "><Trans>Call Sarah Graves</Trans></p>
</div>
</div>
</Tab>
<Tab eventKey="CHATS" title="CHATS">
<div>
<div className="d-flex align-items-center justify-content-between border-bottom">
<p className="settings-heading border-top-0 mb-3 pl-3 pt-0 border-bottom-0 pb-0"><Trans>FRIENDS</Trans></p>
<small className="settings-heading border-top-0 mb-3 pt-0 border-bottom-0 pb-0 pr-3 font-weight-normal"><Trans>See All</Trans></small>
</div>
<ul className="chat-list">
<li className="list active">
<div className="profile"><img src={ require("../../assets/images/faces/face1.jpg")} alt="profile" /><span className="online"></span></div>
<div className="info">
<p><Trans>Thomas Douglas</Trans></p>
<p><Trans>Available</Trans></p>
</div>
<small className="text-muted my-auto">19 <Trans>min</Trans></small>
</li>
<li className="list">
<div className="profile"><img src={ require("../../assets/images/faces/face2.jpg")} alt="profile" /><span className="offline"></span></div>
<div className="info">
<div className="wrapper d-flex">
<p><Trans>Catherine</Trans></p>
</div>
<p><Trans>Away</Trans></p>
</div>
<div className="badge badge-success badge-pill my-auto mx-2">4</div>
<small className="text-muted my-auto">23 <Trans>min</Trans></small>
</li>
<li className="list">
<div className="profile"><img src={ require("../../assets/images/faces/face3.jpg")} alt="profile" /><span className="online"></span></div>
<div className="info">
<p><Trans>Daniel Russell</Trans></p>
<p><Trans>Available</Trans></p>
</div>
<small className="text-muted my-auto">14 <Trans>min</Trans></small>
</li>
<li className="list">
<div className="profile"><img src={ require("../../assets/images/faces/face4.jpg")} alt="profile" /><span className="offline"></span></div>
<div className="info">
<p><Trans>James Richardson</Trans></p>
<p><Trans>Away</Trans></p>
</div>
<small className="text-muted my-auto">2 <Trans>min</Trans></small>
</li>
<li className="list">
<div className="profile"><img src={ require("../../assets/images/faces/face5.jpg")} alt="profile" /><span className="online"></span></div>
<div className="info">
<p><Trans>Madeline Kennedy</Trans></p>
<p><Trans>Available</Trans></p>
</div>
<small className="text-muted my-auto">5 <Trans>min</Trans></small>
</li>
<li className="list">
<div className="profile"><img src={ require("../../assets/images/faces/face6.jpg")} alt="profile" /><span className="online"></span></div>
<div className="info">
<p><Trans>Sarah Graves</Trans></p>
<p><Trans>Available</Trans></p>
</div>
<small className="text-muted my-auto">47 <Trans>min</Trans></small>
</li>
</ul>
</div>
</Tab>
</Tabs>
</div>
</div>
)
}
Example #16
| Source File: Farms.js From plenty-interface with GNU General Public License v3.0 | 4 votes |
|
Farms = (props) => {
const [sortValue, setSortValue] = useState(FARM_SORT_OPTIONS.APR);
const [floaterValue, setFloaterValue] = useState({});
const [searchValue, setSearchValue] = useState('');
const [tabChange, setTabChange] = useState(FARM_TAB.ALL);
const [isSelected, setIsSelected] = useState(false);
const [isOpen, setIsOpen] = useState(false);
const [showConfirmTransaction, setShowConfirmTransaction] = useState(false);
function toggleHidden() {
setIsOpen(!isOpen);
}
function setSelectTitle(e) {
setSortValue(e.target.value);
toggleHidden();
}
// * Initial Call
useEffect(() => {
if (props.activeFarms.length === 0 || props.inactiveFarms.length === 0) {
const farmsWithoutData = populateFarmsWithoutData();
props.populateEmptyFarmsData(farmsWithoutData);
}
}, []);
const handleClose = () => {
setShowConfirmTransaction(false);
};
useEffect(() => {
const fetchData = () => {
props.getFarmsData(props.isActiveOpen);
props.getUserStakes(props.userAddress, 'FARMS', props.isActiveOpen);
props.getHarvestValues(props.userAddress, 'FARMS', props.isActiveOpen);
props.fetchUserBalances(props.userAddress);
};
fetchData();
const backgroundRefresh = setInterval(() => {
fetchData();
}, 60 * 1000);
return () => clearInterval(backgroundRefresh);
}, [props.isActiveOpen, props.userAddress, props.rpcNode]);
const sortFarmsFunc = useCallback(
(a, b) => {
if (sortValue === FARM_SORT_OPTIONS.APR) {
return Number(a.values?.APR) < Number(b.values?.APR) ? 1 : -1;
}
if (sortValue === FARM_SORT_OPTIONS.TVL) {
return Number(a.values?.totalLiquidty) < Number(b.values?.totalLiquidty) ? 1 : -1;
}
if (sortValue === FARM_SORT_OPTIONS.REWARDS) {
const a1 = Number(a.values?.rewardRate * 2880);
const b1 = Number(b.values?.rewardRate * 2880);
return a1 < b1 ? 1 : -1;
}
return 0;
},
[sortValue],
);
const filterBySearch = useCallback(
(farm) => farm.farmData.CARD_TYPE.toLowerCase().includes(searchValue.toLowerCase()),
[searchValue],
);
const filterByTab = useCallback(
(farm) => {
if (tabChange === FARM_TAB.CTEZ) {
return farm.farmData.CARD_TYPE.toLowerCase().includes('ctez');
}
if (tabChange === FARM_TAB.NEW) {
return farm.farmData.bannerType?.includes('info');
}
if (tabChange === FARM_TAB.STABLE) {
return (
farm.farmData.farmType?.includes('veStableAMM') || farm.farmData.farmType?.includes('xtz')
);
}
if (tabChange === FARM_TAB.YOU) {
return props.userStakes[farm.farmData.CONTRACT]?.stakedAmount > 0;
}
return true;
},
[tabChange, props.userStakes],
);
const filterByStaked = useCallback(
(farm) => {
if (!props.isStakedOnlyOpen) return true;
return props.userStakes[farm.farmData.CONTRACT]?.stakedAmount > 0;
},
[props.isStakedOnlyOpen, props.userStakes],
);
const farmsToRender = useMemo(() => {
const farmsInView = props.isActiveOpen
? props.activeFarms.slice()
: props.inactiveFarms.slice();
return farmsInView
.filter(filterBySearch)
.filter(filterByTab)
.filter(filterByStaked)
.sort(sortFarmsFunc);
}, [
filterBySearch,
filterByTab,
filterByStaked,
sortFarmsFunc,
props.activeFarms,
props.inactiveFarms,
props.isActiveOpen,
]);
return (
<>
<div>
<div>
<div className={styles.header}>
<Tabs
className={`swap-container-tab ${styles.farmstab}`}
mountOnEnter={true}
unmountOnExit={true}
onSelect={(e) => setTabChange(e)}
>
<Tab eventKey={FARM_TAB.ALL} title={FARM_TAB.ALL} />
<Tab eventKey={FARM_TAB.NEW} title={FARM_TAB.NEW} />
<Tab
eventKey={FARM_TAB.STABLE}
title={
<span>
<span className="mr-2">{FARM_TAB.STABLE}</span>
{tabChange === FARM_TAB.STABLE ? <StableswapImg /> : <StableswapGrey />}
</span>
}
/>
<Tab eventKey={FARM_TAB.YOU} title={FARM_TAB.YOU} />
</Tabs>
<div className={styles.selectForm}>
<div className={styles.selectgroup}>
<label htmlFor="button"> Sort by:</label>
<button
id="button"
onClick={(ev) => toggleHidden(ev)}
className={`button ${styles.sortLabel}
`}
>
<span id="select-label">{sortValue}</span>
<span className={`material-icons ${styles.arrow} `}>keyboard_arrow_down</span>
</button>
<div
className={clsx(styles.dropdown, isOpen ? styles.show : styles.hidden)}
id="dropdown"
>
<label className={` ${styles.sortby} ${styles.sortby} `}>SORT BY:</label>
<div className={styles.selectOption}>
<label className={styles.selectItem} htmlFor="select-apr">
{FARM_SORT_OPTIONS.APR}
</label>
<input
className={`option ${styles.option}`}
id="select-apr"
type="radio"
name="where"
value={FARM_SORT_OPTIONS.APR}
onClick={(ev) => setSelectTitle(ev)}
/>
</div>
<div className={styles.selectOption}>
<label className={styles.selectItem} htmlFor="select-tvl">
{FARM_SORT_OPTIONS.TVL}
</label>
<input
className={`option ${styles.option}`}
id="select-tvl"
type="radio"
name="where"
value={FARM_SORT_OPTIONS.TVL}
onClick={(ev) => setSelectTitle(ev)}
/>
</div>
<div className={styles.selectOption}>
<label className={styles.selectItem} htmlFor="select-rewards">
{FARM_SORT_OPTIONS.REWARDS}
</label>
<input
className={`option ${styles.option}`}
name="where"
id="select-rewards"
type="radio"
value={FARM_SORT_OPTIONS.REWARDS}
onClick={(ev) => setSelectTitle(ev)}
/>
</div>
</div>
</div>
</div>
</div>
<div className={` mt-4 justify-between ${styles.header2}`}>
<div className={styles.leftDiv}>
<InputGroup className={styles1.searchBar}>
<InputGroup.Prepend>
<InputGroup.Text className="search-icon border-right-0">
<BsSearch />
</InputGroup.Text>
</InputGroup.Prepend>
<FormControl
placeholder="Search"
className={`shadow-none border-left-0 ${styles1.searchBox}`}
value={searchValue}
onChange={(ev) => setSearchValue(ev.target.value)}
/>
</InputGroup>
</div>
<div className={styles.selectForm1}>
<span className={styles.sortButton} onClick={() => setIsSelected(!isSelected)}>
Sort
<span className={clsx('material-icons', styles.arrow, isSelected && styles.rotate)}>
keyboard_arrow_up
</span>
</span>
</div>
<div>
<div className={styles.rightDiv}>
<div>
<Switch
value={props.isActiveOpen}
onChange={() => props.toggleFarmsType(!props.isActiveOpen)}
trueLabel={'Active'}
falseLabel={'Inactive'}
inverted={true}
/>
</div>
</div>
</div>
</div>
{isSelected && (
<div className={`justify-between flex ${styles.mobileSort}`}>
<div
onClick={() => setSortValue(FARM_SORT_OPTIONS.APR)}
className={clsx(
styles.sortButton,
sortValue === FARM_SORT_OPTIONS.APR ? styles.addbg : styles.removebg,
)}
>
{FARM_SORT_OPTIONS.APR}
</div>
<div
onClick={() => setSortValue(FARM_SORT_OPTIONS.TVL)}
className={clsx(
styles.sortButton,
sortValue === FARM_SORT_OPTIONS.TVL ? styles.addbg : styles.removebg,
)}
>
{FARM_SORT_OPTIONS.TVL}
</div>
<div
onClick={() => setSortValue(FARM_SORT_OPTIONS.REWARDS)}
className={clsx(
styles.sortButton,
sortValue === FARM_SORT_OPTIONS.REWARDS ? styles.addbg : styles.removebg,
)}
>
{FARM_SORT_OPTIONS.REWARDS}
</div>
</div>
)}
<div className={styles.cardsContainer}>
{farmsToRender?.map((farm) => {
return (
<FarmCard
key={`${farm.identifier}${props.isActiveOpen ? ' active' : ''}`}
harvestOnFarm={props.harvestOnFarm}
stakeOnFarm={props.stakeOnFarm}
openFarmsStakeModal={props.openFarmsStakeModal}
openFarmsUnstakeModal={props.openFarmsUnstakeModal}
connectWallet={props.connectWallet}
unstakeOnFarm={props.unstakeOnFarm}
isActiveOpen={props.isActiveOpen}
farmCardData={farm}
userStakes={props.userStakes}
harvestValueOnFarms={props.harvestValueOnFarms}
userAddress={props.userAddress}
currentBlock={props.currentBlock}
harvestOperation={props.harvestOperation}
theme={props.theme}
setShowConfirmTransaction={setShowConfirmTransaction}
setFloaterValue={setFloaterValue}
setLoader={props.setLoader}
/>
);
})}
</div>
</div>
</div>
<StakeModal
walletBalances={props.walletBalances}
isActiveOpen={props.isActiveOpen}
modalData={props.stakeModal}
open={props.stakeModal.open}
onClose={() => props.closeFarmsStakeModal()}
stakeOnFarm={props.stakeOnFarm}
stakeOperation={props.stakeOperation}
setShowConfirmTransaction={setShowConfirmTransaction}
setFloaterValue={setFloaterValue}
setLoader={props.setLoader}
/>
<UnstakeModal
modalData={props.unstakeModal}
currentBlock={props.currentBlock}
open={props.unstakeModal.open}
onClose={() => {
props.closeFarmsUnstakeModal();
}}
userStakes={props.userStakes}
isActiveOpen={props.isActiveOpen}
unstakeOnFarm={props.unstakeOnFarm}
unstakeOperation={props.unstakeOperation}
setShowConfirmTransaction={setShowConfirmTransaction}
setFloaterValue={setFloaterValue}
setLoader={props.setLoader}
/>
<ConfirmTransaction
show={showConfirmTransaction}
theme={props.theme}
content={
floaterValue.type === 'Harvest'
? `${floaterValue.type} ${floaterValue.value} ${floaterValue.pair} `
: `${floaterValue.type} ${Number(floaterValue.value).toFixed(6)} ${
floaterValue.pair
} LP `
}
onHide={handleClose}
/>
<FarmModals
setLoader={props.setLoader}
type={floaterValue.type}
pair={floaterValue.pair}
value={floaterValue.value}
theme={props.theme}
content={
floaterValue.type === 'Harvest'
? `${floaterValue.type} ${floaterValue.value} ${floaterValue.pair} `
: `${floaterValue.type} ${Number(floaterValue.value).toFixed(6)} ${
floaterValue.pair
} LP `
}
/>
</>
);
}
Example #17
| Source File: index.js From contributor-graph with Apache License 2.0 | 4 votes |
|
ActivityChart = ({
repoList = ["apache/apisix"],
showAlert,
onDelete,
onLoading,
}) => {
const [loading, setLoading] = React.useState(false);
const [dataSource, setDataSource] = React.useState({});
const [xAxis] = React.useState(["1970-01-01"]);
const [shareModalVisible, setShareModalVisible] = React.useState(false);
const [openAlert, setOpenAlert] = React.useState(false);
const getShareParams = () =>
`?chart=contributorMonthlyActivity&repo=${repoList.join(",")}`;
const [, setCopied] = useClipboard(`https://git-contributor.com/${getShareParams()}`, { successDuration: 3000 });
const Alert = (props) => {
return <MuiAlert elevation={6} variant="filled" {...props} />;
};
const [option, setOption] = React.useState(
generateMonthlyActivityOption({
handleShareClick: () => {
const params = getShareParams();
handleShareToTwitterClick(params, repoList);
},
handleCopyClick: () => {
setCopied();
setOpenAlert(true);
},
handleDownloadClick: () => {
const params = getShareParams();
saveAs(`https://contributor-overtime-api.apiseven.com/contributors-svg${params}`, 'text.svg');
},
})
);
const Dialog = React.useCallback(() => {
return (
<CustomizedDialogs
open={shareModalVisible}
params={getShareParams()}
onChange={() => {
setShareModalVisible(false);
}}
/>
);
}, [shareModalVisible]);
const updateSeries = (passXAxis) => {
const newClonedOption = cloneDeep(
generateMonthlyActivityOption({
handleShareClick: () => {
const params = getShareParams();
handleShareToTwitterClick(params, repoList);
},
handleCopyClick: () => {
setCopied();
setOpenAlert(true);
},
handleDownloadClick: () => {
const params = getShareParams();
saveAs(`https://contributor-overtime-api.apiseven.com/contributors-svg${params}`, 'text.svg');
},
})
);
const datasetWithFilters = [
["ContributorNum", "Repo", "Date", "DateValue"],
];
const legend = [];
const limitDate = new Date(passXAxis[0]).getTime();
Object.entries(dataSource).forEach(([key, value]) => {
legend.push(key);
value.forEach((item) => {
datasetWithFilters.push([
item.contributorNum,
item.repo,
item.date,
new Date(item.date).getTime(),
]);
});
});
const newDateSet = datasetWithFilters.sort(
(a, b) => new Date(a[2]) - new Date(b[2])
);
const filterDataset = legend.map((item) => ({
id: item,
fromDatasetId: "dataset_raw",
transform: {
type: "filter",
config: {
and: [
{ dimension: "Repo", "=": item },
{ dimension: "DateValue", gte: limitDate },
],
},
},
}));
const series = legend.map((item) => ({
name: item,
type: "line",
datasetId: item,
showSymbol: false,
encode: {
x: "Date",
y: "ContributorNum",
itemName: "Repo",
tooltip: ["ContributorNum"],
},
}));
if (series.length === 1) {
series[0].areaStyle = {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: DEFAULT_COLOR + "80",
},
{
offset: 1,
color: DEFAULT_COLOR + "00",
},
]),
};
series[0].itemStyle = {
normal: {
color: DEFAULT_COLOR,
lineStyle: {
color: DEFAULT_COLOR,
},
},
};
}
newClonedOption.dataset = [
{
id: "dataset_raw",
source: newDateSet,
},
].concat(filterDataset);
newClonedOption.series = series;
newClonedOption.legend.data = legend;
setOption(newClonedOption);
};
const fetchData = (repo) => {
if (repo === "null" || repo === null) {
repo = "apache/apisix";
}
return new Promise((resolve, reject) => {
fetch(
`https://contributor-overtime-api.apiseven.com/monthly-contributor?repo=${repo}`
)
.then((response) => {
if (!response.ok) {
onDelete(repo);
let message = "";
switch (response.status) {
case 403:
message = "Hit rate limit";
break;
case 404:
message = "Repo format error / Repo not found";
break;
default:
message = "Request Error";
break;
}
throw message;
}
return response.json();
})
.then((myJson) => {
resolve({ repo, ...myJson });
})
.catch((e) => {
showAlert(e, "error");
reject();
});
});
};
React.useEffect(() => {
updateSeries(xAxis);
window.parent.postMessage({ legend: Object.keys(dataSource) }, "*");
window.history.pushState(null, null, getShareParams());
}, [dataSource, xAxis]);
React.useEffect(() => {
onLoading(loading);
}, [loading]);
React.useEffect(() => {
const datasourceList = Object.keys(dataSource);
if (datasourceList.length > repoList.length) {
const deleteList = datasourceList.filter(
(item) => !repoList.includes(item)
);
console.log("deleteList: ", deleteList);
const clonedDatasource = cloneDeep(dataSource);
setDataSource(omit(clonedDatasource, deleteList));
return;
}
const updateList = repoList.filter(
(item) => !datasourceList.includes(item)
);
setLoading(true);
Promise.all(updateList.map((item) => fetchData(item)))
.then((data) => {
const tmpDataSouce = {};
data.forEach((item) => {
const { Contributors = [], repo } = item;
const data = Contributors.map((item) => ({
repo,
contributorNum: item.Num,
date: item.Month,
}));
if (!tmpDataSouce[item.repo]) {
tmpDataSouce[repo] = data;
}
});
const clonedDatasource = cloneDeep(dataSource);
setDataSource({ ...clonedDatasource, ...tmpDataSouce });
setLoading(false);
})
.catch(() => {
setLoading(false);
});
}, [repoList]);
return (
<>
<div
className="content"
style={{
display: "flex",
justifyContent: "center",
}}
>
<Dialog />
<Snackbar
anchorOrigin={{ vertical: "top", horizontal: "center" }}
autoHideDuration={6000}
open={openAlert}
onClose={() => setOpenAlert(false)}
key={"topcenter"}
>
<Alert severity='success' onClose={() => setOpenAlert(false)}>
Copy link successfully
</Alert>
</Snackbar>
<div className="right" style={{ width: "90%", marginTop: "10px" }}>
<div id="chart">
<Tab.Container defaultActiveKey="contributor">
<Row>
<Col>
<Tab.Content>
<Tab.Pane eventKey="contributor">
<ReactECharts
option={option}
ref={(e) => {
if (e) {
const echartInstance = e.getEchartsInstance();
// then you can use any API of echarts.
window.echartInstance = echartInstance;
}
}}
style={{ height: 550 }}
showLoading={loading}
notMerge
/>
<DialogBox
params={getShareParams()}
/>
<MarkdownLink
params={getShareParams()}
type="contributorMonthlyActivity"
/>
</Tab.Pane>
</Tab.Content>
</Col>
</Row>
</Tab.Container>
</div>
</div>
</div>
</>
);
}
Example #18
| Source File: announcement.js From community-forum-frontend with GNU General Public License v3.0 | 4 votes |
|
render() {
return (
<div>
<div className="AnnouncementsHeading">Activities</div>
<div className="navTabs">
<Tabs defaultActiveKey="Announcements" id="uncontrolled-tab-example">
<Tab
eventKey="Announcements"
title="Announcements"
className="Announcementtab"
>
<div className="announcements">
{announcementData.map((announcement) => {
return (
<div className="announcement">
<div className="topannouncement">
<Avatar
className="avatar"
src={announcement.avatarUrl}
></Avatar>
<div className="text">
<div>{announcement.description}</div>
<div className="bottomannouncement">
{announcement.author}, {announcement.topicName}
</div>
</div>
<IconContext.Provider
value={{ color: "#F04B58", size: "24px" }}
>
<div className="icon">
<MdInfoOutline />
</div>
</IconContext.Provider>
</div>
</div>
);
})}
</div>
</Tab>
<Tab eventKey="Recents" title="Recents" className="recenttab">
<div className="announcements">
<div className="announcement">
<div className="topannouncement">
<Avatar className="avatar"></Avatar>
<div className="text">
<div>
@Jaskirat Singh Mentioned you in the comments in the
Topic: “Random”.
</div>
</div>
</div>
</div>
<div className="announcement">
<div className="topannouncement">
<Avatar className="avatar"></Avatar>
<div className="text">
<div>
@Jaskirat Singh Mentioned you in the comments in the
Topic: “Random”.
</div>
</div>
</div>
</div>
<div className="announcement">
<div className="topannouncement">
<Avatar className="avatar"></Avatar>
<div className="text">
<div>
@Jaskirat Singh Mentioned you in the comments in the
Topic: “Random”.
</div>
</div>
</div>
</div>
<div className="announcement">
<div className="topannouncement">
<Avatar className="avatar"></Avatar>
<div className="text">
<div>
@Jaskirat Singh Mentioned you in the comments in the
Topic: “Random”.
</div>
</div>
</div>
</div>
</div>
</Tab>
</Tabs>
</div>
</div>
);
}
Example #19
| Source File: Validator.jsx From cosmoscan-front with Apache License 2.0 | 4 votes |
|
Validator = () => {
const { address } = useParams();
const { resp } = useRequest(API.getValidatorInfo, address);
return (
<Container>
<Helmet>
<title>Cosmos validator | Cosmoscan</title>
<meta
name="description"
content="View information on the individual Cosmos validator."
/>
<meta
itemProp="description"
content="View information on the individual Cosmos validator."
/>
<meta
property="og:description"
content="View information on the individual Cosmos validator."
/>
<meta
name="twitter:description"
content="View information on the individual Cosmos validator."
/>
</Helmet>
<Row xs={1} xl={2}>
<ColStyled>
<General info={resp || {}} />
</ColStyled>
<ColStyled>
<BalanceDistribution />
</ColStyled>
<ColStyled>
<DelegatedBalance />
</ColStyled>
<ColStyled>
<NumOfDelegators />
</ColStyled>
</Row>
<Row>
<ColStyled>
<ValidatorStats />
</ColStyled>
</Row>
<Row>
<ColStyled>
<Card>
<Tab.Container id="left-tabs-example" defaultActiveKey="delegators">
<Card.Header style={{ padding: 0, border: 'none' }}>
<Nav fill variant="tabs">
<Nav.Item>
<Nav.Link eventKey="delegators">Delegators</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="votes">Governance votes</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body
style={{
borderLeft: '1px solid #dee2e6',
borderRight: '1px solid #dee2e6 ',
borderBottom: '1px solid #dee2e6 ',
paddingLeft: 0,
paddingRight: 0,
paddingBottom: 0,
paddingTop: 0,
}}
>
<Tab.Content>
<Tab.Pane eventKey="delegators">
<DelegatorsTable />
</Tab.Pane>
<Tab.Pane eventKey="votes">
{resp && resp.acc_address ? (
<VotesTable accAddress={resp.acc_address} />
) : (
<div>No data</div>
)}
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Tab.Container>
</Card>
</ColStyled>
</Row>
</Container>
);
}
