You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@couchdb.apache.org by ga...@apache.org on 2017/02/20 17:53:19 UTC
fauxton commit: updated refs/heads/master to 787280b
Repository: couchdb-fauxton
Updated Branches:
refs/heads/master 8f1d8e509 -> 787280b08
Generic tab layout wrapper component
Project: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/repo
Commit: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/commit/787280b0
Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/787280b0
Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/787280b0
Branch: refs/heads/master
Commit: 787280b08e2abf863d32103df2b35bf70bc9ccd4
Parents: 8f1d8e5
Author: Ryan Millay <ry...@gmail.com>
Authored: Tue Jan 24 16:10:04 2017 -0500
Committer: Garren Smith <ga...@gmail.com>
Committed: Mon Feb 20 19:52:44 2017 +0200
----------------------------------------------------------------------
.../__tests__/tabwindowwrapper.test.js | 50 +++++++++++++++++
.../assets/less/tab-window-wrapper.less | 19 +++++++
.../components/components/tabwindowwrapper.js | 56 ++++++++++++++++++++
.../components/react-components.react.jsx | 4 +-
4 files changed, 128 insertions(+), 1 deletion(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/787280b0/app/addons/components/__tests__/tabwindowwrapper.test.js
----------------------------------------------------------------------
diff --git a/app/addons/components/__tests__/tabwindowwrapper.test.js b/app/addons/components/__tests__/tabwindowwrapper.test.js
new file mode 100644
index 0000000..01c4305
--- /dev/null
+++ b/app/addons/components/__tests__/tabwindowwrapper.test.js
@@ -0,0 +1,50 @@
+// 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 { TabWindowWrapper } from "../components/tabwindowwrapper";
+import { mount } from "enzyme";
+import React from "react";
+import ReactDOM from "react-dom";
+
+describe('TabWindowWrapper', () => {
+ const mock = () => {
+ return (<div></div>);
+ };
+
+ const tabs = [
+ {
+ name: 'Tab1',
+ component: mock,
+ route: 'tab1'
+ },
+ {
+ name: 'Tab2',
+ component: mock,
+ route: 'tab2'
+ },
+ {
+ name: 'Tab3',
+ component: mock,
+ route: 'tab3'
+ }
+ ];
+
+ it('shows all tabs', () => {
+ const wrapper = mount(<TabWindowWrapper tabs={tabs} selectedTab={"Tab1"}/>);
+ expect(wrapper.find('.component-tab-element-wrapper').length).toBe(1);
+ expect(wrapper.find('.tab-element-content').length).toBe(3);
+ });
+
+ it('shows the selected tab', () => {
+ const wrapper = mount(<TabWindowWrapper tabs={tabs} selectedTab={"Tab2"}/>);
+ expect(wrapper.find('.tab-element-checked .tab-element-content').html()).toMatch(/Tab2/);
+ });
+});
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/787280b0/app/addons/components/assets/less/tab-window-wrapper.less
----------------------------------------------------------------------
diff --git a/app/addons/components/assets/less/tab-window-wrapper.less b/app/addons/components/assets/less/tab-window-wrapper.less
new file mode 100644
index 0000000..5c2da30
--- /dev/null
+++ b/app/addons/components/assets/less/tab-window-wrapper.less
@@ -0,0 +1,19 @@
+// 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.
+
+#dashboard-content > .tab__wrapper {
+ padding: 0;
+}
+
+.tab__container > div {
+ padding: 20px;
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/787280b0/app/addons/components/components/tabwindowwrapper.js
----------------------------------------------------------------------
diff --git a/app/addons/components/components/tabwindowwrapper.js b/app/addons/components/components/tabwindowwrapper.js
new file mode 100644
index 0000000..49fd213
--- /dev/null
+++ b/app/addons/components/components/tabwindowwrapper.js
@@ -0,0 +1,56 @@
+import FauxtonAPI from '../../../core/api';
+import React from 'react';
+import {TabElement, TabElementWrapper} from './tabelement';
+
+
+export class TabWindowWrapper extends React.Component {
+
+ constructor (props) {
+ super(props);
+ }
+
+ render () {
+ const {selectedTab, tabs} = this.props;
+
+ const elements = tabs.map((tab, i) => {
+
+ return (
+ <TabElement
+ key={i}
+ selected={tab.name === selectedTab}
+ text={tab.name}
+ onChange={() => { FauxtonAPI.navigate(tab.route, {redirect: true}); }}
+ iconClass="" />
+ );
+ });
+
+ const selectedPage = tabs.reduce((acc, el) => {
+ if (el.name === selectedTab) {
+ return el;
+ }
+ return acc;
+ }, {});
+
+ if (!selectedPage.component) {
+ return null;
+ }
+
+ return (
+ <div className="tab__wrapper">
+ <TabElementWrapper>
+ {elements}
+ </TabElementWrapper>
+
+ <div className="tab__container">
+ <selectedPage.component />
+ </div>
+ </div>
+ );
+ }
+
+};
+
+TabWindowWrapper.propTypes = {
+ tabs: React.PropTypes.array.isRequired,
+ selectedTab: React.PropTypes.string.isRequired
+};
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/787280b0/app/addons/components/react-components.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/components/react-components.react.jsx b/app/addons/components/react-components.react.jsx
index c404871..6bad879 100644
--- a/app/addons/components/react-components.react.jsx
+++ b/app/addons/components/react-components.react.jsx
@@ -30,6 +30,7 @@ import {DeleteDatabaseModal} from './components/deletedatabasemodal';
import {TabElement, TabElementWrapper} from './components/tabelement';
import {Polling, RefreshBtn} from './components/polling';
import {Copy} from './components/copy';
+import {TabWindowWrapper} from './components/tabwindowwrapper';
export default {
BadgeList,
@@ -56,5 +57,6 @@ export default {
TabElement,
TabElementWrapper,
RefreshBtn,
- Copy
+ Copy,
+ TabWindowWrapper
};