components#Switch JavaScript Examples
The following examples show how to use
components#Switch.
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: provider-data.jsx From apps with GNU Affero General Public License v3.0 | 4 votes |
|
BaseProviderData = ({
embedded,
form: { set, data, error, valid, reset },
}) => {
const [modified, setModified] = useState(false);
const router = useRouter();
const provider = useProvider();
const onSubmit = () => {
if (!valid) return;
provider.data = data;
// we redirect to the 'verify' step
router.navigateToUrl(`/provider/setup/verify`);
};
useEffectOnce(() => {
reset(provider.data || {});
setModified(false);
});
const setAndMarkModified = (key, value) => {
setModified(true);
set(key, value);
};
const controls = (
<React.Fragment>
<ErrorFor error={error} field="name" />
<RetractingLabelInput
value={data.name || ''}
onChange={(value) => setAndMarkModified('name', value)}
label={<T t={t} k="provider-data.name" />}
/>
<ErrorFor error={error} field="street" />
<RetractingLabelInput
value={data.street || ''}
onChange={(value) => setAndMarkModified('street', value)}
label={<T t={t} k="provider-data.street" />}
/>
<ErrorFor error={error} field="zipCode" />
<RetractingLabelInput
value={data.zipCode || ''}
onChange={(value) => setAndMarkModified('zipCode', value)}
label={<T t={t} k="provider-data.zip-code" />}
/>
<ErrorFor error={error} field="city" />
<RetractingLabelInput
value={data.city || ''}
onChange={(value) => setAndMarkModified('city', value)}
label={<T t={t} k="provider-data.city" />}
/>
<ErrorFor error={error} field="website" />
<RetractingLabelInput
value={data.website || ''}
onChange={(value) => setAndMarkModified('website', value)}
label={<T t={t} k="provider-data.website" />}
/>
<ErrorFor error={error} field="description" />
<label htmlFor="description">
<T t={t} k="provider-data.description" />
</label>
<textarea
id="description"
className="bulma-textarea"
value={data.description || ''}
onChange={(e) =>
setAndMarkModified('description', e.target.value)
}
/>
<h3>
<T t={t} k="provider-data.for-mediator" />
</h3>
<ErrorFor error={error} field="phone" />
<RetractingLabelInput
value={data.phone || ''}
onChange={(value) => setAndMarkModified('phone', value)}
label={<T t={t} k="provider-data.phone" />}
/>
<ErrorFor error={error} field="email" />
<RetractingLabelInput
value={data.email || ''}
onChange={(value) => setAndMarkModified('email', value)}
label={<T t={t} k="provider-data.email" />}
/>
<hr />
<ErrorFor error={error} field="code" />
<RetractingLabelInput
value={data.code || ''}
onChange={(value) => setAndMarkModified('code', value)}
description={
<T t={t} k="provider-data.access-code.description" />
}
label={<T t={t} k="provider-data.access-code.label" />}
/>
<hr />
<ul className="kip-properties">
<li className="kip-property">
<Switch
id="accessible"
checked={
data.accessible !== undefined
? data.accessible
: false
}
onChange={(value) =>
setAndMarkModified('accessible', value)
}
>
</Switch>
<label htmlFor="accessible">
<T t={t} k="provider-data.accessible" />
</label>
</li>
</ul>
</React.Fragment>
);
return (
<React.Fragment>
<div className="kip-provider-data">
<FormComponent onSubmit={onSubmit}>
<FieldSet>
<CardContent>{controls}</CardContent>
<CardFooter>
<SubmitField
disabled={!valid || embedded & !modified}
type={'success'}
onClick={onSubmit}
title={
<T
t={t}
k="provider-data.save-and-continue"
/>
}
/>
</CardFooter>
</FieldSet>
</FormComponent>
</div>
</React.Fragment>
);
}
Example #2
| 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 #3
| 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'
)
