@arcgis/core
Version:
ArcGIS Maps SDK for JavaScript: A complete 2D and 3D mapping and data visualization API
207 lines (203 loc) • 8.31 kB
TypeScript
import type Widget from "../Widget.js";
import type ListItem from "./ListItem.js";
import type { Icon } from "@esri/calcite-components/components/calcite-icon";
import type { IdentifiableMixin, IdentifiableMixinProperties } from "../../core/Identifiable.js";
import type { WidgetProperties } from "../Widget.js";
export interface ListItemPanelProperties extends WidgetProperties, IdentifiableMixinProperties, Partial<Pick<ListItemPanel, "content" | "disabled" | "flowEnabled" | "image" | "listItem" | "open" | "title">> {
/**
* Icon which represents the panel.
*
* @since 4.27
* @see [Calcite Icon Search](https://developers.arcgis.com/calcite-design-system/icons/)
* @see [Calcite Icon Search](https://developers.arcgis.com/calcite-design-system/icons/)
*/
icon?: Icon["icon"] | null;
/**
* Indicates whether the ListItemPanel is visible.
*
* @default true
* @example
* const tableList = new TableList({
* listItemCreatedFunction: async (event) => {
* const { item } = event;
* const { layer } = item;
*
* item.panel = {
* content: document.getElementById("myDiv"),
* open: true
* };
*
* // hide the panel for a specific table
* if (layer.title.includes("Confidential")) {
* item.panel.visible = false;
* }
* },
* view
* });
* @example
* // Hides the widget in the view
* widget.visible = false;
*/
visible?: boolean;
}
/**
* The content displayed in the ListItem panel. This can be a [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String),
* a [Widget](https://developers.arcgis.com/javascript/latest/references/core/widgets/Widget/) instance, or an [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement).
*
* @see [content](https://developers.arcgis.com/javascript/latest/references/core/widgets/TableList/ListItemPanel/#content)
*/
export type ListItemPanelContent = Widget | HTMLElement | string;
/**
* Defines the content(s) that can be displayed in a ListItem panel. This can be a single content item
* or an array of content items, allowing for flexible panel layouts.
*
* @see [content](https://developers.arcgis.com/javascript/latest/references/core/widgets/TableList/ListItemPanel/#content)
*/
export type ListItemPanelContents = ListItemPanelContent | ListItemPanelContent[];
/**
* This class allows you to display custom content for each [ListItem](https://developers.arcgis.com/javascript/latest/references/core/widgets/TableList/ListItem/)
* in the [TableList](https://developers.arcgis.com/javascript/latest/references/core/widgets/TableList/) widget. ListItemPanel objects typically aren't constructed.
* Rather, they are modified using the [TableList.listItemCreatedFunction](https://developers.arcgis.com/javascript/latest/references/core/widgets/TableList/#listItemCreatedFunction)
* property in the [TableList](https://developers.arcgis.com/javascript/latest/references/core/widgets/TableList/) widget.
*
* @since 4.29
* @see [TableList](https://developers.arcgis.com/javascript/latest/references/core/widgets/TableList/)
* @see [ListItem](https://developers.arcgis.com/javascript/latest/references/core/widgets/TableList/ListItem/)
* @see [ListItem.panel](https://developers.arcgis.com/javascript/latest/references/core/widgets/TableList/ListItem/#panel)
* @example
* const tableList = new TableList({
* view: view,
* listItemCreatedFunction: (event) =>{
* const { item } = event;
* const layer = item.layer;
*
* const count = await layer.queryFeatureCount();
*
* item.panel = {
* content: `Number of records: ${count}`,
* icon: "data-magnifying-glass",
* };
* }
* });
*/
export default class ListItemPanel extends ListItemPanelSuperclass {
constructor(properties?: ListItemPanelProperties);
/**
* The content displayed in the ListItem panel. This can be a [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String),
* a [Widget](https://developers.arcgis.com/javascript/latest/references/core/widgets/Widget/) instance, an [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement),
* or an [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) of any of those elements.
*
* @example
* const tableList = new TableList({
* view: view,
* listItemCreatedFunction: (event) => {
* const { item } = event;
* const { layer } = item;
*
* const count = await layer.queryFeatureCount();
*
* item.panel = {
* content: `Number of records: ${count}`,
* icon: "data-magnifying-glass",
* };
* }
* });
*/
accessor content: ListItemPanelContents | null | undefined;
/**
* If `true`, disables the ListItem's panel so the user cannot open or interact with it.
* The panel will be disabled by default if it does not have content.
*
* @example
* const tableList = new TableList({
* view: view,
* listItemCreatedFunction: (event) => {
* const { item } = event;
* item.panel = {
* content: document.getElementById("myDiv"),
* disabled: true,
* icon: "graph-bar"
* };
* }
* });
*/
accessor disabled: boolean;
/**
* Indicates whether the panel's content should be rendered as a [Calcite Flow Item](https://developers.arcgis.com/calcite-design-system/components/flow-item/).
* By default, the panel's content is rendered in the [content-bottom](https://developers.arcgis.com/calcite-design-system/components/list-item/#api-reference-slots-content-bottom) slot.
* [Flow](https://developers.arcgis.com/calcite-design-system/components/flow/) is a calcite component that allows for drilling in and out of panels.
*
* @default false
* @since 4.29
*/
accessor flowEnabled: boolean;
/**
* Icon which represents the panel.
*
* @since 4.27
* @see [Calcite Icon Search](https://developers.arcgis.com/calcite-design-system/icons/)
* @see [Calcite Icon Search](https://developers.arcgis.com/calcite-design-system/icons/)
*/
accessor icon: Icon["icon"] | null | undefined;
/**
* The URL or data URI of an image used to represent the panel.
* This property will be used as a background image for the node.
* If neither `image` nor `icon` are specified, a default icon
*  will display.
*/
accessor image: string | null | undefined;
/** The panel's parent ListItem that represents a table in the map. */
accessor listItem: ListItem | null | undefined;
/**
* Indicates if the panel's content is open and visible to the user.
*
* @default false
* @example
* const tableList = new TableList({
* view: view,
* listItemCreatedFunction: (event) => {
* const { item } = event;
* item.panel = {
* content: document.getElementById("myDiv"),
* icon: "graph-bar",
* open: true
* };
* }
* });
*/
accessor open: boolean;
/**
* The title of the panel. By default, this title matches the
* [ListItem's title](https://developers.arcgis.com/javascript/latest/references/core/widgets/TableList/ListItem/#title). Changing this
* value will not change the title of the ListItem in the TableList.
*/
accessor title: string;
/**
* Indicates whether the ListItemPanel is visible.
*
* @default true
* @example
* const tableList = new TableList({
* listItemCreatedFunction: async (event) => {
* const { item } = event;
* const { layer } = item;
*
* item.panel = {
* content: document.getElementById("myDiv"),
* open: true
* };
*
* // hide the panel for a specific table
* if (layer.title.includes("Confidential")) {
* item.panel.visible = false;
* }
* },
* view
* });
* @example
* // Hides the widget in the view
* widget.visible = false;
*/
accessor visible: boolean;
}
declare const ListItemPanelSuperclass: typeof Widget & typeof IdentifiableMixin