Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Jun 23 13:26
    tangjinzhou closed #531
  • Jun 23 02:53
    wheeljs opened #531
  • Jun 10 07:59
    vagusX commented #479
  • Jun 10 03:56
    Suphonseesanong commented on ecfafee
  • Jun 10 03:56
    Suphonseesanong commented on ecfafee
  • Jun 10 03:56
    Suphonseesanong commented on ecfafee
  • Jun 10 03:56
    Suphonseesanong commented on ecfafee
  • Jun 09 14:03
    vagusX commented #530
  • Jun 09 14:01
    vagusX synchronize #530
  • Jun 08 14:56
    FlorianWendelborn commented #604
  • Jun 08 13:55
    vagusX commented #530
  • Jun 08 13:55
    vagusX commented #530
  • Jun 08 13:53
    vagusX synchronize #530
  • Jun 08 13:31
    vagusX synchronize #530
  • Jun 08 13:25

    vagusX on master

    chore: update https://registry.… (compare)

  • Jun 08 13:25
    vagusX closed #518
  • Jun 08 13:24
    vagusX edited #518
  • Jun 08 13:23
    vagusX closed #523
  • Jun 08 13:22
    vagusX synchronize #530
  • Jun 07 14:52
    vagusX edited as member
RoXoM
@xyy94813

Hi everyone!

I am try to write a unit test of biz components which is base on antd select.
I use @testing-library to write unit test.

This is my unit test code:

it('filter by input', async () => {
    const { getByRole, rerender, container } = render(<MySelect />);

    await act(async () => {
      fireEvent.mouseDown(getByRole('combobox'));
    });

    expect(screen.queryAllByRole('option')).toHaveLength(58); // received => 2
  });

This is my biz component

const OPTOINS = [{ value: 'a', text: 'a' }, {value: 'b', text: ‘b'} ];  // There are 58 options.
const MySelect = forwardRef((props, ref) => {
  const handleSelectFilter = useCallback(
    (input, option) => option.children.includes(input),
    [],
  );
  return (
    <Select
      showSearch
      defaultActiveFirstOption
      filterOption={handleSelectFilter}
      {...props}
      ref={ref}
    >
      {OPTIONS.map(({ value, text }) => (
        <Select.Option key={value}>{text}</Select.Option>
      ))}
    </Select>
  );
});

What should i do to simulate open select option list?
In antd v4, select impl by virtual list.
So, what is the correct excepted value?

ChambreNoire
@ChambreNoire
Hi there. It's normal that after a form.resetFields(['parent']), the 'child' fields (['parent', 'somechild'] etc) are not refreshed ?
Abdullah700
@Abdullah700
hi Im trying to use antd-theme-webpack-plugin with craco and its not working im getting this on the console "Less has finished and no sheets were loaded"
Szalai Laci
@szlaci3

I made a Youtube playlist about AntD English tutorials.

You can watch the videos.
You can add videos, this is how:
Use this link
https://www.youtube.com/playlist?list=PL0JRSe9GT_lfNG_Ju6Wz1Xb5-gYUn3bZt&jct=XGlUR-NvEDkDdNXiJxXBBBG-YhkDJA
Click CONTINUE
Click the Haburger_Plus sign to Save playlist (You become an author of the playlist)
Each time you want to add a video: 3 dots, Save to playlist, choose AntD .

Let me know if you like this idea and how difficult it was to follow the steps.

For now i just added two videos from youtubers, the content should grow in the future, as we all add good videos (!) to it.
Playlist = Library, same thing.
Follow the steps on PC.
Szalai Laci
@szlaci3
~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

I'm thinking which state management library to use in a new UMI project: DVA or Redux.
You might have some thoughts on this, or just find this info useful.

What's the connection with antd?
Antd uses UMI and DVA.

DVA
PROS (DVA is good because:)
There is a Chinese community behind it (I live in China), they have tutorials and groups for questions.
UMI is made for DVA, so future compatibility is granted.
Small size. Empty UMI project with DVA added is 0.5 MB.

CONS (DVA is bad because:)
Poorly documented.

Redux
PROS:
There is a much bigger English language community behind it.
Very complex, has Hooks and other features to cover special needs.

CONS:
Large size. Empty UMI project with Redux added is 2.6 MB.

Conclusion:
This is not final, but i might choose DVA because of the size. It won't be easy though, cause I don't understand the Chinese documentation and machine translation gives a poor result.

Ricky Chan
@yhrchan_twitter
For anyone interested in using Ant Design Pro + Parse Server as a backend with user authentication hooked up, I have a seed project here -> https://github.com/RocketCodeYYC/RocketCode-Platform
I'll need to spend some more time on documentation, but good enough to get you started, thanks
Szalai Laci
@szlaci3
@yhrchan_twitter Thanks. Sharing is caring. :)
Aaron Grau
@Aarong93
Hi does anyone have any example repos they could point me to that integrate graphql into ant design pro?
Artur Marchi
@marchiartur
hey guys
image.png
how can I remove "am/pm" from the component?
it's on the vue
Szalai Laci
@szlaci3

@marchiartur is coding during Easter... :P

<TimePicker format="HH:mm a"/>
"a" refers to AM/PM. Comes from moment.js
But I think you have figured it out already...

<TimePicker format="HH:mm"/>
No "a", it should remove AM/PM.
Szalai Laci
@szlaci3
<TimePicker format="hh:mm"/>
HH 17 = hh 5 PM
emelerdem
@emelerdem

@emelerdem
Hi!
İ used filtered antd
but not working
{
title: t('columns.status'),
dataIndex: 'status',
key: 'status',
editable: true,
inputType:'status',
filters: [
{
text: 'ONLINE',
value: "ONLINE",
},
{
text: 'OFFLINE',
value: "OFFLINE",
},
],

filterMultiple: false,
onFilter: (value, record) => record.status.indexOf(value) === 0,

this is my code

Artur Marchi
@marchiartur
@szlaci3 thank you
hey guys
image.png
it's always true
Artur Marchi
@marchiartur
can't I set a color for a badge and put a conditional for its visibility?
Szalai Laci
@szlaci3
The collapsed-button is shown on the sidebar and I want it on the header. I can't find any config that refers to this. Do you know if there is a way to move it (and customize it)? Otherwise I will hide it and make my own button. The hardest will be to get its state.
This is ant-design-pro 5
collapse-button.png
pdeluca93
@pdeluca93

Hi! I have a question. On Form Items, how can I run automatically the validation that is under the property "rules" when it loads the initial value?

I see that only works when you change the value of the input

Abraham73
@abrahamolatubosun1973

Hi,
I am new to Ant-design though I have been doing some reading about it but still thinking how best to implement it with my REACT application. I am frustrated with MATERIAL-UI, just to implement Form Layout using MATERIAL-UI GRID and CONTAINER is taking me forever, my project is for 4 weeks and I have been trying this framework for 2 weeks now which is 50% of my productive working time wasted.
Please I will need anyone to bring me to SPEED, on how to implement ANT-DESIGN in my React Project so that I can meet up with the timeline.

Thank you in anticipation

punitk-perpetualny
@punitk-perpetualny
Hi All
Is there any to reset antd slider on button click?
Fernando Abrão
@fdabrao
Hi @abrahamolatubosun1973 , It depends on how you use it. I speeded up my producitivity using ANT-DESIGN with ng-zorro, Antd with Angular. Even knowing that this is heavy framework, it worth.
Maryam Abdi
@maryamabdi76
Hi
I used ant-design version-3 in my project
I started to migrate v4
but in this time (in v3) I need feature in date-picker when change month or year by arrows of date-picker call my function
I know in v4 ant has onPanelChange but could you give me solution in v3?
I asked in ant-design github but they didn't help me
Artur Marchi
@marchiartur
hey guys, how can I use date-fns in time picker?
12dollar
@12dollar
Can someone give feedback on the current compliance of ant design to WCAG 2.0 AA? If it's not compliant I won't be able to use it (and if that's the case saying it's an enterprise-class framework is simply wrong ;) )
SHAHRUKH KHAN
@khansrk
Please help me with my code. I am trying to do a simple project using react and excel but not able to display the output. I worked as a developer 3 years back but now starting again so facing a lot of issues. Can anyone help me ?
Yasin Khan
@yasinnkhann
hello, I'm new to this community
I'm trying to use cloudinary to host all the image data for when I make a file upload but I keep getting a 400 error. It's hard for me to figure out how to use this with ant designs upload component which I got from the offical docs. It should be able to upload up to 5 files and if there are more, it conditionally un-renders the upload button, which I have already done. I just dont know how to handle the action attribute, all my work is being done on the serverUpload function.
ericfrontdev
@ericfrontdev:matrix.org
[m]
Hi, how can I delete a row on table ? Thank you
useless.vevo
@uselessvevo
Hello everyone. I have a question, how can I draw Menu.SubMenu and it Menu.Item components in map loop function?
data  = {
    "Weldlog": [
        {
            "id": 1,
            "title": "Weldlog",
            "link": "/workspace/weldlog",
            "icon": "MonitorOutlined",
            "component": "Weldlog",
            "is_root": true,
            "parent": null
        },
        {
            "id": 2,
            "title": "Labs",
            "link": "labs",
            "icon": "MonitorOutlined",
            "component": "Labs",
            "is_root": false,
            "parent": "Weldlog"
        },
        {
            "id": 3,
            "title": "Lab requests",
            "link": "labrequest",
            "icon": "FileProtectOutlined",
            "component": "LabRequest",
            "is_root": false,
            "parent": "Weldlog"
        }
    ]
}
Render function:
    render() {
        const { navMenuData } = this.state;
        console.log(navMenuData)
        if(navMenuData === null){
            return(
                <Spin tip="Загружаем меню..."/>
            )
        } else {
            return (
                <div>
                    <Menu theme="dark" mode="horizontal" defaultSelectedKeys={this.props.activeKey} selectedKeys={this.props.activeKey}>
                        {
                            Object.entries(navMenuData).map(([menuRootItem, menuItems]) => (
                                <Menu.SubMenu title={menuRootItem}>
                                    {
                                        Object.values(menuItems).map((menuItem) => {
                                            console.log(menuItem)
                                            return(
                                                <Menu.Item key={menuItem.link}>{menuItem.title}</Menu.Item>
                                            )
                                        })
                                    }
                                </Menu.SubMenu>
                            ))
                        }
                        <Menu.Item
                            key="user"
                            onClick={() => {this.setState({visible: true})}}
                            icon={Icon['UserOutlined'].render()}
                            style={{marginLeft: 'auto'}}
                        >
                            {`${this.state.auth.profile.first_name} ${this.state.auth.profile.second_name}`}
                        </Menu.Item>
                    </Menu>

                    <Drawer
                        width={640}
                        placement="right"
                        closable={true}
                        onClose={() => this.setState({visible: false})}
                        visible={this.state.visible}
                        // visible={true}
                    >
                        <UserControl/>
                    </Drawer>
                </div>
            );
        }
    }
Aadarsha Acharya
@adarshaacharya
how to use tag input component in ant design
is there any specific library for that?
Simon Rydberg
@simpor

So I have a table where I mark rows red if they have a status FAIL, this works nice, but now I want the hover color to have a stronger red color on the FAIL rows.
I cant find anyway to manipulate the hover color in the table.
To be clear, I want to change the hover color on the table depending on the data of the row.

<Table
    dataSource={data}
    rowClassName={(record, index) =>
        record.status.includes("FAIL")
            ? "table-row-failed"
            : ""
        }
        rowKey="reference"
        columns={columns}
        ></Table>

Is this possible?

Simon Rydberg
@simpor
To answer my own question, this is the solution that worked for me.
.table-row-failed {
    background-color: #ffccc7;
}
.table-row-failed:hover {
    background-color: #ffa39e;
}
.ant-table-tbody
> tr.ant-table-row:hover.table-row-failed
> td {
    background: unset;
}
Monarch Maisuriya
@ingeniousambivert
Hello there, I need a custom select+input component for my form. One where I can either choose a value from select or type a custom value in the input. I cannot seem to find anything similar to this on the documentation website. Is there such a thing in antd ? Or any other component with this functionality ?
1 reply
Oleg Korsak
@kamikaze
Hi there. I have a question regarding Layout Sider : https://3x.ant.design/components/layout/#components-layout-demo-top-side
Is there any best practices to have a Sider menu which is dependant on main menu item selection? To have different Sider menus for every main menu item selected?
Like if there is a top-level App component which handles the layout, main/left menus and I just need to pass apropriate menu to it... I would like to not copy paste siders across all pages
Momin Riyadh
@momin-riyadh
Hello Dear Fellow Developers
I'm using ant.design for the first time