Is there a way to use any of the material-ui transition components on list elements so that they get animated on addition/deletion (but not mount)?
Just like here: https://reactcommunity.org/react-transition-group/transition-group
You can use the <Fade> transition (or any other transition that material-ui has) and wrap your list-items with that transition.
<Fade in timeout={1500}>
<ListItem key={value} role="listitem" button onClick={handleToggle(value)}>
<ListItemIcon>
<Checkbox
checked={checked.indexOf(value) !== -1}
tabIndex={-1}
disableRipple
inputProps={{ 'aria-labelledby': labelId }}
/>
</ListItemIcon>
<ListItemText id={labelId} primary={`List item ${value + 1}`} />
</ListItem>
</Fade>
You can see a working example here: https://codesandbox.io/s/mui-fade-transition-list-item-e4i0c?file=/demo.js
The original code is from the example in the material ui transfer list page.
Related
In my react app, I would like to control open/close of a material ui v5 Datepicker by clicking an icon button:
function handleShowCalendar() {
setState({ showCalendar: true })
}
<TextField
{...params}
autoFocus={props.autoFocus}
fullWidth
placeholder="Enter a task..."
variant="outlined"
size="small"
InputProps={{
...params.InputProps,
onKeyUp: handleKeyUp,
endAdornment: addTodo.isLoading ? (
<Box position="absolute" top={10} right={10}>
<CircularProgress size={16} />
</Box>
) : (
<Box position="absolute" top={-4} right={0}>
<IconButton
onClick={handleShowCalendar}
disabled={state.text.length <= 0}
>
<CalendarToday />
</IconButton>
</Box>
),
}}
/>
...
<DatePicker
open={state.showCalendar}
value={state.due}
onChange={handleChangeDate}
onClose={() => setState({ showCalendar: false })}
disableHighlightToday
// DialogProps={{ sx: { postition: "inline" } }}
renderInput={(params) => <Fragment {...params} />}
showToolbar={true}
ToolbarComponent={() => (
<AppBar position="static">
<Toolbar>
<Typography variant="h6">Due Date</Typography>
</Toolbar>
</AppBar>
)}
/>
</Fragment>
The problem is the position of the Datepicker is always at the top left corner. Can anyone help why the Datepicker won't show like inline, what I am missing in above code? Thanks.
As an answer to the question in the title, it seems that the code you have posted does open and close the DatePicker.
It sounds like the second question is the one that needs answering, whether it will show "inline".
It seems that the "absolute" position of the Box surrounding the IconButton and the hardcoded top and right values are preventing the borders of the DatePicker from being inside of the TextField.
Here's a Code Sandbox illustrating a DatePicker within a TextField.
If you would like to clarify the positioning you prefer, please do so.
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.
It is possible to put button in endAdornment in TextField, e.g. with code:
<TextField size="small" type="text" id="m_general_reference" value={this.props.invoice.general_reference}
InputProps={{
endAdornment: (
<InputAdornment>
<Button variant="outlined" size="small" style={{textTransform: 'none', height: '20px'}}>
Check General Reference
</Button>
</InputAdornment>
)
}} />
But this code does not work when TextField is changed to Input. Is there more or less standard markup to put endAdornment button in InputField? I am interested in more or less standard solution only and no hacks (in case of hacks I will go with TextField).
I'm using material-ui-pickers 2.2.4 Datepicker component.
However, I would like the Date icon to be placed on the left side instead on the right side (default).
any help?
tried custom css, to wrap the component with css, and all these hacky ways failed.
<MuiPickersUtilsProvider utils={MomentUtils}>
<DatePicker
readOnly
ref='datepicker'
labelFunc={this.formatWeekSelectLabel}
// value=""
onChange={this.handleDateChange}
animateYearScrolling
InputProps={{
disableUnderline: true,
}}
/>
</MuiPickersUtilsProvider>
</MuiThemeProvider>```
<DatePicker
readOnly
ref='datepicker'
labelFunc={this.formatWeekSelectLabel}
// value=""
onChange={this.handleDateChange}
animateYearScrolling
InputProps={{
disableUnderline: true,
}}
InputAdornmentProps={{ position: 'start' }}
/>
I have a problem in switching component. It's too slow to switch animation, there are more delays than 1000ms.
My Component structure looks like this:
<div>
<Tabs
value={value}
onChange={this.handleChange}
>
<Tab label="Item One" />
<Tab label="Item Two" />
</Tabs>
{value === 0 && <TabContainer>Item One</TabContainer>}
</div>
The component is a complex component, where there are many data needs to be displayed.
I want the < Tab > component to complete the switching animation immediately, instead of waiting to happen with the < TabContainer > component.