[Question] Get permission from AbilityContext to use it in state or as prop

I want to set a form to readonly by wrapping it in a <fieldset disable={someState}> tag.

Now I wonder if I can use the AbilityContext which already holds the correct Ability instance to check if for a specific user the form should be en- or disabled. For sure I can create a new Ability object based on the permissions stored for the logged in user in the class component that contains the form but this would somehow mean to duplicate the Ability instance.

Here is a short code snippet which visualizes the described scenario in the first line of the render function:

import React from 'react';
import { Form, Input } from 'antd';
import PropTypes from 'prop-types';

class WrappedEditor extends React.Component {
  constructor( props ) {
    super(props);

    this.state = {
      editable: false,
    };
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      // TODO: How can I use the AbilityContext to set fileset :: disabled to a dynamic permission based value?
        <fieldset disabled={!this.state.editable}>
          <Form id="editor">
            {getFieldDecorator('someText', {
              rules: [{ required: true, message: 'Please enter a text', initialValue: this.props.editableObject.someText }],
            })}
            <Form.Item label="Some Text">
              <Input/>
            </Form.Item>
          </Form>
        </fieldset>
    );
  }
}

WrappedEditor.propTypes = {
  form: PropTypes.object.isRequired,
  editableObject: PropTypes.object.required,
};

const Editor = Form.create()(WrappedEditor);
export {Editor};

[gibelium]

Thank you for thinking along. The missing link in my brain was about the programatically access to the AbilityContext within a component. I now defined the static ContextType within my component and then can access the ability with this.context.ability.

class WrappedEditor extends React.Component {

...

  render() {
    const { getFieldDecorator } = this.props.form;
    const editorDisabled = !this.context.can('access', 'myEditor');

    return (
      // TODO: How can I use the AbilityContext to set fileset :: disabled to a dynamic permission based value?
      <fieldset disabled={editorDisabled}>
        <Form id="editor">
          {getFieldDecorator('someText', {
            rules: [{ required: true, message: 'Please enter a text', initialValue: this.props.editableObject.someText }],
          })}
          <Form.Item label="Some Text">
            <Input/>
          </Form.Item>
        </Form>
      </fieldset>
    );
  }
}

...

WrappedEditor.contextType = AbilityContext;
const Editor = Form.create()(WrappedEditor);
export {Editor};

I guess this is the way to go with the new Context API even though this.context is marked as deprecated in my IDE. Might this have something to do with createContextualCan returning a StatelessComponent which is also marked as deprecated?

[stalniy]

Thanks for the hint. I will not update this until the next major release. Don’t want to break types for users who uses older version of react