Sid Gifari File Manager

Sid Gifari File Manager

🏠 Root / home / genremedia08 / musicjukebox.overlookedtracks.com / common / resources / client / ui / list /

Editing: list-item-base.tsx

import clsx from 'clsx';
import React, {
  ComponentPropsWithRef,
  JSXElementConstructor,
  ReactNode,
} from 'react';
import {CheckIcon} from '../../icons/material/Check';
import {To} from 'react-router-dom';

export interface ListItemBaseProps extends ComponentPropsWithRef<'div'> {
  startIcon?: ReactNode;
  endIcon?: ReactNode;
  endSection?: ReactNode;
  description?: ReactNode;
  textLabel?: string;
  capitalizeFirst?: boolean;
  isSelected?: boolean;
  isDisabled?: boolean;
  isActive?: boolean;
  className?: string;
  showCheckmark?: boolean;
  elementType?: 'a' | JSXElementConstructor<any> | 'div';
  to?: To;
  href?: string;
}

export const ListItemBase = React.forwardRef<HTMLDivElement, ListItemBaseProps>(
  (props, ref) => {
    let {
      startIcon,
      capitalizeFirst,
      children,
      description,
      endIcon,
      endSection,
      isDisabled,
      isActive,
      isSelected,
      showCheckmark,
      elementType = 'div',
      ...domProps
    } = props;

if (!startIcon && showCheckmark) {
      startIcon = (
        <CheckIcon
          size="sm"
          className={clsx('text-primary', !isSelected && 'invisible')}
        />
      );
    }

// if (!endIcon && !endSection && showCheckmark) {
    //   endIcon = (
    //     <CheckIcon size="sm" className={clsx('text-primary', 'invisible')} />
    //   );
    // }

const iconClassName = clsx(
      'icon-sm rounded overflow-hidden flex-shrink-0',
      !isDisabled && 'text-muted'
    );
    const endSectionClassName = clsx(!isDisabled && 'text-muted');

const Element = elementType;

return (
      <Element
        {...domProps}
        aria-disabled={isDisabled}
        className={itemClassName(props)}
        ref={ref}
      >
        {startIcon && <div className={iconClassName}>{startIcon}</div>}
        <div
          className={clsx(
            'mr-auto w-full',
            capitalizeFirst && 'first-letter:capitalize'
          )}
        >
          {children}
          {description && (
            <div
              className={clsx(
                'text-xs mt-4 whitespace-normal',
                isDisabled ? 'text-disabled' : 'text-muted'
              )}
            >
              {description}
            </div>
          )}
        </div>
        {(endIcon || endSection) && (
          <div className={endIcon ? iconClassName : endSectionClassName}>
            {endIcon || endSection}
          </div>
        )}
      </Element>
    );
  }
);

let padding;

if (showCheckmark) {
    if (endIcon || endSection) {
      padding = 'pl-8 pr-8';
    } else {
      padding = 'pl-8 pr-24';
    }
  } else {
    padding = 'px-20';
  }

return clsx(
    'w-full select-none outline-none cursor-pointer',
    'py-8 text-sm truncate flex items-center gap-10',
    !isDisabled && 'text-main',
    padding,
    state,
    className
  );
}