feat(presets): add presetFixedBottomRight and and implement preset usage

smollweide · Feb 25, 2018 · de32049 · de32049
1 parent b492b1c
commit de32049
Show file tree

Hide file tree

Showing 16 changed files with 422 additions and 137 deletions.
diff --git a/material-ui-speed-dial.js.flow b/material-ui-speed-dial.js.flow
@@ -1,5 +1,25 @@
 // @flow
 
+export type PresetRawType = {
+	root: { [key: string]: number | string },
+	button: { [key: string]: number | string },
+	list: { [key: string]: number | string },
+	item: { [key: string]: number | string },
+	firstItem: { [key: string]: number | string },
+	avatar: { [key: string]: number | string },
+	label: { [key: string]: number | string },
+};
+
+export type PresetType = {
+	root: string,
+	button: string,
+	list: string,
+	item: string,
+	firstItem: string,
+	avatar: string,
+	label: string,
+};
+
 export type StateEnumType = 'closed' | 'opening' | 'opened' | 'closing';
 export type SpeedDialStateType = {
 	state: StateEnumType,
@@ -43,15 +63,17 @@ export type SpeedDialLabelPropsType = {
 };
 
 export type SpeedDialItemPropsType = {
-	className?: string,
+	className: string,
+	preset: PresetType,
 	state: StateEnumType,
 	renderAvatar?: (props: RenderAvatarPropsType) => React$Element<*>,
 	children: (props: RenderLabelPropsType) => React$Element<*>,
 };
 
 export type SpeedDialPropsType = {
 	children: (props: RenderPropsType) => React$Node,
-	className: string,
+	className?: string,
+	preset: PresetType,
 	animationDelay?: number,
 	renderButton: (props: RenderButtonPropsType, propsIcon: RenderOpenedButtonIconPropsType) => React$Element<*>,
 	renderOpenedButton?: (

diff --git a/package.json b/package.json
@@ -39,7 +39,8 @@
     "flow-install": "node_modules/.bin/flow-typed install -i dev",
     "prebuild": "rimraf dist",
     "build": "npm-run-all lint flow test check-coverage build:*",
-    "build:babel": "NODE_ENV=release babel ./src/components --out-dir ./dist/components --ignore spec.js",
+    "build:components": "NODE_ENV=release babel ./src/components --out-dir ./dist/components --ignore spec.js",
+    "build:presets": "NODE_ENV=release babel ./src/presets --out-dir ./dist/presets --ignore spec.js",
     "build:index": "BABEL_ENV=es babel ./src/speed-dial.js --out-file ./dist/index.js",
     "prettier": "node_modules/.bin/prettier --write 'src/**/*.js' 'bin/**/*.js' --config package.json",
     "semantic-release": "node_modules/.bin/semantic-release"

diff --git a/public/images/people-01.jpeg b/public/images/people-01.jpeg
diff --git a/public/images/people-03.jpeg b/public/images/people-03.jpeg
diff --git a/public/images/people-07.jpeg b/public/images/people-07.jpeg
diff --git a/public/images/people-08.jpeg b/public/images/people-08.jpeg
diff --git a/public/images/people-09.jpeg b/public/images/people-09.jpeg
diff --git a/src/components/SpeedDial/SpeedDial.js b/src/components/SpeedDial/SpeedDial.js
@@ -24,6 +24,15 @@ export class SpeedDial extends Component<SpeedDialAllPropsType, SpeedDialStateTy
 	static displayName = 'SpeedDial';
 	static defaultProps = {
 		animationDelay: 500,
+		preset: {
+			root: '',
+			button: '',
+			list: '',
+			item: '',
+			firstItem: '',
+			avatar: '',
+			label: '',
+		},
 	};
 
 	state = {
@@ -57,13 +66,13 @@ export class SpeedDial extends Component<SpeedDialAllPropsType, SpeedDialStateTy
 	forceSetState: ForceSetStateType;
 
 	renderButton(): React$Element<*> | Array<React$Element<*>> {
-		const { classes, renderButton, renderOpenedButton } = this.props;
+		const { classes, preset, renderButton, renderOpenedButton } = this.props;
 		const { state } = this.state;
 
 		if (!renderOpenedButton) {
 			return renderButton(
 				{
-					className: `${classes.button}`,
+					className: `${classes.button} ${preset.button}`,
 					onClick: state === STATE.OPENED ? this.handleClose : this.handleOpen,
 				},
 				{
@@ -78,7 +87,9 @@ export class SpeedDial extends Component<SpeedDialAllPropsType, SpeedDialStateTy
 			renderButton(
 				{
 					key: 'closed',
-					className: `${classes.button} ${classes.buttonClosed} ${classes[`buttonClosed--state-${state}`]}`,
+					className: `${classes.button} ${classes.buttonClosed} ${classes[`buttonClosed--state-${state}`]} ${
+						preset.button
+					}`,
 					onClick: this.handleOpen,
 				},
 				{
@@ -90,7 +101,9 @@ export class SpeedDial extends Component<SpeedDialAllPropsType, SpeedDialStateTy
 			renderOpenedButton(
 				{
 					key: 'open',
-					className: `${classes.button} ${classes.buttonOpened} ${classes[`buttonOpened--state-${state}`]}`,
+					className: `${classes.button} ${classes.buttonOpened} ${classes[`buttonOpened--state-${state}`]} ${
+						preset.button
+					}`,
 					onClick: this.handleClose,
 				},
 				{
@@ -103,15 +116,16 @@ export class SpeedDial extends Component<SpeedDialAllPropsType, SpeedDialStateTy
 	}
 
 	render(): React$Element<*> {
-		const { classes, className, renderList, children } = this.props;
+		const { classes, preset, className, renderList, children } = this.props;
 		const { state } = this.state;
 		return (
-			<div className={className}>
+			<div className={`${className || ''} ${preset.root}`}>
 				{renderList({
-					className: `${classes.list} ${classes[`list--state-${state}`]}`,
+					className: `${classes.list} ${classes[`list--state-${state}`]} ${preset.list}`,
 					children: children({
 						state,
-						className: '',
+						preset,
+						className: `${preset.item}`,
 					}),
 				})}
 				{this.renderButton()}

diff --git a/src/components/SpeedDial/SpeedDial.spec.js b/src/components/SpeedDial/SpeedDial.spec.js
@@ -19,6 +19,11 @@ describe('SpeedDial', () => {
 		expect(tree).toMatchSnapshot();
 		expect(tree.find('button').length).toBe(1);
 	});
+	it('snapshot: without className', () => {
+		const _props = { ...props, className: undefined };
+		const tree = shallow(<SpeedDial {..._props} />);
+		expect(tree).toMatchSnapshot();
+	});
 	it('snapshot: renderOpenedButton', () => {
 		const _props = { ...props, renderOpenedButton: propsBtn => <button {...propsBtn} /> };
 		const tree = shallow(<SpeedDial {..._props} />);