Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 02:25
    zombieJ commented #18936
  • 02:25
    zombieJ commented #18936
  • 02:22
    zombieJ closed #18924
  • 02:22
    zombieJ closed #18924
  • 02:22
    zombieJ commented #18924
  • 02:22
    zombieJ commented #18924
  • 02:21
    zombieJ commented #18934
  • 02:21
    zombieJ commented #18934
  • 02:21
    chenshuai2144 closed #18943
  • 02:21
    chenshuai2144 closed #18943
  • 02:21
    chenshuai2144 commented #18943
  • 02:21
    chenshuai2144 commented #18943
  • 02:16
    zombieJ closed #18944
  • 02:16
    zombieJ closed #18944
  • 02:16
    zombieJ commented #18944
  • 02:16
    zombieJ commented #18944
  • 02:16

    zombieJ on feature

    feat: upload should not be abor… (compare)

  • 02:16

    zombieJ on feature

    feat: upload should not be abor… (compare)

  • 02:16
    pr-triage[bot] labeled #18937
  • 02:16
    pr-triage[bot] labeled #18937
Leo Wang
@leowang199303
i have not do that...
i do not know either
kdeeksha
@kdeeksha
how can i add custom class for a row when onclick expand?
Szalai Laci
@szlaci3
Did u try expandedRowRender?
kdeeksha
@kdeeksha
@szlaci3 I have checked that, but wasn't sure how to add style for that particular row
Szalai Laci
@szlaci3

@kdeeksha I was thinking something like this. It's not really working, so don't deal much with this answer, but see if it helps in any way.

const eRowR = (record, index, indent, expanded) => {
return <div style={{color: expanded ? "red" : "blue"}}>{record.age}</div>
}

ReactDOM.render(
<Table columns={columns} rowSelection={rowSelection} dataSource={data} expandedRowRender={eRowR}/>,
document.getElementById('container'),
);

kdeeksha
@kdeeksha
@szlaci3 Thank you for the effort. I will try using onRow and onExpand
Szalai Laci
@szlaci3

Another question.
How do you use an imported stylesheet with complex css-selectors?

import styles from './MyList.less';

<div className={styles.MYCLASS}>
  <Input/>
  <Select>
    <Option>1</Option>
  <Select/>
<div>

To add style to input is easy:

.MYCLASS input {background: #ccc;}

But after rendering, Select is composed by many divs and there is no <select> in there.

<div class="ant-form-item-control-wrapper">
  ...<div class="ant-select-selection">
  ...</div>
</div>

It can't be accessed by this:

.MYCLASS .ant-select-selection {background: #ccc;}

In css a name starting with "." means className. In this less+import combination, "." means a property of styles (styles.MYCLASS). But i don't know how to access classNames here. I can't add other classNames to that element, because it is generated by Ant-design.

n-anastasija-s
@n-anastasija-s
Hello all! I use a <Form.Item> with validation, and I want to receive error-message as tooltips. Is it possible?
Szalai Laci
@szlaci3
@n-anastasija-s Are you still looking for an answer?
n-anastasija-s
@n-anastasija-s
@szlaci3 yes, this is actually for me
Szalai Laci
@szlaci3
@n-anastasija-s The Tooltip will show on mouse over the Form.Item, and hide when out. But i think you just want to show it, no matter where the mouse is. You want it to be the shape of a tooltip. Right?
n-anastasija-s
@n-anastasija-s
image.png
By default we get validation errors in pseudo element :after.
But it adds space between elements, and i want to render this as tooltip
image.png
Markus Duecker
@mduecker

Anybody here who can help with Ant Design Pro and Authorization?
https://github.com/ant-design/ant-design-pro/

In router.config.js I can specify the required Authority to visit certain routes and there's a function getAuthority()in src/utils/Authority.js which works with localStorage in the demo project to return a user's authority.

In my project a user's authority (role) is stored in a cookie. To check this Authority I have to call an API (inlcuding the cookie as credential), which makes it an async function. Now I don't know how to implement this in the existing structure, so that the async authCheck is called whenever a user tries to visit a protected route.

Right now I'm still writing the role to localStorage during login, which makes the existing getAuthority() function work. But this requires the user to login on his first visit, even though he might already have a valid cookie, but lacking the localStorage property.

Szalai Laci
@szlaci3

@n-anastasija-s You can add styling to the :after pseudo-element,

.ant-form-item-children:after {
  position: absolute;

But it seems almost impossible to add the down-arrow at the bottom, and to hide the tooltip on mouse over.

That's all i can say. I can also tell you how to show a tooltip when the input gets focused. Do you need that?

Luke Liasi
@lukeliasi
<Menu
    style={{ height: "100%" }}
    defaultSelectedKeys={["/"]}
    selectedKeys={[location.pathname]}
    mode="inline"
    theme="dark"
    inlineCollapsed={collapsed}>
              <Menu.Item key="/users" style={{ margin: "15px 0", height: "auto" }}>
I am using react-router 4, when I navigate to /users the users menu item gets the active class as location.pathname (from react router) matches the key /users. However how can I make a dynamic path e.g: /users/1 highlight this menu item?
Luke Liasi
@lukeliasi

Ah I have it working:
selectedKeys={[location.pathname.split("/", 2).join("/")]}

I just remove everything after the second instance of /

Szalai Laci
@szlaci3
Bingo
Just beware, you might have a different number of /s in path when you're in production
kdeeksha
@kdeeksha
how to highlight nav-link onload in navigation menubar?
Luke Liasi
@lukeliasi
@kdeeksha
defaultSelectedKeys
<Menu defaultSelectedKeys={["1"]}>
  <Menu.Item key="1">I am highlighted by default</Menu.Item>
  <Menu.Item key="2">I'm not</Menu.Item>
</Menu>
kdeeksha
@kdeeksha
@lukeliasi what is navbar is in different pages and higlight the menu which is equal to router.pathname?
Luke Liasi
@lukeliasi
then use selectedKeys={[location.pathname]} and on Menu.Item set the key as the path. e.g key="/users"
kdeeksha
@kdeeksha
@lukeliasi Thank you so much. It's working
Luke Liasi
@lukeliasi
No problem :)
Marley Schiesz
@JediMarley
Hey Guys, I'm trying to add search to an ajax table and am kinda stuck on where to start. I'm trying to put the search buttons on only the two columns that I want searchable and am following the search table example from the antd components tab, but since this is using static data I'm not really sure where to start. I also need to make the search fields auto complete but currently I just want to get search working.
Szalai Laci
@szlaci3
@JediMarley Have you done api calls on this project yet?
Ajax calls
Marley Schiesz
@JediMarley
@szlaci3 I have not, I'm meeting with our back end dev today to link the api to the table.
Szalai Laci
@szlaci3
Do you know how to link?
Marley Schiesz
@JediMarley
@szlaci3 no... I've done something similar in a java project with ajax but its been a while. What do you mean by link?
Szalai Laci
@szlaci3
Link the api to the table, I mean call the api.
Marley Schiesz
@JediMarley
Yes, I do
Szalai Laci
@szlaci3
Now I don't have computer with me, but.. I believe the search call to api looks the same as the initial unfiltered call, just add a search_keyword to the data payload.
Marley Schiesz
@JediMarley
@szlaci3 okay I'll try that, thanks
Marley Schiesz
@JediMarley
Hey guys, I've got another question. So I've got two forms on a page (one for creating and one for updating), but and they each have a prop called wrappedComponentRef that calls the same saveFormRef function. Whenever I submit the first form it reads from the second form because the global formRef is being updated to the second form. How do I distinguish the two forms in my code so each submits its own values.
Szalai Laci
@szlaci3
Scroll up two days earlier, you'll see the answer @JediMarley
Marley Schiesz
@JediMarley
Gotcha, so I use this.refs.{form name}
Szalai Laci
@szlaci3
You need to make two ref functions
Marley Schiesz
@JediMarley
Oh okay
Marley Schiesz
@JediMarley
@szlaci3 I appreciate all the help!
it worked great
Szalai Laci
@szlaci3
Happy to hear. Credits to Leo Wang, he told me how this works.
Sovanda
@sovanda.chhour_gitlab
Good evening
I'm first trying Ant Design and I want to build a homepage with Next JS.
Could anyone help share me any resource or docs about Ant Design with Next JS ?
Szalai Laci
@szlaci3
I don't know about this
Sovanda
@sovanda.chhour_gitlab
That's ok, Thank you brother.