@croquiscom/pds 0.47.2 → 0.47.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @croquiscom/pds
 
+## 0.47.4
+
+### Patch Changes
+
+- 7f04724: Table noDataText ReactNode 타입 지원, Column props Cell 렌더 및 selection 상태 외부 제어 지원
+
+## 0.47.3
+
+### Patch Changes
+
+- 3f95ca9: FormField Align 속성 추가
+
 ## 0.47.2
 
 ### Patch Changes

package/dist/components/form/FormField.d.ts

@@ -20,5 +20,10 @@ export interface FormFieldProps {
      * 최소너비 80px내에서 라벨 너비를 지정할 수 있습니다.
      */
     labelWidth?: CSSValueWithLength;
+    /**
+     * label, children 정렬를 지정할 수 있습니다.
+     * @default center
+     */
+    alignment?: 'top' | 'center';
 }
-export declare const FormField: ({ className, label, rightAddon, required, helper, labelWidth, children, }: PropsWithChildren<FormFieldProps>) => JSX.Element;
+export declare const FormField: ({ className, label, rightAddon, required, helper, labelWidth, alignment, children, }: PropsWithChildren<FormFieldProps>) => JSX.Element;

package/dist/components/form/FormField.stories.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { FormField } from './FormField';
-declare const _default: ComponentMeta<({ className, label, rightAddon, required, helper, labelWidth, children, }: React.PropsWithChildren<import("./FormField").FormFieldProps>) => JSX.Element>;
+declare const _default: ComponentMeta<({ className, label, rightAddon, required, helper, labelWidth, alignment, children, }: React.PropsWithChildren<import("./FormField").FormFieldProps>) => JSX.Element>;
 export default _default;
 export declare const Base: any;
 export declare const LabelWidth: any;
 export declare const WithRadioGroup: ComponentStory<typeof FormField>;
 export declare const WithCheckboxGroup: ComponentStory<typeof FormField>;
 export declare const WithHelpPopover: any;
+export declare const TopAlign: any;

package/dist/components/table/Table.d.ts

@@ -1,5 +1,5 @@
-import React, { Key, ReactElement, PropsWithChildren, Ref } from 'react';
-import { SortDirection, Scroll, TableColumnsType, TableRowsType } from './types';
+import React, { Key, ReactElement, PropsWithChildren, Ref, ReactNode } from 'react';
+import { SortDirection, Scroll, TableColumnsType, TableRowsType, RowSelectState } from './types';
 export interface TableProps<DataType> {
     className?: string;
     /**
@@ -42,11 +42,18 @@ export interface TableProps<DataType> {
      *  - true일 경우 각 테이블 로우는 고유 key가 존재해야 합니다.
      */
     selectableRows?: boolean;
+    /**
+     * Row 선택 상태 정보
+     *  - 이하 두가지 타입으로 로우 셀렉 상태를 받습니다.
+     *  - ((row: DataType) => boolean): 함수형태로 전달할 경우 해당 조건에 일치하는 row 목록 선택 상태가 업데이트됩니다.
+     *  - Key[]: 키목록으로 전달할 경우 해당 키를 포함하는 row 목록 선택 상태가 업데이트됩니다.
+     */
+    rowSelection?: RowSelectState<DataType>;
     /**
      * Table 데이터가 없을 경우 노출되는 텍스트를 지정할 수 있습니다.
      * @default '데이터가 없습니다'
      */
-    noDataText?: string;
+    noDataText?: ReactNode;
     /**
      * 테이블 로우 호버 스타일 사용 유무, 스펙아웃될 예정입니다.
      *   - rowspan to highlight all relevant rows 이슈 처리전 임시 props

package/dist/components/table/Table.stories.d.ts

@@ -19,5 +19,7 @@ export declare const ColumnFixed: any;
 export declare const StickyHeader: any;
 export declare const Scroll: any;
 export declare const Selection: any;
+export declare const BeforehandSelectionByKey: any;
+export declare const BeforehandSelectionByFunction: any;
 export declare const Sort: any;
 export declare const WithPagination: any;

package/dist/components/table/reducer.d.ts

@@ -4,5 +4,6 @@ export declare function tableReducer<DataType>(state: TableState<DataType>, acti
     allSelected: boolean;
     selectedRows: import("./types").TableRowsType<DataType>;
     selectedRowsKey: import("react").Key[];
+    emitSelectedEvent: boolean;
     selectableRows?: boolean;
 };

package/dist/components/table/storybook-helper/custom.argTypes.d.ts

@@ -1,5 +1,5 @@
 import { Key } from 'react';
-import { TableColumnBase, TableColumnsType, CellProps } from '../types';
+import { TableColumnBase, TableColumnsType, CellProps, CellAttributesProps } from '../types';
 /** storybook table type helper용 컴포넌트 */
 export interface HelperTableColumnTypeProps<DataType> extends TableColumnBase {
     /**
@@ -11,7 +11,14 @@ export interface HelperTableColumnTypeProps<DataType> extends TableColumnBase {
      * 테이블 셀 rowSpan 속성, hidden 여부를 지정할 수 있습니다.
      *  - (row: DataType, index: index) => ({ rowSpan: number, hidden: boolean })
      */
-    cellAttributes?: CellProps<DataType>;
+    cellAttributes?: CellAttributesProps<DataType>;
+    /**
+     * 테이블 컬럼에 해당하는 셀 렌더를 지정할 수 있습니다.
+     *  - 해당 컬럼의 row, cell value, index를 받을 수 있습니다.
+     *  - 반환값은 ReactNode여야 합니다.
+     *  - ({ row, value, index }: { row: DataType; value: CellValue; index: number }) => ReactNode
+     */
+    cell?: CellProps<DataType>;
 }
 export declare const HelperTableColumnType: <DataType extends object = any>(props: HelperTableColumnTypeProps<DataType>) => any;
 export interface HelperTableColumnGroupTypeProps<DataType> extends TableColumnBase {
@@ -25,7 +32,14 @@ export interface HelperTableColumnGroupTypeProps<DataType> extends TableColumnBa
      * 테이블 셀 rowSpan 속성, hidden 여부를 지정할 수 있습니다.
      *  - (row: DataType, index: index) => ({ rowSpan: number, hidden: boolean })
      */
-    cellAttributes?: CellProps<DataType>;
+    cellAttributes?: CellAttributesProps<DataType>;
+    /**
+     * 테이블 컬럼에 해당하는 셀 렌더를 지정할 수 있습니다.
+     *  - 해당 컬럼의 row, cell value, index를 받을 수 있습니다.
+     *  - 반환값은 ReactNode여야 합니다.
+     *  - ({ row, value, index }: { row: DataType; value: CellValue; index: number }) => ReactNode
+     */
+    cell?: CellProps<DataType>;
 }
 export declare const HelperTableColumnGroupType: <DataType extends object = any>(props: HelperTableColumnGroupTypeProps<DataType>) => any;
 export interface HelperTableRowsTypeProps {

package/dist/components/table/storybook-helper/sampleData.d.ts

@@ -1,4 +1,4 @@
-import { Key, ReactNode } from 'react';
+import { Key } from 'react';
 import { TableColumnsType, TableRowsType } from '../index';
 export interface DataType {
     key?: Key;
@@ -10,23 +10,15 @@ export interface DataType {
     price: string;
     amount: number;
 }
-export interface DataTypeReactNode {
-    id: ReactNode;
-    name: ReactNode;
-    code: ReactNode;
-    date: ReactNode;
-    price: ReactNode;
-    amount: ReactNode;
-}
-export declare const columns: TableColumnsType<DataType | DataTypeReactNode>;
+export declare const columns: TableColumnsType<DataType>;
 export declare const rows: TableRowsType<DataType>;
-export declare const customColumns: TableColumnsType<DataType | DataTypeReactNode>;
-export declare const customColumnCell: TableColumnsType<DataType | DataTypeReactNode>;
-export declare const customRowCell: TableRowsType<DataTypeReactNode>;
+export declare const customColumns: TableColumnsType<DataType>;
+export declare const customColumnCell: TableColumnsType<DataType>;
+export declare const customRowCellColumns: TableColumnsType<DataType>;
 export declare const groupColumns: TableColumnsType<DataType>;
 export declare const groupRows: TableRowsType<DataType>;
-export declare const RowSpanColumns: TableColumnsType<DataType | DataTypeReactNode>;
-export declare const RowSpanRows: TableRowsType<DataType | DataTypeReactNode>;
-export declare const fixedColumns: TableColumnsType<DataType | DataTypeReactNode>;
+export declare const RowSpanColumns: TableColumnsType<DataType>;
+export declare const RowSpanRows: TableRowsType<DataType>;
+export declare const fixedColumns: TableColumnsType<DataType>;
 export declare const selectionRows: TableRowsType<DataType>;
 export declare const sortColumns: TableColumnsType<DataType>;

package/dist/components/table/types.d.ts

@@ -6,9 +6,16 @@ export type Scroll = {
     x?: CSSValueWithLength;
     y?: CSSValueWithLength;
 };
-export type CellProps<DataType> = (row: DataType, index?: number) => Pick<TdHTMLAttributes<any>, 'rowSpan'> & {
+export type CellValue<Value = any> = Value;
+export type RowSelectState<DataType> = ((row: DataType) => boolean) | Array<Key> | null;
+export type CellAttributesProps<DataType> = (row: DataType, index?: number) => Pick<TdHTMLAttributes<any>, 'rowSpan'> & {
     hidden?: boolean;
 };
+export type CellProps<DataType> = ({ row, value, index, }: {
+    row: DataType;
+    value: CellValue<any>;
+    index: number;
+}) => ReactNode;
 export type TableColumnBase = {
     /**
      * 테이블 컬럼 텍스트
@@ -46,7 +53,14 @@ export interface TableColumnType<DataType> extends TableColumnBase {
      * 테이블 셀 rowSpan 속성, hidden 여부를 지정할 수 있습니다.
      *  - (row: DataType, index: index) => ({ rowSpan: number, hidden: boolean })
      */
-    cellAttributes?: CellProps<DataType>;
+    cellAttributes?: CellAttributesProps<DataType>;
+    /**
+     * 테이블 컬럼에 해당하는 셀 렌더를 지정할 수 있습니다.
+     *  - 해당 컬럼의 row, cell value, index를 받을 수 있습니다.
+     *  - 반환값은 ReactNode여야 합니다.
+     *  - ({ row, value, index }: { row: DataType; value: CellValue; index: number }) => ReactNode
+     */
+    cell?: CellProps<DataType>;
 }
 export interface TableColumnGroupType<DataType> extends Omit<TableColumnType<DataType>, 'id'> {
     columnGroup: TableColumnsType<DataType>;
@@ -61,6 +75,7 @@ export interface TableState<DataType = unknown> {
     selectableRows?: boolean;
     selectedRowsKey?: Key[];
     selectedRows?: TableRowsType<DataType>;
+    emitSelectedEvent?: boolean;
 }
 export interface SelectRowsAction<DataType> {
     type: 'SELECT_ROWS';
@@ -72,4 +87,9 @@ export interface SelectRowAction<DataType> {
     selected: boolean;
     totalRowCount: number;
 }
-export type TableAction<DataType> = SelectRowsAction<DataType> | SelectRowAction<DataType>;
+export interface SelectControlledRowAction<DataType> {
+    type: 'SELECT_CONTROLLED_ROW';
+    rows: TableRowsType<DataType>;
+    totalRowCount: number;
+}
+export type TableAction<DataType> = SelectRowsAction<DataType> | SelectRowAction<DataType> | SelectControlledRowAction<DataType>;

package/dist/components/table/utils.d.ts

@@ -1,4 +1,5 @@
-import { TableColumnsType } from './types';
+import { Key } from 'react';
+import { TableColumnsType, TableRowsType } from './types';
 export interface UseTableColumnsProps<DataType> {
     columns: TableColumnsType<DataType>;
 }
@@ -6,3 +7,4 @@ export declare function getColGroup<DataType>({ columns }: UseTableColumnsProps<
 export declare function getGroupColumns<DataType>({ columns }: UseTableColumnsProps<DataType>): TableColumnsType<DataType>;
 export declare function getFlattenColumns<DataType>({ columns }: UseTableColumnsProps<DataType>): TableColumnsType<DataType>;
 export declare function getFixedMergeColumn<DataType>(columns: TableColumnsType<DataType>, selectableRows: boolean, columnCount: number): number;
+export declare function getRowsKey<DataType>(rows: TableRowsType<DataType>): Key[];