A failure with a JSX file

[stla]

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:

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}
                                    />
                                    );
                                    };