react-clipboard.js icon indicating copy to clipboard operation
react-clipboard.js copied to clipboard

Doesn't work inside react-jsonschema-form

Open banuni opened this issue 7 years ago • 3 comments

I Tried to render a button inside a form, and it did render but clicking it yielded nothing... outside of the form it was all ok. this is the form package: https://github.com/mozilla-services/react-jsonschema-form

banuni avatar Feb 07 '18 18:02 banuni

Thanks for the input, I'll make some tests with it this weekend and should be able to fix it.

nihey avatar Feb 08 '18 13:02 nihey

@banuni I could not reproduce the same issue, do you have a non-working example?

I've tested this and it worked fine:

import React from 'react';

import Form from 'react-jsonschema-form';
import Clipboard from 'rc.js';

const schema = {
  title: "Todo",
  type: "object",
  required: ["title"],
  properties: {
    title: {type: "string", title: "Title", default: "A new task"},
    done: {type: "boolean", title: "Done?", default: false}
  }
};

export default class Index extends React.Component {
  onSuccess() {
    return console.info('successfully copied');
  }

  render() {
    return <Form schema={schema}>
      <div>
        <button type="submit">Submit</button>
        <button type="button">Cancel</button>
      </div>
      <Clipboard data-clipboard-text="I'll be copied" onSuccess={this.onSuccess}>
        copy to clipboard
      </Clipboard>
    </Form>;
  }
}

nihey avatar Feb 19 '18 03:02 nihey

I don't have an actual example, since I ended up not using this lib in the project, but I was talking about a use in the form's uiSchema, somehthing like this (I actually use the jsonshcemaform a bit differently): import React from 'react'; import Form from 'react-jsonschema-form'; import Clipboard from 'rc.js';

const schema = {
  title: "Todo",
  type: "object",
  required: ["title"],
  properties: {
    title: {type: "string", title: "Title", default: "A new task"},
    done: {type: "boolean", title: "Done?", default: false}
  }
};
const uiSchema = {
            'ui:widget': 'WidgetThatHasOnclickOption'
            'ui:options': {
                textToCopy: "I'll be copied"
            }
        };

export default class Index extends React.Component {
  onSuccess() {
    return console.info('successfully copied');
  }

  render() {
    return <Form schema={schema} uiSchema={uiSchema}>
      <div>
        <button type="submit">Submit</button>
        <button type="button">Cancel</button>
      </div>
    </Form>;
  }
}

// the WidgetThatHasOnclickOption

export default class WidgetThatHasOnclickOptionextends React.Component {
  render() {
    return <div>
            <Clipboard data-clipboard-text={this.props.textToCopy}>
              copy to clipboard
            </Clipboard>
          </div>
  }
}

banuni avatar Feb 21 '18 14:02 banuni