refactor MarkdownText to use props.children

ShMcK · ShMcK · commit 88cbb353f21c · 2016-04-15T10:55:46.000+08:00
diff --git a/lib/components/_components.js b/lib/components/_components.js
@@ -18,6 +18,6 @@ exports.Tutorials = tutorials_1.Tutorials;
 var final_page_1 = require('./final-page/final-page');
 exports.FinalPage = final_page_1.FinalPage;
 var markdown_1 = require('./markdown/markdown');
-exports.MarkdownText = markdown_1.default;
+exports.Markdown = markdown_1.Markdown;
 var alert_1 = require('./alert/alert');
 exports.Alert = alert_1.default;
diff --git a/lib/components/markdown/markdown.js b/lib/components/markdown/markdown.js
@@ -23,8 +23,8 @@ function formatText(text) {
     return marked(text.toString(), options);
 }
 ;
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = function (_a) {
-    var text = _a.text;
-    return (React.createElement("span", {className: 'cr-markdown', dangerouslySetInnerHTML: { __html: formatText(text) }}));
+exports.Markdown = function (_a) {
+    var children = _a.children;
+    var text = formatText(children);
+    return React.createElement("span", {className: 'cr-markdown', dangerouslySetInnerHTML: { __html: text }});
 };
diff --git a/lib/components/page/chapter/chapter.js b/lib/components/page/chapter/chapter.js
@@ -4,5 +4,5 @@ var _components_1 = require('../../_components');
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = function (_a) {
     var chapter = _a.chapter;
-    return (React.createElement("section", {className: 'cr-chapter'}, React.createElement(_components_1.MarkdownText, {text: chapter.title})));
+    return (React.createElement("section", {className: 'cr-chapter'}, React.createElement(_components_1.Markdown, null, chapter.title)));
 };
diff --git a/lib/components/page/complete/page-complete.js b/lib/components/page/complete/page-complete.js
@@ -5,6 +5,6 @@ var _components_1 = require('../../_components');
 exports.PageCompleteMessage = function (_a) {
     var page = _a.page;
     return (React.createElement("div", {className: 'cr-page-onComplete'}, page.completed && page.onPageComplete ?
-        React.createElement(list_item_1.default, {key: 'page-complete'}, React.createElement(_components_1.MarkdownText, {text: page.onPageComplete}))
+        React.createElement(list_item_1.default, {key: 'page-complete'}, React.createElement(_components_1.Markdown, null, page.onPageComplete))
         : null));
 };
diff --git a/lib/components/page/content.js b/lib/components/page/content.js
@@ -6,7 +6,7 @@ var card_header_1 = require('material-ui/lib/card/card-header');
 var card_text_1 = require('material-ui/lib/card/card-text');
 function default_1(_a) {
     var page = _a.page;
-    return (React.createElement(card_1.default, null, React.createElement(card_header_1.default, {title: page.title}), React.createElement(card_text_1.default, null, React.createElement(_components_1.MarkdownText, {text: page.description}))));
+    return (React.createElement(card_1.default, null, React.createElement(card_header_1.default, {title: page.title}), React.createElement(card_text_1.default, null, React.createElement(_components_1.Markdown, null, page.description))));
 }
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = default_1;
diff --git a/lib/components/page/hint/hint.js b/lib/components/page/hint/hint.js
@@ -35,7 +35,7 @@ var default_1 = (function (_super) {
             return React.createElement("div", null);
         }
         var hint = hints[hintPosition];
-        return (React.createElement(card_1.default, {className: 'cr-task-hints'}, React.createElement(card_header_1.default, {title: 'Hints', avatar: React.createElement(help_1.default, null), actAsExpander: true, showExpandableButton: true}), React.createElement(card_text_1.default, {className: 'cr-task-hint', expandable: true}, React.createElement(_components_1.MarkdownText, {text: hint})), React.createElement(card_actions_1.default, {expandable: true}, React.createElement(flat_button_1.default, {label: 'Previous', disabled: hintPosition < 1, onTouchTap: prevHint.bind(this, hintPosition - 1)}), React.createElement(flat_button_1.default, {label: 'Next', disabled: hintPosition > hints.length - 2, onTouchTap: nextHint.bind(this, hintPosition + 1)}))));
+        return (React.createElement(card_1.default, {className: 'cr-task-hints'}, React.createElement(card_header_1.default, {title: 'Hints', avatar: React.createElement(help_1.default, null), actAsExpander: true, showExpandableButton: true}), React.createElement(card_text_1.default, {className: 'cr-task-hint', expandable: true}, React.createElement(_components_1.Markdown, null, hint)), React.createElement(card_actions_1.default, {expandable: true}, React.createElement(flat_button_1.default, {label: 'Previous', disabled: hintPosition < 1, onTouchTap: prevHint.bind(this, hintPosition - 1)}), React.createElement(flat_button_1.default, {label: 'Next', disabled: hintPosition > hints.length - 2, onTouchTap: nextHint.bind(this, hintPosition + 1)}))));
     };
     default_1 = __decorate([
         react_redux_1.connect(null, function (dispatch, state) {
diff --git a/lib/components/page/task/task.js b/lib/components/page/task/task.js
@@ -31,7 +31,7 @@ var TaskIndex = function (_a) {
 };
 var TaskContent = function (_a) {
     var task = _a.task;
-    return (React.createElement("div", {className: 'cr-task-description'}, React.createElement(_components_1.MarkdownText, {text: task.description})));
+    return (React.createElement("div", {className: 'cr-task-description'}, React.createElement(_components_1.Markdown, null, task.description)));
 };
 exports.Task = function (_a) {
     var task = _a.task, taskPosition = _a.taskPosition, index = _a.index, runTests = _a.runTests;
diff --git a/lib/components/progress/progress.js b/lib/components/progress/progress.js
@@ -92,6 +92,6 @@ exports.default = function (_a) {
         }), initiallyOpen: chapterIndex === 0, leftIcon: chapter.completed ? React.createElement(check_box_1.default, null) : null, primaryTogglesNestedList: chapterIndex === position.chapter && !chapter.completed, nestedItems: chapter.pages.map(function (page, pageIndex) {
             var itemPosition = { chapter: chapterIndex, page: pageIndex };
             return React.createElement(ProgressPage, {key: 'c' + chapterIndex + 'p' + pageIndex, page: page, itemPosition: itemPosition, position: position});
-        })}, React.createElement("h3", null, chapterIndex + 1, ". ", chapter.title), React.createElement("span", {className: 'chapter-description'}, React.createElement(_components_1.MarkdownText, {text: chapter.description})));
+        })}, React.createElement("h3", null, chapterIndex + 1, ". ", chapter.title), React.createElement("span", {className: 'chapter-description'}, React.createElement(_components_1.Markdown, null, chapter.description)));
     }))));
 };
diff --git a/lib/components/start/checks/checks.js b/lib/components/start/checks/checks.js
@@ -17,6 +17,7 @@ var React = require('react');
 var setup_checker_1 = require('./setup-checker');
 var VerticalStep_1 = require('material-ui/lib/Stepper/VerticalStep');
 var flat_button_1 = require('material-ui/lib/flat-button');
+var _components_1 = require('../../_components');
 var action_setup_1 = require('../../../reducers/checks/action-setup');
 var react_redux_1 = require('react-redux');
 var store_1 = require('../../../store/store');
@@ -41,7 +42,7 @@ var Checks = (function (_super) {
             React.createElement(flat_button_1.default, {key: 0, primary: true, label: 'Verify', onTouchTap: verify})
         ]}, React.createElement("div", null, "Install a newer version of ", React.createElement("a", {href: 'https://nodejs.org'}, "Node"))), React.createElement(VerticalStep_1.default, {orderStepLabel: fail, stepLabel: 'NPM >= 3', actions: [
             React.createElement(flat_button_1.default, {key: 0, primary: true, label: 'Verify', onTouchTap: verify}),
-        ]}, React.createElement("div", null, "Update your version of NPM.", React.createElement("br", null), "`> npm update -g npm`"))), checks.setup.passed ? null : React.createElement(setup_checker_1.default, {title: 'Setup Checks', status: this.getSetupChecks(checks)}, React.createElement(VerticalStep_1.default, {orderStepLabel: fail, stepLabel: 'working directory', actions: [
+        ]}, React.createElement(_components_1.Markdown, null, "Update your version of NPM." + ' ' + "`> npm update -g npm`"))), checks.setup.passed ? null : React.createElement(setup_checker_1.default, {title: 'Setup Checks', status: this.getSetupChecks(checks)}, React.createElement(VerticalStep_1.default, {orderStepLabel: fail, stepLabel: 'working directory', actions: [
             React.createElement(flat_button_1.default, {key: 0, primary: true, label: 'Verify', onTouchTap: verify}),
             React.createElement(flat_button_1.default, {key: 1, secondary: true, label: 'Do it for me', onTouchTap: action_setup_1.openDirectory})
         ]}, React.createElement("div", null, "File -> Open (a new folder)")), React.createElement(VerticalStep_1.default, {orderStepLabel: fail, stepLabel: 'package.json', actions: [
diff --git a/lib/reducers/checks/verify.js b/lib/reducers/checks/verify.js
@@ -15,7 +15,7 @@ function verifySetup() {
         },
         setup: {
             dir: !!check_setup_1.hasDirectory(),
-            packageJson: !!check_setup_1.hasPackageJson(),
+            packageJson: false,
             tutorial: !!check_setup_1.hasTutorialDep()
         }
     };
diff --git a/src/components/_components.ts b/src/components/_components.ts
@@ -14,5 +14,5 @@ export {Tutorials} from './tutorials/tutorials';
 export {FinalPage} from './final-page/final-page';
 
 // Common
-export {default as MarkdownText} from './markdown/markdown';
+export {Markdown} from './markdown/markdown';
 export {default as Alert} from './alert/alert';
diff --git a/src/components/markdown/markdown.tsx b/src/components/markdown/markdown.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
 import * as marked from 'marked';
 const Highlights = require('highlights');
-let highlighter = new Highlights({registry: atom.grammars});
+const highlighter = new Highlights({registry: atom.grammars});
 
-var options = {
-  highlight: function (code: string, lang: string) {
+const options = {
+  highlight: (code: string, lang: string) => {
     return highlighter.highlightSync({
       fileContents: code,
       scopeName: 'source.' + (lang || 'js')
@@ -33,6 +33,9 @@ function formatText(text: string): string {
  * Markdown Text
  * 	MD -> HTML
  */
-export default ({text}) => (
-  <span className='cr-markdown' dangerouslySetInnerHTML={{__html: formatText(text)}}></span>
-);
+export const Markdown: React.StatelessComponent<any> = ({children}) => {
+  let text = formatText(children);
+  return <span className='cr-markdown' dangerouslySetInnerHTML={
+    {__html: text}
+  }></span>;
+};
diff --git a/src/components/page/chapter/chapter.tsx b/src/components/page/chapter/chapter.tsx
@@ -1,12 +1,12 @@
 'use strict';
 import * as React from 'react';
-import {MarkdownText} from '../../_components';
+import {Markdown} from '../../_components';
 /**
  * Chapters Component
  * 	basic chapter info
  */
 export default ({chapter}) => (
   <section className='cr-chapter'>
-    <MarkdownText text={chapter.title} />
+    <Markdown>{chapter.title}</Markdown>
   </section>
 );
diff --git a/src/components/page/complete/page-complete.tsx b/src/components/page/complete/page-complete.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
 import ListItem from 'material-ui/lib/lists/list-item';
-import {MarkdownText} from '../../_components';
+import {Markdown} from '../../_components';
 
 export const PageCompleteMessage = ({page}) => (
   <div className='cr-page-onComplete'>
     {page.completed && page.onPageComplete ?
       <ListItem key='page-complete'>
-        <MarkdownText text={page.onPageComplete} />
+        <Markdown>{page.onPageComplete}</Markdown>
       </ListItem>
    : null}
   </div>
diff --git a/src/components/page/content.tsx b/src/components/page/content.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {MarkdownText} from '../_components';
+import {Markdown} from '../_components';
 import Card from 'material-ui/lib/card/card';
 import CardHeader from 'material-ui/lib/card/card-header';
 import CardText from 'material-ui/lib/card/card-text';
@@ -9,7 +9,7 @@ export default function ({page}) {
     <Card>
       <CardHeader title={page.title} />
       <CardText>
-        <MarkdownText text={page.description} />
+        <Markdown>{page.description}</Markdown>
       </CardText>
     </Card>
   );
diff --git a/src/components/page/hint/hint.tsx b/src/components/page/hint/hint.tsx
@@ -6,7 +6,7 @@ import CardActions from 'material-ui/lib/card/card-actions';
 import CardHeader from 'material-ui/lib/card/card-header';
 import CardText from 'material-ui/lib/card/card-text';
 import FlatButton from 'material-ui/lib/flat-button';
-import {MarkdownText} from '../../_components';
+import {Markdown} from '../../_components';
 import Help from 'material-ui/lib/svg-icons/action/help';
 
 @connect(null, (dispatch, state) => {
@@ -34,7 +34,7 @@ export default class extends React.Component<{
         actAsExpander={true}
         showExpandableButton={true} />
       <CardText className='cr-task-hint' expandable={true}>
-        <MarkdownText text={hint} />
+        <Markdown>{hint}</Markdown>
       </CardText>
       <CardActions expandable={true}>
         <FlatButton label='Previous' disabled={hintPosition < 1}
diff --git a/src/components/page/task/task.tsx b/src/components/page/task/task.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {MarkdownText} from '../../_components';
+import {Markdown} from '../../_components';
 import List from 'material-ui/lib/lists/list';
 import ListItem from 'material-ui/lib/lists/list-item';
 import Subheader from 'material-ui/lib/Subheader';
@@ -31,7 +31,7 @@ const TaskIndex = ({index}) => (
 
 const TaskContent = ({task}) => (
   <div className='cr-task-description'>
-    <MarkdownText text={task.description} />
+    <Markdown>{task.description}</Markdown>
   </div>
 );
 
diff --git a/src/components/progress/progress.tsx b/src/components/progress/progress.tsx
@@ -6,7 +6,7 @@ import RaisedButton from 'material-ui/lib/raised-button';
 import List from 'material-ui/lib/lists/list';
 import ListItem from 'material-ui/lib/lists/list-item';
 import Subheader from 'material-ui/lib/Subheader';
-import {MarkdownText} from '../_components';
+import {Markdown} from '../_components';
 import * as classnames from 'classnames';
 import * as Colors from 'material-ui/lib/styles/colors';
 import CheckBox from 'material-ui/lib/svg-icons/toggle/check-box';
@@ -90,7 +90,7 @@ export default ({progress, position}) => (
          })}>
             <h3>{chapterIndex + 1}. {chapter.title}</h3>
             <span className='chapter-description'>
-              <MarkdownText  text={chapter.description} />
+              <Markdown>{chapter.description}</Markdown>
             </span>
          </ListItem>;
     })}
diff --git a/src/components/start/checks/checks.tsx b/src/components/start/checks/checks.tsx
@@ -3,6 +3,7 @@ import Paper from 'material-ui/lib/paper';
 import DynamicStepper from './setup-checker';
 import Step from 'material-ui/lib/Stepper/VerticalStep';
 import FlatButton from 'material-ui/lib/flat-button';
+import {Markdown} from '../../_components';
 
 import {openDirectory, createPackageJson, installTutorial} from '../../../reducers/checks/action-setup';
 import {updateNpm} from '../../../reducers/checks/action-system';
@@ -54,10 +55,8 @@ export default class Checks extends React.Component<{
                   onTouchTap={verify} />,
 
               ]} >
-              <div>
-              Update your version of NPM.<br />
-              `> npm update -g npm`
-              </div>
+              <Markdown>Update your version of NPM.
+              `> npm update -g npm`</Markdown>
             </Step>
          </DynamicStepper>}
 
diff --git a/src/components/tutorials/tutorials.tsx b/src/components/tutorials/tutorials.tsx
@@ -7,7 +7,6 @@ import TableHeader from 'material-ui/lib/table/table-header';
 import TableRowColumn from 'material-ui/lib/table/table-row-column';
 import TableBody from 'material-ui/lib/table/table-body';
 import FileUpload from 'material-ui/lib/svg-icons/file/file-upload';
-import {MarkdownText} from '../_components';
 import {connect} from 'react-redux';
 import * as Action from '../../actions/actions';
 import {pink500} from 'material-ui/lib/styles/colors';
diff --git a/src/reducers/checks/verify.ts b/src/reducers/checks/verify.ts
@@ -21,7 +21,7 @@ export default function verifySetup(): CR.Checks {
     },
     setup: {
       dir: !!hasDirectory(),
-      packageJson: !!hasPackageJson(),
+      packageJson: false, // !!hasPackageJson(),
       tutorial: !!hasTutorialDep()
     }
   };

Original file line number	Diff line number	Diff line change
`@@ -23,8 +23,8 @@ function formatText(text) {`
`23`	`23`	`return marked(text.toString(), options);`
`24`	`24`	`}`
`25`	`25`	`;`
`26`		`-Object.defineProperty(exports, "__esModule", { value: true });`
`27`		`-exports.default = function (_a) {`
`28`		`- var text = _a.text;`
`29`		`- return (React.createElement("span", {className: 'cr-markdown', dangerouslySetInnerHTML: { __html: formatText(text) }}));`
	`26`	`+exports.Markdown = function (_a) {`
	`27`	`+ var children = _a.children;`
	`28`	`+ var text = formatText(children);`
	`29`	`+ return React.createElement("span", {className: 'cr-markdown', dangerouslySetInnerHTML: { __html: text }});`
`30`	`30`	`};`
Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@ var card_header_1 = require('material-ui/lib/card/card-header');`
`6`	`6`	`var card_text_1 = require('material-ui/lib/card/card-text');`
`7`	`7`	`function default_1(_a) {`
`8`	`8`	`var page = _a.page;`
`9`		`- return (React.createElement(card_1.default, null, React.createElement(card_header_1.default, {title: page.title}), React.createElement(card_text_1.default, null, React.createElement(_components_1.MarkdownText, {text: page.description}))));`
	`9`	`+ return (React.createElement(card_1.default, null, React.createElement(card_header_1.default, {title: page.title}), React.createElement(card_text_1.default, null, React.createElement(_components_1.Markdown, null, page.description))));`
`10`	`10`	`}`
`11`	`11`	`Object.defineProperty(exports, "__esModule", { value: true });`
`12`	`12`	`exports.default = default_1;`
Original file line number	Diff line number	Diff line change
`@@ -35,7 +35,7 @@ var default_1 = (function (_super) {`
`35`	`35`	`return React.createElement("div", null);`
`36`	`36`	`}`
`37`	`37`	`var hint = hints[hintPosition];`
`38`		- return (React.createElement(card_1.default, {className: 'cr-task-hints'}, React.createElement(card_header_1.default, {title: 'Hints', avatar: React.createElement(help_1.default, null), actAsExpander: true, showExpandableButton: true}), React.createElement(card_text_1.default, {className: 'cr-task-hint', expandable: true}, React.createElement(_components_1.MarkdownText, {text: hint})), React.createElement(card_actions_1.default, {expandable: true}, React.createElement(flat_button_1.default, {label: 'Previous', disabled: hintPosition < 1, onTouchTap: prevHint.bind(this, hintPosition - 1)}), React.createElement(flat_button_1.default, {label: 'Next', disabled: hintPosition > hints.length - 2, onTouchTap: nextHint.bind(this, hintPosition + 1)}))));
	`38`	+ return (React.createElement(card_1.default, {className: 'cr-task-hints'}, React.createElement(card_header_1.default, {title: 'Hints', avatar: React.createElement(help_1.default, null), actAsExpander: true, showExpandableButton: true}), React.createElement(card_text_1.default, {className: 'cr-task-hint', expandable: true}, React.createElement(_components_1.Markdown, null, hint)), React.createElement(card_actions_1.default, {expandable: true}, React.createElement(flat_button_1.default, {label: 'Previous', disabled: hintPosition < 1, onTouchTap: prevHint.bind(this, hintPosition - 1)}), React.createElement(flat_button_1.default, {label: 'Next', disabled: hintPosition > hints.length - 2, onTouchTap: nextHint.bind(this, hintPosition + 1)}))));
`39`	`39`	`};`
`40`	`40`	`default_1 = __decorate([`
`41`	`41`	`react_redux_1.connect(null, function (dispatch, state) {`
Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ function verifySetup() {`
`15`	`15`	`},`
`16`	`16`	`setup: {`
`17`	`17`	`dir: !!check_setup_1.hasDirectory(),`
`18`		`- packageJson: !!check_setup_1.hasPackageJson(),`
	`18`	`+ packageJson: false,`
`19`	`19`	`tutorial: !!check_setup_1.hasTutorialDep()`
`20`	`20`	`}`
`21`	`21`	`};`