couchdb-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From gar...@apache.org
Subject fauxton commit: updated refs/heads/master to 787280b
Date Mon, 20 Feb 2017 17:53:19 GMT
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 <ryan.p.millay@gmail.com>
Authored: Tue Jan 24 16:10:04 2017 -0500
Committer: Garren Smith <garren.smith@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
 };


Mime
View raw message