Add isReadOnly prop to EuiCodeEditor. (#169)

* Add isReadOnly prop to EuiCodeEditor. * Place cursor at beginning of code editor if it's read-only. * Surface prompt for isReadOnly mode. Only show cursor when the editor is focused.
elastic · Nov 30, 2017 · 4cd31d9 · 4cd31d9
1 parent 92af5db
commit 4cd31d9
Show file tree

Hide file tree

Showing 7 changed files with 337 additions and 77 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,7 @@
 - Added icons to match Kibana's app directory [(#162)](https://github.com/elastic/eui/pull/162)
 - Convert icons from SVG to React component during the build and stop using
   sprites [(#160)](https://github.com/elastic/eui/pull/160)
+- Add `isReadOnly`, `setOptions`, and `cursorStart` props to  `<EuiCodeEditor>` ([#169](https://github.com/elastic/eui/pull/169))
 
 **Bug fixes**
 

diff --git a/src-docs/src/views/code_editor/code_editor_example.js b/src-docs/src/views/code_editor/code_editor_example.js
@@ -16,6 +16,10 @@ import CodeEditor from './code_editor';
 const codeEditorSource = require('!!raw-loader!./code_editor');
 const codeEditorHtml = renderToHtml(CodeEditor);
 
+import ReadOnly from './read_only';
+const readOnlySource = require('!!raw-loader!./read_only');
+const readOnlyrHtml = renderToHtml(ReadOnly);
+
 export default props => (
   <GuidePage title={props.route.name}>
     <GuideSection
@@ -44,6 +48,20 @@ export default props => (
         <CodeEditor />
       }
     />
+
+    <GuideSection
+      title="Read-only"
+      source={[{
+        type: GuideSectionTypes.JS,
+        code: readOnlySource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: readOnlyrHtml,
+      }]}
+      demo={
+        <ReadOnly />
+      }
+    />
   </GuidePage>
 );
 
diff --git a/src-docs/src/views/code_editor/read_only.js b/src-docs/src/views/code_editor/read_only.js
@@ -0,0 +1,27 @@
+import React, { Component } from 'react';
+
+import 'brace/mode/less';
+import 'brace/theme/github';
+
+import {
+  EuiCodeEditor,
+} from '../../../../src/components';
+
+export default class extends Component {
+  state = {
+    value: '<p>This code is read only</p>'
+  };
+
+  render() {
+    return (
+      <EuiCodeEditor
+        mode="less"
+        theme="github"
+        width="100%"
+        value={this.state.value}
+        setOptions={{ fontSize: '14px' }}
+        isReadOnly
+      />
+    );
+  }
+}
diff --git a/src/components/code_editor/__snapshots__/code_editor.test.js.snap b/src/components/code_editor/__snapshots__/code_editor.test.js.snap
@@ -1,27 +1,31 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EuiCodeEditor hint element should be disabled when the ui ace box gains focus 1`] = `
+exports[`EuiCodeEditor behavior hint element should be disabled when the ui ace box gains focus 1`] = `
 <div
-  class="euiCodeEditorKeyboardHint euiCodeEditorKeyboardHint-isInactive"
+  class="euiCodeEditorKeyboardHint"
   data-test-subj="codeEditorHint"
   id="42"
   role="button"
   tabindex="0"
 >
   <p
-    class="euiText euiVerticalRhythmSmall"
+    class="euiText"
   >
-    Press Enter to start editing.
+    Press Enter to start 
+    editing
+    .
   </p>
   <p
-    class="euiText euiVerticalRhythmSmall"
+    class="euiText"
   >
-    When you’re done, press Escape to stop editing.
+    When you’re done, press Escape to stop 
+    editing
+    .
   </p>
 </div>
 `;
 
-exports[`EuiCodeEditor hint element should be enabled when the ui ace box loses focus 1`] = `
+exports[`EuiCodeEditor behavior hint element should be enabled when the ui ace box loses focus 1`] = `
 <div
   class="euiCodeEditorKeyboardHint"
   data-test-subj="codeEditorHint"
@@ -30,19 +34,23 @@ exports[`EuiCodeEditor hint element should be enabled when the ui ace box loses
   tabindex="0"
 >
   <p
-    class="euiText euiVerticalRhythmSmall"
+    class="euiText"
   >
-    Press Enter to start editing.
+    Press Enter to start 
+    editing
+    .
   </p>
   <p
-    class="euiText euiVerticalRhythmSmall"
+    class="euiText"
   >
-    When you’re done, press Escape to stop editing.
+    When you’re done, press Escape to stop 
+    editing
+    .
   </p>
 </div>
 `;
 
-exports[`EuiCodeEditor hint element should be tabable 1`] = `
+exports[`EuiCodeEditor behavior hint element should be tabable 1`] = `
 <div
   class="euiCodeEditorKeyboardHint"
   data-test-subj="codeEditorHint"
@@ -51,14 +59,18 @@ exports[`EuiCodeEditor hint element should be tabable 1`] = `
   tabindex="0"
 >
   <p
-    class="euiText euiVerticalRhythmSmall"
+    class="euiText"
   >
-    Press Enter to start editing.
+    Press Enter to start 
+    editing
+    .
   </p>
   <p
-    class="euiText euiVerticalRhythmSmall"
+    class="euiText"
   >
-    When you’re done, press Escape to stop editing.
+    When you’re done, press Escape to stop 
+    editing
+    .
   </p>
 </div>
 `;
@@ -75,12 +87,12 @@ exports[`EuiCodeEditor is rendered 1`] = `
     tabindex="0"
   >
     <p
-      class="euiText euiVerticalRhythmSmall"
+      class="euiText"
     >
       Press Enter to start editing.
     </p>
     <p
-      class="euiText euiVerticalRhythmSmall"
+      class="euiText"
     >
       When you’re done, press Escape to stop editing.
     </p>
@@ -175,3 +187,117 @@ exports[`EuiCodeEditor is rendered 1`] = `
   </div>
 </div>
 `;
+
+exports[`EuiCodeEditor props isReadOnly renders alternate hint text 1`] = `
+<div
+  class="euiCodeEditorWrapper"
+>
+  <div
+    class="euiCodeEditorKeyboardHint"
+    data-test-subj="codeEditorHint"
+    id="42"
+    role="button"
+    tabindex="0"
+  >
+    <p
+      class="euiText"
+    >
+      Press Enter to start interacting with the code.
+    </p>
+    <p
+      class="euiText"
+    >
+      When you’re done, press Escape to stop interacting with the code.
+    </p>
+  </div>
+  <div
+    class=" ace_editor ace-tm"
+    id="brace-editor"
+    style="width: 500px; height: 500px;"
+  >
+    <textarea
+      autocapitalize="off"
+      autocorrect="off"
+      class="ace_text-input"
+      spellcheck="false"
+      style="opacity: 0;"
+      tabindex="-1"
+      wrap="off"
+    />
+    <div
+      class="ace_gutter"
+    >
+      <div
+        class="ace_layer ace_gutter-layer ace_folding-enabled"
+      />
+      <div
+        class="ace_gutter-active-line"
+        style="display: none;"
+      />
+    </div>
+    <div
+      class="ace_scroller"
+    >
+      <div
+        class="ace_content"
+      >
+        <div
+          class="ace_layer ace_print-margin-layer"
+        >
+          <div
+            class="ace_print-margin"
+            style="left: 4px; visibility: visible;"
+          />
+        </div>
+        <div
+          class="ace_layer ace_marker-layer"
+        />
+        <div
+          class="ace_layer ace_text-layer"
+          style="padding: 0px 4px;"
+        />
+        <div
+          class="ace_layer ace_marker-layer"
+        />
+        <div
+          class="ace_layer ace_cursor-layer ace_hidden-cursors"
+        >
+          <div
+            class="ace_cursor"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="ace_scrollbar ace_scrollbar-v"
+      style="display: none; width: 20px;"
+    >
+      <div
+        class="ace_scrollbar-inner"
+        style="width: 20px;"
+      />
+    </div>
+    <div
+      class="ace_scrollbar ace_scrollbar-h"
+      style="display: none; height: 20px;"
+    >
+      <div
+        class="ace_scrollbar-inner"
+        style="height: 20px;"
+      />
+    </div>
+    <div
+      style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
+    >
+      <div
+        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+      />
+      <div
+        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+      >
+        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/components/code_editor/_code_editor.scss b/src/components/code_editor/_code_editor.scss
@@ -1,5 +1,15 @@
 .euiCodeEditorWrapper {
   position: relative;
+
+  .ace_hidden-cursors {
+    opacity: 0;
+  }
+
+  &.euiCodeEditorWrapper-isEditing {
+    .ace_hidden-cursors {
+      opacity: 1;
+    }
+  }
 }
 
 .euiCodeEditorKeyboardHint {