components#SubmitField JavaScript Examples

The following examples show how to use components#SubmitField. 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 vote down vote up 
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)
                        }
                    >
                        &nbsp;
                    </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: contact-data.jsx    From apps with GNU Affero General Public License v3.0 4 votes vote down vote up 
BaseContactData = ({
    form: { set, data, error, valid, reset },
    router,
}) => {
    const [modified, setModified] = useState(false);
    const [initialized, setInitialized] = useState(false);
    const user = useUser();

    const onSubmit = () => {
        if (!valid) return;
        user.contactData = data;
        // we redirect to the 'verify' step
        router.navigateToUrl(`/user/setup/finalize`);
    };

    useEffect(() => {
        if (initialized) return;
        setInitialized(true);
        setModified(false);
        reset(user.contactData || {});
    });

    const submitting = false;

    const setAndMarkModified = (key, value) => {
        setModified(true);
        set(key, value);
    };

    const controls = (
        <React.Fragment>
            <ErrorFor error={error} field="code" />
            <RetractingLabelInput
                value={data.code || ''}
                onChange={(value) => setAndMarkModified('code', value)}
                description={
                    <T t={t} k="contact-data.access-code.description" />
                }
                label={<T t={t} k="contact-data.access-code.label" />}
            />
        </React.Fragment>
    );

    const redirecting = false;

    return (
        <React.Fragment>
            <div className="kip-cm-contact-data">
                <FormComponent onSubmit={onSubmit}>
                    <FieldSet disabled={submitting}>
                        {
                            <React.Fragment>
                                <CardContent>{controls}</CardContent>
                                <CardFooter>
                                    <SubmitField
                                        disabled={!valid}
                                        type={'success'}
                                        onClick={onSubmit}
                                        waiting={submitting || redirecting}
                                        title={
                                            redirecting ? (
                                                <T
                                                    t={t}
                                                    k="contact-data.success"
                                                />
                                            ) : submitting ? (
                                                <T
                                                    t={t}
                                                    k="contact-data.saving"
                                                />
                                            ) : (
                                                <T
                                                    t={t}
                                                    k={
                                                        'contact-data.save-and-continue'
                                                    }
                                                />
                                            )
                                        }
                                    />
                                </CardFooter>
                            </React.Fragment>
                        }
                    </FieldSet>
                </FormComponent>
            </div>
        </React.Fragment>
    );
}