components#A JavaScript Examples
The following examples show how to use
components#A.
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: wizard.jsx From apps with GNU Affero General Public License v3.0 | 6 votes |
|
Hi = withSettings(({ settings }) => (
<React.Fragment>
<CardContent>
<p>
<T
t={t}
k="wizard.hi"
link={
<A
key="letUsKnow"
external
href={settings.get('supportEmail')}
>
<T t={t} k="wizard.letUsKnow" key="letUsKnow" />
</A>
}
/>
</p>
</CardContent>
<CardFooter>
<Button type="success" href={`/provider/setup/enter-provider-data`}>
<T t={t} k="wizard.continue" />
</Button>
</CardFooter>
</React.Fragment>
))
Example #2
| Source File: wizard.jsx From apps with GNU Affero General Public License v3.0 | 6 votes |
|
Hi = withSettings(({ settings }) => (
<React.Fragment>
<CardContent>
<p>
<T
t={t}
k="wizard.hi"
link={
<A
key="letUsKnow"
external
href={settings.get('supportEmail')}
>
<T t={t} k="wizard.letUsKnow" key="letUsKnow" />
</A>
}
/>
</p>
</CardContent>
<CardFooter>
<Button type="success" href={`/user/setup/enter-contact-data`}>
<T t={t} k="wizard.continue" />
</Button>
</CardFooter>
</React.Fragment>
))
Example #3
| Source File: sidebar-menu.jsx From apps with GNU Affero General Public License v3.0 | 6 votes |
|
render() {
const { href, onToggle } = this.props;
return (
<li className="kip-nav-item">
<A href={href} onClick={onToggle}>
{this.props.children}
</A>
</li>
);
}
Example #4
| Source File: sidebar-menu.jsx From apps with GNU Affero General Public License v3.0 | 6 votes |
|
render() {
const { href, onToggle } = this.props;
return (
<li className="kip-nav-item">
<A href={href} onClick={onToggle}>
{this.props.children}
</A>
</li>
);
}
Example #5
| Source File: sidebar-menu.jsx From apps with GNU Affero General Public License v3.0 | 6 votes |
|
render() {
const { title, items, user } = this.props;
const navItems = items
.filter((item) => {
if (item.show !== undefined && item.show(user.user) === false)
return false;
return true;
})
.map((item, i) => {
let href;
if (item.route !== undefined) href = '/' + item.route;
return (
<DropdownItem
key={i}
href={href}
onToggle={(e) => this.props.onToggle(e)}
>
{item.title}
</DropdownItem>
);
});
let subMenu;
if (this.isActive()) {
subMenu = <ul>{navItems}</ul>;
}
return (
<li className="kip-nav-item" ref={this.self}>
<A
className={this.isActive() ? 'is-active' : ''}
onClick={this.toggleActive}
>
{title}
</A>
{subMenu}
</li>
);
}
Example #6
| Source File: Icons.jsx From crypto-manager with MIT License | 5 votes |
|
function Icons({ ...props }) {
return (
<Grid container>
<ItemGrid xs={12} sm={12} md={12}>
<RegularCard
plainCard
cardTitle="Material Design Icons"
cardSubtitle={
<P>
Handcrafted by our friends from{" "}
<A
href="https://design.google.com/icons/"
target="_blank"
rel="noopener noreferrer"
>
Google
</A>
</P>
}
content={
<div>
<Hidden only={["sm", "xs"]}>
<iframe
className={props.classes.iframe}
src="https://material.io/icons/"
title="Icons iframe"
>
<p>Your browser does not support iframes.</p>
</iframe>
</Hidden>
<Hidden only={["lg", "md"]}>
<ItemGrid xs={12} sm={12} md={6}>
<h5>
The icons are visible on Desktop mode inside an iframe.
Since the iframe is not working on Mobile and Tablets please
visit the icons on their original page on Google. Check the
<a
href="https://design.google.com/icons/"
target="_blank"
rel="noopener noreferrer"
>
Material Icons
</a>
</h5>
</ItemGrid>
</Hidden>
</div>
}
/>
</ItemGrid>
</Grid>
);
}
Example #7
| Source File: verify.jsx From apps with GNU Affero General Public License v3.0 | 5 votes |
|
Verify = withSettings(
withActions(({ settings, contactData, contactDataAction }) => {
const [initialized, setInitialized] = useState(false);
useEffect(() => {
if (initialized) return;
contactDataAction();
setInitialized(true);
});
const render = () => (
<React.Fragment>
<CardContent>
<p className="kip-verify-notice">
<T
t={t}
k="verify.text"
link={
<A
key="letUsKnow"
external
href={settings.get('supportEmail')}
>
<T
t={t}
k="wizard.letUsKnow"
key="letUsKnow"
/>
</A>
}
/>
</p>
<div className="kip-contact-data-box">
<ul>
<li>
<span>
<T t={t} k="contact-data.email.label" />
</span>{' '}
{contactData.data.email || (
<T t={t} k="contact-data.not-given" />
)}
</li>
</ul>
</div>
<div className="kip-contact-data-links">
<A
className="bulma-button bulma-is-small"
href="/user/setup/enter-contact-data"
>
<T t={t} k="contact-data.change" />
</A>
</div>
</CardContent>
<CardFooter>
<Button type="success" href={`/user/setup/finalize`}>
<T t={t} k="wizard.continue" />
</Button>
</CardFooter>
</React.Fragment>
);
return <WithLoader resources={[contactData]} renderLoaded={render} />;
}, [])
)
Example #8
| Source File: Notifications.jsx From crypto-manager with MIT License | 4 votes |
|
render() {
return (
<RegularCard
cardTitle="Notifications"
cardSubtitle={
<P>
Handcrafted by our friends from{" "}
<A target="_blank" href="https://material-ui-next.com/">
Material UI
</A>{" "}
and styled by{" "}
<A target="_blank" href="https://www.creative-tim.com/">
Creative Tim
</A>. Please checkout the{" "}
<A href="#pablo" target="_blank">
full documentation
</A>.
</P>
}
content={
<div>
<Grid container>
<ItemGrid xs={12} sm={12} md={6}>
<h5>Notifications Style</h5>
<br />
<SnackbarContent message={"This is a plain notification"} />
<br />
<SnackbarContent
message={"This is a notification with close button."}
close
/>
<br />
<SnackbarContent
message={"This is a notification with close button and icon."}
close
icon={AddAlert}
/>
<br />
<SnackbarContent
message={
"This is a notification with close button and icon and have many lines. You can see that the icon and the close button are always vertically aligned. This is a beautiful notification. So you don't have to worry about the style."
}
close
icon={AddAlert}
/>
<br />
</ItemGrid>
<ItemGrid xs={12} sm={12} md={6}>
<h5>Notifications States</h5>
<br />
<SnackbarContent
message={
'INFO - This is a regular notification made with color="info"'
}
close
color="info"
/>
<br />
<SnackbarContent
message={
'SUCCESS - This is a regular notification made with color="success"'
}
close
color="success"
/>
<br />
<SnackbarContent
message={
'WARNING - This is a regular notification made with color="warning"'
}
close
color="warning"
/>
<br />
<SnackbarContent
message={
'DANGER - This is a regular notification made with color="danger"'
}
close
color="danger"
/>
<br />
<SnackbarContent
message={
'PRIMARY - This is a regular notification made with color="primary"'
}
close
color="primary"
/>
<br />
</ItemGrid>
</Grid>
<br />
<br />
<Grid container justify="center">
<ItemGrid xs={12} sm={12} md={6} style={{ textAlign: "center" }}>
<h5>
Notifications Places
<Small>Click to view notifications</Small>
</h5>
</ItemGrid>
</Grid>
<Grid container justify="center">
<ItemGrid xs={12} sm={12} md={10} lg={8}>
<Grid container>
<ItemGrid xs={12} sm={12} md={4}>
<Button
fullWidth
color="primary"
onClick={() => this.showNotification("tl")}
>
Top Left
</Button>
<Snackbar
place="tl"
color="info"
icon={AddAlert}
message="Welcome to MATERIAL DASHBOARD React - a beautiful freebie for every web developer."
open={this.state.tl}
closeNotification={() => this.setState({ tl: false })}
close
/>
</ItemGrid>
<ItemGrid xs={12} sm={12} md={4}>
<Button
fullWidth
color="primary"
onClick={() => this.showNotification("tc")}
>
Top Center
</Button>
<Snackbar
place="tc"
color="info"
icon={AddAlert}
message="Welcome to MATERIAL DASHBOARD React - a beautiful freebie for every web developer."
open={this.state.tc}
closeNotification={() => this.setState({ tc: false })}
close
/>
</ItemGrid>
<ItemGrid xs={12} sm={12} md={4}>
<Button
fullWidth
color="primary"
onClick={() => this.showNotification("tr")}
>
Top Right
</Button>
<Snackbar
place="tr"
color="info"
icon={AddAlert}
message="Welcome to MATERIAL DASHBOARD React - a beautiful freebie for every web developer."
open={this.state.tr}
closeNotification={() => this.setState({ tr: false })}
close
/>
</ItemGrid>
</Grid>
</ItemGrid>
</Grid>
<Grid container justify={"center"}>
<ItemGrid xs={12} sm={12} md={10} lg={8}>
<Grid container>
<ItemGrid xs={12} sm={12} md={4}>
<Button
fullWidth
color="primary"
onClick={() => this.showNotification("bl")}
>
Bottom Left
</Button>
<Snackbar
place="bl"
color="info"
icon={AddAlert}
message="Welcome to MATERIAL DASHBOARD React - a beautiful freebie for every web developer."
open={this.state.bl}
closeNotification={() => this.setState({ bl: false })}
close
/>
</ItemGrid>
<ItemGrid xs={12} sm={12} md={4}>
<Button
fullWidth
color="primary"
onClick={() => this.showNotification("bc")}
>
Bottom Center
</Button>
<Snackbar
place="bc"
color="info"
icon={AddAlert}
message="Welcome to MATERIAL DASHBOARD React - a beautiful freebie for every web developer."
open={this.state.bc}
closeNotification={() => this.setState({ bc: false })}
close
/>
</ItemGrid>
<ItemGrid xs={12} sm={12} md={4}>
<Button
fullWidth
color="primary"
onClick={() => this.showNotification("br")}
>
Bottom Right
</Button>
<Snackbar
place="br"
color="info"
icon={AddAlert}
message="Welcome to MATERIAL DASHBOARD React - a beautiful freebie for every web developer."
open={this.state.br}
closeNotification={() => this.setState({ br: false })}
close
/>
</ItemGrid>
</Grid>
</ItemGrid>
</Grid>
</div>
}
/>
);
}
Example #9
| Source File: verify.jsx From apps with GNU Affero General Public License v3.0 | 4 votes |
|
ProviderData = ({ changeHref, verified }) => {
const provider = useProvider({ name: 'main', attributes: ['data'] });
let data;
if (verified) {
if (provider.data === null)
return (
<p>
<T t={t} k="provider-data.not-verified-yet" />
</p>
);
data = provider.verifiedData;
} else data = provider.data;
return (
<>
<div
className={classNames('kip-provider-data', 'kip-is-box', {
'kip-is-verified': verified,
})}
>
<ul>
<li>
<span>
<T t={t} k="provider-data.name" />
</span>{' '}
{data.name}
</li>
<li>
<span>
<T t={t} k="provider-data.street" />
</span>{' '}
{data.street}
</li>
<li>
<span>
<T t={t} k="provider-data.zip-code" /> &
<T t={t} k="provider-data.city" />
</span>{' '}
{data.zipCode} -
{data.city}
</li>
<li>
<span>
<T t={t} k="provider-data.website" />
</span>{' '}
{data.website}
</li>
<li>
<span>
<T t={t} k="provider-data.description" />
</span>{' '}
{data.description || (
<T t={t} k="provider-data.not-given" />
)}
</li>
<li>
<span>
<T t={t} k="provider-data.phone" />
</span>{' '}
{data.phone || <T t={t} k="provider-data.not-given" />}
</li>
<li>
<span>
<T t={t} k="provider-data.email" />
</span>{' '}
{data.email || <T t={t} k="provider-data.not-given" />}
</li>
<li>
<span>
<T t={t} k="provider-data.access-code.label" />
</span>{' '}
{data.code || <T t={t} k="provider-data.not-given" />}
</li>
</ul>
<hr />
<ul className="kip-properties">
<li className="kip-property">
<Switch
id="accessible"
checked={data.accessible || false}
onChange={() => false}
>
</Switch>
<label htmlFor="accessible">
<T t={t} k="provider-data.accessible" />
</label>
</li>
</ul>
</div>
<div className="kip-provider-data-links">
<A
className="bulma-button bulma-is-small"
href={changeHref || '/provider/setup/enter-provider-data'}
>
<T t={t} k="provider-data.change" />
</A>
</div>
</>
);
}
Example #10
| Source File: verify.jsx From apps with GNU Affero General Public License v3.0 | 4 votes |
|
Verify = () => {
const router = useRouter();
const settings = useSettings();
const provider = useProvider();
const [submitting, setSubmitting] = useState(false);
const [response, setResponse] = useState(null);
const submit = async () => {
if (submitting) return;
setSubmitting(true);
const response = await provider.storeData();
setSubmitting(false);
setResponse(response);
if (response.status === Status.Succeeded)
router.navigateToUrl('/provider/setup/store-secrets');
};
let failedMessage;
let failed;
if (response && response.status === Status.Failed) {
console.log(response);
failed = true;
if (
response.error.error !== undefined &&
response.error.error.code === 401
) {
failedMessage = (
<Message type="danger">
<T t={t} k="wizard.failed.invalid-code" />
</Message>
);
}
}
if (failed && !failedMessage)
failedMessage = (
<Message type="danger">
<T t={t} k="wizard.failed.notice" />
</Message>
);
return (
<>
<CardContent>
{failedMessage}
<p className="kip-verify-notice">
<T
t={t}
k="verify.text"
link={
<A
key="letUsKnow"
external
href={settings.get('supportEmail')}
>
<T t={t} k="wizard.letUsKnow" key="letUsKnow" />
</A>
}
/>
</p>
<ProviderData />
</CardContent>
<CardFooter>
<Button
type={failed ? 'danger' : 'success'}
disabled={submitting}
onClick={submit}
>
<T
t={t}
k={
failed
? 'wizard.failed.title'
: submitting
? 'wizard.please-wait'
: 'wizard.continue'
}
/>
</Button>
</CardFooter>
</>
);
}
Example #11
| Source File: store-secrets.jsx From apps with GNU Affero General Public License v3.0 | 4 votes |
|
StoreOnline = ({ secret, embedded, hideNotice }) => {
const [bookmarkModal, setBookmarkModal] = useState(false);
const [copyModal, setCopyModal] = useState(false);
const settings = useSettings();
const user = useUser();
let modal;
const showBookmarkModal = () => {
history.pushState(
{},
settings.t(t, 'store-secrets.restore.title'),
`/user/restore#${user.secret}`
);
setBookmarkModal(true);
};
const hideBookmarkModal = () => {
history.back();
setBookmarkModal(false);
};
if (bookmarkModal)
modal = (
<Modal
title={<T t={t} k="store-secrets.bookmark-modal.title" />}
onClose={hideBookmarkModal}
>
<T t={t} k="store-secrets.bookmark-modal.text" />
</Modal>
);
const chunks = user.secret.match(/.{1,4}/g);
const fragments = [];
for (let i = 0; i < chunks.length; i++) {
fragments.push(<F key={`${i}-main`}>{chunks[i]}</F>);
if (i < chunks.length - 1)
fragments.push(
<strong key={`${i}-dot`} style={{ userSelect: 'none' }}>
ยท
</strong>
);
}
return (
<F>
{modal}
{!embedded && (
<p className="kip-secrets-notice">
<T t={t} k="store-secrets.online.text" safe />
</p>
)}
<div
className={
'kip-secrets-box' + (embedded ? ' kip-is-embedded' : '')
}
>
{
<F>
<div className="kip-uid">
{!hideNotice && (
<span>
<T t={t} k="store-secrets.secret" />
</span>
)}
<code>{fragments}</code>
</div>
</F>
}
</div>
{!embedded && (
<div className="kip-secrets-links">
<A
className="bulma-button bulma-is-small"
onClick={showBookmarkModal}
>
<T t={t} k="store-secrets.bookmark" />
</A>
</div>
)}
</F>
);
}
