From 4b0b1c5d830e8778fdae0e20af9247e9cd09bf53 Mon Sep 17 00:00:00 2001 From: Simon Mollweide Date: Fri, 23 Mar 2018 22:33:53 +0100 Subject: [PATCH] feat(presets): add preset and example for bottom left --- README.md | 1 + src/gh-pages/App/App.js | 2 + src/gh-pages/AppFrame/AppDrawer/AppDrawer.js | 3 + .../PageExampleBottomLeft.js | 93 +++++++++++++++++++ src/presets/presetFixedBottomLeft.js | 52 +++++++++++ 5 files changed, 151 insertions(+) create mode 100644 src/gh-pages/PageExampleBottomLeft/PageExampleBottomLeft.js create mode 100644 src/presets/presetFixedBottomLeft.js diff --git a/README.md b/README.md index 0c3c869..9925eb8 100644 --- a/README.md +++ b/README.md @@ -81,6 +81,7 @@ export default withStyles(presetFixedBottomRight)(MyMaterialUiSpeedDial); - [Basic](https://smollweide.github.io/material-ui-speed-dial/#/example-basic) - [Outer rim button](https://smollweide.github.io/material-ui-speed-dial/#/example-outer-rim-button) - [Close onClick item](https://smollweide.github.io/material-ui-speed-dial/#/example-close-on-click-item) +- [Bottom left](https://smollweide.github.io/material-ui-speed-dial/#/example-bottom-left) ## Shields [![coverage status](https://coveralls.io/repos/github/smollweide/material-ui-speed-dial/badge.svg?branch=master)](https://coveralls.io/github/smollweide/material-ui-speed-dial?branch=master) diff --git a/src/gh-pages/App/App.js b/src/gh-pages/App/App.js index 6edcd46..e84664e 100644 --- a/src/gh-pages/App/App.js +++ b/src/gh-pages/App/App.js @@ -8,6 +8,7 @@ import AppFrame from '../AppFrame/AppFrame'; import PageHome from '../PageHome/PageHome'; import PageGettingStarted from '../PageGettingStarted/PageGettingStarted'; import PageExampleBasic from '../PageExampleBasic/PageExampleBasic'; +import PageExampleBottomLeft from '../PageExampleBottomLeft/PageExampleBottomLeft'; import PageExampleOuterRimButton from '../PageExampleOuterRimButton/PageExampleOuterRimButton'; import PageExampleCloseOnClickItem from '../PageExampleCloseOnClickItem/PageExampleCloseOnClickItem'; @@ -68,6 +69,7 @@ class App extends Component { + diff --git a/src/gh-pages/AppFrame/AppDrawer/AppDrawer.js b/src/gh-pages/AppFrame/AppDrawer/AppDrawer.js index 6212e47..dc88452 100644 --- a/src/gh-pages/AppFrame/AppDrawer/AppDrawer.js +++ b/src/gh-pages/AppFrame/AppDrawer/AppDrawer.js @@ -37,6 +37,9 @@ const ListExamples = withRouter(({ history }: ContextRouterType): React$Element< history.push('/example-close-on-click-item')}> + history.push('/example-bottom-left')}> + + )); ListExamples.displayName = 'ListExamples'; diff --git a/src/gh-pages/PageExampleBottomLeft/PageExampleBottomLeft.js b/src/gh-pages/PageExampleBottomLeft/PageExampleBottomLeft.js new file mode 100644 index 0000000..a32e739 --- /dev/null +++ b/src/gh-pages/PageExampleBottomLeft/PageExampleBottomLeft.js @@ -0,0 +1,93 @@ +// @flow +/* eslint no-alert: 0*/ +import React from 'react'; +import { withStyles } from 'material-ui/styles'; +import Button from 'material-ui/Button'; +import Avatar from 'material-ui/Avatar'; + +import AddIcon from 'material-ui-icons/Add'; +import EditIcon from 'material-ui-icons/Edit'; +import LinkIcon from 'material-ui-icons/Link'; + +import SpeedDial, { SpeedDialItem, SpeedDialLabel, SpeedDialBackdrop } from '../../speed-dial'; +import presetFixedBottomLeft from '../../presets/presetFixedBottomLeft'; +import TemplateExample from '../TemplateExample/TemplateExample'; + +// types +import type { + PresetType, + RenderPropsType, + RenderButtonPropsType, + RenderButtonIconPropsType, + RenderOpenedButtonPropsType, + RenderOpenedButtonIconPropsType, + RenderOuterRimButtonPropsType, + RenderOuterRimButtonIconPropsType, + RenderListPropsType, + RenderAvatarPropsType, + RenderLabelPropsType, + RenderBackdropPropsType, +} from '../../../material-ui-speed-dial.js.flow'; + +export type PageExampleBottomLeftPropsType = { + classes: PresetType, +}; + +const PageExampleBottomLeft = ({ classes }: PageExampleBottomLeftPropsType) => { + return ( + + ( + + )} + renderOpenedButton={( + props: RenderOpenedButtonPropsType, + propsIcon: RenderOpenedButtonIconPropsType + ) => ( + + )} + renderOuterRimButton={( + props: RenderOuterRimButtonPropsType, + propsIcon: RenderOuterRimButtonIconPropsType + ) => ( + + )} + renderList={(props: RenderListPropsType) =>
    } + renderBackdrop={(props: RenderBackdropPropsType) => } + > + {(props: RenderPropsType): Array> => [ + C} + > + {(propsLabel: RenderLabelPropsType) => } + , + B} + > + {(propsLabel: RenderLabelPropsType) => } + , + + {(propsLabel: RenderLabelPropsType) => } + , + ]} + + + ); +}; +PageExampleBottomLeft.displayName = 'PageExampleBottomLeft'; + +export default withStyles(presetFixedBottomLeft)(PageExampleBottomLeft); diff --git a/src/presets/presetFixedBottomLeft.js b/src/presets/presetFixedBottomLeft.js new file mode 100644 index 0000000..8c0b6f0 --- /dev/null +++ b/src/presets/presetFixedBottomLeft.js @@ -0,0 +1,52 @@ +// @flow + +import type { PresetRawType } from '../../material-ui-speed-dial.js.flow'; +import type { ThemeType } from '../types/styles'; + +const styles = (theme: ThemeType): PresetRawType => { + return { + root: { + position: 'fixed', + bottom: 0, + left: 0, + zIndex: theme.zIndex.appBar + 2, + }, + button: { + position: 'absolute', + bottom: theme.spacing.unit * 2, + left: theme.spacing.unit * 2, + }, + buttonOuterRim: { + position: 'absolute', + bottom: theme.spacing.unit * 10.8, + left: theme.spacing.unit * 3, + }, + list: { + bottom: theme.spacing.unit * 2.5, + left: 0, + }, + item: { + textAlign: 'left', + }, + firstItem: { + paddingTop: theme.spacing.unit, + }, + avatar: { + top: theme.spacing.unit * 0.7, + left: theme.spacing.unit * 3, + }, + label: { + paddingTop: theme.spacing.unit * 0.5, + paddingRight: theme.spacing.unit, + paddingBottom: theme.spacing.unit * 0.5, + paddingLeft: theme.spacing.unit, + marginLeft: theme.spacing.unit * 9, + }, + backdrop: { + bottom: 0, + left: 0, + }, + }; +}; + +export default styles;