We Keep Coding

Smooth animation when turning off a conditionally rendered component in React - javascript

My App.js is as below
export const App = () => {
const [toggled, setToggled] = useState(false);
const [ordering, setOrdering] = useState(false);
const handleColorModeClick = () => {
setToggled((s) => !s);
};
const handleOrdering = () => {
setOrdering((s) => !s);
};
return (
<Ordering.Provider value={{ ordering: ordering }}>
<div className={`app ${toggled ? "theme-dark" : "theme-light"}`}>
<Switch>
<Route path="/" exact>
<HeaderComponent toggled={toggled} onClick={handleColorModeClick} />
<div>components2</div>
<EateryInfo toggled={toggled} />
{/* <CategoryItems toggled={toggled} /> */}
<MenuButton toggled={toggled} />
</Route>
<Route path="/menu">
<HeaderComponent toggled={toggled} onClick={handleColorModeClick} />
<CategoryItems toggled={toggled} />
<CheckBox
text="Start Ordering"
standAlone={true}
handleOrdering={handleOrdering}
/>
<MenuButton toggled={toggled} />
</Route>
</Switch>
</div>
</Ordering.Provider>
);
};
I set the state of ordering variable using a checkbox
Then I use this to conditionally render the QuantityChange component like so
export const MenuEntry = ({ mealData, toggled }: MenuEntryProps) => {
const orderingEnabled = useContext(Ordering);
return (
<div className="menu-entry">
<MenuItem oneMenuItem={mealData} toggled={toggled} />
{orderingEnabled.ordering ? <QuantityChange toggled={toggled} /> : ""}
</div>
);
};
All this works fine & the component is render as desired.
I want to have a smooth transition of entry & exit of this component. The animation on entry works just fine but I am not able to figure out how to get the exit animation working.
The video is what is happening now can be found in the video here https://youtu.be/5kl1wCBwR_U (the checkbox is at the right bottom hand corner)
I looked at several online forums to find an answer to this but I am unable to figure it out.
I tried usiing react-transition-group as well but no luck
export const QuantityChange = ({ toggled }: QuantityChangeProps) => {
const orderingEnabled = useContext(Ordering);
const duration = 500;
return (
<Transition in={orderingEnabled.ordering} timeout={duration} appear>
{(status) => (
<div
className={`quantity-change flex ${
toggled ? "theme-dark" : "theme-light"
} fade-${status}`}
>
<span className="add-quantity">+</span>
<span className="quantity">0</span>
<span className="subtract-quantity">-</span>
</div>
)}
</Transition>
);
};
I looked at onAnimationEnd but was unable to figure it out.

Looks like you need a simple Accordion thingy.
You could try something like that (snippet below).
One of the main moments here is setting the height to the auto value. It allows the content to change, and it won't strict its dimensions.
AccordionItem conditionally renders its children. If it should be closed and the animation is over, then no children will be rendered.
const AccordionItem = (props) => {
const { className, headline, open, children } = props
const [height, setHeight] = React.useState(0)
const [isOver, setOver] = React.useState(false)
const bodyRef = React.useRef(null)
const getDivHeight = React.useCallback(() => {
const { height } = bodyRef.current ? bodyRef.current.getBoundingClientRect() : {}
return height || 0
}, [])
// set `auto` to allow an inner content to change
const handleTransitionEnd = React.useCallback(
(e) => {
if (e.propertyName === 'height') {
setHeight(open ? 'auto' : 0)
if (!open) {
setOver(true)
}
}
},
[open]
)
React.useEffect(() => {
setHeight(getDivHeight())
setOver(false)
if (!open) {
requestAnimationFrame(() => {
requestAnimationFrame(() => setHeight(0))
})
}
}, [getDivHeight, open])
const shouldHide = !open && isOver
return (
<div style={{overflow: 'hidden'}}>
<div
style={{ height, transition: "all 2s" }}
onTransitionEnd={handleTransitionEnd}
>
<div ref={bodyRef}>
{shouldHide ? null : children}
</div>
</div>
</div>
)
}
const App = () => {
const [open, setOpen] = React.useState(false)
return (
<div>
<button onClick={() => setOpen(isOpen => !isOpen)}>toggle</button>
<table style={{width: '100%'}}>
<tr>
<td>
Hot Pongal
<AccordionItem open={open}>
<button>-</button>
<input />
<button>+</button>
</AccordionItem>
</td>
<td>
Hot Pongal
<AccordionItem open={open}>
<button>-</button>
<input />
<button>+</button>
</AccordionItem>
</td>
</tr>
<tr>
<td>
Hot Pongal
<AccordionItem open={open}>
<button>-</button>
<input />
<button>+</button>
</AccordionItem>
</td>
<td>
Hot Pongal
<AccordionItem open={open}>
<button>-</button>
<input />
<button>+</button>
</AccordionItem>
</td>
</tr>
<tr>
<td>
Hot Pongal
<AccordionItem open={open}>
<button>-</button>
<input />
<button>+</button>
</AccordionItem>
</td>
<td>
Hot Pongal
<AccordionItem open={open}>
<button>-</button>
<input />
<button>+</button>
</AccordionItem>
</td>
</tr>
</table>
</div>
)
}
ReactDOM.render(<App />, document.getElementById('root'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="root"></div>
<div id="root"></div>

Related

I'm using the AppBar component of material-ui library, I added a button, I'd say it's hardcoded in the AppBar, I'm trying to transform this button to just a text in the AppBar, but I got nothing.
How can I transform the button in the AppBar to just text?
App.js:
const connectWalletChecker = () => {
return(
<div>
<SearchAppBar id='walletButton' apptitle={apptitle} color='primary' variant='contained' text='Connect Wallet' handle={connectWalletPressed}/>
</div>
)
}
const AlreadyConnected = () => {
return(
<div>
<SearchAppBar id='walletButton' apptitle={apptitle} color='primary' variant='contained' text={walletAddress} handle={null}/>
</div>
)
}
return(
<div>
{walletAddress ? AlreadyConnected() : connectWalletChecker()}
</div>
)
};
AppBar:
<Button id={props.id} color={props.color} variant={props.variant}
href="#contained-buttons" onClick={props.handle}>{props.text}</Button>
Full code on Github.

use variant="text" instead of variant="contained" for transforming button into text.
your code will be :
const connectWalletChecker = () => {
return(
<div>
<SearchAppBar id='walletButton' apptitle={apptitle} color='primary' variant='text' text='Connect Wallet' handle={connectWalletPressed}/>
</div>
)
}
const AlreadyConnected = () => {
return(
<div>
<SearchAppBar id='walletButton' apptitle={apptitle} color='primary' variant='text' text={walletAddress} handle={null}/>
</div>
)
}
return(
<div>
{walletAddress ? AlreadyConnected() : connectWalletChecker()}
</div>
)
};

How can I call "useSate(false)" in React from a nested component?
I would like to close the sidebar when one of the sidebar items is clicked. For that I need to call the onclick function setOpen(true) from the parent component.
function SearchDropdown() {
const [open, setOpen] = useState(false);
return (
<>
<div className="searchIcon" onClick={() => setOpen(!open)}><img src="./assets/img/SearchN.jpg" alt=" " /><p>Search</p></div>
{open && <>
<div className="searchBarDropdown"><SearchBar></SearchBar></div>
<div onClick={() => setOpen(!open)} className="searchBarDropdownX"></div>
</>}
</>
);
}
function MenuSidebar() {
const [open, setOpen] = useState(false);
return (
<>
<div className="logo" onClick={() => setOpen(true)}><p>LOgo</p><img className="dropdown" src="./assets/img/Dropdown.png" alt=">" /></div>
{open && <>
<div className="menuSidebar">
<h3 className="backwardsSection" onClick={() => setOpen(false)}>🠔 Go Back</h3>
<MenuSidebarItems />
<h3 className="sidebarTopics">Topics</h3>
<TopicItems />
</div>
<div className="menuSidebarSpacing" onClick={() => setOpen(false)}></div>
</>}
</>
);
}
function MenuSidebarItems() {
return (
<>
<MenuSidebarItem leftIcon={ <HomeIcon /> } rightIcon={ <HomeIcon></HomeIcon> }>Home</MenuSidebarItem>
<MenuSidebarItem leftIcon={ <HomeIcon /> }>Dashboard</MenuSidebarItem>
<MenuSidebarItem leftIcon={ <HomeIcon /> }>Shop</MenuSidebarItem>
<MenuSidebarItem leftIcon={ <HomeIcon /> } rightIcon={ <HomeIcon></HomeIcon> }>Projects</MenuSidebarItem>
<MenuSidebarItem leftIcon={ <HomeIcon /> }>About</MenuSidebarItem>
</>
);
}
function MenuSidebarItem(props) {
const navigate = useNavigate();
return (
<button className="menuItem" onClick={() => {
navigate("/" + props.children.toString().toLowerCase());
}}>
<span className="leftIcon">{props.leftIcon}</span>
{props.children}
<span className="rightIcon">{props.rightIcon}</span>
</button>
);
}
Thanks, Martin

You need to pass the setState that close the navbar as props to the component that display the menu.
function SearchDropdown() {
const [open, setOpen] = useState(false);
return (
<>
<div className="searchIcon" onClick={() => setOpen(!open)}><img src="./assets/img/SearchN.jpg" alt=" " /><p>Search</p></div>
{open && <>
<div className="searchBarDropdown"><SearchBar></SearchBar></div>
<div onClick={() => setOpen(!open)} className="searchBarDropdownX"></div>
</>}
</>
);
}
function MenuSidebar() {
const [open, setOpen] = useState(false);
return (
<>
<div className="logo" onClick={() => setOpen(true)}><p>LOgo</p><img className="dropdown" src="./assets/img/Dropdown.png" alt=">" /></div>
{open && <>
<div className="menuSidebar">
<h3 className="backwardsSection" onClick={() => setOpen(false)}>🠔 Go Back</h3>
<MenuSidebarItems setOpen={setOpen}/>
<h3 className="sidebarTopics">Topics</h3>
<TopicItems />
</div>
<div className="menuSidebarSpacing" onClick={() => setOpen(false)}></div>
</>}
</>
);
}
function MenuSidebarItems(props) {
const {setOpen} = props
return (
<>
<MenuSidebarItem setOpen={setOpen} leftIcon={ <HomeIcon /> } rightIcon={ <HomeIcon></HomeIcon> }>Home</MenuSidebarItem>
<MenuSidebarItem setOpen={setOpen} leftIcon={ <HomeIcon /> }>Dashboard</MenuSidebarItem>
<MenuSidebarItem setOpen={setOpen} leftIcon={ <HomeIcon /> }>Shop</MenuSidebarItem>
<MenuSidebarItem setOpen={setOpen} leftIcon={ <HomeIcon /> } rightIcon={ <HomeIcon></HomeIcon> }>Projects</MenuSidebarItem>
<MenuSidebarItem setOpen={setOpen} leftIcon={ <HomeIcon /> }>About</MenuSidebarItem>
</>
);
}
function MenuSidebarItem(props) {
const navigate = useNavigate();
const {setOpen} = props
return (
<button className="menuItem" onClick={() => {
setOpen={flase}
navigate("/" + props.children.toString().toLowerCase());
}}>
<span className="leftIcon">{props.leftIcon}</span>
{props.children}
<span className="rightIcon">{props.rightIcon}</span>
</button>
);
}

I'm trying to run a loop then render JSX content :
The console.log is rendering right data but the return does not render html content
const StaticTable = (props) => {
const [data, setData] = useState({});
useEffect(() => {
const { audio, ...newData } = props.data;
setData(newData);
}, []);
return (
<>
<Button content="Add" primary />
<div>
{Object.keys(data).map((keyName, i) => {
data[keyName].map((elm) => {
console.log(elm);
return (
<Flex key={i.toString()} gap="gap.small">
<Header as="h5" content={new Date(keyName).getDay()} />
<Header as="h5" content="Start Date" />
<p>{data[keyName]}</p>
<Flex>
<Dropdown
items={timeoptions}
placeholder="Start Time"
defaultValue={elm.start}
checkable
getA11ySelectionMessage={{
onAdd: (item) => `${item} has been selected.`,
}}
/>
<div style={{ margin: "10px 0px" }}>
<Dropdown
items={timeoptions}
placeholder="End Time"
defaultValue={elm.end}
checkable
getA11ySelectionMessage={{
onAdd: (item) => `${item} has been selected.`,
}}
/>
</div>
</Flex>
<Header as="h5" content="End Date" />
</Flex>
);
});
})}
</div>
</>
);
};
I got empty html

const StaticTable = (props) => {
const [data, setData] = useState({});
useEffect(() => {
const { audio, ...newData } = props.data;
setData(newData);
}, []);
return (
<>
<Button content="Add" primary />
<div>
{Object.keys(data).map((keyName, i) => {
return (
<Flex key={i} gap="gap.small">
<Header as="h5" content={new Date(keyName).getDay()} />
<Header as="h5" content="Start Date" />
<p>{keyName}</p>
<Flex>
<Dropdown
items={timeoptions}
placeholder="Start Time"
defaultValue={keyName.start}
checkable
getA11ySelectionMessage={{
onAdd: (item) => `${item} has been selected.`,
}}
/>
<div style={{ margin: "10px 0px" }}>
<Dropdown
items={timeoptions}
placeholder="End Time"
defaultValue={keyName.end}
checkable
getA11ySelectionMessage={{
onAdd: (item) => `${item} has been selected.`,
}}
/>
</div>
</Flex>
<Header as="h5" content="End Date" />
</Flex>
);
});
})}
</div>
</>
);
};

I have a list of icons.
When I click on one of them, I want it to :
1/ change state to day or night
2/ change icon image to a sun or a moon.
But with the code that I've written, if I click on one, it changes all the icons image and only one state is linked to all.
How can I do so each icons has it own state and when i click on icon, only the icon clicked changes to a moon or a sun and not all of them ?
My code :
export default function MyModal() {
const [isVisible, setVisible] = useState(false);
const [isDay, setDay] = useState(true);
const { RangePicker } = DatePicker;
const { Option } = Select;
const style = {
verticalAlign: "middle",
marginRight: 10,
};
function handleDayNight() {
isDay === true ? setDay(false) : setDay(true);
console.log("isDay =", isDay);
}
function handleSelectChange(value) {
console.log(`selected ${value}`);
}
function handleCheckChange(checkedValues) {
console.log("checked =", checkedValues);
}
return (
<div>
<Button type="primary" onClick={() => setVisible(true)}>
Add an exception
</Button>
<Modal
title="Add an exception"
style={{ top: 20 }}
visible={isVisible}
onOk={() => setVisible(false)}
onCancel={() => setVisible(false)}
>
<p>Exceptions name</p>
<Input placeholder="80% Wednesday" />
<p style={{ marginTop: 10 }}>Select date</p>
<RangePicker onChange={([date]) => console.log(date)} />
<p style={{ marginTop: 10 }}>Frequency</p>
<Select
defaultValue="Weekly"
style={{ width: 120 }}
onChange={handleSelectChange}
>
<Option value="daily">Daily</Option>
<Option value="weekly">Weekly</Option>
<Option value="monthly">Monthly</Option>
</Select>
<Divider />
<Checkbox.Group style={{ width: "100%" }} onChange={handleCheckChange}>
<div>
{isDay === true ? (
<Sun style={style} onClick={handleDayNight} />
) : (
<Moon style={style} onClick={handleDayNight} />
)}
<Checkbox value="Monday">Monday</Checkbox>
<br></br>
{isDay === true ? (
<Sun style={style} onClick={handleDayNight} />
) : (
<Moon style={style} onClick={handleDayNight} />
)}
<Checkbox value="Tuesday">Tuesday</Checkbox>
<br></br>
{isDay === true ? (
<Sun style={style} onClick={handleDayNight} />
) : (
<Moon style={style} onClick={handleDayNight} />
)}
<Checkbox value="Wednesday">Wednesday</Checkbox>
<br></br>
{isDay === true ? (
<Sun style={style} onClick={handleDayNight} />
) : (
<Moon style={style} onClick={handleDayNight} />
)}
<Checkbox value="Thursday">Thursday</Checkbox>
<br></br>
<Checkbox value="Friday">Friday</Checkbox>
<br></br>
<Checkbox value="Saturday">Saturday</Checkbox>
<br></br>
<Checkbox value="Sunday">Dimanche</Checkbox>
</div>
</Checkbox.Group>
</Modal>
</div>
);
}

Use a separate component for each of those, so you can have individual separate states inside those components. Eg, replace all of
{isDay === true ? (
<Sun style={style} onClick={handleDayNight} />
) : (
<Moon style={style} onClick={handleDayNight} />
)}
with
<SunMoon style={style} />
const SunMoon = ({ style }) => {
const [isDay, setDay] = useState(true);
const handleDayNight = () => setDay(!isDay);
return isDay
? <Sun style={style} onClick={handleDayNight} />
: <Moon style={style} onClick={handleDayNight} />;
};

I want to use two dialog in sign up page and login page.
the implement that I want to do are signup screen showing up when click to sign up button on the Top page, and login screen showing up when click to login Button on signup page.
I wrote open state on App.js.
but the trouble is when it's written in App.js, two of modal open..
Does anyone know how to settle it?
App.js
const App = () => {
const [open, setOpen] = useState(false);
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
return (
<div>
<Top handleClickOpen={handleClickOpen}/>
<SignupModal open={open} handleClose={handleClose} />
<LoginModal open={open} handleClose={handleClose} />
</div>
)
Top.js
const Top = (props) => {
const classes = useStyles();
return (
<React.Fragment>
<div style={style}>
<Button variant="outlined" className={classes.loginButton} onClick={props.handleClickOpen}>
Login
</Button>
</div>
<h1>Toppage</h1>
</React.Fragment>
);
}
SignupModal.js
const SignupModal = (props) => {
return (
<div>
<Dialog
open={props.open}
onClose={props.handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title"　className={classes.title}>Sign up</DialogTitle>
<DialogContent className={classes.content}>
<div className={classes.text}>
<TextField id="standard-basic" label=“name” fullWidth/>
<TextField id="standard-basic" label=“email” fullWidth/>
<TextField id="standard-basic" label=“password” fullWidth/>
<TextField id="standard-basic" label=“pass”word fullWidth/>
</div>
</DialogContent>
<p className={classes.toLogin}>to Login</p>
<DialogActions>
<Button onClick={props.handleClose} className={classes.signUpButton}>
Send
</Button>
</DialogActions>
</Dialog>
</div>
);
}
LoginModal.ls
const LoginModal = (props) => {
return (
<div>
<Dialog
open={props.open}
onClose={props.handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title"　className={classes.title}>Login</DialogTitle>
<DialogContent className={classes.content}>
<div className={classes.text}>
<TextField id="standard-basic" label=“name” fullWidth/>
<TextField id="standard-basic" label=“pass”word fullWidth}/>
</div>
</DialogContent>
<DialogActions>
<Button onClick={props.handleClose} className={classes.signUpButton}>
Login
</Button>
</DialogActions>
</Dialog>
</div>
);
}
export default LoginModal

You are sharing the state on both of your modals that's why.
The solution is simple, have 2 states; one that will determine if SignupModal is opened or not and another one for LoginModal.
const App = () => {
const [openLogin, setOpenLogin] = useState(false);
const [openSignup, setOpenSignup] = useState(false);
return (
<div>
<Top
onClickLogin={() => setOpenLogin(true)}
onClickSignup={() => setOpenSignup(true)}
/>
<SignupModal open={openLogin} handleClose={() => setOpenLogin(false)} />
<LoginModal open={openSignup} handleClose={() => setOpenSignup(false)} />
</div>
);
};
const Top = (props) => {
return (
<React.Fragment>
<div>
<Button
variant="outlined"
className={classes.loginButton}
onClick={props.onClickLogin}
>
Login
</Button>
<Button
variant="outlined"
className={classes.loginButton}
onClick={props.onClickSignup}
>
Signup
</Button>
</div>
<h1>Toppage</h1>
</React.Fragment>
);
};