pali112
/
workout-editor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use simple-code-editor

This commit is contained in:
Rene Saarsoo 2020-10-03 22:56:41 +03:00
parent e528910ac9
commit 0d56bf7df3
3 changed files with 18 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -13,6 +13,7 @@
"react": "^16.13.1", "react": "^16.13.1",
"react-dom": "^16.13.1", "react-dom": "^16.13.1",
"react-scripts": "3.4.3", "react-scripts": "3.4.3",
"react-simple-code-editor": "^0.11.0",
"styled-components": "^5.2.0", "styled-components": "^5.2.0",
"typescript": "~3.7.2" "typescript": "~3.7.2"
}, },

15
src/App.tsx
View File

@ -1,4 +1,5 @@
import React, { useState, useCallback } from 'react'; import React, { useState, useCallback } from 'react';
import Editor from 'react-simple-code-editor';
import { WorkoutPlot } from './components/WorkoutPlot'; import { WorkoutPlot } from './components/WorkoutPlot';
import { WorkoutStats } from './components/WorkoutStats'; import { WorkoutStats } from './components/WorkoutStats';
import { parse, chunkRangeIntervals, Duration } from 'make-workout'; import { parse, chunkRangeIntervals, Duration } from 'make-workout';
@ -24,6 +25,15 @@ const AppTitle = styled.h1`
font-weight: normal; font-weight: normal;
`; `;
const CodeEditor = styled(Editor).attrs({ padding: 10 })`
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
font-size: 14px;
line-height: 1.3;
border: 1px inset #bbb;
border-radius: 3px;
background: #fff;
`;
// Split range-intervals into 1 minute chunks // Split range-intervals into 1 minute chunks
const chunkSize = new Duration(60); const chunkSize = new Duration(60);
@ -32,8 +42,7 @@ export function App() {
const [workout, setWorkout] = useState(parse(defaultWorkout)); const [workout, setWorkout] = useState(parse(defaultWorkout));
const [error, setError] = useState<string | undefined>(undefined); const [error, setError] = useState<string | undefined>(undefined);
const onChange = useCallback((event: React.ChangeEvent<HTMLTextAreaElement>) => { const onChange = useCallback((value: string) => {
const value = event.target.value;
setText(value); setText(value);
try { try {
setWorkout(parse(value)); setWorkout(parse(value));
@ -46,7 +55,7 @@ export function App() {
return ( return (
<AppContainer> <AppContainer>
<AppTitle>Workout editor</AppTitle> <AppTitle>Workout editor</AppTitle>
<textarea rows={10} cols={100} onChange={onChange} value={text} /> <CodeEditor onValueChange={onChange} value={text} highlight={code => code} />
<WorkoutPlot intervals={chunkRangeIntervals(workout.intervals, chunkSize)} /> <WorkoutPlot intervals={chunkRangeIntervals(workout.intervals, chunkSize)} />
{error && <ErrorMessage>{error}</ErrorMessage>} {error && <ErrorMessage>{error}</ErrorMessage>}
<WorkoutStats workout={workout} /> <WorkoutStats workout={workout} />

5
yarn.lock
View File

@ -8782,6 +8782,11 @@ react-scripts@3.4.3:
optionalDependencies: optionalDependencies:
fsevents "2.1.2" fsevents "2.1.2"
react-simple-code-editor@^0.11.0:
version "0.11.0"
resolved "https://registry.yarnpkg.com/react-simple-code-editor/-/react-simple-code-editor-0.11.0.tgz#bb57c7c29b570f2ab229872599eac184f5bc673c"
integrity sha512-xGfX7wAzspl113ocfKQAR8lWPhavGWHL3xSzNLeseDRHysT+jzRBi/ExdUqevSMos+7ZtdfeuBOXtgk9HTwsrw==
react@^16.13.1: react@^16.13.1:
version "16.13.1" version "16.13.1"
resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e" resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"