From a056be741bd043c1ecc1748a616caa9eea91e63e Mon Sep 17 00:00:00 2001 From: Stefanie Doll Date: Tue, 19 Feb 2019 10:49:37 +0100 Subject: [PATCH] Save code snippets to local storage (#718) * Fine tuning examples * WIP First proposal to save snippets * Don't add code wrapping multiple times * Smaller adjustments * Fix 'reset selected on load' bug * Reverted Button size type declaration change, doesn\t belong in this PR * Wrapper formatting * Save button style * removed constructor from editor * fix metadata example * Added constants file * Moved local storage popup to separate component * Remove functionality WIP * upgraded yarn lock * Moved Local storage to separate component, fixed lyfecycle methods, moved props.childre to render in HOC * Changed simplyfied examples for debugging back to original * Cleanup leftover comments * More leftover comments cleanup * More cleanup * Moved makeWrapper back to seperate component * Add code wrapper for default examples in constructor to prevent lifecycle update bugs * Make onBlur optional * Updated yarn.lock * FIXME comment for ui-app Button bug inside * translation and removed empty classname --- packages/app-js/src/Editor.tsx | 55 +- packages/app-js/src/LocalStorage.tsx | 109 ++++ packages/app-js/src/constants.tsx | 10 + packages/app-js/src/index.css | 10 + packages/app-js/src/index.tsx | 127 ++++- packages/app-js/src/snippets/rpc-examples.ts | 11 +- .../app-js/src/snippets/storage-examples.ts | 3 +- packages/app-js/src/snippets/wrapping.ts | 6 +- packages/app-js/src/types.ts | 3 +- packages/ui-app/src/Input.tsx | 1 + packages/ui-app/src/styles/semantic.css | 2 +- yarn.lock | 527 ++++++++++-------- 12 files changed, 543 insertions(+), 321 deletions(-) create mode 100644 packages/app-js/src/LocalStorage.tsx create mode 100644 packages/app-js/src/constants.tsx diff --git a/packages/app-js/src/Editor.tsx b/packages/app-js/src/Editor.tsx index 3da090e4a0..06c792516a 100644 --- a/packages/app-js/src/Editor.tsx +++ b/packages/app-js/src/Editor.tsx @@ -7,73 +7,42 @@ import { BareProps } from '@polkadot/ui-app/types'; import React from 'react'; import CodeFlask from 'codeflask'; -import makeWrapper from './snippets/wrapping'; - type Props = BareProps & { - children?: React.ReactNode, isDevelopment: boolean, code: string, - onEdit: (code: string) => void, - snippet: string + onEdit: (code: string) => void }; -type State = { - snippet: string -}; - -export default class Editor extends React.PureComponent { +export default class Editor extends React.Component { private id: string = `flask-${Date.now()}`; private editor: any; - state: State = { - snippet: '' - }; - - constructor (props: Props) { - super(props); - - this.id = `flask-${Date.now()}`; - } - componentDidMount () { + const { onEdit } = this.props; + this.editor = new CodeFlask(`#${this.id}`, { language: 'js', lineNumbers: true }); - const { editor, props: { code, onEdit } } = this; - - editor.onUpdate((code: string) => { - onEdit(code); - }); - - editor.editorRoot.addEventListener('focusin', () => { + this.editor.editorRoot.addEventListener('keydown', () => { this.editor.onUpdate(onEdit); }); + } - onEdit(code); + shouldComponentUpdate (nextProps: Props): boolean { + return ( + nextProps.code !== this.props.code + ); } componentDidUpdate () { - const { code, isDevelopment, onEdit, snippet } = this.props; - - if (snippet !== this.state.snippet) { - onEdit(code); - - this.editor.updateCode(`${makeWrapper(isDevelopment)}${code}`); - this.setState({ snippet }); - } + this.editor.updateCode(this.props.code); } render () { return ( -
-
- {this.props.children} -
+
); } } diff --git a/packages/app-js/src/LocalStorage.tsx b/packages/app-js/src/LocalStorage.tsx new file mode 100644 index 0000000000..5f7846df9e --- /dev/null +++ b/packages/app-js/src/LocalStorage.tsx @@ -0,0 +1,109 @@ +// Copyright 2017-2019 @polkadot/app-js authors & contributors +// This software may be modified and distributed under the terms +// of the Apache-2.0 license. See the LICENSE file for details. + +import { BareProps, I18nProps } from '@polkadot/ui-app/types'; + +import React from 'react'; +import { Button as SUIB, Popup } from 'semantic-ui-react'; +import { Button, Input } from '@polkadot/ui-app/index'; + +import translate from './translate'; + +type Props = BareProps & I18nProps & { + isCustomExample: boolean, + saveSnippet: (snippetName: string) => void, + removeSnippet: () => void +}; + +type State = { + snippetName: string, + isOpen: boolean +}; + +class LocalStorage extends React.PureComponent { + state: State = { + snippetName: '', + isOpen: false + }; + + render () { + const { + props: { isCustomExample, removeSnippet, t }, + state: { isOpen, snippetName } + } = this; + + if (isCustomExample) { + return ( + // FIXME: The event trigger on='hover' does not work together with the ui-app' + //
- +