@grapecity/spread-sheets-designer
Version:
SpreadJS Designer Component present as a control that could be embedded into your web application easily, and also provided flexible, customizable configuration to achieve your business logic.
1,358 lines (1,160 loc) • 702 kB
TypeScript
declare module GC.Spread.Sheets{
/**
* Specifies the cell value pattern type.
* @enum {number}
*/
export enum PatternType{
/**
* Specifies the pattern type is solid.
*/
solid = 1,
/**
* Specifies the pattern type is darkGray.
*/
darkGray = 2,
/**
* Specifies the pattern type is mediumGray.
*/
mediumGray = 3,
/**
* Specifies the pattern type is lightGray.
*/
lightGray = 4,
/**
* Specifies the pattern type is gray125.
*/
gray125 = 5,
/**
* Specifies the pattern type is gray0625.
*/
gray0625 = 6,
/**
* Specifies the pattern type is darkHorizontal.
*/
darkHorizontal = 7,
/**
* Specifies the pattern type is darkVertical.
*/
darkVertical = 8,
/**
* Specifies the pattern type is darkDown.
*/
darkDown = 9,
/**
* Specifies the pattern type is darkUp.
*/
darkUp = 10,
/**
* Specifies the pattern type is darkGrid.
*/
darkGrid = 11,
/**
* Specifies the pattern type is darkTrellis.
*/
darkTrellis = 12,
/**
* Specifies the pattern type is lightHorizontal.
*/
lightHorizontal = 13,
/**
* Specifies the pattern type is lightVertical.
*/
lightVertical = 14,
/**
* Specifies the pattern type is lightDown.
*/
lightDown = 15,
/**
* Specifies the pattern type is lightUp.
*/
lightUp = 16,
/**
* Specifies the pattern type is lightGrid.
*/
lightGrid = 17,
/**
* Specifies the pattern type is lightTrellis.
*/
lightTrellis = 18
}
module Designer{
/**
* Represents the default config of designer
*/
var DefaultConfig: IDesignerConfig;
/**
* Represents the license key for evaluation version and production version.
*/
var LicenseKey: string;
/**
* Represents the toolbar mode config of designer
*/
var ToolBarModeConfig: IDesignerConfig;
/**
* Close an opening dialog.
* @param {string} templateName - The opening template name, the template must be registered in designer.
* @param {boolean} submitValue - Whether submit the opening template value after closing the dialog or not.
* @example
* ```
* // Sometimes users want to close the dialog directly without UI, they can use closeDialog and decide whether submit the values after closing the dialog.
* var inputCommand = {
* title: "Input",
* text: "Input",
* iconClass: "ribbon-button-input-text",
* bigButton: true,
* commandName: "inputText",
* execute: (context, propertyName) => {
* var dialogOption = {
* text: "",
* };
* GC.Spread.Sheets.Designer.showDialog("setText", dialogOption, (result) => {
* if (!result) {
* return;
* }
* var text = result.text;
* var spread = context.getWorkbook();
* var sheet = spread.getActiveSheet();
* var column = sheet.getActiveColumnIndex();
* var row = sheet.getActiveRowIndex();
* sheet.setValue(row, column, text);
* clearInterval(showTipsInterval);
* }, (error) => {
* console.error(error);
* }, checkResult);
* var showTips = document.querySelector(".show-tips");
* var i = 4;
* var showTipsInterval = setInterval(() => {
* showTips.innerText = "You must input valid value within " + i + " seconds!";
* i--;
* if (i === -1) {
* clearInterval(showTipsInterval);
* GC.Spread.Sheets.Designer.closeDialog("setText", false);
* }
* }, 1000);
* }
* };
* var config = GC.Spread.Sheets.Designer.DefaultConfig;
* config.commandMap = {
* input: inputCommand,
* };
* var inputCommandGroup = {
* label: "input",
* thumbnailClass: "input",
* commandGroup: {
* children: [
* {
* direction: "vertical",
* commands: [
* "input"
* ]
* }
* ]
* }
* };
* if (config && config.ribbon) {
* config.ribbon[0].buttonGroups.push(inputCommandGroup);
* }
* var setTextTemplate = {
* title: "demo",
* content: [
* {
* type: "ColumnSet",
* children: [
* {
* type: "Column",
* children: [
* {
* type: "TextBlock",
* text: "Text:",
* }
* ]
* },
* {
* type: "Column",
* children: [
* {
* type: "TextEditor",
* margin: "0 0 0 10px",
* bindingPath: "text"
* }
* ]
* }
* ]
* },
* {
* type: "TextBlock",
* text: "You must input valid value within 5 seconds!",
* className: "show-tips"
* },
* ]
* };
* GC.Spread.Sheets.Designer.registerTemplate("setText", setTextTemplate);
* function checkResult(value) {
* if (value.text === "") {
* GC.Spread.Sheets.Designer.showMessageBox("Please do not input a null value.", "Warning", GC.Spread.Sheets.Designer.MessageBoxIcon.warning);
* return false;
* } else {
* return true;
* }
* }
* var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), config);
* ```
*/
function closeDialog(templateName: string, submitValue: boolean): void;
/**
* Get the designer instance of an existing HTMLElement
* @param {HTMLElement | string} host - The target HTMLElement
* @returns {GC.Spread.Sheets.Designer.Designer | undefined} The designer instance of an existing HTMLElement
* @example
* ```
* // This example will get the designer instance of an existing HTMLElement
* var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("hostDiv"));
* var designer = GC.Spread.Sheets.Designer.findControl(document.getElementById("hostDiv"));
* var designer = GC.Spread.Sheets.Designer.findControl("hostDiv");
* ```
*/
function findControl(host: HTMLElement | string): GC.Spread.Sheets.Designer.Designer | undefined;
/**
* This function will only get the command in the commandMap using the command name, or the all commands registered in commandMap.
* @param {string | undefined} commandName - Name of command, uniquely identifies one command, if commandName is empty, will return all registered commands.
* @returns {Object | undefined} - Command found by command name.
* @example
* ```
* // The user wants to custom font family.
* var config = GC.Spread.Sheets.Designer.DefaultConfig;
* var customCommand = GC.Spread.Sheets.Designer.getCommand("fontFamily");
* customCommand.dropdownList.push({
* text: "customFont",
* value: "customFont"
* });
* if (config && config.ribbon) {
* config.ribbon[0].buttonGroups[2].commandGroup.children[0].commands[0] = 'customFont';
* }
* config.commandMap = {
* customFont: customCommand
* }
* designer.setConfig(config);
* ```
*/
function getCommand(commandName?: string): GC.Spread.Sheets.Designer.ICommand | undefined;
/**
* Get the global designer working resources object.
* @returns {Object} - The designer working resources.
* @example
* ```
* // The user wants to change some resources in ribbon or template, they need get the origin designer res and modify it, then set it back before initializing designer.
* var resources = GC.Spread.Sheets.Designer.getResources();
* resources.ok = "OK!";
* resources.formatDialog.title = "Format Dialog!"
* resources.ribbon.home.home = "HOME!";
* resources.ribbon.home.paste = "Paste!";
* GC.Spread.Sheets.Designer.setResources(resources);
* var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("hostDiv"));
* ```
*/
function getResources(): Object;
/**
* A copy of a registered template can be found through the Template name. The template should be registered to the templateMap.
* @param {string} templateName - The template should be registered to the templateMap. a copy of a registered template can be found through the Template name.
* @returns {Object | null} - Template found by template name
* @example
* ```
* // The user wants to change the title of insert formate cells Dialog in designer to 'Custom'.
* var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("hostDiv"));
* var formatCellsTemplate = GC.Spread.Sheets.Designer.getTemplate("formatDialogTemplate").
* formatCellsTemplate.title = "Custom";
* //The same TemplateName washes out the original template.
* GC.Spread.Sheets.Designer.registerTemplate("formatDialogTemplate", formatCellsTemplate);
* ```
*/
function getTemplate(templateName: string): GC.Spread.Sheets.Designer.IDialogTemplate | null;
/**
* Register a template to templateMap so that designer can find the template.
* @param {string} templateName - Name of template, uniquely identifies one template.
* @param {Object} template - The template instance.
* @example
* ```
* //For example, the following code will open templateExample and the option will be used in the template, after click ok, will set text and set horizontal alignment.
* var inputCommand = {
* title: "Input",
* text: "Input",
* iconClass: "ribbon-button-input-text",
* bigButton: true,
* commandName: "inputText",
* execute: (context, propertyName) => {
* var dialogOption = {
* text: "",
* isCenter: false,
* };
* GC.Spread.Sheets.Designer.showDialog("setText", dialogOption, (result) => {
* if (!result) {
* return;
* }
* var text = result.text;
* var isCenter = result.isCenter;
* var spread = context.getWorkbook();
* var sheet = spread.getActiveSheet();
* var column = sheet.getActiveColumnIndex();
* var row = sheet.getActiveRowIndex();
* sheet.setValue(row, column, text);
* if (isCenter) {
* var style = new GC.Spread.Sheets.Style();
* style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
* sheet.setStyle(row, column, style);
* }
* }, (error) => {
* console.error(error);
* }, checkResult);
* }
* };
* var config = GC.Spread.Sheets.Designer.DefaultConfig;
* config.commandMap = {
* input: inputCommand,
* };
* var inputCommandGroup = {
* label: "input",
* thumbnailClass: "input",
* commandGroup: {
* children: [
* {
* direction: "vertical",
* commands: [
* "input"
* ]
* }
* ]
* }
* };
* if (config && config.ribbon) {
* config.ribbon[0].buttonGroups.push(inputCommandGroup);
* }
* var setTextTemplate = {
* title: "demo",
* content: [
* {
* type: "ColumnSet",
* children: [
* {
* type: "Column",
* children: [
* {
* type: "TextBlock",
* text: "Text:",
* }
* ]
* },
* {
* type: "Column",
* children: [
* {
* type: "TextEditor",
* margin: "0 0 0 10px",
* bindingPath: "text"
* }
* ]
* }
* ]
* },
* {
* type: "CheckBox",
* bindingPath: "isCenter",
* text: "Center",
* },
* ]
* };
* GC.Spread.Sheets.Designer.registerTemplate("setText", setTextTemplate);
* function checkResult(value) {
* if (value.text === "") {
* GC.Spread.Sheets.Designer.showMessageBox("Please do not input a null value.", "Warning", GC.Spread.Sheets.Designer.MessageBoxIcon.warning);
* return false;
* } else {
* return true;
* }
* }
* var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), config);
* ```
*/
function registerTemplate(templateName: string, template: GC.Spread.Sheets.Designer.IDialogTemplate): void;
/**
* Set the global designer working resources object.
* @param {Object} - The setting designer working resources
* @example
* ```
* // The user wants to change some resources in ribbon or template, they need get the origin designer res and modify it, then set it back before initializing designer.
* var resources = GC.Spread.Sheets.Designer.getResources();
* resources.ok = "OK!";
* resources.formatDialog.title = "Format Dialog!"
* resources.ribbon.home.home = "HOME!";
* resources.ribbon.home.paste = "Paste!";
* GC.Spread.Sheets.Designer.setResources(resources);
* var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("hostDiv"));
* ```
*/
function setResources(resources: Object): void;
/**
* This function will show a dialog with the option, the option will be used in the dialog template got by template name.
* @param {string} templateName - The template name.
* @param {Object} bindingData - The dialog bindingData.
* @param {Function} successCallback - After the dialog is closed, this method executes. If the OK button is selected, the dialog data is returned, and if cancel or 'X' is selected, null is returned.
* @param {Function} errCallback - Dialog executes this method when an exception occurs.
* @param {Function} validCallback - The dialog callback function, will change the result or do something after click ok and closing the dialog but before return the result, then return the operated result.
* @param {HTMLElement} popupElement - The dialog target HTMLElement which the template depends on.
* @example
* ```
* //For example, the following code will open templateExample and the option will be used in the template, after click ok, will set text and set horizontal alignment.
* var inputCommand = {
* title: "Input",
* text: "Input",
* iconClass: "ribbon-button-input-text",
* bigButton: true,
* commandName: "inputText",
* execute: (context, propertyName) => {
* var dialogOption = {
* text: "",
* isCenter: false,
* };
* GC.Spread.Sheets.Designer.showDialog("setText", dialogOption, (result) => {
* if (!result) {
* return;
* }
* var text = result.text;
* var isCenter = result.isCenter;
* var spread = context.getWorkbook();
* var sheet = spread.getActiveSheet();
* var column = sheet.getActiveColumnIndex();
* var row = sheet.getActiveRowIndex();
* sheet.setValue(row, column, text);
* if (isCenter) {
* var style = new GC.Spread.Sheets.Style();
* style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
* sheet.setStyle(row, column, style);
* }
* }, (error) => {
* console.error(error);
* }, checkResult);
* }
* };
* var config = GC.Spread.Sheets.Designer.DefaultConfig;
* config.commandMap = {
* input: inputCommand,
* };
* var inputCommandGroup = {
* label: "input",
* thumbnailClass: "input",
* commandGroup: {
* children: [
* {
* direction: "vertical",
* commands: [
* "input"
* ]
* }
* ]
* }
* };
* if (config && config.ribbon) {
* config.ribbon[0].buttonGroups.push(inputCommandGroup);
* }
* var setTextTemplate = {
* title: "demo",
* content: [
* {
* type: "ColumnSet",
* children: [
* {
* type: "Column",
* children: [
* {
* type: "TextBlock",
* text: "Text:",
* }
* ]
* },
* {
* type: "Column",
* children: [
* {
* type: "TextEditor",
* margin: "0 0 0 10px",
* bindingPath: "text"
* }
* ]
* }
* ]
* },
* {
* type: "CheckBox",
* bindingPath: "isCenter",
* text: "Center",
* },
* ]
* };
* GC.Spread.Sheets.Designer.registerTemplate("setText", setTextTemplate);
* function checkResult(value) {
* if (value.text === "") {
* GC.Spread.Sheets.Designer.showMessageBox("Please do not input a null value.", "Warning", GC.Spread.Sheets.Designer.MessageBoxIcon.warning);
* return false;
* } else {
* return true;
* }
* }
* var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), config);
* ```
*/
function showDialog(templateName: string, bindingData: Object, successCallback: Function, errCallback?: Function, validCallback?: Function, popupElement?: HTMLElement): void;
/**
* This function will show a messageBox with input option.
* @param {string} text - The error text of the messageBox
* @param {string} title - The title of the messageBox
* @param {GC.Spread.Sheets.Designer.MessageBoxIcon} icon - The icon of the messageBox
* @param {Function} successCallback - After dialog is closed, this method executes. The parameter "data" indicates which button is clicked, its type is GC.Spread.Sheets.Designer.MessageBoxResult, 1 is "ok", 2 is "yes", 3 is "no" and 4 is "cancel".
* @param {Function} errCallback - Dialog executes this method when an exception occurs.
* @param {GC.Spread.Sheets.Designer.MessageBoxButtons} buttons - The buttons of the messageBox
* @example
* ```
* //For example, the following code will show a messageBox with title "this is title", text "this is error text" and icon yellow triangle exclamation mark.
* var showCommand = {
* title: "show",
* text: "show",
* iconClass: "ribbon-button-show",
* bigButton: true,
* commandName: "show",
* execute: (context, propertyName) => {
* GC.Spread.Sheets.Designer.showMessageBox("this is title", "this is error text", GC.Spread.Sheets.Designer.MessageBoxIcon.warning); // Show Message Box
* }
* };
* var config = GC.Spread.Sheets.Designer.DefaultConfig;
* config.commandMap = {
* showMessage: showCommand
* };
* var showCommandGroup = {
* label: "Show",
* thumbnailClass: "Show",
* commandGroup: {
* children: [
* {
* direction: "vertical",
* commands: [
* "showMessage"
* ]
* }
* ]
* }
* };
* if (config && config.ribbon) {
* config.ribbon[0].buttonGroups.push(showCommandGroup);
* }
* var d = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), config);
* ```
*/
function showMessageBox(text: string, title: string, icon: GC.Spread.Sheets.Designer.MessageBoxIcon, successCallback?: Function, errCallback?: Function, buttons?: GC.Spread.Sheets.Designer.MessageBoxButtons): void;
export interface IBindingComponentBaseOption extends IComponentBaseOption{
bindingPath?: string;
mutexWith?: string;
}
export interface IBoxSizePickerOption extends IBindingComponentBaseOption{
type: "BoxSizePicker";
gapWidth: number;
numberEditorWidth: number;
}
export interface IButtonComboEditorOption extends IBindingComponentBaseOption{
type: "ButtonComboEditor";
generateItemsFunc: (v: any) => IListGroupItemData[];
setValueFunc?: (instance: any, v: any) => void;
getValueFunc?: (instance: any) => any;
buttonClassName: string;
popupWidth: number;
}
export interface IButtonGroup{
class?: string;
label?: string;
thumbnailClass?: string;
indicator?: string;
commandGroup: GC.Spread.Sheets.Designer.ICommandGroup;
overflow?: boolean;
overflowTitle?: string;
buttonGroupName?: string;
}
export interface IButtonOption extends IBindingComponentBaseOption{
type: "Button";
text?: string;
width?: number | string;
height?: number;
iconClass?: string;
iconPosition?: "top" | "left";
iconWidth?: number;
iconHeight?: number;
template?: string;
}
export interface ICalcFieldDialogEditorOption extends IBindingComponentBaseOption{
type: "CalcFieldDialogEditor";
}
export interface ICalcItemDialogEditorOption extends IBindingComponentBaseOption{
type: "CalcItemDialogEditor";
}
export interface ICalcItemSolveOrderDialogEditorOption extends IBindingComponentBaseOption{
type: "CalcItemSolveOrderDialogEditor";
}
export interface ICheckBoxGroupItem{
text?: string;
value: string;
checked?: boolean;
visible?: boolean;
enable?: boolean;
}
export interface ICheckBoxGroupOption extends IBindingComponentBaseOption{
type: "CheckBoxGroup";
items?: GC.Spread.Sheets.Designer.ICheckBoxGroupItem[];
columnCount?: number;
}
export interface ICheckBoxOption extends IBindingComponentBaseOption{
type: "CheckBox";
text?: string;
isThreeState?: boolean;
hideIcon?: boolean;
canChangeThreeState?: boolean;
}
export interface IChildrenItemBaseOption{
key: string;
text?: string;
className?: string;
children?: GC.Spread.Sheets.Designer.IComponentRenderType[];
}
export interface ICollapsePanelItemOption extends IChildrenItemBaseOption{
active: boolean;
}
export interface ICollapsePanelOption extends IComponentBaseOption{
type: "CollapsePanel";
children: GC.Spread.Sheets.Designer.ICollapsePanelItemOption[];
}
export interface IColorComboEditorItemsOption extends IBindingComponentBaseOption{
type: "ColorComboEditorItems";
label: string;
isThemeColor?: boolean;
}
export interface IColorComboEditorOption extends IBindingComponentBaseOption{
type: "ColorComboEditor";
showNoColor?: boolean;
showMoreColor?: boolean;
defaultColor?: string;
isThemeColor?: boolean;
}
export interface IColorGroup{
name: string;
colors: string[][];
}
export interface IColorIconComboEditorOption extends IBindingComponentBaseOption{
type: "ColorIconComboEditor";
iconType: GC.Spread.Sheets.Designer.IconType;
showNoColor?: boolean;
showMoreColor?: boolean;
isThemeColor?: boolean;
}
export interface IColorLineStyleComboEditorOption extends IBindingComponentBaseOption{
type: "ColorLineStyleComboEditor";
}
export interface IColorPickerOption extends IBindingComponentBaseOption{
type: "ColorPicker";
showNoColor?: boolean;
showMoreColor?: boolean;
colorWidth?: number;
colorGroups?: GC.Spread.Sheets.Designer.IColorGroup[];
defaultColor?: string;
themeColorList?: any;
isThemeColor?: boolean;
}
export interface IColorPreviewOption extends IBindingComponentBaseOption{
type: "ColorPreview";
height?: number;
defaultColor?: string;
}
export interface IColumnOption extends IContainerBaseOption{
type: "Column";
width?: string;
text?: string;
}
export interface IColumnSetOption extends IComponentBaseOption{
type: "ColumnSet";
alignItems?: string;
children?: GC.Spread.Sheets.Designer.IColumnOption[];
}
export interface ICommand{
title?: string;
text?: string;
iconClass?: string;
type?: GC.Spread.Sheets.Designer.CommandType;
bigButton?: boolean | string;
direction?: string;
commandName: string;
commandOptions?: any;
showDropdownButton?: boolean;
comboWidth?: number;
comboHeight?: number;
group?: string;
isGroupItem?: boolean;
textBoxWidth?: number;
textBoxHeight?: number;
listContent?: IListGroupItemData[];
maxWidth?: number;
maxHeight?: number;
iconWidth?: number;
iconHeight?: number;
needAsyncUpdate?: boolean;
visibleContext?: string;
enableContext?: string;
getState?: Function;
execute?: Function;
init?: Function;
dropdownList?: GC.Spread.Sheets.Designer.IListGroupItemData[];
subCommands?: string[];
dropdownMaxWidth?: number;
dropdownMaxHeight?:number;
commandMap?: Object;
keepFocusInSpread?: boolean;
visiblePriority?: number;
hidden?: boolean;
}
export interface ICommandGroup{
commands?: string[];
children?: (GC.Spread.Sheets.Designer.ICommandGroup | string)[];
type?: "group" | "separator" | "dropdown";
direction?: string;
command?: string;
dropdownMaxWidth?: number;
dropdownMaxHeight?:number;
showDropdownButton?: boolean;
visiblePriority?: number;
hidden?: boolean;
}
export interface IComponentBaseOption{
id?: string;
className?: string;
visibleWhen?: string;
enableWhen?: string;
margin?: string;
}
export interface IComponentDialogButtonOption{
text: string;
buttonType?: "Ok" | "Cancel";
click?: Function;
closeAfterClick?: boolean;
disabled?: boolean;
visibleWhen?: string;
bindingPath?: string;
}
export interface IContainerBaseOption extends IComponentBaseOption{
children?: GC.Spread.Sheets.Designer.IComponentRenderType[];
}
export interface IContainerOption extends IContainerBaseOption{
type: "Container";
text?: string;
attributes?: GC.Spread.Sheets.Designer.IHtmlTagAttribute[];
}
export interface IDataManagerColumnsList extends IBindingComponentBaseOption{
type: "DataManagerColumnsList";
}
export interface IDataManagerController extends IBindingComponentBaseOption{
type: "DataManagerController";
}
export interface IDataManagerTableColumnController extends IBindingComponentBaseOption{
type: "DataManagerTableColumnController";
}
export interface IDataManagerTableList extends IBindingComponentBaseOption{
type: "DataManagerTableList";
}
export interface IDataManagerTableListController extends IBindingComponentBaseOption{
type: "DataManagerTableListController";
}
export interface IDesignerConfig{
templateMap?: GC.Spread.Sheets.Designer.TemplateMap,
commandMap?: GC.Spread.Sheets.Designer.CommandMap,
quickAccessBar?: string[];
ribbon?: GC.Spread.Sheets.Designer.IRibbonPanel[] | GC.Spread.Sheets.Designer.IRibbonPanelConfig;
contextMenu?: string[];
sidePanels?: GC.Spread.Sheets.Designer.ISidePanel[];
fileMenu?: string;
}
export interface IDialogTemplate{
templateName: string;
title?: string;
modal?: boolean;
content: GC.Spread.Sheets.Designer.IComponentRenderType[];
buttons?: GC.Spread.Sheets.Designer.IComponentDialogButtonOption[];
resizable?: boolean;
}
export interface IEditableSelectOption extends IBindingComponentBaseOption{
type: "EditableSelect";
ruleType?: GC.Spread.Sheets.Designer.RuleType;
min?: number;
max?: number;
step?: number;
precision?: number;
notNeedSpin?: boolean;
disableWheelEvent?: boolean;
}
export interface IFieldListTreeOption extends IBindingComponentBaseOption{
type: "FieldListTree";
}
export interface IFileSelectorOption extends IBindingComponentBaseOption{
type: "FileSelector";
title?: string;
selectType?: number;
style?: string;
editorType?: string;
width?: number;
text?: string;
clearOldSelWhenValueIsEmptyStr?: boolean;
noPreview?: boolean;
}
export interface IFillDialogOption extends IBindingComponentBaseOption{
type: "fillEditor";
}
export interface IFillEffectOption extends IBindingComponentBaseOption{
type: "GradientColorEditor";
}
export interface IFlexContainerOption extends IContainerBaseOption{
type: "FlexContainer";
}
export interface IFocusableComponentOption extends IBindingComponentBaseOption{
needFocus?:boolean;
}
export interface IFontDialogEditorOption extends IBindingComponentBaseOption{
type: "FontDialogEditor";
}
export interface IFontEffectOption extends IBindingComponentBaseOption{
type: "FontEffect";
}
export interface IFontEffectsAndUnderlineOption extends IBindingComponentBaseOption{
type: "FontEffectsAndUnderline";
}
export interface IFontPickerOption extends IBindingComponentBaseOption{
type: "FontPicker";
showFontFamily?: boolean;
showFontSize?: boolean;
showFontWeight?: boolean;
showFontStyle?: boolean;
showForeColor?: boolean;
showUnderline?: boolean;
showDoubleUnderline?: boolean;
isFontSizeNumber?: boolean;
isThemeColor?: boolean;
}
export interface IFontPreviewOption extends IBindingComponentBaseOption{
type: "FontPreview";
}
export interface IFunctionLambdaEditorOption extends IBindingComponentBaseOption{
type: "functionLambdaEditor";
}
export interface IFunctionLetEditorOption extends IBindingComponentBaseOption{
type: "functionLetEditor";
}
export interface IGaugeColorComboEditorItemsOption extends IBindingComponentBaseOption{
type: "GaugeColorComboEditorItems";
label: string;
}
export interface IGradientColorStopsEditorOption extends IBindingComponentBaseOption{
type: "GradientColorStopsEditor";
}
export interface IHtmlTagAttribute{
key: string;
value: string;
}
export interface IImageSparklineEditorOption extends IBindingComponentBaseOption{
type: "ImageSparklineEditor";
}
export interface ILabelContainerOption extends IContainerBaseOption{
type: "LabelContainer";
text?: string;
size?: ISize;
showText?: boolean;
}
export interface ILabelLineOption extends IComponentBaseOption{
type: "LabelLine";
text?: string;
displayLine?: boolean;
showText?: boolean;
}
export interface IListComboEditorOption extends IBindingComponentBaseOption{
type: "ListComboEditor";
items?: GC.Spread.Sheets.Designer.IListSubItemData[];
popupWidth?: number;
popupClassName?: string;
editable?: boolean;
}
export interface IListEditorOption extends IBindingComponentBaseOption{
type: "ListEditor";
items?: GC.Spread.Sheets.Designer.IListSubItemData[];
keyboardSearch?: boolean;
allowSelection?: boolean;
}
export interface IListGroupItemData extends IListItemData{
groupName?: string;
groupItems?: GC.Spread.Sheets.Designer.IListItemData[];
contextMenu?: GC.Spread.Sheets.Designer.IListItemData[];
}
export interface IListItemData extends IListSubItemData{
subListWidth?: number;
}
export interface IListOption extends IBindingComponentBaseOption{
type: "List";
items?: GC.Spread.Sheets.Designer.IListSubItemData[];
ListDirection?: "horizontal" | "vertical";
allowSelection?: boolean;
wrap?: boolean;
keyboardSearch?: boolean;
dblClickSubmit?: boolean;
maxWidth?: number;
maxHeight?: number;
}
export interface IListSubItemData{
text?: string;
textClass?: string;
value?: string | number;
unionValue?: boolean;
iconClass?: string;
subItems?: GC.Spread.Sheets.Designer.IListGroupItemData[];
type?: "listItem" | "separator";
dom?: HTMLElement;
bigIcon?: boolean;
iconWidth?: number;
iconHeight?: number;
tip?: string;
selected?: boolean;
visible?: boolean;
enabled?: boolean;
className?: string;
commandName?: string;
}
export interface IMarginEditorOption extends IBindingComponentBaseOption{
type: "MarginEditor";
}
export interface IMarkItem{
style?: { [key: string]: string };
label: any;
}
export interface IMultiColumnListOption extends IBindingComponentBaseOption{
type: "MultiColumnList",
columns?: GC.Spread.Sheets.Designer.IMultiListColumn[];
itemHeight?: number;
/**
* whether need update selection effect while clicking
*/
needUpdateSelection?: boolean;
}
export interface IMultiColumnPickerEditorOption extends IBindingComponentBaseOption{
type: "multiColumnPickerEditor";
}
export interface IMultiListColumn{
id: string;
text?: string;
width?: number | string;
className?: string;
render?: Function;
}
export interface IMultiSelectListOption extends IFocusableComponentOption{
type: "MultiSelectList";
items?: GC.Spread.Sheets.Designer.IListSubItemData[];
allowMouseScroll?: boolean;
dblClickSubmit?: boolean;
selectedValues?: any[];
selectedIndexes?: number[];
}
export interface INumberEditorOption extends IBindingComponentBaseOption{
type: "NumberEditor";
ruleType?: GC.Spread.Sheets.Designer.RuleType;
min?: number;
max?: number;
step?: number;
precision?: number;
notNeedSpin?: boolean;
disableWheelEvent?: boolean;
}
export interface IPatternTypeComboEditorOption extends IBindingComponentBaseOption{
type: "patternStyleComboEditor";
items: GC.Spread.Sheets.Designer.IPatternTypePickItemOption[];
defaultColor?: string;
}
export interface IPatternTypePickerOption extends IComponentBaseOption{
type: 'patternTypePicker';
items: GC.Spread.Sheets.Designer.IPatternTypePickItemOption[];
}
export interface IPatternTypePickItemOption{
value: GC.Spread.Sheets.PatternType;
iconClass: string;
title?: string;
}
export interface IPatternTypePreviewOption extends IBindingComponentBaseOption{
type: "patternPreview";
}
export interface IRadioItemData{
text: string;
value: number | string | boolean;
alwaysEnabled?: boolean;
iconClass?: string;
template?: GC.Spread.Sheets.Designer.IComponentRenderType;
space?: number;
}
export interface IRadioOption extends IBindingComponentBaseOption{
type: "Radio";
title?: string;
columnCount?: number;
items: GC.Spread.Sheets.Designer.IRadioItemData[];
}
export interface IRangeSelectOption extends IBindingComponentBaseOption{
type: "RangeSelect";
title?: string;
needEqualSign?: boolean
absoluteReference?: boolean,
needSheetName?: boolean,
isOneRange?: boolean,
isSingleCell?: boolean,
text?: string;
canSingleCellInputCustomValue?: boolean;
}
export interface IRangeTemplateEditorOption extends GC.Spread.Sheets.Designer.IBindingComponentBaseOption{
type: "rangeTemplateEditor";
}
export interface IResetTextEditorOption extends IBindingComponentBaseOption{
type: "ResetTextEditor";
contentType?: number;
}
export interface IRibbonPanel{
id: string;
text: string;
buttonGroups: GC.Spread.Sheets.Designer.IButtonGroup[];
visibleWhen?: string;
overflow?: boolean;
overflowTitle?: string;
active?: boolean;
}
export interface IRibbonPanelConfig{
panels: GC.Spread.Sheets.Designer.IRibbonPanel[];
ribbonHeight?: number;
}
export interface ISheetListComboEditorOption extends IBindingComponentBaseOption{
type: "sheetListComboEditor";
items?: IListSubItemData[];
popupWidth?: number;
popupClassName?: string;
}
export interface ISidePanel{
position: "left" | "right" | "top" | "bottom" | "full";
width?: string;
command?: string;
allowResize?: boolean;
showCloseButton?: boolean;
uiTemplate: string;
classList?: string[];
canStack?: boolean;
}
export interface ISize{
width: number;
height: number;
}
export interface ISliderOption extends IBindingComponentBaseOption{
type: "Slider";
min?: number;
max?: number;
prefixCls?: string;
dots?: boolean;
range?: boolean;
disabled?: boolean;
step?: number;
direction?: "horizontal" | "vertical";
included?: boolean;
marks?: { [kye: string]: GC.Spread.Sheets.Designer.IMarkItem };
tooltipVisible?: boolean;
showNumberRange?: boolean;
width?: number;
height?: number;
}
export interface ISortColorComboEditorOption extends IBindingComponentBaseOption{
type: "SortColorComboEditor";
}
export interface ISortColorEditorOption extends IBindingComponentBaseOption{
type: "SortColorEditor";
}
export interface ISpreadContainerOption extends IBindingComponentBaseOption{
type: "SpreadContainer";
width?: string;
height?: string;
}
export interface ISpreadTemplateOption extends IBindingComponentBaseOption{
type: "SpreadTemplate";
width?: string;
height?: string;
data: any;
initSpreadFunctions?: ((spread: Object, data: any) => void)[];
updateValueFunctions?: ((spread: Object, data: any) => any)[];
updateUIFunctions?: ((spread: Object, data: any) => void)[];
isEqualValueFunctions?: ((value: any, oldValue: any) => boolean)[];
}
export interface ITabControlItemOption extends IChildrenItemBaseOption{
tip?: string;
iconClass?: string;
selectedClass?: string;
}
export interface ITabControlOption extends IBindingComponentBaseOption{
type: "TabControl";
width?: number;
height?: number;
children?: GC.Spread.Sheets.Designer.ITabControlItemOption[];
showHeader?: boolean;
activeTab?: string;
showTabList?: string[];
}
export interface ITableOption extends IBindingComponentBaseOption{
type: "Table",
content?: (string | undefined)[][];
style?: string;
row?: number;
col?: number;
/**
* for all row
*/
rowStyle?: string;
/**
* for all column
*/
colStyle?: string;
/**
* for each row
*/
rowStyles?: (string | undefined)[];
/**
* for each column
*/
colStyles?: (string | undefined)[];
headerStyle?: string;
footerStyle?: string;
}
export interface ITableSheetPanelEditor extends IBindingComponentBaseOption{
type: "TableSheetPanelEditor";
}
export interface ITableSheetPanelTitle extends IBindingComponentBaseOption{
type: "TableSheetPanelTitle";
}
export interface ITabSelectorOption extends IBindingComponentBaseOption{
type: "TabSelector";
}
export interface ITextBlockOption extends IBindingComponentBaseOption{
type: "TextBlock";
text?: string;
style?: string;
tip?: string;
}
export interface ITextEditorOption extends IFocusableComponentOption{
type: "TextEditor";
multiLine?: boolean;
resize?: boolean;
style?: string;
editorType?: string;
fireEventOnInput?: boolean;
isPassword?: boolean;
placeholder?: string;
}
export type CommandMap = {
[key in string]: GC.Spread.Sheets.Designer.ICommand;
}
export type CommandType = "button" | "dropdown" | "separator" | "checkbox" | "comboBox" | "text" | "spinner" | "list-preview" | "colorPicker" | "groupHeader" | "chartFormat" | "tableFooter" | "SparklineColorPicker" | "textBox" | "listContent" | string;
export type IComponentRenderType = GC.Spread.Sheets.