* kanban: refactor.

easysoft · Oct 17, 2023 · c1c0936 · c1c0936
1 parent 3f84c21
commit c1c0936
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 20 deletions.
diff --git a/lib/kanban/src/component/kanban-header-col.tsx b/lib/kanban/src/component/kanban-header-col.tsx
@@ -1,4 +1,4 @@
-import {CustomContent, HElement, Icon, classes, mergeProps} from '@zui/core';
+import {CustomContent, HElement, Icon, classes, mergeProps, toCssSize} from '@zui/core';
 import {Toolbar} from '@zui/toolbar/src/component';
 
 import type {ComponentChildren, RenderableProps} from 'preact';
@@ -21,9 +21,9 @@ export class KanbanHeaderCol extends HElement<KanbanColProps> {
         return mergeProps(super._getProps(props), {
             style: {
                 '--kanban-col-color': color,
-                '--kanban-col-width': width,
-                minWidth,
-                maxWidth,
+                '--kanban-col-width': toCssSize(width),
+                minWidth: toCssSize(minWidth),
+                maxWidth: toCssSize(maxWidth),
             },
             'z-col': name,
         });
@@ -56,7 +56,7 @@ export class KanbanHeaderCol extends HElement<KanbanColProps> {
             </div>,
             subCols ? (
                 <div key="subs" className="kanban-header-sub-cols">
-                    {subCols.map((col, index) => <KanbanHeaderCol key={col.name} index={index} {...col} />)}
+                    {subCols.map((col) => <KanbanHeaderCol key={col.name} {...col} />)}
                 </div>
             ) : null,
         ];

diff --git a/lib/kanban/src/component/kanban-lane-col.tsx b/lib/kanban/src/component/kanban-lane-col.tsx
@@ -1,5 +1,5 @@
 import {Component, createRef} from 'preact';
-import {classes, $, CustomContent} from '@zui/core';
+import {classes, $, CustomContent, toCssSize} from '@zui/core';
 import {CardList} from '@zui/cards/src/component';
 
 import type {ComponentChildren, JSX, RefObject} from 'preact';
@@ -56,9 +56,9 @@ export class KanbanLaneCol extends Component<KanbanLaneColProps> {
         } = props;
         const style: JSX.CSSProperties = {
             '--kanban-col-color': color,
-            '--kanban-col-width': width as string,
-            minWidth,
-            maxWidth,
+            '--kanban-col-width': toCssSize(width),
+            minWidth: toCssSize(minWidth),
+            maxWidth: toCssSize(maxWidth),
         };
         return (
             <div className="kanban-lane-col" style={style} z-lane={lane} z-col={name}>

diff --git a/lib/kanban/src/component/kanban-lane.tsx b/lib/kanban/src/component/kanban-lane.tsx
@@ -1,9 +1,9 @@
-import {CustomContent, HElement, classes, mergeProps} from '@zui/core';
+import {CustomContent, HElement, classes, mergeProps, toCssSize} from '@zui/core';
 import {Toolbar} from '@zui/toolbar/src/component';
 
 import type {ComponentChild, ComponentChildren, RenderableProps} from 'preact';
 import type {ClassNameLike} from '@zui/core';
-import type {KanbanColOptions, KanbanLaneName, KanbanLaneProps} from '../types';
+import type {KanbanColOptions, KanbanColProps, KanbanLaneName, KanbanLaneProps} from '../types';
 import {KanbanLaneCol} from './kanban-lane-col';
 
 export class KanbanLane extends HElement<KanbanLaneProps> {
@@ -23,16 +23,16 @@ export class KanbanLane extends HElement<KanbanLaneProps> {
         return mergeProps(super._getProps(props), {
             style: {
                 '--kanban-lane-color': color,
-                height,
-                minHeight,
-                maxHeight,
+                height: toCssSize(height),
+                minHeight: toCssSize(minHeight),
+                maxHeight: toCssSize(maxHeight),
             },
             'z-lane': name,
         });
     }
 
     protected _renderCol(laneName: KanbanLaneName, col: KanbanColOptions, itemRender: KanbanLaneProps['itemRender'], items: KanbanLaneProps['items']) {
-        return <KanbanLaneCol key={col.name} itemRender={itemRender} lane={laneName} items={items[col.name]} {...col} />;
+        return <KanbanLaneCol key={col.name} itemRender={itemRender} lane={laneName} items={items[col.name]} {...(col as KanbanColProps)} />;
     }
 
     protected _getChildren(props: RenderableProps<KanbanLaneProps>): ComponentChildren {

diff --git a/lib/kanban/src/helpers/kanban-helpers.ts b/lib/kanban/src/helpers/kanban-helpers.ts
@@ -24,9 +24,7 @@ export function getCols(this: unknown, cols: KanbanColOptions[] | undefined, opt
         }
 
         if (typeof col.width === 'function') {
-            col = mergeProps({}, col, {
-                width: col.width.call(this, col),
-            }) as unknown as KanbanColOptions;
+            col.width = col.width.call(this, col);
         }
         if (typeof col.order === 'number') {
             needSort = true;

diff --git a/lib/kanban/src/types/kanban-col-props.ts b/lib/kanban/src/types/kanban-col-props.ts
@@ -1,5 +1,8 @@
+import type {SizeSetting} from '@zui/core';
 import type {KanbanColOptions} from './kanban-col-options';
 
 export interface KanbanColProps extends KanbanColOptions {
     index: number;
+    width?: SizeSetting;
+    subCols?: KanbanColProps[];
 }
diff --git a/lib/kanban/src/types/kanban-lane-col-props.ts b/lib/kanban/src/types/kanban-lane-col-props.ts
@@ -1,4 +1,4 @@
-import type {CustomContentType} from '@zui/core';
+import type {CustomContentType, SizeSetting} from '@zui/core';
 import type {KanbanColOptions} from './kanban-col-options';
 import type {KanbanItem} from './kanban-item';
 import type {KanbanItemInfo} from './kanban-item-info';
@@ -9,4 +9,5 @@ export interface KanbanLaneColProps extends KanbanColOptions {
     lane: KanbanLaneName;
     itemRender?: (info: KanbanItemInfo) => CustomContentType;
     watchSize?: boolean;
+    width?: SizeSetting;
 }
diff --git a/lib/kanban/src/types/kanban-lane-props.ts b/lib/kanban/src/types/kanban-lane-props.ts
@@ -1,4 +1,4 @@
-import type {CustomContentType} from '@zui/core';
+import type {CustomContentType, SizeSetting} from '@zui/core';
 import type {KanbanColName} from './kanban-col-name';
 import type {KanbanColOptions} from './kanban-col-options';
 import type {KanbanItem} from './kanban-item';
@@ -10,4 +10,5 @@ export interface KanbanLaneProps extends KanbanLaneOptions {
     cols: KanbanColOptions[];
     items: Record<KanbanColName, KanbanItem[]>;
     itemRender?: (info: KanbanItemInfo) => CustomContentType;
+    height?: SizeSetting;
 }