From f8c10cddf252439d984bfc400bcf29802801b674 Mon Sep 17 00:00:00 2001 From: remo5000 Date: Thu, 24 May 2018 13:11:48 +0800 Subject: [PATCH 01/10] Make editor parent Resizable --- package.json | 1 + src/components/IDE/index.tsx | 17 +++++++++++++---- src/styles/_ide.scss | 13 +++++++++++-- yarn.lock | 4 ++++ 4 files changed, 29 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 1b82ed8a72..c48ac76079 100644 --- a/package.json +++ b/package.json @@ -72,6 +72,7 @@ "enzyme-adapter-react-16": "^1.1.1", "husky": "^1.0.0-rc.6", "prettier": "^1.12.0", + "re-resizable": "^4.4.8", "react-scripts-ts": "^2.15.1", "react-test-renderer": "^16.3.1", "typescript": "^2.8.1" diff --git a/src/components/IDE/index.tsx b/src/components/IDE/index.tsx index 4d0bea0d93..37132bf53e 100644 --- a/src/components/IDE/index.tsx +++ b/src/components/IDE/index.tsx @@ -1,15 +1,24 @@ import * as React from 'react' +import Resizable from 're-resizable' + import EditorContainer from '../../containers/IDE/EditorContainer' import ReplContainer from '../../containers/IDE/ReplContainer' const IDE: React.SFC<{}> = () => (
-
- -
-
+ +
+ +
+ +
diff --git a/src/styles/_ide.scss b/src/styles/_ide.scss index b359d6a147..8af1d8e807 100644 --- a/src/styles/_ide.scss +++ b/src/styles/_ide.scss @@ -9,8 +9,17 @@ .ide-content-parent { height: 85vh; - > div { - height: inherit; // Fix for Firefox not autoscrolling when repl overflows + display: flex; + flex-direction: row; + overflow: hidden; + // > div { + // height: inherit; // Fix for Firefox not autoscrolling when repl overflows + // } + .editor-parent { + height: 100%; + } + .repl-parent { + flex: 1 1; } } diff --git a/yarn.lock b/yarn.lock index 98ff675ca8..5e08f244dc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6327,6 +6327,10 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.1.7: minimist "^1.2.0" strip-json-comments "~2.0.1" +re-resizable@^4.4.8: + version "4.4.8" + resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-4.4.8.tgz#1c7eedfd9b9ed1f83b3adfa7a97cda76881e4e57" + react-ace@^6.1.1: version "6.1.1" resolved "https://registry.yarnpkg.com/react-ace/-/react-ace-6.1.1.tgz#c8339b4f0a27401bff53f477f125d3d7eac2a090" From d84a998c4623e496a1757a505922a652a094469a Mon Sep 17 00:00:00 2001 From: remo5000 Date: Thu, 24 May 2018 13:20:32 +0800 Subject: [PATCH 02/10] Fix repl input being hidden This probably caused by not using `col-number-xs` for the repl-parent anymore, due to the resizing. --- src/styles/_ide.scss | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/styles/_ide.scss b/src/styles/_ide.scss index 8af1d8e807..c11d92799d 100644 --- a/src/styles/_ide.scss +++ b/src/styles/_ide.scss @@ -40,9 +40,13 @@ .Repl { height: 100%; - + display: flex; + flex-direction: column; + .repl-control-parent { + flex: initial; + } .repl-output-parent { - height: 100%; + flex: 1 1; margin-top: 0.3rem; overflow-y: auto; } From f05092311a8b05ca659410b58cbde78687ed74f8 Mon Sep 17 00:00:00 2001 From: remo5000 Date: Thu, 24 May 2018 13:26:34 +0800 Subject: [PATCH 03/10] Align REPL input with editor bottom --- src/styles/_ide.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/styles/_ide.scss b/src/styles/_ide.scss index c11d92799d..332cc0275c 100644 --- a/src/styles/_ide.scss +++ b/src/styles/_ide.scss @@ -68,7 +68,8 @@ } .repl-react-ace { - margin: 0.5rem; + margin-left: 0.5rem; + margin-right: 0.5rem; margin-top: 0rem; } } From 9e25f0c8327bf1e7028b737b25e0891e61b3a4be Mon Sep 17 00:00:00 2001 From: remo5000 Date: Thu, 24 May 2018 13:31:16 +0800 Subject: [PATCH 04/10] Re-add fix for Firefox --- src/components/IDE/index.tsx | 5 ++--- src/styles/_ide.scss | 7 ++----- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/src/components/IDE/index.tsx b/src/components/IDE/index.tsx index 37132bf53e..1dd692ca54 100644 --- a/src/components/IDE/index.tsx +++ b/src/components/IDE/index.tsx @@ -9,14 +9,13 @@ const IDE: React.SFC<{}> = () => (
-
- -
+
diff --git a/src/styles/_ide.scss b/src/styles/_ide.scss index 332cc0275c..3299580e21 100644 --- a/src/styles/_ide.scss +++ b/src/styles/_ide.scss @@ -12,11 +12,8 @@ display: flex; flex-direction: row; overflow: hidden; - // > div { - // height: inherit; // Fix for Firefox not autoscrolling when repl overflows - // } - .editor-parent { - height: 100%; + > div { + height: inherit; // Fix for Firefox not autoscrolling when repl overflows } .repl-parent { flex: 1 1; From 3f0219435a729ddfccb9e46b9058bce622a0707e Mon Sep 17 00:00:00 2001 From: remo5000 Date: Thu, 24 May 2018 14:35:44 +0800 Subject: [PATCH 05/10] Disable resize for directions other than right --- src/components/IDE/index.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/components/IDE/index.tsx b/src/components/IDE/index.tsx index 1dd692ca54..f390068616 100644 --- a/src/components/IDE/index.tsx +++ b/src/components/IDE/index.tsx @@ -14,6 +14,16 @@ const IDE: React.SFC<{}> = () => ( width: '50%', height: '100%' }} + enable={{ + top: false, + right: true, + bottom: false, + left: false, + topRight: false, + bottomRight: false, + bottomLeft: false, + topLeft: false + }} > From 560e73538e1bdc834e3537fc4046af1c6e2481e3 Mon Sep 17 00:00:00 2001 From: remo5000 Date: Thu, 24 May 2018 17:00:31 +0800 Subject: [PATCH 06/10] Add persistent state for resizable editor width Note that handleEditorChange has been modified to handleEditorValueChange, to be clearer when comapring to handleEditorWidthChange. --- src/actions/actionTypes.ts | 1 + src/actions/playground.ts | 5 ++++ src/components/IDE/Editor.tsx | 28 ++++++++++++++++--- src/components/IDE/__tests__/Editor.tsx | 4 ++- .../__tests__/__snapshots__/Editor.tsx.snap | 6 ++-- src/components/IDE/index.tsx | 22 ++------------- src/containers/IDE/EditorContainer.ts | 13 +++++---- src/reducers/playground.ts | 6 ++++ src/reducers/states.ts | 2 ++ 9 files changed, 54 insertions(+), 33 deletions(-) diff --git a/src/actions/actionTypes.ts b/src/actions/actionTypes.ts index 536d1fdee9..6be277f747 100644 --- a/src/actions/actionTypes.ts +++ b/src/actions/actionTypes.ts @@ -7,6 +7,7 @@ export interface IAction extends ReduxAction { /** Playground */ export const UPDATE_EDITOR_VALUE = 'UPDATE_EDITOR_VALUE' export const UPDATE_REPL_VALUE = 'UPDATE_REPL_VALUE' +export const CHANGE_EDITOR_WIDTH = 'CHANGE_EDITOR_WIDTH' export const EVAL_EDITOR = 'EVAL_EDITOR' export const EVAL_REPL = 'EVAL_REPL' export const CLEAR_REPL_INPUT = 'CLEAR_REPL_INPUT' diff --git a/src/actions/playground.ts b/src/actions/playground.ts index c900fe6437..01a641a3c5 100644 --- a/src/actions/playground.ts +++ b/src/actions/playground.ts @@ -6,6 +6,11 @@ export const updateEditorValue: ActionCreator = (newEditorV payload: newEditorValue }) +export const updateEditorWidth: ActionCreator = (widthChange: number) => ({ + type: actionTypes.CHANGE_EDITOR_WIDTH, + payload: widthChange +}) + export const updateReplValue: ActionCreator = (newReplValue: string) => ({ type: actionTypes.UPDATE_REPL_VALUE, payload: newReplValue diff --git a/src/components/IDE/Editor.tsx b/src/components/IDE/Editor.tsx index ac045e5767..c6dd33433b 100644 --- a/src/components/IDE/Editor.tsx +++ b/src/components/IDE/Editor.tsx @@ -1,5 +1,6 @@ import * as React from 'react' +import Resizable from 're-resizable' import AceEditor from 'react-ace' import { Button, IconName, Intent } from '@blueprintjs/core' @@ -16,7 +17,9 @@ import 'brace/theme/cobalt' */ export interface IEditorProps { editorValue: string - handleEditorChange: (newCode: string) => void + editorWidth: number + handleEditorValueChange: (newCode: string) => void + handleEditorWidthChange: (widthChange: number) => void handleEvalEditor: () => void } @@ -40,7 +43,24 @@ class Editor extends React.Component { ) const runButton = genericButton('', 'play', this.props.handleEvalEditor) return ( -
+ { + this.props.handleEditorWidthChange(d.width) + }} + enable={{ + top: false, + right: true, + bottom: false, + left: false, + topRight: false, + bottomRight: false, + bottomLeft: false, + topLeft: false + }} + >
{runButton}
@@ -50,14 +70,14 @@ class Editor extends React.Component { mode="javascript" theme="cobalt" value={this.props.editorValue} - onChange={this.props.handleEditorChange} + onChange={this.props.handleEditorValueChange} width="100%" height="100%" fontSize={14} highlightActiveLine={false} />
-
+ ) } } diff --git a/src/components/IDE/__tests__/Editor.tsx b/src/components/IDE/__tests__/Editor.tsx index f37263fc91..be2146b84f 100644 --- a/src/components/IDE/__tests__/Editor.tsx +++ b/src/components/IDE/__tests__/Editor.tsx @@ -7,7 +7,9 @@ import Editor, { IEditorProps } from '../Editor' test('Editor renders correctly', () => { const props: IEditorProps = { editorValue: '', - handleEditorChange: newCode => {}, + editorWidth: 500, + handleEditorWidthChange: widthChange => {}, + handleEditorValueChange: newCode => {}, handleEvalEditor: () => {} } const app = diff --git a/src/components/IDE/__tests__/__snapshots__/Editor.tsx.snap b/src/components/IDE/__tests__/__snapshots__/Editor.tsx.snap index e15e89feb2..d5ddda7b07 100644 --- a/src/components/IDE/__tests__/__snapshots__/Editor.tsx.snap +++ b/src/components/IDE/__tests__/__snapshots__/Editor.tsx.snap @@ -1,14 +1,14 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Editor renders correctly 1`] = ` -"
+"
- +
-
" +" `; diff --git a/src/components/IDE/index.tsx b/src/components/IDE/index.tsx index f390068616..452ae24320 100644 --- a/src/components/IDE/index.tsx +++ b/src/components/IDE/index.tsx @@ -1,32 +1,14 @@ import * as React from 'react' -import Resizable from 're-resizable' - import EditorContainer from '../../containers/IDE/EditorContainer' import ReplContainer from '../../containers/IDE/ReplContainer' const IDE: React.SFC<{}> = () => (
- +
- +
diff --git a/src/containers/IDE/EditorContainer.ts b/src/containers/IDE/EditorContainer.ts index 0c82d716c1..10ce79e78a 100644 --- a/src/containers/IDE/EditorContainer.ts +++ b/src/containers/IDE/EditorContainer.ts @@ -1,12 +1,13 @@ import { connect, MapDispatchToProps, MapStateToProps } from 'react-redux' import { bindActionCreators, Dispatch } from 'redux' -import { evalEditor, updateEditorValue } from '../../actions/playground' +import { evalEditor, updateEditorValue, updateEditorWidth } from '../../actions/playground' import Editor, { IEditorProps } from '../../components/IDE/Editor' import { IState } from '../../reducers/states' -type StateProps = Pick -type DispatchProps = Pick & +type StateProps = Pick & Pick +type DispatchProps = Pick & + Pick & Pick /** Provides the editorValue of the `IPlaygroundState` of the `IState` as a @@ -14,14 +15,16 @@ type DispatchProps = Pick & */ const mapStateToProps: MapStateToProps = state => { return { - editorValue: state.playground.editorValue + editorValue: state.playground.editorValue, + editorWidth: state.playground.editorWidth } } const mapDispatchToProps: MapDispatchToProps = (dispatch: Dispatch) => bindActionCreators( { - handleEditorChange: updateEditorValue, + handleEditorValueChange: updateEditorValue, + handleEditorWidthChange: updateEditorWidth, handleEvalEditor: evalEditor }, dispatch diff --git a/src/reducers/playground.ts b/src/reducers/playground.ts index c42e4a45ab..eb5bcfc2ec 100644 --- a/src/reducers/playground.ts +++ b/src/reducers/playground.ts @@ -1,5 +1,6 @@ import { Reducer } from 'redux' import { + CHANGE_EDITOR_WIDTH, CLEAR_CONTEXT, CLEAR_REPL_INPUT, CLEAR_REPL_OUTPUT, @@ -28,6 +29,11 @@ export const reducer: Reducer = (state = defaultPlayground, ac ...state, replValue: action.payload } + case CHANGE_EDITOR_WIDTH: + return { + ...state, + editorWidth: action.payload + state.editorWidth + } case CLEAR_REPL_INPUT: return { ...state, diff --git a/src/reducers/states.ts b/src/reducers/states.ts index 435cf2f790..1e4766f6d6 100644 --- a/src/reducers/states.ts +++ b/src/reducers/states.ts @@ -13,6 +13,7 @@ export interface IApplicationState { export interface IPlaygroundState { readonly editorValue: string + readonly editorWidth: number readonly replValue: string readonly context: Context readonly output: InterpreterOutput[] @@ -88,6 +89,7 @@ export const defaultApplication: IApplicationState = { export const defaultPlayground: IPlaygroundState = { editorValue: '', + editorWidth: 500, replValue: '', context: createContext(), output: [] From ebf1adfe4165c78856ccf7fd82e4d66a81a8a3c6 Mon Sep 17 00:00:00 2001 From: ning Date: Thu, 24 May 2018 17:59:29 +0800 Subject: [PATCH 07/10] Put eval, clear buttons in control group --- src/components/IDE/ReplControl.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/IDE/ReplControl.tsx b/src/components/IDE/ReplControl.tsx index 186a18072a..0c2c3224a7 100644 --- a/src/components/IDE/ReplControl.tsx +++ b/src/components/IDE/ReplControl.tsx @@ -33,8 +33,10 @@ class ReplControl extends React.Component { const clearButton = genericButton('', 'remove', this.props.handleClearReplOutput) return (
-
{evalButton}
-
{clearButton}
+
+ {evalButton} + {clearButton} +
) } From 4f75ca2ab2b4d9c1e9c94dc7fc24a5ee74948af1 Mon Sep 17 00:00:00 2001 From: remo5000 Date: Thu, 24 May 2018 20:06:14 +0800 Subject: [PATCH 08/10] Fix repl output not wrapping --- src/components/IDE/Repl.tsx | 16 ++++++++-------- src/components/IDE/ReplControl.tsx | 4 ++-- .../IDE/__tests__/__snapshots__/Repl.tsx.snap | 4 ++-- src/styles/_ide.scss | 4 ++-- 4 files changed, 14 insertions(+), 14 deletions(-) diff --git a/src/components/IDE/Repl.tsx b/src/components/IDE/Repl.tsx index 82f7368afa..deb189cc5e 100644 --- a/src/components/IDE/Repl.tsx +++ b/src/components/IDE/Repl.tsx @@ -36,28 +36,28 @@ export const Output: React.SFC = props => { case 'code': return ( - {props.output.value} + 
{props.output.value}
 ) case 'running': return ( - {props.output.consoleLogs.join('\n')} + 
{props.output.consoleLogs.join('\n')}
 ) case 'result': if (props.output.consoleLogs.length === 0) { return ( - {toString(props.output.value)} + 
{toString(props.output.value)}
 ) } else { return ( - + 
               {[props.output.consoleLogs.join('\n'), toString(props.output.value)].join('\n')}
-            
+
) } @@ -65,15 +65,15 @@ export const Output: React.SFC = props => { if (props.output.consoleLogs.length === 0) { return ( - {parseError(props.output.errors)} + 
{parseError(props.output.errors)}
 ) } else { return ( - + 
               {[props.output.consoleLogs.join('\n'), parseError(props.output.errors)].join('\n')}
-            
+
) } diff --git a/src/components/IDE/ReplControl.tsx b/src/components/IDE/ReplControl.tsx index 0c2c3224a7..27e8ce7792 100644 --- a/src/components/IDE/ReplControl.tsx +++ b/src/components/IDE/ReplControl.tsx @@ -34,8 +34,8 @@ class ReplControl extends React.Component { return (
- {evalButton} - {clearButton} + {evalButton} + {clearButton}
) diff --git a/src/components/IDE/__tests__/__snapshots__/Repl.tsx.snap b/src/components/IDE/__tests__/__snapshots__/Repl.tsx.snap index e9d5ab22a9..23c85f9d37 100644 --- a/src/components/IDE/__tests__/__snapshots__/Repl.tsx.snap +++ b/src/components/IDE/__tests__/__snapshots__/Repl.tsx.snap @@ -2,9 +2,9 @@ exports[`Output renders correctly for InterpreterOutput.type === 'result' 1`] = ` " - + 
     "def"
-  
+
" `; diff --git a/src/styles/_ide.scss b/src/styles/_ide.scss index 3299580e21..4f1609ab98 100644 --- a/src/styles/_ide.scss +++ b/src/styles/_ide.scss @@ -55,12 +55,12 @@ margin: 0.5rem; margin-top: 0rem; - code { + pre { background-color: transparent; box-shadow: none; color: inherit; padding: 0px; - white-space: pre; + white-space: pre-wrap; } } From d9cfa25d7f71d6ce1f278a0a512a33d994b8f2b5 Mon Sep 17 00:00:00 2001 From: remo5000 Date: Fri, 25 May 2018 11:00:01 +0800 Subject: [PATCH 09/10] Make IDE component contain Resizable Note that this make the IDE/index component stateful, handling the editor width. --- src/components/IDE/Editor.tsx | 24 +-------- src/components/IDE/__tests__/Editor.tsx | 2 - .../__tests__/__snapshots__/Editor.tsx.snap | 4 +- src/components/IDE/index.tsx | 50 +++++++++++++++---- src/components/Playground.tsx | 4 +- .../__snapshots__/Playground.tsx.snap | 2 +- src/containers/IDE/EditorContainer.ts | 9 ++-- src/containers/IDE/index.ts | 28 +++++++++++ 8 files changed, 77 insertions(+), 46 deletions(-) create mode 100644 src/containers/IDE/index.ts diff --git a/src/components/IDE/Editor.tsx b/src/components/IDE/Editor.tsx index c6dd33433b..68f1536ddb 100644 --- a/src/components/IDE/Editor.tsx +++ b/src/components/IDE/Editor.tsx @@ -1,6 +1,5 @@ import * as React from 'react' -import Resizable from 're-resizable' import AceEditor from 'react-ace' import { Button, IconName, Intent } from '@blueprintjs/core' @@ -17,9 +16,7 @@ import 'brace/theme/cobalt' */ export interface IEditorProps { editorValue: string - editorWidth: number handleEditorValueChange: (newCode: string) => void - handleEditorWidthChange: (widthChange: number) => void handleEvalEditor: () => void } @@ -43,24 +40,7 @@ class Editor extends React.Component { ) const runButton = genericButton('', 'play', this.props.handleEvalEditor) return ( - { - this.props.handleEditorWidthChange(d.width) - }} - enable={{ - top: false, - right: true, - bottom: false, - left: false, - topRight: false, - bottomRight: false, - bottomLeft: false, - topLeft: false - }} - > +
{runButton}
@@ -77,7 +57,7 @@ class Editor extends React.Component { highlightActiveLine={false} />
- +
) } } diff --git a/src/components/IDE/__tests__/Editor.tsx b/src/components/IDE/__tests__/Editor.tsx index be2146b84f..f62ffa92e2 100644 --- a/src/components/IDE/__tests__/Editor.tsx +++ b/src/components/IDE/__tests__/Editor.tsx @@ -7,8 +7,6 @@ import Editor, { IEditorProps } from '../Editor' test('Editor renders correctly', () => { const props: IEditorProps = { editorValue: '', - editorWidth: 500, - handleEditorWidthChange: widthChange => {}, handleEditorValueChange: newCode => {}, handleEvalEditor: () => {} } diff --git a/src/components/IDE/__tests__/__snapshots__/Editor.tsx.snap b/src/components/IDE/__tests__/__snapshots__/Editor.tsx.snap index d5ddda7b07..472e0c25b6 100644 --- a/src/components/IDE/__tests__/__snapshots__/Editor.tsx.snap +++ b/src/components/IDE/__tests__/__snapshots__/Editor.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Editor renders correctly 1`] = ` -" +"
@@ -10,5 +10,5 @@ exports[`Editor renders correctly 1`] = `
-" +
" `; diff --git a/src/components/IDE/index.tsx b/src/components/IDE/index.tsx index 452ae24320..7fd4f98fe6 100644 --- a/src/components/IDE/index.tsx +++ b/src/components/IDE/index.tsx @@ -1,19 +1,47 @@ import * as React from 'react' +import Resizable from 're-resizable' + import EditorContainer from '../../containers/IDE/EditorContainer' import ReplContainer from '../../containers/IDE/ReplContainer' -const IDE: React.SFC<{}> = () => ( -
-
-
- -
-
- +export interface IIDEProps { + editorWidth: number + handleEditorWidthChange: (widthChange: number) => void +} + +class IDE extends React.Component { + public render() { + return ( +
+
+ { + this.props.handleEditorWidthChange(d.width) + }} + enable={{ + top: false, + right: true, + bottom: false, + left: false, + topRight: false, + bottomRight: false, + bottomLeft: false, + topLeft: false + }} + > + + +
+ +
+
-
-
-) + ) + } +} export default IDE diff --git a/src/components/Playground.tsx b/src/components/Playground.tsx index c28b75fcbc..9039f03c16 100644 --- a/src/components/Playground.tsx +++ b/src/components/Playground.tsx @@ -1,11 +1,11 @@ import * as React from 'react' -import IDE from './IDE' +import IDEContainer from '../containers/IDE' const Playground: React.SFC<{}> = () => { return (
- +
) } diff --git a/src/components/__tests__/__snapshots__/Playground.tsx.snap b/src/components/__tests__/__snapshots__/Playground.tsx.snap index 47248e71b7..b556242863 100644 --- a/src/components/__tests__/__snapshots__/Playground.tsx.snap +++ b/src/components/__tests__/__snapshots__/Playground.tsx.snap @@ -2,6 +2,6 @@ exports[`Playground renders correctly 1`] = ` "
- +
" `; diff --git a/src/containers/IDE/EditorContainer.ts b/src/containers/IDE/EditorContainer.ts index 10ce79e78a..c191680673 100644 --- a/src/containers/IDE/EditorContainer.ts +++ b/src/containers/IDE/EditorContainer.ts @@ -1,13 +1,12 @@ import { connect, MapDispatchToProps, MapStateToProps } from 'react-redux' import { bindActionCreators, Dispatch } from 'redux' -import { evalEditor, updateEditorValue, updateEditorWidth } from '../../actions/playground' +import { evalEditor, updateEditorValue } from '../../actions/playground' import Editor, { IEditorProps } from '../../components/IDE/Editor' import { IState } from '../../reducers/states' -type StateProps = Pick & Pick +type StateProps = Pick type DispatchProps = Pick & - Pick & Pick /** Provides the editorValue of the `IPlaygroundState` of the `IState` as a @@ -15,8 +14,7 @@ type DispatchProps = Pick & */ const mapStateToProps: MapStateToProps = state => { return { - editorValue: state.playground.editorValue, - editorWidth: state.playground.editorWidth + editorValue: state.playground.editorValue } } @@ -24,7 +22,6 @@ const mapDispatchToProps: MapDispatchToProps = (dispatch: Dis bindActionCreators( { handleEditorValueChange: updateEditorValue, - handleEditorWidthChange: updateEditorWidth, handleEvalEditor: evalEditor }, dispatch diff --git a/src/containers/IDE/index.ts b/src/containers/IDE/index.ts new file mode 100644 index 0000000000..f89e4b8926 --- /dev/null +++ b/src/containers/IDE/index.ts @@ -0,0 +1,28 @@ +import { connect, MapDispatchToProps, MapStateToProps } from 'react-redux' +import { bindActionCreators, Dispatch } from 'redux' + +import { updateEditorWidth } from '../../actions/playground' +import IDE, { IIDEProps } from '../../components/IDE/' +import { IState } from '../../reducers/states' + +type StateProps = Pick +type DispatchProps = Pick + +/** Provides the editorValue of the `IPlaygroundState` of the `IState` as a + * `StateProps` to the Playground component + */ +const mapStateToProps: MapStateToProps = state => { + return { + editorWidth: state.playground.editorWidth + } +} + +const mapDispatchToProps: MapDispatchToProps = (dispatch: Dispatch) => + bindActionCreators( + { + handleEditorWidthChange: updateEditorWidth + }, + dispatch + ) + +export default connect(mapStateToProps, mapDispatchToProps)(IDE) From 6d3fd126f3054b2ef98a9265f818e7040eb51d3c Mon Sep 17 00:00:00 2001 From: remo5000 Date: Fri, 25 May 2018 12:48:34 +0800 Subject: [PATCH 10/10] Change editorWidth to percentage This means that the change in width (in pixels) would need to be converted to a percentage change (in the component) and the string must be converted, added to the percentage change, then parsed again. A possble optimization is keeping the number as a float (which would involve one parse when passing it as a prop). However, I find it semantically cleaner to keep the `editorWidth` as a string that expresses a percentage, as compared to an `editorWidthPercentage` that holds a number. --- src/actions/playground.ts | 2 +- src/components/IDE/index.tsx | 6 +++--- src/reducers/playground.ts | 2 +- src/reducers/states.ts | 4 ++-- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/actions/playground.ts b/src/actions/playground.ts index 01a641a3c5..1952da0e16 100644 --- a/src/actions/playground.ts +++ b/src/actions/playground.ts @@ -6,7 +6,7 @@ export const updateEditorValue: ActionCreator = (newEditorV payload: newEditorValue }) -export const updateEditorWidth: ActionCreator = (widthChange: number) => ({ +export const updateEditorWidth: ActionCreator = (widthChange: string) => ({ type: actionTypes.CHANGE_EDITOR_WIDTH, payload: widthChange }) diff --git a/src/components/IDE/index.tsx b/src/components/IDE/index.tsx index 7fd4f98fe6..c817905779 100644 --- a/src/components/IDE/index.tsx +++ b/src/components/IDE/index.tsx @@ -6,8 +6,8 @@ import EditorContainer from '../../containers/IDE/EditorContainer' import ReplContainer from '../../containers/IDE/ReplContainer' export interface IIDEProps { - editorWidth: number - handleEditorWidthChange: (widthChange: number) => void + editorWidth: string + handleEditorWidthChange: (widthChange: number) => void // TODO } class IDE extends React.Component { @@ -20,7 +20,7 @@ class IDE extends React.Component { size={{ width: this.props.editorWidth, height: '100%' }} // tslint:disable-next-line jsx-no-lambda onResizeStop={(e, direction, ref, d) => { - this.props.handleEditorWidthChange(d.width) + this.props.handleEditorWidthChange(d.width * 100 / window.innerWidth) }} enable={{ top: false, diff --git a/src/reducers/playground.ts b/src/reducers/playground.ts index eb5bcfc2ec..09eaef2443 100644 --- a/src/reducers/playground.ts +++ b/src/reducers/playground.ts @@ -32,7 +32,7 @@ export const reducer: Reducer = (state = defaultPlayground, ac case CHANGE_EDITOR_WIDTH: return { ...state, - editorWidth: action.payload + state.editorWidth + editorWidth: (parseFloat(state.editorWidth.slice(0, -1)) + action.payload).toString() + '%' } case CLEAR_REPL_INPUT: return { diff --git a/src/reducers/states.ts b/src/reducers/states.ts index 1e4766f6d6..a449dc7bb9 100644 --- a/src/reducers/states.ts +++ b/src/reducers/states.ts @@ -13,7 +13,7 @@ export interface IApplicationState { export interface IPlaygroundState { readonly editorValue: string - readonly editorWidth: number + readonly editorWidth: string readonly replValue: string readonly context: Context readonly output: InterpreterOutput[] @@ -89,7 +89,7 @@ export const defaultApplication: IApplicationState = { export const defaultPlayground: IPlaygroundState = { editorValue: '', - editorWidth: 500, + editorWidth: '50%', replValue: '', context: createContext(), output: []