From d4c0c4d8baff96731f39bc9b571e34a31db034d9 Mon Sep 17 00:00:00 2001 From: Alex Cornejo Date: Sun, 28 Aug 2016 22:33:45 -0700 Subject: [PATCH] Add app_bar title, leftIcon and rightIcon props. Here we add some basic default functionality for the most common use cases of the AppBar component. It is still possible to provide and style your own elements through children props, but for most use cases the props will help reduce the amount of boilerplate. --- components/app_bar/AppBar.js | 33 ++++++++++++++++++++++++++++++--- components/app_bar/index.d.ts | 32 ++++++++++++++++++++++++++++++++ components/app_bar/readme.md | 27 ++++++++++++++++++--------- components/app_bar/theme.scss | 21 +++++++++++++++++++++ spec/components/app_bar.js | 20 ++++++++++++++++++++ spec/components/layout.js | 8 ++------ spec/root.js | 26 ++++++++++++++++---------- 7 files changed, 139 insertions(+), 28 deletions(-) create mode 100644 spec/components/app_bar.js diff --git a/components/app_bar/AppBar.js b/components/app_bar/AppBar.js index bfbef63b..bd2b27b1 100644 --- a/components/app_bar/AppBar.js +++ b/components/app_bar/AppBar.js @@ -2,16 +2,29 @@ import React, { PropTypes } from 'react'; import classnames from 'classnames'; import { themr } from 'react-css-themr'; import { APP_BAR } from '../identifiers.js'; +import FontIcon from '../font_icon/FontIcon.js'; -const AppBar = ({ theme, ...props }) => { +const AppBar = ({ theme, title, ...props }) => { const className = classnames(theme.appBar, { [theme.fixed]: props.fixed, [theme.flat]: props.flat }, props.className); + const { leftIcon, onLeftIconClick, rightIcon, onRightIconClick } = props; return (
+ {leftIcon ? : null + } + {title ?

{title}

: null} {props.children} + {rightIcon ? : null + }
); }; @@ -21,11 +34,25 @@ AppBar.propTypes = { className: PropTypes.string, fixed: PropTypes.bool, flat: PropTypes.bool, + leftIcon: PropTypes.oneOfType( + PropTypes.string, + PropTypes.element + ), + onLeftIconClick: PropTypes.func, + onRightIconClick: PropTypes.func, + rightIcon: PropTypes.oneOfType( + PropTypes.string, + PropTypes.element + ), theme: PropTypes.shape({ appBar: PropTypes.string, + leftIcon: PropTypes.string, + rightIcon: PropTypes.string, fixed: PropTypes.string, - flat: PropTypes.string - }) + flat: PropTypes.string, + title: PropTypes.string + }), + title: PropTypes.string }; AppBar.defaultProps = { diff --git a/components/app_bar/index.d.ts b/components/app_bar/index.d.ts index 35fda69e..634b0171 100644 --- a/components/app_bar/index.d.ts +++ b/components/app_bar/index.d.ts @@ -13,6 +13,18 @@ export interface AppBarTheme { * Added to the root element when the app bar is flat. */ flat?: string; + /** + * Used as the app bar title. + */ + title ?: string; + /** + * Added to the left icon app bar element. + */ + leftIcon?: string; + /** + * Added to the right icon app bar element. + */ + rightIcon?: string; } interface AppBarProps extends __ReactToolbox.Props { @@ -30,6 +42,26 @@ interface AppBarProps extends __ReactToolbox.Props { * @default false */ flat?: boolean; + /** + * If it exists it is used as the AppBar title + */ + title?: string; + /** + * If it exists it is used as the AppBar left icon + */ + leftIcon?: string; + /** + * Called when the left icon is clicked + */ + onLeftIconClick?: Function; + /** + * If it exists it is used as the AppBar right icon + */ + rightIcon?: string; + /** + * Called when the righticon is clicked + */ + onRightIconClick?: Function; /** * Classnames object defining the component style. */ diff --git a/components/app_bar/readme.md b/components/app_bar/readme.md index 24eea0e8..5cb3c279 100644 --- a/components/app_bar/readme.md +++ b/components/app_bar/readme.md @@ -15,19 +15,28 @@ const AppBarTest = () => ( If you want to provide a theme via context, the component key is `RTAppBar`. +The `AppBar` component provides properties for the common use cases of `title`, `leftIcon` and `rightIcon`. However, you can also override these with your own content by not specifying these and instead provide children elements, as shown in the example. + ## Properties | Name | Type | Default | Description| |:-----|:-----|:-----|:-----| -| `className` | `String` | `''` | Set a class for the root component.| -| `fixed` | `Bool` | `false` | Determine if the bar should have position `fixed` or `relative`.| -| `flat` | `Bool` | `false` | If true, the AppBar shows a shadow.| -| `theme` | `Object` | `null` | Classnames object defining the component style.| +| `className` | `String` | `''` | Set a class for the root component.| +| `fixed` | `Bool` | `false` | Determine if the bar should have position `fixed` or `relative`.| +| `flat` | `Bool` | `false` | If true, the AppBar shows a shadow.| +| `theme` | `Object` | `null` | Classnames object defining the component style.| +| `title` | `String` | `null` | Title used for the appbar.| +| `leftIcon` | `String` | `null` | Left icon.| +| `onLeftIconClick` | `Function` | `null` | Called on left icon click event.| +| `rightIcon` | `String` | `null` | Right icon.| +| `onRightIconClick` | `Function` | `null` | Called on right icon click event.| ## Theme -| Name | Description| -|:---------|:-----------| -| `appBar` | Used for the component root element.| -| `fixed` | Added to the root element when the app bar is fixed.| -| `flat` | Added to the root element when the app bar is flat.| +| Name | Description| +|:------------|:-----------| +| `appBar` | Used for the component root element.| +| `fixed` | Added to the root element when the app bar is fixed.| +| `title` | Added to the title element of the app bar.| +| `leftIcon` | Added to the left icon element when the app bar.| +| `rightIcon` | Added to the right icon element when the app bar.| diff --git a/components/app_bar/theme.scss b/components/app_bar/theme.scss index 56147f64..f0d55d0c 100644 --- a/components/app_bar/theme.scss +++ b/components/app_bar/theme.scss @@ -35,4 +35,25 @@ a { color: $appbar-contrast; } + + .title { + flex-grow: 1; + font-size: 1.8 * $unit; + font-weight: bold; + > small { + font-size: 1.8 * $unit; + font-weight: normal; + } + } + + .leftIcon { + padding: 1.2 * $unit 1.2 * $unit 1.2 * $unit 0; + text-align: left; + } + + .rightIcon { + padding: 1.2 * $unit 0 1.2 * $unit 1.2 * $unit; + margin-left: auto; + text-align: right; + } } diff --git a/spec/components/app_bar.js b/spec/components/app_bar.js new file mode 100644 index 00000000..ba13fa29 --- /dev/null +++ b/spec/components/app_bar.js @@ -0,0 +1,20 @@ +import React from 'react'; +import AppBar from '../../components/app_bar'; + +const AppBarTest = () => ( +
+
AppBar
+
+ +
+ +
+ +
+ + Custom content + +
+); + +export default AppBarTest; diff --git a/spec/components/layout.js b/spec/components/layout.js index 4190a465..6d74aa18 100644 --- a/spec/components/layout.js +++ b/spec/components/layout.js @@ -75,17 +75,13 @@ class LayoutTest extends React.Component {
- -
Drawer
- +
    {drawerItems}
- - - +
diff --git a/spec/root.js b/spec/root.js index ee5c3303..ddf1a6b9 100644 --- a/spec/root.js +++ b/spec/root.js @@ -3,6 +3,7 @@ import '../components/commons.scss'; import React from 'react'; import AppBar from '../components/app_bar'; import Autocomplete from './components/autocomplete'; +import AppBarTest from './components/app_bar'; import Avatar from './components/avatar'; import FontIcon from './components/font_icon'; import Button from './components/button'; @@ -29,19 +30,24 @@ import Tabs from './components/tabs'; import Tooltip from './components/tooltip'; import style from './style'; +const RootAppBar = () => ( + +

React Toolbox Spec {VERSION}

+ {window.href = 'http://react-toolbox';}} + /> + +); + const Root = () => (
- -

React Toolbox Spec {VERSION}

- {window.href = 'http://react-toolbox';}} - /> - + +