diff --git a/src/backend/decorators/property/property-decorator.spec.ts b/src/backend/decorators/property/property-decorator.spec.ts index 2f6ad5b7d..aadf0f47b 100644 --- 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 index 5757cc55c..0c214dccb 100644 --- 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 index 0101da471..7de35ef43 100644 --- 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 index 43aeec0ee..e18ea3afb 100644 --- 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 new file mode 100644 index 000000000..9d3dab46b --- /dev/null +++ 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 new file mode 100644 index 000000000..b7aeecc43 --- /dev/null +++ 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 = (props) => { + const { property, props: labelProps } = props + + if (property.hideLabel) { return null } + + return ( + + ) +} + +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 index 30e43239a..bdd8933e7 100644 --- 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 { const error = record.errors && record.errors[property.path] return ( - + {this.renderInput()} {error && error.message} diff --git a/src/frontend/components/property-type/boolean/edit.tsx b/src/frontend/components/property-type/boolean/edit.tsx index a27ab31ab..2b6f93cf6 100644 --- 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 = (props) => { disabled={property.isDisabled} {...property.props} /> - + {error && error.message} ) diff --git a/src/frontend/components/property-type/datetime/edit.tsx b/src/frontend/components/property-type/datetime/edit.tsx index 140c425aa..2b9d16716 100644 --- 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 = (props) => { const { property, onChange, record } = props @@ -11,12 +12,7 @@ const Edit: React.FC = (props) => { return ( - + = (props) => { const error = record.errors?.[property.path] return ( - + {property.availableValues ? : } {error && error.message} diff --git a/src/frontend/components/property-type/mixed/edit.tsx b/src/frontend/components/property-type/mixed/edit.tsx index fe385433e..a4584fe36 100644 --- 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) => { const error = record.errors && record.errors[property.path] return ( - -
+ +
{property.subProperties.filter(subProperty => !subProperty.isId).map(subProperty => ( = (props) => { const { property, record, onChange } = props @@ -20,12 +21,7 @@ const Edit: React.FC = (props) => { return ( - + = (props) => { return ( - + ('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 index ca027c567..6cafba783 100644 --- 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 */