@cashub/ui-elv 1.0.1 → 1.0.3

package/esm/table/GridTable.js

@@ -0,0 +1,329 @@
+import { useRef, useState, useMemo, useCallback, useEffect } from 'react';
+import styled from 'styled-components';
+import { useCalculateDataRange, useGenerateSort } from './hooks';
+import scrollbar from '../styles/mixin/scrollbar';
+import TH from './subComponent/GridTableHeadCell';
+import Resizer from './subComponent/Resizer';
+import GridTableFooter from './subComponent/GridTableFooter';
+import TableFooterInfo from './subComponent/TableFooterInfo';
+import TableFooterPager from './subComponent/TableFooterPager';
+import Paginate from '../paginate/Paginate';
+import Select from '../select/Select';
+import Popover from '../popover/Popover';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const GridTable = _ref => {
+  let {
+    columns,
+    data,
+    currentPage,
+    limit,
+    total,
+    onPageChange,
+    onLimitChange,
+    sortColumn,
+    sortType,
+    onSortChange,
+    backgroundReverse,
+    translation
+  } = _ref;
+  const wrapperRef = useRef(null);
+  const tableRef = useRef(null);
+  const {
+    start,
+    end
+  } = useCalculateDataRange(currentPage, limit, total);
+  const [tableWidth, setTableWidth] = useState(0);
+  const [restWidth, setRestWidth] = useState(0);
+  const texts = useMemo(() => {
+    const defaultTexts = {
+      info: 'Showing _START_ to _END_ of _TOTAL_ entries',
+      empty: 'No data available in table'
+    };
+    return {
+      ...defaultTexts,
+      ...translation
+    };
+  }, [translation]);
+  const handleSortChange = useCallback(columnName => {
+    if (onSortChange) {
+      onSortChange(columnName);
+    }
+  }, [onSortChange]);
+  const handleResize = useCallback(() => {
+    setTableWidth(tableRef.current.offsetWidth);
+    setRestWidth(previousWidth => {
+      const containerWidth = wrapperRef.current.offsetWidth;
+      const tableWidth = tableRef.current.offsetWidth - previousWidth;
+      if (containerWidth > tableWidth) {
+        return containerWidth - tableWidth;
+      }
+      return 0;
+    });
+  }, []);
+  const handleScroll = useCallback(event => {
+    const {
+      target
+    } = event;
+    wrapperRef.current.scrollLeft = target.scrollLeft;
+  }, []);
+  const showFullValue = useCallback(event => {
+    let {
+      id
+    } = event.target;
+    if (!id) {
+      ({
+        id
+      } = event.currentTarget);
+      event.target.id = id;
+    }
+    const {
+      offsetWidth,
+      scrollWidth,
+      innerText
+    } = event.target;
+    if (scrollWidth >= offsetWidth && innerText) {
+      event.stopPropagation();
+      Popover({
+        id,
+        target: event.target,
+        content: innerText,
+        boundary: tableRef.current
+      });
+    }
+  }, []);
+
+  // generate sort icon area
+  const generateSort = useGenerateSort(sortColumn, sortType);
+  const tableHeads = useMemo(() => {
+    const tableHeads = columns.map((column, index) => {
+      const {
+        title,
+        fieldName,
+        width,
+        sortable,
+        align
+      } = column;
+      return /*#__PURE__*/_jsxs(TH, {
+        width: width,
+        align: align,
+        backgroundReverse: backgroundReverse,
+        sortable: sortable,
+        onClick: () => {
+          sortable && handleSortChange(fieldName);
+        },
+        children: [/*#__PURE__*/_jsxs("div", {
+          children: [/*#__PURE__*/_jsx("span", {
+            id: fieldName,
+            onClick: showFullValue,
+            children: title
+          }), sortable && generateSort(fieldName)]
+        }), /*#__PURE__*/_jsx(Resizer, {
+          onResize: handleResize
+        })]
+      }, `TH${index}`);
+    });
+    tableHeads.push(/*#__PURE__*/_jsx(TH, {
+      role: "presentation",
+      width: restWidth,
+      backgroundReverse: backgroundReverse
+    }, 'rest'));
+    return tableHeads;
+  }, [backgroundReverse, columns, handleSortChange, generateSort, showFullValue, handleResize, restWidth]);
+  const tableRows = useMemo(() => {
+    if (data.length === 0) {
+      return null;
+    }
+    return data.map((row, rowIndex) => {
+      const tds = columns.map((column, columnIndex) => {
+        const {
+          title,
+          fieldName,
+          render,
+          custom,
+          ...props
+        } = column;
+        const key = rowIndex + columnIndex.toString();
+        let renderedData = null;
+        if (custom && render) {
+          // call render function to get custom data(fully)
+          renderedData = render(row);
+        } else {
+          // call render function to get custom data(part)
+          renderedData = /*#__PURE__*/_jsx("span", {
+            id: key,
+            onClick: showFullValue,
+            children: render ? render(row[fieldName], row) : String(row[fieldName])
+          });
+        }
+        return /*#__PURE__*/_jsx(TD, {
+          "data-label": title,
+          backgroundReverse: backgroundReverse,
+          ...props,
+          children: renderedData
+        }, columnIndex);
+      });
+      tds.push(/*#__PURE__*/_jsx(TD, {
+        role: "presentation",
+        backgroundReverse: backgroundReverse
+      }, 'rest'));
+      return /*#__PURE__*/_jsx("tr", {
+        children: tds
+      }, rowIndex);
+    });
+  }, [backgroundReverse, columns, data, showFullValue]);
+  const generateEmptyMessage = useCallback(() => {
+    return /*#__PURE__*/_jsx("tr", {
+      children: /*#__PURE__*/_jsx(TD, {
+        center: true,
+        colSpan: columns.length,
+        backgroundReverse: backgroundReverse,
+        children: texts.empty
+      })
+    });
+  }, [backgroundReverse, columns, texts]);
+  useEffect(() => {
+    handleResize();
+  }, [columns, handleResize]);
+  useEffect(() => {
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [handleResize]);
+  useEffect(() => {
+    if (tableRef.current) {
+      setTableWidth(tableRef.current.offsetWidth);
+    }
+  }, [columns]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(TableWrapper, {
+      ref: wrapperRef,
+      backgroundReverse: backgroundReverse,
+      children: /*#__PURE__*/_jsxs(ResponsiveTable, {
+        ref: tableRef,
+        children: [/*#__PURE__*/_jsx("thead", {
+          children: /*#__PURE__*/_jsx("tr", {
+            children: tableHeads
+          })
+        }), /*#__PURE__*/_jsx("tbody", {
+          children: tableRows || generateEmptyMessage()
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Scrollbar, {
+      backgroundReverse: backgroundReverse,
+      width: tableWidth,
+      onScroll: handleScroll
+    }), /*#__PURE__*/_jsxs(GridTableFooter, {
+      backgroundReverse: backgroundReverse,
+      children: [/*#__PURE__*/_jsx(TableFooterInfo, {
+        children: texts.info.replace('_START_', start).replace('_END_', end).replace('_TOTAL_', total)
+      }), /*#__PURE__*/_jsxs(TableFooterPager, {
+        children: [/*#__PURE__*/_jsx(Paginate, {
+          currentPage: currentPage,
+          totalCount: total,
+          pageSize: limit,
+          onPageChange: onPageChange
+        }), /*#__PURE__*/_jsx(Select, {
+          fill: true,
+          fillReverse: !backgroundReverse,
+          allowSearch: false,
+          options: [{
+            id: 10,
+            text: '10'
+          }, {
+            id: 20,
+            text: '20'
+          }, {
+            id: 30,
+            text: '30'
+          }, {
+            id: 40,
+            text: '40'
+          }, {
+            id: 50,
+            text: '50'
+          }],
+          selected: limit,
+          onSelect: onLimitChange
+        })]
+      })]
+    })]
+  });
+};
+const TableWrapper = styled.div`
+  overflow: hidden;
+  background: ${_ref2 => {
+  let {
+    backgroundReverse
+  } = _ref2;
+  return backgroundReverse ? 'var(--color-background1)' : 'var(--color-background2)';
+}};
+`;
+const ResponsiveTable = styled.table`
+  /* make fixed width work */
+  width: 0px;
+  color: var(--font-on-background);
+  table-layout: fixed;
+  border-collapse: collapse;
+`;
+const TD = styled.td`
+  height: 48px;
+  padding: 0 var(--spacing-xs);
+  border-top: 1px solid var(--border-color);
+  border-right: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--border-color);
+  text-align: ${_ref3 => {
+  let {
+    center
+  } = _ref3;
+  return center ? 'center' : 'left';
+}};
+  background: ${_ref4 => {
+  let {
+    backgroundReverse
+  } = _ref4;
+  return backgroundReverse ? 'var(--color-background1)' : 'var(--color-background2)';
+}};
+
+  &:last-child {
+    border-right: none;
+  }
+
+  > span {
+    display: inline-block;
+    width: 100%;
+    padding: 0 2px;
+    overflow: hidden;
+    white-space: pre;
+    text-overflow: ellipsis;
+  }
+`;
+const Scrollbar = styled.div`
+  position: sticky;
+  bottom: 48px;
+  width: 100%;
+  overflow: auto;
+  background: ${_ref5 => {
+  let {
+    backgroundReverse
+  } = _ref5;
+  return backgroundReverse ? 'var(--color-background1)' : 'var(--color-background2)';
+}};
+
+  ::before {
+    display: block;
+    content: '';
+    width: ${_ref6 => {
+  let {
+    width
+  } = _ref6;
+  return `${width}px`;
+}};
+    height: 1px;
+  }
+
+  ${scrollbar({
+  size: 'large'
+})}
+`;
+export default GridTable;

package/esm/table/ImageBox.js

@@ -0,0 +1,38 @@
+import styled from 'styled-components';
+import IconFigure from '../figure/IconFigure';
+import ImageFluid from '../image/ImageFluid';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ImageBox = _ref => {
+  let {
+    image,
+    text
+  } = _ref;
+  return /*#__PURE__*/_jsxs(Wrapper, {
+    children: [/*#__PURE__*/_jsx(IconFigure, {
+      size: "large",
+      children: /*#__PURE__*/_jsx(ImageFluid, {
+        crossOrigin: "anonymous",
+        src: image,
+        alt: `${text}'s pic`,
+        roundedCircle: true
+      })
+    }), /*#__PURE__*/_jsx(Text, {
+      children: text
+    })]
+  });
+};
+const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+
+  > figure {
+    flex: 0 0 auto;
+    margin-right: var(--spacing-xs);
+  }
+`;
+const Text = styled.span`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+export default ImageBox;