Class List<StoreType>

List component

Create a list with a custom item renderer. Also capable of selecting rows.

Type Parameters

Hierarchy

Constructors

Properties

_cls?: string
baseCls: string = ""

A base class not configurable. cls can be used to add extra classes leaving this class alone

dataSet: Record<string, any> = {}

Set arbitrary data on a component.

Should be used with caution as this data is not typed.

draggable: boolean = false

Allow items to be dragged

dropBetween: boolean = false

Allow to drop between items

dropOn: boolean = false

Allow to drop on items

emptyEl?: HTMLElement
emptyStateHtml: string = ...

Shown when the list is empty.

emptyStateTag: keyof HTMLElementTagNameMap = 'li'
itemTag: keyof HTMLElementTagNameMap = 'li'
parent?: Component

When this item is added to a Component this is set to the parent Component

renderTo?: HTMLElement

Normally components are rendered to its parent component's element. But in some cases like menu's it's desired to render them to the root and position them absolute.

renderer: RowRenderer
rowSelect?: RowSelect
stateId?: string

ID used for storing state of the component in the State storage.

If stateId is given it will also be used as itemId

If not set then the component won't store it's state.

store: StoreType
tagName: keyof HTMLElementTagNameMap = "div"

The tagname used for the root HTMLElement of this component

Accessors

  • set attr(attr): void
  • Set attributes of the DOM element

    Parameters

    • attr: Record<string, string>

    Returns void

  • set cls(cls): void
  • Class name to add to element

    Some common classes to add for layout:

    • hbox: Set's flex layout to horizontal boxes. Use flex: n to stretch columns
    • vbox: As above but vertical
    • fit: Fit the parent's size
    • scroll: Set's autoscroll: true
    • pad: Set common padding on the element
    • border-(top|bottom|left|right) to add a border

    Other:

    • goui-fade-in: The component will fade in when show() is used.
    • goui-fade-out: The component will fade out when hide is used.

    Parameters

    • cls: string

    Returns void

  • get disabled(): boolean
  • Returns boolean

  • set disabled(disabled): void
  • Disable component

    Parameters

    • disabled: boolean

    Returns void

  • get flex(): string | number
  • CSS flex value

    Returns string | number

  • set flex(flex): void
  • CSS flex value

    Parameters

    • flex: string | number

    Returns void

  • get height(): number
  • Returns number

  • set height(height): void
  • The height in scalable pixels

    Parameters

    • height: number

    Returns void

    See

    width

  • get html(): string
  • Returns string

  • set html(html): void
  • Set the HTML contents of the component (innerHTML)

    Parameters

    • html: string

    Returns void

  • get itemContainerEl(): HTMLElement
  • Returns HTMLElement

  • get itemId(): string
  • Component item ID that can be used to lookup the Component inside a Component with Component.findItem() and Component.findItemIndex();

    if stateId is given it will also be used as itemId

    Returns string

  • set itemId(itemId): void
  • Parameters

    • itemId: string

    Returns void

  • get rendered(): boolean
  • Check if the component has been rendered and added to the DOM tree

    Returns boolean

  • get resizable(): boolean
  • Returns boolean

  • set resizable(resizable): void
  • Make it resizable

    Parameters

    • resizable: boolean

    Returns void

  • set rowSelectionConfig(rowSelectionConfig): void
  • Row selection object

    Parameters

    Returns void

  • get style(): Partial<CSSStyleDeclaration>
  • Returns Partial<CSSStyleDeclaration>

  • set style(style): void
  • Set inline style

    Parameters

    • style: Partial<CSSStyleDeclaration>

    Returns void

  • get tabIndex(): number
  • Returns number

  • set tabIndex(tabIndex): void
  • The tabindex attribute specifies the tab order of an element (when the "tab" button is used for navigating).

    Parameters

    • tabIndex: number

    Returns void

  • get width(): number
  • Returns number

  • set width(width): void
  • Set the width in scalable pixels

    The width is applied in rem units divided by 10. Because the font-size of the html element has a font-size of 62.5% this is equals the amount of pixels, but it can be scaled easily for different themes.

    Parameters

    • width: number

    Returns void

Methods

  • Cascade down the component hierarchy

    Parameters

    • fn: ((comp) => boolean | void)

      When the function returns false then the cascading will be stopped. The current Component will be finished!

        • (comp): boolean | void
        • Parameters

          Returns boolean | void

    Returns List<StoreType>

  • Parameters

    • dropRow: HTMLElement

    Returns void

  • Parameters

    • e: DragEvent
    • dropRow: HTMLElement

    Returns boolean

  • Find ancestor

    The method traverses the Component's ancestors (heading toward the document root) until it finds one where the given function returns true.

    Parameters

    • fn: ((cmp) => boolean | void)

      When the function returns true the item will be returned. Otherwise it will move up to the next parent.

        • (cmp): boolean | void
        • Parameters

          Returns boolean | void

    Returns undefined | Component

  • Find parent by instance type of the parent

    Type Parameters

    Parameters

    • cls: T

    Returns undefined | InstanceType<T>

    Example

    const form = textField.findAncestorByType(Form);
    
  • Find child by instance type of the parent

    Type Parameters

    Parameters

    • cls: ClassTypeOf<T>

    Returns undefined | T

    Example

    const form = textField.findAncestorByType(Form);
    
  • Parameters

    • e: DragEvent

    Returns HTMLElement

  • Parameters

    • e: MouseEvent & {
          target: HTMLElement;
      }

    Returns HTMLElement

  • Fire an event

    When a listener returns false this function will return false too.

    Type Parameters

    Parameters

    • eventName: K
    • Rest ...args: Parameters<ListEventMap<any>[K]>

    Returns boolean

  • Hide this component

    This sets the "hidden" attribute on the DOM element which set's CSS display:none. You can change this to fade with css class "goui-fade-in" and "goui-fade-out"

    If you want to override this function, please override internalSetHidden instead so the beforeshow and show event fire at the right time.

    Returns boolean

  • Mask the component to disable user interaction It creates an absolute positioned Mask component. This component should have a non-static position style for this to work.

    Parameters

    • delay: number = 300

    Returns void

  • Parameters

    • e: MouseEvent & {
          target: HTMLElement;
      }
    • type: any

    Returns void

  • Parameters

    • e: DragEvent
    • dropRow: HTMLElement

    Returns void

  • Parameters

    • e: DragEvent
    • dropRow: HTMLElement

    Returns void

  • Parameters

    • row: HTMLElement
    • record: any
    • index: number

    Returns void

  • Render the component

    Parameters

    • Optional parentEl: Node

      The element this componennt will render into

    • Optional insertBefore: Node

      If given, the element will be inserted before this child

    Returns HTMLElement

  • Parameters

    • record: any

    Returns HTMLElement | DocumentFragment

  • Parameters

    • record: any
    • storeIndex: number

    Returns HTMLElement

  • Protected

    Call save start when something relevant to the state changes. Implement buildState() to save relevant state properties and restore it in restoreState()

    stateId must be set on components to be stateful

    Returns void

  • Show the component

    If you want to override this function, please override internalSetHidden instead so the beforeshow and show event fire at the right time.

    Returns boolean

Generated using TypeDoc