mirror of
https://gitlab.nic.cz/turris/reforis/foris-js.git
synced 2024-12-25 00:11:36 +01:00
Merge branch 'form-widgets-size' into 'dev'
Form widgets size See merge request turris/reforis/foris-js!66
This commit is contained in:
commit
418e38de31
2
package-lock.json
generated
2
package-lock.json
generated
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "foris",
|
"name": "foris",
|
||||||
"version": "2.1.1",
|
"version": "2.2.0",
|
||||||
"lockfileVersion": 1,
|
"lockfileVersion": 1,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "foris",
|
"name": "foris",
|
||||||
"version": "2.1.1",
|
"version": "2.2.0",
|
||||||
"description": "Set of components and utils for Foris and its plugins.",
|
"description": "Set of components and utils for Foris and its plugins.",
|
||||||
"author": "CZ.NIC, z.s.p.o.",
|
"author": "CZ.NIC, z.s.p.o.",
|
||||||
"repository": {
|
"repository": {
|
||||||
|
|
|
@ -8,11 +8,6 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import PropTypes from "prop-types";
|
import PropTypes from "prop-types";
|
||||||
|
|
||||||
const OFFSET = 8;
|
|
||||||
const SIZE = 3;
|
|
||||||
const SIZE_CLASS = ` offset-lg-${OFFSET} col-lg-${SIZE}`;
|
|
||||||
const SIZE_CLASS_SM = " col-sm-12";
|
|
||||||
|
|
||||||
Button.propTypes = {
|
Button.propTypes = {
|
||||||
/** Additional class name. */
|
/** Additional class name. */
|
||||||
className: PropTypes.string,
|
className: PropTypes.string,
|
||||||
|
@ -32,14 +27,16 @@ Button.propTypes = {
|
||||||
export function Button({
|
export function Button({
|
||||||
className, loading, forisFormSize, children, ...props
|
className, loading, forisFormSize, children, ...props
|
||||||
}) {
|
}) {
|
||||||
className = className ? `btn ${className}` : "btn btn-primary ";
|
let buttonClass = className ? `btn ${className}` : "btn btn-primary ";
|
||||||
if (forisFormSize) className += SIZE_CLASS + SIZE_CLASS_SM;
|
if (forisFormSize) {
|
||||||
|
buttonClass = `${buttonClass} col-sm-12 col-lg-3`;
|
||||||
|
}
|
||||||
|
|
||||||
const span = loading
|
const span = loading
|
||||||
? <span className="spinner-border spinner-border-sm" role="status" aria-hidden="true" /> : null;
|
? <span className="spinner-border spinner-border-sm" role="status" aria-hidden="true" /> : null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<button type="button" className={className} {...props}>
|
<button type="button" className={buttonClass} {...props}>
|
||||||
{span}
|
{span}
|
||||||
{" "}
|
{" "}
|
||||||
{span ? " " : null}
|
{span ? " " : null}
|
||||||
|
|
|
@ -9,30 +9,25 @@ import React from "react";
|
||||||
import PropTypes from "prop-types";
|
import PropTypes from "prop-types";
|
||||||
import { useUID } from "react-uid";
|
import { useUID } from "react-uid";
|
||||||
|
|
||||||
import { formFieldsSize } from "./constants";
|
|
||||||
|
|
||||||
CheckBox.propTypes = {
|
CheckBox.propTypes = {
|
||||||
/** Label message */
|
/** Label message */
|
||||||
label: PropTypes.string.isRequired,
|
label: PropTypes.string.isRequired,
|
||||||
/** Help text message */
|
/** Help text message */
|
||||||
helpText: PropTypes.string,
|
helpText: PropTypes.string,
|
||||||
/** Apply default size (full-width) */
|
|
||||||
useDefaultSize: PropTypes.bool,
|
|
||||||
/** Control if checkbox is clickable */
|
/** Control if checkbox is clickable */
|
||||||
disabled: PropTypes.bool,
|
disabled: PropTypes.bool,
|
||||||
};
|
};
|
||||||
|
|
||||||
CheckBox.defaultProps = {
|
CheckBox.defaultProps = {
|
||||||
useDefaultSize: true,
|
|
||||||
disabled: false,
|
disabled: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
export function CheckBox({
|
export function CheckBox({
|
||||||
label, helpText, useDefaultSize, disabled, ...props
|
label, helpText, disabled, ...props
|
||||||
}) {
|
}) {
|
||||||
const uid = useUID();
|
const uid = useUID();
|
||||||
return (
|
return (
|
||||||
<div className={`form-group ${useDefaultSize ? formFieldsSize : ""}`.trim()}>
|
<div className="form-group">
|
||||||
<div className="custom-control custom-checkbox ">
|
<div className="custom-control custom-checkbox ">
|
||||||
<input
|
<input
|
||||||
className="custom-control-input"
|
className="custom-control-input"
|
||||||
|
|
|
@ -9,8 +9,6 @@ import React from "react";
|
||||||
import { useUID } from "react-uid";
|
import { useUID } from "react-uid";
|
||||||
import PropTypes from "prop-types";
|
import PropTypes from "prop-types";
|
||||||
|
|
||||||
import { formFieldsSize } from "./constants";
|
|
||||||
|
|
||||||
Input.propTypes = {
|
Input.propTypes = {
|
||||||
type: PropTypes.string.isRequired,
|
type: PropTypes.string.isRequired,
|
||||||
label: PropTypes.string.isRequired,
|
label: PropTypes.string.isRequired,
|
||||||
|
@ -32,7 +30,7 @@ export function Input({
|
||||||
const uid = useUID();
|
const uid = useUID();
|
||||||
const inputClassName = `form-control ${className || ""} ${(error ? "is-invalid" : "")}`.trim();
|
const inputClassName = `form-control ${className || ""} ${(error ? "is-invalid" : "")}`.trim();
|
||||||
return (
|
return (
|
||||||
<div className={`form-group ${formFieldsSize}`}>
|
<div className="form-group">
|
||||||
<label className={labelClassName} htmlFor={uid}>{label}</label>
|
<label className={labelClassName} htmlFor={uid}>{label}</label>
|
||||||
<div className={`input-group ${groupClassName || ""}`.trim()}>
|
<div className={`input-group ${groupClassName || ""}`.trim()}>
|
||||||
<input
|
<input
|
||||||
|
|
|
@ -9,8 +9,6 @@ import React from "react";
|
||||||
import PropTypes from "prop-types";
|
import PropTypes from "prop-types";
|
||||||
import { useUID } from "react-uid";
|
import { useUID } from "react-uid";
|
||||||
|
|
||||||
import { formFieldsSize } from "./constants";
|
|
||||||
|
|
||||||
RadioSet.propTypes = {
|
RadioSet.propTypes = {
|
||||||
/** Name attribute of the input HTML tag. */
|
/** Name attribute of the input HTML tag. */
|
||||||
name: PropTypes.string.isRequired,
|
name: PropTypes.string.isRequired,
|
||||||
|
@ -51,7 +49,7 @@ export function RadioSet({
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`form-group ${formFieldsSize}`}>
|
<div className="form-group">
|
||||||
{label && <label htmlFor={uid} className="d-block">{label}</label>}
|
{label && <label htmlFor={uid} className="d-block">{label}</label>}
|
||||||
{radios}
|
{radios}
|
||||||
{helpText && <small className="form-text text-muted">{helpText}</small>}
|
{helpText && <small className="form-text text-muted">{helpText}</small>}
|
||||||
|
|
|
@ -33,7 +33,7 @@ export function Select({
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="form-group col-sm-12 offset-lg-1 col-lg-10">
|
<div className="form-group">
|
||||||
<label htmlFor={uid}>{label}</label>
|
<label htmlFor={uid}>{label}</label>
|
||||||
<select
|
<select
|
||||||
className="custom-select"
|
className="custom-select"
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
|
|
||||||
exports[`<Checkbox/> Render checkbox 1`] = `
|
exports[`<Checkbox/> Render checkbox 1`] = `
|
||||||
<div
|
<div
|
||||||
class="form-group col-sm-12 offset-lg-1 col-lg-10"
|
class="form-group"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="custom-control custom-checkbox "
|
class="custom-control custom-checkbox "
|
||||||
|
@ -30,7 +30,7 @@ exports[`<Checkbox/> Render checkbox 1`] = `
|
||||||
|
|
||||||
exports[`<Checkbox/> Render uncheked checkbox 1`] = `
|
exports[`<Checkbox/> Render uncheked checkbox 1`] = `
|
||||||
<div
|
<div
|
||||||
class="form-group col-sm-12 offset-lg-1 col-lg-10"
|
class="form-group"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="custom-control custom-checkbox "
|
class="custom-control custom-checkbox "
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
|
|
||||||
exports[`<NumberInput/> Render number input 1`] = `
|
exports[`<NumberInput/> Render number input 1`] = `
|
||||||
<div
|
<div
|
||||||
class="form-group col-sm-12 offset-lg-1 col-lg-10"
|
class="form-group"
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
for="1"
|
for="1"
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
|
|
||||||
exports[`<PasswordInput/> Render password input 1`] = `
|
exports[`<PasswordInput/> Render password input 1`] = `
|
||||||
<div
|
<div
|
||||||
class="form-group col-sm-12 offset-lg-1 col-lg-10"
|
class="form-group"
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
for="1"
|
for="1"
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
|
|
||||||
exports[`<RadioSet/> Render radio set 1`] = `
|
exports[`<RadioSet/> Render radio set 1`] = `
|
||||||
<div
|
<div
|
||||||
class="form-group col-sm-12 offset-lg-1 col-lg-10"
|
class="form-group"
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
class="d-block"
|
class="d-block"
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
exports[`<Select/> Test with snapshot. 1`] = `
|
exports[`<Select/> Test with snapshot. 1`] = `
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
class="form-group col-sm-12 offset-lg-1 col-lg-10"
|
class="form-group"
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
for="1"
|
for="1"
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
|
|
||||||
exports[`<TextInput/> Render text input 1`] = `
|
exports[`<TextInput/> Render text input 1`] = `
|
||||||
<div
|
<div
|
||||||
class="form-group col-sm-12 offset-lg-1 col-lg-10"
|
class="form-group"
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
for="1"
|
for="1"
|
||||||
|
|
|
@ -7,4 +7,4 @@
|
||||||
|
|
||||||
/** Bootstrap column size for form fields */
|
/** Bootstrap column size for form fields */
|
||||||
// eslint-disable-next-line import/prefer-default-export
|
// eslint-disable-next-line import/prefer-default-export
|
||||||
export const formFieldsSize = "col-sm-12 offset-lg-1 col-lg-10";
|
export const formFieldsSize = "col-sm-12 offset-lg-1 col-lg-10 p-0 mb-3";
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
exports[`<SubmitButton/> Render load 1`] = `
|
exports[`<SubmitButton/> Render load 1`] = `
|
||||||
<div>
|
<div>
|
||||||
<button
|
<button
|
||||||
class="btn btn-primary offset-lg-8 col-lg-3 col-sm-12"
|
class="btn btn-primary col-sm-12 col-lg-3"
|
||||||
disabled=""
|
disabled=""
|
||||||
type="submit"
|
type="submit"
|
||||||
>
|
>
|
||||||
|
@ -23,7 +23,7 @@ exports[`<SubmitButton/> Render load 1`] = `
|
||||||
exports[`<SubmitButton/> Render ready 1`] = `
|
exports[`<SubmitButton/> Render ready 1`] = `
|
||||||
<div>
|
<div>
|
||||||
<button
|
<button
|
||||||
class="btn btn-primary offset-lg-8 col-lg-3 col-sm-12"
|
class="btn btn-primary col-sm-12 col-lg-3"
|
||||||
type="submit"
|
type="submit"
|
||||||
>
|
>
|
||||||
|
|
||||||
|
@ -36,7 +36,7 @@ exports[`<SubmitButton/> Render ready 1`] = `
|
||||||
exports[`<SubmitButton/> Render saving 1`] = `
|
exports[`<SubmitButton/> Render saving 1`] = `
|
||||||
<div>
|
<div>
|
||||||
<button
|
<button
|
||||||
class="btn btn-primary offset-lg-8 col-lg-3 col-sm-12"
|
class="btn btn-primary col-sm-12 col-lg-3"
|
||||||
disabled=""
|
disabled=""
|
||||||
type="submit"
|
type="submit"
|
||||||
>
|
>
|
||||||
|
|
|
@ -59,7 +59,7 @@ describe('useForm hook.', () => {
|
||||||
input = await waitForElement(() =>
|
input = await waitForElement(() =>
|
||||||
getByTestId('test-input')
|
getByTestId('test-input')
|
||||||
);
|
);
|
||||||
form = container.firstChild
|
form = container.firstChild.firstChild;
|
||||||
});
|
});
|
||||||
|
|
||||||
it('Validation on changing.', () => {
|
it('Validation on changing.', () => {
|
||||||
|
|
|
@ -9,12 +9,14 @@ import React, { useEffect } from "react";
|
||||||
import PropTypes from "prop-types";
|
import PropTypes from "prop-types";
|
||||||
import { Prompt } from "react-router";
|
import { Prompt } from "react-router";
|
||||||
|
|
||||||
import { useAPIPost } from "../../api/hooks";
|
import { ALERT_TYPES } from "../../bootstrap/Alert";
|
||||||
import { API_STATE } from "../../api/utils";
|
import { API_STATE } from "../../api/utils";
|
||||||
import { ErrorMessage } from "../../utils/ErrorMessage";
|
import { ErrorMessage } from "../../utils/ErrorMessage";
|
||||||
import { useAlert } from "../../alertContext/AlertContext";
|
import { formFieldsSize } from "../../bootstrap/constants";
|
||||||
import { Spinner } from "../../bootstrap/Spinner";
|
import { Spinner } from "../../bootstrap/Spinner";
|
||||||
import { ALERT_TYPES } from "../../bootstrap/Alert";
|
import { useAlert } from "../../alertContext/AlertContext";
|
||||||
|
import { useAPIPost } from "../../api/hooks";
|
||||||
|
|
||||||
import { useForisModule, useForm } from "../hooks";
|
import { useForisModule, useForm } from "../hooks";
|
||||||
import { STATES as SUBMIT_BUTTON_STATES, SubmitButton } from "./SubmitButton";
|
import { STATES as SUBMIT_BUTTON_STATES, SubmitButton } from "./SubmitButton";
|
||||||
|
|
||||||
|
@ -153,15 +155,17 @@ export function ForisForm({
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div className={formFieldsSize}>
|
||||||
<Prompt message={getMessageOnLeavingPage} />
|
<Prompt message={getMessageOnLeavingPage} />
|
||||||
<form onSubmit={onSubmit}>
|
<form onSubmit={onSubmit}>
|
||||||
{childrenWithFormProps}
|
{childrenWithFormProps}
|
||||||
<SubmitButton
|
<div className="text-right">
|
||||||
state={getSubmitButtonState()}
|
<SubmitButton
|
||||||
disabled={submitButtonIsDisabled}
|
state={getSubmitButtonState()}
|
||||||
/>
|
disabled={submitButtonIsDisabled}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user