- {title && }
+ {title && }
{description && {description}
}
{children && (
@@ -379,3 +446,5 @@ export default class ComponentExample extends Component {
)
}
}
+
+export default withRouter(ComponentExample)
diff --git a/docs/app/Components/ComponentDoc/ComponentProps.js b/docs/app/Components/ComponentDoc/ComponentProps.js
index 89234697c9..63bc7d16d9 100644
--- a/docs/app/Components/ComponentDoc/ComponentProps.js
+++ b/docs/app/Components/ComponentDoc/ComponentProps.js
@@ -1,12 +1,28 @@
import _ from 'lodash'
import React, { Component, PropTypes } from 'react'
-import { Icon, Popup, Table } from 'src'
+import { Header, Icon, Popup, Table } from 'src'
import { SUI } from 'src/lib'
-const descriptionExtraStyle = {
- fontSize: '0.95em',
- color: '#777',
+const extraDescriptionStyle = {
+ color: '#666',
+}
+const extraDescriptionContentStyle = {
+ marginLeft: '0.5em',
+}
+
+const Extra = ({ title, children, inline, ...rest }) => (
+
+
{title}
+
+ {children}
+
+
+)
+Extra.propTypes = {
+ children: PropTypes.node,
+ inline: PropTypes.bool,
+ title: PropTypes.node,
}
const getTagType = tag => tag.type.type === 'AllLiteral' ? 'any' : tag.type.name
@@ -71,24 +87,28 @@ export default class ComponentProps extends Component {
const paramSignature = params
.map(param => `${param.name}: ${getTagType(param)}`)
+ // prevent object properties from showing as individual params
+ .filter(p => !p.includes('.'))
.join(', ')
- const tagDescriptions = _.compact([...params, returns]).map(tag => (
-
- {tag.name || tag.title} - {tag.description}
-
- ))
-
- const signature = (
- {item.name}({paramSignature}){returns ? `: ${getTagType(returns)}` : ''}
- )
+ const tagDescriptionRows = _.compact([...params, returns]).map(tag => {
+ const name = tag.name || tag.title
+ return (
+
+
+ {name}
+
+
+ {tag.description}
+
+
+ )
+ })
return (
-
- Signature:
- {signature}
- {tagDescriptions}
-
+ {item.name}({paramSignature}){returns ? `: ${getTagType(returns)}` : ''}}>
+ {tagDescriptionRows}
+
)
}
@@ -104,7 +124,7 @@ export default class ComponentProps extends Component {
if (item.type !== '{enum}') return
const { showEnumsFor } = this.state
- const truncateAt = 30
+ const truncateAt = 10
if (!item.value) return null
@@ -112,37 +132,37 @@ export default class ComponentProps extends Component {
return accumulator.concat(this.expandEnums(_.trim(v.value || v, '.\'')))
}, [])
+ const valueElements = _.map(values, val => {val}
)
+
// show all if there are few
if (values.length < truncateAt) {
return (
-
- Enums: {values.join(', ')}
-
+
+ {valueElements}
+
)
}
// add button to show more when there are many values and it is not toggled
if (!showEnumsFor[item.name]) {
return (
-
- Enums:
+
Show all {values.length}
- {values.slice(0, truncateAt - 1).join(', ')}...
-
+ {valueElements.slice(0, truncateAt - 1)}...
+
)
}
// add "show more" button when there are many
return (
-
- Enums:
+
Show less
- {values.join(', ')}
-
+ {valueElements}
+
)
}
@@ -153,9 +173,7 @@ export default class ComponentProps extends Component {
{this.renderDefaultValue(item)}
{item.type}
- {item.description && (
- {item.description}
- )}
+ {item.description && {item.description}
}
{this.renderFunctionSignature(item)}
{this.renderEnums(item)}
@@ -188,7 +206,7 @@ export default class ComponentProps extends Component {
}), 'name')
return (
-
+
Name
diff --git a/docs/app/Components/ExternalExampleLayout.js b/docs/app/Components/ExternalExampleLayout.js
new file mode 100644
index 0000000000..00bf67abad
--- /dev/null
+++ b/docs/app/Components/ExternalExampleLayout.js
@@ -0,0 +1,34 @@
+import 'semantic-ui-css/semantic.css'
+import _ from 'lodash/fp'
+import React, { Component, PropTypes } from 'react'
+
+import PageNotFound from '../Views/PageNotFound'
+import { exampleContext } from 'docs/app/utils'
+
+const exampleKeys = exampleContext.keys()
+
+export default class ExternalExampleLayout extends Component {
+ static propTypes = {
+ children: PropTypes.node,
+ history: PropTypes.object.isRequired,
+ location: PropTypes.object.isRequired,
+ match: PropTypes.shape({
+ params: PropTypes.shape({
+ kebabCaseName: PropTypes.string.isRequired,
+ }),
+ }).isRequired,
+ }
+
+ render() {
+ const { kebabCaseName } = this.props.match.params
+ const componentName = _.startCase(kebabCaseName).replace(/ /g, '')
+
+ const componentKey = _.find(_.endsWith(`${componentName}.js`), exampleKeys)
+ if (!componentKey) return
+
+ const ExampleComponent = exampleContext(componentKey).default
+ if (!ExampleComponent) return
+
+ return
+ }
+}
diff --git a/docs/app/Components/Layout.js b/docs/app/Components/Layout.js
index 839fe2b016..0a2d3b2afa 100644
--- a/docs/app/Components/Layout.js
+++ b/docs/app/Components/Layout.js
@@ -5,6 +5,7 @@ import React, { Component, PropTypes } from 'react'
import Sidebar from 'docs/app/Components/Sidebar/Sidebar'
import style from 'docs/app/Style'
import TAAttribution from 'docs/app/Components/TAAttribution/TAAttribution'
+import { scrollToAnchor } from 'docs/app/utils'
const anchors = new AnchorJS({
icon: '#',
@@ -28,6 +29,9 @@ export default class Layout extends Component {
}
resetPage = () => {
+ // only reset the page when changing routes
+ if (this.pathname === location.pathname) return
+
clearTimeout(this.scrollStartTimeout)
scrollTo(0, 0)
@@ -36,30 +40,8 @@ export default class Layout extends Component {
anchors.remove([1, 2, 3, 4, 5, 6].map(n => `.rendered-example h${n}`).join(', '))
anchors.remove('.no-anchor')
- this.scrollStartTimeout = setTimeout(this.scrollToAnchor, 500)
- }
-
- scrollToAnchor = () => {
- const anchor = location.hash && document.querySelector(location.hash)
-
- // no scroll to target, stop
- if (!anchor) return
-
- const elementTop = Math.round(anchor.getBoundingClientRect().top)
-
- // scrolled to element, stop
- if (elementTop === 0) return
-
- // hit max scroll boundaries, stop
- const isScrolledToTop = scrollY === 0
- const isScrolledToBottom = scrollY + document.body.clientHeight === document.body.scrollHeight
- const scrollStep = Math.ceil((Math.abs(elementTop / 8))) * Math.sign(elementTop)
-
- if (isScrolledToBottom && scrollStep > 0 || isScrolledToTop && scrollStep < 0) return
-
- // more scrolling to do!
- scrollBy(0, scrollStep)
- requestAnimationFrame(this.scrollToAnchor)
+ this.scrollStartTimeout = setTimeout(scrollToAnchor, 500)
+ this.pathname = location.pathname
}
render() {
diff --git a/docs/app/routes.js b/docs/app/routes.js
index f50c7105e9..17582cfd58 100644
--- a/docs/app/routes.js
+++ b/docs/app/routes.js
@@ -3,9 +3,11 @@ import {
BrowserRouter,
Route,
Redirect,
+ Switch,
} from 'react-router-dom'
import Root from './Components/Root'
import Layout from './Components/Layout'
+import ExternalExampleLayout from './Components/ExternalExampleLayout'
import Introduction from './Views/Introduction'
import Usage from './Views/Usage'
import PageNotFound from './Views/PageNotFound'
@@ -14,13 +16,18 @@ const RedirectToIntro = () =>
const Router = () => (
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
)
diff --git a/docs/app/utils.js b/docs/app/utils.js
index 4905daa62e..aa5d514180 100644
--- a/docs/app/utils.js
+++ b/docs/app/utils.js
@@ -24,3 +24,26 @@ export const repoURL = 'https://github.com/Semantic-Org/Semantic-UI-React'
export const semanticUIDocsURL = 'https://semantic-ui.com/'
export const semanticUIRepoURL = 'https://github.com/Semantic-Org/Semantic-UI'
export const semanticUICSSRepoURL = 'https://github.com/Semantic-Org/Semantic-UI-CSS'
+
+export const scrollToAnchor = () => {
+ const anchor = location.hash && document.querySelector(location.hash)
+
+ // no scroll to target, stop
+ if (!anchor) return
+
+ const elementTop = Math.round(anchor.getBoundingClientRect().top)
+
+ // scrolled to element, stop
+ if (elementTop === 0) return
+
+ // hit max scroll boundaries, stop
+ const isScrolledToTop = scrollY === 0
+ const isScrolledToBottom = scrollY + document.body.clientHeight === document.body.scrollHeight
+ const scrollStep = Math.ceil((Math.abs(elementTop / 8))) * Math.sign(elementTop)
+
+ if (isScrolledToBottom && scrollStep > 0 || isScrolledToTop && scrollStep < 0) return
+
+ // more scrolling to do!
+ scrollBy(0, scrollStep)
+ requestAnimationFrame(scrollToAnchor)
+}
diff --git a/src/addons/Portal/Portal.js b/src/addons/Portal/Portal.js
index 09ed29dc09..044d980920 100644
--- a/src/addons/Portal/Portal.js
+++ b/src/addons/Portal/Portal.js
@@ -15,6 +15,9 @@ const debug = makeDebugger('portal')
/**
* A component that allows you to render children outside their parent.
* @see Modal
+ * @see Popup
+ * @see Dimmer
+ * @see Confirm
*/
class Portal extends Component {
static propTypes = {
diff --git a/src/collections/Menu/Menu.js b/src/collections/Menu/Menu.js
index 1d3c5cb28a..aaca9c9e32 100644
--- a/src/collections/Menu/Menu.js
+++ b/src/collections/Menu/Menu.js
@@ -66,7 +66,7 @@ class Menu extends Component {
/** A vertical menu may take the size of its container. */
fluid: PropTypes.bool,
- /** A menu may have labeled icons. */
+ /** A menu may have just icons (bool) or labeled icons. */
icon: PropTypes.oneOfType([
PropTypes.bool,
PropTypes.oneOf(['labeled']),