Merge pull request #97 from dmapper/f-olvipi-breadcrumbs

[UI] add Breadcrumbs

packages/ui/components/Breadcrumbs/index.js

@@ -0,0 +1,69 @@
+import React, { useMemo } from 'react'
+import propTypes from 'prop-types'
+import { observer, emit } from 'startupjs'
+import Row from '../Row'
+import Span from '../Span'
+import Icon from '../Icon'
+import config from '../../config/rootConfig'
+
+const { colors } = config
+
+function Breadcrumbs ({
+  style,
+  routes,
+  separator,
+  size,
+  color,
+  textColor,
+  separatorColor,
+  iconColor
+}) {
+  const _color = useMemo(() => colors[color] || color, [color])
+  const _textColor = useMemo(() => colors[textColor] || textColor || _color, [textColor, _color])
+  const _separatorColor = useMemo(() => colors[separatorColor] || separatorColor || _color, [separatorColor, _color])
+  const _iconColor = useMemo(() => colors[iconColor] || iconColor || _textColor || _color, [iconColor, _color, _textColor])
+
+  return pug`
+    Row(style=style vAlign='center' wrap)
+      each route, index in routes
+        - const { name, icon, path } = route
+        - const isLastRoute = index === routes.length - 1
+        Row(key=index vAlign='center')
+          Row(vAlign='center' onPress=()=> path && emit('url', path))
+            if icon
+              Icon(icon=icon size=size color=_iconColor)
+            if name
+              Span(
+                style={color: isLastRoute ? colors.mainText : _textColor}
+                size=size
+                bold=isLastRoute
+              )= name
+          if !isLastRoute
+            Span(size=size style={color: _separatorColor})
+              | &nbsp#{separator}&nbsp
+  `
+}
+
+Breadcrumbs.defaultProps = {
+  routes: [],
+  separator: '/',
+  size: 's',
+  color: 'mainText'
+}
+
+Breadcrumbs.propTypes = {
+  style: propTypes.oneOfType([propTypes.object, propTypes.array]),
+  routes: propTypes.arrayOf(propTypes.shape({
+    name: propTypes.string,
+    icon: propTypes.object,
+    path: propTypes.string
+  })).isRequired,
+  separator: propTypes.string,
+  size: propTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'xxl']),
+  color: propTypes.string,
+  textColor: propTypes.string,
+  separatorColor: propTypes.string,
+  iconColor: propTypes.string
+}
+
+export default observer(Breadcrumbs)

packages/ui/index.js

@@ -1,6 +1,7 @@
 export { default as Alert } from './components/Alert'
 export { default as Avatar } from './components/Avatar'
 export { default as Br } from './components/Br'
+export { default as Breadcrumbs } from './components/Breadcrumbs'
 export { default as Button } from './components/Button'
 export { default as Card } from './components/Card'
 export { default as Collapse } from './components/Collapse'