Return-Path: X-Original-To: archive-asf-public-internal@cust-asf2.ponee.io Delivered-To: archive-asf-public-internal@cust-asf2.ponee.io Received: from cust-asf.ponee.io (cust-asf.ponee.io [163.172.22.183]) by cust-asf2.ponee.io (Postfix) with ESMTP id 6519C200BC5 for ; Mon, 7 Nov 2016 09:33:47 +0100 (CET) Received: by cust-asf.ponee.io (Postfix) id 6382F160AEB; Mon, 7 Nov 2016 08:33:47 +0000 (UTC) Delivered-To: archive-asf-public@cust-asf.ponee.io Received: from mail.apache.org (hermes.apache.org [140.211.11.3]) by cust-asf.ponee.io (Postfix) with SMTP id 6967B160AF9 for ; Mon, 7 Nov 2016 09:33:45 +0100 (CET) Received: (qmail 99803 invoked by uid 500); 7 Nov 2016 08:33:44 -0000 Mailing-List: contact commits-help@couchdb.apache.org; run by ezmlm Precedence: bulk List-Help: List-Unsubscribe: List-Post: List-Id: Reply-To: dev@couchdb.apache.org Delivered-To: mailing list commits@couchdb.apache.org Received: (qmail 99774 invoked by uid 99); 7 Nov 2016 08:33:44 -0000 Received: from git1-us-west.apache.org (HELO git1-us-west.apache.org) (140.211.11.23) by apache.org (qpsmtpd/0.29) with ESMTP; Mon, 07 Nov 2016 08:33:44 +0000 Received: by git1-us-west.apache.org (ASF Mail Server at git1-us-west.apache.org, from userid 33) id 144ABEEE7B; Mon, 7 Nov 2016 08:33:44 +0000 (UTC) Content-Type: text/plain; charset="us-ascii" MIME-Version: 1.0 Content-Transfer-Encoding: 7bit From: garren@apache.org To: commits@couchdb.apache.org Date: Mon, 07 Nov 2016 08:33:46 -0000 Message-Id: <4ba6ce67d17f478ea292a27dee9747f1@git.apache.org> In-Reply-To: <0876764e641646db841c9a48e70c611a@git.apache.org> References: <0876764e641646db841c9a48e70c611a@git.apache.org> X-Mailer: ASF-Git Admin Mailer Subject: [3/3] fauxton commit: updated refs/heads/master to 369c326 archived-at: Mon, 07 Nov 2016 08:33:47 -0000 break react components into individual files Project: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/repo Commit: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/commit/369c3265 Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/369c3265 Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/369c3265 Branch: refs/heads/master Commit: 369c3265498f32a1f8fa793f3d5fd0bca456b0df Parents: 0290732 Author: Garren Smith Authored: Wed Nov 2 15:04:42 2016 +0200 Committer: Garren Smith Committed: Mon Nov 7 10:33:01 2016 +0200 ---------------------------------------------------------------------- app/addons/components/base.js | 7 +- app/addons/components/components/apibar.js | 152 ++ app/addons/components/components/badge.js | 83 + app/addons/components/components/beautify.js | 59 + app/addons/components/components/bulkaction.js | 109 ++ app/addons/components/components/codeeditor.js | 370 ++++ .../components/components/codeeditorpanel.js | 147 ++ .../components/components/confirmbutton.js | 66 + .../components/deletedatabasemodal.js | 119 ++ app/addons/components/components/document.js | 126 ++ app/addons/components/components/loadlines.js | 21 + .../components/components/menudropdown.js | 82 + .../components/components/paddedborderbox.js | 25 + .../components/components/stringeditmodal.js | 95 + .../components/components/styledselect.js | 39 + app/addons/components/components/tabelement.js | 55 + .../components/components/toggleheaderbutton.js | 46 + app/addons/components/components/tray.js | 108 ++ .../components/components/zenmodeoverlay.js | 131 ++ .../components/react-components.react.jsx | 1657 +----------------- .../tests/paddedBorderedBoxSpec.react.jsx | 1 + .../fauxton/tests/componentsSpec.react.jsx | 22 +- 22 files changed, 1884 insertions(+), 1636 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/369c3265/app/addons/components/base.js ---------------------------------------------------------------------- diff --git a/app/addons/components/base.js b/app/addons/components/base.js index 1f6481d..47789ef 100644 --- a/app/addons/components/base.js +++ b/app/addons/components/base.js @@ -12,7 +12,6 @@ import "./assets/less/components.less"; -const Components = {}; -Components.initialize = function () {}; - -export default Components; +export default { + initialize () {} +}; http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/369c3265/app/addons/components/components/apibar.js ---------------------------------------------------------------------- diff --git a/app/addons/components/components/apibar.js b/app/addons/components/components/apibar.js new file mode 100644 index 0000000..c853cc8 --- /dev/null +++ b/app/addons/components/components/apibar.js @@ -0,0 +1,152 @@ +// Licensed under the Apache License, Version 2.0 (the "License"); you may not +// use this file except in compliance with the License. You may obtain a copy of +// the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT +// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the +// License for the specific language governing permissions and limitations under +// the License. + +import React from "react"; +import ReactDOM from "react-dom"; +import FauxtonAPI from "../../../core/api"; +import {TrayContents, TrayWrapper, connectToStores} from './tray'; +import FauxtonComponents from "../../fauxton/components.react"; +import Actions from "../actions"; +import Stores from "../stores"; +import {ToggleHeaderButton} from './toggleheaderbutton'; +const { componentStore } = Stores; + +export const APIBar = React.createClass({ + propTypes: { + buttonVisible: React.PropTypes.bool.isRequired, + contentVisible: React.PropTypes.bool.isRequired, + docURL: React.PropTypes.string, + endpoint: React.PropTypes.string + }, + + showCopiedMessage () { + FauxtonAPI.addNotification({ + msg: 'The API URL has been copied to the clipboard.', + type: 'success', + clear: true + }); + }, + + getDocIcon () { + if (!this.props.docURL) { + return null; + } + return ( + + + + ); + }, + + getTray () { + if (!this.props.contentVisible) { + return null; + } + + return ( + +
+ + API URL + {this.getDocIcon()} + + + + + +
+ + ); + }, + + toggleTrayVisibility () { + Actions.toggleApiBarVisibility(!this.props.contentVisible); + }, + + componentDidMount () { + $('body').on('click.APIBar', function (e) { + + if (!$('.show-tray.api-bar-tray').length) { + return; + } + + if ($(e.target).closest('.api-bar-tray,.control-toggle-api-url').length === 0) { + Actions.toggleApiBarVisibility(false); + } + }.bind(this)); + }, + + componentWillUnmount () { + $('body').off('click.APIBar'); + }, + + render () { + if (!this.props.buttonVisible || !this.props.endpoint) { + return null; + } + + return ( +
+ + + {this.getTray()} +
+ ); + } +}); + +export const ApiBarController = React.createClass({ + + getWrap () { + return connectToStores(TrayWrapper, [componentStore], function () { + return { + buttonVisible: componentStore.getIsAPIBarButtonVisible(), + contentVisible: componentStore.getIsAPIBarVisible(), + endpoint: componentStore.getEndpoint(), + docURL: componentStore.getDocURL() + }; + }); + }, + + render () { + var TrayWrapper = this.getWrap(); + return ( + + + + ); + } +}); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/369c3265/app/addons/components/components/badge.js ---------------------------------------------------------------------- diff --git a/app/addons/components/components/badge.js b/app/addons/components/components/badge.js new file mode 100644 index 0000000..29b2599 --- /dev/null +++ b/app/addons/components/components/badge.js @@ -0,0 +1,83 @@ +// Licensed under the Apache License, Version 2.0 (the "License"); you may not +// use this file except in compliance with the License. You may obtain a copy of +// the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT +// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the +// License for the specific language governing permissions and limitations under +// the License. + +import React from "react"; +import ReactDOM from "react-dom"; + +export const BadgeList = React.createClass({ + + propTypes: { + elements: React.PropTypes.array.isRequired, + removeBadge: React.PropTypes.func.isRequired + }, + + getDefaultProps () { + return { + getLabel (el) { + return el; + }, + + getId (el) { + return el; + } + }; + }, + + getBadges () { + return this.props.elements.map(function (el, i) { + return ; + }.bind(this)); + }, + + removeBadge (label, el) { + this.props.removeBadge(label, el); + }, + + render () { + return ( +
    + {this.getBadges()} +
+ ); + } +}); + +export const Badge = React.createClass({ + propTypes: { + label: React.PropTypes.string.isRequired, + remove: React.PropTypes.func.isRequired + }, + + remove (e) { + e.preventDefault(); + this.props.remove(this.props.label, this.props.id); + }, + + render () { + return ( +
  • + {this.props.label} + + × + +
    • + ); + } +}); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/369c3265/app/addons/components/components/beautify.js ---------------------------------------------------------------------- diff --git a/app/addons/components/components/beautify.js b/app/addons/components/components/beautify.js new file mode 100644 index 0000000..3ff3519 --- /dev/null +++ b/app/addons/components/components/beautify.js @@ -0,0 +1,59 @@ +// Licensed under the Apache License, Version 2.0 (the "License"); you may not +// use this file except in compliance with the License. You may obtain a copy of +// the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT +// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the +// License for the specific language governing permissions and limitations under +// the License. +import React from "react"; +import ReactDOM from "react-dom"; +import beautifyHelper from "../../../../assets/js/plugins/beautify"; + +export const Beautify = React.createClass({ + noOfLines () { + return this.props.code.split(/\r\n|\r|\n/).length; + }, + + canBeautify () { + return this.noOfLines() === 1; + }, + + addTooltip () { + if (this.canBeautify) { + $('.beautify-tooltip').tooltip({ placement: 'right' }); + } + }, + + componentDidMount () { + this.addTooltip(); + }, + + beautify (event) { + event.preventDefault(); + var beautifiedCode = beautifyHelper(this.props.code); + this.props.beautifiedCode(beautifiedCode); + $('.beautify-tooltip').tooltip('hide'); + }, + + render () { + if (!this.canBeautify()) { + return null; + } + + return ( + + ); + } +}); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/369c3265/app/addons/components/components/bulkaction.js ---------------------------------------------------------------------- diff --git a/app/addons/components/components/bulkaction.js b/app/addons/components/components/bulkaction.js new file mode 100644 index 0000000..d16e072 --- /dev/null +++ b/app/addons/components/components/bulkaction.js @@ -0,0 +1,109 @@ +// Licensed under the Apache License, Version 2.0 (the "License"); you may not +// use this file except in compliance with the License. You may obtain a copy of +// the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT +// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the +// License for the specific language governing permissions and limitations under +// the License. + +import React from "react"; +import ReactDOM from "react-dom"; +import {OverlayTrigger, Popover} from "react-bootstrap"; + +export const BulkActionComponent = React.createClass({ + + propTypes: { + hasSelectedItem: React.PropTypes.bool.isRequired, + removeItem: React.PropTypes.func.isRequired, + selectAll: React.PropTypes.func, + toggleSelect: React.PropTypes.func.isRequired, + isChecked: React.PropTypes.bool.isRequired, + disabled: React.PropTypes.bool + }, + + getDefaultProps () { + return { + disabled: false, + title: 'Select rows that can be...', + bulkIcon: 'fonticon-trash', + buttonTitle: 'Delete all selected', + dropdownContentText: 'Deleted', + enableOverlay: false + }; + }, + + render () { + return ( +
    +
    + {this.getMasterSelector()} + {this.getMultiSelectOptions()} +
    +
    + ); + }, + + getMultiSelectOptions () { + if (!this.props.hasSelectedItem) { + return null; + } + + return ( + + + + ); + } +}); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/369c3265/app/addons/components/components/codeeditorpanel.js ---------------------------------------------------------------------- diff --git a/app/addons/components/components/codeeditorpanel.js b/app/addons/components/components/codeeditorpanel.js new file mode 100644 index 0000000..92e3693 --- /dev/null +++ b/app/addons/components/components/codeeditorpanel.js @@ -0,0 +1,147 @@ +// Licensed under the Apache License, Version 2.0 (the "License"); you may not +// use this file except in compliance with the License. You may obtain a copy of +// the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT +// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the +// License for the specific language governing permissions and limitations under +// the License. +import React from "react"; +import ReactDOM from "react-dom"; +import {CodeEditor} from './codeeditor'; +import {StringEditModal} from './stringeditmodal'; +import {Beautify} from './beautify'; +import {ZenModeOverlay} from './zenmodeoverlay'; + +/** + * A pre-packaged JS editor panel for use on the Edit Index / Mango pages. Includes options for a title, zen mode + * icon and beautify button. + */ +export const CodeEditorPanel = React.createClass({ + getDefaultProps () { + return { + id: 'code-editor', + className: '', + defaultCode: '', + title: '', + docLink: '', + allowZenMode: true, + blur () {} + }; + }, + + getInitialState () { + return this.getStoreState(); + }, + + getStoreState () { + return { + zenModeEnabled: false, + code: this.props.defaultCode + }; + }, + + componentWillReceiveProps (nextProps) { + if (nextProps.defaultCode !== this.props.defaultCode) { + this.setState({ code: nextProps.defaultCode }); + } + }, + + // list of JSHINT errors to ignore: gets around problem of anonymous functions not being valid + ignorableErrors: [ + 'Missing name in function declaration.', + "['{a}'] is better written in dot notation." + ], + + getZenModeIcon () { + if (this.props.allowZenMode) { + return ; + } + }, + + getDocIcon () { + if (this.props.docLink) { + return ( + + + + ); + } + }, + + getZenModeOverlay () { + if (this.state.zenModeEnabled) { + return ( + + ); + } + }, + + enterZenMode () { + this.setState({ + zenModeEnabled: true, + code: this.refs.codeEditor.getValue() + }); + }, + + exitZenMode (content) { + this.setState({ zenModeEnabled: false }); + this.getEditor().setValue(content); + }, + + getEditor () { + return this.refs.codeEditor; + }, + + getValue () { + return this.getEditor().getValue(); + }, + + beautify (code) { + this.setState({ code: code }); + this.getEditor().setValue(code); + }, + + update () { + this.getEditor().setValue(this.state.code); + }, + + render () { + var classes = 'control-group'; + if (this.props.className) { + classes += ' ' + this.props.className; + } + return ( +
    + + + + {this.getZenModeOverlay()} +
    + ); + } +}); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/369c3265/app/addons/components/components/confirmbutton.js ---------------------------------------------------------------------- diff --git a/app/addons/components/components/confirmbutton.js b/app/addons/components/components/confirmbutton.js new file mode 100644 index 0000000..72e157e --- /dev/null +++ b/app/addons/components/components/confirmbutton.js @@ -0,0 +1,66 @@ +// Licensed under the Apache License, Version 2.0 (the "License"); you may not +// use this file except in compliance with the License. You may obtain a copy of +// the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT +// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the +// License for the specific language governing permissions and limitations under +// the License. + +import React from "react"; +import ReactDOM from "react-dom"; + +export const ConfirmButton = React.createClass({ + propTypes: { + showIcon: React.PropTypes.bool, + id: React.PropTypes.string, + customIcon: React.PropTypes.string, + style: React.PropTypes.object, + buttonType: React.PropTypes.string, + 'data-id': React.PropTypes.string, + onClick: React.PropTypes.func, + disabled: React.PropTypes.bool, + }, + + getDefaultProps () { + return { + disabled: false, + showIcon: true, + customIcon: 'fonticon-ok-circled', + buttonType: 'btn-success', + style: {}, + 'data-id': null, + onClick () { } + }; + }, + + getIcon () { + if (!this.props.showIcon) { + return null; + } + return ( + + ); + }, + + render () { + const { onClick, buttonType, id, style, text, disabled } = this.props; + return ( + + ); + } +}); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/369c3265/app/addons/components/components/deletedatabasemodal.js ---------------------------------------------------------------------- diff --git a/app/addons/components/components/deletedatabasemodal.js b/app/addons/components/components/deletedatabasemodal.js new file mode 100644 index 0000000..f24e553 --- /dev/null +++ b/app/addons/components/components/deletedatabasemodal.js @@ -0,0 +1,119 @@ +// Licensed under the Apache License, Version 2.0 (the "License"); you may not +// use this file except in compliance with the License. You may obtain a copy of +// the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT +// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the +// License for the specific language governing permissions and limitations under +// the License. + +import React from "react"; +import ReactDOM from "react-dom"; +import {Modal} from "react-bootstrap"; +import Actions from "../actions"; + +export const DeleteDatabaseModal = React.createClass({ + + getInitialState () { + return { + inputValue: '', + disableSubmit: true + }; + }, + + propTypes: { + showHide: React.PropTypes.func.isRequired, + modalProps: React.PropTypes.object + }, + + close (e) { + if (e) { + e.preventDefault(); + } + + this.setState({ + inputValue: '', + disableSubmit: true + }); + + this.props.showHide({showModal: false}); + }, + + open () { + this.props.showHide({showModal: true}); + }, + + getDatabaseName () { + return this.props.modalProps.dbId.trim(); + }, + + onInputChange (e) { + const val = e.target.value.trim(); + + this.setState({ + inputValue: val + }); + + this.setState({ + disableSubmit: val !== this.getDatabaseName() + }); + }, + + onDeleteClick (e) { + e.preventDefault(); + + Actions.deleteDatabase(this.getDatabaseName()); + }, + + onInputKeypress (e) { + if (e.keyCode === 13 && this.state.disableSubmit !== true) { + Actions.deleteDatabase(this.getDatabaseName()); + } + }, + + render () { + var isSystemDatabase = this.props.modalProps.isSystemDatabase; + var showDeleteModal = this.props.modalProps.showDeleteModal; + var dbId = this.props.modalProps.dbId; + + var warning = isSystemDatabase ? ( +

    + You are about to delete a system database, be careful! +

    + ) : null; + + return ( + + + Delete Database + + + {warning} +

    + Warning: This action will permanently delete {dbId}. + To confirm the deletion of the database and all of the + database's documents, you must enter the database's name. +

    + +     + + Cancel + + +     + ); + } +}); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/369c3265/app/addons/components/components/document.js ---------------------------------------------------------------------- diff --git a/app/addons/components/components/document.js b/app/addons/components/components/document.js new file mode 100644 index 0000000..1bf6ced --- /dev/null +++ b/app/addons/components/components/document.js @@ -0,0 +1,126 @@ +// Licensed under the Apache License, Version 2.0 (the "License"); you may not +// use this file except in compliance with the License. You may obtain a copy of +// the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT +// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the +// License for the specific language governing permissions and limitations under +// the License. +import React from "react"; +import ReactDOM from "react-dom"; +import FauxtonAPI from "../../../core/api"; +import Helpers from "../../documents/helpers"; + +export const Document = React.createClass({ + propTypes: { + docIdentifier: React.PropTypes.string.isRequired, + docChecked: React.PropTypes.func.isRequired, + truncate: React.PropTypes.bool, + maxRows: React.PropTypes.number + }, + + getDefaultProps () { + return { + truncate: true, + maxRows: 500 + }; + }, + + onChange (e) { + e.preventDefault(); + this.props.docChecked(this.props.doc.id, this.props.doc._rev); + }, + + getUrlFragment () { + if (!this.props.children) { + return ''; + } + + return ( +
    + {this.props.children} +
    + ); + }, + + getExtensionIcons () { + var extensions = FauxtonAPI.getExtensions('DocList:icons'); + return _.map(extensions, function (Extension, i) { + return (); + }, this); + }, + + getCheckbox () { + if (!this.props.isDeletable) { + return
    ; + } + + return ( +
    + +
    + ); + }, + + onDoubleClick (e) { + this.props.onDoubleClick(this.props.docIdentifier, this.props.doc, e); + }, + + getDocContent () { + if (_.isEmpty(this.props.docContent)) { + return null; + } + + // if need be, truncate the document + var content = this.props.docContent; + var isTruncated = false; + if (this.props.truncate) { + var result = Helpers.truncateDoc(this.props.docContent, this.props.maxRows); + isTruncated = result.isTruncated; + content = result.content; + } + + return ( +
    + 
    {content}
    + {isTruncated ?
    (truncated)
    : null} +
    + ); + }, + + render () { + return ( +
    +
    + {this.getCheckbox()} +
    +
    +
    + + {this.props.keylabel} + + + {this.props.header ? '"' + this.props.header + '"' : null} + + {this.getUrlFragment()} +
    {this.getExtensionIcons()}
    +
    + {this.getDocContent()} +
    +
    +
    + ); + } +}); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/369c3265/app/addons/components/components/loadlines.js ---------------------------------------------------------------------- diff --git a/app/addons/components/components/loadlines.js b/app/addons/components/components/loadlines.js new file mode 100644 index 0000000..0fa2b74 --- /dev/null +++ b/app/addons/components/components/loadlines.js @@ -0,0 +1,21 @@ +// Licensed under the Apache License, Version 2.0 (the "License"); you may not +// use this file except in compliance with the License. You may obtain a copy of +// the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT +// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the +// License for the specific language governing permissions and limitations under +// the License. +import React from "react"; +import ReactDOM from "react-dom"; + +export const LoadLines = () => +
    +
    +
    +
    +
    +
    ; http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/369c3265/app/addons/components/components/menudropdown.js ---------------------------------------------------------------------- diff --git a/app/addons/components/components/menudropdown.js b/app/addons/components/components/menudropdown.js new file mode 100644 index 0000000..18127a1 --- /dev/null +++ b/app/addons/components/components/menudropdown.js @@ -0,0 +1,82 @@ +// Licensed under the Apache License, Version 2.0 (the "License"); you may not +// use this file except in compliance with the License. You may obtain a copy of +// the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT +// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the +// License for the specific language governing permissions and limitations under +// the License. +import React from "react"; +import ReactDOM from "react-dom"; + +export const MenuDropDown = React.createClass({ + + getDefaultProps () { + return { + icon: 'fonticon-plus-circled' + }; + }, + + createSectionLinks (links) { + if (!links) { return null; } + + return links.map((link, key) => { + return this.createEntry(link, key); + }); + }, + + createEntry (link, key) { + return ( +
  • + + {link.title} + +
    • + ); + }, + + createSectionTitle (title) { + if (!title) { + return null; + } + + return ( +
  • {title}
    • + ); + }, + + createSection () { + return this.props.links.map((linkSection, key) => { + if (linkSection.title && linkSection.links) { + return ([ + this.createSectionTitle(linkSection.title), + this.createSectionLinks(linkSection.links) + ]); + } + + return this.createEntry(linkSection, 'el' + key); + + }); + }, + + render () { + return ( +
    + +
      + {this.createSection()} +
    +
    + ); + } +}); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/369c3265/app/addons/components/components/paddedborderbox.js ---------------------------------------------------------------------- diff --git a/app/addons/components/components/paddedborderbox.js b/app/addons/components/components/paddedborderbox.js new file mode 100644 index 0000000..22541fd --- /dev/null +++ b/app/addons/components/components/paddedborderbox.js @@ -0,0 +1,25 @@ +// Licensed under the Apache License, Version 2.0 (the "License"); you may not +// use this file except in compliance with the License. You may obtain a copy of +// the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT +// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the +// License for the specific language governing permissions and limitations under +// the License. +import React from "react"; +import ReactDOM from "react-dom"; + +export const PaddedBorderedBox = React.createClass({ + render: function () { + return ( +
    +
    + {this.props.children} +
    +
    + ); + } + }); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/369c3265/app/addons/components/components/stringeditmodal.js ---------------------------------------------------------------------- diff --git a/app/addons/components/components/stringeditmodal.js b/app/addons/components/components/stringeditmodal.js new file mode 100644 index 0000000..782a3db --- /dev/null +++ b/app/addons/components/components/stringeditmodal.js @@ -0,0 +1,95 @@ +// Licensed under the Apache License, Version 2.0 (the "License"); you may not +// use this file except in compliance with the License. You may obtain a copy of +// the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT +// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the +// License for the specific language governing permissions and limitations under +// the License. + +import React from "react"; +import ReactDOM from "react-dom"; +import {Modal} from "react-bootstrap"; +import ace from "brace"; +import Helpers from "../../documents/helpers"; +require('brace/mode/javascript'); +require('brace/mode/json'); +require('brace/theme/idle_fingers'); + +// this appears when the cursor is over a string. It shows an icon in the gutter that opens the modal. +export const StringEditModal = React.createClass({ + + propTypes: { + value: React.PropTypes.string.isRequired, + visible: React.PropTypes.bool.isRequired, + onClose: React.PropTypes.func.isRequired, + onSave: React.PropTypes.func.isRequired + }, + + getDefaultProps () { + return { + visible: false, + onClose () { }, + onSave () { } + }; + }, + + componentDidMount () { + if (!this.props.visible) { + return; + } + this.initEditor(this.props.value); + }, + + componentDidUpdate (prevProps) { + if (!this.props.visible) { + return; + } + var val = ''; + if (!prevProps.visible && this.props.visible) { + val = Helpers.parseJSON(this.props.value); + } + + this.initEditor(val); + }, + + initEditor (val) { + this.editor = ace.edit(ReactDOM.findDOMNode(this.refs.stringEditor)); + this.editor.$blockScrolling = Infinity; // suppresses an Ace editor error + this.editor.setShowPrintMargin(false); + this.editor.setOption('highlightActiveLine', true); + this.editor.setTheme('ace/theme/idle_fingers'); + this.editor.setValue(val, -1); + }, + + closeModal () { + this.props.onClose(); + }, + + save () { + this.props.onSave(this.editor.getValue()); + }, + + render () { + return ( + + + Edit Value + + +