I'm currently needing to show a little "dot" below some dates on MUIX DatePicker, something like this.
May someone help me?
Thank you
You can do it by manipulating renderDay prop in DatePicker component.
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DatePicker
label="Basic example"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(params) => <TextField {...params} />}
renderDay={(day, _value, DayComponentProps) => {
return (
<Badge
key={day.toString()}
overlap="circular"
badgeContent={
(!DayComponentProps.outsideCurrentMonth && [1, 3, 23].some(x => x === day.date())) ? "⚫" : undefined}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'right'
}}
sx={{
'& .MuiBadge-badge': {
right: '50%'
}
}}
>
<PickersDay {...DayComponentProps} />
</Badge>
);
}}
/>
</LocalizationProvider>
Notice that, by means of :
anchorOrigin = {{
vertical: 'bottom',
horizontal: 'right'
}}
sx = {{
'& .MuiBadge-badge': {
right: '50%'
}
}}
I placed the dot (bullet) at the center bottom of the days number.
Also this means :
badgeContent = {
(!DayComponentProps.outsideCurrentMonth && [1, 3, 23].some(x => x === day.date())) ? "⚫" : undefined
}
If the days that are being shown in the calendar frame are neither related to the current month nor in [1, 3, 23](Which naturally depends on your choice), do not show the dot.
Related
I'm using v7 of react-table.
My issue is I have can set global filter but when i update my data it shows all my data and don't keep my filtered data.
How can I keep my filtered data visible when i want to update my react-table data?
const TableSearchFilter = ({ preGlobalFilteredRows, globalFilter, setGlobalFilter }) => {
const count = preGlobalFilteredRows.length
return (
<div style={{ textAlign: "right", marginBottom: '10px' }}>
<MaterialUI.FormControl sx={{ m: 1, width: '250px' }} variant="outlined">
<MaterialUI.Input
sx={{ fontSize :'12px' }}
value={globalFilter || ""}
onKeyDown={(e) => {
if (e.keyCode ==13) {
e.preventDefault()
}
}}
onChange={(e) => {
setGlobalFilter(e.target.value)
}}
startAdornment={<i className="fas fa-search" style={{ marginRight:'10px' }}></i>}
placeholder={`${count} référence${count > 0 ? 's' : ''}`}
/>
</MaterialUI.FormControl>
</div>
)
}
in my app.js
<Table columns={columns} data={data} />
I am currently facing difficulties with React Mui's Autocomplete component. The Autocomplete is placed in a FormControl component.
In the renderInput prop of the Autocomplete, I added a TextField, but its label is being cut :
I tried playing with padding & margins, but it does not change anything and I do not know where the problem resides.
My code looks like this :
<Autocomplete
autoHighlight
value={value ?? null}
onChange={(event, newValue) => {
updateValue(newValue);
}}
inputValue={inputValue}
onInputChange={(event, newInputValue) => {
setInputValue(newInputValue);
}}
sx={{ overflow: "hidden", whiteSpace: "pre-wrap", p: 0, m: 0 }}
options={displayedOptions}
getOptionValue={(option) => option?.optionValue ?? ""}
getOptionLabel={(option) => option?.optionLabel ?? ""}
renderInput={(params) => (
<TextField
{...params}
variant="outlined"
fullWidth
required={required}
label={label}
InputLabelProps={{ shrink: true }}
/>
)}
/>
As anyone faced this problem before ?
The problem is related to the styles.
From this sx prop:
sx={{ overflow: "hidden", whiteSpace: "pre-wrap", p: 0, m: 0 }}
You need to delete this part overflow: "hidden", so it should be like:
sx={{ whiteSpace: "pre-wrap", p: 0, m: 0 }}
The default is [+] and [-].
and i want to increase this button size.
but i can't find the way in antd v.3.6.x...
Could not find a way to change it for more big size?
Thank you!!!
For antd version 3.6.x (for v3.1.x)
You can customize the css class .ant-table-row-expand-icon
.ant-table-row-expand-icon{
height: 25px;
width: 25px;
font-size: 30px;
}
Screenshot
For antd version 4.x
You can use expandIcon property to resize or change the icon, increase the fontSize to increase size of the icon
<Table
columns={columns}
expandable={{
expandedRowRender: (record) => (
<p style={{ margin: 0 }}>{record.description}</p>
),
rowExpandable: (record) => record.name !== 'Not Expandable',
expandIcon: ({ expanded, onExpand, record }) =>
expanded ? (
<MinusOutlined
style={{ fontSize: '20px' }}
onClick={(e) => onExpand(record, e)}
/>
) : (
<PlusOutlined
style={{ fontSize: '20px' }}
onClick={(e) => onExpand(record, e)}
/>
),
}}
dataSource={data}
/>
Screenshot
Antd Version < V4.x, you have to change the antd css directly.
Antd Version > V4.x. You can refer to the Ant Desing Doc codepen and style the expandIcon you want.
<Table
columns={columns}
dataSource={data}
expandable={{
expandedRowRender: record => (
<p style={{ margin: 0 }}>{record.description}</p>
),
expandIcon: ({ expanded, onExpand, record }) =>
expanded ? (
<MinusCircleTwoTone style={{ fontSize: "150%"}} onClick={e => onExpand(record, e)} />
) : (
<PlusCircleTwoTone style={{ fontSize: "150%"}} onClick={e => onExpand(record, e)} />
)
}}
codepen: https://codesandbox.io/s/fervent-bird-nuzpr?file=/index.js:1270-1684
I created a Data Grid table with 10 columns. It looks great on big screens but when I squeeze it below 1380 px, I expect to see a horizontal bar scrolling but it looks terrible.
I don't want to switch to another library and just need to fix this horizontal scrolling problem. In the docs, it works perfectly. But I use renderCell and I think that cause the problem. But couldn't solve it still.
Here is how it looks like in big screens:
Here how it looks like at 1303 px:
And here on mobile sizes it can scroll but its sequeezed a lot and looks terrible:
I tried many suggestions on stack but couldn't find any solution still.
Here is my styled DataGrid props:
<DataGridStyled
rows={getRowData()}
autoHeight
rowHeight={80}
columns={columns}
rowsPerPageOptions={[5, 10, 15, 30, 100]}
pageSize={pageSize}
onPageSizeChange={(newPageSize) => setPageSize(newPageSize)}
checkboxSelection
disableSelectionOnClick
pagination
scrollbarSize={50}
/>
Here is the 5th column (I used renderCell maybe its because of this?):
{
field: 'bloodPressure',
headerName: 'BP (mmHg)',
headerAlign: 'center',
align: 'center',
type: 'string',
flex: 1,
editable: false,
valueGetter: (params) =>
params?.row?.bloodPressure?.lastSys === undefined
? null
: params?.row?.bloodPressure?.lastSys,
renderCell: (params) => {
return (
<Tooltip
sx={{ cursor: 'pointer' }}
followCursor
title={
params.row?.bloodPressure?.lastDate === undefined
? 'No measurement'
: moment(params.row?.bloodPressure?.lastDate).fromNow()
}
>
<Box
display="flex"
alignItems="center"
justifyContent="center"
width={'60%'}
bgcolor={params.row?.bloodPressure?.riskColor}
borderRadius={1}
py={0.3}
>
<Typography variant="subtitle1" color="black">
{params.row?.bloodPressure?.lastSys === undefined ||
params.row?.bloodPressure?.lastDia === undefined
? '--'
: `${params.row?.bloodPressure?.lastSys?.toFixed(
0
)}/${params.row?.bloodPressure?.lastDia?.toFixed(0)}`}
</Typography>
<Typography
variant="subtitle1"
color="black"
sx={{
display: 'flex',
alignItems: 'center'
}}
>
{params.row?.bloodPressure?.lastSys === undefined &&
params.row?.bloodPressure?.lastDia === undefined ? null : params
.row?.bloodPressure?.lastSys +
params.row?.bloodPressure?.lastDia >
params.row?.bloodPressure?.previousSys +
params.row?.bloodPressure?.previousDia ? (
<ArrowUpwardIcon
sx={{
fontSize: 14,
lineHeight: 1.75,
height: '100%'
}}
/>
) : (
<ArrowDownwardIcon
sx={{
fontSize: 14,
lineHeight: 1.75,
height: '100%'
}}
/>
)}
</Typography>
</Box>
</Tooltip>
);
}
},
I am making a social media app. I am looping through all the comments and showing it on UI. When I click on edit, always the last comment's text show up on input. I tried many different things, changed structure, used bind to bind the context, but nothing has helped.
I am using React Material UI.
Here is the code:
render() {
const { anchorEl } = this.state;
const open = Boolean(anchorEl);
return(
<Panel>
<form noValidate autoComplete="off" onSubmit={this.onSubmit}>
<TextField
id={`comment${this.state.post_id}`}
name="comment"
fullWidth
placeholder="Comment here"
margin="normal"
value={this.state.comment}
onChange={this.handleChange}
InputProps={{
endAdornment : <InputAdornment position="end">
<IconButton onClick={this.resetTextField}>
<CloseIcon/>
</IconButton>
</InputAdornment>
}}
/>
</form>
{this.props.comments && this.props.comments.length > 0 &&
<RenderComments
comments={this.state.comments}
open={open}
anchorEl={this.state.anchorEl}
handleClick={this.handleClick}
handleClose={this.handleClose}
handleDelete={this.handleDelete}
handleEdit={this.handleEdit}
/>
}
</Panel>
)
}
const RenderComments = (props) => {
return props.comments.map(comment =>
<CommentBase
key={comment.id}
comment={comment}
open={props.open}
anchorEl={props.anchorEl}
handleClick={props.handleClick}
handleClose={props.handleClose}
handleDelete={props.handleDelete}
handleEdit={props.handleEdit}
/>
);
};
const CommentBase = ({comment, open, anchorEl, handleClick, handleClose, handleDelete, handleEdit}) => (
<CommentBasePanel>
<CommentText>
{comment.text}
<span style={{ float: 'right', fontSize: 10, color: '#A9A9A9' }}>{moment(comment.created_at).fromNow()}</span>
</CommentText>
<HelperAction>
<MoreVertIcon
id={comment.id}
aria-owns={open ? `simple-popper${comment.id}` : null}
aria-haspopup="true"
variant="contained"
onClick={handleClick}
/>
<Popover
id={`simple-popper${comment.id}`}
open={open}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'right',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
>
<Typography style={{ padding: 10, cursor: 'pointer' }} onClick={() => handleEdit(comment)}>
Edit
</Typography>
<Typography style={{ padding: 10, color: red[500], cursor: 'pointer' }} onClick={() => handleDelete(comment.id)}>
Delete
</Typography>
</Popover>
</HelperAction>
</CommentBasePanel>
);
handleEdit = (comment) => {
this.setState({ comment: comment.text, comment_id: comment.id })
};
A console log on comment here in handleEdit method always logs the last comment no matter what comment I edit. Edit on first comment gives last comment text as you can see in the image.
Bad Popovers management
map copies the same open and anchorEl props to all Popover instances - handleClick (you didn't show this) *opens all of them in the same place** (the last one is on top).
FIX: include id in handleClick, save in state and use in condition for open property
FIX2: You can use one <Popover/> instance especially when not displaying any content related to specific comment.
PS. I spent more time recreating this (guessing missing parts) in stackblitz than real debugging (in fact only checking html structure for <Popover/> with rendered {comment.id}). Next time show more complete code or provide minimal working example.
If you update your RenderComments render method as follows, it should resolve your problem:
const RenderComments = (props) => {
return props.comments.map(comment =>
<CommentBase
key={comment.id}
comment={comment}
open={props.open}
anchorEl={props.anchorEl}
handleClick={ props.handleClick }
handleClose={ props.handleClose }
handleDelete={ () => props.handleDelete(comment.id) }
handleEdit={ () => props.handleEdit(comment) }
/>
);
};