Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[UI Framework] Add isReadOnly prop to KuiCodeEditor. #14804

Merged
merged 4 commits into from
Nov 9, 2017
Merged

[UI Framework] Add isReadOnly prop to KuiCodeEditor. #14804

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
187c81d
Add isReadOnly prop to KuiCodeEditor.
cjcenizal Nov 6, 2017
e642f87
Place cursor at beginning of code editor if it's read-only.
cjcenizal Nov 7, 2017
14a11e2
Surface prompt for isReadOnly mode. Only show cursor when the editor …
cjcenizal Nov 7, 2017
612edcc
Fix Jest tests.
cjcenizal Nov 9, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions ui_framework/dist/ui_framework.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -688,6 +688,10 @@ input[type="button"] {

.kuiCodeEditorWrapper {
position: relative; }
.kuiCodeEditorWrapper .ace_hidden-cursors {
opacity: 0; }
.kuiCodeEditorWrapper.kuiCodeEditorWrapper-isEditing .ace_hidden-cursors {
opacity: 1; }

.kuiCodeEditorKeyboardHint {
position: absolute;
Expand Down
15 changes: 15 additions & 0 deletions ui_framework/doc_site/src/views/code_editor/code_editor_example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@ import {
import CodeEditor from './code_editor';
const codeEditorSource = require('!!raw-loader!./code_editor');

import ReadOnly from './read_only';
const readOnlySource = require('!!raw-loader!./read_only');

export default props => (
<GuidePage title={props.route.name}>
<GuideSection
Expand All @@ -36,5 +39,17 @@ export default props => (
<CodeEditor />
</GuideDemo>
</GuideSection>

<GuideSection
title="Read-only"
source={[{
type: GuideSectionTypes.JS,
code: readOnlySource,
}]}
>
<GuideDemo>
<ReadOnly />
</GuideDemo>
</GuideSection>
</GuidePage>
);
27 changes: 27 additions & 0 deletions ui_framework/doc_site/src/views/code_editor/read_only.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import React, { Component } from 'react';

import 'brace/mode/less';
import 'brace/theme/github';

import {
KuiCodeEditor
} from '../../../../components';

export default class extends Component {
state = {
value: '<p>This code is read only</p>'
};

render() {
return (
<KuiCodeEditor
mode="less"
theme="github"
width="100%"
value={this.state.value}
setOptions={{ fontSize: '14px' }}
isReadOnly
/>
);
}
}
170 changes: 162 additions & 8 deletions ui_framework/src/components/code_editor/__snapshots__/code_editor.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`KuiCodeEditor hint element should be disabled when the ui ace box gains focus 1`] = `
exports[`KuiCodeEditor behavior hint element should be disabled when the ui ace box gains focus 1`] = `
<div
className="kuiCodeEditorKeyboardHint kuiCodeEditorKeyboardHint-isInactive"
data-test-subj="codeEditorHint"
Expand All @@ -13,17 +13,21 @@ exports[`KuiCodeEditor hint element should be disabled when the ui ace box gains
<p
className="kuiText kuiVerticalRhythmSmall"
>
Press Enter to start editing.
Press Enter to start
editing
.
</p>
<p
className="kuiText kuiVerticalRhythmSmall"
>
When you’re done, press Escape to stop editing.
When you’re done, press Escape to stop
editing
.
</p>
</div>
`;

exports[`KuiCodeEditor hint element should be enabled when the ui ace box loses focus 1`] = `
exports[`KuiCodeEditor behavior hint element should be enabled when the ui ace box loses focus 1`] = `
<div
className="kuiCodeEditorKeyboardHint"
data-test-subj="codeEditorHint"
Expand All @@ -36,12 +40,16 @@ exports[`KuiCodeEditor hint element should be enabled when the ui ace box loses
<p
className="kuiText kuiVerticalRhythmSmall"
>
Press Enter to start editing.
Press Enter to start
editing
.
</p>
<p
className="kuiText kuiVerticalRhythmSmall"
>
When you’re done, press Escape to stop editing.
When you’re done, press Escape to stop
editing
.
</p>
</div>
`;
Expand All @@ -60,12 +68,28 @@ exports[`KuiCodeEditor is rendered 1`] = `
<p
class="kuiText kuiVerticalRhythmSmall"
>
Press Enter to start editing.
<!-- react-text: 4 -->
Press Enter to start
<!-- /react-text -->
<!-- react-text: 5 -->
editing
<!-- /react-text -->
<!-- react-text: 6 -->
.
<!-- /react-text -->
</p>
<p
class="kuiText kuiVerticalRhythmSmall"
>
When you’re done, press Escape to stop editing.
<!-- react-text: 8 -->
When you’re done, press Escape to stop
<!-- /react-text -->
<!-- react-text: 9 -->
editing
<!-- /react-text -->
<!-- react-text: 10 -->
.
<!-- /react-text -->
</p>
</div>
<div
Expand Down Expand Up @@ -158,3 +182,133 @@ exports[`KuiCodeEditor is rendered 1`] = `
</div>
</div>
`;

exports[`KuiCodeEditor props isReadOnly renders alternate hint text 1`] = `
<div
class="kuiCodeEditorWrapper"
>
<div
class="kuiCodeEditorKeyboardHint"
data-test-subj="codeEditorHint"
id="42"
role="button"
tabindex="0"
>
<p
class="kuiText kuiVerticalRhythmSmall"
>
<!-- react-text: 4 -->
Press Enter to start
<!-- /react-text -->
<!-- react-text: 5 -->
interacting with the code
<!-- /react-text -->
<!-- react-text: 6 -->
.
<!-- /react-text -->
</p>
<p
class="kuiText kuiVerticalRhythmSmall"
>
<!-- react-text: 8 -->
When you’re done, press Escape to stop
<!-- /react-text -->
<!-- react-text: 9 -->
interacting with the code
<!-- /react-text -->
<!-- react-text: 10 -->
.
<!-- /react-text -->
</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>
`;
10 changes: 10 additions & 0 deletions ui_framework/src/components/code_editor/_code_editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,15 @@
.kuiCodeEditorWrapper {
position: relative;

.ace_hidden-cursors {
opacity: 0;
}

&.kuiCodeEditorWrapper-isEditing {
.ace_hidden-cursors {
opacity: 1;
}
}
}

.kuiCodeEditorKeyboardHint {
Expand Down
Loading