Github user robertkowalski commented on a diff in the pull request:
https://github.com/apache/couchdb-fauxton/pull/825#discussion_r93653925
--- Diff: app/addons/fauxton/components.react.jsx ---
@@ -14,180 +14,126 @@ import app from "../../app";
import FauxtonAPI from "../../core/api";
import React from "react";
import ReactDOM from "react-dom";
-import ZeroClipboard from "zeroclipboard";
import { Modal } from "react-bootstrap";
import "velocity-animate/velocity";
import "velocity-animate/velocity.ui";
-import "zeroclipboard/dist/ZeroClipboard.swf";
-
-function getZeroClipboardSwfPath () {
- return './dashboard.assets/ZeroClipboard.swf';
-}
-
-// super basic right now, but can be expanded later to handle all the
varieties of copy-to-clipboards
-// (target content element, custom label, classes, notifications, etc.)
-var Clipboard = React.createClass({
- propTypes: function () {
- return {
- text: React.PropTypes.string.isRequired,
- displayType: React.PropTypes.string.oneOf(['icon', 'text'])
- };
- },
+// formats a block of code and pretty-prints it in the page. Currently
uses the prettyPrint plugin
+var CodeFormat = React.createClass({
getDefaultProps: function () {
return {
- displayType: 'icon',
- textDisplay: 'Copy',
- onClipboardClick: function () { },
- title: 'Copy to clipboard'
+ lang: "js"
};
},
- componentWillMount: function () {
- ZeroClipboard.config({ swfPath: getZeroClipboardSwfPath() });
- },
+ getClasses: function () {
+ // added for forward compatibility. This component defines an api via
it's props so you can pass lang="N" and
+ // not the class that prettyprint requires for that lang. If (when,
hopefully!) we drop prettyprint we won't
+ // have any change this component's props API and break things
+ var classMap = {
+ js: 'lang-js'
+ };
- getClipboardElement: function () {
- if (this.props.displayType === 'icon') {
- return (<i className="fontawesome icon-paste"></i>);
+ var classNames = 'prettyprint';
+ if (_.has(classMap, this.props.lang)) {
+ classNames += ' ' + classMap[this.props.lang];
}
- return this.props.textDisplay;
+ return classNames;
},
componentDidMount: function () {
- var el = ReactDOM.findDOMNode(this);
- this.clipboard = new ZeroClipboard(el);
- this.clipboard.on('ready', function () {
- this.clipboard.on('copy', function () {
- this.props.onClipboardClick();
- }.bind(this));
- }.bind(this));
-
- this.clipboard.on('error', function (event) {
- console.log('ZeroClipboard error of type "' + event.name + '": ' +
event.message);
- });
- },
-
- onClick: function (event) {
- event.preventDefault();
+ // this one function is all the lib offers. It parses the entire page
and pretty-prints anything with
+ // a .prettyprint class; only executes on an element once
+ prettyPrint();
},
render: function () {
+ var code = JSON.stringify(this.props.code, null, " ");
return (
- <a href="#"
- onClick={this.onClick}
- ref="copy"
- className="copy clipboard-copy-element"
- data-clipboard-text={this.props.text}
- data-bypass="true"
- title={this.props.title}
- >
- {this.getClipboardElement()}
- </a>
+ <div><pre className={this.getClasses()}>{code}</pre></div>
);
}
});
-// use like this:
-// <ComponentsReact.ClipboardWithTextField textToCopy={yourText}
uniqueKey={someUniqueValue}>
-// </ComponentsReact.ClipboardWithTextField>
-// pass in the text and a unique key, the key has to be unique or you'll
get a warning
-var ClipboardWithTextField = React.createClass({
+var _NextTrayInternalId = 0;
+var Tray = React.createClass({
+
propTypes: {
- onClipBoardClick: React.PropTypes.func.isRequired,
- textToCopy: React.PropTypes.string.isRequired,
- uniqueKey: React.PropTypes.string.isRequired,
- showCopyIcon: React.PropTypes.bool
+ onAutoHide: React.PropTypes.func
},
getDefaultProps: function () {
return {
- showCopyIcon: true,
- text: 'Copy'
+ onAutoHide: function () { }
};
},
- componentWillMount: function () {
- ZeroClipboard.config({ swfPath: getZeroClipboardSwfPath() });
+ getInitialState: function () {
+ return {
+ show: false,
+ internalid: (_NextTrayInternalId++)
+ };
},
- componentDidMount: function () {
- var el = ReactDOM.findDOMNode(this.refs["copy-text-" +
this.props.uniqueKey]);
- this.clipboard = new ZeroClipboard(el);
- this.clipboard.on('ready', function () {
- this.clipboard.on('copy', function () {
- this.props.onClipBoardClick();
- }.bind(this));
- }.bind(this));
+ toggle: function (done) {
+ if (this.state.show) {
+ this.hide(done);
+ } else {
+ this.show(done);
+ }
},
- getCopyIcon: function () {
- if (!this.props.showCopyIcon) {
- return null;
+ setVisible: function (visible, done) {
+ if (this.state.show && !visible) {
+ this.hide(done);
+ } else if (!this.state.show && visible) {
+ this.show(done);
}
--- End diff --
you can use early returns here, the else if nesting is a bit hard to read
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastruct...@apache.org or file a JIRA ticket
with INFRA.
---
