feffery_antd_components 0.4.2 → 0.4.3-rc1

package/feffery_antd_components/package-info.json

@@ -1,6 +1,6 @@
 {
     "name": "feffery_antd_components",
-    "version": "0.4.2",
+    "version": "0.4.3-rc1",
     "description": "Best implementation of Antd components in Plotly Dash.",
     "repository": {
         "type": "git",
@@ -33,7 +33,7 @@
         "@formily/react": "^2.3.1",
         "@plotly/webpack-dash-dynamic-import": "^1.3.0",
         "ahooks": "^3.7.0",
-        "antd": "^5.27.1",
+        "antd": "^5.27.3",
         "antd-img-crop": "^4.2.3",
         "color": "^4.2.3",
         "dayjs": "^1.11.13",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "feffery_antd_components",
-    "version": "0.4.2",
+    "version": "0.4.3-rc1",
     "description": "Best implementation of Antd components in Plotly Dash.",
     "repository": {
         "type": "git",
@@ -33,7 +33,7 @@
         "@formily/react": "^2.3.1",
         "@plotly/webpack-dash-dynamic-import": "^1.3.0",
         "ahooks": "^3.7.0",
-        "antd": "^5.27.1",
+        "antd": "^5.27.3",
         "antd-img-crop": "^4.2.3",
         "color": "^4.2.3",
         "dayjs": "^1.11.13",

package/src/jl/'feffery'_antdformitem.jl

@@ -15,7 +15,7 @@ Keyword arguments:
 - `id` (String; optional): 组件唯一id
 - `aria-*` (String; optional): `aria-*`格式属性通配
 - `className` (String | Dict; optional): 当前组件css类名，支持[动态css](/advanced-classname)
-- `colon` (Bool; optional): 当`layput='horizontal'`时，控制是否在表单项标签部分末尾添加冒号，优先级高于所属`AntdForm`中的`colon`参数
+- `colon` (Bool; optional): 当`layout='horizontal'`时，控制是否在表单项标签部分末尾添加冒号，优先级高于所属`AntdForm`中的`colon`参数
 - `data-*` (String; optional): `data-*`格式属性通配
 - `extra` (a list of or a singular dash component, string or number; optional): 组件型，当前表单项额外提示信息
 - `hasFeedback` (Bool; optional): 与`validateStatus`设定的状态对应，用于控制是否显示额外的状态图标

package/src/jl/'feffery'_antdtable.jl

@@ -398,8 +398,9 @@ Those elements have the following types:
   - `columns` (Array of Strings; optional): 监听排序涉及的字段`dataIndex`信息
   - `orders` (Array of a value equal to: 'ascend', 'descend's; optional): 监听排序涉及的字段对应排序方式，其中`'ascend'`表示升序，`'descend'`表示降序
 - `sticky` (optional): 配置粘性表头相关功能
-默认值：`false`. sticky has the following type: Bool | lists containing elements 'offsetHeader', 'offsetScroll'.
+默认值：`false`. sticky has the following type: Bool | lists containing elements 'belowSelector', 'offsetHeader', 'offsetScroll'.
 Those elements have the following types:
+  - `belowSelector` (String | Array of Strings; optional): 粘性表头附着目标元素对应的选择器规则字符串，设置后，粘性表头激活后将附着在目标元素下方
   - `offsetHeader` (Real; optional): 粘性表头竖直方向上的像素偏移量
   - `offsetScroll` (Real; optional): 粘性表头底部横向滚动条竖直方向上的像素偏移量
 - `style` (Dict; optional): 当前组件css样式

package/src/lib/components/dataDisplay/AntdTable.react.js

@@ -1090,6 +1090,13 @@ AntdTable.propTypes = {
     sticky: PropTypes.oneOfType([
         PropTypes.bool,
         PropTypes.exact({
+            /**
+             * 粘性表头附着目标元素对应的选择器规则字符串，设置后，粘性表头激活后将附着在目标元素下方
+             */
+            belowSelector: PropTypes.oneOfType([
+                PropTypes.string,
+                PropTypes.arrayOf(PropTypes.string)
+            ]),
             /**
              * 粘性表头竖直方向上的像素偏移量
              */

package/src/lib/components/dataEntry/form/AntdFormItem.react.js

@@ -136,7 +136,7 @@ AntdFormItem.propTypes = {
     }),
 
     /**
-     * 当`layput='horizontal'`时，控制是否在表单项标签部分末尾添加冒号，优先级高于所属`AntdForm`中的`colon`参数
+     * 当`layout='horizontal'`时，控制是否在表单项标签部分末尾添加冒号，优先级高于所属`AntdForm`中的`colon`参数
      */
     colon: PropTypes.bool,
 

package/src/lib/fragments/AntdTable.react.js

@@ -48,6 +48,7 @@ import { isNumber, isEqual, isString, isBoolean, isEmpty, omitBy, isUndefined }
 import { pickBy } from 'ramda';
 import { str2Locale, locale2text } from '../components/locales.react';
 import { useLoading } from '../components/utils';
+import useStickyOffset from '../hooks/useStickyOffset';
 // 上下文
 import PropsContext from '../contexts/PropsContext';
 // 参数类型
@@ -232,6 +233,18 @@ const AntdTable = (props) => {
     const [searchText, setSearchText] = useState('');
     const [searchedColumn, setSearchedColumn] = useState('');
 
+    const stickyObj = (sticky && typeof sticky === 'object') ? sticky : {};
+    const belowSelector = stickyObj.belowSelector ?? undefined;
+    const offsetHeader = Number(stickyObj.offsetHeader || 0);
+    const autoMeasuredOffset = belowSelector ? useStickyOffset({ selector: belowSelector, extra: offsetHeader }) : offsetHeader;
+    const { belowSelector: _rm1,
+        offsetHeader: _rm2,
+        ...stickyRest
+    } = stickyObj;
+    const computedSticky = sticky === true || belowSelector || (sticky && typeof sticky === 'object')
+        ? { ...stickyRest, offsetHeader: autoMeasuredOffset }
+        : undefined;
+
     const onPageChange = (pagination, filter, sorter, currentData) => {
 
         // 当本次事件由翻页操作引发时
@@ -2011,7 +2024,7 @@ const AntdTable = (props) => {
                 tableLayout={tableLayout}
                 size={size}
                 rowSelection={rowSelection}
-                sticky={sticky}
+                sticky={computedSticky}
                 pagination={
                     // 确保pagination=false生效
                     pagination &&
@@ -2115,8 +2128,8 @@ export default React.memo(
             .filter(key => !isEqual(prevProps[key], nextProps[key]))
 
         // 特殊处理：
-        // 当recentlySelectValue发生变动时，阻止本次重绘
-        if (changedProps.includes('recentlySelectValue')) {
+        // 当recentlySelectValue发生变动且不涉及data变动时时，阻止本次重绘
+        if (changedProps.includes('recentlySelectValue') && !changedProps.includes('data')) {
             return true;
         }
 

package/src/lib/hooks/useStickyOffset.js

@@ -0,0 +1,115 @@
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+
+function resolveNodes(selector) {
+  const sels = Array.isArray(selector) ? selector : [selector];
+  const nodes = [];
+  if (typeof document === 'undefined') return nodes;
+  for (const sel of sels) {
+    if (!sel) continue;
+    const first = document.querySelector(sel);
+    if (first) nodes.push(first);
+  }
+  return nodes;
+}
+
+function getNodesHeight(nodes) {
+  // include borders + padding; exclude margins
+  return nodes.reduce((acc, n) => acc + n.getBoundingClientRect().height, 0);
+}
+
+/**
+ * Returns a live pixel offset equal to the total height of the element(s)
+ * matched by `selector`. Updates on resize, content changes, and CSS class
+ * toggles (useful for Collapse animations).
+ *
+ * Usage:
+ *   useStickyOffset('.header')
+ *   useStickyOffset({ selector: ['.topbar', '.filters'], extra: 8 })
+ */
+export default function useStickyOffset(selectorOrOptions, extra = 0) {
+  const isObj =
+    selectorOrOptions &&
+    typeof selectorOrOptions === 'object' &&
+    !Array.isArray(selectorOrOptions);
+
+  const selector = isObj
+    ? (selectorOrOptions.selector ?? selectorOrOptions.belowSelector ?? null)
+    : selectorOrOptions;
+
+  // allow both `{ extra }` in options and the 2nd positional arg
+  const extraAdd =
+    (isObj ? Number(selectorOrOptions.extra || 0) : Number(extra || 0)) || 0;
+
+  const [offset, setOffset] = useState(0);
+  const rafRef = useRef(null);
+  const nodesRef = useRef([]);
+
+  const update = () => {
+    const nodes = nodesRef.current;
+    const h = nodes.length ? getNodesHeight(nodes) : 0;
+    // 1px threshold avoids micro-flutters during transitions
+    setOffset((prev) => {
+      const next = h + extraAdd;
+      return Math.abs(prev - next) >= 1 ? next : prev;
+    });
+  };
+
+  // use layout effect on client so first paint has correct offset
+  const useLE = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
+  useLE(() => {
+    if (!selector) {
+      setOffset(extraAdd);
+      return;
+    }
+    nodesRef.current = resolveNodes(selector);
+
+    // initial measure
+    update();
+
+    // observe size changes
+    const ros = [];
+    if (typeof window !== 'undefined' && 'ResizeObserver' in window) {
+      for (const n of nodesRef.current) {
+        const ro = new ResizeObserver(() => update());
+        ro.observe(n);
+        ros.push(ro);
+      }
+    }
+
+    // observe attribute/class changes that may affect height
+    const mos = [];
+    if (typeof window !== 'undefined' && 'MutationObserver' in window) {
+      for (const n of nodesRef.current) {
+        const mo = new MutationObserver(() => {
+          if (rafRef.current) cancelAnimationFrame(rafRef.current);
+          rafRef.current = requestAnimationFrame(update);
+        });
+        mo.observe(n, {
+          attributes: true,
+          attributeFilter: ['style', 'class', 'data-open', 'aria-expanded'],
+          childList: true,
+          subtree: true
+        });
+        mos.push(mo);
+      }
+    }
+
+    const onWin = () => update();
+    if (typeof window !== 'undefined') {
+      window.addEventListener('resize', onWin);
+    }
+
+    return () => {
+      if (typeof window !== 'undefined') {
+        window.removeEventListener('resize', onWin);
+      }
+      ros.forEach((ro) => ro.disconnect());
+      mos.forEach((mo) => mo.disconnect());
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+    };
+    // stringify option to capture selector arrays etc.
+  }, [JSON.stringify(selector), extraAdd]);
+
+  return offset;
+}

package/tests/dataDisplay/AntdTable/feat_sticky_header.py

@@ -0,0 +1,81 @@
+if True:
+    import sys
+
+    sys.path.append("../../../")
+    import dash
+    from dash import html
+
+    import feffery_antd_components as fac
+
+app = dash.Dash(__name__)
+
+app.layout = html.Div(
+    [
+        # ---- sticky top section whose height can change (collapse) ----
+        html.Div(
+            fac.AntdAccordion(
+                items=[
+                    {
+                        "title": f"手风琴项示例{i}",
+                        "key": i,
+                        "children": fac.AntdText(f"手风琴项示例{i}"),
+                    }
+                    for i in range(1, 6)
+                ]
+            ),
+            # this outer wrapper is what the hook observes
+            className="filters-shell",
+            style={
+                "position": "sticky",
+                "top": 0,
+                "zIndex": 20,
+                "background": "white",
+                "borderBottom": "1px solid #f0f0f0",
+            },
+        ),
+        html.Br(),
+        fac.AntdTable(
+            columns=[
+                {"title": f"Field {i}", "dataIndex": f"Field {i}"} for i in range(5)
+            ],
+            data=[
+                {**{f"Field {j}": i for j in range(5)}, "key": f"row-{i}"}
+                for i in range(60)
+            ],
+            bordered=True,
+            size="middle",
+            className="sticky-table",
+            sticky={"belowSelector": ".filters-shell"},
+            pagination={"pageSize": 100, "position": "bottomCenter"},
+            expandedRowKeyToContent=[
+                {
+                    "key": f"row-{i}",
+                    "content": fac.AntdTable(
+                        columns=[
+                            {"title": f"Nested {i}", "dataIndex": f"Field {i}"}
+                            for i in range(5)
+                        ],
+                        data=[
+                            {**{f"Field {j}": i for j in range(5)}, "key": f"row-{i}"}
+                            for i in range(60)
+                        ],
+                        bordered=True,
+                        size="middle",
+                        sticky={
+                            "belowSelector": [
+                                ".filters-shell",
+                                ".sticky-table .ant-table-header.ant-table-sticky-holder",
+                            ],
+                        },
+                        pagination={"pageSize": 100, "position": "bottomCenter"},
+                    ),
+                }
+                for i in range(60)
+            ],
+        ),
+    ],
+    style={"padding": 24, "maxWidth": 1000, "margin": "0 auto"},
+)
+
+if __name__ == "__main__":
+    app.run(debug=True)

package/tests/dataDisplay/AntdTable/fix_select_with_editable.py

@@ -0,0 +1,84 @@
+if True:
+    import sys
+
+    sys.path.append('../../../')
+    import dash
+    from dash import html
+    from datetime import datetime
+    import feffery_antd_components as fac
+
+app = dash.Dash(__name__)
+
+app.layout = html.Div(
+    [
+        fac.AntdTable(
+            columns=[
+                {
+                    'title': 'select示例1',
+                    'dataIndex': 'select示例1',
+                    'renderOptions': {
+                        'renderType': 'select'
+                    },
+                },
+                {
+                    'title': 'placeholder示例',
+                    'dataIndex': 'placeholder示例',
+                    'editable': True,
+                    'width': '20%',
+                    'editOptions': {
+                        'placeholder': '请输入内容'
+                    },
+                },
+                {
+                    'title': 'int型示例',
+                    'dataIndex': 'int型示例',
+                    'editable': True,
+                },
+                {
+                    'title': 'float型示例',
+                    'dataIndex': 'float型示例',
+                    'editable': True,
+                },
+                {
+                    'title': 'str型示例',
+                    'dataIndex': 'str型示例',
+                    'editable': True,
+                },
+                {
+                    'title': '日期时间示例',
+                    'dataIndex': '日期时间示例',
+                    'editable': True,
+                },
+            ],
+            data=[
+                {
+                    'select示例1': {
+                        'options': [
+                            {
+                                'label': f'选项{j}',
+                                'value': f'选项{j}',
+                            }
+                            for j in range(5)
+                        ],
+                        'allowClear': True,
+                        'placeholder': '请选择',
+                    },
+                    'int型示例': 123,
+                    'float型示例': 1.23,
+                    'str型示例': '示例字符',
+                    '日期时间示例': datetime.now().strftime(
+                        '%Y-%m-%d %H:%M:%S'
+                    ),
+                }
+            ]
+            * 3,
+            bordered=True,
+            tableLayout='fixed',
+        )
+    ],
+    style={'padding': 100},
+)
+
+
+if __name__ == '__main__':
+    app.run(debug=True)