@syncfusion/ej2-inplace-editor
Version:
A package of Essential JS 2 Inplace editor components, which is used to edit and update the value dynamically in server.
344 lines (305 loc) • 13.1 kB
TypeScript
import { Component, INotifyPropertyChanged, NotifyPropertyChanges, Property, Event, EmitType, select } from '@syncfusion/ej2-base';import { detach, addClass, removeClass, EventHandler, setStyleAttribute, Complex, ModuleDeclaration } from '@syncfusion/ej2-base';import { isNullOrUndefined as isNOU, closest, extend, L10n, compile, Browser, Touch, TapEventArgs } from '@syncfusion/ej2-base';import { updateBlazorTemplate, resetBlazorTemplate, SanitizeHtmlHelper, getValue, isBlazor } from '@syncfusion/ej2-base';import { DataManager, UrlAdaptor, Query, WebApiAdaptor, ODataV4Adaptor, ReturnOption, Predicate } from '@syncfusion/ej2-data';import { Button, ButtonModel } from '@syncfusion/ej2-buttons';import { RichTextEditorModel } from '@syncfusion/ej2-richtexteditor';import { DatePicker, DatePickerModel, DateTimePicker, DateRange, RangeEventArgs } from '@syncfusion/ej2-calendars';import { DateTimePickerModel, DateRangePickerModel, TimePickerModel } from '@syncfusion/ej2-calendars';import { createSpinner, hideSpinner, SpinnerArgs, showSpinner} from '@syncfusion/ej2-popups';import { Tooltip, TooltipEventArgs, TipPointerPosition } from '@syncfusion/ej2-popups';import { NumericTextBox, NumericTextBoxModel, TextBox, TextBoxModel, SliderChangeEventArgs, ValidArgs } from '@syncfusion/ej2-inputs';import { ColorPickerModel, FormValidator, MaskedTextBox, MaskedTextBoxModel, SliderModel } from '@syncfusion/ej2-inputs';import { ChangeEventArgs as InputChangeEventArgs, ColorPickerEventArgs } from '@syncfusion/ej2-inputs';import { AutoCompleteModel, ComboBoxModel, DropDownList, DropDownListModel, MultiSelectModel } from '@syncfusion/ej2-dropdowns';import { MultiSelectChangeEventArgs, ChangeEventArgs as DropDownsChangeEventArgs } from '@syncfusion/ej2-dropdowns';import { Rte } from '../modules/rte';import { Slider } from '../modules/slider';import { ComboBox } from '../modules/combo-box';import { TimePicker } from '../modules/time-picker';import { MultiSelect } from '../modules/multi-select';import { ColorPicker } from '../modules/color-picker';import { AutoComplete } from '../modules/auto-complete';import { DateRangePicker } from '../modules/date-range-picker';import * as events from './events';import * as classes from './classes';import { PopupSettings, modulesList, localeConstant } from './models';import { PopupSettingsModel } from './models-model';import { ActionBeginEventArgs, ActionEventArgs, FormEventArgs, ValidateEventArgs, IButton, BeginEditEventArgs } from './interface';import { ChangeEventArgs, EndEditEventArgs } from './interface';import { parseValue, getCompValue, encode } from './util';
import {RenderMode,AdaptorType,InputType,EditableType,textOptionType,ActionBlur,BeforeSanitizeHtmlArgs} from "./inplace-editor";
import {ComponentModel} from '@syncfusion/ej2-base';
/**
* Interface for a class InPlaceEditor
*/
export interface InPlaceEditorModel extends ComponentModel{
/**
* Specifies the name of the field which is used to map data to the server.
* If name is not given, then component ID is taken as mapping field name.
*
* {% codeBlock src='inplace-editor/name/index.md' %}{% endcodeBlock %}
*
* @default ''
*/
name?: string;
/**
* Specifies the display value for input when original input value is empty.
*
* {% codeBlock src='inplace-editor/value/index.md' %}{% endcodeBlock %}
*
* @default null
* @isGenericType true
*/
value?: string | number | Date | string[] | Date[] | number[];
/**
* Specifies the HTML element ID as a string that can be added as a editable field.
*
* {% codeBlock src='inplace-editor/template/index.md' %}{% endcodeBlock %}
*
* @default ''
* @blazorType string
* @aspType string
*/
template?: string | HTMLElement | Function;
/**
* Defines whether to allow the cross-scripting site or not.
*
* @default true
*/
enableHtmlSanitizer?: boolean;
/**
* It enables or disables the parsing of HTML string content into HTML DOM elements for In-place Editor.
* If the value of the property is set to false, the In-place Editor value will be displayed as HTML string instead of HTML DOM elements.
*
* @default true
*/
enableHtmlParse?: boolean;
/**
* Defines single/multiple classes (separated by space) to be used for customization of In-place editor.
*
* @default ''
*/
cssClass?: string;
/**
* Defines the unique primary key of editable field which can be used for saving data in data-base.
*
* {% codeBlock src='inplace-editor/primary-key/index.md' %}{% endcodeBlock %}
*
* @default ''
*/
primaryKey?: string | number;
/**
* Sets the text to be shown when an element has 'Empty' value.
*
* {% codeBlock src='inplace-editor/empty-text/index.md' %}{% endcodeBlock %}
*
* @default 'Empty'
*/
emptyText?: string;
/**
* Gets the url for server submit action.
*
* {% codeBlock src='inplace-editor/url/index.md' %}{% endcodeBlock %}
*
* @default ''
*/
url?: string;
/**
* Specifies the mode to be render while editing. The possible modes are :
*
* - `Inline`: Editable content is displayed as inline text and ok/cancel buttons are displayed at right bottom corner of input.
* - `Popup`: Editable content and ok/cancel buttons are displayed inside popup while editing.
*
* {% codeBlock src='inplace-editor/mode/index.md' %}{% endcodeBlock %}
*
* @default 'Popup'
*/
mode?: RenderMode;
/**
* Specifies the adaptor type that are used DataManager to communicate with DataSource. The possible values are,
*
* - `UrlAdaptor`: Base adaptor for interacting with remote data services.
* - `ODataV4Adaptor`: Used to interact with ODataV4 service.
* - `WebApiAdaptor`: Used to interact with Web api created with OData endpoint.
*
* {% codeBlock src='inplace-editor/adaptor/index.md' %}{% endcodeBlock %}
*
* @default 'UrlAdaptor'
*/
adaptor?: AdaptorType;
/**
* Specifies the type of components that integrated with In-place editor to make it as editable.
*
* {% codeBlock src='inplace-editor/type/index.md' %}{% endcodeBlock %}
*
* @default 'Text'
*/
type?: InputType;
/**
* Specifies the event action of input to enter edit mode instead of using edit icon. The possible values are:
*
* - `Click`: Do the single click action on input to enter into the edit mode.
* - `DblClick`: Do the single double click action on input to enter into the edit mode.
* - `EditIconClick`: Disables the editing of event action of input and allows user to edit only through edit icon.
*
* {% codeBlock src='inplace-editor/editable-on/index.md' %}{% endcodeBlock %}
*
* @default 'Click'
*/
editableOn?: EditableType;
/**
* Specifies the option to be set on initial rendering. It is applicable for DropDownList,
* AutoComplete, ComboBox, and MultiSelect component types.
* The possible options are:
*
* - `Never`: The corresponding field value will never be set initially in the component.
* - `Always`: The corresponding field value will be set initially in the component.
*
* @default 'Never'
*/
textOption?: textOptionType;
/**
* Specifies the action to be perform when user clicks outside the container, that is focus out of editable content.
* The possible options are,
*
* - `Cancel`: Cancel's the editing and resets the old content.
* - `Submit`: Submit the edited content to the server.
* - `Ignore`: No action is perform with this type and allows to have many containers open.
*
* @default 'Submit'
*/
actionOnBlur?: ActionBlur;
/**
* Enable or disable persisting component's state between page reloads. If enabled, following list of states will be persisted.
* 1. value
*
* {% codeBlock src='inplace-editor/enable-persistence/index.md' %}{% endcodeBlock %}
*
* @default false
*/
enablePersistence?: boolean;
/**
* Specifies whether to enable editing mode or not.
*
* @default false
*/
disabled?: boolean;
/**
* Used to show/hide the ok/cancel buttons of In-place editor.
*
* {% codeBlock src='inplace-editor/show-buttons/index.md' %}{% endcodeBlock %}
*
* @default true
*/
showButtons?: boolean;
/**
* Specifies to show/hide the editing mode.
*
* {% codeBlock src='inplace-editor/enable-edit-mode/index.md' %}{% endcodeBlock %}
*
* @default false
*/
enableEditMode?: boolean;
/**
* Sets to trigger the submit action with enter key pressing of input.
*
* {% codeBlock src='inplace-editor/submit-on-enter/index.md' %}{% endcodeBlock %}
*
* @default true
*/
submitOnEnter?: boolean;
/**
* Specifies the object to customize popup display settings like positions, animation etc.
*
* {% codeBlock src='inplace-editor/popup-settings/index.md' %}{% endcodeBlock %}
*
* @default {}
*/
popupSettings?: PopupSettingsModel;
/**
* Specifies the model object configuration for the integrated components like AutoComplete, DatePicker,NumericTextBox, etc.
*
* {% codeBlock src='inplace-editor/model/index.md' %}{% endcodeBlock %}
*
* @default null
*/
model?: AutoCompleteModel | ColorPickerModel | ComboBoxModel | DatePickerModel | DateRangePickerModel | DateTimePickerModel | DropDownListModel | MaskedTextBoxModel | MultiSelectModel | NumericTextBoxModel | RichTextEditorModel | SliderModel | TextBoxModel | TimePickerModel;
/**
* Used to customize the "Save" button UI appearance by defining Button model configuration.
*
* {% codeBlock src='inplace-editor/save-button/index.md' %}{% endcodeBlock %}
*
* @default { iconCss: 'e-icons e-save-icon' }
*/
saveButton?: ButtonModel;
/**
* Used to customize the "Cancel" button UI appearance by defining Button model configuration.
*
* {% codeBlock src='inplace-editor/cancel-button/index.md' %}{% endcodeBlock %}
*
* @default { iconCss: 'e-icons e-cancel-icon' }
*/
cancelButton?: ButtonModel;
/**
* Maps the validation rules for the input.
*
* {% codeBlock src='inplace-editor/validation-rules/index.md' %}{% endcodeBlock %}
*
* @default null
*/
validationRules?: { [name: string]: { [rule: string]: Object } };
/**
* The event will be fired once the component rendering is completed.
*
* @event 'event'
* @blazorProperty 'Created'
*/
created?: EmitType<Event>;
/**
* Event triggers before sanitize the value.
* @event
* @blazorProperty 'OnSanitizeHtml'
*/
beforeSanitizeHtml?: EmitType<BeforeSanitizeHtmlArgs>;
/**
* The event will be fired before the data submitted to the server.
*
* @event 'event'
* @blazorProperty 'OnActionBegin'
*/
actionBegin?: EmitType<ActionBeginEventArgs>;
/**
* The event will be fired when data submitted successfully to the server.
*
* @event 'event'
* @blazorProperty 'OnActionSuccess'
*/
actionSuccess?: EmitType<ActionEventArgs>;
/**
* The event will be fired when data submission failed.
*
* @event 'event'
* @blazorProperty 'OnActionFailure'
*/
actionFailure?: EmitType<ActionEventArgs>;
/**
* The event will be fired while validating current value.
*
* @event 'event'
* @blazorProperty 'Validating'
*/
validating?: EmitType<ValidateEventArgs>;
/**
* The event will be fired before changing the mode from default to edit mode.
*
* @event 'event'
*/
beginEdit?: EmitType<BeginEditEventArgs>;
/**
* The event will be fired when the edit action is finished and begin to submit/cancel the current value.
*
* @event 'event'
*/
endEdit?: EmitType<EndEditEventArgs>;
/**
* The event will be fired when the integrated component value has changed that render based on the `type` property
* in the In-place editor.
*
* @event 'event'
* @blazorProperty 'ValueChange'
*/
change?: EmitType<ChangeEventArgs>;
/**
* Event triggers when click the submit button.
*
* @event 'event'
* @blazorProperty 'SubmitClick'
*/
submitClick?: EmitType<MouseEvent>;
/**
* Event triggers when click the cancel button.
*
* @event 'event'
* @blazorProperty 'CancelClick'
*/
cancelClick?: EmitType<MouseEvent>;
/**
* The event will be fired when the component gets destroyed.
*
* @event 'event'
* @blazorProperty 'Destroyed'
*/
destroyed?: EmitType<Event>;
}