@logilab/cwelements/build/EntityAttribute.d.ts

Library of reusable React components for building web application with cubicweb

import * as React from 'react';
import { client, providers } from '@logilab/cwclientlibjs';
import { ValidationError, AttributeValueEvent, defaultAttributeValidation, TranslationContext } from './commons';
/**
 * Base interface for components for entity attributes
 */
export declare class EntityAttribute<P extends EntityAttributeProps = EntityAttributeProps, S extends EntityAttributeState = EntityAttributeState> extends React.Component<P, S> {
    static contextType: React.Context<import("./commons").TranslationContextType>;
    context: React.ContextType<typeof TranslationContext>;
    /**
     * Whether the component is currently mounted
     */
    _isMounted: boolean;
}
/**
 * Enum to change rendering if status changed
 * when saving attribute
 */
export declare enum EntityAttributeStateEnum {
    idle = 0,
    changed = 1,
    saving = 2,
    error = 3
}
/**
 * The parameters for attribute components
 */
export interface EntityAttributeProps {
    /**
     * The entity
     */
    entity: providers.Entity;
    /**
     * The schema of the attribute
     */
    attribute: providers.EntityAttributeSchema;
    /**
     * Getter to retrieve the attribute's value on the entity
     */
    getter: (entity: providers.Entity, attribute: providers.EntityAttributeSchema) => any;
    /**
     * Whether the use can edit the attribute's value
     */
    disabled: boolean;
    /**
     * Whether a value for the attribute is required
     */
    isRequired: (attribute: providers.EntityAttributeSchema) => boolean;
    /**
     * The CSS class name(s) for the component in normal conditions
     */
    className: string;
    /**
     * The CSS class name(s) for the component when the attribute's value is invalid
     */
    invalidClassName: string;
    /**
     * Handler of events when a new value input has been received
     */
    onChange: AttributeValueEvent;
    /**
     * The RqlClient to modify the attribute if given
     */
    rqlClient?: client.RqlClient;
    /**
     * Tries to validate the new value for the attribute
     */
    validateValue: AttributeValueEvent;
    /**
     * Event when the input for the attribute is changed by the user
     * @param component The current component (this)
     * @param event The original HTML input event
     */
    onFieldChange: (component: EntityAttribute, event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
    /**
     * Event when the input component lose focus
     * @param component The current component (this)
     * @param event The original HTML input event
     */
    onFieldBlur: (component: EntityAttribute, event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
    /**
     * Event when the input from the user ended
     * @param component The current component (this)
     * @param input The original input in the field
     */
    onFieldInputEnded: (component: EntityAttribute, input: string) => void;
    /**
     * Event when the value for the attribute is changed by the user
     * @param component The current component (this)
     * @param value The new value
     */
    onFieldEditedValue: (component: EntityAttribute, value: any) => void;
    /**
     * Event when the save button is clicked
     * @param component The current component (this)
     * @param value the to be saved value
     */
    onSaveClicked: (component: EntityAttribute, value: any) => void;
    /**
     * Handler when an attribute has been saved in the database
     * if editable is true
     */
    attributeHasBeenSaved: (entity: providers.Entity, attribute: providers.EntityAttributeSchema, value: any) => void;
    /**
     * Handler when an attribute has not been saved in the database
     * because of an error
     * if editable is true
     */
    attributeSavingError: (entity: providers.Entity, attribute: providers.EntityAttributeSchema, value: any, error: string) => void;
    /**
     * Renders the title for the attribute
     * @param component The current component (this)
     */
    renderTitle: (component: EntityAttribute) => JSX.Element;
    /**
     * Renders the input field for the attribute
     * @param component The current component (this)
     */
    renderInput: (component: EntityAttribute) => JSX.Element;
    /**
     * Renders the save button for the attribute
     * @param component The current component (this)
     */
    renderSaveButton: (component: EntityAttribute) => JSX.Element;
    /**
     * Renders the validation message for the attribute
     * @param component The current component (this)
     */
    renderValidation: (component: EntityAttribute) => JSX.Element | null;
    /**
     * Renders the component
     * @param component The current component (this)
     */
    render: (component: EntityAttribute) => JSX.Element;
}
/**
 * The parameters for attribute with unit components
 */
export interface EntityAttributeWithStaticUnitProps extends EntityAttributeProps {
    /**
     * The name of the current user unit
     */
    unitName: string;
    /**
     * Converts the value expressed in the field storage unit into the value expressed in the current user unit
     */
    toCurrentUnit: (value: any) => any;
    /**
     * Converts the value expressed in the current user unit into the value expressed in the field storage unit
     */
    toStorageUnit: (value: number) => number;
}
/**
 * State for this component
 */
export interface EntityAttributeState {
    /**
     * The referenced value in database
     */
    valueReference: string | number | boolean | null | undefined;
    /**
     * The current value for the input field
     */
    value: string | number | boolean | null | undefined;
    /**
     * The current validation error, if any
     */
    validationError: ValidationError | null;
    /**
     * The EntityAttribute state if saving is enable
     */
    savingState: EntityAttributeStateEnum;
}
/**
 * The values for the default parameters of attribute components
 */
export declare const ENTITY_ATTRIBUTE_DEFAULT_PROPS: {
    getter: (entity: providers.Entity, attribute: providers.EntityAttributeSchema) => any;
    disabled: boolean;
    isRequired: (attribute: providers.EntityAttributeSchema) => boolean;
    className: string;
    invalidClassName: string;
    validateValue: typeof defaultAttributeValidation;
    onFieldChange: (component: EntityAttribute, event: React.FormEvent<HTMLInputElement>) => void;
    onFieldBlur: (component: EntityAttribute, event: React.FormEvent<HTMLInputElement>) => void;
    onFieldInputEnded: (component: EntityAttribute, input: string) => void;
    onFieldEditedValue: (component: EntityAttribute, value: any) => void;
    onSaveClicked: (component: EntityAttribute, value: any) => void;
    attributeHasBeenSaved: (_entity: providers.Entity, _attribute: providers.EntityAttributeSchema, _value: any) => void;
    attributeSavingError: (_entity: providers.Entity, _attribute: providers.EntityAttributeSchema, _value: any, _error: string) => void;
    renderTitle: (component: EntityAttribute) => JSX.Element;
    renderInput: (component: EntityAttribute) => JSX.Element;
    renderSaveButton: (component: EntityAttribute) => JSX.Element;
    renderValidation: (component: EntityAttribute) => JSX.Element | null;
    render: (component: EntityAttribute) => JSX.Element;
};
/**
 * Builds a state from the given props
 * @param props The current props
 */
export declare function getEntityAttributeStateFromProps(props: EntityAttributeProps): EntityAttributeState;