WIP: Estrutura do bloco de calendário

frontend/packages/portalbrasil-intranet/src/components/Blocks/Calendario/Data.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { BlockDataForm } from '@plone/volto/components';
+import { calendarioSchema } from './schema';
+import { useIntl } from 'react-intl';
+
+const CalendarioBlockData = (props) => {
+  const { data, block, onChangeBlock, blocksConfig, navRoot, contentType } =
+    props;
+
+  const intl = useIntl();
+  const schema = calendarioSchema({ ...props, intl });
+  const onChangeField = (id, value) => {
+    onChangeBlock(block, {
+      ...data,
+      [id]: value,
+    });
+  };
+
+  return (
+    <BlockDataForm
+      schema={schema}
+      title={schema.title}
+      onChangeField={onChangeField}
+      onChangeBlock={onChangeBlock}
+      formData={data}
+      block={block}
+      blocksConfig={blocksConfig}
+      navRoot={navRoot}
+      contentType={contentType}
+    />
+  );
+};
+
+export default CalendarioBlockData;

frontend/packages/portalbrasil-intranet/src/components/Blocks/Calendario/DefaultView.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Calendar } from '@plone/components';
+import '@plone/components/src/styles/basic/Calendar.css';
+
+const CalendarioView = (props) => {
+  const { heading, className } = props;
+  return (
+    <div className={`block calendarioBlock ${className}`}>
+      <h2>{heading}</h2>
+      <Calendar />
+    </div>
+  );
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+CalendarioView.propTypes = {
+  heading: PropTypes.string,
+};
+
+/**
+ * Default properties.
+ * @property {Object} defaultProps Default properties.
+ * @static
+ */
+CalendarioView.defaultProps = {
+  heading: 'Eventos',
+};
+
+export default CalendarioView;

frontend/packages/portalbrasil-intranet/src/components/Blocks/Calendario/Edit.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { withBlockExtensions } from '@plone/volto/helpers';
+import { SidebarPortal } from '@plone/volto/components';
+
+import CalendarioBlockData from './Data';
+import CalendarioBlockView from './View';
+
+const CalendarioBlockEdit = (props) => {
+  const { data, onChangeBlock, block, selected } = props;
+  return (
+    <>
+      <CalendarioBlockView {...props} isEditMode />
+      <SidebarPortal selected={selected}>
+        <CalendarioBlockData
+          data={data}
+          block={block}
+          onChangeBlock={onChangeBlock}
+        />
+      </SidebarPortal>
+    </>
+  );
+};
+
+export default withBlockExtensions(CalendarioBlockEdit);

frontend/packages/portalbrasil-intranet/src/components/Blocks/Calendario/View.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { withBlockExtensions } from '@plone/volto/helpers';
+import CalendarioView from './DefaultView';
+
+const CalendarioBlockView = (props) => {
+  const { data, isEditMode, className } = props;
+  return (
+    <CalendarioView {...data} isEditMode={isEditMode} className={className} />
+  );
+};
+
+export default withBlockExtensions(CalendarioBlockView);

frontend/packages/portalbrasil-intranet/src/components/Blocks/Calendario/schema.js

@@ -0,0 +1,32 @@
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  blockTitle: {
+    id: 'Calendário',
+    defaultMessage: 'Calendário',
+  },
+  heading: {
+    id: 'Título',
+    defaultMessage: 'Título',
+  },
+});
+
+export const calendarioSchema = (props) => {
+  return {
+    title: props.intl.formatMessage(messages.blockTitle),
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['heading'],
+      },
+    ],
+    properties: {
+      heading: {
+        title: props.intl.formatMessage(messages.heading),
+        default: 'Eventos',
+      },
+    },
+    required: ['heading'],
+  };
+};

frontend/packages/portalbrasil-intranet/src/index.js

@@ -13,6 +13,11 @@ import AreasBlockEdit from './components/Blocks/Areas/Edit';
 import AreasBlockView from './components/Blocks/Areas/View';
 import areasSVG from '@plone/volto/icons/home.svg';
 
+/// Calendario
+import CalendarioBlockEdit from './components/Blocks/Calendario/Edit';
+import CalendarioBlockView from './components/Blocks/Calendario/View';
+import calendarioSVG from '@plone/volto/icons/calendar.svg';
+
 /// Colaboradores
 import ColaboradoresBlockEdit from './components/Blocks/Colaboradores/Edit';
 import ColaboradoresBlockView from './components/Blocks/Colaboradores/View';
@@ -105,6 +110,19 @@ const applyConfig = (config) => {
     blockHasOwnFocusManagement: false,
   };
 
+  config.blocks.blocksConfig.calendarioBlock = {
+    id: 'calendarioBlock',
+    title: 'Calendário',
+    group: 'intranet',
+    icon: calendarioSVG,
+    view: CalendarioBlockView,
+    edit: CalendarioBlockEdit,
+    // restricted: ({ properties }) => properties.portal_type !== 'Area',
+    mostUsed: false,
+    sidebarTab: 1,
+    blockHasOwnFocusManagement: false,
+  };
+
   config.blocks.blocksConfig.colaboradoresBlock = {
     id: 'colaboradoresBlock',
     title: 'Equipe',

frontend/packages/portalbrasil-intranet/src/theme/_main.scss

@@ -10,5 +10,6 @@
 @import 'views/colaborador';
 @import 'views/servico';
 @import 'views/unauthorized';
+@import 'blocks/calendario';
 @import 'blocks/listing';
 @import 'sections/_intranet';

frontend/packages/portalbrasil-intranet/src/theme/blocks/_calendario.scss

@@ -0,0 +1,4 @@
+// Estilos do bloco de calendário
+.block.calendarioBlock {
+  padding: $spacing-small;
+}