vagusX on master
chore: update https://registry.… (compare)
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() {
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>
);
}
}
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?
Hi all
Forgive me if this has been asked previously.
I am facing a css bundle size issue (12 MB)
I'm importing a lot of AntD components in my project like
import { Button } from 'antd';
...
...
In my App.less I am importing @import '~antd/dist/antd.less';
When I build my react app (created with create-react-app)
The main css chunk size is 12 MB.
I analzyed it with source-map-explorer it shows 70% of it is from colors and style