@rowsncolumns/grid 9.0.4 → 13.2.32

package/src/hooks/useFilter.tsx

@@ -1,233 +0,0 @@
-import React, { useMemo, useState, useCallback } from "react";
-import {
-  CellInterface,
-  GridRef,
-  CellPosition,
-  AreaProps,
-  AreaStyle,
-} from "./../Grid";
-import { isNull } from "../helpers";
-
-export interface FilterView {
-  bounds: AreaProps;
-  filters?: Filter;
-  style?: AreaStyle;
-  title?: string;
-}
-
-export type Filter = Record<string, FilterDefinition>;
-export type FilterDefinition<T = string | number> = {
-  condition?: FilterConditionDefinition<T>;
-  equals?: T[];
-  sort?: SortDirection;
-};
-export type FilterOperators = ContainsTextOperators | DataValidationOperator;
-export type FilterConditionDefinition<T = string | number> = {
-  operator?: FilterOperators;
-  values?: T[];
-};
-export type SortDirection = "asc" | "desc";
-export type DataValidationOperator =
-  | "isEmpty"
-  | "notIsEmpty"
-  | "between"
-  | "notBetween"
-  | "equal"
-  | "notEqual"
-  | "greaterThan"
-  | "lessThan"
-  | "greaterThanOrEqual"
-  | "lessThanOrEqual";
-
-export type ContainsTextOperators =
-  | "containsText"
-  | "notContainsText"
-  | "containsBlanks"
-  | "notContainsBlanks"
-  | "containsErrors"
-  | "notContainsErrors"
-  | "startsWithText"
-  | "endsWithText"
-  | "equalText";
-
-export interface FilterProps {
-  /**
-   * Returns filter component
-   */
-  getFilterComponent?: (cell: CellInterface | null) => React.ElementType | null;
-  /**
-   * Access grid methods
-   */
-  gridRef: React.MutableRefObject<GridRef | null>;
-  /**
-   * Get value of a cell
-   */
-  getValue: (cell: CellInterface) => any;
-  /**
-   * Width of the filter panel
-   */
-  width?: number;
-  offset?: number;
-  frozenRows?: number;
-  frozenColumns?: number;
-}
-
-export interface FilterResults {
-  /**
-   * Component to render filter
-   */
-  filterComponent: React.ReactNode;
-  /**
-   * Enable filter
-   */
-  showFilter: (
-    cell: CellInterface,
-    index: number,
-    filterView: FilterView,
-    filter?: FilterDefinition
-  ) => void;
-  /**
-   * Hide filter component
-   */
-  hideFilter: () => void;
-}
-
-/* Default filter component */
-const getDefaultFilerComponent = (cell: CellInterface | null) => null;
-
-export interface FilterState {
-  filterView: FilterView;
-  filter?: FilterDefinition;
-  index: number;
-}
-
-/**
- * Use filter hook
- * @param param0
- */
-const useFilter = ({
-  getFilterComponent = getDefaultFilerComponent,
-  gridRef,
-  width = 220,
-  offset = 20,
-  getValue,
-  frozenRows = 0,
-  frozenColumns = 0,
-}: FilterProps): FilterResults => {
-  const [filterCell, setFilterCell] = useState<CellInterface | null>(null);
-  const [isFilterVisible, setIsFilterVisible] = useState(false);
-  const [currentFilter, setCurrentFilter] = useState<FilterState | null>(null);
-  const [position, setPosition] = useState<CellPosition>({
-    x: 0,
-    y: 0,
-  });
-  const FilterComponent = useMemo(() => {
-    return getFilterComponent(filterCell);
-  }, [filterCell]);
-
-  /**
-   * Show filter panel
-   */
-  const handleShowFilter = useCallback(
-    (
-      coords: CellInterface,
-      index: number,
-      filterView: FilterView,
-      filter?: FilterDefinition
-    ) => {
-      if (!gridRef.current) return;
-      /* Get actual coords for merged cells */
-      coords = gridRef.current.getActualCellCoords(coords);
-
-      /* Get scroll position */
-      const scrollPosition = gridRef.current.getScrollPosition();
-
-      /* Get cell position */
-      const pos = gridRef.current.getCellOffsetFromCoords(coords);
-
-      /* Check if its frozen */
-      const isFrozenColumn = coords.columnIndex < frozenColumns;
-      const isFrozenRow = coords.rowIndex < frozenRows;
-
-      /* Set cell position */
-      setPosition(() => {
-        const left = pos.x as number;
-        const top = pos.y as number;
-        const cellWidth = pos.width as number;
-        return {
-          x:
-            left +
-              cellWidth -
-              (isFrozenColumn ? 0 : scrollPosition.scrollLeft) <
-            width
-              ? left +
-                cellWidth -
-                offset -
-                (isFrozenColumn ? 0 : scrollPosition.scrollLeft)
-              : left +
-                cellWidth -
-                (isFrozenColumn ? 0 : scrollPosition.scrollLeft) -
-                width,
-          y: top - (isFrozenRow ? 0 : scrollPosition.scrollTop) + offset,
-        };
-      });
-
-      /* Set filter cell */
-      setFilterCell(coords);
-
-      /* set current filter */
-      setCurrentFilter({ filter, filterView, index });
-
-      /* Show filter */
-      showFilter();
-    },
-    [frozenRows, frozenColumns]
-  );
-
-  const hideFilter = useCallback(() => {
-    setIsFilterVisible(false);
-  }, []);
-
-  const showFilter = useCallback(() => {
-    setIsFilterVisible(true);
-  }, []);
-
-  const values = useMemo(() => {
-    if (!filterCell || !currentFilter) return [];
-    const { filterView } = currentFilter;
-    const { columnIndex } = filterCell;
-    const { bounds } = filterView;
-    const filterValues = new Set();
-    for (let i = bounds.top + 1; i <= bounds.bottom; i++) {
-      const cell = { rowIndex: i, columnIndex };
-      const text = getValue(cell);
-      const value = isNull(text) ? "" : text;
-      filterValues.add(value);
-    }
-    return Array.from(filterValues);
-  }, [filterCell, currentFilter]);
-
-  const filterComponent =
-    isFilterVisible && FilterComponent ? (
-      <FilterComponent
-        position={position}
-        width={width}
-        values={values}
-        index={currentFilter?.index}
-        filterView={currentFilter?.filterView}
-        filter={currentFilter?.filter}
-        columnIndex={filterCell?.columnIndex}
-        rowIndex={filterCell?.rowIndex}
-        onRequestClose={hideFilter}
-        onRequestShow={handleShowFilter}
-      />
-    ) : null;
-
-  return {
-    filterComponent,
-    showFilter: handleShowFilter,
-    hideFilter,
-  };
-};
-
-export default useFilter;

package/src/hooks/useImage.ts

@@ -1,57 +0,0 @@
-import { useState, useEffect } from "react";
-
-export interface UseImageProps {
-  url: string;
-  crossOrigin?: string;
-}
-
-export interface UseImageResults {
-  image?: HTMLImageElement;
-  width: number;
-  height: number;
-  status: string;
-}
-
-const useImage = ({ url, crossOrigin }: UseImageProps) => {
-  const [state, setState] = useState<UseImageResults>(() => ({
-    image: undefined,
-    status: "loading",
-    width: 0,
-    height: 0,
-  }));
-
-  useEffect(() => {
-    if (!url) return;
-    var img = new Image();
-
-    function onload() {
-      setState({
-        image: img,
-        height: img.height,
-        width: img.width,
-        status: "loaded",
-      });
-    }
-    function onerror() {
-      setState((prev) => ({
-        ...prev,
-        image: undefined,
-        status: "failed",
-      }));
-    }
-    img.addEventListener("load", onload);
-    img.addEventListener("error", onerror);
-
-    crossOrigin && (img.crossOrigin = crossOrigin);
-    img.src = url;
-
-    return () => {
-      img.removeEventListener("load", onload);
-      img.removeEventListener("error", onerror);
-    };
-  }, [url, crossOrigin]);
-
-  return state;
-};
-
-export default useImage;

package/src/hooks/usePagination.tsx

@@ -1,153 +0,0 @@
-import React, { useState, useEffect } from "react";
-
-export interface PaginationProps {
-  /**
-   * No of items in each page
-   */
-  pageSize: number;
-  /**
-   * Initial page index. Start from 1
-   */
-  initialPage?: number;
-  /**
-   * Total number of rows
-   */
-  total: number;
-  /**
-   * Callback when page is changed
-   */
-  onChange?: (page: number) => void;
-  /**
-   * Pagination Component
-   */
-  component?:
-    | React.FC<PaginationComponentProps>
-    | React.ComponentClass<PaginationComponentProps>;
-}
-
-export type PaginationComponentProps = Omit<
-  PaginationResults,
-  "paginationComponent"
->;
-
-export interface PaginationResults {
-  /**
-   * Current page number
-   */
-  currentPage: number;
-  /**
-   * Total pages
-   */
-  totalPages: number;
-  /**
-   * No of items in each page
-   */
-  pageSize: number;
-  /**
-   * Pagination component
-   */
-  paginationComponent: React.ReactNode;
-  /**
-   * Navigate to next page
-   */
-  nextPage: () => void;
-  /**
-   * Navigate to prev page
-   */
-  prevPage: () => void;
-  /**
-   * Navigate to first page
-   */
-  goToFirst: () => void;
-  /**
-   * Navigate to last page
-   */
-  goToLast: () => void;
-  /**
-   * Navigate to specific page
-   */
-  goToPage: (page: number) => void;
-}
-
-/**
- * Pagination hook
- * @param props
- */
-const usePagination = (props: PaginationProps): PaginationResults => {
-  const {
-    initialPage = 1,
-    pageSize = 10,
-    total = 0,
-    onChange,
-    component = PaginationComponent,
-  } = props ?? {};
-  const [currentPage, setCurrentPage] = useState<number>(initialPage);
-  const totalPages = Math.ceil(total / pageSize);
-  const nextPage = () =>
-    setCurrentPage((prev) => Math.min(prev + 1, totalPages));
-  const prevPage = () => setCurrentPage((prev) => Math.max(prev - 1, 1));
-  const goToFirst = () => setCurrentPage(1);
-  const goToLast = () => setCurrentPage(totalPages);
-  const goToPage = (page: number) => setCurrentPage(page);
-
-  useEffect(() => {
-    onChange && onChange(currentPage);
-  }, [currentPage]);
-
-  const pageProps = {
-    currentPage,
-    totalPages,
-    nextPage,
-    prevPage,
-    goToFirst,
-    goToLast,
-    goToPage,
-    pageSize,
-  };
-
-  const paginationComponent = React.createElement(component, pageProps);
-
-  return {
-    paginationComponent,
-    ...pageProps,
-  };
-};
-
-const PaginationComponent: React.FC<PaginationComponentProps> = ({
-  currentPage,
-  goToFirst,
-  goToLast,
-  goToPage,
-  totalPages,
-  nextPage,
-  prevPage,
-}) => {
-  const pages = [];
-  for (let i = 1; i <= totalPages; i++) {
-    const isActive = currentPage === i;
-    pages.push(
-      <button onClick={() => goToPage(i)}>
-        {isActive ? <strong>{i}</strong> : i}
-      </button>
-    );
-  }
-  return (
-    <div>
-      <button onClick={goToFirst} disabled={currentPage === 1}>
-        First page
-      </button>
-      <button onClick={prevPage} disabled={currentPage === 1}>
-        Prev page
-      </button>
-      {pages}
-      <button onClick={nextPage} disabled={currentPage === totalPages}>
-        Next page
-      </button>
-      <button onClick={goToLast} disabled={currentPage === totalPages}>
-        Last page
-      </button>
-    </div>
-  );
-};
-
-export default usePagination;