@spaziodati/atoka-design-system 2.0.72-beta

package/AddableItems/AddableItems.d.ts

@@ -0,0 +1,72 @@
+import React from 'react';
+import { NumberToStringFormatterType, PropsWithClassName } from 'components/Utils/CommonTypes';
+import { ClickableFacetItem } from './ClickableItemList';
+import './AddableItems.less';
+export declare function extractFacetKeyFromItemValue(key: ClickableFacetItem | string): string;
+export interface AddableItemsData {
+    count: number;
+    items: ClickableFacetItem[];
+}
+export interface AddableItemsFacetData {
+    config: Omit<AddableItemsConfig, 'isLoading'>;
+    data: AddableItemsData;
+}
+export interface AddableItemsConfig {
+    isLoading: boolean;
+    include: ClickableFacetItem[];
+    exclude?: ClickableFacetItem[];
+    itemCount?: number;
+    isActive?: boolean;
+}
+export interface AddableItemsProps extends PropsWithClassName {
+    config: AddableItemsConfig;
+    facetData: AddableItemsFacetData;
+    /** this function pushes the clicked item to the `included items` list */
+    onAddItem: (item: ClickableFacetItem) => void;
+    /** this function removes the clicked item from lists */
+    onRemoveItem: (item: ClickableFacetItem) => void;
+    /** this function removes all the items from lists */
+    onRemoveAll?: () => void;
+    /** this function renders an additional suggester field */
+    renderSuggester?: () => JSX.Element;
+    /** this function renders one or many additional generic fields */
+    renderModifiers?: () => JSX.Element;
+    /** this is the label on top of the selected items */
+    label?: string;
+    /** this is the label for `removeAll` button */
+    unselectLabel?: string;
+    /** the label used to prefix excluded items */
+    notSuffixLabel?: string;
+    /** an object that contains tooltips info messages for included and excluded items */
+    tooltipMessages?: {
+        [key: string]: string;
+    };
+    /** this function returns a custom React Node to override the base content of an item */
+    itemContentRenderer?: (item: ClickableFacetItem) => React.ReactNode;
+    /** this function allows to exclude/include the clicked items */
+    onToggleIncludeExclude?: (item: ClickableFacetItem, isExcluded: boolean) => void;
+    /** this is the message that appears when the list of selectable items will be empty */
+    emptyMessage?: string;
+    /** this function allow to use a custom formatters numbers, generally counts in facets items */
+    countFormatter?: NumberToStringFormatterType;
+}
+export interface AddableItemsState {
+    isFirstRender: boolean;
+}
+/**
+ * ### Overview
+ *
+ * The `AddableItems` component is most useful to display a selection list and select many items.
+ * All items selected are commonly used to include these voices on a search.
+ * */
+export declare class AddableItems extends React.PureComponent<AddableItemsProps, AddableItemsState> {
+    static displayName: string;
+    constructor(props: AddableItemsProps);
+    componentDidUpdate(): void;
+    private renderItemContent;
+    private getItemContentRenderer;
+    private renderRemovableItemsTitle;
+    private renderRemovableItems;
+    private getEmptyMessage;
+    render(): React.ReactNode;
+}

package/AddableItems/ClickableExcludableItem.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import './ClickableExcludableItem.less';
+import { ClickableFacetItem, ClickableItemKind } from './ClickableItemList';
+import { AddableItemsProps } from '.';
+export interface ClickableExcludableItemProps extends Pick<AddableItemsProps, 'itemContentRenderer' | 'tooltipMessages' | 'notSuffixLabel' | 'countFormatter'> {
+    item: ClickableFacetItem;
+    onRemove: () => void;
+    supportsExclusion?: boolean;
+    isExcluded?: boolean;
+    kind: ClickableItemKind;
+    onToggleIncludeExclude?: () => void;
+}
+export declare class ClickableExcludableItem extends React.PureComponent<ClickableExcludableItemProps> {
+    static displayName: string;
+    private includeExcludeTogglerRef;
+    private renderItemButtons;
+    private renderItemRealContent;
+    private renderItemContent;
+    private renderIncludeExcludeToggler;
+    private renderCount;
+    private handleContainerClick;
+    render(): JSX.Element;
+}

package/AddableItems/ClickableItemList.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { ClickableExcludableItemProps } from './ClickableExcludableItem';
+import { AddableItemsProps } from '.';
+export declare enum ClickableItemKind {
+    add = 0,
+    remove = 1
+}
+export interface ClickableFacetItem {
+    count?: number;
+    size?: number;
+    label?: string;
+    value: string;
+    key?: string;
+    legalName?: string;
+    type?: string;
+}
+export interface ClickableItemListProps extends Pick<AddableItemsProps, 'onToggleIncludeExclude' | 'itemContentRenderer' | 'tooltipMessages' | 'notSuffixLabel' | 'countFormatter'> {
+    itemKeyGetter?: (item: ClickableFacetItem) => string;
+    items: ClickableExcludableItemProps['item'][];
+    onClick: (item: ClickableFacetItem) => void;
+    supportsExclusion?: boolean;
+    areItemsExcluded?: boolean;
+    kind: ClickableExcludableItemProps['kind'];
+    emptyMessage?: React.ReactNode;
+}
+export declare class ClickableItemList extends React.Component<ClickableItemListProps> {
+    static displayName: string;
+    private renderItem;
+    private needToShowEmptyMessage;
+    private getItems;
+    render(): JSX.Element;
+}

package/AddableItems/index.d.ts

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