fix(ComponentExample|ComponentSourceManager): fix initial state of kn…

…obs, fix undeletable code (#720)

* fix(ComponentExample|ComponentSourceManager): fix initial state of knobs, fix undeletable code

* add changelog entry

CHANGELOG.md

@@ -17,6 +17,10 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### Documentation
+- Fix ignored initial state of knobs @layershifter ([#720](https://github.com/stardust-ui/react/pull/720))
+- Fix unclearable example's code @layershifter ([#720](https://github.com/stardust-ui/react/pull/720))
+
 <!--------------------------------[ v0.16.2 ]------------------------------- -->
 ## [v0.16.2](https://github.com/stardust-ui/react/tree/v0.16.2) (2019-01-14)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.16.1...v0.16.2)

docs/src/app.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { Provider, themes } from '@stardust-ui/react'
 
 import { mergeThemes } from '../../src/lib'
-import { ThemeContext } from './context/theme-context'
+import { ThemeContext } from './context/ThemeContext'
 import Router from './routes'
 
 interface AppState {

docs/src/components/ComponentDoc/ComponentDoc.tsx

@@ -14,6 +14,7 @@ import ComponentExamples from './ComponentExamples'
 import ComponentProps from './ComponentProps'
 import ComponentSidebar from './ComponentSidebar'
 import ComponentAccessibility from './ComponentDocAccessibility'
+import ExampleContext from 'docs/src/context/ExampleContext'
 
 const topRowStyle = { margin: '1em' }
 const exampleEndStyle: React.CSSProperties = {
@@ -23,10 +24,6 @@ const exampleEndStyle: React.CSSProperties = {
 }
 
 class ComponentDoc extends React.Component<any, any> {
-  static childContextTypes = {
-    onPassed: PropTypes.func,
-  }
-
   static propTypes = {
     history: PropTypes.object.isRequired,
     info: componentInfoShape.isRequired,
@@ -44,20 +41,14 @@ class ComponentDoc extends React.Component<any, any> {
     }
   }
 
-  getChildContext() {
-    return {
-      onPassed: this.handleExamplePassed,
-    }
-  }
-
   componentWillReceiveProps({ info }) {
     if (info.displayName !== this.props.info.displayName) {
       this.setState({ activePath: undefined })
     }
   }
 
-  handleExamplePassed = (e, { examplePath }) => {
-    this.setState({ activePath: examplePathToHash(examplePath) })
+  handleExamplePassed = (passedAnchorName: string) => {
+    this.setState({ activePath: passedAnchorName })
   }
 
   handleExamplesRef = examplesRef => this.setState({ examplesRef })
@@ -97,7 +88,14 @@ class ComponentDoc extends React.Component<any, any> {
           <Grid.Row columns="equal">
             <Grid.Column style={{ padding: '0 0 0 28px' } as React.CSSProperties}>
               <div ref={this.handleExamplesRef}>
-                <ComponentExamples displayName={info.displayName} />
+                <ExampleContext.Provider
+                  value={{
+                    activeAnchorName: activePath,
+                    onExamplePassed: this.handleExamplePassed,
+                  }}
+                >
+                  <ComponentExamples displayName={info.displayName} />
+                </ExampleContext.Provider>
               </div>
               <div style={exampleEndStyle}>
                 This is the bottom <Icon name="pointing down" />

docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx

@@ -1,5 +1,4 @@
 import * as _ from 'lodash'
-import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import { RouteComponentProps, withRouter } from 'react-router'
 import * as copyToClipboard from 'copy-to-clipboard'
@@ -11,19 +10,21 @@ import { examplePathToHash, getFormattedHash, knobsContext, scrollToAnchor } fro
 import { callable, pxToRem, constants } from 'src/lib'
 import Editor, { EDITOR_BACKGROUND_COLOR, EDITOR_GUTTER_COLOR } from 'docs/src/components/Editor'
 import { babelConfig, importResolver } from 'docs/src/components/Playground/renderConfig'
+import ExampleContext, { ExampleContextValue } from 'docs/src/context/ExampleContext'
 import ComponentControls from '../ComponentControls'
 import ComponentExampleTitle from './ComponentExampleTitle'
 import ComponentSourceManager, {
   ComponentSourceManagerRenderProps,
 } from '../ComponentSourceManager'
 import { ThemeInput, ThemePrepared } from 'src/themes/types'
 import { mergeThemeVariables } from '../../../../../src/lib/mergeThemes'
-import { ThemeContext } from '../../../context/theme-context'
+import { ThemeContext } from '../../../context/ThemeContext'
 import CodeSnippet from '../../CodeSnippet'
 
 export interface ComponentExampleProps
   extends RouteComponentProps<any, any>,
-    ComponentSourceManagerRenderProps {
+    ComponentSourceManagerRenderProps,
+    ExampleContextValue {
   title: React.ReactNode
   description?: React.ReactNode
   examplePath: string
@@ -60,44 +61,23 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
   kebabExamplePath: string
   KnobsComponent: any
 
-  state = {
-    knobs: {},
-    themeName: 'teams',
-    componentVariables: {},
-    handleMouseLeave: _.noop,
-    handleMouseMove: _.noop,
-    showCode: false,
-    showRtl: false,
-    showTransparent: false,
-    showVariables: false,
-    isHovering: false,
-    copiedCode: false,
-  }
-
-  static contextTypes = {
-    onPassed: PropTypes.func,
-  }
-
-  static propTypes = {
-    children: PropTypes.node,
-    description: PropTypes.node,
-    examplePath: PropTypes.string.isRequired,
-    history: PropTypes.object.isRequired,
-    location: PropTypes.object.isRequired,
-    match: PropTypes.object.isRequired,
-    title: PropTypes.node,
-    themeName: PropTypes.string,
-  }
-
-  componentWillMount() {
-    const { examplePath } = this.props
-    this.anchorName = examplePathToHash(examplePath)
+  constructor(props) {
+    super(props)
 
-    this.setState({
+    this.anchorName = examplePathToHash(props.examplePath)
+    this.state = {
       handleMouseLeave: this.handleMouseLeave,
       handleMouseMove: this.handleMouseMove,
+      knobs: this.getDefaultKnobsValue(),
       showCode: this.isActiveHash(),
-    })
+      themeName: 'teams',
+      componentVariables: {},
+      showRtl: false,
+      showTransparent: false,
+      showVariables: false,
+      isHovering: false,
+      copiedCode: false,
+    }
   }
 
   componentWillReceiveProps(nextProps: ComponentExampleProps) {
@@ -205,7 +185,7 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
   handlePass = () => {
     const { title } = this.props
 
-    if (title) _.invoke(this.context, 'onPassed', null, this.props)
+    if (title) this.props.onExamplePassed(this.anchorName)
   }
 
   copySourceCode = () => {
@@ -265,16 +245,21 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
     return this.KnobsComponent
   }
 
-  getKnobsValue = () => {
+  getDefaultKnobsValue = (overrides = {}) => {
     const Knobs = this.getKnobsComponent()
 
-    return Knobs ? { ...Knobs.defaultProps, ...this.state.knobs } : null
+    return Knobs ? { ...Knobs.defaultProps, overrides } : null
   }
 
   renderKnobs = () => {
     const Knobs = this.getKnobsComponent()
 
-    return Knobs ? <Knobs {...this.getKnobsValue()} onKnobChange={this.handleKnobChange} /> : null
+    return Knobs ? (
+      <Knobs
+        {...this.getDefaultKnobsValue(this.state.knobs)}
+        onKnobChange={this.handleKnobChange}
+      />
+    ) : null
   }
 
   getDisplayName = () => this.props.examplePath.split('/')[1]
@@ -633,9 +618,15 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
 const ComponentExampleWithTheme = props => (
   <ThemeContext.Consumer>
     {({ themeName }) => (
-      <ComponentSourceManager examplePath={props.examplePath}>
-        {codeProps => <ComponentExample {...props} {...codeProps} themeName={themeName} />}
-      </ComponentSourceManager>
+      <ExampleContext.Consumer>
+        {exampleProps => (
+          <ComponentSourceManager examplePath={props.examplePath}>
+            {codeProps => (
+              <ComponentExample {...props} {...exampleProps} {...codeProps} themeName={themeName} />
+            )}
+          </ComponentSourceManager>
+        )}
+      </ExampleContext.Consumer>
     )}
   </ThemeContext.Consumer>
 )

docs/src/components/ComponentDoc/ComponentSourceManager/ComponentSourceManager.ts

@@ -78,7 +78,7 @@ export default class ComponentSourceManager extends React.Component<
     const sourceCodes = componentAPIs[currentCodeAPI].sourceCode
     const originalCode = sourceCodes[currentCodeLanguage]
 
-    const currentCode = storedCode || originalCode
+    const currentCode = typeof storedCode === 'string' ? storedCode : originalCode
     const currentCodePath = examplePath + componentAPIs[currentCodeAPI].fileSuffix
 
     const prettierParser = currentCodeLanguage === 'ts' ? 'typescript' : 'babylon'

docs/src/components/Sidebar/Sidebar.tsx

@@ -10,7 +10,7 @@ import { Icon, Input as SemanticUIInput, Menu } from 'semantic-ui-react'
 import Logo from 'docs/src/components/Logo/Logo'
 import { getComponentPathname } from 'docs/src/utils'
 import { themes } from '@stardust-ui/react'
-import { ThemeContext } from '../../context/theme-context'
+import { ThemeContext } from '../../context/ThemeContext'
 import { constants } from 'src/lib'
 
 type ComponentMenuItem = { displayName: string; type: string }

docs/src/context/ExampleContext.ts

@@ -0,0 +1,14 @@
+import * as _ from 'lodash'
+import * as React from 'react'
+
+export type ExampleContextValue = {
+  activeAnchorName: string
+  onExamplePassed: (anchorName: string) => void
+}
+
+const ExampleContext = React.createContext<ExampleContextValue>({
+  activeAnchorName: '',
+  onExamplePassed: _.noop,
+})
+
+export default ExampleContext