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

Extract CodeEditor to separate file

This commit is contained in:
Rene Saarsoo 2020-10-03 23:01:48 +03:00
parent 0d56bf7df3
commit 28769a417c
2 changed files with 13 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/App.tsx
View File

@ -1,10 +1,10 @@
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';
import { ErrorMessage } from './components/ErrorMessage'; import { ErrorMessage } from './components/ErrorMessage';
import styled from 'styled-components'; import styled from 'styled-components';
import { CodeEditor } from './components/CodeEditor';
const defaultWorkout = `Name: Hello const defaultWorkout = `Name: Hello
@ -25,15 +25,6 @@ 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);
@ -55,7 +46,7 @@ export function App() {
return ( return (
<AppContainer> <AppContainer>
<AppTitle>Workout editor</AppTitle> <AppTitle>Workout editor</AppTitle>
<CodeEditor onValueChange={onChange} value={text} highlight={code => code} /> <CodeEditor onValueChange={onChange} value={text} />
<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} />

11
src/components/CodeEditor.tsx Normal file
View File

@ -0,0 +1,11 @@
import Editor from 'react-simple-code-editor';
import styled from 'styled-components';
export const CodeEditor = styled(Editor).attrs({ padding: 10, highlight: code => code })`
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;
`;