///
import { FieldProps } from "./fields";
import { PreviewComponentProps } from "../preview";
import { ChipColor } from "./colors";
import { EntityReference, EntityValues, GeoPoint } from "./entities";
/**
* @category Entity properties
*/
export declare type CMSType = string | number | boolean | Date | GeoPoint | EntityReference | {
[Key: string]: any;
} | CMSType[];
/**
* @ignore
*/
export declare type AnyProperty = StringProperty | NumberProperty | BooleanProperty | TimestampProperty | GeopointProperty | ReferenceProperty | ArrayProperty | MapProperty;
/**
* @category Entity properties
*/
export declare type Property = T extends string ? StringProperty : T extends number ? NumberProperty : T extends boolean ? BooleanProperty : T extends Date ? TimestampProperty : T extends GeoPoint ? GeopointProperty : T extends EntityReference ? ReferenceProperty : T extends Array ? ArrayProperty : T extends {
[Key: string]: any;
} ? MapProperty : AnyProperty;
/**
* @category Entity properties
*/
export declare type DataType = "number" | "string" | "boolean" | "map" | "array" | "timestamp" | "geopoint" | "reference";
/**
* @category Entity properties
*/
export declare type MediaType = "image" | "video" | "audio";
/**
* Interface including all common properties of a CMS property
* @category Entity properties
*/
interface BaseProperty {
/**
* Datatype of the property
*/
dataType: DataType;
/**
* Property title (e.g. Product)
*/
title?: string;
/**
* Property description, always displayed under the field
*/
description?: string;
/**
* Longer description of a field, displayed under a popover
*/
longDescription?: string;
/**
* Width in pixels of this column in the collection view. If not set
* the width is inferred based on the other configurations
*/
columnWidth?: number;
/**
* Is this a read only property. When set to true, it gets rendered as a
* preview.
*/
readOnly?: boolean;
/**
* Is this field disabled. When set to true, it gets rendered as a
* disabled field. You can also specify a configuration for defining the
* behaviour of disabled properties
*/
disabled?: boolean | PropertyDisabledConfig;
/**
* Rules for validating this property
*/
validation?: PropertyValidationSchema;
}
/**
* @category Entity properties
*/
export interface PropertyDisabledConfig {
/**
* Enable this flag if you would like to clear the value of the field
* when the corresponding property gets disabled.
*
* This is useful for keeping data consistency when you have conditional
* properties.
*/
clearOnDisabled?: boolean;
/**
* Explanation of why this property is disabled (e.g. a different field
* needs to be enabled)
*/
disabledMessage?: string;
/**
* Set this flag to true if you want to hide this field when disabled
*/
hidden?: boolean;
}
/**
* @category Entity properties
*/
export declare type EnumType = number | string;
/**
* We use this type to define mapping between string or number values in
* the data source to a label (such in a select dropdown).
* The key in this Record is the value saved in the datasource, and the value in
* this record is the label displayed in the UI.
* You can add additional customization by assigning a `EnumValueConfig` for the
* label instead of a simple string (for enabling or disabling options and
* choosing colors).
* If you need to ensure the order of the elements you can pass a `Map` instead
* of a plain object.
* @category Entity properties
*/
export declare type EnumValues = Record | Map;
/**
* Configuration for a particular entry in an `EnumValues`
* @category Entity properties
*/
export interface EnumValueConfig {
label: string;
disabled?: boolean;
color?: ChipColor;
}
/**
* Record of properties of an entity or a map property
* @category Entity properties
*/
export declare type Properties = {
[k in keyof M]: Property;
};
/**
* @category Entity properties
*/
export declare type PropertyBuilderProps = {
values: Partial;
previousValues?: Partial;
path: string;
entityId?: string;
};
/**
* @category Entity properties
*/
export declare type PropertyBuilder = ({ values, previousValues, path, entityId }: PropertyBuilderProps) => Property | null;
/**
* @category Entity properties
*/
export declare type PropertyOrBuilder = Property | PropertyBuilder;
/**
* @category Entity properties
*/
export declare type PropertiesOrBuilder = {
[k in keyof M]: PropertyOrBuilder;
};
/**
* @category Entity properties
*/
export interface NumberProperty extends BaseProperty {
dataType: "number";
/**
* Configure how this field is displayed
*/
config?: NumberFieldConfig;
/**
* Rules for validating this property
*/
validation?: NumberPropertyValidationSchema;
}
/**
* @category Entity properties
*/
export interface BooleanProperty extends BaseProperty {
dataType: "boolean";
/**
* Rules for validating this property
*/
validation?: PropertyValidationSchema;
/**
* Configure how this property field is displayed
*/
config?: FieldConfig;
}
/**
* @category Entity properties
*/
export interface StringProperty extends BaseProperty {
dataType: "string";
/**
* Configure how this field is displayed
*/
config?: StringFieldConfig;
/**
* Rules for validating this property
*/
validation?: StringPropertyValidationSchema;
}
/**
* @category Entity properties
*/
export interface ArrayProperty extends BaseProperty {
dataType: "array";
/**
* The property of this array.
* You can specify any property (except another Array property)
* You can leave this field empty only if you are providing a custom field,
* otherwise an error will be thrown.
*/
of?: Property;
/**
* Use this field if you would like to have an array of properties.
* It is useful if you need to have values of different types in the same
* array.
* Each entry of the array is an object with the shape:
* ```
* { type: "YOUR_TYPE", value: "YOUR_VALUE"}
* ```
* Note that you can use any property so `value` can take any value (strings,
* numbers, array, objects...)
* You can customise the `type` and `value` fields to suit your needs.
*
* An example use case for this feature may be a blog entry, where you have
* images and text blocks using markdown.
*/
oneOf?: {
/**
* Record of properties, where the key is the `type` and the value
* is the corresponding property
*/
properties: Record;
/**
* Name of the field to use as the discriminator for type
* Defaults to `type`
*/
typeField?: string;
/**
* Name of the field to use as the value
* Defaults to `value`
*/
valueField?: string;
};
/**
* Rules for validating this property
*/
validation?: ArrayPropertyValidationSchema;
/**
* Configure how this property field is displayed
*/
config?: FieldConfig;
}
/**
* @category Entity properties
*/
export interface MapProperty extends BaseProperty {
dataType: "map";
/**
* Record of properties included in this map.
*/
properties?: Properties>;
/**
* Rules for validating this property
*/
validation?: PropertyValidationSchema;
/**
* Properties that are displayed when as a preview
*/
previewProperties?: Extract[];
/**
* Configure how this property field is displayed
*/
config?: MapFieldConfig;
}
/**
* @category Entity properties
*/
export interface TimestampProperty extends BaseProperty {
dataType: "timestamp";
/**
* Rules for validating this property
*/
validation?: TimestampPropertyValidationSchema;
/**
* If this flag is set to `on_create` or `on_update` this timestamp is
* updated automatically on creation of the entity only or on every
* update (including creation). Useful for creating `created_on` or
* `updated_on` fields
*/
autoValue?: "on_create" | "on_update";
/**
* Configure how this property field is displayed
*/
config?: FieldConfig;
}
/**
* @category Entity properties
*/
export interface GeopointProperty extends BaseProperty {
dataType: "geopoint";
/**
* Rules for validating this property
*/
validation?: PropertyValidationSchema;
/**
* Configure how this property field is displayed
*/
config?: FieldConfig;
}
/**
* @category Entity properties
*/
export interface ReferenceProperty extends BaseProperty {
dataType: "reference";
/**
* Absolute collection path of the collection this reference points to.
* The schema of the entity is inferred based on the root navigation, so
* the filters and search delegate existing there are applied to this view
* as well.
* You can set this prop to `false` if the path is not yet know, e.g.
* you are using a property builder and the path depends on a different
* property.
*/
path: string | false;
/**
* Properties that need to be rendered when displaying a preview of this
* reference. If not specified the first 3 are used. Only the first 3
* specified values are considered.
*/
previewProperties?: (keyof M)[];
/**
* Configure how this property field is displayed
*/
config?: FieldConfig;
}
/**
* Rules to validate any property. Some properties have specific rules
* additionally to these.
* @category Entity properties
*/
export interface PropertyValidationSchema {
/**
* Is this field required
*/
required?: boolean;
/**
* Customize the required message when the property is not set
*/
requiredMessage?: string;
/**
* If the unique flag is set to `true`, you can only have one entity in the
* collection with this value.
*/
unique?: boolean;
/**
* If the uniqueInArray flag is set to `true`, you can only have this value
* once per entry in the parent `ArrayProperty`. It has no effect if this
* property is not a child of an `ArrayProperty`. It works on direct
* children of an `ArrayProperty` or first level children of `MapProperty`
*/
uniqueInArray?: boolean;
}
/**
* Validation rules for numbers
* @category Entity properties
*/
export interface NumberPropertyValidationSchema extends PropertyValidationSchema {
min?: number;
max?: number;
lessThan?: number;
moreThan?: number;
positive?: boolean;
negative?: boolean;
integer?: boolean;
}
/**
* Validation rules for strings
* @category Entity properties
*/
export interface StringPropertyValidationSchema extends PropertyValidationSchema {
length?: number;
min?: number;
max?: number;
matches?: RegExp;
/**
* Message displayed when the input does not satisfy the regex in `matches`
*/
matchesMessage?: string;
email?: boolean;
url?: boolean;
trim?: boolean;
lowercase?: boolean;
uppercase?: boolean;
}
/**
* Validation rules for dates
* @category Entity properties
*/
export interface TimestampPropertyValidationSchema extends PropertyValidationSchema {
min?: Date;
max?: Date;
}
/**
* Validation rules for arrays
* @category Entity properties
*/
export interface ArrayPropertyValidationSchema extends PropertyValidationSchema {
min?: number;
max?: number;
}
/**
* Configure how a field is displayed
* @category Entity properties
*/
export interface FieldConfig {
/**
* If you need to render a custom field, you can create a component that
* takes `FieldProps` as props. You receive the value, a function to
* update the value and additional utility props such as if there is an error.
* You can customize it by passing custom props that are received
* in the component.
*/
Field?: React.ComponentType>;
/**
* Configure how a property is displayed as a preview, e.g. in the collection
* view. You can customize it by passing custom props that are received
* in the component.
*/
Preview?: React.ComponentType>;
/**
* Additional props that are passed to the components defined in `field`
* or in `preview`.
*/
customProps?: CustomProps;
}
/**
* Possible configuration fields for a string property. Note that setting one
* config disables the others.
* @category Entity properties
*/
export interface StringFieldConfig extends FieldConfig {
/**
* Is this string property long enough so it should be displayed in
* a multiple line field. Defaults to false. If set to true,
* the number of lines adapts to the content
*/
multiline?: boolean;
/**
* Should this string property be displayed as a markdown field. If true,
* the field is rendered as a text editors that supports markdown highlight
* syntax. It also includes a preview of the result.
*/
markdown?: boolean;
/**
* You can use the enum values providing a map of possible
* exclusive values the property can take, mapped to the label that it is
* displayed in the dropdown. You can use a simple object with the format
* `value` => `label`, or with the format `value` => `EnumValueConfig` if you
* need extra customization, (like disabling specific options or assigning
* colors). If you need to ensure the order of the elements, you can pass
* a `Map` instead of a plain object.
*/
enumValues?: EnumValues;
/**
* You can specify a `StorageMeta` configuration. It is used to
* indicate that this string refers to a path in Google Cloud Storage.
*/
storageMeta?: StorageMeta;
/**
* If the value of this property is a URL, you can set this flag to true
* to add a link, or one of the supported media types to render a preview
*/
url?: boolean | MediaType;
/**
* Should this string be rendered as a tag instead of just text.
*/
previewAsTag?: boolean;
}
/**
* Additional configuration related to Storage related fields
* @category Entity properties
*/
export interface StorageMeta {
/**
* Media type of this reference, used for displaying the preview
*/
mediaType?: MediaType;
/**
* Absolute path in your bucket. You can specify it directly or use a callback
*/
storagePath: string | ((context: UploadedFileContext) => string);
/**
* File MIME types that can be uploaded to this reference
*/
acceptedFiles?: StorageFileTypes[];
/**
* Specific metadata set in your uploaded file.
* For the default Firebase implementation, the values passed here are of type
* `firebase.storage.UploadMetadata`
*/
metadata?: any;
/**
* Use client side image compression and resizing
* Will only be applied to these MIME types: image/jpeg, image/png and image/webp
*/
imageCompression?: ImageCompression;
/**
* You can use this callback to customize the uploaded filename
* @param context
*/
fileName?: (context: UploadedFileContext) => string;
/**
* When set to true, this flag indicates that the download URL of the file
* will be saved in the datasource instead of the Cloud storage path.
* Note that the generated URL may use a token that, if disabled, may
* make the URL unusable and lose the original reference to Cloud Storage,
* so it is not encouraged to use this flag. Defaults to false
*/
storeUrl?: boolean;
/**
* Define maximal file size in bytes
*/
maxSize?: number;
/**
* Post process the path
*/
postProcess?: (pathOrUrl: string) => Promise;
}
/**
* @category Entity properties
*/
export interface UploadedFileContext {
/**
* Uploaded file
*/
file: File;
/**
* Property field name
*/
name: string;
/**
* Property related to this upload
*/
property: StringProperty | ArrayProperty;
/**
* Entity Id is set if the entity already exists
*/
entityId?: string;
/**
* Values of the current entity
*/
values: EntityValues;
/**
* Storage meta specified by the developer
*/
storageMeta: StorageMeta;
}
/**
* Possible configuration fields for a string property. Note that setting one
* config disables the others.
* @category Entity properties
*/
export interface MapFieldConfig extends FieldConfig {
/**
* Allow the user to add only some of the keys in this map.
* By default all properties of the map have the corresponding field in
* the form view. Setting this flag to true allows to pick only some.
* Useful for map that can have a lot of subproperties that may not be
* needed
*/
pickOnlySomeKeys?: boolean;
}
export interface ImageCompression {
/**
* New image max height (ratio is preserved)
*/
maxHeight?: number;
/**
* New image max width (ratio is preserved)
*/
maxWidth?: number;
/**
* A number between 0 and 100. Used for the JPEG compression.(if no compress is needed, just set it to 100)
*/
quality: number;
}
/**
* MIME types for storage fields
* @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
* @category Entity properties
*/
export declare type StorageFileTypes = "image/*" | "video/*" | "audio/*" | "application/*" | "text/*" | "font/*" | string;
/**
* @category Entity properties
*/
export interface NumberFieldConfig extends FieldConfig {
/**
* You can use the enum values providing a map of possible
* exclusive values the property can take, mapped to the label that it is
* displayed in the dropdown.
*/
enumValues?: EnumValues;
}
export {};