I'm using a bit old version of mui grid pro and I just wanted to hide the print option on the dropdown. I did add printOptions={{ disableToolbarButton: true }} but it still doesn't hide it.
Codesandbox: CLICK HERE
function CustomToolbar() {
return (
<GridToolbarContainer>
<GridToolbarExport printOptions={{ disableToolbarButton: true }} />
</GridToolbarContainer>
);
}
export default function RemovePrintExport() {
return (
<div style={{ height: 300, width: "100%" }}>
<DataGridPro
loading={false}
components={{
Toolbar: CustomToolbar
}}
columns={[]}
rows={[]}
/>
</div>
);
}
Related
Im trying to create a dropdown of notifications like Facebook using antd, React and components: Dropdown, List, Badge.
Actually the dropdown works, but the list of items render overlay the window, I don't know if I can render list inside dropdown or if only I must change sizes of the components:
const data = [
{
title: 'Ant Design Title 1',
},
{
title: 'Ant Design Title 2',
},
{
title: 'Ant Design Title 3',
},
];
const HeaderComp = (props) => {
return (
<Layout>
<Header className="header" style={{position:'fixed', zIndex: 1, width: '100%'}}>
<div style={{float:'left', marginRight:'5%'}}>
<img style={{width: 120, height:31}} src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Suzuki_Motor_Corporation_logo.svg/2560px-Suzuki_Motor_Corporation_logo.svg.png"/>
</div>
<Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']} >
<Menu.Item key="1" onClick={()=>navigation(root)}>Home</Menu.Item>
<Menu.Item key="3">About</Menu.Item>
</Menu>
<div style={{float:'right', marginLeft:'5%'}}>
<Dropdown overlay={<List itemLayout="horizontal"
dataSource={data}
renderItem={item => (
<List.Item style={{maxWidth:'50%'}}>
<List.Item.Meta
title={{item.title}}
description="Ant Design, a design language for background applications, is refined by Ant UED Team"
/>
</List.Item>
)}
/>}>
<Badge count={notifications.length} size="small">
<BellOutlined style={{fontSize:'170%'}}/>
</Badge>
</Dropdown>
</div>
</Header>
</Layout>
)
}
I made the following using the nextjs and framer motion
I have a list of images that I'm mapping over and assigning them a layoutid and an optional variant to animate. The layoutid corresponds to the layoutid on the model1, model2, model3 pages.
Current Behaviour
When first going to the home page and clicking on an image I update some state and set the variant animation to false, this then tells that image to use the layoutid, it then fades out the other images and animates the clicked image into place on the component that is loaded (model1, model2, model3)...Great it works!
If you then click home in the navigation and try clicking an item again it doesn't work, all images are faded out and the clicked image doesn't animated.
Click refresh on the homepage and it works as desired!
here is the code for the page, I suspect it could be something to do with the routing or settings in _app.js
export default function Home() {
const router = useRouter();
const [isClicked, setIsClicked] = useState(null);
const onHandlerClick = (item, href, e) => {
e.preventDefault();
setIsClicked(item);
router.push(href, { scroll: false });
};
return (
<div className="l-grid l-grid-outter">
<div className="c-home-maincontent">
<div>
<main>
<motion.div className="l-grid-3-col" initial="initial" animate="enter" exit="exit" variants={{ exit: { transition: { staggerChildren: 0.1 } } }}>
{images.map((item, index) => {
return (
<motion.div
key={index}
className="c-home-overflowimage c-home-overflowimage2"
layoutId={`imageAnimation${item}`}
variants={isClicked === item ? false : postVariants}
transition={{ ...transition }}
>
<a href={`/model${item}`} onClick={(event) => onHandlerClick(item, `/model${item}`, event)}>
<motion.img
src="/yasmeen.webp"
whileHover={{
scale: 1.1,
}}
/>
</a>
</motion.div>
);
})}
</motion.div>
</main>
</div>
</div>
<Footer />
</div>
);
}
function MyApp({ Component, pageProps }) {
const router = useRouter();
return (
<>
<DefaultSeo {...Seo} />
<AnimateSharedLayout type="crossfade">
<AnimatePresence exitBeforeEnter initial={false}>
<Component {...pageProps} key={router.asPath} />
</AnimatePresence>
</AnimateSharedLayout>
</>
);
}
export default MyApp;
Updated the code to include an animate set to false if its the clicked item
<motion.div className="l-grid-3-col" initial="initial" animate="enter" exit="exit">
{images.map((item, index) => {
return (
<motion.div
key={index}
className="c-home-overflowimage c-home-overflowimage2"
layoutId={`imageAnimation${item}`}
animate={isClicked === item ? false : true}
variants={isClicked === item ? false : postVariants}
transition={{ ...transition }}
>
<a href={`/model${item}`} onClick={(event) => onHandlerClick(item, `/model${item}`, event)}>
<motion.img
src="/yasmeen.webp"
whileHover={{
scale: 1.1,
}}
/>
</a>
</motion.div>
);
})}
</motion.div>
I'm using a material UI library in a React project using react typescript. I want this button to have a picture as a background. However, the button does not accept src or imageURL and returns a typescript error and the css style background doesn't show the picture either. this is my code:
const noticon = require ('./../../images/nicon.png')
const Avatarpic = require ('./../../images/Avatar.png')
const ExampleButton = ({
// useOpenState hook handlers
handleToggle, handleClose, handleOpen, setOpenState, isOpen
}: DropdownButtonProps) => (
<Button onClick={handleToggle} style={{backgroundImage: '{noticon}'}} square>
</Button>
)
function Navbar () {
return (
<>
<TopBar style={{ backgroundColor: '#e6edec' }}>
<TopBarSection>
<TopBarTitle>
<Avatar imgUrl={Avatarpic} name='حسین ساداتی پور' style={{ fontFamily: 'IranSans', fontSize: '20px' }} />
</TopBarTitle>
<Dropdown ButtonComponent={ExampleButton}>
<DropdownItem>Item to click</DropdownItem>
</Dropdown>
</TopBarSection>
{// <TopBarSection>
// burger menu Icon
// </TopBarSection>
}
</TopBar>
<section
style={{
padding: 50,
textAlign: 'center'
}}
>
Some content
</section>
</>
)
}
export default Navbar
you need to do this instead:
<Button onClick={handleToggle} style={{backgroundImage: `url(${noticon})`}} square>
I tried using the Ant Design TreeSelect component withing a Modal, but when opening that TreeSelect the values of the tree is hidden behind the Modal.
I tried using a higher value of z-index but it didn't help! Any ideas?
import React from "react";
import ReactDOM from "react-dom";
import { version } from "antd";
import { TreeSelect } from "antd";
import {
Button,
ComposedModal,
ModalBody,
ModalFooter,
ModalHeader
} from "carbon-components-react";
import "antd/dist/antd.css";
import "./index.css";
const treeData = [
{
title: "Node1",
value: "0-0",
key: "0-0",
children: [
{
title: "Child Node1",
value: "0-0-1",
key: "0-0-1"
},
{
title: "Child Node2",
value: "0-0-2",
key: "0-0-2"
}
]
},
{
title: "Node2",
value: "0-1",
key: "0-1"
}
];
function treeSelectChange(e, value) {
console.log(e);
//e.preventDefault()
}
ReactDOM.render(
<div className="App">
<h1>antd version: {version}</h1>
{/* <p>
Please <b>fork</b> this sandbox to reproduce your issue.
</p> */}
<ComposedModal
open={true}
// onClose={(e) => this.closeRuleEditorModal(e) }
className=""
>
<ModalHeader title="Rule Editor" className="HeaderToolbar White" />
<ModalBody>
<TreeSelect
// className="on-front"
style={{
width: "100%"
}}
// value={element.Value}
dropdownStyle={{
maxHeight: 400,
overflow: "auto",
zIndex: 10000
// position: "absolute"
}}
treeData={treeData}
// placeholder={element.Name}
treeDefaultExpandAll
onChange={treeSelectChange}
/>
</ModalBody>
<ModalFooter>
<Button
kind="secondary"
size="small"
// onClick={(e) => this.closeRuleEditorModal(e) }
>
Cancel
</Button>
<Button
kind="primary"
id="btnSave"
size="small"
// onClick={() => this.fabricateCustomizedProject()}
>
Save
</Button>
</ModalFooter>
</ComposedModal>
</div>,
document.getElementById("root")
);
To reproduce issue, you may also use
https://codesandbox.io/s/antd-reproduction-template-ci559
Update
It worked for me when I used a z-index with value 10000 (have no idea why I had to set so high value, seems one of the css that I used for other components -Modal- is using a big z-index inside).
dropdownStyle={{ maxHeight: 400, overflow: 'auto',zIndex:"100000" }}
It works for me
I've made a custom User Confirmation Dialog from Material UI Dialog component like here
I faced a problem to overwrite the Dialog's font. I can overwrite color or background color, but fonts in Dialog's header or buttons are inherited from Material-UI. I successfully overwrote Material-UI fonts in other components, but not in this part with callback:
const UserConfirmation = (
message: string,
callback: (shouldNavigate: boolean) => void
) => {
const container = document.createElement('div')
container.setAttribute('custom-confirmation-navigation', '')
document.body.appendChild(container)
const closeModal = (shouldNavigate: boolean) => {
ReactDOM.unmountComponentAtNode(container)
callback(shouldNavigate)
}
ReactDOM.render(
<>
<Dialog
fullWidth={true}
maxWidth="sm"
open={true}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitleWrapper
style={{fontFamily: `BuenosAires !important`, color: `orange`}}
>
Discard draft?
</DialogTitleWrapper>
<DialogContent>
<p> {message} </p>
</DialogContent>
<DialogActionsWrapper>
<Button
onClick={() => closeModal(true)}
fullWidth={true}
variant="outlined"
label="Discard"
/>
<div style={{ width: '80%' }} />
<Button
onClick={() => closeModal(false)}
fullWidth={true}
variant="contained"
label="Cancel"
/>
</DialogActionsWrapper>
</Dialog>
</>,
container
)
}
export default UserConfirmation
Thank Alex
That works brilliant for me:
<DialogTitle disableTypography="true">
Also, buttons' labels were fixed by that:
label={<h5 style={{ textTransform: 'none' }}>Cancel</h5>}
You can use classes object to Override or extend the styles applied to the component.
here
create custom styles like below
const useStyles = makeStyles({
customDialogTitle: {
fontFamily:'Impact'//sans-serif
}
});
and assign to classes
<DialogTitle disableTypography="true"
classes={{
root: classes.customDialogTitle
}}
>
.....
</DialogTitle>
sample sandbox