Have this Chat component and inside an input have an en endorsement, inside that i want to have a popover to show and pick emojis, The pop over pops up but the closing functionality does not work.
import React from "react";
import "./styles.css";
import Chat from "./Chat";
export default function App() {
return (
<div className="App">
<Chat />
</div>
);
}
Here is a sandbox example of that.
https://codesandbox.io/embed/zealous-maxwell-3115b?fontsize=14&hidenavigation=1&theme=dark
<InputAdornment position="end">
<IconButton aria-describedby={id} onClick={handleEmojiClick}>
<EmojiEmotionsIcon />
</IconButton>
<PopOver
open={open}
id={id}
anchorEl={anchorEl}
setAnchorEl={setAnchorEl}
/>
<IconButton>
<SendIcon />
</IconButton>
</InputAdornment>
Just puted the Popover out of IconButton Component and it is working now.
Related
I have this btn with an icon insdie of it i click for a long time it created and undesiered effect around the icon any clue how to remove this action ?
import React from "react";
import ReactDOM from "react-dom";
import Button from "#material-ui/core/Button";
import ViewListIcon from "#material-ui/icons/ViewList";
function App() {
return (
<div>
<Button style={{ MuiButtonBase: { disableRipple: true } }}>
<ViewListIcon />
</Button>
</div>
);
}
ReactDOM.render(<App />, document.querySelector("#app"));
CodeSandbox
Add disableRipple prop to Button
<Button disableRipple>
<ViewListIcon />
</Button>
According to docs, the prop disableRipple on MUI Buttons, such as Button or IconButton disable ripple effect.
<Button disableRipple>
<ViewListIcon />
</Button>
By default, a ripple is activated when the host element of the matRipple directive receives mouse or touch events. Upon being pressed, a ripple will begin fading in from the point of contact, radiating to cover the host element. Each ripple will fade out only upon release of the mouse or touch.
Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the .Mui-focusVisible class.
Read more about this here: Ripple.
How can use transitions in __layout for loading a page with animation?
__layout.svelte :
<script>
import Header from '$lib/Header/index.svelte'
import Footer from '$lib/Footer/index.svelte'
import '../../app.css'
import Animate from '$lib/Animate.svelte'
</script>
<Header />
<div class="bg-gray-100">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<Animate>
<slot />
</Animate>
</div>
</div>
<Footer />
Animate.svelte :
<script>
import { fade, fly } from 'svelte/transition'
</script>
<div in:fly={{ y: 200, duration: 2000 }} out:fade>
<slot />
</div>
in this example transitioning effects only works for one time and shows animation. but I'd like to show transition every time that page changes!
Is there a solution to improve this app?
For this you need to use the {#key} block in combination with some variable that updates when you want it to. You can use page from $app/stores for that.
__layout.svelte:
<script>
import Header from '$lib/Header/index.svelte'
import Footer from '$lib/Footer/index.svelte'
import '../../app.css'
import Animate from '$lib/Animate.svelte'
import { page } from '$app/stores' // <-- new
</script>
<Header />
<div class="bg-gray-100">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<!-- The key's content is destroyed and recreated everytime the $page
variable changes -->
{#key $page}
<Animate>
<slot />
</Animate>
{/key}
</div>
</div>
<Footer />
Docs for $app/stores: https://kit.svelte.dev/docs#modules-$app-stores
Docs for {#key}: https://svelte.dev/docs#key
I am trying to use react-hook-form to simply generate some data from two material UI text fields and display the data in the console, but the when clicking the submit button I cannot see anything in the console.log, this is the code:
import React from 'react';
import TextField from '#material-ui/core/TextField';
import Button from '#material-ui/core/Button';
import { makeStyles } from '#material-ui/core/styles';
import { useForm } from 'react-hook-form';
const useStyles = makeStyles({
container: {
margin: '1rem',
'& .MuiTextField-root': {
margin: '1rem 0',
},
},
});
const GuestJoiningForm = () => {
const { register, handleSubmit } = useForm()
const onSubmit = (data) => {
console.log(data);
};
const classes = useStyles();
return (
<form onSubmit={handleSubmit(onSubmit)} className={classes.container}>
<TextField
ref={register}
label="Name"
name="name"
variant="outlined"
fullWidth/>
<TextField
ref={register}
multiline rows={3}
label="Content"
name="content"
variant="outlined"
fullWidth/>
<Button
color="primary"
variant="contained">Submit</Button>
</form>
)
};
export default GuestJoiningForm;
When I enter data into the text fields and hit the submit button, nothing happens and I would expect to see an object of the data I enter. I don't imagine its the console I'm using, but it's in Safari and the only thing I've noticed is something that says [HMR] Waiting for update signal from WDS...
Not sure if that has anything to do with it, but would really appreciate any help on this issue if you get time, thank you.
Last thing to add! I added a type={'submit'} to the button, and the console responded with empty {}, which even though didn't fix the issue I guess proves that the console is working
You need to add type attribute as submit in the Submit button.
<Button type="submit" color="primary" variant="contained">
Submit
</Button>;
You need to add inputRef prop for both the TextField components like this
<TextField
ref={register}
inputRef={register}
label="Name"
name="name"
variant="outlined"
fullWidth
/>
<TextField
ref={register}
multiline
rows={3}
inputRef={register}
label="Content"
name="content"
variant="outlined"
fullWidth
/>
Here's a sandbox for your form.
I am using Ionic 4 React and trying to make a simple chat application. When the user loads the chat page, I'd like to automatically start on the bottom of the page. What is the simplest way to do this?
Here is the code I have:
<IonPage>
{/* Header */}
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonButton onClick={() => {
setCurrentConversationId('')
setState('home');
}}
fill="clear" className="back-button" shape="round" size="default">
<IonIcon slot="icon-only" icon={arrowBack} />
</IonButton>
</IonButtons>
<IonTitle>Chat</IonTitle>
</IonToolbar>
</IonHeader>
{/* Content */}
<IonContent>
{Object.values(messages).map((el, idx) =>
printMessage(el, idx)
)}
</IonContent>
</IonPage>
You can use .scrollToBottom() when loading of content is done. It's a method of ion-content.
I'm very new to React and ES6. I'm building a small application using React and I'm following ES6 standard. Now I need to open a modal window on a button click.
I tried react-bootstrap modal and skylight. But did not find much luck.
Can anyone suggest the best way of opening/closing modal along with a callback.
Thanks in advance.
I've put together an example to illustrate how you might go about this, making use of the parent/child relationship and passing down a callback.
The scenario is basically:
There is a parent <App /> component
It can show a <Modal /> component
<App /> controls whether the <Modal /> is open or not
<App /> passes its child, <Modal />, a callback to "closeModal"
See this JSBin example for the full solution in action: http://jsbin.com/cokola/edit?js,output
And a visual summary:
<Modal /> is just a "dumb" component. It does not "control" whether it is open or not. This is up to the parent <App />. The parent informs it of how to close itself via passing down a callback this.props.closeModal
class Modal extends React.Component {
render() {
const { closeModal } = this.props;
return (
<div className="jumbotron" style={{position: 'absolute', width: '100%', top: 0, height: 500}}>
<h1>Some Modal</h1>
<button
className="btn btn-md btn-primary"
onClick={closeModal}
>Close Modal</button>
</div>
)
}
}
<App /> is aware of the open/closed state and controls its child, <Modal />
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
modalOpen: false
};
}
_openModal() {
this.setState({modalOpen: true});
}
_closeModal() {
this.setState({modalOpen: false});
}
render() {
const { modalOpen } = this.state;
return (
<div>
<button
className="btn btn-md btn-primary"
onClick={this._openModal.bind(this)}
>Open Modal</button>
{/* Only show Modal when "this.state.modalOpen === true" */}
{modalOpen
? <Modal closeModal={this._closeModal.bind(this)} />
: ''}
</div>
);
}
}