about use antd(ant-design) components

[seewindcn]

I am trying use ant-design in reflex, to make a admin web;
There are some questions:

1. antd usage with next.js, want to rewrite _document.js.jinja2, like:

function MyDocument() {
  return (
    {{utils.render(document, indent_width=0)}}
  )
}

MyDocument.getInitialProps = async (ctx) => {
  const cache = createCache();
  const originalRenderPage = ctx.renderPage;
  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: (App) => (props) => (
        <StyleProvider cache={cache}>
          <App {...props} />
        </StyleProvider>
      ),
    });
  const initialProps = await Document.getInitialProps(ctx);
  const style = extractStyle(cache, true);
  return {
    ...initialProps,
    styles: (
      <>
        {initialProps.styles}
          {% raw %}
        <style dangerouslySetInnerHTML={{ __html: style }} />
          {% endraw %}
      </>
    ),
  };
};

export default MyDocument;

Is reflex can support this natively?

2. There are various types of component's properties, like:

• Menu.items: ItemType[], it's array which can contain anyone component;

<Menu className={`border-2 border-gray-300`} items={[
  {
    "key": "nav1",
    "label": "SubNav 1",
    "icon": <UserOutlined/>,
.....

• FloatButton.icon: ReactNode, it is Icon component;

<FloatButton
      shape="circle"
      type="primary"
      style={{ right: 94 }}
      icon={<CustomerServiceOutlined />}
    />

• badge.count: ReactNode

const [show, setShow] = useState(true);
....
<Badge count={show ? 25 : 0} />

How to wrap these properties?

sorry about my poor english and really looking forward to any response! Thanks

[seewindcn]

more properties:

• Table.columns: ColumnsType[], it's render property is function(text, record, index) {}.
• Table.onCell: function(record, rowIndex), use to Set props on per cell;

[seewindcn]

• Table.rowSelection

<Table
        rowSelection={{
          type: selectionType,
          onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
          },
          getCheckboxProps: (record: DataType) => ({
    disabled: record.name === 'Disabled User', // Column configuration not to be checked
    name: record.name,
          }),
        }}

[seewindcn]

https://github.com/seewindcn/reflex-antd
it is very prototype, just wrap a few components, and just work for me.
brief:

• base.py: patch_all:
  • custom _document.js.jinja2
  • vars._extract_var_data hack to support Component property:

class FloatButton(AntdComponent):
    tag = "FloatButton"

    icon: Optional[Var[IconComponent]]

• base.py: ContainVar, ExFormatter, and some classes: for extend support various property type, like:
  • Menu.items
  • Table.columns

and support various objects:
- Comonpent
- State var
- Js
- EventHandler
- Callable
- list, dict

• OrderedSet: for hooks order used in AntdBaseMixin._get_hooks_internal, to support property event hook, like:

display.table(
                data_source=TableState.data_source,
                columns=TableState.get_columns(),
                row_selection=helper.contains(
                    _name_='row_selection',
                    type=TableState.row_select_type,
                    selected_row_keys=TableState.selected_row_keys,  # this feature
                    onChange=helper.js_event(TableState.on_row_select_change, 'keys', 'rows'),
                ),