feat: show/hide label in PropertyOptions

SoftwareBrothers · Oct 15, 2020 · df110c6 · df110c6
1 parent a5dbd5b
commit df110c6
Show file tree

Hide file tree

Showing 17 changed files with 71 additions and 64 deletions.
diff --git a/src/backend/decorators/property/property-decorator.spec.ts b/src/backend/decorators/property/property-decorator.spec.ts
@@ -197,6 +197,7 @@ describe('PropertyDecorator', () => {
         'isRequired',
         'isVirtual',
         'props',
+        'hideLabel',
       )
     })
   })

diff --git a/src/backend/decorators/property/property-decorator.ts b/src/backend/decorators/property/property-decorator.ts
@@ -260,6 +260,7 @@ class PropertyDecorator {
       isDisabled: this.isDisabled(),
       label: this.label(),
       type: this.type(),
+      hideLabel: !!this.options.hideLabel,
       reference: this.referenceName(),
       components: this.options.components,
       subProperties: this.subProperties()

diff --git a/src/backend/decorators/property/property-options.interface.ts b/src/backend/decorators/property/property-options.interface.ts
@@ -90,6 +90,12 @@ export default interface PropertyOptions {
    */
   isRequired?: boolean;
 
+  /**
+   * if label should be hidden - false by default
+   * @new in version 3.3
+   */
+  hideLabel?: boolean;
+
   /**
    * Name of the resource to which this property should be a reference.
    * If set - {@link PropertyOptions.type} always returns `reference`

diff --git a/src/frontend/components/app/index.ts b/src/frontend/components/app/index.ts
@@ -12,6 +12,7 @@ export * from './error-message'
 export * from './filter-drawer'
 export * from './logged-in'
 export * from './notice'
+export * from './property-label'
 export { default as SortLink } from './sort-link'
 export * from './sort-link'
 export * from './top-bar'

diff --git a/src/frontend/components/app/property-label/index.ts b/src/frontend/components/app/property-label/index.ts
@@ -0,0 +1 @@
+export * from './property-label'
diff --git a/src/frontend/components/app/property-label/property-label.tsx b/src/frontend/components/app/property-label/property-label.tsx
@@ -0,0 +1,29 @@
+import { Label, LabelProps } from '@admin-bro/design-system'
+import React from 'react'
+import { PropertyJSON } from '../../../interfaces'
+
+export type PropertyLabelProps = {
+  property: PropertyJSON;
+  props?: LabelProps;
+}
+
+const PropertyLabel: React.FC<PropertyLabelProps> = (props) => {
+  const { property, props: labelProps } = props
+
+  if (property.hideLabel) { return null }
+
+  return (
+    <Label
+      htmlFor={property.path}
+      required={property.isRequired}
+      {...labelProps}
+    >
+      {property.label}
+    </Label>
+  )
+}
+
+export {
+  PropertyLabel as default,
+  PropertyLabel,
+}
diff --git a/src/frontend/components/property-type/array/edit.tsx b/src/frontend/components/property-type/array/edit.tsx
@@ -5,6 +5,7 @@ import { RecordJSON } from '../../../interfaces'
 import AddNewItemButton from './add-new-item-translation'
 import { flat } from '../../../../utils'
 import { EditPropertyProps } from '../base-property-props'
+import { PropertyLabel } from '../../app/property-label'
 
 type Props = EditPropertyProps & {
   onChange: (record: RecordJSON) => any;
@@ -102,12 +103,7 @@ export default class Edit extends React.Component<Props> {
     const error = record.errors && record.errors[property.path]
     return (
       <FormGroup error={!!error} data-testid={testId}>
-        <Label
-          htmlFor={property.path}
-          required={property.isRequired}
-        >
-          {property.label}
-        </Label>
+        <PropertyLabel property={property} />
         {this.renderInput()}
         <FormMessage>{error && error.message}</FormMessage>
       </FormGroup>

diff --git a/src/frontend/components/property-type/boolean/edit.tsx b/src/frontend/components/property-type/boolean/edit.tsx
@@ -1,8 +1,9 @@
 import React, { memo } from 'react'
-import { CheckBox, FormGroup, Label, FormMessage } from '@admin-bro/design-system'
+import { CheckBox, FormGroup, FormMessage } from '@admin-bro/design-system'
 
 import { EditPropertyProps } from '../base-property-props'
 import { recordPropertyIsEqual } from '../record-property-is-equal'
+import { PropertyLabel } from '../../app/property-label'
 
 const parseValue = (value): boolean => !(!value || value === 'false')
 
@@ -27,13 +28,7 @@ const Edit: React.FC<EditPropertyProps> = (props) => {
         disabled={property.isDisabled}
         {...property.props}
       />
-      <Label
-        inline
-        htmlFor={property.path}
-        required={property.isRequired}
-      >
-        {property.label}
-      </Label>
+      <PropertyLabel property={property} props={{ inline: true }} />
       <FormMessage>{error && error.message}</FormMessage>
     </FormGroup>
   )

diff --git a/src/frontend/components/property-type/datetime/edit.tsx b/src/frontend/components/property-type/datetime/edit.tsx
@@ -1,8 +1,9 @@
 import React, { memo } from 'react'
-import { DatePicker, Label, FormGroup, FormMessage } from '@admin-bro/design-system'
+import { DatePicker, FormGroup, FormMessage } from '@admin-bro/design-system'
 
 import { EditPropertyProps } from '../base-property-props'
 import { recordPropertyIsEqual } from '../record-property-is-equal'
+import { PropertyLabel } from '../../app/property-label'
 
 const Edit: React.FC<EditPropertyProps> = (props) => {
   const { property, onChange, record } = props
@@ -11,12 +12,7 @@ const Edit: React.FC<EditPropertyProps> = (props) => {
 
   return (
     <FormGroup error={!!error}>
-      <Label
-        htmlFor={property.path}
-        required={property.isRequired}
-      >
-        {property.label}
-      </Label>
+      <PropertyLabel property={property} />
       <DatePicker
         value={value}
         disabled={property.isDisabled}

diff --git a/src/frontend/components/property-type/default-type/edit.tsx b/src/frontend/components/property-type/default-type/edit.tsx
@@ -2,10 +2,11 @@
 import React, { FC, useState, memo, useEffect } from 'react'
 import Select from 'react-select'
 import { withTheme, DefaultTheme } from 'styled-components'
-import { Input, FormMessage, FormGroup, Label, selectStyles } from '@admin-bro/design-system'
+import { Input, FormMessage, FormGroup, selectStyles } from '@admin-bro/design-system'
 
 import { EditPropertyProps } from '../base-property-props'
 import { recordPropertyIsEqual } from '../record-property-is-equal'
+import { PropertyLabel } from '../../app/property-label'
 
 type CombinedProps = EditPropertyProps & {theme: DefaultTheme}
 
@@ -14,12 +15,7 @@ const Edit: FC<CombinedProps> = (props) => {
   const error = record.errors?.[property.path]
   return (
     <FormGroup error={Boolean(error)}>
-      <Label
-        htmlFor={property.path}
-        required={property.isRequired}
-      >
-        {property.label}
-      </Label>
+      <PropertyLabel property={property} />
       {property.availableValues ? <SelectEdit {...props} /> : <TextEdit {...props} />}
       <FormMessage>{error && error.message}</FormMessage>
     </FormGroup>

diff --git a/src/frontend/components/property-type/mixed/edit.tsx b/src/frontend/components/property-type/mixed/edit.tsx
@@ -1,7 +1,8 @@
 import React from 'react'
-import { Section, FormGroup, Label, FormMessage } from '@admin-bro/design-system'
+import { Section, FormGroup, FormMessage } from '@admin-bro/design-system'
 
 import { EditPropertyProps } from '../base-property-props'
+import { PropertyLabel } from '../../app/property-label'
 
 type Props = {
   ItemComponent: typeof React.Component;
@@ -12,13 +13,8 @@ const Edit: React.FC<Props & EditPropertyProps> = (props) => {
   const error = record.errors && record.errors[property.path]
   return (
     <FormGroup error={!!error}>
-      <Label
-        htmlFor={property.path}
-        required={property.isRequired}
-      >
-        {property.label}
-      </Label>
-      <Section>
+      <PropertyLabel property={property} />
+      <Section {...property.props}>
         {property.subProperties.filter(subProperty => !subProperty.isId).map(subProperty => (
           <ItemComponent
             {...props}

diff --git a/src/frontend/components/property-type/password/edit.tsx b/src/frontend/components/property-type/password/edit.tsx
@@ -1,9 +1,10 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 import React, { useState, memo, useEffect } from 'react'
-import { Label, Input, FormGroup, InputGroup, FormMessage, Button, Icon } from '@admin-bro/design-system'
+import { Input, FormGroup, InputGroup, FormMessage, Button, Icon } from '@admin-bro/design-system'
 
 import { EditPropertyProps } from '../base-property-props'
 import { recordPropertyIsEqual } from '../record-property-is-equal'
+import { PropertyLabel } from '../../app/property-label'
 
 const Edit: React.FC<EditPropertyProps> = (props) => {
   const { property, record, onChange } = props
@@ -20,12 +21,7 @@ const Edit: React.FC<EditPropertyProps> = (props) => {
 
   return (
     <FormGroup error={!!error}>
-      <Label
-        htmlFor={property.path}
-        required={property.isRequired}
-      >
-        {property.label}
-      </Label>
+      <PropertyLabel property={property} />
       <InputGroup>
         <Input
           type={isInput ? 'input' : 'password'}

diff --git a/src/frontend/components/property-type/reference/edit.tsx b/src/frontend/components/property-type/reference/edit.tsx
@@ -1,11 +1,12 @@
 import React, { FC, useState, useEffect } from 'react'
 import Select from 'react-select/lib/Async'
 import { withTheme, DefaultTheme } from 'styled-components'
-import { FormGroup, Label, FormMessage, selectStyles } from '@admin-bro/design-system'
+import { FormGroup, FormMessage, selectStyles } from '@admin-bro/design-system'
 
 import ApiClient from '../../../utils/api-client'
 import { EditPropertyProps, SelectRecord } from '../base-property-props'
 import { RecordJSON } from '../../../interfaces'
+import { PropertyLabel } from '../../app/property-label'
 
 type CombinedProps = EditPropertyProps & {theme: DefaultTheme}
 type SelectRecordEnhanced = SelectRecord & {
@@ -74,12 +75,7 @@ const Edit: FC<CombinedProps> = (props) => {
 
   return (
     <FormGroup error={Boolean(error)}>
-      <Label
-        htmlFor={property.path}
-        required={property.isRequired}
-      >
-        {property.label}
-      </Label>
+      <PropertyLabel property={property} />
       <Select
         cacheOptions
         value={selectedOption}

diff --git a/src/frontend/components/property-type/richtext/edit.tsx b/src/frontend/components/property-type/richtext/edit.tsx
@@ -4,7 +4,6 @@
 import React, { FC, memo } from 'react'
 import {
   FormGroup,
-  Label,
   FormMessage,
   RichText,
   QuillOptions,
@@ -13,6 +12,7 @@ import {
 
 import { EditPropertyProps } from '../base-property-props'
 import { recordPropertyIsEqual } from '../record-property-is-equal'
+import { PropertyLabel } from '../../app/property-label'
 
 type CustomType = {
   borderless?: boolean;
@@ -35,12 +35,7 @@ const Edit: FC<EditPropertyProps> = (props) => {
 
   return (
     <FormGroup error={Boolean(error)}>
-      <Label
-        htmlFor={property.path}
-        required={property.isRequired}
-      >
-        {property.label}
-      </Label>
+      <PropertyLabel property={property} />
       <RichText
         {...customProps}
         value={value}

diff --git a/src/frontend/components/property-type/textarea/edit.tsx b/src/frontend/components/property-type/textarea/edit.tsx
@@ -1,9 +1,10 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 import React, { memo, useState, FC, useEffect } from 'react'
-import { Input, Label, FormGroup, FormMessage } from '@admin-bro/design-system'
+import { Input, FormGroup, FormMessage } from '@admin-bro/design-system'
 
 import { EditPropertyProps } from '../base-property-props'
 import { recordPropertyIsEqual } from '../record-property-is-equal'
+import { PropertyLabel } from '../../app/property-label'
 
 const Edit: FC<EditPropertyProps> = (props) => {
   const { onChange, property, record } = props
@@ -19,12 +20,7 @@ const Edit: FC<EditPropertyProps> = (props) => {
 
   return (
     <FormGroup error={Boolean(error)}>
-      <Label
-        htmlFor={property.path}
-        required={property.isRequired}
-      >
-        {property.label}
-      </Label>
+      <PropertyLabel property={property} />
       <Input
         as="textarea"
         rows={(value.match(/\n/g) || []).length + 1}

diff --git a/src/frontend/components/spec/property-json.factory.ts b/src/frontend/components/spec/property-json.factory.ts
@@ -22,4 +22,5 @@ factory.define<PropertyJSON>('PropertyJSON', Object, {
   resourceId: 'someResourceId',
   isVirtual: false,
   props: {},
+  hideLabel: false,
 })
diff --git a/src/frontend/interfaces/property-json.interface.ts b/src/frontend/interfaces/property-json.interface.ts
@@ -94,6 +94,11 @@ export interface PropertyJSON {
    */
   isRequired: boolean;
 
+  /**
+   * if label above the input should be hidden
+   */
+  hideLabel: boolean;
+
   /**
    * Resource to which given property belongs
    */