@pushwoosh/dumb-components 1.1.29 → 1.1.31

package/Table/components/TablePagination/TablePagination.js

@@ -1,39 +0,0 @@
-import React from 'react';
-import { Horizontal } from '@pushwoosh/kit-helpers';
-import { NativeSelect } from '../../../native';
-import { Pagination } from '../../../Pagination';
-export function TablePagination({
-  activePage,
-  totalPages,
-  limit,
-  allLimits,
-  padding = 24,
-  onChangePage,
-  onChangeLimit,
-  children
-}) {
-  return React.createElement(Horizontal, {
-    "$alignItems": "center",
-    "$justifyContent": "space-between",
-    "$padding": padding
-  }, React.createElement(Horizontal, {
-    "$gap": 8,
-    "$alignItems": "center"
-  }, totalPages > 1 && React.createElement(Pagination, {
-    activePage: activePage,
-    totalPages: totalPages,
-    onChangePage: onChangePage
-  }), children), React.createElement(Horizontal, {
-    "$gap": 8,
-    "$alignItems": "center"
-  }, React.createElement("span", null, "Show on page:"), React.createElement(NativeSelect, {
-    name: "page",
-    value: limit,
-    onChange: event => {
-      onChangeLimit(Number(event.target.value));
-    }
-  }, allLimits.map(option => React.createElement("option", {
-    key: option,
-    value: option
-  }, option)))));
-}

package/Table/components/TablePagination/index.d.ts

@@ -1 +0,0 @@
-export { TablePagination } from './TablePagination';

package/Table/components/TablePagination/index.js

@@ -1 +0,0 @@
-export { TablePagination } from './TablePagination';

package/Table/components/TablePagination/types.d.ts

@@ -1,10 +0,0 @@
-import type { PropsWithChildren } from 'react';
-export type TablePaginationProps = PropsWithChildren<{
-    activePage: number;
-    totalPages: number;
-    limit: number;
-    allLimits: number[];
-    padding?: string | number;
-    onChangePage: (page: number) => void;
-    onChangeLimit: (limit: number) => void;
-}>;

package/Table/components/TablePagination/types.js

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

package/Table/context.d.ts

@@ -1,2 +0,0 @@
-import type { DataTableParams, DataTableContextType } from './types';
-export declare const DataTableContext: import("react").Context<DataTableContextType<any, DataTableParams>>;

package/Table/context.js

@@ -1,2 +0,0 @@
-import { createContext } from 'react';
-export const DataTableContext = createContext(null);

package/Table/hooks/helpers.d.ts

@@ -1,2 +0,0 @@
-export declare function mapKeys<T extends Record<string, any>, K extends string>(obj: T, mapper: (key: string) => K): Record<K, T[keyof T]>;
-export declare function shallowEqual<T extends Record<string, any>>(a: T, b: T): boolean;

package/Table/hooks/helpers.js

@@ -1,6 +0,0 @@
-export function mapKeys(obj, mapper) {
-  return Object.fromEntries(Object.entries(obj).map(([key, value]) => [mapper(key), value]));
-}
-export function shallowEqual(a, b) {
-  return Object.keys(a).every(key => a[key] === b[key]);
-}

package/Table/hooks/index.d.ts

@@ -1,2 +0,0 @@
-export { useDataTableContext } from './useDataTableContext';
-export { useDataTableGetParams } from './useDataTableGetParams';

package/Table/hooks/index.js

@@ -1,2 +0,0 @@
-export { useDataTableContext } from './useDataTableContext';
-export { useDataTableGetParams } from './useDataTableGetParams';

package/Table/hooks/useDataTableContext.d.ts

@@ -1,11 +0,0 @@
-import type { DataTableParams, DataTableContextType } from '../types';
-export type DataTableContextProps<I, P extends DataTableParams> = {
-    getItems: (params: P) => Promise<{
-        items: I[];
-        total: number;
-        totalPages: number;
-    }>;
-    params: P;
-    onChangeParams: (params: P) => void;
-};
-export declare function useDataTableContext<I, P extends DataTableParams = DataTableParams>({ getItems, params, onChangeParams, }: DataTableContextProps<I, P>): DataTableContextType<I, P>;

package/Table/hooks/useDataTableContext.js

@@ -1,23 +0,0 @@
-import { useLayoutEffect, useMemo } from 'react';
-import { useAsyncFn, usePersistentFunction } from '@pushwoosh/kit-helpers';
-export function useDataTableContext({
-  getItems,
-  params,
-  onChangeParams
-}) {
-  const getItemsPersistent = usePersistentFunction(getItems);
-  const [listAsync, reload] = useAsyncFn(() => getItemsPersistent(params), [params], {
-    loading: true
-  });
-  useLayoutEffect(() => {
-    reload({
-      reset: true
-    });
-  }, [reload]);
-  return useMemo(() => ({
-    data: listAsync,
-    reload,
-    params,
-    onChangeParams: onChangeParams
-  }), [reload, params, listAsync, onChangeParams]);
-}

package/Table/hooks/useDataTableGetParams.d.ts

@@ -1,11 +0,0 @@
-import type { DataTableParams } from '../types';
-type UseDataTableParamsParams<P extends DataTableParams> = {
-    defaultOrder: string;
-    defaultDirection?: 'asc' | 'desc';
-    defaultPerPage?: number;
-    customizeParams?: (obj: Record<string, string>, params: DataTableParams) => P;
-    prefix?: string;
-};
-type UseDataTableParamsReturn<P> = readonly [P, (params: P) => void];
-export declare function useDataTableGetParams<P extends DataTableParams>({ defaultOrder, defaultDirection, defaultPerPage, customizeParams, prefix, }: UseDataTableParamsParams<P>): UseDataTableParamsReturn<P>;
-export {};

package/Table/hooks/useDataTableGetParams.js

@@ -1,53 +0,0 @@
-import { useMemo, useRef } from 'react';
-import { useHistory, useLocation } from 'react-router-dom';
-import { usePersistentFunction } from '@pushwoosh/kit-helpers';
-import { mapKeys, shallowEqual } from './helpers';
-export function useDataTableGetParams({
-  defaultOrder,
-  defaultDirection = 'asc',
-  defaultPerPage = 10,
-  customizeParams,
-  prefix = ''
-}) {
-  const history = useHistory();
-  const {
-    search: locationSearch
-  } = useLocation();
-  const customizeParamsRef = useRef(customizeParams);
-  customizeParamsRef.current = customizeParams;
-  const prevDataTableParamsRef = useRef({});
-  const dataTableParams = useMemo(() => {
-    const searchParams = new URLSearchParams(locationSearch);
-    const searchParamsWoPrefix = mapKeys(Object.fromEntries(searchParams), key => key.startsWith(prefix) ? key.slice(prefix.length) : key);
-    // eslint-disable-next-line no-nested-ternary
-    const realOrderDirection = !searchParamsWoPrefix.direction ? defaultDirection : searchParamsWoPrefix.direction === 'asc' ? 'asc' : 'desc';
-    const params = {
-      search: searchParamsWoPrefix.search ?? '',
-      order: searchParamsWoPrefix.order || defaultOrder,
-      direction: realOrderDirection,
-      page: +searchParamsWoPrefix.page || 1,
-      perPage: +searchParamsWoPrefix.perPage || defaultPerPage
-    };
-    // it is necessary to compare with the previous parameters so that there are no extra rerenders
-    const resultParams = customizeParamsRef.current ? customizeParamsRef.current(searchParamsWoPrefix, params) : params;
-    if (!shallowEqual(resultParams, prevDataTableParamsRef.current)) {
-      prevDataTableParamsRef.current = resultParams;
-    }
-    return prevDataTableParamsRef.current;
-  }, [locationSearch, defaultDirection, defaultOrder, defaultPerPage, prefix]);
-  const changeDataTableParams = usePersistentFunction(params => {
-    const searchParams = new URLSearchParams(locationSearch);
-    const paramsWithPrefix = mapKeys(params, key => `${prefix}${key}`);
-    for (const [key, value] of Object.entries(paramsWithPrefix)) {
-      if (value === undefined || value === null || value === '') {
-        searchParams.delete(key);
-      } else {
-        searchParams.set(key, String(value));
-      }
-    }
-    history.push({
-      search: searchParams.toString()
-    });
-  });
-  return [dataTableParams, changeDataTableParams];
-}

package/Table/index.d.ts

@@ -1,10 +0,0 @@
-export { DataTable } from './components/DataTable';
-export { DataTableGetContext } from './components/DataTableGetContext';
-export { DataTablePagination } from './components/DataTablePagination';
-export { DataTableSearchInput } from './components/DataTableSearchInput';
-export { DataTableSortableCell } from './components/DataTableSortableCell';
-export { Loading } from './components/Loading';
-export { TablePagination } from './components/TablePagination';
-export { useDataTableContext, useDataTableGetParams } from './hooks';
-export { Table, Td, Tr, Th, ElementHover, ItemDetailLink, ItemName, LockedText, Description, } from './styles';
-export type { DataTableParams, DataTableData, DataTableContextType } from './types';

package/Table/index.js

@@ -1,9 +0,0 @@
-export { DataTable } from './components/DataTable';
-export { DataTableGetContext } from './components/DataTableGetContext';
-export { DataTablePagination } from './components/DataTablePagination';
-export { DataTableSearchInput } from './components/DataTableSearchInput';
-export { DataTableSortableCell } from './components/DataTableSortableCell';
-export { Loading } from './components/Loading';
-export { TablePagination } from './components/TablePagination';
-export { useDataTableContext, useDataTableGetParams } from './hooks';
-export { Table, Td, Tr, Th, ElementHover, ItemDetailLink, ItemName, LockedText, Description } from './styles';

package/Table/styles.d.ts

@@ -1,247 +0,0 @@
-import { FontSize, FontWeight } from '@pushwoosh/kit-constants';
-export type TableProps = {
-    columns: string;
-    width?: string | number;
-    isBordered?: boolean;
-};
-export declare const Table: import("styled-components").StyledComponent<"div", any, {
-    $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
-    $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
-    $bgColor?: string | undefined;
-    $border?: string | ({
-        top?: string | undefined;
-        right?: string | undefined;
-        bottom?: string | undefined;
-        left?: string | undefined;
-    } | {
-        horizontal: string;
-        top?: string | undefined;
-        bottom?: string | undefined;
-    } | {
-        vertical: string;
-        right?: string | undefined;
-        left?: string | undefined;
-    }) | undefined;
-    $borderRadius?: (string | number) | undefined;
-    $boxShadow?: string | undefined;
-    $gap?: (string | number) | undefined;
-    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
-    $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
-    $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
-    $margin?: (string | number) | ({
-        top?: (string | number) | undefined;
-        right?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    } | {
-        horizontal: string | number;
-        top?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-    } | {
-        vertical: string | number;
-        right?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    }) | undefined;
-    $padding?: (string | number) | ({
-        top?: (string | number) | undefined;
-        right?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    } | {
-        horizontal: string | number;
-        top?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-    } | {
-        vertical: string | number;
-        right?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    }) | undefined;
-    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
-} & {
-    $gridAutoFlow: string;
-} & TableProps, "$gridAutoFlow">;
-export declare const Td: import("styled-components").StyledComponent<"div", any, {
-    $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
-    $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
-    $bgColor?: string | undefined;
-    $border?: string | ({
-        top?: string | undefined;
-        right?: string | undefined;
-        bottom?: string | undefined;
-        left?: string | undefined;
-    } | {
-        horizontal: string;
-        top?: string | undefined;
-        bottom?: string | undefined;
-    } | {
-        vertical: string;
-        right?: string | undefined;
-        left?: string | undefined;
-    }) | undefined;
-    $borderRadius?: (string | number) | undefined;
-    $boxShadow?: string | undefined;
-    $gap?: (string | number) | undefined;
-    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
-    $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
-    $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
-    $margin?: (string | number) | ({
-        top?: (string | number) | undefined;
-        right?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    } | {
-        horizontal: string | number;
-        top?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-    } | {
-        vertical: string | number;
-        right?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    }) | undefined;
-    $padding?: (string | number) | ({
-        top?: (string | number) | undefined;
-        right?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    } | {
-        horizontal: string | number;
-        top?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-    } | {
-        vertical: string | number;
-        right?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    }) | undefined;
-    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
-} & {
-    $padding: number;
-} & {
-    $color?: string;
-}, "$padding">;
-export declare const ElementHover: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Tr: import("styled-components").StyledComponent<"div", any, {
-    $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
-    $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
-    $bgColor?: string | undefined;
-    $border?: string | ({
-        top?: string | undefined;
-        right?: string | undefined;
-        bottom?: string | undefined;
-        left?: string | undefined;
-    } | {
-        horizontal: string;
-        top?: string | undefined;
-        bottom?: string | undefined;
-    } | {
-        vertical: string;
-        right?: string | undefined;
-        left?: string | undefined;
-    }) | undefined;
-    $borderRadius?: (string | number) | undefined;
-    $boxShadow?: string | undefined;
-    $gap?: (string | number) | undefined;
-    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
-    $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
-    $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
-    $margin?: (string | number) | ({
-        top?: (string | number) | undefined;
-        right?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    } | {
-        horizontal: string | number;
-        top?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-    } | {
-        vertical: string | number;
-        right?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    }) | undefined;
-    $padding?: (string | number) | ({
-        top?: (string | number) | undefined;
-        right?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    } | {
-        horizontal: string | number;
-        top?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-    } | {
-        vertical: string | number;
-        right?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    }) | undefined;
-    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
-} & {
-    $gridAutoFlow: string;
-} & {
-    $padding: string;
-}, "$gridAutoFlow" | "$padding">;
-export declare const Th: import("styled-components").StyledComponent<"div", any, {
-    $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
-    $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
-    $bgColor?: string | undefined;
-    $border?: string | ({
-        top?: string | undefined;
-        right?: string | undefined;
-        bottom?: string | undefined;
-        left?: string | undefined;
-    } | {
-        horizontal: string;
-        top?: string | undefined;
-        bottom?: string | undefined;
-    } | {
-        vertical: string;
-        right?: string | undefined;
-        left?: string | undefined;
-    }) | undefined;
-    $borderRadius?: (string | number) | undefined;
-    $boxShadow?: string | undefined;
-    $gap?: (string | number) | undefined;
-    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
-    $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
-    $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
-    $margin?: (string | number) | ({
-        top?: (string | number) | undefined;
-        right?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    } | {
-        horizontal: string | number;
-        top?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-    } | {
-        vertical: string | number;
-        right?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    }) | undefined;
-    $padding?: (string | number) | ({
-        top?: (string | number) | undefined;
-        right?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    } | {
-        horizontal: string | number;
-        top?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-    } | {
-        vertical: string | number;
-        right?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    }) | undefined;
-    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
-} & {
-    $padding: number;
-} & {
-    $color?: string;
-}, "$padding">;
-export declare const ItemDetailLink: import("styled-components").StyledComponent<"a", any, {}, never>;
-export declare const ItemName: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Description: import("styled-components").StyledComponent<"div", any, {
-    $maxLines?: number;
-}, never>;
-export declare const LockedText: import("styled-components").StyledComponent<"div", any, {
-    $fontSize?: FontSize;
-    $fontWeight?: FontWeight;
-    $maxWidth?: string;
-}, never>;

package/Table/styles.js

@@ -1,62 +0,0 @@
-import styled, { css } from 'styled-components';
-import { Color, FontSize, FontWeight, ShapeRadius } from '@pushwoosh/kit-constants';
-import { GridContainer, Horizontal, Vertical, toCssValue } from '@pushwoosh/kit-helpers';
-export const Table = styled(Vertical).withConfig({
-  displayName: "Table",
-  componentId: "sc-1kwcslm-0"
-})(["--table-columns:", ";border:", ";border-radius:", ";background-color:", ";", " & > *:not(:last-child){border-bottom:1px solid ", ";}"], ({
-  columns
-}) => columns, ({
-  isBordered
-}) => isBordered ? `1px solid ${Color.DIVIDER}` : 'none', ShapeRadius.SECTION, Color.CLEAR, ({
-  width
-}) => width ? `width: ${toCssValue(width)};` : '', Color.DIVIDER);
-export const Td = styled(GridContainer).attrs({
-  $padding: 12
-}).withConfig({
-  displayName: "Td",
-  componentId: "sc-1kwcslm-1"
-})(["", ""], ({
-  $color
-}) => $color ? `color: ${$color};` : '');
-export const ElementHover = styled.div.withConfig({
-  displayName: "ElementHover",
-  componentId: "sc-1kwcslm-2"
-})(["display:none;position:relative;& > *{position:absolute;right:0;transform:translateY(-50%);}"]);
-export const Tr = styled(Horizontal).attrs({
-  $padding: '0 12px'
-}).withConfig({
-  displayName: "Tr",
-  componentId: "sc-1kwcslm-3"
-})(["grid-template-columns:var(--table-columns);&:hover{background-color:#89A4BF0D;}&:hover ", "{display:block;}"], ElementHover);
-export const Th = styled(Td).withConfig({
-  displayName: "Th",
-  componentId: "sc-1kwcslm-4"
-})(["padding:8px 12px;color:#969ca3;font-weight:", ";font-size:", ";line-height:1;text-transform:uppercase;"], FontWeight.MEDIUM, FontSize.SMALL);
-export const ItemDetailLink = styled.a.withConfig({
-  displayName: "ItemDetailLink",
-  componentId: "sc-1kwcslm-5"
-})(["display:flex;align-items:center;text-decoration:none;font-weight:", ";color:", ";width:100%;&:hover{text-decoration:none;color:", ";}"], FontWeight.MEDIUM, Color.MAIN, Color.PRIMARY_HOVER);
-export const ItemName = styled.div.withConfig({
-  displayName: "ItemName",
-  componentId: "sc-1kwcslm-6"
-})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
-const overflowStyles = css(["overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:", ";"], ({
-  $maxLines
-}) => $maxLines);
-export const Description = styled.div.withConfig({
-  displayName: "Description",
-  componentId: "sc-1kwcslm-7"
-})(["color:", ";font-size:", ";font-style:normal;font-weight:", ";line-height:130%;", ""], Color.LOCKED, FontSize.SMALL, FontWeight.REGULAR, ({
-  $maxLines
-}) => $maxLines ? overflowStyles : undefined);
-export const LockedText = styled.div.withConfig({
-  displayName: "LockedText",
-  componentId: "sc-1kwcslm-8"
-})(["color:", ";font-size:", ";font-weight:", ";max-width:", ";"], Color.LOCKED, ({
-  $fontSize
-}) => $fontSize || FontSize.REGULAR, ({
-  $fontWeight
-}) => $fontWeight || FontWeight.REGULAR, ({
-  $maxWidth
-}) => $maxWidth || 'initial');

package/Table/types.d.ts

@@ -1,20 +0,0 @@
-import type { AsyncState } from '@pushwoosh/kit-helpers/hooks/useAsyncFn';
-export type DataTableParams = {
-    readonly search: string;
-    readonly order: string;
-    readonly direction: 'asc' | 'desc';
-    readonly page: number;
-    readonly perPage: number;
-};
-export type DataTableData<T> = {
-    items: T[];
-    total?: number;
-    totalPages: number;
-    isFiltered?: boolean;
-};
-export type DataTableContextType<T, P extends DataTableParams> = {
-    data: AsyncState<DataTableData<T>>;
-    reload: () => void;
-    params: P;
-    onChangeParams: (params: P) => void;
-};

package/Table/types.js

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