diff --git a/src/lib/forms/AccordionField.js b/src/lib/forms/AccordionField.js index a32e9f73..887eb1ef 100644 --- a/src/lib/forms/AccordionField.js +++ b/src/lib/forms/AccordionField.js @@ -5,10 +5,10 @@ // React-Invenio-Forms is free software; you can redistribute it and/or modify it // under the terms of the MIT License; see LICENSE file for more details. -import React, { Component } from "react"; +import React, { Component, useState } from "react"; import PropTypes from "prop-types"; import { Field, FastField } from "formik"; -import { Accordion, Container } from "semantic-ui-react"; +import { Accordion, Container, Icon } from "semantic-ui-react"; import _omit from "lodash/omit"; import _get from "lodash/get"; @@ -44,7 +44,6 @@ export class AccordionField extends Component { key: `panel-${label}`, title: { content: label, - icon: "angle right", }, content: { content: {children}, @@ -53,15 +52,40 @@ export class AccordionField extends Component { ]; const errorClass = hasError ? "error secondary" : ""; + const [activeIndex, setActiveIndex] = useState(0); + + const handleTitleClick = (e, { index }) => { + setActiveIndex(activeIndex === index ? -1 : index); + }; return ( + > + {panels.map((panel, index) => ( + + { + if (e.key === "Enter" || e.key === " ") { + handleTitleClick(e, { index }); + } + }} + tabIndex={0} + > + {panel.title.content} + + + + {panel.content.content} + + + ))} + ); };