@fountain-ui/core 3.0.0-alpha.1 → 3.0.0-alpha.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/commonjs/Accordion/Accordion.js +4 -1
- package/build/commonjs/Accordion/Accordion.js.map +1 -1
- package/build/commonjs/Accordion/index.js +8 -0
- package/build/commonjs/Accordion/index.js.map +1 -1
- package/build/commonjs/Accordion/useVariantStyleMap.js +11 -10
- package/build/commonjs/Accordion/useVariantStyleMap.js.map +1 -1
- package/build/commonjs/AppBar/index.js +8 -0
- package/build/commonjs/AppBar/index.js.map +1 -1
- package/build/commonjs/Badge/index.js +26 -0
- package/build/commonjs/Badge/index.js.map +1 -1
- package/build/commonjs/Badge/useVariantStyleMap.js +2 -2
- package/build/commonjs/Badge/useVariantStyleMap.js.map +1 -1
- package/build/commonjs/BottomSheetTitle/BottomSheetTitle.js +1 -0
- package/build/commonjs/BottomSheetTitle/BottomSheetTitle.js.map +1 -1
- package/build/commonjs/Button/Button.js +15 -3
- package/build/commonjs/Button/Button.js.map +1 -1
- package/build/commonjs/Button/ButtonProps.js +7 -7
- package/build/commonjs/Button/ButtonProps.js.map +1 -1
- package/build/commonjs/Button/index.js +20 -0
- package/build/commonjs/Button/index.js.map +1 -1
- package/build/commonjs/Button/useVariantStyleMap.js +5 -7
- package/build/commonjs/Button/useVariantStyleMap.js.map +1 -1
- package/build/commonjs/Checkbox/Checkbox.js +5 -2
- package/build/commonjs/Checkbox/Checkbox.js.map +1 -1
- package/build/commonjs/Checkbox/index.js +8 -0
- package/build/commonjs/Checkbox/index.js.map +1 -1
- package/build/commonjs/Checkbox/useVariantStyleMap.js +6 -2
- package/build/commonjs/Checkbox/useVariantStyleMap.js.map +1 -1
- package/build/commonjs/Chip/index.js +14 -0
- package/build/commonjs/Chip/index.js.map +1 -1
- package/build/commonjs/Chip/useChipStyle.js +2 -18
- package/build/commonjs/Chip/useChipStyle.js.map +1 -1
- package/build/commonjs/Dialog/index.js +8 -0
- package/build/commonjs/Dialog/index.js.map +1 -1
- package/build/commonjs/DialogContent/DialogContent.js +1 -2
- package/build/commonjs/DialogContent/DialogContent.js.map +1 -1
- package/build/commonjs/Divider/Divider.js +1 -1
- package/build/commonjs/Divider/Divider.js.map +1 -1
- package/build/commonjs/Divider/DividerProps.js +3 -3
- package/build/commonjs/Divider/DividerProps.js.map +1 -1
- package/build/commonjs/Divider/index.js +14 -0
- package/build/commonjs/Divider/index.js.map +1 -1
- package/build/commonjs/Empty/Empty.js +1 -2
- package/build/commonjs/Empty/Empty.js.map +1 -1
- package/build/commonjs/Flexbox/Flexbox.js +2 -0
- package/build/commonjs/Flexbox/Flexbox.js.map +1 -1
- package/build/commonjs/Flexbox/FlexboxProps.js.map +1 -1
- package/build/commonjs/IconButton/index.js +8 -0
- package/build/commonjs/IconButton/index.js.map +1 -1
- package/build/commonjs/ListItem/ListItem.js +47 -25
- package/build/commonjs/ListItem/ListItem.js.map +1 -1
- package/build/commonjs/ListItem/ListItemProps.js.map +1 -1
- package/build/commonjs/ListItemIcon/ListItemIcon.js +1 -2
- package/build/commonjs/ListItemIcon/ListItemIcon.js.map +1 -1
- package/build/commonjs/ListItemSecondaryAction/ListItemSecondaryAction.js +2 -0
- package/build/commonjs/ListItemSecondaryAction/ListItemSecondaryAction.js.map +1 -1
- package/build/commonjs/ListItemText/ListItemText.js +20 -21
- package/build/commonjs/ListItemText/ListItemText.js.map +1 -1
- package/build/commonjs/ListItemText/ListItemTextProps.js.map +1 -1
- package/build/commonjs/ListSubheader/ListSubheader.js +1 -1
- package/build/commonjs/ListSubheader/ListSubheader.js.map +1 -1
- package/build/commonjs/Pagination/NumberPagination.js +1 -1
- package/build/commonjs/Pagination/NumberPagination.js.map +1 -1
- package/build/commonjs/Pagination/index.js +8 -0
- package/build/commonjs/Pagination/index.js.map +1 -1
- package/build/commonjs/Radio/Radio.js +6 -2
- package/build/commonjs/Radio/Radio.js.map +1 -1
- package/build/commonjs/Section/Section.js +32 -0
- package/build/commonjs/Section/Section.js.map +1 -0
- package/build/commonjs/Section/SectionProps.js +2 -0
- package/build/commonjs/Section/SectionProps.js.map +1 -0
- package/build/commonjs/Section/index.js +16 -0
- package/build/commonjs/Section/index.js.map +1 -0
- package/build/commonjs/ShadowView/ShadowView.native.js +4 -0
- package/build/commonjs/ShadowView/ShadowView.native.js.map +1 -1
- package/build/commonjs/Snackbar/index.js +8 -0
- package/build/commonjs/Snackbar/index.js.map +1 -1
- package/build/commonjs/SnackbarContent/SnackbarContent.js +27 -12
- package/build/commonjs/SnackbarContent/SnackbarContent.js.map +1 -1
- package/build/commonjs/SvgIcon/index.js +14 -0
- package/build/commonjs/SvgIcon/index.js.map +1 -1
- package/build/commonjs/Tab/useVariantStyleMap.js +3 -3
- package/build/commonjs/Tab/useVariantStyleMap.js.map +1 -1
- package/build/commonjs/Tabs/Tabs.js +6 -1
- package/build/commonjs/Tabs/Tabs.js.map +1 -1
- package/build/commonjs/Tabs/index.js +14 -0
- package/build/commonjs/Tabs/index.js.map +1 -1
- package/build/commonjs/Tabs/useTabsStyle.js +39 -0
- package/build/commonjs/Tabs/useTabsStyle.js.map +1 -0
- package/build/commonjs/TextField/TextField.js +1 -1
- package/build/commonjs/TextField/TextField.js.map +1 -1
- package/build/commonjs/TextField/index.js +8 -0
- package/build/commonjs/TextField/index.js.map +1 -1
- package/build/commonjs/TextField/useVariantStyleMap.js +2 -2
- package/build/commonjs/TextField/useVariantStyleMap.js.map +1 -1
- package/build/commonjs/Toolbar/index.js +8 -0
- package/build/commonjs/Toolbar/index.js.map +1 -1
- package/build/commonjs/Tooltip/Beaks/index.js +32 -0
- package/build/commonjs/Tooltip/Beaks/index.js.map +1 -1
- package/build/commonjs/Tooltip/Tooltip.js +11 -24
- package/build/commonjs/Tooltip/Tooltip.js.map +1 -1
- package/build/commonjs/Tooltip/index.js +39 -0
- package/build/commonjs/Tooltip/index.js.map +1 -1
- package/build/commonjs/Typography/Typography.js +9 -2
- package/build/commonjs/Typography/Typography.js.map +1 -1
- package/build/commonjs/Typography/TypographyProps.js.map +1 -1
- package/build/commonjs/Typography/index.js +8 -0
- package/build/commonjs/Typography/index.js.map +1 -1
- package/build/commonjs/hooks/useBreakpointUp.js +4 -1
- package/build/commonjs/hooks/useBreakpointUp.js.map +1 -1
- package/build/commonjs/hooks/useContentContainerStyle.js +21 -28
- package/build/commonjs/hooks/useContentContainerStyle.js.map +1 -1
- package/build/commonjs/index.js +21 -0
- package/build/commonjs/index.js.map +1 -1
- package/build/module/Accordion/Accordion.js +4 -1
- package/build/module/Accordion/Accordion.js.map +1 -1
- package/build/module/Accordion/index.js +1 -0
- package/build/module/Accordion/index.js.map +1 -1
- package/build/module/Accordion/useVariantStyleMap.js +11 -10
- package/build/module/Accordion/useVariantStyleMap.js.map +1 -1
- package/build/module/AppBar/index.js +1 -0
- package/build/module/AppBar/index.js.map +1 -1
- package/build/module/Badge/index.js +1 -0
- package/build/module/Badge/index.js.map +1 -1
- package/build/module/Badge/useVariantStyleMap.js +2 -2
- package/build/module/Badge/useVariantStyleMap.js.map +1 -1
- package/build/module/BottomSheetTitle/BottomSheetTitle.js +1 -0
- package/build/module/BottomSheetTitle/BottomSheetTitle.js.map +1 -1
- package/build/module/Button/Button.js +16 -4
- package/build/module/Button/Button.js.map +1 -1
- package/build/module/Button/ButtonProps.js +3 -3
- package/build/module/Button/ButtonProps.js.map +1 -1
- package/build/module/Button/index.js +1 -0
- package/build/module/Button/index.js.map +1 -1
- package/build/module/Button/useVariantStyleMap.js +5 -7
- package/build/module/Button/useVariantStyleMap.js.map +1 -1
- package/build/module/Checkbox/Checkbox.js +5 -2
- package/build/module/Checkbox/Checkbox.js.map +1 -1
- package/build/module/Checkbox/index.js +1 -0
- package/build/module/Checkbox/index.js.map +1 -1
- package/build/module/Checkbox/useVariantStyleMap.js +6 -2
- package/build/module/Checkbox/useVariantStyleMap.js.map +1 -1
- package/build/module/Chip/index.js +1 -0
- package/build/module/Chip/index.js.map +1 -1
- package/build/module/Chip/useChipStyle.js +2 -17
- package/build/module/Chip/useChipStyle.js.map +1 -1
- package/build/module/Dialog/index.js +1 -0
- package/build/module/Dialog/index.js.map +1 -1
- package/build/module/DialogContent/DialogContent.js +1 -2
- package/build/module/DialogContent/DialogContent.js.map +1 -1
- package/build/module/Divider/Divider.js +1 -1
- package/build/module/Divider/Divider.js.map +1 -1
- package/build/module/Divider/DividerProps.js +1 -1
- package/build/module/Divider/DividerProps.js.map +1 -1
- package/build/module/Divider/index.js +1 -0
- package/build/module/Divider/index.js.map +1 -1
- package/build/module/Empty/Empty.js +1 -2
- package/build/module/Empty/Empty.js.map +1 -1
- package/build/module/Flexbox/Flexbox.js +2 -0
- package/build/module/Flexbox/Flexbox.js.map +1 -1
- package/build/module/Flexbox/FlexboxProps.js.map +1 -1
- package/build/module/IconButton/index.js +1 -0
- package/build/module/IconButton/index.js.map +1 -1
- package/build/module/ListItem/ListItem.js +45 -27
- package/build/module/ListItem/ListItem.js.map +1 -1
- package/build/module/ListItem/ListItemProps.js.map +1 -1
- package/build/module/ListItemIcon/ListItemIcon.js +1 -2
- package/build/module/ListItemIcon/ListItemIcon.js.map +1 -1
- package/build/module/ListItemSecondaryAction/ListItemSecondaryAction.js +2 -0
- package/build/module/ListItemSecondaryAction/ListItemSecondaryAction.js.map +1 -1
- package/build/module/ListItemText/ListItemText.js +17 -19
- package/build/module/ListItemText/ListItemText.js.map +1 -1
- package/build/module/ListItemText/ListItemTextProps.js.map +1 -1
- package/build/module/ListSubheader/ListSubheader.js +1 -1
- package/build/module/ListSubheader/ListSubheader.js.map +1 -1
- package/build/module/Pagination/NumberPagination.js +1 -1
- package/build/module/Pagination/NumberPagination.js.map +1 -1
- package/build/module/Pagination/index.js +1 -0
- package/build/module/Pagination/index.js.map +1 -1
- package/build/module/Radio/Radio.js +5 -2
- package/build/module/Radio/Radio.js.map +1 -1
- package/build/module/Section/Section.js +19 -0
- package/build/module/Section/Section.js.map +1 -0
- package/build/module/Section/SectionProps.js +2 -0
- package/build/module/Section/SectionProps.js.map +1 -0
- package/build/module/Section/index.js +2 -0
- package/build/module/Section/index.js.map +1 -0
- package/build/module/ShadowView/ShadowView.native.js +4 -0
- package/build/module/ShadowView/ShadowView.native.js.map +1 -1
- package/build/module/Snackbar/index.js +1 -0
- package/build/module/Snackbar/index.js.map +1 -1
- package/build/module/SnackbarContent/SnackbarContent.js +27 -12
- package/build/module/SnackbarContent/SnackbarContent.js.map +1 -1
- package/build/module/SvgIcon/index.js +1 -0
- package/build/module/SvgIcon/index.js.map +1 -1
- package/build/module/Tab/useVariantStyleMap.js +3 -3
- package/build/module/Tab/useVariantStyleMap.js.map +1 -1
- package/build/module/Tabs/Tabs.js +5 -1
- package/build/module/Tabs/Tabs.js.map +1 -1
- package/build/module/Tabs/index.js +1 -0
- package/build/module/Tabs/index.js.map +1 -1
- package/build/module/Tabs/useTabsStyle.js +30 -0
- package/build/module/Tabs/useTabsStyle.js.map +1 -0
- package/build/module/TextField/TextField.js +1 -1
- package/build/module/TextField/TextField.js.map +1 -1
- package/build/module/TextField/index.js +1 -0
- package/build/module/TextField/index.js.map +1 -1
- package/build/module/TextField/useVariantStyleMap.js +2 -2
- package/build/module/TextField/useVariantStyleMap.js.map +1 -1
- package/build/module/Toolbar/index.js +1 -0
- package/build/module/Toolbar/index.js.map +1 -1
- package/build/module/Tooltip/Beaks/index.js +4 -0
- package/build/module/Tooltip/Beaks/index.js.map +1 -1
- package/build/module/Tooltip/Tooltip.js +4 -16
- package/build/module/Tooltip/Tooltip.js.map +1 -1
- package/build/module/Tooltip/index.js +2 -0
- package/build/module/Tooltip/index.js.map +1 -1
- package/build/module/Typography/Typography.js +9 -2
- package/build/module/Typography/Typography.js.map +1 -1
- package/build/module/Typography/TypographyProps.js.map +1 -1
- package/build/module/Typography/index.js +1 -0
- package/build/module/Typography/index.js.map +1 -1
- package/build/module/hooks/useBreakpointUp.js +4 -1
- package/build/module/hooks/useBreakpointUp.js.map +1 -1
- package/build/module/hooks/useContentContainerStyle.js +23 -26
- package/build/module/hooks/useContentContainerStyle.js.map +1 -1
- package/build/module/index.js +2 -0
- package/build/module/index.js.map +1 -1
- package/build/typescript/Accordion/index.d.ts +1 -0
- package/build/typescript/Accordion/useVariantStyleMap.d.ts +1 -0
- package/build/typescript/AppBar/index.d.ts +1 -0
- package/build/typescript/Badge/index.d.ts +2 -1
- package/build/typescript/Button/ButtonProps.d.ts +11 -6
- package/build/typescript/Button/index.d.ts +1 -0
- package/build/typescript/Checkbox/index.d.ts +1 -0
- package/build/typescript/Checkbox/useVariantStyleMap.d.ts +1 -0
- package/build/typescript/Chip/index.d.ts +1 -0
- package/build/typescript/Dialog/index.d.ts +1 -0
- package/build/typescript/Divider/DividerProps.d.ts +3 -3
- package/build/typescript/Divider/index.d.ts +1 -0
- package/build/typescript/Flexbox/FlexboxProps.d.ts +4 -0
- package/build/typescript/IconButton/index.d.ts +1 -0
- package/build/typescript/ListItem/ListItem.d.ts +1 -1
- package/build/typescript/ListItem/ListItemProps.d.ts +4 -0
- package/build/typescript/ListItemText/ListItemTextProps.d.ts +2 -9
- package/build/typescript/Pagination/index.d.ts +1 -0
- package/build/typescript/Section/Section.d.ts +3 -0
- package/build/typescript/Section/SectionProps.d.ts +6 -0
- package/build/typescript/Section/index.d.ts +2 -0
- package/build/typescript/Snackbar/index.d.ts +1 -0
- package/build/typescript/SvgIcon/index.d.ts +1 -0
- package/build/typescript/Tabs/index.d.ts +1 -0
- package/build/typescript/Tabs/useTabsStyle.d.ts +7 -0
- package/build/typescript/TextField/index.d.ts +1 -0
- package/build/typescript/Toolbar/index.d.ts +1 -0
- package/build/typescript/Tooltip/Beaks/index.d.ts +4 -0
- package/build/typescript/Tooltip/index.d.ts +3 -1
- package/build/typescript/Typography/TypographyProps.d.ts +4 -0
- package/build/typescript/Typography/index.d.ts +1 -0
- package/build/typescript/hooks/useContentContainerStyle.d.ts +4 -8
- package/build/typescript/index.d.ts +2 -0
- package/package.json +3 -3
- package/src/Accordion/Accordion.tsx +4 -1
- package/src/Accordion/index.ts +1 -0
- package/src/Accordion/useVariantStyleMap.ts +12 -10
- package/src/AppBar/index.ts +1 -0
- package/src/Badge/index.ts +12 -1
- package/src/Badge/useVariantStyleMap.ts +2 -2
- package/src/BottomSheetTitle/BottomSheetTitle.tsx +1 -0
- package/src/Button/Button.tsx +19 -4
- package/src/Button/ButtonProps.ts +12 -6
- package/src/Button/index.ts +1 -0
- package/src/Button/useVariantStyleMap.ts +3 -7
- package/src/Checkbox/Checkbox.tsx +12 -9
- package/src/Checkbox/index.ts +1 -0
- package/src/Checkbox/useVariantStyleMap.ts +6 -1
- package/src/Chip/index.ts +1 -0
- package/src/Chip/useChipStyle.ts +2 -17
- package/src/Dialog/index.ts +1 -0
- package/src/DialogContent/DialogContent.tsx +1 -2
- package/src/Divider/Divider.tsx +1 -1
- package/src/Divider/DividerProps.ts +3 -3
- package/src/Divider/index.ts +1 -0
- package/src/Empty/Empty.tsx +1 -2
- package/src/Flexbox/Flexbox.tsx +2 -0
- package/src/Flexbox/FlexboxProps.ts +5 -0
- package/src/IconButton/index.ts +1 -0
- package/src/ListItem/ListItem.tsx +69 -28
- package/src/ListItem/ListItemProps.ts +5 -0
- package/src/ListItemIcon/ListItemIcon.tsx +1 -2
- package/src/ListItemSecondaryAction/ListItemSecondaryAction.tsx +2 -0
- package/src/ListItemText/ListItemText.tsx +20 -28
- package/src/ListItemText/ListItemTextProps.ts +2 -10
- package/src/ListSubheader/ListSubheader.tsx +1 -1
- package/src/Pagination/NumberPagination.tsx +1 -1
- package/src/Pagination/index.ts +1 -0
- package/src/Radio/Radio.tsx +8 -2
- package/src/Section/Section.tsx +26 -0
- package/src/Section/SectionProps.ts +6 -0
- package/src/Section/index.ts +2 -0
- package/src/ShadowView/ShadowView.native.tsx +4 -0
- package/src/Snackbar/index.ts +1 -0
- package/src/SnackbarContent/SnackbarContent.tsx +37 -18
- package/src/SvgIcon/index.ts +1 -0
- package/src/Tab/useVariantStyleMap.ts +3 -3
- package/src/Tabs/Tabs.tsx +4 -0
- package/src/Tabs/index.ts +1 -0
- package/src/Tabs/useTabsStyle.ts +35 -0
- package/src/TextField/TextField.tsx +1 -1
- package/src/TextField/index.tsx +1 -0
- package/src/TextField/useVariantStyleMap.ts +2 -2
- package/src/Toolbar/index.ts +1 -0
- package/src/Tooltip/Beaks/index.ts +4 -0
- package/src/Tooltip/Tooltip.tsx +5 -16
- package/src/Tooltip/index.ts +3 -1
- package/src/Typography/Typography.tsx +3 -1
- package/src/Typography/TypographyProps.ts +5 -0
- package/src/Typography/index.ts +1 -0
- package/src/hooks/useBreakpointUp.ts +3 -1
- package/src/hooks/useContentContainerStyle.ts +26 -34
- package/src/index.ts +3 -0
- package/build/commonjs/TextField/InputLabel.js +0 -163
- package/build/commonjs/TextField/InputLabel.js.map +0 -1
- package/build/module/TextField/InputLabel.js +0 -149
- package/build/module/TextField/InputLabel.js.map +0 -1
- package/build/typescript/TextField/InputLabel.d.ts +0 -33
- package/src/TextField/InputLabel.tsx +0 -234
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","cloneElement","forwardRef","useEffect","useImperativeHandle","useMemo","useRef","View","css","useTheme","useSyncAnimatedValue","TabIndicator","ScrollableTabsView","IndexAwareTab","useTabCoordinates","useTabInnerContentsWidth","useIndexStore","InternalContext","isEveryTabCoordinatesDefined","useStyles","theme","root","fixedRoot","flexDirection","fixedTab","flex","scrollableContainer","paddingHorizontal","spacing","bottomDivider","borderBottomColor","palette","border","base","borderBottomWidth","Tabs","props","ref","children","color","initialIndex","disableIndicator","indicatorSize","keyboardDismissMode","keyboardShouldPersistTaps","onChange","scrollable","scrollViewContentContainerStyle","showDivider","style","variant","UNSTABLE_sharedIndex","onTabSelected","fallbackSharedIndex","initialValue","sharedIndex","realInitialIndex","currentIndexRef","setTab","newIndex","currentIndex","current","animatedValue","setValue","styles","outerCoordinates","updateCoordinate","innerContentsWidthList","updateInnerContentsWidth","canRenderIndicator","indexStore","coordinates","length","map","innerContentWidth","idx","x1","outerX1","x2","outerX2","tabWidth","distanceFromParent","indicatorStartCoordinate","subscribe","tabElements","Children","child","index","onTabInnerLayout","event","width","nativeEvent","layout","onLayout","x","onMouseDown","e","preventDefault","onPress","tabElement","enableIndicator","undefined","filter","Boolean","tabIndicator","backgroundColorMap","default","background","alt","backgroundColor"],"sources":["Tabs.tsx"],"sourcesContent":["import React, { cloneElement, forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';\nimport type { GestureResponderEvent, LayoutChangeEvent } from 'react-native';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport { useSyncAnimatedValue } from '../hooks';\nimport type { TabVariant } from '../Tab';\nimport type TabsProps from './TabsProps';\nimport type { TabsColor } from './TabsProps';\nimport type { TabsInstance } from './types';\nimport TabIndicator from './TabIndicator';\nimport ScrollableTabsView from './ScrollableTabsView';\nimport IndexAwareTab from './IndexAwareTab';\nimport useTabCoordinates from './useTabCoordinates';\nimport useTabInnerContentsWidth from './useTabInnerContentsWidth';\nimport useIndexStore from './useIndexStore';\nimport InternalContext from './InternalContext';\nimport { isEveryTabCoordinatesDefined } from './utils';\n\ntype TabsStyleKeys =\n | 'root'\n | 'fixedRoot'\n | 'fixedTab'\n | 'scrollableContainer'\n | 'bottomDivider';\n\ntype TabsStyles = NamedStylesStringUnion<TabsStyleKeys>;\n\nconst useStyles: UseStyles<TabsStyles> = function (): TabsStyles {\n const theme = useTheme();\n\n return {\n root: {},\n fixedRoot: {\n flexDirection: 'row',\n },\n fixedTab: {\n flex: 1,\n },\n scrollableContainer: {\n paddingHorizontal: theme.spacing(1),\n },\n bottomDivider: {\n borderBottomColor: theme.palette.border.base,\n borderBottomWidth: 0.5,\n },\n };\n};\n\nconst Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {\n const {\n children,\n color = 'default',\n initialIndex = 0,\n disableIndicator = false,\n indicatorSize = 'fit-content',\n keyboardDismissMode = 'none',\n keyboardShouldPersistTaps = 'never',\n onChange,\n scrollable = false,\n scrollViewContentContainerStyle,\n showDivider = false,\n style,\n variant = 'default' as TabVariant,\n UNSTABLE_sharedIndex,\n onTabSelected,\n } = props;\n\n const fallbackSharedIndex = useSyncAnimatedValue({ initialValue: initialIndex });\n const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;\n const realInitialIndex = sharedIndex.initialValue;\n\n const currentIndexRef = useRef(initialIndex);\n\n const setTab = (newIndex: number) => {\n const currentIndex = currentIndexRef.current;\n onTabSelected?.(newIndex, currentIndex);\n\n sharedIndex.animatedValue.setValue(newIndex);\n };\n\n useImperativeHandle(\n ref,\n () => ({\n setTab,\n }),\n [sharedIndex],\n );\n\n const styles = useStyles();\n\n const theme = useTheme();\n\n const [outerCoordinates, updateCoordinate] = useTabCoordinates(children);\n const [innerContentsWidthList, updateInnerContentsWidth] = useTabInnerContentsWidth(children);\n\n const canRenderIndicator = indicatorSize === 'fit-content'\n ? isEveryTabCoordinatesDefined(innerContentsWidthList, children)\n : isEveryTabCoordinatesDefined(outerCoordinates, children);\n\n const indexStore = useIndexStore(sharedIndex);\n\n const coordinates = useMemo(() => {\n if (outerCoordinates.length === 0) {\n return [];\n }\n\n if (indicatorSize !== 'fit-content') {\n return outerCoordinates;\n }\n\n return innerContentsWidthList.map((innerContentWidth, idx) => {\n const { x1: outerX1, x2: outerX2 } = outerCoordinates[idx];\n\n const tabWidth = outerX2 - outerX1;\n const distanceFromParent = (tabWidth - innerContentWidth) / 2;\n const indicatorStartCoordinate = outerX1 + distanceFromParent;\n\n return {\n x1: indicatorStartCoordinate,\n x2: indicatorStartCoordinate + innerContentWidth,\n };\n });\n }, [outerCoordinates, innerContentsWidthList]);\n\n useEffect(() => {\n return indexStore.subscribe(newIndex => {\n onChange?.(newIndex);\n currentIndexRef.current = newIndex;\n });\n }, [indexStore, onChange]);\n\n const tabElements = React.Children.map(children, (child, index) => {\n if (!child) {\n return null;\n }\n\n const onTabInnerLayout = (event: LayoutChangeEvent) => {\n const { width } = event.nativeEvent.layout;\n\n updateInnerContentsWidth(index, width);\n };\n\n const onLayout = (event: LayoutChangeEvent) => {\n const { x, width } = event.nativeEvent.layout;\n\n updateCoordinate(index, x, width);\n\n // @ts-ignore\n child.props.onLayout?.(event);\n };\n\n const onMouseDown = (e: GestureResponderEvent) => {\n if (keyboardShouldPersistTaps === 'always') {\n e.preventDefault();\n }\n };\n\n const onPress = () => {\n setTab(index);\n\n // @ts-ignore\n child.props.onPress?.();\n };\n\n // @ts-ignore\n const tabElement = cloneElement(child, {\n enableIndicator: !disableIndicator && !canRenderIndicator,\n onTabInnerLayout,\n onLayout,\n onPress,\n onMouseDown,\n variant,\n indicatorSize,\n style: scrollable ? undefined : styles.fixedTab,\n });\n\n return (\n <IndexAwareTab\n children={tabElement}\n index={index}\n initialIndex={realInitialIndex}\n />\n );\n })?.filter(Boolean);\n\n const tabIndicator = canRenderIndicator ? (\n <TabIndicator\n coordinates={coordinates}\n disabled={disableIndicator}\n initialIndex={realInitialIndex}\n />\n ) : null;\n\n const backgroundColorMap: Record<TabsColor, string> = {\n default: theme.palette.background.base,\n alt: theme.palette.background.alt,\n };\n\n return (\n <InternalContext.Provider value={{ indexStore }}>\n <View\n style={css([\n styles.root,\n { backgroundColor: backgroundColorMap[color] },\n showDivider ? styles.bottomDivider : undefined,\n scrollable ? undefined : styles.fixedRoot,\n style,\n ])}\n >\n {scrollable ? (\n <ScrollableTabsView\n automaticallyAdjustContentInsets={false}\n bounces={false}\n contentContainerStyle={css([\n styles.scrollableContainer,\n scrollViewContentContainerStyle,\n ])}\n coordinates={coordinates}\n directionalLockEnabled={true}\n horizontal={true}\n initialIndex={realInitialIndex}\n scrollsToTop={false}\n showsHorizontalScrollIndicator={false}\n showsVerticalScrollIndicator={false}\n keyboardDismissMode={keyboardDismissMode}\n keyboardShouldPersistTaps={keyboardShouldPersistTaps}\n >\n {tabElements}\n {tabIndicator}\n </ScrollableTabsView>\n ) : (\n <React.Fragment>\n {tabElements}\n {tabIndicator}\n </React.Fragment>\n )}\n </View>\n </InternalContext.Provider>\n );\n});\n\nexport default Tabs;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["React","cloneElement","forwardRef","useEffect","useImperativeHandle","useMemo","useRef","View","css","useTheme","useSyncAnimatedValue","TabIndicator","ScrollableTabsView","IndexAwareTab","useTabCoordinates","useTabInnerContentsWidth","useIndexStore","InternalContext","isEveryTabCoordinatesDefined","useTabsStyle","useStyles","theme","root","fixedRoot","flexDirection","fixedTab","flex","scrollableContainer","paddingHorizontal","spacing","bottomDivider","borderBottomColor","palette","border","base","borderBottomWidth","Tabs","props","ref","children","color","initialIndex","disableIndicator","indicatorSize","keyboardDismissMode","keyboardShouldPersistTaps","onChange","scrollable","scrollViewContentContainerStyle","showDivider","style","variant","UNSTABLE_sharedIndex","onTabSelected","fallbackSharedIndex","initialValue","sharedIndex","realInitialIndex","currentIndexRef","container","containerStyle","setTab","newIndex","currentIndex","current","animatedValue","setValue","styles","outerCoordinates","updateCoordinate","innerContentsWidthList","updateInnerContentsWidth","canRenderIndicator","indexStore","coordinates","length","map","innerContentWidth","idx","x1","outerX1","x2","outerX2","tabWidth","distanceFromParent","indicatorStartCoordinate","subscribe","tabElements","Children","child","index","onTabInnerLayout","event","width","nativeEvent","layout","onLayout","x","onMouseDown","e","preventDefault","onPress","tabElement","enableIndicator","undefined","filter","Boolean","tabIndicator","backgroundColorMap","default","background","alt","backgroundColor"],"sources":["Tabs.tsx"],"sourcesContent":["import React, { cloneElement, forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';\nimport type { GestureResponderEvent, LayoutChangeEvent } from 'react-native';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport { useSyncAnimatedValue } from '../hooks';\nimport type { TabVariant } from '../Tab';\nimport type TabsProps from './TabsProps';\nimport type { TabsColor } from './TabsProps';\nimport type { TabsInstance } from './types';\nimport TabIndicator from './TabIndicator';\nimport ScrollableTabsView from './ScrollableTabsView';\nimport IndexAwareTab from './IndexAwareTab';\nimport useTabCoordinates from './useTabCoordinates';\nimport useTabInnerContentsWidth from './useTabInnerContentsWidth';\nimport useIndexStore from './useIndexStore';\nimport InternalContext from './InternalContext';\nimport { isEveryTabCoordinatesDefined } from './utils';\nimport useTabsStyle from './useTabsStyle';\n\ntype TabsStyleKeys =\n | 'root'\n | 'fixedRoot'\n | 'fixedTab'\n | 'scrollableContainer'\n | 'bottomDivider';\n\ntype TabsStyles = NamedStylesStringUnion<TabsStyleKeys>;\n\nconst useStyles: UseStyles<TabsStyles> = function (): TabsStyles {\n const theme = useTheme();\n\n return {\n root: {},\n fixedRoot: {\n flexDirection: 'row',\n },\n fixedTab: {\n flex: 1,\n },\n scrollableContainer: {\n paddingHorizontal: theme.spacing(1),\n },\n bottomDivider: {\n borderBottomColor: theme.palette.border.base,\n borderBottomWidth: 0.5,\n },\n };\n};\n\nconst Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {\n const {\n children,\n color = 'default',\n initialIndex = 0,\n disableIndicator = false,\n indicatorSize = 'fit-content',\n keyboardDismissMode = 'none',\n keyboardShouldPersistTaps = 'never',\n onChange,\n scrollable = false,\n scrollViewContentContainerStyle,\n showDivider = false,\n style,\n variant = 'default' as TabVariant,\n UNSTABLE_sharedIndex,\n onTabSelected,\n } = props;\n\n const fallbackSharedIndex = useSyncAnimatedValue({ initialValue: initialIndex });\n const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;\n const realInitialIndex = sharedIndex.initialValue;\n\n const currentIndexRef = useRef(initialIndex);\n\n const { container: containerStyle } = useTabsStyle(variant);\n\n const setTab = (newIndex: number) => {\n const currentIndex = currentIndexRef.current;\n onTabSelected?.(newIndex, currentIndex);\n\n sharedIndex.animatedValue.setValue(newIndex);\n };\n\n useImperativeHandle(\n ref,\n () => ({\n setTab,\n }),\n [sharedIndex],\n );\n\n const styles = useStyles();\n\n const theme = useTheme();\n\n const [outerCoordinates, updateCoordinate] = useTabCoordinates(children);\n const [innerContentsWidthList, updateInnerContentsWidth] = useTabInnerContentsWidth(children);\n\n const canRenderIndicator = indicatorSize === 'fit-content'\n ? isEveryTabCoordinatesDefined(innerContentsWidthList, children)\n : isEveryTabCoordinatesDefined(outerCoordinates, children);\n\n const indexStore = useIndexStore(sharedIndex);\n\n const coordinates = useMemo(() => {\n if (outerCoordinates.length === 0) {\n return [];\n }\n\n if (indicatorSize !== 'fit-content') {\n return outerCoordinates;\n }\n\n return innerContentsWidthList.map((innerContentWidth, idx) => {\n const { x1: outerX1, x2: outerX2 } = outerCoordinates[idx];\n\n const tabWidth = outerX2 - outerX1;\n const distanceFromParent = (tabWidth - innerContentWidth) / 2;\n const indicatorStartCoordinate = outerX1 + distanceFromParent;\n\n return {\n x1: indicatorStartCoordinate,\n x2: indicatorStartCoordinate + innerContentWidth,\n };\n });\n }, [outerCoordinates, innerContentsWidthList]);\n\n useEffect(() => {\n return indexStore.subscribe(newIndex => {\n onChange?.(newIndex);\n currentIndexRef.current = newIndex;\n });\n }, [indexStore, onChange]);\n\n const tabElements = React.Children.map(children, (child, index) => {\n if (!child) {\n return null;\n }\n\n const onTabInnerLayout = (event: LayoutChangeEvent) => {\n const { width } = event.nativeEvent.layout;\n\n updateInnerContentsWidth(index, width);\n };\n\n const onLayout = (event: LayoutChangeEvent) => {\n const { x, width } = event.nativeEvent.layout;\n\n updateCoordinate(index, x, width);\n\n // @ts-ignore\n child.props.onLayout?.(event);\n };\n\n const onMouseDown = (e: GestureResponderEvent) => {\n if (keyboardShouldPersistTaps === 'always') {\n e.preventDefault();\n }\n };\n\n const onPress = () => {\n setTab(index);\n\n // @ts-ignore\n child.props.onPress?.();\n };\n\n // @ts-ignore\n const tabElement = cloneElement(child, {\n enableIndicator: !disableIndicator && !canRenderIndicator,\n onTabInnerLayout,\n onLayout,\n onPress,\n onMouseDown,\n variant,\n indicatorSize,\n style: scrollable ? undefined : styles.fixedTab,\n });\n\n return (\n <IndexAwareTab\n children={tabElement}\n index={index}\n initialIndex={realInitialIndex}\n />\n );\n })?.filter(Boolean);\n\n const tabIndicator = canRenderIndicator ? (\n <TabIndicator\n coordinates={coordinates}\n disabled={disableIndicator}\n initialIndex={realInitialIndex}\n />\n ) : null;\n\n const backgroundColorMap: Record<TabsColor, string> = {\n default: theme.palette.background.base,\n alt: theme.palette.background.alt,\n };\n\n return (\n <InternalContext.Provider value={{ indexStore }}>\n <View\n style={css([\n styles.root,\n containerStyle,\n { backgroundColor: backgroundColorMap[color] },\n showDivider ? styles.bottomDivider : undefined,\n scrollable ? undefined : styles.fixedRoot,\n style,\n ])}\n >\n {scrollable ? (\n <ScrollableTabsView\n automaticallyAdjustContentInsets={false}\n bounces={false}\n contentContainerStyle={css([\n styles.scrollableContainer,\n scrollViewContentContainerStyle,\n ])}\n coordinates={coordinates}\n directionalLockEnabled={true}\n horizontal={true}\n initialIndex={realInitialIndex}\n scrollsToTop={false}\n showsHorizontalScrollIndicator={false}\n showsVerticalScrollIndicator={false}\n keyboardDismissMode={keyboardDismissMode}\n keyboardShouldPersistTaps={keyboardShouldPersistTaps}\n >\n {tabElements}\n {tabIndicator}\n </ScrollableTabsView>\n ) : (\n <React.Fragment>\n {tabElements}\n {tabIndicator}\n </React.Fragment>\n )}\n </View>\n </InternalContext.Provider>\n );\n});\n\nexport default Tabs;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["default"],"sources":["index.ts"],"sourcesContent":["export { default } from './Tabs';\nexport type { default as TabsProps } from './TabsProps';\nexport type { TabsInstance } from './types';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,QAAxB"}
|
|
1
|
+
{"version":3,"names":["default","tabIndicatorSizes","tabsColors"],"sources":["index.ts"],"sourcesContent":["export { default } from './Tabs';\nexport type { default as TabsProps } from './TabsProps';\nexport { tabIndicatorSizes, tabsColors } from './TabsProps';\nexport type { TabsInstance } from './types';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,QAAxB;AAEA,SAASC,iBAAT,EAA4BC,UAA5B,QAA8C,aAA9C"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { useMemo } from 'react';
|
|
2
|
+
import { useTheme } from '../styles';
|
|
3
|
+
export default function useTabsStyle(variant) {
|
|
4
|
+
const theme = useTheme();
|
|
5
|
+
return useMemo(() => {
|
|
6
|
+
switch (variant) {
|
|
7
|
+
case 'circular':
|
|
8
|
+
return {
|
|
9
|
+
container: {
|
|
10
|
+
paddingBottom: theme.spacing(2),
|
|
11
|
+
paddingHorizontal: theme.spacing(3)
|
|
12
|
+
}
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
case 'bottom-navigation':
|
|
16
|
+
return {
|
|
17
|
+
container: {}
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
case 'default':
|
|
21
|
+
default:
|
|
22
|
+
return {
|
|
23
|
+
container: {
|
|
24
|
+
paddingHorizontal: theme.spacing(1.5)
|
|
25
|
+
}
|
|
26
|
+
};
|
|
27
|
+
}
|
|
28
|
+
}, [theme, variant]);
|
|
29
|
+
}
|
|
30
|
+
//# sourceMappingURL=useTabsStyle.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useMemo","useTheme","useTabsStyle","variant","theme","container","paddingBottom","spacing","paddingHorizontal"],"sources":["useTabsStyle.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport type { TabVariant } from '../Tab';\n\ninterface TabsStyle {\n container: FountainUiStyle;\n}\n\nexport default function useTabsStyle(variant: TabVariant) {\n const theme = useTheme();\n\n return useMemo<TabsStyle>(() => {\n switch (variant) {\n case 'circular':\n return {\n container: {\n paddingBottom: theme.spacing(2),\n paddingHorizontal: theme.spacing(3),\n },\n };\n case 'bottom-navigation':\n return {\n container: {},\n };\n case 'default':\n default:\n return {\n container: {\n paddingHorizontal: theme.spacing(1.5),\n },\n };\n }\n }, [theme, variant]);\n}\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB;AAEA,SAASC,QAAT,QAAyB,WAAzB;AAOA,eAAe,SAASC,YAAT,CAAsBC,OAAtB,EAA2C;EACtD,MAAMC,KAAK,GAAGH,QAAQ,EAAtB;EAEA,OAAOD,OAAO,CAAY,MAAM;IAC5B,QAAQG,OAAR;MACI,KAAK,UAAL;QACI,OAAO;UACHE,SAAS,EAAE;YACPC,aAAa,EAAEF,KAAK,CAACG,OAAN,CAAc,CAAd,CADR;YAEPC,iBAAiB,EAAEJ,KAAK,CAACG,OAAN,CAAc,CAAd;UAFZ;QADR,CAAP;;MAMJ,KAAK,mBAAL;QACI,OAAO;UACHF,SAAS,EAAE;QADR,CAAP;;MAGJ,KAAK,SAAL;MACA;QACI,OAAO;UACHA,SAAS,EAAE;YACPG,iBAAiB,EAAEJ,KAAK,CAACG,OAAN,CAAc,GAAd;UADZ;QADR,CAAP;IAdR;EAoBH,CArBa,EAqBX,CAACH,KAAD,EAAQD,OAAR,CArBW,CAAd;AAsBH"}
|
|
@@ -72,7 +72,7 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(props, ref) {
|
|
|
72
72
|
|
|
73
73
|
const showClearButton = showClearButtonProp ?? isSearch;
|
|
74
74
|
const titleFontStyle = createFontStyle(theme, {
|
|
75
|
-
|
|
75
|
+
selector: typography => typography.caption1['semiBold'],
|
|
76
76
|
color: theme.palette.text.strong
|
|
77
77
|
});
|
|
78
78
|
const inputStyle = css([styles.input, variantStyles.inputStyle, Platform.OS === 'web' ? {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useState","Platform","StyleSheet","Text","TextInput","View","css","IconButton","Clear","EyeOff","EyeOn","LoadingSpinner","Search","Row","createFontStyle","useTheme","useVariantStyleMap","styles","create","root","alignItems","flexGrow","input","secureToggleButton","padding","TextField","forwardRef","props","ref","autoFocus","containerStyle","containerStyleProp","editable","hint","isLoading","onBlur","onChangeText","onChangeTextProp","onFocus","placeholderTextColor","placeholderTextColorProp","secureTextEntry","secureTextEntryProp","showClearButton","showClearButtonProp","status","style","styleProp","title","value","variant","otherProps","isSearch","disabled","theme","isFocused","setIsFocused","setSecureTextEntry","variantStyles","handleBlur","event","handleFocus","handleSecureTogglePress","current","handleChangeText","text","handleClear","titleFontStyle","color","palette","strong","inputStyle","OS","outlineWidth","disabledLabel","opacity","length","hintStyle"],"sources":["TextField.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport type { NativeSyntheticEvent, TextInputFocusEventData } from 'react-native';\nimport { Platform, StyleSheet, Text, TextInput, View } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { css } from '@fountain-ui/styles';\nimport IconButton from '../IconButton/IconButton';\nimport { Clear, EyeOff, EyeOn, LoadingSpinner, Search } from '../internal/icons';\nimport Row from '../Row';\nimport { createFontStyle, useTheme } from '../styles';\nimport type TextFieldProps from './TextFieldProps';\nimport type { TextFieldStatus, TextFieldVariant } from './TextFieldProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\nconst styles = StyleSheet.create({\n root: {\n alignItems: 'center',\n flexGrow: 1,\n },\n input: {\n flexGrow: 1,\n },\n secureToggleButton: {\n alignItems: 'flex-end',\n padding: 0,\n },\n});\n\nconst TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField(props, ref) {\n const {\n autoFocus,\n containerStyle: containerStyleProp,\n editable = true,\n hint,\n isLoading,\n onBlur,\n onChangeText: onChangeTextProp,\n onFocus,\n placeholderTextColor: placeholderTextColorProp,\n secureTextEntry: secureTextEntryProp,\n showClearButton: showClearButtonProp,\n status = 'default' as TextFieldStatus,\n style: styleProp,\n title,\n value,\n variant = 'default' as TextFieldVariant,\n ...otherProps\n } = props;\n\n const isSearch = variant === 'search';\n\n const disabled = !editable || isLoading;\n\n const theme = useTheme();\n\n const [isFocused, setIsFocused] = useState<boolean>(autoFocus ?? false);\n const [secureTextEntry, setSecureTextEntry] = useState<boolean>(secureTextEntryProp ?? false);\n\n const variantStyles = useVariantStyleMap(variant, status, isFocused);\n\n const handleBlur = (event: NativeSyntheticEvent<TextInputFocusEventData>) => {\n setIsFocused(false);\n onBlur?.(event);\n };\n\n const handleFocus = (event: NativeSyntheticEvent<TextInputFocusEventData>) => {\n setIsFocused(true);\n onFocus?.(event);\n };\n\n const handleSecureTogglePress = () => {\n setSecureTextEntry((current) => !current);\n };\n\n const handleChangeText = (text: string) => {\n onChangeTextProp?.(text);\n };\n\n const handleClear = () => {\n handleChangeText('');\n };\n\n const showClearButton = showClearButtonProp ?? isSearch;\n\n const titleFontStyle = createFontStyle(theme, {\n // selector: (typography) => typography.caption1['semiBold']\n color: theme.palette.text.strong,\n });\n\n const inputStyle = css([\n styles.input,\n variantStyles.inputStyle,\n Platform.OS === 'web' ? { outlineWidth: 0 } as FountainUiStyle : {},\n styleProp,\n ]);\n\n const placeholderTextColor = placeholderTextColorProp ?? theme.palette.status.disabledLabel;\n\n const containerStyle = css([\n styles.root,\n variantStyles.containerStyle,\n { opacity: disabled ? 0.3 : 1 },\n containerStyleProp,\n ]);\n\n return (\n <View>\n {title && !isSearch ? (\n <Text\n children={title}\n style={titleFontStyle}\n />\n ) : null}\n\n <Row style={containerStyle}>\n {isSearch ? (\n isLoading ? (\n <LoadingSpinner/>\n ) : (\n <Search\n color={'base'}\n height={18}\n width={18}\n />\n )\n ) : null}\n\n <TextInput\n autoFocus={autoFocus}\n editable={!disabled}\n onBlur={handleBlur}\n onChangeText={handleChangeText}\n onFocus={handleFocus}\n placeholderTextColor={placeholderTextColor}\n ref={ref}\n secureTextEntry={secureTextEntry}\n style={inputStyle}\n value={value}\n {...otherProps}\n />\n\n {showClearButton && value?.length && value.length > 0 ? (\n <IconButton\n color={'base'}\n children={\n <Clear\n height={13.75}\n width={15}\n />\n }\n onPress={handleClear}\n />\n ) : null}\n\n {secureTextEntryProp && !isSearch ? (\n <IconButton\n color={'base'}\n onPress={handleSecureTogglePress}\n style={styles.secureToggleButton}\n >\n {secureTextEntry ? (\n <EyeOff\n height={19}\n width={17.42}\n />\n ) : (\n <EyeOn\n height={19}\n width={17.42}\n />\n )}\n </IconButton>\n ) : null}\n </Row>\n\n {hint && !isSearch ? (\n <Text\n children={hint}\n style={variantStyles.hintStyle}\n />\n ) : null}\n </View>\n );\n});\n\nexport default TextField;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["React","useState","Platform","StyleSheet","Text","TextInput","View","css","IconButton","Clear","EyeOff","EyeOn","LoadingSpinner","Search","Row","createFontStyle","useTheme","useVariantStyleMap","styles","create","root","alignItems","flexGrow","input","secureToggleButton","padding","TextField","forwardRef","props","ref","autoFocus","containerStyle","containerStyleProp","editable","hint","isLoading","onBlur","onChangeText","onChangeTextProp","onFocus","placeholderTextColor","placeholderTextColorProp","secureTextEntry","secureTextEntryProp","showClearButton","showClearButtonProp","status","style","styleProp","title","value","variant","otherProps","isSearch","disabled","theme","isFocused","setIsFocused","setSecureTextEntry","variantStyles","handleBlur","event","handleFocus","handleSecureTogglePress","current","handleChangeText","text","handleClear","titleFontStyle","selector","typography","caption1","color","palette","strong","inputStyle","OS","outlineWidth","disabledLabel","opacity","length","hintStyle"],"sources":["TextField.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport type { NativeSyntheticEvent, TextInputFocusEventData } from 'react-native';\nimport { Platform, StyleSheet, Text, TextInput, View } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { css } from '@fountain-ui/styles';\nimport IconButton from '../IconButton/IconButton';\nimport { Clear, EyeOff, EyeOn, LoadingSpinner, Search } from '../internal/icons';\nimport Row from '../Row';\nimport { createFontStyle, useTheme } from '../styles';\nimport type TextFieldProps from './TextFieldProps';\nimport type { TextFieldStatus, TextFieldVariant } from './TextFieldProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\nconst styles = StyleSheet.create({\n root: {\n alignItems: 'center',\n flexGrow: 1,\n },\n input: {\n flexGrow: 1,\n },\n secureToggleButton: {\n alignItems: 'flex-end',\n padding: 0,\n },\n});\n\nconst TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField(props, ref) {\n const {\n autoFocus,\n containerStyle: containerStyleProp,\n editable = true,\n hint,\n isLoading,\n onBlur,\n onChangeText: onChangeTextProp,\n onFocus,\n placeholderTextColor: placeholderTextColorProp,\n secureTextEntry: secureTextEntryProp,\n showClearButton: showClearButtonProp,\n status = 'default' as TextFieldStatus,\n style: styleProp,\n title,\n value,\n variant = 'default' as TextFieldVariant,\n ...otherProps\n } = props;\n\n const isSearch = variant === 'search';\n\n const disabled = !editable || isLoading;\n\n const theme = useTheme();\n\n const [isFocused, setIsFocused] = useState<boolean>(autoFocus ?? false);\n const [secureTextEntry, setSecureTextEntry] = useState<boolean>(secureTextEntryProp ?? false);\n\n const variantStyles = useVariantStyleMap(variant, status, isFocused);\n\n const handleBlur = (event: NativeSyntheticEvent<TextInputFocusEventData>) => {\n setIsFocused(false);\n onBlur?.(event);\n };\n\n const handleFocus = (event: NativeSyntheticEvent<TextInputFocusEventData>) => {\n setIsFocused(true);\n onFocus?.(event);\n };\n\n const handleSecureTogglePress = () => {\n setSecureTextEntry((current) => !current);\n };\n\n const handleChangeText = (text: string) => {\n onChangeTextProp?.(text);\n };\n\n const handleClear = () => {\n handleChangeText('');\n };\n\n const showClearButton = showClearButtonProp ?? isSearch;\n\n const titleFontStyle = createFontStyle(theme, {\n selector: (typography) => typography.caption1['semiBold'],\n color: theme.palette.text.strong,\n });\n\n const inputStyle = css([\n styles.input,\n variantStyles.inputStyle,\n Platform.OS === 'web' ? { outlineWidth: 0 } as FountainUiStyle : {},\n styleProp,\n ]);\n\n const placeholderTextColor = placeholderTextColorProp ?? theme.palette.status.disabledLabel;\n\n const containerStyle = css([\n styles.root,\n variantStyles.containerStyle,\n { opacity: disabled ? 0.3 : 1 },\n containerStyleProp,\n ]);\n\n return (\n <View>\n {title && !isSearch ? (\n <Text\n children={title}\n style={titleFontStyle}\n />\n ) : null}\n\n <Row style={containerStyle}>\n {isSearch ? (\n isLoading ? (\n <LoadingSpinner/>\n ) : (\n <Search\n color={'base'}\n height={18}\n width={18}\n />\n )\n ) : null}\n\n <TextInput\n autoFocus={autoFocus}\n editable={!disabled}\n onBlur={handleBlur}\n onChangeText={handleChangeText}\n onFocus={handleFocus}\n placeholderTextColor={placeholderTextColor}\n ref={ref}\n secureTextEntry={secureTextEntry}\n style={inputStyle}\n value={value}\n {...otherProps}\n />\n\n {showClearButton && value?.length && value.length > 0 ? (\n <IconButton\n color={'base'}\n children={\n <Clear\n height={13.75}\n width={15}\n />\n }\n onPress={handleClear}\n />\n ) : null}\n\n {secureTextEntryProp && !isSearch ? (\n <IconButton\n color={'base'}\n onPress={handleSecureTogglePress}\n style={styles.secureToggleButton}\n >\n {secureTextEntry ? (\n <EyeOff\n height={19}\n width={17.42}\n />\n ) : (\n <EyeOn\n height={19}\n width={17.42}\n />\n )}\n </IconButton>\n ) : null}\n </Row>\n\n {hint && !isSearch ? (\n <Text\n children={hint}\n style={variantStyles.hintStyle}\n />\n ) : null}\n </View>\n );\n});\n\nexport default TextField;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["default"],"sources":["index.tsx"],"sourcesContent":["export { default } from './TextField';\nexport type { default as TextFieldProps } from './TextFieldProps';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,aAAxB"}
|
|
1
|
+
{"version":3,"names":["default","textFieldStatus"],"sources":["index.tsx"],"sourcesContent":["export { default } from './TextField';\nexport type { default as TextFieldProps } from './TextFieldProps';\nexport { textFieldStatus } from './TextFieldProps';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,aAAxB;AAEA,SAASC,eAAT,QAAgC,kBAAhC"}
|
|
@@ -47,7 +47,7 @@ export default function useVariantStyleMap(variant, status, isFocused) {
|
|
|
47
47
|
selector: _ => typographyOf({
|
|
48
48
|
fontSize: 18,
|
|
49
49
|
lineHeight: 27,
|
|
50
|
-
fontFamily: '
|
|
50
|
+
fontFamily: 'PretendardStd-SemiBold',
|
|
51
51
|
letterSpacing: 0
|
|
52
52
|
}),
|
|
53
53
|
color: theme.palette.text.strong
|
|
@@ -81,7 +81,7 @@ export default function useVariantStyleMap(variant, status, isFocused) {
|
|
|
81
81
|
selector: _ => typographyOf({
|
|
82
82
|
fontSize: 16,
|
|
83
83
|
lineHeight: 19.2,
|
|
84
|
-
fontFamily: '
|
|
84
|
+
fontFamily: 'PretendardStd-SemiBold',
|
|
85
85
|
letterSpacing: -0.16
|
|
86
86
|
}),
|
|
87
87
|
color: theme.palette.text.strong
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useMemo","typographyOf","createFontStyle","useTheme","useStatusColor","theme","status","borderColor","palette","border","base","hintColor","text","weak","success","danger","useVariantStyleMap","variant","isFocused","containerStyle","borderBottomColor","strong","borderBottomWidth","inputStyle","paddingRight","spacing","paddingVertical","selector","_","fontSize","lineHeight","fontFamily","letterSpacing","color","hintStyle","marginTop","backgroundColor","surface","supportive","borderRadius","shape","radius","md","borderWidth","paddingLeft","paddingBottom","paddingTop"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { FountainUiStyle, Theme } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { TextFieldStatus, TextFieldVariant } from './TextFieldProps';\n\ninterface VariantStyleMap {\n containerStyle?: FountainUiStyle;\n inputStyle?: FountainUiStyle;\n hintStyle?: FountainUiStyle;\n}\n\nfunction useStatusColor(theme: Theme, status: TextFieldStatus): { borderColor: string; hintColor: string; } {\n switch (status) {\n default:\n case 'default':\n return {\n borderColor: theme.palette.border.base,\n hintColor: theme.palette.text.weak,\n };\n case 'success':\n return {\n borderColor: theme.palette.status.success,\n hintColor: theme.palette.status.success,\n };\n case 'error':\n return {\n borderColor: theme.palette.status.danger,\n hintColor: theme.palette.status.danger,\n };\n }\n}\n\nexport default function useVariantStyleMap(variant: TextFieldVariant, status: TextFieldStatus, isFocused: boolean): VariantStyleMap {\n const theme = useTheme();\n\n const {\n borderColor,\n hintColor,\n } = useStatusColor(theme, status);\n\n return useMemo(() => {\n switch (variant) {\n default:\n case 'default':\n return {\n containerStyle: {\n borderBottomColor: status === 'default' && isFocused ? theme.palette.border.strong : borderColor,\n borderBottomWidth: 1,\n },\n inputStyle: {\n paddingRight: theme.spacing(4),\n paddingVertical: theme.spacing(4),\n ...createFontStyle(theme, {\n selector: (_) => typographyOf({\n fontSize: 18,\n lineHeight: 27,\n fontFamily: '
|
|
1
|
+
{"version":3,"names":["useMemo","typographyOf","createFontStyle","useTheme","useStatusColor","theme","status","borderColor","palette","border","base","hintColor","text","weak","success","danger","useVariantStyleMap","variant","isFocused","containerStyle","borderBottomColor","strong","borderBottomWidth","inputStyle","paddingRight","spacing","paddingVertical","selector","_","fontSize","lineHeight","fontFamily","letterSpacing","color","hintStyle","marginTop","backgroundColor","surface","supportive","borderRadius","shape","radius","md","borderWidth","paddingLeft","paddingBottom","paddingTop"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { FountainUiStyle, Theme } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { TextFieldStatus, TextFieldVariant } from './TextFieldProps';\n\ninterface VariantStyleMap {\n containerStyle?: FountainUiStyle;\n inputStyle?: FountainUiStyle;\n hintStyle?: FountainUiStyle;\n}\n\nfunction useStatusColor(theme: Theme, status: TextFieldStatus): { borderColor: string; hintColor: string; } {\n switch (status) {\n default:\n case 'default':\n return {\n borderColor: theme.palette.border.base,\n hintColor: theme.palette.text.weak,\n };\n case 'success':\n return {\n borderColor: theme.palette.status.success,\n hintColor: theme.palette.status.success,\n };\n case 'error':\n return {\n borderColor: theme.palette.status.danger,\n hintColor: theme.palette.status.danger,\n };\n }\n}\n\nexport default function useVariantStyleMap(variant: TextFieldVariant, status: TextFieldStatus, isFocused: boolean): VariantStyleMap {\n const theme = useTheme();\n\n const {\n borderColor,\n hintColor,\n } = useStatusColor(theme, status);\n\n return useMemo(() => {\n switch (variant) {\n default:\n case 'default':\n return {\n containerStyle: {\n borderBottomColor: status === 'default' && isFocused ? theme.palette.border.strong : borderColor,\n borderBottomWidth: 1,\n },\n inputStyle: {\n paddingRight: theme.spacing(4),\n paddingVertical: theme.spacing(4),\n ...createFontStyle(theme, {\n selector: (_) => typographyOf({\n fontSize: 18,\n lineHeight: 27,\n fontFamily: 'PretendardStd-SemiBold',\n letterSpacing: 0,\n }),\n color: theme.palette.text.strong,\n }),\n },\n hintStyle: {\n marginTop: theme.spacing(2),\n ...createFontStyle(theme, {\n // selector: (typography) => typography.caption1['regular']\n color: hintColor,\n }),\n },\n };\n case 'search':\n return {\n containerStyle: {\n backgroundColor: theme.palette.surface.supportive,\n borderColor: theme.palette.border.base,\n borderRadius: theme.shape.radius.md,\n borderWidth: 0.5,\n paddingLeft: theme.spacing(3),\n paddingRight: theme.spacing(0.5),\n },\n inputStyle: {\n paddingBottom: theme.spacing(2.5),\n paddingLeft: theme.spacing(2),\n paddingRight: theme.spacing(1),\n paddingTop: theme.spacing(2.25),\n ...createFontStyle(theme, {\n selector: (_) => typographyOf({\n fontSize: 16,\n lineHeight: 19.2,\n fontFamily: 'PretendardStd-SemiBold',\n letterSpacing: -0.16,\n }),\n color: theme.palette.text.strong,\n }),\n },\n };\n }\n }, [theme, borderColor, hintColor, variant, isFocused]);\n}\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["default"],"sources":["index.ts"],"sourcesContent":["export { default } from './Toolbar';\nexport type { default as ToolbarProps } from './ToolbarProps';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,WAAxB"}
|
|
1
|
+
{"version":3,"names":["default","toolbarSizes"],"sources":["index.ts"],"sourcesContent":["export { default } from './Toolbar';\nexport type { default as ToolbarProps } from './ToolbarProps';\nexport { toolbarSizes } from './ToolbarProps';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,WAAxB;AAEA,SAASC,YAAT,QAA6B,gBAA7B"}
|
|
@@ -1,2 +1,6 @@
|
|
|
1
1
|
export { default } from './Beak';
|
|
2
|
+
export { default as HorizontalLargeBeak } from './HorizontalLargeBeak';
|
|
3
|
+
export { default as HorizontalSmallBeak } from './HorizontalSmallBeak';
|
|
4
|
+
export { default as VerticalLargeBeak } from './VerticalLargeBeak';
|
|
5
|
+
export { default as VerticalSmallBeak } from './VerticalSmallBeak';
|
|
2
6
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["default"],"sources":["index.ts"],"sourcesContent":["export { default } from './Beak';\nexport type { default as BeakProps } from './BeakProps';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,QAAxB"}
|
|
1
|
+
{"version":3,"names":["default","HorizontalLargeBeak","HorizontalSmallBeak","VerticalLargeBeak","VerticalSmallBeak"],"sources":["index.ts"],"sourcesContent":["export { default } from './Beak';\nexport type { default as BeakProps } from './BeakProps';\nexport { default as HorizontalLargeBeak } from './HorizontalLargeBeak';\nexport { default as HorizontalSmallBeak } from './HorizontalSmallBeak';\nexport { default as VerticalLargeBeak } from './VerticalLargeBeak';\nexport { default as VerticalSmallBeak } from './VerticalSmallBeak';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,QAAxB;AAEA,SAASA,OAAO,IAAIC,mBAApB,QAA+C,uBAA/C;AACA,SAASD,OAAO,IAAIE,mBAApB,QAA+C,uBAA/C;AACA,SAASF,OAAO,IAAIG,iBAApB,QAA6C,qBAA7C;AACA,SAASH,OAAO,IAAII,iBAApB,QAA6C,qBAA7C"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React, { useEffect, useState } from 'react';
|
|
2
2
|
import { Platform, Text, View } from 'react-native';
|
|
3
3
|
import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
|
|
4
|
-
import { typographyOf } from '@fountain-ui/styles';
|
|
5
4
|
import ButtonBase from '../ButtonBase';
|
|
6
5
|
import { createFontStyle, css, useTheme } from '../styles';
|
|
7
6
|
import Beak from './Beaks';
|
|
@@ -50,14 +49,14 @@ const useStyles = function () {
|
|
|
50
49
|
},
|
|
51
50
|
small: {
|
|
52
51
|
borderRadius: theme.shape.radius.sm,
|
|
52
|
+
paddingBottom: theme.spacing(1.75),
|
|
53
53
|
paddingHorizontal: theme.spacing(2),
|
|
54
|
-
|
|
54
|
+
paddingTop: theme.spacing(1.5)
|
|
55
55
|
},
|
|
56
56
|
large: {
|
|
57
57
|
borderRadius: 5,
|
|
58
|
-
paddingBottom: theme.spacing(2.5),
|
|
59
58
|
paddingHorizontal: theme.spacing(4),
|
|
60
|
-
|
|
59
|
+
paddingVertical: theme.spacing(2)
|
|
61
60
|
}
|
|
62
61
|
};
|
|
63
62
|
};
|
|
@@ -121,18 +120,7 @@ export default function Tooltip(props) {
|
|
|
121
120
|
scale.value = withTiming(nextScaleValue, ANIMATION_CONFIG);
|
|
122
121
|
}, [visible]);
|
|
123
122
|
const fontStyle = createFontStyle(theme, {
|
|
124
|
-
selector: typo => size === 'large' ?
|
|
125
|
-
fontSize: 13,
|
|
126
|
-
lineHeight: 19.5,
|
|
127
|
-
fontFamily: 'Pretendard-Regular',
|
|
128
|
-
letterSpacing: 0
|
|
129
|
-
}) // TODO: change caption2.
|
|
130
|
-
: typographyOf({
|
|
131
|
-
fontSize: 11,
|
|
132
|
-
lineHeight: 15.4,
|
|
133
|
-
fontFamily: 'Pretendard-Regular',
|
|
134
|
-
letterSpacing: 0
|
|
135
|
-
}),
|
|
123
|
+
selector: typo => size === 'large' ? typo.body3.regular : typo.caption2.regular,
|
|
136
124
|
color: theme.palette.text.strongInverse
|
|
137
125
|
});
|
|
138
126
|
const textStyle = css([fontStyle, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useEffect","useState","Platform","Text","View","Animated","useAnimatedStyle","useSharedValue","withTiming","typographyOf","ButtonBase","createFontStyle","css","useTheme","Beak","DEFAULT_BEAK_LAYOUT","offset","placement","INITIAL_LAYOUT","width","height","x","y","ANIMATION_CONFIG","duration","getFlexDirection","useStyles","theme","root","position","zIndex","tooltip","content","backgroundColor","palette","fill","base","paddingHorizontal","spacing","paddingVertical","small","borderRadius","shape","radius","sm","large","paddingBottom","paddingTop","Tooltip","props","beakLayout","children","initialLayout","left","onClose","right","numberOfTitleLines","size","style","title","tooltipStyle","verticalOffset","visible","beakOffset","beakPlacement","styles","layout","setLayout","scale","animatedStyle","transform","value","flexDirection","isVerticalPlacement","totalOffset","tooltipLayoutStyle","alignItems","undefined","overflow","select","web","display","default","contentStyle","flexGrow","flexShrink","nextScaleValue","fontStyle","selector","typo","fontSize","lineHeight","fontFamily","letterSpacing","color","text","strongInverse","textStyle","beakStyle","translateX","translateY","buttonElem","beakElem","event","nativeEvent"],"sources":["Tooltip.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { Platform, Text, View, ViewProps } from 'react-native';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport type TooltipProps from './TooltipProps';\nimport type { TooltipBeakLayout, TooltipPlacement, TooltipSize } from './TooltipProps';\nimport Beak from './Beaks';\n\nconst DEFAULT_BEAK_LAYOUT: TooltipBeakLayout = {\n offset: 0,\n placement: 'middle',\n};\n\nconst INITIAL_LAYOUT = { width: 0, height: 0, x: 0, y: 0 };\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 150 };\n\ntype FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';\n\nconst getFlexDirection = (placement: TooltipPlacement): FlexDirection => {\n switch (placement) {\n case 'right':\n return 'row-reverse';\n case 'bottom':\n return 'column-reverse';\n case 'left':\n return 'row';\n case 'top':\n default:\n return 'column';\n }\n};\n\ntype TooltipStyles = NamedStylesStringUnion<'root' | 'content' | 'small' | 'large'>;\n\nconst useStyles: UseStyles<TooltipStyles> = function (): TooltipStyles {\n const theme = useTheme();\n\n return {\n root: {\n position: 'absolute',\n zIndex: theme.zIndex.tooltip,\n },\n content: {\n backgroundColor: theme.palette.fill.base,\n paddingHorizontal: theme.spacing(2),\n paddingVertical: theme.spacing(1.5),\n },\n small: {\n borderRadius: theme.shape.radius.sm,\n paddingHorizontal: theme.spacing(2),\n paddingVertical: theme.spacing(1.5),\n },\n large: {\n borderRadius: 5,\n paddingBottom: theme.spacing(2.5),\n paddingHorizontal: theme.spacing(4),\n paddingTop: theme.spacing(2),\n },\n };\n};\n\nexport default function Tooltip(props: TooltipProps) {\n const {\n beakLayout = DEFAULT_BEAK_LAYOUT,\n children,\n initialLayout = INITIAL_LAYOUT,\n left,\n onClose,\n placement = 'top' as TooltipPlacement,\n right,\n numberOfTitleLines = 1,\n size = 'small' as TooltipSize,\n style,\n title,\n tooltipStyle,\n verticalOffset = 4,\n visible = false,\n } = props;\n\n const {\n offset: beakOffset,\n placement: beakPlacement,\n } = beakLayout;\n\n const theme = useTheme();\n\n const styles = useStyles();\n\n const [layout, setLayout] = useState(initialLayout);\n\n const scale = useSharedValue(0);\n\n const animatedStyle = useAnimatedStyle(() => ({\n transform: [{ scale: scale.value }],\n }), []);\n\n const flexDirection = getFlexDirection(placement);\n\n const isVerticalPlacement = placement === 'top' || placement === 'bottom';\n\n const totalOffset = -((isVerticalPlacement ? layout.height : layout.width) + verticalOffset);\n const tooltipLayoutStyle: ViewProps['style'] = {\n alignItems: beakPlacement === 'start'\n ? 'flex-start'\n : beakPlacement === 'end'\n ? 'flex-end'\n : 'center',\n flexDirection,\n left,\n right,\n height: visible ? undefined : 0,\n overflow: visible ? undefined : 'hidden',\n ...Platform.select({\n web: {\n display: visible ? 'flex' : 'none',\n },\n default: {},\n }),\n [placement]: totalOffset,\n };\n\n const contentStyle = css([\n styles.content,\n styles[size],\n isVerticalPlacement\n ? { width: '100%' }\n : { flexGrow: 1, flexShrink: 1 },\n ]);\n\n useEffect(() => {\n const nextScaleValue = visible ? 1 : 0;\n\n scale.value = withTiming(nextScaleValue, ANIMATION_CONFIG);\n }, [visible]);\n\n const fontStyle = createFontStyle(theme, {\n selector: (typo) => size === 'large'\n ? typographyOf({\n fontSize: 13,\n lineHeight: 19.5,\n fontFamily: 'Pretendard-Regular',\n letterSpacing: 0,\n })\n // TODO: change caption2.\n : typographyOf({\n fontSize: 11,\n lineHeight: 15.4,\n fontFamily: 'Pretendard-Regular',\n letterSpacing: 0,\n }),\n color: theme.palette.text.strongInverse,\n });\n\n const textStyle = css([\n fontStyle,\n { flexShrink: 1 },\n ]);\n\n const beakStyle = css({\n transform: [isVerticalPlacement ? { translateX: beakOffset } : { translateY: beakOffset }],\n });\n\n const buttonElem = (\n <ButtonBase\n pressEffect={'none'}\n onPress={onClose}\n style={contentStyle}\n >\n <Text\n // TODO: Should we provide text prop customization?\n numberOfLines={numberOfTitleLines}\n style={textStyle}\n >\n {title}\n </Text>\n </ButtonBase>\n );\n\n const beakElem = (\n <View style={beakStyle}>\n <Beak\n fill={theme.palette.fill.base}\n placement={placement}\n size={size}\n />\n </View>\n );\n\n return (\n <View style={style}>\n {children}\n\n <Animated.View\n onLayout={(event) => {\n if (event.nativeEvent.layout.height === 0) {\n return;\n }\n\n setLayout(event.nativeEvent.layout);\n }}\n style={[\n styles.root,\n animatedStyle,\n tooltipLayoutStyle,\n tooltipStyle,\n ]}\n >\n {buttonElem}\n\n {beakElem}\n </Animated.View>\n </View>\n );\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["React","useEffect","useState","Platform","Text","View","Animated","useAnimatedStyle","useSharedValue","withTiming","ButtonBase","createFontStyle","css","useTheme","Beak","DEFAULT_BEAK_LAYOUT","offset","placement","INITIAL_LAYOUT","width","height","x","y","ANIMATION_CONFIG","duration","getFlexDirection","useStyles","theme","root","position","zIndex","tooltip","content","backgroundColor","palette","fill","base","paddingHorizontal","spacing","paddingVertical","small","borderRadius","shape","radius","sm","paddingBottom","paddingTop","large","Tooltip","props","beakLayout","children","initialLayout","left","onClose","right","numberOfTitleLines","size","style","title","tooltipStyle","verticalOffset","visible","beakOffset","beakPlacement","styles","layout","setLayout","scale","animatedStyle","transform","value","flexDirection","isVerticalPlacement","totalOffset","tooltipLayoutStyle","alignItems","undefined","overflow","select","web","display","default","contentStyle","flexGrow","flexShrink","nextScaleValue","fontStyle","selector","typo","body3","regular","caption2","color","text","strongInverse","textStyle","beakStyle","translateX","translateY","buttonElem","beakElem","event","nativeEvent"],"sources":["Tooltip.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { Platform, Text, View, ViewProps } from 'react-native';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport type TooltipProps from './TooltipProps';\nimport type { TooltipBeakLayout, TooltipPlacement, TooltipSize } from './TooltipProps';\nimport Beak from './Beaks';\n\nconst DEFAULT_BEAK_LAYOUT: TooltipBeakLayout = {\n offset: 0,\n placement: 'middle',\n};\n\nconst INITIAL_LAYOUT = { width: 0, height: 0, x: 0, y: 0 };\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 150 };\n\ntype FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';\n\nconst getFlexDirection = (placement: TooltipPlacement): FlexDirection => {\n switch (placement) {\n case 'right':\n return 'row-reverse';\n case 'bottom':\n return 'column-reverse';\n case 'left':\n return 'row';\n case 'top':\n default:\n return 'column';\n }\n};\n\ntype TooltipStyles = NamedStylesStringUnion<'root' | 'content' | 'small' | 'large'>;\n\nconst useStyles: UseStyles<TooltipStyles> = function (): TooltipStyles {\n const theme = useTheme();\n\n return {\n root: {\n position: 'absolute',\n zIndex: theme.zIndex.tooltip,\n },\n content: {\n backgroundColor: theme.palette.fill.base,\n paddingHorizontal: theme.spacing(2),\n paddingVertical: theme.spacing(1.5),\n },\n small: {\n borderRadius: theme.shape.radius.sm,\n paddingBottom: theme.spacing(1.75),\n paddingHorizontal: theme.spacing(2),\n paddingTop: theme.spacing(1.5),\n },\n large: {\n borderRadius: 5,\n paddingHorizontal: theme.spacing(4),\n paddingVertical: theme.spacing(2),\n },\n };\n};\n\nexport default function Tooltip(props: TooltipProps) {\n const {\n beakLayout = DEFAULT_BEAK_LAYOUT,\n children,\n initialLayout = INITIAL_LAYOUT,\n left,\n onClose,\n placement = 'top' as TooltipPlacement,\n right,\n numberOfTitleLines = 1,\n size = 'small' as TooltipSize,\n style,\n title,\n tooltipStyle,\n verticalOffset = 4,\n visible = false,\n } = props;\n\n const {\n offset: beakOffset,\n placement: beakPlacement,\n } = beakLayout;\n\n const theme = useTheme();\n\n const styles = useStyles();\n\n const [layout, setLayout] = useState(initialLayout);\n\n const scale = useSharedValue(0);\n\n const animatedStyle = useAnimatedStyle(() => ({\n transform: [{ scale: scale.value }],\n }), []);\n\n const flexDirection = getFlexDirection(placement);\n\n const isVerticalPlacement = placement === 'top' || placement === 'bottom';\n\n const totalOffset = -((isVerticalPlacement ? layout.height : layout.width) + verticalOffset);\n const tooltipLayoutStyle: ViewProps['style'] = {\n alignItems: beakPlacement === 'start'\n ? 'flex-start'\n : beakPlacement === 'end'\n ? 'flex-end'\n : 'center',\n flexDirection,\n left,\n right,\n height: visible ? undefined : 0,\n overflow: visible ? undefined : 'hidden',\n ...Platform.select({\n web: {\n display: visible ? 'flex' : 'none',\n },\n default: {},\n }),\n [placement]: totalOffset,\n };\n\n const contentStyle = css([\n styles.content,\n styles[size],\n isVerticalPlacement\n ? { width: '100%' }\n : { flexGrow: 1, flexShrink: 1 },\n ]);\n\n useEffect(() => {\n const nextScaleValue = visible ? 1 : 0;\n\n scale.value = withTiming(nextScaleValue, ANIMATION_CONFIG);\n }, [visible]);\n\n const fontStyle = createFontStyle(theme, {\n selector: (typo) => size === 'large'\n ? typo.body3.regular\n : typo.caption2.regular,\n color: theme.palette.text.strongInverse,\n });\n\n const textStyle = css([\n fontStyle,\n { flexShrink: 1 },\n ]);\n\n const beakStyle = css({\n transform: [isVerticalPlacement ? { translateX: beakOffset } : { translateY: beakOffset }],\n });\n\n const buttonElem = (\n <ButtonBase\n pressEffect={'none'}\n onPress={onClose}\n style={contentStyle}\n >\n <Text\n // TODO: Should we provide text prop customization?\n numberOfLines={numberOfTitleLines}\n style={textStyle}\n >\n {title}\n </Text>\n </ButtonBase>\n );\n\n const beakElem = (\n <View style={beakStyle}>\n <Beak\n fill={theme.palette.fill.base}\n placement={placement}\n size={size}\n />\n </View>\n );\n\n return (\n <View style={style}>\n {children}\n\n <Animated.View\n onLayout={(event) => {\n if (event.nativeEvent.layout.height === 0) {\n return;\n }\n\n setLayout(event.nativeEvent.layout);\n }}\n style={[\n styles.root,\n animatedStyle,\n tooltipLayoutStyle,\n tooltipStyle,\n ]}\n >\n {buttonElem}\n\n {beakElem}\n </Animated.View>\n </View>\n );\n};\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["default"],"sources":["index.ts"],"sourcesContent":["export { default } from './Tooltip';\nexport type { default as TooltipProps } from './TooltipProps';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,WAAxB"}
|
|
1
|
+
{"version":3,"names":["default","tooltipBeakPlacements","tooltipPlacements","tooltipSizes"],"sources":["index.ts"],"sourcesContent":["export { default } from './Tooltip';\nexport type { default as TooltipProps, TooltipBeakLayout, TooltipBeakPlacement } from './TooltipProps';\nexport { tooltipBeakPlacements, tooltipPlacements, tooltipSizes } from './TooltipProps';\nexport * from './Beaks';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,WAAxB;AAEA,SAASC,qBAAT,EAAgCC,iBAAhC,EAAmDC,YAAnD,QAAuE,gBAAvE;AACA,cAAc,SAAd"}
|
|
@@ -42,6 +42,7 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(props, ref)
|
|
|
42
42
|
color: colorProp = 'inherit',
|
|
43
43
|
ellipsizeMode = 'tail',
|
|
44
44
|
href,
|
|
45
|
+
lineHeight,
|
|
45
46
|
numberOfLines,
|
|
46
47
|
onPress,
|
|
47
48
|
selectable,
|
|
@@ -53,7 +54,11 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(props, ref)
|
|
|
53
54
|
} = props;
|
|
54
55
|
const theme = useTheme();
|
|
55
56
|
const fontStyle = createFontStyle(theme, {
|
|
56
|
-
selector: typography =>
|
|
57
|
+
selector: typography => {
|
|
58
|
+
var _typography$variant;
|
|
59
|
+
|
|
60
|
+
return (_typography$variant = typography[variant]) === null || _typography$variant === void 0 ? void 0 : _typography$variant[weight];
|
|
61
|
+
},
|
|
57
62
|
color: selectColor(theme, colorProp)
|
|
58
63
|
}); // To prevent white-space: pre, word-wrap:break-word style conflicting issue at safari browser.
|
|
59
64
|
|
|
@@ -62,7 +67,9 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(props, ref)
|
|
|
62
67
|
} : {};
|
|
63
68
|
const textStyle = css([styles.root, {
|
|
64
69
|
textAlign: align === 'inherit' ? 'auto' : align
|
|
65
|
-
}, textWrapStyle, fontStyle,
|
|
70
|
+
}, textWrapStyle, fontStyle, lineHeight ? {
|
|
71
|
+
lineHeight
|
|
72
|
+
} : undefined, style]);
|
|
66
73
|
const accessibility = accessibilityMap[variant];
|
|
67
74
|
const variantRole = href !== undefined ? 'link' : accessibility === null || accessibility === void 0 ? void 0 : accessibility.accessibilityRole;
|
|
68
75
|
const variantLevel = accessibility === null || accessibility === void 0 ? void 0 : accessibility['area-level'];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Platform","Text","createFontStyle","css","StyleSheet","useTheme","accessibilityMap","selectColor","theme","colorProp","OS","undefined","palette","text","styles","create","root","flexShrink","maxWidth","Typography","forwardRef","props","ref","accessibilityRole","align","ariaLevel","disableFontScaling","children","color","ellipsizeMode","href","numberOfLines","onPress","selectable","style","variant","weight","onLayout","onTextLayout","fontStyle","selector","typography","textWrapStyle","wordWrap","textStyle","textAlign","accessibility","variantRole","variantLevel","memo"],"sources":["Typography.tsx"],"sourcesContent":["import React from 'react';\nimport type { TextProps, TextStyle } from 'react-native';\nimport { Platform, Text } from 'react-native';\nimport type { FontVariant, FontWeight, Theme } from '@fountain-ui/styles';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport type TypographyProps from './TypographyProps';\nimport type { AccessibilityMap, TypographyAlign, TypographyColor } from './TypographyProps';\n\nconst accessibilityMap: AccessibilityMap = {\n // TODO: set accessibilityRole.\n // h1: { accessibilityRole: 'header', 'aria-level': 1 },\n // h2: { accessibilityRole: 'header', 'aria-level': 2 },\n // h3: { accessibilityRole: 'header', 'aria-level': 3 },\n // subtitle1: { accessibilityRole: 'header', 'aria-level': 6 },\n // subtitle2: { accessibilityRole: 'header', 'aria-level': 6 },\n // body1: { accessibilityRole: 'text' },\n // body2: { accessibilityRole: 'text' },\n // caption1: { accessibilityRole: 'text' },\n // caption2: { accessibilityRole: 'text' },\n // flag: { accessibilityRole: 'text' },\n};\n\nfunction selectColor(theme: Theme, colorProp: TypographyColor): string | undefined {\n switch (colorProp) {\n case 'inherit':\n return Platform.OS === 'web' ? 'inherit' : undefined;\n default:\n return theme.palette.text[colorProp];\n }\n}\n\nconst styles = StyleSheet.create({\n root: {\n flexShrink: 1,\n ...(Platform.OS === 'web' ? { maxWidth: '100%' } : {}),\n },\n});\n\nconst Typography = React.forwardRef<Text, TypographyProps>(function Typography(props, ref) {\n const {\n accessibilityRole,\n align = 'inherit' as TypographyAlign,\n ariaLevel,\n disableFontScaling = false,\n children,\n color: colorProp = 'inherit' as TypographyColor,\n ellipsizeMode = 'tail' as TextProps['ellipsizeMode'],\n href,\n numberOfLines,\n onPress,\n selectable,\n style,\n variant = 'body1' as FontVariant,\n weight = 'medium' as FontWeight,\n onLayout,\n onTextLayout,\n } = props;\n\n const theme = useTheme();\n\n const fontStyle = createFontStyle(theme, {\n selector: (typography) => typography[variant][weight],\n color: selectColor(theme, colorProp),\n });\n\n // To prevent white-space: pre, word-wrap:break-word style conflicting issue at safari browser.\n const textWrapStyle = numberOfLines && numberOfLines > 0 && Platform.OS === 'web' ? { wordWrap: 'normal' } : {};\n\n const textStyle = css([\n styles.root,\n { textAlign: align === 'inherit' ? 'auto' : align },\n textWrapStyle as TextStyle,\n fontStyle,\n style,\n ]);\n\n const accessibility = accessibilityMap[variant];\n const variantRole = href !== undefined ? 'link' : accessibility?.accessibilityRole;\n const variantLevel = accessibility?.['area-level'];\n\n return (\n <Text\n ref={ref}\n accessibilityRole={accessibilityRole || variantRole}\n allowFontScaling={!disableFontScaling}\n aria-level={ariaLevel || variantLevel}\n children={children}\n ellipsizeMode={ellipsizeMode}\n // @ts-ignore\n href={href}\n numberOfLines={numberOfLines}\n onPress={onPress}\n selectable={selectable}\n style={textStyle}\n onLayout={onLayout}\n onTextLayout={onTextLayout}\n />\n );\n});\n\nexport default React.memo(Typography);\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAASC,QAAT,EAAmBC,IAAnB,QAA+B,cAA/B;AAEA,SAASC,eAAT,EAA0BC,GAA1B,EAA+BC,UAA/B,EAA2CC,QAA3C,QAA2D,WAA3D;AAIA,MAAMC,gBAAkC,GAAG,CACvC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAXuC,CAA3C;;AAcA,SAASC,WAAT,CAAqBC,KAArB,EAAmCC,SAAnC,EAAmF;EAC/E,QAAQA,SAAR;IACI,KAAK,SAAL;MACI,OAAOT,QAAQ,CAACU,EAAT,KAAgB,KAAhB,GAAwB,SAAxB,GAAoCC,SAA3C;;IACJ;MACI,OAAOH,KAAK,CAACI,OAAN,CAAcC,IAAd,CAAmBJ,SAAnB,CAAP;EAJR;AAMH;;AAED,MAAMK,MAAM,GAAGV,UAAU,CAACW,MAAX,CAAkB;EAC7BC,IAAI,EAAE;IACFC,UAAU,EAAE,CADV;IAEF,IAAIjB,QAAQ,CAACU,EAAT,KAAgB,KAAhB,GAAwB;MAAEQ,QAAQ,EAAE;IAAZ,CAAxB,GAA+C,EAAnD;EAFE;AADuB,CAAlB,CAAf;AAOA,MAAMC,UAAU,gBAAGpB,KAAK,CAACqB,UAAN,CAAwC,SAASD,UAAT,CAAoBE,KAApB,EAA2BC,GAA3B,EAAgC;EACvF,MAAM;IACFC,iBADE;IAEFC,KAAK,GAAG,SAFN;IAGFC,SAHE;IAIFC,kBAAkB,GAAG,KAJnB;IAKFC,QALE;IAMFC,KAAK,EAAEnB,SAAS,GAAG,SANjB;IAOFoB,aAAa,GAAG,MAPd;IAQFC,IARE;IASFC,
|
|
1
|
+
{"version":3,"names":["React","Platform","Text","createFontStyle","css","StyleSheet","useTheme","accessibilityMap","selectColor","theme","colorProp","OS","undefined","palette","text","styles","create","root","flexShrink","maxWidth","Typography","forwardRef","props","ref","accessibilityRole","align","ariaLevel","disableFontScaling","children","color","ellipsizeMode","href","lineHeight","numberOfLines","onPress","selectable","style","variant","weight","onLayout","onTextLayout","fontStyle","selector","typography","textWrapStyle","wordWrap","textStyle","textAlign","accessibility","variantRole","variantLevel","memo"],"sources":["Typography.tsx"],"sourcesContent":["import React from 'react';\nimport type { TextProps, TextStyle } from 'react-native';\nimport { Platform, Text } from 'react-native';\nimport type { FontVariant, FontWeight, Theme } from '@fountain-ui/styles';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport type TypographyProps from './TypographyProps';\nimport type { AccessibilityMap, TypographyAlign, TypographyColor } from './TypographyProps';\n\nconst accessibilityMap: AccessibilityMap = {\n // TODO: set accessibilityRole.\n // h1: { accessibilityRole: 'header', 'aria-level': 1 },\n // h2: { accessibilityRole: 'header', 'aria-level': 2 },\n // h3: { accessibilityRole: 'header', 'aria-level': 3 },\n // subtitle1: { accessibilityRole: 'header', 'aria-level': 6 },\n // subtitle2: { accessibilityRole: 'header', 'aria-level': 6 },\n // body1: { accessibilityRole: 'text' },\n // body2: { accessibilityRole: 'text' },\n // caption1: { accessibilityRole: 'text' },\n // caption2: { accessibilityRole: 'text' },\n // flag: { accessibilityRole: 'text' },\n};\n\nfunction selectColor(theme: Theme, colorProp: TypographyColor): string | undefined {\n switch (colorProp) {\n case 'inherit':\n return Platform.OS === 'web' ? 'inherit' : undefined;\n default:\n return theme.palette.text[colorProp];\n }\n}\n\nconst styles = StyleSheet.create({\n root: {\n flexShrink: 1,\n ...(Platform.OS === 'web' ? { maxWidth: '100%' } : {}),\n },\n});\n\nconst Typography = React.forwardRef<Text, TypographyProps>(function Typography(props, ref) {\n const {\n accessibilityRole,\n align = 'inherit' as TypographyAlign,\n ariaLevel,\n disableFontScaling = false,\n children,\n color: colorProp = 'inherit' as TypographyColor,\n ellipsizeMode = 'tail' as TextProps['ellipsizeMode'],\n href,\n lineHeight,\n numberOfLines,\n onPress,\n selectable,\n style,\n variant = 'body1' as FontVariant,\n weight = 'medium' as FontWeight,\n onLayout,\n onTextLayout,\n } = props;\n\n const theme = useTheme();\n\n const fontStyle = createFontStyle(theme, {\n selector: (typography) => typography[variant]?.[weight],\n color: selectColor(theme, colorProp),\n });\n\n // To prevent white-space: pre, word-wrap:break-word style conflicting issue at safari browser.\n const textWrapStyle = numberOfLines && numberOfLines > 0 && Platform.OS === 'web' ? { wordWrap: 'normal' } : {};\n\n const textStyle = css([\n styles.root,\n { textAlign: align === 'inherit' ? 'auto' : align },\n textWrapStyle as TextStyle,\n fontStyle,\n lineHeight ? { lineHeight } : undefined,\n style,\n ]);\n\n const accessibility = accessibilityMap[variant];\n const variantRole = href !== undefined ? 'link' : accessibility?.accessibilityRole;\n const variantLevel = accessibility?.['area-level'];\n\n return (\n <Text\n ref={ref}\n accessibilityRole={accessibilityRole || variantRole}\n allowFontScaling={!disableFontScaling}\n aria-level={ariaLevel || variantLevel}\n children={children}\n ellipsizeMode={ellipsizeMode}\n // @ts-ignore\n href={href}\n numberOfLines={numberOfLines}\n onPress={onPress}\n selectable={selectable}\n style={textStyle}\n onLayout={onLayout}\n onTextLayout={onTextLayout}\n />\n );\n});\n\nexport default React.memo(Typography);\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["typographyColors"],"sources":["TypographyProps.ts"],"sourcesContent":["import React from 'react';\nimport type { AccessibilityProps, TextProps, TextStyle } from 'react-native';\nimport type { FontVariant, FontWeight } from '@fountain-ui/styles';\nimport type { ComponentProps } from '../types';\n\nexport type TypographyAlign = 'inherit' | TextStyle['textAlign'];\n\nexport const typographyColors = [\n 'inherit',\n 'accent',\n 'accentAlt',\n 'strong',\n 'strongInverse',\n 'base',\n 'baseInverse',\n 'baseOpacity',\n 'baseOpacityInverse',\n 'weak',\n 'weakOpacity',\n 'weakInverse',\n 'weakOpacityInverse',\n] as const;\n\nexport type TypographyColor = typeof typographyColors[number];\n\nexport interface Accessibility {\n accessibilityRole: AccessibilityProps['accessibilityRole'];\n 'area-level'?: number;\n}\n\nexport type AccessibilityMap = Partial<Record<FontVariant, Accessibility>>;\n\nexport default interface TypographyProps extends ComponentProps<{\n /**\n * Applies HTML tag at web and communicates purpose of component at app\n */\n accessibilityRole?: AccessibilityProps['accessibilityRole'];\n\n /**\n * Set the text-align on the component.\n * The value 'justify' is not supported on Android and fallbacks to left.\n * @default 'inherit'\n */\n align?: TypographyAlign;\n\n /**\n * Applies HTML heading level\n */\n ariaLevel?: number;\n\n /**\n * Specifies whether fonts should scale to respect Text Size accessibility settings.\n * @default false\n */\n disableFontScaling?: boolean;\n\n /**\n * The content of the component.\n */\n children?: React.ReactNode;\n\n /**\n * The color of the component. It supports those theme colors that make sense for this component.\n * @default 'inherit'\n */\n color?: TypographyColor;\n\n /**\n * The text ellipsis mode.\n * @default 'tail'\n */\n ellipsizeMode?: TextProps['ellipsizeMode'];\n\n /**\n * Internal use only. The hyperlink of the text.\n */\n href?: string;\n\n /**\n * Used to truncate the text with an ellipsis after computing the text\n * layout, including line wrapping, such that the total number of lines\n * does not exceed this number.\n */\n numberOfLines?: TextProps['numberOfLines'];\n\n /**\n * Lets the user select text, to use the native copy and paste functionality.\n */\n onPress?: TextProps['onPress'];\n\n /**\n * Lets the user select text, to use the native copy and paste functionality.\n */\n selectable?: boolean;\n\n /**\n * Applies the theme typography styles.\n * @default 'body1'\n */\n variant?: FontVariant;\n\n /**\n * Determines the font weight.\n * @default 'medium'\n */\n weight?: FontWeight;\n\n /**\n * Callback that is called when the text layout has been calculated.\n */\n onTextLayout?: TextProps['onTextLayout'];\n\n /**\n * Callback that is called when the layout of the Text component changes.\n */\n onLayout?: TextProps['onLayout'];\n}> {}\n"],"mappings":"AAOA,OAAO,MAAMA,gBAAgB,GAAG,CAC5B,SAD4B,EAE5B,QAF4B,EAG5B,WAH4B,EAI5B,QAJ4B,EAK5B,eAL4B,EAM5B,MAN4B,EAO5B,aAP4B,EAQ5B,aAR4B,EAS5B,oBAT4B,EAU5B,MAV4B,EAW5B,aAX4B,EAY5B,aAZ4B,EAa5B,oBAb4B,CAAzB"}
|
|
1
|
+
{"version":3,"names":["typographyColors"],"sources":["TypographyProps.ts"],"sourcesContent":["import React from 'react';\nimport type { AccessibilityProps, TextProps, TextStyle } from 'react-native';\nimport type { FontVariant, FontWeight } from '@fountain-ui/styles';\nimport type { ComponentProps } from '../types';\n\nexport type TypographyAlign = 'inherit' | TextStyle['textAlign'];\n\nexport const typographyColors = [\n 'inherit',\n 'accent',\n 'accentAlt',\n 'strong',\n 'strongInverse',\n 'base',\n 'baseInverse',\n 'baseOpacity',\n 'baseOpacityInverse',\n 'weak',\n 'weakOpacity',\n 'weakInverse',\n 'weakOpacityInverse',\n] as const;\n\nexport type TypographyColor = typeof typographyColors[number];\n\nexport interface Accessibility {\n accessibilityRole: AccessibilityProps['accessibilityRole'];\n 'area-level'?: number;\n}\n\nexport type AccessibilityMap = Partial<Record<FontVariant, Accessibility>>;\n\nexport default interface TypographyProps extends ComponentProps<{\n /**\n * Applies HTML tag at web and communicates purpose of component at app\n */\n accessibilityRole?: AccessibilityProps['accessibilityRole'];\n\n /**\n * Set the text-align on the component.\n * The value 'justify' is not supported on Android and fallbacks to left.\n * @default 'inherit'\n */\n align?: TypographyAlign;\n\n /**\n * Applies HTML heading level\n */\n ariaLevel?: number;\n\n /**\n * Specifies whether fonts should scale to respect Text Size accessibility settings.\n * @default false\n */\n disableFontScaling?: boolean;\n\n /**\n * The content of the component.\n */\n children?: React.ReactNode;\n\n /**\n * The color of the component. It supports those theme colors that make sense for this component.\n * @default 'inherit'\n */\n color?: TypographyColor;\n\n /**\n * The text ellipsis mode.\n * @default 'tail'\n */\n ellipsizeMode?: TextProps['ellipsizeMode'];\n\n /**\n * Internal use only. The hyperlink of the text.\n */\n href?: string;\n\n /**\n * Defines the vertical spacing between lines of text.\n */\n lineHeight?: TextStyle['lineHeight'];\n\n /**\n * Used to truncate the text with an ellipsis after computing the text\n * layout, including line wrapping, such that the total number of lines\n * does not exceed this number.\n */\n numberOfLines?: TextProps['numberOfLines'];\n\n /**\n * Lets the user select text, to use the native copy and paste functionality.\n */\n onPress?: TextProps['onPress'];\n\n /**\n * Lets the user select text, to use the native copy and paste functionality.\n */\n selectable?: boolean;\n\n /**\n * Applies the theme typography styles.\n * @default 'body1'\n */\n variant?: FontVariant;\n\n /**\n * Determines the font weight.\n * @default 'medium'\n */\n weight?: FontWeight;\n\n /**\n * Callback that is called when the text layout has been calculated.\n */\n onTextLayout?: TextProps['onTextLayout'];\n\n /**\n * Callback that is called when the layout of the Text component changes.\n */\n onLayout?: TextProps['onLayout'];\n}> {}\n"],"mappings":"AAOA,OAAO,MAAMA,gBAAgB,GAAG,CAC5B,SAD4B,EAE5B,QAF4B,EAG5B,WAH4B,EAI5B,QAJ4B,EAK5B,eAL4B,EAM5B,MAN4B,EAO5B,aAP4B,EAQ5B,aAR4B,EAS5B,oBAT4B,EAU5B,MAV4B,EAW5B,aAX4B,EAY5B,aAZ4B,EAa5B,oBAb4B,CAAzB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["default"],"sources":["index.ts"],"sourcesContent":["export { default } from './Typography';\nexport type { default as TypographyProps } from './TypographyProps';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,cAAxB"}
|
|
1
|
+
{"version":3,"names":["default","typographyColors"],"sources":["index.ts"],"sourcesContent":["export { default } from './Typography';\nexport type { default as TypographyProps } from './TypographyProps';\nexport { typographyColors } from './TypographyProps';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,cAAxB;AAEA,SAASC,gBAAT,QAAiC,mBAAjC"}
|
|
@@ -6,9 +6,12 @@ export default function useBreakpointUp(target, yes, no) {
|
|
|
6
6
|
|
|
7
7
|
const isUp = useMemo(() => {
|
|
8
8
|
switch (target) {
|
|
9
|
-
case '
|
|
9
|
+
case 'xxs':
|
|
10
10
|
return true;
|
|
11
11
|
|
|
12
|
+
case 'xs':
|
|
13
|
+
return current === 'xs' || current === 'sm' || current === 'md' || current === 'lg';
|
|
14
|
+
|
|
12
15
|
case 'sm':
|
|
13
16
|
return current === 'sm' || current === 'md' || current === 'lg';
|
|
14
17
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useMemo","useTheme","useBreakpointUp","target","yes","no","theme","current","breakpoints","isUp"],"sources":["useBreakpointUp.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { Theme } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\n\ntype Breakpoint = keyof Theme['breakpoints']['values'];\n\nexport default function useBreakpointUp<R>(target: Breakpoint, yes: R, no: R): R {\n const theme = useTheme();\n\n const current = theme.breakpoints.current;\n\n // TODO: Needs to refactor\n const isUp = useMemo<boolean>(() => {\n switch (target) {\n case '
|
|
1
|
+
{"version":3,"names":["useMemo","useTheme","useBreakpointUp","target","yes","no","theme","current","breakpoints","isUp"],"sources":["useBreakpointUp.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { Theme } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\n\ntype Breakpoint = keyof Theme['breakpoints']['values'];\n\nexport default function useBreakpointUp<R>(target: Breakpoint, yes: R, no: R): R {\n const theme = useTheme();\n\n const current = theme.breakpoints.current;\n\n // TODO: Needs to refactor\n const isUp = useMemo<boolean>(() => {\n switch (target) {\n case 'xxs':\n return true;\n case 'xs':\n return current === 'xs' || current === 'sm' || current === 'md' || current === 'lg';\n case 'sm':\n return current === 'sm' || current === 'md' || current === 'lg';\n case 'md':\n return current === 'md' || current === 'lg';\n case 'lg':\n return current === 'lg';\n }\n }, [target, current]);\n\n return isUp ? yes : no;\n};\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB;AAEA,SAASC,QAAT,QAAyB,WAAzB;AAIA,eAAe,SAASC,eAAT,CAA4BC,MAA5B,EAAgDC,GAAhD,EAAwDC,EAAxD,EAAkE;EAC7E,MAAMC,KAAK,GAAGL,QAAQ,EAAtB;EAEA,MAAMM,OAAO,GAAGD,KAAK,CAACE,WAAN,CAAkBD,OAAlC,CAH6E,CAK7E;;EACA,MAAME,IAAI,GAAGT,OAAO,CAAU,MAAM;IAChC,QAAQG,MAAR;MACI,KAAK,KAAL;QACI,OAAO,IAAP;;MACJ,KAAK,IAAL;QACI,OAAOI,OAAO,KAAK,IAAZ,IAAoBA,OAAO,KAAK,IAAhC,IAAwCA,OAAO,KAAK,IAApD,IAA4DA,OAAO,KAAK,IAA/E;;MACJ,KAAK,IAAL;QACI,OAAOA,OAAO,KAAK,IAAZ,IAAoBA,OAAO,KAAK,IAAhC,IAAwCA,OAAO,KAAK,IAA3D;;MACJ,KAAK,IAAL;QACI,OAAOA,OAAO,KAAK,IAAZ,IAAoBA,OAAO,KAAK,IAAvC;;MACJ,KAAK,IAAL;QACI,OAAOA,OAAO,KAAK,IAAnB;IAVR;EAYH,CAbmB,EAajB,CAACJ,MAAD,EAASI,OAAT,CAbiB,CAApB;EAeA,OAAOE,IAAI,GAAGL,GAAH,GAASC,EAApB;AACH;AAAA"}
|