mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-01-22 01:25:38 -05:00
b2c70e9301
This is an initial PR for a new model-driven UI where extensions can provide definitions of the components & how they're laid out using Containers. #1140, #1141, #1142, #1143 and #1144 are all tracking additional work needed to improve the initial implementation and fix some issues with the implementation. Features: - Supports defining a FlexContainer that maps to a flexbox-based layout. - Supports creating a card component, which is a key-value pair based control that will lay out simple information to a user. Eventually this will have an optional set of actions associated with it. - Has a sample project which shows how to use the API and was used for verification
74 lines
2.4 KiB
TypeScript
74 lines
2.4 KiB
TypeScript
/*---------------------------------------------------------------------------------------------
|
|
* Copyright (c) Microsoft Corporation. All rights reserved.
|
|
* Licensed under the Source EULA. See License.txt in the project root for license information.
|
|
*--------------------------------------------------------------------------------------------*/
|
|
import { InjectionToken } from '@angular/core';
|
|
|
|
import * as sqlops from 'sqlops';
|
|
|
|
/**
|
|
* An instance of a model-backed component. This will be a UI element
|
|
*
|
|
* @export
|
|
* @interface IComponent
|
|
*/
|
|
export interface IComponent {
|
|
descriptor: IComponentDescriptor;
|
|
modelStore: IModelStore;
|
|
layout();
|
|
clearContainer?: () => void;
|
|
addToContainer?: (componentDescriptor: IComponentDescriptor, config: any) => void;
|
|
setLayout?: (layout: any) => void;
|
|
setProperties?: (properties: { [key: string]: any; }) => void;
|
|
}
|
|
|
|
export const COMPONENT_CONFIG = new InjectionToken<IComponentConfig>('component_config');
|
|
|
|
export interface IComponentConfig {
|
|
descriptor: IComponentDescriptor;
|
|
modelStore: IModelStore;
|
|
}
|
|
|
|
/**
|
|
* Defines a component and can be used to map from the model-backed version of the
|
|
* world to the frontend UI;
|
|
*
|
|
* @export
|
|
* @interface IComponentDescriptor
|
|
*/
|
|
export interface IComponentDescriptor {
|
|
/**
|
|
* The type of this component. Used to map to the correct angular selector
|
|
* when loading the component
|
|
*/
|
|
type: string;
|
|
/**
|
|
* A unique ID for this component
|
|
*/
|
|
id: string;
|
|
}
|
|
|
|
export interface IModelStore {
|
|
/**
|
|
* Creates and saves the reference of a component descriptor.
|
|
* This can be used during creation of a component later
|
|
*/
|
|
createComponentDescriptor(type: string, createComponentDescriptor): IComponentDescriptor;
|
|
/**
|
|
* gets the descriptor for a previously created component ID
|
|
*/
|
|
getComponentDescriptor(componentId: string): IComponentDescriptor;
|
|
registerComponent(component: IComponent): void;
|
|
unregisterComponent(component: IComponent): void;
|
|
getComponent(componentId: string): IComponent;
|
|
/**
|
|
* Runs on a component immediately if the component exists, or runs on
|
|
* registration of the component otherwise
|
|
*
|
|
* @param {string} componentId unique identifier of the component
|
|
* @param {(component: IComponent) => void} action some action to perform
|
|
* @memberof IModelStore
|
|
*/
|
|
eventuallyRunOnComponent<T>(componentId: string, action: (component: IComponent) => T): Promise<T>;
|
|
}
|