GGLinnk/foris-js
1
0
Fork 0
mirror of https://gitlab.nic.cz/turris/reforis/foris-js.git synced 2024-07-02 20:30:27 +00:00
Code Issues Releases Activity

Form widgets size

Browse Source
This commit is contained in:
Maciej Lenartowicz 2020-01-07 13:27:49 +01:00
parent c67ad164ce
commit 56a4c47948
17 changed files with 37 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package-lock.json generated
View File

@ -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": {

2
package.json
View File

@ -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": {

13
src/bootstrap/Button.js
View File

@ -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
src/bootstrap/CheckBox.js
View File

@ -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"

4
src/bootstrap/Input.js
View File

@ -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

4
src/bootstrap/RadioSet.js
View File

@ -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>}

2
src/bootstrap/Select.js
View File

@ -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"

4
src/bootstrap/__tests__/__snapshots__/CheckBox.test.js.snap
View File

@ -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
src/bootstrap/__tests__/__snapshots__/NumberInput.test.js.snap
View File

@ -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
src/bootstrap/__tests__/__snapshots__/PasswordInput.test.js.snap
View File

@ -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
src/bootstrap/__tests__/__snapshots__/RadioSet.test.js.snap
View File

@ -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"

2
src/bootstrap/__tests__/__snapshots__/Select.test.js.snap
View File

@ -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
src/bootstrap/__tests__/__snapshots__/TextInput.test.js.snap
View File

@ -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"

2
src/bootstrap/constants.js
View File

@ -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";

6
src/form/__tests__/__snapshots__/SubmitButton.test.js.snap
View File

@ -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"
> >

2
src/form/__tests__/hooks.test.js
View File

@ -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.', () => {

22
src/form/components/ForisForm.js
View File

@ -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>
); );
} }