cnfeffery / feffery-antd-components Goto Github PK

View Code? Open in Web Editor NEW

241.0 6.0 24.0 7.45 MB

Dash + Antd = 😍

Home Page: http://fac.feffery.tech

License: MIT License

Python 33.53% Shell 0.01% JavaScript 66.20% CSS 0.26%

plotly-dash antd python

feffery-antd-components's Introduction

feffery-antd-components

简体中文 | English

feffery-components计划子项目，Plotly Dash第三方组件库，基于Antd，将超多具有丰富功能的通用网页常用交互组件引入Dash的生态中 🥳，最新稳定版本：0.2.11

1 最新版本安装方式

pip install feffery-antd-components -U

2 最新预发布版本安装方式

Note

最新预发布版本（2024-04-22）：0.3.0rc11

pip install feffery-antd-components --pre -U

3 静态资源 CDN 加速方法

# 非debug模式下对Dash()传入参数serve_locally=False会强制浏览器端从unpkg cdn加载各个依赖的
# xxx.min.js等静态资源，从而避免占用服务器带宽，适合中小型站点加速访问
app = dash.Dash(serve_locally=False)

4 在线文档

文档地址

5 国际化

fac中的部分组件具有自带的文案信息，通过参数locale可以进行国际化设置，默认为'zh-cn'即简体中文，你可以设置为'en-us'来使用英文文案，譬如：

fac.AntdDatePicker(locale='en-us')

6 贡献者

feffery-antd-components's People

Contributors

Stargazers

Watchers

feffery-antd-components's Issues

很好用

非常好用，请问0.0.1rc8稳定版快发布了吧

为AntdTable可编辑的表格设计基于正则表达式的内容格式限制功能

如题，当不符合用户预设格式时，本次单元格的编辑将不会生效

Cannot read properties of null (reading 'toLowerCase')

使用table的select功能，每次选定一行，然后对数据加工，通过另一个表格显示出加工后的数据，随机报以下错误。

(This error originated from the built-in JavaScript code that runs Dash apps. Click to see the full stack trace or open your browser's console.)
TypeError: Cannot read properties of null (reading 'toLowerCase')

at Object.eval [as onCell] (eval at render (http://127.0.0.1:8050/_dash-component-suites/feffery_antd_components/feffery_antd_components.v0_2_0m1661232582.min.js:1:1601493), <anonymous>:5:63)

at http://127.0.0.1:8050/_dash-component-suites/feffery_antd_components/feffery_antd_components.v0_2_0m1661232582.min.js:1:922928

at Array.map (<anonymous>)

at p (http://127.0.0.1:8050/_dash-component-suites/feffery_antd_components/feffery_antd_components.v0_2_0m1661232582.min.js:1:922584)

at renderWithHooks (http://127.0.0.1:8050/_dash-component-suites/dash/deps/[email protected]_6_1m1661224876.14.0.js:14938:20)

at updateFunctionComponent (http://127.0.0.1:8050/_dash-component-suites/dash/deps/[email protected]_6_1m1661224876.14.0.js:17169:22)

at beginWork (http://127.0.0.1:8050/_dash-component-suites/dash/deps/[email protected]_6_1m1661224876.14.0.js:18745:18)

at HTMLUnknownElement.callCallback (http://127.0.0.1:8050/_dash-component-suites/dash/deps/[email protected]_6_1m1661224876.14.0.js:182:16)

at Object.invokeGuardedCallbackDev (http://127.0.0.1:8050/_dash-component-suites/dash/deps/[email protected]_6_1m1661224876.14.0.js:231:18)

at invokeGuardedCallback (http://127.0.0.1:8050/_dash-component-suites/dash/deps/[email protected]_6_1m1661224876.14.0.js:286:33)

能否在AntdTable column渲染的同时实现过滤？

AntdTable column 加上 'renderType': 'link'后，

columns = [
'dataIndex':'id',
'renderOptions': {
'renderType': 'link',
'renderLinkText': ''
}
]
再加 'filterSearch': True，过滤不能正常进行。
fac.AntdTable(
filterOptions={
'id': {
'filterSearch': True
}
}
)

Tree draggable property

Hello,
I would like to use the draggable property of the Tree component in Dash.
Is it possible ? If not, how could it be possible ?

Thank you very much.
Regards.

小白问题，AntdDraggerUpload上传文件后，如何读取文件，文件默认存储在哪

AntdDatePicker shows "invalid date"

Using the month picker, en locale., and display format YYYY-MM. when the picker is created with a preselected value (e.g "2022-03", the picker will display "invalid date" and nothing is selectable

upload会支持多文件上传吗

如题

English Documentation

CNFeffery I saw somewhere you wanted to add English documentation and wanted help. I myself use Dash a bit, and just started learning React, I have a website with a friend built in python dash and he did most of the code in python dash, however, I was searching for antd in python dash. Since I like antd buttons and components with respect to look more than the bootstrap components. I myself don't know the language it is in now.

AntdTable超链接模式下可以每行自定义renderLinkText吗？目前好像只能通过renderOptions设定，这样的话所有行的text都是一样的。

请问使用了服务器段渲染模式后，AntdTable->filterOptions->filterCustomItems是不是就不能自动生成了?

使用了服务器段模式后，filterCustomItems 为空，不会自动生成了？

AntdTreeSelect - support showCheckedStrategy

Hi, would it be possible to add support for showCheckedStrategy parameter for AntdTreeSelect?

Thanks!

fac.AntdDatePicker独占一行

当把fac.AntdDatePicker放在dbc.Container或者dbc.Col中时会独占一行

代码如下：

import dash
import dash_bootstrap_components as dbc
import feffery_antd_components as fac

app = dash.get_app()

dash.register_page(__name__, path='/')

layout = dbc.Container(
    [
        fac.AntdSwitch(),
        fac.AntdDatePicker(),
    ],
)

请问，可以让fac.AntdDatePicker和fac.AntdSwitch在一行显示吗

请问upload 功能是否支持设置默认多文件路径，只需要用户click一下按钮就可以上传

需求原因是需要读取的data存在网盘上，但是server没有权限访问网盘，用户有网盘访问权限，是不是实现上只能走 upload的方式了，如果这样的话，尽量对用户友好，考虑通过默认写上多文件网盘路径，用户最终确认上传就可以读取数据，请问有更好建议，或者当前upload功能是否能实现？

给AntdTable的迷你图tooltips添加描述信息

AntdTable 迷你图tooltips 默认只显示数值，可视化效果不理想。
可否在TinyLine, TinyArea, TinyColumn里，传入类似Ant design官方示例里的信息 https://charts.ant.design/zh/examples/tiny/tiny-column#basic-column

tooltip: {
  customContent: function (x, data) {
    return `NO.${x}: ${data[0]?.data?.y.toFixed(2)}`;
  },
},

譬如，传入跟data数组等长的string array，提取对应位置的信息，完善迷你图数值提示信息。

AntdTree "multiple" option not respected for each node with checkStrictly=False

e.g.

.
├── A
│   ├── AA
│   └── AB    
│       ├── ABA
│       └── ABB
└── B

If checkStrictly=False, A has multiple=True and AB has multiple=False:

Expected behaviour:

Can select AA AND AB
Can only select ABA OR ABB (and checkStrictly would cause A and AB to be halfChecked)

This does not currently happen

Thank you!

[TODO] update with antd v5 in fac 0.3.x

破坏性更新

移除AntdTabPane组件 9daa0c6

兼容性过渡

兼容保留相关组件的bordered参数，并在底层妥善处理向variant参数的转换
兼容保留AntdComment 8e82dba
兼容保留AntdPageHeader 0b13945
替换底层相关moment.js依赖为dayjs 792c21c
AntdDropdown底层使用menu代替overlay实现菜单渲染 2c1c3c2

新增组件

悬浮按钮AntdFloatButton 2f1b7c0
悬浮按钮组AntdFloatButtonGroup 1adc902
弹性布局AntdFlex 1349db8
颜色选择器AntdColorPicker 24e1569
二维码AntdQRCode 235aff2
漫游式引导AntdTour 1699d1a
图片组合 AntdImageGroup 8573220
可拖拽面板组件 AntdDraggablePanel de6eb31
可选择标签 AntdCheckableTag

组件增强

新增utils子模块提供常用快捷操作

AntdTree树结构工具类TreeUtils
回调函数字典化Output缺失键值对自动填充函数fill_output_dict
pandas数据框快捷转AntdTable函数df2table

新增templates子模块提供常用快捷页面模板生成

fac.AntdTable 想使用英文模式，参数设置locale='en-us'后，部分地方还是中文

请问这个可以优化吗，还是我的使用方式有问题

Calendar近期有计划吗

走马灯部件的使用好像有点麻烦

当我使用fac.AntdCarousel时，如果外层嵌套了fac.AntdLayout，则会发现走马灯无法显示的情况。但如果外层嵌套注释掉，又能正常显示

可否开发一个类似React Flow的节点图组件？

譬如集成 https://reactflow.dev/ ，可以方便的做工作流？

AntdDatePicker allowClear参数在dash里无效

AntdDatePicker allowClear这个参数在dash里无效，我翻了一下代码发现是这个参数忘记传到 and组件里了，

Cannot read properties of null (reading 'toString')

使用了table的功能，根据过滤条件会显示过滤后的数据，会随机的报以下 ERROR，像是哪里timeout了

🛑 Errors (1)
×
⛑️
Cannot read properties of null (reading 'toString')
8:58:25 PM
Cannot read properties of null (reading 'toString')
(This error originated from the built-in JavaScript code that runs Dash apps. Click to see the full stack trace or open your browser's console.)
TypeError: Cannot read properties of null (reading 'toString')

at http://127.0.0.1:8050/_dash-component-suites/feffery_antd_components/feffery_antd_components.v0_2_0m1660295865.min.js:1:1609391

at Array.map (<anonymous>)

at _loop (http://127.0.0.1:8050/_dash-component-suites/feffery_antd_components/feffery_antd_components.v0_2_0m1660295865.min.js:1:1609361)

at AntdTable.render (http://127.0.0.1:8050/_dash-component-suites/feffery_antd_components/feffery_antd_components.v0_2_0m1660295865.min.js:1:1609694)

at finishClassComponent (http://127.0.0.1:8050/_dash-component-suites/dash/deps/[email protected]_6_0m1658306675.14.0.js:17295:33)

at updateClassComponent (http://127.0.0.1:8050/_dash-component-suites/dash/deps/[email protected]_6_0m1658306675.14.0.js:17245:26)

at beginWork (http://127.0.0.1:8050/_dash-component-suites/dash/deps/[email protected]_6_0m1658306675.14.0.js:18755:18)

at HTMLUnknownElement.callCallback (http://127.0.0.1:8050/_dash-component-suites/dash/deps/[email protected]_6_0m1658306675.14.0.js:182:16)

at Object.invokeGuardedCallbackDev (http://127.0.0.1:8050/_dash-component-suites/dash/deps/[email protected]_6_0m1658306675.14.0.js:231:18)

at invokeGuardedCallback (http://127.0.0.1:8050/_dash-component-suites/dash/deps/[email protected]_6_0m1658306675.14.0.js:286:33)

支持 persistence

https://dash.plotly.com/persistence#for-component-developers

AntdCollapse的is_open不能通过回调改变状态

AntdDatePicker disabledDatesStrategy need to allow start-end date

I have have an AntdDatePicker component, and have set picker=month.

I am currently trying to set a disabledDatesStrategy allowing everything from August 2021 to March 2022, and nothing else.

The docs are not clear on how to do this.

Thank you!

文档中AntdAlert的辅助文本参数description未设置

AntdAlert的辅助文本在文档中说明为参数description，但是组件事实上没有这个参数，辅助文本是直接给字符串，事实上是作为children传入的

Tooltips in Treeview items

Currently, if hovering over an element in fac.AntdTree, there is a popup menu repeating the displayed text.

I would like to be able to customise this, e.g. with fac.ToolTip

文档中组件的主要参数说明列出style

很多组件，比如AntdParagraph主要参数的文档说明中没有提及style，但是其实是支持的，粗心的话在只翻文档不看help的时候可能会误以为模块不像原生组件一样支持传入自定css（比如我😂）

[Feature Request]为AntdCascader添加扁平结构自动转树结构特性

参考AntdTree、AntdTreeSelect现有相关功能

table单元格可以做下拉菜单吗

如题

表格添加参数autoIgnorePagination运行出错

请问我这样写对么，怎么运行的时候提示received an unexpected keyword argument: autoIgnorePagination
代码如下：

fac.AntdTable(
    columns=[
        {
            'title': '列1',
            'dataIndex': "列1索引"
        },
        {
            'title': '列2',
            'dataIndex': '列2索引'
        }
    ],
    data=[
        {
            '列1索引': i,
            '列2索引': i
        }
        for i in range(5)
    ],
    autoIgnorePagination=True
)

app.layout = html.Div(
    [
        fac.AntdSteps(
            id="steps",
            steps=[{"title": f"步骤{i}"} for i in range(5)],
            current=3
        ),
        fac.AntdButton("下一步", id="next"),
        fac.AntdButton("上一步", id="last"),
    ]
)


@app.callback(
    Output("steps", "current"),
    Input("next", "nClicks"),
    State("steps", "current"),
    prevent_initial_call=True,
)
def callback_1(nClicks, current):
    return current + 1


@app.callback(
    Output("steps", "current"),
    Input("last", "nClicks"),
    State("steps", "current"),
    prevent_initial_call=True,
)
def callback_2(nClicks, current):
    return current - 1

当有两个回调函数涉及同一个id时就会出现所有回调失效的状态，这个现象再原生组件以及dbc中也存在，请问这是哪里使用有问题吗？或者有什么内部逻辑设定？

app.layout = html.Div(
    [
        html.P(
            "无状态",
            id="steps",
        ),
        dbc.Button("下一步", id="next"),
        dbc.Button("上一步", id="last"),
    ]
)


@app.callback(
    Output("steps", "children"),
    Input("next", "n_clicks"),
    prevent_initial_call=True,
)
def callback_1(n_clicks):
    return '下一步'


@app.callback(
    Output("steps", "children"),
    Input("last", "n_clicks"),
    prevent_initial_call=True,
)
def callback_2(n_clicks):
    return '上一步'

下面是可复现的代码.

import dash
import dash_html_components as html
import feffery_antd_components as fac

from faker import Faker

faker = Faker(locale='zh_CN')


def main():
    app = dash.Dash(__name__)

    app.layout = html.Div([

        fac.AntdTable(
            columns=[
                {
                    'title': '国家名示例',
                    'dataIndex': '国家名示例',
                    'renderOptions': {'renderType': 'button'},
                },
                {
                    'title': '省份名示例',
                    'dataIndex': '省份名示例'
                },
                {
                    'title': '城市名示例',
                    'dataIndex': '城市名示例'
                },
                {
                    'title': '日期示例',
                    'dataIndex': '日期示例'
                },
                {
                    'title': '邮编示例',
                    'dataIndex': '邮编示例'
                }
            ],
            bordered=True,
            data=[
                {
                    'key': i,
                    '国家名示例': {'content': faker.country(), 'type': 'text'},
                    '省份名示例': faker.province(),
                    '城市名示例': faker.city_name(),
                    '日期示例': faker.date(pattern="%Y-%m-%d", end_datetime=None),
                    '邮编示例': faker.postcode()
                }
                for i in range(3)
            ],
            sortOptions={
                'sortDataIndexes': ['国家名示例']
            }
        ),
    ])

    app.run_server(debug=True)


if __name__ == '__main__':
    main()

recentlySwtichRow: record,

Should be recentlySwitchRow and recentlySwitchStatus .

可以做一个description组件吗

https://ant.design/components/descriptions-cn/

Treeview Tooltips circular structure error

Following #41, I have found 2 bugs:

If setting tooltipProps{"title": "text"} instead of {'title':'text'}, Dash shows a circular error
If updating the treeData data directly, editing tooltipProps results in the same circular error (other properties can be updated dynamically without issue)

`TypeError: Converting circular structure to JSON

--> starting at object with constructor 'Array'

|     index 0 -> object with constructor 'Object'

|     property 'title' -> object with constructor 'Object'

|     ...

|     property 'props' -> object with constructor 'Object'

--- property 'treeData' closes the circle

at JSON.stringify (<anonymous>)

at handleServerside (http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_6_2m1664201321.dev.js:795:19)

at _callee$ (http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_6_2m1664201321.dev.js:1169:24)

at tryCatch (http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_6_2m1664201321.dev.js:474:2404)

at Generator._invoke (http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_6_2m1664201321.dev.js:474:1964)

at Generator.next (http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_6_2m1664201321.dev.js:474:3255)

at asyncGeneratorStep (http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_6_2m1664201321.dev.js:482:103)

at _next (http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_6_2m1664201321.dev.js:484:194)

at http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_6_2m1664201321.dev.js:484:364

at new Promise (<anonymous>)`