@pushwoosh/smart-components-kit 1.0.41 → 1.0.43

package/Table/components/DataTablePagination/DataTablePagination.js

@@ -0,0 +1,35 @@
+import React, { useContext } from 'react';
+import { DataTableContext } from '../../context';
+import { TablePagination } from '../TablePagination';
+export function DataTablePagination({
+  allLimits,
+  padding,
+  children
+}) {
+  var _data$value;
+  const {
+    data,
+    params,
+    onChangeParams
+  } = useContext(DataTableContext);
+  return React.createElement(TablePagination, {
+    activePage: params.page,
+    totalPages: ((_data$value = data.value) === null || _data$value === void 0 ? void 0 : _data$value.totalPages) || 1,
+    limit: params.perPage,
+    allLimits: allLimits,
+    onChangePage: page => {
+      onChangeParams({
+        ...params,
+        page
+      });
+    },
+    padding: padding,
+    onChangeLimit: perPage => {
+      onChangeParams({
+        ...params,
+        page: 1,
+        perPage
+      });
+    }
+  }, children);
+}

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

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

package/Table/components/DataTablePagination/index.js

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

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

@@ -0,0 +1,5 @@
+import type { PropsWithChildren } from 'react';
+export type DataTablePaginationProps = PropsWithChildren<{
+    allLimits: number[];
+    padding?: string;
+}>;

package/Table/components/DataTablePagination/types.js

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

package/Table/components/DataTableSearchInput/DataTableSearchInput.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { DataTableSearchInputProps } from './types';
+export declare function DataTableSearchInput(props: DataTableSearchInputProps): ReactElement;

package/Table/components/DataTableSearchInput/DataTableSearchInput.js

@@ -0,0 +1,40 @@
+import React, { useRef, useState, useEffect, useContext } from 'react';
+import { SearchInput } from '@pushwoosh/dumb-components';
+import { DataTableContext } from '../../context';
+export function DataTableSearchInput(props) {
+  const context = useContext(DataTableContext);
+  const [inputValue, setInputValue] = useState(context.params.search);
+  const timeoutRef = useRef();
+  useEffect(() => {
+    if (inputValue !== context.params.search) {
+      setInputValue(context.params.search);
+    }
+  }, [context.params.search]); // eslint-disable-line react-hooks/exhaustive-deps
+  return React.createElement(SearchInput, {
+    ...props,
+    value: inputValue,
+    "$onClear": () => {
+      setInputValue('');
+      context.onChangeParams({
+        ...context.params,
+        search: '',
+        page: 1
+      });
+    },
+    onChange: event => {
+      const value = event.target.value;
+      setInputValue(value);
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      timeoutRef.current = setTimeout(() => {
+        context.onChangeParams({
+          ...context.params,
+          search: value,
+          page: 1
+        });
+        timeoutRef.current = undefined;
+      }, 750);
+    }
+  });
+}

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

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

package/Table/components/DataTableSearchInput/index.js

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

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

@@ -0,0 +1,3 @@
+export interface DataTableSearchInputProps {
+    placeholder?: string;
+}

package/Table/components/DataTableSearchInput/types.js

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

package/Table/components/DataTableSortableCell/DataTableSortableCell.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { DataTableSortableCellProps } from './types';
+export declare function DataTableSortableCell(props: DataTableSortableCellProps): ReactElement;

package/Table/components/DataTableSortableCell/DataTableSortableCell.js

@@ -0,0 +1,25 @@
+import React, { useContext } from 'react';
+import { SortButton } from '@pushwoosh/dumb-components';
+import { DataTableContext } from '../../context';
+export function DataTableSortableCell(props) {
+  const {
+    name,
+    children
+  } = props;
+  const {
+    params,
+    onChangeParams
+  } = useContext(DataTableContext);
+  return React.createElement(SortButton, {
+    name: name,
+    order: params.order === name ? params.direction : null,
+    onClick: sortParams => {
+      onChangeParams({
+        ...params,
+        order: sortParams.name,
+        direction: sortParams.order || 'asc',
+        page: 1
+      });
+    }
+  }, children);
+}

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

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

package/Table/components/DataTableSortableCell/index.js

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

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

@@ -0,0 +1,4 @@
+import type { PropsWithChildren } from 'react';
+export type DataTableSortableCellProps = PropsWithChildren<{
+    name: string;
+}>;

package/Table/components/DataTableSortableCell/types.js

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

package/Table/components/Loading/Loading.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Loading: () => React.JSX.Element;

package/Table/components/Loading/Loading.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { TextSkeleton } from '@pushwoosh/dumb-components';
+import { Horizontal } from '@pushwoosh/kit-helpers';
+import { Wrapper } from './styles';
+const Row = ({
+  width
+}) => React.createElement(Horizontal, {
+  "$alignItems": "center",
+  "$padding": "0 24px"
+}, React.createElement(TextSkeleton, {
+  width: width
+}));
+export const Loading = () => React.createElement(Wrapper, null, Array.from({
+  length: 4
+}).map((_, index) =>
+// eslint-disable-next-line react/no-array-index-key
+React.createElement(Row, {
+  key: index,
+  width: `${index % 2 ? 35 : 50}%`
+})));

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

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

package/Table/components/Loading/index.js

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

package/Table/components/Loading/styles.d.ts

@@ -0,0 +1 @@
+export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/Table/components/Loading/styles.js

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+import { Color, FontSize } from '@pushwoosh/kit-constants';
+export const Wrapper = styled.div.withConfig({
+  displayName: "Wrapper",
+  componentId: "sc-x57qck-0"
+})(["position:relative;font-size:", ";line-height:12px;background-color:", ";& > div{height:52px;border-bottom:1px solid ", ";& > div{transition:width 200ms linear;}}&:after{content:'';position:absolute;left:0;right:0;top:0;bottom:0;background-image:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,0.9));}"], FontSize.SMALL, Color.CLEAR, Color.DIVIDER);

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

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { TablePaginationProps } from './types';
+export declare function TablePagination({ activePage, totalPages, limit, allLimits, padding, onChangePage, onChangeLimit, children, }: TablePaginationProps): ReactElement;

package/Table/components/TablePagination/TablePagination.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { NativeSelect, Pagination } from '@pushwoosh/dumb-components';
+import { Horizontal } from '@pushwoosh/kit-helpers';
+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

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

package/Table/components/TablePagination/index.js

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

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

@@ -0,0 +1,10 @@
+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

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

package/Table/context.d.ts

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

package/Table/context.js

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

package/Table/hooks/helpers.d.ts

@@ -0,0 +1,2 @@
+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

@@ -0,0 +1,6 @@
+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

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

package/Table/hooks/index.js

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

package/Table/hooks/useDataTableContext.d.ts

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,53 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,9 @@
+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';