components#Button JavaScript Examples
The following examples show how to use
components#Button.
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: app.jsx From apps with GNU Affero General Public License v3.0 | 6 votes |
|
render() {
const { settings, route, router, user } = this.props;
const { outdated } = this.state;
const RouteComponent = route.handler.component;
let notice;
if (outdated) {
notice = (
<Message className="kip-outdated-notice" type="warning">
<p>
<T t={t} k="outdated" />
</p>
<Button type="info" onClick={() => location.reload()}>
<T t={t} k="reload" />
</Button>
</Message>
);
}
let content;
if (route.handler.isSimple)
content = this.renderSimple(RouteComponent, route.handler.props);
else content = this.renderFull(RouteComponent, route.handler.props);
return (
<Fragment>
{notice}
{content}
</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: appointments.jsx From apps with GNU Affero General Public License v3.0 | 6 votes |
|
InvitationDeleted = ({}) => {
return (
<F>
<Message type="danger">
<T t={t} k="invitation-accepted.deleted" />
</Message>
<CardFooter>
<Button
type="warning"
onClick={() =>
confirmDeletionAction().then(acceptedInvitationAction)
}
>
<T t={t} k="invitation-accepted.confirm-deletion" />
</Button>
</CardFooter>
</F>
);
}
Example #4
| 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 #5
| 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 #6
| Source File: store-secrets.jsx From apps with GNU Affero General Public License v3.0 | 5 votes |
|
DataSecret = withSettings(
({ settings, secret, embedded, hideNotice }) => {
const [succeeded, setSucceeded] = useState(false);
const [failed, setFailed] = useState(false);
const chunks = 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>
);
}
const copy = () => {
if (!copyToClipboard(secret)) setFailed(true);
else setSucceeded(true);
};
return (
<React.Fragment>
{!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' : '')
}
>
{
<React.Fragment>
<div className="kip-uid">
{!hideNotice && (
<span>
<T t={t} k="store-secrets.secret" />
</span>
)}
<code>{fragments}</code>
</div>
</React.Fragment>
}
</div>
{!embedded && (
<div className="kip-secrets-links">
<Button
type={
failed ? 'danger' : succeeded ? '' : 'primary'
}
disabled={failed}
className="bulma-button bulma-is-small"
onClick={copy}
>
<T
t={t}
k={
failed
? 'store-secrets.copy-failed'
: succeeded
? 'store-secrets.copy-succeeded'
: 'store-secrets.copy'
}
/>
</Button>
</div>
)}
</React.Fragment>
);
}
)
Example #7
| Source File: index.js From gatsby-shopify-course with BSD Zero Clause License | 4 votes |
|
export default function ProductTemplate(props) {
const { getProductById } = React.useContext(CartContext);
const [product, setProduct] = React.useState(null);
const [selectedVariant, setSelectedVariant] = React.useState(null);
const { search, origin, pathname } = useLocation();
const variantId = queryString.parse(search).variant;
React.useEffect(() => {
getProductById(props.data.shopifyProduct.shopifyId).then(result => {
setProduct(result);
setSelectedVariant(
result.variants.find(({ id }) => id === variantId) || result.variants[0]
);
});
}, [
getProductById,
setProduct,
props.data.shopifyProduct.shopifyId,
variantId,
]);
const handleVariantChange = e => {
const newVariant = product?.variants.find(v => v.id === e.target.value);
setSelectedVariant(newVariant);
navigate(
`${origin}${pathname}?variant=${encodeURIComponent(newVariant.id)}`,
{
replace: true,
}
);
};
return (
<Layout>
<SEO
description={props.data.shopifyProduct.description}
title={props.data.shopifyProduct.title}
/>
<Button onClick={() => navigate(-1)}>Back to products</Button>
<Grid>
<div>
<h1>{props.data.shopifyProduct.title}</h1>
<p>{props.data.shopifyProduct.description}</p>
{product?.availableForSale && !!selectedVariant && (
<>
{product?.variants.length > 1 && (
<SelectWrapper>
<strong>Variant</strong>
<select
value={selectedVariant.id}
onChange={handleVariantChange}
>
{product?.variants.map(v => (
<option key={v.id} value={v.id}>
{v.title}
</option>
))}
</select>
</SelectWrapper>
)}
{!!selectedVariant && (
<>
<Price>£{selectedVariant.price}</Price>
<ProductQuantityAdder
available={selectedVariant.available}
variantId={selectedVariant.id}
/>
</>
)}
</>
)}
</div>
<div>
<ImageGallery
selectedVariantImageId={selectedVariant?.image.id}
images={props.data.shopifyProduct.images}
/>
</div>
</Grid>
</Layout>
);
}
Example #8
| Source File: OrderPopup.jsx From crypto-manager with MIT License | 4 votes |
|
render() {
var tick = this.props.tick;
return (
<div>
<div className='popup_inner'>
<div className="navbar" style={{backgroundColor: this.state.checked ? "#f44336" : "#5146b9"}}>
<span className="type">{!this.state.checked ? 'Buy' : 'Sell'}</span>
<span className="crypto">{tick}</span>
<Switch
className='react-switch'
onChange={this.handleChange}
checked={this.state.checked}
handleDiameter = {20}
offColor="#6666ff"
onColor="#ff6966"
width={75}
checkedIcon={
<div style={textSwitch}>Buy</div>
}
uncheckedIcon={
<div style={textSwitch}>Sell</div>
}
/>
</div>
{!this.state.checked ?
<form id="buyForm" >
<span className="tag">Quantity :</span><input className="input-number buynumber" id="qtyb" type="number" min="1" step="1" defaultValue="1" required/>
<div className="input-radio">
<span className="marketb order">MARKET</span><input className="buyradio" type="radio" id="MARKETb" name="order" value="marketb" onClick={this.handleRadio} required/>
{/* <label className="marketb order" for="MARKETb">MARKET</label> */}
<span className="limitb order">LIMIT</span><input className="buyradio" type="radio" id="LIMITb" name="order" value="limitb" onClick={this.handleRadio}/>
{/* <label className="limitb order" for="LIMITb">LIMIT</label> */}
<span className="slb order">SL</span><input className="buyradio" type="radio" id="SLb" name="order" value="slb" onClick={this.handleRadio}/>
{/* <label className="slb order" for="SLb">SL</label> */}
<span className="slmb order">SL-M</span><input className="buyradio" type="radio" id="SL-Mb" name="order" value="slmb" onClick={this.handleRadio}/>
{/* <label className="slmb order" for="SL-Mb">SL-M</label> */}
</div>
<div className="pricing">
<span className=" tag">Price :</span><input className="input-number buynumber priceb" id="pricebuy" type="number" min="0" step="1" defaultValue="0" required/>
<span className=" tag">Trigger Price :</span><input className="input-number buynumber triggerpriceb" id="triggerbuy" type="number" min="0" step="1" defaultValue="0" required/>
<span className=" tag">Target Price :</span><input className="input-number buynumber targetpriceb" id="targetbuy" type="number" min="0" step="1" defaultValue="0" required/>
</div>
<div className="validity">
<span className="dayb order">DAY</span><input className="buyradio" type="radio" id="DAYb" name="validity" value="dayb" onClick={this.handleRadio2} required/>
{/* <label className="dayb order" for="DAYb">DAY</label> */}
<span className="iocb order">IOC</span><input className="buyradio" type="radio" id="IOCb" name="validity" value="iocb" onClick={this.handleRadio2}/>
{/* <label className="iocb order" for="IOCb">IOC</label> */}
</div>
<div className="footer">
<Button onClick={this.handleOrder} type="submit" form="buyForm" id="buyBtn">Buy</Button>
<Button onClick={this.props.callback} id="clsBtn">close</Button>
</div>
</form>
:
<form id="sellForm" >
<span className=" tag">Quantity :</span><input className="input-number sellnumber" id="qtys"type="number" min="1" step="1" defaultValue="1" required/>
<div className="input-radio">
<span className="markets order">MARKET</span><input className="sellradio" type="radio" id="MARKETs" name="order" value="markets" onClick={this.handleRadio3} required/>
{/* <label className="markets order" for="MARKETs">MARKET</label> */}
<span className="limits order"></span>LIMIT<input className="sellradio" type="radio" id="LIMITs" name="order" value="limits" onClick={this.handleRadio3}/>
{/* <label className="limits order" for="LIMITs">LIMIT</label> */}
<span className="sls order">SL</span><input className="sellradio" type="radio" id="SLs" name="order" value="sls" onClick={this.handleRadio3}/>
{/* <label className="sls order" for="SLs">SL</label> */}
<span className="slms order">SL-M</span><input className="sellradio" type="radio" id="SL-Ms" name="order" value="slms" onClick={this.handleRadio3}/>
{/* <label className="slms order" for="SL-Ms">SL-M</label> */}
</div>
<div className="pricing">
<span className=" tag">Price :</span><input className="input-number sellnumber prices" id="pricesell" type="number" min="0" step="1" defaultValue="0" required/>
<span className=" tag">Trigger Price :</span><input className="input-number sellnumber triggerprices" type="number" min="0" step="1" defaultValue="0" required/>
<span className=" tag">Target Price :</span><input className="input-number sellnumber targetprices" type="number" min="0" step="1" defaultValue="0" required/>
</div>
<div className="validity">
<span className="days order">DAY</span><input className="sellradio" type="radio" id="DAYs" name="validity" value="days" onClick={this.handleRadio4} required/>
{/* <label className="days order" for="DAYs">DAY</label> */}
<span className="iocs order">IOC</span><input className="sellradio" type="radio" id="IOCs" name="validity" value="iocs" onClick={this.handleRadio4}/>
{/* <label className="iocs order" for="IOCs">IOC</label> */}
</div>
<div className="footer">
<Button onClick={this.handleOrder} type="submit" form="sellForm" color="danger" id="sellBtn">Sell</Button>
<Button onClick={this.props.callback} id="clsBtn" >close</Button>
</div>
</form>
}
</div>
<div className="popup"></div>
</div>
);
}
Example #9
| Source File: finalize.jsx From apps with GNU Affero General Public License v3.0 | 4 votes |
|
Finalize = withForm(
withSettings(
withRouter(
({
settings,
router,
form: { set, data, error, valid, reset },
}) => {
const [initialized, setInitialized] = useState(false);
const [modified, setModified] = useState(false);
const [submitting, setSubmitting] = useState(false);
const [tv, setTV] = useState(0);
const user = useUser();
useEffect(async () => {
if (initialized) return;
setInitialized(true);
await user.initialize();
const initialData = {
distance: 5,
};
for (const [k, v] of Object.entries(
t['contact-data'].properties
)) {
for (const [kv, vv] of Object.entries(v.values)) {
initialData[kv] = vv._default;
}
}
reset(user.queueData || initialData);
});
const submit = async () => {
setSubmitting(true);
// we store the queue data
user.queueData = data;
const result = await user.getToken({});
setSubmitting(false);
if (result.status === Status.Failed) return;
await user.backupData();
router.navigateToUrl('/user/setup/store-secrets');
};
const setAndMarkModified = (key, value) => {
setModified(true);
set(key, value);
};
const properties = Object.entries(
t['contact-data'].properties
).map(([k, v]) => {
const items = Object.entries(v.values).map(([kv, vv]) => (
<li key={kv}>
<Switch
id={kv}
checked={data[kv] || false}
onChange={(value) =>
setAndMarkModified(kv, value)
}
>
</Switch>
<label htmlFor={kv}>
<T
t={t}
k={`contact-data.properties.${k}.values.${kv}`}
/>
</label>
</li>
));
return (
<F key={k}>
<h2>
<T
t={t}
k={`contact-data.properties.${k}.title`}
/>
</h2>
<ul className="kip-properties">{items}</ul>
</F>
);
});
const render = () => {
let failedMessage;
let failed;
if (
getToken !== undefined &&
getToken.status === 'failed'
) {
failed = true;
if (getToken.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 (
<React.Fragment>
<CardContent>
{failedMessage}
<div className="kip-finalize-fields">
<ErrorFor error={error} field="zipCode" />
<RetractingLabelInput
value={data.zipCode || ''}
onChange={(value) =>
setAndMarkModified('zipCode', value)
}
label={
<T
t={t}
k="contact-data.zip-code"
/>
}
/>
<label
className="kip-control-label"
htmlFor="distance"
>
<T
t={t}
k="contact-data.distance.label"
/>
<span className="kip-control-notice">
<T
t={t}
k="contact-data.distance.notice"
/>
</span>
</label>
<ErrorFor error={error} field="distance" />
<RichSelect
id="distance"
value={data.distance || 5}
onChange={(value) =>
setAndMarkModified(
'distance',
value.value
)
}
options={[
{
value: 5,
description: (
<T
t={t}
k="contact-data.distance.option"
distance={5}
/>
),
},
{
value: 10,
description: (
<T
t={t}
k="contact-data.distance.option"
distance={10}
/>
),
},
{
value: 20,
description: (
<T
t={t}
k="contact-data.distance.option"
distance={20}
/>
),
},
{
value: 30,
description: (
<T
t={t}
k="contact-data.distance.option"
distance={30}
/>
),
},
{
value: 40,
description: (
<T
t={t}
k="contact-data.distance.option"
distance={40}
/>
),
},
{
value: 50,
description: (
<T
t={t}
k="contact-data.distance.option"
distance={50}
/>
),
},
]}
/>
{properties}
</div>
</CardContent>
<CardFooter>
<Button
waiting={submitting}
type={failed ? 'danger' : 'success'}
onClick={submit}
disabled={submitting || !valid}
>
<T
t={t}
k={
failed
? 'wizard.failed.title'
: submitting
? 'wizard.please-wait'
: 'wizard.continue'
}
/>
</Button>
</CardFooter>
</React.Fragment>
);
};
return <WithLoader resources={[]} renderLoaded={render} />;
}
)
),
FinalizeForm,
'form'
)
Example #10
| Source File: settings.jsx From apps with GNU Affero General Public License v3.0 | 4 votes |
|
Settings = withActions(
withSettings(
withRouter(
({ settings, action, router, userSecret, backupDataAction }) => {
const [loggingOut, setLoggingOut] = useState(false);
let logOutModal;
const cancel = () => {
router.navigateToUrl('/user/settings');
};
const logOut = () => {
setLoggingOut(true);
const backend = settings.get('backend');
// we perform a backup before logging the user out...
backupDataAction(userSecret.data, 'logout').then(() => {
backend.local.deleteAll('user::');
setLoggingOut(false);
router.navigateToUrl('/user/logged-out');
});
};
if (action === 'logout') {
logOutModal = (
<Modal
onClose={cancel}
save={<T t={t} k="log-out" />}
disabled={loggingOut}
waiting={loggingOut}
title={<T t={t} k="log-out-modal.title" />}
onCancel={cancel}
onSave={logOut}
saveType="warning"
>
<p>
<T
t={t}
k={
loggingOut
? 'log-out-modal.logging-out'
: 'log-out-modal.text'
}
/>
</p>
<hr />
{userSecret !== undefined && (
<StoreOnline
secret={userSecret.data}
embedded={true}
hideNotice={true}
/>
)}
</Modal>
);
}
return (
<F>
<CardContent>
<div className="kip-user-settings">
{logOutModal}
<h2>
<T t={t} k="user-data.title" />
</h2>
<p>
<T t={t} k="user-data.notice" />
</p>
</div>
</CardContent>
<CardFooter>
<div className="kip-buttons">
<Button
type="warning"
href="/user/settings/logout"
>
<T t={t} k="log-out" />
</Button>
</div>
</CardFooter>
</F>
);
}
)
),
[]
)
Example #11
| Source File: appointments.jsx From apps with GNU Affero General Public License v3.0 | 4 votes |
|
InvitationDetails = ({}) => {
const settings = useSettings();
const [confirming, setConfirming] = useState(false);
const [initialized, setInitialized] = useState(false);
useEffect(() => {
if (initialized) return;
setInitialized(true);
toggleOffersAction(null);
});
const toggle = (offer) => {
toggleOffersAction(offer, data.offers);
};
const doConfirmOffers = () => {
const selectedOffers = [];
// we add the selected offers in the order the user chose
for (const offerID of toggleOffers.data) {
const offer = data.offers.find((offer) => offer.id === offerID);
selectedOffers.push(offer);
}
setConfirming(true);
const p = confirmOffersAction(selectedOffers, data, tokenData.data);
p.then(() => {
acceptedInvitationAction();
});
p.finally(() => {
setConfirming(false);
toggleOffersAction(null);
});
};
let content;
const properties = settings.get('appointmentProperties');
// to do: use something better than the index i for the key?
const offers = data.offers
.filter((offer) => offer.slotData.some((sl) => sl.open))
.filter((a) => new Date(a.timestamp) > new Date())
.sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp))
.map((offer, i) => {
const d = new Date(offer.timestamp);
const selected = toggleOffers.data.includes(offer.id);
let pref;
if (selected) pref = toggleOffers.data.indexOf(offer.id) + 1;
return (
<tr
key={offer.id}
className={classNames(`kip-pref-${pref}`, {
'kip-selected': selected,
'kip-failed': false,
})}
onClick={() => toggle(offer)}
>
<td>{selected ? pref : '-'}</td>
<td>
{d.toLocaleString('de-DE', {
month: '2-digit',
day: '2-digit',
year: '2-digit',
hour: '2-digit',
minute: '2-digit',
})}
</td>
<td>{formatDuration(offer.duration, settings, t)}</td>
<td>
<PropertyTags appointment={offer} />
</td>
</tr>
);
});
let offerDetails;
if (offers.length === 0)
offerDetails = (
<Message type="warning">
<T t={t} k="no-offers-anymore" />
</Message>
);
else
offerDetails = (
<table className="bulma-table bulma-is-striped bulma-is-fullwidth">
<thead>
<tr>
<th>
<T t={t} k="appointment-preference" />
</th>
<th>
<T t={t} k="appointment-date" />
</th>
<th>
<T t={t} k="appointment-duration" />
</th>
<th>
<T t={t} k="appointment-vaccine" />
</th>
</tr>
</thead>
<tbody>{offers}</tbody>
</table>
);
return (
<F>
<CardContent>
<div className="kip-invitation-details">
<ProviderDetails data={data.provider} />
<p>
<T t={t} k="appointments-notice" />
</p>
{offerDetails}
</div>
</CardContent>
<CardFooter>
<Button
waiting={confirming}
onClick={doConfirmOffers}
disabled={
confirming ||
Object.keys(
toggleOffers.data.filter((id) =>
data.offers.find((of) => of.id === id)
)
).length === 0
}
type="success"
>
<T t={t} k="confirm-appointment" />
</Button>
</CardFooter>
</F>
);
}
Example #12
| Source File: accepted-appointment.jsx From apps with GNU Affero General Public License v3.0 | 4 votes |
|
AcceptedInvitation = () => {
const [showDelete, setShowDelete] = useState(false);
const doDelete = () => {
setShowDelete(false);
cancelInvitationAction(acceptedInvitation.data, tokenData.data).then(
() => {
// we reload the appointments
invitationAction();
acceptedInvitationAction();
}
);
};
const {
offer,
invitation: invitationData,
slotData,
} = acceptedInvitation.data;
const currentOffer = offers.find((of) => of.id == offer.id);
let currentSlotData;
if (currentOffer !== undefined)
currentSlotData = currentOffer.slotData.find(
(sl) => sl.id === slotData.id
);
let notice;
let changed = false;
for (const [k, v] of Object.entries(currentOffer)) {
if (
k === 'open' ||
k === 'slotData' ||
k === 'properties' ||
k === 'slots'
)
continue;
if (offer[k] !== v) {
changed = true;
break;
}
}
if (changed)
notice = (
<F>
<Message type="danger">
<T t={t} k="invitation-accepted.changed" />
</Message>
</F>
);
const d = new Date(currentOffer.timestamp);
let modal;
if (showDelete)
return (
<Modal
onSave={doDelete}
onClose={() => setShowDelete(false)}
onCancel={() => setShowDelete(false)}
saveType="danger"
save={<T t={t} k="invitation-accepted.delete.confirm" />}
cancel={<T t={t} k="invitation-accepted.delete.cancel" />}
title={<T t={t} k="invitation-accepted.delete.title" />}
className="kip-appointment-overview"
>
<p>
<T t={t} k="invitation-accepted.delete.notice" />
</p>
</Modal>
);
return (
<F>
<CardContent>
{notice}
<div className="kip-accepted-invitation">
<h2>
<T t={t} k="invitation-accepted.title" />
</h2>
<ProviderDetails data={invitationData.provider} />
<OfferDetails offer={currentOffer} />
<p className="kip-appointment-date">
{d.toLocaleDateString()} ·{' '}
<u>{d.toLocaleTimeString()}</u>
</p>
<p className="kip-booking-code">
<span>
<T t={t} k={'invitation-accepted.booking-code'} />
</span>
{userSecret.data.slice(0, 4)}
</p>
</div>
</CardContent>
<CardFooter>
<Button type="warning" onClick={() => setShowDelete(true)}>
<T t={t} k="cancel-appointment" />
</Button>
</CardFooter>
</F>
);
}
Example #13
| 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 #14
| Source File: week-calendar.jsx From apps with GNU Affero General Public License v3.0 | 4 votes |
|
WeekCalendar = ({
action,
secondaryAction,
id,
startDate,
appointments,
}) => {
let fromHour;
let toHour;
const router = useRouter();
const endDate = new Date(startDate);
endDate.setDate(endDate.getDate() + 7);
appointments.forEach((app) => {
const appStartDate = new Date(app.timestamp);
const appEndDate = new Date(
new Date(app.timestamp).getTime() + 1000 * 60 * app.duration
);
if (
appStartDate < startDate ||
appStartDate > endDate ||
app.slots === 0
)
return;
const startHours = appStartDate.getHours();
const endHours = appEndDate.getHours();
if (fromHour === undefined || startHours < fromHour)
fromHour = startHours;
if (toHour === undefined || endHours > toHour) toHour = endHours;
});
if (fromHour === undefined || fromHour > 8) fromHour = 8;
if (toHour === undefined || toHour < 19) toHour = 19; // hours are inclusive
const dayColumns = [
<DayLabelColumn
fromHour={fromHour}
toHour={toHour}
key="-"
appointments={appointments}
/>,
];
const date = new Date(startDate);
for (let i = 0; i < 7; i++) {
dayColumns.push(
<DayColumn
appointments={appointments}
secondaryAction={secondaryAction}
action={action}
id={id}
fromHour={fromHour}
toHour={toHour}
date={new Date(date)}
day={i}
key={i}
/>
);
date.setDate(date.getDate() + 1);
}
const goBackward = () => {
const newDate = formatDate(
getMonday(new Date(startDate.getTime() - 1000 * 60 * 60 * 24 * 7))
);
router.navigateToUrl(`/provider/schedule/${newDate}`);
};
const goForward = () => {
const newDate = formatDate(
getMonday(new Date(startDate.getTime() + 1000 * 60 * 60 * 24 * 7))
);
router.navigateToUrl(`/provider/schedule/${newDate}`);
};
return (
<>
<div className="kip-schedule-navigation">
<Button className="kip-backward" type="" onClick={goBackward}>
<T t={t} k="schedule.backward" />
</Button>
<Button className="kip-forward" type="" onClick={goForward}>
<T t={t} k="schedule.forward" />
</Button>
</div>
<div className="kip-week-calendar">{dayColumns}</div>
</>
);
}
Example #15
| Source File: settings.jsx From apps with GNU Affero General Public License v3.0 | 4 votes |
|
Settings = withActions(
withRouter(
withSettings(
({
action,
type,
settings,
keys,
keysAction,
keyPairs,
keyPairsAction,
providerSecret,
providerSecretAction,
backupData,
backupDataAction,
providerData,
providerDataAction,
verifiedProviderData,
verifiedProviderDataAction,
router,
}) => {
const [deleting, setDeleting] = useState(false);
const [loggingOut, setLoggingOut] = useState(false);
const [initialized, setInitialized] = useState(false);
const [view, setView] = useState('verified');
// we load all the resources we need
useEffect(() => {
if (initialized) return;
keysAction();
verifiedProviderDataAction();
providerDataAction();
setInitialized(true);
});
let modal;
const title = settings.get('title').toLowerCase();
const cancel = () => {
router.navigateToUrl('/provider/settings');
};
const deleteData = () => {
setDeleting(true);
const backend = settings.get('backend');
backend.local.deleteAll('provider::');
setDeleting(false);
router.navigateToUrl('/provider/deleted');
};
const logOut = () => {
setLoggingOut(true);
const kpa = keyPairsAction('logoutKeyPairs');
kpa.then((kp) => {
const psa = providerSecretAction(
undefined,
'logoutProviderSecret'
);
psa.then((ps) => {
// we give the backup data action a different name to avoid it being rejected
// in case there's already a backup in progress... It will still be queued
// up to ensure no conflicts can occur.
const ba = backupDataAction(
kp.data,
ps.data,
'logout'
);
ba.then(() => {
const backend = settings.get('backend');
backend.local.deleteAll('provider::');
router.navigateToUrl('/provider/logged-out');
});
ba.catch(() => setLoggingOut(false));
});
psa.catch(() => setLoggingOut(false));
});
kpa.catch(() => setLoggingOut(false));
};
if (action === 'backup') {
modal = (
<Modal
onClose={cancel}
save="Sicherungsdatei herunterladen"
title={<T t={t} k="backup-modal.title" />}
onCancel={cancel}
cancel={<T t={t} k="backup-modal.close" />}
saveType="success"
>
<p>
<T t={t} k="backup-modal.text" />
</p>
<hr />
<DataSecret
secret={providerSecret.data}
embedded={true}
hideNotice={true}
/>
<Button
style={{ marginRight: '1em' }}
type="success"
onClick={() =>
copyToClipboard(providerSecret.data)
}
>
Datenschlüssel kopieren
</Button>
<BackupDataLink
downloadText={
<T t={t} k="backup-modal.download-backup" />
}
onSuccess={cancel}
/>
</Modal>
);
} else if (action === 'delete') {
modal = (
<Modal
onClose={cancel}
save={<T t={t} k="delete" />}
disabled={deleting}
waiting={deleting}
title={<T t={t} k="delete-modal.title" />}
onCancel={cancel}
onSave={deleteData}
saveType="danger"
>
<p>
<T
t={t}
k={
deleting
? 'delete-modal.deleting-text'
: 'delete-modal.text'
}
/>
</p>
</Modal>
);
} else if (action === 'logout') {
modal = (
<Modal
onClose={cancel}
save={<T t={t} k="log-out" />}
disabled={loggingOut}
waiting={loggingOut}
title={<T t={t} k="log-out-modal.title" />}
onCancel={cancel}
onSave={logOut}
saveType="warning"
>
<p>
<T
t={t}
k={
loggingOut
? 'log-out-modal.logging-out'
: 'log-out-modal.text'
}
/>
</p>
<hr />
<DataSecret
secret={providerSecret.data}
embedded={true}
hideNotice={true}
/>
<Button
style={{ marginRight: '1em' }}
type="success"
onClick={() =>
copyToClipboard(providerSecret.data)
}
>
Datenschlüssel kopieren
</Button>
<BackupDataLink
downloadText={
<T t={t} k="backup-modal.download-backup" />
}
/>
</Modal>
);
}
const render = () => {
return (
<div className="kip-provider-settings">
{modal}
<CardContent>
<h2>
<T t={t} k="provider-data.title" />
</h2>
<p style={{ marginBottom: '1em' }}>
<T
t={t}
k="provider-data.verified-vs-unverifired-desc"
/>
</p>
<DropdownMenu
title={
<F>
<Icon icon="calendar" />{' '}
<T t={t} k={`settings.${view}`} />
</F>
}
>
<DropdownMenuItem
icon="calendar"
onClick={() => setView('verified')}
>
<T t={t} k={`settings.verified`} />
</DropdownMenuItem>
<DropdownMenuItem
icon="list"
onClick={() => setView('local')}
>
<T t={t} k={`settings.local`} />
</DropdownMenuItem>
</DropdownMenu>
<ProviderData
providerData={
view === 'verified'
? verifiedProviderData
: providerData
}
verified={view === 'verified'}
/>
</CardContent>
<CardFooter>
<div className="kip-buttons">
<Button
type="success"
href="/provider/settings/backup"
>
<T t={t} k="backup" />
</Button>
<Button
type="warning"
href="/provider/settings/logout"
>
<T t={t} k="log-out" />
</Button>
{false && (
<Button
type="danger"
href="/provider/settings/delete"
>
<T t={t} k="delete" />
</Button>
)}
</div>
</CardFooter>
</div>
);
};
// we wait until all resources have been loaded before we display the form
return (
<WithLoader
resources={[
keyPairs,
providerData,
verifiedProviderData,
]}
renderLoaded={render}
/>
);
}
)
),
[]
)
Example #16
| Source File: schedule.jsx From apps with GNU Affero General Public License v3.0 | 4 votes |
|
Schedule = ({ action, secondaryAction, id, route }) => {
const [view, setView] = useState('calendar');
const [lastUpdated, setLastUpdated] = useState(new Date().toLocaleString());
const provider = useProvider();
let startDate;
if (action !== undefined) {
const result = /^(\d{4})-(\d{2})-(\d{2})$/.exec(action);
if (result) {
const [, year, month, day] = result;
startDate = getMonday(
new Date(Number(year), Number(month) - 1, Number(day))
);
}
}
if (startDate === undefined)
startDate = getMonday(new Date().setHours(0, 0, 0, 0));
useEffectOnce(async () => {
const endDate = new Date(startDate);
endDate.setUTCDate(endDate.getUTCDate() + 7);
// we load all the necessary data
const response = await provider
.appointments()
.get({ from: startDate.toISOString(), to: endDate.toISOString() });
console.log(response);
});
if (action === undefined) {
action = formatDate(startDate);
}
const dateString = formatDate(startDate);
const render = () => {
let newAppointmentModal;
let content;
const appointments = provider.appointments().result().data;
switch (view) {
case 'calendar':
content = (
<WeekCalendar
startDate={startDate}
action={action}
secondaryAction={secondaryAction}
id={id}
appointments={appointments}
/>
);
break;
case 'booking-list':
content = (
<AppointmentsList
startDate={startDate}
id={id}
action={action}
secondaryAction={secondaryAction}
appointments={appointments}
/>
);
break;
}
if (secondaryAction === 'new' || secondaryAction === 'edit')
newAppointmentModal = (
<NewAppointment
route={route}
appointments={appointments}
action={action}
id={id}
/>
);
return (
<div className="kip-schedule">
<CardContent>
<div className="kip-non-printable">
{newAppointmentModal}
<Button href={`/provider/schedule/${dateString}/new`}>
<T t={t} k="schedule.appointment.add" />
</Button>
<DropdownMenu
title={
<>
<Icon icon="calendar" />{' '}
<T t={t} k={`schedule.${view}`} />
</>
}
>
<DropdownMenuItem
icon="calendar"
onClick={() => setView('calendar')}
>
<T t={t} k={`schedule.calendar`} />
</DropdownMenuItem>
<DropdownMenuItem
icon="list"
onClick={() => setView('booking-list')}
>
<T t={t} k={`schedule.booking-list`} />
</DropdownMenuItem>
</DropdownMenu>
<hr />
</div>
{content}
</CardContent>
<Message type="info" waiting>
<T t={t} k="schedule.updating" lastUpdated={lastUpdated} />
</Message>
</div>
);
};
// we wait until all resources have been loaded before we display the form
return (
<WithLoader
resources={[provider.appointments().result()]}
renderLoaded={render}
/>
);
}
Example #17
| Source File: settings.jsx From apps with GNU Affero General Public License v3.0 | 4 votes |
|
BaseSettings = ({
type,
settings,
keyPairs,
keyPairsAction,
action,
secondaryAction,
id,
router,
}) => {
let modal;
const [initialized, setInitialized] = useState(false);
const [loggingOut, setLoggingOut] = useState(false);
useEffect(() => {
if (initialized) return;
setInitialized(true);
keyPairsAction();
});
const cancel = () => {
router.navigateToUrl('/mediator/settings');
};
const logOut = () => {
setLoggingOut(true);
const backend = settings.get('backend');
backend.local.deleteAll('mediator::');
router.navigateToUrl('/mediator/logged-out');
};
if (action === 'test-queues') {
modal = <TestQueuesModal keyPairs={keyPairs} />;
} else if (action === 'logout') {
modal = (
<Modal
onClose={cancel}
save={<T t={t} k="log-out" />}
disabled={loggingOut}
waiting={loggingOut}
title={<T t={t} k="log-out-modal.title" />}
onCancel={cancel}
onSave={logOut}
saveType="warning"
>
<p>
<T
t={t}
k={
loggingOut
? 'log-out-modal.logging-out'
: 'log-out-modal.text'
}
/>
</p>
</Modal>
);
}
return (
<F>
{modal}
<CardContent>
<div className="kip-mediator-settings">
<h2>
<T t={t} k="test-queues.title" />
</h2>
<p>
<T t={t} k="test-queues.text" />
</p>
<div className="kip-buttons">
<Button
type="success"
href="/mediator/settings/test-queues"
>
<T t={t} k="test-queues.button" />
</Button>
</div>
</div>
</CardContent>
<CardFooter>
<div className="kip-buttons">
<Button type="warning" href="/mediator/settings/logout">
<T t={t} k="log-out" />
</Button>
</div>
</CardFooter>
</F>
);
}
Example #18
| Source File: UserProfile.jsx From crypto-manager with MIT License | 4 votes |
|
render() {
const { userID, email, first_name, last_name, aadharNo, panNo, mobileNo } = this.state;
const { classes } = this.props;
return (
<div>
<Grid container>
<ItemGrid xs={12} sm={12} md={12}>
<Card>
<CardHeader
classes={{
root: classes.cardHeader,
avatar: classes.cardAvatar
}}
avatar={<img src={avatar} alt="..." className={classes.img} />}
/>
<div className="local-bootstrap">
<div className="nameHeader">
<CardContent>
<Typography variant="h2" component="h2"> {first_name + " " + last_name} </Typography>
</CardContent>
</div>
<div className="profileDetails">
<CardContent>
<Typography variant="subtitle" component="h3"> Personal </Typography>
</CardContent>
<CardContent>
<Grid container>
<ItemGrid xs={12} sm={6} md={6}>
<div className="userDetails">
<Typography variant="h5" component="h5" style={{
color: '#A9A9A9'
}}> E-mail </Typography>
<Typography variant="h5" component="h5" style={{
marginLeft: 100
}}> {email} </Typography>
</div>
</ItemGrid>
<ItemGrid xs={12} sm={6} md={6}>
<div className="userDetails">
<Typography variant="h5" component="h5" style={{
color: '#A9A9A9'
}}> Aadhar Number </Typography>
<Typography variant="h5" component="h5" style={{
marginLeft: 100
}}> {"XXXX" + aadharNo.substr(aadharNo.length-4,aadharNo.length)} </Typography>
</div>
</ItemGrid>
</Grid>
<div className="secondRow">
<Grid container>
<ItemGrid xs={12} sm={6} md={6}>
<div className="userDetails">
<Typography variant="h5" component="h5" style={{
color: '#A9A9A9'
}}> Phone </Typography>
<Typography variant="h5" component="h5" style={{
marginLeft: 100
}}> {mobileNo} </Typography>
</div>
</ItemGrid>
<ItemGrid xs={12} sm={6} md={6}>
<div className="userDetails">
<Typography variant="h5" component="h5" style={{
color: '#A9A9A9'
}}> Pan Number </Typography>
<Typography variant="h5" component="h5" style={{
marginLeft: 130
}}> {"XXXX" + panNo.substr(panNo.length-4,panNo.length)} </Typography>
</div>
</ItemGrid>
</Grid>
</div>
</CardContent>
</div>
<div className="profileDetails">
<CardContent>
<Typography variant="subtitle" component="h3"> Account </Typography>
</CardContent>
<CardContent>
<Grid container>
<ItemGrid xs={12} sm={12} md={12}>
<div className="userDetails">
<Typography variant="h5" component="h5" style={{
color: '#A9A9A9'
}}> Products </Typography>
<Typography variant="h5" component="h5" style={{
marginLeft: 100
}}> CNC, NRML, MIS, BO, CO </Typography>
</div>
</ItemGrid>
</Grid>
<div className="secondRow">
<Grid container>
<ItemGrid xs={12} sm={12} md={12}>
<div className="userDetails">
<Typography variant="h5" component="h5" style={{
color: '#A9A9A9'
}}> Order Types </Typography>
<Typography variant="h5" component="h5" style={{
marginLeft: 70
}}> MARKET, LIMIT, SL, SL-M </Typography>
</div>
</ItemGrid>
</Grid>
</div>
</CardContent>
</div>
<div className="profileDetails">
<CardContent>
<Typography variant="subtitle" component="h3"> Bank Details </Typography>
</CardContent>
<CardContent>
<Grid container>
<ItemGrid xs={12} sm={12} md={12}>
<div className="userDetails">
<Typography variant="h5" component="h5" style={{
color: '#A9A9A9'
}}> Bank Accounts </Typography>
<Typography variant="h5" component="h5" style={{
marginLeft: 60
}}> *7000 </Typography>
</div>
</ItemGrid>
</Grid>
<div className="secondRow">
<Grid container>
<ItemGrid xs={12} sm={12} md={12}>
<div className="userDetails">
<Typography variant="h5" component="h5" style={{
color: '#A9A9A9'
}}> Bank </Typography>
<Typography variant="h5" component="h5" style={{
marginLeft: 150
}}> ICICI LTD </Typography>
</div>
</ItemGrid>
</Grid>
</div>
</CardContent>
</div>
</div>
<div className="signOutButton">
<Button color="primary" round onClick={this.handleButtonClick}
style={{
borderRadius: 5,
// backgroundColor: "#FF2400",
padding: "10px 25px",
fontSize: "18px"
}}>
Sign Out
</Button>
</div>
</Card>
</ItemGrid>
</Grid>
</div>
);
}
Example #19
| Source File: Transactions.jsx From crypto-manager with MIT License | 4 votes |
|
render() {
const { classes } = this.props;
return (
<div>
<div className="local-bootstrap">
<Grid container>
<ItemGrid xs={12} sm={12} md={12}>
<Card className="fundsMain">
<Grid container>
<ItemGrid xs={12} sm={4} >
<CardContent>
<Typography component="h6" variant="subtitle1" className={classes.marginTitle} align="center"> Margin Available </Typography>
<Typography component="h2" variant="h1" className={classes.marginColor} align="center">$ 5000.50 </Typography>
</CardContent>
</ItemGrid>
<ItemGrid xs={12} sm={4} >
<CardContent>
<Typography component="h6" variant="subtitle1" className={classes.marginTitle} align="center"> Margin Used </Typography>
<Typography component="h2" variant="h1" className={classes.marginColor} align="center">$ 0.0 </Typography>
</CardContent>
</ItemGrid>
<ItemGrid xs={12} sm={4} >
<CardContent>
<Typography component="h6" variant="subtitle1" className={classes.marginTitle} align="center"> Opening Balance </Typography>
<Typography component="h2" variant="h1" className={classes.marginColor} align="center">$ 5000.50 </Typography>
</CardContent>
</ItemGrid>
</Grid>
<CardContent>
<div className="addWithdrawButtons">
<div className="addFunds">
<Button
variant="contained"
style={{
borderRadius: 5,
backgroundColor: "#0080FF",
padding: "15px 30px",
fontSize: "18px"
}}
startIcon={<Add />}
color="primary"
>
Add Funds
</Button>
</div>
<div className="withdrawFunds">
<Button
variant="contained"
style={{
borderRadius: 5,
backgroundColor: "#FF2400",
padding: "15px 30px",
fontSize: "18px"
}}
startIcon={<SettingsBackupRestore />}
color="secondary"
>
Withdraw
</Button>
</div>
</div>
</CardContent>
</Card>
</ItemGrid>
<ItemGrid xs={12} sm={12} md={12}>
<div className="watchList">
<Card className="watchListChart">
<CardContent>
<Typography component="h3" variant="h1">Current Holdings</Typography>
</CardContent>
<CardContent>
<div className="local-bootstrap">
<div className="container">
<div className="searchFilters">
<div className="searchWatchList">
<div className="input-group mb-3">
<div className="input-group-prepend">
<span className="input-group-text" id="basic-addon1">Search</span>
</div>
<input type="text" className="form-control" placeholder="Filter Holdings" aria-label="Search" aria-describedby="basic-addon1"/>
</div>
</div>
</div>
<table className="table">
<thead className='thead-dark'>
<tr>
<th scope="col">Tick</th>
<th scope="col">Name</th>
<th scope="col">Buy Price</th>
<th scope="col">Invested</th>
<th scope="col">Quantity</th>
<th scope="col">Current Value</th>
<th scope="col">% Change (24 hrs)</th>
<th scope="col">% Change (Overall)</th>
</tr>
</thead>
<tbody>
{ this.state.rows.map(row => (
<tr>
<td className="holdingsRow">{row.tick}</td>
<td className="holdingsRow">{row.name}</td>
<td className="holdingsRow">{row.price}</td>
<td className="holdingsRow">{row.investmentPrice}</td>
<td className="holdingsRow">{row.quantity}</td>
<td className={row.overallChange > 0 ? 'bullishTrend' : (row.overallChange < 0 ? 'bearishTrend' : 'holdingsRow')}>{row.currentValue}</td>
<td className={row.todayChange > 0 ? 'bullishTrend' : (row.todayChange < 0 ? 'bearishTrend' : 'holdingsRow')}>{row.todayChange + " %"}</td>
<td className={row.overallChange > 0 ? 'bullishTrend' : (row.overallChange < 0 ? 'bearishTrend' : 'holdingsRow')}>{row.overallChange + " %"}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</CardContent>
</Card>
</div>
</ItemGrid>
</Grid>
</div>
</div>
);
}
Example #20
| 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>
}
/>
);
}
