From 26ef7b01d443a61f3683765b1b67830af55df31e Mon Sep 17 00:00:00 2001 From: Francesco Cioria Date: Thu, 24 Jan 2019 15:36:49 +0100 Subject: [PATCH 1/2] simplify NODE_ENV check for logWarnings --- src/FlexView.tsx | 137 +++++++++++++++++++++++------------------------ 1 file changed, 66 insertions(+), 71 deletions(-) diff --git a/src/FlexView.tsx b/src/FlexView.tsx index 41037d5..70ea241 100644 --- a/src/FlexView.tsx +++ b/src/FlexView.tsx @@ -10,11 +10,6 @@ export type Overwrite = Pick> & O2; declare var process: { env: { NODE_ENV: "production" | "development" } }; -function warn(warning: string): void { - if (process.env.NODE_ENV !== "production") { - console.warn(warning); // eslint-disable-line no-console - } -} export namespace FlexView { export type Props = Overwrite< Omit, "ref">, @@ -81,81 +76,81 @@ export class FlexView extends React.Component { } logWarnings(): void { - const { - basis, - shrink, - grow, - hAlignContent, - vAlignContent, - children, - column - } = this.props; - - if (basis === "auto") { - warn( - 'basis is "auto" by default: forcing it to "auto" will leave "shrink:true" as default' - ); - } + if (process.env.NODE_ENV !== "production") { + const { + basis, + shrink, + grow, + hAlignContent, + vAlignContent, + children, + column + } = this.props; - if ( - (shrink === false || shrink === 0) && - (grow === true || (typeof grow === "number" && grow > 0)) - ) { - warn('passing both "grow" and "shrink={false}" is a no-op!'); - } + if (basis === "auto") { + console.warn( + 'basis is "auto" by default: forcing it to "auto" will leave "shrink:true" as default' + ); + } - if ( - process.env.NODE_ENV !== "production" && - typeof children !== "undefined" && - !column && - hAlignContent === "center" - ) { - const atLeastOneChildHasHMarginAuto = some( - [].concat(children as any), - (child: any) => { - const props = - (typeof child === "object" && child !== null - ? child.props - : undefined) || {}; - const style = props.style || {}; + if ( + (shrink === false || shrink === 0) && + (grow === true || (typeof grow === "number" && grow > 0)) + ) { + console.warn('passing both "grow" and "shrink={false}" is a no-op!'); + } - const marginLeft = style.marginLeft || props.marginLeft; - const marginRight = style.marginRight || props.marginRight; - return marginLeft === "auto" && marginRight === "auto"; - } - ); + if ( + typeof children !== "undefined" && + !column && + hAlignContent === "center" + ) { + const atLeastOneChildHasHMarginAuto = some( + [].concat(children as any), + (child: any) => { + const props = + (typeof child === "object" && child !== null + ? child.props + : undefined) || {}; + const style = props.style || {}; - atLeastOneChildHasHMarginAuto && - warn( - 'In a row with hAlignContent="center" there should be no child with marginLeft and marginRight set to "auto"\nhttps://github.com/buildo/react-flexview/issues/30' + const marginLeft = style.marginLeft || props.marginLeft; + const marginRight = style.marginRight || props.marginRight; + return marginLeft === "auto" && marginRight === "auto"; + } ); - } - if ( - process.env.NODE_ENV !== "production" && - typeof children !== "undefined" && - column && - vAlignContent === "center" - ) { - const atLeastOneChildHasVMarginAuto = some( - [].concat(children as any), - (child: any) => { - const props = - (typeof child === "object" && child !== null - ? child.props - : undefined) || {}; - const style = props.style || {}; + atLeastOneChildHasHMarginAuto && + console.warn( + 'In a row with hAlignContent="center" there should be no child with marginLeft and marginRight set to "auto"\nhttps://github.com/buildo/react-flexview/issues/30' + ); + } - const marginTop = style.marginTop || props.marginTop; - const marginBottom = style.marginBottom || props.marginBottom; - return marginTop === "auto" && marginBottom === "auto"; - } - ); + if ( + typeof children !== "undefined" && + column && + vAlignContent === "center" + ) { + const atLeastOneChildHasVMarginAuto = some( + [].concat(children as any), + (child: any) => { + const props = + (typeof child === "object" && child !== null + ? child.props + : undefined) || {}; + const style = props.style || {}; - atLeastOneChildHasVMarginAuto && - warn( - 'In a column with vAlignContent="center" there should be no child with marginTop and marginBottom set to "auto"\nhttps://github.com/buildo/react-flexview/issues/30' + const marginTop = style.marginTop || props.marginTop; + const marginBottom = style.marginBottom || props.marginBottom; + return marginTop === "auto" && marginBottom === "auto"; + } ); + + atLeastOneChildHasVMarginAuto && + console.warn( + 'In a column with vAlignContent="center" there should be no child with marginTop and marginBottom set to "auto"\nhttps://github.com/buildo/react-flexview/issues/30' + ); + } } } From 526e829eaeebf96cb0fcc536a0dfb64ee7eeef4e Mon Sep 17 00:00:00 2001 From: Francesco Cioria Date: Thu, 24 Jan 2019 15:58:24 +0100 Subject: [PATCH 2/2] improve warning checks --- src/FlexView.tsx | 66 +++++++++++++++++++++--------------------------- 1 file changed, 29 insertions(+), 37 deletions(-) diff --git a/src/FlexView.tsx b/src/FlexView.tsx index 70ea241..44fbc83 100644 --- a/src/FlexView.tsx +++ b/src/FlexView.tsx @@ -83,7 +83,6 @@ export class FlexView extends React.Component { grow, hAlignContent, vAlignContent, - children, column } = this.props; @@ -100,25 +99,25 @@ export class FlexView extends React.Component { console.warn('passing both "grow" and "shrink={false}" is a no-op!'); } - if ( - typeof children !== "undefined" && - !column && - hAlignContent === "center" - ) { - const atLeastOneChildHasHMarginAuto = some( - [].concat(children as any), - (child: any) => { - const props = - (typeof child === "object" && child !== null - ? child.props - : undefined) || {}; - const style = props.style || {}; - - const marginLeft = style.marginLeft || props.marginLeft; - const marginRight = style.marginRight || props.marginRight; - return marginLeft === "auto" && marginRight === "auto"; + const children: Array< + | React.ReactElement< + { [k: string]: any } & { style?: React.CSSProperties } + > + | React.ReactText + > = React.Children.toArray(this.props.children); + + if (!column && hAlignContent === "center") { + const atLeastOneChildHasHMarginAuto = some(children, child => { + if (typeof child !== "object") { + return false; } - ); + + const style = child.props.style || {}; + + const marginLeft = style.marginLeft || child.props.marginLeft; + const marginRight = style.marginRight || child.props.marginRight; + return marginLeft === "auto" && marginRight === "auto"; + }); atLeastOneChildHasHMarginAuto && console.warn( @@ -126,25 +125,18 @@ export class FlexView extends React.Component { ); } - if ( - typeof children !== "undefined" && - column && - vAlignContent === "center" - ) { - const atLeastOneChildHasVMarginAuto = some( - [].concat(children as any), - (child: any) => { - const props = - (typeof child === "object" && child !== null - ? child.props - : undefined) || {}; - const style = props.style || {}; - - const marginTop = style.marginTop || props.marginTop; - const marginBottom = style.marginBottom || props.marginBottom; - return marginTop === "auto" && marginBottom === "auto"; + if (column && vAlignContent === "center") { + const atLeastOneChildHasVMarginAuto = some(children, child => { + if (typeof child !== "object") { + return false; } - ); + + const style = child.props.style || {}; + + const marginTop = style.marginTop || child.props.marginTop; + const marginBottom = style.marginBottom || child.props.marginBottom; + return marginTop === "auto" && marginBottom === "auto"; + }); atLeastOneChildHasVMarginAuto && console.warn(