@nu-art/thunderstorm-frontend 0.400.5

package/components/TS_V2_TextArea/TS_TextAreaV2.js

@@ -0,0 +1,178 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Thunderstorm is a full web app framework!
+ *
+ * Typescript & Express backend infrastructure that natively runs on firebase function
+ * Typescript & React frontend infrastructure
+ *
+ * Copyright (C) 2020 Adam van der Kruk aka TacB0sS
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import * as React from 'react';
+import { _className } from '../../utils/tools.js';
+import './TS_TextAreaV2.scss';
+import { convertToHTMLDataAttributes, resolveEditableError } from '../types.js';
+import { getComputedStyleProperty } from '../utils.js';
+/**
+ * A better way to capture user input
+ *
+ * <code>
+ * 		<input className="ts-input"/>
+ * </code>
+ *
+ */
+export class TS_TextAreaV2 extends React.Component {
+    static editableString = (mandatoryProps) => {
+        return (props) => {
+            const { componentRef, ...rest } = props;
+            return _jsx(TS_TextAreaV2, { ...mandatoryProps, ref: componentRef, ...rest });
+        };
+    };
+    static editable = (templateProps) => {
+        return (props) => {
+            const { editable, prop, saveEvent, componentRef, ...rest } = props;
+            const _saveEvents = [...saveEvent || [], ...templateProps.saveEvent || []];
+            let onChange;
+            let onBlur;
+            let onAccept;
+            const saveEventHandler = (value) => {
+                return props.onChange ? props.onChange(value) : editable.updateObj({ [prop]: value });
+            };
+            if (_saveEvents.includes('change'))
+                onChange = saveEventHandler;
+            if (_saveEvents.includes('blur'))
+                onBlur = saveEventHandler;
+            if (_saveEvents.includes('accept'))
+                onAccept = saveEventHandler;
+            return _jsx(TS_TextAreaV2, { ...templateProps, ...rest, error: resolveEditableError(props), ref: componentRef, onChange: onChange, onBlur: onBlur, onAccept: onAccept, value: props.editable.item[props.prop] });
+        };
+    };
+    static defaultProps = {
+        forceAcceptKeys: ['ctrlKey', 'metaKey'],
+        saveEvent: ['accept']
+    };
+    ref;
+    constructor(props) {
+        super(props);
+        this.state = TS_TextAreaV2.getInitialState(props);
+    }
+    static getDerivedStateFromProps(props, state) {
+        if (props.id === state.id && state.name === props.name && state.initialValue === props.value)
+            return { value: state.value };
+        return TS_TextAreaV2.getInitialState(props);
+    }
+    static getInitialState(props) {
+        return {
+            id: props.id,
+            name: props.name,
+            initialValue: props.value,
+            value: props.value || ''
+        };
+    }
+    changeValue = (event) => {
+        const value = event.target.value;
+        this.setState({ value });
+        this.props.onChange?.(value, event.target.id);
+        if (this.props.resizeWithText)
+            this.resizeWithText();
+    };
+    onKeyDown = (ev) => {
+        let value = ev.currentTarget.value;
+        const textarea = ev.currentTarget;
+        if (ev.key === 'Escape' && this.props.onCancel) {
+            this.props.onCancel();
+            ev.stopPropagation();
+        }
+        if (ev.shiftKey || ev.altKey) {
+            if (ev.key === 'Enter') {
+                ev.preventDefault(); // Prevent default behavior of Enter
+                let cursorPos = value.indexOf('\n', textarea.selectionStart);
+                if (cursorPos === -1)
+                    cursorPos = value.length;
+                const beforeCursor = value.substring(0, cursorPos);
+                const afterCursor = value.substring(cursorPos);
+                // Insert a new line at the current cursor position
+                textarea.value = beforeCursor + '\n' + afterCursor;
+                // Set the cursor position after the inserted new line
+                textarea.selectionStart = textarea.selectionEnd = cursorPos + 1;
+                if (this.props.resizeWithText)
+                    this.resizeWithText();
+            }
+        }
+        if (ev.ctrlKey || ev.metaKey) {
+            if (ev.key === 'Enter') {
+                //@ts-ignore - despite what typescript says, ev.target does have a blur function.
+                ev.target.blur();
+                if (this.props.trim)
+                    value = value.trim();
+                if (this.props.onAccept) {
+                    if (value !== this.props.value)
+                        this.props.onAccept(value, ev);
+                    ev.stopPropagation();
+                }
+            }
+            return;
+        }
+        // I assume we need to persist this even if we call an external callback
+        ev.persist();
+        this.props.onKeyDown?.(ev);
+    };
+    resizeWithText = () => {
+        const el = this.ref;
+        if (!el)
+            return;
+        const currentHeight = el.offsetHeight;
+        if (el.scrollHeight > currentHeight) { //Can increase height
+            const newHeight = el.scrollHeight + 5;
+            el.style.height = `${newHeight}px`;
+        }
+        else { //Check if height needs to be decreased
+            const borderWidthTop = Number(getComputedStyleProperty(el, 'border-top-width')?.replace('px', ''));
+            const borderWidthBottom = Number(getComputedStyleProperty(el, 'border-bottom-width')?.replace('px', ''));
+            const borderWidth = borderWidthTop + borderWidthBottom;
+            el.style.height = '1px';
+            const scrollHeight = el.scrollHeight;
+            const heightDiff = currentHeight - scrollHeight;
+            const newHeight = heightDiff <= borderWidth + 1 ? currentHeight : scrollHeight + borderWidth + 1;
+            el.style.height = `${newHeight}px`;
+        }
+    };
+    componentDidMount() {
+        if (this.props.resizeWithText)
+            this.resizeWithText();
+    }
+    componentDidUpdate() {
+        if (this.props.resizeWithText)
+            this.resizeWithText();
+    }
+    render() {
+        const { onAccept, error, trim, saveEvent, forceAcceptKeys, resizeWithText, focus, innerRef, ...props } = this.props;
+        return _jsx("textarea", { ...props, ...convertToHTMLDataAttributes(this.props.error, 'error'), ref: input => {
+                if (this.ref || !input)
+                    return;
+                this.ref = input;
+                if (innerRef) {
+                    // @ts-ignore
+                    innerRef.current = input;
+                }
+                if (this.props.resizeWithText)
+                    this.resizeWithText();
+                this.props.focus && this.ref.focus();
+            }, autoFocus: focus, onBlur: (event) => {
+                const value = event.target.value;
+                this.setState({ value });
+                props.onBlur?.(value, event);
+            }, name: props.name || props.id, className: _className('ts-textarea', props.className, this.props.resizeWithText && 'no-resize'), value: this.state.value, onChange: this.changeValue, onKeyDown: this.onKeyDown, autoComplete: props.autoComplete ? 'on' : 'off' });
+    }
+}

package/components/TS_V2_TextArea/TS_TextAreaV2.scss

@@ -0,0 +1,49 @@
+/*!
+ * Thunderstorm is a full web app framework!
+ *
+ * Typescript & Express backend infrastructure that natively runs on firebase function
+ * Typescript & React frontend infrastructure
+ *
+ * Copyright (C) 2020 Adam van der Kruk aka TacB0sS
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.ts-textarea {
+  //Dimensions
+  width: 100%;
+  min-width: 50px;
+  min-height: 50px;
+
+  padding-block: 4px;
+  padding-inline: 10px;
+
+  //Font
+  font-size: 1rem;
+
+  //Border
+  border: 1px solid black;
+  border-radius: 4px;
+
+  &[data-error-level="error"] {
+    background: #ffe7e7;
+  }
+
+  &:focus-visible {
+    outline: 1px solid #3ca0c6;
+  }
+
+  &.no-resize {
+    resize: none;
+  }
+}

package/components/TS_V2_TextArea/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TS_BaseInput.js';
+export * from './TS_TextAreaV2.js';

package/components/TS_V2_TextArea/index.js

@@ -0,0 +1,22 @@
+/*
+ * Thunderstorm is a full web app framework!
+ *
+ * Typescript & Express backend infrastructure that natively runs on firebase function
+ * Typescript & React frontend infrastructure
+ *
+ * Copyright (C) 2020 Adam van der Kruk aka TacB0sS
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export * from './TS_BaseInput.js';
+export * from './TS_TextAreaV2.js';

package/components/TS_VirtualizedList/TS_VirtualizedList.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { ResolvableContent } from '@nu-art/ts-common';
+type Props = {
+    listToRender: ResolvableContent<React.ReactNode, [React.CSSProperties]>[];
+    height?: number | string;
+    className?: string;
+    width?: number;
+    itemHeight: number;
+    selectedItem?: number;
+    omitWrapper?: boolean;
+};
+export declare const VirtualizedList: ({ height, width, listToRender, itemHeight, selectedItem, className, omitWrapper }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const TS_VirtualizedList: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/components/TS_VirtualizedList/TS_VirtualizedList.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { FixedSizeList as List } from 'react-window';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { resolveContent } from '@nu-art/ts-common';
+export const VirtualizedList = ({ height, width, listToRender, itemHeight, selectedItem, className, omitWrapper }) => {
+    const listRef = React.useRef();
+    React.useEffect(() => {
+        if (selectedItem) {
+            listRef.current.scrollToItem(selectedItem, 'center');
+        }
+    }, [selectedItem, listToRender]);
+    function ItemWrapper({ index, style }) {
+        if (omitWrapper)
+            return resolveContent(listToRender[index], style);
+        return _jsx("div", { style: style, children: resolveContent(listToRender[index], style) });
+    }
+    return (_jsx(List, { ref: listRef, itemSize: itemHeight, height: height, width: width, itemCount: listToRender.length, className: className, itemKey: index => index, children: ItemWrapper }));
+};
+export const TS_VirtualizedList = (props) => {
+    return (_jsx(AutoSizer, { children: (size) => _jsx(VirtualizedList, { className: props.className, selectedItem: props.selectedItem, itemHeight: props.itemHeight, listToRender: props.listToRender, height: props.height ?? size.height, width: size.width }) }));
+};

package/components/TS_VirtualizedList/index.d.ts

@@ -0,0 +1 @@
+export * from './TS_VirtualizedList.js';

package/components/TS_VirtualizedList/index.js

@@ -0,0 +1 @@
+export * from './TS_VirtualizedList.js';

package/components/Video/Video.d.ts

@@ -0,0 +1,16 @@
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { TS_Video_Props, TS_VideoConfiguration, TS_VideoSource } from './types.js';
+type State = {
+    source: TS_VideoSource;
+    configuration: TS_VideoConfiguration;
+    width: number;
+    height: number;
+    unsupportedVideoMessage: string;
+};
+export declare class TS_Video extends ComponentSync<TS_Video_Props, State> {
+    protected deriveStateFromProps(nextProps: TS_Video_Props, state: State): State;
+    private getControlsList;
+    private getProps;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/components/Video/Video.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { exists } from '@nu-art/ts-common';
+const defaultVideoUnsupportedMessage = 'Video not supported in this browser';
+export class TS_Video extends ComponentSync {
+    //######################### Life Cycle #########################
+    deriveStateFromProps(nextProps, state) {
+        state.source = nextProps.source;
+        state.configuration = nextProps.configuration;
+        state.unsupportedVideoMessage = nextProps.unsupportedVideoMessage ?? defaultVideoUnsupportedMessage;
+        state.width = nextProps.width;
+        state.height = nextProps.height;
+        return state;
+    }
+    //######################### Logic #########################
+    getControlsList = (config) => {
+        if (!config)
+            return;
+        const list = [];
+        if (config.noDownload)
+            list.push('nodownload');
+        return list.join(' ');
+    };
+    getProps = () => {
+        return {
+            width: this.state.width,
+            height: this.state.height,
+            autoPlay: this.state.configuration.autoplay,
+            muted: this.state.configuration.muted,
+            //Controls props
+            controls: exists(this.state.configuration.controls),
+            // @ts-ignore
+            controlsList: this.getControlsList(this.state.configuration.controls)
+        };
+    };
+    //######################### Render #########################
+    render() {
+        return _jsxs("video", { ...this.getProps(), children: [_jsx("source", { src: this.state.source.url, type: `video/${this.state.source.format}` }), this.state.unsupportedVideoMessage] });
+    }
+}

package/components/Video/VideoDialog.d.ts

@@ -0,0 +1,20 @@
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { TS_Video_Props } from './types.js';
+import './VideoDialog.scss';
+type Props = Omit<TS_Video_Props, 'width' | 'height'> & {
+    dialogOverlayClassName?: string;
+    dialogClassName?: string;
+};
+type State = {
+    width?: number;
+    height?: number;
+};
+export declare class TS_VideoDialog extends ComponentSync<Props, State> {
+    private ref;
+    static show: (props: Props) => void;
+    componentDidMount(): void;
+    private updateSizing;
+    private getVideoProps;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/components/Video/VideoDialog.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { ModuleFE_Dialog } from '../../component-modules/ModuleFE_Dialog.js';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { _className } from '../../utils/tools.js';
+import { TS_Video } from './Video.js';
+import './VideoDialog.scss';
+import { TS_Icons } from '@nu-art/ts-styles';
+export class TS_VideoDialog extends ComponentSync {
+    ref = React.createRef();
+    //######################### Life Cycle #########################
+    static show = (props) => {
+        ModuleFE_Dialog.show({
+            content: _jsx(TS_VideoDialog, { ...props }),
+            closeOverlayOnClick: () => false,
+            overlayClass: props.dialogOverlayClassName,
+        });
+    };
+    componentDidMount() {
+        this.updateSizing();
+    }
+    //######################### Logic #########################
+    updateSizing = () => {
+        const container = this.ref.current;
+        if (!container)
+            return;
+        const rect = container.getBoundingClientRect();
+        this.setState({ width: rect.width, height: rect.height });
+    };
+    getVideoProps = () => {
+        return {
+            source: this.props.source,
+            configuration: this.props.configuration,
+            unsupportedVideoMessage: this.props.unsupportedVideoMessage,
+            width: this.state.width ?? 0,
+            height: this.state.height ?? 0
+        };
+    };
+    //######################### Render #########################
+    render() {
+        const className = _className('ts-video-dialog', this.props.dialogClassName);
+        return _jsxs("div", { ref: this.ref, className: className, children: [_jsx(TS_Video, { ...this.getVideoProps() }), _jsx(TS_Icons.x.component, { onClick: () => ModuleFE_Dialog.close() })] });
+    }
+}

package/components/Video/VideoDialog.scss

@@ -0,0 +1,31 @@
+.ts-video-dialog {
+  width: 95vw;
+  aspect-ratio: 16/9;
+  position: relative;
+
+  .icon--wrapper {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background: #fff;
+    padding: 6px;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 300ms ease-out;
+
+    path {
+      stroke: #000;
+      stroke-width: 0.5;
+    }
+  }
+
+  &:hover {
+    .icon--wrapper {
+      opacity: 1;
+      pointer-events: unset;
+    }
+  }
+}

package/components/Video/types.d.ts

@@ -0,0 +1,20 @@
+export type TS_VideoSourceFormat = 'mp4' | 'webm' | 'ogg';
+export type TS_VideoSource = {
+    url: string;
+    format: TS_VideoSourceFormat;
+};
+export type TS_VideoControlsConfiguration = {
+    noDownload?: boolean;
+};
+export type TS_VideoConfiguration = {
+    controls?: TS_VideoControlsConfiguration;
+    autoplay?: boolean;
+    muted?: boolean;
+};
+export type TS_Video_Props = {
+    source: TS_VideoSource;
+    configuration: TS_VideoConfiguration;
+    width: number;
+    height: number;
+    unsupportedVideoMessage?: string;
+};

package/components/Video/types.js

@@ -0,0 +1 @@
+export {};

package/components/_TS_MultiSelect/DBItemDropDownMultiSelector.d.ts

@@ -0,0 +1,57 @@
+import { DBPointer, DBProto, UniqueId } from '@nu-art/ts-common';
+import * as React from 'react';
+import { MultiSelect_Selector, StaticProps_TS_MultiSelect_V2 } from '../TS_MultiSelect/index.js';
+import { ModuleFE_BaseApi } from '../../modules/db-api-gen/ModuleFE_BaseApi.js';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { GenericDropDown_DBPointer_Item } from '../GenericDropDown/index.js';
+type Props<Proto extends DBProto<any>> = {
+    selector: MultiSelect_Selector<string>;
+    uiSelector: UISelector<Proto>;
+    queryFilter?: (id: UniqueId) => boolean;
+};
+type UISelector<Proto extends DBProto<any>> = (props: {
+    queryFilter: (item: Proto['dbType']) => boolean;
+    onSelected: (selected: Proto['dbType']) => void;
+}) => JSX.Element;
+export type MultiSelectDropDownPropsV3<Proto extends DBProto<any>> = {
+    module: ModuleFE_BaseApi<Proto>;
+    itemRenderer: (item?: Readonly<Proto['dbType']>, onDelete?: () => Promise<void>, disabled?: boolean) => JSX.Element;
+    uiSelector: UISelector<Proto>;
+};
+export declare class DBItemDropDownMultiSelector<Proto extends DBProto<any>> extends ComponentSync<Props<Proto>> {
+    static selector: <Proto_ extends DBProto<any>>(uiSelector: UISelector<Proto_>) => (selector: MultiSelect_Selector<string>) => import("react/jsx-runtime").JSX.Element;
+    static propsV3: <Proto_ extends DBProto<any>>(props: MultiSelectDropDownPropsV3<Proto_>) => StaticProps_TS_MultiSelect_V2<string>;
+    render(): import("react/jsx-runtime").JSX.Element;
+    protected deriveStateFromProps(nextProps: Props<Proto>, state: Partial<object> | undefined): {
+        onSelected: (selected: string) => void | Promise<void>;
+    };
+}
+type Props_DBPointer<Proto extends DBProto<any>> = {
+    selector: MultiSelect_Selector<DBPointer>;
+    uiSelector: UISelector<Proto>;
+    queryFilter?: (item: DBPointer) => boolean;
+};
+type UISelector_DBPointer<Proto extends DBProto<any>> = (props: {
+    queryFilter: (item: GenericDropDown_DBPointer_Item<Proto>) => boolean;
+    onSelected: (selected: GenericDropDown_DBPointer_Item<Proto>) => void;
+}) => JSX.Element;
+export type MultiSelectDropDownProps_DBPointer<Proto extends DBProto<any>> = {
+    uiSelector: UISelector_DBPointer<Proto>;
+    pointerProps: {
+        [P in Proto as P['dbKey']]: {
+            module: ModuleFE_BaseApi<P>;
+            mapper: (item: GenericDropDown_DBPointer_Item<P>) => string[];
+            renderer: (item?: Readonly<DBPointer>, onDelete?: () => Promise<void>, disabled?: boolean) => React.ReactElement;
+        };
+    };
+};
+export declare class DBItemDropDownMultiSelector_DBPointer<Proto extends DBProto<any>> extends ComponentSync<Props_DBPointer<Proto>> {
+    static selector: <Proto_ extends DBProto<any>>(uiSelector: UISelector_DBPointer<Proto_>) => (selector: MultiSelect_Selector<DBPointer>) => import("react/jsx-runtime").JSX.Element;
+    static defaultItemRenderer: (onDelete?: () => Promise<void>, disabled?: boolean) => import("react/jsx-runtime").JSX.Element;
+    static props: <Proto_ extends DBProto<any>>(props: MultiSelectDropDownProps_DBPointer<Proto_>) => StaticProps_TS_MultiSelect_V2<DBPointer>;
+    render(): import("react/jsx-runtime").JSX.Element;
+    protected deriveStateFromProps(nextProps: Props_DBPointer<Proto>, state: Partial<{}> | undefined): {
+        onSelected: (selected: DBPointer) => void | Promise<void>;
+    };
+}
+export {};

package/components/_TS_MultiSelect/DBItemDropDownMultiSelector.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { TS_Icons } from '@nu-art/ts-styles';
+export class DBItemDropDownMultiSelector extends ComponentSync {
+    static selector = (uiSelector) => {
+        return (selector) => _jsx(DBItemDropDownMultiSelector, { selector: selector, uiSelector: uiSelector, queryFilter: selector.queryFilter });
+    };
+    static propsV3 = (props) => {
+        return {
+            itemRenderer: (itemId, onDelete, disabled) => {
+                const dbItem = props.module.cache.unique(itemId);
+                return props.itemRenderer(dbItem, onDelete, disabled);
+            },
+            selectionRenderer: DBItemDropDownMultiSelector.selector(props.uiSelector),
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            selectionFilter: (item) => true,
+        };
+    };
+    render() {
+        const UISelector = this.props.uiSelector;
+        const selector = this.props.selector;
+        const filter = (item) => {
+            return !selector.existingItems.includes(item._id)
+                && (this.props.queryFilter ? this.props.queryFilter(item._id) : true);
+        };
+        return _jsx(UISelector, { queryFilter: filter, onSelected: item => selector.onSelected(item._id) });
+    }
+    deriveStateFromProps(nextProps, state) {
+        return { onSelected: nextProps.selector.onSelected };
+    }
+}
+export class DBItemDropDownMultiSelector_DBPointer extends ComponentSync {
+    static selector = (uiSelector) => {
+        return (selector) => _jsx(DBItemDropDownMultiSelector_DBPointer, { selector: selector, uiSelector: uiSelector, queryFilter: selector.queryFilter });
+    };
+    static defaultItemRenderer = (onDelete, disabled) => {
+        return _jsxs(_Fragment, { children: [!disabled && _jsx(TS_Icons.x.component, { onClick: onDelete }), 'N/A'] });
+    };
+    static props = (props) => {
+        return {
+            itemRenderer: (item, onDelete, disabled) => {
+                if (!item)
+                    return DBItemDropDownMultiSelector_DBPointer.defaultItemRenderer(onDelete, disabled);
+                const itemRenderer = props.pointerProps[item.dbKey].renderer;
+                return itemRenderer(item, onDelete, disabled);
+            },
+            selectionRenderer: DBItemDropDownMultiSelector_DBPointer.selector(props.uiSelector),
+            selectionFilter: (item) => true,
+        };
+    };
+    render() {
+        const UISelector = this.props.uiSelector;
+        const selector = this.props.selector;
+        const filter = (item) => {
+            const existing = selector.existingItems.find(existing => existing.id === item.item._id);
+            return !existing && (this.props.queryFilter ? this.props.queryFilter(item.item._id) : true);
+        };
+        return _jsx(UISelector, { queryFilter: filter, onSelected: item => selector.onSelected({ dbKey: item.dbKey, id: item.item._id }) });
+    }
+    deriveStateFromProps(nextProps, state) {
+        return { onSelected: nextProps.selector.onSelected };
+    }
+}