From 71ed21cb04232667e33e4b4c9c06e170e424bc73 Mon Sep 17 00:00:00 2001 From: Zadielerick Date: Tue, 5 Jan 2016 16:01:47 -0600 Subject: [PATCH] Update Documentation for Refresh Indicator --- docs/src/app/app-routes.jsx | 4 +- .../RefreshIndicator/ExampleLoading.jsx | 32 +++++ .../RefreshIndicator/ExampleSimple.jsx | 48 +++++++ .../components/RefreshIndicator/Page.jsx | 26 ++++ .../components/RefreshIndicator/README.md | 6 + .../pages/components/refresh-indicator.jsx | 132 ------------------ .../raw-code/refresh-indicator-code.txt | 9 -- src/refresh-indicator.jsx | 33 +++++ 8 files changed, 147 insertions(+), 143 deletions(-) create mode 100644 docs/src/app/components/pages/components/RefreshIndicator/ExampleLoading.jsx create mode 100644 docs/src/app/components/pages/components/RefreshIndicator/ExampleSimple.jsx create mode 100644 docs/src/app/components/pages/components/RefreshIndicator/Page.jsx create mode 100644 docs/src/app/components/pages/components/RefreshIndicator/README.md delete mode 100644 docs/src/app/components/pages/components/refresh-indicator.jsx delete mode 100644 docs/src/app/components/raw-code/refresh-indicator-code.txt diff --git a/docs/src/app/app-routes.jsx b/docs/src/app/app-routes.jsx index 8fbe82249fe4dc..1801fa0ed0ee81 100644 --- a/docs/src/app/app-routes.jsx +++ b/docs/src/app/app-routes.jsx @@ -39,7 +39,7 @@ import Menus from './components/pages/components/menus'; import Paper from './components/pages/components/paper'; import Popover from './components/pages/components/popover'; import Progress from './components/pages/components/progress'; -import RefreshIndicator from './components/pages/components/refresh-indicator'; +import RefreshIndicatorPage from './components/pages/components/RefreshIndicator/Page'; import SelectField from './components/pages/components/SelectField/Page'; import Sliders from './components/pages/components/sliders'; import SnackbarPage from './components/pages/components/Snackbar/Page'; @@ -100,7 +100,7 @@ const AppRoutes = ( - + diff --git a/docs/src/app/components/pages/components/RefreshIndicator/ExampleLoading.jsx b/docs/src/app/components/pages/components/RefreshIndicator/ExampleLoading.jsx new file mode 100644 index 00000000000000..edb5a9c5e7844b --- /dev/null +++ b/docs/src/app/components/pages/components/RefreshIndicator/ExampleLoading.jsx @@ -0,0 +1,32 @@ +import React from 'react'; +import RefreshIndicator from 'material-ui/lib/refresh-indicator'; + +const style = { + container: { + position: 'relative', + }, + refresh: { + display: 'inline-block', + position: 'relative', + }, +}; + +const RefreshIndicatorExampleLoading = () => ( +
+ + +
+); + +export default RefreshIndicatorExampleLoading; diff --git a/docs/src/app/components/pages/components/RefreshIndicator/ExampleSimple.jsx b/docs/src/app/components/pages/components/RefreshIndicator/ExampleSimple.jsx new file mode 100644 index 00000000000000..7a2abe772ff864 --- /dev/null +++ b/docs/src/app/components/pages/components/RefreshIndicator/ExampleSimple.jsx @@ -0,0 +1,48 @@ +import React from 'react'; +import RefreshIndicator from 'material-ui/lib/refresh-indicator'; + +const style = { + container: { + position: 'relative', + }, + refresh: { + display: 'inline-block', + position: 'relative', + }, +}; + +const RefreshIndicatorExampleSimple = () => ( +
+ + + + +
+); + +export default RefreshIndicatorExampleSimple; diff --git a/docs/src/app/components/pages/components/RefreshIndicator/Page.jsx b/docs/src/app/components/pages/components/RefreshIndicator/Page.jsx new file mode 100644 index 00000000000000..2e80acc3aed9a0 --- /dev/null +++ b/docs/src/app/components/pages/components/RefreshIndicator/Page.jsx @@ -0,0 +1,26 @@ +import React from 'react'; +import CodeExample from '../../../CodeExample'; +import PropTypeDescription from '../../../PropTypeDescription'; +import MarkdownElement from '../../../MarkdownElement'; + +import refreshIndicatorReadmeText from './README'; +import refreshIndicatorCode from '!raw!material-ui/lib/refresh-indicator'; +import RefreshIndicatorExampleSimple from './ExampleSimple'; +import refreshIndicatorExampleSimpleCode from '!raw!./ExampleSimple'; +import RefreshIndicatorExampleLoading from './ExampleLoading'; +import refreshIndicatorExampleLoadingCode from '!raw!./ExampleLoading'; + +const RefreshIndicatorPage = () => ( +
+ + + + + + + + +
+); + +export default RefreshIndicatorPage; diff --git a/docs/src/app/components/pages/components/RefreshIndicator/README.md b/docs/src/app/components/pages/components/RefreshIndicator/README.md new file mode 100644 index 00000000000000..be64447ee9ffd7 --- /dev/null +++ b/docs/src/app/components/pages/components/RefreshIndicator/README.md @@ -0,0 +1,6 @@ +## Refresh Indicator +The [refresh indicator](https://www.google.com/design/spec/components/progress-activity.html#) +is used when showing an item is loading. It is kept hidden from the interface until it's +status prop is changed to `loading` or `ready`. + +### Examples diff --git a/docs/src/app/components/pages/components/refresh-indicator.jsx b/docs/src/app/components/pages/components/refresh-indicator.jsx deleted file mode 100644 index f74a46b00d1108..00000000000000 --- a/docs/src/app/components/pages/components/refresh-indicator.jsx +++ /dev/null @@ -1,132 +0,0 @@ -import React from 'react'; -import {RefreshIndicator, Paper} from 'material-ui'; -import ComponentDoc from '../../component-doc'; -import Code from 'refresh-indicator-code'; -import CodeExample from '../../CodeExample'; -import CodeBlock from '../../CodeExample/CodeBlock'; - -let RefreshIndicatorPage = React.createClass({ - - render() { - - let componentInfo = [ - { - name: 'Props', - infoArray: [ - { - name: 'percentage', - type: 'number', - header: 'default: 0', - desc: 'The confirmation progress to fetch data. Max value is 100', - }, - { - name: 'size', - type: 'number', - header: 'default: 40', - desc: 'Size in pixels.', - }, - { - name: 'status', - type: 'oneOf ["ready", "loading", "hide"]', - header: 'default: hide', - desc: `The display status of the indicator. - If the status is "ready", the indicator will display the ready state arrow. - If the status is "loading", it will display the loading progress indicator. - If the status is "hide", the indicator will be hidden.`, - }, - { - name: 'style', - type: 'object', - header: 'optional', - desc: 'Override the inline-styles of the indicator\'s root element.', - }, - { - name: 'color', - type: 'string', - header: 'optional', - desc: `Override the theme's color of the indicator while it's - status is "ready" or it's percentage is less than 100.`, - }, - { - name: 'loadingColor', - type: 'string', - header: 'optional', - desc: `Override the theme's color of the indicator - while it's status is "loading" or it's percentage is 100.`, - }, - { - name: 'top', - type: 'number', - header: 'required', - desc: 'The absolute right position of the indicator in pixels.', - }, - { - name: 'left', - type: 'number', - header: 'required', - desc: 'The absolute left position of the indicator in pixels.', - }, - ], - }, - ]; - - - return ( - - - - - { - '//Import statement:\nimport RefreshIndicator from \'material-ui/lib/refresh-indicator\';\n\n' + - '//See material-ui/lib/index.js for more\n' - } - - - - -
-

- Ready status -

- - - - -

- Loading status -

- - -
- - - ); - }, - -}); - -export default RefreshIndicatorPage; diff --git a/docs/src/app/components/raw-code/refresh-indicator-code.txt b/docs/src/app/components/raw-code/refresh-indicator-code.txt deleted file mode 100644 index 813537e8087fc7..00000000000000 --- a/docs/src/app/components/raw-code/refresh-indicator-code.txt +++ /dev/null @@ -1,9 +0,0 @@ -// Ready status - - - - -// Loading status - - diff --git a/src/refresh-indicator.jsx b/src/refresh-indicator.jsx index 742b7dd4bc7fcb..0bb35d264fed6d 100644 --- a/src/refresh-indicator.jsx +++ b/src/refresh-indicator.jsx @@ -11,17 +11,50 @@ const VIEWBOX_SIZE = 32; const RefreshIndicator = React.createClass({ propTypes: { + /** + * Override the theme's color of the indicator while it's status is + * "ready" or it's percentage is less than 100. + */ color: React.PropTypes.string, + + /** + * The absolute left position of the indicator in pixels. + */ left: React.PropTypes.number.isRequired, + + /** + * Override the theme's color of the indicator while + * it's status is "loading" or it's percentage is 100. + */ loadingColor: React.PropTypes.string, + + /** + * The confirmation progress to fetch data. Max value is 100. + */ percentage: React.PropTypes.number, + + /** + * Size in pixels. + */ size: React.PropTypes.number, + + /** + * The display status of the indicator. If the status is + * "ready", the indicator will display the ready state + * arrow. If the status is "loading", it will display + * the loading progress indicator. If the status is "hide", + * the indicator will be hidden. + */ status: React.PropTypes.oneOf(['ready', 'loading', 'hide']), /** * Override the inline-styles of the root element. */ style: React.PropTypes.object, + + /** + * The absolute right position of the indicator in pixels. + */ top: React.PropTypes.number.isRequired, },