From 9c42c0746e2321eda24fc724d2042e274d534756 Mon Sep 17 00:00:00 2001 From: Myrto Kontouli Date: Wed, 26 Jul 2023 11:30:31 +0100 Subject: [PATCH] split context out --- lib/src/components/badge/Badge.context.tsx | 33 +++++++++++++++++++ lib/src/components/badge/Badge.tsx | 30 ++--------------- .../OptionallyTooltipWrapper.tsx | 4 +-- 3 files changed, 37 insertions(+), 30 deletions(-) create mode 100644 lib/src/components/badge/Badge.context.tsx diff --git a/lib/src/components/badge/Badge.context.tsx b/lib/src/components/badge/Badge.context.tsx new file mode 100644 index 000000000..6a1a3062a --- /dev/null +++ b/lib/src/components/badge/Badge.context.tsx @@ -0,0 +1,33 @@ +import * as React from 'react' + +import type { TBadgeProps } from './Badge' + +type TBadgeProviderProps = { + size?: TBadgeProps['size'] + overflow?: TBadgeProps['overflow'] +} + +type TBadgeContext = TBadgeProviderProps & { + textContent?: React.ReactNode, + setTextContent?: React.Dispatch> + isOverflowing?: boolean, + setIsOverflowing?: React.Dispatch> +} + +export const BadgeContext = React.createContext({}) + +export const BadgeProvider: React.FC = ({ + size, + overflow, + children +}) => { + const [textContent, setTextContent] = React.useState('') + const [isOverflowing, setIsOverflowing] = React.useState(false) + + const value = React.useMemo( + () => ({ size, overflow, textContent, setTextContent, isOverflowing, setIsOverflowing }), + [size, overflow, textContent, setTextContent, isOverflowing, setIsOverflowing] + ) + return {children} +} + diff --git a/lib/src/components/badge/Badge.tsx b/lib/src/components/badge/Badge.tsx index 26cd3ab4f..94ee9ba26 100644 --- a/lib/src/components/badge/Badge.tsx +++ b/lib/src/components/badge/Badge.tsx @@ -6,6 +6,7 @@ import { ColorScheme, TcolorScheme } from '~/experiments/color-scheme' import { styled } from '~/stitches' import { OptionallyTooltipWrapper } from '~/utilities/optionally-tooltip-wrapper' import { BadgeText } from './BadgeText' +import { BadgeContext, BadgeProvider } from './Badge.context' import { colorSchemes as badgeColorSchemes } from './stitches.badge.colorscheme.config' @@ -49,7 +50,7 @@ const StyledBadgeRoot = styled(Flex, { } }) -type TBadgeProps = React.ComponentProps & { +export type TBadgeProps = React.ComponentProps & { theme?: keyof typeof badgeColorSchemes overflow?: React.ComponentProps['overflow'] colorScheme?: TcolorScheme @@ -60,33 +61,6 @@ type TBadge = React.ForwardRefExoticComponent & { Text: typeof BadgeText } -export type TBadgeContext = { - size?: TBadgeProps['size'] - overflow?: TBadgeProps['overflow'] - textContent?: React.ReactNode, - setTextContent?: React.Dispatch> - isOverflowing?: boolean, - setIsOverflowing?: React.Dispatch> -} -export type TBadgeProviderProps = TBadgeContext - -export const BadgeContext = React.createContext({}) - -export const BadgeProvider: React.FC = ({ - size, - overflow, - children -}) => { - const [textContent, setTextContent] = React.useState('') - const [isOverflowing, setIsOverflowing] = React.useState(false) - - const value = React.useMemo( - () => ({ size, overflow, textContent, setTextContent, isOverflowing, setIsOverflowing }), - [size, overflow, textContent, setTextContent, isOverflowing, setIsOverflowing] - ) - return {children} -} - type TBadgeRootProps = Omit, 'overflow'> const BadgeRoot = React.forwardRef( diff --git a/lib/src/utilities/optionally-tooltip-wrapper/OptionallyTooltipWrapper.tsx b/lib/src/utilities/optionally-tooltip-wrapper/OptionallyTooltipWrapper.tsx index b1acc569b..12742a5a1 100644 --- a/lib/src/utilities/optionally-tooltip-wrapper/OptionallyTooltipWrapper.tsx +++ b/lib/src/utilities/optionally-tooltip-wrapper/OptionallyTooltipWrapper.tsx @@ -3,8 +3,8 @@ import * as React from 'react' import { Tooltip } from '~/components/tooltip' export type TOptionallyTooltipWrapperProps = { - hasTooltip: boolean - label: React.ReactNode + hasTooltip?: boolean + label?: React.ReactNode tooltipSide?: 'bottom' | 'left' | 'right' | 'top' }