Skip to content

Commit b0b3393

Browse files
davemooreuwsdavemooreuws
authored
Merge pull request #10 from nitrictech/develop
release
2 parents dd9309c + 3bae77f commit b0b3393

8 files changed

Lines changed: 112 additions & 18 deletions

File tree

‎README.md‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ const MyComponent = () => {
7575

7676
You can also render output that consists of frames by specifying the individual frames. With a framed output, the `text` field specifies the final output that should be rendered after all the frames have been rendered. Delays can also be specified for individual frames and commands.
7777

78-
```js
78+
```jsx
7979
import React from 'react';
8080
import Terminal from '@nitric/react-animated-term';
8181
const spinner = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
@@ -87,6 +87,7 @@ const termLines = [
8787
},
8888
{
8989
text: '✔ Loaded app',
90+
element: <><span className="text-green">✔</span> Loaded app<>,
9091
cmd: false,
9192
repeat: true,
9293
repeatCount: 5,
@@ -130,14 +131,14 @@ const MyComponent = () => {
130131

131132
### Props
132133

133-
| Property | Type | Default | Description |
134-
| :---------- | :------ | :-------- | :----------------------------------------------------------- |
135-
| lines | array | undefined | array of terminal lines |
136-
| interval | number | 100 | interval at which terminal output is updated in milliseconds |
137-
| white | boolean | false | whether to render a white themed terminal |
138-
| height | number | 240 | the height of the terminal |
134+
| Property | Type | Default | Description |
135+
| :---------- | :------ | :-------- | :----------------------------------------------------------------------------- |
136+
| lines | array | undefined | array of terminal lines |
137+
| interval | number | 100 | interval at which terminal output is updated in milliseconds |
138+
| white | boolean | false | whether to render a white themed terminal |
139+
| height | number | 240 | the height of the terminal |
139140
| onCompleted | func | undefined | a function callback that gets called when the terminal animation has completed |
140-
| replay | boolean | true | Shows or hides the replay button |
141+
| replay | boolean | true | Shows or hides the replay button |
141142

142143
### Examples
143144

‎css/styles.css‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/*
1+
/*
22
Copyright 2022, Nitric Technologies Pty Ltd.
33
44
Licensed under the Apache License, Version 2.0 (the "License");
@@ -11,16 +11,16 @@ Unless required by applicable law or agreed to in writing, software
1111
distributed under the License is distributed on an "AS IS" BASIS,
1212
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1313
See the License for the specific language governing permissions and
14-
limitations under the License.
15-
*/
14+
limitations under the License.
15+
*/
1616
.Terminal-window {
1717
position: relative;
1818
width: 100%;
1919
height: 100%;
20-
border: 1px solid rgb(51, 51, 51);
20+
border: 1px solid var(--nitric-terminal-window-border-color, rgb(51, 51, 51));
2121
border-radius: 5px;
2222
box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
23-
background: rgb(0, 0, 0);
23+
background: var(--nitric-terminal-window, rgb(0, 0, 0));
2424
}
2525

2626
.Terminal-window-white {
@@ -81,17 +81,17 @@ limitations under the License.
8181
}
8282

8383
.Terminal-btn-close {
84-
background-color: rgb(255, 95, 86);
84+
background-color: var(--nitric-btn-close, rgb(255, 95, 86));
8585
left: 13px;
8686
}
8787

8888
.Terminal-btn-minimize {
89-
background-color: rgb(255, 189, 46);
89+
background-color: var(--nitric-btn-minimize, rgb(255, 189, 46));
9090
left: 33px;
9191
}
9292

9393
.Terminal-btn-maximize {
94-
background-color: rgb(39, 201, 63);
94+
background-color: var(--nitric-btn-maximize, rgb(39, 201, 63));
9595
left: 53px;
9696
}
9797

@@ -103,7 +103,7 @@ limitations under the License.
103103
display: inline-block;
104104
width: 6px;
105105
height: 15px;
106-
background: rgb(248, 28, 229);
106+
background: var(--nitric-term-cursor, rgb(248, 28, 229));
107107
vertical-align: middle;
108108
}
109109

‎examples/create-react-app/src/App.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import customPrompt from './terminals/custom-prompt';
1717
import spinnerLines from './terminals/spinner';
1818
import colorLines from './terminals/color';
1919
import progressLines from './terminals/progress';
20+
import customElement from './terminals/custom-element';
2021
import '@nitric/react-animated-term/css/styles.css';
2122

2223
function App() {
@@ -38,6 +39,11 @@ function App() {
3839
<Renderer lines={customPrompt} interval={80} />
3940
</div>
4041

42+
<h2>Custom React Element</h2>
43+
<div style={{ width: '380px' }}>
44+
<Renderer lines={customElement} interval={80} />
45+
</div>
46+
4147
<h2>Repeated Frames Example</h2>
4248
<div style={{ width: '380px' }}>
4349
<Renderer lines={spinnerLines} interval={10} />

‎examples/create-react-app/src/terminals/custom-element.js‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
// Copyright 2022, Nitric Technologies Pty Ltd.
2+
//
3+
// Licensed under the Apache License, Version 2.0 (the "License");
4+
// you may not use this file except in compliance with the License.
5+
// You may obtain a copy of the License at
6+
//
7+
// http://www.apache.org/licenses/LICENSE-2.0
8+
//
9+
// Unless required by applicable law or agreed to in writing, software
10+
// distributed under the License is distributed on an "AS IS" BASIS,
11+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12+
// See the License for the specific language governing permissions and
13+
// limitations under the License.
14+
const spinnerFrames = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
15+
const spinner = [
16+
{
17+
text: 'node example.js',
18+
element: (
19+
<>
20+
<span
21+
style={{
22+
background: 'lightgreen',
23+
color: 'black',
24+
}}
25+
>
26+
node
27+
</span>{' '}
28+
Loaded app
29+
</>
30+
),
31+
cmd: true,
32+
delay: 80,
33+
},
34+
{
35+
text: '✔ Loaded app',
36+
element: (
37+
<>
38+
<span
39+
style={{
40+
color: 'green',
41+
}}
42+
>
43+
✔
44+
</span>{' '}
45+
Loaded app
46+
</>
47+
),
48+
cmd: false,
49+
repeat: true,
50+
repeatCount: 1,
51+
frames: spinnerFrames.map(function (spinner) {
52+
return {
53+
text: spinner + ' Loading app',
54+
delay: 80,
55+
};
56+
}),
57+
},
58+
{
59+
text: '',
60+
cmd: true,
61+
},
62+
];
63+
64+
export default spinner;

‎src/Renderer.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import termContent from './contentHandler';
2020
export interface Line {
2121
delay?: number;
2222
text?: string;
23+
element?: React.ReactElement;
2324
color?: string;
2425
cmd?: boolean;
2526
repeat?: boolean;

‎src/Terminal.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,9 @@ const renderLines = (lines) => {
2626
return (
2727
<React.Fragment key={line.id}>
2828
{line.cmd ? prompt(line.prompt) : ''}
29-
{line.text ? (
29+
{line.element ? (
30+
line.element
31+
) : line.text ? (
3032
<span style={{ color: line.color }}>{line.text}</span>
3133
) : (
3234
line.text

‎src/__snapshots__/contentHandler.spec.ts.snap‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ Array [
66
"cmd": false,
77
"color": undefined,
88
"current": true,
9+
"element": undefined,
910
"id": 0,
1011
"text": "[------------------------------------------------] 0/100",
1112
},
@@ -18,6 +19,7 @@ Array [
1819
"cmd": false,
1920
"color": undefined,
2021
"current": true,
22+
"element": undefined,
2123
"id": 0,
2224
"text": "[################################################] 100/100",
2325
},
@@ -30,6 +32,7 @@ Array [
3032
"cmd": false,
3133
"color": undefined,
3234
"current": false,
35+
"element": undefined,
3336
"id": 0,
3437
"text": "[################################################] 100/100",
3538
},
@@ -42,6 +45,7 @@ Array [
4245
"cmd": false,
4346
"color": undefined,
4447
"current": false,
48+
"element": undefined,
4549
"id": 0,
4650
"text": "[################################################] 100/100",
4751
},
@@ -54,6 +58,7 @@ Array [
5458
"cmd": true,
5559
"color": undefined,
5660
"current": true,
61+
"element": undefined,
5762
"id": 0,
5863
"prompt": undefined,
5964
"text": "",
@@ -67,6 +72,7 @@ Array [
6772
"cmd": true,
6873
"color": undefined,
6974
"current": true,
75+
"element": undefined,
7076
"id": 0,
7177
"prompt": undefined,
7278
"text": "l",
@@ -80,6 +86,7 @@ Array [
8086
"cmd": true,
8187
"color": undefined,
8288
"current": true,
89+
"element": undefined,
8390
"id": 0,
8491
"prompt": undefined,
8592
"text": "ls",
@@ -93,6 +100,7 @@ Array [
93100
"cmd": true,
94101
"color": undefined,
95102
"current": true,
103+
"element": undefined,
96104
"id": 0,
97105
"prompt": undefined,
98106
"text": "ls",
@@ -106,6 +114,7 @@ Array [
106114
"cmd": true,
107115
"color": undefined,
108116
"current": true,
117+
"element": undefined,
109118
"id": 0,
110119
"prompt": undefined,
111120
"text": "ls",
@@ -119,6 +128,7 @@ Array [
119128
"cmd": false,
120129
"color": undefined,
121130
"current": false,
131+
"element": undefined,
122132
"id": 0,
123133
"text": "foo",
124134
},
@@ -131,6 +141,7 @@ Array [
131141
"cmd": false,
132142
"color": undefined,
133143
"current": false,
144+
"element": undefined,
134145
"id": 0,
135146
"text": "foo",
136147
},
@@ -143,6 +154,7 @@ Array [
143154
"cmd": false,
144155
"color": undefined,
145156
"current": false,
157+
"element": undefined,
146158
"id": 0,
147159
"text": "foo",
148160
},

‎src/contentHandler.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ const terminalContent = function* (lines: Line[]) {
3939
buffer.push({
4040
id: lineIndex,
4141
text: lines[lineIndex].text,
42+
element: lines[lineIndex].element,
4243
cmd: false,
4344
current: false,
4445
color: lines[lineIndex].color,
@@ -56,6 +57,7 @@ const terminalContent = function* (lines: Line[]) {
5657
buffer.push({
5758
id: lineIndex,
5859
text: frames[0].text,
60+
element: frames[0].element,
5961
cmd: false,
6062
current: true,
6163
color: lines[lineIndex].color,
@@ -65,6 +67,7 @@ const terminalContent = function* (lines: Line[]) {
6567

6668
// show the current frame's text
6769
buffer[lineIndex].text = frames[frameIndex].text;
70+
buffer[lineIndex].element = frames[frameIndex].element;
6871

6972
// start a timer to render the next frame only after the delay
7073
if (frameTimer == null) {
@@ -94,6 +97,10 @@ const terminalContent = function* (lines: Line[]) {
9497
buffer[lineIndex].text = lines[lineIndex].text;
9598
}
9699

100+
if (lines[lineIndex].element) {
101+
buffer[lineIndex].element = lines[lineIndex].element;
102+
}
103+
97104
// move to next line
98105
buffer[lineIndex].current = false;
99106
linePosition = 0;
@@ -113,6 +120,7 @@ const terminalContent = function* (lines: Line[]) {
113120
buffer.push({
114121
id: lineIndex,
115122
text: '',
123+
element: lines[lineIndex].element,
116124
cmd: lines[lineIndex].cmd,
117125
prompt: lines[lineIndex].prompt,
118126
color: lines[lineIndex].color,

0 commit comments

Comments
 (0)