forstok-ui-lib 5.12.2 → 5.13.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "5.12.2",
+  "version": "5.13.1",
   "description": "Forstok UI Components Library",
   "path": "dist",
   "main": "dist/index.js",

package/src/assets/stylesheets/shares.styles.ts

@@ -3536,4 +3536,43 @@ export const NavChildItem = styled.div<{ $activated?: boolean, $mode?: string }>
 export const TotalLabel = styled.span`
   letter-spacing: 1.25px;
   display: inline;
+`
+export const FilterColumnContainer = styled.section`
+  display: grid;
+  justify-content: end;
+  padding-left: 10px;
+`
+export const ScrollArrowContainer = styled.section`
+  padding-left: 10px;
+  > :first-child {
+    margin-right: 2px;
+    &::after {
+      position: absolute;
+      content: '';
+      right: 50%;
+      padding: 4px;
+      border-style: solid;
+      border-width: 0 2px 2px 0;
+      transform: rotate(135deg) translate(-50%, -50%);
+    }
+  }
+  > :last-child {
+    &::after {
+      position: absolute;
+      content: '';
+      left: 50%;
+      padding: 4px;
+      border-style: solid;
+      border-width: 0 2px 2px 0;
+      transform: rotate(-45deg) translate(-50%, -50%);
+    }
+  }
+  button {
+    height: 30px;
+    padding: 0 15px;
+    border-radius: 0;
+    &:hover {
+      color: var(--sec-clr-lnk__hvr);
+    }
+  }
 `

package/src/components/listTable/index.tsx

@@ -0,0 +1,409 @@
+import { ReactNode, useCallback, useEffect, useRef, useState } from 'react'
+import ReactDOM from 'react-dom/client'
+import ButtonComponent from '../button';
+import CheckboxComponent from '../checkbox';
+import DropDownComponent from '../dropdown';
+import LabelComponent from '../label';
+import LinkComponent from '../link';
+import { getStorage, setStorage } from '../../assets/javascripts/function';
+import { DropdownItem, DropdownList, DropdownTitle, FilterButton, FilterColumnContainer, ScrollArrowContainer } from '../../assets/stylesheets/shares.styles';
+import { TChangeEvent } from '../../typeds';
+
+const ListTableComponent = ({ children, hiddenColumnKey, isScroll, freezeColumns, localStorageName }: { children: ReactNode, hiddenColumnKey?: string[], isScroll?: boolean, freezeColumns?: number, localStorageName: string }) => {
+  const [tableEl, setTableEl] = useState<HTMLElement>();
+
+  useEffect(() => {
+    setTableEl(document.querySelector('._refColumnContainer') as HTMLElement);
+  }, [])
+
+  const CheckTableWidth = useCallback(() => {
+    if (!tableEl) {
+      return false;
+    }
+    const windowWidth = window.innerWidth;
+    const actionEl = tableEl.querySelectorAll('.column-actions') as NodeListOf<HTMLElement>;
+    const columnEl = tableEl.querySelector('._refHeaderColumn') as HTMLElement;
+    let _width = 0;
+
+    if (windowWidth <= 1024) {
+      for (const el of columnEl.children) {
+        if (el.role === 'columnheader' && !el.classList.contains('none')) {
+          _width += (parseInt(getComputedStyle(el).minWidth) ? parseInt(getComputedStyle(el).minWidth) : 90);
+        } else if (el.role === 'group') {
+          for (const groupedEl of el.children) {
+            if (!groupedEl.classList.contains('none')) {
+              _width += (parseInt(getComputedStyle(groupedEl).minWidth) ? parseInt(getComputedStyle(groupedEl).minWidth) : 90);
+            }
+          }
+        }
+      }
+    } else if ( 1024 < windowWidth &&  windowWidth < 1700) {
+      let _addColumnWidth = windowWidth - 1025;
+      let _columnCount = 0;
+
+      for (const el of columnEl.children) {
+        if (el.role === 'columnheader' && !el.classList.contains('none')) {
+          _columnCount += 1;
+          _width += (parseInt(getComputedStyle(el).minWidth) ? parseInt(getComputedStyle(el).minWidth) : 90);
+        } else if (el.role === 'group') {
+          for (const groupedEl of el.children) {
+            if (!groupedEl.classList.contains('none')) {
+              _columnCount += 1;
+              _width += (parseInt(getComputedStyle(groupedEl).minWidth) ? parseInt(getComputedStyle(groupedEl).minWidth) : 90);
+            }
+          }
+        }
+      }
+      _width += (_addColumnWidth / _columnCount);
+    } else if (windowWidth >= 1800) {
+      for (const el of columnEl.children) {
+        if (el.role === 'columnheader' && !el.classList.contains('none')) {
+          _width += (parseInt(getComputedStyle(el).maxWidth) ? parseInt(getComputedStyle(el).maxWidth) : 100);
+        } else if (el.role === 'group') {
+          for (const groupedEl of el.children) {
+            if (!groupedEl.classList.contains('none')) {
+              _width += (parseInt(getComputedStyle(groupedEl).maxWidth) ? parseInt(getComputedStyle(groupedEl).maxWidth) : (parseInt(getComputedStyle(groupedEl).minWidth) ? parseInt(getComputedStyle(groupedEl).minWidth) : 90));
+            }
+          }
+        }
+      }
+    }
+
+    const tableBodyEls = tableEl.querySelectorAll('._refBodyColumn') as NodeListOf<HTMLElement>;
+    if (tableEl.clientWidth < _width) {
+      columnEl.style.width = _width+'px';
+      for (let rowEl of tableBodyEls) {
+        rowEl.style.width = _width+'px';
+      }
+      if (freezeColumns) {
+        for (let _el of actionEl) {
+          _el.style.borderLeft = '1px solid rgba(0, 0, 0, 0.05)';
+        }
+      }
+    } else {
+      columnEl.style.width = '';
+      for (let rowEl of tableBodyEls) {
+        rowEl.style.width = '';
+      }
+      if (freezeColumns) {
+        for (let _el of actionEl) {
+          _el.style.borderLeft = '';
+        }
+      }
+    }
+  }, [tableEl, freezeColumns])
+
+  useEffect(() => {
+    window.addEventListener('resize', CheckTableWidth, true);
+    return () => {
+      window.removeEventListener('resize', CheckTableWidth, true);
+    }
+  }, [CheckTableWidth])
+
+  /////////////////////////////////////////// SCROLL FUNC /////////////////////////////////////////////////////////
+
+  const evScrollArrowClick = (direction: string) => {
+    const columnEl = document.querySelector('._refColumnContainer') as HTMLElement;
+    const currentScroll = columnEl.scrollLeft;
+    if (direction === 'left') {
+      columnEl.scrollTo(currentScroll - 500, 0);
+    } else {
+      columnEl.scrollTo(currentScroll + 500, 0);
+    }
+  }
+
+  const checkTableScrollable = useCallback(() => {
+    const buttonArrowEl = document.getElementById('arrow-scroll-button') as HTMLElement;
+    if (buttonArrowEl && tableEl) {
+      if (tableEl.scrollWidth <= tableEl.clientWidth) {
+        buttonArrowEl.classList.add('none');
+      } else {
+        buttonArrowEl.classList.remove('none');
+      }
+    }
+  },[tableEl])
+
+  const arrowScrollRoot = useRef<ReactDOM.Root>(null);
+  const initArrowScroll = useCallback(() => {
+    const ArrowScrollElement = () => {
+      return (
+        <ScrollArrowContainer>
+          <ButtonComponent title='Scroll Left' $mode='nude' onClick={e => evScrollArrowClick('left')}></ButtonComponent>
+          <ButtonComponent title='Scroll Right' $mode='nude' onClick={e => evScrollArrowClick('right')}></ButtonComponent>
+        </ScrollArrowContainer>
+      )
+    };
+    if (!tableEl) {
+      return false;
+    }
+    const filterEl = document.querySelector('._refFilterContainer') as HTMLElement;
+    const buttonEl = document.getElementById('arrow-scroll-button') as HTMLElement;
+    const actionEl = tableEl.querySelectorAll('.column-actions') as NodeListOf<HTMLElement>;
+    const maxScrollLeft = tableEl.scrollWidth - tableEl.clientWidth;
+
+    for (let _el of actionEl) {
+      _el.classList.add('freezeColumn');
+      _el.style.right = '0';
+      if (maxScrollLeft > 0) {
+        _el.style.borderLeft = '1px solid rgba(0, 0, 0, 0.05)';
+      }
+    }
+
+    const renderTimeout = setTimeout(() => {
+      if (buttonEl) {
+        arrowScrollRoot.current && arrowScrollRoot.current.unmount();
+        arrowScrollRoot.current = null;
+        buttonEl.remove();
+      }
+      const el = document.createElement('section');
+      el.id = 'arrow-scroll-button';
+      filterEl.appendChild(el);
+      if (arrowScrollRoot.current === null) {
+        arrowScrollRoot.current = ReactDOM.createRoot(
+          document.getElementById('arrow-scroll-button') as HTMLElement
+        );
+        arrowScrollRoot.current.render(<ArrowScrollElement />);
+      }
+      checkTableScrollable();
+    })
+
+    window.addEventListener('resize', checkTableScrollable, true);
+    return () => {
+      clearTimeout(renderTimeout);
+      window.removeEventListener('resize', checkTableScrollable, true);
+    }
+  }, [tableEl, checkTableScrollable])
+
+  /////////////////////////////////////////// HIDE FUNC /////////////////////////////////////////////////////////
+
+  const storageFilter = getStorage(localStorageName, 'object');
+  const [ selectMode, setSelectMode ] = useState<boolean>(storageFilter?.length > 0);
+  const hiddenKeys = useRef<string[]>(storageFilter);
+  
+  const evToggleClassColumn = useCallback((columnName: string, value?: boolean) => {
+    if (tableEl && columnName) {
+      let tableColumnEls = tableEl.querySelectorAll(`.column-${columnName.replaceAll(' ','-').toLowerCase()}`);
+      if (value !== undefined) {
+        for (let tableColumnEl of tableColumnEls) {
+          if (value) {
+            tableColumnEl.classList.remove('none');
+          } else {
+            tableColumnEl.classList.add('none');
+          }
+        }
+      } else {
+        for (let tableColumnEl of tableColumnEls) {
+          if (tableColumnEl.classList.contains('none')) {
+            tableColumnEl.classList.remove('none');
+          } else {
+            tableColumnEl.classList.add('none');
+          }
+        }
+      }
+      CheckTableWidth();
+      checkTableScrollable();
+    }
+  }, [tableEl, checkTableScrollable, CheckTableWidth])
+
+  const evSelectAll = useCallback(() => {
+    if (!localStorageName) {
+      return false;
+    }
+    const checkboxInput = document.querySelectorAll('[name="checkbox-column"]') as NodeListOf<HTMLInputElement>;
+    hiddenKeys.current = [];
+    for (let input of checkboxInput) {
+      if (selectMode) {
+        input.checked = true;
+        evToggleClassColumn(input.getAttribute('data-key') || '', true);
+        setSelectMode(false);
+      } else {
+        input.checked = false;
+        hiddenKeys.current.push(input.getAttribute('data-key') || '');
+        evToggleClassColumn(input.getAttribute('data-key') || '', false);
+        setSelectMode(true);
+      }
+      setStorage(localStorageName, JSON.stringify(hiddenKeys.current));
+    }
+  },[hiddenKeys, evToggleClassColumn, localStorageName, selectMode])
+
+  const evChangeColumn: TChangeEvent = useCallback((e) => {
+    if (!localStorageName) {
+      return false;
+    }
+    const target = e.target as HTMLInputElement;
+    const columnName = target.getAttribute('data-key') || '';
+    if (target.checked) {
+      hiddenKeys.current = hiddenKeys.current.filter((key: string) => key !== columnName);
+    } else {
+      hiddenKeys.current.push(columnName);
+    }
+    evToggleClassColumn(columnName);
+    setStorage(localStorageName, JSON.stringify(hiddenKeys.current));
+  },[hiddenKeys, evToggleClassColumn, localStorageName])
+
+  const ButtonHideElement = useCallback(() => {
+    return (
+      <FilterColumnContainer>
+        <DropDownComponent $internalWidth='250px' $openPosition='right'>
+          <div aria-label='control'>
+            <ButtonComponent $mode='nude' $isIndicatorArrow={true} isIndicatorArrowColor='#494949'>
+              <FilterButton>
+                Columns
+              </FilterButton>
+            </ButtonComponent>
+          </div>
+          <div aria-label='body'>
+            <div className='_refFilterDropdown'>
+              <DropdownTitle>
+                <strong style={{fontSize: 'inherit'}}>Columns</strong>
+                <LinkComponent mode='blue' onClick={evSelectAll}>{selectMode ? 'Select All' : 'Deselect All'}</LinkComponent>      
+              </DropdownTitle>
+              <DropdownList style={{paddingBottom: '14px'}}>
+                {
+                  hiddenColumnKey?.length ? hiddenColumnKey.map((column: any, idx: number) => {
+                    return (
+                      <DropdownItem key={idx} $mode='categories'>
+                        <CheckboxComponent data-id={idx} extendKey={column} name='checkbox-column' id={`column-${idx}`} defaultChecked={!hiddenKeys.current?.includes(column)} evChange={evChangeColumn}></CheckboxComponent>
+                        <label htmlFor={`column-${idx}`}>{column}</label>
+                      </DropdownItem>
+                    )
+                  }) : <LabelComponent $mode='indi' style={{padding: '20px 14px'}}>No filter column found.</LabelComponent>
+                }
+              </DropdownList>
+            </div>
+          </div>
+        </DropDownComponent>
+      </FilterColumnContainer>
+    )
+  }, [evChangeColumn, evSelectAll, hiddenColumnKey, hiddenKeys, selectMode])
+
+  const buttonHideRoot = useRef<ReactDOM.Root>(null)
+  const initHiddenColumn = useCallback(() => {
+    const filterEl = document.querySelector('._refFilterContainer') as HTMLElement;
+    const buttonEl = document.getElementById('hidden-column-button') as HTMLButtonElement;
+
+    const renderTimeout = setTimeout(() => {
+      if (buttonEl) {
+        buttonHideRoot.current && buttonHideRoot.current.unmount();
+        buttonEl.remove();
+      }
+      const el = document.createElement('section');
+      el.id = 'hidden-column-button';
+      filterEl.appendChild(el);
+      buttonHideRoot.current = ReactDOM.createRoot(
+        document.getElementById('hidden-column-button') as HTMLElement
+      );
+      buttonHideRoot.current.render(<ButtonHideElement />);
+    })
+
+    if (storageFilter?.length > 0) {
+      for (let _column of storageFilter) {
+        evToggleClassColumn(_column, false);
+      }
+    }
+    return () => {
+      clearTimeout(renderTimeout);
+    }
+  }, [evToggleClassColumn, storageFilter, ButtonHideElement]) 
+
+  /////////////////////////////////////////// FREEZE FUNC /////////////////////////////////////////////////////////
+
+  const CheckFreezeScroll = useCallback((e: any) => {
+    if (!freezeColumns) {
+      return false;
+    }
+    const targetEl = e.target.closest('._refColumnContainer') as HTMLDivElement | HTMLElement;
+    if (targetEl) {
+      const actionEl = targetEl.querySelectorAll('.column-actions') as NodeListOf<HTMLElement>;
+      const maxScrollLeft = targetEl.scrollWidth - targetEl.clientWidth;
+      let leftHelper = 0;
+      const headerColumnEl = targetEl.querySelector('._refHeaderColumn') as HTMLDivElement | HTMLElement;
+      const bodyColumnEl = targetEl.querySelectorAll('._refBodyColumn') as NodeListOf<HTMLDivElement | HTMLElement>;
+      for (let i = 0 ; i < freezeColumns ; i++) {
+        if (targetEl.scrollLeft > 0) {
+          if (i > 0) {
+            leftHelper += parseInt(getComputedStyle((headerColumnEl.children[i] as any).previousElementSibling).width);
+            (headerColumnEl.children[i] as any).style.left = leftHelper + 'px';
+            for (let _el of bodyColumnEl) {
+              (_el.children[i] as any).style.left = leftHelper + 'px';
+            }
+          } else {
+            (headerColumnEl.children[i] as any).style.left = '0';
+            for (let _el of bodyColumnEl) {
+              (_el.children[i] as any).style.left = '0';
+            }
+          }
+
+          if (i === freezeColumns - 1) {
+            (headerColumnEl.children[i] as any).style.borderRight = '1px solid rgba(0, 0, 0, 0.05)';
+            for (let _el of bodyColumnEl) {
+              (_el.children[i] as any).style.borderRight = '1px solid rgba(0, 0, 0, 0.05)';
+            }
+          }
+        } else {
+          (headerColumnEl.children[i] as any).style = '';
+          for (let _el of bodyColumnEl) {
+            (_el.children[i] as any).style = '';
+          }
+        }
+      }
+
+      if (actionEl.length) {
+        if (targetEl.scrollLeft < maxScrollLeft) {
+          for (let _el of actionEl) {
+            _el.style.borderLeft = '1px solid rgba(0, 0, 0, 0.05)';
+          }
+        } else {
+          for (let _el of actionEl) {
+            _el.style.borderLeft = '';
+          }
+        }
+      }
+    }
+  }, [freezeColumns])
+
+  const initFreezeColumn = useCallback(() => {
+    if (!tableEl || !freezeColumns) {
+      return false;
+    }
+    for (let i = 0 ; i < freezeColumns ; i++) {
+      (tableEl.querySelector('._refHeaderColumn') as HTMLElement).children[i].classList.add('freezeColumn');
+      for (let _el of tableEl.querySelectorAll('._refBodyColumn')) {
+        _el.children[i].classList.add('freezeColumn');
+      }
+    }
+
+    const scrollTableContainer = document.querySelector('._refColumnContainer') as HTMLElement;
+    scrollTableContainer && scrollTableContainer.addEventListener('scroll', CheckFreezeScroll, true);
+  
+    return () => {
+      const scrollTableContainer = document.querySelector('._refColumnContainer') as HTMLElement;
+      scrollTableContainer && scrollTableContainer.removeEventListener('scroll', CheckFreezeScroll, true);
+    }
+  }, [CheckFreezeScroll, freezeColumns, tableEl]) 
+
+  /////////////////////////////////////////// INIT /////////////////////////////////////////////////////////
+
+  useEffect(() => {
+    if (tableEl) {
+      CheckTableWidth()
+      if (hiddenColumnKey) {
+        initHiddenColumn();
+      }
+      if (isScroll) {
+        initArrowScroll();
+      }
+      if (freezeColumns) {
+        initFreezeColumn();
+      }
+    }
+  }, [hiddenColumnKey, isScroll, freezeColumns, tableEl, initHiddenColumn, initArrowScroll, initFreezeColumn, CheckTableWidth])
+
+  return(
+    <>
+      {children}
+    </>
+  )
+}
+
+export default ListTableComponent