feffery_antd_components 0.4.3-rc7 → 0.4.3

package/feffery_antd_components/package-info.json

@@ -1,6 +1,6 @@
 {
     "name": "feffery_antd_components",
-    "version": "0.4.3-rc7",
+    "version": "0.4.3",
     "description": "Best implementation of Antd components in Plotly Dash.",
     "repository": {
         "type": "git",
@@ -71,12 +71,30 @@
         "react-docgen": "^5.4.3",
         "react-dom": "^18.3.1",
         "style-loader": "^0.23.1",
-        "styled-jsx": "^3.2.1",
+        "styled-jsx": "^4.0.0",
         "webpack": "4.36.1",
         "webpack-bundle-analyzer": "^4.7.0",
         "webpack-cli": "^3.3.6",
         "webpack-serve": "3.1.0"
     },
+    "overrides": {
+        "@ant-design/charts": {
+            "@ant-design/icons": "$@ant-design/icons",
+            "antd": "$antd"
+        },
+        "react-fast-marquee": {
+            "react": "$react",
+            "react-dom": "$react-dom"
+        },
+        "react-highlight-words": {
+            "react": "$react",
+            "react-dom": "$react-dom"
+        },
+        "react-text-loop": {
+            "react": "$react",
+            "react-dom": "$react-dom"
+        }
+    },
     "babel": {
         "presets": [
             "@babel/preset-react",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "feffery_antd_components",
-    "version": "0.4.3-rc7",
+    "version": "0.4.3",
     "description": "Best implementation of Antd components in Plotly Dash.",
     "repository": {
         "type": "git",
@@ -71,12 +71,30 @@
         "react-docgen": "^5.4.3",
         "react-dom": "^18.3.1",
         "style-loader": "^0.23.1",
-        "styled-jsx": "^3.2.1",
+        "styled-jsx": "^4.0.0",
         "webpack": "4.36.1",
         "webpack-bundle-analyzer": "^4.7.0",
         "webpack-cli": "^3.3.6",
         "webpack-serve": "3.1.0"
     },
+    "overrides": {
+        "@ant-design/charts": {
+            "@ant-design/icons": "$@ant-design/icons",
+            "antd": "$antd"
+        },
+        "react-fast-marquee": {
+            "react": "$react",
+            "react-dom": "$react-dom"
+        },
+        "react-highlight-words": {
+            "react": "$react",
+            "react-dom": "$react-dom"
+        },
+        "react-text-loop": {
+            "react": "$react",
+            "react-dom": "$react-dom"
+        }
+    },
     "babel": {
         "presets": [
             "@babel/preset-react",

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

@@ -49,13 +49,15 @@ Those elements have the following types:
   - `title` (a list of or a singular dash component, string or number; required): 必填，当前字段标题
   - `dataIndex` (String; required): 必填，当前字段唯一识别id
   - `group` (String | Array of Strings; optional): 当前字段所属分组信息，用于渲染多级表头
-  - `renderOptions` (optional): 配置字段[再渲染模式](/AntdTable-rerender)相关参数. renderOptions has the following type: lists containing elements 'renderType', 'renderLinkText', 'renderButtonSplit', 'renderButtonPopConfirmProps', 'miniChartColor', 'tooltipCustomContent', 'progressOneHundredPercentColor', 'progressShowPercent', 'progressPercentPrecision', 'progressPercentPosition', 'progressStrokeLinecap', 'progressSize', 'progressColor', 'ringProgressFontSize', 'dropdownProps'.
+  - `renderOptions` (optional): 配置字段[再渲染模式](/AntdTable-rerender)相关参数. renderOptions has the following type: lists containing elements 'renderType', 'renderLinkText', 'likeDccLink', 'renderButtonSplit', 'renderButtonPopConfirmProps', 'miniChartColor', 'tooltipCustomContent', 'progressOneHundredPercentColor', 'progressShowPercent', 'progressPercentPrecision', 'progressPercentPosition', 'progressStrokeLinecap', 'progressSize', 'progressColor', 'ringProgressFontSize', 'dropdownProps'.
 Those elements have the following types:
   - `renderType` (a value equal to: 'link', 'ellipsis', 'copyable', 'ellipsis-copyable', 'tags', 'status-badge', 'image', 'custom-format', 'corner-mark', 'row-merge', 'dropdown', 'dropdown-links', 'image-avatar', 'mini-line', 'mini-bar', 'mini-progress', 'mini-ring-progress', 'mini-area', 'button', 'checkbox', 'switch', 'select'; optional): 再渲染类型，可选项有`'link'`、`'ellipsis'`、`'copyable'`、`'ellipsis-copyable'`、`'tags'`、`'status-badge'`、`'image'`
 、`'custom-format'`、`'corner-mark'`、`'row-merge'`、`'dropdown'`、`'dropdown-links'`、`'image-avatar'`
 、`'mini-line'`、`'mini-bar'`、`'mini-progress'`、`'mini-ring-progress'`、`'mini-area'`
 、`'button'`、`'checkbox'`、`'switch'`、`'select'`
   - `renderLinkText` (String; optional): 当`renderType='link'`时，统一设置渲染链接文本内容
+  - `likeDccLink` (Bool; optional): 当`renderType`为`'link'`、`'button'`时，统一设置链接跳转行为是否采用`dcc.Link`模式
+默认值：`false`
   - `renderButtonSplit` (Bool; optional): 当`renderType='button'`时，控制多个按钮之间是否添加分割线
   - `renderButtonPopConfirmProps` (optional): 当`renderType='button'`时，配置气泡确认框相关参数. renderButtonPopConfirmProps has the following type: lists containing elements 'title', 'okText', 'cancelText'.
 Those elements have the following types:

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

@@ -219,6 +219,11 @@ AntdTable.propTypes = {
                  * 当`renderType='link'`时，统一设置渲染链接文本内容
                  */
                 renderLinkText: PropTypes.string,
+                /**
+                 * 当`renderType`为`'link'`、`'button'`时，统一设置链接跳转行为是否采用`dcc.Link`模式
+                 * 默认值：`false`
+                 */
+                likeDccLink: PropTypes.bool,
                 /**
                  * 当`renderType='button'`时，控制多个按钮之间是否添加分割线
                  */

package/src/lib/components/navigation/AntdMenu.react.js

@@ -1,5 +1,5 @@
 // react核心
-import React, { Component, useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 // antd核心
 import { Menu, Button } from 'antd';
@@ -11,33 +11,14 @@ import {
 // 辅助库
 import { get, has, isArray, isUndefined, isNull, isString, cloneDeep } from 'lodash';
 import { pickBy } from 'ramda';
-import isAbsoluteUrl from 'is-absolute-url';
 import { useLoading } from '../utils';
 // 自定义hooks
 import useCss from '../../hooks/useCss';
+// 内部组件
+import { UtilsLink } from '../../internal_components/UtilsLink.react';
 
 const { SubMenu, Item, ItemGroup, Divider } = Menu;
 
-// 自定义UtilsLink
-function CustomEvent(event, params) {
-    params = params || {
-        bubbles: false,
-        cancelable: false,
-        detail: undefined
-    };
-    const evt = document.createEvent('CustomEvent');
-    evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
-    return evt;
-}
-CustomEvent.prototype = window.Event.prototype;
-
-function isExternalLink(external_link, href) {
-    if (isUndefined(external_link) || isNull(external_link)) {
-        return isAbsoluteUrl(href);
-    }
-    return external_link;
-}
-
 function findByKey(array, key) {
     for (let item of array) {
         if (get(item, 'props.key') === key) {
@@ -87,63 +68,6 @@ const getLevelKeys = (items1) => {
     return key;
 };
 
-class UtilsLink extends Component {
-
-    constructor(props) {
-        super(props);
-        this.updateLocation = this.updateLocation.bind(this);
-    }
-
-    updateLocation(e) {
-        const hasModifiers = e.metaKey || e.shiftKey || e.altKey || e.ctrlKey;
-        if (hasModifiers) {
-            return;
-        }
-        if (this.props.disabled) {
-            e.preventDefault();
-            return;
-        }
-        if (this.props.preOnClick) {
-            this.props.preOnClick();
-        }
-        const { external_link, href } = this.props;
-        if (href && !isExternalLink(external_link, href)) {
-            // prevent anchor from updating location
-            e.preventDefault();
-            const { href } = this.props;
-            window.history.pushState({}, '', href);
-            window.dispatchEvent(new CustomEvent('_dashprivate_pushstate'));
-            // scroll back to top
-            window.scrollTo(0, 0);
-        }
-    }
-
-    render() {
-        const {
-            children,
-            external_link,
-            preOnClick,
-            target,
-            href,
-            download,
-            ...otherProps
-        } = this.props;
-        const linkIsExternal = href && isExternalLink(external_link, href);
-
-        return (
-            <a
-                href={href}
-                target={linkIsExternal ? target : null}
-                download={download && linkIsExternal ? download : null}
-                {...otherProps}
-                onClick={e => this.updateLocation(e)}
-            >
-                {children}
-            </a>
-        );
-    }
-}
-
 // 字符串 -> 组件
 const str2Jsx = new Map([
     ['SubMenu', SubMenu],

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

@@ -53,6 +53,8 @@ import useStickyOffset from '../hooks/useStickyOffset';
 import PropsContext from '../contexts/PropsContext';
 // 参数类型
 import { propTypes, defaultProps } from '../components/dataDisplay/AntdTable.react';
+// 内部组件
+import { UtilsLink } from '../internal_components/UtilsLink.react';
 
 const { Text } = Typography;
 
@@ -1005,12 +1007,22 @@ const AntdTable = (props) => {
                             return null;
                         }
                         return (
-                            <a href={content.disabled ? undefined : content.href}
-                                target={content.target ? content.target : '_blank'}
-                                disabled={content.disabled}>
-                                {content.content ? content.content : columns[i]['renderOptions']['renderLinkText']}
-                            </a>
-                        )
+                            columns[i]['renderOptions']['likeDccLink'] ?
+                                (
+                                    <UtilsLink href={content.disabled ? undefined : content.href}
+                                        target={content.target ? content.target : '_blank'}
+                                        disabled={content.disabled}>
+                                        {content.content ? content.content : columns[i]['renderOptions']['renderLinkText']}
+                                    </UtilsLink>
+                                ) :
+                                (
+                                    <a href={content.disabled ? undefined : content.href}
+                                        target={content.target ? content.target : '_blank'}
+                                        disabled={content.disabled}>
+                                        {content.content ? content.content : columns[i]['renderOptions']['renderLinkText']}
+                                    </a>
+                                )
+                        );
                     }
                 } else {
                     columns[i]['render'] = content => {
@@ -1018,12 +1030,22 @@ const AntdTable = (props) => {
                             return null;
                         }
                         return (
-                            <a href={content.disabled ? undefined : content.href}
-                                target={content.target ? content.target : '_blank'}
-                                disabled={content.disabled}>
-                                {content.content ? content.content : ' '}
-                            </a>
-                        )
+                            columns[i]['renderOptions']['likeDccLink'] ?
+                                (
+                                    <UtilsLink href={content.disabled ? undefined : content.href}
+                                        target={content.target ? content.target : '_blank'}
+                                        disabled={content.disabled}>
+                                        {content.content ? content.content : ' '}
+                                    </UtilsLink>
+                                ) :
+                                (
+                                    <a href={content.disabled ? undefined : content.href}
+                                        target={content.target ? content.target : '_blank'}
+                                        disabled={content.disabled}>
+                                        {content.content ? content.content : ' '}
+                                    </a>
+                                )
+                        );
                     }
                 }
             }
@@ -1475,7 +1497,9 @@ const AntdTable = (props) => {
                                                 key={idx}
                                                 onClick={(e) => {
                                                     // 阻止事件冒泡
-                                                    e.stopPropagation();
+                                                    if ( !columns[i]['renderOptions']['likeDccLink'] ) {
+                                                        e.stopPropagation();
+                                                    }
                                                     setProps({
                                                         // 忽略组件型字段键值对
                                                         recentlyButtonClickedRow: omitBy(record, value => value?.$$typeof),
@@ -1491,7 +1515,7 @@ const AntdTable = (props) => {
                                                 variant={content_.variant}
                                                 danger={content_.danger}
                                                 disabled={content_.disabled}
-                                                href={content_.href}
+                                                href={columns[i]['renderOptions']['likeDccLink'] ? undefined : content_.href}
                                                 target={content_.target}
                                                 style={content_.style}
                                                 icon={
@@ -1518,11 +1542,23 @@ const AntdTable = (props) => {
                                             content_.tooltip ?
                                                 (
                                                     <Tooltip title={content_.tooltip?.title} placement={content_.tooltip?.placement}>
-                                                        {buttonElement}
+                                                        {
+                                                            (
+                                                                columns[i]['renderOptions']['likeDccLink'] ?
+                                                                    (
+                                                                        <UtilsLink key={idx} href={content_.href}>{buttonElement}</UtilsLink>
+                                                                    ) :
+                                                                    buttonElement
+                                                            )
+                                                        }
                                                     </Tooltip>
                                                 ) :
                                                 (
-                                                    buttonElement
+                                                    columns[i]['renderOptions']['likeDccLink'] ?
+                                                        (
+                                                            <UtilsLink key={idx} href={content_.href}>{buttonElement}</UtilsLink>
+                                                        ) :
+                                                        buttonElement
                                                 )
                                         );
                                     }

package/src/lib/internal_components/UtilsLink.react.js

@@ -0,0 +1,82 @@
+import { Component } from "react";
+import isAbsoluteUrl from 'is-absolute-url';
+import { isUndefined, isNull } from 'lodash';
+
+function CustomEvent(event, params) {
+    params = params || {
+        bubbles: false,
+        cancelable: false,
+        detail: undefined,
+    };
+    const evt = document.createEvent("CustomEvent");
+    evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
+    return evt;
+}
+CustomEvent.prototype = window.Event.prototype;
+
+function isExternalLink(external_link, href) {
+    if (isUndefined(external_link) || isNull(external_link)) {
+        return isAbsoluteUrl(href);
+    }
+    return external_link;
+}
+
+class UtilsLink extends Component {
+    constructor(props) {
+        super(props);
+        this.updateLocation = this.updateLocation.bind(this);
+    }
+
+    updateLocation(e) {
+        const hasModifiers = e.metaKey || e.shiftKey || e.altKey || e.ctrlKey;
+        if (hasModifiers) {
+            return;
+        }
+        if (this.props.disabled) {
+            e.preventDefault();
+            return;
+        }
+        if (this.props.preOnClick) {
+            this.props.preOnClick();
+        }
+        const { external_link, href } = this.props;
+        if (href && !isExternalLink(external_link, href)) {
+            // prevent anchor from updating location
+            e.preventDefault();
+            const { href } = this.props;
+            window.history.pushState({}, "", href);
+            window.dispatchEvent(new CustomEvent("_dashprivate_pushstate"));
+            // scroll back to top
+            window.scrollTo(0, 0);
+        }
+    }
+
+    render() {
+        const {
+            children,
+            external_link,
+            preOnClick,
+            target,
+            href,
+            download,
+            disabled,
+            ...otherProps
+        } = this.props;
+        const linkIsExternal = href && isExternalLink(external_link, href);
+
+        return (
+            <a
+                href={href}
+                target={linkIsExternal ? target : null}
+                download={download && linkIsExternal ? download : null}
+                disabled={disabled}
+                {...otherProps}
+                onClick={(e) => this.updateLocation(e)}
+            >
+                {children}
+            </a>
+        );
+    }
+}
+
+export { UtilsLink };

package/tests/dataDisplay/AntdTable/feat_button_mode_like_dcc_link.py

@@ -0,0 +1,125 @@
+if True:
+    import sys
+
+    sys.path.append('../../../')
+    import json
+    import dash
+    from dash import html
+    import feffery_antd_components as fac
+    from dash.dependencies import Input, Output, State
+
+app = dash.Dash(__name__)
+
+app.layout = html.Div(
+    [
+        fac.AntdSwitch(),
+        fac.AntdTable(
+            id='table-rerender-button-demo',
+            columns=[
+                {
+                    'title': 'button示例1',
+                    'dataIndex': 'button示例1',
+                    'renderOptions': {
+                        'renderType': 'button',
+                        'likeDccLink': True,
+                    },
+                },
+                {
+                    'title': 'button示例2',
+                    'dataIndex': 'button示例2',
+                    'renderOptions': {
+                        'renderType': 'button'
+                    },
+                },
+                {
+                    'title': 'button示例3',
+                    'dataIndex': 'button示例3',
+                    'renderOptions': {
+                        'renderType': 'button',
+                        'renderButtonPopConfirmProps': {
+                            'title': '确认执行？',
+                            'okText': '确认',
+                            'cancelText': '取消',
+                        },
+                    },
+                },
+            ],
+            data=[
+                {
+                    'button示例1': {
+                        'content': f'按钮1-{i}',
+                        'type': 'link',
+                        'href': f'/item{i}',
+                        'custom': 'balabalabalabala',
+                    },
+                    'button示例2': [
+                        {
+                            'content': f'按钮2-{i}-{j}',
+                            'type': 'primary',
+                            'custom': 'balabalabalabala',
+                        }
+                        for j in range(1, 3)
+                    ],
+                    'button示例3': [
+                        {
+                            'content': f'按钮3-{i}-{j}',
+                            'type': 'dashed',
+                            'danger': True,
+                            'custom': 'balabalabalabala',
+                        }
+                        for j in range(1, 3)
+                    ],
+                }
+                for i in range(1, 4)
+            ],
+            bordered=True,
+        ),
+        html.Pre(id='table-rerender-button-demo-output'),
+    ],
+    style={'padding': 100},
+)
+
+
+@app.callback(
+    Output('table-rerender-button-demo-output', 'children'),
+    Input('table-rerender-button-demo', 'nClicksButton'),
+    [
+        State(
+            'table-rerender-button-demo', 'clickedContent'
+        ),
+        State(
+            'table-rerender-button-demo', 'clickedCustom'
+        ),
+        State(
+            'table-rerender-button-demo',
+            'recentlyButtonClickedDataIndex',
+        ),
+        State(
+            'table-rerender-button-demo',
+            'recentlyButtonClickedRow',
+        ),
+    ],
+    prevent_initial_call=True,
+)
+def table_rerender_button_demo(
+    nClicksButton,
+    clickedContent,
+    clickedCustom,
+    recentlyButtonClickedDataIndex,
+    recentlyButtonClickedRow,
+):
+    return json.dumps(
+        dict(
+            nClicksButton=nClicksButton,
+            clickedContent=clickedContent,
+            clickedCustom=clickedCustom,
+            recentlyButtonClickedDataIndex=recentlyButtonClickedDataIndex,
+            recentlyButtonClickedRow=recentlyButtonClickedRow,
+        ),
+        indent=4,
+        ensure_ascii=False,
+    )
+
+
+if __name__ == '__main__':
+    app.run(debug=True)

package/tests/dataDisplay/AntdTable/feat_link_mode_like_dcc_link.py

@@ -0,0 +1,49 @@
+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(
+    [
+        fac.AntdSwitch(),
+        fac.AntdTable(
+            columns=[
+                {
+                    'title': 'link示例',
+                    'dataIndex': 'link示例',
+                    'renderOptions': {
+                        'renderType': 'link',
+                        'likeDccLink': True,
+                    },
+                },
+            ],
+            data=[
+                {
+                    'link示例': {
+                        'content': f'{content}仓库',
+                        'href': '/' + content,
+                    },
+                }
+                for content in [
+                    'fac',
+                    'fuc',
+                    'fact',
+                    'fmc',
+                    'flc',
+                ]
+            ],
+            bordered=True,
+            style={'width': 400},
+        ),
+    ],
+    style={'padding': 100},
+)
+
+
+if __name__ == '__main__':
+    app.run(debug=True)