@croquiscom/pds 8.30.1 → 8.31.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 CHANGED
@@ -1,5 +1,12 @@
1
1
  # @croquiscom/pds
2
2
 
3
+ ## 8.31.0
4
+
5
+ ### Minor Changes
6
+
7
+ - bbb57f6: DataTable rowColor option 추가
8
+ - fa4af8c: Display typography 추가
9
+
3
10
  ## 8.30.1
4
11
 
5
12
  ### Patch Changes
@@ -86,6 +86,17 @@ export interface DataTableProps<DataType> {
86
86
  * @default true
87
87
  */
88
88
  cellHoverStyle?: boolean;
89
+ /**
90
+ * 테이블 로우 disabled 스타일 사용 유무
91
+ * - column cellAttributes 스타일 커스텀시 로우 전체 disabled 스타일을 제한할 수 있습니다.
92
+ * @default true
93
+ */
94
+ cellDisabledStyle?: boolean;
95
+ /**
96
+ * Row 배경색을 지정하는 함수 혹은 컬러값을 전달합니다.
97
+ * hover는 auto code 정책을 따릅니다.
98
+ */
99
+ rowColor?: (row: DataType, index: number) => string | string;
89
100
  /**
90
101
  * Sort 이벤트, 대상 Column 아이디를 전달합니다.
91
102
  */
@@ -28,3 +28,5 @@ export declare const BeforehandSelectionByFunction: Story;
28
28
  export declare const Sort: Story;
29
29
  export declare const WithPagination: Story;
30
30
  export declare const Disabled: Story;
31
+ export declare const CustomRowColor: Story;
32
+ export declare const DisabledCellOff: Story;
@@ -1,11 +1,12 @@
1
1
  import React from 'react';
2
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'> {
3
+ import { SelectRowAction, DataTableRowsType, DataTableRowType } from './types';
4
+ interface DataTableRowsProps<DataType> extends Pick<DataTableProps<DataType>, 'columns' | 'rows' | 'noDataText' | 'loading' | 'selectableRows' | 'clickableRows' | 'cellHoverStyle' | 'cellDisabledStyle' | 'resize'> {
5
5
  tableContainerAttribute: number;
6
6
  allSelected?: boolean;
7
7
  selectedRows?: DataTableRowsType<DataType>;
8
+ rowColor?: (row: DataTableRowType<DataType>, index: number) => string | string;
8
9
  onSelectedRow?: (action: SelectRowAction<DataType>) => void;
9
10
  }
10
- export declare const DataTableRows: <DataType extends object = any>({ columns, rows, loading, selectableRows, clickableRows, selectedRows, noDataText, cellHoverStyle, tableContainerAttribute, resize, onSelectedRow, }: DataTableRowsProps<DataType>) => React.JSX.Element;
11
+ export declare const DataTableRows: <DataType extends object = any>({ columns, rows, loading, selectableRows, clickableRows, selectedRows, noDataText, cellHoverStyle, cellDisabledStyle, tableContainerAttribute, resize, onSelectedRow, rowColor, }: DataTableRowsProps<DataType>) => React.JSX.Element;
11
12
  export {};
@@ -10,6 +10,9 @@ interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
10
10
  resize?: boolean;
11
11
  colSpan?: number;
12
12
  isRowLast?: boolean;
13
+ cellDisabledStyle?: boolean;
14
+ clickable?: boolean;
15
+ selectable?: boolean;
13
16
  isColumnLast?: boolean;
14
17
  }
15
18
  export declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
@@ -6,6 +6,7 @@ interface TableRowProps extends TableHTMLAttributes<HTMLTableRowElement> {
6
6
  clickable?: boolean;
7
7
  selectable?: boolean;
8
8
  disabled?: boolean;
9
+ rowColor?: string;
9
10
  }
10
11
  export declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableRowElement>>;
11
12
  export {};
@@ -1,4 +1,4 @@
1
- type TypographyUsageWithSize = 'Heading_24' | 'Heading_20' | 'Heading_18' | 'Heading_17' | 'Heading_15' | 'Body_14' | 'Body_13' | 'Body_12' | 'Caption_11' | 'Caption_10';
1
+ type TypographyUsageWithSize = 'Display_46' | 'Display_40' | 'Display_36' | 'Heading_24' | 'Heading_20' | 'Heading_18' | 'Heading_17' | 'Heading_15' | 'Body_14' | 'Body_13' | 'Body_12' | 'Caption_11' | 'Caption_10';
2
2
  type TypographyWeight = 'Bold' | 'SemiBold' | 'Medium' | 'Regular';
3
3
  export type Typography = `${TypographyUsageWithSize}_${TypographyWeight}`;
4
4
  export declare const text_styles: Record<Typography, string>;