chore(platform): update style of table-filter

Author: xiejay97

packages/platform/src/app/components/table-filter/TableFilter.tsx

@@ -1,4 +1,3 @@
-import { isNumber, isUndefined } from 'lodash';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -11,7 +10,6 @@ export interface AppTableFilterProps extends Omit<React.HTMLAttributes<HTMLDivEl
   aFilterList?: { label: string; node: React.ReactElement; isEmpty: boolean }[];
   aSearchValue?: string;
   aSearchPlaceholder?: string;
-  aLabelWidth?: string | number;
   onSearchValueChange?: (value: string) => void;
   onSearchClick?: () => void;
   onResetClick?: () => void;
@@ -22,7 +20,6 @@ export function AppTableFilter(props: AppTableFilterProps): JSX.Element | null {
     aFilterList,
     aSearchValue,
     aSearchPlaceholder,
-    aLabelWidth,
     onSearchValueChange,
     onSearchClick,
     onResetClick,
@@ -34,20 +31,7 @@ export function AppTableFilter(props: AppTableFilterProps): JSX.Element | null {
 
   const [searchValue, changeSearchValue] = useDValue<string>('', aSearchValue, onSearchValueChange);
 
-  const [labelWidth, badgeValue] = (() => {
-    let maxLength = 0;
-    let badgeValue = 0;
-    if (aFilterList) {
-      aFilterList.forEach((item) => {
-        maxLength = Math.max(item.label.length, maxLength);
-        if (!item.isEmpty) {
-          badgeValue += 1;
-        }
-      });
-    }
-
-    return [isUndefined(aLabelWidth) ? maxLength + 1 + 'em' : aLabelWidth, badgeValue] as const;
-  })();
+  const badgeValue = aFilterList ? aFilterList.filter((item) => !item.isEmpty).length : 0;
 
   const [showAdvancedSearch, setShowAdvancedSearch] = useState(false);
 
@@ -101,14 +85,8 @@ export function AppTableFilter(props: AppTableFilterProps): JSX.Element | null {
           <DSeparator></DSeparator>
           {aFilterList.map(({ label, node }) => (
             <div key={label} className="app-table-filter__filter">
-              <label className="app-table-filter__filter-label">
-                <div className="app-colon" style={{ width: labelWidth }}>
-                  {label}
-                </div>
-              </label>
-              {React.cloneElement(node, {
-                style: { ...node.props.style, maxWidth: `calc(100% - ${isNumber(labelWidth) ? labelWidth + 'px' : labelWidth})` },
-              })}
+              <label className="app-table-filter__filter-label">{label}</label>
+              {node}
             </div>
           ))}
         </>

packages/platform/src/app/routes/list/standard-table/StandardTable.tsx

@@ -191,11 +191,29 @@ const StandardTable = AppRoute(() => {
             <AppTableFilter
               className="mb-3"
               aFilterList={[
+                {
+                  label: 'Status',
+                  node: (
+                    <DCheckbox.Group
+                      dList={[0, 1, 2].map((n) => ({
+                        label: n === 0 ? 'Normal' : n === 1 ? 'Failure' : 'Alarm',
+                        value: n,
+                      }))}
+                      dModel={deviceQuery.status}
+                      onModelChange={(value) => {
+                        setDeviceQuery((draft) => {
+                          draft.status = value;
+                        });
+                      }}
+                    />
+                  ),
+                  isEmpty: queryEmptyStatus.deviceQuery.status,
+                },
                 {
                   label: 'Model',
                   node: (
                     <DSelect
-                      style={{ width: '16em' }}
+                      style={{ width: '16em', maxWidth: '100%' }}
                       dModel={deviceQuery.model}
                       dList={modelList ?? []}
                       dLoading={isUndefined(modelList)}
@@ -211,26 +229,7 @@ const StandardTable = AppRoute(() => {
                   ),
                   isEmpty: queryEmptyStatus.deviceQuery.model,
                 },
-                {
-                  label: 'Status',
-                  node: (
-                    <DCheckbox.Group
-                      dList={[0, 1, 2].map((n) => ({
-                        label: n === 0 ? 'Normal' : n === 1 ? 'Failure' : 'Alarm',
-                        value: n,
-                      }))}
-                      dModel={deviceQuery.status}
-                      onModelChange={(value) => {
-                        setDeviceQuery((draft) => {
-                          draft.status = value;
-                        });
-                      }}
-                    />
-                  ),
-                  isEmpty: queryEmptyStatus.deviceQuery.status,
-                },
               ]}
-              aLabelWidth={72}
               aSearchValue={deviceQuery.keyword}
               aSearchPlaceholder="ID, Name"
               onSearchValueChange={(value) => {

packages/platform/src/styles/components/table-filter.scss

@@ -28,16 +28,15 @@
   }
 
   @include e(filter) {
-    display: flex;
-
     & + & {
       margin-top: 8px;
     }
   }
 
   @include e(filter-label) {
-    display: inline-flex;
-    align-items: center;
-    height: var(--#{$rd-prefix}size);
+    display: block;
+    margin-bottom: 2px;
+    font-size: 0.775em;
+    color: var(--#{$rd-prefix}text-color-sub);
   }
 }