@salla.sa/twilight-components
Version:
Salla Web Component
73 lines (72 loc) • 2.82 kB
TypeScript
import { UserInstance, CustomField } from './interfaces';
/**
* The SallaUserProfile is a versatile user profile form
* generator within the Salla platform, offering localization support,
* customizable fields, and seamless integration with the Salla API.
* It dynamically fetches translated strings for labels and messages from the
* Salla localization object, allowing for a multilingual user interface. Users
* can extend the default form with custom fields through the `customFields`
* property and the setCustomFields method. The component manages user data
* retrieval from the Salla configuration and includes fields for first name,
* last name, birthday, gender, email, mobile, and custom additions. Form
* validation and submission are handled through various event handlers, ensuring
* proper field handling and user input validation. The component supports file
* uploads for photo fields and includes a dedicated phone number input field.
* The componentWillLoad lifecycle method fetches additional user profile
* information from the API during initialization. Overall, this component
* provides an efficient and adaptable solution for creating user profiles with a
* rich set of features and customization options.
*/
export declare class SallaUserProfile {
constructor();
/**
* Custome fields to be rendered in addition to the default ones.
*/
customFields: string;
/**
* The minimum allowed age for a user. Users with a birthdate indicating an age less than this value will be considered invalid.
* Defaults to 10.
* @type {number}
*/
minAge: number;
userData: UserInstance;
isEditable: boolean;
userDefinedFields: CustomField[];
disableAction: boolean;
isLoading: boolean;
first_name_trans: any;
last_name_trans: any;
birthday_trans: any;
birthday_placeholder_trans: any;
gender_trans: any;
gender_placeholder_trans: any;
male_trans: any;
female_trans: any;
email_trans: any;
mobile_trans: any;
save_btn_trans: any;
drag_and_drop_trans: any;
browse_trans: any;
email_required_trans: any;
invalid_email_trans: any;
/**
* Sets custom fields for the component. Can be handy for non HTML usage.
*
* @param fields - An array of custom fields.
*/
setCustomFields(fields: CustomField[]): Promise<void>;
private phoneNumberFieldEventHandler;
private handleFieldChange;
private handleOnFileAdded;
private handleEmailInput;
private trimLanguageCodeFromUrl;
private getFileUploadUrl;
private renderCustomFields;
private renderCustomField;
private submitForm;
private getBirthDateRestriction;
private fetchData;
private renderLoadingSection;
componentWillLoad(): void;
render(): any;
}