in my app I'm working with mui-datatables. I added a custom toolbar to the table with one additional button, which is added into the row with the other buttons. But when I add a second button, it gets added below, although there is enough space. How can I display the second button in the row with the other ones?
const HeaderElements = () => (
<>
<AddNewButton />
<ExportJsonButton />
</>
);
<MUIDataTable
title=""
data={rows}
columns={columns}
options={{
selectableRowsHeader: false,
selectableRowsHideCheckboxes: true,
customToolbar: () => (<HeaderElements />),
}}
/>
I found the solution by myself: has to be wrapped in a Button:
<Button>
<AddNewButton />
</Button>
Related
I want to change the appearance of a button when it its clicked to show an arrow coming out of it. I would like to do it using css. I am building a react application using typescript.
When the next button is clicked the arrow should be removed from the first one and go to the next one.
I have included a picture of the desired outcome.
Here is an example of 2 of the buttons:
<div className="button-container">
<Button
className="text-white font-nunito text active"
onClick={() => onFieldAdd('textField')}
>
<TextFieldsIcon />
<p> Text Box</p>
</Button>
<Button
className="text-white font-nunito text mx-2 pr-15"
onClick={() => onFieldAdd('imageField')}
disabled={!!formId}
>
<AddPhotoAlternateIcon />
<p> Image</p>
</Button>
</div>
This could be the solution you're looking for:
import { useState } from "react";
const YourComponentName = () => {
const [selectedBtn, setSelectedBtn] = useState(null);
const hanldeClick = (e) => setSelectedBtn(e.target.id);
return (
<div>
<button id="btn1" onClick={hanldeClick} className={selectedBtn === "btn1" ? "hasArrow" : ""}>
Button 1
</button>
<button id="btn2" onClick={hanldeClick} className={selectedBtn === "btn2" ? "hasArrow" : ""}>
Button 2
</button>
// SAME THING FOR THE REST OF THE BUTTONS
</div>
)
}
export default YourComponentName;
Just customize it to suit your use case.
Here, I am initializing a state called selectedBtn to null by default, and listening for onClick events on all of the buttons to change that state to the clicked button id. Once it changes, component will rerenders and the CSS class hasArrow will be added to the appropriate button element by checking if selectedBtn state value is equal to the button id, with the help of the ternary conditional operator ?:.
This is a simplified React component that uses helmet to update the link css on runtime:
function App() {
const [brand, setBrand] = useState('nike')
return (
<div className="App">
<Helmet>
<link rel="stylesheet" href={getBrandStyle(brand)} />
</Helmet>
<div>other contents here</div>
<!-- omitted the button components that change the brand state by calling setBrand -->
</div>
);
}
I have recently just used react-helmet as a declarative way to change the head tag's child and with the code I wrote above, when switching the css there is momentary lag when the page has no css stylings and then 1 second later the updated css shows up.
Even during the initial load of the page, if I use queryParameters (code above doesn't show the query parameter approach) such as
https://localhost:3000?brandQueryParam=nike
there is 1 second wherein there is no css styling before the brand css shows up.
Can you please let me know what I am missing and how to resolve this?
This is the solution that I came up with, not sure if setTimeout is the best solution so if anyone else knows a better way, please share it.
const brands = {
nike: 'nike2022',
adidas: 'adidas2017',
fila: 'fila2020'
};
function App() {
const [brand, setBrand] = useState('nike')
const [isLoading, setIsLoading] = useState(false)
const changeBrandStyleOnClick = (brand) => {
setBrand(brand)
setIsLoading(true)
}
return (
<div className="App">
<Helmet>
<link rel="stylesheet"
onChangeClientState={(newState, addedTags, removedTags) => setTimeout(() => setIsLoading(false), 1500)}
href={getBrandStyle(brand)} />
</Helmet>
{isLoading && (
<Overlay>
<Spinner/>
</Overlay>
)}
{!isLoading && (
<>
{Object.keys(brands).filter(b => b !== brand).map(b =>
(<Button onClick={() => changeBrandStyleOnClick (b)} value={b}>
<Logo
alt="default alt name"
appearance="default"
name={b}
size="small"/>
</Button>))
}
<div>other contents here</div>
</>
)}
</div>
);
}
I'm trying to show a school's cancelled classes in a select menu. It's arranged by day:
However, my menu just cuts off the overflow text when at a mobile resolution in developer tools.
The thermodynamics class is cut off.
I'm using material ui's select menu with react. Material UI Select documentation I'm also using the menu item. I want to have classes listed overflow onto the next line. The is where I show the classes per day.
This is the code (it's just an example, and it doesn't run):
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<FormControl className={classes.formControl}>
<InputLabel id="demo-controlled-open-select-label" > Filter classes by day</InputLabel>
<Select
labelId="demo-controlled-open-select-label"
id="demo-controlled-open-select"
open={open}
onClose={handleClose}
onOpen={handleOpen}
defaultValue={subjectFilter}
onChange={handleChangeSubject}
className="styleSelect"
>
{item.SUBJECT === 'OPEN_LEARNING' &&
<ul className ="stylingList">
{(state.subjects) && state.subjects.filter(item =>
(item.SUBJECT === 'OPEN_LEARNING')).map(item =>
<li className ="stList">
{item.CLASS_FULL}
</li>
)}
</ul>
}
</MenuItem>
//this is just one day. I do this for all the days.
) )
}
</Select>
</FormControl>
I don't have styles on the classes listed. I just made class names to customize the areas later if needed. I just changed the text color. Thanks. I tried overflow-wrap: break-word; on the li class (stList), but it didn't make the words go to the next line.
TL;DR: Override the wrapping style of the Menu Item:
const useStyles = makeStyles((theme) => ({
root: {
whiteSpace: "unset",
wordBreak: "break-all"
}
}));
//...
const YourComponent =(props)=>{
const classes = useStyles();
//...
<MenuItem classes={{ root: classes.root }}>
}
NL;PR: By default, the menu item style whiteSpace: 'nowrap' prevents the other wraps to apply. You can inspect how the suggested changes work in this pastebin.
Now, your select's menu items will go:
From this:
to this: .
Use ListItem instead of MenuItem:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<FormControl className={classes.formControl}>
<InputLabel id="demo-controlled-open-select-label" > Filter classes by day</InputLabel>
<Select
labelId="demo-controlled-open-select-label"
id="demo-controlled-open-select"
open={open}
onClose={handleClose}
onOpen={handleOpen}
defaultValue={subjectFilter}
onChange={handleChangeSubject}
className="styleSelect"
>
{item.SUBJECT === 'OPEN_LEARNING' &&
<ul className ="stylingList">
{(state.subjects) && state.subjects.filter(item =>
(item.SUBJECT === 'OPEN_LEARNING')).map(item =>
<li className ="stList">
{item.CLASS_FULL}
</li>
)}
</ul>
}
</ListItem>
//this is just one day. I do this for all the days.
) )
}
</Select>
</FormControl>
I am using react-bootstrap, and have a button with a caret that triggers a dropdown.
But I need to use the vertical 3 dots instead, not in a button style.
I have a span that uses a CSS class for the three dots, but can't seem to find a way to get rid of the button and caret.
What I have tight now is this:
<Dropdown>
<Dropdown.Toggle>
<span className="threedots"></span>
</Dropdown.Toggle>
<Dropdown.Menu size="sm" title="">
<Dropdown.Header>Options</Dropdown.Header>
<Dropdown.Item .... ></Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
I just want to see the three dots (I'll add a mouse-over effect). Is there a way to use a snap as a toggle>
You can customise Dropdown by passing in custom subcomponents. Custom Dropdown Components
const CustomToggle = React.forwardRef(({ children, onClick }, ref) => (
<a
href=""
ref={ref}
onClick={e => {
e.preventDefault();
onClick(e);
}}
>
{/* custom icon */}
{children}
</a>
));
then pass as a custom toggle
<Dropdown >
<Dropdown.Toggle as={CustomToggle}>
</Dropdown.Toggle>
<Dropdown.Menu size="sm" title="">
<Dropdown.Header>Options</Dropdown.Header>
<Dropdown.Item .... ></Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
sample codesandbox,Hope be helpful
How can i make my HTML Elements in Gutenberg binded to an Array/Object?
Hi,
i am programming an Gutenberg Block now and just wanted to bind an Object to my Block but it does not update.
Currently i have an list of 's and wanted to be added automatically if i push the "Click me!" Button.
What it does is... If i push on that button, it pushes the new Element into the Array but the Elements are not added. If i click away (if the block loses focus), the elements are added.
What did i do wrong?
edit: props => {
const { setAttributes, attributes } = props;
let slides = props.attributes.slides;
const addSlide = function(event){
slides.push({ title : 'new' });
setAttributes({ slides: slides });
}
return [
<InspectorControls key="inspector">
<PanelBody
title={'Slides'}
initialOpen={true}
>
{slides.map((slide, i) =>
<li key={i}>
{slide.title}
</li>
)}
<Button isPrimary onClick={addSlide}>
Click me!
</Button>
</PanelBody>
</InspectorControls>,
<div className={ props.className } key='richtext'>
{slides.map((slide, i) =>
<li key={i}>
{slide.title}
</li>
)}
<Button isPrimary onClick={addSlide}>
Click me!
</Button>
</div>
];
}
I'm expecting the list elements to add dynamically while foxused.