From 77bd0c25100d130958461612f4130195a4e52f4b Mon Sep 17 00:00:00 2001 From: Marco Ciampini <marco.ciampo@gmail.com> Date: Fri, 27 Aug 2021 12:45:39 +0200 Subject: [PATCH] `VStack`: refactor away from the `createComponent` function --- packages/components/src/v-stack/component.js | 21 +++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/packages/components/src/v-stack/component.js b/packages/components/src/v-stack/component.js index a37186a04df17..aaf893a757fd6 100644 --- a/packages/components/src/v-stack/component.js +++ b/packages/components/src/v-stack/component.js @@ -1,9 +1,20 @@ /** * Internal dependencies */ -import { createComponent } from '../ui/utils'; +import { contextConnect } from '../ui/context'; +import { View } from '../view'; import { useVStack } from './hook'; +/** + * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props + * @param {import('react').Ref<any>} forwardedRef + */ +function VStack( props, forwardedRef ) { + const vStackProps = useVStack( props ); + + return <View { ...vStackProps } ref={ forwardedRef } />; +} + /** * `VStack` (or Vertical Stack) is a layout component that arranges child elements in a vertical line. * @@ -27,10 +38,6 @@ import { useVStack } from './hook'; * } * ``` */ -const VStack = createComponent( { - as: 'div', - useHook: useVStack, - name: 'VStack', -} ); +const ConnectedVStack = contextConnect( VStack, 'VStack' ); -export default VStack; +export default ConnectedVStack;