DataGrid.tsx getProviderProps 발췌

DataGrid.tsx

    const {
      CTInnerWidth: _CTInnerWidth = 0,
      frozenPanelWidth: _frozenPanelWidth = 0,
      asidePanelWidth: _asidePanelWidth = 0,
      rightPanelWidth: _rightPanelWidth = 0,
    } = newStoreProps.styles!;

    const { printStartColIndex, printEndColIndex } = getPositionPrintColGroup(
      newStoreProps.headerColGroup,
      Math.abs(newStoreProps.scrollLeft || 0) + _frozenPanelWidth,
      Math.abs(newStoreProps.scrollLeft || 0) +
        _frozenPanelWidth +
        (_CTInnerWidth -
          _asidePanelWidth -
          _frozenPanelWidth -
          _rightPanelWidth),
    );

    newStoreProps.printStartColIndex = printStartColIndex;
    newStoreProps.printEndColIndex = printEndColIndex;

    newStoreProps.visibleHeaderColGroup = newStoreProps.headerColGroup.slice(
      printStartColIndex,
      printEndColIndex + 1,
    );

    newStoreProps.visibleBodyRowData = getTableByStartEndColumnIndex(
      newStoreProps.bodyRowData || { rows: [{ cols: [] }] },
      printStartColIndex + frozenColumnIndex,
      printEndColIndex + frozenColumnIndex,
    );
    newStoreProps.visibleBodyGroupingData = getTableByStartEndColumnIndex(
      newStoreProps.bodyGroupingData || { rows: [{ cols: [] }] },
      printStartColIndex + frozenColumnIndex,
      printEndColIndex + frozenColumnIndex,
    );

    if (footSum) {
      newStoreProps.visibleFootSumData = getTableByStartEndColumnIndex(
        newStoreProps.footSumData || { rows: [{ cols: [] }] },
        printStartColIndex + frozenColumnIndex,
        printEndColIndex + frozenColumnIndex,
      );
    }

StoreProvider.ts

  static getDerivedStateFromProps(
    nProps: IDataGrid.IStoreProps,
    nState: IDataGrid.IStoreState,
  ) {
    if (
      nProps.mounted === nState.mounted &&
      nProps.loading === nState.loading &&
      nProps.loadingData === nState.loadingData &&
      nProps.setRootState === nState.setRootState &&
      nProps.getRootState === nState.getRootState &&
      nProps.rootNode === nState.rootNode &&
      nProps.clipBoardNode === nState.clipBoardNode &&
      nProps.rootObject === nState.rootObject &&
      nProps.data === nState.data &&
      nProps.options === nState.options &&
      nProps.height === nState.height &&
      nProps.onBeforeEvent === nState.onBeforeEvent &&
      nProps.onAfterEvent === nState.onAfterEvent &&
      nProps.onScrollEnd === nState.onScrollEnd &&
      nProps.onRightClick === nState.onRightClick &&
      nProps.selection === nState.selection &&
      nProps.rowSelector === nState.rowSelector &&
      nProps.headerTable === nState.headerTable &&
      nProps.bodyRowTable === nState.bodyRowTable &&
      nProps.bodyRowMap === nState.bodyRowMap &&
      nProps.asideHeaderData === nState.asideHeaderData &&
      nProps.leftHeaderData === nState.leftHeaderData &&
      nProps.headerData === nState.headerData &&
      nProps.asideColGroup === nState.asideColGroup &&
      nProps.asideBodyRowData === nState.asideBodyRowData &&
      nProps.leftBodyRowData === nState.leftBodyRowData &&
      nProps.bodyRowData === nState.bodyRowData &&
      nProps.colGroup === nState.colGroup &&
      nProps.colGroupMap === nState.colGroupMap &&
      nProps.leftHeaderColGroup === nState.leftHeaderColGroup &&
      nProps.headerColGroup === nState.headerColGroup &&
      (nState.styles &&
        nProps.styles.CTInnerWidth === nState.styles.CTInnerWidth &&
        nProps.styles.CTInnerHeight === nState.styles.CTInnerHeight)
    ) {
      return null;
    } else {
      let scrollTop = nState.scrollTop;
      let scrollLeft = nState.scrollLeft;

      let filteredList = nState.filteredList || [];
      let styles: IDataGrid.IStyles = nState.styles || {};
      const { sortInfo } = nState;
      const { data, styles: _styles = {}, options: _options = {} } = nProps;

      // 데이터를 정리하는 과정. data > filteredList
      if (data && nProps.data !== nState.data) {
        // sort 되었다고 판단됨. filteredList를 sort 해주어야 함.
        const { options = {} } = nState;
        const { columnKeys: optionColumnKeys = {} } = options;

        filteredList = data.filter((n: any) => {
          return !n[optionColumnKeys.deleted || '_deleted_'];
        });

        // 정렬 오브젝트가 있다면 정렬 프로세스 적용하여 새로운 데이터 정렬
        if (sortInfo && Object.keys(sortInfo).length) {
          let sortInfoArray: any[] = [];
          for (let k in sortInfo) {
            if (sortInfo[k]) {
              sortInfoArray[sortInfo[k].seq] = {
                key: k,
                order: sortInfo[k].orderBy,
              };
            }
          }
          sortInfoArray = sortInfoArray.filter(o => typeof o !== 'undefined');

          let i = 0,
            l = sortInfoArray.length,
            aValue: any,
            bValue: any;

          const getValueByKey = function(_item: any, _key: string) {
            return _item[_key] || '';
          };
          filteredList = filteredList.sort(
            (a: any, b: any): any => {
              for (i = 0; i < l; i++) {
                aValue = getValueByKey(a, sortInfoArray[i].key);
                bValue = getValueByKey(b, sortInfoArray[i].key);

                if (typeof aValue !== typeof bValue) {
                  aValue = '' + aValue;
                  bValue = '' + bValue;
                }
                if (aValue < bValue) {
                  return sortInfoArray[i].order === 'asc' ? -1 : 1;
                } else if (aValue > bValue) {
                  return sortInfoArray[i].order === 'asc' ? 1 : -1;
                }
              }
            },
          );
        }
      }

      if (
        nState.styles &&
        nProps.styles &&
        nProps.styles.CTInnerWidth !== nState.styles.CTInnerWidth
      ) {
        if (
          scrollLeft &&
          scrollLeft !== 0 &&
          Number(styles.scrollContentWidth) + scrollLeft <
            Number(styles.scrollContentContainerWidth)
        ) {
          scrollLeft =
            Number(styles.scrollContentContainerWidth) -
            Number(styles.scrollContentWidth);
          if (scrollLeft > 0) {
            scrollLeft = 0;
          }
        }
      }

      if (
        nState.styles &&
        nProps.styles &&
        nProps.styles.CTInnerHeight !== nState.styles.CTInnerHeight
      ) {
        if (
          scrollTop &&
          scrollTop !== 0 &&
          Number(styles.scrollContentHeight) + scrollTop <
            Number(styles.scrollContentContainerHeight)
        ) {
          scrollTop =
            Number(styles.scrollContentContainerHeight) -
            Number(styles.scrollContentHeight);
          if (scrollTop > 0) {
            scrollTop = 0;
          }
        }
      }

      if (nState.styles) {
        console.log(`ch1 : ${nState.styles.scrollContentWidth}`);
      }

      // 데이터 길이에 따라 스타일이 조정되어야 하므로
      // 현재 스타일을 props.styles과 데이터 길이에 따라 계산된 스타일을 머지해 준다.
      styles = {
        ..._styles,
        ...getStylesAboutFilteredList(filteredList, _options, _styles),
      };

      console.log(`ch2 : ${styles.scrollContentWidth}`);

      // loadingData 상태값이 true 이면
      // 컨텐츠 스크롤 위치를 맨 끝으로 보내도록 함.
      if (nProps.loadingData && nProps.loadingData !== nState.loadingData) {
        const focusRow = filteredList.length - 1;
        const {
          bodyTrHeight = 0,
          scrollContentWidth = 0,
          scrollContentHeight = 0,
          scrollContentContainerWidth = 0,
          scrollContentContainerHeight = 0,
        } = styles;

        scrollTop = getScrollPosition(0, -focusRow * bodyTrHeight, {
          scrollWidth: scrollContentWidth,
          scrollHeight: scrollContentHeight,
          clientWidth: scrollContentContainerWidth,
          clientHeight: scrollContentContainerHeight,
        }).scrollTop;
      }

      console.log('apply ~ ', styles.scrollContentWidth);

      return {
        ...nState,
        ...{
          scrollLeft,
          scrollTop,
          mounted: nProps.mounted,
          loading: nProps.loading,
          loadingData: nProps.loadingData,
          setRootState: nProps.setRootState,
          getRootState: nProps.getRootState,
          setScrollLeft: nProps.setScrollLeft,
          setScrollTop: nProps.setScrollTop,
          rootNode: nProps.rootNode,
          clipBoardNode: nProps.clipBoardNode,
          rootObject: nProps.rootObject,
          data: nProps.data,
          filteredList,
          options: nProps.options,
          height: nProps.height,
          onBeforeEvent: nProps.onBeforeEvent,
          onAfterEvent: nProps.onAfterEvent,
          onScrollEnd: nProps.onScrollEnd,
          onRightClick: nProps.onRightClick,
          selection: nProps.selection,
          rowSelector: nProps.rowSelector,

          colGroupMap: nProps.colGroupMap,
          asideColGroup: nProps.asideColGroup,
          colGroup: nProps.colGroup,

          headerTable: nProps.headerTable,
          asideHeaderData: nProps.asideHeaderData,
          leftHeaderData: nProps.leftHeaderData,
          headerData: nProps.headerData,
          leftHeaderColGroup: nProps.leftHeaderColGroup,
          headerColGroup: nProps.headerColGroup,

          bodyRowTable: nProps.bodyRowTable,
          bodyRowMap: nProps.bodyRowMap,
          asideBodyRowData: nProps.asideBodyRowData,
          leftBodyRowData: nProps.leftBodyRowData,
          bodyRowData: nProps.bodyRowData,

          footSumColumns: nProps.footSumColumns,
          footSumTable: nProps.footSumTable,
          leftFootSumData: nProps.leftFootSumData,
          footSumData: nProps.footSumData,

          styles: styles,
          printStartColIndex: nProps.printStartColIndex,
          printEndColIndex: nProps.printEndColIndex,
          visibleHeaderColGroup: nProps.visibleHeaderColGroup,
          visibleBodyRowData: nProps.visibleBodyRowData,
          visibleBodyGroupingData: nProps.visibleBodyGroupingData,
          visibleFootSumData: nProps.visibleFootSumData,
        },
      };
    }
  }

  updateDimensions = () => {
    const {
      scrollLeft = 0,
      scrollTop = 0,
      bodyRowData = { rows: [{ cols: [] }] },
      bodyGroupingData = { rows: [{ cols: [] }] },
      footSumData = { rows: [{ cols: [] }] },
      options = {},
      rootNode,
    } = this.state;
    const { frozenColumnIndex = 0 } = options;

    const calculatedObject = calculateDimensions(
      rootNode && rootNode.current,
      this.state,
    );

    const {
      scrollContentWidth = 0,
      scrollContentHeight = 0,
      scrollContentContainerWidth = 0,
      scrollContentContainerHeight = 0,
    } = calculatedObject.styles;

    let {
      scrollLeft: newScrollLeft = 0,
      scrollTop: newScrollTop = 0,
    } = getScrollPosition(scrollLeft, scrollTop, {
      scrollWidth: scrollContentWidth,
      scrollHeight: scrollContentHeight,
      clientWidth: scrollContentContainerWidth,
      clientHeight: scrollContentContainerHeight,
    });

    const {
      CTInnerWidth: _CTInnerWidth = 0,
      frozenPanelWidth: _frozenPanelWidth = 0,
      asidePanelWidth: _asidePanelWidth = 0,
      rightPanelWidth: _rightPanelWidth = 0,
    } = calculatedObject.styles;

    const { printStartColIndex, printEndColIndex } = getPositionPrintColGroup(
      calculatedObject.headerColGroup,
      Math.abs(newScrollLeft || 0) + _frozenPanelWidth,
      Math.abs(newScrollLeft || 0) +
        _frozenPanelWidth +
        (_CTInnerWidth -
          _asidePanelWidth -
          _frozenPanelWidth -
          _rightPanelWidth),
    );

    const visibleHeaderColGroup = calculatedObject.headerColGroup.slice(
      printStartColIndex,
      printEndColIndex + 1,
    );

    const visibleBodyRowData = getTableByStartEndColumnIndex(
      bodyRowData,
      printStartColIndex + frozenColumnIndex,
      printEndColIndex + frozenColumnIndex,
    );
    const visibleBodyGroupingData = getTableByStartEndColumnIndex(
      bodyGroupingData,
      printStartColIndex + frozenColumnIndex,
      printEndColIndex + frozenColumnIndex,
    );

    const visibleFootSumData = getTableByStartEndColumnIndex(
      footSumData || { rows: [{ cols: [] }] },
      printStartColIndex + frozenColumnIndex,
      printEndColIndex + frozenColumnIndex,
    );

    this.setStoreState({
      styles: calculatedObject.styles,
      printStartColIndex,
      printEndColIndex,
      visibleHeaderColGroup,
      visibleBodyRowData,
      visibleBodyGroupingData,
      visibleFootSumData,
      scrollLeft: newScrollLeft,
      scrollTop: newScrollTop,
    });
  };