Now my div participants is scroll down of component, and i want to scroll my div participants from right side like this, do you guys has any ideal? Thank you so much, have good day
{detailConversation?.profileIds.length} participants
{open ? <ArrowDropDownIcon /> : <ArrowDropUpIcon />}
</span>
{!!open && (
<div className={clsx(classes.partic)}>
<TextInput
label="Search"
variant="outlined"
size="small"
fullWidth
value=""
InputProps={{
endAdornment: (
<InputAdornment position="end">
<SearchIcon />
</InputAdornment>
),
}}
/>
<span className={classes.member}>
<LinkIcon className={classes.btnIcon} />
<span>Invite via link</span>
</span>
{detailConversation?.profileIds?.map((id: number) => (
<Participants
avatar={profiles[id]?.avatar}
name={profiles[id]?.name}
authorization={profiles[id]?.authorization}
/>
))}
</div>
)}
Related
First I am trying to post my form data without an image then that data is passed to the backend successfully. then I try to send an image to the backend with form data and then I got an error. image uploading field is a not required field. how I pass the image to the backend with form data.
This is my basic info tab image uploading field
<Grid item xs={6} md={3} sm={4}>
<Controller
name="avatar"
id="avatar"
control={control}
render={({ field }) => (
<TextField
{...field}
className="mt-4 mb-8"
type="file"
onChange={(event) => {
// console.log(event.target.files[0]);
setSelectedImage(event.target.files[0]);
}}
autoFocus
value={selectedImage}
variant="outlined"
size="small"
fullWidth
/>
)}
/>
</Grid>
this is my user.js file return
return (
<FormProvider {...methods}>
<form onSubmit={methods.handleSubmit(onSubmit)}>
<Root
header={<UserHeader />}
contentToolbar={
<Tabs
value={tabValue}
onChange={handleTabChange}
indicatorColor="primary"
textColor="primary"
variant="scrollable"
scrollButtons="auto"
classes={{ root: 'w-full h-64' }}
>
<Tab className="h-64" label="Basic Info" />
// <Tab className="h-64" label="User Images" />
</Tabs>
}
content={
<div className="p-16 sm:p-16 max-w-2xl">
<div className={tabValue !== 0 ? 'hidden' : ''}>
<BasicInfoTab />
</div>
<div className={tabValue !== 1 ? 'hidden' : ''}>
<ImagesTab />
</div>
{/* <div>
<input type="file" name="file_upload" onChange={onFileChage}/>
</div>
<div>
<button>Submit Data</button>
</div>*/}
</div>
}
innerScroll
/>
</form>
</FormProvider>
);
}
This is my error
Here is my code, received data from API but did take it out to make code work on sandbox, can maybe replace data if it would help. Would appreciate any help. https://codesandbox.io/s/modest-thunder-0ns6o?file=/src/App.js
<TableBody>
{item.userBankAccount.map((item, index) => {
return (
<TableRow hover key={index}>
<TableCell>{item.bankName}</TableCell>
<TableCell>{item.bankAddress}</TableCell>
<TableCell>{item.bankAddress}</TableCell>
<TableCell>{item.bankSwift}</TableCell>
<TableCell>{item.accountName}</TableCell>
<TableCell>{item.accountNo}</TableCell>
<Dialog
open={this.state.dialogueEditOpen}
onClose={this.handleClose}
aria-labelledby="form-dialog-title"
index={index}
>
<DialogTitle id="form-dialog-title">Edit Bank</DialogTitle>
<DialogContent>
<TextField
label="Bank Name"
name="bankName"
onChange={e => this.onChangeUserBankAccount(e, index)}
type="text"
value={item.bankName}
variant="outlined"
/>
<TextField
label="Bank Address"
name="bankAddress"
onChange={e => this.onChangeUserBankAccount(e, index)}
type="text"
value={item.bankAddress || ""}
variant="outlined"
/>
<TextField
label="Bank Swift"
name="bankSwift"
onChange={e => this.onChangeUserBankAccount(e, index)}
type="text"
value={item.bankSwift || ""}
variant="outlined"
/>
<TextField
label="Account Name"
name="accountName"
onChange={e => this.onChangeUserBankAccount(e, index)}
type="text"
value={item.accountName || ""}
variant="outlined"
/>
<TextField
label="AccountAddress"
name="accountAddress"
onChange={e => this.onChangeUserBankAccount(e, index)}
type="text"
value={item.accountAddress || ""}
variant="outlined"
/>
<TextField
label="AccountNo"
name="accountNo"
onChange={e => this.onChangeUserBankAccount(e, index)}
type="text"
value={item.accountNo || ""}
variant="outlined"
/>
</DialogContent>
<DialogActions>
<Button
onClick={e => this.handleClose(e)}
color="primary"
>
Cancel
</Button>
<Button
onClick={e => this.handleSubmit(e)}
color="primary"
>
Save Changes
</Button>
</DialogActions>
</Dialog>
<TableCell align="right">
<IconButton onClick={e => this.handleOpenEdit(e, index)}>
<SvgIcon fontSize="small">
<EditIcon />
</SvgIcon>
</IconButton>
<IconButton onClick={e => this.handleRemove(e, index)}>
<SvgIcon fontSize="small">
<Trash2 />
</SvgIcon>
</IconButton>
</TableCell>
</TableRow>
problem is in the index ,just create a seprate state when clicking edit getting the array number and replaced then index with that ,onchange worked and was saving data on the right place.
I'm new to framework, the no.of contents are getting overloaded. the problem is when we have multiple users then their name need to be displayed according to the content of the message, for that we need to give mapping at first, but the data is getting overloaded.
Can anyone help me in this query?
Here is the code:
<div>
{this.state.data.map(item => {
return (
<Card>
<CardHeader
avatar={<div>Sanjana (or) someone else</div>}
title={
<>
<InputBase
placeholder="Search Google Maps"
margin="normal"
/>
<IconButton type="submit" aria-label="search">
<SearchIcon />
</IconButton>
</>
}
/>
<Divider />
<CardContent className={classes.contentHeight} id="chatList">
<div>
<Message isSender content={item.message} />
<Message content={item.message} />
</div>
</CardContent>
<Divider />
<CardActions>
<Paper className={classes.contentPaper}>
<Input
margin="dense"
className={classes.input}
placeholder="Enter a Message"
disableUnderline
/>
</Paper>
</CardActions>
</Card>
);
})}
</div>
Can anyone help me in this? thanks in advance!
I think you may want to only map the data messages, not the chat container(s)
render() {
const { classes } = this.props;
return (
<div>
<Card>
<CardHeader
avatar={<div>Sanjana (or) someone else</div>}
title={
<>
<InputBase placeholder="Search Google Maps" margin="normal" />
<IconButton type="submit" aria-label="search">
<SearchIcon />
</IconButton>
</>
}
/>
<Divider />
<CardContent className={classes.contentHeight} id="chatList">
{this.state.data.map(item => {
return (
<div>
<Message isSender content={item.message} />
<Message content={item.message} />
</div>
);
})}
</CardContent>
<Divider />
<CardActions>
<Paper className={classes.contentPaper}>
<Input
margin="dense"
className={classes.input}
placeholder="Enter a Message"
disableUnderline
/>
</Paper>
</CardActions>
</Card>
</div>
);
}
I have a Select component thats needs an icon appended as input adornment , only if it is being passed down from parent.
<Select
className={classes.select}
native
input={<FilledInput
{ ...icon && {
startAdornment={
<InputAdornment position="start">
<AccountCircle />
</InputAdornment>
}}}
className={classes.inputContainer}
name={this.props.label}
id={this.props.id} />}
>
It just keeps giving unexpected token error. What is the right way of doing it?
Try:
<Select
className={classes.select}
native
input={
<FilledInput
{...icon ? {
startAdornment: (
<InputAdornment position="start">
<AccountCircle />
</InputAdornment>
)
} : {}}
className={classes.inputContainer}
name={this.props.label}
id={this.props.id}
/>
}
>
I want to create input element which will have select property but also to be able to write custom text in it. I'm using React and Material-UI.
Is it possible to add element inside TextField component (inside div just below input) in Material-UI.
Currently:
Usluga
grupni
Pos
....
With added element:
<div class="MuiFormControl-root-142 ...>
<label class="MuiFormLabel-root-151 ...>Usluga</label>
<div class="MuiInput-root-156 ...>
<input aria-invalid="false" ... list="services" value="">
<datalist id="services">
<li tabindex="-1" ...>grupni<span class="MuiTouchRipple-root-82"></span>
</li>
<li tabindex="-1" ...>Pos<span class="MuiTouchRipple-root-82"></span>
</li>
....
</div>
</div>
React currently:
<TextField
id="service"
label="Usluga"
className={classes.textField}
margin="normal"
onChange={handleChange}
inputProps={{
list: "services"
}}
/>
<datalist id="services">
{
services.map(option => (
<MenuItem key={option.id} value={option.service}>
{ option.service }
</MenuItem>
))
}
</datalist>
If that's not possible, what is the other way to make this?
You can try this method, it worked for me :)
<TextField
required
id='password'
label='Password'
onChange={handleOnChange}
type={toggle.passwordVisibility ? 'text' : 'password'}
InputProps={{
endAdornment: (
<InputAdornment position='end'>
<IconButton
aria-label='toggle password visibility'
onClick={handlePasswordVisibility}
onMouseDown={handleMouseDownPassword}>
{toggle.passwordVisibility && <Visibility />}
{!toggle.passwordVisibility && <VisibilityOff />}
</IconButton>
</InputAdornment>
),
}}
/>
You can do it this way: InputProps={{ endAdornment: <YourComponent /> }}
https://material-ui.com/api/input/
You can try this method, it worked for me :)
<TextField
variant="outlined"
name="rfc"
size={'small'}
label="RFC"
InputProps={{
endAdornment: (
<datalist id="rfc">
<option value="XAXX010101000"></option>
<option value="XEXX010101000"></option>
</datalist>
),
inputProps: {
list: "rfc"
}
}}
/>