diff --git a/src/components/Stack/Stack.tsx b/src/components/Stack/Stack.tsx index 8287bcc4878..c049fd2732a 100644 --- a/src/components/Stack/Stack.tsx +++ b/src/components/Stack/Stack.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {memo, NamedExoticComponent} from 'react'; import {classNames, variationName} from '../../utilities/css'; import {elementChildren, wrapWithComponent} from '../../utilities/components'; @@ -32,33 +32,31 @@ export interface StackProps { distribution?: Distribution; } -export class Stack extends React.PureComponent { - static Item = Item; - - render() { - const { - children, - vertical, - spacing, - distribution, - alignment, - wrap, - } = this.props; - - const className = classNames( - styles.Stack, - vertical && styles.vertical, - spacing && styles[variationName('spacing', spacing)], - distribution && styles[variationName('distribution', distribution)], - alignment && styles[variationName('alignment', alignment)], - wrap === false && styles.noWrap, - ); - - const itemMarkup = elementChildren(children).map((child, index) => { - const props = {key: index}; - return wrapWithComponent(child, Item, props); - }); - - return
{itemMarkup}
; - } -} +export const Stack: NamedExoticComponent & { + Item: typeof Item; +} = memo(function Stack({ + children, + vertical, + spacing, + distribution, + alignment, + wrap, +}: StackProps) { + const className = classNames( + styles.Stack, + vertical && styles.vertical, + spacing && styles[variationName('spacing', spacing)], + distribution && styles[variationName('distribution', distribution)], + alignment && styles[variationName('alignment', alignment)], + wrap === false && styles.noWrap, + ); + + const itemMarkup = elementChildren(children).map((child, index) => { + const props = {key: index}; + return wrapWithComponent(child, Item, props); + }); + + return
{itemMarkup}
; +}); + +Stack.Item = Item;