refactor: Rename fixColumn to horizonScroll (#449)

* refactor variable name

* update example

Author: zombieJ

examples/expandedRowRender.tsx

@@ -35,6 +35,7 @@ const Demo = () => {
   const [expandedRowKeys, setExpandedRowKeys] = React.useState([]);
   const [expandRowByClick, expandRowByClickProps] = useCheckbox(false);
   const [fixColumns, fixColumnsProps] = useCheckbox(false);
+  const [scrollX, scrollXProps] = useCheckbox(false);
   const [fixHeader, fixHeaderProps] = useCheckbox(false);
   const [expandIconPosition, expandIconPositionProps] = useCheckbox(false);
 
@@ -103,6 +104,10 @@ const Demo = () => {
         <input {...fixColumnsProps} />
         Fix Columns
       </label>
+      <label>
+        <input {...scrollXProps} />
+        ScrollX
+      </label>
       <label>
         <input {...fixHeaderProps} />
         Fix Header
@@ -123,7 +128,7 @@ const Demo = () => {
           rowExpandable,
           expandIconColumnIndex: expandIconPosition ? 1 : null,
         }}
-        scroll={{ x: fixColumns ? 2000 : null, y: fixHeader ? 300 : null }}
+        scroll={{ x: fixColumns || scrollX ? 2000 : null, y: fixHeader ? 300 : null }}
         data={data}
       />
     </div>

src/Body/BodyRow.tsx

@@ -52,7 +52,7 @@ function BodyRow<RecordType extends { children?: RecordType[] }>(props: BodyRowP
   const { prefixCls, direction } = React.useContext(TableContext);
   const {
     fixHeader,
-    fixColumn,
+    horizonScroll,
     componentWidth,
     flattenColumns,
     expandableType,
@@ -196,7 +196,7 @@ function BodyRow<RecordType extends { children?: RecordType[] }>(props: BodyRowP
         )}
         prefixCls={prefixCls}
         fixHeader={fixHeader}
-        fixColumn={fixColumn}
+        horizonScroll={horizonScroll}
         component={RowComponent}
         componentWidth={componentWidth}
         cellComponent={cellComponent}

src/Body/ExpandedRow.tsx

@@ -8,7 +8,7 @@ export interface ExpandedRowProps<RecordType> {
   component: CustomizeComponent;
   cellComponent: CustomizeComponent;
   fixHeader: boolean;
-  fixColumn: boolean;
+  horizonScroll: boolean;
   componentWidth: number;
   className: string;
   expanded: boolean;
@@ -22,7 +22,7 @@ function ExpandedRow<RecordType>({
   component: Component,
   cellComponent,
   fixHeader,
-  fixColumn,
+  horizonScroll,
   className,
   expanded,
   componentWidth,
@@ -34,7 +34,7 @@ function ExpandedRow<RecordType>({
   return React.useMemo(() => {
     let contentNode = children;
 
-    if (fixColumn) {
+    if (horizonScroll) {
       contentNode = (
         <div
           style={{
@@ -66,7 +66,7 @@ function ExpandedRow<RecordType>({
     children,
     Component,
     fixHeader,
-    fixColumn,
+    horizonScroll,
     className,
     expanded,
     componentWidth,

src/Body/index.tsx

@@ -33,7 +33,9 @@ function Body<RecordType>({
 }: BodyProps<RecordType>) {
   const { onColumnResize } = React.useContext(ResizeContext);
   const { prefixCls, getComponent } = React.useContext(TableContext);
-  const { fixHeader, fixColumn, flattenColumns, componentWidth } = React.useContext(BodyContext);
+  const { fixHeader, horizonScroll, flattenColumns, componentWidth } = React.useContext(
+    BodyContext,
+  );
 
   return React.useMemo(() => {
     const WrapperComponent = getComponent(['body', 'wrapper'], 'tbody');
@@ -70,7 +72,7 @@ function Body<RecordType>({
           className={`${prefixCls}-placeholder`}
           prefixCls={prefixCls}
           fixHeader={fixHeader}
-          fixColumn={fixColumn}
+          horizonScroll={horizonScroll}
           component={trComponent}
           componentWidth={componentWidth}
           cellComponent={tdComponent}

src/Table.tsx

@@ -369,7 +369,7 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
   const colWidths = React.useMemo(() => pureColWidths, [pureColWidths.join('_')]);
   const stickyOffsets = useStickyOffsets(colWidths, flattenColumns.length, direction);
   const fixHeader = hasData && scroll && validateValue(scroll.y);
-  const fixColumn = scroll && validateValue(scroll.x);
+  const horizonScroll = scroll && validateValue(scroll.x);
 
   let scrollXStyle: React.CSSProperties;
   let scrollYStyle: React.CSSProperties;
@@ -382,7 +382,7 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
     };
   }
 
-  if (fixColumn) {
+  if (horizonScroll) {
     scrollXStyle = { overflowX: 'scroll' };
     // When no vertical scrollbar, should hide it
     // https://github.com/ant-design/ant-design/pull/20705
@@ -446,13 +446,13 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
     setComponentWidth(fullTableRef.current ? fullTableRef.current.offsetWidth : width);
   };
 
-  // Sync scroll bar when init or `fixColumn` changed
+  // Sync scroll bar when init or `horizonScroll` changed
   React.useEffect(() => triggerOnScroll, []);
   React.useEffect(() => {
-    if (fixColumn) {
+    if (horizonScroll) {
       triggerOnScroll();
     }
-  }, [fixColumn]);
+  }, [horizonScroll]);
 
   // ================== INTERNAL HOOKS ==================
   React.useEffect(() => {
@@ -501,7 +501,7 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
   const bodyTable = (
     <Body
       data={mergedData}
-      measureColumnWidth={fixHeader || fixColumn}
+      measureColumnWidth={fixHeader || horizonScroll}
       stickyOffsets={stickyOffsets}
       expandedKeys={mergedExpandedKeys}
       rowExpandable={rowExpandable}
@@ -625,7 +625,7 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
         [`${prefixCls}-ping-right`]: pingedRight,
         [`${prefixCls}-layout-fixed`]: tableLayout === 'fixed',
         [`${prefixCls}-fixed-header`]: fixHeader,
-        [`${prefixCls}-fixed-column`]: fixColumn,
+        [`${prefixCls}-fixed-column`]: horizonScroll,
         [`${prefixCls}-has-fix-left`]: flattenColumns[0] && flattenColumns[0].fixed,
         [`${prefixCls}-has-fix-right`]:
           flattenColumns[flattenColumns.length - 1] &&
@@ -648,7 +648,7 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
     </div>
   );
 
-  if (fixColumn) {
+  if (horizonScroll) {
     fullTable = <ResizeObserver onResize={onFullTableResize}>{fullTable}</ResizeObserver>;
   }
 
@@ -670,7 +670,7 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
       expandedRowClassName,
       componentWidth,
       fixHeader,
-      fixColumn,
+      horizonScroll,
       expandIcon: mergedExpandIcon,
       expandableType,
       expandRowByClick,
@@ -686,7 +686,7 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
       expandedRowClassName,
       componentWidth,
       fixHeader,
-      fixColumn,
+      horizonScroll,
       mergedExpandIcon,
       expandableType,
       expandRowByClick,

src/context/BodyContext.tsx

@@ -21,7 +21,7 @@ export interface BodyContextProps<RecordType = DefaultRecordType> {
   componentWidth: number;
   tableLayout: TableLayout;
   fixHeader: boolean;
-  fixColumn: boolean;
+  horizonScroll: boolean;
 
   indentSize: number;
   expandableType: ExpandableType;