Skip to content

Commit

Permalink
refactor: FormTemplate -> ComplexAttributeTemplate
Browse files Browse the repository at this point in the history
  • Loading branch information
awesthouse committed Mar 11, 2024
1 parent 71c2efc commit 1878405
Show file tree
Hide file tree
Showing 12 changed files with 251 additions and 221 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import AddObject from '../../../components/AddObjectButton'
import { OpenObjectButton } from '../../../components/OpenObjectButton'
import RemoveObject from '../../../components/RemoveObjectButton'
import { useRegistryContext } from '../../../context/RegistryContext'
import FormTemplate from '../../../templates/shared/FormTemplate'
import { ComplexAttributeTemplate } from '../../../templates'
import { TArrayTemplate } from '../../../types'
import {
getCanOpenOrExpand,
Expand Down Expand Up @@ -34,9 +34,9 @@ export const ArrayComplexTemplate = (props: TArrayTemplate) => {
onOpen
)
return (
<FormTemplate>
<FormTemplate.Header>
<FormTemplate.Header.Title
<ComplexAttributeTemplate>
<ComplexAttributeTemplate.Header>
<ComplexAttributeTemplate.Header.Title
canExpand={canExpand}
objectIsNotEmpty={isDefined}
canOpen={canOpen}
Expand All @@ -53,7 +53,7 @@ export const ArrayComplexTemplate = (props: TArrayTemplate) => {
icon={list}
uiAttribute={uiAttribute}
/>
<FormTemplate.Header.Actions uiAttribute={uiAttribute}>
<ComplexAttributeTemplate.Header.Actions uiAttribute={uiAttribute}>
{canOpen && (
<OpenObjectButton
viewId={namePath}
Expand All @@ -79,9 +79,9 @@ export const ArrayComplexTemplate = (props: TArrayTemplate) => {
onAdd={() => setInitialValue([])}
/>
))}
</FormTemplate.Header.Actions>
</FormTemplate.Header>
<FormTemplate.Content
</ComplexAttributeTemplate.Header.Actions>
</ComplexAttributeTemplate.Header>
<ComplexAttributeTemplate.Content
expanded={!!isExpanded}
canExpand={!!canExpand}
padding='px-2 pt-2'
Expand All @@ -91,7 +91,7 @@ export const ArrayComplexTemplate = (props: TArrayTemplate) => {
onOpen={onOpen}
viewConfig={getExpandViewConfig(uiAttribute)}
/>
</FormTemplate.Content>
</FormTemplate>
</ComplexAttributeTemplate.Content>
</ComplexAttributeTemplate>
)
}
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { list } from '@equinor/eds-icons'
import { useState } from 'react'
import { useRegistryContext } from '../../../../context/RegistryContext'
import FormTemplate from '../../../../templates/shared/FormTemplate'
import { ComplexAttributeTemplate } from '../../../../templates'
import { TArrayTemplate, TPrimitive } from '../../../../types'
import { PrimitiveArray } from './PrimitiveArray/PrimitiveArray'

Expand All @@ -21,9 +21,9 @@ export const ArrayPrimitiveListTemplate = (
)

return (
<FormTemplate>
<FormTemplate.Header>
<FormTemplate.Header.Title
<ComplexAttributeTemplate>
<ComplexAttributeTemplate.Header>
<ComplexAttributeTemplate.Header.Title
canExpand={true}
canOpen={false}
isExpanded={isExpanded}
Expand All @@ -33,17 +33,21 @@ export const ArrayPrimitiveListTemplate = (
icon={list}
uiAttribute={uiAttribute}
/>
<FormTemplate.Header.Actions uiAttribute={uiAttribute} />
</FormTemplate.Header>
<FormTemplate.Content padding='' expanded={!!isExpanded} canExpand={true}>
<ComplexAttributeTemplate.Header.Actions uiAttribute={uiAttribute} />
</ComplexAttributeTemplate.Header>
<ComplexAttributeTemplate.Content
padding=''
expanded={!!isExpanded}
canExpand={true}
>
<PrimitiveArray
uiAttribute={uiAttribute}
data={value}
namePath={namePath}
attribute={attribute}
onChange={onChange}
/>
</FormTemplate.Content>
</FormTemplate>
</ComplexAttributeTemplate.Content>
</ComplexAttributeTemplate>
)
}
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import AddObjectBySearchButton from '../../../components/AddObjectBySearchButton
import { OpenObjectButton } from '../../../components/OpenObjectButton'
import RemoveObject from '../../../components/RemoveObjectButton'
import { useRegistryContext } from '../../../context/RegistryContext'
import FormTemplate from '../../../templates/shared/FormTemplate'
import { ComplexAttributeTemplate } from '../../../templates'
import { TObjectTemplate } from '../../../types'
import {
getCanOpenOrExpand as getCanOpenExpand,
Expand Down Expand Up @@ -34,9 +34,9 @@ export const ObjectModelContainedTemplate = (
onOpen
)
return (
<FormTemplate>
<FormTemplate.Header>
<FormTemplate.Header.Title
<ComplexAttributeTemplate>
<ComplexAttributeTemplate.Header>
<ComplexAttributeTemplate.Header.Title
canExpand={canExpand}
canOpen={canOpen}
isExpanded={isExpanded}
Expand All @@ -53,7 +53,7 @@ export const ObjectModelContainedTemplate = (
uiAttribute={uiAttribute}
namePath={namePath}
/>
<FormTemplate.Header.Actions uiAttribute={uiAttribute}>
<ComplexAttributeTemplate.Header.Actions uiAttribute={uiAttribute}>
{canOpen && (
<OpenObjectButton
viewId={namePath}
Expand Down Expand Up @@ -91,9 +91,12 @@ export const ObjectModelContainedTemplate = (
namePath={namePath}
/>
)}
</FormTemplate.Header.Actions>
</FormTemplate.Header>
<FormTemplate.Content expanded={!!isExpanded} canExpand={!!canExpand}>
</ComplexAttributeTemplate.Header.Actions>
</ComplexAttributeTemplate.Header>
<ComplexAttributeTemplate.Content
expanded={!!isExpanded}
canExpand={!!canExpand}
>
<ViewCreator
idReference={`${idReference}.${attribute.name}`}
onOpen={onOpen}
Expand All @@ -109,7 +112,7 @@ export const ObjectModelContainedTemplate = (
)
}
/>
</FormTemplate.Content>
</FormTemplate>
</ComplexAttributeTemplate.Content>
</ComplexAttributeTemplate>
)
}
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { OpenObjectButton } from '../../../components/OpenObjectButton'
import RemoveObject from '../../../components/RemoveObjectButton'
import { SelectReference } from '../../../components/SelectReference'
import { useRegistryContext } from '../../../context/RegistryContext'
import FormTemplate from '../../../templates/shared/FormTemplate'
import { ComplexAttributeTemplate } from '../../../templates'
import { TObjectTemplate } from '../../../types'
import {
getCanOpenOrExpand,
Expand Down Expand Up @@ -46,9 +46,9 @@ export const ObjectModelUncontainedTemplate = (
onOpen
)
return (
<FormTemplate>
<FormTemplate.Header>
<FormTemplate.Header.Title
<ComplexAttributeTemplate>
<ComplexAttributeTemplate.Header>
<ComplexAttributeTemplate.Header.Title
canExpand={canExpand}
canOpen={canOpen}
isExpanded={isExpanded}
Expand All @@ -61,7 +61,7 @@ export const ObjectModelUncontainedTemplate = (
icon={link}
uiAttribute={uiAttribute}
/>
<FormTemplate.Header.Actions uiAttribute={uiAttribute}>
<ComplexAttributeTemplate.Header.Actions uiAttribute={uiAttribute}>
{canOpen && (
<OpenObjectButton
viewId={namePath}
Expand All @@ -86,15 +86,18 @@ export const ObjectModelUncontainedTemplate = (
namePath={namePath}
/>
)}
</FormTemplate.Header.Actions>
</FormTemplate.Header>
<FormTemplate.Content expanded={!!isExpanded} canExpand={!!canExpand}>
</ComplexAttributeTemplate.Header.Actions>
</ComplexAttributeTemplate.Header>
<ComplexAttributeTemplate.Content
expanded={!!isExpanded}
canExpand={!!canExpand}
>
<ViewCreator
idReference={address ?? ''}
onOpen={onOpen}
viewConfig={getExpandViewConfig(uiAttribute)}
/>
</FormTemplate.Content>
</FormTemplate>
</ComplexAttributeTemplate.Content>
</ComplexAttributeTemplate>
)
}
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { useFormContext } from 'react-hook-form'
import { OpenObjectButton } from '../../../components/OpenObjectButton'
import RemoveObject from '../../../components/RemoveObjectButton'
import { useRegistryContext } from '../../../context/RegistryContext'
import FormTemplate from '../../../templates/shared/FormTemplate'
import { ComplexAttributeTemplate } from '../../../templates'
import { TObjectTemplate } from '../../../types'
import {
getCanOpenOrExpand,
Expand Down Expand Up @@ -36,9 +36,9 @@ export const ObjectStorageUncontainedTemplate = (props: TObjectTemplate) => {
)

return (
<FormTemplate>
<FormTemplate.Header>
<FormTemplate.Header.Title
<ComplexAttributeTemplate>
<ComplexAttributeTemplate.Header>
<ComplexAttributeTemplate.Header.Title
canExpand={canExpand}
canOpen={canOpen}
isExpanded={isExpanded}
Expand All @@ -50,7 +50,7 @@ export const ObjectStorageUncontainedTemplate = (props: TObjectTemplate) => {
}
uiAttribute={uiAttribute}
/>
<FormTemplate.Header.Actions uiAttribute={uiAttribute}>
<ComplexAttributeTemplate.Header.Actions uiAttribute={uiAttribute}>
{canOpen && referenceExists && (
<OpenObjectButton
viewId={namePath}
Expand All @@ -68,14 +68,14 @@ export const ObjectStorageUncontainedTemplate = (props: TObjectTemplate) => {
{attribute.optional && referenceExists && !config.readOnly && (
<RemoveObject namePath={namePath} />
)}
</FormTemplate.Header.Actions>
</FormTemplate.Header>
</ComplexAttributeTemplate.Header.Actions>
</ComplexAttributeTemplate.Header>
<div
className={`${
canExpand && isExpanded && referenceExists ? '' : 'hidden'
}`}
>
<FormTemplate.Content
<ComplexAttributeTemplate.Content
expanded={!!isExpanded}
canExpand={!!(canExpand && referenceExists)}
>
Expand All @@ -84,8 +84,8 @@ export const ObjectStorageUncontainedTemplate = (props: TObjectTemplate) => {
onOpen={onOpen}
viewConfig={getExpandViewConfig(uiAttribute)}
/>
</FormTemplate.Content>
</ComplexAttributeTemplate.Content>
</div>
</FormTemplate>
</ComplexAttributeTemplate>
)
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { PropsWithChildren } from 'react'
import { ComplexAttributeTemplateContent } from './ComplexAttributeTemplateContent'
import { ComplexAttributeTemplateHeader } from './ComplexAttributeTemplateHeader'

export const ComplexAttributeTemplate = ({ children }: PropsWithChildren) => {
return (
<div className='border border-[#dddddd] rounded-md w-full'>{children}</div>
)
}

ComplexAttributeTemplate.Header = ComplexAttributeTemplateHeader
ComplexAttributeTemplate.Content = ComplexAttributeTemplateContent
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import React from 'react'

type ComplexAttributeTemplateContentProps = {
children: React.ReactNode
expanded: boolean
canExpand: boolean
padding?: string
}

export const ComplexAttributeTemplateContent = ({
children,
padding,
expanded,
canExpand,
}: ComplexAttributeTemplateContentProps) => {
return (
<>
{canExpand && (
<div
className={`border-t border-[#dddddd] ${padding ?? 'p-2'} w-full ${
expanded ? '' : 'hidden'
}`}
>
{children}
</div>
)}
</>
)
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import React from 'react'
import { ComplexAttributeTemplateHeaderActions } from './ComplexAttributeTemplateHeaderActions'
import { ComplexAttributeTemplateHeaderTitle } from './ComplexAttributeTemplateHeaderTitle'

export const ComplexAttributeTemplateHeader = ({
children,
objectIsNotEmpty = true,
}: { children: React.ReactNode; objectIsNotEmpty?: boolean }) => {
return (
<legend className='flex h-10 justify-between bg-equinor-lightgray items-center pr-2 rounded-[inherit] transition duration-75'>
{children}
</legend>
)
}

ComplexAttributeTemplateHeader.Title = ComplexAttributeTemplateHeaderTitle
ComplexAttributeTemplateHeader.Actions = ComplexAttributeTemplateHeaderActions
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { EdsProvider, Icon, Tooltip } from '@equinor/eds-core-react'
import { info_circle } from '@equinor/eds-icons'
import { tokens } from '@equinor/eds-tokens'
import React from 'react'
import { TUiAttribute } from '../../types'

export const ComplexAttributeTemplateHeaderActions = ({
children,
uiAttribute,
}: { children?: React.ReactNode; uiAttribute?: TUiAttribute }) => {
return (
<div className='flex items-center'>
{uiAttribute?.tooltip && (
<EdsProvider density='compact'>
<Tooltip title={uiAttribute?.tooltip}>
<Icon
data={info_circle}
size={16}
color={tokens.colors.interactive.primary__resting.hex}
/>
</Tooltip>
</EdsProvider>
)}
{children}
</div>
)
}
Loading

0 comments on commit 1878405

Please sign in to comment.