Having a hard-time getting the the command to work on more complex components

[drj17]

Just saw your post on reddit and wanted to try out the extension, but I'm having a hard time getting it to work on non-trivial components. Here's an example component we have:

import React from 'react';
import { Modal, Form, Checkbox, Button } from 'antd';
import { observable } from 'mobx';
import { observer } from 'mobx-react';
import PropTypes from 'prop-types';

@observer
class MailForm extends React.Component {
  @observable selected = [];

  static propTypes = {
    onOk: PropTypes.func.isRequired,
    open: PropTypes.bool.isRequired,
    onCancel: PropTypes.func.isRequired,
    users: PropTypes.array.isRequired,
    form: PropTypes.object.isRequired
  };

  handleCheck = (value) => {
    if (this.selected.includes(value)) {
      this.selected = this.selected.filter((v) => v !== value);
    } else {
      this.selected = [...this.selected, value];
    }
  };
  render() {
    const {
      onOk,
      open,
      onCancel,
      users,
      form: { getFieldDecorator, setFieldsValue },
      form
    } = this.props;

    const options = users
      .sort((a, b) => (a.name < b.name ? -1 : 1))
      .map((u) => ({ label: u.name, value: u.email }));

    return (
      <Modal
        visible={open}
        destroyOnClose
        title="Invite New Users"
        onCancel={onCancel}
        onOk={() => onOk(form)}
      >
        <Form.Item label="Select users to receive onboarding invitations">
          <div
            style={{
              width: '100%',
              height: 300,
              overflowY: 'auto',
              border: '1px solid #EBEBEB',
              padding: '6px 12px'
            }}
          >
            {getFieldDecorator('emails')(
              <Checkbox.Group
                style={{ display: 'flex', flexDirection: 'column' }}
                value={this.selected}
                onChange={this.handleCheck}
                options={options}
              />
            )}
          </div>
        </Form.Item>
        <Button
          onClick={() => setFieldsValue({ emails: users.map((u) => u.email) })}
        >
          Select All
        </Button>
      </Modal>
    );
  }
}

export default Form.create()(MailForm);

When highlighting the div and using the code command, I get "Could not find element or style attribute". I was able to test it on some simpler components and it worked well there. I've never done any work on extensions but I can try and look into fixing this if I have the time.

[Agreon]

Hey thanks for the submit. I just tested it locally and it seems the babel config i use is missing plugins for the decorators. Don't need to work yourself into it, i can push an update soon. ;)

[Agreon]

Ok you found out earlier :D Anyway, i will publish it asap