feat: Table toobar add disabled status (#319)

* fix: Fix fixed table style Signed-off-by: yazhou <[email protected]> * chore: remove console.log Signed-off-by: yazhou <[email protected]> * feat: Table add disabled state to FilterInput and Toolbar components Signed-off-by: yazhou <[email protected]> * ci: update version Signed-off-by: yazhou <[email protected]> * style: FilterInput disabled style Signed-off-by: yazhou <[email protected]> --------- Signed-off-by: yazhou <[email protected]>
kubesphere · Nov 12, 2024 · 9afc383 · 9afc383
1 parent 415f833
commit 9afc383
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 16 deletions.
diff --git a/.changeset/few-grapes-leave.md b/.changeset/few-grapes-leave.md
@@ -0,0 +1,14 @@
+---
+'@kubed/code-editor': patch
+'@kubed/diff-viewer': patch
+'@kubed/components': patch
+'@kubed/log-viewer': patch
+'@kubed/charts': patch
+'@kubed/hooks': patch
+'@kubed/icons': patch
+'@kubed/tests': patch
+'kubed-documents': patch
+---
+
+1. Fix table fixed style.
+2. Table toolbar support disabled status.
diff --git a/packages/components/src/FilterInput/FilterInput.styles.ts b/packages/components/src/FilterInput/FilterInput.styles.ts
@@ -17,6 +17,14 @@ export const Wrapper = styled.div`
     border-color: ${({ theme }) => theme.palette.border};
   }
 
+  &.is-disabled {
+    border: solid 1px transparent;
+    opacity: 0.6;
+    cursor: not-allowed;
+    & > * {
+      pointer-events: none;
+    }
+  }
   &.has-value,
   &.is-focused {
     background-color: ${({ theme }) => theme.palette.background};

diff --git a/packages/components/src/FilterInput/FilterInput.tsx b/packages/components/src/FilterInput/FilterInput.tsx
@@ -57,6 +57,7 @@ export interface FilterInputProps extends DefaultProps {
   // renderMenuItem?: () => void;
   initialKeyword?: string;
   simpleMode?: boolean;
+  disabled?: boolean;
 }
 
 export const FilterInput = forwardRef<FilterInputProps, null>((props, ref) => {
@@ -261,7 +262,11 @@ export const FilterInput = forwardRef<FilterInputProps, null>((props, ref) => {
 
   return (
     <Wrapper
-      className={cx(props.className, { 'has-value': hasValue, 'is-focused': isFocused })}
+      className={cx(props.className, {
+        'has-value': hasValue,
+        'is-focused': isFocused,
+        'is-disabled': props.disabled,
+      })}
       ref={ref}
     >
       <Magnifier className="icon-search" />

diff --git a/packages/components/src/Table/BaseTable/Table.tsx b/packages/components/src/Table/BaseTable/Table.tsx
@@ -17,6 +17,8 @@ const TableRoot = styled('table')<{
   },
   ...($stickyHeader && {
     borderCollapse: 'separate',
+    width: 'max-content',
+    minWidth: '100%',
   }),
 }));
 

diff --git a/packages/components/src/Table/BaseTable/TableCell.tsx b/packages/components/src/Table/BaseTable/TableCell.tsx
@@ -32,6 +32,7 @@ type OwnerState = Pick<
   | 'fixedLastLeft'
   | 'fixedLastRight'
   | 'hasBorder'
+  | 'width'
 >;
 const TableCellRoot = styled.td<{
   $ownerState: OwnerState;
@@ -50,6 +51,7 @@ const TableCellRoot = styled.td<{
       fixedLastLeft,
       fixedLastRight,
       hasBorder = false,
+      width,
     },
   }) => {
     const paddingV =
@@ -70,6 +72,9 @@ const TableCellRoot = styled.td<{
     return {
       display: 'table-cell',
       verticalAlign: 'inherit',
+      ...(width && {
+        width: typeof width === 'number' ? `${width}px` : width,
+      }),
       // boxShadow: `inset 0 -1px 0 0 ${theme.palette.accents_1}`,
       ...(size && {
         height: {
@@ -104,16 +109,17 @@ const TableCellRoot = styled.td<{
         zIndex: 1,
         backgroundColor: theme.palette.background,
       }),
-      ...(stickyHeader && {
+      '&.with-sticky': {
         position: 'sticky',
         top: 0,
         zIndex: fixed ? 3 : 2,
-      }),
-      '&.with-sticky': {
+        backgroundColor: 'white',
+      },
+      ...(stickyHeader && {
         position: 'sticky',
         top: 0,
-        zIndex: 2,
-      },
+        zIndex: fixed ? 3 : 2,
+      }),
       ...(fixedLastLeft && {
         '&:after': {
           content: '""',
@@ -182,6 +188,7 @@ export const TableCell = React.forwardRef<
       fixedLastLeft,
       fixedLastRight,
       hasBorder: hasBorder ?? (tableLv && tableLv.hasBorder),
+      width: other.width,
     };
     const isHeadCell = tableLv && tableLv.variant === 'head';
     const component = isHeadCell ? 'th' : 'td';

diff --git a/packages/components/src/Table/BaseTable/Toolbar/index.tsx b/packages/components/src/Table/BaseTable/Toolbar/index.tsx
@@ -31,10 +31,13 @@ export interface ToolbarProps {
     simpleMode?: boolean;
     onChange?: (value: any) => void;
     initialKeyword?: string;
+    disabled?: boolean;
   };
   onFilterInputChange?: (value: any) => void;
   refetch?: any;
   loading?: boolean;
+  refreshDisabled?: boolean;
+  settingMenuDisabled?: boolean;
 }
 
 export const Toolbar = (props: ToolbarProps) => {
@@ -54,6 +57,8 @@ export const Toolbar = (props: ToolbarProps) => {
     loading,
     enableSettingMenu = true,
     className,
+    refreshDisabled,
+    settingMenuDisabled,
   } = props;
   return (
     <ToolbarWrapper className={className}>
@@ -75,12 +80,17 @@ export const Toolbar = (props: ToolbarProps) => {
         {toolbarLeft && <div className="toolbar-left">{toolbarLeft}</div>}
         <div className="toolbar-item">{enableFilters && <FilterInput {...filterProps} />}</div>
         <div className="toolbar-right">
-          <Button variant="text" className="btn-refresh" disabled={!!loading} onClick={refetch}>
+          <Button
+            variant="text"
+            className="btn-refresh"
+            disabled={!!loading || refreshDisabled}
+            onClick={refetch}
+          >
             {loading ? <CircleLoader size={14} /> : <Refresh />}
           </Button>
           {enableSettingMenu && (
             <Dropdown content={settingMenu} placement="bottom-end" maxWidth={160}>
-              <Button variant="text" className="btn-setting">
+              <Button variant="text" className="btn-setting" disabled={settingMenuDisabled}>
                 <Cogwheel />
               </Button>
             </Dropdown>

diff --git a/packages/components/src/Table/Table.story.tsx b/packages/components/src/Table/Table.story.tsx
@@ -170,22 +170,23 @@ export const basicTableWithFixedColumn = () => {
       style={{
         height: '300px',
         overflow: 'auto',
-        width: 500,
       }}
     >
-      <Table
-        stickyHeader
-        style={{
-          width: 700,
-          minWidth: '100%',
-        }}
-      >
+      <Table stickyHeader>
         <colgroup>
           <col width="100" />
           <col width="200" />
           <col />
           <col />
           <col />
+          <col />
+          <col />
+          <col />
+          <col />
+          <col />
+          <col />
+          <col />
+          <col />
           <col width="100" />
         </colgroup>
         <TableHead hasBorder>
@@ -199,6 +200,14 @@ export const basicTableWithFixedColumn = () => {
             <TableCell>Header 3</TableCell>
             <TableCell>Header 3</TableCell>
             <TableCell>Header 3</TableCell>
+            <TableCell>Header 3</TableCell>
+            <TableCell>Header 3</TableCell>
+            <TableCell>Header 3</TableCell>
+            <TableCell>Header 3</TableCell>
+            <TableCell>Header 3</TableCell>
+            <TableCell>Header 3</TableCell>
+            <TableCell>Header 3</TableCell>
+            <TableCell>Header 3</TableCell>
             <TableCell fixed="right" fixedLastRight fixedWidth={0}>
               Header 3
             </TableCell>
@@ -218,6 +227,14 @@ export const basicTableWithFixedColumn = () => {
               </TableCell>
               <TableCell>{row.col3}</TableCell>
               <TableCell>{row.col3}</TableCell>
+              <TableCell>{row.col3}</TableCell>
+              <TableCell>{row.col3}</TableCell>
+              <TableCell>{row.col3}</TableCell>
+              <TableCell>{row.col3}</TableCell>
+              <TableCell>{row.col3}</TableCell>
+              <TableCell>{row.col3}</TableCell>
+              <TableCell>{row.col3}</TableCell>
+              <TableCell>{row.col3}</TableCell>
               <TableCell fixed="right" fixedLastRight fixedWidth={0}>
                 {row.col3}
               </TableCell>
@@ -1053,8 +1070,15 @@ export const DataTableSimple = () => {
         },
       ],
       getProps: {
+        toolbar: () => {
+          return {
+            // refreshDisabled: true,
+            // settingMenuDisabled: true,
+          };
+        },
         filters: () => {
           return {
+            disabled: true,
             simpleMode: false,
             suggestions: [
               {