From 76b88e3d927526df013fcc47af4a7abe5fcadad6 Mon Sep 17 00:00:00 2001 From: Hans Permana Date: Tue, 24 Oct 2017 17:00:56 +0200 Subject: [PATCH] fix #5 while also substituting codemirror with react-ace --- app/package.json | 1 + app/styles.css | 2 +- package.json | 1 + src/renderer/actions.ts | 15 +++ .../panels/ConfigurationEditorPanel.tsx | 96 ++++++++++++------- .../components/tabs/ConfigurationTabs.tsx | 50 ++++------ src/renderer/initialStates.ts | 1 - src/renderer/reducers.ts | 12 +++ src/renderer/state.ts | 5 + 9 files changed, 119 insertions(+), 64 deletions(-) diff --git a/app/package.json b/app/package.json index 44978d1..d7892b1 100644 --- a/app/package.json +++ b/app/package.json @@ -16,6 +16,7 @@ "moment": "~2.17.1", "react-addons-css-transition-group": "~15.4.0", "react": "~15.4.0", + "react-ace": "~5.2.0", "react-codemirror": "~0.3.0", "react-dom": "~15.4.0", "react-redux": "~4.4.5", diff --git a/app/styles.css b/app/styles.css index 238b23b..4cbf47d 100644 --- a/app/styles.css +++ b/app/styles.css @@ -101,7 +101,7 @@ input, button, textarea, :focus { ::-webkit-scrollbar-thumb { -webkit-border-radius: 10px; border-radius: 10px; - background: rgba(52, 104, 122, 0.3); + background: rgba(52, 104, 122, 0.6); -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); } diff --git a/package.json b/package.json index e33b2e1..527d6c6 100644 --- a/package.json +++ b/package.json @@ -68,6 +68,7 @@ "mocha": "~3.1.2", "moment": "~2.17.1", "react": "~15.6.1", + "react-ace": "~5.2.0", "react-addons-css-transition-group": "~15.4.0", "react-addons-test-utils": "~15.4.1", "react-codemirror": "~0.3.0", diff --git a/src/renderer/actions.ts b/src/renderer/actions.ts index 7b85b8b..5c14a58 100644 --- a/src/renderer/actions.ts +++ b/src/renderer/actions.ts @@ -37,6 +37,9 @@ export const APPLY_INITIAL_STATE = 'APPLY_INITIAL_STATE'; export const SET_WEBAPI_STATUS = 'SET_WEBAPI_STATUS'; export const SET_TASK_STATE = 'SET_TASK_STATE'; export const APPLY_INITIAL_SOURCE_FILE_DIRECTORY = 'APPLY_INITIAL_SOURCE_FILE_DIRECTORY'; +export const UPDATE_CHD_TEMP = 'UPDATE_CHD_TEMP'; +export const UPDATE_CNF_TEMP = 'UPDATE_CNF_TEMP'; +export const UPDATE_CST_TEMP = 'UPDATE_CST_TEMP'; const CANCELLED_CODE = 999; const DEFAULT_WORKSPACE_NAME = 'default'; @@ -79,6 +82,18 @@ export function updateSelectedProcesses(processId: number[]) { return {type: UPDATE_SELECTED_PROCESSES, payload: processId}; } +export function updateChdTemp(newChdTemp: ProcessConfigurations){ + return {type: UPDATE_CHD_TEMP, payload: newChdTemp}; +} + +export function updateCnfTemp(newCnfTemp: ProcessConfigurations){ + return {type: UPDATE_CNF_TEMP, payload: newCnfTemp}; +} + +export function updateCstTemp(newCstTemp: ProcessConfigurations){ + return {type: UPDATE_CST_TEMP, payload: newCstTemp}; +} + export function updateUnsavedConfigStatus(status: boolean) { return {type: UPDATE_UNSAVED_CONFIG_STATUS, payload: status}; } diff --git a/src/renderer/components/panels/ConfigurationEditorPanel.tsx b/src/renderer/components/panels/ConfigurationEditorPanel.tsx index 8f7e570..88f63a1 100644 --- a/src/renderer/components/panels/ConfigurationEditorPanel.tsx +++ b/src/renderer/components/panels/ConfigurationEditorPanel.tsx @@ -1,10 +1,20 @@ -import * as React from "react"; -import * as CodeMirror from "react-codemirror"; -import {ConfigurationEditor} from "../ConfigurationEditor"; -import {connect, Dispatch} from "react-redux"; -import {ConfigurationVersion, ProcessConfigurations, State} from "../../state"; -import {updateUnsavedConfigStatus, upgradeConfigurations} from "../../actions"; -import * as selector from "../../selectors"; +import * as React from 'react'; +import {ConfigurationEditor} from '../ConfigurationEditor'; +import {connect, Dispatch} from 'react-redux'; +import {ConfigurationVersion, ProcessConfigurations, State} from '../../state'; +import { + updateChdTemp, + updateCnfTemp, + updateCstTemp, + updateUnsavedConfigStatus, + upgradeConfigurations +} from '../../actions'; +import * as selector from '../../selectors'; +import AceEditor from 'react-ace'; +import 'brace/mode/json'; +import 'brace/snippets/json'; +import 'brace/theme/monokai'; +import 'brace/ext/language_tools'; interface IConfigurationEditorPanelProps { dispatch?: Dispatch; @@ -18,7 +28,7 @@ interface IConfigurationEditorPanelProps { configType: string; } -interface ConfigurationEditorPanelOwnProps { +interface ConfigurationEditorPanelOwnProps { codeEditorActive: boolean; isConfigEditable: boolean; configType: string; @@ -46,15 +56,8 @@ class ConfigurationEditorPanel extends React.Component { - if (!(this.state.configTemp == JSON.parse(newCode))) { - this.props.dispatch(updateUnsavedConfigStatus(true)); + private updateLocalConfigCode = (newCode: string) => { + try { + if (!(this.state.configTemp == JSON.parse(newCode))) { + this.props.dispatch(updateUnsavedConfigStatus(true)); + } + this.setState({ + configTemp: JSON.parse(newCode), + configTempValid: true + }) + } catch (err) { + console.warn('error when parsing json', err); + } + }; + + private updateConfigCode = () => { + if (this.props.configType === 'chd') { + this.props.dispatch(updateChdTemp(this.state.configTemp)); + } else if (this.props.configType === 'cnf') { + this.props.dispatch(updateCnfTemp(this.state.configTemp)); + } else if (this.props.configType === 'cst') { + this.props.dispatch(updateCstTemp(this.state.configTemp)); } - this.setState({ - configTemp: JSON.parse(newCode), - }); }; private static getConfigVersion(config: ProcessConfigurations): number { if (config) { - if ("__metainf__" in config) { - return config["__metainf__"]["version"]; + if ('__metainf__' in config) { + return config['__metainf__']['version']; } else { return CONFIGURATION_VERSION_NOT_FOUND; } @@ -104,16 +122,28 @@ class ConfigurationEditorPanel extends React.Component {this.props.codeEditorActive ? - : ( @@ -121,10 +151,10 @@ class ConfigurationEditorPanel extends React.Component - Version {this.state.configVersion >= 0 ? this.state.configVersion : "N/A"} + Version {this.state.configVersion >= 0 ? this.state.configVersion : 'N/A'} { this.state.configVersion == CONFIGURATION_VERSION_NOT_FOUND || this.state.configVersion < this.props.defaultConfVersion[this.props.configType] diff --git a/src/renderer/components/tabs/ConfigurationTabs.tsx b/src/renderer/components/tabs/ConfigurationTabs.tsx index 018e424..9583f3c 100644 --- a/src/renderer/components/tabs/ConfigurationTabs.tsx +++ b/src/renderer/components/tabs/ConfigurationTabs.tsx @@ -1,22 +1,18 @@ -import * as React from "react"; -import {ProcessConfigurations, State} from "../../state"; -import {Tab2, Tabs2} from "@blueprintjs/core"; -import "codemirror/mode/javascript/javascript"; -import {connect, Dispatch} from "react-redux"; +import * as React from 'react'; +import {ProcessConfigurations, State} from '../../state'; +import {Tab2, Tabs2} from '@blueprintjs/core'; +import {connect, Dispatch} from 'react-redux'; +import * as selector from '../../selectors'; import { saveConfiguration, updateConfigEditorMode, updateConfigurationTab, updateUnsavedConfigStatus -} from "../../actions"; -import * as selector from "../../selectors"; -import ConfigurationEditorPanel from "../panels/ConfigurationEditorPanel"; +} from '../../actions'; +import ConfigurationEditorPanel from '../panels/ConfigurationEditorPanel'; interface IConfigurationTabsProps { dispatch?: Dispatch; - chd?: ProcessConfigurations; - cnf?: ProcessConfigurations; - cst?: ProcessConfigurations; codeEditorActive?: boolean; selectedConfigurationName?: string; currentTab?: number; @@ -24,6 +20,12 @@ interface IConfigurationTabsProps { isCnfEditable?: boolean; isChdEditable?: boolean; isCstEditable?: boolean; + chd?: ProcessConfigurations; + cnf?: ProcessConfigurations; + cst?: ProcessConfigurations; + chdTemp: ProcessConfigurations; + cnfTemp: ProcessConfigurations; + cstTemp: ProcessConfigurations; } function mapStateToProps(state: State): IConfigurationTabsProps { @@ -38,6 +40,9 @@ function mapStateToProps(state: State): IConfigurationTabsProps { isCnfEditable: state.control.isCnfEditable, isChdEditable: state.control.isChdEditable, isCstEditable: state.control.isCstEditable, + chdTemp: state.control.chdTemp, + cnfTemp: state.control.cnfTemp, + cstTemp: state.control.cstTemp } } @@ -47,20 +52,6 @@ class ConfigurationTabs extends React.Component { this.handleChangeMode = this.handleChangeMode.bind(this); this.handleSaveConfig = this.handleSaveConfig.bind(this); this.handleChangeTab = this.handleChangeTab.bind(this); - - this.state = { - chdTemp: this.props.chd, - cnfTemp: this.props.cnf, - cstTemp: this.props.cst - }; - } - - componentWillReceiveProps(nextProps) { - this.setState({ - chdTemp: nextProps.chd, - cnfTemp: nextProps.cnf, - cstTemp: nextProps.cst - }); } private handleChangeMode() { @@ -68,10 +59,11 @@ class ConfigurationTabs extends React.Component { } private handleSaveConfig = () => { - const chd = this.state.chdTemp; - const cnf = this.state.cnfTemp; - const cst = this.state.cstTemp; - this.props.dispatch(saveConfiguration(this.props.selectedConfigurationName, chd, cnf, cst)); + this.props.dispatch(saveConfiguration( + this.props.selectedConfigurationName, + this.props.chdTemp ? this.props.chdTemp : this.props.chd, + this.props.cnfTemp ? this.props.cnfTemp : this.props.cnf, + this.props.cstTemp ? this.props.cstTemp : this.props.cst)); this.props.dispatch(updateUnsavedConfigStatus(false)); }; diff --git a/src/renderer/initialStates.ts b/src/renderer/initialStates.ts index 466080b..07a8ea7 100644 --- a/src/renderer/initialStates.ts +++ b/src/renderer/initialStates.ts @@ -18,7 +18,6 @@ export const initialControlState: ControlState = { isChdEditable: false, isCstEditable: false, isOfflineMode: false - }; export const initialDataState: DataState = { diff --git a/src/renderer/reducers.ts b/src/renderer/reducers.ts index c771691..daccb34 100644 --- a/src/renderer/reducers.ts +++ b/src/renderer/reducers.ts @@ -334,6 +334,18 @@ const controlReducer = (state: ControlState = initialControlState, action) => { selectedConfigurationName: action.payload, unsavedConfigChanges: false }); + case actions.UPDATE_CHD_TEMP: + return Object.assign({}, state, { + chdTemp: action.payload + }); + case actions.UPDATE_CNF_TEMP: + return Object.assign({}, state, { + cnfTemp: action.payload + }); + case actions.UPDATE_CST_TEMP: + return Object.assign({}, state, { + cstTemp: action.payload + }); case actions.SELECT_SOURCE_FILE: return Object.assign({}, state, { selectedSourceFileName: action.payload diff --git a/src/renderer/state.ts b/src/renderer/state.ts index 74b065d..517f9cd 100644 --- a/src/renderer/state.ts +++ b/src/renderer/state.ts @@ -58,6 +58,11 @@ export interface ControlState { cnfDescriptor?: ConfigurationDescriptor; chdDescriptor?: ConfigurationDescriptor; cstDescriptor?: ConfigurationDescriptor; + + // temporary (unsaved) configurations + cnfTemp?: ProcessConfigurations; + chdTemp?: ProcessConfigurations; + cstTemp?: ProcessConfigurations; } export interface SessionState {