Develop Reference

mui useAutocomplete ignores disabled prop

I'm trying to implement my own Autocomplete component using useAutocomplete hook from mui/base package. Everything works as expected apart from disabled option.
My understanding is that the component should not be intractable with.
Example below comes from documentation with added disabled: true option.
How can I force this component to stay closed even if the user clicks when it is disabled?
Code sandbox link
import * as React from "react";
import { useAutocomplete } from "#mui/base/AutocompleteUnstyled";
import { styled } from "#mui/system";
const options = [
{ title: "The Shawshank Redemption", year: 1994 },
{ title: "The Godfather", year: 1972 },
{ title: "The Godfather: Part II", year: 1974 }
];
const Label = styled("label")({
display: "block"
});
const Input = styled("input")(({ theme }) => ({
width: 200,
backgroundColor: theme.palette.mode === "light" ? "#fff" : "#000",
color: theme.palette.mode === "light" ? "#000" : "#fff"
}));
const Listbox = styled("ul")(({ theme }) => ({
width: 200,
margin: 0,
padding: 0,
zIndex: 1,
position: "absolute",
listStyle: "none",
backgroundColor: theme.palette.mode === "light" ? "#fff" : "#000",
overflow: "auto",
maxHeight: 200,
border: "1px solid rgba(0,0,0,.25)",
"& li.Mui-focused": {
backgroundColor: "#4a8df6",
color: "white",
cursor: "pointer"
},
"& li:active": {
backgroundColor: "#2977f5",
color: "white"
}
}));
export default function Autocomplete() {
const {
getRootProps,
getInputLabelProps,
getInputProps,
getListboxProps,
getOptionProps,
groupedOptions,
value,
popupOpen
} = useAutocomplete({
id: "use-autocomplete-demo",
disabled: true, // Component shouldn't be interactable
options: options,
getOptionLabel: (option) => option.title
});
return (
<div>
<p>value: {JSON.stringify(value)}</p>
<div {...getRootProps()}>
<Label {...getInputLabelProps()}>useAutocomplete</Label>
<Input {...getInputProps()} />
</div>
{popupOpen ? (
<Listbox {...getListboxProps()}>
{(groupedOptions as typeof options).map((option, index) => (
<li {...getOptionProps({ option, index })}>{option.title}</li>
))}
</Listbox>
) : null}
</div>
);
}

I believe this is a bug in useAutocomplete hook, although I might be wrong.
For my use case, I fixed this issue by overwriting onMouseDown callback in rendered input
<Input {...getInputProps()} {...(props.disabled && { onMouseDown: undefined })} />
props.disabled above is a prop passed into my custom component

Pushing into an array object in react but not rendering on the screen

Im using react and displaying some labels via the array object of labels. Now, I want to do this dynamically. So if a user clicks a button, the object updates and the user interface should update accordingly as well. The issue here is that I got the array to update after clicking on the button, as evidenced by a console log line that I wrote in the onclick handler. But the user interface does not update accordingly. Just the array shows the values. Here is what the inital array looks like:
const labelsArray = [
{ label: 'Hey There', sublabel1: 'How are you?' },
{
label: 'Greetings', sublabel1: 'Fellows'
},
{ label: 'Awesome', sublabel1: 'Youre doing great', sublabel2: 'cool' }
];
I want to append a warningLabel, and errorLabel to the 2nd object of this array. So since arrays are 0 indexed, I did the following in the onclick handler:
const appendLabel = async () => {
labelsArray[1].warningLabel = "Hello";
labelsArray[1].errorLabel = "Hello";
console.log(labelsArray)
};
The array updates, but not the user interface. Which is really weird.
Also, this is not related to react state mutation, which I know because of my research of this topic when I was trying to figure it out. So just to be clear, its not about state mutation, which might have someone put this as a duplicate question. Its more of a react/object structure question. But I could be wrong! Anyways, any help is appreciated. Thanks!
Here is my whole component for reference
import React, { useState } from 'react';
import { Button, Typography } from '#material-ui/core';
import { withStyles } from '#material-ui/core/styles/';
import Stepper from '#material-ui/core/Stepper';
import Step from '#material-ui/core/Step';
import StepLabel from '#material-ui/core/StepLabel';
import StepConnector from '#material-ui/core/StepConnector';
import PropTypes from 'prop-types';
const styles = theme => ({
stepLabelRoot: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center'
},
checklistHeader: {
fontWeight: 'bold',
marginTop: '80px'
},
connectorIcon: {
color: theme.palette.text.secondary
},
stepper: {
background: 'none',
fontWeight: 'bold'
},
checkListImageContainer: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center'
},
connector: {
},
activeConnector: {
border: 'solid 1px #6fef71'
},
stepIcon: {
height: '35px',
width: '35px',
'&:hover': {
backgroundColor: 'rgba(134, 141, 150, 0.37)',
borderRadius: '50%'
},
},
activeStepIcon: {
backgroundColor: 'yellow'
},
label: {
fontWeight: 'bold',
display: 'flex',
fontSize: '15px'
},
sublabel: {
fontWeight: 'normal',
fontSize: '13px'
},
errorLabel: {
color: 'red'
},
warningLabel: {
color: 'yellow'
},
step: {
'&$completed': {
color: 'lightgreen'
},
'&$active': {
color: 'pink'
},
'&$disabled': {
color: 'red'
},
},
alternativeLabel: {},
active: {
}, // needed so that the &$active tag works
completed: {
},
disabled: {
},
labelContainer: {
'&$alternativeLabel': {
marginTop: 0
},
},
});
const labelsArray = [
{ label: 'Random text?', sublabel1: 'Lorem Ipsum' },
{
label: 'Another random text', sublabel1: 'Hello World'
},
{ label: 'Cool', sublabel1: 'cool', sublabel2: 'ayo' }
];
const Checklist = ({ classes,activeStep }) => {
return (
<React.Fragment>
<Stepper alternativeLabel activeStep={2} connector={<StepConnector />} className={classes.stepper}>
{labelsArray.map(label => (
<Step key={label} completed>
<StepLabel active
completed
StepIconProps={{
classes: {
root: classes.step,
completed: classes.completed,
active: classes.active,
disabled: classes.disabled
}
}}>
<div className={classes.stepLabelRoot}>
<span className={classes.label}>
{label.label}
</span>
<span className={classes.sublabel}>
{label.sublabel1}
</span>
<span className={classes.sublabel}>
{label.sublabel2}
</span>
<span className={classes.sublabel}>
{label.sublabel3}
</span>
<span className={classes.errorLabel}>
{label.errorLabel && <img src="/static/images/lock-material.png" alt="img" style={{ height: '15px', width: '15px' }} />}
{label.errorLabel}
</span>
<span className={classes.warningLabel}>
{label.warningLabel && <img src="/static/images/warning-sign.png" alt="img" style={{ height: '15px', width: '15px' }} />}
{label.warningLabel}
</span>
</div>
</StepLabel>
</Step>
))}
</Stepper>
<Button onClick={() => appendLabel()}>Hello</Button>
</React.Fragment>
);
};
Checklist.defaultProps = {
activeStep: -1
};
Checklist.propTypes = {
classes: PropTypes.object.isRequired,
form: PropTypes.bool.isRequired,
activeStep: PropTypes.number
};
export default withStyles(styles, { withTheme: true })(Checklist);

You need to set the labelsArray in the state and update it accordingly in order to re-render the component when the user clicks the button
Edited:
A way of doing that with a state would be:
const LABELS =[
{ label: 'Hey There', sublabel1: 'How are you?' },
{ label: 'Greetings', sublabel1: 'Fellows' },
{ label: 'Awesome', sublabel1: 'Youre doing great', sublabel2: 'cool' }
];
const [labelsArray, setLabelsArray] = useState(LABELS);
const appendLabel = () => {
let editedLabels = [...labelsArray];
editedLabels[1].warningLabel = "Hello";
editedLabels[1].errorLabel = "Hello";
setLabelsArray(editedLabels);
};

ReactNative Fusionchart license configuration not working

I try to configure the license of Fusionchart in ReactNative as in this URL https://www.npmjs.com/package/react-native-fusioncharts#license-configuration.
But still, it shows the watermark which should not be visible. Is there anything I missed?
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View, Platform } from 'react-native';
import ReactNativeFusionCharts from 'react-native-fusioncharts';
global.licenseConfig = {
key: "license-key",
creditLabel: false // true/false to show/hide watermark respectively
};
export default class App extends Component {
constructor(props) {
super(props);
//STEP 2 - Chart Data
const chartData = [
{ label: 'Venezuela', value: '250' },
{ label: 'Saudi', value: '260' },
{ label: 'Canada', value: '180' },
{ label: 'Iran', value: '140' },
{ label: 'Russia', value: '115' },
{ label: 'UAE', value: '100' },
{ label: 'US', value: '30' },
{ label: 'China', value: '30' },
];
//STEP 3 - Chart Configurations
const chartConfig = {
type: 'column2d',
width: 400,
height: 400,
dataFormat: 'json',
dataSource: {
chart: {
caption: 'Countries With Most Oil Reserves [2017-18]',
subCaption: 'In MMbbl = One Million barrels',
xAxisName: 'Country',
yAxisName: 'Reserves (MMbbl)',
numberSuffix: 'K',
theme: 'fusion',
exportEnabled: 1, // to enable the export chart functionality
},
data: chartData,
},
};
const events = {
// Add your events method here:
// Event name should be in small letters.
dataPlotClick: (ev, props) => {
console.log('dataPlotClick');
},
dataLabelClick: (ev, props) => {
console.log('dataLabelClick');
},
};
this.state = {
chartConfig,
events
};
}
render() {
return (
<View style={styles.container}>
<Text style={styles.heading}>FusionCharts Integration with React Native</Text>
<View style={styles.chartContainer}>
<ReactNativeFusionCharts chartConfig={this.state.chartConfig} events={this.state.events} />
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 50,
height: 500,
backgroundColor: 'white'
},
heading: {
fontSize: 20,
textAlign: 'center',
marginBottom: 10,
},
chartContainer: {
borderColor: 'red',
borderWidth: 1,
height: 500,
},
});
// skip this line if using Create React Native App
AppRegistry.registerComponent('ReactNativeFusionCharts', () => App);
I also add the below code in the root component but not worked.
global.licenseConfig = {
key: "license-key",
creditLabel: false // true/false to show/hide watermark respectively
};

Answering my own question. Hope this will be helpful to someone.
Issue is latest react-native-fusionchart 5.0.0 is not updated with fusionchart 3.17.0. You may need to manually copy the fusionchart content to react-native-fusionchart.
Copy the node_module/fusionchart content into node_modules/react-native-fusioncharts/src/modules/fusionchart folder and run below script.
find fusioncharts -name "*.js" -exec sh -c 'mv "$0" "${0%.js}.fcscript"' {} \;
Then the watermark vanishes as expected. These steps are configured in the gulp script but somehow it seems to be not working.
Hope this issue will be fixed soon.

Chartjs-plugin: How to add a different color to each label?

I have a piechart made with chartjs. I then added a label on each pie thanks to chart-js plugin. Sometimes, the pie background is a bit light, so my white text is not visible enough. I've made a function that check the contrast and color it to black in such a case.
But when applied to chartjs-plugin's label color property, the function runs only once, and keep the same color for all label. How to apply a different color to each label based on its background?
Here is the code:
plugins: {
datalabels: {
color: function(ctx: any) {
[...Array(ctx.dataset.data.length)].map((_, i) => {
return transformColor(ctx.dataset.backgroundColor[i]);
});
},
Thanks!
EDIT:
here is the rendering of my current piechart:

you need to provide backgroundColor: [] in Pie Chart for background color. Here is the complete example:
import React from "react";
import {makeStyles} from "#material-ui/core/styles";
import {Pie} from "react-chartjs-2";
const useStyles = makeStyles(theme => ({
chart: {
marginLeft: theme.spacing(2)
}
}));
export default function PieChartExample(props) {
const classes = useStyles();
const [data, setdata] = React.useState({
labels: ["type1", "type2", "type3", "type4"],
datasets: [
{
label: "No. of registrations made",
backgroundColor: [
"#3e95cd",
"#8e5ea2",
"#3cba9f",
"#e8c3b9",
"#c45850"
],
barThickness: 80,
data: [50, 100, 75, 20, 0]
}
]
});
const getChartData = canvas => {
return data;
};
return (
<React.Fragment>
<div
className={classes.chart}
style={{position: "relative", width: 900, height: 450}}
>
<Pie
options={{
responsive: true,
maintainAspectRatio: true,
legend: {display: true},
title: {
display: true,
text: "Title for the graph"
}
}}
onElementsClick={(e) => { console.log(e, 'e')}}
data={getChartData}
/>
</div>
</React.Fragment>
);
}

Changing Material UI's H1 with createMuiTheme

I am after creating a custom theme with material UI but cannot target individual parts of the theme as I would like:
const theme = createMuiTheme({
palette: {
primary: {
main: '#556cd6',
fontFamily: '"Indie Flower", handwriting',
},
secondary: {
main: '#19857b',
},
error: {
main: red.A400,
},
background: {
default: '#fff',
},
},
typography: {
// Use the system font instead of the default Roboto font.
h1: {
fontFamily: '"Indie Flower", handwriting',
},
},
})
Are you able to change things like default font for h1,h2,input,p etc?