We Keep Coding

Material-UI: The key `paperFullWidth` provided to the classes prop is not implemented in WithStyles(ForwardRef(Dialog))

Material-UI: The key paperFullWidth provided to the classes prop is not implemented in WithStyles(ForwardRef(Dialog)).
You can only override one of the following: root.
<Dialog
classes={{
paperFullWidth: props.classes.dialogCustomizedWidth,
paper: props.classes.dialogPaper,
}}
transitionDuration={{ enter: 0, exit: 0 }}
fullWidth={true}
maxWidth={false}
aria-labelledby="customized-dialog-title"
></Dialog>

You can't use withStyles and styles differently from the element to manipulate the dialog element.
For example, incorrect usage:
const styles = (theme) => ({
dialogPaper: {
height: "95%",
padding: 0,
margin: 0,
},
dialogCustomizedWidth: {
"max-width": "70%",
"max-heigth": "95%",
},
root: {
margin: 0,
backgroundColor: theme.palette.dialogCustom.titleBg,
},
closeButton: {
position: "absolute",
right: theme.spacing(1),
top: theme.spacing(1),
color: theme.palette.dialogCustom.titleIconColor,
padding: 3,
},
titleTypography: {
color: theme.palette.dialogCustom.titleTextColor,
},
});
const Dialog = withStyles((theme) => ({
root: {
margin: 10,
},
}))(MuiDialog);
function dialog(props) {
return (
<Dialog
classes={{
paperFullWidth: props.classes.dialogCustomizedWidth,
paper: props.classes.dialogPaper,
}}
transitionDuration={{ enter: 0, exit: 0 }}
fullWidth={true}
maxWidth={false}
aria-labelledby="customized-dialog-title"
open={props.visible}
onClose={() => {
props.close();
}}
>
<DialogTitle
id="customized-dialog-title"
onClose={() => {
props.close();
}}
>
{props.title}
</DialogTitle>
<DialogContent
dividers
style={{ overflowX: "hidden", margin: 0, padding: 0 }}
>
{props.children}
</DialogContent>
</Dialog>
);
}
export default withStyles(styles)(dialog);

Change Background Color in map function, react js and javascript project

const colorList = [
'#FF6263',
'#DE4839',
'#BF3325',
'#E21717',
'#BF3312',
'#D82E2F',
'#EB4D4B',
'#EF5354',
'#B4161B',
'#E6425E',
'#E83A59',
'#B9345A']
<Row flex="flex">
{colorList.map((data, index) =>{
const dat = `'${data}'`
console.log(`'${data}'`)
return(
<Col key={index} style={{
width: '50px',
height: '200px',
backgroundColor: {dat}
}}>
<p>{data}</p>
</Col>
)
})}
</Row>

You are already using back-ticks that's why don't need to use single quotation('');
Change 1-
Should be-
`const dat = `${data}`;
Instead of
const dat = `'${data}'`
Change 2-
Should be
style={{
width: '50px',
height: '200px',
backgroundColor: dat
}}
Instead of
style={{
width: '50px',
height: '200px',
backgroundColor: {dat}
}}
Improved:
<Row flex="flex">
{colorList.map((data, index) =>{
const dat = `${data}`;
console.log(`${data}`);
return(
<Col key={index} style={{
width: '50px',
height: '200px',
backgroundColor: dat
}}>
<p>{data}</p>
</Col>
)
})}
</Row>

You're passing color like
backgroundColor: "'#someColor'"
Edit this line
const dat = `'${data}'`
To
const dat = `${data}`

Another best way of mapping is this:
const colorList = [
{ color: "#FF6263" },
{ color: "#DE4839" },
{ color: "#BF3325" },
{ color: "#E21717" },
{ color: "#BF3312" },
{ color: "#D82E2F" },
{ color: "#EB4D4B" },
{ color: "#EF5354" },
{ color: "#B4161B" },
{ color: "#E6425E" },
{ color: "#E83A59" },
{ color: "#B9345A" },
];
<Row flex="flex">
{colorList.map((data, index) => {
return (
<Col
key={index}
style={{
width: "50px",
height: "200px",
backgroundColor: `${data.color}`,
}}
>
<p>{data.color}</p>
</Col>
);
})}
</Row>

Material UI Slider won't slide

I have a Material UI slider that won't slide when you click on it and drag it. I've more or less copied one of the examples from https://material-ui.com/components/slider/ and added an onChange function. The values update just fine if you click around to different spots. I've been staring at this too long and have gone code blind and can't figure out what I'm missing.
Here's a link to a Sandbox
import React, { useState } from "react";
import PropTypes from "prop-types";
import withStyles from "#material-ui/styles/withStyles";
import Card from "#material-ui/core/Card";
import { Typography, Paper, Grid, CssBaseline } from "#material-ui/core";
import Slider from "#material-ui/core/Slider";
function App(props) {
const [state, setState] = useState({
fields: {
contractAmount: 10000,
termValue: 2
}
});
const handleInvestmentChange = name => (e, value) => {
setState({
...state,
fields: {
...state.fields,
[name]: value
}
});
};
const AmountSlider = withStyles({
root: {
color: "#52af77",
height: 8
},
thumb: {
height: 24,
width: 24,
backgroundColor: "#fff",
border: "2px solid currentColor",
marginTop: -8,
marginLeft: -12,
"&:focus,&:hover,&$active": {
boxShadow: "inherit"
}
},
active: {},
valueLabel: {
left: "calc(-50% + 14px)",
top: -22,
"& *": {
background: "transparent",
color: "#000"
}
},
track: {
height: 8,
borderRadius: 4
},
rail: {
height: 8,
borderRadius: 4
}
})(Slider);
const TermSlider = withStyles({
root: {
color: "#52af77",
height: 8
},
thumb: {
height: 24,
width: 24,
backgroundColor: "#fff",
border: "2px solid currentColor",
marginTop: -8,
marginLeft: -12,
"&:focus,&:hover,&$active": {
boxShadow: "inherit"
}
},
active: {},
valueLabel: {
left: "calc(-50% + 4px)"
},
track: {
height: 8,
borderRadius: 4
},
rail: {
height: 8,
borderRadius: 4
}
})(Slider);
return (
<div>
<CssBaseline />
<Typography variant="h4" align="center" component="h1" gutterBottom>
Select your Investment Level
</Typography>
<Card>
<Paper style={{ padding: 16, minHeight: 445, maxHeight: 445 }}>
<Grid container alignItems="flex-start" spacing={2}>
<Grid item xs={12} lg={12} xl={12}>
<Typography variant="h4">Investment Amount</Typography>
<Typography variant="h6" gutterBottom>
${state.fields.contractAmount.toLocaleString()}
</Typography>
<AmountSlider
valueLabelDisplay="auto"
defaultValue={10000}
value={
typeof state.fields.contractAmount === "number"
? state.fields.contractAmount
: 2000
}
onChange={handleInvestmentChange("contractAmount")}
step={1000}
min={2000}
max={100000}
/>
<Typography variant="h4">Investment Term</Typography>
<Typography variant="h6" gutterBottom>
{state.fields.termValue} years
</Typography>
<TermSlider
name="termValue"
valueLabelDisplay="off"
aria-label="term slider"
defaultValue={10}
value={
typeof state.fields.termValue === "number"
? state.fields.termValue
: 2
}
onChange={handleInvestmentChange("termValue")}
min={2}
max={25}
/>
<Grid
item
style={{
marginTop: 16,
alignContent: "right",
alignItems: "right"
}}
>
<Typography variant="p">
*Your investment amount and contract length can be changed at
any time as described in our Terms & Conditions.
</Typography>
</Grid>
</Grid>
</Grid>
</Paper>
</Card>
</div>
);
}
export default App;

If you need to customize the theme of MUI Slider then you need to use MUI Theme Provider.
And you need to import it like,
import { ThemeProvider, createMuiTheme } from "#material-ui/styles";
Then try moving your custom css into a variable with the value of createMuiTheme method which has overrides property like,
const AmountSlider = createMuiTheme({
overrides: {
MuiSlider: {
root: {
color: "#52af77",
height: 8
},
thumb: {
height: 24,
width: 24,
backgroundColor: "#fff",
border: "2px solid currentColor",
marginTop: -8,
marginLeft: -12,
"&:focus,&:hover,&$active": {
boxShadow: "inherit"
}
},
active: {},
valueLabel: {
left: "calc(-50% + 14px)",
top: -22,
"& *": {
background: "transparent",
color: "#000"
}
},
track: {
height: 8,
borderRadius: 4
},
rail: {
height: 8,
borderRadius: 4
}
}
}
});
Then in template use it like,
<ThemeProvider theme={AmountSlider}>
<Slider
valueLabelDisplay="off"
defaultValue={10000}
value={
typeof state.fields.contractAmount === "number"
? state.fields.contractAmount
: 2000
}
onChange={handleInvestmentChange("contractAmount")}
step={1000}
min={2000}
max={100000}
/>
</ThemeProvider>
Same way you can implement the custom theme for TermSlider as well..
Forked Codesandbox
Note:
I think you are using the same css for both AmountSlider and TermSlider if so, create a single theme variable and use it for both..
Eg.., You could use theme={AmountSlider} for both the Amount and Term sliders if both has the same css.. Ofcourse the variable name can be unique in this case..

add user input data to consts in React app

I have an app.js file in a trello clone.
Toy data is stored,representing posts.
const book1 = [
{id: uuid(), content: 'reflections'}
];
const book2 = [
{id: uuid(), content: 'arising'},
]
a single constant pulls the toy data into columns for the trello clone.
const clusterColumns =
{
[uuid()]: {
name: 'Book 1',
items: book1
},
[uuid()]: {
name: 'Book 2',
items: book2
},
};
The data is hard coded into these consts. Id like to add a user input to the page that, so that users can add their own items to consts for the trello clone.
the clusterColumns const is added to a third const that simply cleans up the data as i move it around on the board:
const onDragEnd = (result, columns, setColumns ) => {
if(!result.destination ) return;
const {source, destination} = result;
if (source.droppableId!==destination.droppableId) {
const sourceColumn = columns[source.droppableId];
const destColumn = columns[destination.droppableId];
const sourceItems = [...sourceColumn.items];
const destItems = [...destColumn.items];
const [removed] = sourceItems.splice(source.index, 1);
destItems.splice(destination.index, 0, removed);
setColumns({
...columns,
[source.droppableId]:{
...sourceColumn,
items: sourceItems,
},
[destination.droppableId]:{
...destColumn,
items: destItems
}
})
}
else {
const column = columns[source.droppableId];
const copiedItems = [...column.items];
const [removed] = copiedItems.splice(source.index, 1);
copiedItems.splice(destination.index, 0, removed)
setColumns({
...columns,
[source.droppableId]: {
...column,
items: copiedItems
}
})
}
};
a main bit of the app.js file is a nested function that builds drag and drop elements with some style, pulling in the toy data
function App() {
const [columns, setColumns] = useState(clusterColumns);
return (
<div>
<div style={{display: 'flex', justifyContent: 'left', height: '95%', position: "relative",
top: 5, left: 90, opacity: '27%'}}>
<DragDropContext onDragEnd={result => onDragEnd(result, columns, setColumns)}>
{Object.entries(columns).map(([id, column]) => {
return (
<div style={{display: 'flex', flexDirection: 'column', alignItems:'center',
fontFamily: 'Montez, sans-serif', color: '#913aff', fontSize: 27, padding:5, borderRadius: '19px',
}}><h2 style={{fontSize:(19*3), height: 45}}>{column.name}</h2>
<h2 style={{fontSize:(19*3), height: 45, top:'9px', position:'absolute', opacity:'60%', color:'#ffa0f9'}}>{column.name}</h2>
<div style={{margin: 2}}>
<Droppable droppableId={id} key={id} >
{(provided, snapshot) => {
return (
<div {...provided.droppableProps}
ref={provided.innerRef}
style={{
padding: 9,
width: 190,
minHeight: 9,
opacity: '95%',
borderRadius: '9px',
background: 'linear-gradient(to right bottom, rgba(196, 181, 255, 1), rgba(132,47,0,0.27)'}} >
{column.items.map((item, index) => {
return (
<Draggable key={item.id} draggableId={item.id} index={index}>
{(provided, snapshot) => {
return (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={{
opacity: '95%',
userSelect: 'none',
padding: 19,
margin: '0px 0px 3px 0px',
backgroundColor: snapshot.isDragging ? '#54ffff':'#b3f542',
background: 'linear-gradient(to right bottom, rgba(84, 255, 255, 0.63), rgba(179, 245, 66, 0.81)',
color: 'rgb(115,38,0)' ,
fontFamily: 'Montez',
fontSize: 36,
borderRadius: '9px',
...provided.draggableProps.style
}}>
{item.content}
</div>
)
}}
</Draggable>
)
}
)}
{provided.placeholder}
</div>
)
}}
</Droppable>
</div>
</div>
)
})}
</DragDropContext>
</div>
</div>
);
}
I've tried adding another class:
class Cell extends React.Component {
render() {
return (
<form>
<input
type="text" style={{
display:'flex',
position:'relative',
top: '-360px',
right:'95px',
fontFamily: "VT323",
width:'144px',
fontSize:'36px',
color: 'rgb(115,38,0)',
opacity:'60%',
borderRadius: '9px',
height: '45px',
background: 'radial-gradient(rgba(196, 181, 255, .9), rgba(168,255,0,0.19)',
borderColor: 'rgba(255,255,255,0)'
}}
/>
</form>
);
}
}
But it is a simple user form. I'd like to have the data entered be added to those consts at the top of the program.

Why does the TextInput's height change on first render?

I'm trying to build a custom autogrow text input in ReactNative.
Starting height should be 48, but after it renders it sets the height to 53.71428680419922 and I don't understand why.
The code is here
import React, { Component } from 'react'
import styled from 'styled-components/native'
const Input = styled.TextInput`
font-family: Roboto;
font-size: 16;
padding-bottom: 16;
padding-top: 16;
height: ${props => props.height};
${props => props.underline
? {
paddingLeft: 0,
paddingRight: 0,
borderBottomWidth: 1,
} : {
marginTop: 18,
paddingLeft: 22,
paddingRight: 22,
borderWidth: 1,
borderStyle: 'solid',
}}
`
export default class TextField extends Component {
state = {
height: 48,
}
handleContentSize = ({ nativeEvent: { contentSize: { height } } }) => {
this.setState({ height })
}
render() {
return (
<Input
height={this.state.height}
underline={underline}
multiline={!underline}
onContentSizeChange={this.handleContentSize}
/>
)
}
}