Skip to content

Commit

Permalink
refactor eea/volto-accordion-block
Browse files Browse the repository at this point in the history
  • Loading branch information
jnptk committed Oct 2, 2024
1 parent ec8fda0 commit b2b2fd0
Show file tree
Hide file tree
Showing 21 changed files with 34,896 additions and 27 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
.DS_Store
.*project
.settings/
.vscode
Expand Down
2 changes: 1 addition & 1 deletion Makefile
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ ci-test: ## Run unit tests in CI
.PHONY: backend-docker-start
backend-docker-start: ## Starts a Docker-based backend for development
@echo "$(GREEN)==> Start Docker-based Plone Backend$(RESET)"
docker run -it --rm --name=backend -p 8080:8080 -e SITE=Plone $(DOCKER_IMAGE)
docker run -d -it --rm --name=backend -p 8080:8080 -e SITE=Plone $(DOCKER_IMAGE)

## Storybook
.PHONY: storybook-start
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -135,11 +135,6 @@ msgstr ""
msgid "Enable filtering"
msgstr ""

#. Default: "Enter Title"
#: components/AccordionEdit
msgid "Enter Title"
msgstr ""

#. Default: "Fixed layout"
#: components/LayoutSchema
msgid "Fixed layout"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -135,11 +135,6 @@ msgstr ""
msgid "Enable filtering"
msgstr ""

#. Default: "Enter Title"
#: components/AccordionEdit
msgid "Enter Title"
msgstr ""

#. Default: "Fixed layout"
#: components/LayoutSchema
msgid "Fixed layout"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -142,11 +142,6 @@ msgstr ""
msgid "Enable filtering"
msgstr ""

#. Default: "Enter Title"
#: components/AccordionEdit
msgid "Enter Title"
msgstr ""

#. Default: "Fixed layout"
#: components/LayoutSchema
msgid "Fixed layout"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -135,11 +135,6 @@ msgstr ""
msgid "Enable filtering"
msgstr ""

#. Default: "Enter Title"
#: components/AccordionEdit
msgid "Enter Title"
msgstr ""

#. Default: "Fixed layout"
#: components/LayoutSchema
msgid "Fixed layout"
Expand Down
7 changes: 1 addition & 6 deletions packages/volto-accordion-block/locales/volto.pot
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
msgid ""
msgstr ""
"Project-Id-Version: Plone\n"
"POT-Creation-Date: 2024-09-10T14:30:33.648Z\n"
"POT-Creation-Date: 2024-10-02T07:58:20.053Z\n"
"Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
"Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
"Content-Type: text/plain; charset=utf-8\n"
Expand Down Expand Up @@ -137,11 +137,6 @@ msgstr ""
msgid "Enable filtering"
msgstr ""

#. Default: "Enter Title"
#: components/AccordionEdit
msgid "Enter Title"
msgstr ""

#. Default: "Fixed layout"
#: components/LayoutSchema
msgid "Fixed layout"
Expand Down
Empty file.
76 changes: 76 additions & 0 deletions packages/volto-accordion-block/src/components/AccordionEdit.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
import cx from 'classnames';
import React from 'react';
import { Icon } from '@plone/volto/components';
import { injectIntl } from 'react-intl';

import rightSVG from '@plone/volto/icons/right-key.svg';

const AccordionEdit = (props) => {
const {
children,
handleTitleChange,
handleTitleClick,
panel,
data,
index,
uid,
} = props;
const [activeIndex, setActiveIndex] = React.useState([0]);
const isActive = activeIndex.includes(index);

const handleClick = (e, itemProps) => {
e.stopPropagation();
const { index } = itemProps;
if (data.non_exclusive) {
const newIndex =
activeIndex.indexOf(index) === -1
? [...activeIndex, index]
: activeIndex.filter((item) => item !== index);

setActiveIndex(newIndex);
} else {
const newIndex =
activeIndex.indexOf(index) === -1
? [index]
: activeIndex.filter((item) => item !== index);

setActiveIndex(newIndex);
}
};

React.useEffect(() => {
return data.collapsed && setActiveIndex([]);
}, [data.collapsed]);

return (
<div className={'accordion-item'}>
<div

Check failure on line 47 in packages/volto-accordion-block/src/components/AccordionEdit.jsx

View workflow job for this annotation

GitHub Actions / codeanalysis

Visible, non-interactive elements with click handlers must have at least one keyboard listener
className={cx('accordion-title')}
onClick={(e) => handleClick(e, { index })}
role="button"
tabIndex={0}
aria-expanded={isActive}
>
<input
placeholder="Enter title here..."
value={panel?.title}
onClick={(e) => {
handleTitleClick();
e.stopPropagation();
}}
onChange={(e) => handleTitleChange(e, [uid, panel])}
/>
<Icon
className={cx(isActive ? 'open' : '')}
name={rightSVG}
size="20px"
/>
</div>
<div className={cx('content-wrapper', isActive ? 'open' : '')}>
<div className="accordion-content">{children}</div>
</div>
</div>
);
};

export default injectIntl(AccordionEdit);
57 changes: 57 additions & 0 deletions packages/volto-accordion-block/src/components/AccordionFilter.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import React from 'react';
import { Accordion, Input } from 'semantic-ui-react';
import { defineMessages, useIntl } from 'react-intl';
import { Icon } from './util';

const messages = defineMessages({
placeholder: {
id: 'Type to filter...',
defaultMessage: 'Type to filter...',
},
});

const AccordionFilter = ({
config,
data,
filterValue,
handleFilteredValueChange,
}) => {
const intl = useIntl();
const { titleIcons } = config;
const iconOnRight = data.right_arrows;
const iconPosition = iconOnRight ? 'rightPosition' : 'leftPosition';
return (
<Accordion
className={`styled ${
data.styles ? data.styles.theme : config?.defaults?.theme
}`}
>
<Accordion.Title
className={
'accordion-title filter ' +
(data.right_arrows ? 'align-arrow-right' : 'align-arrow-left')
}
>
<Icon
name={
filterValue === ''
? titleIcons.unfiltered[iconPosition]
: titleIcons.filtered[iconPosition]
}
options={titleIcons}
onClick={() => handleFilteredValueChange('')}
/>
<Input
fluid
className="input-accordion-title"
transparent
placeholder={intl.formatMessage(messages.placeholder)}
value={filterValue}
onChange={(e) => handleFilteredValueChange(e.target.value)}
/>
</Accordion.Title>
</Accordion>
);
};

export default AccordionFilter;
Loading

0 comments on commit b2b2fd0

Please sign in to comment.