From b05cc20878ac89c05f3761c85423e42aea5ab5c5 Mon Sep 17 00:00:00 2001 From: Stanislav Sysoev Date: Mon, 26 Feb 2018 22:26:54 +1100 Subject: [PATCH] feat: remove react-tabs --- package-lock.json | 14 ---- package.json | 2 +- src/components/tabs.js | 98 +++++++++++++++++++++++++++ src/dev-tools-expanded.js | 136 +++++++++----------------------------- src/state/global.js | 2 +- 5 files changed, 130 insertions(+), 122 deletions(-) create mode 100644 src/components/tabs.js diff --git a/package-lock.json b/package-lock.json index 6fdefa2..e8fed89 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2236,11 +2236,6 @@ "chalk": "1.1.3" } }, - "classnames": { - "version": "2.2.5", - "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.5.tgz", - "integrity": "sha1-+zgB1FNGdknvNgPH1hoCvRKb3m0=" - }, "clean-css": { "version": "4.1.9", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.1.9.tgz", @@ -10996,15 +10991,6 @@ "react-deep-force-update": "1.1.1" } }, - "react-tabs": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-2.1.1.tgz", - "integrity": "sha512-55jl6lsYmPTQarnjgrBU68WZlNtVSngpRxOc4iXm+Te27F9ixUr/IBTbhlhDCMiFJreP+cqu1OaMdNGY2Hg10A==", - "requires": { - "classnames": "2.2.5", - "prop-types": "15.6.0" - } - }, "react-transform-catch-errors": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/react-transform-catch-errors/-/react-transform-catch-errors-1.0.2.tgz", diff --git a/package.json b/package.json index 70111e9..7cbb53b 100644 --- a/package.json +++ b/package.json @@ -35,12 +35,12 @@ "html": "^1.0.0", "ie-array-find-polyfill": "^1.1.0", "jsondiffpatch": "github:d4rkr00t/jsondiffpatch#d80390b4354befe55802e292122b8059462c1b7d", + "prop-types": "^15.6.0", "prosemirror-model": ">=1.0.0", "prosemirror-state": ">=1.0.0", "react-dock": "^0.2.3", "react-emotion": "^9.0.2", "react-json-tree": "^0.11.0", - "react-tabs": "^2.1.1", "unstated": "^1.0.3" }, "peerDependencies": { diff --git a/src/components/tabs.js b/src/components/tabs.js new file mode 100644 index 0000000..4cad7f4 --- /dev/null +++ b/src/components/tabs.js @@ -0,0 +1,98 @@ +import React from "react"; +import styled from "react-emotion"; +import PropTypes from "prop-types"; +import theme from "../theme"; + +export const TabList = styled("div")({ + display: "flex", + listStyle: "none", + borderBottom: `1px solid ${theme.main20}` +}); +TabList.displayName = "TabList"; + +export const TabsStled = styled("div")({ + height: "100%", + width: "100%" +}); +TabsStled.displayName = "TabsStyled"; + +export const TabStyled = styled("div")( + { + color: theme.white, + textTransform: "uppercase", + fontSize: "13px", + padding: "16px 24px 14px", + boxSizing: "border-box", + userSelect: "none", + + "&:hover": { + cursor: "pointer", + background: theme.white05 + }, + + "&:focus": { + outline: "none" + } + }, + props => ({ + borderBottom: props.isSelected ? `2px solid ${theme.main}` : "none" + }) +); +TabStyled.displayName = "TabStyled"; + +export class Tab extends React.Component { + render() { + return ( + { + (this.context.tabs.onSelect || (() => {}))(this.props.index); + }} + > + {this.props.children} + + ); + } +} +Tab.contextTypes = { + tabs: PropTypes.object.isRequired +}; + +export const TabPanelStyled = styled("div")({ + width: "100%", + height: "calc(100% - 48px)", + boxSizing: "border-box" +}); +TabPanelStyled.displayName = "TabPanelStyled"; + +export class TabPanel extends React.Component { + render() { + return ( + + {this.props.children({ index: this.context.tabs.selectedIndex })} + + ); + } +} +TabPanel.contextTypes = { + tabs: PropTypes.object.isRequired +}; + +export class Tabs extends React.Component { + getChildContext() { + return { + tabs: { + onSelect: this.props.onSelect, + selectedIndex: this.props.selectedIndex + } + }; + } + + render() { + return {this.props.children}; + } +} + +Tabs.childContextTypes = { + tabs: PropTypes.object +}; diff --git a/src/dev-tools-expanded.js b/src/dev-tools-expanded.js index 149d1ee..7ac8c7b 100644 --- a/src/dev-tools-expanded.js +++ b/src/dev-tools-expanded.js @@ -1,7 +1,7 @@ import React from "react"; import Dock from "react-dock"; import styled from "react-emotion"; -import { Tab, Tabs, TabList, TabPanel } from "react-tabs"; +import { Tab, Tabs, TabList, TabPanel } from "./components/tabs"; import { Subscribe } from "unstated"; import GlobalStateContainer from "./state/global"; import EditorStateContainer from "./state/editor"; @@ -22,60 +22,10 @@ const DockContainer = styled("div")({ overflow: "hidden", background: theme.mainBg, fontFamily: "Helvetica Neue, Calibri Light, Roboto, sans-serif", - fontSize: "13px", - - "& .tabs": { - height: "100%", - width: "100%", - - "& ul": { - margin: 0, - padding: 0 - }, - - "& .tabs__tablist": { - display: "flex", - listStyle: "none", - borderBottom: `1px solid ${theme.main20}` - }, - - "& .tabs_tab-panel--selected": { - height: "100%" - }, - - "& .tabs--selected": { - borderBottom: `2px solid ${theme.main}` - } - } + fontSize: "13px" }); DockContainer.displayName = "DockContainer"; -const TabLabel = styled("div")({ - color: theme.white, - textTransform: "uppercase", - fontSize: "13px", - padding: "16px 24px 14px", - boxSizing: "border-box", - userSelect: "none", - - "&:hover": { - cursor: "pointer", - background: theme.white05 - }, - - "&:focus": { - outline: "none" - } -}); -TabLabel.displayName = "TabLabel"; - -const TabPanelWrapper = styled("div")({ - width: "100%", - height: "calc(100% - 48px)", - boxSizing: "border-box" -}); -TabPanelWrapper.displayName = "TabPanelWrapper"; - const CloseButton = styled("button")({ background: "none", border: "none", @@ -153,62 +103,36 @@ export default function DevToolsExpanded() { )} - - - - State - - - History - - - Plugins - - - Schema - - - Structure - - - Snapshots - + + + + State + History + Plugins + Schema + Structure + Snapshots + - - - - - - - - - - - - - - - - - - - - - - - - - - - - + {({ index }) => { + switch (index) { + case "state": + return ; + case "history": + return ; + case "plugins": + return ; + case "schema": + return ; + case "structure": + return ; + case "snapshots": + return ; + default: + return ; + } + }} diff --git a/src/state/global.js b/src/state/global.js index b818edb..2841fb1 100644 --- a/src/state/global.js +++ b/src/state/global.js @@ -3,7 +3,7 @@ import { Container } from "unstated"; export default class GlobalStateContainer extends Container { state = { opened: false, - tabIndex: 0, + tabIndex: "state", defaultSize: 0.5 };