Open stla opened 4 years ago
Hello,
The library does not correctly indents this JSX code:
class Widget extends React.PureComponent { constructor(props) { super(props); this.state = { value: this.props.value }; this.handleChange = this.handleChange.bind(this); } handleChange(value){ this.setState({value: value}); this.props.setShinyValue(parseFloat(value)); } componentDidUpdate(prevProps, prevState) { if(this.props.value > this.props.max || this.props.value < this.props.min){ this.props.setShinyValue(parseFloat(prevProps.value)); } this.setState({value: this.props.value}); } render() { let slider = null; if(this.props.slider) { slider = ( <Slider flex = "1" min = {this.props.min} max = {this.props.max} step = {this.props.step} size = {this.props.size} value = {this.state.value} onChange = {this.handleChange} > <SliderTrack bg = {this.props.trackColor[1]} > <SliderFilledTrack bg = {this.props.trackColor[0]} /> </SliderTrack> <SliderThumb fontSize = "sm" width = {this.props.thumbOptions.width} height = {this.props.thumbOptions.height} bg = {this.props.thumbOptions.color} borderColor = {this.props.thumbOptions.borderColor} borderWidth = {this.props.thumbOptions.borderWidth} > {createThumb( this.props.thumbOptions.icon, this.props.thumbOptions.iconColor, this.props.thumbOptions.iconSize )} </SliderThumb> </Slider>); } let marginRight = this.props.slider ? this.props.gap : 0; return ( <ChakraProvider theme = {theme}> <CSSReset /> {createLabel(this.props.label)} <Flex> <NumberInput min = {this.props.min} max = {this.props.max} step = {this.props.step} size = {this.props.size} maxW = {this.props.numberInputOptions.width} mr = {marginRight} value = {this.state.value} onChange = {this.handleChange} > <NumberInputField type = "number" fontSize = {this.props.numberInputOptions.fontSize} color = {this.props.numberInputOptions.fontColor} borderColor = {this.props.numberInputOptions.borderColor} focusBorderColor = {this.props.numberInputOptions.focusBorderColor} borderWidth = {this.props.numberInputOptions.borderWidth} /> <NumberInputStepper> <NumberIncrementStepper bg = {this.props.numberInputOptions.stepperColor[0]} /> <NumberDecrementStepper bg = {this.props.numberInputOptions.stepperColor[1]} /> </NumberInputStepper> </NumberInput> {slider} </Flex> </ChakraProvider> ); } } const Input = ({ configuration, value, setValue }) => { return ( <Widget label = {configuration.label} setShinyValue = {setValue} value = {value} min = {configuration.min} max = {configuration.max} step = {configuration.step} size = {configuration.size} numberInputOptions = {configuration.numberInputOptions} trackColor = {configuration.trackColor} thumbOptions = {configuration.thumbOptions} gap = {configuration.gap} slider = {configuration.slider} /> ); };
This is the result:
Hello,
The library does not correctly indents this JSX code:
This is the result: