From 68844246e800988297bb170744d47404c08df0bd Mon Sep 17 00:00:00 2001 From: Ryan Mathis Date: Thu, 21 Apr 2022 14:19:57 -0700 Subject: [PATCH] Fixed css issues --- .../component/templates/ArrayFieldTemplate.js | 33 ++++++++++++++----- .../widgets/AttributeReleaseWidget.js | 2 +- .../form/component/widgets/CheckboxWidget.js | 2 +- .../form/component/widgets/OptionWidget.js | 2 +- .../app/form/component/widgets/RadioWidget.js | 2 +- .../form/component/widgets/SelectWidget.js | 8 ++--- .../app/form/component/widgets/TextWidget.js | 2 -- .../form/component/widgets/TextareaWidget.js | 4 +-- ui/src/theme/project/tags.scss | 2 +- 9 files changed, 34 insertions(+), 23 deletions(-) diff --git a/ui/src/app/form/component/templates/ArrayFieldTemplate.js b/ui/src/app/form/component/templates/ArrayFieldTemplate.js index 3afcda8f0..598986589 100644 --- a/ui/src/app/form/component/templates/ArrayFieldTemplate.js +++ b/ui/src/app/form/component/templates/ArrayFieldTemplate.js @@ -5,21 +5,22 @@ import Col from "react-bootstrap/Col"; import Container from "react-bootstrap/Container"; import Accordion from 'react-bootstrap/Accordion'; import Button from 'react-bootstrap/Button'; +import { useAccordionButton } from "react-bootstrap/AccordionButton"; +import AccordionContext from "react-bootstrap/AccordionContext"; import AddButton from "../AddButton"; import IconButton from "../IconButton"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faCaretDown } from "@fortawesome/free-solid-svg-icons"; +import { faCaretDown, faCaretRight } from "@fortawesome/free-solid-svg-icons"; import Translate from "../../../i18n/components/translate"; + const { isMultiSelect, getDefaultRegistry } = utils; const ArrayFieldTemplate = (props) => { const { schema, registry = getDefaultRegistry() } = props; - // TODO: update types so we don't have to cast registry as any if (isMultiSelect(schema, (registry).rootSchema)) { - return ; } else { return ; @@ -57,6 +58,21 @@ const ArrayFieldDescription = ({ // Used in the two templates +const CustomToggle = ({children, eventKey, type, callback}) => { + const { activeEventKey } = React.useContext(AccordionContext); + + const decoratedOnClick = useAccordionButton(eventKey, () => callback && callback(eventKey)); + const isCurrentEventKey = activeEventKey === eventKey; + + return ( + + ); +} + + const ObjectArrayItem = ({type, ...props}) => { const btnStyle = { flex: 1, @@ -65,14 +81,13 @@ const ObjectArrayItem = ({type, ...props}) => { fontWeight: "bold", }; return ( -
+
- -   + - + {props.hasToolbar && (
{(props.hasMoveUp || props.hasMoveDown) && ( @@ -140,7 +155,7 @@ const DefaultArrayItem = (props) => { const uiSchemaOptions = props.uiSchema ? props.uiSchema['ui:options'] || {} : {}; return ( -
+
{props.children}
{props.hasToolbar && ( @@ -239,7 +254,7 @@ const DefaultNormalArrayFieldTemplate = (props) => { const showTitle = props.uiSchema.hasOwnProperty("ui:title") ? props.uiSchema["ui:title"] === false && !props.canAdd ? false : true : true; return ( - +
{showTitle && {option.label}
-
+
{ // const desc = label || schema.description; return ( - + diff --git a/ui/src/app/form/component/widgets/OptionWidget.js b/ui/src/app/form/component/widgets/OptionWidget.js index b4592bb48..92fc81b3d 100644 --- a/ui/src/app/form/component/widgets/OptionWidget.js +++ b/ui/src/app/form/component/widgets/OptionWidget.js @@ -91,7 +91,7 @@ const OptionWidget = ({ }; return ( - + 0) ? "text-danger" : ""}`} htmlFor={`option-selector-${id}`}> diff --git a/ui/src/app/form/component/widgets/RadioWidget.js b/ui/src/app/form/component/widgets/RadioWidget.js index 119360277..7a011d09c 100644 --- a/ui/src/app/form/component/widgets/RadioWidget.js +++ b/ui/src/app/form/component/widgets/RadioWidget.js @@ -34,7 +34,7 @@ const RadioWidget = ({ const inline = Boolean(options && options.inline); return ( - + diff --git a/ui/src/app/form/component/widgets/SelectWidget.js b/ui/src/app/form/component/widgets/SelectWidget.js index 7cfc37883..2bf62bb2d 100644 --- a/ui/src/app/form/component/widgets/SelectWidget.js +++ b/ui/src/app/form/component/widgets/SelectWidget.js @@ -85,7 +85,7 @@ const SelectWidget = ({ const [touched, setTouched] = React.useState(false); return ( - + 0 ? "text-danger" : ""}`} htmlFor={id}> @@ -93,9 +93,7 @@ const SelectWidget = ({ {schema.description && } - )} - + {rawErrors?.length > 0 && touched && ( {rawErrors.map((error, i) => { diff --git a/ui/src/app/form/component/widgets/TextWidget.js b/ui/src/app/form/component/widgets/TextWidget.js index 882883b73..8121b8d95 100644 --- a/ui/src/app/form/component/widgets/TextWidget.js +++ b/ui/src/app/form/component/widgets/TextWidget.js @@ -38,8 +38,6 @@ const TextWidget = ({ _onBlur(evt); }; - console.log(schema.description); - // const classNames = [rawErrors?.length > 0 ? "is-invalid" : "", type === 'file' ? 'custom-file-label': ""] return ( diff --git a/ui/src/app/form/component/widgets/TextareaWidget.js b/ui/src/app/form/component/widgets/TextareaWidget.js index fc4a5fd84..2cf28be8c 100644 --- a/ui/src/app/form/component/widgets/TextareaWidget.js +++ b/ui/src/app/form/component/widgets/TextareaWidget.js @@ -45,7 +45,7 @@ const TextareaWidget = ({ }; return ( - <> +
0 ? "text-danger" : ""}`}> @@ -82,7 +82,7 @@ const TextareaWidget = ({ })} )} - +
); }; diff --git a/ui/src/theme/project/tags.scss b/ui/src/theme/project/tags.scss index f3cd6ab69..af776f94e 100644 --- a/ui/src/theme/project/tags.scss +++ b/ui/src/theme/project/tags.scss @@ -18,7 +18,7 @@ .tag { $text-space: 8px; $left-offset: 32px; - + $line-height-lg: 1.3rem; font-size: $font-size-sm; line-height: $line-height-lg; position: relative;