@zeedhi/common 1.112.0 → 3.0.0

package/src/components/zd-input/input.ts

@@ -0,0 +1,416 @@
+import { FormatterParserProvider, IDictionary, Mask, Validation } from '@zeedhi/core';
+import debounce from 'lodash.debounce';
+import { ComponentRender } from '../zd-component/component-render';
+import { Form } from '../zd-form/form';
+import { IInput, IInputEvents } from './interfaces';
+
+/**
+ * Base class for Input component.
+ */
+export class Input extends ComponentRender implements IInput {
+	/**
+	 * Input content alignment.
+	 */
+	public align = 'left';
+
+	/**
+	 * Always show error messages even if showHelper is false.
+	 */
+	public alwaysShowError = false;
+
+	/**
+	 * Input auto complete.
+	 */
+	public autofill = true;
+
+	/**
+	 * Add input clear functionality if the input isn't readonly or disabled.
+	 */
+	public clearable = true;
+
+	/**
+	 * Applies specified color to the control.
+	 * It can be the name of material or css color in hex.
+	 */
+	public color = 'primary';
+
+	/**
+	 * Defines smaller input.
+	 */
+	public dense = true;
+
+	/**
+	 * Removes the ability to click or target the input.
+	 */
+	public disabled = false;
+
+	/**
+	 * Defines input events.
+	 */
+	public declare events: IInputEvents;
+
+	/**
+	 * Hint text.
+	 */
+	public hint = '';
+
+	/**
+	 * Defines the input label.
+	 */
+	public label = '';
+
+	/**
+	 * Applies a custom character mask to the input.
+	 */
+	public mask?: any = '';
+
+	/**
+	 * Input max character length.
+	 */
+	public maxLength!: number;
+
+	/**
+	 * Forces hint to always be visible.
+	 */
+	public persistentHint = false;
+
+	/**
+	 * Sets the input’s placeholder text.
+	 */
+	public placeholder = '';
+
+	/**
+	 * Puts input in readonly state.
+	 */
+	public readonly = false;
+
+	/**
+	 * Reverses the input orientation.
+	 */
+	public reverse = false;
+
+	/**
+	 * Rules that will validate the input value.
+	 */
+	public rules: ((value?: any) => boolean | string)[] = [];
+
+	/**
+	 * Shows input border.
+	 */
+	public showBorder = true;
+
+	/**
+	 * Shows input helper.
+	 */
+	public showHelper = true;
+
+	/**
+	 * Shows input label.
+	 */
+	public showLabel = true;
+
+	/**
+	 * Show rules details in input.
+	 */
+	public autoHintDetails = false;
+
+	/**
+	 * Used to watch a value from store.
+	 */
+	public storePath = '';
+
+	/**
+	 * Input validations.
+	 */
+	public validations: IDictionary<IDictionary<string | number>> = {};
+
+	/**
+	 * Optional validation method assigned by view layer.
+	 */
+	private viewValidate?: (silent?: boolean) => Promise<string[]>;
+
+	/**
+	 * Reset validation method assigned by view layer.
+	 */
+	private viewResetValidation?: () => void;
+
+	/**
+	 * Parsed field rules.
+	 */
+	protected parsedValidations: IDictionary<(value?: any) => boolean | string> = {};
+
+	protected formatterFn = FormatterParserProvider.getFormatter('ZdInput');
+
+	protected parserFn = FormatterParserProvider.getParser('ZdInput');
+
+	protected internalDisplayValue = '';
+
+	protected internalValue: any = null;
+
+	public formParent?: Form = this.getFormParent();
+
+	/* istanbul ignore next */
+	/**
+	 * Creates a new Input.
+	 * @param props Input properties
+	 */
+	constructor(props: IInput) {
+		super(props);
+		this.align = this.getInitValue('align', props.align, this.align);
+		this.alwaysShowError = this.getInitValue('alwaysShowError', props.alwaysShowError, this.alwaysShowError);
+		this.autofill = this.getInitValue('autofill', props.autofill, this.autofill);
+		this.clearable = this.getInitValue('clearable', props.clearable, this.clearable);
+		this.color = this.getInitValue('color', props.color, this.color);
+		this.dense = this.getInitValue('dense', props.dense, this.dense);
+		this.disabled = this.getInitValue('disabled', props.disabled, this.disabled);
+		this.hint = this.getInitValue('hint', props.hint, this.hint);
+		this.autoHintDetails = this.getInitValue('autoHintDetails', props.autoHintDetails, this.autoHintDetails);
+		this.label = this.getInitValue('label', props.label, this.label);
+		this.mask = this.getInitValue('mask', props.mask, this.mask);
+		this.maxLength = this.getInitValue('maxLength', props.maxLength, this.maxLength);
+		this.persistentHint = this.getInitValue('persistentHint', props.persistentHint, this.persistentHint);
+		this.placeholder = this.getInitValue('placeholder', props.placeholder, this.placeholder);
+		this.readonly = this.getInitValue('readonly', props.readonly, this.readonly);
+		this.reverse = this.getInitValue('reverse', props.reverse, this.reverse);
+		this.showBorder = this.getInitValue('showBorder', props.showBorder, this.showBorder);
+		this.showHelper = this.getInitValue('showHelper', props.showHelper, this.showHelper);
+		this.showLabel = this.getInitValue('showLabel', props.showLabel, this.showLabel);
+		this.storePath = this.getInitValue('storePath', props.storePath, this.storePath);
+		this.value = this.getInitValue('value', props.value, this.value);
+		this.validations = this.getInitValue('validations', props.validations, this.validations);
+		this.parseValidations(props.validations || {});
+	}
+
+	public onCreated(): void {
+		super.onCreated();
+
+		if (this.formParent) {
+			this.formParent.registerInput(this);
+		}
+	}
+
+	/**
+	 * Validates input.
+	 */
+	public validate() {
+		if (this.viewValidate) {
+			return this.viewValidate();
+		}
+		return Promise.resolve([]);
+	}
+
+	/**
+	 * Sets view validation method.
+	 */
+	public setViewValidate(viewValidate: (silent?: boolean) => Promise<string[]>) {
+		this.viewValidate = viewValidate;
+	}
+
+	/**
+	 * Sets view reset validation method.
+	 */
+	public setViewResetValidation(viewResetValidation: () => void) {
+		this.viewResetValidation = viewResetValidation;
+	}
+
+	/**
+	 * Reset all form validation errors.
+	 * @throws Will throw if viewResetValidation is undefined
+	 */
+	public resetValidation() {
+		if (this.viewResetValidation) {
+			return this.viewResetValidation();
+		}
+
+		throw new Error('viewResetValidation method not assigned');
+	}
+
+	/**
+	 * Adds parsed validations based on field validations.
+	 * @param validations Field validations
+	 */
+	private parseValidations(validations: IDictionary<any>) {
+		Object.keys(validations).forEach((name: string) => this.addValidation(name, validations[name]));
+	}
+
+	/**
+	 * Adds input validation.
+	 * @param name Validation name
+	 * @param config Validation config
+	 */
+	public addValidation(name: string, config?: IDictionary<any>) {
+		const validation = Validation.get(name)(config);
+		(this.validations as any)[name] = config;
+		this.parsedValidations[name] = validation;
+		this.updateRules();
+	}
+
+	/**
+	 * Removes input validation.
+	 * @param name Validation name
+	 */
+	public removeValidation(name: string) {
+		delete this.parsedValidations[name];
+		delete this.validations[name];
+		this.updateRules();
+	}
+
+	/**
+	 * Removes all input validation.
+	 */
+	public clearValidations() {
+		this.parsedValidations = {};
+		this.validations = {};
+		this.rules = [];
+	}
+
+	/**
+	 * Updates input rules.
+	 */
+	protected updateRules() {
+		this.rules = Object.values(this.parsedValidations).map(
+			(validation: (value?: any) => boolean | string) => (value?: any) => {
+				const testValue = value !== undefined ? value : this.value;
+				return validation(testValue);
+			},
+		);
+	}
+
+	/**
+	 * Input value.
+	 */
+	get value(): any {
+		return this.internalValue;
+	}
+
+	set value(value: any) {
+		if (this.internalValue !== value) {
+			this.internalDisplayValue = this.formatter(value);
+			this.internalValue = value;
+		}
+	}
+
+	/**
+	 * Input displayed value.
+	 */
+	get displayValue(): any {
+		return this.internalDisplayValue;
+	}
+
+	set displayValue(value: any) {
+		if (this.internalDisplayValue !== value) {
+			const parsedValue = this.parser(value);
+			this.value = parsedValue;
+			if (!this.mask) {
+				this.internalDisplayValue = value;
+				return;
+			}
+
+			let { mask } = this;
+			if (typeof mask === 'function') {
+				mask = mask(parsedValue);
+			}
+			this.internalDisplayValue = Mask.convertAll(mask, value);
+			this.internalValue = this.parser(this.internalDisplayValue);
+		}
+	}
+
+	/**
+	 * Retrieves a formatted value.
+	 * @param value Any value
+	 * @returns A Formatted value
+	 */
+	public formatter(value: any) {
+		return this.formatterFn(value);
+	}
+
+	/**
+	 * Retrieves a parsed value.
+	 * @param value Any value
+	 * @returns A parsed value
+	 */
+	public parser(value: any) {
+		return this.parserFn(value);
+	}
+
+	/**
+	 * Checks the input value are valid to all applied rules.
+	 * @returns Input is valid
+	 */
+	public isValid(value?: any) {
+		return this.rules.every((rule) => {
+			const testValue = value !== undefined ? value : this.value;
+			return typeof rule(testValue) !== 'string';
+		});
+	}
+
+	private lastChangeValue: any = undefined;
+
+	/**
+	 * Triggered when the input value changes.
+	 * @param event DOM event
+	 * @param element Element clicked
+	 */
+	public change(event?: Event, element?: any) {
+		if (this.value === '') this.value = null;
+
+		if (this.value !== this.lastChangeValue) {
+			this.lastChangeValue = this.value;
+			this.callEvent('change', { event, element, component: this });
+		}
+	}
+
+	protected lastInputValue: any = undefined;
+
+	protected callInputEvent: ({ event, element, component }: IDictionary) => void = debounce(
+		({ event, element, component }: IDictionary) => {
+			this.callEvent('input', { event, element, component });
+		},
+		50,
+	);
+
+	/**
+	 * Triggered when the data is inputted.
+	 * @param event DOM event
+	 * @param element Element focused
+	 */
+	public input(event?: Event, element?: any) {
+		if (this.value !== this.lastInputValue) {
+			this.lastInputValue = this.value;
+			this.callInputEvent({ event, element, component: this });
+		}
+	}
+
+	/**
+	 * Triggered when a keyboard key is released.
+	 * @param event DOM event
+	 * @param element Element that lost the focus
+	 */
+	public keyup(event?: Event, element?: any) {
+		this.callEvent('keyup', { event, element, component: this });
+	}
+
+	/**
+	 * Triggered when the user presses a key on the keyboard.
+	 * @param event DOM event
+	 * @param element Element that lost the focus
+	 */
+	public keydown(event?: Event, element?: any) {
+		this.callEvent('keydown', { event, element, component: this });
+
+		if (!event?.defaultPrevented) {
+			this.callEvent('afterKeydown', { event, element, component: this });
+		}
+	}
+
+	private getFormParent() {
+		let { parent } = this;
+		while (parent && !(parent instanceof Form)) {
+			parent = parent.parent;
+		}
+		return parent;
+	}
+}
+
+FormatterParserProvider.registerFormatter('ZdInput', (value: any) => value);
+FormatterParserProvider.registerParser('ZdInput', (value: any) => value);

package/src/components/zd-input/interfaces.ts

@@ -0,0 +1,38 @@
+import { IDictionary, IEventParam } from '@zeedhi/core';
+import { EventDef, IComponentEvents, IComponentRender } from '../zd-component/interfaces';
+import { Input } from './input';
+
+export type IInputEvent = IEventParam<Input>;
+export interface IInputEvents<T = IEventParam<any>> extends IComponentEvents<T> {
+	change?: EventDef<T>;
+	input?: EventDef<T>;
+	keydown?: EventDef<T>;
+	keyup?: EventDef<T>;
+}
+
+export interface IInput extends IComponentRender {
+	align?: string;
+	alwaysShowError?: boolean;
+	autofill?: boolean;
+	clearable?: boolean;
+	color?: string;
+	dense?: boolean;
+	disabled?: boolean;
+	displayValue?: any;
+	events?: IInputEvents;
+	hint?: string;
+	label?: string;
+	mask?: any;
+	maxLength?: number;
+	persistentHint?: boolean;
+	autoHintDetails?: boolean;
+	placeholder?: string;
+	readonly?: boolean;
+	reverse?: boolean;
+	showBorder?: boolean;
+	showHelper?: boolean;
+	showLabel?: boolean;
+	storePath?: string;
+	validations?: IDictionary<IDictionary<string | number>>;
+	value?: any;
+}

package/src/components/zd-iterable/column-not-found.ts

@@ -0,0 +1,8 @@
+/**
+ * Column not found error
+ */
+export class ColumnNotFoundError extends Error {
+	constructor(name: string, parentName: string) {
+		super(`Column ${name} not found on parent ${parentName}`);
+	}
+}

package/src/components/zd-iterable/column.ts

@@ -0,0 +1,246 @@
+import {
+	Datasource,
+	DatasourceFactory,
+	FormatterParserProvider,
+	IDictionary,
+	Mask,
+	MethodNotAssignedError,
+} from '@zeedhi/core';
+import debounce from 'lodash.debounce';
+import { NonInitializedError } from '../../error/non-initialized';
+import { Component } from '../zd-component/component';
+import { ColumnAlign, ColumnType, IColumn } from './interfaces';
+
+/**
+ * Base class for Column.
+ */
+export class Column extends Component implements IColumn {
+	public align: ColumnAlign = 'left';
+
+	public label = '';
+
+	public width?: string;
+
+	public maxWidth?: string;
+
+	public minWidth?: string;
+
+	public mask = '';
+
+	public type?: ColumnType;
+
+	public actionFixed = false;
+
+	/* column is fixed */
+	public fixed = false;
+
+	public sortable = true;
+
+	public loading = false;
+
+	public componentProps: any = {};
+
+	/** column style property */
+	public style: IDictionary = {};
+
+	/** Type of XLS */
+	public xlsType = '';
+
+	/* Stores Datasource created on ComponentProps */
+	protected lookupDatasource?: Datasource;
+
+	/* Stores lookup data to prevent unnecessary requests */
+	public lookupData: any = {};
+
+	/* Stores lookup data count (only to be reactive and force column update)  */
+	public lookupDataCount = 0;
+
+	/* Stores data to lookup (it is not initialized to not be reactive) */
+	protected dataToLookup?: any[];
+
+	/**
+	 * Column overflow behaviour when column has max width
+	 * 'ellipsis' - show ellipsis (...) at end
+	 * 'hidden' - just crop value
+	 * 'wrap' - show value using multiple lines
+	 * <2..5> - show value using multiple lines with <number> max lines (line-clamp)
+	 */
+	public overflow: string | number = 'ellipsis';
+
+	/* Conditional properties */
+	public conditions: IDictionary = {};
+
+	/**
+	 * Method to get the current column width, assigned by view layer.
+	 */
+	private viewGetWidth?: () => number;
+
+	public helperText = '';
+
+	protected defaultData: IDictionary[] = [];
+
+	private lookup: (lookupColumn: string) => void = () => {
+		throw new NonInitializedError(this.constructor.name);
+	};
+
+	/**
+	 * Defines if the column should store the componentProps datasource.data in memory
+	 */
+	public storeData = true;
+
+	/**
+	 * Creates a new Column.
+	 * @param props Column properties
+	 */
+	constructor(props: IColumn) {
+		super(props);
+		this.align = this.getInitValue('align', props.align, this.align);
+		this.label = this.getInitValue('label', props.label, this.label);
+		this.width = this.getInitValue('width', props.width, this.width);
+		this.maxWidth = this.getInitValue('maxWidth', props.maxWidth, this.maxWidth);
+		this.minWidth = this.getInitValue('minWidth', props.minWidth, this.minWidth);
+		this.mask = this.getInitValue('mask', props.mask, this.mask);
+		this.overflow = this.getInitValue('overflow', props.overflow, this.overflow);
+		this.type = this.getInitValue('type', props.type, this.type);
+		this.actionFixed = this.getInitValue('actionFixed', props.actionFixed, this.actionFixed);
+		this.fixed = this.getInitValue('fixed', props.fixed, this.fixed);
+		this.sortable = this.getInitValue('sortable', props.sortable, this.sortable);
+		this.loading = this.getInitValue('loading', props.loading, this.loading);
+		this.style = this.getInitValue('style', props.style, this.style);
+		this.componentProps = this.getInitValue('componentProps', props.componentProps, this.componentProps);
+		this.xlsType = this.getInitValue('xlsType', props.xlsType, this.xlsType);
+		this.conditions = this.getInitValue('conditions', props.conditions, this.conditions);
+		this.helperText = this.getInitValue('helperText', props.helperText, this.helperText);
+		this.storeData = this.getInitValue('storeData', props.storeData, this.storeData);
+		if (this.componentProps.datasource) {
+			this.lookupDatasource = DatasourceFactory.factory({
+				...this.componentProps.datasource,
+				lazyLoad: true,
+				loadAll: true,
+			});
+			this.lookupDatasource?.initialize();
+			this.defaultData = this.lookupDatasource?.data || this.defaultData;
+		}
+		this.createAccessors();
+	}
+
+	/**
+	 * Sets view getWidth method.
+	 */
+	public setViewGetWidth(viewGetWidth: () => number) {
+		this.viewGetWidth = viewGetWidth;
+	}
+
+	/**
+	 * * Sets a filter to lookupData.
+	 */
+	public setLookupDataFilter(filter: IDictionary) {
+		this.lookupDatasource?.setFilter(filter);
+	}
+
+	/**
+	 * Gets the column width.
+	 */
+	public getWidth() {
+		if (this.viewGetWidth) {
+			return this.viewGetWidth();
+		}
+
+		throw new MethodNotAssignedError('viewGetWidth');
+	}
+
+	public formatterByRow(row: IDictionary<any>, cellProps?: IDictionary) {
+		const value = row[this.name];
+
+		const formatterFn = FormatterParserProvider.getFormatter(`column_${this.componentProps.component}`);
+		if (formatterFn) {
+			return formatterFn({
+				column: this,
+				value,
+				row,
+				componentProps: { ...this.componentProps, ...cellProps },
+			});
+		}
+
+		return this.formatter(value, cellProps);
+	}
+
+	public formatter(value: any, cellProps?: IDictionary) {
+		const formatterFn = FormatterParserProvider.getFormatter(this.componentProps.component);
+		if (formatterFn) {
+			return formatterFn(value, { ...this.componentProps, ...cellProps });
+		}
+
+		return value ? Mask.getValueWithMask(value, this.mask) : value;
+	}
+
+	public getLookupData(lookupColumn: string, value: any) {
+		const emptyRow = {};
+
+		if (this.lookupData[value]) {
+			return this.lookupData[value];
+		}
+		this.lookupData[value] = emptyRow;
+
+		const dataIndex = this.lookupDatasource?.data.findIndex((row) => row[lookupColumn] === value) || 0;
+		if (dataIndex !== -1) {
+			this.lookupData[value] = this.lookupDatasource?.data[dataIndex];
+			return this.lookupData[value];
+		}
+
+		const hasLookupColumn = this.lookupDatasource?.data.every((row) => Reflect.has(row, lookupColumn));
+
+		if (hasLookupColumn) {
+			this.dataToLookup = this.dataToLookup || [];
+			this.dataToLookup.push(value);
+			this.lookup(lookupColumn);
+		} else {
+			console.warn(`Row datasource do not have a key: ${lookupColumn}`);
+		}
+
+		return emptyRow;
+	}
+
+	/**
+	 * Initialize the lookup property, properly setting the debounced function
+	 */
+	public initialize() {
+		this.lookup = debounce(this.lookupFn, 100);
+	}
+
+	protected async lookupFn(lookupColumn: string, dataToLookup?: any[]) {
+		let data: IDictionary[] = [];
+		this.loading = true;
+		if (this.storeData) {
+			data = await this.lookupDatasource!.get();
+		} else {
+			const filteredData = Array.from(new Set(dataToLookup || this.dataToLookup)); // remove duplicates
+			if (!dataToLookup) {
+				this.dataToLookup = [];
+			}
+
+			data = await this.lookupDatasource!.addFilter(lookupColumn, filteredData);
+		}
+
+		const lookupData: IDictionary = {};
+		data.forEach((row) => {
+			lookupData[row[lookupColumn]] = row;
+		});
+		this.lookupData = { ...this.lookupData, ...lookupData };
+		this.lookupDataCount += 1;
+		this.loading = false;
+	}
+
+	/**
+	 * Clear lookupData to force new requests
+	 */
+	public clearLookupData() {
+		this.lookupData = {};
+		if (this.componentProps.datasource) this.componentProps.datasource.data = this.defaultData;
+	}
+
+	public onBeforeDestroy() {
+		super.onBeforeDestroy();
+		this.lookupDatasource?.destroy();
+	}
+}