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