@croquiscom/pds 7.4.0 → 8.0.0
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.
- package/CHANGELOG.md +12 -0
- package/dist/components/column-view-controller/ColumnViewController.d.ts +2 -2
- package/dist/components/date-picker/DateUnitPicker.d.ts +27 -0
- package/dist/components/date-picker/DateUnitPicker.stories.d.ts +13 -0
- package/dist/components/date-picker/index.d.ts +1 -0
- package/dist/components/table/DataTable.d.ts +102 -0
- package/dist/components/table/DataTable.stories.d.ts +32 -0
- package/dist/components/table/DataTableHeader.d.ts +9 -0
- package/dist/components/table/DataTableRows.d.ts +11 -0
- package/dist/components/table/Table.d.ts +6 -86
- package/dist/components/table/Table.stories.d.ts +1 -28
- package/dist/components/table/TableCell.d.ts +15 -0
- package/dist/components/table/TableCol.d.ts +13 -14
- package/dist/components/table/TableColGroup.d.ts +9 -0
- package/dist/components/table/TableContainer.d.ts +9 -0
- package/dist/components/table/TableRow.d.ts +12 -0
- package/dist/components/table/TableSortIndicator.d.ts +1 -2
- package/dist/components/table/constants.d.ts +2 -0
- package/dist/components/table/index.d.ts +7 -1
- package/dist/components/table/reducer.d.ts +2 -2
- package/dist/components/table/storybook-helper/custom.argTypes.d.ts +4 -4
- package/dist/components/table/storybook-helper/sampleData.d.ts +17 -17
- package/dist/components/table/types.d.ts +16 -16
- package/dist/components/table/utils.d.ts +6 -6
- package/dist/index.es.js +5 -5
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +4 -4
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/scripts/jscodeshift-utils.ts +31 -0
- package/scripts/table/migrate-table.ts +53 -0
- package/dist/components/table/TableHeader.d.ts +0 -9
- package/dist/components/table/TableRows.d.ts +0 -11
- package/scripts/icons/migrate-icons.ts +0 -54
- package/scripts/icons/migration-icon-list.ts +0 -162
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { PropsWithChildren } from 'react';
|
|
2
|
-
import {
|
|
3
|
-
export interface TableColumnViewType<DataType> extends
|
|
2
|
+
import { DataTableColumnType } from '../table';
|
|
3
|
+
export interface TableColumnViewType<DataType> extends DataTableColumnType<DataType> {
|
|
4
4
|
isOn?: boolean;
|
|
5
5
|
}
|
|
6
6
|
export interface ColumnViewControllerProps<DataType> {
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { DatePickerBaseProps } from './DatePicker';
|
|
3
|
+
import { Dates } from './DateRangePicker';
|
|
4
|
+
export interface DateUnitPickerProps extends Omit<DatePickerBaseProps, 'disabled'> {
|
|
5
|
+
unit: 'day' | 'week' | 'month';
|
|
6
|
+
/**
|
|
7
|
+
* [Dates Type](https://github.com/gpbl/react-day-picker/blob/master/packages/react-day-picker/src/types/Matchers.ts#L73)
|
|
8
|
+
*/
|
|
9
|
+
dates?: Dates;
|
|
10
|
+
minDate?: Date;
|
|
11
|
+
maxDate?: Date;
|
|
12
|
+
onChange?: (start: Dates['from'], end: Dates['to']) => void;
|
|
13
|
+
/**
|
|
14
|
+
* 선택 완료시 자동으로 캘린더 선택 창을 닫습니다.
|
|
15
|
+
* - displayMode 'bottomSheet'인 경우 적용이 불가합니다.
|
|
16
|
+
* - displayMode 'popover'인 경우 하단의 footer 영역의 취소/확인 버튼은 노출되지 않습니다.
|
|
17
|
+
* @default true
|
|
18
|
+
*/
|
|
19
|
+
autoCloseable?: boolean;
|
|
20
|
+
disabled?: boolean | [boolean, boolean];
|
|
21
|
+
/**
|
|
22
|
+
* 주의 시작요일을 지정합니다 기본값은 1(월요일)입니다.
|
|
23
|
+
* @default 1
|
|
24
|
+
*/
|
|
25
|
+
weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
|
|
26
|
+
}
|
|
27
|
+
export declare const DateUnitPicker: ({ width, error, unit, dates, disabled, className, size, maxDate, minDate, showRemoveButton, autoCloseable, opened: openProp, displayMode, weekStartsOn, onOpen, onClose, onChange, }: DateUnitPickerProps) => JSX.Element;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
|
3
|
+
import { DateUnitPicker } from './DateUnitPicker';
|
|
4
|
+
declare const _default: ComponentMeta<({ width, error, unit, dates, disabled, className, size, maxDate, minDate, showRemoveButton, autoCloseable, opened: openProp, displayMode, weekStartsOn, onOpen, onClose, onChange, }: import("./DateUnitPicker").DateUnitPickerProps) => JSX.Element>;
|
|
5
|
+
export default _default;
|
|
6
|
+
export declare const Base: any;
|
|
7
|
+
export declare const Disabled: ComponentStory<typeof DateUnitPicker>;
|
|
8
|
+
export declare const Error: any;
|
|
9
|
+
export declare const Size: ComponentStory<typeof DateUnitPicker>;
|
|
10
|
+
export declare const ShowRemoveButton: any;
|
|
11
|
+
export declare const MinDate: any;
|
|
12
|
+
export declare const MaxDate: any;
|
|
13
|
+
export declare const BottomSheetPicker: any;
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
import React, { Key, PropsWithChildren, ReactElement, ReactNode, Ref } from 'react';
|
|
2
|
+
import { RowSelectState, Scroll, SortDirection, DataTableColumnsType, DataTableRowsType } from './types';
|
|
3
|
+
export interface DataTableProps<DataType> {
|
|
4
|
+
className?: string;
|
|
5
|
+
/**
|
|
6
|
+
* 테이블 컬럼 목록
|
|
7
|
+
* - useMemo를 통한 메모이제이션된 값을 권장합니다.
|
|
8
|
+
*/
|
|
9
|
+
columns: DataTableColumnsType<DataType>;
|
|
10
|
+
/**
|
|
11
|
+
* 테이블 로우 목록
|
|
12
|
+
* - useMemo를 통한 메모이제이션된 값을 권장합니다.
|
|
13
|
+
*/
|
|
14
|
+
rows: DataTableRowsType<DataType>;
|
|
15
|
+
/**
|
|
16
|
+
* 테이블 스크롤 영역 너비/높이를 지정할 수 있습니다.
|
|
17
|
+
* - { x: number | string, y: number | string }
|
|
18
|
+
* - x: 가로 스크롤을 설정하고 스크롤 영역의 너비를 지정합니다.
|
|
19
|
+
* - y: 세로 스크롤을 설정하고 스크롤 영역의 높이를 지정합니다.
|
|
20
|
+
* - x 사용시 table-layout이 fixed 처리됩니다.(기본 auto)
|
|
21
|
+
*/
|
|
22
|
+
scroll?: Scroll;
|
|
23
|
+
/**
|
|
24
|
+
* 테이블 Loading 여부
|
|
25
|
+
* @default false
|
|
26
|
+
*/
|
|
27
|
+
loading?: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* 테이블 헤더 고정 여부, 세로 스크롤 발생시 고정됩니다.
|
|
30
|
+
* @default false
|
|
31
|
+
*/
|
|
32
|
+
stickyHeader?: boolean;
|
|
33
|
+
/**
|
|
34
|
+
* Sort 대상 컬럼 아이디
|
|
35
|
+
*/
|
|
36
|
+
sortBy?: string;
|
|
37
|
+
/**
|
|
38
|
+
* Sort 정렬 기준
|
|
39
|
+
*/
|
|
40
|
+
sortDirection?: SortDirection;
|
|
41
|
+
/**
|
|
42
|
+
* Row Selection 사용 유무
|
|
43
|
+
* - true일 경우 각 테이블 로우는 고유 key가 존재해야 합니다.
|
|
44
|
+
*/
|
|
45
|
+
selectableRows?: boolean;
|
|
46
|
+
/**
|
|
47
|
+
* Row 클릭으로 Selection 사용 유무
|
|
48
|
+
* - 먼저 selectableRows가 true여야 하며, Row 클릭으로도 선택/해제가 가능합니다.
|
|
49
|
+
* - 해당 옵션 사용시 ROW 내부에 버튼, 링크 등 추가적인 클릭이벤트가 있을 경우 stopPropagation 처리가 필요합니다.
|
|
50
|
+
*/
|
|
51
|
+
clickableRows?: boolean;
|
|
52
|
+
/**
|
|
53
|
+
* Row 선택 상태 정보
|
|
54
|
+
* - 이하 두가지 타입으로 로우 셀렉 상태를 받습니다.
|
|
55
|
+
* - ((row: DataType) => boolean): 함수형태로 전달할 경우 해당 조건에 일치하는 row 목록 선택 상태가 업데이트됩니다.
|
|
56
|
+
* - Key[]: 키목록으로 전달할 경우 해당 키를 포함하는 row 목록 선택 상태가 업데이트됩니다.
|
|
57
|
+
*/
|
|
58
|
+
rowSelection?: RowSelectState<DataType>;
|
|
59
|
+
/**
|
|
60
|
+
* Row All Select 사용 유무
|
|
61
|
+
* - selectableRows true가 선행되어야 하며 column의 전체 선택 체크박스 disabled 여부를 선택할 수 있습니다.
|
|
62
|
+
*/
|
|
63
|
+
hideSelectAll?: boolean;
|
|
64
|
+
/**
|
|
65
|
+
* 자동 Row 전체 select 상태 초기화 여부
|
|
66
|
+
* - rows 변경시 자동으로 row 선택이 초기화됩니다.
|
|
67
|
+
* @default true
|
|
68
|
+
*/
|
|
69
|
+
autoResetRowSelection?: boolean;
|
|
70
|
+
/**
|
|
71
|
+
* Table 데이터가 없을 경우 노출되는 텍스트를 지정할 수 있습니다.
|
|
72
|
+
* @default '데이터가 없습니다'
|
|
73
|
+
*/
|
|
74
|
+
noDataText?: ReactNode;
|
|
75
|
+
/**
|
|
76
|
+
* 테이블의 컬럼 리사이즈 활성화 여부
|
|
77
|
+
* - width값 지정된 컬럼은 resize가 불가합니다.
|
|
78
|
+
* - table-layout이 fixed 처리됩니다.(기본 auto)
|
|
79
|
+
* @default false
|
|
80
|
+
*/
|
|
81
|
+
resize?: boolean;
|
|
82
|
+
/**
|
|
83
|
+
* 테이블 로우 호버 스타일 사용 유무
|
|
84
|
+
* - column cellAttributes 스타일 커스텀시 로우 전체 호버 스타일을 제한할 수 있습니다.
|
|
85
|
+
* - rowspan to highlight all relevant rows 이슈 처리전 임시 props으로 사용할 수 있습니다.
|
|
86
|
+
* @default true
|
|
87
|
+
*/
|
|
88
|
+
cellHoverStyle?: boolean;
|
|
89
|
+
/**
|
|
90
|
+
* Sort 이벤트, 대상 Column 아이디를 전달합니다.
|
|
91
|
+
*/
|
|
92
|
+
onSortBy?: (sortBy: string) => void;
|
|
93
|
+
/**
|
|
94
|
+
* Select 이벤트, 선택된 rows, rows key 리스트를 전달합니다.
|
|
95
|
+
*/
|
|
96
|
+
onSelectRows?: (selectedRowKeys: Key[], selectedRows: DataTableRowsType<DataType>) => void;
|
|
97
|
+
}
|
|
98
|
+
export declare const DataTable: <DataType extends object = any>(props: DataTableProps<DataType> & {
|
|
99
|
+
children?: React.ReactNode;
|
|
100
|
+
} & {
|
|
101
|
+
ref?: Ref<HTMLTableElement>;
|
|
102
|
+
}) => ReactElement;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ComponentMeta } from '@storybook/react';
|
|
3
|
+
declare const _default: ComponentMeta<(<DataType_1 extends object = any>(props: import("./DataTable").DataTableProps<DataType_1> & {
|
|
4
|
+
children?: React.ReactNode;
|
|
5
|
+
} & {
|
|
6
|
+
ref?: React.Ref<HTMLTableElement>;
|
|
7
|
+
}) => React.ReactElement<any, string | React.JSXElementConstructor<any>>)>;
|
|
8
|
+
export default _default;
|
|
9
|
+
export declare const Base: any;
|
|
10
|
+
export declare const ColumnAlign: any;
|
|
11
|
+
export declare const ColumnWidthMinWidth: any;
|
|
12
|
+
export declare const CustomColumnCell: any;
|
|
13
|
+
export declare const CustomRowCell: any;
|
|
14
|
+
export declare const CustomRowCellStyle: any;
|
|
15
|
+
export declare const Loading: any;
|
|
16
|
+
export declare const Resize: any;
|
|
17
|
+
export declare const NoData: any;
|
|
18
|
+
export declare const CustomNoDataText: any;
|
|
19
|
+
export declare const ColumnGroup: any;
|
|
20
|
+
export declare const CellSpan: any;
|
|
21
|
+
export declare const ColumnFixed: any;
|
|
22
|
+
export declare const StickyHeader: any;
|
|
23
|
+
export declare const Scroll: any;
|
|
24
|
+
export declare const Selection: any;
|
|
25
|
+
export declare const ClickableSelection: any;
|
|
26
|
+
export declare const AutoResetRowSelectOn: any;
|
|
27
|
+
export declare const AutoResetRowSelectOff: any;
|
|
28
|
+
export declare const BeforehandSelectionByKey: any;
|
|
29
|
+
export declare const BeforehandSelectionByFunction: any;
|
|
30
|
+
export declare const Sort: any;
|
|
31
|
+
export declare const WithPagination: any;
|
|
32
|
+
export declare const Disabled: any;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { DataTableProps } from './DataTable';
|
|
3
|
+
import { SelectRowsAction, DataTableRowsType } from './types';
|
|
4
|
+
export interface DataTableHeaderProps<DataType> extends Pick<DataTableProps<DataType>, 'columns' | 'rows' | 'stickyHeader' | 'sortBy' | 'sortDirection' | 'onSortBy' | 'selectableRows' | 'hideSelectAll' | 'resize'> {
|
|
5
|
+
allSelected?: boolean;
|
|
6
|
+
selectedRows?: DataTableRowsType<DataType>;
|
|
7
|
+
onSelectedRows?: (action: SelectRowsAction<DataType>) => void;
|
|
8
|
+
}
|
|
9
|
+
export declare const DataTableHeader: <DataType extends object = any>({ columns, rows, stickyHeader, sortBy, sortDirection, allSelected, selectedRows, selectableRows, hideSelectAll, resize, onSelectedRows, onSortBy, }: DataTableHeaderProps<DataType>) => JSX.Element;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { DataTableProps } from './DataTable';
|
|
3
|
+
import { SelectRowAction, DataTableRowsType } from './types';
|
|
4
|
+
interface DataTableRowsProps<DataType> extends Pick<DataTableProps<DataType>, 'columns' | 'rows' | 'noDataText' | 'loading' | 'selectableRows' | 'clickableRows' | 'cellHoverStyle' | 'resize'> {
|
|
5
|
+
tableContainerAttribute: number;
|
|
6
|
+
allSelected?: boolean;
|
|
7
|
+
selectedRows?: DataTableRowsType<DataType>;
|
|
8
|
+
onSelectedRow?: (action: SelectRowAction<DataType>) => void;
|
|
9
|
+
}
|
|
10
|
+
export declare const DataTableRows: <DataType extends object = any>({ columns, rows, loading, selectableRows, clickableRows, selectedRows, noDataText, cellHoverStyle, tableContainerAttribute, resize, onSelectedRow, }: DataTableRowsProps<DataType>) => JSX.Element;
|
|
11
|
+
export {};
|
|
@@ -1,17 +1,7 @@
|
|
|
1
|
-
import React, {
|
|
2
|
-
import {
|
|
3
|
-
export interface TableProps<
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* 테이블 컬럼 목록
|
|
7
|
-
* - useMemo를 통한 메모이제이션된 값을 권장합니다.
|
|
8
|
-
*/
|
|
9
|
-
columns: TableColumnsType<DataType>;
|
|
10
|
-
/**
|
|
11
|
-
* 테이블 로우 목록
|
|
12
|
-
* - useMemo를 통한 메모이제이션된 값을 권장합니다.
|
|
13
|
-
*/
|
|
14
|
-
rows: TableRowsType<DataType>;
|
|
1
|
+
import React, { TableHTMLAttributes } from 'react';
|
|
2
|
+
import { Scroll } from '../table/types';
|
|
3
|
+
export interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
|
|
4
|
+
children: React.ReactNode;
|
|
15
5
|
/**
|
|
16
6
|
* 테이블 스크롤 영역 너비/높이를 지정할 수 있습니다.
|
|
17
7
|
* - { x: number | string, y: number | string }
|
|
@@ -20,58 +10,6 @@ export interface TableProps<DataType> {
|
|
|
20
10
|
* - x 사용시 table-layout이 fixed 처리됩니다.(기본 auto)
|
|
21
11
|
*/
|
|
22
12
|
scroll?: Scroll;
|
|
23
|
-
/**
|
|
24
|
-
* 테이블 Loading 여부
|
|
25
|
-
* @default false
|
|
26
|
-
*/
|
|
27
|
-
loading?: boolean;
|
|
28
|
-
/**
|
|
29
|
-
* 테이블 헤더 고정 여부, 세로 스크롤 발생시 고정됩니다.
|
|
30
|
-
* @default false
|
|
31
|
-
*/
|
|
32
|
-
stickyHeader?: boolean;
|
|
33
|
-
/**
|
|
34
|
-
* Sort 대상 컬럼 아이디
|
|
35
|
-
*/
|
|
36
|
-
sortBy?: string;
|
|
37
|
-
/**
|
|
38
|
-
* Sort 정렬 기준
|
|
39
|
-
*/
|
|
40
|
-
sortDirection?: SortDirection;
|
|
41
|
-
/**
|
|
42
|
-
* Row Selection 사용 유무
|
|
43
|
-
* - true일 경우 각 테이블 로우는 고유 key가 존재해야 합니다.
|
|
44
|
-
*/
|
|
45
|
-
selectableRows?: boolean;
|
|
46
|
-
/**
|
|
47
|
-
* Row 클릭으로 Selection 사용 유무
|
|
48
|
-
* - 먼저 selectableRows가 true여야 하며, Row 클릭으로도 선택/해제가 가능합니다.
|
|
49
|
-
* - 해당 옵션 사용시 ROW 내부에 버튼, 링크 등 추가적인 클릭이벤트가 있을 경우 stopPropagation 처리가 필요합니다.
|
|
50
|
-
*/
|
|
51
|
-
clickableRows?: boolean;
|
|
52
|
-
/**
|
|
53
|
-
* Row 선택 상태 정보
|
|
54
|
-
* - 이하 두가지 타입으로 로우 셀렉 상태를 받습니다.
|
|
55
|
-
* - ((row: DataType) => boolean): 함수형태로 전달할 경우 해당 조건에 일치하는 row 목록 선택 상태가 업데이트됩니다.
|
|
56
|
-
* - Key[]: 키목록으로 전달할 경우 해당 키를 포함하는 row 목록 선택 상태가 업데이트됩니다.
|
|
57
|
-
*/
|
|
58
|
-
rowSelection?: RowSelectState<DataType>;
|
|
59
|
-
/**
|
|
60
|
-
* Row All Select 사용 유무
|
|
61
|
-
* - selectableRows true가 선행되어야 하며 column의 전체 선택 체크박스 disabled 여부를 선택할 수 있습니다.
|
|
62
|
-
*/
|
|
63
|
-
hideSelectAll?: boolean;
|
|
64
|
-
/**
|
|
65
|
-
* 자동 Row 전체 select 상태 초기화 여부
|
|
66
|
-
* - rows 변경시 자동으로 row 선택이 초기화됩니다.
|
|
67
|
-
* @default true
|
|
68
|
-
*/
|
|
69
|
-
autoResetRowSelection?: boolean;
|
|
70
|
-
/**
|
|
71
|
-
* Table 데이터가 없을 경우 노출되는 텍스트를 지정할 수 있습니다.
|
|
72
|
-
* @default '데이터가 없습니다'
|
|
73
|
-
*/
|
|
74
|
-
noDataText?: ReactNode;
|
|
75
13
|
/**
|
|
76
14
|
* 테이블의 컬럼 리사이즈 활성화 여부
|
|
77
15
|
* - width값 지정된 컬럼은 resize가 불가합니다.
|
|
@@ -79,24 +17,6 @@ export interface TableProps<DataType> {
|
|
|
79
17
|
* @default false
|
|
80
18
|
*/
|
|
81
19
|
resize?: boolean;
|
|
82
|
-
|
|
83
|
-
* 테이블 로우 호버 스타일 사용 유무
|
|
84
|
-
* - column cellAttributes 스타일 커스텀시 로우 전체 호버 스타일을 제한할 수 있습니다.
|
|
85
|
-
* - rowspan to highlight all relevant rows 이슈 처리전 임시 props으로 사용할 수 있습니다.
|
|
86
|
-
* @default true
|
|
87
|
-
*/
|
|
88
|
-
cellHoverStyle?: boolean;
|
|
89
|
-
/**
|
|
90
|
-
* Sort 이벤트, 대상 Column 아이디를 전달합니다.
|
|
91
|
-
*/
|
|
92
|
-
onSortBy?: (sortBy: string) => void;
|
|
93
|
-
/**
|
|
94
|
-
* Select 이벤트, 선택된 rows, rows key 리스트를 전달합니다.
|
|
95
|
-
*/
|
|
96
|
-
onSelectRows?: (selectedRowKeys: Key[], selectedRows: TableRowsType<DataType>) => void;
|
|
20
|
+
className?: string;
|
|
97
21
|
}
|
|
98
|
-
export declare const Table: <
|
|
99
|
-
children?: React.ReactNode;
|
|
100
|
-
} & {
|
|
101
|
-
ref?: Ref<HTMLTableElement>;
|
|
102
|
-
}) => ReactElement;
|
|
22
|
+
export declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLTableElement>>;
|
|
@@ -1,32 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ComponentMeta } from '@storybook/react';
|
|
3
|
-
declare const _default: ComponentMeta<
|
|
4
|
-
children?: React.ReactNode;
|
|
5
|
-
} & {
|
|
6
|
-
ref?: React.Ref<HTMLTableElement>;
|
|
7
|
-
}) => React.ReactElement<any, string | React.JSXElementConstructor<any>>)>;
|
|
3
|
+
declare const _default: ComponentMeta<React.ForwardRefExoticComponent<import("./Table").TableProps & React.RefAttributes<HTMLTableElement>>>;
|
|
8
4
|
export default _default;
|
|
9
5
|
export declare const Base: any;
|
|
10
|
-
export declare const ColumnAlign: any;
|
|
11
|
-
export declare const ColumnWidthMinWidth: any;
|
|
12
|
-
export declare const CustomColumnCell: any;
|
|
13
|
-
export declare const CustomRowCell: any;
|
|
14
|
-
export declare const CustomRowCellStyle: any;
|
|
15
|
-
export declare const Loading: any;
|
|
16
|
-
export declare const Resize: any;
|
|
17
|
-
export declare const NoData: any;
|
|
18
|
-
export declare const CustomNoDataText: any;
|
|
19
|
-
export declare const ColumnGroup: any;
|
|
20
|
-
export declare const CellSpan: any;
|
|
21
|
-
export declare const ColumnFixed: any;
|
|
22
|
-
export declare const StickyHeader: any;
|
|
23
|
-
export declare const Scroll: any;
|
|
24
|
-
export declare const Selection: any;
|
|
25
|
-
export declare const ClickableSelection: any;
|
|
26
|
-
export declare const AutoResetRowSelectOn: any;
|
|
27
|
-
export declare const AutoResetRowSelectOff: any;
|
|
28
|
-
export declare const BeforehandSelectionByKey: any;
|
|
29
|
-
export declare const BeforehandSelectionByFunction: any;
|
|
30
|
-
export declare const Sort: any;
|
|
31
|
-
export declare const WithPagination: any;
|
|
32
|
-
export declare const Disabled: any;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { ReactNode, TdHTMLAttributes } from 'react';
|
|
2
|
+
import { ColumnAlign } from '../table/types';
|
|
3
|
+
interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
|
|
4
|
+
children: ReactNode;
|
|
5
|
+
id?: string;
|
|
6
|
+
fixed?: boolean;
|
|
7
|
+
fixedColWidth?: number;
|
|
8
|
+
isEmpty?: boolean;
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
align?: ColumnAlign;
|
|
11
|
+
resize?: boolean;
|
|
12
|
+
colSpan?: number;
|
|
13
|
+
}
|
|
14
|
+
export declare const TableCell: ({ children, className, colSpan, id, ...props }: TableCellProps) => JSX.Element;
|
|
15
|
+
export {};
|
|
@@ -1,20 +1,19 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
id
|
|
1
|
+
import React, { ReactNode, ThHTMLAttributes } from 'react';
|
|
2
|
+
import { TableSortIndicatorProps } from '../table/TableSortIndicator';
|
|
3
|
+
import { ColumnAlign } from '../table/types';
|
|
4
|
+
interface TableColProps extends ThHTMLAttributes<HTMLTableCellElement> {
|
|
5
|
+
children: ReactNode;
|
|
6
|
+
id?: string;
|
|
7
|
+
width?: number;
|
|
8
|
+
fixed?: boolean;
|
|
7
9
|
fixedColWidth?: number;
|
|
8
|
-
groupColumn?: boolean;
|
|
9
10
|
stickyHeader?: boolean;
|
|
10
|
-
|
|
11
|
-
|
|
11
|
+
groupColumn?: boolean;
|
|
12
|
+
sortable?: boolean;
|
|
12
13
|
resize?: boolean;
|
|
13
|
-
|
|
14
|
+
align?: ColumnAlign;
|
|
15
|
+
sortProps?: TableSortIndicatorProps;
|
|
16
|
+
onClick?: () => void;
|
|
14
17
|
}
|
|
15
18
|
export declare const TableCol: React.ForwardRefExoticComponent<TableColProps & React.RefAttributes<HTMLTableCellElement>>;
|
|
16
|
-
export declare const TableColumn: import("@emotion/styled").StyledComponent<{
|
|
17
|
-
theme?: import("@emotion/react").Theme;
|
|
18
|
-
as?: React.ElementType<any>;
|
|
19
|
-
} & Omit<TableColProps, "id" | "text">, React.DetailedHTMLProps<React.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, {}>;
|
|
20
19
|
export {};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
|
+
import { Scroll } from '../table/types';
|
|
3
|
+
interface TableContainerProps {
|
|
4
|
+
children: ReactNode;
|
|
5
|
+
scroll?: Scroll;
|
|
6
|
+
className?: string;
|
|
7
|
+
}
|
|
8
|
+
export declare const TableContainer: React.ForwardRefExoticComponent<TableContainerProps & React.RefAttributes<HTMLDivElement>>;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { ReactNode, TableHTMLAttributes } from 'react';
|
|
2
|
+
interface TableRowProps extends TableHTMLAttributes<HTMLTableRowElement> {
|
|
3
|
+
children: ReactNode;
|
|
4
|
+
selected?: boolean;
|
|
5
|
+
isEmpty?: boolean;
|
|
6
|
+
cellHoverStyle?: boolean;
|
|
7
|
+
clickable?: boolean;
|
|
8
|
+
selectable?: boolean;
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
}
|
|
11
|
+
export declare const TableRow: ({ children, className, ...props }: TableRowProps) => JSX.Element;
|
|
12
|
+
export {};
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { SortDirection } from './types';
|
|
3
|
-
interface TableSortIndicatorProps {
|
|
3
|
+
export interface TableSortIndicatorProps {
|
|
4
4
|
isSorted: boolean;
|
|
5
5
|
sortDirection: SortDirection;
|
|
6
6
|
}
|
|
7
7
|
export declare const TableSortIndicator: ({ isSorted, sortDirection }: TableSortIndicatorProps) => JSX.Element;
|
|
8
|
-
export {};
|
|
@@ -1,2 +1,8 @@
|
|
|
1
|
-
export * from './
|
|
1
|
+
export * from './DataTable';
|
|
2
2
|
export * from './types';
|
|
3
|
+
export * from './TableContainer';
|
|
4
|
+
export * from './Table';
|
|
5
|
+
export * from './TableColGroup';
|
|
6
|
+
export * from './TableRow';
|
|
7
|
+
export * from './TableCol';
|
|
8
|
+
export * from './TableCell';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export declare function
|
|
1
|
+
import { DataTableState, DataTableAction } from './types';
|
|
2
|
+
export declare function dataTableReducer<DataType>(state: DataTableState<DataType>, action: DataTableAction<DataType>): DataTableState<DataType>;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Key } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { DataTableColumnBase, DataTableColumnsType, CellProps, CellAttributesProps } from '../types';
|
|
3
3
|
/** storybook table type helper용 컴포넌트 */
|
|
4
|
-
export interface HelperTableColumnTypeProps<DataType> extends
|
|
4
|
+
export interface HelperTableColumnTypeProps<DataType> extends DataTableColumnBase {
|
|
5
5
|
/**
|
|
6
6
|
* 테이블 컬럼 unique id
|
|
7
7
|
* - Row data object와 연결할 key name으로 사용됩니다.
|
|
@@ -21,13 +21,13 @@ export interface HelperTableColumnTypeProps<DataType> extends TableColumnBase {
|
|
|
21
21
|
cell?: CellProps<DataType>;
|
|
22
22
|
}
|
|
23
23
|
export declare const HelperTableColumnType: <DataType extends object = any>(props: HelperTableColumnTypeProps<DataType>) => any;
|
|
24
|
-
export interface HelperTableColumnGroupTypeProps<DataType> extends
|
|
24
|
+
export interface HelperTableColumnGroupTypeProps<DataType> extends DataTableColumnBase {
|
|
25
25
|
/**
|
|
26
26
|
* 테이블 컬럼 그룹
|
|
27
27
|
* - 상위 컬럼은 id 속성이 없습니다.
|
|
28
28
|
* - 매칭할 row 데이터 key 속성은 각 group 하위 컬럼 id입니다.
|
|
29
29
|
*/
|
|
30
|
-
columnGroup?:
|
|
30
|
+
columnGroup?: DataTableColumnsType<DataType>;
|
|
31
31
|
/**
|
|
32
32
|
* 테이블 셀 rowSpan 속성, hidden 여부를 지정할 수 있습니다.
|
|
33
33
|
* - (row: DataType, index: index) => ({ rowSpan: number, hidden: boolean })
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Key } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { DataTableColumnsType, DataTableRowsType } from '../index';
|
|
3
3
|
export interface DataType {
|
|
4
4
|
key?: Key;
|
|
5
5
|
disabled?: boolean;
|
|
@@ -12,19 +12,19 @@ export interface DataType {
|
|
|
12
12
|
price: string;
|
|
13
13
|
amount: number;
|
|
14
14
|
}
|
|
15
|
-
export declare const columns:
|
|
16
|
-
export declare const rows:
|
|
17
|
-
export declare const customColumns:
|
|
18
|
-
export declare const customWidthColumns:
|
|
19
|
-
export declare const customColumnCell:
|
|
20
|
-
export declare const customRowCellColumns:
|
|
21
|
-
export declare const groupColumns:
|
|
22
|
-
export declare const groupRows:
|
|
23
|
-
export declare const SpanColumns:
|
|
24
|
-
export declare const SpanRows:
|
|
25
|
-
export declare const fixedColumns:
|
|
26
|
-
export declare const selectionRows:
|
|
27
|
-
export declare const selectionRows2:
|
|
28
|
-
export declare const sortColumns:
|
|
29
|
-
export declare const customRowStyleColumns:
|
|
30
|
-
export declare const comprehensiveCustomColumns:
|
|
15
|
+
export declare const columns: DataTableColumnsType<DataType>;
|
|
16
|
+
export declare const rows: DataTableRowsType<DataType>;
|
|
17
|
+
export declare const customColumns: DataTableColumnsType<DataType>;
|
|
18
|
+
export declare const customWidthColumns: DataTableColumnsType<DataType>;
|
|
19
|
+
export declare const customColumnCell: DataTableColumnsType<DataType>;
|
|
20
|
+
export declare const customRowCellColumns: DataTableColumnsType<DataType>;
|
|
21
|
+
export declare const groupColumns: DataTableColumnsType<DataType>;
|
|
22
|
+
export declare const groupRows: DataTableRowsType<DataType>;
|
|
23
|
+
export declare const SpanColumns: DataTableColumnsType<DataType>;
|
|
24
|
+
export declare const SpanRows: DataTableRowsType<DataType>;
|
|
25
|
+
export declare const fixedColumns: DataTableColumnsType<DataType>;
|
|
26
|
+
export declare const selectionRows: DataTableRowsType<DataType>;
|
|
27
|
+
export declare const selectionRows2: DataTableRowsType<DataType>;
|
|
28
|
+
export declare const sortColumns: DataTableColumnsType<DataType>;
|
|
29
|
+
export declare const customRowStyleColumns: DataTableColumnsType<DataType>;
|
|
30
|
+
export declare const comprehensiveCustomColumns: DataTableColumnsType<DataType>;
|
|
@@ -19,7 +19,7 @@ export type CellProps<DataType> = ({ row, value, index, }: {
|
|
|
19
19
|
value: CellValue<any>;
|
|
20
20
|
index: number;
|
|
21
21
|
}) => ReactNode;
|
|
22
|
-
export type
|
|
22
|
+
export type DataTableColumnBase = {
|
|
23
23
|
/**
|
|
24
24
|
* 테이블 컬럼 텍스트
|
|
25
25
|
*/
|
|
@@ -60,7 +60,7 @@ export type TableColumnBase = {
|
|
|
60
60
|
*/
|
|
61
61
|
cellAlign?: ColumnAlign;
|
|
62
62
|
};
|
|
63
|
-
export interface
|
|
63
|
+
export interface DataTableColumnType<DataType> extends DataTableColumnBase {
|
|
64
64
|
id: Extract<keyof DataType, string>;
|
|
65
65
|
/**
|
|
66
66
|
* 테이블 셀 rowSpan 속성, hidden 여부를 지정할 수 있습니다.
|
|
@@ -75,11 +75,11 @@ export interface TableColumnType<DataType> extends TableColumnBase {
|
|
|
75
75
|
*/
|
|
76
76
|
cell?: CellProps<DataType>;
|
|
77
77
|
}
|
|
78
|
-
export interface
|
|
79
|
-
columnGroup:
|
|
78
|
+
export interface DataTableColumnGroupType<DataType> extends Omit<DataTableColumnType<DataType>, 'id'> {
|
|
79
|
+
columnGroup: DataTableColumnsType<DataType>;
|
|
80
80
|
}
|
|
81
|
-
export type
|
|
82
|
-
export type
|
|
81
|
+
export type DataTableColumnsType<DataType = unknown> = Array<DataTableColumnType<DataType> | DataTableColumnGroupType<DataType>>;
|
|
82
|
+
export type DataTableRowType<DataType> = DataType & {
|
|
83
83
|
key?: Key;
|
|
84
84
|
selectable?: boolean;
|
|
85
85
|
/**
|
|
@@ -87,34 +87,34 @@ export type TableRowType<DataType> = DataType & {
|
|
|
87
87
|
*/
|
|
88
88
|
disabled?: boolean;
|
|
89
89
|
};
|
|
90
|
-
export type
|
|
91
|
-
export interface
|
|
90
|
+
export type DataTableRowsType<DataType = unknown> = Array<DataTableRowType<DataType>>;
|
|
91
|
+
export interface DataTableState<DataType = unknown> {
|
|
92
92
|
allSelected?: boolean;
|
|
93
93
|
selectedRowsKey?: Key[];
|
|
94
|
-
selectedRows?:
|
|
94
|
+
selectedRows?: DataTableRowsType<DataType>;
|
|
95
95
|
emitSelectedEvent?: boolean;
|
|
96
96
|
autoResetRowSelection?: boolean;
|
|
97
97
|
}
|
|
98
98
|
export interface SelectRowsAction<DataType> {
|
|
99
99
|
type: 'SELECT_ROWS';
|
|
100
|
-
rows:
|
|
100
|
+
rows: DataTableRowsType<DataType>;
|
|
101
101
|
}
|
|
102
102
|
export interface SelectRowAction<DataType> {
|
|
103
103
|
type: 'SELECT_ROW';
|
|
104
|
-
rows:
|
|
105
|
-
row:
|
|
104
|
+
rows: DataTableRowsType<DataType>;
|
|
105
|
+
row: DataTableRowType<DataType>;
|
|
106
106
|
selected: boolean;
|
|
107
107
|
}
|
|
108
108
|
export interface SelectControlledRowAction<DataType> {
|
|
109
109
|
type: 'SELECT_CONTROLLED_ROW';
|
|
110
|
-
controlledRows:
|
|
111
|
-
rows:
|
|
110
|
+
controlledRows: DataTableRowsType<DataType>;
|
|
111
|
+
rows: DataTableRowsType<DataType>;
|
|
112
112
|
}
|
|
113
113
|
export interface ResetSelectRowsAction {
|
|
114
114
|
type: 'RESET_SELECTED_ROWS';
|
|
115
115
|
}
|
|
116
116
|
export interface CheckAllSelectedRowsAction<DataType> {
|
|
117
117
|
type: 'CHECK_ALL_SELECTED_ROWS';
|
|
118
|
-
rows:
|
|
118
|
+
rows: DataTableRowsType<DataType>;
|
|
119
119
|
}
|
|
120
|
-
export type
|
|
120
|
+
export type DataTableAction<DataType> = SelectRowsAction<DataType> | SelectRowAction<DataType> | SelectControlledRowAction<DataType> | ResetSelectRowsAction | CheckAllSelectedRowsAction<DataType>;
|