Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

graphiql

Package Overview
Dependencies
Maintainers
1
Versions
559
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

graphiql - npm Package Compare versions

Comparing version 0.6.1 to 0.6.2

dist/utility/CodeMirrorSizer.js
dist/utility/getSelectedOperationName.js

1223

dist/components/DocExplorer.js

@@ -1,21 +0,10 @@

/**
* Copyright (c) 2015, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the license found in the
* LICENSE-examples file in the root directory of this source tree.
*/
'use strict';
exports.__esModule = true;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DocExplorer = undefined;
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var _react = require('react');

@@ -31,2 +20,16 @@

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
* Copyright (c) 2015, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the license found in the
* LICENSE-examples file in the root directory of this source tree.
*/
/**

@@ -49,59 +52,19 @@ * DocExplorer

var DocExplorer = (function (_React$Component) {
var DocExplorer = exports.DocExplorer = function (_React$Component) {
_inherits(DocExplorer, _React$Component);
// Public API
DocExplorer.prototype.showDoc = function showDoc(typeOrField) {
var navStack = this.state.navStack;
var isCurrentlyShown = navStack.length > 0 && navStack[navStack.length - 1] === typeOrField;
if (!isCurrentlyShown) {
navStack = navStack.concat([typeOrField]);
}
this.setState({ navStack: navStack });
};
// Public API
DocExplorer.prototype.showSearch = function showSearch(searchItem) {
var navStack = this.state.navStack;
var lastEntry = navStack.length > 0 && navStack[navStack.length - 1];
if (!lastEntry) {
navStack = navStack.concat([searchItem]);
} else if (lastEntry.searchValue !== searchItem.searchValue) {
navStack = navStack.slice(0, -1).concat([searchItem]);
}
this.setState({ navStack: navStack });
};
_createClass(DocExplorer, null, [{
key: 'propTypes',
value: {
schema: _react.PropTypes.instanceOf(_graphql.GraphQLSchema)
},
enumerable: true
}]);
function DocExplorer() {
var _this = this;
_classCallCheck(this, DocExplorer);
_React$Component.call(this);
var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(DocExplorer).call(this));
this._onToggleBtnClick = function () {
_this.setState({ expanded: !_this.state.expanded });
};
this._onNavBackClick = function () {
_this.handleNavBackClick = function () {
_this.setState({ navStack: _this.state.navStack.slice(0, -1) });
};
this._onClickTypeOrField = function (typeOrField) {
_this.handleClickTypeOrField = function (typeOrField) {
_this.showDoc(typeOrField);
};
this._onSearch = function (event) {
_this.handleSearch = function (event) {
_this.showSearch({

@@ -113,107 +76,146 @@ name: 'Search Results',

this.state = { navStack: [] };
_this.state = { navStack: [] };
return _this;
}
DocExplorer.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {
return this.props.schema !== nextProps.schema || this.state.navStack !== nextState.navStack || this.state.searchValue !== nextState.searchValue;
};
_createClass(DocExplorer, [{
key: 'shouldComponentUpdate',
value: function shouldComponentUpdate(nextProps, nextState) {
return this.props.schema !== nextProps.schema || this.state.navStack !== nextState.navStack || this.state.searchValue !== nextState.searchValue;
}
}, {
key: 'render',
value: function render() {
var schema = this.props.schema;
var navStack = this.state.navStack;
DocExplorer.prototype.render = function render() {
var schema = this.props.schema;
var navStack = this.state.navStack;
var navItem = void 0;
if (navStack.length > 0) {
navItem = navStack[navStack.length - 1];
}
var navItem;
if (navStack.length > 0) {
navItem = navStack[navStack.length - 1];
}
var title;
var content;
if (navItem) {
if (navItem.name === 'Search Results') {
title = navItem.name;
content = _react2['default'].createElement(SearchDoc, {
searchValue: navItem.searchValue,
var title = void 0;
var content = void 0;
if (navItem) {
if (navItem.name === 'Search Results') {
title = navItem.name;
content = _react2.default.createElement(SearchDoc, {
searchValue: navItem.searchValue,
schema: schema,
onClickType: this.handleClickTypeOrField,
onClickField: this.handleClickTypeOrField
});
} else {
title = navItem.name;
content = (0, _graphql.isType)(navItem) ? _react2.default.createElement(TypeDoc, {
key: navItem.name,
type: navItem,
onClickType: this.handleClickTypeOrField,
onClickField: this.handleClickTypeOrField
}) : _react2.default.createElement(FieldDoc, {
key: navItem.name,
field: navItem,
onClickType: this.handleClickTypeOrField
});
}
} else if (schema) {
title = 'Documentation Explorer';
content = _react2.default.createElement(SchemaDoc, {
schema: schema,
onClickType: this._onClickTypeOrField,
onClickField: this._onClickTypeOrField
onClickType: this.handleClickTypeOrField,
onSearch: this.handleSearch
});
} else {
title = navItem.name;
content = _graphql.isType(navItem) ? _react2['default'].createElement(TypeDoc, {
key: navItem.name,
type: navItem,
onClickType: this._onClickTypeOrField,
onClickField: this._onClickTypeOrField
}) : _react2['default'].createElement(FieldDoc, {
key: navItem.name,
field: navItem,
onClickType: this._onClickTypeOrField
});
}
} else if (schema) {
title = 'Documentation Explorer';
content = _react2['default'].createElement(SchemaDoc, {
schema: schema,
onClickType: this._onClickTypeOrField,
onSearch: this._onSearch
});
}
var prevName;
if (navStack.length === 1) {
prevName = 'Schema';
} else if (navStack.length > 1) {
prevName = navStack[navStack.length - 2].name;
}
var prevName = void 0;
if (navStack.length === 1) {
prevName = 'Schema';
} else if (navStack.length > 1) {
prevName = navStack[navStack.length - 2].name;
}
var spinnerDiv = _react2['default'].createElement(
'div',
{ className: 'spinner-container' },
_react2['default'].createElement('div', { className: 'spinner' })
);
var spinnerDiv = _react2.default.createElement(
'div',
{ className: 'spinner-container' },
_react2.default.createElement('div', { className: 'spinner' })
);
var shouldSearchBoxAppear = content && (content.type === SearchDoc || content.type === SchemaDoc);
var shouldSearchBoxAppear = content && (content.type === SearchDoc || content.type === SchemaDoc);
return _react2['default'].createElement(
'div',
{ className: 'doc-explorer' },
_react2['default'].createElement(
return _react2.default.createElement(
'div',
{ className: 'doc-explorer-title-bar' },
prevName && _react2['default'].createElement(
{ className: 'doc-explorer' },
_react2.default.createElement(
'div',
{ className: 'doc-explorer-back', onClick: this._onNavBackClick },
prevName
{ className: 'doc-explorer-title-bar' },
prevName && _react2.default.createElement(
'div',
{
className: 'doc-explorer-back',
onClick: this.handleNavBackClick },
prevName
),
_react2.default.createElement(
'div',
{ className: 'doc-explorer-title' },
title
),
_react2.default.createElement(
'div',
{ className: 'doc-explorer-rhs' },
this.props.children
)
),
_react2['default'].createElement(
_react2.default.createElement(
'div',
{ className: 'doc-explorer-title' },
title
),
_react2['default'].createElement(
'div',
{ className: 'doc-explorer-rhs' },
this.props.children
{ className: 'doc-explorer-contents' },
_react2.default.createElement(SearchBox, {
isShown: shouldSearchBoxAppear,
onSearch: this.handleSearch,
searchValue: navItem ? navItem.searchValue : ''
}),
this.props.schema ? content : spinnerDiv
)
),
_react2['default'].createElement(
'div',
{ className: 'doc-explorer-contents' },
_react2['default'].createElement(SearchBox, {
isShown: shouldSearchBoxAppear,
onSearch: this._onSearch,
searchValue: navItem ? navItem.searchValue : ''
}),
this.props.schema ? content : spinnerDiv
)
);
};
);
}
// Public API
}, {
key: 'showDoc',
value: function showDoc(typeOrField) {
var navStack = this.state.navStack;
var isCurrentlyShown = navStack.length > 0 && navStack[navStack.length - 1] === typeOrField;
if (!isCurrentlyShown) {
navStack = navStack.concat([typeOrField]);
}
this.setState({ navStack: navStack });
}
// Public API
}, {
key: 'showSearch',
value: function showSearch(searchItem) {
var navStack = this.state.navStack;
var lastEntry = navStack.length > 0 && navStack[navStack.length - 1];
if (!lastEntry) {
navStack = navStack.concat([searchItem]);
} else if (lastEntry.searchValue !== searchItem.searchValue) {
navStack = navStack.slice(0, -1).concat([searchItem]);
}
this.setState({ navStack: navStack });
}
}]);
return DocExplorer;
})(_react2['default'].Component);
}(_react2.default.Component);
exports.DocExplorer = DocExplorer;
DocExplorer.propTypes = {
schema: _react.PropTypes.instanceOf(_graphql.GraphQLSchema)
};
var SearchBox = (function (_React$Component2) {
var SearchBox = function (_React$Component2) {
_inherits(SearchBox, _React$Component2);

@@ -224,35 +226,47 @@

_React$Component2.apply(this, arguments);
return _possibleConstructorReturn(this, Object.getPrototypeOf(SearchBox).apply(this, arguments));
}
// Render Search Results
_createClass(SearchBox, [{
key: 'shouldComponentUpdate',
value: function shouldComponentUpdate(nextProps) {
return nextProps.isShown !== this.props.isShown || nextProps.searchValue !== this.props.searchValue;
}
}, {
key: 'render',
value: function render() {
var _this3 = this;
SearchBox.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
return nextProps.isShown !== this.props.isShown || nextProps.searchValue !== this.props.searchValue;
};
return _react2.default.createElement(
'div',
null,
this.props.isShown && _react2.default.createElement(
'label',
{ className: 'search-box-outer' },
_react2.default.createElement('input', { className: 'search-box-input',
onChange: function onChange(event) {
return _this3.props.onSearch(event);
},
type: 'text',
value: this.props.searchValue,
placeholder: 'Search the schema ...'
})
)
);
}
}]);
SearchBox.prototype.render = function render() {
var _this2 = this;
return SearchBox;
}(_react2.default.Component);
return _react2['default'].createElement(
'div',
null,
this.props.isShown && _react2['default'].createElement(
'label',
{ className: 'search-box-outer' },
_react2['default'].createElement('input', { className: 'search-box-input',
onChange: function (event) {
return _this2.props.onSearch(event);
},
type: 'text',
value: this.props.searchValue,
placeholder: 'Search the schema ...' })
)
);
};
// Render Search Results
return SearchBox;
})(_react2['default'].Component);
var SearchDoc = (function (_React$Component3) {
SearchBox.propTypes = {
isShown: _react.PropTypes.bool,
searchValue: _react.PropTypes.string,
onSearch: _react.PropTypes.func
};
var SearchDoc = function (_React$Component3) {
_inherits(SearchDoc, _React$Component3);

@@ -263,82 +277,53 @@

_React$Component3.apply(this, arguments);
return _possibleConstructorReturn(this, Object.getPrototypeOf(SearchDoc).apply(this, arguments));
}
// Render the top level Schema
SearchDoc.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
return this.props.schema !== nextProps.schema || this.props.searchValue !== nextProps.searchValue;
};
SearchDoc.prototype._isMatch = function _isMatch(sourceText, searchValue) {
try {
var escaped = searchValue.replace(/[^_0-9A-Za-z]/g, function (ch) {
return '\\' + ch;
});
return sourceText.search(new RegExp(escaped, 'i')) !== -1;
} catch (e) {
return sourceText.toLowerCase().indexOf(searchValue.toLowerCase()) !== -1;
_createClass(SearchDoc, [{
key: 'shouldComponentUpdate',
value: function shouldComponentUpdate(nextProps) {
return this.props.schema !== nextProps.schema || this.props.searchValue !== nextProps.searchValue;
}
};
}, {
key: 'render',
value: function render() {
var _this5 = this;
SearchDoc.prototype.render = function render() {
var _this3 = this;
var searchValue = this.props.searchValue;
var schema = this.props.schema;
var onClickType = this.props.onClickType;
var onClickField = this.props.onClickField;
var searchValue = this.props.searchValue;
var schema = this.props.schema;
var onClickType = this.props.onClickType;
var onClickField = this.props.onClickField;
var typeMap = schema.getTypeMap();
var typeMap = schema.getTypeMap();
var matchedTypes = [];
var matchedFields = [];
var matchedTypes = [];
var matchedFields = [];
Object.keys(typeMap).forEach(function (typeName) {
var type = typeMap[typeName];
var matchedOn = [];
if (_this5._isMatch(typeName, searchValue)) {
matchedOn.push('Type Name');
}
Object.keys(typeMap).forEach(function (typeName) {
var type = typeMap[typeName];
var matchedOn = [];
if (_this3._isMatch(typeName, searchValue)) {
matchedOn.push('Type Name');
}
if (matchedOn.length) {
matchedTypes.push(_react2.default.createElement(
'div',
{ className: 'doc-category-item' },
_react2.default.createElement(TypeLink, { type: type, onClick: onClickType })
));
}
if (matchedOn.length) {
matchedTypes.push(_react2['default'].createElement(
'div',
{ className: 'doc-category-item' },
_react2['default'].createElement(TypeLink, { type: type, onClick: onClickType })
));
}
if (type.getFields) {
(function () {
var fields = type.getFields();
Object.keys(fields).forEach(function (fieldName) {
var field = fields[fieldName];
if (_this3._isMatch(fieldName, searchValue)) {
matchedFields.push(_react2['default'].createElement(
'div',
{ className: 'doc-category-item' },
_react2['default'].createElement(
'a',
{ className: 'field-name',
onClick: function (event) {
return onClickField(field, type, event);
} },
field.name
),
' on ',
_react2['default'].createElement(TypeLink, { type: type, onClick: onClickType })
));
} else if (field.args && field.args.length) {
var matches = field.args.filter(function (arg) {
return _this3._isMatch(arg.name, searchValue);
});
if (matches.length > 0) {
matchedFields.push(_react2['default'].createElement(
if (type.getFields) {
(function () {
var fields = type.getFields();
Object.keys(fields).forEach(function (fieldName) {
var field = fields[fieldName];
if (_this5._isMatch(fieldName, searchValue)) {
matchedFields.push(_react2.default.createElement(
'div',
{ className: 'doc-category-item' },
_react2['default'].createElement(
_react2.default.createElement(
'a',
{ className: 'field-name',
onClick: function (event) {
onClick: function onClick(event) {
return onClickField(field, type, event);

@@ -348,60 +333,102 @@ } },

),
'(',
_react2['default'].createElement(
'span',
null,
matches.map(function (arg) {
return _react2['default'].createElement(
'span',
{ className: 'arg', key: arg.name },
_react2['default'].createElement(
'span',
{ className: 'arg-name' },
arg.name
),
': ',
_react2['default'].createElement(TypeLink, { type: arg.type, onClick: onClickType })
);
})
),
')',
' on ',
_react2['default'].createElement(TypeLink, { type: type, onClick: onClickType })
_react2.default.createElement(TypeLink, { type: type, onClick: onClickType })
));
} else if (field.args && field.args.length) {
var matches = field.args.filter(function (arg) {
return _this5._isMatch(arg.name, searchValue);
});
if (matches.length > 0) {
matchedFields.push(_react2.default.createElement(
'div',
{ className: 'doc-category-item' },
_react2.default.createElement(
'a',
{ className: 'field-name',
onClick: function onClick(event) {
return onClickField(field, type, event);
} },
field.name
),
'(',
_react2.default.createElement(
'span',
null,
matches.map(function (arg) {
return _react2.default.createElement(
'span',
{ className: 'arg', key: arg.name },
_react2.default.createElement(
'span',
{ className: 'arg-name' },
arg.name
),
': ',
_react2.default.createElement(TypeLink, { type: arg.type, onClick: onClickType })
);
})
),
')',
' on ',
_react2.default.createElement(TypeLink, { type: type, onClick: onClickType })
));
}
}
}
});
})();
});
})();
}
});
if (matchedTypes.length === 0 && matchedFields.length === 0) {
return _react2.default.createElement(
'span',
{ className: 'doc-alert-text' },
'No results found.'
);
}
});
if (matchedTypes.length === 0 && matchedFields.length === 0) {
return _react2['default'].createElement(
'span',
{ className: 'doc-alert-text' },
'No results found.'
return _react2.default.createElement(
'div',
null,
_react2.default.createElement(
'div',
{ className: 'doc-category' },
(matchedTypes.length > 0 || matchedFields.length > 0) && _react2.default.createElement(
'div',
{ className: 'doc-category-title' },
'search results'
),
matchedTypes,
matchedFields
)
);
}
}, {
key: '_isMatch',
value: function _isMatch(sourceText, searchValue) {
try {
var escaped = searchValue.replace(/[^_0-9A-Za-z]/g, function (ch) {
return '\\' + ch;
});
return sourceText.search(new RegExp(escaped, 'i')) !== -1;
} catch (e) {
return sourceText.toLowerCase().indexOf(searchValue.toLowerCase()) !== -1;
}
}
}]);
return _react2['default'].createElement(
'div',
null,
_react2['default'].createElement(
'div',
{ className: 'doc-category' },
(matchedTypes.length > 0 || matchedFields.length > 0) && _react2['default'].createElement(
'div',
{ className: 'doc-category-title' },
'search results'
),
matchedTypes,
matchedFields
)
);
};
return SearchDoc;
})(_react2['default'].Component);
}(_react2.default.Component);
var SchemaDoc = (function (_React$Component4) {
// Render the top level Schema
SearchDoc.propTypes = {
schema: _react.PropTypes.object,
searchValue: _react.PropTypes.string,
onClickType: _react.PropTypes.func,
onClickField: _react.PropTypes.func
};
var SchemaDoc = function (_React$Component4) {
_inherits(SchemaDoc, _React$Component4);

@@ -412,76 +439,86 @@

_React$Component4.apply(this, arguments);
return _possibleConstructorReturn(this, Object.getPrototypeOf(SchemaDoc).apply(this, arguments));
}
// Documentation for a Type
_createClass(SchemaDoc, [{
key: 'shouldComponentUpdate',
value: function shouldComponentUpdate(nextProps) {
return this.props.schema !== nextProps.schema;
}
}, {
key: 'render',
value: function render() {
var schema = this.props.schema;
var queryType = schema.getQueryType();
var mutationType = schema.getMutationType && schema.getMutationType();
var subscriptionType = schema.getSubscriptionType && schema.getSubscriptionType();
SchemaDoc.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
return this.props.schema !== nextProps.schema;
};
SchemaDoc.prototype.render = function render() {
var schema = this.props.schema;
var queryType = schema.getQueryType();
var mutationType = schema.getMutationType && schema.getMutationType();
var subscriptionType = schema.getSubscriptionType && schema.getSubscriptionType();
return _react2['default'].createElement(
'div',
null,
_react2['default'].createElement(Description, {
className: 'doc-type-description',
markdown: 'A GraphQL schema provides a root type for each kind of operation.'
}),
_react2['default'].createElement(
return _react2.default.createElement(
'div',
{ className: 'doc-category' },
_react2['default'].createElement(
null,
_react2.default.createElement(Description, {
className: 'doc-type-description',
markdown: 'A GraphQL schema provides a root type for each kind of operation.'
}),
_react2.default.createElement(
'div',
{ className: 'doc-category-title' },
'root types'
),
_react2['default'].createElement(
'div',
{ className: 'doc-category-item' },
_react2['default'].createElement(
'span',
{ className: 'keyword' },
'query'
{ className: 'doc-category' },
_react2.default.createElement(
'div',
{ className: 'doc-category-title' },
'root types'
),
': ',
_react2['default'].createElement(TypeLink, { type: queryType, onClick: this.props.onClickType })
),
mutationType && _react2['default'].createElement(
'div',
{ className: 'doc-category-item' },
_react2['default'].createElement(
'span',
{ className: 'keyword' },
'mutation'
_react2.default.createElement(
'div',
{ className: 'doc-category-item' },
_react2.default.createElement(
'span',
{ className: 'keyword' },
'query'
),
': ',
_react2.default.createElement(TypeLink, { type: queryType, onClick: this.props.onClickType })
),
': ',
_react2['default'].createElement(TypeLink, { type: mutationType, onClick: this.props.onClickType })
),
subscriptionType && _react2['default'].createElement(
'div',
{ className: 'doc-category-item' },
_react2['default'].createElement(
'span',
{ className: 'keyword' },
'subscription'
mutationType && _react2.default.createElement(
'div',
{ className: 'doc-category-item' },
_react2.default.createElement(
'span',
{ className: 'keyword' },
'mutation'
),
': ',
_react2.default.createElement(TypeLink, { type: mutationType, onClick: this.props.onClickType })
),
': ',
_react2['default'].createElement(TypeLink, {
type: subscriptionType,
onClick: this.props.onClickType
})
subscriptionType && _react2.default.createElement(
'div',
{ className: 'doc-category-item' },
_react2.default.createElement(
'span',
{ className: 'keyword' },
'subscription'
),
': ',
_react2.default.createElement(TypeLink, {
type: subscriptionType,
onClick: this.props.onClickType
})
)
)
)
);
};
);
}
}]);
return SchemaDoc;
})(_react2['default'].Component);
}(_react2.default.Component);
var TypeDoc = (function (_React$Component5) {
// Documentation for a Type
SchemaDoc.propTypes = {
schema: _react.PropTypes.object,
onClickType: _react.PropTypes.func
};
var TypeDoc = function (_React$Component5) {
_inherits(TypeDoc, _React$Component5);

@@ -492,154 +529,167 @@

_React$Component5.apply(this, arguments);
return _possibleConstructorReturn(this, Object.getPrototypeOf(TypeDoc).apply(this, arguments));
}
// Documentation for a field
_createClass(TypeDoc, [{
key: 'shouldComponentUpdate',
value: function shouldComponentUpdate(nextProps) {
return this.props.type !== nextProps.type;
}
}, {
key: 'render',
value: function render() {
var type = this.props.type;
var onClickType = this.props.onClickType;
var onClickField = this.props.onClickField;
TypeDoc.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
return this.props.type !== nextProps.type;
};
var typesTitle = void 0;
var types = void 0;
if (type instanceof _graphql.GraphQLUnionType) {
typesTitle = 'possible types';
types = type.getPossibleTypes();
} else if (type instanceof _graphql.GraphQLInterfaceType) {
typesTitle = 'implementations';
types = type.getPossibleTypes();
} else if (type instanceof _graphql.GraphQLObjectType) {
typesTitle = 'implements';
types = type.getInterfaces();
}
TypeDoc.prototype.render = function render() {
var type = this.props.type;
var onClickType = this.props.onClickType || function () {};
var onClickField = this.props.onClickField || function () {};
var typesTitle;
var types;
if (type instanceof _graphql.GraphQLUnionType) {
typesTitle = 'possible types';
types = type.getPossibleTypes();
} else if (type instanceof _graphql.GraphQLInterfaceType) {
typesTitle = 'implementations';
types = type.getPossibleTypes();
} else if (type instanceof _graphql.GraphQLObjectType) {
typesTitle = 'implements';
types = type.getInterfaces();
}
var typesDef;
if (types && types.length > 0) {
typesDef = _react2['default'].createElement(
'div',
{ className: 'doc-category' },
_react2['default'].createElement(
var typesDef = void 0;
if (types && types.length > 0) {
typesDef = _react2.default.createElement(
'div',
{ className: 'doc-category-title' },
typesTitle
),
types.map(function (subtype) {
return _react2['default'].createElement(
{ className: 'doc-category' },
_react2.default.createElement(
'div',
{ key: subtype.name, className: 'doc-category-item' },
_react2['default'].createElement(TypeLink, { type: subtype, onClick: onClickType })
);
})
);
}
{ className: 'doc-category-title' },
typesTitle
),
types.map(function (subtype) {
return _react2.default.createElement(
'div',
{ key: subtype.name, className: 'doc-category-item' },
_react2.default.createElement(TypeLink, { type: subtype, onClick: onClickType })
);
})
);
}
// InputObject and Object
var fieldsDef;
if (type.getFields) {
var fieldMap = type.getFields();
var fields = Object.keys(fieldMap).map(function (name) {
return fieldMap[name];
});
fieldsDef = _react2['default'].createElement(
'div',
{ className: 'doc-category' },
_react2['default'].createElement(
'div',
{ className: 'doc-category-title' },
'fields'
),
fields.map(function (field) {
// InputObject and Object
var fieldsDef = void 0;
if (type.getFields) {
(function () {
var fieldMap = type.getFields();
var fields = Object.keys(fieldMap).map(function (name) {
return fieldMap[name];
});
fieldsDef = _react2.default.createElement(
'div',
{ className: 'doc-category' },
_react2.default.createElement(
'div',
{ className: 'doc-category-title' },
'fields'
),
fields.map(function (field) {
// Field arguments
var argsDef;
if (field.args && field.args.length > 0) {
argsDef = field.args.map(function (arg) {
return _react2['default'].createElement(
'span',
{ className: 'arg', key: arg.name },
_react2['default'].createElement(
// Field arguments
var argsDef = void 0;
if (field.args && field.args.length > 0) {
argsDef = field.args.map(function (arg) {
return _react2.default.createElement(
'span',
{ className: 'arg', key: arg.name },
_react2.default.createElement(
'span',
{ className: 'arg-name' },
arg.name
),
': ',
_react2.default.createElement(TypeLink, { type: arg.type, onClick: onClickType })
);
});
}
return _react2.default.createElement(
'div',
{ key: field.name, className: 'doc-category-item' },
_react2.default.createElement(
'a',
{
className: 'field-name',
onClick: function onClick(event) {
return onClickField(field, type, event);
} },
field.name
),
argsDef && ['(', _react2.default.createElement(
'span',
{ className: 'arg-name' },
arg.name
),
{ key: 'args' },
argsDef
), ')'],
': ',
_react2['default'].createElement(TypeLink, { type: arg.type, onClick: onClickType })
_react2.default.createElement(TypeLink, { type: field.type, onClick: onClickType })
);
});
}
return _react2['default'].createElement(
'div',
{ key: field.name, className: 'doc-category-item' },
_react2['default'].createElement(
'a',
{
className: 'field-name',
onClick: function (event) {
return onClickField(field, type, event);
} },
field.name
),
argsDef && ['(', _react2['default'].createElement(
'span',
null,
argsDef
), ')'],
': ',
_react2['default'].createElement(TypeLink, { type: field.type, onClick: onClickType })
})
);
})
);
}
})();
}
var valuesDef;
if (type instanceof _graphql.GraphQLEnumType) {
valuesDef = _react2['default'].createElement(
'div',
{ className: 'doc-category' },
_react2['default'].createElement(
var valuesDef = void 0;
if (type instanceof _graphql.GraphQLEnumType) {
valuesDef = _react2.default.createElement(
'div',
{ className: 'doc-category-title' },
'values'
),
type.getValues().map(function (value) {
return _react2['default'].createElement(
{ className: 'doc-category' },
_react2.default.createElement(
'div',
{ key: value.name, className: 'doc-category-item' },
_react2['default'].createElement(
{ className: 'doc-category-title' },
'values'
),
type.getValues().map(function (value) {
return _react2.default.createElement(
'div',
{ className: 'enum-value' },
value.name
),
_react2['default'].createElement(Description, {
className: 'doc-value-description',
markdown: value.description
})
);
})
{ key: value.name, className: 'doc-category-item' },
_react2.default.createElement(
'div',
{ className: 'enum-value' },
value.name
),
_react2.default.createElement(Description, {
className: 'doc-value-description',
markdown: value.description
})
);
})
);
}
return _react2.default.createElement(
'div',
null,
_react2.default.createElement(Description, {
className: 'doc-type-description',
markdown: type.description || 'No Description'
}),
type instanceof _graphql.GraphQLObjectType && typesDef,
fieldsDef,
valuesDef,
!(type instanceof _graphql.GraphQLObjectType) && typesDef
);
}
}]);
return _react2['default'].createElement(
'div',
null,
_react2['default'].createElement(Description, {
className: 'doc-type-description',
markdown: type.description || 'No Description'
}),
type instanceof _graphql.GraphQLObjectType && typesDef,
fieldsDef,
valuesDef,
!(type instanceof _graphql.GraphQLObjectType) && typesDef
);
};
return TypeDoc;
})(_react2['default'].Component);
}(_react2.default.Component);
var FieldDoc = (function (_React$Component6) {
// Documentation for a field
TypeDoc.propTypes = {
type: _react.PropTypes.object,
onClickType: _react.PropTypes.func,
onClickField: _react.PropTypes.func
};
var FieldDoc = function (_React$Component6) {
_inherits(FieldDoc, _React$Component6);

@@ -650,75 +700,85 @@

_React$Component6.apply(this, arguments);
return _possibleConstructorReturn(this, Object.getPrototypeOf(FieldDoc).apply(this, arguments));
}
// Renders a type link
_createClass(FieldDoc, [{
key: 'shouldComponentUpdate',
value: function shouldComponentUpdate(nextProps) {
return this.props.field !== nextProps.field;
}
}, {
key: 'render',
value: function render() {
var _this9 = this;
FieldDoc.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
return this.props.field !== nextProps.field;
};
var field = this.props.field;
FieldDoc.prototype.render = function render() {
var _this4 = this;
var field = this.props.field;
var argsDef;
if (field.args && field.args.length > 0) {
argsDef = _react2['default'].createElement(
'div',
{ className: 'doc-category' },
_react2['default'].createElement(
var argsDef = void 0;
if (field.args && field.args.length > 0) {
argsDef = _react2.default.createElement(
'div',
{ className: 'doc-category-title' },
'arguments'
),
field.args.map(function (arg) {
return _react2['default'].createElement(
{ className: 'doc-category' },
_react2.default.createElement(
'div',
{ key: arg.name, className: 'doc-category-item' },
_react2['default'].createElement(
{ className: 'doc-category-title' },
'arguments'
),
field.args.map(function (arg) {
return _react2.default.createElement(
'div',
null,
_react2['default'].createElement(
'span',
{ className: 'arg-name' },
arg.name
{ key: arg.name, className: 'doc-category-item' },
_react2.default.createElement(
'div',
null,
_react2.default.createElement(
'span',
{ className: 'arg-name' },
arg.name
),
': ',
_react2.default.createElement(TypeLink, { type: arg.type, onClick: _this9.props.onClickType })
),
': ',
_react2['default'].createElement(TypeLink, { type: arg.type, onClick: _this4.props.onClickType })
),
_react2['default'].createElement(Description, {
className: 'doc-value-description',
markdown: arg.description
})
);
})
);
}
_react2.default.createElement(Description, {
className: 'doc-value-description',
markdown: arg.description
})
);
})
);
}
return _react2['default'].createElement(
'div',
null,
_react2['default'].createElement(Description, {
className: 'doc-type-description',
markdown: field.description || 'No Description'
}),
_react2['default'].createElement(
return _react2.default.createElement(
'div',
{ className: 'doc-category' },
_react2['default'].createElement(
null,
_react2.default.createElement(Description, {
className: 'doc-type-description',
markdown: field.description || 'No Description'
}),
_react2.default.createElement(
'div',
{ className: 'doc-category-title' },
'type'
{ className: 'doc-category' },
_react2.default.createElement(
'div',
{ className: 'doc-category-title' },
'type'
),
_react2.default.createElement(TypeLink, { type: field.type, onClick: this.props.onClickType })
),
_react2['default'].createElement(TypeLink, { type: field.type, onClick: this.props.onClickType })
),
argsDef
);
};
argsDef
);
}
}]);
return FieldDoc;
})(_react2['default'].Component);
}(_react2.default.Component);
var TypeLink = (function (_React$Component7) {
// Renders a type link
FieldDoc.propTypes = {
field: _react.PropTypes.object,
onClickType: _react.PropTypes.func
};
var TypeLink = function (_React$Component7) {
_inherits(TypeLink, _React$Component7);

@@ -729,22 +789,32 @@

_React$Component7.apply(this, arguments);
return _possibleConstructorReturn(this, Object.getPrototypeOf(TypeLink).apply(this, arguments));
}
TypeLink.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
return this.props.type !== nextProps.type;
};
_createClass(TypeLink, [{
key: 'shouldComponentUpdate',
value: function shouldComponentUpdate(nextProps) {
return this.props.type !== nextProps.type;
}
}, {
key: 'render',
value: function render() {
return renderType(this.props.type, this.props.onClick);
}
}]);
TypeLink.prototype.render = function render() {
return renderType(this.props.type, this.props.onClick);
};
return TypeLink;
})(_react2['default'].Component);
}(_react2.default.Component);
function renderType(type, onClick) {
TypeLink.propTypes = {
type: _react.PropTypes.object,
onClick: _react.PropTypes.func
};
function renderType(type, _onClick) {
if (type instanceof _graphql.GraphQLNonNull) {
return _react2['default'].createElement(
return _react2.default.createElement(
'span',
null,
renderType(type.ofType, onClick),
renderType(type.ofType, _onClick),
'!'

@@ -754,14 +824,14 @@ );

if (type instanceof _graphql.GraphQLList) {
return _react2['default'].createElement(
return _react2.default.createElement(
'span',
null,
'[',
renderType(type.ofType, onClick),
renderType(type.ofType, _onClick),
']'
);
}
return _react2['default'].createElement(
return _react2.default.createElement(
'a',
{ className: 'type-name', onClick: function (event) {
return onClick(type, event);
{ className: 'type-name', onClick: function onClick(event) {
return _onClick(type, event);
} },

@@ -774,3 +844,3 @@ type.name

var Description = (function (_React$Component8) {
var Description = function (_React$Component8) {
_inherits(Description, _React$Component8);

@@ -781,23 +851,32 @@

_React$Component8.apply(this, arguments);
return _possibleConstructorReturn(this, Object.getPrototypeOf(Description).apply(this, arguments));
}
Description.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
return this.props.markdown !== nextProps.markdown;
};
_createClass(Description, [{
key: 'shouldComponentUpdate',
value: function shouldComponentUpdate(nextProps) {
return this.props.markdown !== nextProps.markdown;
}
}, {
key: 'render',
value: function render() {
var markdown = this.props.markdown;
if (!markdown) {
return _react2.default.createElement('div', null);
}
Description.prototype.render = function render() {
var markdown = this.props.markdown;
if (!markdown) {
return _react2['default'].createElement('div', null);
var html = (0, _marked2.default)(markdown, { sanitize: true });
return _react2.default.createElement('div', {
className: this.props.className,
dangerouslySetInnerHTML: { __html: html }
});
}
}]);
var html = _marked2['default'](markdown, { sanitize: true });
return _react2['default'].createElement('div', {
className: this.props.className,
dangerouslySetInnerHTML: { __html: html }
});
};
return Description;
}(_react2.default.Component);
return Description;
})(_react2['default'].Component);
Description.propTypes = {
markdown: _react.PropTypes.string,
className: _react.PropTypes.string
};

197

dist/components/ExecuteButton.js

@@ -1,25 +0,28 @@

/**
* Copyright (c) 2015, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the license found in the
* LICENSE-examples file in the root directory of this source tree.
*/
'use strict';
exports.__esModule = true;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ExecuteButton = undefined;
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var _react = require('react');
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
var _react2 = _interopRequireDefault(_react);
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _react = require('react');
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var _react2 = _interopRequireDefault(_react);
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
* Copyright (c) 2015, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the license found in the
* LICENSE-examples file in the root directory of this source tree.
*/
/**

@@ -32,23 +35,11 @@ * ExecuteButton

var ExecuteButton = (function (_React$Component) {
var ExecuteButton = exports.ExecuteButton = function (_React$Component) {
_inherits(ExecuteButton, _React$Component);
_createClass(ExecuteButton, null, [{
key: 'propTypes',
value: {
onClick: _react.PropTypes.func,
isRunning: _react.PropTypes.bool,
operations: _react.PropTypes.array
},
enumerable: true
}]);
function ExecuteButton(props) {
var _this = this;
_classCallCheck(this, ExecuteButton);
_React$Component.call(this, props);
var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(ExecuteButton).call(this, props));
this._onClick = function () {
_this._onClick = function () {
if (_this.props.isRunning) {

@@ -61,3 +52,3 @@ _this.props.onStop();

this._onOptionSelected = function (operation) {
_this._onOptionSelected = function (operation) {
_this.setState({ optionsOpen: false });

@@ -67,3 +58,3 @@ _this.props.onRun(operation.name && operation.name.value);

this._onOptionsOpen = function (downEvent) {
_this._onOptionsOpen = function (downEvent) {
var initialPress = true;

@@ -86,80 +77,90 @@ var downTarget = downEvent.target;

this.state = {
_this.state = {
optionsOpen: false,
highlight: null
};
return _this;
}
ExecuteButton.prototype.render = function render() {
var _this2 = this;
_createClass(ExecuteButton, [{
key: 'render',
value: function render() {
var _this2 = this;
var operations = this.props.operations;
var optionsOpen = this.state.optionsOpen;
var hasOptions = operations && operations.length > 1;
var operations = this.props.operations;
var optionsOpen = this.state.optionsOpen;
var hasOptions = operations && operations.length > 1;
var options = null;
if (hasOptions && optionsOpen) {
(function () {
var highlight = _this2.state.highlight;
options = _react2['default'].createElement(
'ul',
{ className: 'execute-options' },
operations.map(function (operation) {
return _react2['default'].createElement(
'li',
{
className: operation === highlight && 'selected',
onMouseOver: function () {
return _this2.setState({ highlight: operation });
},
onMouseOut: function () {
return _this2.setState({ highlight: null });
},
onMouseUp: function () {
return _this2._onOptionSelected(operation);
} },
operation.name ? operation.name.value : '<Unnamed>'
);
})
);
})();
}
var options = null;
if (hasOptions && optionsOpen) {
(function () {
var highlight = _this2.state.highlight;
options = _react2.default.createElement(
'ul',
{ className: 'execute-options' },
operations.map(function (operation) {
return _react2.default.createElement(
'li',
{
key: operation.name ? operation.name.value : '*',
className: operation === highlight && 'selected',
onMouseOver: function onMouseOver() {
return _this2.setState({ highlight: operation });
},
onMouseOut: function onMouseOut() {
return _this2.setState({ highlight: null });
},
onMouseUp: function onMouseUp() {
return _this2._onOptionSelected(operation);
} },
operation.name ? operation.name.value : '<Unnamed>'
);
})
);
})();
}
// Allow click event if there is a running query or if there are not options
// for which operation to run.
var onClick = undefined;
if (this.props.isRunning || !hasOptions) {
onClick = this._onClick;
}
// Allow click event if there is a running query or if there are not options
// for which operation to run.
var onClick = void 0;
if (this.props.isRunning || !hasOptions) {
onClick = this._onClick;
}
// Allow mouse down if there is no running query, there are options for
// which operation to run, and the dropdown is currently closed.
var onMouseDown = undefined;
if (!this.props.isRunning && hasOptions && !optionsOpen) {
onMouseDown = this._onOptionsOpen;
// Allow mouse down if there is no running query, there are options for
// which operation to run, and the dropdown is currently closed.
var onMouseDown = void 0;
if (!this.props.isRunning && hasOptions && !optionsOpen) {
onMouseDown = this._onOptionsOpen;
}
return _react2.default.createElement(
'div',
{ className: 'execute-button-wrap' },
_react2.default.createElement(
'button',
{
className: 'execute-button',
onMouseDown: onMouseDown,
onClick: onClick,
title: 'Execute Query (Ctrl-Enter)' },
_react2.default.createElement(
'svg',
{ width: '34', height: '34' },
this.props.isRunning ? _react2.default.createElement('path', { d: 'M 10 10 L 23 10 L 23 23 L 10 23 z' }) : _react2.default.createElement('path', { d: 'M 11 9 L 24 16 L 11 23 z' })
)
),
options
);
}
}]);
return _react2['default'].createElement(
'div',
{ className: 'execute-button-wrap' },
_react2['default'].createElement(
'button',
{
className: 'execute-button',
onMouseDown: onMouseDown,
onClick: onClick,
title: 'Execute Query (Ctrl-Enter)' },
_react2['default'].createElement(
'svg',
{ width: '34', height: '34' },
this.props.isRunning ? _react2['default'].createElement('path', { d: 'M 10 10 L 23 10 L 23 23 L 10 23 z' }) : _react2['default'].createElement('path', { d: 'M 11 9 L 24 16 L 11 23 z' })
)
),
options
);
};
return ExecuteButton;
})(_react2['default'].Component);
}(_react2.default.Component);
exports.ExecuteButton = ExecuteButton;
ExecuteButton.propTypes = {
onRun: _react.PropTypes.func,
onStop: _react.PropTypes.func,
isRunning: _react.PropTypes.bool,
operations: _react.PropTypes.array
};

1457

dist/components/GraphiQL.js

@@ -1,23 +0,14 @@

/**
* Copyright (c) 2015, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the license found in the
* LICENSE-examples file in the root directory of this source tree.
*/
'use strict';
exports.__esModule = true;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.GraphiQL = undefined;
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var _react = require('react');

@@ -45,20 +36,42 @@

var _utilityGetQueryFacts = require('../utility/getQueryFacts');
var _CodeMirrorSizer = require('../utility/CodeMirrorSizer');
var _utilityGetQueryFacts2 = _interopRequireDefault(_utilityGetQueryFacts);
var _CodeMirrorSizer2 = _interopRequireDefault(_CodeMirrorSizer);
var _utilityDebounce = require('../utility/debounce');
var _getQueryFacts = require('../utility/getQueryFacts');
var _utilityDebounce2 = _interopRequireDefault(_utilityDebounce);
var _getQueryFacts2 = _interopRequireDefault(_getQueryFacts);
var _utilityFind = require('../utility/find');
var _getSelectedOperationName = require('../utility/getSelectedOperationName');
var _utilityFind2 = _interopRequireDefault(_utilityFind);
var _getSelectedOperationName2 = _interopRequireDefault(_getSelectedOperationName);
var _utilityFillLeafs = require('../utility/fillLeafs');
var _debounce = require('../utility/debounce');
var _utilityElementPosition = require('../utility/elementPosition');
var _debounce2 = _interopRequireDefault(_debounce);
var _utilityIntrospectionQueries = require('../utility/introspectionQueries');
var _find = require('../utility/find');
var _find2 = _interopRequireDefault(_find);
var _fillLeafs2 = require('../utility/fillLeafs');
var _elementPosition = require('../utility/elementPosition');
var _introspectionQueries = require('../utility/introspectionQueries');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
* Copyright (c) 2015, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the license found in the
* LICENSE-examples file in the root directory of this source tree.
*/
/**

@@ -87,2 +100,5 @@ * GraphiQL

*
* - operationName: an optional name of which GraphQL operation should be
* executed.
*
* - response: an optional JSON string to use as the initial displayed

@@ -106,2 +122,5 @@ * response. If not provided, no response will be initialy shown. You might

*
* - onEditOperationName: an optional function which will be called when the
* operation name to be executed changes.
*
* - getDefaultFieldNames: an optional function used to provide default fields

@@ -126,787 +145,837 @@ * to non-leaf fields which invalidly lack a selection set.

var GraphiQL = (function (_React$Component) {
var GraphiQL = exports.GraphiQL = function (_React$Component) {
_inherits(GraphiQL, _React$Component);
/**
* Inspect the query, automatically filling in selection sets for non-leaf
* fields which do not yet have them.
*
* @public
*/
function GraphiQL(props) {
_classCallCheck(this, GraphiQL);
GraphiQL.prototype.autoCompleteLeafs = function autoCompleteLeafs() {
var _fillLeafs = _utilityFillLeafs.fillLeafs(this.state.schema, this.state.query, this.props.getDefaultFieldNames);
// Ensure props are correct
var insertions = _fillLeafs.insertions;
var result = _fillLeafs.result;
var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(GraphiQL).call(this, props));
if (insertions && insertions.length > 0) {
var editor = this.refs.queryEditor.getCodeMirror();
editor.operation(function () {
var cursor = editor.getCursor();
var cursorIndex = editor.indexFromPos(cursor);
editor.setValue(result);
var added = 0;
var markers = insertions.map(function (_ref) {
var index = _ref.index;
var string = _ref.string;
return editor.markText(editor.posFromIndex(index + added), editor.posFromIndex(index + (added += string.length)), {
className: 'autoInsertedLeaf',
clearOnEnter: true,
title: 'Automatically added leaf fields'
});
});
setTimeout(function () {
return markers.forEach(function (marker) {
return marker.clear();
});
}, 7000);
var newCursorIndex = cursorIndex;
insertions.forEach(function (_ref2) {
var index = _ref2.index;
var string = _ref2.string;
_initialiseProps.call(_this);
if (index < cursorIndex) {
newCursorIndex += string.length;
}
});
var newCursor = editor.posFromIndex(newCursorIndex);
editor.setCursor(newCursor);
});
if (typeof props.fetcher !== 'function') {
throw new TypeError('GraphiQL requires a fetcher function.');
}
return result;
};
// Cache the storage instance
_this._storage = props.storage || window.localStorage;
// Lifecycle
// Determine the initial query to display.
var query = props.query !== undefined ? props.query : _this._storageGet('query') !== undefined ? _this._storageGet('query') : props.defaultQuery !== undefined ? props.defaultQuery : defaultQuery;
_createClass(GraphiQL, null, [{
key: 'propTypes',
value: {
fetcher: _react.PropTypes.func.isRequired,
schema: _react.PropTypes.instanceOf(_graphql.GraphQLSchema),
query: _react.PropTypes.string,
response: _react.PropTypes.string,
storage: _react.PropTypes.shape({
getItem: _react.PropTypes.func,
setItem: _react.PropTypes.func
}),
defaultQuery: _react.PropTypes.string,
variables: _react.PropTypes.string,
onEditQuery: _react.PropTypes.func,
onEditVariables: _react.PropTypes.func,
getDefaultFieldNames: _react.PropTypes.func
},
enumerable: true
}]);
// Get the initial query facts.
var queryFacts = (0, _getQueryFacts2.default)(props.schema, query);
function GraphiQL(props) {
var _this = this;
// Determine the initial variables to display.
var variables = props.variables !== undefined ? props.variables : _this._storageGet('variables');
_classCallCheck(this, GraphiQL);
// Determine the initial operationName to use.
var operationName = props.operationName !== undefined ? props.operationName : (0, _getSelectedOperationName2.default)(null, _this._storageGet('operationName'), queryFacts.operations);
_React$Component.call(this, props);
// Initialize state
_this.state = _extends({
schema: props.schema,
query: query,
variables: variables,
operationName: operationName,
response: props.response,
editorFlex: Number(_this._storageGet('editorFlex')) || 1,
variableEditorOpen: Boolean(variables),
variableEditorHeight: Number(_this._storageGet('variableEditorHeight')) || 200,
docExplorerOpen: false,
docExplorerWidth: Number(_this._storageGet('docExplorerWidth')) || 350,
isWaitingForResponse: false,
subscription: null
}, queryFacts);
// Ensure props are correct
// Ensure only the last executed editor query is rendered.
_this._editorQueryID = 0;
this._runQuery = function (selectedOperation) {
_this._editorQueryID++;
var queryID = _this._editorQueryID;
// Subscribe to the browser window closing, treating it as an unmount.
if ((typeof window === 'undefined' ? 'undefined' : _typeof(window)) === 'object') {
window.addEventListener('beforeunload', function () {
return _this.componentWillUnmount();
});
}
return _this;
}
// Use the edited query after autoCompleteLeafs() runs or,
// in case autoCompletion fails (the function returns undefined),
// the current query from the editor.
var editedQuery = _this.autoCompleteLeafs() || _this.state.query;
var variables = _this.state.variables;
var operationName = selectedOperation || _this.state.selectedOperation;
_createClass(GraphiQL, [{
key: 'componentDidMount',
value: function componentDidMount() {
// Ensure a form of a schema exists (including `null`) and
// if not, fetch one using an introspection query.
this._ensureOfSchema();
// _fetchQuery may return a subscription.
var subscription = _this._fetchQuery(editedQuery, variables, operationName, function (result) {
if (queryID === _this._editorQueryID) {
_this.setState({
isWaitingForResponse: false,
response: JSON.stringify(result, null, 2)
});
}
});
// Utility for keeping CodeMirror correctly sized.
this.codeMirrorSizer = new _CodeMirrorSizer2.default();
_this.setState({
isWaitingForResponse: true,
response: null,
subscription: subscription,
selectedOperation: operationName
});
};
// Add shortcut for running a query.
document.addEventListener('keydown', this._keyHandler, true);
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
var nextSchema = this.state.schema;
var nextQuery = this.state.query;
var nextVariables = this.state.variables;
var nextOperationName = this.state.operationName;
var nextResponse = this.state.response;
this._stopQuery = function () {
var subscription = _this.state.subscription;
_this.setState({
isWaitingForResponse: false,
subscription: null
});
if (subscription) {
subscription.unsubscribe();
if (nextProps.schema !== undefined) {
nextSchema = nextProps.schema;
}
return;
};
this._keyHandler = function (event) {
// "Run Query" event.
if ((event.metaKey || event.ctrlKey) && event.keyCode === 13) {
event.preventDefault();
_this._runQueryAtCursor();
if (nextProps.query !== undefined) {
nextQuery = nextProps.query;
}
};
this._prettifyQuery = function () {
var query = _graphql.print(_graphql.parse(_this.state.query));
var editor = _this.refs.queryEditor.getCodeMirror();
editor.setValue(query);
};
this._onEditQuery = function (value) {
if (_this.state.schema) {
_this._updateQueryFacts(value);
if (nextProps.variables !== undefined) {
nextVariables = nextProps.variables;
}
_this.setState({ query: value });
if (_this.props.onEditQuery) {
return _this.props.onEditQuery(value);
if (nextProps.operationName !== undefined) {
nextOperationName = nextProps.operationName;
}
};
this._updateQueryFacts = _utilityDebounce2['default'](500, function (value) {
var queryFacts = _utilityGetQueryFacts2['default'](_this.state, _this.state.schema, value);
if (queryFacts) {
_this.setState(queryFacts);
if (nextProps.response !== undefined) {
nextResponse = nextProps.response;
}
});
this._onEditVariables = function (value) {
_this.setState({ variables: value });
if (_this.props.onEditVariables) {
_this.props.onEditVariables(value);
if (nextSchema !== this.state.schema || nextQuery !== this.state.query || nextOperationName !== this.state.operationName) {
this._updateQueryFacts();
}
};
this._onHintInformationRender = function (elem) {
elem.addEventListener('click', _this._onClickHintInformation);
var onRemoveFn;
elem.addEventListener('DOMNodeRemoved', onRemoveFn = function () {
elem.removeEventListener('DOMNodeRemoved', onRemoveFn);
elem.removeEventListener('click', _this._onClickHintInformation);
this.setState({
schema: nextSchema,
query: nextQuery,
variables: nextVariables,
operationName: nextOperationName,
response: nextResponse
});
};
}
}, {
key: 'componentDidUpdate',
value: function componentDidUpdate() {
// If this update caused DOM nodes to have changed sizes, update the
// corresponding CodeMirror instance sizes to match.
this.codeMirrorSizer.updateSizes([this.queryEditorComponent, this.variableEditorComponent, this.resultComponent]);
}
this._onClickHintInformation = function (event) {
if (event.target.className === 'typeName') {
var typeName = event.target.innerHTML;
var schema = _this.state.schema;
if (schema) {
var type = schema.getType(typeName);
if (type) {
_this.setState({ docExplorerOpen: true }, function () {
_this.refs.docExplorer.showDoc(type);
});
}
}
}
};
// When the component is about to unmount, store any persistable state, such
// that when the component is remounted, it will use the last used values.
this._onToggleDocs = function () {
_this.setState({ docExplorerOpen: !_this.state.docExplorerOpen });
};
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
this._storageSet('query', this.state.query);
this._storageSet('variables', this.state.variables);
this._storageSet('operationName', this.state.operationName);
this._storageSet('editorFlex', this.state.editorFlex);
this._storageSet('variableEditorHeight', this.state.variableEditorHeight);
this._storageSet('docExplorerWidth', this.state.docExplorerWidth);
this._onResizeStart = function (downEvent) {
if (!_this._didClickDragBar(downEvent)) {
return;
}
document.removeEventListener('keydown', this._keyHandler, true);
}
}, {
key: 'render',
value: function render() {
var _this2 = this;
downEvent.preventDefault();
var children = _react2.default.Children.toArray(this.props.children);
var offset = downEvent.clientX - _utilityElementPosition.getLeft(downEvent.target);
var logo = (0, _find2.default)(children, function (child) {
return child.type === GraphiQL.Logo;
}) || _react2.default.createElement(GraphiQL.Logo, null);
var onMouseMove = function onMouseMove(moveEvent) {
if (moveEvent.buttons === 0) {
return onMouseUp();
}
var toolbar = (0, _find2.default)(children, function (child) {
return child.type === GraphiQL.Toolbar;
}) || _react2.default.createElement(GraphiQL.Toolbar, null);
var editorBar = _reactDom2['default'].findDOMNode(_this.refs.editorBar);
var leftSize = moveEvent.clientX - _utilityElementPosition.getLeft(editorBar) - offset;
var rightSize = editorBar.clientWidth - leftSize;
_this.setState({ editorFlex: leftSize / rightSize });
var footer = (0, _find2.default)(children, function (child) {
return child.type === GraphiQL.Footer;
});
var queryWrapStyle = {
WebkitFlex: this.state.editorFlex,
flex: this.state.editorFlex
};
var onMouseUp = (function (_onMouseUp) {
function onMouseUp() {
return _onMouseUp.apply(this, arguments);
}
var docWrapStyle = {
display: this.state.docExplorerOpen ? 'block' : 'none',
width: this.state.docExplorerWidth
};
onMouseUp.toString = function () {
return _onMouseUp.toString();
};
var variableOpen = this.state.variableEditorOpen;
var variableStyle = {
height: variableOpen ? this.state.variableEditorHeight : null
};
return onMouseUp;
})(function () {
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
onMouseMove = null;
onMouseUp = null;
});
return _react2.default.createElement(
'div',
{ id: 'graphiql-container' },
_react2.default.createElement(
'div',
{ className: 'editorWrap' },
_react2.default.createElement(
'div',
{ className: 'topBarWrap' },
_react2.default.createElement(
'div',
{ className: 'topBar' },
logo,
_react2.default.createElement(_ExecuteButton.ExecuteButton, {
isRunning: Boolean(this.state.subscription),
onRun: this.handleRunQuery,
onStop: this.handleStopQuery,
operations: this.state.operations
}),
_react2.default.createElement(GraphiQL.ToolbarButton, {
onClick: this.handlePrettifyQuery,
title: 'Prettify Query',
label: 'Prettify'
}),
toolbar
),
!this.state.docExplorerOpen && _react2.default.createElement(
'button',
{
className: 'docExplorerShow',
onClick: this.handleToggleDocs },
'Docs'
)
),
_react2.default.createElement(
'div',
{
ref: function ref(n) {
_this2.editorBarComponent = n;
},
className: 'editorBar',
onMouseDown: this.handleResizeStart },
_react2.default.createElement(
'div',
{ className: 'queryWrap', style: queryWrapStyle },
_react2.default.createElement(_QueryEditor.QueryEditor, {
ref: function ref(n) {
_this2.queryEditorComponent = n;
},
schema: this.state.schema,
value: this.state.query,
onEdit: this.handleEditQuery,
onHintInformationRender: this.handleHintInformationRender
}),
_react2.default.createElement(
'div',
{ className: 'variable-editor', style: variableStyle },
_react2.default.createElement(
'div',
{
className: 'variable-editor-title',
style: { cursor: variableOpen ? 'row-resize' : 'n-resize' },
onMouseDown: this.handleVariableResizeStart },
'Query Variables'
),
_react2.default.createElement(_VariableEditor.VariableEditor, {
ref: function ref(n) {
_this2.variableEditorComponent = n;
},
value: this.state.variables,
variableToType: this.state.variableToType,
onEdit: this.handleEditVariables,
onHintInformationRender: this.handleHintInformationRender
})
)
),
_react2.default.createElement(
'div',
{ className: 'resultWrap' },
this.state.isWaitingForResponse && _react2.default.createElement(
'div',
{ className: 'spinner-container' },
_react2.default.createElement('div', { className: 'spinner' })
),
_react2.default.createElement(_ResultViewer.ResultViewer, {
ref: function ref(c) {
_this2.resultComponent = c;
},
value: this.state.response
}),
footer
)
)
),
_react2.default.createElement(
'div',
{ className: 'docExplorerWrap', style: docWrapStyle },
_react2.default.createElement('div', {
className: 'docExplorerResizer',
onMouseDown: this.handleDocsResizeStart
}),
_react2.default.createElement(
_DocExplorer.DocExplorer,
{
ref: function ref(c) {
_this2.docExplorerComponent = c;
},
schema: this.state.schema },
_react2.default.createElement(
'div',
{ className: 'docExplorerHide', onClick: this.handleToggleDocs },
'✕'
)
)
)
);
}
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
};
/**
* Inspect the query, automatically filling in selection sets for non-leaf
* fields which do not yet have them.
*
* @public
*/
this._onDocsResizeStart = function (downEvent) {
downEvent.preventDefault();
}, {
key: 'autoCompleteLeafs',
value: function autoCompleteLeafs() {
var _this3 = this;
var hadWidth = _this.state.docExplorerWidth;
var offset = downEvent.clientX - _utilityElementPosition.getLeft(downEvent.target);
var _fillLeafs = (0, _fillLeafs2.fillLeafs)(this.state.schema, this.state.query, this.props.getDefaultFieldNames);
var onMouseMove = function onMouseMove(moveEvent) {
if (moveEvent.buttons === 0) {
return onMouseUp();
}
var insertions = _fillLeafs.insertions;
var result = _fillLeafs.result;
var app = _reactDom2['default'].findDOMNode(_this);
var cursorPos = moveEvent.clientX - _utilityElementPosition.getLeft(app) - offset;
var docsSize = app.clientWidth - cursorPos;
if (insertions && insertions.length > 0) {
(function () {
var editor = _this3.queryEditorComponent.getCodeMirror();
editor.operation(function () {
var cursor = editor.getCursor();
var cursorIndex = editor.indexFromPos(cursor);
editor.setValue(result);
var added = 0;
var markers = insertions.map(function (_ref) {
var index = _ref.index;
var string = _ref.string;
return editor.markText(editor.posFromIndex(index + added), editor.posFromIndex(index + (added += string.length)), {
className: 'autoInsertedLeaf',
clearOnEnter: true,
title: 'Automatically added leaf fields'
});
});
setTimeout(function () {
return markers.forEach(function (marker) {
return marker.clear();
});
}, 7000);
var newCursorIndex = cursorIndex;
insertions.forEach(function (_ref2) {
var index = _ref2.index;
var string = _ref2.string;
if (docsSize < 100) {
_this.setState({ docExplorerOpen: false });
} else {
_this.setState({
docExplorerOpen: true,
docExplorerWidth: Math.min(docsSize, 650)
if (index < cursorIndex) {
newCursorIndex += string.length;
}
});
editor.setCursor(editor.posFromIndex(newCursorIndex));
});
}
};
})();
}
var onMouseUp = (function (_onMouseUp2) {
function onMouseUp() {
return _onMouseUp2.apply(this, arguments);
}
return result;
}
onMouseUp.toString = function () {
return _onMouseUp2.toString();
};
// Private methods
return onMouseUp;
})(function () {
if (!_this.state.docExplorerOpen) {
_this.setState({ docExplorerWidth: hadWidth });
}
}, {
key: '_ensureOfSchema',
value: function _ensureOfSchema() {
var _this4 = this;
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
onMouseMove = null;
onMouseUp = null;
});
// Only perform introspection if a schema is not provided (undefined)
if (this.state.schema !== undefined) {
return;
}
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
};
var fetcher = this.props.fetcher;
this._onVariableResizeStart = function (downEvent) {
downEvent.preventDefault();
var fetch = fetcher({ query: _introspectionQueries.introspectionQuery });
if (!isPromise(fetch)) {
this.setState({
response: 'Fetcher did not return a Promise for introspection.'
});
return;
}
var didMove = false;
var wasOpen = _this.state.variableEditorOpen;
var hadHeight = _this.state.variableEditorHeight;
var offset = downEvent.clientY - _utilityElementPosition.getTop(downEvent.target);
fetch.then(function (result) {
if (result.data) {
return result;
}
var onMouseMove = function onMouseMove(moveEvent) {
if (moveEvent.buttons === 0) {
return onMouseUp();
// Try the stock introspection query first, falling back on the
// sans-subscriptions query for services which do not yet support it.
var fetch2 = fetcher({ query: _introspectionQueries.introspectionQuerySansSubscriptions });
if (!isPromise(fetch)) {
throw new Error('Fetcher did not return a Promise for introspection.');
}
return fetch2;
}).then(function (result) {
// If a schema was provided while this fetch was underway, then
// satisfy the race condition by respecting the already
// provided schema.
if (_this4.state.schema !== undefined) {
return;
}
didMove = true;
var editorBar = _reactDom2['default'].findDOMNode(_this.refs.editorBar);
var topSize = moveEvent.clientY - _utilityElementPosition.getTop(editorBar) - offset;
var bottomSize = editorBar.clientHeight - topSize;
if (bottomSize < 60) {
_this.setState({
variableEditorOpen: false,
variableEditorHeight: hadHeight
});
if (result && result.data) {
var schema = (0, _graphql.buildClientSchema)(result.data);
var queryFacts = (0, _getQueryFacts2.default)(schema, _this4.state.query);
_this4.setState(_extends({ schema: schema }, queryFacts));
} else {
_this.setState({
variableEditorOpen: true,
variableEditorHeight: bottomSize
});
var responseString = typeof result === 'string' ? result : JSON.stringify(result, null, 2);
_this4.setState({ response: responseString });
}
};
}).catch(function (error) {
_this4.setState({ response: error && (error.stack || String(error)) });
});
}
}, {
key: '_storageGet',
value: function _storageGet(name) {
return this._storage.getItem('graphiql:' + name);
}
}, {
key: '_storageSet',
value: function _storageSet(name, value) {
this._storage.setItem('graphiql:' + name, value);
}
}, {
key: '_fetchQuery',
value: function _fetchQuery(query, variables, operationName, cb) {
var _this5 = this;
var onMouseUp = (function (_onMouseUp3) {
function onMouseUp() {
return _onMouseUp3.apply(this, arguments);
}
var fetcher = this.props.fetcher;
var fetch = fetcher({ query: query, variables: variables, operationName: operationName });
onMouseUp.toString = function () {
return _onMouseUp3.toString();
};
if (isPromise(fetch)) {
// If fetcher returned a Promise, then call the callback when the promise
// resolves, otherwise handle the error.
fetch.then(cb).catch(function (error) {
_this5.setState({
isWaitingForResponse: false,
response: error && (error.stack || String(error))
});
});
} else if (isObservable(fetch)) {
// If the fetcher returned an Observable, then subscribe to it, calling
// the callback on each next value, and handling both errors and the
// completion of the Observable. Returns a Subscription object.
var subscription = fetch.subscribe({
next: cb,
error: function error(_error) {
_this5.setState({
isWaitingForResponse: false,
response: _error && (_error.stack || String(_error)),
subscription: null
});
},
complete: function complete() {
_this5.setState({
isWaitingForResponse: false,
subscription: null
});
}
});
return onMouseUp;
})(function () {
if (!didMove) {
_this.setState({ variableEditorOpen: !wasOpen });
}
return subscription;
} else {
this.setState({
isWaitingForResponse: false,
response: 'Fetcher did not return Promise or Observable.'
});
}
}
}, {
key: '_runQueryAtCursor',
value: function _runQueryAtCursor() {
if (this.state.subscription) {
this.handleStopQuery();
return;
}
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
onMouseMove = null;
onMouseUp = null;
});
var operationName = void 0;
var operations = this.state.operations;
if (operations) {
var editor = this.queryEditorComponent.getCodeMirror();
if (editor.hasFocus()) {
var cursor = editor.getCursor();
var cursorIndex = editor.indexFromPos(cursor);
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
};
// Loop through all operations to see if one contains the cursor.
for (var i = 0; i < operations.length; i++) {
var operation = operations[i];
if (operation.loc.start <= cursorIndex && operation.loc.end >= cursorIndex) {
operationName = operation.name && operation.name.value;
break;
}
}
}
}
if (typeof props.fetcher !== 'function') {
throw new TypeError('GraphiQL requires a fetcher function.');
this.handleRunQuery(operationName);
}
}, {
key: '_didClickDragBar',
value: function _didClickDragBar(event) {
// Only for primary unmodified clicks
if (event.button !== 0 || event.ctrlKey) {
return false;
}
var target = event.target;
// We use codemirror's gutter as the drag bar.
if (target.className.indexOf('CodeMirror-gutter') !== 0) {
return false;
}
// Specifically the result window's drag bar.
var resultWindow = _reactDom2.default.findDOMNode(this.resultComponent);
while (target) {
if (target === resultWindow) {
return true;
}
target = target.parentNode;
}
return false;
}
}]);
// Cache the storage instance
this._storage = props.storage || window.localStorage;
return GraphiQL;
}(_react2.default.Component);
// Determine the initial query to display.
var query = props.query !== undefined ? props.query : this._storageGet('query') !== undefined ? this._storageGet('query') : props.defaultQuery !== undefined ? props.defaultQuery : defaultQuery;
// Configure the UI by providing this Component as a child of GraphiQL.
// Determine the initial variables to display.
var variables = props.variables !== undefined ? props.variables : this._storageGet('variables');
// Get the initial query facts.
var queryFacts = _utilityGetQueryFacts2['default']({}, props.schema, query);
GraphiQL.propTypes = {
fetcher: _react.PropTypes.func.isRequired,
schema: _react.PropTypes.instanceOf(_graphql.GraphQLSchema),
query: _react.PropTypes.string,
variables: _react.PropTypes.string,
operationName: _react.PropTypes.string,
response: _react.PropTypes.string,
storage: _react.PropTypes.shape({
getItem: _react.PropTypes.func,
setItem: _react.PropTypes.func
}),
defaultQuery: _react.PropTypes.string,
onEditQuery: _react.PropTypes.func,
onEditVariables: _react.PropTypes.func,
onEditOperationName: _react.PropTypes.func,
getDefaultFieldNames: _react.PropTypes.func
};
// Initialize state
this.state = _extends({
schema: props.schema,
query: query,
variables: variables,
response: props.response,
editorFlex: this._storageGet('editorFlex') || 1,
variableEditorOpen: Boolean(variables),
variableEditorHeight: this._storageGet('variableEditorHeight') || 200,
docExplorerOpen: false,
docExplorerWidth: this._storageGet('docExplorerWidth') || 350,
isWaitingForResponse: false,
subscription: null
}, queryFacts);
var _initialiseProps = function _initialiseProps() {
var _this6 = this;
// Ensure only the last executed editor query is rendered.
this._editorQueryID = 0;
this.handleRunQuery = function (selectedOperationName) {
_this6._editorQueryID++;
var queryID = _this6._editorQueryID;
// Subscribe to the browser window closing, treating it as an unmount.
if (typeof window === 'object') {
window.addEventListener('beforeunload', function () {
return _this.componentWillUnmount();
});
// Use the edited query after autoCompleteLeafs() runs or,
// in case autoCompletion fails (the function returns undefined),
// the current query from the editor.
var editedQuery = _this6.autoCompleteLeafs() || _this6.state.query;
var variables = _this6.state.variables;
var operationName = _this6.state.operationName;
// If an operation was explicitly provided, different from the current
// operation name, then report that it changed.
if (selectedOperationName && selectedOperationName !== operationName) {
operationName = selectedOperationName;
var onEditOperationName = _this6.props.onEditOperationName;
if (onEditOperationName) {
onEditOperationName(operationName);
}
}
}
// Configure the UI by providing this Component as a child of GraphiQL.
// _fetchQuery may return a subscription.
var subscription = _this6._fetchQuery(editedQuery, variables, operationName, function (result) {
if (queryID === _this6._editorQueryID) {
_this6.setState({
isWaitingForResponse: false,
response: JSON.stringify(result, null, 2)
});
}
});
// When the component is about to unmount, store any persistable state, such
// that when the component is remounted, it will use the last used values.
_this6.setState({
isWaitingForResponse: true,
response: null,
subscription: subscription,
operationName: operationName
});
};
GraphiQL.prototype.componentWillUnmount = function componentWillUnmount() {
this._storageSet('query', this.state.query);
this._storageSet('variables', this.state.variables);
this._storageSet('editorFlex', this.state.editorFlex);
this._storageSet('variableEditorHeight', this.state.variableEditorHeight);
this._storageSet('docExplorerWidth', this.state.docExplorerWidth);
this.handleStopQuery = function () {
var subscription = _this6.state.subscription;
_this6.setState({
isWaitingForResponse: false,
subscription: null
});
if (subscription) {
subscription.unsubscribe();
}
return;
};
document.removeEventListener('keydown', this._keyHandler, true);
this._keyHandler = function (event) {
// "Run Query" event.
if ((event.metaKey || event.ctrlKey) && event.keyCode === 13) {
event.preventDefault();
_this6._runQueryAtCursor();
}
};
GraphiQL.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
var nextSchema = this.state.schema;
var nextQuery = this.state.query;
var nextVariables = this.state.variables;
var nextResponse = this.state.response;
var queryFacts = undefined;
if (nextProps.schema !== undefined) {
nextSchema = nextProps.schema;
this.handlePrettifyQuery = function () {
var query = (0, _graphql.print)((0, _graphql.parse)(_this6.state.query));
var editor = _this6.queryEditorComponent.getCodeMirror();
editor.setValue(query);
};
this.handleEditQuery = function (value) {
if (_this6.state.schema) {
_this6._updateQueryFacts(value);
}
if (nextProps.query !== undefined) {
nextQuery = nextProps.query;
_this6.setState({ query: value });
if (_this6.props.onEditQuery) {
return _this6.props.onEditQuery(value);
}
if (nextProps.variables !== undefined) {
nextVariables = nextProps.variables;
};
this._updateQueryFacts = (0, _debounce2.default)(150, function (query) {
var queryFacts = (0, _getQueryFacts2.default)(_this6.state.schema, query);
if (queryFacts) {
// Update operation name should any query names change.
var operationName = (0, _getSelectedOperationName2.default)(_this6.state.operations, _this6.state.operationName, queryFacts.operations);
// Report changing of operationName if it changed.
var onEditOperationName = _this6.props.onEditOperationName;
if (onEditOperationName && operationName !== _this6.state.operationName) {
onEditOperationName(operationName);
}
_this6.setState(_extends({
operationName: operationName
}, queryFacts));
}
if (nextProps.response !== undefined) {
nextResponse = nextProps.response;
});
this.handleEditVariables = function (value) {
_this6.setState({ variables: value });
if (_this6.props.onEditVariables) {
_this6.props.onEditVariables(value);
}
if (nextSchema && nextQuery && (nextSchema !== this.state.schema || nextQuery !== this.state.query)) {
queryFacts = _utilityGetQueryFacts2['default'](this.state, nextSchema, nextQuery);
}
this.setState(_extends({
schema: nextSchema,
query: nextQuery,
variables: nextVariables,
response: nextResponse
}, queryFacts));
};
GraphiQL.prototype.componentDidMount = function componentDidMount() {
// Ensure a form of a schema exists (including `null`) and
// if not, fetch one using an introspection query.
this._ensureOfSchema();
this.handleHintInformationRender = function (elem) {
elem.addEventListener('click', _this6._onClickHintInformation);
// Add shortcut for running a query.
document.addEventListener('keydown', this._keyHandler, true);
var _onRemoveFn = void 0;
elem.addEventListener('DOMNodeRemoved', _onRemoveFn = function onRemoveFn() {
elem.removeEventListener('DOMNodeRemoved', _onRemoveFn);
elem.removeEventListener('click', _this6._onClickHintInformation);
});
};
GraphiQL.prototype.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
// When UI-altering state changes, simulate a window resize event so all
// CodeMirror instances become properly rendered.
if (this.state.variableEditorOpen !== prevState.variableEditorOpen || this.state.variableEditorHeight !== prevState.variableEditorHeight) {
window.dispatchEvent(new Event('resize'));
this._onClickHintInformation = function (event) {
if (event.target.className === 'typeName') {
var typeName = event.target.innerHTML;
var schema = _this6.state.schema;
if (schema) {
(function () {
var type = schema.getType(typeName);
if (type) {
_this6.setState({ docExplorerOpen: true }, function () {
_this6.docExplorerComponent.showDoc(type);
});
}
})();
}
}
};
GraphiQL.prototype.render = function render() {
var children = [];
_react2['default'].Children.forEach(this.props.children, function (child) {
children.push(child);
});
this.handleToggleDocs = function () {
_this6.setState({ docExplorerOpen: !_this6.state.docExplorerOpen });
};
var logo = _utilityFind2['default'](children, function (child) {
return child.type === GraphiQL.Logo;
}) || _react2['default'].createElement(GraphiQL.Logo, null);
this.handleResizeStart = function (downEvent) {
if (!_this6._didClickDragBar(downEvent)) {
return;
}
var toolbar = _utilityFind2['default'](children, function (child) {
return child.type === GraphiQL.Toolbar;
}) || _react2['default'].createElement(GraphiQL.Toolbar, null);
downEvent.preventDefault();
var footer = _utilityFind2['default'](children, function (child) {
return child.type === GraphiQL.Footer;
});
var offset = downEvent.clientX - (0, _elementPosition.getLeft)(downEvent.target);
var queryWrapStyle = {
WebkitFlex: this.state.editorFlex,
flex: this.state.editorFlex
};
var onMouseMove = function onMouseMove(moveEvent) {
if (moveEvent.buttons === 0) {
return onMouseUp();
}
var docWrapStyle = {
display: this.state.docExplorerOpen ? 'block' : 'none',
width: this.state.docExplorerWidth
var editorBar = _reactDom2.default.findDOMNode(_this6.editorBarComponent);
var leftSize = moveEvent.clientX - (0, _elementPosition.getLeft)(editorBar) - offset;
var rightSize = editorBar.clientWidth - leftSize;
_this6.setState({ editorFlex: leftSize / rightSize });
};
var variableOpen = this.state.variableEditorOpen;
var variableStyle = {
height: variableOpen ? this.state.variableEditorHeight : null
};
var onMouseUp = function (_onMouseUp) {
function onMouseUp() {
return _onMouseUp.apply(this, arguments);
}
return _react2['default'].createElement(
'div',
{ id: 'graphiql-container' },
_react2['default'].createElement(
'div',
{ className: 'editorWrap' },
_react2['default'].createElement(
'div',
{ className: 'topBarWrap' },
_react2['default'].createElement(
'div',
{ className: 'topBar' },
logo,
_react2['default'].createElement(_ExecuteButton.ExecuteButton, {
isRunning: Boolean(this.state.subscription),
onRun: this._runQuery,
onStop: this._stopQuery,
operations: this.state.operations
}),
_react2['default'].createElement(GraphiQL.ToolbarButton, {
onClick: this._prettifyQuery,
title: 'Prettify Query',
label: 'Prettify'
}),
toolbar
),
!this.state.docExplorerOpen && _react2['default'].createElement(
'button',
{ className: 'docExplorerShow', onClick: this._onToggleDocs },
'Docs'
)
),
_react2['default'].createElement(
'div',
{
ref: 'editorBar',
className: 'editorBar',
onMouseDown: this._onResizeStart
},
_react2['default'].createElement(
'div',
{ className: 'queryWrap', style: queryWrapStyle },
_react2['default'].createElement(_QueryEditor.QueryEditor, {
ref: 'queryEditor',
schema: this.state.schema,
value: this.state.query,
onEdit: this._onEditQuery,
onHintInformationRender: this._onHintInformationRender
}),
_react2['default'].createElement(
'div',
{ className: 'variable-editor', style: variableStyle },
_react2['default'].createElement(
'div',
{
className: 'variable-editor-title',
style: { cursor: variableOpen ? 'row-resize' : 'n-resize' },
onMouseDown: this._onVariableResizeStart
},
'Query Variables'
),
_react2['default'].createElement(_VariableEditor.VariableEditor, {
value: this.state.variables,
variableToType: this.state.variableToType,
onEdit: this._onEditVariables,
onHintInformationRender: this._onHintInformationRender
})
)
),
_react2['default'].createElement(
'div',
{ className: 'resultWrap' },
this.state.isWaitingForResponse && _react2['default'].createElement(
'div',
{ className: 'spinner-container' },
_react2['default'].createElement('div', { className: 'spinner' })
),
_react2['default'].createElement(_ResultViewer.ResultViewer, { ref: 'result', value: this.state.response }),
footer
)
)
),
_react2['default'].createElement(
'div',
{ className: 'docExplorerWrap', style: docWrapStyle },
_react2['default'].createElement('div', {
className: 'docExplorerResizer',
onMouseDown: this._onDocsResizeStart
}),
_react2['default'].createElement(
_DocExplorer.DocExplorer,
{ ref: 'docExplorer', schema: this.state.schema },
_react2['default'].createElement(
'div',
{ className: 'docExplorerHide', onClick: this._onToggleDocs },
'✕'
)
)
)
);
};
onMouseUp.toString = function () {
return _onMouseUp.toString();
};
// Private methods
return onMouseUp;
}(function () {
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
onMouseMove = null;
onMouseUp = null;
});
GraphiQL.prototype._ensureOfSchema = function _ensureOfSchema() {
var _this2 = this;
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
};
// Only perform introspection if a schema is not provided (undefined)
if (this.state.schema !== undefined) {
return;
}
this.handleDocsResizeStart = function (downEvent) {
downEvent.preventDefault();
var fetcher = this.props.fetcher;
var hadWidth = _this6.state.docExplorerWidth;
var offset = downEvent.clientX - (0, _elementPosition.getLeft)(downEvent.target);
var fetch = fetcher({ query: _utilityIntrospectionQueries.introspectionQuery });
if (!isPromise(fetch)) {
console.error('Fetcher did not return a Promise for introspection.');
return;
}
fetch.then(function (result) {
if (result.data) {
return result;
var onMouseMove = function onMouseMove(moveEvent) {
if (moveEvent.buttons === 0) {
return onMouseUp();
}
// Try the stock introspection query first, falling back on the
// sans-subscriptions query for services which do not yet support it.
var fetch2 = fetcher({ query: _utilityIntrospectionQueries.introspectionQuerySansSubscriptions });
if (!isPromise(fetch)) {
console.error('Fetcher did not return a Promise for introspection.');
return;
}
return fetch2;
}).then(function (result) {
// If a schema was provided while this fetch was underway, then
// satisfy the race condition by respecting the already
// provided schema.
if (_this2.state.schema !== undefined) {
return;
}
var app = _reactDom2.default.findDOMNode(_this6);
var cursorPos = moveEvent.clientX - (0, _elementPosition.getLeft)(app) - offset;
var docsSize = app.clientWidth - cursorPos;
if (result.data) {
var schema = _graphql.buildClientSchema(result.data);
var queryFacts = _utilityGetQueryFacts2['default'](_this2.state, schema, _this2.state.query);
_this2.setState(_extends({ schema: schema }, queryFacts));
if (docsSize < 100) {
_this6.setState({ docExplorerOpen: false });
} else {
var responseString = typeof result === 'string' ? result : JSON.stringify(result, null, 2);
_this2.setState({ response: responseString });
_this6.setState({
docExplorerOpen: true,
docExplorerWidth: Math.min(docsSize, 650)
});
}
})['catch'](function (error) {
_this2.setState({ response: error && (error.stack || String(error)) });
});
};
};
GraphiQL.prototype._storageGet = function _storageGet(name) {
return this._storage.getItem('graphiql:' + name);
};
var onMouseUp = function (_onMouseUp2) {
function onMouseUp() {
return _onMouseUp2.apply(this, arguments);
}
GraphiQL.prototype._storageSet = function _storageSet(name, value) {
this._storage.setItem('graphiql:' + name, value);
};
onMouseUp.toString = function () {
return _onMouseUp2.toString();
};
GraphiQL.prototype._fetchQuery = function _fetchQuery(query, variables, operationName, cb) {
var _this3 = this;
return onMouseUp;
}(function () {
if (!_this6.state.docExplorerOpen) {
_this6.setState({ docExplorerWidth: hadWidth });
}
var fetcher = this.props.fetcher;
var fetch = fetcher({ query: query, variables: variables, operationName: operationName });
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
onMouseMove = null;
onMouseUp = null;
});
if (isPromise(fetch)) {
// If fetcher returned a Promise, then call the callback when the promise
// resolves, otherwise handle the error.
fetch.then(cb)['catch'](function (error) {
_this3.setState({
isWaitingForResponse: false,
response: error && (error.stack || String(error))
});
});
} else if (isObservable(fetch)) {
// If the fetcher returned an Observable, then subscribe to it, calling
// the callback on each next value, and handling both errors and the
// completion of the Observable. Returns a Subscription object.
var subscription = fetch.subscribe({
next: cb,
error: function error(_error) {
_this3.setState({
isWaitingForResponse: false,
response: _error && (_error.stack || String(_error)),
subscription: null
});
},
complete: function complete() {
_this3.setState({
isWaitingForResponse: false,
subscription: null
});
}
});
return subscription;
} else {
this.setState({
isWaitingForResponse: false,
response: 'Fetcher did not return Promise or Observable.'
});
}
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
};
GraphiQL.prototype._runQueryAtCursor = function _runQueryAtCursor() {
if (this.state.subscription) {
this._stopQuery();
return;
}
this.handleVariableResizeStart = function (downEvent) {
downEvent.preventDefault();
var operationName = undefined;
var operations = this.state.operations;
if (operations) {
var editor = this.refs.queryEditor.getCodeMirror();
var cursor = editor.getCursor();
var cursorIndex = editor.indexFromPos(cursor);
var didMove = false;
var wasOpen = _this6.state.variableEditorOpen;
var hadHeight = _this6.state.variableEditorHeight;
var offset = downEvent.clientY - (0, _elementPosition.getTop)(downEvent.target);
// Loop through all operations to see if one contains the cursor.
for (var i = 0; i < operations.length; i++) {
var operation = operations[i];
if (operation.loc.start <= cursorIndex && operation.loc.end >= cursorIndex) {
operationName = operation.name && operation.name.value;
break;
}
var onMouseMove = function onMouseMove(moveEvent) {
if (moveEvent.buttons === 0) {
return onMouseUp();
}
}
this._runQuery(operationName);
};
didMove = true;
GraphiQL.prototype._didClickDragBar = function _didClickDragBar(event) {
// Only for primary unmodified clicks
if (event.button !== 0 || event.ctrlKey) {
return false;
}
var target = event.target;
// We use codemirror's gutter as the drag bar.
if (target.className.indexOf('CodeMirror-gutter') !== 0) {
return false;
}
// Specifically the result window's drag bar.
var resultWindow = _reactDom2['default'].findDOMNode(this.refs.result);
while (target) {
if (target === resultWindow) {
return true;
var editorBar = _reactDom2.default.findDOMNode(_this6.editorBarComponent);
var topSize = moveEvent.clientY - (0, _elementPosition.getTop)(editorBar) - offset;
var bottomSize = editorBar.clientHeight - topSize;
if (bottomSize < 60) {
_this6.setState({
variableEditorOpen: false,
variableEditorHeight: hadHeight
});
} else {
_this6.setState({
variableEditorOpen: true,
variableEditorHeight: bottomSize
});
}
target = target.parentNode;
}
return false;
};
};
return GraphiQL;
})(_react2['default'].Component);
var onMouseUp = function (_onMouseUp3) {
function onMouseUp() {
return _onMouseUp3.apply(this, arguments);
}
exports.GraphiQL = GraphiQL;
GraphiQL.Logo = (function (_React$Component2) {
_inherits(GraphiQLLogo, _React$Component2);
onMouseUp.toString = function () {
return _onMouseUp3.toString();
};
function GraphiQLLogo() {
_classCallCheck(this, GraphiQLLogo);
return onMouseUp;
}(function () {
if (!didMove) {
_this6.setState({ variableEditorOpen: !wasOpen });
}
_React$Component2.apply(this, arguments);
}
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
onMouseMove = null;
onMouseUp = null;
});
GraphiQLLogo.prototype.render = function render() {
return _react2['default'].createElement(
'div',
{ className: 'title' },
this.props.children || _react2['default'].createElement(
'span',
null,
'Graph',
_react2['default'].createElement(
'em',
null,
'i'
),
'QL'
)
);
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
};
};
return GraphiQLLogo;
})(_react2['default'].Component);
GraphiQL.Logo = function GraphiQLLogo(props) {
return _react2.default.createElement(
'div',
{ className: 'title' },
props.children || _react2.default.createElement(
'span',
null,
'Graph',
_react2.default.createElement(
'em',
null,
'i'
),
'QL'
)
);
};
// Configure the UI by providing this Component as a child of GraphiQL.
GraphiQL.Toolbar = (function (_React$Component3) {
_inherits(GraphiQLToolbar, _React$Component3);
GraphiQL.Toolbar = function GraphiQLToolbar(props) {
return _react2.default.createElement(
'div',
{ className: 'toolbar' },
props.children
);
};
function GraphiQLToolbar() {
_classCallCheck(this, GraphiQLToolbar);
_React$Component3.apply(this, arguments);
}
GraphiQLToolbar.prototype.render = function render() {
return _react2['default'].createElement(
'div',
{ className: 'toolbar' },
this.props.children
);
};
return GraphiQLToolbar;
})(_react2['default'].Component);
// Add a button to the Toolbar.

@@ -916,22 +985,10 @@ GraphiQL.ToolbarButton = _ToolbarButton.ToolbarButton;

// Configure the UI by providing this Component as a child of GraphiQL.
GraphiQL.Footer = (function (_React$Component4) {
_inherits(GraphiQLFooter, _React$Component4);
GraphiQL.Footer = function GraphiQLFooter(props) {
return _react2.default.createElement(
'div',
{ className: 'footer' },
props.children
);
};
function GraphiQLFooter() {
_classCallCheck(this, GraphiQLFooter);
_React$Component4.apply(this, arguments);
}
GraphiQLFooter.prototype.render = function render() {
return _react2['default'].createElement(
'div',
{ className: 'footer' },
this.props.children
);
};
return GraphiQLFooter;
})(_react2['default'].Component);
var defaultQuery = '# Welcome to GraphiQL\n#\n# GraphiQL is an in-browser IDE for writing, validating, and\n# testing GraphQL queries.\n#\n# Type queries into this side of the screen, and you will\n# see intelligent typeaheads aware of the current GraphQL type schema and\n# live syntax and validation errors highlighted within the text.\n#\n# To bring up the auto-complete at any point, just press Ctrl-Space.\n#\n# Press the run button above, or Cmd-Enter to execute the query, and the result\n# will appear in the pane to the right.\n\n';

@@ -941,3 +998,3 @@

function isPromise(value) {
return typeof value === 'object' && typeof value.then === 'function';
return (typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object' && typeof value.then === 'function';
}

@@ -947,3 +1004,3 @@

function isObservable(value) {
return typeof value === 'object' && typeof value.subscribe === 'function';
return (typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object' && typeof value.subscribe === 'function';
}

252

dist/components/QueryEditor.js

@@ -1,21 +0,10 @@

/**
* Copyright (c) 2015, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the license found in the
* LICENSE-examples file in the root directory of this source tree.
*/
'use strict';
exports.__esModule = true;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.QueryEditor = undefined;
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var _react = require('react');

@@ -57,6 +46,20 @@

var _utilityOnHasCompletion = require('../utility/onHasCompletion');
var _onHasCompletion = require('../utility/onHasCompletion');
var _utilityOnHasCompletion2 = _interopRequireDefault(_utilityOnHasCompletion);
var _onHasCompletion2 = _interopRequireDefault(_onHasCompletion);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
* Copyright (c) 2015, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the license found in the
* LICENSE-examples file in the root directory of this source tree.
*/
/**

@@ -75,22 +78,8 @@ * QueryEditor

var QueryEditor = (function (_React$Component) {
var QueryEditor = exports.QueryEditor = function (_React$Component) {
_inherits(QueryEditor, _React$Component);
_createClass(QueryEditor, null, [{
key: 'propTypes',
value: {
schema: _react.PropTypes.instanceOf(_graphql.GraphQLSchema),
value: _react.PropTypes.string,
onEdit: _react.PropTypes.func
},
enumerable: true
}]);
function QueryEditor(props) {
var _this = this;
_classCallCheck(this, QueryEditor);
_React$Component.call(this);
// Keep a cached version of the value, this cache will be updated when the

@@ -100,3 +89,5 @@ // editor is updated, which can later be used to protect the editor from

this._onKeyUp = function (cm, event) {
var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(QueryEditor).call(this));
_this._onKeyUp = function (cm, event) {
var code = event.keyCode;

@@ -113,3 +104,3 @@ if (code >= 65 && code <= 90 || // letters

this._onEdit = function () {
_this._onEdit = function () {
if (!_this.ignoreChangeEvent) {

@@ -123,106 +114,121 @@ _this.cachedValue = _this.editor.getValue();

this._onHasCompletion = function (cm, data) {
_utilityOnHasCompletion2['default'](cm, data, _this.props.onHintInformationRender);
_this._onHasCompletion = function (cm, data) {
(0, _onHasCompletion2.default)(cm, data, _this.props.onHintInformationRender);
};
this.cachedValue = props.value || '';
_this.cachedValue = props.value || '';
return _this;
}
/**
* Public API for retrieving the CodeMirror instance from this
* React component.
*/
_createClass(QueryEditor, [{
key: 'componentDidMount',
value: function componentDidMount() {
var _this2 = this;
QueryEditor.prototype.getCodeMirror = function getCodeMirror() {
return this.editor;
};
QueryEditor.prototype.componentDidMount = function componentDidMount() {
var _this2 = this;
this.editor = _codemirror2['default'](_reactDom2['default'].findDOMNode(this), {
value: this.props.value || '',
lineNumbers: true,
tabSize: 2,
mode: 'graphql',
theme: 'graphiql',
keyMap: 'sublime',
autoCloseBrackets: true,
matchBrackets: true,
showCursorWhenSelecting: true,
foldGutter: {
minFoldSize: 4
},
lint: {
schema: this.props.schema
},
hintOptions: {
schema: this.props.schema,
closeOnUnfocus: false,
completeSingle: false
},
gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
extraKeys: {
'Cmd-Space': function CmdSpace() {
return _this2.editor.showHint({ completeSingle: true });
this.editor = (0, _codemirror2.default)(_reactDom2.default.findDOMNode(this), {
value: this.props.value || '',
lineNumbers: true,
tabSize: 2,
mode: 'graphql',
theme: 'graphiql',
keyMap: 'sublime',
autoCloseBrackets: true,
matchBrackets: true,
showCursorWhenSelecting: true,
foldGutter: {
minFoldSize: 4
},
'Ctrl-Space': function CtrlSpace() {
return _this2.editor.showHint({ completeSingle: true });
lint: {
schema: this.props.schema
},
'Alt-Space': function AltSpace() {
return _this2.editor.showHint({ completeSingle: true });
hintOptions: {
schema: this.props.schema,
closeOnUnfocus: false,
completeSingle: false
},
'Shift-Space': function ShiftSpace() {
return _this2.editor.showHint({ completeSingle: true });
},
gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
extraKeys: {
'Cmd-Space': function CmdSpace() {
return _this2.editor.showHint({ completeSingle: true });
},
'Ctrl-Space': function CtrlSpace() {
return _this2.editor.showHint({ completeSingle: true });
},
'Alt-Space': function AltSpace() {
return _this2.editor.showHint({ completeSingle: true });
},
'Shift-Space': function ShiftSpace() {
return _this2.editor.showHint({ completeSingle: true });
},
// Editor improvements
'Ctrl-Left': 'goSubwordLeft',
'Ctrl-Right': 'goSubwordRight',
'Alt-Left': 'goGroupLeft',
'Alt-Right': 'goGroupRight'
// Editor improvements
'Ctrl-Left': 'goSubwordLeft',
'Ctrl-Right': 'goSubwordRight',
'Alt-Left': 'goGroupLeft',
'Alt-Right': 'goGroupRight'
}
});
this.editor.on('change', this._onEdit);
this.editor.on('keyup', this._onKeyUp);
this.editor.on('hasCompletion', this._onHasCompletion);
}
}, {
key: 'componentDidUpdate',
value: function componentDidUpdate(prevProps) {
// Ensure the changes caused by this update are not interpretted as
// user-input changes which could otherwise result in an infinite
// event loop.
this.ignoreChangeEvent = true;
if (this.props.schema !== prevProps.schema) {
this.editor.options.lint.schema = this.props.schema;
this.editor.options.hintOptions.schema = this.props.schema;
_codemirror2.default.signal(this.editor, 'change', this.editor);
}
});
if (this.props.value !== prevProps.value && this.props.value !== this.cachedValue) {
this.cachedValue = this.props.value;
this.editor.setValue(this.props.value);
}
this.ignoreChangeEvent = false;
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
this.editor.off('change', this._onEdit);
this.editor.off('keyup', this._onKeyUp);
this.editor.off('hasCompletion', this._onHasCompletion);
this.editor = null;
}
}, {
key: 'render',
value: function render() {
return _react2.default.createElement('div', { className: 'query-editor' });
}
this.editor.on('change', this._onEdit);
this.editor.on('keyup', this._onKeyUp);
this.editor.on('hasCompletion', this._onHasCompletion);
};
/**
* Public API for retrieving the CodeMirror instance from this
* React component.
*/
QueryEditor.prototype.componentWillUnmount = function componentWillUnmount() {
this.editor.off('change', this._onEdit);
this.editor.off('keyup', this._onKeyUp);
this.editor.off('hasCompletion', this._onHasCompletion);
this.editor = null;
};
QueryEditor.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
// Ensure the changes caused by this update are not interpretted as
// user-input changes which could otherwise result in an infinite
// event loop.
this.ignoreChangeEvent = true;
if (this.props.schema !== prevProps.schema) {
this.editor.options.lint.schema = this.props.schema;
this.editor.options.hintOptions.schema = this.props.schema;
_codemirror2['default'].signal(this.editor, 'change', this.editor);
}, {
key: 'getCodeMirror',
value: function getCodeMirror() {
return this.editor;
}
if (this.props.value !== prevProps.value && this.props.value !== this.cachedValue) {
this.cachedValue = this.props.value;
this.editor.setValue(this.props.value);
}
this.ignoreChangeEvent = false;
};
QueryEditor.prototype.render = function render() {
return _react2['default'].createElement('div', { className: 'query-editor' });
};
/**
* Render a custom UI for CodeMirror's hint which includes additional info
* about the type and description for the selected context.
*/
}]);
return QueryEditor;
})(_react2['default'].Component);
}(_react2.default.Component);
exports.QueryEditor = QueryEditor;
/**
* Render a custom UI for CodeMirror's hint which includes additional info
* about the type and description for the selected context.
*/
QueryEditor.propTypes = {
schema: _react.PropTypes.instanceOf(_graphql.GraphQLSchema),
value: _react.PropTypes.string,
onEdit: _react.PropTypes.func,
onHintInformationRender: _react.PropTypes.func
};

143

dist/components/ResultViewer.js

@@ -1,21 +0,10 @@

/**
* Copyright (c) 2015, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the license found in the
* LICENSE-examples file in the root directory of this source tree.
*/
'use strict';
exports.__esModule = true;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ResultViewer = undefined;
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var _react = require('react');

@@ -41,2 +30,16 @@

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
* Copyright (c) 2015, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the license found in the
* LICENSE-examples file in the root directory of this source tree.
*/
/**

@@ -53,3 +56,3 @@ * ResultViewer

var ResultViewer = (function (_React$Component) {
var ResultViewer = exports.ResultViewer = function (_React$Component) {
_inherits(ResultViewer, _React$Component);

@@ -60,56 +63,68 @@

_React$Component.apply(this, arguments);
return _possibleConstructorReturn(this, Object.getPrototypeOf(ResultViewer).apply(this, arguments));
}
ResultViewer.prototype.componentDidMount = function componentDidMount() {
this.viewer = _codemirror2['default'](_reactDom2['default'].findDOMNode(this), {
value: this.props.value || '',
readOnly: true,
theme: 'graphiql',
mode: {
name: 'javascript',
json: true
},
keyMap: 'sublime',
foldGutter: {
minFoldSize: 4
},
gutters: ['CodeMirror-foldgutter'],
extraKeys: {
// Editor improvements
'Ctrl-Left': 'goSubwordLeft',
'Ctrl-Right': 'goSubwordRight',
'Alt-Left': 'goGroupLeft',
'Alt-Right': 'goGroupRight'
}
});
};
_createClass(ResultViewer, [{
key: 'componentDidMount',
value: function componentDidMount() {
this.viewer = (0, _codemirror2.default)(_reactDom2.default.findDOMNode(this), {
value: this.props.value || '',
readOnly: true,
theme: 'graphiql',
mode: {
name: 'javascript',
json: true
},
keyMap: 'sublime',
foldGutter: {
minFoldSize: 4
},
gutters: ['CodeMirror-foldgutter'],
extraKeys: {
// Editor improvements
'Ctrl-Left': 'goSubwordLeft',
'Ctrl-Right': 'goSubwordRight',
'Alt-Left': 'goGroupLeft',
'Alt-Right': 'goGroupRight'
}
});
}
}, {
key: 'shouldComponentUpdate',
value: function shouldComponentUpdate(nextProps) {
return this.props.value !== nextProps.value;
}
}, {
key: 'componentDidUpdate',
value: function componentDidUpdate() {
this.viewer.setValue(this.props.value || '');
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
this.viewer = null;
}
}, {
key: 'render',
value: function render() {
return _react2.default.createElement('div', { className: 'result-window' });
}
ResultViewer.prototype.componentWillUnmount = function componentWillUnmount() {
this.viewer = null;
};
/**
* Public API for retrieving the CodeMirror instance from this
* React component.
*/
ResultViewer.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
return this.props.value !== nextProps.value;
};
ResultViewer.prototype.componentDidUpdate = function componentDidUpdate() {
this.viewer.setValue(this.props.value || '');
};
ResultViewer.prototype.render = function render() {
return _react2['default'].createElement('div', { className: 'result-window' });
};
_createClass(ResultViewer, null, [{
key: 'propTypes',
value: {
value: _react.PropTypes.string
},
enumerable: true
}, {
key: 'getCodeMirror',
value: function getCodeMirror() {
return this.viewer;
}
}]);
return ResultViewer;
})(_react2['default'].Component);
}(_react2.default.Component);
exports.ResultViewer = ResultViewer;
ResultViewer.propTypes = {
value: _react.PropTypes.string
};

87

dist/components/ToolbarButton.js

@@ -1,25 +0,28 @@

/**
* Copyright (c) 2015, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the license found in the
* LICENSE-examples file in the root directory of this source tree.
*/
'use strict';
exports.__esModule = true;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ToolbarButton = undefined;
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var _react = require('react');
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
var _react2 = _interopRequireDefault(_react);
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _react = require('react');
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var _react2 = _interopRequireDefault(_react);
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
* Copyright (c) 2015, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the license found in the
* LICENSE-examples file in the root directory of this source tree.
*/
/**

@@ -31,23 +34,11 @@ * ToolbarButton

var ToolbarButton = (function (_React$Component) {
var ToolbarButton = exports.ToolbarButton = function (_React$Component) {
_inherits(ToolbarButton, _React$Component);
_createClass(ToolbarButton, null, [{
key: 'propTypes',
value: {
onClick: _react.PropTypes.func,
title: _react.PropTypes.string,
label: _react.PropTypes.string
},
enumerable: true
}]);
function ToolbarButton(props) {
var _this = this;
_classCallCheck(this, ToolbarButton);
_React$Component.call(this, props);
var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(ToolbarButton).call(this, props));
this.onClick = function (e) {
_this.handleClick = function (e) {
e.preventDefault();

@@ -62,21 +53,29 @@ try {

this.state = { error: null };
_this.state = { error: null };
return _this;
}
ToolbarButton.prototype.render = function render() {
var error = this.state.error;
_createClass(ToolbarButton, [{
key: 'render',
value: function render() {
var error = this.state.error;
return _react2['default'].createElement(
'a',
{
className: 'toolbar-button' + (error ? ' error' : ''),
onClick: this.onClick,
title: error ? error.message : this.props.title },
this.props.label
);
};
return _react2.default.createElement(
'a',
{
className: 'toolbar-button' + (error ? ' error' : ''),
onClick: this.handleClick,
title: error ? error.message : this.props.title },
this.props.label
);
}
}]);
return ToolbarButton;
})(_react2['default'].Component);
}(_react2.default.Component);
exports.ToolbarButton = ToolbarButton;
ToolbarButton.propTypes = {
onClick: _react.PropTypes.func,
title: _react.PropTypes.string,
label: _react.PropTypes.string
};

230

dist/components/VariableEditor.js

@@ -1,21 +0,10 @@

/**
* Copyright (c) 2015, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the license found in the
* LICENSE-examples file in the root directory of this source tree.
*/
'use strict';
exports.__esModule = true;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.VariableEditor = undefined;
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var _react = require('react');

@@ -53,6 +42,20 @@

var _utilityOnHasCompletion = require('../utility/onHasCompletion');
var _onHasCompletion = require('../utility/onHasCompletion');
var _utilityOnHasCompletion2 = _interopRequireDefault(_utilityOnHasCompletion);
var _onHasCompletion2 = _interopRequireDefault(_onHasCompletion);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
* Copyright (c) 2015, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the license found in the
* LICENSE-examples file in the root directory of this source tree.
*/
/**

@@ -71,22 +74,8 @@ * VariableEditor

var VariableEditor = (function (_React$Component) {
var VariableEditor = exports.VariableEditor = function (_React$Component) {
_inherits(VariableEditor, _React$Component);
_createClass(VariableEditor, null, [{
key: 'propTypes',
value: {
variableToType: _react.PropTypes.object,
value: _react.PropTypes.string,
onEdit: _react.PropTypes.func
},
enumerable: true
}]);
function VariableEditor(props) {
var _this = this;
_classCallCheck(this, VariableEditor);
_React$Component.call(this);
// Keep a cached version of the value, this cache will be updated when the

@@ -96,3 +85,5 @@ // editor is updated, which can later be used to protect the editor from

this._onKeyUp = function (cm, event) {
var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(VariableEditor).call(this));
_this._onKeyUp = function (cm, event) {
var code = event.keyCode;

@@ -108,3 +99,3 @@ if (code >= 65 && code <= 90 || // letters

this._onEdit = function () {
_this._onEdit = function () {
if (!_this.ignoreChangeEvent) {

@@ -118,90 +109,113 @@ _this.cachedValue = _this.editor.getValue();

this._onHasCompletion = function (cm, data) {
_utilityOnHasCompletion2['default'](cm, data, _this.props.onHintInformationRender);
_this._onHasCompletion = function (cm, data) {
(0, _onHasCompletion2.default)(cm, data, _this.props.onHintInformationRender);
};
this.cachedValue = props.value || '';
_this.cachedValue = props.value || '';
return _this;
}
VariableEditor.prototype.componentDidMount = function componentDidMount() {
var _this2 = this;
_createClass(VariableEditor, [{
key: 'componentDidMount',
value: function componentDidMount() {
var _this2 = this;
this.editor = _codemirror2['default'](_reactDom2['default'].findDOMNode(this), {
value: this.props.value || '',
lineNumbers: true,
tabSize: 2,
mode: 'graphql-variables',
theme: 'graphiql',
keyMap: 'sublime',
autoCloseBrackets: true,
matchBrackets: true,
showCursorWhenSelecting: true,
foldGutter: {
minFoldSize: 4
},
lint: {
variableToType: this.props.variableToType
},
hintOptions: {
variableToType: this.props.variableToType
},
gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
extraKeys: {
'Cmd-Space': function CmdSpace() {
return _this2.editor.showHint({ completeSingle: false });
this.editor = (0, _codemirror2.default)(_reactDom2.default.findDOMNode(this), {
value: this.props.value || '',
lineNumbers: true,
tabSize: 2,
mode: 'graphql-variables',
theme: 'graphiql',
keyMap: 'sublime',
autoCloseBrackets: true,
matchBrackets: true,
showCursorWhenSelecting: true,
foldGutter: {
minFoldSize: 4
},
'Ctrl-Space': function CtrlSpace() {
return _this2.editor.showHint({ completeSingle: false });
lint: {
variableToType: this.props.variableToType
},
'Alt-Space': function AltSpace() {
return _this2.editor.showHint({ completeSingle: false });
hintOptions: {
variableToType: this.props.variableToType
},
'Shift-Space': function ShiftSpace() {
return _this2.editor.showHint({ completeSingle: false });
},
gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
extraKeys: {
'Cmd-Space': function CmdSpace() {
return _this2.editor.showHint({ completeSingle: false });
},
'Ctrl-Space': function CtrlSpace() {
return _this2.editor.showHint({ completeSingle: false });
},
'Alt-Space': function AltSpace() {
return _this2.editor.showHint({ completeSingle: false });
},
'Shift-Space': function ShiftSpace() {
return _this2.editor.showHint({ completeSingle: false });
},
// Editor improvements
'Ctrl-Left': 'goSubwordLeft',
'Ctrl-Right': 'goSubwordRight',
'Alt-Left': 'goGroupLeft',
'Alt-Right': 'goGroupRight'
// Editor improvements
'Ctrl-Left': 'goSubwordLeft',
'Ctrl-Right': 'goSubwordRight',
'Alt-Left': 'goGroupLeft',
'Alt-Right': 'goGroupRight'
}
});
this.editor.on('change', this._onEdit);
this.editor.on('keyup', this._onKeyUp);
this.editor.on('hasCompletion', this._onHasCompletion);
}
}, {
key: 'componentDidUpdate',
value: function componentDidUpdate(prevProps) {
// Ensure the changes caused by this update are not interpretted as
// user-input changes which could otherwise result in an infinite
// event loop.
this.ignoreChangeEvent = true;
if (this.props.variableToType !== prevProps.variableToType) {
this.editor.options.lint.variableToType = this.props.variableToType;
this.editor.options.hintOptions.variableToType = this.props.variableToType;
_codemirror2.default.signal(this.editor, 'change', this.editor);
}
});
if (this.props.value !== prevProps.value && this.props.value !== this.cachedValue) {
this.cachedValue = this.props.value;
this.editor.setValue(this.props.value);
}
this.ignoreChangeEvent = false;
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
this.editor.off('change', this._onEdit);
this.editor.off('keyup', this._onKeyUp);
this.editor.off('hasCompletion', this._onHasCompletion);
this.editor = null;
}
}, {
key: 'render',
value: function render() {
return _react2.default.createElement('div', { className: 'codemirrorWrap' });
}
this.editor.on('change', this._onEdit);
this.editor.on('keyup', this._onKeyUp);
this.editor.on('hasCompletion', this._onHasCompletion);
};
/**
* Public API for retrieving the CodeMirror instance from this
* React component.
*/
VariableEditor.prototype.componentWillUnmount = function componentWillUnmount() {
this.editor.off('change', this._onEdit);
this.editor.off('keyup', this._onKeyUp);
this.editor.off('hasCompletion', this._onHasCompletion);
this.editor = null;
};
VariableEditor.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
// Ensure the changes caused by this update are not interpretted as
// user-input changes which could otherwise result in an infinite
// event loop.
this.ignoreChangeEvent = true;
if (this.props.variableToType !== prevProps.variableToType) {
this.editor.options.lint.variableToType = this.props.variableToType;
this.editor.options.hintOptions.variableToType = this.props.variableToType;
_codemirror2['default'].signal(this.editor, 'change', this.editor);
}, {
key: 'getCodeMirror',
value: function getCodeMirror() {
return this.editor;
}
if (this.props.value !== prevProps.value && this.props.value !== this.cachedValue) {
this.cachedValue = this.props.value;
this.editor.setValue(this.props.value);
}
this.ignoreChangeEvent = false;
};
}]);
VariableEditor.prototype.render = function render() {
return _react2['default'].createElement('div', { className: 'codemirrorWrap', ref: 'codemirror' });
};
return VariableEditor;
})(_react2['default'].Component);
}(_react2.default.Component);
exports.VariableEditor = VariableEditor;
VariableEditor.propTypes = {
variableToType: _react.PropTypes.object,
value: _react.PropTypes.string,
onEdit: _react.PropTypes.func,
onHintInformationRender: _react.PropTypes.func
};

4

dist/index.js

@@ -0,1 +1,3 @@

'use strict';
/**

@@ -10,4 +12,2 @@ * Copyright (c) 2015, Facebook, Inc.

// The primary React component to use.
'use strict';
module.exports = require('./components/GraphiQL').GraphiQL;

17

dist/utility/debounce.js

@@ -0,1 +1,7 @@

"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = debounce;
/**

@@ -13,9 +19,4 @@ * Copyright (c) 2015, Facebook, Inc.

*/
"use strict";
exports.__esModule = true;
exports["default"] = debounce;
function debounce(duration, fn) {
var timeout = undefined;
var timeout = void 0;
return function () {

@@ -31,4 +32,2 @@ var _this = this,

};
}
module.exports = exports["default"];
}

13

dist/utility/elementPosition.js

@@ -0,1 +1,8 @@

"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getLeft = getLeft;
exports.getTop = getTop;
/**

@@ -13,8 +20,2 @@ * Copyright (c) 2015, Facebook, Inc.

"use strict";
exports.__esModule = true;
exports.getLeft = getLeft;
exports.getTop = getTop;
function getLeft(initialElem) {

@@ -21,0 +22,0 @@ var pt = 0;

35

dist/utility/fillLeafs.js

@@ -1,12 +0,6 @@

/**
* Copyright (c) 2015, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the license found in the
* LICENSE-examples file in the root directory of this source tree.
*/
'use strict';
exports.__esModule = true;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.fillLeafs = fillLeafs;

@@ -26,3 +20,2 @@

*/
function fillLeafs(schema, docString, getDefaultFieldNames) {

@@ -35,5 +28,5 @@ var insertions = [];

var ast = undefined;
var ast = void 0;
try {
ast = _graphql.parse(docString);
ast = (0, _graphql.parse)(docString);
} catch (error) {

@@ -45,3 +38,3 @@ return { insertions: insertions, result: docString };

var typeInfo = new _graphql.TypeInfo(schema);
_graphql.visit(ast, {
(0, _graphql.visit)(ast, {
leave: function leave(node) {

@@ -59,3 +52,3 @@ typeInfo.leave(node);

index: node.loc.end,
string: ' ' + _graphql.print(selectionSet).replace(/\n/g, '\n' + indent)
string: ' ' + (0, _graphql.print)(selectionSet).replace(/\n/g, '\n' + indent)
});

@@ -77,2 +70,10 @@ }

// including all leaf-type fields.
/**
* Copyright (c) 2015, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the license found in the
* LICENSE-examples file in the root directory of this source tree.
*/
function defaultGetDefaultFieldNames(type) {

@@ -104,3 +105,3 @@ // If this type cannot access fields, then return an empty set.

Object.keys(fields).forEach(function (fieldName) {
if (_graphql.isLeafType(fields[fieldName].type)) {
if ((0, _graphql.isLeafType)(fields[fieldName].type)) {
leafFieldNames.push(fieldName);

@@ -116,6 +117,6 @@ }

// Unwrap any non-null or list types.
var namedType = _graphql.getNamedType(type);
var namedType = (0, _graphql.getNamedType)(type);
// Unknown types and leaf types do not have selection sets.
if (!type || _graphql.isLeafType(type)) {
if (!type || (0, _graphql.isLeafType)(type)) {
return;

@@ -122,0 +123,0 @@ }

15

dist/utility/find.js

@@ -0,2 +1,8 @@

"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = find;
/**

@@ -11,7 +17,2 @@ * Copyright (c) 2015, Facebook, Inc.

"use strict";
exports.__esModule = true;
exports["default"] = find;
function find(list, predicate) {

@@ -23,4 +24,2 @@ for (var i = 0; i < list.length; i++) {

}
}
module.exports = exports["default"];
}

69

dist/utility/getQueryFacts.js

@@ -1,14 +0,7 @@

/**
* Copyright (c) 2015, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the license found in the
* LICENSE-examples file in the root directory of this source tree.
*/
'use strict';
exports.__esModule = true;
exports['default'] = getQueryFacts;
exports.getSelectedOperation = getSelectedOperation;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = getQueryFacts;
exports.collectVariables = collectVariables;

@@ -24,4 +17,3 @@

*/
function getQueryFacts(prevFacts, schema, documentStr) {
function getQueryFacts(schema, documentStr) {
if (!documentStr) {

@@ -31,5 +23,5 @@ return;

var documentAST = undefined;
var documentAST = void 0;
try {
documentAST = _graphql.parse(documentStr);
documentAST = (0, _graphql.parse)(documentStr);
} catch (e) {

@@ -49,45 +41,14 @@ return;

// Determine what the selected operation should be.
var selectedOperation = getSelectedOperation(prevFacts, operations);
return { variableToType: variableToType, operations: operations, selectedOperation: selectedOperation };
return { variableToType: variableToType, operations: operations };
}
/**
* Provided previous "queryFacts" and a list of operations, determine what the
* next selected operation should be.
* Provided a schema and a document, produces a `variableToType` Object.
*/
function getSelectedOperation(prevFacts, operations) {
// If there are not enough operations to bother with, return nothing.
if (!operations || operations.length < 1) {
return;
}
// If a previous selection still exists, continue to use it.
var names = operations.map(function (op) {
return op.name && op.name.value;
});
var prevSelectedOperation = prevFacts.selectedOperation;
if (prevSelectedOperation && names.indexOf(prevSelectedOperation) !== -1) {
return prevSelectedOperation;
}
// If a previous selection was the Nth operation, use the same Nth.
if (prevSelectedOperation && prevFacts.operations) {
var prevNames = prevFacts.operations.map(function (op) {
return op.name && op.name.value;
});
var prevIndex = prevNames.indexOf(prevSelectedOperation);
if (prevIndex && prevIndex < names.length) {
return names[prevIndex];
}
}
// Use the first operation.
return names[0];
}
/**
* Provided a schema and a document, produces a `variableToType` Object.
* Copyright (c) 2015, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the license found in the
* LICENSE-examples file in the root directory of this source tree.
*/

@@ -105,3 +66,3 @@

var inputType = _graphql.typeFromAST(schema, type);
var inputType = (0, _graphql.typeFromAST)(schema, type);
if (inputType) {

@@ -108,0 +69,0 @@ variableToType[variable.name.value] = inputType;

24

dist/utility/introspectionQueries.js

@@ -1,22 +0,20 @@

/**
* Copyright (c) 2015, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
'use strict';
exports.__esModule = true;
Object.defineProperty(exports, "__esModule", {
value: true
});
var _graphql = require('graphql');
exports.introspectionQuery = _graphql.introspectionQuery;
Object.defineProperty(exports, 'introspectionQuery', {
enumerable: true,
get: function get() {
return _graphql.introspectionQuery;
}
});
// Some GraphQL services do not support subscriptions and fail an introspection
// query which includes the `subscriptionType` field as the stock introspection
// query does. This backup query removes that field.
var introspectionQuerySansSubscriptions = '\n query IntrospectionQuery {\n __schema {\n queryType { name }\n mutationType { name }\n types {\n ...FullType\n }\n directives {\n name\n description\n args {\n ...InputValue\n }\n onOperation\n onFragment\n onField\n }\n }\n }\n\n fragment FullType on __Type {\n kind\n name\n description\n fields(includeDeprecated: true) {\n name\n description\n args {\n ...InputValue\n }\n type {\n ...TypeRef\n }\n isDeprecated\n deprecationReason\n }\n inputFields {\n ...InputValue\n }\n interfaces {\n ...TypeRef\n }\n enumValues(includeDeprecated: true) {\n name\n description\n isDeprecated\n deprecationReason\n }\n possibleTypes {\n ...TypeRef\n }\n }\n\n fragment InputValue on __InputValue {\n name\n description\n type { ...TypeRef }\n defaultValue\n }\n\n fragment TypeRef on __Type {\n kind\n name\n ofType {\n kind\n name\n ofType {\n kind\n name\n ofType {\n kind\n name\n }\n }\n }\n }\n';
exports.introspectionQuerySansSubscriptions = introspectionQuerySansSubscriptions;
var introspectionQuerySansSubscriptions = exports.introspectionQuerySansSubscriptions = '\n query IntrospectionQuery {\n __schema {\n queryType { name }\n mutationType { name }\n types {\n ...FullType\n }\n directives {\n name\n description\n args {\n ...InputValue\n }\n onOperation\n onFragment\n onField\n }\n }\n }\n\n fragment FullType on __Type {\n kind\n name\n description\n fields(includeDeprecated: true) {\n name\n description\n args {\n ...InputValue\n }\n type {\n ...TypeRef\n }\n isDeprecated\n deprecationReason\n }\n inputFields {\n ...InputValue\n }\n interfaces {\n ...TypeRef\n }\n enumValues(includeDeprecated: true) {\n name\n description\n isDeprecated\n deprecationReason\n }\n possibleTypes {\n ...TypeRef\n }\n }\n\n fragment InputValue on __InputValue {\n name\n description\n type { ...TypeRef }\n defaultValue\n }\n\n fragment TypeRef on __Type {\n kind\n name\n ofType {\n kind\n name\n ofType {\n kind\n name\n ofType {\n kind\n name\n }\n }\n }\n }\n';

48

dist/utility/onHasCompletion.js

@@ -1,17 +0,8 @@

/**
* Copyright (c) 2015, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
'use strict';
exports.__esModule = true;
exports['default'] = onHasCompletion;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = onHasCompletion;
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var _codemirror = require('codemirror');

@@ -27,2 +18,4 @@

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**

@@ -32,9 +25,8 @@ * Render a custom UI for CodeMirror's hint which includes additional info

*/
function onHasCompletion(cm, data, onHintInformationRender) {
var wrapper = undefined;
var information = undefined;
var wrapper = void 0;
var information = void 0;
// When a hint result is selected, we touch the UI.
_codemirror2['default'].on(data, 'select', function (ctx, el) {
_codemirror2.default.on(data, 'select', function (ctx, el) {
// Only the first time (usually when the hint UI is first displayed)

@@ -87,10 +79,10 @@ // do we create the wrapping node.

// original container.
var onRemoveFn = undefined;
wrapper.addEventListener('DOMNodeRemoved', onRemoveFn = function (event) {
var _onRemoveFn = void 0;
wrapper.addEventListener('DOMNodeRemoved', _onRemoveFn = function onRemoveFn(event) {
if (event.target === hintsUl) {
wrapper.removeEventListener('DOMNodeRemoved', onRemoveFn);
wrapper.removeEventListener('DOMNodeRemoved', _onRemoveFn);
wrapper.parentNode.removeChild(wrapper);
wrapper = null;
information = null;
onRemoveFn = null;
_onRemoveFn = null;
}

@@ -102,3 +94,3 @@ });

// Now that the UI has been set up, add info to information.
var description = ctx.description ? _marked2['default'](ctx.description, { smartypants: true }) : 'Self descriptive.';
var description = ctx.description ? (0, _marked2.default)(ctx.description, { smartypants: true }) : 'Self descriptive.';
var type = ctx.type ? '<span class="infoType">' + renderType(ctx.type) + '</span>' : '';

@@ -113,3 +105,10 @@

});
}
} /**
* Copyright (c) 2015, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/

@@ -124,3 +123,2 @@ function renderType(type) {

return '<a class="typeName">' + type.name + '</a>';
}
module.exports = exports['default'];
}

42

package.json
{
"name": "graphiql",
"version": "0.6.1",
"version": "0.6.2",
"description": "An graphical interactive in-browser GraphQL IDE.",

@@ -27,15 +27,2 @@ "contributors": [

],
"babel": {
"optional": [
"es7.classProperties"
],
"loose": [
"es6.classes",
"es6.destructuring",
"es6.modules",
"es6.properties.computed",
"es6.spread",
"es6.templateLiterals"
]
},
"browserify-shim": {

@@ -50,3 +37,3 @@ "react": "global:React",

"test": "npm run lint && npm run check && npm run testonly",
"testonly": "mocha $npm_package_options_mocha",
"testonly": "babel-node ./node_modules/.bin/_mocha $npm_package_options_mocha",
"lint": "eslint src",

@@ -65,18 +52,23 @@ "check": "flow check",

"graphql": "^0.4.16",
"react": "^0.14.0",
"react-dom": "^0.14.0"
"react": "^0.14.0 || ^15.0.0-rc",
"react-dom": "^0.14.0 || ^15.0.0-rc"
},
"devDependencies": {
"babel": "5.8.23",
"babel-core": "5.8.25",
"babel-eslint": "4.1.8",
"babel-cli": "6.6.5",
"babel-eslint": "6.0.0-beta.5",
"babel-plugin-syntax-async-functions": "6.5.0",
"babel-plugin-transform-class-properties": "^6.6.0",
"babel-plugin-transform-object-rest-spread": "6.6.5",
"babel-preset-es2015": "6.6.0",
"babel-preset-react": "6.5.0",
"browserify": "13.0.0",
"browserify-shim": "3.8.12",
"chai": "3.5.0",
"chai-subset": "1.2.0",
"eslint": "1.10.3",
"eslint-plugin-react": "3.16.1",
"flow-bin": "0.21.0",
"chai-subset": "1.2.1",
"eslint": "2.2.0",
"eslint-plugin-babel": "3.1.0",
"eslint-plugin-react": "4.2.2",
"flow-bin": "0.22.1",
"graphql": "0.4.18",
"jsdom": "8.0.2",
"jsdom": "8.1.0",
"mocha": "2.4.5",

@@ -83,0 +75,0 @@ "react": "0.14.7",

16

README.md

@@ -44,3 +44,11 @@ GraphiQL

Don't forget to include the CSS file on the page! If you're using npm, you can
find it in `node_modules/graphiql/graphiql.css`, or you can download it from the
[releases page](/graphql/graphiql/releases).
For an example of setting up a GraphiQL, check out the [example](./example) in
this repository which also includes a few useful features highlighting
GraphiQL's API.
### Features

@@ -52,3 +60,3 @@

* Automatic query completion.
* Run and inspect query results
* Run and inspect query results.

@@ -87,2 +95,5 @@

- `operationName`: an optional name of which GraphQL operation should be
executed.
- `response`: an optional JSON string to use as the initial displayed

@@ -106,2 +117,5 @@ response. If not provided, no response will be initialy shown. You might

- `onEditOperationName`: an optional function which will be called when the
operation name to be executed changes.
- `getDefaultFieldNames`: an optional function used to provide default fields

@@ -108,0 +122,0 @@ to non-leaf fields which invalidly lack a selection set.

graphiql.css

Sorry, the diff of this file is not supported yet

graphiql.js

Sorry, the diff of this file is too big to display

graphiql.min.js

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc