I followed exactly the same style as the overlay example in the bootstrap website, and on the website, when I tried to add rootclose, it does not work properly(overlay does not dismiss on click on other places of screen), and same for my own work
const Example = React.createClass({
getInitialState() {
return { show: true };
},
toggle() {
this.setState({ show: !this.state.show });
},
render() {
const style = {
position: 'absolute',
backgroundColor: '#EEE',
boxShadow: '0 5px 10px rgba(0, 0, 0, 0.2)',
border: '1px solid #CCC',
borderRadius: 3,
marginLeft: -5,
marginTop: 5,
padding: 10
};
return (
<div style={{ height: 100, position: 'relative' }}>
<Button ref="target" onClick={this.toggle}>
I am an Overlay target
</Button>
<Overlay
show={this.state.show}
onHide={() => this.setState({ show: false })}
placement="right"
container={this}
rootclose
target={() => ReactDOM.findDOMNode(this.refs.target)}
>
<div style={style}>
<strong>Holy guacamole!</strong> Check this info.
</div>
</Overlay>
</div>
);`enter code here`
}
});
ReactDOM.render(<Example/>, mountNode);
Camelcase it. And supply the boolean.
rootClose={true}
Related
I have three buttons. What I want to achieve is to emphasize an active button(right after it is clicked) by displaying its border color, while the unclicked buttons will remain neutral until they are clicked. Only one button out of the three should be highlighted right after it has been clicked. But currently I am having trouble since it doesn't seem to work on handling the event.
The goal appearance:
source code:
import * as React from "react";
import Button from "#mui/material/Button";
import Stack from "#mui/material/Stack";
export default function TestSample() {
const [selectedIndex2, setSelectedIndex2] = React.useState("");
const handleListItemClick2 = (event, index) => {
setSelectedIndex2(index);
};
return (
<Stack spacing={2} direction="row" sx={{ mt: 3, ml: 5 }}>
<Button
variant="outlined"
sx={{
"&.Mui-selected": {
},
"&.Mui-focusVisible": {
border: "3px solid #F2A42A",
},
":hover": {
border: "3px solid #F2A42A",
},
width: 131,
textTransform: "none",
height: 42,
borderRadius: 3,
fontFamily: "Barlow Condensed",
fontSize: "22px",
}}
selected={selectedIndex2 === 0}
onClick={(event) => handleListItemClick2(event, 0)}
>
Dine In
</Button>
<Button
variant="outlined"
sx={{
"&.Mui-selected": {
border: "3px solid #F2A42A",
},
"&.Mui-focusVisible": {
border: "3px solid #F2A42A",
},
":hover": {
border: "3px solid #F2A42A",
},
width: 131,
height: 42,
textTransform: "none",
borderRadius: 3,
fontFamily: "Barlow Condensed",
fontSize: "22px",
}}
selected={selectedIndex2 === 1}
onClick={(event) => handleListItemClick2(event, 1)}
>
Pickup
</Button>
<Button
variant="outlined"
sx={{
"&.Mui-selected": {
border: "3px solid #F2A42A",
},
"&.Mui-focusVisible": {
border: "3px solid #F2A42A",
},
":hover": {
border: "3px solid #F2A42A",
},
width: 131,
height: 42,
textTransform: "none",
borderRadius: 3,
fontFamily: "Barlow Condensed",
fontSize: "22px",
}}
selected={selectedIndex2 === 2}
onClick={(event) => handleListItemClick2(event, 2)}
>
Delivery
</Button>
</Stack>
);
}
A similar functionality can be found here(but it's React version is outdated compared to mine): https://codesandbox.io/s/white-rain-ye62u?fontsize=14&hidenavigation=1&theme=dark&file=/src/multipleButtons.js
Your responses would indeed help me a lot in my project that I am working, as I am also exploring MUI.
Thank you very much!
Here is a solution using :focus instead of :hover
import "./styles.css";
import MultipleButtons from "./MultipleButtons";
export default function App() {
return (
<div className="App">
<MultipleButtons />
</div>
);
}
I created a ButtonComponent so you don't have all that repeated styles
import * as React from "react";
import Button from "#mui/material/Button";
export default function ButtonComponent({ title }) {
return (
<Button
variant="outlined"
sx={{
"&.Mui-selected": {},
"&.Mui-focusVisible": {
border: "3px solid #F2A42A"
},
":focus": {
border: "3px solid #F2A42A"
},
width: 131,
textTransform: "none",
height: 42,
borderRadius: 3,
fontFamily: "Barlow Condensed",
fontSize: "22px"
}}
>
{title}
</Button>
);
}
And in MultipleButtons
import * as React from "react";
import Stack from "#mui/material/Stack";
import ButtonComponent from "./ButtonComponent";
export default function MultipleButtons() {
return (
<Stack
spacing={2}
direction="row"
justifyContent="space-evenly"
sx={{ mt: 3, ml: 5, p: 3, background: "#1F1D2B" }}
>
<ButtonComponent title="Dine in" />
<ButtonComponent title="Pick up" />
<ButtonComponent title="Delivery" />
</Stack>
);
}
Screenshot1 Here i want to replace Special characters"E" with
"bold tag" but it is changing only in one line i want to replace for
all the lines which contains special character E & F please verify the
screenshot for the reference
import React from 'react'; import '../screens/MainScreen.css'; import
{ FaArrowRight } from 'react-icons/fa';
export default function MainScreen() {
// let formData = newFormData();
const onFileChange = async (e) => {
e.preventDefault()
const exampleFileReader = new FileReader()
exampleFileReader.onload = async (e) => {
var text = (e.target.result)
var result = text.replace("\u001bE","<b>").replace('\u001bF','</b>').replace('\u001b-1','<u>').replace('\u001b-0','</u>');
console.log(result,"result")
};
exampleFileReader.readAsText(e.target.files[0]) };
return (
<div>
<center>
<img src={Pic} style={{ width: '120px', height: '100px', marginTop: '40px' }} />
<h1 style={{
color: 'red', fontSize: 50,
textAlign: 'center', border: '1px solid green', width: '40%'
}}>Text to PDF Converter</h1>
</center>
<div className="container">
<input type="file" multiple={true} style={{ color: 'white', backgroundColor: "green", padding: 10, fontSize: 20, width: '20%',
paddingTop: 20, paddingBottom: 20 }}
onChange={(e)=>onFileChange(e)} />
<FaArrowRight size={50} color='red' />
<h1 style={{ color: 'white', backgroundColor: "red", padding: 10, fontSize: 20, width: '20%', paddingTop: 20, paddingBottom: 20 }}
>Convert</h1>
<FaArrowRight size={50} color='green' />
<h1 style={{ color: 'white', backgroundColor: "green", padding: 10, fontSize: 20, width: '20%', paddingTop: 20,
paddingBottom: 20 }}>PDF Download</h1>
</div>
</div> ) };
e.target.result is probably not correct, please console.log it and post the general e.target in order to help you better (try this)
const onFileChange = async (e) => {
e.preventDefault()
const exampleFileReader = new FileReader()
exampleFileReader.onload = async (e) => {
var text = (e.target.value)
var result = text.replace("\u001bE","<b>").replace('\u001bF','</b>').replace('\u001b-1','<u>').replace('\u001b-0','</u>');
console.log(result,"result")
};
exampleFileReader.readAsText(e.target.files[0]) };
I'm new to react , and created a react modal component to show an image with its close button.
const BoxModal = ({children, modalIsOpen, setModalIsOpen}) => {
return (
<>
<Modal
isOpen={modalIsOpen}
onRequestClose={() => setModalIsOpen(false)}
style={{
overlay: {
backgroundColor: 'rgba(0, 0, 0, 0.3)',
zIndex: 2000,
},
content: {
top: '50%',
left: '50%',
right: 'auto',
bottom: 'auto',
border: 'none',
background: 'none',
transform: 'translate(-50%, -50%)',
padding: 0,
},
}}
>
{children}
<ButtonModal onClick={() => setModalIsOpen(false)}>
<img width={30} height={30} src={close_btn} alt="close" />
</ButtonModal>
</Modal>
</>
);
};
BoxModal.propTypes = {
children: PropTypes.element.isRequired,
modalIsOpen: PropTypes.bool,
setModalIsOpen: PropTypes.bool,
};
export default BoxModal;
Then, in another page I import I call it and import it like this:
<BoxModal>
<img
src={MapaRutas}
style={{
position: 'relative',
width: '100%',
}}
/>
</BoxModal>
<Button
width="260px"
height="60px"
color={'black'}
onClick={() => setModalIsOpen(true)}
>
<img width={13} height={13} src={map} alt="map" />
Ver cobertura de YoCargo
</Button>
I use react state to pass the onclick function in the button
const [modalIsOpen, setModalIsOpen] = useState(false);
But it's not working, nothing happens.Can someone tell me how to fix it ?
What i suggest is to set function to close your modal as prop in your BoxModal component, i call it 'handleClose', also you forget to pass 'modalIsOpen' to it.
import React, { useState } from 'react';
const Sample = () => {
const [modalIsOpen, setModalIsOpen] = useState(false);
return (
<>
<BoxModal modalIsOpen={modalIsOpen} handleClose={() => setModalIsOpen(false)}>
<img
src={MapaRutas}
style={{
position: 'relative',
width: '100%',
}}
/>
</BoxModal>
<Button
width="260px"
height="60px"
color={'black'}
onClick={() => setModalIsOpen(true)}
>
<img width={13} height={13} src={map} alt="map" />
Ver cobertura de YoCargo
</Button>
</>
);
}
In your BoxModel, you get the props like that
const BoxModal = ({children, modalIsOpen, handleClose }) => {
return (
<>
<Modal
isOpen={modalIsOpen}
onRequestClose={handleClose}
style={{
overlay: {
backgroundColor: 'rgba(0, 0, 0, 0.3)',
zIndex: 2000,
},
content: {
top: '50%',
left: '50%',
right: 'auto',
bottom: 'auto',
border: 'none',
background: 'none',
transform: 'translate(-50%, -50%)',
padding: 0,
},
}}
>
{children}
<ButtonModal onClick={handleClose}>
<img width={30} height={30} src={close_btn} alt="close" />
</ButtonModal>
</Modal>
</>
);
};
I am developing an ecommerce application and I am using a modal for both registration and login.
the form is very long and overflows on the page
I want to modal to be able to scroll like bootstrap modal.
How do I make it scrollable?
Modal Component
const MODAL_STYLES = {
position: "fixed",
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
backgroundColor: '#FFF',
padding: '30px',
zIndex: '1000',
width: '50%',
borderRadius: '.5em'
}
const OVERLAY_STYLE={
position: "fixed",
top: '0px',
left: '0px',
bottom: '0px',
right: '0px',
backgroundColor: 'rgba(0,0,0, .8)',
zIndex: '1000'
}
login page
import React, {useState} from 'react'
import Modal from '../Components/Modal';
const Modal = ({open, children}) => {
if(!open) return null
return ReactDom.createPortal(
<>
<div style={OVERLAY_STYLE}>
<div style={MODAL_STYLES}>
{children}
</div>
</div>
</>,
document.getElementById('portal')
)
}
const [openLoginModal, setOpenLoginModal] = useState(false)
{
openLoginModal && (
<Modal open={openLoginModal}>
<form action="">
<div className="form-group mb-2">
<label htmlFor="" className="mb-2">Full Name <span>*</span></label>
<input type="text" className="form-control" />
</div>
<div className="form-group mb-2">
<label htmlFor="" className="mb-2">Emil Address <span>*</span></label>
<input type="text" className="form-control" />
</div>
<button></button>
</form>
</Modal>
)
}
link to codesandbox
https://codesandbox.io/s/muddy-voice-lf0ft
You should change your styles same as bellow:
const MODAL_STYLES = {
position: "absolute",
backgroundColor: "#FFF",
padding: "15px",
zIndex: "1000",
width: "35%",
borderRadius: ".5em"
};
const OVERLAY_STYLE = {
position: "fixed",
display: "flex",
justifyContent: "center",
top: "0",
left: "0",
width: "100%",
height: "100%",
backgroundColor: "rgba(0,0,0, .8)",
zIndex: "1000",
overflowY: "auto"
};
Here's the code: https://codesandbox.io/s/quirky-almeida-dik6v
I am using React ROuter and CSS in JS for style.
I'd like to change the background color and border color for the active links child divs (navIndicator and innerIndicator)
import { css, StyleSheet } from 'aphrodite/no-important';
export default ({ task, selectedLocal, selectedScenarioId, taskId }: ITaskNavItem) => {
const isActiveNav = (match: any, location: object) => match;
const theme = getTheme();
const styles = StyleSheet.create({
navLink: {
display: 'flex',
fontSize: '12px',
textDecoration: 'none',
color: theme.palette.neutralPrimary
},
navLinkActive: {
color: theme.palette.neutralPrimary,
fontWeight: 'bold',
'.navIndicator': {
borderColor: theme.palette.themePrimary
},
'.innerIndicator': {
backgroundColor: theme.palette.themePrimary
}
},
navTitle: {
width: '100px',
textAlign: 'center',
wordBreak: 'break-word',
wordSpacing: '100px'
},
linkText: {
display: 'flex',
flexFlow: 'column',
'align-items': 'center'
},
navIndicator: {
borderRadius: '50%',
margin: '10px 0 0 0',
backgroundColor: theme.palette.white,
width: '30px',
height: '30px',
border: '2px solid',
borderColor: theme.palette.neutralPrimary,
position: 'relative'
},
innerIndicator: {
position: 'absolute',
borderRadius: '50%',
width: '20px',
height: '20px',
backgroundColor: theme.palette.neutralPrimary,
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)'
}
});
return (
<div className={css(styles.navLink)}>
<NavLink
exact
isActive={isActiveNav}
className={css(styles.navLink)}
activeClassName={css(styles.navLinkActive)}
to={`/selectedLocal/${selectedLocal}/scenarios/${selectedScenarioId}/tasks/${taskId}`}
>
<div className={css(styles.linkText)}>
<div className={css(styles.navTitle)}> {task.title}</div>
<div className={css(styles.navIndicator)}>
<div className={css(styles.innerIndicator)} />
</div>
</div>
</NavLink>
</div>
);
};
However, the navIndicator and innerIndicator colors doesn't change when nav link is active.
Wondering how to get the style working for active link?
NavLink element does not indicate to its children if it active. So I may suggest to get currecnt route from BrowserRouter component (your component should be child of BrowserRouter so NavLink works), compare path and set local isActive variable to indicate if specific route is active.
For example (not tested, just sample):
const StyledLinks: React.FunctionComponent<RouteComponentProps & ITaskNavItem> = ({ task, selectedLocal, selectedScenarioId, taskId, location }) => {
const to = '/selectedLocal/${selectedLocal}/scenarios/${selectedScenarioId}/tasks/${taskId}';
const isActive = to === location.pathname;
const styles = StyleSheet.create({
// ...
navIndicatorActive: {
borderColor: theme.palette.themePrimary
},
// ...
return (
<div className={css(styles.navLink)}>
<NavLink
exact
className={css(styles.navLink)}
activeClassName={css(styles.navLinkActive)}
to={to}
>
<div className={css(styles.linkText)}>
<div className={css(styles.navTitle)}> {task.title}</div>
<div className={isActive ? css([styles.navIndicator, styles.navIndicatorActive]) : css(styles.navIndicator)}>
<div className={css(styles.innerIndicator)} />
</div>
</div>
</NavLink>
</div>
);
}
// Wrap your component withRouter to get location prop
export default withRouter(StyledLinks);