We Keep Coding

scrollable material ui chips array using arrow buttons

I'm trying to build custom scrollable chips array with material ui version 4 no version 5.
In older tickets i could see similar demos:
Demo code
I want to change this component scrolling bar to left and right arrow buttons (same line with the Chip array).
please suggest how it can be done by modifying the same code or advice on another approach.

You can use Material UI Tabs
And style scroll Buttons using .MuiTabs-scrollButtons class name.
Or change scroll buttons using Tabs's prop: ScrollButtonComponent.
Material UI Tabs Documentation

#Amr Thanks for the advice, I have now exactly what I need.
I can't share the full code because it's mixed a lot with other code that is not related to this question, but here is something similar that I can share:
import React, { useState } from "react";
import { makeStyles } from "#material-ui/core/styles";
import Chip from "#material-ui/core/Chip";
import Box from "#material-ui/core/Box";
import Tabs from "#material-ui/core/Tabs";
import IconButton from "#material-ui/core/IconButton";
import styled from "#emotion/styled";
import ChevronLeftIcon from "#material-ui/icons/ChevronLeftRounded";
import ChevronRightIcon from "#material-ui/icons/ChevronRightRounded";
const StyledChip = styled(Chip)`
border-radius: 16px;
text-transform: capitalize;
color: ${(props) => (props.selected ? "#FFFFFF" : "#6877AE")};
background-color: ${(props) => (props.selected ? "#03194F" : "#FFFFFF")};
border: 4px solid ${"#03194F"};
border-color: ${(props) =>
props.selected ? "#03194F" : "rgba(0, 83, 229, 0.12)"};
.MuiChip-root&:hover {
background-color: ${(props) => (props.selected ? "#03194F" : "")};
}
`;
const StyledIconButton = styled(IconButton)`
left: ${(props) => (props.isLeft ? "0" : "none")};
right: ${(props) => (props.isLeft ? "none" : "0")};
height: 32px;
width: 32px;
position: absolute;
border-radius: 16px;
border: 1px solid gray;
//top: 33%;
background-color: white;
color: rgba(0, 83, 229, 1);
border-color: rgba(0, 83, 229, 0.12);
z-index: 1;
opacity: 1;
margin: 20px;
:hover {
box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
0px 4px 5px rgba(0, 0, 0, 0.14), 0px 1px 10px rgba(0, 0, 0, 0.12);
border-color: white;
background-color: inherit;
}
`;
const useStyles = makeStyles((theme) => ({
root: {
display: "flex",
justifyContent: "center",
flexWrap: "nowrap",
listStyle: "none",
padding: theme.spacing(0.5),
margin: 0,
overflow: "auto",
maxWidth: "100%"
},
chip: {
margin: theme.spacing(2)
}
}));
export default function ChipsArray() {
const classes = useStyles();
const [chipData, setChipData] = React.useState([
{ key: 0, label: "Angular" },
{ key: 1, label: "jQuery" },
{ key: 2, label: "Polymer" },
{ key: 3, label: "React" },
{ key: 4, label: "Vue" },
{ key: 5, label: "Knockout" },
{ key: 6, label: "Ember" },
{ key: 7, label: "D3" },
{ key: 8, label: "Google Charts" },
{ key: 9, label: "C+" },
{ key: 10, label: "C++" },
{ key: 11, label: "NodeJS" }
]);
const [selectedIndustryFilter, setSelectedIndustryFilter] = React.useState(
"Angular"
);
return (
<Box className={classes.root}>
<Tabs
variant="scrollable"
scrollButtons="on"
aria-label="scrollable auto tabs example"
ScrollButtonComponent={(props) => {
if (props.direction === "left") {
return (
<StyledIconButton isLeft {...props}>
<ChevronLeftIcon />
</StyledIconButton>
);
} else if (props.direction === "right") {
return (
<StyledIconButton {...props}>
<ChevronRightIcon />
</StyledIconButton>
);
} else {
return null;
}
}}
>
{chipData.map((data) => {
return (
<StyledChip
label={data.label}
onClick={() => {
setSelectedIndustryFilter(data.label);
console.log(data.label);
}}
selected={data.label === selectedIndustryFilter}
key={data.key}
className={classes.chip}
/>
);
})}
</Tabs>
</Box>
);
}
also you can check it here:
https://codesandbox.io/s/demo-material-ui-chips-single-line-with-scroll-forked-2f0z30?file=/src/index.js

Set darkMode across multiple html pages

I have two html pages(index.htm and details.htm). Whenever I enable dark Mode in details.html, it is retained in the index.html without any issues, but when I go to the details page from the index.html page the darkMode gets disabled.
I'm using local storage for enabling and disabling the darkMode.
My javascript code:
let darkMode = localStorage.getItem("darkMode");
const toggleBtn = document.querySelectorAll("#mode");
document.body.classList.add('lightMode');
function enableDarkMode() {
localStorage.setItem('darkMode', 'enabled');
document.body.classList.add('darkMode');
document.body.classList.remove('lightMode');
}
function disableDarkMode() {
localStorage.setItem('darkMode', null)
document.body.classList.remove('darkMode');
document.body.classList.add('lightMode');
}
toggleBtn.forEach(btn => {
if(darkMode === 'enabled') {
enableDarkMode();
}
btn.addEventListener("click", () => {
darkMode = localStorage.getItem('darkMode')
if (darkMode !== 'enabled') {
enableDarkMode()
} else {
disableDarkMode();
}
});
})
css code :
.lightMode {
--background-color: white;
--textColor: black;
--borderColor: black;
--shadowColor: grey;
--card: white;
--span: rgba(0, 0, 0, 0.459);
--footer: rgb(231, 231, 231);
--element: rgba(0, 0, 0, 0.03);
--tagColor: rgb(66, 66, 66);
}
.darkMode {
--background-color: rgb(25, 25, 25);
--textColor: rgba(255, 255, 255, 0.76);
--borderColor: white;
--shadowColor: black;
--card: rgb(39, 39, 39);
--span: rgba(255, 255, 255, 0.459);
--footer: rgb(56, 56, 56);
--element: rgba(49, 49, 49, 0.493);
--tagColor: rgb(255, 255, 255);
}
My css only consists of a few custom variables with the same name for both themes.
A for my html the body doesn't have any classes. classes for the body tag are added through javascript
Is there a way to set the darkMode to be enabled to all pages unless the the user changes it himself everytime he visits the page?

I see no problem in your JS, you may have not put the class name 'darkMode' in your body tag of html. One thing is for sure that problem is not the script, but css or html. Look your code for these two again.

How to avoid my animated image clipping the sticky header?

I made a sticky header but I use react-spring animation that is definitely the culprit here, so is it possible to modify it somehow so that it doesn't clip with the header or is that part of the fundamental structure? I feel like it should be possible to make configure it so that it doesn't go OVER other elements and instead goes under. Here are a couple pictures:
The issue here
Here is how it deals with text (as it should):
Here is the relevant js code of the animation and the .css code for it too:
JS:
import React from 'react'
import "./RegionCard.css"
import { useSpring, animated } from 'react-spring'
const calc = (x, y) => [-(y - window.innerHeight / 2) / 30, (x - window.innerWidth / 2) / 30, 1.1]
const trans = (x, y, s) => `perspective(500px) rotateX(${x}deg) rotateY(${y}deg) scale(${s})`
const RegionCard = ({regionName, imageUrl}) => {
const [props, set] = useSpring(() => ({ xys: [0, 0, 1], config: { mass: 5, tension: 350, friction: 40 } }))
return (
<animated.div
class="card"
onMouseMove={({ clientX: x, clientY: y }) => set({ xys: calc(x, y) })}
onMouseLeave={() => set({ xys: [0, 0, 1] })}
style={{backgroundImage: imageUrl, transform: props.xys.interpolate(trans) }}
><h1>{regionName}</h1></animated.div>
)
}
export default RegionCard
CSS:
.card {
width: 450px;
height: 450px;
background: grey;
border-radius: 30px;
background-image: url(https://www.steppestravel.com/app/uploads/2019/06/greater-caucasus-mountain-range-upper-svaneti-georgia.jpg);
background-size: cover;
background-position: center center;
box-shadow: 0px 10px 30px -5px rgba(19, 153, 71, 0.3);
transition: box-shadow 0.5s;
will-change: transform;
}
.card:hover {
box-shadow: 0px 30px 100px -10px rgba(19, 153, 71, 0.3);
}
h1{
color: #79d490;
}

How to customise popup from mapbox

I have angular 8 application and I can show a popup.
But I want to style the popup. But how to do that?
SO I have this template:
<mgl-layer
*ngIf="imageLoaded"
id="camera"
type="symbol"
[source]="{
type: 'geojson',
data: {
type: 'FeatureCollection',
}
}"
(click)= "onClick($event)"
[layout]="{'icon-image': 'camera', 'icon-size': 0.25}"
>
</mgl-layer>
<mgl-popup *ngIf="selectedPoint" [feature]="selectedPoint">
<span [innerHTML]="selectedPoint.properties?.description"></span>
</mgl-popup>
and ts:
allWifiPoints = this.wifiPoints.map((wifi) => ({
type: 'Feature',
properties: {
description:
// eslint-disable-next-line max-len
},
geometry: {
type: 'Point',
coordinates: wifi,
},
}));
onClick(evt: MapLayerMouseEvent) {
this.selectedPoint = evt.features![0];
}
and css:
.mapboxgl-popup-content-wrapper {
width: 89px;
}
but nothing change. The popup stays white
see image.
So what I have to change?
Thank you
So in css: toggle-layer.component.scss
I have this:
:host ::ng-deep .mapboxgl-popup-content-wrapper {
width: 89px;
}

Should work:
:host ::ng-deep .mapboxgl-popup-content-wrapper {
width: 89px;
height: max-content;
border: 2px solid #BF0404;
background-color: rgba(243, 207, 207, 0.7);
border-radius: 18px;
margin-bottom: 3px;
}

Dropdown div not registering when clicked - eventListener and onClick doing nothing

I am making a simple search app in a React function component, the dropdown menu works, and everything looks fine, but when I try to handle the results being clicked, no click registers.
I have used JavaScript to change the the dropdown div's display prop (when the search input is in focus) to block from hidden, and changed the height of it as well with JS. I'm not sure if that has something to do with it.
The event handler in useEffect shows nothing, and the handleClick function also does nothing. Please, I have no idea.
useEffect(() => {
document.addEventListener('click', handleClick);
});
function handleClick(e) {
console.log('handleClick fired');
console.log(e.target);
}
function renderSearchA() {
return (
<div>
<h1>COMBATANT A</h1>
<input
autoFocus
id="searchA"
type="text"
ref={inputA}
onKeyUp={handleChangeA}
onFocus={showResultsA}
onBlur={hideResults}
placeholder={setPlaceHolder()}
/>
<div id="results-div" ref={resultsDivA} className="results-shown">
<ul>{resultsA()}</ul>
</div>
</div>
);
}
function showResultsA() {
if (resultsDivA.current != undefined) {
resultsDivA.current.style = 'display: block;';
resultsDivA.current.style = 'height: 0px;';
resultsDivA.current.style =
'box-shadow: 0 0 0 2pt rgba(255, 108, 35, 0.7)';
window.setTimeout(() => {
// resultsDiv.current.classList.remove('results');
resultsDivA.current.classList.add('results-shown');
}, 200);
}
}
function resultsMap(x) {
if (x === 'A' && searchResults != undefined) {
return searchResults.map((a, b) => {
console.log(a);
return (
<li key={a[2]}>
<button onClick="handleClick()" className="hero">
{a[0]}
</button>
</li>
);
});
}
}
return (
<SearchDiv>
<div className="search-a">
{renderSearchA()}
<HeroInfo name="a" id="heroA" />
</div>
<div className="search-b">
{renderSearchB()}
<HeroInfo name="b" id="heroB" className="heroB" />
</div>
</SearchDiv>
);
And the CSS looks like this:
#searchA {
/* input */
width: $ { width };
padding: 0.5rem;
border-radius: 8px 8px 8px 8px;
&:focus {
border-radius: 8px 8px 0 0;
box-shadow: 0 0 0 2pt rgba(255, 108, 35, 0.7);
}
}
#results-div {
box-shadow: 0 0 0 2pt rgba(255, 108, 35, 0.7);
}
.results {
/* div */
border-radius: 0 0 8px 8px;
height: 0px;
display: none;
width: 0px;
}
.results-shown {
height: auto;
margin: auto;
width: $ { width };
display: block;
/* display: block; */
}