@rainbow-oh/yee-c 0.1.0

package/src/Table/style/index.less

@@ -0,0 +1,182 @@
+@pls: .yee-table;
+
+@{pls} {
+  position: relative;
+
+  &-bordered {
+    > @{pls}-thead,
+    > @{pls}-tbody {
+      @{pls}-cell {
+        border-left: var(--yee-table-bordered-cell-border-width) solid
+          var(--yee-table-tbody-td-borderbottom-color);
+
+        &:last-child {
+          border-right: var(--yee-table-bordered-cell-border-width) solid
+            var(--yee-table-tbody-td-borderbottom-color);
+        }
+      }
+    }
+
+    > @{pls}-thead {
+      @{pls}-cell {
+        border-top: var(--yee-table-bordered-thead-border-width) solid
+          var(--yee-table-tbody-td-borderbottom-color);
+      }
+    }
+  }
+
+  &-thead {
+    color: var(--yee-table-thead-color);
+
+    @{pls}-cell {
+      background-color: var(--yee-table-thead-bg-color);
+    }
+
+    &-cell {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    &-action {
+      display: inline-flex;
+      gap: var(--yee-table-thead-action-gap);
+      align-items: center;
+      margin-left: auto;
+    }
+  }
+
+  &-filter {
+    &-trigger {
+      display: inline-flex;
+      cursor: pointer;
+    }
+
+    &-popup {
+      background-color: var(--yee-table-filter-list-bg-color);
+    }
+  }
+
+  &-content {
+    overflow: auto;
+
+    &-wrapper {
+      overflow: auto;
+      width: 100%;
+    }
+
+    > table {
+      width: 100%;
+      text-align: start;
+      border-radius: var(--yee-table-content-border-radius);
+      border-collapse: separate;
+      border-spacing: 0;
+    }
+  }
+
+  &-expanded-row {
+    > td {
+      height: 65px;
+    }
+  }
+
+  &-even-row {
+    background-color: var(--yee-table-even-row-bg-color);
+  }
+
+  &-column-sorters {
+    display: inline-flex;
+    align-items: center;
+    user-select: none;
+    cursor: pointer;
+  }
+
+  &-column-sorter {
+    display: inline-flex;
+    flex-direction: column;
+    margin-left: 4px;
+
+    .active {
+      color: var(--yee-primary-color);
+    }
+  }
+
+  &-cell {
+    padding: var(--yee-table-cell-padding);
+    line-height: var(--yee-table-cell-line-height);
+    text-align: start;
+    border-bottom: var(--yee-table-cell-border-bottom-width) solid
+      var(--yee-table-tbody-td-borderbottom-color);
+
+    &-inner {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    &-fixed-left,
+    &-fixed-right {
+      position: sticky;
+      background-color: inherit;
+    }
+  }
+
+  &-no-record {
+    text-align: center;
+
+    > td {
+      padding: var(--yee-table-no-record-padding);
+      border-bottom: var(--yee-table-cell-border-bottom-width) solid
+        var(--yee-table-tbody-td-borderbottom-color);
+    }
+  }
+
+  &-tbody {
+    @{pls}-cell {
+      background-color: var(--yee-table-cell-bg-color, #fff);
+    }
+  }
+
+  &-footer {
+    display: flex;
+    align-items: center;
+    margin-top: var(--yee-table-footer-margin-top);
+    text-align: right;
+    justify-content: space-between;
+
+    @{pls}-pagination {
+      margin-left: auto;
+    }
+  }
+
+  &-summary {
+    background-color: var(--yee-table-summary-bg-color);
+
+    td {
+      height: var(--yee-table-td-height);
+      padding: var(--yee-table-td-padding);
+      border-bottom: var(--yee-table-summary-td-border-bottom-width) solid
+        var(--yee-table-tbody-td-borderbottom-color);
+    }
+
+    td:not(.yee-table-fixed-right):not(.yee-table-fixed-left) {
+      overflow: hidden;
+    }
+
+    &-fixed {
+      position: sticky;
+      bottom: 0;
+      z-index: var(--yee-table-summary-fixed-z-index);
+    }
+  }
+
+  &-small-size {
+    --yee-table-small-height: var(--yee-table-small-size-height);
+    --yee-table-small-padding: var(--yee-table-small-size-padding);
+
+    th,
+    td {
+      height: var(--yee-table-small-height);
+      padding: var(--yee-table-small-padding);
+    }
+  }
+}

package/src/Table/summary/index.tsx

@@ -0,0 +1,71 @@
+import clsx from 'clsx';
+import * as React from 'react';
+
+import { TableCtx } from '../table';
+
+const Summary = (props: any) => {
+  const { children, fixed, className, style, ...rest } = props;
+
+  const { prefixCls } = React.useContext(TableCtx);
+
+  return (
+    <tfoot
+      {...rest}
+      className={clsx(
+        `${prefixCls}-summary`,
+        { [`${prefixCls}-summary-fixed`]: fixed },
+        className,
+      )}
+      style={style}
+    >
+      {children}
+    </tfoot>
+  );
+};
+
+const Row = (props: any) => {
+  const { children, ...rest } = props;
+  const cloned = React.Children.map(children, (child, index) => {
+    return React.cloneElement(child, { index });
+  });
+  return <tr {...rest}>{cloned}</tr>;
+};
+
+const Cell = (props: any) => {
+  const { children, index, style, className, ...rest } = props;
+  const { prefixCls, columns = [] } = React.useContext(TableCtx);
+  const {
+    fixed,
+    isRightFixedFirst,
+    isLeftFixedLast,
+    style: innerStyle,
+  } = columns[index] || {};
+
+  const cls = clsx(
+    'yee-table-cell',
+    {
+      [`${prefixCls}-fixed-${fixed}`]: fixed,
+      [`${prefixCls}-fixed-${fixed}-first`]: isRightFixedFirst,
+      [`${prefixCls}-fixed-${fixed}-last`]: isLeftFixedLast,
+    },
+    className,
+  );
+  const mergedStyle = { ...style, ...innerStyle };
+  return (
+    <td className={cls} style={mergedStyle} {...rest}>
+      {children}
+    </td>
+  );
+};
+
+type SummaryType = typeof Summary & {
+  Row: typeof Row;
+  Cell: typeof Cell;
+};
+
+const InternalSummary = Summary as SummaryType;
+
+InternalSummary.Row = Row;
+InternalSummary.Cell = Cell;
+
+export default InternalSummary;

package/src/Table/table.tsx

@@ -0,0 +1,306 @@
+import clsx from 'clsx';
+import React, { useContext, useEffect, useMemo, useRef } from 'react';
+import Spin from '../Spin';
+import ColGroup from './col-group';
+import Footer from './footer';
+import Header from './header';
+import useColumns from './hooks/useColumns';
+import useExpand from './hooks/useExpand';
+import useSelection from './hooks/useSelection';
+import TBody from './tbody';
+import TFooter from './tfooter';
+import THeader from './theader';
+
+import { GlobalContext } from '../Config-Provider';
+import mergeContextToProps from '../utils/mergeContextToProps';
+import omit from '../utils/omit';
+import { pickDataAttrs } from '../utils/types';
+
+import useFilter from './hooks/useFilter';
+import usePagination from './hooks/usePagination';
+import useSorter from './hooks/useSorter';
+import type { PaginationType, TableProps } from './interface';
+import './style/index.less';
+
+export const TableCtx = React.createContext({} as any);
+
+const Table = React.forwardRef<HTMLDivElement, TableProps>((baseprops, ref) => {
+  const { table } = useContext(GlobalContext);
+  const props = mergeContextToProps(baseprops, table);
+  const {
+    prefixCls = 'yee-table',
+    className,
+    style,
+    classNames,
+    styles,
+    components,
+    rowKey = 'key',
+    bordered,
+    tableLayout,
+    loading = false,
+    showHeader = true,
+    pagination: propPagination = true,
+    columns: propColumns = [],
+    dataSource = [],
+    size,
+    summary,
+    scroll,
+    header,
+    download,
+    footer,
+    children,
+    expandable,
+    rowSelection,
+    locale,
+    onChange,
+    //   sort,
+    //   multiSort,
+    //   maxSortCount = 3,
+    //   children, // Destructured to prevent passing through to THeader
+    ...rest
+  } = props;
+
+  const dataAttrs = pickDataAttrs(rest as Record<string, unknown>);
+
+  const getRowKey = React.useCallback(
+    (record: Record<string, any>, key = rowKey) => {
+      return typeof key === 'function' ? key(record) : record[key];
+    },
+    [rowKey],
+  );
+
+  const allKeys = useMemo(() => {
+    return Array.isArray(dataSource)
+      ? dataSource.map((item) => getRowKey(item))
+      : [];
+  }, [dataSource, rowKey, getRowKey]);
+
+  const { wrapedColumns, columns } = useColumns({
+    children,
+    columns: propColumns,
+    expandable,
+    rowSelection,
+  });
+
+  // Filter
+  const { data: filteredData, onFilter: onFilterInternal } = useFilter({
+    data: dataSource,
+  });
+
+  // Sort
+  const {
+    data: sortedData,
+    sorters,
+    onSort,
+  } = useSorter({ data: filteredData, columns });
+  // Pagination
+  const { pageData, current, pageSize, pagination } = usePagination({
+    data: sortedData,
+    pagination: propPagination,
+    onTableChange: onChange
+      ? (info) => {
+          onChange({
+            pagination: info,
+            sorter: sorters,
+            filters: undefined, // TODO: Extract filter info from onFilterInternal
+            currentDataSource: sortedData,
+            action: 'paginate',
+          });
+        }
+      : undefined,
+  });
+
+  // Expanded row data
+  const { expandedRowKeys, onExpand } = useExpand(
+    expandable,
+    allKeys,
+    getRowKey,
+  );
+
+  const {
+    selectedRowKeys,
+    checkedAll,
+    pageDataRowKeys,
+    onCheckAll,
+    onChange: onSelectionChange,
+  } = useSelection({ pageData, dataSource, getRowKey, rowSelection, allKeys });
+
+  // Track previous values to determine what action triggered onChange
+  const prevSortersRef = useRef<typeof sorters>({});
+
+  // Wrap onFilter to trigger onChange
+  const onFilter = React.useCallback(
+    (...args: Parameters<typeof onFilterInternal>) => {
+      onFilterInternal(...args);
+      // Trigger onChange for filter action
+      if (onChange) {
+        onChange({
+          pagination: pagination === false ? undefined : { current, pageSize },
+          sorter: sorters,
+          filters: undefined, // TODO: Extract filter info from args
+          currentDataSource: filteredData,
+          action: 'filter',
+        });
+      }
+    },
+    [
+      onChange,
+      pagination,
+      current,
+      pageSize,
+      sorters,
+      filteredData,
+      onFilterInternal,
+    ],
+  );
+
+  // Trigger onChange when sorter, pagination, or filter changes
+  useEffect(() => {
+    if (!onChange) return;
+
+    // Check if sorters changed
+    const sortersChanged =
+      JSON.stringify(prevSortersRef.current) !== JSON.stringify(sorters);
+    if (sortersChanged && prevSortersRef.current !== sorters) {
+      prevSortersRef.current = sorters;
+      onChange({
+        pagination: pagination === false ? undefined : { current, pageSize },
+        sorter: sorters,
+        filters: undefined,
+        currentDataSource: sortedData,
+        action: 'sort',
+      });
+      return;
+    }
+  }, [sorters, current, pageSize, pageData, sortedData, onChange]);
+
+  const renderHeader = () => {
+    return (
+      <Header
+        prefixCls={prefixCls}
+        header={header}
+        download={download}
+        columns={columns}
+        pageData={pageData}
+        dataSource={dataSource}
+      />
+    );
+  };
+
+  const renderTHeader = () => {
+    if (showHeader === false) {
+      return null;
+    }
+    const ths = omit(rest, ['rowSelection']);
+    return (
+      <THeader
+        {...ths}
+        columns={wrapedColumns}
+        pageDataRowKeys={pageDataRowKeys}
+        checkedAll={checkedAll}
+        sorters={sorters}
+        onSort={onSort}
+        onCheckAll={onCheckAll}
+        onInternalFilter={onFilter}
+      />
+    );
+  };
+
+  const renderTBody = () => {
+    return (
+      <TBody
+        {...rest}
+        current={current}
+        pageSize={pageSize}
+        columns={wrapedColumns}
+        pageData={pageData}
+        selectedRowKeys={selectedRowKeys}
+        expandedRowKeys={expandedRowKeys}
+        expandable={expandable}
+        onExpand={onExpand}
+        onSelectionChange={onSelectionChange}
+      />
+    );
+  };
+
+  const renderTFooter = () => {
+    if (!summary) return null;
+    return <TFooter summary={summary} pageData={pageData} />;
+  };
+
+  const renderTable = () => {
+    const tableProps = {
+      style: {
+        ...styles?.table,
+        tableLayout: pageData?.length ? tableLayout : undefined,
+      },
+      className: clsx(
+        { [`${prefixCls}-bordered`]: bordered },
+        classNames?.table,
+      ),
+    };
+    const table = (
+      <TableCtx.Provider
+        value={{
+          prefixCls,
+          columns,
+          classNames,
+          styles,
+          components,
+          locale,
+          rowKey,
+        }}
+      >
+        <table {...tableProps}>
+          <ColGroup columns={wrapedColumns} />
+          {renderTHeader()}
+          {renderTBody()}
+          {renderTFooter()}
+        </table>
+      </TableCtx.Provider>
+    );
+
+    return (
+      <div className={`${prefixCls}-content-wrapper`}>
+        <div
+          className={clsx(`${prefixCls}-content`, {
+            [`${prefixCls}-${size}-size`]: size,
+            [`${prefixCls}-fixed-header`]: scroll?.y,
+          })}
+          style={{ height: scroll?.y, width: scroll?.x }}
+        >
+          {table}
+        </div>
+      </div>
+    );
+  };
+
+  const renderFooter = () => {
+    return (
+      <Footer
+        prefixCls={prefixCls}
+        pagination={pagination as PaginationType}
+        footer={footer}
+        classNames={classNames}
+        styles={styles}
+      />
+    );
+  };
+
+  return (
+    <div
+      className={clsx(`${prefixCls}-box`, className)}
+      style={style}
+      ref={ref}
+      {...dataAttrs}
+    >
+      <Spin type="spin" className={`${prefixCls}-spin`} spinning={loading} mask>
+        {renderHeader()}
+        {renderTable()}
+        {renderFooter()}
+      </Spin>
+    </div>
+  );
+});
+
+export default Table;

package/src/Table/tbody/cell.tsx

@@ -0,0 +1,89 @@
+import clsx from 'clsx';
+import * as React from 'react';
+import { useContext } from 'react';
+import { WrapedColumnProps } from '../interface';
+import { TableCtx } from '../table';
+
+export interface BodyCellProps {
+  rowIndex: number;
+  column: WrapedColumnProps;
+  record: Record<string, any>;
+  fixedToLeft?: number;
+  current: number;
+  pageSize: number;
+  children?: (record: Record<string, any>, index: number) => React.ReactNode;
+}
+
+const TableCell: React.FC<BodyCellProps> = (props) => {
+  const { column, record, rowIndex } = props;
+  const {
+    fixed,
+    isFixedLeftLast,
+    isFixedRightFirst,
+    dataIndex,
+    align,
+    width,
+    style,
+    className,
+    styles,
+    classNames,
+    children,
+    onCell,
+    render,
+  } = column;
+
+  const { prefixCls } = useContext(TableCtx);
+
+  const renderChildren = () => {
+    if (render) {
+      return typeof render === 'function' ? render(record, rowIndex) : render;
+    }
+    if (typeof children === 'function') {
+      // @ts-ignore
+      return children(record, rowIndex);
+    }
+    return (
+      <div
+        className={clsx(`${prefixCls}-cell-inner`, classNames?.inner)}
+        style={styles?.inner}
+      >
+        {record[dataIndex || '']}
+      </div>
+    );
+  };
+
+  const cellProperty = (onCell?.(record, rowIndex) || {}) as any;
+
+  if (cellProperty.rowSpan === 0) {
+    return null;
+  }
+
+  const _children = renderChildren();
+
+  const getTdProps = () => {
+    const title = render ? undefined : record[dataIndex || ''];
+    const cls = clsx(
+      `${prefixCls}-cell`,
+      {
+        [`${prefixCls}-cell-fixed-${fixed}`]: fixed,
+        [`${prefixCls}-cell-fixed-${fixed}-first`]: isFixedRightFirst,
+        [`${prefixCls}-fixed-${fixed}-last`]: isFixedLeftLast,
+      },
+      className,
+    );
+
+    const styles = { ...style, width, maxWidth: width, textAlign: align };
+    const _title = typeof title === 'string' ? title : undefined;
+
+    return {
+      ...cellProperty,
+      className: cls,
+      style: styles,
+      title: _title,
+    };
+  };
+
+  return <td {...getTdProps()}>{_children}</td>;
+};
+
+export default TableCell;

package/src/Table/tbody/expand-row.tsx

@@ -0,0 +1,66 @@
+import { motion } from 'motion/react';
+import React, { useContext, useState } from 'react';
+import { ExpandableType } from '../interface';
+import { TableCtx } from '../table';
+
+export interface TableExpandRowProps extends ExpandableType {
+  record: Record<string, any>;
+  current: number;
+  pageSize: number;
+  index: number;
+  expanded?: boolean;
+}
+
+const TableExpandRow: React.FC<TableExpandRowProps> = (props) => {
+  const {
+    expandedRowRender,
+    rowExpandable,
+    record,
+    index,
+    current,
+    pageSize,
+    expanded,
+  } = props;
+
+  const { prefixCls } = useContext(TableCtx);
+  const [mounted, setMounted] = useState(expanded);
+
+  const expandable = rowExpandable?.(record);
+
+  if (expandable === false) {
+    return null;
+  }
+
+  if (!mounted && expanded) {
+    setMounted(true);
+  }
+
+  if (!mounted) {
+    return null;
+  }
+
+  const renderExpandRow = () => {
+    return typeof expandedRowRender === 'function'
+      ? expandedRowRender(record, index, {
+          order: (current - 1) * pageSize + index + 1,
+        })
+      : expandedRowRender;
+  };
+
+  return mounted ? (
+    <motion.tr
+      initial={{ opacity: 0, height: 0 }}
+      animate={
+        expanded ? { opacity: 1, height: 'auto' } : { opacity: 0, height: 0 }
+      }
+      exit={{ opacity: 0, height: 0 }}
+      transition={{ duration: 0.15 }}
+      className={`${prefixCls}-expanded-row`}
+      style={{ overflow: 'hidden', display: expanded ? 'table-row' : 'none' }}
+    >
+      <td colSpan={999}>{renderExpandRow()}</td>
+    </motion.tr>
+  ) : null;
+};
+
+export default TableExpandRow;