@eeacms/volto-eea-website-theme 1.34.0 → 2.0.0

package/src/customizations/volto/components/manage/Display/Display.jsx

@@ -0,0 +1,306 @@
+import React, { Component, Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+
+import jwtDecode from 'jwt-decode';
+import {
+  getSchema,
+  getUser,
+  updateContent,
+  getContent,
+} from '@plone/volto/actions';
+import { getLayoutFieldname } from '@plone/volto/helpers';
+import { FormFieldWrapper, Icon } from '@plone/volto/components';
+import { defineMessages, injectIntl } from 'react-intl';
+import config from '@plone/volto/registry';
+
+import downSVG from '@plone/volto/icons/down-key.svg';
+import upSVG from '@plone/volto/icons/up-key.svg';
+import checkSVG from '@plone/volto/icons/check.svg';
+
+const messages = defineMessages({
+  Viewmode: {
+    id: 'Viewmode',
+    defaultMessage: 'View',
+  },
+});
+
+const Option = injectLazyLibs('reactSelect')((props) => {
+  const { Option } = props.reactSelect.components;
+  return (
+    <Option {...props}>
+      <div>{props.label}</div>
+      {props.isFocused && !props.isSelected && (
+        <Icon name={checkSVG} size="18px" color="#b8c6c8" />
+      )}
+      {props.isSelected && <Icon name={checkSVG} size="18px" color="#007bc1" />}
+    </Option>
+  );
+});
+
+const DropdownIndicator = injectLazyLibs('reactSelect')((props) => {
+  const { DropdownIndicator } = props.reactSelect.components;
+  return (
+    <DropdownIndicator {...props}>
+      {props.selectProps.menuIsOpen ? (
+        <Icon name={upSVG} size="24px" color="#007bc1" />
+      ) : (
+        <Icon name={downSVG} size="24px" color="#007bc1" />
+      )}
+    </DropdownIndicator>
+  );
+});
+
+const selectTheme = (theme) => ({
+  ...theme,
+  borderRadius: 0,
+  colors: {
+    ...theme.colors,
+    primary25: 'hotpink',
+    primary: '#b8c6c8',
+  },
+});
+
+const customSelectStyles = {
+  control: (styles, state) => ({
+    ...styles,
+    border: 'none',
+    borderBottom: '2px solid #b8c6c8',
+    boxShadow: 'none',
+    borderBottomStyle: state.menuIsOpen ? 'dotted' : 'solid',
+  }),
+  menu: (styles, state) => ({
+    ...styles,
+    top: null,
+    marginTop: 0,
+    boxShadow: 'none',
+    borderBottom: '2px solid #b8c6c8',
+  }),
+  menuList: (styles, state) => ({
+    ...styles,
+    maxHeight: '400px',
+  }),
+  indicatorSeparator: (styles) => ({
+    ...styles,
+    width: null,
+  }),
+  valueContainer: (styles) => ({
+    ...styles,
+    padding: 0,
+  }),
+  option: (styles, state) => ({
+    ...styles,
+    backgroundColor: null,
+    minHeight: '50px',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: '12px 12px',
+    color: state.isSelected
+      ? '#007bc1'
+      : state.isFocused
+      ? '#4a4a4a'
+      : 'inherit',
+    ':active': {
+      backgroundColor: null,
+    },
+    span: {
+      flex: '0 0 auto',
+    },
+    svg: {
+      flex: '0 0 auto',
+    },
+  }),
+};
+
+/**
+ * Display container class.
+ * @class Display
+ * @extends Component
+ */
+class DisplaySelect extends Component {
+  /**
+   * Property types.
+   * @property {Object} propTypes Property types.
+   * @static
+   */
+  static propTypes = {
+    getSchema: PropTypes.func.isRequired,
+    updateContent: PropTypes.func.isRequired,
+    getContent: PropTypes.func.isRequired,
+    loaded: PropTypes.bool.isRequired,
+    pathname: PropTypes.string.isRequired,
+    layouts: PropTypes.arrayOf(PropTypes.string),
+    layout: PropTypes.string,
+    type: PropTypes.string.isRequired,
+  };
+
+  /**
+   * Default properties
+   * @property {Object} defaultProps Default properties.
+   * @static
+   */
+  static defaultProps = {
+    layouts: [],
+    layout: '',
+    rolesWhoCanChangeLayout: [],
+  };
+
+  state = {
+    hasMatchingRole: false,
+    selectedOption: {
+      value: this.props.layout,
+      label: config.views.layoutViewsNamesMapping?.[this.props.layout]
+        ? this.props.intl.formatMessage({
+            id: config.views.layoutViewsNamesMapping?.[this.props.layout],
+            defaultMessage:
+              config.views.layoutViewsNamesMapping?.[this.props.layout],
+          })
+        : this.props.layout,
+    },
+  };
+
+  componentDidMount() {
+    this.props.getSchema(this.props.type);
+  }
+
+  UNSAFE_componentWillMount() {
+    if (!this.props.rolesWhoCanChangeLayout.length) {
+      this.props.rolesWhoCanChangeLayout.push(
+        ...(config?.settings?.eea?.rolesWhoCanChangeLayout || []),
+      );
+    }
+    if (!this.props.layouts.length) {
+      this.props.getSchema(this.props.type);
+    }
+    if (Object.keys(this.props.user).length === 0) {
+      this.props.getUser(this.props.userId);
+    } else {
+      const hasMatchingRole = this.props.user.roles.some((role) =>
+        this.props.rolesWhoCanChangeLayout.includes(role),
+      );
+      if (hasMatchingRole !== this.state.hasMatchingRole) {
+        this.setState({ hasMatchingRole });
+      }
+    }
+  }
+
+  /**
+   * Component will receive props
+   * @method componentWillReceiveProps
+   * @param {Object} nextProps Next properties
+   * @returns {undefined}
+   */
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.pathname !== this.props.pathname) {
+      this.props.getSchema(nextProps.type);
+    }
+    if (!this.props.loaded && nextProps.loaded) {
+      this.props.getContent(nextProps.pathname);
+    }
+
+    if (Object.keys(nextProps.user).length !== 0) {
+      const hasMatchingRole = nextProps.user.roles.some((role) =>
+        this.props.rolesWhoCanChangeLayout.includes(role),
+      );
+      if (hasMatchingRole !== this.state.hasMatchingRole) {
+        this.setState({ hasMatchingRole });
+      }
+    }
+  }
+
+  /**
+   * On set layout handler
+   * @method setLayout
+   * @param {Object} event Event object
+   * @returns {undefined}
+   */
+  setLayout = (selectedOption) => {
+    this.props.updateContent(this.props.pathname, {
+      layout: selectedOption.value,
+    });
+    this.setState({ selectedOption });
+  };
+
+  selectValue = (option) => (
+    <Fragment>
+      <span className="Select-value-label">{option.label}</span>
+    </Fragment>
+  );
+
+  optionRenderer = (option) => (
+    <Fragment>
+      <span style={{ marginRight: 'auto' }}>{option.label}</span>
+      <Icon name={checkSVG} size="24px" />
+    </Fragment>
+  );
+
+  render() {
+    if (!this.state.hasMatchingRole) {
+      return null;
+    }
+    const { selectedOption } = this.state;
+    const Select = this.props.reactSelect.default;
+    const layoutsNames = config.views.layoutViewsNamesMapping;
+    const layoutOptions = this.props.layouts
+      .filter(
+        (layout) =>
+          Object.keys(config.views.contentTypesViews).includes(layout) ||
+          Object.keys(config.views.layoutViews).includes(layout),
+      )
+      .map((item) => ({
+        value: item,
+        label:
+          this.props.intl.formatMessage({
+            id: layoutsNames[item],
+            defaultMessage: layoutsNames[item],
+          }) || item,
+      }));
+
+    return layoutOptions?.length > 1 ? (
+      <FormFieldWrapper
+        id="display-select"
+        title={this.props.intl.formatMessage(messages.Viewmode)}
+        {...this.props}
+      >
+        <Select
+          name="display-select"
+          className="react-select-container"
+          classNamePrefix="react-select"
+          options={layoutOptions}
+          styles={customSelectStyles}
+          theme={selectTheme}
+          components={{ DropdownIndicator, Option }}
+          onChange={this.setLayout}
+          defaultValue={selectedOption}
+          isSearchable={false}
+        />
+      </FormFieldWrapper>
+    ) : null;
+  }
+}
+
+export default compose(
+  injectIntl,
+  injectLazyLibs('reactSelect'),
+  connect(
+    (state) => ({
+      loaded: state.content.update.loaded,
+      layouts: state.schema.schema ? state.schema.schema.layouts : [],
+      layout: state.content.data
+        ? state.content.data[getLayoutFieldname(state.content.data)]
+        : '',
+      layout_fieldname: state.content.data
+        ? getLayoutFieldname(state.content.data)
+        : '',
+      type: state.content.data ? state.content.data['@type'] : '',
+      user: state.users.user,
+      userId: state.userSession.token
+        ? jwtDecode(state.userSession.token).sub
+        : '',
+    }),
+    { getSchema, getUser, updateContent, getContent },
+  ),
+)(DisplaySelect);

package/src/customizations/volto/components/manage/Display/Readme.md

@@ -0,0 +1 @@
+Added customization to condition the display of the layout options based on the user's roles.

package/src/customizations/volto/components/manage/Sidebar/SidebarPopup copy.jsx

@@ -0,0 +1,82 @@
+// Check this https://github.com/plone/volto/pull/5520
+import React from 'react';
+import { Portal } from 'react-portal';
+import { CSSTransition } from 'react-transition-group';
+import PropTypes from 'prop-types';
+import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
+
+const DEFAULT_TIMEOUT = 500;
+
+const SidebarPopup = (props) => {
+  const { children, open, onClose, overlay } = props;
+
+  const asideElement = React.useRef();
+
+  const handleClickOutside = (e) => {
+    if (asideElement && doesNodeContainClick(asideElement.current, e)) return;
+    onClose();
+  };
+
+  React.useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside, false);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside, false);
+    };
+  });
+
+  return (
+    <>
+      {overlay && (
+        <CSSTransition
+          in={open}
+          timeout={DEFAULT_TIMEOUT}
+          classNames="overlay-container"
+          unmountOnExit
+        >
+          <Portal node={document?.body}>
+            <div className="overlay-container"></div>
+          </Portal>
+        </CSSTransition>
+      )}
+      <CSSTransition
+        in={open}
+        timeout={DEFAULT_TIMEOUT}
+        classNames="sidebar-container"
+        unmountOnExit
+      >
+        <Portal>
+          <aside
+            id="test"
+            role="presentation"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+            onKeyDown={(e) => {
+              e.stopPropagation();
+            }}
+            ref={asideElement}
+            key="sidebarpopup"
+            className="sidebar-container"
+            style={{ overflowY: 'auto' }}
+          >
+            {children}
+          </aside>
+        </Portal>
+      </CSSTransition>
+    </>
+  );
+};
+
+SidebarPopup.propTypes = {
+  open: PropTypes.bool,
+  onClose: PropTypes.func,
+  overlay: PropTypes.bool,
+};
+
+SidebarPopup.defaultProps = {
+  open: false,
+  onClose: () => {},
+  overlay: false,
+};
+
+export default SidebarPopup;