change how padding is applied to list

Co-Authored-By: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com>
2025-01-17 21:02:10 -07:00 · 2025-01-17 21:02:10 -07:00 · aad1eb6968
parent bf1012cf8b
commit aad1eb6968
9 changed files with 87 additions and 60 deletions
--- a/web/src/app/app/settings/users/ListUsersComponent.tsx
+++ b/web/src/app/app/settings/users/ListUsersComponent.tsx
@ -11,8 +11,6 @@ export const ListUsersComponent: React.FC<{
  users: OrganizationUser[];
  isFetched: boolean;
 }> = ({ users, isFetched }) => {
-  const { mutateAsync: updateUser } = useUpdateUser();
-
  const columns: BusterListColumn[] = useMemo(
    () => [
      {
@ -91,10 +89,9 @@ export const ListUsersComponent: React.FC<{
        columns={columns}
        rows={rows}
        showHeader={true}
-        showSelectAll={false}
+        // onSelectChange={() => {}}
        columnRowVariant="default"
-        //  selectedRowKeys={selectedRowKeys}
-        //  onSelectChange={setSelectedRowKeys}
+        rowClassName="!pl-[30px]"
        emptyState={
          isFetched && (
            <div className="mx-[30px] flex w-full items-center justify-center">
--- a/web/src/components/list/BusterInfiniteList/BusterInfiniteList.tsx
+++ b/web/src/components/list/BusterInfiniteList/BusterInfiniteList.tsx
@ -25,6 +25,7 @@ export const BusterInfiniteList: React.FC<BusterInfiniteListProps> = ({
  showSelectAll = true,
  onScrollEnd,
  loadingNewContent,
+  rowClassName = '',
  scrollEndThreshold = 48 // Default threshold of 200px
 }) => {
  const containerRef = useRef<HTMLDivElement>(null);
@ -74,7 +75,8 @@ export const BusterInfiniteList: React.FC<BusterInfiniteListProps> = ({
      onSelectSectionChange: onSelectChange ? onSelectSectionChange : undefined,
      onContextMenuClick: undefined,
      columnRowVariant,
-      useRowClickSelectChange
+      useRowClickSelectChange,
+      rowClassName
    };
  }, [
    columns,
@ -132,6 +134,7 @@ export const BusterInfiniteList: React.FC<BusterInfiniteListProps> = ({
          globalCheckStatus={globalCheckStatus}
          rowsLength={rows.length}
          showSelectAll={showSelectAll}
+          rowClassName={rowClassName}
        />
      )}

--- a/web/src/components/list/BusterList/BusterListHeader.tsx
+++ b/web/src/components/list/BusterList/BusterListHeader.tsx
@ -11,15 +11,26 @@ export const BusterListHeader: React.FC<{
  globalCheckStatus?: 'checked' | 'unchecked' | 'indeterminate';
  showSelectAll?: boolean;
  rowsLength: number;
+  rowClassName: string;
 }> = React.memo(
-  ({ columns, showSelectAll = true, onGlobalSelectChange, globalCheckStatus, rowsLength }) => {
+  ({
+    columns,
+    rowClassName,
+    showSelectAll = true,
+    onGlobalSelectChange,
+    globalCheckStatus,
+    rowsLength
+  }) => {
    const { styles, cx } = useStyles();
    const showCheckboxColumn = !!onGlobalSelectChange;
    const showGlobalCheckbox =
      globalCheckStatus === 'indeterminate' || globalCheckStatus === 'checked';

    return (
-      <div className={cx(styles.header, 'group')}>
+      <div
+        className={cx(styles.header, 'group', rowClassName, 'mr-[12px]', {
+          'pl-3.5': !onGlobalSelectChange
+        })}>
        {showCheckboxColumn && (
          <CheckboxColumn
            checkStatus={globalCheckStatus}
@ -34,9 +45,7 @@ export const BusterListHeader: React.FC<{

        {columns.map((column, index) => (
          <div
-            className={cx('header-cell flex items-center', {
-              '!pl-[14px]': !onGlobalSelectChange
-            })}
+            className={cx('header-cell flex items-center')}
            key={column.dataIndex}
            style={{
              width: column.width || '100%',
@ -72,9 +81,9 @@ const useStyles = createStyles(({ token, css }) => ({
      padding: 0 4px;
      height: 100%;

-      &:first-child {
-        padding-left: 18px;
-      }
+      // &:first-child {
+      //   padding-left: 18px;
+      // }
    }
  `
 }));
--- a/web/src/components/list/BusterList/BusterListReactWindow.tsx
+++ b/web/src/components/list/BusterList/BusterListReactWindow.tsx
@ -18,7 +18,8 @@ export const BusterListReactWindow: React.FC<BusterListProps> = ({
  showHeader = true,
  contextMenu,
  showSelectAll = true,
-  useRowClickSelectChange = false
+  useRowClickSelectChange = false,
+  rowClassName = ''
 }) => {
  const contextMenuRef = useRef<HTMLDivElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);
@ -159,6 +160,7 @@ export const BusterListReactWindow: React.FC<BusterListProps> = ({
          globalCheckStatus={globalCheckStatus}
          rowsLength={rows.length}
          showSelectAll={showSelectAll}
+          rowClassName={rowClassName}
        />
      )}

--- a/web/src/components/list/BusterList/BusterListRowComponent.tsx
+++ b/web/src/components/list/BusterList/BusterListRowComponent.tsx
@ -19,6 +19,7 @@ export const BusterListRowComponent = React.memo(
      style?: React.CSSProperties;
      columnRowVariant: BusterListProps['columnRowVariant'];
      useRowClickSelectChange: boolean;
+      rowClassName?: string;
    }
  >(
    (
@ -30,6 +31,7 @@ export const BusterListRowComponent = React.memo(
        onSelectChange,
        checked,
        onContextMenuClick,
+        rowClassName = '',
        useRowClickSelectChange
      },
      ref
@ -60,16 +62,18 @@ export const BusterListRowComponent = React.memo(
            onContextMenu={onContextMenu}
            className={cx(
              styles.row,
+              rowClassName,
              'group flex items-center',
              checked ? 'checked' : '',
              columnRowVariant,
+              !onSelectChange ? 'pl-3.5' : '',
              { clickable: !!(link || row.onClick || (onSelectChange && useRowClickSelectChange)) }
            )}
            ref={ref}>
            {!!onSelectChange ? (
              <CheckboxColumn checkStatus={checked ? 'checked' : 'unchecked'} onChange={onChange} />
            ) : (
-              <div className="pl-2.5"></div>
+              <></>
            )}
            {columns.map((column, columnIndex) => (
              <BusterListCellComponent
--- a/web/src/components/list/BusterList/BusterListRowComponentSelector.tsx
+++ b/web/src/components/list/BusterList/BusterListRowComponentSelector.tsx
@ -17,6 +17,7 @@ export const BusterListRowComponentSelector = React.forwardRef<
    style?: React.CSSProperties;
    columnRowVariant?: BusterListProps['columnRowVariant'];
    useRowClickSelectChange: boolean;
+    rowClassName?: string;
  }
 >(
  (
@ -30,6 +31,7 @@ export const BusterListRowComponentSelector = React.forwardRef<
      selectedRowKeys,
      onContextMenuClick,
      columnRowVariant,
+      rowClassName,
      useRowClickSelectChange = false
    },
    ref
@ -44,6 +46,7 @@ export const BusterListRowComponentSelector = React.forwardRef<
          key={row.id}
          rows={rows}
          selectedRowKeys={selectedRowKeys}
+          rowClassName={rowClassName}
          onSelectSectionChange={onSelectSectionChange}
        />
      );
@ -55,6 +58,7 @@ export const BusterListRowComponentSelector = React.forwardRef<
        row={row}
        columns={columns}
        key={row.id}
+        rowClassName={rowClassName}
        onSelectChange={onSelectChange}
        checked={!!selectedRowKeys?.includes(row.id)}
        ref={ref}
--- a/web/src/components/list/BusterList/BusterListSectionComponent.tsx
+++ b/web/src/components/list/BusterList/BusterListSectionComponent.tsx
@ -17,59 +17,64 @@ export const BusterListSectionComponent = React.memo(
      selectedRowKeys?: string[];
      rows: BusterListRow[];
      style?: React.CSSProperties;
+      rowClassName?: string;
    }
-  >(({ rowSection, onSelectSectionChange, id, selectedRowKeys, rows, style }, ref) => {
-    const { styles, cx } = useStyles();
+  >(
+    (
+      { rowSection, onSelectSectionChange, id, selectedRowKeys, rows, style, rowClassName },
+      ref
+    ) => {
+      const { styles, cx } = useStyles();

-    const indexOfSection = useMemo(() => {
-      return rows.findIndex((row) => row.id === id);
-    }, [rows.length, id]);
+      const indexOfSection = useMemo(() => {
+        return rows.findIndex((row) => row.id === id);
+      }, [rows.length, id]);

-    const idsInSection = useMemo(() => {
-      return getAllIdsInSection(rows, id);
-    }, [rows.length, id]);
+      const idsInSection = useMemo(() => {
+        return getAllIdsInSection(rows, id);
+      }, [rows.length, id]);

-    const checkStatus = useMemo(() => {
-      if (!selectedRowKeys) return 'unchecked';
-      if (rowSection.disableSection) return 'unchecked';
-      if (selectedRowKeys?.length === 0) return 'unchecked';
+      const checkStatus = useMemo(() => {
+        if (!selectedRowKeys) return 'unchecked';
+        if (rowSection.disableSection) return 'unchecked';
+        if (selectedRowKeys?.length === 0) return 'unchecked';

-      const allIdsSelected = idsInSection.every((id) => selectedRowKeys.includes(id));
-      if (allIdsSelected) return 'checked';
-      const someIdsSelected = idsInSection.some((id) => selectedRowKeys.includes(id));
-      if (someIdsSelected) return 'indeterminate';
-      return 'unchecked';
-    }, [selectedRowKeys?.length, idsInSection, indexOfSection, rowSection]);
+        const allIdsSelected = idsInSection.every((id) => selectedRowKeys.includes(id));
+        if (allIdsSelected) return 'checked';
+        const someIdsSelected = idsInSection.some((id) => selectedRowKeys.includes(id));
+        if (someIdsSelected) return 'indeterminate';
+        return 'unchecked';
+      }, [selectedRowKeys?.length, idsInSection, indexOfSection, rowSection]);

-    const onChange = useMemoizedFn((checked: boolean) => {
-      onSelectSectionChange?.(checked, id);
-    });
-
-    return (
-      <div
-        className={cx(
-          styles.sectionRow,
-          'group flex items-center',
-          !!onSelectSectionChange && 'hoverable'
-        )}
-        style={style}
-        ref={ref}>
-        {onSelectSectionChange && <CheckboxColumn checkStatus={checkStatus} onChange={onChange} />}
+      const onChange = useMemoizedFn((checked: boolean) => {
+        onSelectSectionChange?.(checked, id);
+      });

+      return (
        <div
          className={cx(
-            'flex items-center space-x-2 leading-none',
-            !onSelectSectionChange && 'ml-3.5',
-            onSelectSectionChange && 'pl-[4px]'
-          )}>
-          <Text size="sm">{rowSection.title}</Text>
-          <Text size="sm" type="tertiary">
-            {rowSection.secondaryTitle}
-          </Text>
+            styles.sectionRow,
+            'group flex items-center',
+            !!onSelectSectionChange && 'hoverable',
+            !onSelectSectionChange && 'pl-3.5',
+            rowClassName
+          )}
+          style={style}
+          ref={ref}>
+          {onSelectSectionChange && (
+            <CheckboxColumn checkStatus={checkStatus} onChange={onChange} />
+          )}
+
+          <div className={cx('flex items-center space-x-2 leading-none', 'pl-[4px]')}>
+            <Text size="sm">{rowSection.title}</Text>
+            <Text size="sm" type="tertiary">
+              {rowSection.secondaryTitle}
+            </Text>
+          </div>
        </div>
-      </div>
-    );
-  })
+      );
+    }
+  )
 );
 BusterListSectionComponent.displayName = 'BusterListSectionComponent';

--- a/web/src/components/list/BusterList/BusterListVirtua.tsx
+++ b/web/src/components/list/BusterList/BusterListVirtua.tsx
@ -19,7 +19,8 @@ export const BusterListVirtua = React.memo(
    showHeader = true,
    contextMenu,
    showSelectAll = true,
-    useRowClickSelectChange = false
+    useRowClickSelectChange = false,
+    rowClassName = ''
  }: BusterListProps) => {
    const contextMenuRef = useRef<HTMLDivElement>(null);
    const showEmptyState = (!rows || rows.length === 0) && !!emptyState;
@ -110,6 +111,7 @@ export const BusterListVirtua = React.memo(
            globalCheckStatus={globalCheckStatus}
            rowsLength={rows.length}
            showSelectAll={showSelectAll}
+            rowClassName={rowClassName}
          />
        )}

--- a/web/src/components/list/BusterList/interfaces.ts
+++ b/web/src/components/list/BusterList/interfaces.ts
@ -17,6 +17,7 @@ export interface BusterListProps {
  contextMenu?: BusterListContextMenu;
  showSelectAll?: boolean;
  useRowClickSelectChange?: boolean;
+  rowClassName?: string;
 }

 export interface BusterListColumn {