diff --git a/src/components/manage/Blocks/Accordion/Edit.jsx b/src/components/manage/Blocks/Accordion/Edit.jsx index f6ab9f2..7479ee5 100644 --- a/src/components/manage/Blocks/Accordion/Edit.jsx +++ b/src/components/manage/Blocks/Accordion/Edit.jsx @@ -1,10 +1,12 @@ import { BlocksForm, Icon, SidebarPortal } from '@plone/volto/components'; -import InlineForm from '@plone/volto/components/manage/Form/InlineForm'; import { emptyBlocksForm } from '@plone/volto/helpers'; import helpSVG from '@plone/volto/icons/help.svg'; import { isEmpty } from 'lodash'; import React, { useState } from 'react'; import { Button, Segment } from 'semantic-ui-react'; +import { withBlockExtensions } from '@plone/volto/helpers'; +import { BlockDataForm } from '@plone/volto/components'; +import { useIntl } from 'react-intl'; import AccordionEdit from './AccordionEdit'; import EditBlockWrapper from './EditBlockWrapper'; import './editor.less'; @@ -22,7 +24,7 @@ const Edit = (props) => { manage, formDescription, } = props; - + const intl = useIntl(); const properties = isEmpty(data?.data?.blocks) ? emptyAccordion(3) : data.data; @@ -33,7 +35,7 @@ const Edit = (props) => { * @returns {Object} defaultValues */ const setInitialData = () => { - const accordionSchema = accordionBlockSchema(); + const accordionSchema = accordionBlockSchema({ intl }); const defaultValues = Object.keys(accordionSchema.properties).reduce( (accumulator, currentVal) => { return accordionSchema.properties[currentVal].default @@ -222,8 +224,8 @@ const Edit = (props) => { )} {!data?.readOnlySettings && ( - { onChangeBlock(block, { @@ -232,6 +234,7 @@ const Edit = (props) => { }); }} formData={data} + block={block} /> )} @@ -239,4 +242,4 @@ const Edit = (props) => { ); }; -export default Edit; +export default withBlockExtensions(Edit); diff --git a/src/components/manage/Blocks/Accordion/Schema.js b/src/components/manage/Blocks/Accordion/Schema.js index 1a1dbe9..0b926ca 100644 --- a/src/components/manage/Blocks/Accordion/Schema.js +++ b/src/components/manage/Blocks/Accordion/Schema.js @@ -1,3 +1,48 @@ +import { defineMessages } from 'react-intl'; + +const messages = defineMessages({ + Accordion: { + id: 'Accordion', + defaultMessage: 'Accordion', + }, + Style: { + id: 'Style', + defaultMessage: 'Style', + }, + Title: { + id: 'Title', + defaultMessage: 'Title', + }, + friendly_name: { + id: 'Friendly name', + defaultMessage: 'Friendly name', + }, + title_size: { + id: 'Title size', + defaultMessage: 'Title size', + }, + title_size_description: { + id: 'Accordion Title size', + defaultMessage: 'Accordion Title size', + }, + right_arrows: { + id: 'Title Icon on the right', + defaultMessage: 'Title Icon on the right', + }, + collapsed: { + id: 'Collapsed by default', + defaultMessage: 'Collapsed by default', + }, + non_exclusive: { + id: 'Non exclusive', + defaultMessage: 'Non exclusive', + }, + non_exclusive_description: { + id: 'Allow multiple panels open at a time', + defaultMessage: 'Allow multiple panels open at a time', + }, +}); + export const AccordionSchema = { title: 'Accordion', fieldsets: [ @@ -15,7 +60,7 @@ export const AccordionSchema = { required: [], }; -export const accordionBlockSchema = () => ({ +export const accordionBlockSchema = ({ intl }) => ({ title: 'Accordion block', fieldsets: [ { @@ -25,7 +70,7 @@ export const accordionBlockSchema = () => ({ }, { id: 'style', - title: 'Style', + title: intl.formatMessage(messages.Style), fields: [ 'title', 'title_size', @@ -37,18 +82,18 @@ export const accordionBlockSchema = () => ({ ], properties: { title: { - title: 'Title', - description: 'Friendly name', + title: intl.formatMessage(messages.Title), + description: intl.formatMessage(messages.friendly_name), type: 'string', }, data: { - title: 'Accordion', + title: intl.formatMessage(messages.Accordion), type: 'panels', schema: AccordionSchema, }, title_size: { - title: 'Title size', - description: 'Accordion Title size', + title: intl.formatMessage(messages.title_size), + description: intl.formatMessage(messages.title_size_description), type: 'string', factory: 'Choice', choices: [ @@ -60,18 +105,18 @@ export const accordionBlockSchema = () => ({ ], }, right_arrows: { - title: 'Title Icon on the right', + title: intl.formatMessage(messages.right_arrows), type: 'boolean', default: false, }, collapsed: { - title: 'Collapsed by default', + title: intl.formatMessage(messages.collapsed), type: 'boolean', default: true, }, non_exclusive: { - title: 'Non exclusive', - description: 'Allow multiple panels open at a time', + title: intl.formatMessage(messages.non_exclusive), + description: intl.formatMessage(messages.non_exclusive_description), type: 'boolean', default: true, }, diff --git a/src/components/manage/Blocks/Accordion/View.jsx b/src/components/manage/Blocks/Accordion/View.jsx index 0391945..d4a2e7c 100644 --- a/src/components/manage/Blocks/Accordion/View.jsx +++ b/src/components/manage/Blocks/Accordion/View.jsx @@ -2,6 +2,7 @@ import React from 'react'; import { RenderBlocks } from '@plone/volto/components'; import { getPanels, accordionBlockHasValue } from './util'; import { Accordion } from 'semantic-ui-react'; +import { withBlockExtensions } from '@plone/volto/helpers'; import cx from 'classnames'; import { Icon } from '@plone/volto/components'; @@ -93,4 +94,4 @@ const View = (props) => { ); }; -export default View; +export default withBlockExtensions(View);