I want to position selected items from Select isMulti elsewhere.
What I did before was hide the selected values, and save the selected values on some state and display in other place.
But this way I don't have the clear indicator for this element.
handleChange = (event) => {
this.setState({secondarySelectedOptions: event});
};
render() {
const { secondarySelectedOption } = this.state;
return (
<>
<Select
isMulti
name="secondary"
options={this.state.options}
styles={{
multiValue: base => ({
...base,
display: "none"
}),
}}
onChange={this.handleChange}
value={secondarySelectedOption}
/>
</>
)
<div className='half-width'>
{this.state.secondarySelectedOptions.map((item) => (
<div>{item.value}</div>
))}
</div>
Related
I have a search bar as a globalfilter but I want to know if in react-table v7 it is possible to have multivalue in it for example.
I want to search words and it search in all my columns not the exact string but each word in each column.
This is my search input
const TableSearchFilter = ({ preGlobalFilteredRows, globalFilter, setGlobalFilter }) => {
return (<Input
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>}
/>)
}
I have some Cards made with Boostrap, they look like this.
function TimeLine(props) {
return props.data.map(
({ screenName, name, imageProfile, description, timeAgo }) => (
<TwitterCard
screenName={screenName}
name={name}
imageProfile={imageProfile}
description={description}
timeAgo={timeAgo}
/>
)
);
}
Nevertheless if I add the component Link from react router dom, I got this.
function TimeLine(props) {
return props.data.map(
({ screenName, name, imageProfile, description, timeAgo }) => (
<Link to={`/username${screenName}`}>
<TwitterCard
screenName={screenName}
name={name}
imageProfile={imageProfile}
description={description}
timeAgo={timeAgo}
/>
</Link>
)
);
}
How could I keep the align and avoid these underlined text? Is there some alternative to Link? Or a correct approach to do this? Notice that I'm interested in make the Card clickeable so I can use link there
Apply CSS/style to make them not block-level elements.
Example:
function TimeLine(props) {
return props.data.map(
({ screenName, name, imageProfile, description, timeAgo }) => (
<Link
key={`/username${screenName}`}
to={`/username${screenName}`}
style={{ display: "inline" }}
>
<TwitterCard
screenName={screenName}
name={name}
imageProfile={imageProfile}
description={description}
timeAgo={timeAgo}
/>
</Link>
)
);
}
Since the TwitterCard component is the component enforcing the flex/grid layout though the link should be moved into the TwitterCard component inside the Col component.
Example:
const TwitterCard = ({
screenName,
name,
imageProfile,
description,
timeAgo
}) => {
return (
<>
<style type="text/css">
{`
.bg-customBlack {
background-color: #26262C;
color: white;
},
`}
</style>
<Col md={4} className="p-2">
<Link to={`/username${screenName}`}> // <-- link here inside column component
<Card bg="customBlack" className="text-center">
<Card.Header>
#{screenName} - {name}
</Card.Header>
<Card.Body>
<Card.Title>
<Image width={65} height={65} roundedCircle src={imageProfile} />
</Card.Title>
<Card.Text>{description}</Card.Text>
</Card.Body>
<Card.Footer className="text-muted">{timeAgo}</Card.Footer>
</Card>
</Link>
</Col>
</>
);
};
function TimeLine(props) {
return props.data.map(
({ screenName, name, imageProfile, description, timeAgo }) => (
<TwitterCard
key={screenName}
screenName={screenName}
name={name}
imageProfile={imageProfile}
description={description}
timeAgo={timeAgo}
/>
)
);
}
I would like to know how to customize the react datepicker, the main customizations I would like to do are when I click on the header, a grid appears to select the year and month, and if there is a way to disable and paint the weekends with a different color.
Here is my code:
function EditDatePicker(props: GridRenderEditCellParams<string>) {
const [startDate, setStartDate] = useState<Date | null>(new Date());
const openToDate = new Date('01/01/2022');
return (
<DatePicker
dateFormat="dd/MM/yyyy"
selected={startDate}
onChange={(date) => setStartDate(date)}
dateFormatCalendar={"MMM yyyy"}
minDate={subMonths(new Date(), 6)}
maxDate={addMonths(new Date(), 6)}
showMonthYearDropdown
openToDate={openToDate}
/>
);
};
You can check in the documentation:
Custom header
Custom weeks colors
This Custom Hook Example worked for me:
import React, { useState } from "react";
import DatePicker from "react-datepicker";
import { getMonth, getYear } from "date-fns";
import range from "lodash/range";
import "react-datepicker/dist/react-datepicker.css";
export default function UseDatepicker(props) {
const [startDate, setStartDate] = useState(new Date());
const years = range(1990, getYear(new Date()) + 0, 1);
const months = [
"Janvier",
"Février",
"Mars",
"Avril",
"Mai",
"Juin",
"Juillet",
"Août",
"Septembre",
"Octobre",
"Novembre",
"Décembre",
];
return (
<DatePicker
className="custom-input-style"
renderCustomHeader={({
date,
changeYear,
changeMonth,
decreaseMonth,
increaseMonth,
prevMonthButtonDisabled,
nextMonthButtonDisabled,
}) => (
<div
style={{
margin: 10,
display: "flex",
justifyContent: "center",
}}
>
<button
onClick={decreaseMonth}
disabled={prevMonthButtonDisabled}
>
{"<"}
</button>
<select
className="custom-select-style"
value={getYear(date)}
onChange={({ target: { value } }) =>
changeYear(value)
}
>
{years.map((option) => (
<option key={option} value={option}>
{option}
</option>
))}
</select>
<select
className="custom-select-style"
value={months[getMonth(date)]}
onChange={({ target: { value } }) =>
changeMonth(months.indexOf(value))
}
>
{months.map((option) => (
<option key={option} value={option}>
{option}
</option>
))}
</select>
<button
onClick={increaseMonth}
disabled={nextMonthButtonDisabled}
>
{">"}
</button>
</div>
)}
selected={startDate}
onChange={(date) => setStartDate(date)}
/>
);
}
Hope this help! :)
I made the following using the nextjs and framer motion
I have a list of images that I'm mapping over and assigning them a layoutid and an optional variant to animate. The layoutid corresponds to the layoutid on the model1, model2, model3 pages.
Current Behaviour
When first going to the home page and clicking on an image I update some state and set the variant animation to false, this then tells that image to use the layoutid, it then fades out the other images and animates the clicked image into place on the component that is loaded (model1, model2, model3)...Great it works!
If you then click home in the navigation and try clicking an item again it doesn't work, all images are faded out and the clicked image doesn't animated.
Click refresh on the homepage and it works as desired!
here is the code for the page, I suspect it could be something to do with the routing or settings in _app.js
export default function Home() {
const router = useRouter();
const [isClicked, setIsClicked] = useState(null);
const onHandlerClick = (item, href, e) => {
e.preventDefault();
setIsClicked(item);
router.push(href, { scroll: false });
};
return (
<div className="l-grid l-grid-outter">
<div className="c-home-maincontent">
<div>
<main>
<motion.div className="l-grid-3-col" initial="initial" animate="enter" exit="exit" variants={{ exit: { transition: { staggerChildren: 0.1 } } }}>
{images.map((item, index) => {
return (
<motion.div
key={index}
className="c-home-overflowimage c-home-overflowimage2"
layoutId={`imageAnimation${item}`}
variants={isClicked === item ? false : postVariants}
transition={{ ...transition }}
>
<a href={`/model${item}`} onClick={(event) => onHandlerClick(item, `/model${item}`, event)}>
<motion.img
src="/yasmeen.webp"
whileHover={{
scale: 1.1,
}}
/>
</a>
</motion.div>
);
})}
</motion.div>
</main>
</div>
</div>
<Footer />
</div>
);
}
function MyApp({ Component, pageProps }) {
const router = useRouter();
return (
<>
<DefaultSeo {...Seo} />
<AnimateSharedLayout type="crossfade">
<AnimatePresence exitBeforeEnter initial={false}>
<Component {...pageProps} key={router.asPath} />
</AnimatePresence>
</AnimateSharedLayout>
</>
);
}
export default MyApp;
Updated the code to include an animate set to false if its the clicked item
<motion.div className="l-grid-3-col" initial="initial" animate="enter" exit="exit">
{images.map((item, index) => {
return (
<motion.div
key={index}
className="c-home-overflowimage c-home-overflowimage2"
layoutId={`imageAnimation${item}`}
animate={isClicked === item ? false : true}
variants={isClicked === item ? false : postVariants}
transition={{ ...transition }}
>
<a href={`/model${item}`} onClick={(event) => onHandlerClick(item, `/model${item}`, event)}>
<motion.img
src="/yasmeen.webp"
whileHover={{
scale: 1.1,
}}
/>
</a>
</motion.div>
);
})}
</motion.div>
I am trying to change the style (colors) of elements in list items as they are created from a map function, which provides the rgb-color.
Using classes works, but to get it right dynamically, sofor the data/color provided by the object array is a problem.
The attempts beneath do show e.g. fill="rgb(48, 183, 0)", but the classes which define it's style still override the dynamically added style
<Select
multiple
value={filterList[index]}
renderValue={(selected) => selected.join(", ")}
onChange={(event) => {
filterList[index] = event.target.value;
onChange(filterList[index], index, column);
}} >
{ processStatusColorsArr.map(({ id, name, color} ) =>(
MenuItem key={id} value={name} style={{ fill: `${color}%`, color: `${color}%` }} >
<Checkbox
fill={color} style={{ fill: `${color}%`, color: `${color}%` }} />
<ListItemText primary={name}
color= {color} />
<IconButton color={color}
fill={color}
style={{ fill: `${color}%`, color: `${color}%` }} />
</MenuItem>
))}
</Select>
I have also tried this,
{render_filter_process_status_colors(color)} in place of '<IconButton ..../>'
where I have (above this)
const render_filter_process_status_colors = (value, tableMeta, updateValue) => {
if(value === undefined) return;
return (
<div>
<FontAwesomeIcon icon={"square"} style={value} size={"lg"} fixedWidth/>
</div>
);
}
but no luck.
Thx
By using the function
{render_filter_process_status_colors(color)}
which is defined as
const render_filter_process_status_colors = (value, tableMeta, updateValue) => {
if(value === undefined) return;
const iconColor = {color: value}
return (
<div>
<FontAwesomeIcon icon={"square"} style={iconColor} size={"lg"} fixedWidth/>
</div>
); }
I get the icon with the color from my array of rgb colors.