Skip to content
This repository has been archived by the owner on Dec 16, 2024. It is now read-only.

ConfigView Empty Area #2

Open
apeling opened this issue Oct 30, 2023 · 0 comments
Open

ConfigView Empty Area #2

apeling opened this issue Oct 30, 2023 · 0 comments
Assignees
Labels
enhancement New feature or request good first issue Good for newcomers

Comments

@apeling
Copy link
Collaborator

apeling commented Oct 30, 2023

For the purposes of layout flow it would be helpful to implement a new static type to create an Empty area / column.

This can currently be done by using a custom component via a layout like below. This will render an empty column between "Permit Name" and "Type".

import React from 'react';
import { ConfigView } from '@timmons-group/shared-react-components';
import { parseViewLayout } from '@timmons-group/shared-react-components/helpers';

const layout = {
  'layoutKey': 'details',
  'sections': [
    {
      'editable': true,
      'enabled': true,
      'name': 'Summary',
      'description': null,
      'order': 1,
      'columns': true,
      'layout': [
        [
          {
            'label': 'Permit Name',
            'path': 'permitName',
            'type': 0
          },
          {
            type: 'component',
            component: 'SomeEmptyComponent',
          },
          {
            'label': 'Type',
            'path': 'encumbranceType',
            'type': 10
          },
        ]
      ]
    }
  ]
};

const dynamicComponents = {
  SomeEmptyComponent: () => {} // return an empty component to create a blank column
}

const ConfigWithEmptyComponent = ({data}) => {
  const theSections = parseViewLayout(layout, data);
  return (
    <ConfigView sections={theSections} dynamicComponents={dynamicComponents} />
  );
}

Proposed solution is to add a static type to constants.js in the STATIC_TYPES object called "EMPTY".

export const STATIC_TYPES = Object.freeze({

Then modify the rendering logic in ConfigView/ViewField to automatically insert the empty column.

export const ViewField = ({ field }) => {

@apeling apeling added enhancement New feature or request good first issue Good for newcomers labels Oct 30, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
enhancement New feature or request good first issue Good for newcomers
Projects
None yet
Development

No branches or pull requests

2 participants