@egjs/grid

/** * egjs-grid * Copyright (c) 2021-present NAVER Corp. * MIT license */ import { DOMRect, GridRect } from "./types"; import { MOUNT_STATE, UPDATE_STATE } from "./consts"; /** * @typedef * @memberof Grid.GridItem * @property - The item key. <ko>아이템 키.</ko> * @property - The item index. <ko>아이템 index.</ko> * @property - The element for the item. <ko>아이템에 있는 엘리먼트.</ko> * @property - State of whether the element has been added to the container. <ko>element가 container에 추가되었는지 상태.</ko> * @property - The update state of the element's rect. <ko>element의 rect의 업데이트 상태.</ko> * @property - Whether the element's rect was updated for the first time. <ko>처음으로 element의 rect를 업데이트 했는지 여부.</ko> * @property - Attributes set as `data-grid-` of element. <ko>element의 `data-grid-`으로 설정된 속성들.</ko> * @property - cssText of the first style when an element is added to the container. <ko>element가 container에 추가됐을 때 처음 style의 cssText.</ko> * @property - The element's rect before first rendering. <ko>처음 렌더링 하기 전 엘리먼트의 rect.</ko> * @property - The updated element's rect before rendering. <ko>렌더링 하기 전 업데이트 된 엘리먼트의 rect.</ko> * @property - The CSS rect of the item to be rendered by being applied to the Grid. <ko>Grid에 적용되어 렌더링을 하기 위한 item의 CSS rect</ko> * @property - Additional data of the item. <ko>item의 추가적인 데이터들.</ko> * @property - Grid ready data for rendering. <ko>렌더링을 하기 위한 grid의 준비 데이터.</ko> */ export interface GridItemStatus { key?: string | number; index?: number; element?: HTMLElement | null; mountState?: MOUNT_STATE; updateState?: UPDATE_STATE; isFirstUpdate?: boolean; attributes?: Record<string, any>; orgCSSText?: string; orgRect?: Required<DOMRect>; rect?: Required<DOMRect>; cssRect?: DOMRect; data?: Record<string, any>; gridData?: Record<string, any>; } /** * @memberof Grid * @implements Grid.GridItem.GridItemStatus */ declare class GridItem { protected horizontal: boolean; /** * Whether or not it will be updated upon request. * @inner */ isUpdating: boolean; /** * Whether the item needs to be updated again * @inner */ shouldReupdate: boolean; hasTransition: boolean; transitionDuration: string; isRestoreOrgCSSText: boolean; /** * @constructor * @param horizontal - Direction of the scroll movement. (true: horizontal, false: vertical) <ko>스크롤 이동 방향. (true: 가로방향, false: 세로방향)</ko> * @param itemStatus - Default status object of GridItem module. <ko>GridItem 모듈의 기본 status 객체.</ko> */ constructor(horizontal: boolean, itemStatus?: Partial<GridItemStatus>); /** * The size in inline direction before first rendering. "width" if horizontal is false, "height" otherwise. * @ko 첫 렌더링 되기 전의 inline 방향의 사이즈. horizontal이 false면 "width", 아니면 "height". * @member Grid.GridItem#orgInlineSize */ get orgInlineSize(): number; /** * The size in content direction before first rendering. "height" if horizontal is false, "width" otherwise. * @ko 첫 렌더링 되기 전의 content 방향의 사이즈. horizontal이 false면 "height", 아니면 "width". * @member Grid.GridItem#orgContentSize */ get orgContentSize(): number; /** * The size in inline direction. "width" if horizontal is false, "height" otherwise. * @ko inline 방향의 사이즈. horizontal이 false면 "width", 아니면 "height". * @member Grid.GridItem#inlineSize */ get inlineSize(): number; /** * The size in content direction. "height" if horizontal is false, "width" otherwise. * @ko content 방향의 사이즈. horizontal이 false면 "height", 아니면 "width". * @member Grid.GridItem#contentSize */ get contentSize(): number; /** * The CSS size in inline direction applied to the Grid. "width" if horizontal is false, "height" otherwise. * @ko Grid에 적용된 inline 방향의 CSS 사이즈. horizontal이 false면 "width", 아니면 "height". * @member Grid.GridItem#cssInlineSize */ get cssInlineSize(): number | undefined; /** * The CSS size in content direction applied to the Grid. "height" if horizontal is false, "width" otherwise. * @ko Grid에 적용된 content 방향의 CSS 사이즈. horizontal이 false면 "height", 아니면 "width". * @member Grid.GridItem#cssContentSize */ get cssContentSize(): number | undefined; /** * The CSS pos in inline direction applied to the Grid. "left" if horizontal is false, "top" otherwise. * @ko Grid에 적용된 inline 방향의 CSS 포지션. horizontal이 false면 "left", 아니면 "top". * @member Grid.GridItem#cssInlinePos */ get cssInlinePos(): number | undefined; /** * The CSS pos in content direction applied to the Grid. "top" if horizontal is false, "left" otherwise. * @ko Grid에 적용된 content 방향의 CSS 포지션. horizontal이 false면 "top", 아니면 "left". * @member Grid.GridItem#cssContentPos */ get cssContentPos(): number | undefined; set cssInlinePos(inlinePos: number | undefined); set cssContentPos(contentPos: number | undefined); set cssInlineSize(inlineSize: number | undefined); set cssContentSize(contentSize: number | undefined); /** * Calculated size in the direction of the inline applied to the grid. "width" if horizontal is false, "height" otherwise. * @ko Grid에 적용된 inline 방향의 계산된 사이즈. horizontal이 false면 "width", 아니면 "height". * @member Grid.GridItem#computedInlineSize */ get computedInlineSize(): number; /** * Calculated size in the direction of the content applied to the grid. "height" if horizontal is false, "width" otherwise. * @ko Grid에 적용된 content 방향의 계산된 사이즈. horizontal이 false면 "height", 아니면 "width". * @member Grid.GridItem#computedContentSize */ get computedContentSize(): number; /** * Calculated position in the direction of the inline applied to the grid. "left" if horizontal is false, "top" otherwise. * @ko Grid에 적용된 content 방향의 계산된 포지션. horizontal이 false면 "left", 아니면 "top". * @member Grid.GridItem#computedInlinePos */ get computedInlinePos(): number; /** * Calculated position in the direction of the content applied to the grid. "top" if horizontal is false, "left" otherwise. * @ko Grid에 적용된 content 방향의 계산된 포지션. horizontal이 false면 "top", 아니면 "left". * @member Grid.GridItem#computedContentPos */ get computedContentPos(): number; /** * Set CSS rect through GridRect. * @ko GridRect을 통해 CSS Rect를 설정한다. * @param - The style for setting CSS rect. <ko>CSS rect를 설정하기 위한 스타일.</ko> */ setCSSGridRect(gridRect: GridRect): void; /** * Add CSS part of rect through GridRect. * @ko GridRect을 통해 CSS Rect의 일부를 추가한다.. * @param - The style for setting CSS rect. <ko>CSS rect를 설정하기 위한 스타일.</ko> */ addCSSGridRect(gridRect: GridRect): void; /** * Returns the status of the item. * @ko 아이템의 상태를 반환한다. */ getStatus(): Required<GridItemStatus>; /** * Returns minimized status of the item. * @ko 아이템의 간소화된 상태를 반환한다. */ getMinimizedStatus(): Partial<GridItemStatus>; private get _names(); } interface GridItem extends Required<GridItemStatus> { } export { GridItem };