From de32049fbe68fd7851e2e0a22e7302e09406d2c9 Mon Sep 17 00:00:00 2001 From: Simon Mollweide Date: Sun, 25 Feb 2018 14:07:30 +0100 Subject: [PATCH] feat(presets): add presetFixedBottomRight and and implement preset usage --- material-ui-speed-dial.js.flow | 26 ++- package.json | 3 +- public/images/people-01.jpeg | Bin 1767 -> 0 bytes public/images/people-03.jpeg | Bin 2299 -> 0 bytes public/images/people-07.jpeg | Bin 1996 -> 0 bytes public/images/people-08.jpeg | Bin 2187 -> 0 bytes public/images/people-09.jpeg | Bin 2387 -> 0 bytes src/components/SpeedDial/SpeedDial.js | 30 +++- src/components/SpeedDial/SpeedDial.spec.js | 5 + .../__snapshots__/SpeedDial.spec.js.snap | 161 ++++++++++++++++-- src/components/SpeedDialItem/SpeedDialItem.js | 5 +- .../SpeedDialItem/SpeedDialItem.spec.js | 25 +++ .../__snapshots__/SpeedDialItem.spec.js.snap | 140 ++++++++++++++- src/gh-pages/AppFrame/AppDrawer/AppDrawer.js | 2 +- .../PageExampleBasic/PageExampleBasic.js | 122 +++---------- src/presets/presetFixedBottomRight.js | 40 +++++ 16 files changed, 422 insertions(+), 137 deletions(-) delete mode 100644 public/images/people-01.jpeg delete mode 100644 public/images/people-03.jpeg delete mode 100644 public/images/people-07.jpeg delete mode 100644 public/images/people-08.jpeg delete mode 100644 public/images/people-09.jpeg create mode 100644 src/presets/presetFixedBottomRight.js diff --git a/material-ui-speed-dial.js.flow b/material-ui-speed-dial.js.flow index d7dc9f7..e7fb653 100644 --- 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,7 +63,8 @@ export type SpeedDialLabelPropsType = { }; export type SpeedDialItemPropsType = { - className?: string, + className: string, + preset: PresetType, state: StateEnumType, renderAvatar?: (props: RenderAvatarPropsType) => React$Element<*>, children: (props: RenderLabelPropsType) => React$Element<*>, @@ -51,7 +72,8 @@ export type SpeedDialItemPropsType = { 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 index 3585534..d736e92 100644 --- 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 deleted file mode 100644 index bfdcd99ac92a62e3cd6515f0df78bc74150ac4fc..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1767 zcmbW!dpOkj9tZI6Z|+7jJBD#9jA_Q5(74P@ZfRyPDy&OMtcF}#iZTpa8A^ktQ=(Oe zR8&}`jR;v$aXLh(GSYGDLYU>8^Xz$^^Viw^e4fu=pZD{5p4an{_sK^9!Hwg} z0T2X%@75Z~R{_h}i|ypS+lxsK3o(s65*kJpSeTiU4dRYQM2C@G-MC~o4>p%9u(mWb zA;-i8e;;v7NVX%}m}BJwz!_lCXbc*K#b7XsSgaymoq)&T@LD8QCH2iZG%7`hqN`_Y zvqjI4Zm3H!ce0=}SoZezG_xJ9&f8pU?Ce?VM zP(l)QEu2uwp228JjEbe`+*Qox?bR(LudW&D)&sFA3RqP&bq!6Lp1y&h5#7q##+Jc! z-ofT@U0mJ1_4e`g+q2i79};>nEIcCe=&?9Ke1b4B_0;LKGvf4&^EnrC^Dh3Bf9cxw z;*uLTZg+?Y+AC`wv^&9zA~2-to5=-90aRU-k7%q@!cwZ{AM4o0QGY%`bfX z^!dx;(z*)*@PD&@m;H}RY0U*gAm9k}x(kBEuMJ!Yfz-7?5uH5I!7<7dOA$t8`?;&t zEee~rdd-jy#CBm-sdOoAcAfSw+5ZPi`BSprVgGeWzy>(9_B^-}Z~(H8D+1Nq=Pk(N z1Ys4mq27i_C@z?Tok-PdQucVh+7(7=Eg0A-ym*nS+_A9~r?DtnIavXM)bxD!V8);e zUw=GUKB(8vAGY0B-%TPnB9l`bR=$t0d&}a72PNu`aeTdTF($Pr`u_ z(f+NosC?RUJ!=Lfd0SE&b9=wcnAR8?Y}itg=ee~_;VE;X@C&M;)7fR;3NpTQuT=eT zK*s#7%bLZWw;dWxTpXMoRa2v~(1={cvq2YLCUn0YK06Aov^w+_H^a7SpmiF_C%i8U zBnu8UbSSc0JnAqc&|j$9(Pi~CiD$L<=&w`R#^SE&7k)KaX|W?4mL`^wiJR`r!I`_| zp}h1WlT>w|*WvJ813}dV)f=yrl1fSMy()b~q$dMYLpm>i%1p@L6K8aF_vAj+%*ZlL z4F&kUMDXf#dkr;C%h=)TE<>N(y3mmxPg#WGdjYhux85#ne|3h;$F;{gNfW&8Y0UG@ zGu+P5N=#eIm@{>6{xsbtMpNgQzBR+*OFO%Yi&Nhn!hVpBNA*oRDwYj$o)Nd4xKWsM zI32R3!WVr_+fIK-)~9jhpzLR^vG6iFxHg%&pJ{m5ENXfz=io^(K3NWyWWDv$`lv0T zL#NEt+Hvg%94E9EJNM75o~F-pt>5k}u#hxC(^Xq4bkk%*l2G&;%OcwGl`IhR0QUk{ zS)TtxwTgvBAzSKVhhlA#10z{QChx>FB5E8@YJVaJl|K(mDjdS5h#4Jh^?((lV_Yr! zzyw$_quJQI$0u_@d?DWM5K0bOhyl^zC9qv}AFJ58DbW&JN`1c7&YX^hYnQ!{35C3%3F1;2pDj_Wjt-9FlI;NhrfNVSE zM;P0-P=w~;$9(=CX~{*ze7kt&Mx;I~JIMp}!yUG!0`*84M_6gU;7sdoAG$sQ@LhS1{&nDw% zal7&R_qxBJXk4cjqTN7AO!;sSA^WTMmHUmpwFR-gJQbN7G-Zhp0;^|tAM5v3pRyml z%WqHTcbN7(M>lV zpn?4#0P%#)Nn<-p8(p-ox3WLQ#}^&0rlN|L3k&rN@^HPz*n&>>+S z0e+XMXnnMnD$o8Da01|gLb;%ac(}N@U_3l9ek7cqkB?tmSOkHTmc(H(k{Br&MJ>FH zJV9OxqiU>1&>Lu^OJ2;<$N4M3G`ga5A!T@(P4wnp)aA zx+hFdnwpW!Eo|-1**iEoIeU5gT=f0L&p-5XSa`%0YGnM4gv6xel+^5;+qty7JNX4A zrDf$0D=L4j`t5OJ6aC54XU%Wg+B-VCx_jOZ4Udd6$Hpfn=jK@piyxLgF0X8Ce%adI z`TEDV?>}820Q^tZ-?IO3Ar4#|oSa}z=ua1jBjRAd2u_HU+95$>Yp6%aVT}59E}`RD z4;o%`OKaGy3wvIA$0LFz%;7eE(*7a)?_hENm+WuYzg?36FBo+2JTL+<1XwQ!*)IMK zGlB9brvTPEYvY(qDOIK-aw+$wo}Bi37rg9ul-0~zEGem1kW#w3>iAVcI`w^@ZdkJh ze_gClOgd&QuoKHC%6%mBTH{`gspH|#%;F=34Tk+VMt19`${&rm(UENTflbz4g5gkX zvuuX;MA85xz(xC1I6X&js$12_P(3PjDSfZq20X$6>O@#_Y3T< zXa9qU#%YPk%g7jZJ(AauVbMlEV_|NZ%}9~Bn3A6X)VjC~2McykU?yFO((Hnpj^sOG zQ}W740e$P6hfGk-m`{>~NhkuMz_}8IH=VB^6*VP38w#r)`2374YCyH`aY1Lks;CgZW_3 zsn~DyS+-=+AGUbC+jR%yB$QH4?#sfA%WceeJ%Fk zb4KWE&|~Bak8?gv`Z;ls#B!Y?;USr;4o#wNM5hc?OzE^L7BM`wOD0}uiP2G(QOJ@J z7pAJT#mArKm8@U={-~6SvguysnfJAgb(kLW!M81cB0P5rs41lxm6%7|@2aq9n7e$({l`i!USANuARzr0q2bKxthAB_Em*3G-{Y?Fn+pw*KQ27J zu;44ioA`Dd>TbS*$JTQ~J%uy1qgFq%S{YL*k%S5!gT_EOHeD3le=GYp5Gq|f83 zD*767SE}z70Iz*4@!muAlcxgRq0TqTrC`yXuNh4lcjznC>N2Y$O()L?O2@y)-9Htll^u=l=k1 z6*pwmQhLj0&QJDIcB+xeFE>V54JC7)G5k}O`lI(tTro<&Q8T!g;|tALZWXE4TTF8D z_S3}-o6_EsQ*ru=X+wn9xM|bnAAQ5nzLdeNVIhXl3g*;N($y}FSBJD;Nh~pMWzgRG z7>KQJ=g}O`XiCb`KS{_jFOzy+WKTHOmLn5XR3J7hfb`eu2T zIPIJ06%}{S*aw^~af!_iayK4`JO>%@!MV8UTwT!dRXN&<^7=OVkZJ9c;9*l=*(+)l zA!+GfSJQ=5S1R-(T=6kM3GV~jqfzpoa>dJZ80+qZMY&RWr&EZJ6YV^w8ralj=bcdG z)@o9OxA&V|*|fqN_SSJxb+n;Tsmy9pFU@0X%?5v0ymlmb3=#jiA8h6@H{YDQ;NNF3 z8+^9{EIIVd(!lO!M>a2uof#B$E_pk&1nCguxH-GyI?~L(6+oEE_n=49UT~zTRlspYoy*eIAlr&n{D8C zWRq$GYMVsOagw2+>*4}K)vJ<+w~0OQ6DTQc_Dfvli-l2A?IX6Ua${f~r7ENo5*A(^99)4cmitooduV4=Ox9^w1Z_-n zN7cU`dntM3BpS6Y+R7?;`$RRL(cNJ_T?_~He7{I<%AXm2BQn_8F5h~l&NchZJPk&~;l)4i++S~m^6#E6kk|-Qqo{=onH)|U-BbXDE;r!|SRLz$% zUWkef)&5Asc-Qh83j5FMdy#49Fit5oe)jmQvi0wS7j|2m7DMR(s6;#9uKe4SE0o diff --git a/public/images/people-07.jpeg b/public/images/people-07.jpeg deleted file mode 100644 index e29ecefb917000c07a51aec01b2fb305bbb971d0..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1996 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 X+x3L diff --git a/src/components/SpeedDial/SpeedDial.js b/src/components/SpeedDial/SpeedDial.js index 46377cb..10a7fc8 100644 --- a/src/components/SpeedDial/SpeedDial.js +++ b/src/components/SpeedDial/SpeedDial.js @@ -24,6 +24,15 @@ export class SpeedDial extends Component | Array> { - 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 { - const { classes, className, renderList, children } = this.props; + const { classes, preset, className, renderList, children } = this.props; const { state } = this.state; return ( -
+
{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 index 208f037..889b8f4 100644 --- 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(); + expect(tree).toMatchSnapshot(); + }); it('snapshot: renderOpenedButton', () => { const _props = { ...props, renderOpenedButton: propsBtn => )} renderOpenedButton={( props: RenderOpenedButtonPropsType, propsIcon: RenderOpenedButtonIconPropsType - ): React$Element<*> => ( - )} - renderList={(props: RenderListPropsType): React$Element<*> => ( -
    - )} + renderList={(props: RenderListPropsType) =>
      } > {(props: RenderPropsType): Array> => [ => ( - + renderAvatar={(propsAvatar: RenderAvatarPropsType) => ( + )} > - {(propsLabel: RenderLabelPropsType): React$Element<*> => ( - - )} + {(propsLabel: RenderLabelPropsType) => } , => ( - + renderAvatar={(propsAvatar: RenderAvatarPropsType) => ( + )} > - {(propsLabel: RenderLabelPropsType): React$Element<*> => ( - - )} + {(propsLabel: RenderLabelPropsType) => } , - - {(propsLabel: RenderLabelPropsType): React$Element<*> => ( - - )} + + {(propsLabel: RenderLabelPropsType) => } , ]} @@ -158,4 +78,4 @@ const PageExampleBasic = ({ classes }: PageExampleBasicPropsType): React$Element }; PageExampleBasic.displayName = 'PageExampleBasic'; -export default withStyles(styles, { withTheme: true })(PageExampleBasic); +export default withStyles(presetFixedBottomRight)(PageExampleBasic); diff --git a/src/presets/presetFixedBottomRight.js b/src/presets/presetFixedBottomRight.js new file mode 100644 index 0000000..ce17c81 --- /dev/null +++ b/src/presets/presetFixedBottomRight.js @@ -0,0 +1,40 @@ +// @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, + right: 0, + }, + button: { + position: 'absolute', + bottom: theme.spacing.unit * 2, + right: theme.spacing.unit * 2, + }, + list: { + bottom: theme.spacing.unit * 2.5, + right: 0, + }, + item: {}, + firstItem: { + paddingTop: theme.spacing.unit, + }, + avatar: { + top: theme.spacing.unit * 0.7, + right: 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, + marginRight: theme.spacing.unit * 9, + }, + }; +}; + +export default styles;