onekijs-ui 0.9.2 → 0.15.2

package/src/components/table/components/TableBodyComponent.tsx

@@ -0,0 +1,96 @@
+import { LoadingStatus, useLazyRef } from 'onekijs-framework';
+import React, { useCallback } from 'react';
+import { addClassname } from '../../../utils/style';
+import ListBodyComponent from '../../list/components/ListBodyComponent';
+import useListView from '../../list/hooks/useListView';
+import { ListItemProps } from '../../list/typings';
+import useTableColumns from '../hooks/useTableColumns';
+import { useTableConfig } from '../hooks/useTableConfig';
+import useTableService from '../hooks/useTableService';
+import { useTableState } from '../hooks/useTableState';
+import { TableBodyProps } from '../typings';
+import TableBodyRowComponent from './TableBodyRowComponent';
+import TableLoadingComponent from './TableLoadingComponent';
+import TableNotFoundComponent from './TableNotFoundComponent';
+
+const TableBodyComponent: React.FC<TableBodyProps> = ({ className, tableRef, contentRef }) => {
+  const service = useTableService();
+  const state = useTableState();
+  const {
+    height,
+    increment,
+    onRowClick,
+    onRowEnter,
+    onRowLeave,
+    preload,
+    RowComponent = TableBodyRowComponent,
+    rowClassName,
+    LoadingComponent = TableLoadingComponent,
+    NotFoundComponent = TableNotFoundComponent,
+  } = useTableConfig();
+
+  const itemHeight = useCallback(() => {
+    return 20;
+  }, []);
+  const { items, isVirtual, totalSize, virtualItems, measure } = useListView({
+    controller: service,
+    height: height,
+    ref: tableRef,
+    overscan: 10,
+    itemHeight,
+    preload,
+    increment,
+  });
+
+  const ItemComponentRef = useLazyRef<React.FC<ListItemProps<any, any>>>(() => {
+    const Component = (props: ListItemProps<any, any>) => {
+      const columns = useTableColumns();
+      const className =
+        typeof rowClassName === 'function' ? rowClassName(props.item, props.index, columns) : rowClassName;
+      return (
+        <RowComponent
+          {...props}
+          columns={columns}
+          className={className}
+          onExpand={measure}
+          onExpanding={measure}
+          onExpanded={measure}
+          onCollapse={measure}
+          onCollapsed={measure}
+          onCollapsing={measure}
+        />
+      );
+    };
+    Component.displayName = 'TableBodyRow';
+    return Component;
+  });
+
+  if (service.status === LoadingStatus.Loading) {
+    return <LoadingComponent />;
+  }
+
+  if (service.status === LoadingStatus.Loaded && items.length === 0 && NotFoundComponent) {
+    return <NotFoundComponent />;
+  }
+
+  return (
+    <ListBodyComponent
+      className={addClassname('o-table-body', className)}
+      height={height}
+      ItemComponent={ItemComponentRef.current}
+      items={items}
+      onItemSelect={onRowClick}
+      onItemHighlight={onRowEnter}
+      onItemUnhighlight={onRowLeave}
+      parentRef={tableRef}
+      bodyRef={contentRef}
+      service={service}
+      state={state}
+      totalSize={totalSize}
+      virtualItems={isVirtual ? virtualItems : undefined}
+    />
+  );
+};
+TableBodyComponent.displayName = 'TableBody';
+
+export default TableBodyComponent;

package/src/components/table/components/TableBodyRowComponent.tsx

@@ -0,0 +1,125 @@
+import { isItemFetching } from 'onekijs-framework';
+import React, { FC, useRef, useState } from 'react';
+import { CSSTransition } from 'react-transition-group';
+import { addClassname } from '../../../utils/style';
+import { useTableConfig } from '../hooks/useTableConfig';
+import { TableBodyRowProps } from '../typings';
+import TableBodyCellComponent from './TableBodyCellComponent';
+import TableLoadingRowComponent from './TableLoadingRowComponent';
+
+const timeout = 500;
+
+const TableBodyRowComponent: FC<TableBodyRowProps> = ({
+  item,
+  index,
+  columns,
+  CellComponent = TableBodyCellComponent,
+  className,
+  onExpand,
+  onExpanding,
+  onExpanded,
+  onCollapse,
+  onCollapsing,
+  onCollapsed,
+}) => {
+  const [hover, setHover] = useState(false);
+  const {
+    highlightRow,
+    stripRows,
+    LoadingRowComponent = TableLoadingRowComponent,
+    ExpandedComponent,
+  } = useTableConfig();
+
+  const expandedHeightRef = useRef<number>(0);
+
+  const onExiting = (node: HTMLElement) => {
+    node.style.opacity = '0';
+    onCollapsing && onCollapsing(item, index);
+  };
+
+  const onEntering = (node: HTMLElement) => {
+    expandedHeightRef.current = node.getBoundingClientRect().height;
+    // node.style.height = '0px';
+    node.style.opacity = '0';
+    onExpanding && onExpanding(item, index);
+    setTimeout(() => {
+      // node.style.height = `${expandedHeightRef.current}px`;
+      node.style.opacity = '1';
+      node.style.transition = `opacity ${timeout}ms ease-out`;
+    }, 0);
+    // for (let i = 0; i <= timeout; i += 20) {
+    //   setTimeout(() => onExpanding && onExpanding(item, index), i);
+    // }
+  };
+
+  if (item === undefined) {
+    return null;
+  }
+
+  const rowClassName = addClassname(
+    `o-table-body-row${hover ? ' o-table-body-row-hover' : ''}${
+      stripRows ? ` o-table-body-row-${index % 2 === 0 ? 'even' : 'odd'}` : ''
+    }`,
+    className,
+  );
+
+  const rowContainerClassName = `o-table-body-row-container${item.expanded ? ' o-table-body-row-expanded' : ''}`;
+
+  if (isItemFetching(item)) {
+    return (
+      <div className={rowContainerClassName}>
+        <div className="o-table-body-row">
+          <LoadingRowComponent />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={rowContainerClassName}>
+      <div
+        className={rowClassName}
+        onMouseEnter={highlightRow ? () => setHover(true) : undefined}
+        onMouseLeave={highlightRow ? () => setHover(false) : undefined}
+        style={{ display: 'flex' }}
+      >
+        {columns.map((column, colIndex) => {
+          const cellClassName =
+            typeof column.className === 'function' ? column.className(item, column, index) : column.className;
+          return (
+            <CellComponent
+              column={column}
+              colIndex={colIndex}
+              rowIndex={index}
+              rowId={item.id}
+              item={item}
+              key={`cell-${colIndex}`}
+              className={cellClassName}
+            />
+          );
+        })}
+      </div>
+      <CSSTransition
+        in={item.expanded}
+        classNames="o-table-body-row-expanded-content"
+        timeout={timeout}
+        mountOnEnter={true}
+        appear={false}
+        exit={false}
+        unmountOnExit={true}
+        onEnter={() => onExpand && onExpand(item, index)}
+        onEntering={onEntering}
+        onEntered={() => onExpanded && onExpanded(item, index)}
+        onExiting={onExiting}
+        onExit={() => onCollapse && onCollapse(item, index)}
+        onExited={() => onCollapsed && onCollapsed(item, index)}
+      >
+        <div className="o-table-body-row-expanded-content">
+          {ExpandedComponent && <ExpandedComponent item={item} rowIndex={index} rowId={item.id} />}
+        </div>
+      </CSSTransition>
+    </div>
+  );
+};
+
+export default TableBodyRowComponent;

package/src/components/table/components/TableComponent.tsx

@@ -0,0 +1,17 @@
+import { isCollection } from 'onekijs-framework';
+import React from 'react';
+import { TableProps } from '../typings';
+import ArrayTableComponent from './ArrayTableComponent';
+import ControllerTableComponent from './ControllerTableComponent';
+
+const TableComponent: React.FC<TableProps> = React.memo((props) => {
+  if (isCollection(props.controller)) {
+    return <ControllerTableComponent {...props} controller={props.controller} />;
+  } else {
+    return <ArrayTableComponent {...props} dataSource={props.dataSource || []} columns={props.columns || []} />;
+  }
+});
+
+TableComponent.displayName = 'TableComponent';
+
+export default TableComponent;

package/src/components/table/components/TableFooterCellComponent.tsx

@@ -0,0 +1,28 @@
+import React, { FC, useEffect, useRef } from 'react';
+import { addClassname } from '../../../utils/style';
+import { useTableConfig } from '../hooks/useTableConfig';
+import useTableService from '../hooks/useTableService';
+import { TableFooterCellProps } from '../typings';
+import { getCellWidth } from '../util';
+
+const TableFooterCellComponent: FC<TableFooterCellProps> = React.memo(({ column }) => {
+  const service = useTableService();
+  const { fit, grow } = useTableConfig();
+  const ref = useRef<HTMLDivElement>(null);
+  const initializedRef = useRef<boolean>(false);
+
+  const className =
+    typeof column.footerClassName === 'function' ? column.footerClassName(column) : column.footerClassName;
+
+  useEffect(() => {
+    if (!initializedRef.current && ref.current !== null) {
+      service.initCell('footer', column.id, ref);
+    }
+  });
+
+  return <div className={addClassname('o-table-footer-cell', className)} style={getCellWidth(column, fit, grow)}></div>;
+});
+
+TableFooterCellComponent.displayName = 'TableFooterCell';
+
+export default TableFooterCellComponent;

package/src/components/table/components/TableFooterComponent.tsx

@@ -0,0 +1,34 @@
+import React, { CSSProperties } from 'react';
+import { addClassname } from '../../../utils/style';
+import { TableFooterProps } from '../typings';
+import TableFooterCellComponent from './TableFooterCellComponent';
+
+const TableFooterComponent: React.FC<TableFooterProps> = ({ className, columns }) => {
+  const footerStyle: CSSProperties = {
+    display: 'flex',
+  };
+
+  if (true) {
+    //TODO change to fixFooter
+    footerStyle.position = 'sticky';
+    footerStyle.bottom = 0;
+    footerStyle.zIndex = 1;
+  }
+
+  return (
+    <div className={addClassname('o-table-footer', className)} style={footerStyle}>
+      {columns.map((column, colIndex) => {
+        const cellClassName =
+          typeof column.footerClassName === 'function' ? column.footerClassName(column) : column.footerClassName;
+        const Component = column.FooterComponent || TableFooterCellComponent;
+        return (
+          <Component column={column} colIndex={colIndex} className={cellClassName} key={`header-cell-${colIndex}`} />
+        );
+      })}
+    </div>
+  );
+};
+
+TableFooterComponent.displayName = 'TableFooter';
+
+export default TableFooterComponent;

package/src/components/table/components/TableHeaderComponent.tsx

@@ -0,0 +1,81 @@
+import React, { CSSProperties } from 'react';
+import { addClassname } from '../../../utils/style';
+import { TableHeaderProps } from '../typings';
+import TableHeaderTitleComponent from './TableHeaderTitleComponent';
+import TableHeaderFilterComponent from './TableHeaderFilterComponent';
+import useTableService from '../hooks/useTableService';
+import { useTableConfig } from '../hooks/useTableConfig';
+
+const TableHeaderComponent: React.FC<TableHeaderProps> = ({ columns, className }) => {
+  const headerStyle: CSSProperties = {
+    display: 'flex',
+  };
+
+  const service = useTableService();
+  const { fixHeader = true, filterable, sortable, height } = useTableConfig();
+
+  if (fixHeader && height) {
+    headerStyle.position = 'sticky';
+    headerStyle.top = 0;
+    headerStyle.zIndex = 1;
+  }
+
+  const hasFilter: boolean = columns
+    .map((c) => c.filterable || (c.filterable === undefined && filterable !== false))
+    .reduce((accumulator, filterable) => accumulator || filterable, false);
+
+  return (
+    <div
+      className={addClassname(`o-table-header${hasFilter ? ' o-table-header-filterable' : ''}`, className)}
+      style={headerStyle}
+    >
+      <div className="o-table-header-row-title">
+        {columns.map((column, colIndex) => {
+          const isFilterable = column.filterable || (column.filterable === undefined && filterable !== false);
+          const isSortable = column.sortable || (column.sortable === undefined && sortable !== false);
+          const filter = service.getFilterById(column.id);
+          const sort = service.getSortById(column.id);
+          const cellClassName =
+            typeof column.headerClassName === 'function' ? column.headerClassName(column) : column.headerClassName;
+          return (
+            <TableHeaderTitleComponent
+              column={column}
+              filter={filter}
+              filterable={isFilterable}
+              sort={sort}
+              sortable={isSortable}
+              colIndex={colIndex}
+              key={`header-cell-title-${colIndex}`}
+              className={cellClassName}
+            />
+          );
+        })}
+      </div>
+      {hasFilter && (
+        <div className="o-table-header-row-filter">
+          {columns.map((column, colIndex) => {
+            const isFilterable = column.filterable || (column.filterable === undefined && filterable !== false);
+            const isSortable = column.sortable || (column.sortable === undefined && sortable !== false);
+            const filter = service.getFilterById(column.id);
+            const sort = service.getSortById(column.id);
+            return (
+              <TableHeaderFilterComponent
+                column={column}
+                filter={filter}
+                filterable={isFilterable}
+                sort={sort}
+                sortable={isSortable}
+                colIndex={colIndex}
+                key={`header-cell-filter-${colIndex}`}
+              />
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};
+
+TableHeaderComponent.displayName = 'TableHeader';
+
+export default TableHeaderComponent;

package/src/components/table/components/TableHeaderFilterComponent.tsx

@@ -0,0 +1,31 @@
+import React, { FC, useEffect, useRef } from 'react';
+import { TableHeaderCellProps } from '../typings';
+import useTableService from '../hooks/useTableService';
+import { getCellWidth } from '../util';
+import TableInputFilterComponent from './filters/TableInputFilterComponent';
+import { useTableConfig } from '../hooks/useTableConfig';
+
+const TableHeaderFilterComponent: FC<TableHeaderCellProps> = React.memo((props) => {
+  const { column, filterable } = props;
+  const service = useTableService();
+  const { fit, grow } = useTableConfig();
+  const ref = useRef<HTMLDivElement>(null);
+  const initializedRef = useRef<boolean>(false);
+  const Component = column.FilterComponent || TableInputFilterComponent;
+
+  useEffect(() => {
+    if (!initializedRef.current && ref.current !== null) {
+      service.initCell('header-filter', column.id, ref);
+    }
+  });
+
+  return (
+    <div className="o-table-header-filter" style={getCellWidth(column, fit, grow)} ref={ref}>
+      {filterable && <Component {...props} />}
+    </div>
+  );
+});
+
+TableHeaderFilterComponent.displayName = 'TableHeaderFilter';
+
+export default TableHeaderFilterComponent;

package/src/components/table/components/TableHeaderTitleComponent.tsx

@@ -0,0 +1,62 @@
+import React, { FC, useEffect, useRef } from 'react';
+import { addClassname } from '../../../utils/style';
+import { useTableConfig } from '../hooks/useTableConfig';
+import useTableService from '../hooks/useTableService';
+import { TableHeaderCellProps } from '../typings';
+import { getCellWidth } from '../util';
+import TableSortComponent from './TableSortComponent';
+
+export const DefaultTableHeaderTitleComponent: FC<TableHeaderCellProps> = ({ column, sort }) => {
+  const service = useTableService();
+  const { sortable } = useTableConfig();
+  const isSortable = column.sortable || (column.sortable === undefined && sortable !== false);
+  const onSort = () => {
+    if (isSortable) {
+      service.sortBy({
+        id: column.id,
+        field: column.id,
+        dir: sort && sort.dir !== 'desc' ? 'desc' : 'asc',
+      });
+    }
+  };
+
+  return (
+    <div onClick={isSortable ? onSort : undefined} style={{ display: 'flex', alignItems: 'center' }}>
+      <span className="o-table-header-title">{column.title}</span>
+      {isSortable && <TableSortComponent sort={sort} column={column} />}
+    </div>
+  );
+};
+
+const TableHeaderTitleComponent: FC<TableHeaderCellProps> = React.memo((props) => {
+  const { column, sortable } = props;
+  const service = useTableService();
+  const { fit, grow } = useTableConfig();
+  const ref = useRef<HTMLDivElement>(null);
+  const initializedRef = useRef<boolean>(false);
+
+  const className =
+    typeof column.headerClassName === 'function' ? column.headerClassName(column) : column.headerClassName;
+
+  const Component = column.TitleComponent || DefaultTableHeaderTitleComponent;
+
+  useEffect(() => {
+    if (!initializedRef.current && ref.current !== null) {
+      service.initCell('header-title', column.id, ref);
+    }
+  });
+
+  return (
+    <div
+      className={addClassname(`o-table-header-title-container${sortable ? ' o-table-header-sortable' : ''}`, className)}
+      style={getCellWidth(column, fit, grow)}
+      ref={ref}
+    >
+      <Component {...props} />
+    </div>
+  );
+});
+
+TableHeaderTitleComponent.displayName = 'TableHeaderTitle';
+
+export default TableHeaderTitleComponent;

package/src/components/table/components/TableLoadingComponent.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import styled from 'styled-components';
+import LoadingIcon from '../../icon/LoadingIcon';
+
+const TableLoadingComponent: React.FC<React.InputHTMLAttributes<HTMLDivElement>> = (props) => {
+  return (
+    <div {...props}>
+      <LoadingIcon width="50px" height="50px" />
+    </div>
+  );
+};
+
+export default styled(TableLoadingComponent)`
+  height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;

package/src/components/table/components/TableLoadingRowComponent.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { minHeight, width } from '../../../styles/size';
+import { ComponentStyle } from '../../../styles/typings';
+import LoadingItem from '../../list/components/LoadingItem';
+
+const TableLoadingRowComponent: React.FC<React.InputHTMLAttributes<HTMLDivElement>> = (props) => {
+  return <LoadingItem {...props} />;
+};
+
+const style: ComponentStyle<React.InputHTMLAttributes<HTMLDivElement>> = ({ theme }) => {
+  const t = theme.table;
+  return css`
+    ${minHeight(t.loadingRowMinHeight)}
+    ${width('full')}
+  `;
+};
+
+export default styled(TableLoadingRowComponent)`
+  ${style}
+`;

package/src/components/table/components/TableNotFoundComponent.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import CloseAllIcon from '../../icon/CloseAllIcon';
+import { TableNotFoundProps } from '../typings';
+
+const TableNotFoundComponent: React.FC<TableNotFoundProps> = ({ text = 'No data' }) => {
+  return (
+    <div className="o-table-not-found">
+      <CloseAllIcon width="64px" height="64px" />
+      <span>{text}</span>
+    </div>
+  );
+};
+
+export default TableNotFoundComponent;

package/src/components/table/components/TableSortComponent.tsx

@@ -0,0 +1,29 @@
+import React, { FC } from 'react';
+import { TableSortProps } from '../typings';
+
+const TableSortComponent: FC<TableSortProps> = ({ sort }) => {
+  const style: React.CSSProperties = sort === undefined ? { visibility: 'hidden' } : {};
+  return (
+    <div className="o-table-sort-container" style={style}>
+      <button type="button" tabIndex={-1} className="o-table-sort-icon">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="100%"
+          height="100%"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          transform={`rotate(${sort && sort.dir === 'desc' ? '0' : '180'})`}
+          className="o-table-sort-svg"
+        >
+          <polyline points="18 15 12 9 6 15"></polyline>
+        </svg>
+      </button>
+    </div>
+  );
+};
+
+export default TableSortComponent;

package/src/components/table/components/cells/CheckboxCellComponent.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { addClassname } from '../../../../utils/style';
+import FormCheckbox from '../../../checkbox/FormCheckbox';
+import useFormTableContext from '../../hooks/useFormTableContext';
+import { TableBodyCellProps, UseCheckboxColumnOptions } from '../../typings';
+
+const CheckboxCellComponent = (options: UseCheckboxColumnOptions<any, any>): React.FC<TableBodyCellProps<any, any>> => {
+  const CheckboxCellComponent: React.FC<TableBodyCellProps<any, any>> = ({ item, column, rowIndex }) => {
+    const { tableName } = useFormTableContext();
+    // const [validators] = extractValidators(options);
+    // const field = useField(`${tableName}.${rowIndex}.${column.id}`, validators, {
+    //   defaultValue: options.defaultValue ? options.defaultValue : false,
+    // });
+    // const validation = useValidation(`${tableName}.${rowIndex}.${column.id}`);
+    // const status = validation?.status;
+    // const message = validation?.message;
+
+    // return (
+    //   <>
+    //     <Checkbox {...options} {...field} className="o-table-checkbox" status={validation.status} />
+    //     {message && <FieldDescription content={message} className={`o-field-description-${status.toLowerCase()}`} />}
+    //   </>
+    // );
+
+    const { size, ...checkboxOptions } = options;
+
+    const className =
+      typeof options.className === 'function' ? options.className(item, column, rowIndex) : options.className;
+    return (
+      <FormCheckbox
+        layout="table"
+        {...checkboxOptions}
+        name={`${tableName}.${rowIndex}.${column.id}`}
+        className={addClassname('o-table-checkbox', className)}
+      />
+    );
+  };
+  CheckboxCellComponent.displayName = 'CheckboxCellComponent';
+  return CheckboxCellComponent;
+};
+
+export default CheckboxCellComponent;

package/src/components/table/components/cells/DefaultCellComponent.tsx

@@ -0,0 +1,9 @@
+import { get } from 'onekijs-framework';
+import React, { FC } from 'react';
+import { TableBodyCellProps } from '../../typings';
+
+const DefaultCellComponent: FC<TableBodyCellProps> = ({ item, column }) => {
+  return <>{get(item, `data.${column.id}`)}</>;
+};
+
+export default DefaultCellComponent;

package/src/components/table/components/cells/ExpandedCellComponent.tsx

@@ -0,0 +1,16 @@
+import React, { FC } from 'react';
+import { addClassname } from '../../../../utils/style';
+import TogglerIcon from '../../../icon/TogglerIcon';
+import useTableService from '../../hooks/useTableService';
+import { TableBodyCellProps } from '../../typings';
+
+const ExpandedCellComponent: FC<TableBodyCellProps> = ({ item, className }) => {
+  const service = useTableService();
+  return (
+    <div className={addClassname('o-table-cell-expander-content', className)} onClick={() => service.toggle(item)}>
+      <TogglerIcon open={item.expanded} model="plus" color="primary" />
+    </div>
+  );
+};
+
+export default ExpandedCellComponent;

package/src/components/table/components/cells/InputCellComponent.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { addClassname } from '../../../../utils/style';
+import FormInput from '../../../input/FormInput';
+import useFormTableContext from '../../hooks/useFormTableContext';
+import { TableBodyCellProps, UseInputColumnOptions } from '../../typings';
+
+const InputCellComponent = (options: UseInputColumnOptions<any, any>): React.FC<TableBodyCellProps<any, any>> => {
+  const InputCellComponent: React.FC<TableBodyCellProps<any, any>> = ({ item, column, rowIndex }) => {
+    const { tableName } = useFormTableContext();
+
+    const className =
+      typeof options.className === 'function' ? options.className(item, column, rowIndex) : options.className;
+    return (
+      <FormInput
+        size="small"
+        layout="table"
+        {...options}
+        name={`${tableName}.${rowIndex}.${column.id}`}
+        className={addClassname('o-table-input', className)}
+      />
+    );
+  };
+  InputCellComponent.displayName = 'InputCellComponent';
+  return InputCellComponent;
+};
+
+export default InputCellComponent;