@fountain-ui/core 2.0.0-beta.20 → 2.0.0-beta.21
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/Chip/Chip.js +2 -0
- package/build/commonjs/Chip/Chip.js.map +1 -1
- package/build/commonjs/Chip/ChipProps.js.map +1 -1
- package/build/commonjs/Tabs/Tabs.js +3 -2
- package/build/commonjs/Tabs/Tabs.js.map +1 -1
- package/build/module/Chip/Chip.js +2 -0
- package/build/module/Chip/Chip.js.map +1 -1
- package/build/module/Chip/ChipProps.js.map +1 -1
- package/build/module/Tabs/Tabs.js +3 -2
- package/build/module/Tabs/Tabs.js.map +1 -1
- package/build/typescript/Chip/ChipProps.d.ts +4 -0
- package/package.json +2 -2
- package/src/Chip/Chip.tsx +2 -0
- package/src/Chip/ChipProps.ts +5 -0
- package/src/Tabs/Tabs.tsx +3 -3
|
@@ -40,6 +40,7 @@ function Chip(props) {
|
|
|
40
40
|
const {
|
|
41
41
|
children,
|
|
42
42
|
endIcon: endIconProp,
|
|
43
|
+
numberOfLines,
|
|
43
44
|
onPress,
|
|
44
45
|
startIcon: startIconProp,
|
|
45
46
|
style: styleProp,
|
|
@@ -90,6 +91,7 @@ function Chip(props) {
|
|
|
90
91
|
style: chipStyle
|
|
91
92
|
}, otherProps), startIcon, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
|
|
92
93
|
children: children,
|
|
94
|
+
numberOfLines: numberOfLines,
|
|
93
95
|
style: textStyle
|
|
94
96
|
}), endIcon);
|
|
95
97
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["ICON_SIZE","useStyles","theme","useTheme","root","alignItems","borderRadius","flexDirection","height","justifyContent","paddingLeft","spacing","paddingRight","Chip","props","children","endIcon","endIconProp","onPress","startIcon","startIconProp","style","styleProp","variant","otherProps","styles","fontColor","palette","tertiary","main","primary","variantStyleMap","outlined","backgroundColor","paper","default","borderColor","border","borderWidth","filled","grey","bold","chipStyle","css","fontStyle","createFontStyle","selector","typo","subtitle2","color","textMarginSize","textMarginStyle","marginLeft","marginRight","undefined","textStyle","textAlign","iconProps","width","fill","cloneElementSafely"],"sources":["Chip.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport ButtonBase from '../ButtonBase';\nimport type ChipProps from './ChipProps';\n\ntype ChipStyles = NamedStylesStringUnion<'root'>;\n\nconst ICON_SIZE = 16;\n\nconst useStyles: UseStyles<ChipStyles> = function (): ChipStyles {\n const theme = useTheme();\n\n return {\n root: {\n alignItems: 'center',\n borderRadius: 20,\n flexDirection: 'row',\n height: 32,\n justifyContent: 'center',\n paddingLeft: theme.spacing(2),\n paddingRight: theme.spacing(2),\n },\n };\n};\n\nexport default function Chip(props: ChipProps) {\n const {\n children,\n endIcon: endIconProp,\n onPress,\n startIcon: startIconProp,\n style: styleProp,\n variant = 'outlined',\n ...otherProps\n } = props;\n\n const theme = useTheme();\n const styles = useStyles();\n\n const fontColor = variant === 'outlined'\n ? theme.palette.tertiary.main\n : theme.palette.primary.main;\n\n const variantStyleMap = {\n outlined: {\n backgroundColor: theme.palette.paper.default,\n borderColor: theme.palette.border,\n borderWidth: 2,\n },\n filled: {\n backgroundColor: theme.palette.paper.grey,\n },\n bold: {\n backgroundColor: theme.palette.paper.grey,\n borderColor: theme.palette.primary.main,\n borderWidth: 2,\n },\n };\n\n const chipStyle = css([\n styles.root,\n variantStyleMap[variant],\n styleProp,\n ]);\n\n const fontStyle = createFontStyle(theme, {\n selector: (typo) => typo.subtitle2,\n color: fontColor,\n });\n\n const textMarginSize = theme.spacing(1);\n const textMarginStyle = startIconProp\n ? { marginLeft: textMarginSize }\n : endIconProp\n ? { marginRight: textMarginSize }\n : undefined;\n\n const textStyle = css([\n fontStyle,\n textMarginStyle,\n { textAlign: 'center' },\n ]);\n\n const iconProps = {\n width: ICON_SIZE,\n height: ICON_SIZE,\n fill: fontColor,\n };\n\n const startIcon = cloneElementSafely(startIconProp, iconProps);\n const endIcon = cloneElementSafely(endIconProp, iconProps);\n\n return (\n <ButtonBase\n onPress={onPress}\n style={chipStyle}\n {...otherProps}\n >\n {startIcon}\n\n <Text\n children={children}\n style={textStyle}\n />\n\n {endIcon}\n </ButtonBase>\n );\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;AAKA,MAAMA,SAAS,GAAG,EAAlB;;AAEA,MAAMC,SAAgC,GAAG,YAAwB;EAC7D,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,YAAY,EAAE,EAFZ;MAGFC,aAAa,EAAE,KAHb;MAIFC,MAAM,EAAE,EAJN;MAKFC,cAAc,EAAE,QALd;MAMFC,WAAW,EAAER,KAAK,CAACS,OAAN,CAAc,CAAd,CANX;MAOFC,YAAY,EAAEV,KAAK,CAACS,OAAN,CAAc,CAAd;IAPZ;EADH,CAAP;AAWH,CAdD;;AAgBe,SAASE,IAAT,CAAcC,KAAd,EAAgC;EAC3C,MAAM;IACFC,QADE;IAEFC,OAAO,EAAEC,WAFP;IAGFC,
|
|
1
|
+
{"version":3,"names":["ICON_SIZE","useStyles","theme","useTheme","root","alignItems","borderRadius","flexDirection","height","justifyContent","paddingLeft","spacing","paddingRight","Chip","props","children","endIcon","endIconProp","numberOfLines","onPress","startIcon","startIconProp","style","styleProp","variant","otherProps","styles","fontColor","palette","tertiary","main","primary","variantStyleMap","outlined","backgroundColor","paper","default","borderColor","border","borderWidth","filled","grey","bold","chipStyle","css","fontStyle","createFontStyle","selector","typo","subtitle2","color","textMarginSize","textMarginStyle","marginLeft","marginRight","undefined","textStyle","textAlign","iconProps","width","fill","cloneElementSafely"],"sources":["Chip.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport ButtonBase from '../ButtonBase';\nimport type ChipProps from './ChipProps';\n\ntype ChipStyles = NamedStylesStringUnion<'root'>;\n\nconst ICON_SIZE = 16;\n\nconst useStyles: UseStyles<ChipStyles> = function (): ChipStyles {\n const theme = useTheme();\n\n return {\n root: {\n alignItems: 'center',\n borderRadius: 20,\n flexDirection: 'row',\n height: 32,\n justifyContent: 'center',\n paddingLeft: theme.spacing(2),\n paddingRight: theme.spacing(2),\n },\n };\n};\n\nexport default function Chip(props: ChipProps) {\n const {\n children,\n endIcon: endIconProp,\n numberOfLines,\n onPress,\n startIcon: startIconProp,\n style: styleProp,\n variant = 'outlined',\n ...otherProps\n } = props;\n\n const theme = useTheme();\n const styles = useStyles();\n\n const fontColor = variant === 'outlined'\n ? theme.palette.tertiary.main\n : theme.palette.primary.main;\n\n const variantStyleMap = {\n outlined: {\n backgroundColor: theme.palette.paper.default,\n borderColor: theme.palette.border,\n borderWidth: 2,\n },\n filled: {\n backgroundColor: theme.palette.paper.grey,\n },\n bold: {\n backgroundColor: theme.palette.paper.grey,\n borderColor: theme.palette.primary.main,\n borderWidth: 2,\n },\n };\n\n const chipStyle = css([\n styles.root,\n variantStyleMap[variant],\n styleProp,\n ]);\n\n const fontStyle = createFontStyle(theme, {\n selector: (typo) => typo.subtitle2,\n color: fontColor,\n });\n\n const textMarginSize = theme.spacing(1);\n const textMarginStyle = startIconProp\n ? { marginLeft: textMarginSize }\n : endIconProp\n ? { marginRight: textMarginSize }\n : undefined;\n\n const textStyle = css([\n fontStyle,\n textMarginStyle,\n { textAlign: 'center' },\n ]);\n\n const iconProps = {\n width: ICON_SIZE,\n height: ICON_SIZE,\n fill: fontColor,\n };\n\n const startIcon = cloneElementSafely(startIconProp, iconProps);\n const endIcon = cloneElementSafely(endIconProp, iconProps);\n\n return (\n <ButtonBase\n onPress={onPress}\n style={chipStyle}\n {...otherProps}\n >\n {startIcon}\n\n <Text\n children={children}\n numberOfLines={numberOfLines}\n style={textStyle}\n />\n\n {endIcon}\n </ButtonBase>\n );\n}\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["ChipProps.ts"],"sourcesContent":["import React from 'react';\nimport { OverridableComponentProps } from '../types';\nimport type { ButtonBaseProps } from '../ButtonBase';\n\nexport type ChipVariant = 'outlined' | 'filled' | 'bold';\n\nexport default interface ChipProps extends OverridableComponentProps<ButtonBaseProps, {\n /**\n * Element placed after the children.\n */\n endIcon?: React.ReactElement;\n\n /**\n * The content of the component.\n */\n children: string;\n\n /**\n * Element placed before the children.\n */\n startIcon?: React.ReactElement;\n\n /**\n * The variant to use.\n * @default 'outlined'\n */\n variant?: ChipVariant;\n}> {}"],"mappings":""}
|
|
1
|
+
{"version":3,"names":[],"sources":["ChipProps.ts"],"sourcesContent":["import React from 'react';\nimport { OverridableComponentProps } from '../types';\nimport type { ButtonBaseProps } from '../ButtonBase';\n\nexport type ChipVariant = 'outlined' | 'filled' | 'bold';\n\nexport default interface ChipProps extends OverridableComponentProps<ButtonBaseProps, {\n /**\n * Element placed after the children.\n */\n endIcon?: React.ReactElement;\n\n /**\n * The content of the component.\n */\n children: string;\n\n /**\n * Number of lines of children.\n */\n numberOfLines?: number;\n\n /**\n * Element placed before the children.\n */\n startIcon?: React.ReactElement;\n\n /**\n * The variant to use.\n * @default 'outlined'\n */\n variant?: ChipVariant;\n}> {}"],"mappings":""}
|
|
@@ -66,6 +66,7 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(function Tabs(props, ref) {
|
|
|
66
66
|
initialValue: initialIndex
|
|
67
67
|
});
|
|
68
68
|
const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;
|
|
69
|
+
const realInitialIndex = sharedIndex.initialValue;
|
|
69
70
|
|
|
70
71
|
const setTab = newIndex => {
|
|
71
72
|
sharedIndex.animatedValue.setValue(newIndex);
|
|
@@ -119,14 +120,14 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(function Tabs(props, ref) {
|
|
|
119
120
|
return /*#__PURE__*/_react.default.createElement(_IndexAwareTab.default, {
|
|
120
121
|
children: tabElement,
|
|
121
122
|
index: index,
|
|
122
|
-
initialIndex:
|
|
123
|
+
initialIndex: realInitialIndex
|
|
123
124
|
});
|
|
124
125
|
});
|
|
125
126
|
|
|
126
127
|
const tabIndicator = canRenderIndicator ? /*#__PURE__*/_react.default.createElement(_TabIndicator.default, {
|
|
127
128
|
coordinates: coordinates,
|
|
128
129
|
disabled: disableIndicator,
|
|
129
|
-
initialIndex:
|
|
130
|
+
initialIndex: realInitialIndex,
|
|
130
131
|
scrollable: scrollable
|
|
131
132
|
}) : null;
|
|
132
133
|
return /*#__PURE__*/_react.default.createElement(_InternalContext.default.Provider, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useStyles","theme","useTheme","root","fixedRoot","flexDirection","fixedTab","flex","scrollableContainer","paddingHorizontal","spacing","Tabs","forwardRef","props","ref","children","initialIndex","disableIndicator","keyboardDismissMode","keyboardShouldPersistTaps","onChange","scrollable","style","variant","UNSTABLE_sharedIndex","fallbackSharedIndex","useSyncAnimatedValue","initialValue","sharedIndex","setTab","newIndex","animatedValue","setValue","useImperativeHandle","styles","coordinates","updateCoordinate","useTabCoordinates","canRenderIndicator","isEveryTabCoordinatesDefined","indexStore","useIndexStore","useEffect","subscribe","tabElements","React","Children","map","child","index","onLayout","event","x","width","nativeEvent","layout","onMouseDown","e","preventDefault","onPress","tabElement","cloneElement","enableIndicator","undefined","tabIndicator","css"],"sources":["Tabs.tsx"],"sourcesContent":["import React, { cloneElement, forwardRef, useEffect, useImperativeHandle } 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 TabsProps from './TabsProps';\nimport type { TabsInstance } from './types';\nimport TabIndicator from './TabIndicator';\nimport ScrollableTabsView from './ScrollableTabsView';\nimport IndexAwareTab from './IndexAwareTab';\nimport useTabCoordinates from './useTabCoordinates';\nimport useIndexStore from './useIndexStore';\nimport InternalContext from './InternalContext';\nimport { isEveryTabCoordinatesDefined } from './utils';\n\ntype TabsStyleKeys =\n | 'root'\n | 'fixedRoot'\n | 'fixedTab'\n | 'scrollableContainer';\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 };\n};\n\nconst Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {\n const {\n children,\n initialIndex = 0,\n disableIndicator = false,\n keyboardDismissMode = 'none',\n keyboardShouldPersistTaps = 'never',\n onChange,\n scrollable = false,\n style,\n variant = 'primary',\n UNSTABLE_sharedIndex,\n } = props;\n\n const fallbackSharedIndex = useSyncAnimatedValue({ initialValue: initialIndex });\n
|
|
1
|
+
{"version":3,"names":["useStyles","theme","useTheme","root","fixedRoot","flexDirection","fixedTab","flex","scrollableContainer","paddingHorizontal","spacing","Tabs","forwardRef","props","ref","children","initialIndex","disableIndicator","keyboardDismissMode","keyboardShouldPersistTaps","onChange","scrollable","style","variant","UNSTABLE_sharedIndex","fallbackSharedIndex","useSyncAnimatedValue","initialValue","sharedIndex","realInitialIndex","setTab","newIndex","animatedValue","setValue","useImperativeHandle","styles","coordinates","updateCoordinate","useTabCoordinates","canRenderIndicator","isEveryTabCoordinatesDefined","indexStore","useIndexStore","useEffect","subscribe","tabElements","React","Children","map","child","index","onLayout","event","x","width","nativeEvent","layout","onMouseDown","e","preventDefault","onPress","tabElement","cloneElement","enableIndicator","undefined","tabIndicator","css"],"sources":["Tabs.tsx"],"sourcesContent":["import React, { cloneElement, forwardRef, useEffect, useImperativeHandle } 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 TabsProps from './TabsProps';\nimport type { TabsInstance } from './types';\nimport TabIndicator from './TabIndicator';\nimport ScrollableTabsView from './ScrollableTabsView';\nimport IndexAwareTab from './IndexAwareTab';\nimport useTabCoordinates from './useTabCoordinates';\nimport useIndexStore from './useIndexStore';\nimport InternalContext from './InternalContext';\nimport { isEveryTabCoordinatesDefined } from './utils';\n\ntype TabsStyleKeys =\n | 'root'\n | 'fixedRoot'\n | 'fixedTab'\n | 'scrollableContainer';\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 };\n};\n\nconst Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {\n const {\n children,\n initialIndex = 0,\n disableIndicator = false,\n keyboardDismissMode = 'none',\n keyboardShouldPersistTaps = 'never',\n onChange,\n scrollable = false,\n style,\n variant = 'primary',\n UNSTABLE_sharedIndex,\n } = props;\n\n const fallbackSharedIndex = useSyncAnimatedValue({ initialValue: initialIndex });\n const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;\n const realInitialIndex = sharedIndex.initialValue;\n\n const setTab = (newIndex: number) => {\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 [coordinates, updateCoordinate] = useTabCoordinates(children);\n\n const canRenderIndicator = isEveryTabCoordinatesDefined(coordinates, children);\n\n const indexStore = useIndexStore(sharedIndex);\n\n useEffect(() => {\n return indexStore.subscribe(newIndex => {\n onChange?.(newIndex);\n });\n }, [indexStore, onChange]);\n\n const tabElements = React.Children.map(children, (child, index) => {\n const onLayout = (event: LayoutChangeEvent) => {\n const { x, width } = event.nativeEvent.layout;\n\n updateCoordinate(index, x, width);\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 onLayout,\n onPress,\n onMouseDown,\n variant,\n style: scrollable ? undefined : styles.fixedTab,\n });\n\n return (\n <IndexAwareTab\n children={tabElement}\n index={index}\n initialIndex={realInitialIndex}\n />\n );\n });\n\n const tabIndicator = canRenderIndicator ? (\n <TabIndicator\n coordinates={coordinates}\n disabled={disableIndicator}\n initialIndex={realInitialIndex}\n scrollable={scrollable}\n />\n ) : null;\n\n return (\n <InternalContext.Provider value={{ indexStore }}>\n <View\n style={css([\n styles.root,\n scrollable ? undefined : styles.fixedRoot,\n style,\n ])}\n >\n {scrollable ? (\n <ScrollableTabsView\n automaticallyAdjustContentInsets={false}\n bounces={false}\n contentContainerStyle={styles.scrollableContainer}\n coordinates={coordinates}\n directionalLockEnabled={true}\n horizontal={true}\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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"}
|
|
@@ -26,6 +26,7 @@ export default function Chip(props) {
|
|
|
26
26
|
const {
|
|
27
27
|
children,
|
|
28
28
|
endIcon: endIconProp,
|
|
29
|
+
numberOfLines,
|
|
29
30
|
onPress,
|
|
30
31
|
startIcon: startIconProp,
|
|
31
32
|
style: styleProp,
|
|
@@ -76,6 +77,7 @@ export default function Chip(props) {
|
|
|
76
77
|
style: chipStyle
|
|
77
78
|
}, otherProps), startIcon, /*#__PURE__*/React.createElement(Text, {
|
|
78
79
|
children: children,
|
|
80
|
+
numberOfLines: numberOfLines,
|
|
79
81
|
style: textStyle
|
|
80
82
|
}), endIcon);
|
|
81
83
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Text","createFontStyle","css","useTheme","cloneElementSafely","ButtonBase","ICON_SIZE","useStyles","theme","root","alignItems","borderRadius","flexDirection","height","justifyContent","paddingLeft","spacing","paddingRight","Chip","props","children","endIcon","endIconProp","onPress","startIcon","startIconProp","style","styleProp","variant","otherProps","styles","fontColor","palette","tertiary","main","primary","variantStyleMap","outlined","backgroundColor","paper","default","borderColor","border","borderWidth","filled","grey","bold","chipStyle","fontStyle","selector","typo","subtitle2","color","textMarginSize","textMarginStyle","marginLeft","marginRight","undefined","textStyle","textAlign","iconProps","width","fill"],"sources":["Chip.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport ButtonBase from '../ButtonBase';\nimport type ChipProps from './ChipProps';\n\ntype ChipStyles = NamedStylesStringUnion<'root'>;\n\nconst ICON_SIZE = 16;\n\nconst useStyles: UseStyles<ChipStyles> = function (): ChipStyles {\n const theme = useTheme();\n\n return {\n root: {\n alignItems: 'center',\n borderRadius: 20,\n flexDirection: 'row',\n height: 32,\n justifyContent: 'center',\n paddingLeft: theme.spacing(2),\n paddingRight: theme.spacing(2),\n },\n };\n};\n\nexport default function Chip(props: ChipProps) {\n const {\n children,\n endIcon: endIconProp,\n onPress,\n startIcon: startIconProp,\n style: styleProp,\n variant = 'outlined',\n ...otherProps\n } = props;\n\n const theme = useTheme();\n const styles = useStyles();\n\n const fontColor = variant === 'outlined'\n ? theme.palette.tertiary.main\n : theme.palette.primary.main;\n\n const variantStyleMap = {\n outlined: {\n backgroundColor: theme.palette.paper.default,\n borderColor: theme.palette.border,\n borderWidth: 2,\n },\n filled: {\n backgroundColor: theme.palette.paper.grey,\n },\n bold: {\n backgroundColor: theme.palette.paper.grey,\n borderColor: theme.palette.primary.main,\n borderWidth: 2,\n },\n };\n\n const chipStyle = css([\n styles.root,\n variantStyleMap[variant],\n styleProp,\n ]);\n\n const fontStyle = createFontStyle(theme, {\n selector: (typo) => typo.subtitle2,\n color: fontColor,\n });\n\n const textMarginSize = theme.spacing(1);\n const textMarginStyle = startIconProp\n ? { marginLeft: textMarginSize }\n : endIconProp\n ? { marginRight: textMarginSize }\n : undefined;\n\n const textStyle = css([\n fontStyle,\n textMarginStyle,\n { textAlign: 'center' },\n ]);\n\n const iconProps = {\n width: ICON_SIZE,\n height: ICON_SIZE,\n fill: fontColor,\n };\n\n const startIcon = cloneElementSafely(startIconProp, iconProps);\n const endIcon = cloneElementSafely(endIconProp, iconProps);\n\n return (\n <ButtonBase\n onPress={onPress}\n style={chipStyle}\n {...otherProps}\n >\n {startIcon}\n\n <Text\n children={children}\n style={textStyle}\n />\n\n {endIcon}\n </ButtonBase>\n );\n}\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,eAAT,EAA0BC,GAA1B,EAA+BC,QAA/B,QAA+C,WAA/C;AACA,SAASC,kBAAT,QAAmC,UAAnC;AACA,OAAOC,UAAP,MAAuB,eAAvB;AAKA,MAAMC,SAAS,GAAG,EAAlB;;AAEA,MAAMC,SAAgC,GAAG,YAAwB;EAC7D,MAAMC,KAAK,GAAGL,QAAQ,EAAtB;EAEA,OAAO;IACHM,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,YAAY,EAAE,EAFZ;MAGFC,aAAa,EAAE,KAHb;MAIFC,MAAM,EAAE,EAJN;MAKFC,cAAc,EAAE,QALd;MAMFC,WAAW,EAAEP,KAAK,CAACQ,OAAN,CAAc,CAAd,CANX;MAOFC,YAAY,EAAET,KAAK,CAACQ,OAAN,CAAc,CAAd;IAPZ;EADH,CAAP;AAWH,CAdD;;AAgBA,eAAe,SAASE,IAAT,CAAcC,KAAd,EAAgC;EAC3C,MAAM;IACFC,QADE;IAEFC,OAAO,EAAEC,WAFP;IAGFC,
|
|
1
|
+
{"version":3,"names":["React","Text","createFontStyle","css","useTheme","cloneElementSafely","ButtonBase","ICON_SIZE","useStyles","theme","root","alignItems","borderRadius","flexDirection","height","justifyContent","paddingLeft","spacing","paddingRight","Chip","props","children","endIcon","endIconProp","numberOfLines","onPress","startIcon","startIconProp","style","styleProp","variant","otherProps","styles","fontColor","palette","tertiary","main","primary","variantStyleMap","outlined","backgroundColor","paper","default","borderColor","border","borderWidth","filled","grey","bold","chipStyle","fontStyle","selector","typo","subtitle2","color","textMarginSize","textMarginStyle","marginLeft","marginRight","undefined","textStyle","textAlign","iconProps","width","fill"],"sources":["Chip.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport ButtonBase from '../ButtonBase';\nimport type ChipProps from './ChipProps';\n\ntype ChipStyles = NamedStylesStringUnion<'root'>;\n\nconst ICON_SIZE = 16;\n\nconst useStyles: UseStyles<ChipStyles> = function (): ChipStyles {\n const theme = useTheme();\n\n return {\n root: {\n alignItems: 'center',\n borderRadius: 20,\n flexDirection: 'row',\n height: 32,\n justifyContent: 'center',\n paddingLeft: theme.spacing(2),\n paddingRight: theme.spacing(2),\n },\n };\n};\n\nexport default function Chip(props: ChipProps) {\n const {\n children,\n endIcon: endIconProp,\n numberOfLines,\n onPress,\n startIcon: startIconProp,\n style: styleProp,\n variant = 'outlined',\n ...otherProps\n } = props;\n\n const theme = useTheme();\n const styles = useStyles();\n\n const fontColor = variant === 'outlined'\n ? theme.palette.tertiary.main\n : theme.palette.primary.main;\n\n const variantStyleMap = {\n outlined: {\n backgroundColor: theme.palette.paper.default,\n borderColor: theme.palette.border,\n borderWidth: 2,\n },\n filled: {\n backgroundColor: theme.palette.paper.grey,\n },\n bold: {\n backgroundColor: theme.palette.paper.grey,\n borderColor: theme.palette.primary.main,\n borderWidth: 2,\n },\n };\n\n const chipStyle = css([\n styles.root,\n variantStyleMap[variant],\n styleProp,\n ]);\n\n const fontStyle = createFontStyle(theme, {\n selector: (typo) => typo.subtitle2,\n color: fontColor,\n });\n\n const textMarginSize = theme.spacing(1);\n const textMarginStyle = startIconProp\n ? { marginLeft: textMarginSize }\n : endIconProp\n ? { marginRight: textMarginSize }\n : undefined;\n\n const textStyle = css([\n fontStyle,\n textMarginStyle,\n { textAlign: 'center' },\n ]);\n\n const iconProps = {\n width: ICON_SIZE,\n height: ICON_SIZE,\n fill: fontColor,\n };\n\n const startIcon = cloneElementSafely(startIconProp, iconProps);\n const endIcon = cloneElementSafely(endIconProp, iconProps);\n\n return (\n <ButtonBase\n onPress={onPress}\n style={chipStyle}\n {...otherProps}\n >\n {startIcon}\n\n <Text\n children={children}\n numberOfLines={numberOfLines}\n style={textStyle}\n />\n\n {endIcon}\n </ButtonBase>\n );\n}\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["ChipProps.ts"],"sourcesContent":["import React from 'react';\nimport { OverridableComponentProps } from '../types';\nimport type { ButtonBaseProps } from '../ButtonBase';\n\nexport type ChipVariant = 'outlined' | 'filled' | 'bold';\n\nexport default interface ChipProps extends OverridableComponentProps<ButtonBaseProps, {\n /**\n * Element placed after the children.\n */\n endIcon?: React.ReactElement;\n\n /**\n * The content of the component.\n */\n children: string;\n\n /**\n * Element placed before the children.\n */\n startIcon?: React.ReactElement;\n\n /**\n * The variant to use.\n * @default 'outlined'\n */\n variant?: ChipVariant;\n}> {}"],"mappings":""}
|
|
1
|
+
{"version":3,"names":[],"sources":["ChipProps.ts"],"sourcesContent":["import React from 'react';\nimport { OverridableComponentProps } from '../types';\nimport type { ButtonBaseProps } from '../ButtonBase';\n\nexport type ChipVariant = 'outlined' | 'filled' | 'bold';\n\nexport default interface ChipProps extends OverridableComponentProps<ButtonBaseProps, {\n /**\n * Element placed after the children.\n */\n endIcon?: React.ReactElement;\n\n /**\n * The content of the component.\n */\n children: string;\n\n /**\n * Number of lines of children.\n */\n numberOfLines?: number;\n\n /**\n * Element placed before the children.\n */\n startIcon?: React.ReactElement;\n\n /**\n * The variant to use.\n * @default 'outlined'\n */\n variant?: ChipVariant;\n}> {}"],"mappings":""}
|
|
@@ -43,6 +43,7 @@ const Tabs = /*#__PURE__*/forwardRef(function Tabs(props, ref) {
|
|
|
43
43
|
initialValue: initialIndex
|
|
44
44
|
});
|
|
45
45
|
const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;
|
|
46
|
+
const realInitialIndex = sharedIndex.initialValue;
|
|
46
47
|
|
|
47
48
|
const setTab = newIndex => {
|
|
48
49
|
sharedIndex.animatedValue.setValue(newIndex);
|
|
@@ -95,13 +96,13 @@ const Tabs = /*#__PURE__*/forwardRef(function Tabs(props, ref) {
|
|
|
95
96
|
return /*#__PURE__*/React.createElement(IndexAwareTab, {
|
|
96
97
|
children: tabElement,
|
|
97
98
|
index: index,
|
|
98
|
-
initialIndex:
|
|
99
|
+
initialIndex: realInitialIndex
|
|
99
100
|
});
|
|
100
101
|
});
|
|
101
102
|
const tabIndicator = canRenderIndicator ? /*#__PURE__*/React.createElement(TabIndicator, {
|
|
102
103
|
coordinates: coordinates,
|
|
103
104
|
disabled: disableIndicator,
|
|
104
|
-
initialIndex:
|
|
105
|
+
initialIndex: realInitialIndex,
|
|
105
106
|
scrollable: scrollable
|
|
106
107
|
}) : null;
|
|
107
108
|
return /*#__PURE__*/React.createElement(InternalContext.Provider, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","cloneElement","forwardRef","useEffect","useImperativeHandle","View","css","useTheme","useSyncAnimatedValue","TabIndicator","ScrollableTabsView","IndexAwareTab","useTabCoordinates","useIndexStore","InternalContext","isEveryTabCoordinatesDefined","useStyles","theme","root","fixedRoot","flexDirection","fixedTab","flex","scrollableContainer","paddingHorizontal","spacing","Tabs","props","ref","children","initialIndex","disableIndicator","keyboardDismissMode","keyboardShouldPersistTaps","onChange","scrollable","style","variant","UNSTABLE_sharedIndex","fallbackSharedIndex","initialValue","sharedIndex","setTab","newIndex","animatedValue","setValue","styles","coordinates","updateCoordinate","canRenderIndicator","indexStore","subscribe","tabElements","Children","map","child","index","onLayout","event","x","width","nativeEvent","layout","onMouseDown","e","preventDefault","onPress","tabElement","enableIndicator","undefined","tabIndicator"],"sources":["Tabs.tsx"],"sourcesContent":["import React, { cloneElement, forwardRef, useEffect, useImperativeHandle } 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 TabsProps from './TabsProps';\nimport type { TabsInstance } from './types';\nimport TabIndicator from './TabIndicator';\nimport ScrollableTabsView from './ScrollableTabsView';\nimport IndexAwareTab from './IndexAwareTab';\nimport useTabCoordinates from './useTabCoordinates';\nimport useIndexStore from './useIndexStore';\nimport InternalContext from './InternalContext';\nimport { isEveryTabCoordinatesDefined } from './utils';\n\ntype TabsStyleKeys =\n | 'root'\n | 'fixedRoot'\n | 'fixedTab'\n | 'scrollableContainer';\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 };\n};\n\nconst Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {\n const {\n children,\n initialIndex = 0,\n disableIndicator = false,\n keyboardDismissMode = 'none',\n keyboardShouldPersistTaps = 'never',\n onChange,\n scrollable = false,\n style,\n variant = 'primary',\n UNSTABLE_sharedIndex,\n } = props;\n\n const fallbackSharedIndex = useSyncAnimatedValue({ initialValue: initialIndex });\n
|
|
1
|
+
{"version":3,"names":["React","cloneElement","forwardRef","useEffect","useImperativeHandle","View","css","useTheme","useSyncAnimatedValue","TabIndicator","ScrollableTabsView","IndexAwareTab","useTabCoordinates","useIndexStore","InternalContext","isEveryTabCoordinatesDefined","useStyles","theme","root","fixedRoot","flexDirection","fixedTab","flex","scrollableContainer","paddingHorizontal","spacing","Tabs","props","ref","children","initialIndex","disableIndicator","keyboardDismissMode","keyboardShouldPersistTaps","onChange","scrollable","style","variant","UNSTABLE_sharedIndex","fallbackSharedIndex","initialValue","sharedIndex","realInitialIndex","setTab","newIndex","animatedValue","setValue","styles","coordinates","updateCoordinate","canRenderIndicator","indexStore","subscribe","tabElements","Children","map","child","index","onLayout","event","x","width","nativeEvent","layout","onMouseDown","e","preventDefault","onPress","tabElement","enableIndicator","undefined","tabIndicator"],"sources":["Tabs.tsx"],"sourcesContent":["import React, { cloneElement, forwardRef, useEffect, useImperativeHandle } 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 TabsProps from './TabsProps';\nimport type { TabsInstance } from './types';\nimport TabIndicator from './TabIndicator';\nimport ScrollableTabsView from './ScrollableTabsView';\nimport IndexAwareTab from './IndexAwareTab';\nimport useTabCoordinates from './useTabCoordinates';\nimport useIndexStore from './useIndexStore';\nimport InternalContext from './InternalContext';\nimport { isEveryTabCoordinatesDefined } from './utils';\n\ntype TabsStyleKeys =\n | 'root'\n | 'fixedRoot'\n | 'fixedTab'\n | 'scrollableContainer';\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 };\n};\n\nconst Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {\n const {\n children,\n initialIndex = 0,\n disableIndicator = false,\n keyboardDismissMode = 'none',\n keyboardShouldPersistTaps = 'never',\n onChange,\n scrollable = false,\n style,\n variant = 'primary',\n UNSTABLE_sharedIndex,\n } = props;\n\n const fallbackSharedIndex = useSyncAnimatedValue({ initialValue: initialIndex });\n const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;\n const realInitialIndex = sharedIndex.initialValue;\n\n const setTab = (newIndex: number) => {\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 [coordinates, updateCoordinate] = useTabCoordinates(children);\n\n const canRenderIndicator = isEveryTabCoordinatesDefined(coordinates, children);\n\n const indexStore = useIndexStore(sharedIndex);\n\n useEffect(() => {\n return indexStore.subscribe(newIndex => {\n onChange?.(newIndex);\n });\n }, [indexStore, onChange]);\n\n const tabElements = React.Children.map(children, (child, index) => {\n const onLayout = (event: LayoutChangeEvent) => {\n const { x, width } = event.nativeEvent.layout;\n\n updateCoordinate(index, x, width);\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 onLayout,\n onPress,\n onMouseDown,\n variant,\n style: scrollable ? undefined : styles.fixedTab,\n });\n\n return (\n <IndexAwareTab\n children={tabElement}\n index={index}\n initialIndex={realInitialIndex}\n />\n );\n });\n\n const tabIndicator = canRenderIndicator ? (\n <TabIndicator\n coordinates={coordinates}\n disabled={disableIndicator}\n initialIndex={realInitialIndex}\n scrollable={scrollable}\n />\n ) : null;\n\n return (\n <InternalContext.Provider value={{ indexStore }}>\n <View\n style={css([\n styles.root,\n scrollable ? undefined : styles.fixedRoot,\n style,\n ])}\n >\n {scrollable ? (\n <ScrollableTabsView\n automaticallyAdjustContentInsets={false}\n bounces={false}\n contentContainerStyle={styles.scrollableContainer}\n coordinates={coordinates}\n directionalLockEnabled={true}\n horizontal={true}\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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"}
|
|
@@ -11,6 +11,10 @@ export default interface ChipProps extends OverridableComponentProps<ButtonBaseP
|
|
|
11
11
|
* The content of the component.
|
|
12
12
|
*/
|
|
13
13
|
children: string;
|
|
14
|
+
/**
|
|
15
|
+
* Number of lines of children.
|
|
16
|
+
*/
|
|
17
|
+
numberOfLines?: number;
|
|
14
18
|
/**
|
|
15
19
|
* Element placed before the children.
|
|
16
20
|
*/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fountain-ui/core",
|
|
3
|
-
"version": "2.0.0-beta.
|
|
3
|
+
"version": "2.0.0-beta.21",
|
|
4
4
|
"author": "Fountain-UI Team",
|
|
5
5
|
"description": "React components that implement Tappytoon's Fountain Design.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -67,5 +67,5 @@
|
|
|
67
67
|
"publishConfig": {
|
|
68
68
|
"access": "public"
|
|
69
69
|
},
|
|
70
|
-
"gitHead": "
|
|
70
|
+
"gitHead": "d18fb7ba86bc8aa042122e5321b9c26381bd5d5f"
|
|
71
71
|
}
|
package/src/Chip/Chip.tsx
CHANGED
|
@@ -30,6 +30,7 @@ export default function Chip(props: ChipProps) {
|
|
|
30
30
|
const {
|
|
31
31
|
children,
|
|
32
32
|
endIcon: endIconProp,
|
|
33
|
+
numberOfLines,
|
|
33
34
|
onPress,
|
|
34
35
|
startIcon: startIconProp,
|
|
35
36
|
style: styleProp,
|
|
@@ -103,6 +104,7 @@ export default function Chip(props: ChipProps) {
|
|
|
103
104
|
|
|
104
105
|
<Text
|
|
105
106
|
children={children}
|
|
107
|
+
numberOfLines={numberOfLines}
|
|
106
108
|
style={textStyle}
|
|
107
109
|
/>
|
|
108
110
|
|
package/src/Chip/ChipProps.ts
CHANGED
package/src/Tabs/Tabs.tsx
CHANGED
|
@@ -54,8 +54,8 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
|
|
|
54
54
|
} = props;
|
|
55
55
|
|
|
56
56
|
const fallbackSharedIndex = useSyncAnimatedValue({ initialValue: initialIndex });
|
|
57
|
-
|
|
58
57
|
const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;
|
|
58
|
+
const realInitialIndex = sharedIndex.initialValue;
|
|
59
59
|
|
|
60
60
|
const setTab = (newIndex: number) => {
|
|
61
61
|
sharedIndex.animatedValue.setValue(newIndex);
|
|
@@ -117,7 +117,7 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
|
|
|
117
117
|
<IndexAwareTab
|
|
118
118
|
children={tabElement}
|
|
119
119
|
index={index}
|
|
120
|
-
initialIndex={
|
|
120
|
+
initialIndex={realInitialIndex}
|
|
121
121
|
/>
|
|
122
122
|
);
|
|
123
123
|
});
|
|
@@ -126,7 +126,7 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
|
|
|
126
126
|
<TabIndicator
|
|
127
127
|
coordinates={coordinates}
|
|
128
128
|
disabled={disableIndicator}
|
|
129
|
-
initialIndex={
|
|
129
|
+
initialIndex={realInitialIndex}
|
|
130
130
|
scrollable={scrollable}
|
|
131
131
|
/>
|
|
132
132
|
) : null;
|