From 337b3d22d3b6f4193ccc3776f6bac420ebafd3ac Mon Sep 17 00:00:00 2001 From: unix Date: Wed, 23 Jun 2021 15:06:55 +0800 Subject: [PATCH 1/5] feat: export all types related to components fix(tooltip): fix the vertical offset of the arrow --- components/auto-complete/auto-complete.tsx | 14 +- components/auto-complete/index.ts | 6 + components/avatar/index.ts | 3 + components/badge/badge-anchor.tsx | 2 +- components/badge/badge.tsx | 6 +- components/badge/index.ts | 2 + components/breadcrumbs/index.ts | 3 + .../button-dropdown/button-dropdown-item.tsx | 6 +- .../button-dropdown/button-dropdown.tsx | 6 +- components/button-dropdown/index.ts | 5 + components/button-group/index.ts | 2 + components/button/index.ts | 2 + components/capacity/index.ts | 1 + components/card/index.ts | 4 + components/checkbox/checkbox.tsx | 16 +- components/checkbox/index.ts | 7 + components/code/index.ts | 3 +- components/col/index.ts | 3 +- components/collapse/index.ts | 2 + components/description/index.ts | 3 +- components/display/index.ts | 3 +- components/divider/index.ts | 2 + components/dot/dot.tsx | 9 +- components/dot/index.ts | 3 +- components/fieldset/index.ts | 6 + components/geist-provider/geist-provider.tsx | 4 +- components/geist-provider/index.ts | 1 + components/grid/basic-item.tsx | 39 ++-- components/grid/grid-container.tsx | 6 +- components/grid/grid-types.ts | 10 +- components/grid/index.ts | 10 + components/image/image-browser.tsx | 16 +- components/image/index.ts | 2 + components/index.ts | 219 ++++++++++++++---- components/input/index.ts | 5 + components/input/input-props.ts | 5 +- components/keyboard/index.ts | 1 + components/link/index.ts | 1 + components/loading/index.ts | 1 + components/loading/loading.tsx | 18 +- components/modal/index.ts | 5 + components/note/index.ts | 3 +- components/note/note.tsx | 9 +- components/page/index.ts | 4 + components/page/page-footer.tsx | 6 +- components/page/page.tsx | 6 +- components/pagination/index.ts | 3 + components/pagination/pagination-previous.tsx | 4 +- components/popover/index.ts | 12 +- components/popover/popover.tsx | 19 +- components/progress/index.ts | 1 + components/progress/progress.tsx | 9 +- components/radio/index.ts | 3 + components/radio/radio.tsx | 16 +- components/row/index.ts | 3 +- components/select/index.ts | 2 + components/select/select.tsx | 5 +- components/slider/index.ts | 1 + components/slider/slider.tsx | 14 +- components/snippet/index.ts | 2 + components/snippet/snippet.tsx | 14 +- components/spacer/index.ts | 3 +- components/spinner/index.ts | 1 + components/table/index.ts | 15 ++ components/tabs/index.ts | 1 + components/tag/index.ts | 3 +- components/tag/tag.tsx | 13 +- components/text/index.ts | 1 + components/text/text.tsx | 5 +- components/textarea/index.ts | 1 + components/textarea/textarea.tsx | 13 +- components/themes/index.ts | 10 + components/toggle/index.ts | 7 + components/toggle/toggle.tsx | 8 +- components/tooltip/helper.ts | 33 +++ components/tooltip/index.ts | 7 + components/tooltip/placement.ts | 40 ++-- components/tooltip/tooltip-content.tsx | 63 ++--- components/tooltip/tooltip-icon.tsx | 16 +- components/tooltip/tooltip.tsx | 38 ++- components/tree/__tests__/index.test.tsx | 4 +- components/tree/index.ts | 1 + components/tree/tree.tsx | 10 +- components/use-all-themes/index.ts | 1 + components/use-body-scroll/index.ts | 1 + components/use-clipboard/index.ts | 1 + components/use-keyboard/index.ts | 8 +- components/use-media-query/index.ts | 1 + components/use-theme/theme-context.ts | 7 +- components/use-toasts/index.ts | 1 + components/use-toasts/use-toast.tsx | 4 +- components/user/index.ts | 1 + package.json | 3 +- 93 files changed, 615 insertions(+), 304 deletions(-) create mode 100644 components/tooltip/helper.ts diff --git a/components/auto-complete/auto-complete.tsx b/components/auto-complete/auto-complete.tsx index ea6d3fe7f..dc1201a11 100644 --- a/components/auto-complete/auto-complete.tsx +++ b/components/auto-complete/auto-complete.tsx @@ -18,6 +18,8 @@ import { pickChild } from '../utils/collections' import useCurrentState from '../utils/use-current-state' import useScaleable, { filterScaleableProps, withScaleable } from '../use-scaleable' +export type AutoCompleteTypes = NormalTypes + export type AutoCompleteOption = { label: string value: string @@ -29,7 +31,7 @@ export type AutoCompleteOptions = Array< interface Props { options?: AutoCompleteOptions - type?: NormalTypes + type?: AutoCompleteTypes initialValue?: string value?: string onChange?: (value: string) => void @@ -50,7 +52,7 @@ const defaultProps = { initialValue: '', disabled: false, clearable: false, - type: 'default' as NormalTypes, + type: 'default' as AutoCompleteTypes, disableMatchWidth: false, disableFreeSolo: false, className: '', @@ -135,10 +137,10 @@ const AutoCompleteComponent = React.forwardRef< } return childrenToOptionsNode(options as Array) }, [searching, options]) - const showClearIcon = useMemo(() => clearable && searching === undefined, [ - clearable, - searching, - ]) + const showClearIcon = useMemo( + () => clearable && searching === undefined, + [clearable, searching], + ) const updateValue = (val: string) => { if (disabled) return diff --git a/components/auto-complete/index.ts b/components/auto-complete/index.ts index fd1d43c45..ca95d1178 100644 --- a/components/auto-complete/index.ts +++ b/components/auto-complete/index.ts @@ -14,4 +14,10 @@ export type AutoCompleteComponentType = typeof AutoComplete & { ;(AutoComplete as AutoCompleteComponentType).Searching = AutoCompleteSearching ;(AutoComplete as AutoCompleteComponentType).Empty = AutoCompleteEmpty +export type { + AutoCompleteOption, + AutoCompleteOptions, + AutoCompleteProps, + AutoCompleteTypes, +} from './auto-complete' export default AutoComplete as AutoCompleteComponentType diff --git a/components/avatar/index.ts b/components/avatar/index.ts index 499d23ce1..7130380ad 100644 --- a/components/avatar/index.ts +++ b/components/avatar/index.ts @@ -6,4 +6,7 @@ export type AvatarComponentType = typeof Avatar & { } ;(Avatar as AvatarComponentType).Group = AvatarGroup +export type { AvatarProps } from './avatar' +export type { AvatarGroupProps } from './avatar-group' + export default Avatar as AvatarComponentType diff --git a/components/badge/badge-anchor.tsx b/components/badge/badge-anchor.tsx index 581fd073e..d8dd97c0a 100644 --- a/components/badge/badge-anchor.tsx +++ b/components/badge/badge-anchor.tsx @@ -5,7 +5,7 @@ import Badge from './badge' const placement = tuple('topLeft', 'topRight', 'bottomLeft', 'bottomRight') -type BadgeAnchorPlacement = typeof placement[number] +export type BadgeAnchorPlacement = typeof placement[number] interface Props { placement?: BadgeAnchorPlacement diff --git a/components/badge/badge.tsx b/components/badge/badge.tsx index 4dea7a4cd..30b061afb 100644 --- a/components/badge/badge.tsx +++ b/components/badge/badge.tsx @@ -4,14 +4,16 @@ import { NormalTypes } from '../utils/prop-types' import { GeistUIThemesPalette } from '../themes/presets' import useScaleable, { withScaleable } from '../use-scaleable' +export type BadgeTypes = NormalTypes + interface Props { - type?: NormalTypes + type?: BadgeTypes dot?: boolean className?: string } const defaultProps = { - type: 'default' as NormalTypes, + type: 'default' as BadgeTypes, dot: false, className: '', } diff --git a/components/badge/index.ts b/components/badge/index.ts index bc55c55de..6061e3ac2 100644 --- a/components/badge/index.ts +++ b/components/badge/index.ts @@ -6,4 +6,6 @@ export type BadgeComponentType = typeof Badge & { } ;(Badge as BadgeComponentType).Anchor = BadgeAnchor +export type { BadgeProps, BadgeTypes } from './badge' +export type { BadgeAnchorProps, BadgeAnchorPlacement } from './badge-anchor' export default Badge as BadgeComponentType diff --git a/components/breadcrumbs/index.ts b/components/breadcrumbs/index.ts index cf8cde358..bfcbafd2a 100644 --- a/components/breadcrumbs/index.ts +++ b/components/breadcrumbs/index.ts @@ -9,4 +9,7 @@ export type BreadcrumbsComponentType = typeof Breadcrumbs & { ;(Breadcrumbs as BreadcrumbsComponentType).Item = BreadcrumbsItem ;(Breadcrumbs as BreadcrumbsComponentType).Separator = BreadcrumbsSeparator +export type { BreadcrumbsProps } from './breadcrumbs' +export type { BreadcrumbsItemProps } from './breadcrumbs-item' +export type { BreadcrumbsSeparatorProps } from './breadcrumbs-separator' export default Breadcrumbs as BreadcrumbsComponentType diff --git a/components/button-dropdown/button-dropdown-item.tsx b/components/button-dropdown/button-dropdown-item.tsx index 513838957..7664cbb68 100644 --- a/components/button-dropdown/button-dropdown-item.tsx +++ b/components/button-dropdown/button-dropdown-item.tsx @@ -5,16 +5,18 @@ import { useButtonDropdown } from './button-dropdown-context' import Loading from '../loading' import { NormalTypes } from '../utils/prop-types' +export type ButtonDropdownItemTypes = NormalTypes + interface Props { main?: boolean - type?: NormalTypes + type?: ButtonDropdownItemTypes onClick?: React.MouseEventHandler className?: string } const defaultProps = { main: false, - type: 'default' as NormalTypes, + type: 'default' as ButtonDropdownItemTypes, onClick: () => {}, className: '', } diff --git a/components/button-dropdown/button-dropdown.tsx b/components/button-dropdown/button-dropdown.tsx index cc4cc22da..bd13d3260 100644 --- a/components/button-dropdown/button-dropdown.tsx +++ b/components/button-dropdown/button-dropdown.tsx @@ -9,8 +9,10 @@ import { NormalTypes } from '../utils/prop-types' import { pickChild, pickChildByProps } from '../utils/collections' import useScaleable, { withScaleable } from '../use-scaleable' +export type ButtonDropdownTypes = NormalTypes + interface Props { - type?: NormalTypes + type?: ButtonDropdownTypes auto?: boolean loading?: boolean disabled?: boolean @@ -18,7 +20,7 @@ interface Props { } const defaultProps = { - type: 'default' as NormalTypes, + type: 'default' as ButtonDropdownTypes, auto: false, loading: false, disabled: false, diff --git a/components/button-dropdown/index.ts b/components/button-dropdown/index.ts index dfc258620..845f6c20a 100644 --- a/components/button-dropdown/index.ts +++ b/components/button-dropdown/index.ts @@ -6,4 +6,9 @@ type ButtonDropdownType = typeof ButtonDropdown & { } ;(ButtonDropdown as ButtonDropdownType).Item = ButtonDropdownItem +export type { ButtonDropdownProps, ButtonDropdownTypes } from './button-dropdown' +export type { + ButtonDropdownItemProps, + ButtonDropdownItemTypes, +} from './button-dropdown-item' export default ButtonDropdown as ButtonDropdownType diff --git a/components/button-group/index.ts b/components/button-group/index.ts index cc398ed25..9e00b240c 100644 --- a/components/button-group/index.ts +++ b/components/button-group/index.ts @@ -1,3 +1,5 @@ import ButtonGroup from './button-group' +export type { ButtonGroupProps } from './button-group' +export type { ButtonTypes } from '../utils/prop-types' export default ButtonGroup diff --git a/components/button/index.ts b/components/button/index.ts index 6e408be56..0119f5376 100644 --- a/components/button/index.ts +++ b/components/button/index.ts @@ -1,3 +1,5 @@ import Button from './button' +export type { ButtonProps } from './button' +export type { ButtonTypes } from '../utils/prop-types' export default Button diff --git a/components/capacity/index.ts b/components/capacity/index.ts index 6a4948581..2f3d51531 100644 --- a/components/capacity/index.ts +++ b/components/capacity/index.ts @@ -1,3 +1,4 @@ import Capacity from './capacity' +export type { CapacityProps } from './capacity' export default Capacity diff --git a/components/card/index.ts b/components/card/index.ts index d8ae2ffa7..328b50496 100644 --- a/components/card/index.ts +++ b/components/card/index.ts @@ -13,4 +13,8 @@ export type CardComponentType = typeof Card & { ;(Card as CardComponentType).Content = CardContent ;(Card as CardComponentType).Body = CardContent +export type { CardProps } from './card' +export type { CardContentProps } from './card-content' +export type { CardFooterProps } from './card-footer' +export type { CardTypes } from '../utils/prop-types' export default Card as CardComponentType diff --git a/components/checkbox/checkbox.tsx b/components/checkbox/checkbox.tsx index 4e580f36a..35cc27af6 100644 --- a/components/checkbox/checkbox.tsx +++ b/components/checkbox/checkbox.tsx @@ -7,10 +7,10 @@ import { getColors } from './styles' import useTheme from '../use-theme' import useScaleable, { withScaleable } from '../use-scaleable' -interface CheckboxEventTarget { +export type CheckboxTypes = NormalTypes +export interface CheckboxEventTarget { checked: boolean } - export interface CheckboxEvent { target: CheckboxEventTarget stopPropagation: () => void @@ -21,7 +21,7 @@ export interface CheckboxEvent { interface Props { checked?: boolean disabled?: boolean - type?: NormalTypes + type?: CheckboxTypes initialChecked?: boolean onChange?: (e: CheckboxEvent) => void className?: string @@ -30,7 +30,7 @@ interface Props { const defaultProps = { disabled: false, - type: 'default' as NormalTypes, + type: 'default' as CheckboxTypes, initialChecked: false, className: '', value: '', @@ -70,10 +70,10 @@ const CheckboxComponent: React.FC = ({ }, [values.join(',')]) } - const { fill, bg } = useMemo(() => getColors(theme.palette, type), [ - theme.palette, - type, - ]) + const { fill, bg } = useMemo( + () => getColors(theme.palette, type), + [theme.palette, type], + ) const changeHandle = useCallback( (ev: React.ChangeEvent) => { diff --git a/components/checkbox/index.ts b/components/checkbox/index.ts index 372d189e8..76d7b74d2 100644 --- a/components/checkbox/index.ts +++ b/components/checkbox/index.ts @@ -6,4 +6,11 @@ export type CheckboxComponentType = typeof Checkbox & { } ;(Checkbox as CheckboxComponentType).Group = CheckboxGroup +export type { + CheckboxProps, + CheckboxEvent, + CheckboxEventTarget, + CheckboxTypes, +} from './checkbox' +export type { CheckboxGroupProps } from './checkbox-group' export default Checkbox as CheckboxComponentType diff --git a/components/code/index.ts b/components/code/index.ts index 4d183b167..7bdab302a 100644 --- a/components/code/index.ts +++ b/components/code/index.ts @@ -1,5 +1,4 @@ import Code from './code' -import { CodeProps } from './code' -export type Props = CodeProps +export type { CodeProps } from './code' export default Code diff --git a/components/col/index.ts b/components/col/index.ts index acf65aa63..2aea13a96 100644 --- a/components/col/index.ts +++ b/components/col/index.ts @@ -1,5 +1,4 @@ import Col from './col' -import { ColProps } from './col' -export type Props = ColProps +export type { ColProps } from './col' export default Col diff --git a/components/collapse/index.ts b/components/collapse/index.ts index e6fd7de45..8e875eb10 100644 --- a/components/collapse/index.ts +++ b/components/collapse/index.ts @@ -6,4 +6,6 @@ export type CollapseComponentType = typeof Collapse & { } ;(Collapse as CollapseComponentType).Group = CollapseGroup +export type { CollapseProps } from './collapse' +export type { CollapseGroupProps } from './collapse-group' export default Collapse diff --git a/components/description/index.ts b/components/description/index.ts index 32fa8d965..a3c84c9d1 100644 --- a/components/description/index.ts +++ b/components/description/index.ts @@ -1,5 +1,4 @@ import Description from './description' -import { DescriptionProps } from './description' -export type Props = DescriptionProps +export type { DescriptionProps } from './description' export default Description diff --git a/components/display/index.ts b/components/display/index.ts index 7929abbee..fcb9fbd75 100644 --- a/components/display/index.ts +++ b/components/display/index.ts @@ -1,5 +1,4 @@ import Display from './display' -import { DisplayProps } from './display' -export type Props = DisplayProps +export type { DisplayProps } from './display' export default Display diff --git a/components/divider/index.ts b/components/divider/index.ts index eed36705f..ed4874092 100644 --- a/components/divider/index.ts +++ b/components/divider/index.ts @@ -1,3 +1,5 @@ import Divider from './divider' +export type { DividerProps, DividerTypes } from './divider' +export type { DividerAlign } from '../utils/prop-types' export default Divider diff --git a/components/dot/dot.tsx b/components/dot/dot.tsx index 45123440d..39b99a65b 100644 --- a/components/dot/dot.tsx +++ b/components/dot/dot.tsx @@ -4,21 +4,22 @@ import { NormalTypes } from '../utils/prop-types' import { GeistUIThemes } from '../themes/presets' import useScaleable, { withScaleable } from '../use-scaleable' +export type DotTypes = NormalTypes interface Props { - type?: NormalTypes + type?: DotTypes className?: string } const defaultProps = { - type: 'default' as NormalTypes, + type: 'default' as DotTypes, className: '', } type NativeAttrs = Omit, keyof Props> export type DotProps = Props & NativeAttrs -const getColor = (type: NormalTypes, theme: GeistUIThemes): string => { - const colors: { [key in NormalTypes]?: string } = { +const getColor = (type: DotTypes, theme: GeistUIThemes): string => { + const colors: { [key in DotTypes]?: string } = { default: theme.palette.accents_2, success: theme.palette.success, warning: theme.palette.warning, diff --git a/components/dot/index.ts b/components/dot/index.ts index 99dcafec2..1c9641b7f 100644 --- a/components/dot/index.ts +++ b/components/dot/index.ts @@ -1,5 +1,4 @@ import Dot from './dot' -import { DotProps } from './dot' -export type Props = DotProps +export type { DotProps, DotTypes } from './dot' export default Dot diff --git a/components/fieldset/index.ts b/components/fieldset/index.ts index 0a4d7ad7f..60f4d2801 100644 --- a/components/fieldset/index.ts +++ b/components/fieldset/index.ts @@ -20,4 +20,10 @@ export type FieldsetComponentType = typeof Fieldset & { ;(Fieldset as FieldsetComponentType).Content = FieldsetContent ;(Fieldset as FieldsetComponentType).Body = FieldsetContent +export type { FieldsetProps } from './fieldset' +export type { FieldsetTitleProps } from './fieldset-title' +export type { FieldsetSubtitleProps } from './fieldset-subtitle' +export type { FieldsetGroupProps } from './fieldset-group' +export type { FieldsetFooterProps } from './fieldset-footer' +export type { FieldsetContentProps } from './fieldset-content' export default Fieldset as FieldsetComponentType diff --git a/components/geist-provider/geist-provider.tsx b/components/geist-provider/geist-provider.tsx index cbd2f9d7e..2514348c1 100644 --- a/components/geist-provider/geist-provider.tsx +++ b/components/geist-provider/geist-provider.tsx @@ -9,12 +9,12 @@ import useCurrentState from '../utils/use-current-state' import ToastContainer, { ToastWithID } from '../use-toasts/toast-container' import { GeistUIThemes } from '../themes/presets' -export interface Props { +export type GeistProviderProps = { themes?: Array themeType?: string | 'dark' | 'light' } -const GeistProvider: React.FC> = ({ +const GeistProvider: React.FC> = ({ themes, themeType, children, diff --git a/components/geist-provider/index.ts b/components/geist-provider/index.ts index c4afe8ac4..4d4f3655f 100644 --- a/components/geist-provider/index.ts +++ b/components/geist-provider/index.ts @@ -1,3 +1,4 @@ import GeistProvider from './geist-provider' +export type { GeistProviderProps } from './geist-provider' export default GeistProvider diff --git a/components/grid/basic-item.tsx b/components/grid/basic-item.tsx index 4dd9453f6..22878da7b 100644 --- a/components/grid/basic-item.tsx +++ b/components/grid/basic-item.tsx @@ -1,28 +1,33 @@ import React, { useMemo } from 'react' import useTheme from '../use-theme' -import { Justify, Direction, AlignItems, AlignContent } from './grid-types' +import { + GridJustify, + GridDirection, + GridAlignItems, + GridAlignContent, +} from './grid-types' import useScaleable from '../use-scaleable' -type BreakpointsValue = number | boolean +export type GridBreakpointsValue = number | boolean export interface GridBasicComponentProps { - xs?: BreakpointsValue - sm?: BreakpointsValue - md?: BreakpointsValue - lg?: BreakpointsValue - xl?: BreakpointsValue - justify?: Justify - direction?: Direction - alignItems?: AlignItems - alignContent?: AlignContent + xs?: GridBreakpointsValue + sm?: GridBreakpointsValue + md?: GridBreakpointsValue + lg?: GridBreakpointsValue + xl?: GridBreakpointsValue + justify?: GridJustify + direction?: GridDirection + alignItems?: GridAlignItems + alignContent?: GridAlignContent className?: string } const defaultProps = { - xs: false as BreakpointsValue, - sm: false as BreakpointsValue, - md: false as BreakpointsValue, - lg: false as BreakpointsValue, - xl: false as BreakpointsValue, + xs: false as GridBreakpointsValue, + sm: false as GridBreakpointsValue, + md: false as GridBreakpointsValue, + lg: false as GridBreakpointsValue, + xl: false as GridBreakpointsValue, className: '', } @@ -35,7 +40,7 @@ type ItemLayoutValue = { basis: string display: string } -const getItemLayout = (val: BreakpointsValue): ItemLayoutValue => { +const getItemLayout = (val: GridBreakpointsValue): ItemLayoutValue => { const display = val === 0 ? 'display: none;' : 'display: inherit;' if (typeof val === 'number') { const width = (100 / 24) * val diff --git a/components/grid/grid-container.tsx b/components/grid/grid-container.tsx index a9b1451fd..56f3f8e7b 100644 --- a/components/grid/grid-container.tsx +++ b/components/grid/grid-container.tsx @@ -1,18 +1,18 @@ import React, { useMemo } from 'react' import GridBasicItem, { GridBasicItemProps } from './basic-item' -import { Wrap } from './grid-types' +import { GridWrap } from './grid-types' import { css } from 'styled-jsx/css' import useScaleable, { withScaleable } from '../use-scaleable' interface Props { gap?: number - wrap?: Wrap + wrap?: GridWrap className?: string } const defaultProps = { gap: 0, - wrap: 'wrap' as Wrap, + wrap: 'wrap' as GridWrap, className: '', } diff --git a/components/grid/grid-types.ts b/components/grid/grid-types.ts index 9ad0b0c9e..c097f4f0b 100644 --- a/components/grid/grid-types.ts +++ b/components/grid/grid-types.ts @@ -9,11 +9,11 @@ const justify = tuple( 'space-evenly', ) -export type Justify = typeof justify[number] +export type GridJustify = typeof justify[number] const alignItems = tuple('flex-start', 'center', 'flex-end', 'stretch', 'baseline') -export type AlignItems = typeof alignItems[number] +export type GridAlignItems = typeof alignItems[number] const alignContent = tuple( 'stretch', @@ -24,12 +24,12 @@ const alignContent = tuple( 'space-around', ) -export type AlignContent = typeof alignContent[number] +export type GridAlignContent = typeof alignContent[number] const direction = tuple('row', 'row-reverse', 'column', 'column-reverse') -export type Direction = typeof direction[number] +export type GridDirection = typeof direction[number] const wrap = tuple('nowrap', 'wrap', 'wrap-reverse') -export type Wrap = typeof wrap[number] +export type GridWrap = typeof wrap[number] diff --git a/components/grid/index.ts b/components/grid/index.ts index db1517230..014158d93 100644 --- a/components/grid/index.ts +++ b/components/grid/index.ts @@ -6,4 +6,14 @@ export type GridComponentType = typeof Grid & { } ;(Grid as GridComponentType).Container = GridContainer +export type { GridContainerProps } from './grid-container' +export type { GridProps } from './grid' +export type { GridBreakpointsValue } from './basic-item' +export type { + GridAlignContent, + GridAlignItems, + GridDirection, + GridJustify, + GridWrap, +} from './grid-types' export default Grid as GridComponentType diff --git a/components/image/image-browser.tsx b/components/image/image-browser.tsx index bd172be58..b5c1a1bb7 100644 --- a/components/image/image-browser.tsx +++ b/components/image/image-browser.tsx @@ -6,21 +6,21 @@ import ImageBrowserHttpsIcon from './image-browser-https-icon' import { getBrowserColors, BrowserColors } from './styles' import useScaleable, { withScaleable } from '../use-scaleable' -type AnchorProps = Omit, keyof LinkProps> +export type ImageAnchorProps = Omit, keyof LinkProps> interface Props { title?: string url?: string showFullLink?: boolean invert?: boolean - anchorProps?: AnchorProps + anchorProps?: ImageAnchorProps className?: string } const defaultProps = { className: '', showFullLink: false, - anchorProps: {} as AnchorProps, + anchorProps: {} as ImageAnchorProps, invert: false, } @@ -51,7 +51,7 @@ const getAddressInput = ( url: string, showFullLink: boolean, colors: BrowserColors, - anchorProps: AnchorProps, + anchorProps: ImageAnchorProps, ) => (
@@ -124,10 +124,10 @@ const ImageBrowserComponent = React.forwardRef< ) => { const theme = useTheme() const { SCALES } = useScaleable() - const colors = useMemo(() => getBrowserColors(invert, theme.palette), [ - invert, - theme.palette, - ]) + const colors = useMemo( + () => getBrowserColors(invert, theme.palette), + [invert, theme.palette], + ) const input = useMemo(() => { if (url) return getAddressInput(url, showFullLink, colors, anchorProps) if (title) return getTitle(title, colors) diff --git a/components/image/index.ts b/components/image/index.ts index e45488f9d..112f1bf63 100644 --- a/components/image/index.ts +++ b/components/image/index.ts @@ -6,4 +6,6 @@ export type ImageComponentType = typeof Image & { } ;(Image as ImageComponentType).Browser = ImageBrowser +export type { ImageProps } from './image' +export type { ImageBrowserProps, ImageAnchorProps } from './image-browser' export default Image as ImageComponentType diff --git a/components/index.ts b/components/index.ts index 9f03483a7..dedca1f7c 100644 --- a/components/index.ts +++ b/components/index.ts @@ -1,61 +1,190 @@ /// -export * from './themes/presets' -export { default as Themes } from './themes' -export { default as useTheme } from './use-theme' -export { default as useAllThemes } from './use-all-themes' -export { default as GeistProvider } from './geist-provider' -export { default as CssBaseline } from './css-baseline' -export { default as useToasts } from './use-toasts' -export { default as useInput } from './input/use-input' -export { default as useModal } from './modal/use-modal' -export { default as useTabs } from './tabs/use-tabs' -export { default as useBodyScroll } from './use-body-scroll' -export { default as useClickAway } from './use-click-away' -export { default as useClipboard } from './use-clipboard' -export { default as useCurrentState } from './use-current-state' -export { default as useMediaQuery } from './use-media-query' -export { default as useKeyboard, KeyMod, KeyCode } from './use-keyboard' +export { default as AutoComplete } from './auto-complete' +export type { AutoCompleteProps } from './auto-complete' + export { default as Avatar } from './avatar' -export { default as Text } from './text' -export { default as Note } from './note' -export { default as Link } from './link' +export type { AvatarProps, AvatarGroupProps } from './avatar' + +export { default as Badge } from './badge' +export type { BadgeProps, BadgeAnchorProps } from './badge' + +export { default as Breadcrumbs } from './breadcrumbs' +export type { + BreadcrumbsProps, + BreadcrumbsItemProps, + BreadcrumbsSeparatorProps, +} from './breadcrumbs' + export { default as Button } from './button' +export type { ButtonProps } from './button' + +export { default as ButtonDropdown } from './button-dropdown' +export type { ButtonDropdownProps, ButtonDropdownItemProps } from './button-dropdown' + +export { default as ButtonGroup } from './button-group' +export type { ButtonGroupProps } from './button-group' + +export { default as Capacity } from './capacity' +export type { CapacityProps } from './capacity' + export { default as Card } from './card' +export type { CardProps, CardContentProps, CardFooterProps } from './card' + +export { default as Checkbox } from './checkbox' +export type { CheckboxProps, CheckboxGroupProps } from './checkbox' + export { default as Code } from './code' -export { default as Display } from './display' +export type { CodeProps } from './code' + +export { default as Collapse } from './collapse' +export type { CollapseProps, CollapseGroupProps } from './collapse' + export { default as Description } from './description' -export { default as Image } from './image' -export { default as Spacer } from './spacer' -export { default as Tag } from './tag' +export type { DescriptionProps } from './description' + +export { default as Display } from './display' +export type { DisplayProps } from './display' + +export { default as Divider } from './divider' +export type { DividerProps } from './divider' + export { default as Dot } from './dot' -export { default as Keyboard } from './keyboard' -export { default as Checkbox } from './checkbox' +export type { DotProps } from './dot' + export { default as Fieldset } from './fieldset' -export { default as Modal } from './modal' -export { default as Spinner } from './spinner' -export { default as ButtonDropdown } from './button-dropdown' -export { default as Capacity } from './capacity' +export type { + FieldsetProps, + FieldsetTitleProps, + FieldsetSubtitleProps, + FieldsetGroupProps, + FieldsetFooterProps, + FieldsetContentProps, +} from './fieldset' + +export { default as GeistProvider } from './geist-provider' +export type { GeistProviderProps } from './geist-provider' + +export { default as Grid } from './grid' +export type { GridProps, GridContainerProps } from './grid' + +export { default as Image } from './image' +export type { ImageProps, ImageBrowserProps } from './image' + export { default as Input } from './input' +export type { InputProps, InputPasswordProps } from './input' + +export { default as Keyboard } from './keyboard' +export type { KeyboardProps } from './keyboard' + +export { default as Link } from './link' +export type { LinkProps } from './link' + +export { default as Loading } from './loading' +export type { LoadingProps } from './loading' + +export { default as Modal } from './modal' +export type { + ModalProps, + ModalTitleProps, + ModalSubtitleProps, + ModalContentProps, + ModalActionProps, +} from './modal' + +export { default as Note } from './note' +export type { NoteProps } from './note' + +export { default as Page } from './page' +export type { + PageProps, + PageHeaderProps, + PageContentProps, + PageFooterProps, +} from './page' + +export { default as Pagination } from './pagination' +export type { + PaginationProps, + PaginationNextProps, + PaginationPreviousProps, +} from './pagination' + +export { default as Popover } from './popover' +export type { PopoverProps, PopoverItemProps } from './popover' + +export { default as Progress } from './progress' +export type { ProgressProps } from './progress' + export { default as Radio } from './radio' +export type { RadioProps, RadioGroupProps, RadioDescriptionProps } from './radio' + export { default as Select } from './select' +export type { SelectProps, SelectOptionProps } from './select' + +export { default as Slider } from './slider' +export type { SliderProps } from './slider' + +export { default as Snippet } from './snippet' +export type { SnippetProps } from './snippet' + +export { default as Spacer } from './spacer' +export type { SpacerProps } from './spacer' + +export { default as Spinner } from './spinner' +export type { SpinnerProps } from './spinner' + +export { default as Table } from './table' +export type { TableProps, TableColumnProps } from './table' + export { default as Tabs } from './tabs' -export { default as Progress } from './progress' -export { default as Tree } from './tree' -export { default as Badge } from './badge' -export { default as AutoComplete } from './auto-complete' -export { default as Collapse } from './collapse' -export { default as Loading } from './loading' +export type { TabsProps } from './tabs' + +export { default as Tag } from './tag' +export type { TagProps } from './tag' + +export { default as Text } from './text' +export type { TextProps } from './text' + export { default as Textarea } from './textarea' -export { default as Table } from './table' +export type { TextareaProps } from './textarea' + +export { default as Themes } from './themes' +export type { GeistUIThemes, GeistUserTheme } from './themes' + export { default as Toggle } from './toggle' -export { default as Snippet } from './snippet' +export type { ToggleProps } from './toggle' + export { default as Tooltip } from './tooltip' -export { default as Popover } from './popover' -export { default as Slider } from './slider' -export { default as Divider } from './divider' +export type { TooltipProps } from './tooltip' + +export { default as Tree } from './tree' +export type { TreeProps } from './tree' + +export { default as useAllThemes } from './use-all-themes' +export type { AllThemesConfig } from './use-all-themes' + +export { default as useToasts } from './use-toasts' +export type { Toast } from './use-toasts' + export { default as User } from './user' -export { default as Page } from './page' -export { default as Grid } from './grid' -export { default as ButtonGroup } from './button-group' -export { default as Breadcrumbs } from './breadcrumbs' -export { default as Pagination } from './pagination' +export type { UserProps } from './user' + +export { default as useBodyScroll } from './use-body-scroll' +export type { BodyScrollOptions } from './use-body-scroll' + +export { default as useClipboard } from './use-clipboard' +export type { UseClipboardOptions } from './use-clipboard' + +export { default as useMediaQuery } from './use-media-query' +export type { ResponsiveOptions, ResponsiveBreakpoint } from './use-media-query' + +export { default as useKeyboard, KeyMod, KeyCode } from './use-keyboard' +export type { KeyboardOptions, UseKeyboardHandler } from './use-keyboard' + +export { default as useInput } from './input/use-input' +export { default as useModal } from './modal/use-modal' +export { default as useTabs } from './tabs/use-tabs' +export { default as useClickAway } from './use-click-away' +export { default as useCurrentState } from './use-current-state' +export { default as CssBaseline } from './css-baseline' +export { default as useTheme } from './use-theme' diff --git a/components/input/index.ts b/components/input/index.ts index 428feed78..8ee08036d 100644 --- a/components/input/index.ts +++ b/components/input/index.ts @@ -9,4 +9,9 @@ export type InputComponentType = typeof Input & { ;(Input as InputComponentType).Textarea = Textarea ;(Input as InputComponentType).Password = InputPassword +export type { InputProps } from './input' +export type { InputTypes } from './input-props' +export type { InputPasswordProps } from './password' +export type { TextareaProps } from '../textarea/textarea' +export type { BindingsChangeTarget } from './use-input' export default Input as InputComponentType diff --git a/components/input/input-props.ts b/components/input/input-props.ts index 75c3dca3b..7c821a9a8 100644 --- a/components/input/input-props.ts +++ b/components/input/input-props.ts @@ -1,11 +1,12 @@ import React from 'react' import { NormalTypes } from '../utils/prop-types' +export type InputTypes = NormalTypes export interface Props { value?: string initialValue?: string placeholder?: string - type?: NormalTypes + type?: InputTypes hymlType?: string readOnly?: boolean disabled?: boolean @@ -29,7 +30,7 @@ export const defaultProps = { readOnly: false, clearable: false, iconClickable: false, - type: 'default' as NormalTypes, + type: 'default' as InputTypes, htmlType: 'text', autoComplete: 'off', className: '', diff --git a/components/keyboard/index.ts b/components/keyboard/index.ts index aa90ed794..58dbe299f 100644 --- a/components/keyboard/index.ts +++ b/components/keyboard/index.ts @@ -1,3 +1,4 @@ import Keyboard from './keyboard' +export type { KeyboardProps } from './keyboard' export default Keyboard diff --git a/components/link/index.ts b/components/link/index.ts index 1fbf44760..c6760107b 100644 --- a/components/link/index.ts +++ b/components/link/index.ts @@ -1,3 +1,4 @@ import Link from './link' +export type { LinkProps } from './link' export default Link diff --git a/components/loading/index.ts b/components/loading/index.ts index 0f2714d58..fd386fd7d 100644 --- a/components/loading/index.ts +++ b/components/loading/index.ts @@ -1,3 +1,4 @@ import Loading from './loading' +export type { LoadingProps, LoadingTypes } from './loading' export default Loading diff --git a/components/loading/loading.tsx b/components/loading/loading.tsx index 10fce6c1a..4648660c8 100644 --- a/components/loading/loading.tsx +++ b/components/loading/loading.tsx @@ -4,15 +4,16 @@ import { NormalTypes } from '../utils/prop-types' import { GeistUIThemesPalette } from '../themes/presets' import useScaleable, { withScaleable } from '../use-scaleable' +export type LoadingTypes = NormalTypes interface Props { - type?: NormalTypes + type?: LoadingTypes color?: string className?: string spaceRatio?: number } const defaultProps = { - type: 'default' as NormalTypes, + type: 'default' as LoadingTypes, className: '', spaceRatio: 1, } @@ -21,11 +22,11 @@ type NativeAttrs = Omit, keyof Props> export type LoadingProps = Props & NativeAttrs const getIconBgColor = ( - type: NormalTypes, + type: LoadingTypes, palette: GeistUIThemesPalette, color?: string, ) => { - const colors: { [key in NormalTypes]: string } = { + const colors: { [key in LoadingTypes]: string } = { default: palette.accents_6, secondary: palette.secondary, success: palette.success, @@ -46,11 +47,10 @@ const LoadingComponent: React.FC> = ({ }: React.PropsWithChildren & typeof defaultProps) => { const theme = useTheme() const { SCALES } = useScaleable() - const bgColor = useMemo(() => getIconBgColor(type, theme.palette, color), [ - type, - theme.palette, - color, - ]) + const bgColor = useMemo( + () => getIconBgColor(type, theme.palette, color), + [type, theme.palette, color], + ) return (
diff --git a/components/modal/index.ts b/components/modal/index.ts index e8a494c90..ad7761702 100644 --- a/components/modal/index.ts +++ b/components/modal/index.ts @@ -15,4 +15,9 @@ export type ModalComponentType = typeof Modal & { ;(Modal as ModalComponentType).Content = ModalContent ;(Modal as ModalComponentType).Action = ModalAction +export type { ModalProps } from './modal' +export type { ModalTitleProps } from './modal-title' +export type { ModalSubtitleProps } from './modal-subtitle' +export type { ModalActionProps } from './modal-action' +export type { ModalContentProps } from './modal-content' export default Modal as ModalComponentType diff --git a/components/note/index.ts b/components/note/index.ts index c04f929ef..09e64ad58 100644 --- a/components/note/index.ts +++ b/components/note/index.ts @@ -1,5 +1,4 @@ import Note from './note' -import { NoteProps } from './note' -export type Props = NoteProps +export type { NoteProps, NoteTypes } from './note' export default Note diff --git a/components/note/note.tsx b/components/note/note.tsx index 18370bda7..e6cfe0089 100644 --- a/components/note/note.tsx +++ b/components/note/note.tsx @@ -4,15 +4,16 @@ import { NormalTypes } from '../utils/prop-types' import { GeistUIThemes } from '../themes/presets' import useScaleable, { withScaleable } from '../use-scaleable' +export type NoteTypes = NormalTypes interface Props { - type?: NormalTypes + type?: NoteTypes label?: string | boolean filled?: boolean className?: string } const defaultProps = { - type: 'default' as NormalTypes, + type: 'default' as NoteTypes, label: 'note' as string | boolean, filled: false, className: '', @@ -21,8 +22,8 @@ const defaultProps = { type NativeAttrs = Omit, keyof Props> export type NoteProps = Props & NativeAttrs -const getStatusColor = (type: NormalTypes, filled: boolean, theme: GeistUIThemes) => { - const colors: { [key in NormalTypes]?: string } = { +const getStatusColor = (type: NoteTypes, filled: boolean, theme: GeistUIThemes) => { + const colors: { [key in NoteTypes]?: string } = { secondary: theme.palette.secondary, success: theme.palette.success, warning: theme.palette.warning, diff --git a/components/page/index.ts b/components/page/index.ts index 1aacf972f..75817e583 100644 --- a/components/page/index.ts +++ b/components/page/index.ts @@ -14,4 +14,8 @@ export type PageComponentType = typeof Page & { ;(Page as PageComponentType).Body = PageContent ;(Page as PageComponentType).Footer = PageFooter +export type { PageProps, PageRenderMode } from './page' +export type { PageHeaderProps } from './page-header' +export type { PageContentProps } from './page-content' +export type { PageFooterProps } from './page-footer' export default Page as PageComponentType diff --git a/components/page/page-footer.tsx b/components/page/page-footer.tsx index 70086398b..b385a6b28 100644 --- a/components/page/page-footer.tsx +++ b/components/page/page-footer.tsx @@ -10,12 +10,12 @@ const defaultProps = { } type NativeAttrs = Omit, keyof Props> -export type PageHeaderProps = Props & NativeAttrs +export type PageFooterProps = Props & NativeAttrs -const PageFooterComponent: React.FC> = ({ +const PageFooterComponent: React.FC> = ({ children, ...props -}: React.PropsWithChildren & typeof defaultProps) => { +}: React.PropsWithChildren & typeof defaultProps) => { const { SCALES } = useScaleable() return ( diff --git a/components/page/page.tsx b/components/page/page.tsx index 8cefc519d..49bba265f 100644 --- a/components/page/page.tsx +++ b/components/page/page.tsx @@ -34,15 +34,15 @@ const DotStyles: React.FC = () => ( ) type NativeAttrs = Omit, keyof Props> -export type NoteProps = Props & NativeAttrs +export type PageProps = Props & NativeAttrs -const PageComponent: React.FC> = ({ +const PageComponent: React.FC> = ({ children, render, dotBackdrop, className, ...props -}: React.PropsWithChildren & typeof defaultProps) => { +}: React.PropsWithChildren & typeof defaultProps) => { const theme = useTheme() const { SCALES } = useScaleable() const showDot = useMemo(() => { diff --git a/components/pagination/index.ts b/components/pagination/index.ts index 924549b7b..f89f6911e 100644 --- a/components/pagination/index.ts +++ b/components/pagination/index.ts @@ -9,4 +9,7 @@ export type PaginationComponentType = typeof Pagination & { ;(Pagination as PaginationComponentType).Previous = PaginationPrevious ;(Pagination as PaginationComponentType).Next = PaginationNext +export type { PaginationProps } from './pagination' +export type { PaginationPreviousProps } from './pagination-previous' +export type { PaginationNextProps } from './pagination-next' export default Pagination as PaginationComponentType diff --git a/components/pagination/pagination-previous.tsx b/components/pagination/pagination-previous.tsx index fd6fab4c8..1333c9bbe 100644 --- a/components/pagination/pagination-previous.tsx +++ b/components/pagination/pagination-previous.tsx @@ -2,9 +2,9 @@ import React from 'react' import PaginationItem from './pagination-item' import { usePaginationContext } from './pagination-context' -export type PaginationNextProps = React.ButtonHTMLAttributes +export type PaginationPreviousProps = React.ButtonHTMLAttributes -const PaginationPrevious: React.FC> = ({ +const PaginationPrevious: React.FC> = ({ children, ...props }) => { diff --git a/components/popover/index.ts b/components/popover/index.ts index c4f4342a1..26b891c0d 100644 --- a/components/popover/index.ts +++ b/components/popover/index.ts @@ -1,7 +1,13 @@ import Popover from './popover' import PopoverItem from './popover-item' -Popover.Item = PopoverItem -Popover.Option = PopoverItem +export type PopoverComponentType = typeof Popover & { + Item: typeof PopoverItem + Option: typeof PopoverItem +} +;(Popover as PopoverComponentType).Item = PopoverItem +;(Popover as PopoverComponentType).Option = PopoverItem -export default Popover +export type { PopoverProps, PopoverTriggerTypes, PopoverPlacement } from './popover' +export type { PopoverItemProps } from './popover-item' +export default Popover as PopoverComponentType diff --git a/components/popover/popover.tsx b/components/popover/popover.tsx index e679da305..fe6fabdbc 100644 --- a/components/popover/popover.tsx +++ b/components/popover/popover.tsx @@ -1,18 +1,19 @@ import React, { useMemo } from 'react' import useTheme from '../use-theme' import Tooltip, { TooltipProps } from '../tooltip/tooltip' -import PopoverItem from '../popover/popover-item' import { Placement, TriggerTypes } from '../utils/prop-types' import { getReactNode } from '../utils/collections' +export type PopoverTriggerTypes = TriggerTypes +export type PopoverPlacement = Placement interface Props { content?: React.ReactNode | (() => React.ReactNode) - trigger?: TriggerTypes + trigger?: PopoverTriggerTypes placement?: Placement } const defaultProps = { - trigger: 'click' as TriggerTypes, + trigger: 'click' as PopoverTriggerTypes, placement: 'bottom' as Placement, portalClassName: '', } @@ -55,14 +56,6 @@ const Popover: React.FC> = ({ ) } -type PopoverComponent

= React.FC

& { - Item: typeof PopoverItem - Option: typeof PopoverItem -} -type ComponentProps = Partial & - Omit & - Partial> - Popover.defaultProps = defaultProps - -export default Popover as PopoverComponent +Popover.displayName = 'GeistPopover' +export default Popover diff --git a/components/progress/index.ts b/components/progress/index.ts index c98e079e9..b877e1a4b 100644 --- a/components/progress/index.ts +++ b/components/progress/index.ts @@ -1,3 +1,4 @@ import Progress from './progress' +export type { ProgressProps, ProgressColors, ProgressTypes } from './progress' export default Progress diff --git a/components/progress/progress.tsx b/components/progress/progress.tsx index 6e834f7d2..843f0fcfa 100644 --- a/components/progress/progress.tsx +++ b/components/progress/progress.tsx @@ -8,6 +8,7 @@ import useScaleable, { withScaleable } from '../use-scaleable' export type ProgressColors = { [key: number]: string } +export type ProgressTypes = NormalTypes interface Props { value?: number @@ -15,14 +16,14 @@ interface Props { fixedTop?: boolean fixedBottom?: boolean colors?: ProgressColors - type?: NormalTypes + type?: ProgressTypes className?: string } const defaultProps = { value: 0, max: 100, - type: 'default' as NormalTypes, + type: 'default' as ProgressTypes, fixedTop: false, fixedBottom: false, className: '', @@ -34,10 +35,10 @@ export type ProgressProps = Props & NativeAttrs const getCurrentColor = ( ratio: number, palette: GeistUIThemesPalette, - type: NormalTypes, + type: ProgressTypes, colors: ProgressColors = {}, ): string => { - const defaultColors: { [key in NormalTypes]: string } = { + const defaultColors: { [key in ProgressTypes]: string } = { default: palette.foreground, success: palette.success, secondary: palette.secondary, diff --git a/components/radio/index.ts b/components/radio/index.ts index 531cd435f..9bc3705a1 100644 --- a/components/radio/index.ts +++ b/components/radio/index.ts @@ -11,4 +11,7 @@ export type RadioComponentType = typeof Radio & { ;(Radio as RadioComponentType).Description = RadioDescription ;(Radio as RadioComponentType).Desc = RadioDescription +export type { RadioProps, RadioEvent, RadioEventTarget, RadioTypes } from './radio' +export type { RadioGroupProps } from './radio-group' +export type { RadioDescriptionProps } from './radio-description' export default Radio as RadioComponentType diff --git a/components/radio/radio.tsx b/components/radio/radio.tsx index 35e55822b..69b87cafe 100644 --- a/components/radio/radio.tsx +++ b/components/radio/radio.tsx @@ -8,10 +8,10 @@ import { NormalTypes } from '../utils/prop-types' import { getColors } from './styles' import useScaleable, { withScaleable } from '../use-scaleable' -interface RadioEventTarget { +export type RadioTypes = NormalTypes +export interface RadioEventTarget { checked: boolean } - export interface RadioEvent { target: RadioEventTarget stopPropagation: () => void @@ -22,14 +22,14 @@ export interface RadioEvent { interface Props { checked?: boolean value?: string | number - type?: NormalTypes + type?: RadioTypes className?: string disabled?: boolean onChange?: (e: RadioEvent) => void } const defaultProps = { - type: 'default' as NormalTypes, + type: 'default' as RadioTypes, disabled: false, className: '', } @@ -65,10 +65,10 @@ const RadioComponent: React.FC> = ({ }, [groupValue, radioValue]) } - const { label, border, bg } = useMemo(() => getColors(theme.palette, type), [ - theme.palette, - type, - ]) + const { label, border, bg } = useMemo( + () => getColors(theme.palette, type), + [theme.palette, type], + ) const isDisabled = useMemo(() => disabled || disabledAll, [disabled, disabledAll]) const changeHandler = (event: React.ChangeEvent) => { diff --git a/components/row/index.ts b/components/row/index.ts index d09a84db8..7d38a60f6 100644 --- a/components/row/index.ts +++ b/components/row/index.ts @@ -1,5 +1,4 @@ import Row from './row' -import { RowProps } from './row' -export type Props = RowProps +export type { RowProps } from './row' export default Row diff --git a/components/select/index.ts b/components/select/index.ts index f1e92322f..bff943bc9 100644 --- a/components/select/index.ts +++ b/components/select/index.ts @@ -6,4 +6,6 @@ export type SelectComponentType = typeof Select & { } ;(Select as SelectComponentType).Option = SelectOption +export type { SelectProps, SelectTypes } from './select' +export type { SelectOptionProps } from './select-option' export default Select as SelectComponentType diff --git a/components/select/select.tsx b/components/select/select.tsx index e1ce6babb..35a5e29af 100644 --- a/components/select/select.tsx +++ b/components/select/select.tsx @@ -13,9 +13,10 @@ import { getColors } from './styles' import Ellipsis from '../shared/ellipsis' import useScaleable, { withScaleable } from '../use-scaleable' +export type SelectTypes = NormalTypes interface Props { disabled?: boolean - type?: NormalTypes + type?: SelectTypes value?: string | string[] initialValue?: string | string[] placeholder?: React.ReactNode | string @@ -33,7 +34,7 @@ interface Props { const defaultProps = { disabled: false, - type: 'default' as NormalTypes, + type: 'default' as SelectTypes, icon: SelectIcon as React.ComponentType, pure: false, multiple: false, diff --git a/components/slider/index.ts b/components/slider/index.ts index 712f4192f..fe063f98f 100644 --- a/components/slider/index.ts +++ b/components/slider/index.ts @@ -1,3 +1,4 @@ import Slider from './slider' +export type { SliderProps, SliderTypes } from './slider' export default Slider diff --git a/components/slider/slider.tsx b/components/slider/slider.tsx index 0f02331a3..d35a6c7be 100644 --- a/components/slider/slider.tsx +++ b/components/slider/slider.tsx @@ -15,10 +15,11 @@ import { getColors } from './styles' import { NormalTypes } from '../utils/prop-types' import useScaleable, { withScaleable } from '../use-scaleable' +export type SliderTypes = NormalTypes interface Props { hideValue?: boolean value?: number - type?: NormalTypes + type?: SliderTypes initialValue?: number step?: number max?: number @@ -31,7 +32,7 @@ interface Props { const defaultProps = { hideValue: false, - type: 'default' as NormalTypes, + type: 'default' as SliderTypes, initialValue: 0, step: 1, min: 0, @@ -92,11 +93,10 @@ const SliderComponent: React.FC> = ({ const sliderRef = useRef(null) const dotRef = useRef(null) - const currentRatio = useMemo(() => ((value - min) / (max - min)) * 100, [ - value, - max, - min, - ]) + const currentRatio = useMemo( + () => ((value - min) / (max - min)) * 100, + [value, max, min], + ) const setLastOffsetManually = (val: number) => { const width = getRefWidth(sliderRef) diff --git a/components/snippet/index.ts b/components/snippet/index.ts index d2adc906a..5c100f8af 100644 --- a/components/snippet/index.ts +++ b/components/snippet/index.ts @@ -1,3 +1,5 @@ import Snippet from './snippet' +export type { SnippetProps, ToastTypes } from './snippet' +export type { CopyTypes, SnippetTypes } from '../utils/prop-types' export default Snippet diff --git a/components/snippet/snippet.tsx b/components/snippet/snippet.tsx index 5e9fe61d6..a11cb369d 100644 --- a/components/snippet/snippet.tsx +++ b/components/snippet/snippet.tsx @@ -7,11 +7,12 @@ import useClipboard from '../utils/use-clipboard' import useToasts from '../use-toasts' import useScaleable, { withScaleable } from '../use-scaleable' +export type ToastTypes = NormalTypes interface Props { text?: string | string[] symbol?: string toastText?: string - toastType?: NormalTypes + toastType?: ToastTypes filled?: boolean copy?: CopyTypes type?: SnippetTypes @@ -22,7 +23,7 @@ const defaultProps = { filled: false, symbol: '$', toastText: 'Copied to clipboard!', - toastType: 'success' as NormalTypes, + toastType: 'success' as ToastTypes, copy: 'default' as CopyTypes, type: 'default' as SnippetTypes, className: '', @@ -57,11 +58,10 @@ const SnippetComponent: React.FC> = ({ const ref = useRef(null) const isMultiLine = text && Array.isArray(text) - const style = useMemo(() => getStyles(type, theme.palette, filled), [ - type, - theme.palette, - filled, - ]) + const style = useMemo( + () => getStyles(type, theme.palette, filled), + [type, theme.palette, filled], + ) const showCopyIcon = useMemo(() => copyType !== 'prevent', [copyType]) const childText = useMemo(() => { if (isMultiLine) return textArrayToString(text as string[]) diff --git a/components/spacer/index.ts b/components/spacer/index.ts index 2f2541aae..c277a3b7a 100644 --- a/components/spacer/index.ts +++ b/components/spacer/index.ts @@ -1,5 +1,4 @@ import Spacer from './spacer' -import { SpacerProps } from './spacer' -export type Props = SpacerProps +export type { SpacerProps } from './spacer' export default Spacer diff --git a/components/spinner/index.ts b/components/spinner/index.ts index 12d8e2b7e..1afa9339a 100644 --- a/components/spinner/index.ts +++ b/components/spinner/index.ts @@ -1,3 +1,4 @@ import Spinner from './spinner' +export type { SpinnerProps } from './spinner' export default Spinner diff --git a/components/table/index.ts b/components/table/index.ts index 786dabe11..de2b11e82 100644 --- a/components/table/index.ts +++ b/components/table/index.ts @@ -6,4 +6,19 @@ export type TableComponentType = typeof Table & { } ;(Table as TableComponentType).Column = TableColumn +export type { + TableProps, + TableOnRow, + TableOnChange, + TableOnCell, + TableDataSource, +} from './table' +export type { TableColumnProps } from './table-column' +export type { + TableOperation, + TableCellActions, + TableCellActionRemove, + TableCellActionUpdate, + TableCellData, +} from './table-cell' export default Table as TableComponentType diff --git a/components/tabs/index.ts b/components/tabs/index.ts index 35c39a0ce..4664ce6fd 100644 --- a/components/tabs/index.ts +++ b/components/tabs/index.ts @@ -8,4 +8,5 @@ export type TabsComponentType = typeof Tabs & { ;(Tabs as TabsComponentType).Item = TabsItem ;(Tabs as TabsComponentType).Tab = TabsItem +export type { TabsProps } from './tabs' export default Tabs as TabsComponentType diff --git a/components/tag/index.ts b/components/tag/index.ts index 36d4267fb..2c8f2d752 100644 --- a/components/tag/index.ts +++ b/components/tag/index.ts @@ -1,5 +1,4 @@ import Tag from './tag' -import { TagProps } from './tag' -export type Props = TagProps +export type { TagProps, TagColors, TagTypes } from './tag' export default Tag diff --git a/components/tag/tag.tsx b/components/tag/tag.tsx index 2a9c66afb..9d722039d 100644 --- a/components/tag/tag.tsx +++ b/components/tag/tag.tsx @@ -4,14 +4,15 @@ import { SnippetTypes } from '../utils/prop-types' import { GeistUIThemesPalette } from '../themes/presets' import useScaleable, { withScaleable } from '../use-scaleable' +export type TagTypes = SnippetTypes interface Props { - type?: SnippetTypes + type?: TagTypes invert?: boolean className?: string } const defaultProps = { - type: 'default' as SnippetTypes, + type: 'default' as TagTypes, invert: false, className: '', } @@ -25,13 +26,9 @@ export type TagColors = { borderColor: string } -const getColors = ( - type: SnippetTypes, - palette: GeistUIThemesPalette, - invert: boolean, -) => { +const getColors = (type: TagTypes, palette: GeistUIThemesPalette, invert: boolean) => { const colors: { - [key in SnippetTypes]: Pick & Partial + [key in TagTypes]: Pick & Partial } = { default: { color: palette.foreground, diff --git a/components/text/index.ts b/components/text/index.ts index e6ad65200..07f7658ff 100644 --- a/components/text/index.ts +++ b/components/text/index.ts @@ -1,3 +1,4 @@ import Text from './text' +export type { TextProps, TextTypes } from './text' export default Text diff --git a/components/text/text.tsx b/components/text/text.tsx index 454149541..6f8c528d3 100644 --- a/components/text/text.tsx +++ b/components/text/text.tsx @@ -3,6 +3,7 @@ import { NormalTypes } from '../utils/prop-types' import TextChild from './child' import { withScaleable } from '../use-scaleable' +export type TextTypes = NormalTypes interface Props { h1?: boolean h2?: boolean @@ -19,7 +20,7 @@ interface Props { em?: boolean blockquote?: boolean className?: string - type?: NormalTypes + type?: TextTypes } const defaultProps = { @@ -38,7 +39,7 @@ const defaultProps = { em: false, blockquote: false, className: '', - type: 'default' as NormalTypes, + type: 'default' as TextTypes, } type ElementMap = { [key in keyof JSX.IntrinsicElements]?: boolean } diff --git a/components/textarea/index.ts b/components/textarea/index.ts index a7b4f06fd..922bdc1bb 100644 --- a/components/textarea/index.ts +++ b/components/textarea/index.ts @@ -1,3 +1,4 @@ import Textarea from './textarea' +export type { TextareaProps, TextareaResizes, TextareaTypes } from './textarea' export default Textarea diff --git a/components/textarea/textarea.tsx b/components/textarea/textarea.tsx index 6b1af342b..54f26a8b3 100644 --- a/components/textarea/textarea.tsx +++ b/components/textarea/textarea.tsx @@ -5,29 +5,29 @@ import { getColors } from '../input/styles' import useScaleable, { withScaleable } from '../use-scaleable' const resizeTypes = tuple('none', 'both', 'horizontal', 'vertical', 'initial', 'inherit') -type ResizeTypes = typeof resizeTypes[number] - +export type TextareaResizes = typeof resizeTypes[number] +export type TextareaTypes = NormalTypes interface Props { value?: string initialValue?: string placeholder?: string - type?: NormalTypes + type?: TextareaTypes disabled?: boolean readOnly?: boolean onChange?: (e: React.ChangeEvent) => void onFocus?: (e: React.FocusEvent) => void onBlur?: (e: React.FocusEvent) => void className?: string - resize?: ResizeTypes + resize?: TextareaResizes } const defaultProps = { initialValue: '', - type: 'default' as NormalTypes, + type: 'default' as TextareaTypes, disabled: false, readOnly: false, className: '', - resize: 'none' as ResizeTypes, + resize: 'none' as TextareaResizes, } type NativeAttrs = Omit, keyof Props> @@ -145,7 +145,6 @@ const TextareaComponent = React.forwardRef< font-size: var(--textarea-font-size); width: 100%; height: var(--textarea-height); - resize: none; border: none; outline: none; padding: ${SCALES.pt(0.5)} ${SCALES.pr(0.5)} ${SCALES.pb(0.5)} diff --git a/components/themes/index.ts b/components/themes/index.ts index 28fbe728c..2a2f265d3 100644 --- a/components/themes/index.ts +++ b/components/themes/index.ts @@ -1,3 +1,13 @@ import Themes from './themes' +export type { GeistUserTheme } from './themes' +export type { + GeistUIThemes, + GeistUIThemesBreakpoints, + BreakpointsItem, + GeistUIThemesExpressiveness, + GeistUIThemesFont, + GeistUIThemesLayout, + GeistUIThemesPalette, +} from './presets' export default Themes diff --git a/components/toggle/index.ts b/components/toggle/index.ts index 56ac13a2d..da86818e5 100644 --- a/components/toggle/index.ts +++ b/components/toggle/index.ts @@ -1,3 +1,10 @@ import Toggle from './toggle' +export type { + ToggleProps, + ToggleSize, + ToggleEvent, + ToggleEventTarget, + ToggleTypes, +} from './toggle' export default Toggle diff --git a/components/toggle/toggle.tsx b/components/toggle/toggle.tsx index dbb2aa5b5..58e0fe2ed 100644 --- a/components/toggle/toggle.tsx +++ b/components/toggle/toggle.tsx @@ -4,10 +4,10 @@ import { NormalTypes } from '../utils/prop-types' import { getColors } from './styles' import useScaleable, { withScaleable } from '../use-scaleable' -interface ToggleEventTarget { +export type ToggleTypes = NormalTypes +export interface ToggleEventTarget { checked: boolean } - export interface ToggleEvent { target: ToggleEventTarget stopPropagation: () => void @@ -20,12 +20,12 @@ interface Props { initialChecked?: boolean onChange?: (ev: ToggleEvent) => void disabled?: boolean - type?: NormalTypes + type?: ToggleTypes className?: string } const defaultProps = { - type: 'default' as NormalTypes, + type: 'default' as ToggleTypes, disabled: false, initialChecked: false, className: '', diff --git a/components/tooltip/helper.ts b/components/tooltip/helper.ts new file mode 100644 index 000000000..e6fe9555c --- /dev/null +++ b/components/tooltip/helper.ts @@ -0,0 +1,33 @@ +import { MutableRefObject } from 'react' + +export interface ReactiveDomReact { + top: number + bottom: number + left: number + right: number + width: number + height: number +} + +const defaultRect: ReactiveDomReact = { + top: -1000, + left: -1000, + right: -1000, + bottom: -1000, + width: 0, + height: 0, +} + +export const getRect = (ref: MutableRefObject): ReactiveDomReact => { + if (!ref || !ref.current) return defaultRect + const rect = ref.current.getBoundingClientRect() + return { + ...rect, + width: rect.width || rect.right - rect.left, + height: rect.height || rect.bottom - rect.top, + top: rect.top + document.documentElement.scrollTop, + bottom: rect.bottom + document.documentElement.scrollTop, + left: rect.left + document.documentElement.scrollLeft, + right: rect.right + document.documentElement.scrollLeft, + } +} diff --git a/components/tooltip/index.ts b/components/tooltip/index.ts index 95c8d36c8..93daf6d31 100644 --- a/components/tooltip/index.ts +++ b/components/tooltip/index.ts @@ -1,3 +1,10 @@ import Tooltip from './tooltip' +export type { + TooltipProps, + TooltipOnVisibleChange, + TooltipTypes, + TooltipTriggers, + TooltipPlacement, +} from './tooltip' export default Tooltip diff --git a/components/tooltip/placement.ts b/components/tooltip/placement.ts index c42e0b490..6bbbab6ea 100644 --- a/components/tooltip/placement.ts +++ b/components/tooltip/placement.ts @@ -101,47 +101,49 @@ export const getPosition = ( export const getIconPosition = ( placement: Placement, - offset: number, + offsetX: string, + offsetY: string, + offsetAbsolute: string = '3px', ): TooltipIconPosition => { const positions: { [key in Placement]?: TooltipIconPosition } = { top: { top: 'auto', right: 'auto', left: '50%', - bottom: `${offset}px`, + bottom: `${offsetAbsolute}`, transform: 'translate(-50%, 100%) rotate(-90deg)', }, topStart: { top: 'auto', right: 'auto', - left: '5%', - bottom: `${offset}px`, + left: `${offsetX}`, + bottom: `${offsetAbsolute}`, transform: 'translate(0, 100%) rotate(-90deg)', }, topEnd: { top: 'auto', - right: '5%', + right: `${offsetX}`, left: 'auto', - bottom: `${offset}px`, + bottom: `${offsetAbsolute}`, transform: 'translate(0, 100%) rotate(-90deg)', }, bottom: { - top: `${offset}px`, + top: `${offsetAbsolute}`, right: 'auto', left: '50%', bottom: 'auto', transform: 'translate(-50%, -100%) rotate(90deg)', }, bottomStart: { - top: `${offset}px`, + top: `${offsetAbsolute}`, right: 'auto', - left: '5%', + left: `${offsetX}`, bottom: 'auto', transform: 'translate(0, -100%) rotate(90deg)', }, bottomEnd: { - top: `${offset}px`, - right: '5%', + top: `${offsetAbsolute}`, + right: `${offsetX}`, left: 'auto', bottom: 'auto', transform: 'translate(0, -100%) rotate(90deg)', @@ -154,18 +156,18 @@ export const getIconPosition = ( transform: 'translate(100%, -50%) rotate(180deg)', }, leftStart: { - top: '10%', + top: `${offsetY}`, right: '0', left: 'auto', bottom: 'auto', - transform: 'translate(100%, 0) rotate(180deg)', + transform: 'translate(100%, -50%) rotate(180deg)', }, leftEnd: { top: 'auto', right: '0', left: 'auto', - bottom: '10%', - transform: 'translate(100%, 0) rotate(180deg)', + bottom: `${offsetY}`, + transform: 'translate(100%, 50%) rotate(180deg)', }, right: { top: '50%', @@ -175,18 +177,18 @@ export const getIconPosition = ( transform: 'translate(-100%, -50%) rotate(0deg)', }, rightStart: { - top: '10%', + top: `${offsetY}`, right: 'auto', left: '0', bottom: 'auto', - transform: 'translate(-100%, 0) rotate(0deg)', + transform: 'translate(-100%, -50%) rotate(0deg)', }, rightEnd: { top: 'auto', right: 'auto', left: '0', - bottom: '10%', - transform: 'translate(-100%, 0) rotate(0deg)', + bottom: `${offsetY}`, + transform: 'translate(-100%, 50%) rotate(0deg)', }, } diff --git a/components/tooltip/tooltip-content.tsx b/components/tooltip/tooltip-content.tsx index a5586c701..7b9477c10 100644 --- a/components/tooltip/tooltip-content.tsx +++ b/components/tooltip/tooltip-content.tsx @@ -9,6 +9,8 @@ import { getColors } from './styles' import { getPosition, TooltipPosition, defaultTooltipPosition } from './placement' import TooltipIcon from './tooltip-icon' import { Placement, SnippetTypes } from '../utils/prop-types' +import useScaleable from '../use-scaleable' +import { getRect } from './helper' interface Props { parent?: MutableRefObject | undefined @@ -18,38 +20,11 @@ interface Props { hideArrow: boolean offset: number className?: string + iconOffset: TooltipIconOffset } - -interface ReactiveDomReact { - top: number - bottom: number - left: number - right: number - width: number - height: number -} - -const defaultRect: ReactiveDomReact = { - top: -1000, - left: -1000, - right: -1000, - bottom: -1000, - width: 0, - height: 0, -} - -const getRect = (ref: MutableRefObject): ReactiveDomReact => { - if (!ref || !ref.current) return defaultRect - const rect = ref.current.getBoundingClientRect() - return { - ...rect, - width: rect.width || rect.right - rect.left, - height: rect.height || rect.bottom - rect.top, - top: rect.top + document.documentElement.scrollTop, - bottom: rect.bottom + document.documentElement.scrollTop, - left: rect.left + document.documentElement.scrollLeft, - right: rect.right + document.documentElement.scrollLeft, - } +export type TooltipIconOffset = { + x: string + y: string } const TooltipContent: React.FC> = ({ @@ -57,12 +32,14 @@ const TooltipContent: React.FC> = ({ parent, visible, offset, + iconOffset, placement, type, className, hideArrow, }) => { const theme = useTheme() + const { SCALES } = useScaleable() const el = usePortal('tooltip') const selfRef = useRef(null) const [rect, setRect] = useState(defaultTooltipPosition) @@ -95,33 +72,37 @@ const TooltipContent: React.FC> = ({ ref={selfRef} onClick={preventHandler}>

- {!hideArrow && ( - - )} + {!hideArrow && } {children}
diff --git a/components/tooltip/tooltip-icon.tsx b/components/tooltip/tooltip-icon.tsx index 20da26c76..ae42284f0 100644 --- a/components/tooltip/tooltip-icon.tsx +++ b/components/tooltip/tooltip-icon.tsx @@ -5,20 +5,24 @@ import useTheme from '../use-theme' interface Props { placement: Placement - bgColor: string shadow: boolean } -const TooltipIcon: React.FC = ({ placement, bgColor, shadow }) => { +const TooltipIcon: React.FC = ({ placement, shadow }) => { const theme = useTheme() const { transform, top, left, right, bottom } = useMemo( - () => getIconPosition(placement, 3), + () => + getIconPosition( + placement, + 'var(--tooltip-icon-offset-x)', + 'var(--tooltip-icon-offset-y)', + ), [placement], ) const bgColorWithDark = useMemo(() => { - if (!shadow || theme.type !== 'dark') return bgColor + if (!shadow || theme.type !== 'dark') return 'var(--tooltip-content-bg)' return theme.palette.accents_2 - }, [theme.type, bgColor, shadow]) + }, [theme.type, shadow]) return ( @@ -41,4 +45,4 @@ const TooltipIcon: React.FC = ({ placement, bgColor, shadow }) => { ) } -export default React.memo(TooltipIcon) +export default TooltipIcon diff --git a/components/tooltip/tooltip.tsx b/components/tooltip/tooltip.tsx index f754040c7..c6fba5e49 100644 --- a/components/tooltip/tooltip.tsx +++ b/components/tooltip/tooltip.tsx @@ -1,18 +1,22 @@ -import React, { useEffect, useRef, useState } from 'react' -import TooltipContent from './tooltip-content' +import React, { useEffect, useMemo, useRef, useState } from 'react' +import TooltipContent, { TooltipIconOffset } from './tooltip-content' import useClickAway from '../utils/use-click-away' import { TriggerTypes, Placement, SnippetTypes } from '../utils/prop-types' +import { withScaleable } from '../use-scaleable' +import { getRect } from './helper' export type TooltipOnVisibleChange = (visible: boolean) => void - +export type TooltipTypes = SnippetTypes +export type TooltipTriggers = TriggerTypes +export type TooltipPlacement = Placement interface Props { text: string | React.ReactNode - type?: SnippetTypes - placement?: Placement + type?: TooltipTypes + placement?: TooltipPlacement visible?: boolean initialVisible?: boolean hideArrow?: boolean - trigger?: TriggerTypes + trigger?: TooltipTriggers enterDelay?: number leaveDelay?: number offset?: number @@ -24,9 +28,9 @@ interface Props { const defaultProps = { initialVisible: false, hideArrow: false, - type: 'default' as SnippetTypes, - trigger: 'hover' as TriggerTypes, - placement: 'top' as Placement, + type: 'default' as TooltipTypes, + trigger: 'hover' as TooltipTriggers, + placement: 'top' as TooltipPlacement, enterDelay: 100, leaveDelay: 0, offset: 12, @@ -38,7 +42,7 @@ const defaultProps = { type NativeAttrs = Omit, keyof Props> export type TooltipProps = Props & NativeAttrs -const Tooltip: React.FC> = ({ +const TooltipComponent: React.FC> = ({ children, initialVisible, text, @@ -58,12 +62,21 @@ const Tooltip: React.FC> = ({ const timer = useRef() const ref = useRef(null) const [visible, setVisible] = useState(initialVisible) + const iconOffset = useMemo(() => { + if (!ref?.current) return { x: '0.75em', y: '0.75em' } + const rect = getRect(ref) + return { + x: `${rect.width ? rect.width / 2 : 0}px`, + y: `${rect.height ? rect.height / 2 : 0}px`, + } + }, [ref?.current]) const contentProps = { type, visible, offset, placement, hideArrow, + iconOffset, parent: ref, className: portalClassName, } @@ -116,6 +129,7 @@ const Tooltip: React.FC> = ({ ) } -Tooltip.defaultProps = defaultProps -Tooltip.displayName = 'GiestTooltip' +TooltipComponent.defaultProps = defaultProps +TooltipComponent.displayName = 'GiestTooltip' +const Tooltip = withScaleable(TooltipComponent) export default Tooltip diff --git a/components/tree/__tests__/index.test.tsx b/components/tree/__tests__/index.test.tsx index 5db7f0b1e..ba972e242 100644 --- a/components/tree/__tests__/index.test.tsx +++ b/components/tree/__tests__/index.test.tsx @@ -2,9 +2,9 @@ import React from 'react' import { mount } from 'enzyme' import { Tree } from 'components' import { nativeEvent } from 'tests/utils' -import { FileTreeValue } from '../tree' +import { TreeFile } from '../tree' -const mockFiles: Array = [ +const mockFiles: Array = [ { type: 'file', name: 'cs.js', diff --git a/components/tree/index.ts b/components/tree/index.ts index 2285c85c6..7e38f9741 100644 --- a/components/tree/index.ts +++ b/components/tree/index.ts @@ -9,4 +9,5 @@ export type TreeComponentType = typeof Tree & { ;(Tree as TreeComponentType).File = TreeFile ;(Tree as TreeComponentType).Folder = TreeFolder +export type { TreeProps, TreeFile } from './tree' export default Tree as TreeComponentType diff --git a/components/tree/tree.tsx b/components/tree/tree.tsx index 3ece23392..6ae7088cb 100644 --- a/components/tree/tree.tsx +++ b/components/tree/tree.tsx @@ -3,21 +3,21 @@ import TreeFile from './tree-file' import TreeFolder from './tree-folder' import { TreeContext } from './tree-context' import { tuple } from '../utils/prop-types' -import { sortChildren } from './/tree-help' +import { sortChildren } from './tree-help' const FileTreeValueType = tuple('directory', 'file') const directoryType = FileTreeValueType[0] -export type FileTreeValue = { +export type TreeFile = { type: typeof FileTreeValueType[number] name: string extra?: string - files?: Array + files?: Array } interface Props { - value?: Array + value?: Array initialExpand?: boolean onClick?: (path: string) => void className?: string @@ -31,7 +31,7 @@ const defaultProps = { type NativeAttrs = Omit, keyof Props> export type TreeProps = Props & NativeAttrs -const makeChildren = (value: Array = []) => { +const makeChildren = (value: Array = []) => { if (!value || !value.length) return null return value .sort((a, b) => { diff --git a/components/use-all-themes/index.ts b/components/use-all-themes/index.ts index 7f04c21fe..947e11a7a 100644 --- a/components/use-all-themes/index.ts +++ b/components/use-all-themes/index.ts @@ -1,3 +1,4 @@ import { useAllThemes } from './all-themes-context' +export type { AllThemesConfig } from './all-themes-context' export default useAllThemes diff --git a/components/use-body-scroll/index.ts b/components/use-body-scroll/index.ts index f65551d06..23bbbbb4b 100644 --- a/components/use-body-scroll/index.ts +++ b/components/use-body-scroll/index.ts @@ -1,3 +1,4 @@ import useBodyScroll from './use-body-scroll' +export type { BodyScrollOptions } from './use-body-scroll' export default useBodyScroll diff --git a/components/use-clipboard/index.ts b/components/use-clipboard/index.ts index 3c0996217..8b504e19e 100644 --- a/components/use-clipboard/index.ts +++ b/components/use-clipboard/index.ts @@ -1,3 +1,4 @@ import useClipboard from './use-clipboard' +export type { UseClipboardOptions, UseClipboardResult } from './use-clipboard' export default useClipboard diff --git a/components/use-keyboard/index.ts b/components/use-keyboard/index.ts index e7fb882ed..752122b20 100644 --- a/components/use-keyboard/index.ts +++ b/components/use-keyboard/index.ts @@ -1,5 +1,11 @@ import useKeyboard from './use-keyboard' import { KeyMod, KeyCode } from './codes' -export default useKeyboard export { KeyMod, KeyCode } +export type { + UseKeyboardHandler, + KeyboardOptions, + KeyboardResult, + UseKeyboard, +} from './use-keyboard' +export default useKeyboard diff --git a/components/use-media-query/index.ts b/components/use-media-query/index.ts index 0a6879a4a..0f6bb7101 100644 --- a/components/use-media-query/index.ts +++ b/components/use-media-query/index.ts @@ -1,3 +1,4 @@ import useMediaQuery from './use-media-query' +export type { ResponsiveBreakpoint, ResponsiveOptions } from './use-media-query' export default useMediaQuery diff --git a/components/use-theme/theme-context.ts b/components/use-theme/theme-context.ts index 7083e5a31..da281f309 100644 --- a/components/use-theme/theme-context.ts +++ b/components/use-theme/theme-context.ts @@ -1,10 +1,9 @@ import React from 'react' import Themes from '../themes' -import { GeistUIThemes } from '../themes/presets/index' +import { GeistUIThemes } from '../themes/presets' const defaultTheme = Themes.getPresetStaticTheme() -export const ThemeContext: React.Context = React.createContext( - defaultTheme, -) +export const ThemeContext: React.Context = + React.createContext(defaultTheme) export const useTheme = (): GeistUIThemes => React.useContext(ThemeContext) diff --git a/components/use-toasts/index.ts b/components/use-toasts/index.ts index 3d7f07d6f..a559ff260 100644 --- a/components/use-toasts/index.ts +++ b/components/use-toasts/index.ts @@ -1,3 +1,4 @@ import useToasts from './use-toast' +export type { ToastAction, Toast, ToastType } from './use-toast' export default useToasts diff --git a/components/use-toasts/use-toast.tsx b/components/use-toasts/use-toast.tsx index 165ea6f0c..bca6d9b11 100644 --- a/components/use-toasts/use-toast.tsx +++ b/components/use-toasts/use-toast.tsx @@ -10,10 +10,10 @@ export interface ToastAction { handler: (event: React.MouseEvent, cancel: () => void) => void passive?: boolean } - +export type ToastType = NormalTypes export interface Toast { text?: string | React.ReactNode - type?: NormalTypes + type?: ToastType delay?: number actions?: Array } diff --git a/components/user/index.ts b/components/user/index.ts index 2c9b7cc7b..755820976 100644 --- a/components/user/index.ts +++ b/components/user/index.ts @@ -6,4 +6,5 @@ export type UserComponentType = typeof User & { } ;(User as UserComponentType).Link = UserLink +export type { UserProps } from './user' export default User as UserComponentType diff --git a/package.json b/package.json index 00c1c1dfc..a102b9173 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,8 @@ "build:esm": "babel --config-file ./scripts/babel.config.js --extensions \".js,.ts,.tsx\" ./components --out-dir ./esm --ignore \"**/__tests__/**/*,**/*.d.ts\"", "build:webpack": "webpack --config scripts/webpack.config.js", "build:types": "ttsc -p ./scripts", - "build": "yarn clear && yarn build:esm && yarn build:webpack && yarn build:types", + "build:esm-types": "ttsc -p ./scripts --outDir ./esm", + "build": "yarn clear && yarn build:esm && yarn build:webpack && yarn build:types && yarn build:esm-types", "release": "yarn build && yarn publish --access public --non-interactive" }, "files": [ From 3b7f30380354a1d0d1689504cbc79a6ccd8313b0 Mon Sep 17 00:00:00 2001 From: unix Date: Wed, 23 Jun 2021 19:16:10 +0800 Subject: [PATCH 2/5] refactor: optimize events of all popup related components --- components/modal/modal.tsx | 18 +++-- components/popover/popover-context.ts | 15 ++++ components/popover/popover-item.tsx | 70 ++++++++++------- components/popover/popover.tsx | 86 +++++++++++++++------ components/shared/backdrop.tsx | 10 +-- components/tooltip/tooltip-content.tsx | 1 - components/tooltip/tooltip.tsx | 6 +- components/use-click-away/use-click-away.ts | 17 ++-- pages/en-us/components/modal.mdx | 35 ++++----- pages/en-us/components/popover.mdx | 38 ++++----- pages/en-us/components/tooltip.mdx | 30 +++---- pages/zh-cn/components/modal.mdx | 21 +++-- pages/zh-cn/components/popover.mdx | 38 ++++----- pages/zh-cn/components/tooltip.mdx | 30 +++---- 14 files changed, 248 insertions(+), 167 deletions(-) create mode 100644 components/popover/popover-context.ts diff --git a/components/modal/modal.tsx b/components/modal/modal.tsx index 8b87b513b..5facc2d0d 100644 --- a/components/modal/modal.tsx +++ b/components/modal/modal.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useMemo } from 'react' +import React, { MouseEvent, useEffect, useMemo } from 'react' import { createPortal } from 'react-dom' import usePortal from '../utils/use-portal' import ModalWrapper from './modal-wrapper' @@ -15,6 +15,7 @@ interface Props { disableBackdropClick?: boolean onClose?: () => void onOpen?: () => void + onContentClick?: (event: MouseEvent) => void open?: boolean wrapClassName?: string } @@ -28,12 +29,13 @@ type NativeAttrs = Omit, keyof Props> export type ModalProps = Props & NativeAttrs const ModalComponent: React.FC> = ({ - children, - disableBackdropClick, - onClose, - onOpen, open, + onOpen, + onClose, + children, wrapClassName, + onContentClick, + disableBackdropClick, }: React.PropsWithChildren & typeof defaultProps) => { const portal = usePortal('modal') const { SCALES } = useScaleable() @@ -76,7 +78,11 @@ const ModalComponent: React.FC> = ({ if (!portal) return null return createPortal( - + {withoutActionsChildren} {hasActions && {ActionsChildren}} diff --git a/components/popover/popover-context.ts b/components/popover/popover-context.ts new file mode 100644 index 000000000..2aab934fc --- /dev/null +++ b/components/popover/popover-context.ts @@ -0,0 +1,15 @@ +import React, { useContext } from 'react' + +export type PopoverConfig = { + disableItemsAutoClose: boolean + onItemClick: (e: React.MouseEvent) => void +} + +const defaultContext = { + disableItemsAutoClose: false, + onItemClick: () => {}, +} + +export const PopoverContext = React.createContext(defaultContext) + +export const usePopoverContext = () => useContext(PopoverContext) diff --git a/components/popover/popover-item.tsx b/components/popover/popover-item.tsx index 744bfae10..a858449fe 100644 --- a/components/popover/popover-item.tsx +++ b/components/popover/popover-item.tsx @@ -1,88 +1,98 @@ import React from 'react' import useTheme from '../use-theme' +import useScaleable, { withScaleable } from '../use-scaleable' +import { usePopoverContext } from './popover-context' interface Props { line?: boolean title?: boolean + disableAutoClose?: boolean + onClick?: (e: React.MouseEvent) => void } const defaultProps = { line: false, title: false, + disableAutoClose: false, className: '', } type NativeAttrs = Omit, keyof Props> export type PopoverItemProps = Props & NativeAttrs -const PopoverItem: React.FC> = ({ +const PopoverItemComponent: React.FC> = ({ children, line, title, className, + onClick, + disableAutoClose, ...props }: React.PropsWithChildren & typeof defaultProps) => { const theme = useTheme() + const { SCALES } = useScaleable() + const { disableItemsAutoClose, onItemClick } = usePopoverContext() + const hasHandler = Boolean(onClick) + const dontCloseByClick = disableAutoClose || disableItemsAutoClose || title || line + const clickHandler = (event: React.MouseEvent) => { + onClick && onClick(event) + if (dontCloseByClick) { + return event.stopPropagation() + } + onItemClick(event) + } + return ( <>
{children}
- {title && } + {title && } ) } -PopoverItem.defaultProps = defaultProps -PopoverItem.displayName = 'GeistPopoverItem' +PopoverItemComponent.defaultProps = defaultProps +PopoverItemComponent.displayName = 'GeistPopoverItem' +const PopoverItem = withScaleable(PopoverItemComponent) export default PopoverItem diff --git a/components/popover/popover.tsx b/components/popover/popover.tsx index fe6fabdbc..54ea3ad7a 100644 --- a/components/popover/popover.tsx +++ b/components/popover/popover.tsx @@ -1,8 +1,13 @@ -import React, { useMemo } from 'react' -import useTheme from '../use-theme' -import Tooltip, { TooltipProps } from '../tooltip/tooltip' +import React, { useEffect, useMemo, useState } from 'react' +import Tooltip, { + TooltipOnVisibleChange, + TooltipProps, + TooltipTypes, +} from '../tooltip/tooltip' import { Placement, TriggerTypes } from '../utils/prop-types' import { getReactNode } from '../utils/collections' +import useScaleable, { withScaleable } from '../use-scaleable' +import { PopoverContext, PopoverConfig } from './popover-context' export type PopoverTriggerTypes = TriggerTypes export type PopoverPlacement = Placement @@ -10,12 +15,22 @@ interface Props { content?: React.ReactNode | (() => React.ReactNode) trigger?: PopoverTriggerTypes placement?: Placement + disableItemsAutoClose?: boolean } const defaultProps = { + disableItemsAutoClose: false, trigger: 'click' as PopoverTriggerTypes, placement: 'bottom' as Placement, portalClassName: '', + initialVisible: false, + hideArrow: false, + type: 'default' as TooltipTypes, + enterDelay: 100, + leaveDelay: 150, + offset: 12, + className: '', + onVisibleChange: (() => {}) as TooltipOnVisibleChange, } type ExcludeTooltipProps = { @@ -27,35 +42,62 @@ type ExcludeTooltipProps = { export type PopoverProps = Props & Omit -const Popover: React.FC> = ({ +const PopoverComponent: React.FC> = ({ content, children, trigger, placement, + initialVisible, portalClassName, + disableItemsAutoClose, + onVisibleChange, + visible: customVisible, ...props -}) => { - const theme = useTheme() +}: React.PropsWithChildren & typeof defaultProps) => { + const { SCALES } = useScaleable() + const [visible, setVisible] = useState(initialVisible) const textNode = useMemo(() => getReactNode(content), [content]) + const onChildClick = () => { + onPopoverVisibleChange(false) + } + const value = useMemo( + () => ({ + onItemClick: onChildClick, + disableItemsAutoClose, + }), + [disableItemsAutoClose], + ) + const onPopoverVisibleChange = (next: boolean) => { + setVisible(next) + onVisibleChange(next) + } + useEffect(() => { + if (customVisible === undefined) return + onPopoverVisibleChange(customVisible) + }, [customVisible]) return ( - - {children} - - + + + {children} + + + ) } -Popover.defaultProps = defaultProps -Popover.displayName = 'GeistPopover' +PopoverComponent.defaultProps = defaultProps +PopoverComponent.displayName = 'GeistPopover' +const Popover = withScaleable(PopoverComponent) export default Popover diff --git a/components/shared/backdrop.tsx b/components/shared/backdrop.tsx index 6598b6861..85d95c435 100644 --- a/components/shared/backdrop.tsx +++ b/components/shared/backdrop.tsx @@ -1,4 +1,4 @@ -import React, { MouseEvent, useCallback } from 'react' +import React, { MouseEvent } from 'react' import useTheme from '../use-theme' import CssTransition from './css-transition' import useCurrentState from '../utils/use-current-state' @@ -7,11 +7,13 @@ interface Props { onClick?: (event: MouseEvent) => void visible?: boolean width?: string + onContentClick?: (event: MouseEvent) => void } const defaultProps = { onClick: () => {}, visible: false, + onContentClick: () => {}, } type NativeAttrs = Omit, keyof Props> @@ -23,6 +25,7 @@ const Backdrop: React.FC> = React.memo( onClick, visible, width, + onContentClick, ...props }: React.PropsWithChildren & typeof defaultProps) => { const theme = useTheme() @@ -31,9 +34,6 @@ const Backdrop: React.FC> = React.memo( if (IsContentMouseDownRef.current) return onClick && onClick(event) } - const childrenClickHandler = useCallback((event: MouseEvent) => { - event.stopPropagation() - }, []) const mouseUpHandler = () => { if (!IsContentMouseDownRef.current) return const timer = setTimeout(() => { @@ -51,7 +51,7 @@ const Backdrop: React.FC> = React.memo( {...props}>
setIsContentMouseDown(true)}> {children} diff --git a/components/tooltip/tooltip-content.tsx b/components/tooltip/tooltip-content.tsx index 7b9477c10..c79ef1670 100644 --- a/components/tooltip/tooltip-content.tsx +++ b/components/tooltip/tooltip-content.tsx @@ -102,7 +102,6 @@ const TooltipContent: React.FC> = ({ padding: ${SCALES.pt(0.65)} ${SCALES.pr(0.9)} ${SCALES.pb(0.65)} ${SCALES.pl(0.9)}; height: 100%; - word-break: break-word; } `}
diff --git a/components/tooltip/tooltip.tsx b/components/tooltip/tooltip.tsx index c6fba5e49..c8004219c 100644 --- a/components/tooltip/tooltip.tsx +++ b/components/tooltip/tooltip.tsx @@ -32,7 +32,7 @@ const defaultProps = { trigger: 'hover' as TooltipTriggers, placement: 'top' as TooltipPlacement, enterDelay: 100, - leaveDelay: 0, + leaveDelay: 150, offset: 12, className: '', portalClassName: '', @@ -96,14 +96,14 @@ const TooltipComponent: React.FC> = ({ timer.current = window.setTimeout(() => handler(true), enterDelay) return } - timer.current = window.setTimeout(() => handler(false), leaveDelay) + const leaveDelayWithoutClick = trigger === 'click' ? 0 : leaveDelay + timer.current = window.setTimeout(() => handler(false), leaveDelayWithoutClick) } const mouseEventHandler = (next: boolean) => trigger === 'hover' && changeVisible(next) const clickEventHandler = () => trigger === 'click' && changeVisible(!visible) useClickAway(ref, () => trigger === 'click' && changeVisible(false)) - useEffect(() => { if (customVisible === undefined) return changeVisible(customVisible) diff --git a/components/use-click-away/use-click-away.ts b/components/use-click-away/use-click-away.ts index e40d54f6e..288bb7ecf 100644 --- a/components/use-click-away/use-click-away.ts +++ b/components/use-click-away/use-click-away.ts @@ -1,19 +1,26 @@ -import { MutableRefObject, useEffect } from 'react' +import { MutableRefObject, useEffect, useRef } from 'react' + +export type ClickAwayGetContainer = () => HTMLElement | null const useClickAway = ( ref: MutableRefObject, handler: (event: Event) => void, ) => { + const handlerRef = useRef(handler) + useEffect(() => { + handlerRef.current = handler + }, [handlerRef]) + useEffect(() => { const callback = (event: Event) => { const el = ref.current if (!event || !el || el.contains((event as any).target)) return - handler(event) + handlerRef.current(event) } - document.addEventListener('click', callback, { capture: true }) - return () => document.removeEventListener('click', callback, { capture: true }) - }, [ref, handler]) + document.addEventListener('click', callback) + return () => document.removeEventListener('click', callback) + }, [ref]) } export default useClickAway diff --git a/pages/en-us/components/modal.mdx b/pages/en-us/components/modal.mdx index 49f0a7fd5..60ed3c605 100644 --- a/pages/en-us/components/modal.mdx +++ b/pages/en-us/components/modal.mdx @@ -231,14 +231,15 @@ Display popup content that requires attention or provides additional information Modal.Props -| Attribute | Description | Type | Accepted values | Default | -| ------------------------ | -------------------------------- | ---------------- | --------------------------------------- | ------- | -| **open** | open or close | `boolean` | - | `false` | -| **onOpen** | open event | `() => void` | - | - | -| **onClose** | open event | `() => void` | - | - | -| **wrapClassName** | className of the modal dialog | `string` | - | - | -| **disableBackdropClick** | click background and don't close | `boolean` | - | `false` | -| ... | native props | `HTMLAttributes` | `'autoFocus', 'name', 'className', ...` | - | +| Attribute | Description | Type | Accepted values | Default | +| ------------------------ | -------------------------------- | ------------------------- | --------------------------------------- | ------- | +| **open** | open or close | `boolean` | - | `false` | +| **onOpen** | open event | `() => void` | - | - | +| **onClose** | open event | `() => void` | - | - | +| **onContentClick** | event from modal content | `(e: MouseEvent) => void` | - | - | +| **wrapClassName** | className of the modal dialog | `string` | - | - | +| **disableBackdropClick** | click background and don't close | `boolean` | - | `false` | +| ... | native props | `HTMLAttributes` | `'autoFocus', 'name', 'className', ...` | - | Modal.Title.Props @@ -260,20 +261,18 @@ Display popup content that requires attention or provides additional information Modal.Action.Props -| Attribute | Description | Type | Accepted values | Default | -| ------------ | ---------------------- | ------------------------------------------------------ | ------------------------ | ------- | -| **passive** | display passive mode | `boolean` | - | `false` | -| **disabled** | disable current action | `boolean` | - | `false` | -| **onClick** | click handler | [(event: ModalActionEvent) => void](#modalactionevent) | - | - | -| **loading** | show loading | `boolean` | - | `false` | -| ... | native props | `ButtonHTMLAttributes` | `'id', 'className', ...` | - | +| Attribute | Description | Type | Accepted values | Default | +| ------------ | ---------------------- | -------------------------------------------------- | ------------------------ | ------- | +| **passive** | display passive mode | `boolean` | - | `false` | +| **disabled** | disable current action | `boolean` | - | `false` | +| **onClick** | click handler | [(e: ModalActionEvent) => void](#modalactionevent) | - | - | +| **loading** | show loading | `boolean` | - | `false` | +| ... | native props | `ButtonHTMLAttributes` | `'id', 'className', ...` | - | useModal ```ts -type useModal = ( - initialVisible: boolean, -) => { +type useModal = (initialVisible: boolean) => { visible: boolean setVisible: Dispatch> currentRef: MutableRefObject diff --git a/pages/en-us/components/popover.mdx b/pages/en-us/components/popover.mdx index 9d908a4a9..eb1264fdc 100644 --- a/pages/en-us/components/popover.mdx +++ b/pages/en-us/components/popover.mdx @@ -93,27 +93,29 @@ The floating box popped by clicking or hovering. Popover.Props -| Attribute | Description | Type | Accepted values | Default | -| ------------------- | ---------------------------------------------- | ----------------------------- | -------------------------------- | -------- | -| **content** | content of pop-up | `ReactNode` `() => ReactNode` | - | - | -| **visible** | visible or not | `boolean` | - | `false` | -| **initialVisible** | visible on initial | `boolean` | - | `false` | -| **hideArrow** | hide arrow icon | `boolean` | - | `false` | -| **placement** | position of the popover relative to the target | [Placement](#placement) | - | `bottom` | -| **trigger** | tooltip trigger mode | `'click' / 'hover'` | - | `click` | -| **enterDelay**(ms) | delay before popover is shown | `number` | - | `100` | -| **leaveDelay**(ms) | delay before popover is hidden | `number` | - | `0` | -| **offset**(px) | distance between pop-up and target | `number` | - | `12` | -| **portalClassName** | className of pop-up box | `string` | - | - | -| **onVisibleChange** | call when visibility of the popover is changed | `(visible: boolean) => void` | - | - | -| ... | native props | `HTMLAttributes` | `'id', 'name', 'className', ...` | - | +| Attribute | Description | Type | Accepted values | Default | +| ------------------------- | ---------------------------------------------- | ----------------------------- | ------------------- | -------- | +| **content** | content of pop-up | `ReactNode` `() => ReactNode` | - | - | +| **visible** | visible or not | `boolean` | - | `false` | +| **initialVisible** | visible on initial | `boolean` | - | `false` | +| **hideArrow** | hide arrow icon | `boolean` | - | `false` | +| **placement** | position of the popover relative to the target | [Placement](#placement) | - | `bottom` | +| **trigger** | tooltip trigger mode | `'click' / 'hover'` | - | `click` | +| **enterDelay**(ms) | delay before popover is shown | `number` | - | `100` | +| **leaveDelay**(ms) | delay before popover is hidden | `number` | - | `0` | +| **offset**(px) | distance between pop-up and target | `number` | - | `12` | +| **portalClassName** | className of pop-up box | `string` | - | - | +| **onVisibleChange** | call when visibility of the popover is changed | `(visible: boolean) => void` | - | - | +| **disableItemsAutoClose** | prevent close Popover when Items clicked | `boolean` | - | - | +| ... | native props | `HTMLAttributes` | `'id', 'name', ...` | - | Popover.Item -| Attribute | Description | Type | Accepted values | Default | -| --------- | -------------------------- | --------- | --------------- | ------- | -| **line** | show a line | `boolean` | - | `false` | -| **title** | show text with title style | `boolean` | - | `false` | +| Attribute | Description | Type | Accepted values | Default | +| -------------------- | ---------------------------------- | --------- | --------------- | ------- | +| **line** | show a line | `boolean` | - | `false` | +| **title** | show text with title style | `boolean` | - | `false` | +| **disableAutoClose** | prevent close Popover when clicked | `boolean` | - | `false` | Placement diff --git a/pages/en-us/components/tooltip.mdx b/pages/en-us/components/tooltip.mdx index d11c1a008..5f7cfdd93 100644 --- a/pages/en-us/components/tooltip.mdx +++ b/pages/en-us/components/tooltip.mdx @@ -170,21 +170,21 @@ Displays additional information on hover. Tooltip.Props -| Attribute | Description | Type | Accepted values | Default | -| ------------------- | ---------------------------------------------- | ----------------------------- | -------------------------------- | --------- | -| **text** | text of pop-up | `string` `React.ReactNode` | - | - | -| **visible** | visible or not | `boolean` | - | `false` | -| **initialVisible** | visible on initial | `boolean` | - | `false` | -| **hideArrow** | hide arrow icon | `boolean` | - | `false` | -| **type** | preset style type | [TooltipTypes](#tooltiptypes) | - | `default` | -| **placement** | position of the tooltip relative to the target | [Placement](#placement) | - | `top` | -| **trigger** | tooltip trigger mode | `'click' / 'hover'` | - | `hover` | -| **enterDelay**(ms) | delay before tooltip is shown | `number` | - | `100` | -| **leaveDelay**(ms) | delay before tooltip is hidden | `number` | - | `0` | -| **offset**(px) | distance between pop-up and target | `number` | - | `12` | -| **portalClassName** | className of pop-up box | `string` | - | - | -| **onVisibleChange** | call when visibility of the tooltip is changed | `(visible: boolean) => void` | - | - | -| ... | native props | `HTMLAttributes` | `'id', 'name', 'className', ...` | - | +| Attribute | Description | Type | Accepted values | Default | +| ------------------- | ---------------------------------------------------------- | ----------------------------- | --------------- | --------- | +| **text** | text of pop-up | `string` `React.ReactNode` | - | - | +| **visible** | visible or not | `boolean` | - | `false` | +| **initialVisible** | visible on initial | `boolean` | - | `false` | +| **hideArrow** | hide arrow icon | `boolean` | - | `false` | +| **type** | preset style type | [TooltipTypes](#tooltiptypes) | - | `default` | +| **placement** | position of the tooltip relative to the target | [Placement](#placement) | - | `top` | +| **trigger** | tooltip trigger mode | `'click' / 'hover'` | - | `hover` | +| **enterDelay**(ms) | delay before tooltip is shown | `number` | - | `100` | +| **leaveDelay**(ms) | delay before tooltip is hidden (only work in 'hover' mode) | `number` | - | `150` | +| **offset**(px) | distance between pop-up and target | `number` | - | `12` | +| **portalClassName** | className of pop-up box | `string` | - | - | +| **onVisibleChange** | call when visibility of the tooltip is changed | `(visible: boolean) => void` | - | - | +| ... | native props | `HTMLAttributes` | `'id' ...` | - | TooltipTypes diff --git a/pages/zh-cn/components/modal.mdx b/pages/zh-cn/components/modal.mdx index 68d836229..1e8b3856a 100644 --- a/pages/zh-cn/components/modal.mdx +++ b/pages/zh-cn/components/modal.mdx @@ -185,14 +185,15 @@ export const meta = { Modal.Props -| 属性 | 描述 | 类型 | 推荐值 | 默认 | -| ------------------------ | -------------------------- | ---------------- | --------------------------------------- | ------- | -| **open** | 打开或关闭对话框 | `boolean` | - | `false` | -| **onOpen** | 对话框打开的事件 | `() => void` | - | - | -| **onClose** | 对话框关闭的事件 | `() => void` | - | - | -| **wrapClassName** | 对话框的自定义样式类名 | `string` | - | - | -| **disableBackdropClick** | 点击背景层时是否关闭对话框 | `boolean` | - | `false` | -| ... | 原生属性 | `HTMLAttributes` | `'autoFocus', 'name', 'className', ...` | - | +| 属性 | 描述 | 类型 | 推荐值 | 默认 | +| ------------------------ | -------------------------- | ------------------------- | --------------------------------------- | ------- | +| **open** | 打开或关闭对话框 | `boolean` | - | `false` | +| **onOpen** | 打开的事件 | `() => void` | - | - | +| **onClose** | 关闭的事件 | `() => void` | - | - | +| **onContentClick** | 对话框内部点击事件 | `(e: MouseEvent) => void` | - | - | +| **wrapClassName** | 对话框的自定义样式类名 | `string` | - | - | +| **disableBackdropClick** | 点击背景层时是否关闭对话框 | `boolean` | - | `false` | +| ... | 原生属性 | `HTMLAttributes` | `'autoFocus', 'name', 'className', ...` | - | Modal.Title.Props @@ -225,9 +226,7 @@ export const meta = { useModal ```ts -type useModal = ( - initialVisible: boolean, -) => { +type useModal = (initialVisible: boolean) => { visible: boolean setVisible: Dispatch> currentRef: MutableRefObject diff --git a/pages/zh-cn/components/popover.mdx b/pages/zh-cn/components/popover.mdx index bb0875bec..0a2706223 100644 --- a/pages/zh-cn/components/popover.mdx +++ b/pages/zh-cn/components/popover.mdx @@ -94,27 +94,29 @@ export const meta = { Popover.Props -| 属性 | 描述 | 类型 | 推荐值 | 默认 | -| ------------------- | ------------------------ | ----------------------------- | -------------------------------- | -------- | -| **content** | 气泡卡片内容 | `ReactNode` `() => ReactNode` | - | - | -| **visible** | 手动控制气泡的显示与隐藏 | `boolean` | - | `false` | -| **initialVisible** | 初始是否可见 | `boolean` | - | `false` | -| **hideArrow** | 隐藏箭头 | `boolean` | - | `false` | -| **placement** | 气泡卡片与目标的对齐方式 | [Placement](#placement) | - | `bottom` | -| **trigger** | 触发气泡卡片的方式 | `'click' / 'hover'` | - | `click` | -| **enterDelay**(ms) | 在提示显示前的延迟 | `number` | - | `100` | -| **leaveDelay**(ms) | 关闭提示前的延迟 | `number` | - | `0` | -| **offset**(px) | 提示框与目标之间的偏移 | `number` | - | `12` | -| **portalClassName** | 气泡卡片的类名 | `string` | - | - | -| **onVisibleChange** | 当气泡卡片状态改变时触发 | `(visible: boolean) => void` | - | - | -| ... | 原生属性 | `HTMLAttributes` | `'id', 'name', 'className', ...` | - | +| 属性 | 描述 | 类型 | 推荐值 | 默认 | +| ------------------------- | ---------------------------- | ----------------------------- | ----------- | -------- | +| **content** | 气泡卡片内容 | `ReactNode` `() => ReactNode` | - | - | +| **visible** | 手动控制气泡的显示与隐藏 | `boolean` | - | `false` | +| **initialVisible** | 初始是否可见 | `boolean` | - | `false` | +| **hideArrow** | 隐藏箭头 | `boolean` | - | `false` | +| **placement** | 气泡卡片与目标的对齐方式 | [Placement](#placement) | - | `bottom` | +| **trigger** | 触发气泡卡片的方式 | `'click' / 'hover'` | - | `click` | +| **enterDelay**(ms) | 在提示显示前的延迟 | `number` | - | `100` | +| **leaveDelay**(ms) | 关闭提示前的延迟 | `number` | - | `0` | +| **offset**(px) | 提示框与目标之间的偏移 | `number` | - | `12` | +| **portalClassName** | 气泡卡片的类名 | `string` | - | - | +| **onVisibleChange** | 当气泡卡片状态改变时触发 | `(visible: boolean) => void` | - | - | +| **disableItemsAutoClose** | 当 Item 被点击时阻止气泡关闭 | `boolean` | - | `false` | +| ... | 原生属性 | `HTMLAttributes` | `'id', ...` | - | Popover.Item -| 属性 | 描述 | 类型 | 推荐值 | 默认 | -| --------- | -------------------- | --------- | ------ | ------- | -| **line** | 显示线条 | `boolean` | - | `false` | -| **title** | 用标题的样式展示文字 | `boolean` | - | `false` | +| 属性 | 描述 | 类型 | 推荐值 | 默认 | +| -------------------- | ---------------------------- | --------- | ------ | ------- | +| **line** | 显示线条 | `boolean` | - | `false` | +| **title** | 用标题的样式展示文字 | `boolean` | - | `false` | +| **disableAutoClose** | 触发点击事件时也不要关闭气泡 | `boolean` | - | `false` | Placement diff --git a/pages/zh-cn/components/tooltip.mdx b/pages/zh-cn/components/tooltip.mdx index 5ff978de6..3f3fee799 100644 --- a/pages/zh-cn/components/tooltip.mdx +++ b/pages/zh-cn/components/tooltip.mdx @@ -170,21 +170,21 @@ export const meta = { Tooltip.Props -| 属性 | 描述 | 类型 | 推荐值 | 默认 | -| ------------------- | -------------------------- | ----------------------------- | -------------------------------- | --------- | -| **text** | 弹出框文字 | `string` `React.ReactNode` | - | - | -| **visible** | 手动控制提示框的显示与隐藏 | `boolean` | - | `false` | -| **initialVisible** | 初始是否可见 | `boolean` | - | `false` | -| **hideArrow** | 隐藏箭头 | `boolean` | - | `false` | -| **type** | 不同的文字提示类型 | [TooltipTypes](#tooltiptypes) | - | `default` | -| **placement** | 提示框与目标的对齐方式 | [Placement](#placement) | - | `top` | -| **trigger** | 触发提示框的方式 | `'click' / 'hover'` | - | `hover` | -| **enterDelay**(ms) | 在提示显示前的延迟 | `number` | - | `100` | -| **leaveDelay**(ms) | 关闭提示前的延迟 | `number` | - | `0` | -| **offset**(px) | 提示框与目标之间的偏移 | `number` | - | `12` | -| **portalClassName** | 弹出框的类名 | `string` | - | - | -| **onVisibleChange** | 当提示框状态改变时触发 | `(visible: boolean) => void` | - | - | -| ... | 原生属性 | `HTMLAttributes` | `'id', 'name', 'className', ...` | - | +| 属性 | 描述 | 类型 | 推荐值 | 默认 | +| ------------------- | ---------------------------------- | ----------------------------- | ---------- | --------- | +| **text** | 弹出框文字 | `string` `React.ReactNode` | - | - | +| **visible** | 手动控制提示框的显示与隐藏 | `boolean` | - | `false` | +| **initialVisible** | 初始是否可见 | `boolean` | - | `false` | +| **hideArrow** | 隐藏箭头 | `boolean` | - | `false` | +| **type** | 不同的文字提示类型 | [TooltipTypes](#tooltiptypes) | - | `default` | +| **placement** | 提示框与目标的对齐方式 | [Placement](#placement) | - | `top` | +| **trigger** | 触发提示框的方式 | `'click' / 'hover'` | - | `hover` | +| **enterDelay**(ms) | 在提示显示前的延迟 | `number` | - | `100` | +| **leaveDelay**(ms) | 关闭提示前的延迟 (仅 'hover' 模式) | `number` | - | `150` | +| **offset**(px) | 提示框与目标之间的偏移 | `number` | - | `12` | +| **portalClassName** | 弹出框的类名 | `string` | - | - | +| **onVisibleChange** | 当提示框状态改变时触发 | `(visible: boolean) => void` | - | - | +| ... | 原生属性 | `HTMLAttributes` | `'id' ...` | - | TooltipTypes From 211e69939c1247dcc0174402f85b658facfcae05 Mon Sep 17 00:00:00 2001 From: unix Date: Wed, 23 Jun 2021 22:24:21 +0800 Subject: [PATCH 3/5] test: append testcases for popup base component --- .../__snapshots__/index.test.tsx.snap | 18 +++-- components/popover/__tests__/index.test.tsx | 71 +++++++++++++++++++ components/shared/__tests__/backdrop.test.tsx | 6 +- .../__snapshots__/index.test.tsx.snap | 4 -- components/tooltip/__test__/index.test.tsx | 6 +- .../customization/editor-color-item.tsx | 3 +- lib/components/customization/editor.tsx | 15 ++-- lib/components/displays/colors.tsx | 11 +-- pages/zh-cn/components/slider.mdx | 14 ++-- pages/zh-cn/components/spacer.mdx | 36 +++++----- 10 files changed, 122 insertions(+), 62 deletions(-) diff --git a/components/popover/__tests__/__snapshots__/index.test.tsx.snap b/components/popover/__tests__/__snapshots__/index.test.tsx.snap index b673ec64c..00260f3eb 100644 --- a/components/popover/__tests__/__snapshots__/index.test.tsx.snap +++ b/components/popover/__tests__/__snapshots__/index.test.tsx.snap @@ -2,11 +2,10 @@ exports[`Popover should render react-node 1`] = ` "