@pushwoosh/dumb-components 1.1.29 → 1.1.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (70) hide show
  1. package/index.d.ts +0 -1
  2. package/index.js +0 -1
  3. package/package.json +1 -3
  4. package/Table/assets/box.svg +0 -1
  5. package/Table/assets/error.svg +0 -1
  6. package/Table/assets/notfound.svg +0 -1
  7. package/Table/components/DataTable/DataTable.d.ts +0 -4
  8. package/Table/components/DataTable/DataTable.js +0 -79
  9. package/Table/components/DataTable/index.d.ts +0 -1
  10. package/Table/components/DataTable/index.js +0 -1
  11. package/Table/components/DataTable/types.d.ts +0 -26
  12. package/Table/components/DataTable/types.js +0 -1
  13. package/Table/components/DataTableGetContext/DataTableGetContext.d.ts +0 -4
  14. package/Table/components/DataTableGetContext/DataTableGetContext.js +0 -8
  15. package/Table/components/DataTableGetContext/index.d.ts +0 -1
  16. package/Table/components/DataTableGetContext/index.js +0 -1
  17. package/Table/components/DataTableGetContext/types.d.ts +0 -5
  18. package/Table/components/DataTableGetContext/types.js +0 -1
  19. package/Table/components/DataTableList/DataTableList.d.ts +0 -3
  20. package/Table/components/DataTableList/DataTableList.js +0 -80
  21. package/Table/components/DataTableList/index.d.ts +0 -1
  22. package/Table/components/DataTableList/index.js +0 -1
  23. package/Table/components/DataTableList/types.d.ts +0 -4
  24. package/Table/components/DataTableList/types.js +0 -1
  25. package/Table/components/DataTablePagination/DataTablePagination.d.ts +0 -3
  26. package/Table/components/DataTablePagination/DataTablePagination.js +0 -35
  27. package/Table/components/DataTablePagination/index.d.ts +0 -1
  28. package/Table/components/DataTablePagination/index.js +0 -1
  29. package/Table/components/DataTablePagination/types.d.ts +0 -5
  30. package/Table/components/DataTablePagination/types.js +0 -1
  31. package/Table/components/DataTableSearchInput/DataTableSearchInput.d.ts +0 -3
  32. package/Table/components/DataTableSearchInput/DataTableSearchInput.js +0 -40
  33. package/Table/components/DataTableSearchInput/index.d.ts +0 -1
  34. package/Table/components/DataTableSearchInput/index.js +0 -1
  35. package/Table/components/DataTableSearchInput/types.d.ts +0 -3
  36. package/Table/components/DataTableSearchInput/types.js +0 -1
  37. package/Table/components/DataTableSortableCell/DataTableSortableCell.d.ts +0 -3
  38. package/Table/components/DataTableSortableCell/DataTableSortableCell.js +0 -25
  39. package/Table/components/DataTableSortableCell/index.d.ts +0 -1
  40. package/Table/components/DataTableSortableCell/index.js +0 -1
  41. package/Table/components/DataTableSortableCell/types.d.ts +0 -4
  42. package/Table/components/DataTableSortableCell/types.js +0 -1
  43. package/Table/components/Loading/Loading.d.ts +0 -2
  44. package/Table/components/Loading/Loading.js +0 -20
  45. package/Table/components/Loading/index.d.ts +0 -1
  46. package/Table/components/Loading/index.js +0 -1
  47. package/Table/components/Loading/styles.d.ts +0 -1
  48. package/Table/components/Loading/styles.js +0 -6
  49. package/Table/components/TablePagination/TablePagination.d.ts +0 -3
  50. package/Table/components/TablePagination/TablePagination.js +0 -39
  51. package/Table/components/TablePagination/index.d.ts +0 -1
  52. package/Table/components/TablePagination/index.js +0 -1
  53. package/Table/components/TablePagination/types.d.ts +0 -10
  54. package/Table/components/TablePagination/types.js +0 -1
  55. package/Table/context.d.ts +0 -2
  56. package/Table/context.js +0 -2
  57. package/Table/hooks/helpers.d.ts +0 -2
  58. package/Table/hooks/helpers.js +0 -6
  59. package/Table/hooks/index.d.ts +0 -2
  60. package/Table/hooks/index.js +0 -2
  61. package/Table/hooks/useDataTableContext.d.ts +0 -11
  62. package/Table/hooks/useDataTableContext.js +0 -23
  63. package/Table/hooks/useDataTableGetParams.d.ts +0 -11
  64. package/Table/hooks/useDataTableGetParams.js +0 -53
  65. package/Table/index.d.ts +0 -10
  66. package/Table/index.js +0 -9
  67. package/Table/styles.d.ts +0 -247
  68. package/Table/styles.js +0 -62
  69. package/Table/types.d.ts +0 -20
  70. package/Table/types.js +0 -1
@@ -1,25 +0,0 @@
1
- import React, { useContext } from 'react';
2
- import { SortButton } from '../../../SortButton';
3
- import { DataTableContext } from '../../context';
4
- export function DataTableSortableCell(props) {
5
- const {
6
- name,
7
- children
8
- } = props;
9
- const {
10
- params,
11
- onChangeParams
12
- } = useContext(DataTableContext);
13
- return React.createElement(SortButton, {
14
- name: name,
15
- order: params.order === name ? params.direction : null,
16
- onClick: sortParams => {
17
- onChangeParams({
18
- ...params,
19
- order: sortParams.name,
20
- direction: sortParams.order || 'asc',
21
- page: 1
22
- });
23
- }
24
- }, children);
25
- }
@@ -1 +0,0 @@
1
- export { DataTableSortableCell } from './DataTableSortableCell';
@@ -1 +0,0 @@
1
- export { DataTableSortableCell } from './DataTableSortableCell';
@@ -1,4 +0,0 @@
1
- import type { PropsWithChildren } from 'react';
2
- export type DataTableSortableCellProps = PropsWithChildren<{
3
- name: string;
4
- }>;
@@ -1 +0,0 @@
1
- export {};
@@ -1,2 +0,0 @@
1
- import React from 'react';
2
- export declare const Loading: () => React.JSX.Element;
@@ -1,20 +0,0 @@
1
- import React from 'react';
2
- import { Horizontal } from '@pushwoosh/kit-helpers';
3
- import { Wrapper } from './styles';
4
- import { TextSkeleton } from '../../../Skeleton';
5
- const Row = ({
6
- width
7
- }) => React.createElement(Horizontal, {
8
- "$alignItems": "center",
9
- "$padding": "0 24px"
10
- }, React.createElement(TextSkeleton, {
11
- width: width
12
- }));
13
- export const Loading = () => React.createElement(Wrapper, null, Array.from({
14
- length: 4
15
- }).map((_, index) =>
16
- // eslint-disable-next-line react/no-array-index-key
17
- React.createElement(Row, {
18
- key: index,
19
- width: `${index % 2 ? 35 : 50}%`
20
- })));
@@ -1 +0,0 @@
1
- export { Loading } from './Loading';
@@ -1 +0,0 @@
1
- export { Loading } from './Loading';
@@ -1 +0,0 @@
1
- export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -1,6 +0,0 @@
1
- import styled from 'styled-components';
2
- import { Color, FontSize } from '@pushwoosh/kit-constants';
3
- export const Wrapper = styled.div.withConfig({
4
- displayName: "Wrapper",
5
- componentId: "sc-1xpxjq7-0"
6
- })(["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);
@@ -1,3 +0,0 @@
1
- import { type ReactElement } from 'react';
2
- import type { TablePaginationProps } from './types';
3
- export declare function TablePagination({ activePage, totalPages, limit, allLimits, padding, onChangePage, onChangeLimit, children, }: TablePaginationProps): ReactElement;
@@ -1,39 +0,0 @@
1
- import React from 'react';
2
- import { Horizontal } from '@pushwoosh/kit-helpers';
3
- import { NativeSelect } from '../../../native';
4
- import { Pagination } from '../../../Pagination';
5
- export function TablePagination({
6
- activePage,
7
- totalPages,
8
- limit,
9
- allLimits,
10
- padding = 24,
11
- onChangePage,
12
- onChangeLimit,
13
- children
14
- }) {
15
- return React.createElement(Horizontal, {
16
- "$alignItems": "center",
17
- "$justifyContent": "space-between",
18
- "$padding": padding
19
- }, React.createElement(Horizontal, {
20
- "$gap": 8,
21
- "$alignItems": "center"
22
- }, totalPages > 1 && React.createElement(Pagination, {
23
- activePage: activePage,
24
- totalPages: totalPages,
25
- onChangePage: onChangePage
26
- }), children), React.createElement(Horizontal, {
27
- "$gap": 8,
28
- "$alignItems": "center"
29
- }, React.createElement("span", null, "Show on page:"), React.createElement(NativeSelect, {
30
- name: "page",
31
- value: limit,
32
- onChange: event => {
33
- onChangeLimit(Number(event.target.value));
34
- }
35
- }, allLimits.map(option => React.createElement("option", {
36
- key: option,
37
- value: option
38
- }, option)))));
39
- }
@@ -1 +0,0 @@
1
- export { TablePagination } from './TablePagination';
@@ -1 +0,0 @@
1
- export { TablePagination } from './TablePagination';
@@ -1,10 +0,0 @@
1
- import type { PropsWithChildren } from 'react';
2
- export type TablePaginationProps = PropsWithChildren<{
3
- activePage: number;
4
- totalPages: number;
5
- limit: number;
6
- allLimits: number[];
7
- padding?: string | number;
8
- onChangePage: (page: number) => void;
9
- onChangeLimit: (limit: number) => void;
10
- }>;
@@ -1 +0,0 @@
1
- export {};
@@ -1,2 +0,0 @@
1
- import type { DataTableParams, DataTableContextType } from './types';
2
- export declare const DataTableContext: import("react").Context<DataTableContextType<any, DataTableParams>>;
package/Table/context.js DELETED
@@ -1,2 +0,0 @@
1
- import { createContext } from 'react';
2
- export const DataTableContext = createContext(null);
@@ -1,2 +0,0 @@
1
- export declare function mapKeys<T extends Record<string, any>, K extends string>(obj: T, mapper: (key: string) => K): Record<K, T[keyof T]>;
2
- export declare function shallowEqual<T extends Record<string, any>>(a: T, b: T): boolean;
@@ -1,6 +0,0 @@
1
- export function mapKeys(obj, mapper) {
2
- return Object.fromEntries(Object.entries(obj).map(([key, value]) => [mapper(key), value]));
3
- }
4
- export function shallowEqual(a, b) {
5
- return Object.keys(a).every(key => a[key] === b[key]);
6
- }
@@ -1,2 +0,0 @@
1
- export { useDataTableContext } from './useDataTableContext';
2
- export { useDataTableGetParams } from './useDataTableGetParams';
@@ -1,2 +0,0 @@
1
- export { useDataTableContext } from './useDataTableContext';
2
- export { useDataTableGetParams } from './useDataTableGetParams';
@@ -1,11 +0,0 @@
1
- import type { DataTableParams, DataTableContextType } from '../types';
2
- export type DataTableContextProps<I, P extends DataTableParams> = {
3
- getItems: (params: P) => Promise<{
4
- items: I[];
5
- total: number;
6
- totalPages: number;
7
- }>;
8
- params: P;
9
- onChangeParams: (params: P) => void;
10
- };
11
- export declare function useDataTableContext<I, P extends DataTableParams = DataTableParams>({ getItems, params, onChangeParams, }: DataTableContextProps<I, P>): DataTableContextType<I, P>;
@@ -1,23 +0,0 @@
1
- import { useLayoutEffect, useMemo } from 'react';
2
- import { useAsyncFn, usePersistentFunction } from '@pushwoosh/kit-helpers';
3
- export function useDataTableContext({
4
- getItems,
5
- params,
6
- onChangeParams
7
- }) {
8
- const getItemsPersistent = usePersistentFunction(getItems);
9
- const [listAsync, reload] = useAsyncFn(() => getItemsPersistent(params), [params], {
10
- loading: true
11
- });
12
- useLayoutEffect(() => {
13
- reload({
14
- reset: true
15
- });
16
- }, [reload]);
17
- return useMemo(() => ({
18
- data: listAsync,
19
- reload,
20
- params,
21
- onChangeParams: onChangeParams
22
- }), [reload, params, listAsync, onChangeParams]);
23
- }
@@ -1,11 +0,0 @@
1
- import type { DataTableParams } from '../types';
2
- type UseDataTableParamsParams<P extends DataTableParams> = {
3
- defaultOrder: string;
4
- defaultDirection?: 'asc' | 'desc';
5
- defaultPerPage?: number;
6
- customizeParams?: (obj: Record<string, string>, params: DataTableParams) => P;
7
- prefix?: string;
8
- };
9
- type UseDataTableParamsReturn<P> = readonly [P, (params: P) => void];
10
- export declare function useDataTableGetParams<P extends DataTableParams>({ defaultOrder, defaultDirection, defaultPerPage, customizeParams, prefix, }: UseDataTableParamsParams<P>): UseDataTableParamsReturn<P>;
11
- export {};
@@ -1,53 +0,0 @@
1
- import { useMemo, useRef } from 'react';
2
- import { useHistory, useLocation } from 'react-router-dom';
3
- import { usePersistentFunction } from '@pushwoosh/kit-helpers';
4
- import { mapKeys, shallowEqual } from './helpers';
5
- export function useDataTableGetParams({
6
- defaultOrder,
7
- defaultDirection = 'asc',
8
- defaultPerPage = 10,
9
- customizeParams,
10
- prefix = ''
11
- }) {
12
- const history = useHistory();
13
- const {
14
- search: locationSearch
15
- } = useLocation();
16
- const customizeParamsRef = useRef(customizeParams);
17
- customizeParamsRef.current = customizeParams;
18
- const prevDataTableParamsRef = useRef({});
19
- const dataTableParams = useMemo(() => {
20
- const searchParams = new URLSearchParams(locationSearch);
21
- const searchParamsWoPrefix = mapKeys(Object.fromEntries(searchParams), key => key.startsWith(prefix) ? key.slice(prefix.length) : key);
22
- // eslint-disable-next-line no-nested-ternary
23
- const realOrderDirection = !searchParamsWoPrefix.direction ? defaultDirection : searchParamsWoPrefix.direction === 'asc' ? 'asc' : 'desc';
24
- const params = {
25
- search: searchParamsWoPrefix.search ?? '',
26
- order: searchParamsWoPrefix.order || defaultOrder,
27
- direction: realOrderDirection,
28
- page: +searchParamsWoPrefix.page || 1,
29
- perPage: +searchParamsWoPrefix.perPage || defaultPerPage
30
- };
31
- // it is necessary to compare with the previous parameters so that there are no extra rerenders
32
- const resultParams = customizeParamsRef.current ? customizeParamsRef.current(searchParamsWoPrefix, params) : params;
33
- if (!shallowEqual(resultParams, prevDataTableParamsRef.current)) {
34
- prevDataTableParamsRef.current = resultParams;
35
- }
36
- return prevDataTableParamsRef.current;
37
- }, [locationSearch, defaultDirection, defaultOrder, defaultPerPage, prefix]);
38
- const changeDataTableParams = usePersistentFunction(params => {
39
- const searchParams = new URLSearchParams(locationSearch);
40
- const paramsWithPrefix = mapKeys(params, key => `${prefix}${key}`);
41
- for (const [key, value] of Object.entries(paramsWithPrefix)) {
42
- if (value === undefined || value === null || value === '') {
43
- searchParams.delete(key);
44
- } else {
45
- searchParams.set(key, String(value));
46
- }
47
- }
48
- history.push({
49
- search: searchParams.toString()
50
- });
51
- });
52
- return [dataTableParams, changeDataTableParams];
53
- }
package/Table/index.d.ts DELETED
@@ -1,10 +0,0 @@
1
- export { DataTable } from './components/DataTable';
2
- export { DataTableGetContext } from './components/DataTableGetContext';
3
- export { DataTablePagination } from './components/DataTablePagination';
4
- export { DataTableSearchInput } from './components/DataTableSearchInput';
5
- export { DataTableSortableCell } from './components/DataTableSortableCell';
6
- export { Loading } from './components/Loading';
7
- export { TablePagination } from './components/TablePagination';
8
- export { useDataTableContext, useDataTableGetParams } from './hooks';
9
- export { Table, Td, Tr, Th, ElementHover, ItemDetailLink, ItemName, LockedText, Description, } from './styles';
10
- export type { DataTableParams, DataTableData, DataTableContextType } from './types';
package/Table/index.js DELETED
@@ -1,9 +0,0 @@
1
- export { DataTable } from './components/DataTable';
2
- export { DataTableGetContext } from './components/DataTableGetContext';
3
- export { DataTablePagination } from './components/DataTablePagination';
4
- export { DataTableSearchInput } from './components/DataTableSearchInput';
5
- export { DataTableSortableCell } from './components/DataTableSortableCell';
6
- export { Loading } from './components/Loading';
7
- export { TablePagination } from './components/TablePagination';
8
- export { useDataTableContext, useDataTableGetParams } from './hooks';
9
- export { Table, Td, Tr, Th, ElementHover, ItemDetailLink, ItemName, LockedText, Description } from './styles';
package/Table/styles.d.ts DELETED
@@ -1,247 +0,0 @@
1
- import { FontSize, FontWeight } from '@pushwoosh/kit-constants';
2
- export type TableProps = {
3
- columns: string;
4
- width?: string | number;
5
- isBordered?: boolean;
6
- };
7
- export declare const Table: import("styled-components").StyledComponent<"div", any, {
8
- $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
9
- $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
10
- $bgColor?: string | undefined;
11
- $border?: string | ({
12
- top?: string | undefined;
13
- right?: string | undefined;
14
- bottom?: string | undefined;
15
- left?: string | undefined;
16
- } | {
17
- horizontal: string;
18
- top?: string | undefined;
19
- bottom?: string | undefined;
20
- } | {
21
- vertical: string;
22
- right?: string | undefined;
23
- left?: string | undefined;
24
- }) | undefined;
25
- $borderRadius?: (string | number) | undefined;
26
- $boxShadow?: string | undefined;
27
- $gap?: (string | number) | undefined;
28
- $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
29
- $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
30
- $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
31
- $margin?: (string | number) | ({
32
- top?: (string | number) | undefined;
33
- right?: (string | number) | undefined;
34
- bottom?: (string | number) | undefined;
35
- left?: (string | number) | undefined;
36
- } | {
37
- horizontal: string | number;
38
- top?: (string | number) | undefined;
39
- bottom?: (string | number) | undefined;
40
- } | {
41
- vertical: string | number;
42
- right?: (string | number) | undefined;
43
- left?: (string | number) | undefined;
44
- }) | undefined;
45
- $padding?: (string | number) | ({
46
- top?: (string | number) | undefined;
47
- right?: (string | number) | undefined;
48
- bottom?: (string | number) | undefined;
49
- left?: (string | number) | undefined;
50
- } | {
51
- horizontal: string | number;
52
- top?: (string | number) | undefined;
53
- bottom?: (string | number) | undefined;
54
- } | {
55
- vertical: string | number;
56
- right?: (string | number) | undefined;
57
- left?: (string | number) | undefined;
58
- }) | undefined;
59
- $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
60
- } & {
61
- $gridAutoFlow: string;
62
- } & TableProps, "$gridAutoFlow">;
63
- export declare const Td: import("styled-components").StyledComponent<"div", any, {
64
- $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
65
- $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
66
- $bgColor?: string | undefined;
67
- $border?: string | ({
68
- top?: string | undefined;
69
- right?: string | undefined;
70
- bottom?: string | undefined;
71
- left?: string | undefined;
72
- } | {
73
- horizontal: string;
74
- top?: string | undefined;
75
- bottom?: string | undefined;
76
- } | {
77
- vertical: string;
78
- right?: string | undefined;
79
- left?: string | undefined;
80
- }) | undefined;
81
- $borderRadius?: (string | number) | undefined;
82
- $boxShadow?: string | undefined;
83
- $gap?: (string | number) | undefined;
84
- $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
85
- $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
86
- $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
87
- $margin?: (string | number) | ({
88
- top?: (string | number) | undefined;
89
- right?: (string | number) | undefined;
90
- bottom?: (string | number) | undefined;
91
- left?: (string | number) | undefined;
92
- } | {
93
- horizontal: string | number;
94
- top?: (string | number) | undefined;
95
- bottom?: (string | number) | undefined;
96
- } | {
97
- vertical: string | number;
98
- right?: (string | number) | undefined;
99
- left?: (string | number) | undefined;
100
- }) | undefined;
101
- $padding?: (string | number) | ({
102
- top?: (string | number) | undefined;
103
- right?: (string | number) | undefined;
104
- bottom?: (string | number) | undefined;
105
- left?: (string | number) | undefined;
106
- } | {
107
- horizontal: string | number;
108
- top?: (string | number) | undefined;
109
- bottom?: (string | number) | undefined;
110
- } | {
111
- vertical: string | number;
112
- right?: (string | number) | undefined;
113
- left?: (string | number) | undefined;
114
- }) | undefined;
115
- $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
116
- } & {
117
- $padding: number;
118
- } & {
119
- $color?: string;
120
- }, "$padding">;
121
- export declare const ElementHover: import("styled-components").StyledComponent<"div", any, {}, never>;
122
- export declare const Tr: import("styled-components").StyledComponent<"div", any, {
123
- $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
124
- $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
125
- $bgColor?: string | undefined;
126
- $border?: string | ({
127
- top?: string | undefined;
128
- right?: string | undefined;
129
- bottom?: string | undefined;
130
- left?: string | undefined;
131
- } | {
132
- horizontal: string;
133
- top?: string | undefined;
134
- bottom?: string | undefined;
135
- } | {
136
- vertical: string;
137
- right?: string | undefined;
138
- left?: string | undefined;
139
- }) | undefined;
140
- $borderRadius?: (string | number) | undefined;
141
- $boxShadow?: string | undefined;
142
- $gap?: (string | number) | undefined;
143
- $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
144
- $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
145
- $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
146
- $margin?: (string | number) | ({
147
- top?: (string | number) | undefined;
148
- right?: (string | number) | undefined;
149
- bottom?: (string | number) | undefined;
150
- left?: (string | number) | undefined;
151
- } | {
152
- horizontal: string | number;
153
- top?: (string | number) | undefined;
154
- bottom?: (string | number) | undefined;
155
- } | {
156
- vertical: string | number;
157
- right?: (string | number) | undefined;
158
- left?: (string | number) | undefined;
159
- }) | undefined;
160
- $padding?: (string | number) | ({
161
- top?: (string | number) | undefined;
162
- right?: (string | number) | undefined;
163
- bottom?: (string | number) | undefined;
164
- left?: (string | number) | undefined;
165
- } | {
166
- horizontal: string | number;
167
- top?: (string | number) | undefined;
168
- bottom?: (string | number) | undefined;
169
- } | {
170
- vertical: string | number;
171
- right?: (string | number) | undefined;
172
- left?: (string | number) | undefined;
173
- }) | undefined;
174
- $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
175
- } & {
176
- $gridAutoFlow: string;
177
- } & {
178
- $padding: string;
179
- }, "$gridAutoFlow" | "$padding">;
180
- export declare const Th: import("styled-components").StyledComponent<"div", any, {
181
- $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
182
- $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
183
- $bgColor?: string | undefined;
184
- $border?: string | ({
185
- top?: string | undefined;
186
- right?: string | undefined;
187
- bottom?: string | undefined;
188
- left?: string | undefined;
189
- } | {
190
- horizontal: string;
191
- top?: string | undefined;
192
- bottom?: string | undefined;
193
- } | {
194
- vertical: string;
195
- right?: string | undefined;
196
- left?: string | undefined;
197
- }) | undefined;
198
- $borderRadius?: (string | number) | undefined;
199
- $boxShadow?: string | undefined;
200
- $gap?: (string | number) | undefined;
201
- $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
202
- $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
203
- $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
204
- $margin?: (string | number) | ({
205
- top?: (string | number) | undefined;
206
- right?: (string | number) | undefined;
207
- bottom?: (string | number) | undefined;
208
- left?: (string | number) | undefined;
209
- } | {
210
- horizontal: string | number;
211
- top?: (string | number) | undefined;
212
- bottom?: (string | number) | undefined;
213
- } | {
214
- vertical: string | number;
215
- right?: (string | number) | undefined;
216
- left?: (string | number) | undefined;
217
- }) | undefined;
218
- $padding?: (string | number) | ({
219
- top?: (string | number) | undefined;
220
- right?: (string | number) | undefined;
221
- bottom?: (string | number) | undefined;
222
- left?: (string | number) | undefined;
223
- } | {
224
- horizontal: string | number;
225
- top?: (string | number) | undefined;
226
- bottom?: (string | number) | undefined;
227
- } | {
228
- vertical: string | number;
229
- right?: (string | number) | undefined;
230
- left?: (string | number) | undefined;
231
- }) | undefined;
232
- $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
233
- } & {
234
- $padding: number;
235
- } & {
236
- $color?: string;
237
- }, "$padding">;
238
- export declare const ItemDetailLink: import("styled-components").StyledComponent<"a", any, {}, never>;
239
- export declare const ItemName: import("styled-components").StyledComponent<"div", any, {}, never>;
240
- export declare const Description: import("styled-components").StyledComponent<"div", any, {
241
- $maxLines?: number;
242
- }, never>;
243
- export declare const LockedText: import("styled-components").StyledComponent<"div", any, {
244
- $fontSize?: FontSize;
245
- $fontWeight?: FontWeight;
246
- $maxWidth?: string;
247
- }, never>;
package/Table/styles.js DELETED
@@ -1,62 +0,0 @@
1
- import styled, { css } from 'styled-components';
2
- import { Color, FontSize, FontWeight, ShapeRadius } from '@pushwoosh/kit-constants';
3
- import { GridContainer, Horizontal, Vertical, toCssValue } from '@pushwoosh/kit-helpers';
4
- export const Table = styled(Vertical).withConfig({
5
- displayName: "Table",
6
- componentId: "sc-1kwcslm-0"
7
- })(["--table-columns:", ";border:", ";border-radius:", ";background-color:", ";", " & > *:not(:last-child){border-bottom:1px solid ", ";}"], ({
8
- columns
9
- }) => columns, ({
10
- isBordered
11
- }) => isBordered ? `1px solid ${Color.DIVIDER}` : 'none', ShapeRadius.SECTION, Color.CLEAR, ({
12
- width
13
- }) => width ? `width: ${toCssValue(width)};` : '', Color.DIVIDER);
14
- export const Td = styled(GridContainer).attrs({
15
- $padding: 12
16
- }).withConfig({
17
- displayName: "Td",
18
- componentId: "sc-1kwcslm-1"
19
- })(["", ""], ({
20
- $color
21
- }) => $color ? `color: ${$color};` : '');
22
- export const ElementHover = styled.div.withConfig({
23
- displayName: "ElementHover",
24
- componentId: "sc-1kwcslm-2"
25
- })(["display:none;position:relative;& > *{position:absolute;right:0;transform:translateY(-50%);}"]);
26
- export const Tr = styled(Horizontal).attrs({
27
- $padding: '0 12px'
28
- }).withConfig({
29
- displayName: "Tr",
30
- componentId: "sc-1kwcslm-3"
31
- })(["grid-template-columns:var(--table-columns);&:hover{background-color:#89A4BF0D;}&:hover ", "{display:block;}"], ElementHover);
32
- export const Th = styled(Td).withConfig({
33
- displayName: "Th",
34
- componentId: "sc-1kwcslm-4"
35
- })(["padding:8px 12px;color:#969ca3;font-weight:", ";font-size:", ";line-height:1;text-transform:uppercase;"], FontWeight.MEDIUM, FontSize.SMALL);
36
- export const ItemDetailLink = styled.a.withConfig({
37
- displayName: "ItemDetailLink",
38
- componentId: "sc-1kwcslm-5"
39
- })(["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);
40
- export const ItemName = styled.div.withConfig({
41
- displayName: "ItemName",
42
- componentId: "sc-1kwcslm-6"
43
- })(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
44
- const overflowStyles = css(["overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:", ";"], ({
45
- $maxLines
46
- }) => $maxLines);
47
- export const Description = styled.div.withConfig({
48
- displayName: "Description",
49
- componentId: "sc-1kwcslm-7"
50
- })(["color:", ";font-size:", ";font-style:normal;font-weight:", ";line-height:130%;", ""], Color.LOCKED, FontSize.SMALL, FontWeight.REGULAR, ({
51
- $maxLines
52
- }) => $maxLines ? overflowStyles : undefined);
53
- export const LockedText = styled.div.withConfig({
54
- displayName: "LockedText",
55
- componentId: "sc-1kwcslm-8"
56
- })(["color:", ";font-size:", ";font-weight:", ";max-width:", ";"], Color.LOCKED, ({
57
- $fontSize
58
- }) => $fontSize || FontSize.REGULAR, ({
59
- $fontWeight
60
- }) => $fontWeight || FontWeight.REGULAR, ({
61
- $maxWidth
62
- }) => $maxWidth || 'initial');
package/Table/types.d.ts DELETED
@@ -1,20 +0,0 @@
1
- import type { AsyncState } from '@pushwoosh/kit-helpers/hooks/useAsyncFn';
2
- export type DataTableParams = {
3
- readonly search: string;
4
- readonly order: string;
5
- readonly direction: 'asc' | 'desc';
6
- readonly page: number;
7
- readonly perPage: number;
8
- };
9
- export type DataTableData<T> = {
10
- items: T[];
11
- total?: number;
12
- totalPages: number;
13
- isFiltered?: boolean;
14
- };
15
- export type DataTableContextType<T, P extends DataTableParams> = {
16
- data: AsyncState<DataTableData<T>>;
17
- reload: () => void;
18
- params: P;
19
- onChangeParams: (params: P) => void;
20
- };
package/Table/types.js DELETED
@@ -1 +0,0 @@
1
- export {};