diff --git a/README.md b/README.md index 3ff586d..e96c373 100644 --- a/README.md +++ b/README.md @@ -156,6 +156,18 @@ var ComponentExample = React.createClass({ React.render(, mountNode); ``` +### hyphenatedClassNames +_React.PropTypes.bool_ + +Defaults to false. If set to false, allows return the classnames of the component wrapper and rest of them as hyphenated. +You can use this option to have the classnames as hyphenated. + +```js + +``` + ### Comparison to [react-live](https://github.com/FormidableLabs/react-live) There are multiple options when it comes to live, editable React component environments. Formidable actually has **two** first class projects to help you out: [`component-playground`](https://github.com/FormidableLabs/component-playground) and [`react-live`](https://github.com/FormidableLabs/react-live). Let's briefly look at the libraries, use cases, and factors that might help in deciding which is right for you. diff --git a/src/components/doc.jsx b/src/components/doc.jsx index 17d8893..f720718 100644 --- a/src/components/doc.jsx +++ b/src/components/doc.jsx @@ -1,5 +1,6 @@ import React, { Component } from "react"; import PropTypes from "prop-types"; +import { getHyphenatedClassNames } from "../utils/string"; const propTypesArray = [{ key: "array", @@ -65,7 +66,8 @@ class Doc extends Component { static propTypes = { componentClass: PropTypes.func, ignore: PropTypes.array, - propDescriptionMap: PropTypes.object + propDescriptionMap: PropTypes.object, + hyphenatedClassNames: PropTypes.bool }; render() { @@ -74,7 +76,8 @@ class Doc extends Component { const { componentClass, ignore, - propDescriptionMap + propDescriptionMap, + hyphenatedClassNames = false } = this.props; for (const propName in componentClass.propTypes) { if (ignore.indexOf(propName)) { @@ -87,7 +90,7 @@ class Doc extends Component { } return ( -
+
    { propTypes.map((propObj) => ( diff --git a/src/components/es6-preview.jsx b/src/components/es6-preview.jsx index 37c20dc..efdd219 100644 --- a/src/components/es6-preview.jsx +++ b/src/components/es6-preview.jsx @@ -3,6 +3,7 @@ import React, { Component } from "react"; import PropTypes from "prop-types"; import { render, unmountComponentAtNode } from "react-dom"; import { transform } from "babel-standalone"; +import { getHyphenatedClassNames } from "../utils/string"; const getType = function (el) { let t = typeof el; @@ -84,7 +85,8 @@ class EsPreview extends Component { static propTypes = { code: PropTypes.string.isRequired, - scope: PropTypes.object.isRequired + scope: PropTypes.object.isRequired, + hyphenatedClassNames: PropTypes.bool }; _compileCode = () => { @@ -108,6 +110,7 @@ class EsPreview extends Component { _executeCode = () => { const mountNode = this.mount; + const { hyphenatedClassNames = false } = this.props; try { unmountComponentAtNode(mountNode); @@ -155,7 +158,11 @@ class EsPreview extends Component { } catch (err) { this._setTimeout(() => { render( -
    {err.toString()}
    , +
    + {err.toString()} +
    , mountNode ); }, 500); diff --git a/src/components/playground.jsx b/src/components/playground.jsx index 438761f..bef486d 100644 --- a/src/components/playground.jsx +++ b/src/components/playground.jsx @@ -6,6 +6,7 @@ import Editor from "./editor"; import Preview from "./preview"; import EsPreview from "./es6-preview"; import Doc from "./doc"; +import { getHyphenatedClassNames } from "../utils/string"; // TODO: refactor to remove componentWillReceiveProps // eslint-disable-next-line react/no-deprecated @@ -30,7 +31,8 @@ class ReactPlayground extends Component { es6Console: PropTypes.bool, context: PropTypes.object, initiallyExpanded: PropTypes.bool, - previewComponent: PropTypes.node + previewComponent: PropTypes.node, + hyphenatedClassNames: PropTypes.node }; state = { @@ -72,20 +74,31 @@ class ReactPlayground extends Component { propDescriptionMap, scope, selectedLines, - theme } = this.props; + theme, + hyphenatedClassNames = false + } = this.props; return ( -
    +
    { docClass ? : null } -
    +
    { collapsableCode ? -
    - +
    + {expandedCode ? "collapse" : "expand"}
    : null } -
    +
    { es6Console ? : }
    diff --git a/src/components/preview.jsx b/src/components/preview.jsx index ffbb1ea..44fbf5f 100644 --- a/src/components/preview.jsx +++ b/src/components/preview.jsx @@ -4,6 +4,7 @@ import PropTypes from "prop-types"; import { render } from "react-dom"; import ReactDOMServer from "react-dom/server"; import { transform } from "babel-standalone"; +import { getHyphenatedClassNames } from "../utils/string"; class Preview extends Component { @@ -16,7 +17,8 @@ class Preview extends Component { scope: PropTypes.object.isRequired, previewComponent: PropTypes.node, noRender: PropTypes.bool, - context: PropTypes.object + context: PropTypes.object, + hyphenatedClassNames: PropTypes.bool }; state = { @@ -112,12 +114,21 @@ class Preview extends Component { render() { const { error } = this.state; + const { hyphenatedClassNames = false } = this.props; return (
    {error !== null ? -
    {error}
    : - null} -
    { this.mount = c; }} className="previewArea"/> +
    + {error} +
    : + null + } +
    { this.mount = c; }} + className={getHyphenatedClassNames("previewArea", hyphenatedClassNames)} + />
    ); } diff --git a/src/utils/string.js b/src/utils/string.js new file mode 100644 index 0000000..104bc12 --- /dev/null +++ b/src/utils/string.js @@ -0,0 +1,3 @@ +export const getHyphenatedClassNames = (className, flag) => { + return flag ? className.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase() : className; +};