@itwin/appui-react 4.0.0-dev.12 → 4.0.0-dev.13

package/lib/esm/appui-react/pickers/ListPicker.d.ts

@@ -1,112 +1,112 @@
-/** @packageDocumentation
- * @module Picker
- */
-import "./ListPicker.scss";
-import * as React from "react";
-import { CommonProps, SizeProps } from "@itwin/core-react";
-/** Enum for the list picker item type
- * @beta
- */
-export declare enum ListItemType {
-    Item = 0,
-    Separator = 1,
-    Container = 2
-}
-/** List picker item
- * @beta
- */
-export interface ListItem {
-    [key: string]: any;
-    id?: string;
-    name?: string;
-    enabled: boolean;
-    type?: ListItemType;
-    children?: ListItem[];
-}
-/** Properties for the [[ListPicker]] component
- * @beta
- */
-export interface ListPickerProps {
-    title: string;
-    items: ListItem[];
-    iconSpec?: string | React.ReactNode;
-    setEnabled: (item: ListItem, enabled: boolean) => any;
-    onExpanded?: (expand: boolean) => void;
-    onSizeKnown?: (size: SizeProps) => void;
-}
-/** Properties for the [[ListPickerItem]] component
- * @beta
- */
-export interface ListPickerItemProps extends CommonProps {
-    key: any;
-    isActive?: boolean;
-    isFocused?: boolean;
-    onClick?: () => void;
-    label?: string;
-}
-/** List Picker Item React component
- * @beta
- */
-export declare class ListPickerItem extends React.PureComponent<ListPickerItemProps> {
-    /** Renders ListPickerItem */
-    render(): JSX.Element;
-}
-/** Properties for the [[ExpandableSection]] component
- * @beta
- */
-export interface ExpandableSectionProps extends CommonProps {
-    title?: string;
-    expanded?: boolean;
-    /** Content */
-    children?: React.ReactNode;
-}
-/** State for the [[ExpandableSection]] component
- * @internal
- */
-interface ExpandableSectionState {
-    expanded: boolean;
-}
-/** Expandable Section React component
- * @beta
- */
-export declare class ExpandableSection extends React.PureComponent<ExpandableSectionProps, ExpandableSectionState> {
-    /** Creates an ExpandableSection */
-    constructor(props: ExpandableSectionProps);
-    private _onClick;
-    /** Renders ExpandableSection */
-    render(): JSX.Element;
-}
-/** @beta */
-export declare function getListPanel(props: ListPickerProps): React.ReactNode;
-/** Properties for the [[ListPicker]] component
- * @beta
- */
-export interface ListPickerPropsExtended extends ListPickerProps {
-    enableAllFunc?: () => void;
-    disableAllFunc?: () => void;
-    invertFunc?: () => void;
-}
-/**
- * List Picker that lets the user pick from a list of items to enable/disable
- * It also provides options to enable all, disable all and invert selection
- * @beta
- */
-export declare class ListPicker extends React.Component<ListPickerPropsExtended> {
-    static get Key_All(): number;
-    static get Key_None(): number;
-    static get Key_Invert(): number;
-    static get Key_Separator(): number;
-    /** Creates a ListPicker */
-    constructor(props: ListPickerPropsExtended);
-    private createItems;
-    /**
-     * Checks if item is a special item.
-     * @param item Item to check
-     */
-    isSpecialItem(item: ListItem): boolean;
-    private _setEnabled;
-    /** Renders ListPicker */
-    render(): JSX.Element;
-}
-export {};
+/** @packageDocumentation
+ * @module Picker
+ */
+import "./ListPicker.scss";
+import * as React from "react";
+import { CommonProps, SizeProps } from "@itwin/core-react";
+/** Enum for the list picker item type
+ * @beta
+ */
+export declare enum ListItemType {
+    Item = 0,
+    Separator = 1,
+    Container = 2
+}
+/** List picker item
+ * @beta
+ */
+export interface ListItem {
+    [key: string]: any;
+    id?: string;
+    name?: string;
+    enabled: boolean;
+    type?: ListItemType;
+    children?: ListItem[];
+}
+/** Properties for the [[ListPicker]] component
+ * @beta
+ */
+export interface ListPickerProps {
+    title: string;
+    items: ListItem[];
+    iconSpec?: string | React.ReactNode;
+    setEnabled: (item: ListItem, enabled: boolean) => any;
+    onExpanded?: (expand: boolean) => void;
+    onSizeKnown?: (size: SizeProps) => void;
+}
+/** Properties for the [[ListPickerItem]] component
+ * @beta
+ */
+export interface ListPickerItemProps extends CommonProps {
+    key: any;
+    isActive?: boolean;
+    isFocused?: boolean;
+    onClick?: () => void;
+    label?: string;
+}
+/** List Picker Item React component
+ * @beta
+ */
+export declare class ListPickerItem extends React.PureComponent<ListPickerItemProps> {
+    /** Renders ListPickerItem */
+    render(): JSX.Element;
+}
+/** Properties for the [[ExpandableSection]] component
+ * @beta
+ */
+export interface ExpandableSectionProps extends CommonProps {
+    title?: string;
+    expanded?: boolean;
+    /** Content */
+    children?: React.ReactNode;
+}
+/** State for the [[ExpandableSection]] component
+ * @internal
+ */
+interface ExpandableSectionState {
+    expanded: boolean;
+}
+/** Expandable Section React component
+ * @beta
+ */
+export declare class ExpandableSection extends React.PureComponent<ExpandableSectionProps, ExpandableSectionState> {
+    /** Creates an ExpandableSection */
+    constructor(props: ExpandableSectionProps);
+    private _onClick;
+    /** Renders ExpandableSection */
+    render(): JSX.Element;
+}
+/** @beta */
+export declare function getListPanel(props: ListPickerProps): React.ReactNode;
+/** Properties for the [[ListPicker]] component
+ * @beta
+ */
+export interface ListPickerPropsExtended extends ListPickerProps {
+    enableAllFunc?: () => void;
+    disableAllFunc?: () => void;
+    invertFunc?: () => void;
+}
+/**
+ * List Picker that lets the user pick from a list of items to enable/disable
+ * It also provides options to enable all, disable all and invert selection
+ * @beta
+ */
+export declare class ListPicker extends React.Component<ListPickerPropsExtended> {
+    static get Key_All(): number;
+    static get Key_None(): number;
+    static get Key_Invert(): number;
+    static get Key_Separator(): number;
+    /** Creates a ListPicker */
+    constructor(props: ListPickerPropsExtended);
+    private createItems;
+    /**
+     * Checks if item is a special item.
+     * @param item Item to check
+     */
+    isSpecialItem(item: ListItem): boolean;
+    private _setEnabled;
+    /** Renders ListPicker */
+    render(): JSX.Element;
+}
+export {};
 //# sourceMappingURL=ListPicker.d.ts.map

package/lib/esm/appui-react/pickers/ListPicker.js

@@ -1,189 +1,189 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Picker
- */
-import "./ListPicker.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { Columns, GroupColumn, Panel, PopupItem, Title } from "@itwin/components-react";
-import { Icon } from "@itwin/core-react";
-import { ToolbarDragInteractionContext } from "../toolbar/DragInteraction";
-import { UiFramework } from "../UiFramework";
-import { SvgChevronDown, SvgChevronRight, SvgList } from "@itwin/itwinui-icons-react";
-/** Enum for the list picker item type
- * @beta
- */
-export var ListItemType;
-(function (ListItemType) {
-    ListItemType[ListItemType["Item"] = 0] = "Item";
-    ListItemType[ListItemType["Separator"] = 1] = "Separator";
-    ListItemType[ListItemType["Container"] = 2] = "Container";
-})(ListItemType || (ListItemType = {}));
-/** List Picker Item React component
- * @beta
- */
-export class ListPickerItem extends React.PureComponent {
-    /** Renders ListPickerItem */
-    render() {
-        const itemClassName = classnames("ListPicker-item", this.props.isActive && "is-active", this.props.isFocused && "is-focused", this.props.className);
-        // TODO - if cut off, show a title
-        const title = (this.props.label && this.props.label.length > 25) ? this.props.label : undefined;
-        return (
-        // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-        React.createElement("div", { className: itemClassName, onClick: this.props.onClick, role: "button", tabIndex: -1 },
-            React.createElement("div", { className: "label", title: title }, this.props.label)));
-    }
-}
-/** Expandable Section React component
- * @beta
- */
-export class ExpandableSection extends React.PureComponent {
-    /** Creates an ExpandableSection */
-    constructor(props) {
-        super(props);
-        this._onClick = () => {
-            this.setState((prevState) => ({ expanded: !prevState.expanded }));
-        };
-        this.state = { expanded: !!this.props.expanded };
-    }
-    /** Renders ExpandableSection */
-    render() {
-        const className = classnames("nz-toolbar-item-expandable-group-group", this.props.className);
-        const icon = this.state.expanded ? React.createElement(Icon, { iconSpec: React.createElement(SvgChevronDown, null) }) : React.createElement(Icon, { iconSpec: React.createElement(SvgChevronRight, null) });
-        return (React.createElement(Panel, { className: className, style: this.props.style, key: this.props.title },
-            React.createElement("div", { onClick: this._onClick, className: this.state.expanded ? "ListPickerInnerContainer-header-expanded" : "ListPickerInnerContainer-header", role: "button", tabIndex: -1, "aria-expanded": this.state.expanded },
-                React.createElement("div", { className: "ListPickerInnerContainer-header-content" },
-                    React.createElement("div", { className: "ListPickerInnerContainer-expander" }, icon),
-                    React.createElement("div", { className: "ListPickerInnerContainer-title" }, this.props.title))),
-            this.state.expanded ?
-                React.createElement(GroupColumn, null, this.props.children) : React.createElement("div", null)));
-    }
-}
-/** @beta */
-export function getListPanel(props) {
-    const expandSingleSection = () => {
-        const populatedContainers = props.items.filter((item) => {
-            return (item.type === ListItemType.Container && item.children.length !== 0);
-        });
-        return populatedContainers.length === 1;
-    };
-    const listItemToElement = (item, itemIndex) => {
-        switch (item.type) {
-            case ListItemType.Item:
-                return (React.createElement(ListPickerItem, { ...props, key: itemIndex.toString(), label: item.name, isActive: item.enabled, onClick: 
-                    // istanbul ignore next
-                    () => { props.setEnabled(item, !item.enabled); } }));
-            case ListItemType.Separator:
-                return (React.createElement("div", { key: itemIndex.toString(), className: "ListPicker-separator" }));
-            case ListItemType.Container:
-                if (item.children.length !== 0) {
-                    return (React.createElement(ExpandableSection, { key: itemIndex.toString(), title: item.name, className: "ListPickerInnerContainer", expanded: expandSingleSection() },
-                        React.createElement(GroupColumn, null, item.children.map(listItemToElement))));
-                }
-                else {
-                    return (React.createElement("div", { key: itemIndex.toString() }));
-                }
-            // istanbul ignore next
-            default:
-                return (React.createElement("div", { key: itemIndex.toString() }));
-        }
-    };
-    return (React.createElement(Panel, { className: "ListPickerContainer" },
-        React.createElement(Title, null, props.title),
-        React.createElement(Columns, null,
-            React.createElement(GroupColumn, { className: "ListPicker-column" }, props.items.map(listItemToElement)))));
-}
-/**
- * List picker toolbar popup item.
- * Used to provide an expandable list of items to enable/disable items.
- * @beta
- */
-function ListPickerPopupItem(props) {
-    const icon = props.iconSpec ? ( /* istanbul ignore next */typeof props.iconSpec === "string" ? React.createElement(Icon, { iconSpec: props.iconSpec }) :
-        React.createElement("i", { className: "icon uifw-item-svg-icon" }, props.iconSpec)) : React.createElement(Icon, { iconSpec: React.createElement(SvgList, null) });
-    return (React.createElement(ToolbarDragInteractionContext.Consumer, null, (isEnabled) => {
-        return React.createElement(PopupItem, { hideIndicator: isEnabled, icon: icon, title: props.title, panel: getListPanel(props) });
-    }));
-}
-/**
- * List Picker that lets the user pick from a list of items to enable/disable
- * It also provides options to enable all, disable all and invert selection
- * @beta
- */
-export class ListPicker extends React.Component {
-    /** Creates a ListPicker */
-    constructor(props) {
-        super(props);
-        // Handle enabling/disabling the items
-        // This will call the this.props.setEnabled function to provide the parent with a chance to process it
-        this._setEnabled = (item, enabled) => {
-            if (this.isSpecialItem(item)) {
-                switch (item.key) {
-                    case ListPicker.Key_All: {
-                        // istanbul ignore else
-                        if (this.props.enableAllFunc)
-                            this.props.enableAllFunc();
-                        return;
-                    }
-                    case ListPicker.Key_None: {
-                        // istanbul ignore else
-                        if (this.props.disableAllFunc)
-                            this.props.disableAllFunc();
-                        return;
-                    }
-                    case ListPicker.Key_Invert: {
-                        // istanbul ignore else
-                        if (this.props.invertFunc)
-                            this.props.invertFunc();
-                        return;
-                    }
-                }
-            }
-            // Call on parent to do processing of the item
-            this.props.setEnabled(item, enabled);
-        };
-    }
-    static get Key_All() { return -3; }
-    static get Key_None() { return -2; }
-    static get Key_Invert() { return -1; }
-    static get Key_Separator() { return -4; }
-    // Creates an array of items containing the separator and special requests (all, none, invert)
-    createItems(items) {
-        const newItems = [];
-        // Create special buttons (All/None/Invert)
-        if (this.props.enableAllFunc) {
-            let allEnabled = true;
-            items.map((item) => { allEnabled = allEnabled && item.enabled; });
-            newItems.push({ key: ListPicker.Key_All, name: UiFramework.translate("pickerButtons.all"), enabled: allEnabled, type: ListItemType.Item });
-        }
-        if (this.props.disableAllFunc) {
-            let allDisabled = false;
-            items.map((item) => { allDisabled = allDisabled || item.enabled; });
-            newItems.push({ key: ListPicker.Key_None, name: UiFramework.translate("pickerButtons.none"), enabled: !allDisabled, type: ListItemType.Item });
-        }
-        if (this.props.invertFunc) {
-            newItems.push({ key: ListPicker.Key_Invert, name: UiFramework.translate("pickerButtons.invert"), enabled: false, type: ListItemType.Item });
-        }
-        if (this.props.enableAllFunc || this.props.disableAllFunc || this.props.invertFunc) {
-            newItems.push({ key: ListPicker.Key_Separator, name: UiFramework.translate("pickerButtons.separator"), enabled: false, type: ListItemType.Separator });
-        }
-        // Push items
-        items.map((item) => { newItems.push(item); });
-        return newItems;
-    }
-    /**
-     * Checks if item is a special item.
-     * @param item Item to check
-     */
-    isSpecialItem(item) {
-        return item.key === ListPicker.Key_All || item.key === ListPicker.Key_Invert || item.key === ListPicker.Key_None || item.type !== ListItemType.Item || item.key === ListPicker.Key_Separator;
-    }
-    /** Renders ListPicker */
-    render() {
-        return (React.createElement(ListPickerPopupItem, { ...this.props, title: this.props.title, setEnabled: this._setEnabled, onExpanded: this.props.onExpanded, items: this.createItems(this.props.items), iconSpec: this.props.iconSpec }));
-    }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Picker
+ */
+import "./ListPicker.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { Columns, GroupColumn, Panel, PopupItem, Title } from "@itwin/components-react";
+import { Icon } from "@itwin/core-react";
+import { ToolbarDragInteractionContext } from "../toolbar/DragInteraction";
+import { UiFramework } from "../UiFramework";
+import { SvgChevronDown, SvgChevronRight, SvgList } from "@itwin/itwinui-icons-react";
+/** Enum for the list picker item type
+ * @beta
+ */
+export var ListItemType;
+(function (ListItemType) {
+    ListItemType[ListItemType["Item"] = 0] = "Item";
+    ListItemType[ListItemType["Separator"] = 1] = "Separator";
+    ListItemType[ListItemType["Container"] = 2] = "Container";
+})(ListItemType || (ListItemType = {}));
+/** List Picker Item React component
+ * @beta
+ */
+export class ListPickerItem extends React.PureComponent {
+    /** Renders ListPickerItem */
+    render() {
+        const itemClassName = classnames("ListPicker-item", this.props.isActive && "is-active", this.props.isFocused && "is-focused", this.props.className);
+        // TODO - if cut off, show a title
+        const title = (this.props.label && this.props.label.length > 25) ? this.props.label : undefined;
+        return (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+        React.createElement("div", { className: itemClassName, onClick: this.props.onClick, role: "button", tabIndex: -1 },
+            React.createElement("div", { className: "label", title: title }, this.props.label)));
+    }
+}
+/** Expandable Section React component
+ * @beta
+ */
+export class ExpandableSection extends React.PureComponent {
+    /** Creates an ExpandableSection */
+    constructor(props) {
+        super(props);
+        this._onClick = () => {
+            this.setState((prevState) => ({ expanded: !prevState.expanded }));
+        };
+        this.state = { expanded: !!this.props.expanded };
+    }
+    /** Renders ExpandableSection */
+    render() {
+        const className = classnames("nz-toolbar-item-expandable-group-group", this.props.className);
+        const icon = this.state.expanded ? React.createElement(Icon, { iconSpec: React.createElement(SvgChevronDown, null) }) : React.createElement(Icon, { iconSpec: React.createElement(SvgChevronRight, null) });
+        return (React.createElement(Panel, { className: className, style: this.props.style, key: this.props.title },
+            React.createElement("div", { onClick: this._onClick, className: this.state.expanded ? "ListPickerInnerContainer-header-expanded" : "ListPickerInnerContainer-header", role: "button", tabIndex: -1, "aria-expanded": this.state.expanded },
+                React.createElement("div", { className: "ListPickerInnerContainer-header-content" },
+                    React.createElement("div", { className: "ListPickerInnerContainer-expander" }, icon),
+                    React.createElement("div", { className: "ListPickerInnerContainer-title" }, this.props.title))),
+            this.state.expanded ?
+                React.createElement(GroupColumn, null, this.props.children) : React.createElement("div", null)));
+    }
+}
+/** @beta */
+export function getListPanel(props) {
+    const expandSingleSection = () => {
+        const populatedContainers = props.items.filter((item) => {
+            return (item.type === ListItemType.Container && item.children.length !== 0);
+        });
+        return populatedContainers.length === 1;
+    };
+    const listItemToElement = (item, itemIndex) => {
+        switch (item.type) {
+            case ListItemType.Item:
+                return (React.createElement(ListPickerItem, { ...props, key: itemIndex.toString(), label: item.name, isActive: item.enabled, onClick: 
+                    // istanbul ignore next
+                    () => { props.setEnabled(item, !item.enabled); } }));
+            case ListItemType.Separator:
+                return (React.createElement("div", { key: itemIndex.toString(), className: "ListPicker-separator" }));
+            case ListItemType.Container:
+                if (item.children.length !== 0) {
+                    return (React.createElement(ExpandableSection, { key: itemIndex.toString(), title: item.name, className: "ListPickerInnerContainer", expanded: expandSingleSection() },
+                        React.createElement(GroupColumn, null, item.children.map(listItemToElement))));
+                }
+                else {
+                    return (React.createElement("div", { key: itemIndex.toString() }));
+                }
+            // istanbul ignore next
+            default:
+                return (React.createElement("div", { key: itemIndex.toString() }));
+        }
+    };
+    return (React.createElement(Panel, { className: "ListPickerContainer" },
+        React.createElement(Title, null, props.title),
+        React.createElement(Columns, null,
+            React.createElement(GroupColumn, { className: "ListPicker-column" }, props.items.map(listItemToElement)))));
+}
+/**
+ * List picker toolbar popup item.
+ * Used to provide an expandable list of items to enable/disable items.
+ * @beta
+ */
+function ListPickerPopupItem(props) {
+    const icon = props.iconSpec ? ( /* istanbul ignore next */typeof props.iconSpec === "string" ? React.createElement(Icon, { iconSpec: props.iconSpec }) :
+        React.createElement("i", { className: "icon uifw-item-svg-icon" }, props.iconSpec)) : React.createElement(Icon, { iconSpec: React.createElement(SvgList, null) });
+    return (React.createElement(ToolbarDragInteractionContext.Consumer, null, (isEnabled) => {
+        return React.createElement(PopupItem, { hideIndicator: isEnabled, icon: icon, title: props.title, panel: getListPanel(props) });
+    }));
+}
+/**
+ * List Picker that lets the user pick from a list of items to enable/disable
+ * It also provides options to enable all, disable all and invert selection
+ * @beta
+ */
+export class ListPicker extends React.Component {
+    static get Key_All() { return -3; }
+    static get Key_None() { return -2; }
+    static get Key_Invert() { return -1; }
+    static get Key_Separator() { return -4; }
+    /** Creates a ListPicker */
+    constructor(props) {
+        super(props);
+        // Handle enabling/disabling the items
+        // This will call the this.props.setEnabled function to provide the parent with a chance to process it
+        this._setEnabled = (item, enabled) => {
+            if (this.isSpecialItem(item)) {
+                switch (item.key) {
+                    case ListPicker.Key_All: {
+                        // istanbul ignore else
+                        if (this.props.enableAllFunc)
+                            this.props.enableAllFunc();
+                        return;
+                    }
+                    case ListPicker.Key_None: {
+                        // istanbul ignore else
+                        if (this.props.disableAllFunc)
+                            this.props.disableAllFunc();
+                        return;
+                    }
+                    case ListPicker.Key_Invert: {
+                        // istanbul ignore else
+                        if (this.props.invertFunc)
+                            this.props.invertFunc();
+                        return;
+                    }
+                }
+            }
+            // Call on parent to do processing of the item
+            this.props.setEnabled(item, enabled);
+        };
+    }
+    // Creates an array of items containing the separator and special requests (all, none, invert)
+    createItems(items) {
+        const newItems = [];
+        // Create special buttons (All/None/Invert)
+        if (this.props.enableAllFunc) {
+            let allEnabled = true;
+            items.map((item) => { allEnabled = allEnabled && item.enabled; });
+            newItems.push({ key: ListPicker.Key_All, name: UiFramework.translate("pickerButtons.all"), enabled: allEnabled, type: ListItemType.Item });
+        }
+        if (this.props.disableAllFunc) {
+            let allDisabled = false;
+            items.map((item) => { allDisabled = allDisabled || item.enabled; });
+            newItems.push({ key: ListPicker.Key_None, name: UiFramework.translate("pickerButtons.none"), enabled: !allDisabled, type: ListItemType.Item });
+        }
+        if (this.props.invertFunc) {
+            newItems.push({ key: ListPicker.Key_Invert, name: UiFramework.translate("pickerButtons.invert"), enabled: false, type: ListItemType.Item });
+        }
+        if (this.props.enableAllFunc || this.props.disableAllFunc || this.props.invertFunc) {
+            newItems.push({ key: ListPicker.Key_Separator, name: UiFramework.translate("pickerButtons.separator"), enabled: false, type: ListItemType.Separator });
+        }
+        // Push items
+        items.map((item) => { newItems.push(item); });
+        return newItems;
+    }
+    /**
+     * Checks if item is a special item.
+     * @param item Item to check
+     */
+    isSpecialItem(item) {
+        return item.key === ListPicker.Key_All || item.key === ListPicker.Key_Invert || item.key === ListPicker.Key_None || item.type !== ListItemType.Item || item.key === ListPicker.Key_Separator;
+    }
+    /** Renders ListPicker */
+    render() {
+        return (React.createElement(ListPickerPopupItem, { ...this.props, title: this.props.title, setEnabled: this._setEnabled, onExpanded: this.props.onExpanded, items: this.createItems(this.props.items), iconSpec: this.props.iconSpec }));
+    }
+}
 //# sourceMappingURL=ListPicker.js.map