@fountain-ui/core 3.0.0-alpha.10 → 3.0.0-alpha.12
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/AppBar/AppBar.js +6 -1
- package/build/commonjs/AppBar/AppBar.js.map +1 -1
- package/build/commonjs/Badge/Badge.js +4 -3
- package/build/commonjs/Badge/Badge.js.map +1 -1
- package/build/commonjs/Badge/BadgeProps.js.map +1 -1
- package/build/commonjs/ButtonBase/index.js +2 -2
- package/build/commonjs/ButtonBase/index.js.map +1 -1
- package/build/commonjs/Chip/Chip.js +21 -14
- package/build/commonjs/Chip/Chip.js.map +1 -1
- package/build/commonjs/Chip/ChipProps.js +3 -1
- package/build/commonjs/Chip/ChipProps.js.map +1 -1
- package/build/commonjs/Chip/index.js +6 -0
- package/build/commonjs/Chip/index.js.map +1 -1
- package/build/commonjs/Chip/useChipStyle.js +29 -19
- package/build/commonjs/Chip/useChipStyle.js.map +1 -1
- package/build/commonjs/Dialog/Dialog.js +7 -8
- package/build/commonjs/Dialog/Dialog.js.map +1 -1
- package/build/commonjs/Dialog/DialogProps.js +1 -1
- package/build/commonjs/Dialog/DialogProps.js.map +1 -1
- package/build/commonjs/Dialog/useDialogSectionStyle.js +6 -4
- package/build/commonjs/Dialog/useDialogSectionStyle.js.map +1 -1
- package/build/commonjs/Dialog/useDialogStyle.js +9 -8
- package/build/commonjs/Dialog/useDialogStyle.js.map +1 -1
- package/build/commonjs/DialogTitle/DialogLargeTitle.js +80 -0
- package/build/commonjs/DialogTitle/DialogLargeTitle.js.map +1 -0
- package/build/commonjs/DialogTitle/DialogTitle.js +8 -4
- package/build/commonjs/DialogTitle/DialogTitle.js.map +1 -1
- package/build/commonjs/Divider/Divider.js +17 -9
- package/build/commonjs/Divider/Divider.js.map +1 -1
- package/build/commonjs/Divider/DividerProps.js +1 -1
- package/build/commonjs/Divider/DividerProps.js.map +1 -1
- package/build/commonjs/ListItem/ListItem.js +3 -13
- package/build/commonjs/ListItem/ListItem.js.map +1 -1
- package/build/commonjs/Pagination/Pagination.js +2 -0
- package/build/commonjs/Pagination/Pagination.js.map +1 -1
- package/build/commonjs/Pagination/PaginationProps.js +3 -1
- package/build/commonjs/Pagination/PaginationProps.js.map +1 -1
- package/build/commonjs/Pagination/index.js +6 -0
- package/build/commonjs/Pagination/index.js.map +1 -1
- package/build/commonjs/PaginationItem/PaginationItem.js +32 -22
- package/build/commonjs/PaginationItem/PaginationItem.js.map +1 -1
- package/build/commonjs/PaginationItem/PaginationItemProps.js.map +1 -1
- package/build/commonjs/Tab/Tab.js +11 -3
- package/build/commonjs/Tab/Tab.js.map +1 -1
- package/build/commonjs/Tabs/useTabsStyle.js +7 -4
- package/build/commonjs/Tabs/useTabsStyle.js.map +1 -1
- package/build/commonjs/Toolbar/BackButton/BackButton.js +47 -0
- package/build/commonjs/Toolbar/BackButton/BackButton.js.map +1 -0
- package/build/commonjs/Toolbar/BackButton/BackButtonProps.js +2 -0
- package/build/commonjs/Toolbar/BackButton/BackButtonProps.js.map +1 -0
- package/build/commonjs/Toolbar/BackButton/index.js +16 -0
- package/build/commonjs/Toolbar/BackButton/index.js.map +1 -0
- package/build/commonjs/Toolbar/Toolbar.js +8 -4
- package/build/commonjs/Toolbar/Toolbar.js.map +1 -1
- package/build/commonjs/internal/icons/ChevronLeft.js +4 -2
- package/build/commonjs/internal/icons/ChevronLeft.js.map +1 -1
- package/build/commonjs/internal/icons/ChevronRight.js +4 -2
- package/build/commonjs/internal/icons/ChevronRight.js.map +1 -1
- package/build/commonjs/internal/icons/Close.js +4 -2
- package/build/commonjs/internal/icons/Close.js.map +1 -1
- package/build/module/AppBar/AppBar.js +5 -1
- package/build/module/AppBar/AppBar.js.map +1 -1
- package/build/module/Badge/Badge.js +4 -3
- package/build/module/Badge/Badge.js.map +1 -1
- package/build/module/Badge/BadgeProps.js.map +1 -1
- package/build/module/ButtonBase/index.js +1 -1
- package/build/module/ButtonBase/index.js.map +1 -1
- package/build/module/Chip/Chip.js +17 -13
- package/build/module/Chip/Chip.js.map +1 -1
- package/build/module/Chip/ChipProps.js +1 -0
- package/build/module/Chip/ChipProps.js.map +1 -1
- package/build/module/Chip/index.js +1 -1
- package/build/module/Chip/index.js.map +1 -1
- package/build/module/Chip/useChipStyle.js +29 -19
- package/build/module/Chip/useChipStyle.js.map +1 -1
- package/build/module/Dialog/Dialog.js +7 -8
- package/build/module/Dialog/Dialog.js.map +1 -1
- package/build/module/Dialog/DialogProps.js +1 -1
- package/build/module/Dialog/DialogProps.js.map +1 -1
- package/build/module/Dialog/useDialogSectionStyle.js +6 -4
- package/build/module/Dialog/useDialogSectionStyle.js.map +1 -1
- package/build/module/Dialog/useDialogStyle.js +9 -8
- package/build/module/Dialog/useDialogStyle.js.map +1 -1
- package/build/module/DialogTitle/DialogLargeTitle.js +65 -0
- package/build/module/DialogTitle/DialogLargeTitle.js.map +1 -0
- package/build/module/DialogTitle/DialogTitle.js +6 -3
- package/build/module/DialogTitle/DialogTitle.js.map +1 -1
- package/build/module/Divider/Divider.js +7 -0
- 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/ListItem/ListItem.js +3 -13
- package/build/module/ListItem/ListItem.js.map +1 -1
- package/build/module/Pagination/Pagination.js +2 -0
- package/build/module/Pagination/Pagination.js.map +1 -1
- package/build/module/Pagination/PaginationProps.js +1 -0
- package/build/module/Pagination/PaginationProps.js.map +1 -1
- package/build/module/Pagination/index.js +1 -1
- package/build/module/Pagination/index.js.map +1 -1
- package/build/module/PaginationItem/PaginationItem.js +28 -21
- package/build/module/PaginationItem/PaginationItem.js.map +1 -1
- package/build/module/PaginationItem/PaginationItemProps.js.map +1 -1
- package/build/module/Tab/Tab.js +11 -3
- package/build/module/Tab/Tab.js.map +1 -1
- package/build/module/Tabs/useTabsStyle.js +6 -4
- package/build/module/Tabs/useTabsStyle.js.map +1 -1
- package/build/module/Toolbar/BackButton/BackButton.js +32 -0
- package/build/module/Toolbar/BackButton/BackButton.js.map +1 -0
- package/build/module/Toolbar/BackButton/BackButtonProps.js +2 -0
- package/build/module/Toolbar/BackButton/BackButtonProps.js.map +1 -0
- package/build/module/Toolbar/BackButton/index.js +2 -0
- package/build/module/Toolbar/BackButton/index.js.map +1 -0
- package/build/module/Toolbar/Toolbar.js +7 -3
- package/build/module/Toolbar/Toolbar.js.map +1 -1
- package/build/module/internal/icons/ChevronLeft.js +4 -2
- package/build/module/internal/icons/ChevronLeft.js.map +1 -1
- package/build/module/internal/icons/ChevronRight.js +4 -2
- package/build/module/internal/icons/ChevronRight.js.map +1 -1
- package/build/module/internal/icons/Close.js +4 -2
- package/build/module/internal/icons/Close.js.map +1 -1
- package/build/typescript/Badge/BadgeProps.d.ts +10 -5
- package/build/typescript/ButtonBase/index.d.ts +1 -1
- package/build/typescript/Chip/ChipProps.d.ts +11 -4
- package/build/typescript/Chip/index.d.ts +1 -1
- package/build/typescript/Chip/useChipStyle.d.ts +4 -3
- package/build/typescript/Dialog/DialogProps.d.ts +1 -6
- package/build/typescript/Dialog/useDialogStyle.d.ts +1 -1
- package/build/typescript/DialogTitle/DialogLargeTitle.d.ts +9 -0
- package/build/typescript/DialogTitle/DialogTitle.d.ts +6 -1
- package/build/typescript/Divider/DividerProps.d.ts +1 -1
- package/build/typescript/Pagination/PaginationProps.d.ts +12 -0
- package/build/typescript/Pagination/index.d.ts +2 -2
- package/build/typescript/PaginationItem/PaginationItemProps.d.ts +6 -0
- package/build/typescript/Toolbar/BackButton/BackButton.d.ts +3 -0
- package/build/typescript/Toolbar/BackButton/BackButtonProps.d.ts +4 -0
- package/build/typescript/Toolbar/BackButton/index.d.ts +2 -0
- package/build/typescript/Toolbar/Toolbar.d.ts +6 -1
- package/package.json +3 -3
- package/src/AppBar/AppBar.tsx +4 -0
- package/src/Badge/Badge.tsx +4 -3
- package/src/Badge/BadgeProps.ts +12 -6
- package/src/ButtonBase/index.ts +1 -1
- package/src/Chip/Chip.tsx +20 -13
- package/src/Chip/ChipProps.ts +13 -4
- package/src/Chip/index.ts +1 -1
- package/src/Chip/useChipStyle.ts +34 -17
- package/src/Dialog/Dialog.tsx +7 -8
- package/src/Dialog/DialogProps.ts +1 -7
- package/src/Dialog/useDialogSectionStyle.ts +6 -4
- package/src/Dialog/useDialogStyle.ts +9 -7
- package/src/DialogTitle/DialogLargeTitle.tsx +95 -0
- package/src/DialogTitle/DialogTitle.tsx +6 -1
- package/src/Divider/Divider.tsx +5 -0
- package/src/Divider/DividerProps.ts +1 -1
- package/src/ListItem/ListItem.tsx +3 -13
- package/src/Pagination/Pagination.tsx +3 -2
- package/src/Pagination/PaginationProps.ts +15 -0
- package/src/Pagination/index.ts +2 -2
- package/src/PaginationItem/PaginationItem.tsx +31 -24
- package/src/PaginationItem/PaginationItemProps.ts +7 -0
- package/src/Tab/Tab.tsx +20 -6
- package/src/Tabs/useTabsStyle.ts +7 -4
- package/src/Toolbar/BackButton/BackButton.tsx +42 -0
- package/src/Toolbar/BackButton/BackButtonProps.ts +4 -0
- package/src/Toolbar/BackButton/index.ts +2 -0
- package/src/Toolbar/Toolbar.tsx +6 -1
- package/src/internal/icons/ChevronLeft.tsx +4 -1
- package/src/internal/icons/ChevronRight.tsx +4 -1
- package/src/internal/icons/Close.tsx +4 -1
- package/build/commonjs/ButtonBase/LegacyButtonBase.js +0 -126
- package/build/commonjs/ButtonBase/LegacyButtonBase.js.map +0 -1
- package/build/module/ButtonBase/LegacyButtonBase.js +0 -106
- package/build/module/ButtonBase/LegacyButtonBase.js.map +0 -1
- package/build/typescript/ButtonBase/LegacyButtonBase.d.ts +0 -5
- package/src/ButtonBase/LegacyButtonBase.tsx +0 -135
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Text","View","createFontStyle","css","StyleSheet","useTheme","styles","create","container","alignSelf","alignItems","row","flexDirection","column","divider","flexGrow","selectBorderColor","theme","variant","vertical","palette","border","weaker","weak","base","Divider","props","borderWidth","borderWidthProp","children","childrenProp","elementAlign","inset","marginBetweenChildren","style","otherProps","fontColor","text","borderColor","marginSize","spacing","insetSize","marginLeft","marginRight","marginTop","marginBottom","marginStyle","insetStyle","borderColorStyle","borderWidthStyle","borderRightWidth","borderBottomWidth","containerStyle","undefined","dividerStyle","dividerMarginSize","startDividerStyle","display","endDividerStyle","fontStyle","selector","typo","caption2","medium","color","element"],"sources":["Divider.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport type { Theme } from '@fountain-ui/styles';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport { ExtendedStyle } from '../types';\nimport type DividerProps from './DividerProps';\nimport type { DividerVariant } from './DividerProps';\n\nconst styles = StyleSheet.create({\n container: {\n alignSelf: 'stretch',\n alignItems: 'center',\n },\n row: {\n flexDirection: 'row',\n },\n column: {\n flexDirection: 'column',\n },\n divider: {\n flexGrow: 1,\n },\n});\n\nfunction selectBorderColor(theme: Theme, variant: DividerVariant, vertical: boolean) {\n switch (variant) {\n default:\n case 'base':\n return vertical ? theme.palette.border.weaker : theme.palette.border.weak;\n case 'strong':\n return vertical ? theme.palette.border.weak : theme.palette.border.base;\n }\n}\n\nexport default function Divider(props: DividerProps) {\n const {\n borderWidth: borderWidthProp,\n children: childrenProp,\n elementAlign = 'center',\n inset = 0,\n marginBetweenChildren = 2,\n style,\n variant = 'base' as DividerVariant,\n vertical = false,\n ...otherProps\n } = props;\n\n const theme = useTheme();\n\n const borderWidth = borderWidthProp ?? (vertical ? 1 : 0.5);\n const fontColor = theme.palette.text.weak;\n const borderColor = selectBorderColor(theme, variant, vertical);\n const marginSize = theme.spacing(1);\n const insetSize = theme.spacing(inset);\n\n const marginLeft = marginSize;\n const marginRight = marginSize;\n const marginTop = marginSize;\n const marginBottom = marginSize;\n\n const marginStyle = vertical\n ? { marginLeft, marginRight }\n : { marginTop, marginBottom };\n\n const insetStyle = vertical\n ? { marginTop: insetSize, marginBottom: insetSize }\n : { marginLeft: insetSize, marginRight: insetSize };\n\n const borderColorStyle = { borderColor };\n const borderWidthStyle = (vertical ? { borderRightWidth: borderWidth } : { borderBottomWidth: borderWidth });\n\n const containerStyle = css([\n insetStyle,\n marginStyle,\n styles.container,\n vertical ? styles.column : styles.row,\n childrenProp ? undefined : borderColorStyle,\n childrenProp ? undefined : borderWidthStyle,\n style,\n ]);\n\n const dividerStyle = css([\n borderColorStyle,\n borderWidthStyle,\n styles.divider,\n ]);\n\n const dividerMarginSize = theme.spacing(marginBetweenChildren);\n const startDividerStyle: ExtendedStyle = {\n display: elementAlign !== 'start' ? 'flex' : 'none',\n ...(vertical ? { marginBottom: dividerMarginSize } : { marginRight: dividerMarginSize }),\n };\n const endDividerStyle: ExtendedStyle = {\n display: elementAlign !== 'end' ? 'flex' : 'none',\n ...(vertical ? { marginTop: dividerMarginSize } : { marginLeft: dividerMarginSize }),\n };\n\n const fontStyle = createFontStyle(theme, {\n selector: (typo) => typo.caption2.medium,\n color: fontColor,\n });\n\n const element = typeof childrenProp === 'string'\n ? <Text style={css(fontStyle)}>{childrenProp}</Text>\n : childrenProp;\n\n const children = childrenProp ? (\n <React.Fragment>\n <View style={css([dividerStyle, startDividerStyle])}/>\n {element}\n <View style={css([dividerStyle, endDividerStyle])}/>\n </React.Fragment>\n ) : null;\n\n return (\n <View\n style={containerStyle}\n {...otherProps}\n >\n {children}\n </View>\n );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,EAAeC,IAAf,QAA2B,cAA3B;AAEA,SAASC,eAAT,EAA0BC,GAA1B,EAA+BC,UAA/B,EAA2CC,QAA3C,QAA2D,WAA3D;AAKA,MAAMC,MAAM,GAAGF,UAAU,CAACG,MAAX,CAAkB;EAC7BC,SAAS,EAAE;IACPC,SAAS,EAAE,SADJ;IAEPC,UAAU,EAAE;EAFL,CADkB;EAK7BC,GAAG,EAAE;IACDC,aAAa,EAAE;EADd,CALwB;EAQ7BC,MAAM,EAAE;IACJD,aAAa,EAAE;EADX,CARqB;EAW7BE,OAAO,EAAE;IACLC,QAAQ,EAAE;EADL;AAXoB,CAAlB,CAAf;;AAgBA,SAASC,iBAAT,CAA2BC,KAA3B,EAAyCC,OAAzC,EAAkEC,QAAlE,EAAqF;EACjF,QAAQD,OAAR;IACI;IACA,KAAK,MAAL;MACI,OAAOC,QAAQ,GAAGF,KAAK,CAACG,OAAN,CAAcC,MAAd,CAAqBC,MAAxB,GAAiCL,KAAK,CAACG,OAAN,CAAcC,MAAd,CAAqBE,IAArE;;IACJ,KAAK,QAAL;MACI,OAAOJ,QAAQ,GAAGF,KAAK,CAACG,OAAN,CAAcC,MAAd,CAAqBE,IAAxB,GAA+BN,KAAK,CAACG,OAAN,CAAcC,MAAd,CAAqBG,IAAnE;
|
|
1
|
+
{"version":3,"names":["React","Text","View","commonColors","createFontStyle","css","StyleSheet","useTheme","styles","create","container","alignSelf","alignItems","row","flexDirection","column","divider","flexGrow","selectBorderColor","theme","variant","vertical","palette","border","weaker","weak","base","opacity","white","Divider","props","borderWidth","borderWidthProp","children","childrenProp","elementAlign","inset","marginBetweenChildren","style","otherProps","fontColor","text","borderColor","marginSize","spacing","insetSize","marginLeft","marginRight","marginTop","marginBottom","marginStyle","insetStyle","borderColorStyle","borderWidthStyle","borderRightWidth","borderBottomWidth","containerStyle","undefined","dividerStyle","dividerMarginSize","startDividerStyle","display","endDividerStyle","fontStyle","selector","typo","caption2","medium","color","element"],"sources":["Divider.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport type { Theme } from '@fountain-ui/styles';\nimport { commonColors } from '@fountain-ui/styles';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport { ExtendedStyle } from '../types';\nimport type DividerProps from './DividerProps';\nimport type { DividerVariant } from './DividerProps';\n\nconst styles = StyleSheet.create({\n container: {\n alignSelf: 'stretch',\n alignItems: 'center',\n },\n row: {\n flexDirection: 'row',\n },\n column: {\n flexDirection: 'column',\n },\n divider: {\n flexGrow: 1,\n },\n});\n\nfunction selectBorderColor(theme: Theme, variant: DividerVariant, vertical: boolean) {\n switch (variant) {\n default:\n case 'base':\n return vertical ? theme.palette.border.weaker : theme.palette.border.weak;\n case 'strong':\n return vertical ? theme.palette.border.weak : theme.palette.border.base;\n case 'strongStatic':\n return commonColors.opacity.white['13'];\n case 'baseStatic':\n return commonColors.opacity.white['10'];\n }\n}\n\nexport default function Divider(props: DividerProps) {\n const {\n borderWidth: borderWidthProp,\n children: childrenProp,\n elementAlign = 'center',\n inset = 0,\n marginBetweenChildren = 2,\n style,\n variant = 'base' as DividerVariant,\n vertical = false,\n ...otherProps\n } = props;\n\n const theme = useTheme();\n\n const borderWidth = borderWidthProp ?? (vertical ? 1 : 0.5);\n const fontColor = theme.palette.text.weak;\n const borderColor = selectBorderColor(theme, variant, vertical);\n const marginSize = theme.spacing(1);\n const insetSize = theme.spacing(inset);\n\n const marginLeft = marginSize;\n const marginRight = marginSize;\n const marginTop = marginSize;\n const marginBottom = marginSize;\n\n const marginStyle = vertical\n ? { marginLeft, marginRight }\n : { marginTop, marginBottom };\n\n const insetStyle = vertical\n ? { marginTop: insetSize, marginBottom: insetSize }\n : { marginLeft: insetSize, marginRight: insetSize };\n\n const borderColorStyle = { borderColor };\n const borderWidthStyle = (vertical ? { borderRightWidth: borderWidth } : { borderBottomWidth: borderWidth });\n\n const containerStyle = css([\n insetStyle,\n marginStyle,\n styles.container,\n vertical ? styles.column : styles.row,\n childrenProp ? undefined : borderColorStyle,\n childrenProp ? undefined : borderWidthStyle,\n style,\n ]);\n\n const dividerStyle = css([\n borderColorStyle,\n borderWidthStyle,\n styles.divider,\n ]);\n\n const dividerMarginSize = theme.spacing(marginBetweenChildren);\n const startDividerStyle: ExtendedStyle = {\n display: elementAlign !== 'start' ? 'flex' : 'none',\n ...(vertical ? { marginBottom: dividerMarginSize } : { marginRight: dividerMarginSize }),\n };\n const endDividerStyle: ExtendedStyle = {\n display: elementAlign !== 'end' ? 'flex' : 'none',\n ...(vertical ? { marginTop: dividerMarginSize } : { marginLeft: dividerMarginSize }),\n };\n\n const fontStyle = createFontStyle(theme, {\n selector: (typo) => typo.caption2.medium,\n color: fontColor,\n });\n\n const element = typeof childrenProp === 'string'\n ? <Text style={css(fontStyle)}>{childrenProp}</Text>\n : childrenProp;\n\n const children = childrenProp ? (\n <React.Fragment>\n <View style={css([dividerStyle, startDividerStyle])}/>\n {element}\n <View style={css([dividerStyle, endDividerStyle])}/>\n </React.Fragment>\n ) : null;\n\n return (\n <View\n style={containerStyle}\n {...otherProps}\n >\n {children}\n </View>\n );\n};\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["dividerElementAligns","dividerVariants"],"sources":["DividerProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\n\nexport const dividerElementAligns = ['start', 'center', 'end'] as const;\nexport type DividerElementAlign = typeof dividerElementAligns[number];\n\nexport const dividerVariants = ['base', 'strong'] as const;\nexport type DividerVariant = typeof dividerVariants[number];\n\nexport default interface DividerProps extends OverridableComponentProps<ViewProps, {\n /**\n * The content of the component.\n */\n children?: React.ReactNode;\n\n /**\n * The size of the inset. It works as a multiplier factor based on spacing system.\n * @default 0\n */\n inset?: number;\n\n /**\n * If `true`, the divider orientation is set to vertical.\n * @default false\n */\n vertical?: boolean;\n\n /**\n * The size of margin between child element and the divider. It works as a multiplier factor based on spacing system.\n * @default 2\n */\n marginBetweenChildren?: number;\n\n /**\n * The size of border width. It works as an actual pixel-based border width value of a divider.\n * @default if vertical is true 1, otherwise 0.5\n */\n borderWidth?: number;\n\n /**\n * Set position of children.\n * @default center\n */\n elementAlign?: DividerElementAlign;\n\n /**\n * Select the style of the divider based on this value.\n * @default base\n */\n variant?: DividerVariant;\n}> {}\n"],"mappings":"AAIA,OAAO,MAAMA,oBAAoB,GAAG,CAAC,OAAD,EAAU,QAAV,EAAoB,KAApB,CAA7B;AAGP,OAAO,MAAMC,eAAe,GAAG,CAAC,MAAD,EAAS,QAAT,CAAxB"}
|
|
1
|
+
{"version":3,"names":["dividerElementAligns","dividerVariants"],"sources":["DividerProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\n\nexport const dividerElementAligns = ['start', 'center', 'end'] as const;\nexport type DividerElementAlign = typeof dividerElementAligns[number];\n\nexport const dividerVariants = ['base', 'strong', 'baseStatic', 'strongStatic'] as const;\nexport type DividerVariant = typeof dividerVariants[number];\n\nexport default interface DividerProps extends OverridableComponentProps<ViewProps, {\n /**\n * The content of the component.\n */\n children?: React.ReactNode;\n\n /**\n * The size of the inset. It works as a multiplier factor based on spacing system.\n * @default 0\n */\n inset?: number;\n\n /**\n * If `true`, the divider orientation is set to vertical.\n * @default false\n */\n vertical?: boolean;\n\n /**\n * The size of margin between child element and the divider. It works as a multiplier factor based on spacing system.\n * @default 2\n */\n marginBetweenChildren?: number;\n\n /**\n * The size of border width. It works as an actual pixel-based border width value of a divider.\n * @default if vertical is true 1, otherwise 0.5\n */\n borderWidth?: number;\n\n /**\n * Set position of children.\n * @default center\n */\n elementAlign?: DividerElementAlign;\n\n /**\n * Select the style of the divider based on this value.\n * @default base\n */\n variant?: DividerVariant;\n}> {}\n"],"mappings":"AAIA,OAAO,MAAMA,oBAAoB,GAAG,CAAC,OAAD,EAAU,QAAV,EAAoB,KAApB,CAA7B;AAGP,OAAO,MAAMC,eAAe,GAAG,CAAC,MAAD,EAAS,QAAT,EAAmB,YAAnB,EAAiC,cAAjC,CAAxB"}
|
|
@@ -9,20 +9,14 @@ const useStyles = function () {
|
|
|
9
9
|
const theme = useTheme();
|
|
10
10
|
return {
|
|
11
11
|
content: {
|
|
12
|
+
borderBottomColor: theme.palette.border.weak,
|
|
13
|
+
borderBottomWidth: 0.5,
|
|
12
14
|
gap: theme.spacing(2),
|
|
13
15
|
paddingVertical: theme.spacing(3.75),
|
|
14
|
-
paddingHorizontal: theme.spacing(4),
|
|
15
16
|
width: '100%'
|
|
16
17
|
},
|
|
17
18
|
description: {
|
|
18
19
|
paddingRight: theme.spacing(20)
|
|
19
|
-
},
|
|
20
|
-
divider: {
|
|
21
|
-
borderBottomColor: theme.palette.border.weak,
|
|
22
|
-
borderBottomWidth: 0.5
|
|
23
|
-
},
|
|
24
|
-
dividerWrapper: {
|
|
25
|
-
paddingHorizontal: theme.spacing(4)
|
|
26
20
|
}
|
|
27
21
|
};
|
|
28
22
|
};
|
|
@@ -68,11 +62,7 @@ export default function ListItem(props) {
|
|
|
68
62
|
style: contentWrapperStyle
|
|
69
63
|
}, content) : /*#__PURE__*/React.createElement(View, {
|
|
70
64
|
style: contentWrapperStyle
|
|
71
|
-
}, content)
|
|
72
|
-
style: styles.dividerWrapper
|
|
73
|
-
}, /*#__PURE__*/React.createElement(View, {
|
|
74
|
-
style: styles.divider
|
|
75
|
-
})))
|
|
65
|
+
}, content))
|
|
76
66
|
);
|
|
77
67
|
}
|
|
78
68
|
;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Platform","Text","View","typographyOf","ButtonBase","Row","createFontStyle","css","useTheme","useStyles","theme","content","
|
|
1
|
+
{"version":3,"names":["React","Platform","Text","View","typographyOf","ButtonBase","Row","createFontStyle","css","useTheme","useStyles","theme","content","borderBottomColor","palette","border","weak","borderBottomWidth","gap","spacing","paddingVertical","width","description","paddingRight","ListItem","props","alignItems","button","children","disabled","onPress","style","otherProps","styles","rootComponentProps","accessibilityRole","OS","undefined","contentWrapperStyle","descriptionFontStyle","selector","_","fontSize","lineHeight","fontFamily","letterSpacing","color","text","base"],"sources":["ListItem.tsx"],"sourcesContent":["import React from 'react';\nimport type { FlexStyle } from 'react-native';\nimport { Platform, Text, View } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase';\nimport Row from '../Row';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport type ListItemProps from './ListItemProps';\n\ntype ListItemStyles = NamedStylesStringUnion<'content' | 'description'>;\n\nconst useStyles: UseStyles<ListItemStyles> = function (): ListItemStyles {\n const theme = useTheme();\n\n return {\n content: {\n borderBottomColor: theme.palette.border.weak,\n borderBottomWidth: 0.5,\n gap: theme.spacing(2),\n paddingVertical: theme.spacing(3.75),\n width: '100%',\n },\n description: {\n paddingRight: theme.spacing(20),\n },\n };\n};\n\nexport default function ListItem(props: ListItemProps) {\n const {\n alignItems = 'center' as FlexStyle['alignItems'],\n button = false,\n children,\n description,\n disabled = false,\n onPress,\n style,\n ...otherProps\n } = props;\n\n const theme = useTheme();\n\n const styles = useStyles();\n\n const rootComponentProps = {\n accessibilityRole: Platform.OS === 'web' ? 'listitem' : undefined,\n ...otherProps,\n };\n\n const contentWrapperStyle = css([\n styles.content,\n style,\n ]);\n\n const descriptionFontStyle = createFontStyle(theme, {\n selector: (_) => typographyOf({\n fontSize: 14,\n lineHeight: 19.6,\n fontFamily: 'PretendardStd-Regular',\n letterSpacing: 0,\n }),\n color: theme.palette.text.base,\n });\n\n const content = (\n <React.Fragment>\n <Row alignItems={alignItems}>\n {children}\n </Row>\n\n {description ? (\n <Text style={css([\n styles.description,\n descriptionFontStyle,\n ])}>\n {description}\n </Text>\n ) : null}\n </React.Fragment>\n );\n\n return (\n // @ts-ignore\n <View {...rootComponentProps}>\n {button ? (\n <ButtonBase\n disabled={disabled}\n onPress={onPress}\n style={contentWrapperStyle}\n >\n {content}\n </ButtonBase>\n ) : (\n <View style={contentWrapperStyle}>\n {content}\n </View>\n )}\n </View>\n );\n};\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAASC,QAAT,EAAmBC,IAAnB,EAAyBC,IAAzB,QAAqC,cAArC;AAEA,SAASC,YAAT,QAA6B,qBAA7B;AACA,OAAOC,UAAP,MAAuB,eAAvB;AACA,OAAOC,GAAP,MAAgB,QAAhB;AACA,SAASC,eAAT,EAA0BC,GAA1B,EAA+BC,QAA/B,QAA+C,WAA/C;;AAKA,MAAMC,SAAoC,GAAG,YAA4B;EACrE,MAAMC,KAAK,GAAGF,QAAQ,EAAtB;EAEA,OAAO;IACHG,OAAO,EAAE;MACLC,iBAAiB,EAAEF,KAAK,CAACG,OAAN,CAAcC,MAAd,CAAqBC,IADnC;MAELC,iBAAiB,EAAE,GAFd;MAGLC,GAAG,EAAEP,KAAK,CAACQ,OAAN,CAAc,CAAd,CAHA;MAILC,eAAe,EAAET,KAAK,CAACQ,OAAN,CAAc,IAAd,CAJZ;MAKLE,KAAK,EAAE;IALF,CADN;IAQHC,WAAW,EAAE;MACTC,YAAY,EAAEZ,KAAK,CAACQ,OAAN,CAAc,EAAd;IADL;EARV,CAAP;AAYH,CAfD;;AAiBA,eAAe,SAASK,QAAT,CAAkBC,KAAlB,EAAwC;EACnD,MAAM;IACFC,UAAU,GAAG,QADX;IAEFC,MAAM,GAAG,KAFP;IAGFC,QAHE;IAIFN,WAJE;IAKFO,QAAQ,GAAG,KALT;IAMFC,OANE;IAOFC,KAPE;IAQF,GAAGC;EARD,IASFP,KATJ;EAWA,MAAMd,KAAK,GAAGF,QAAQ,EAAtB;EAEA,MAAMwB,MAAM,GAAGvB,SAAS,EAAxB;EAEA,MAAMwB,kBAAkB,GAAG;IACvBC,iBAAiB,EAAElC,QAAQ,CAACmC,EAAT,KAAgB,KAAhB,GAAwB,UAAxB,GAAqCC,SADjC;IAEvB,GAAGL;EAFoB,CAA3B;EAKA,MAAMM,mBAAmB,GAAG9B,GAAG,CAAC,CAC5ByB,MAAM,CAACrB,OADqB,EAE5BmB,KAF4B,CAAD,CAA/B;EAKA,MAAMQ,oBAAoB,GAAGhC,eAAe,CAACI,KAAD,EAAQ;IAChD6B,QAAQ,EAAGC,CAAD,IAAOrC,YAAY,CAAC;MAC1BsC,QAAQ,EAAE,EADgB;MAE1BC,UAAU,EAAE,IAFc;MAG1BC,UAAU,EAAE,uBAHc;MAI1BC,aAAa,EAAE;IAJW,CAAD,CADmB;IAOhDC,KAAK,EAAEnC,KAAK,CAACG,OAAN,CAAciC,IAAd,CAAmBC;EAPsB,CAAR,CAA5C;EAUA,MAAMpC,OAAO,gBACT,oBAAC,KAAD,CAAO,QAAP,qBACI,oBAAC,GAAD;IAAK,UAAU,EAAEc;EAAjB,GACKE,QADL,CADJ,EAKKN,WAAW,gBACR,oBAAC,IAAD;IAAM,KAAK,EAAEd,GAAG,CAAC,CACbyB,MAAM,CAACX,WADM,EAEbiB,oBAFa,CAAD;EAAhB,GAIKjB,WAJL,CADQ,GAOR,IAZR,CADJ;EAiBA;IAAA;IACI;IACA,oBAAC,IAAD,EAAUY,kBAAV,EACKP,MAAM,gBACH,oBAAC,UAAD;MACI,QAAQ,EAAEE,QADd;MAEI,OAAO,EAAEC,OAFb;MAGI,KAAK,EAAEQ;IAHX,GAKK1B,OALL,CADG,gBASH,oBAAC,IAAD;MAAM,KAAK,EAAE0B;IAAb,GACK1B,OADL,CAVR;EAFJ;AAkBH;AAAA"}
|
|
@@ -50,6 +50,7 @@ export default function Pagination(props) {
|
|
|
50
50
|
const {
|
|
51
51
|
bundleSize = 1,
|
|
52
52
|
children,
|
|
53
|
+
color = 'base',
|
|
53
54
|
count,
|
|
54
55
|
disabled = false,
|
|
55
56
|
hideIndicator = false,
|
|
@@ -107,6 +108,7 @@ export default function Pagination(props) {
|
|
|
107
108
|
currentPage: page,
|
|
108
109
|
maxPage: count
|
|
109
110
|
}) : times(i => renderItem({
|
|
111
|
+
color,
|
|
110
112
|
index: i,
|
|
111
113
|
disabled,
|
|
112
114
|
selected: i === page
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","View","times","ChevronLeft","ChevronRight","css","useTheme","IconButton","PaginationItem","NumberPagination","useStyles","theme","root","rootInline","flexDirection","alignItems","rootAnchor","items","justifyContent","marginTop","spacing","arrowContainer","prevInline","marginRight","prevAnchor","position","left","nextInline","marginLeft","nextAnchor","right","Pagination","props","bundleSize","children","count","disabled","hideIndicator","hideNextButton","hidePrevButton","infinite","onChange","page","renderItem","index","rest","style","variant","otherProps","styles","firstPage","lastPage","handleChange","nextPage","handlePrevPress","prevPage","handleNextPress","prevButton","nextButton","i","selected","containerProps"],"sources":["Pagination.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { times } from '@fountain-ui/utils';\nimport { ChevronLeft, ChevronRight } from '../internal/icons';\nimport { css, useTheme } from '../styles';\nimport IconButton from '../IconButton';\nimport PaginationItem from '../PaginationItem';\nimport NumberPagination from './NumberPagination';\nimport type PaginationProps from './PaginationProps';\nimport type { PaginationVariant } from './PaginationProps';\n\ntype PaginationStyleKeys =\n | 'root'\n | 'rootInline'\n | 'rootAnchor'\n | 'items'\n | 'arrowContainer'\n | 'prevInline'\n | 'prevAnchor'\n | 'nextInline'\n | 'nextAnchor';\n\ntype PaginationStyles = NamedStylesStringUnion<PaginationStyleKeys>;\n\nconst useStyles: UseStyles<PaginationStyles> = function (): PaginationStyles {\n const theme = useTheme();\n\n return {\n root: {},\n rootInline: {\n flexDirection: 'row',\n alignItems: 'center',\n },\n rootAnchor: {\n flexDirection: 'column',\n },\n items: {\n flexDirection: 'row',\n justifyContent: 'center',\n marginTop: theme.spacing(2),\n },\n arrowContainer: {\n flexDirection: 'column',\n justifyContent: 'center',\n },\n prevInline: {\n marginRight: theme.spacing(1),\n },\n prevAnchor: {\n position: 'absolute',\n left: -24,\n },\n nextInline: {\n marginLeft: theme.spacing(1),\n },\n nextAnchor: {\n position: 'absolute',\n right: -24,\n },\n };\n};\n\nexport default function Pagination(props: PaginationProps) {\n const {\n bundleSize = 1,\n children,\n count,\n disabled = false,\n hideIndicator = false,\n hideNextButton = false,\n hidePrevButton = false,\n infinite = false,\n onChange,\n page,\n renderItem = ({ index, ...rest }) => <PaginationItem key={`${index}`} {...rest}/>,\n style,\n variant = 'dot' as PaginationVariant,\n ...otherProps\n } = props;\n\n const styles = useStyles();\n\n const firstPage = 0;\n const lastPage = count - 1;\n\n const handleChange = (nextPage: number) => {\n if (nextPage >= firstPage && nextPage <= lastPage) {\n if (onChange) {\n onChange(nextPage);\n }\n }\n };\n\n const handlePrevPress = () => {\n const prevPage = page - bundleSize >= firstPage\n ? page - bundleSize\n : (infinite ? count - bundleSize + page : firstPage);\n\n handleChange(prevPage);\n };\n\n const handleNextPress = () => {\n const nextPage = page + bundleSize <= lastPage\n ? page + bundleSize\n : (infinite ? page + bundleSize - count : lastPage);\n\n handleChange(nextPage);\n };\n\n const prevButton = !hidePrevButton ? (\n <IconButton\n disabled={disabled || (!infinite && page <= firstPage)}\n onPress={handlePrevPress}\n style={children ? styles.prevAnchor : styles.prevInline}\n >\n <ChevronLeft/>\n </IconButton>\n ) : null;\n\n const nextButton = !hideNextButton ? (\n <IconButton\n disabled={disabled || (!infinite && page + bundleSize > lastPage)}\n onPress={handleNextPress}\n style={children ? styles.nextAnchor : styles.nextInline}\n >\n <ChevronRight/>\n </IconButton>\n ) : null;\n\n const items = !hideIndicator ? (\n variant === 'number' ? (\n <NumberPagination\n currentPage={page}\n maxPage={count}\n />\n ) : times(i => renderItem({ index: i, disabled, selected: i === page }), count)\n ) : null;\n\n const containerProps = {\n style: css([\n styles.root,\n children ? styles.rootAnchor : styles.rootInline,\n style,\n ]),\n ...otherProps,\n };\n\n if (children) {\n return (\n <View {...containerProps}>\n <View style={css(styles.arrowContainer)}>\n {children}\n {prevButton}\n {nextButton}\n </View>\n\n <View style={css(styles.items)}>\n {items}\n </View>\n </View>\n );\n }\n\n return (\n <View {...containerProps}>\n {prevButton}\n {items}\n {nextButton}\n </View>\n );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,KAAT,QAAsB,oBAAtB;AACA,SAASC,WAAT,EAAsBC,YAAtB,QAA0C,mBAA1C;AACA,SAASC,GAAT,EAAcC,QAAd,QAA8B,WAA9B;AACA,OAAOC,UAAP,MAAuB,eAAvB;AACA,OAAOC,cAAP,MAA2B,mBAA3B;AACA,OAAOC,gBAAP,MAA6B,oBAA7B;;AAiBA,MAAMC,SAAsC,GAAG,YAA8B;EACzE,MAAMC,KAAK,GAAGL,QAAQ,EAAtB;EAEA,OAAO;IACHM,IAAI,EAAE,EADH;IAEHC,UAAU,EAAE;MACRC,aAAa,EAAE,KADP;MAERC,UAAU,EAAE;IAFJ,CAFT;IAMHC,UAAU,EAAE;MACRF,aAAa,EAAE;IADP,CANT;IASHG,KAAK,EAAE;MACHH,aAAa,EAAE,KADZ;MAEHI,cAAc,EAAE,QAFb;MAGHC,SAAS,EAAER,KAAK,CAACS,OAAN,CAAc,CAAd;IAHR,CATJ;IAcHC,cAAc,EAAE;MACZP,aAAa,EAAE,QADH;MAEZI,cAAc,EAAE;IAFJ,CAdb;IAkBHI,UAAU,EAAE;MACRC,WAAW,EAAEZ,KAAK,CAACS,OAAN,CAAc,CAAd;IADL,CAlBT;IAqBHI,UAAU,EAAE;MACRC,QAAQ,EAAE,UADF;MAERC,IAAI,EAAE,CAAC;IAFC,CArBT;IAyBHC,UAAU,EAAE;MACRC,UAAU,EAAEjB,KAAK,CAACS,OAAN,CAAc,CAAd;IADJ,CAzBT;IA4BHS,UAAU,EAAE;MACRJ,QAAQ,EAAE,UADF;MAERK,KAAK,EAAE,CAAC;IAFA;EA5BT,CAAP;AAiCH,CApCD;;AAsCA,eAAe,SAASC,UAAT,CAAoBC,KAApB,EAA4C;EACvD,MAAM;IACFC,UAAU,GAAG,CADX;IAEFC,QAFE;IAGFC,
|
|
1
|
+
{"version":3,"names":["React","View","times","ChevronLeft","ChevronRight","css","useTheme","IconButton","PaginationItem","NumberPagination","useStyles","theme","root","rootInline","flexDirection","alignItems","rootAnchor","items","justifyContent","marginTop","spacing","arrowContainer","prevInline","marginRight","prevAnchor","position","left","nextInline","marginLeft","nextAnchor","right","Pagination","props","bundleSize","children","color","count","disabled","hideIndicator","hideNextButton","hidePrevButton","infinite","onChange","page","renderItem","index","rest","style","variant","otherProps","styles","firstPage","lastPage","handleChange","nextPage","handlePrevPress","prevPage","handleNextPress","prevButton","nextButton","i","selected","containerProps"],"sources":["Pagination.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { times } from '@fountain-ui/utils';\nimport { ChevronLeft, ChevronRight } from '../internal/icons';\nimport { css, useTheme } from '../styles';\nimport IconButton from '../IconButton';\nimport PaginationItem from '../PaginationItem';\nimport NumberPagination from './NumberPagination';\nimport type PaginationProps from './PaginationProps';\nimport type { PaginationColor, PaginationVariant } from './PaginationProps';\n\ntype PaginationStyleKeys =\n | 'root'\n | 'rootInline'\n | 'rootAnchor'\n | 'items'\n | 'arrowContainer'\n | 'prevInline'\n | 'prevAnchor'\n | 'nextInline'\n | 'nextAnchor';\n\ntype PaginationStyles = NamedStylesStringUnion<PaginationStyleKeys>;\n\nconst useStyles: UseStyles<PaginationStyles> = function (): PaginationStyles {\n const theme = useTheme();\n\n return {\n root: {},\n rootInline: {\n flexDirection: 'row',\n alignItems: 'center',\n },\n rootAnchor: {\n flexDirection: 'column',\n },\n items: {\n flexDirection: 'row',\n justifyContent: 'center',\n marginTop: theme.spacing(2),\n },\n arrowContainer: {\n flexDirection: 'column',\n justifyContent: 'center',\n },\n prevInline: {\n marginRight: theme.spacing(1),\n },\n prevAnchor: {\n position: 'absolute',\n left: -24,\n },\n nextInline: {\n marginLeft: theme.spacing(1),\n },\n nextAnchor: {\n position: 'absolute',\n right: -24,\n },\n };\n};\n\nexport default function Pagination(props: PaginationProps) {\n const {\n bundleSize = 1,\n children,\n color = 'base' as PaginationColor,\n count,\n disabled = false,\n hideIndicator = false,\n hideNextButton = false,\n hidePrevButton = false,\n infinite = false,\n onChange,\n page,\n renderItem = ({ index, ...rest }) => <PaginationItem key={`${index}`} {...rest}/>,\n style,\n variant = 'dot' as PaginationVariant,\n ...otherProps\n } = props;\n\n const styles = useStyles();\n\n const firstPage = 0;\n const lastPage = count - 1;\n\n const handleChange = (nextPage: number) => {\n if (nextPage >= firstPage && nextPage <= lastPage) {\n if (onChange) {\n onChange(nextPage);\n }\n }\n };\n\n const handlePrevPress = () => {\n const prevPage = page - bundleSize >= firstPage\n ? page - bundleSize\n : (infinite ? count - bundleSize + page : firstPage);\n\n handleChange(prevPage);\n };\n\n const handleNextPress = () => {\n const nextPage = page + bundleSize <= lastPage\n ? page + bundleSize\n : (infinite ? page + bundleSize - count : lastPage);\n\n handleChange(nextPage);\n };\n\n const prevButton = !hidePrevButton ? (\n <IconButton\n disabled={disabled || (!infinite && page <= firstPage)}\n onPress={handlePrevPress}\n style={children ? styles.prevAnchor : styles.prevInline}\n >\n <ChevronLeft/>\n </IconButton>\n ) : null;\n\n const nextButton = !hideNextButton ? (\n <IconButton\n disabled={disabled || (!infinite && page + bundleSize > lastPage)}\n onPress={handleNextPress}\n style={children ? styles.nextAnchor : styles.nextInline}\n >\n <ChevronRight/>\n </IconButton>\n ) : null;\n\n const items = !hideIndicator ? (\n variant === 'number' ? (\n <NumberPagination\n currentPage={page}\n maxPage={count}\n />\n ) : times(i => renderItem({ color, index: i, disabled, selected: i === page }), count)\n ) : null;\n\n const containerProps = {\n style: css([\n styles.root,\n children ? styles.rootAnchor : styles.rootInline,\n style,\n ]),\n ...otherProps,\n };\n\n if (children) {\n return (\n <View {...containerProps}>\n <View style={css(styles.arrowContainer)}>\n {children}\n {prevButton}\n {nextButton}\n </View>\n\n <View style={css(styles.items)}>\n {items}\n </View>\n </View>\n );\n }\n\n return (\n <View {...containerProps}>\n {prevButton}\n {items}\n {nextButton}\n </View>\n );\n};\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["paginationVariants"],"sources":["PaginationProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\n\nexport const paginationVariants = ['dot', 'number'] as const;\nexport type PaginationVariant = typeof paginationVariants[number];\n\nexport interface PaginationRenderItemParams {\n /**\n * Index of the pagination item.\n */\n index: number;\n\n /**\n * If `true`, the pagination item is disabled.\n */\n disabled: boolean;\n\n /**\n * If `true` the pagination item is selected.\n */\n selected: boolean;\n}\n\nexport default interface PaginationProps extends OverridableComponentProps<ViewProps, {\n /**\n * The Number of pages that change when the button is pressed\n * @default 1\n */\n bundleSize?: number,\n\n /**\n * The pagination will be added relative to this node.\n */\n children?: React.ReactNode;\n\n /**\n * The total number of pages.\n */\n count: number,\n\n /**\n * If `true`, the pagination is disabled.\n * @default false\n */\n disabled?: boolean;\n\n\n /**\n * If `true`, hide the page indicator.\n * @default false\n */\n hideIndicator?: boolean,\n\n /**\n * If `true`, hide the next-page button.\n * @default false\n */\n hideNextButton?: boolean,\n\n /**\n * If `true`, hide the previous-page button.\n * @default false\n */\n hidePrevButton?: boolean,\n\n /**\n * If `true`, pagination is infinite.\n * @default false\n */\n infinite?: boolean,\n\n /**\n * Callback fired when the page is changed.\n */\n onChange?: (page: number) => void,\n\n /**\n * The current page number.\n */\n page: number;\n\n /**\n * Render the item.\n * @default (item) => <PaginationItem {...item} />\n */\n renderItem?: (params: PaginationRenderItemParams) => React.ReactNode;\n\n /**\n * Determines design variations of the component.\n * @default 'dot'\n */\n variant?: PaginationVariant;\n}> {}\n"],"mappings":"AAIA,OAAO,MAAMA,kBAAkB,GAAG,CAAC,KAAD,EAAQ,QAAR,CAA3B"}
|
|
1
|
+
{"version":3,"names":["paginationColors","paginationVariants"],"sources":["PaginationProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\n\nexport const paginationColors = ['base', 'static'] as const;\nexport type PaginationColor = typeof paginationColors[number];\n\nexport const paginationVariants = ['dot', 'number'] as const;\nexport type PaginationVariant = typeof paginationVariants[number];\n\nexport interface PaginationRenderItemParams {\n /**\n * Set color of dot.\n * @default 'base'\n */\n color?: PaginationColor;\n\n /**\n * Index of the pagination item.\n */\n index: number;\n\n /**\n * If `true`, the pagination item is disabled.\n */\n disabled: boolean;\n\n /**\n * If `true` the pagination item is selected.\n */\n selected: boolean;\n}\n\nexport default interface PaginationProps extends OverridableComponentProps<ViewProps, {\n /**\n * The Number of pages that change when the button is pressed\n * @default 1\n */\n bundleSize?: number,\n\n /**\n * The pagination will be added relative to this node.\n */\n children?: React.ReactNode;\n\n /**\n * Set color of dot.\n * @default 'base'\n */\n color?: PaginationColor;\n\n /**\n * The total number of pages.\n */\n count: number,\n\n /**\n * If `true`, the pagination is disabled.\n * @default false\n */\n disabled?: boolean;\n\n\n /**\n * If `true`, hide the page indicator.\n * @default false\n */\n hideIndicator?: boolean,\n\n /**\n * If `true`, hide the next-page button.\n * @default false\n */\n hideNextButton?: boolean,\n\n /**\n * If `true`, hide the previous-page button.\n * @default false\n */\n hidePrevButton?: boolean,\n\n /**\n * If `true`, pagination is infinite.\n * @default false\n */\n infinite?: boolean,\n\n /**\n * Callback fired when the page is changed.\n */\n onChange?: (page: number) => void,\n\n /**\n * The current page number.\n */\n page: number;\n\n /**\n * Render the item.\n * @default (item) => <PaginationItem {...item} />\n */\n renderItem?: (params: PaginationRenderItemParams) => React.ReactNode;\n\n /**\n * Determines design variations of the component.\n * @default 'dot'\n */\n variant?: PaginationVariant;\n}> {}\n"],"mappings":"AAIA,OAAO,MAAMA,gBAAgB,GAAG,CAAC,MAAD,EAAS,QAAT,CAAzB;AAGP,OAAO,MAAMC,kBAAkB,GAAG,CAAC,KAAD,EAAQ,QAAR,CAA3B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["default","paginationVariants"],"sources":["index.ts"],"sourcesContent":["export { default } from './Pagination';\nexport type { default as PaginationProps } from './PaginationProps';\nexport { paginationVariants } from './PaginationProps';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,cAAxB;AAEA,SAASC,
|
|
1
|
+
{"version":3,"names":["default","paginationColors","paginationVariants"],"sources":["index.ts"],"sourcesContent":["export { default } from './Pagination';\nexport type { default as PaginationProps, PaginationColor, PaginationVariant } from './PaginationProps';\nexport { paginationColors, paginationVariants } from './PaginationProps';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,cAAxB;AAEA,SAASC,gBAAT,EAA2BC,kBAA3B,QAAqD,mBAArD"}
|
|
@@ -1,38 +1,45 @@
|
|
|
1
1
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
2
|
|
|
3
3
|
import React from 'react';
|
|
4
|
-
import { View } from 'react-native';
|
|
4
|
+
import { StyleSheet, View } from 'react-native';
|
|
5
|
+
import { commonColors } from '@fountain-ui/styles';
|
|
5
6
|
import { css, useTheme } from '../styles';
|
|
7
|
+
const DEFAULT_SIZE = 6;
|
|
8
|
+
const styles = StyleSheet.create({
|
|
9
|
+
root: {
|
|
10
|
+
width: DEFAULT_SIZE,
|
|
11
|
+
height: DEFAULT_SIZE,
|
|
12
|
+
borderRadius: DEFAULT_SIZE * 0.5,
|
|
13
|
+
marginHorizontal: 4
|
|
14
|
+
}
|
|
15
|
+
});
|
|
6
16
|
|
|
7
|
-
|
|
17
|
+
function getBackgroundColor(color, selected) {
|
|
8
18
|
const theme = useTheme();
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
},
|
|
20
|
-
unselected: {
|
|
21
|
-
backgroundColor: theme.palette.status.disabled
|
|
22
|
-
}
|
|
23
|
-
};
|
|
24
|
-
};
|
|
19
|
+
|
|
20
|
+
switch (color) {
|
|
21
|
+
case 'static':
|
|
22
|
+
return selected ? commonColors.static.strongInverse : commonColors.static.weakOpacityInverse;
|
|
23
|
+
|
|
24
|
+
case 'base':
|
|
25
|
+
default:
|
|
26
|
+
return selected ? theme.palette.fill.base : theme.palette.status.disabled;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
25
29
|
|
|
26
30
|
function PaginationItem(props) {
|
|
27
31
|
const {
|
|
32
|
+
color = 'base',
|
|
28
33
|
disabled,
|
|
29
|
-
selected,
|
|
34
|
+
selected = false,
|
|
30
35
|
style,
|
|
31
36
|
...otherProps
|
|
32
37
|
} = props;
|
|
33
|
-
const
|
|
38
|
+
const backgroundColor = getBackgroundColor(color, selected);
|
|
34
39
|
return /*#__PURE__*/React.createElement(View, _extends({
|
|
35
|
-
style: css([styles.root,
|
|
40
|
+
style: css([styles.root, {
|
|
41
|
+
backgroundColor
|
|
42
|
+
}, style])
|
|
36
43
|
}, otherProps));
|
|
37
44
|
}
|
|
38
45
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","View","css","useTheme","
|
|
1
|
+
{"version":3,"names":["React","StyleSheet","View","commonColors","css","useTheme","DEFAULT_SIZE","styles","create","root","width","height","borderRadius","marginHorizontal","getBackgroundColor","color","selected","theme","static","strongInverse","weakOpacityInverse","palette","fill","base","status","disabled","PaginationItem","props","style","otherProps","backgroundColor","memo"],"sources":["PaginationItem.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleSheet, View, ViewStyle } from 'react-native';\nimport { commonColors, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { PaginationColor } from '../Pagination';\nimport { css, useTheme } from '../styles';\nimport type PaginationItemProps from './PaginationItemProps';\n\nconst DEFAULT_SIZE = 6;\n\nconst styles = StyleSheet.create({\n root: {\n width: DEFAULT_SIZE,\n height: DEFAULT_SIZE,\n borderRadius: DEFAULT_SIZE * 0.5,\n marginHorizontal: 4,\n },\n});\n\nfunction getBackgroundColor(color: PaginationColor, selected: boolean): ViewStyle['backgroundColor'] {\n const theme = useTheme();\n\n switch (color) {\n case 'static':\n return selected\n ? commonColors.static.strongInverse\n : commonColors.static.weakOpacityInverse;\n case 'base':\n default:\n return selected\n ? theme.palette.fill.base\n : theme.palette.status.disabled;\n\n }\n}\n\nfunction PaginationItem(props: PaginationItemProps) {\n const {\n color = 'base' as PaginationColor,\n disabled,\n selected = false,\n style,\n ...otherProps\n } = props;\n\n const backgroundColor = getBackgroundColor(color, selected);\n\n return (\n <View\n style={css([\n styles.root,\n { backgroundColor },\n style,\n ])}\n {...otherProps}\n />\n );\n}\n\nexport default React.memo(PaginationItem);\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,UAAT,EAAqBC,IAArB,QAA4C,cAA5C;AACA,SAASC,YAAT,QAAgE,qBAAhE;AAEA,SAASC,GAAT,EAAcC,QAAd,QAA8B,WAA9B;AAGA,MAAMC,YAAY,GAAG,CAArB;AAEA,MAAMC,MAAM,GAAGN,UAAU,CAACO,MAAX,CAAkB;EAC7BC,IAAI,EAAE;IACFC,KAAK,EAAEJ,YADL;IAEFK,MAAM,EAAEL,YAFN;IAGFM,YAAY,EAAEN,YAAY,GAAG,GAH3B;IAIFO,gBAAgB,EAAE;EAJhB;AADuB,CAAlB,CAAf;;AASA,SAASC,kBAAT,CAA4BC,KAA5B,EAAoDC,QAApD,EAAqG;EACjG,MAAMC,KAAK,GAAGZ,QAAQ,EAAtB;;EAEA,QAAQU,KAAR;IACI,KAAK,QAAL;MACI,OAAOC,QAAQ,GACTb,YAAY,CAACe,MAAb,CAAoBC,aADX,GAEThB,YAAY,CAACe,MAAb,CAAoBE,kBAF1B;;IAGJ,KAAK,MAAL;IACA;MACI,OAAOJ,QAAQ,GACTC,KAAK,CAACI,OAAN,CAAcC,IAAd,CAAmBC,IADV,GAETN,KAAK,CAACI,OAAN,CAAcG,MAAd,CAAqBC,QAF3B;EAPR;AAYH;;AAED,SAASC,cAAT,CAAwBC,KAAxB,EAAoD;EAChD,MAAM;IACFZ,KAAK,GAAG,MADN;IAEFU,QAFE;IAGFT,QAAQ,GAAG,KAHT;IAIFY,KAJE;IAKF,GAAGC;EALD,IAMFF,KANJ;EAQA,MAAMG,eAAe,GAAGhB,kBAAkB,CAACC,KAAD,EAAQC,QAAR,CAA1C;EAEA,oBACI,oBAAC,IAAD;IACI,KAAK,EAAEZ,GAAG,CAAC,CACPG,MAAM,CAACE,IADA,EAEP;MAAEqB;IAAF,CAFO,EAGPF,KAHO,CAAD;EADd,GAMQC,UANR,EADJ;AAUH;;AAED,4BAAe7B,KAAK,CAAC+B,IAAN,CAAWL,cAAX,CAAf"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["PaginationItemProps.ts"],"sourcesContent":["import type { ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\n\nexport default interface PaginationItemProps extends OverridableComponentProps<ViewProps, {\n /**\n * If `true`, the pagination item is disabled.\n * @default false\n */\n disabled?: boolean;\n\n /**\n * If `true` the pagination item is selected.\n * @default false\n */\n selected?: boolean;\n}> {}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"names":[],"sources":["PaginationItemProps.ts"],"sourcesContent":["import type { ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\nimport { PaginationColor } from '../Pagination';\n\nexport default interface PaginationItemProps extends OverridableComponentProps<ViewProps, {\n /**\n * Set color of dot.\n * @default 'base'\n */\n color?: PaginationColor;\n\n /**\n * If `true`, the pagination item is disabled.\n * @default false\n */\n disabled?: boolean;\n\n /**\n * If `true` the pagination item is selected.\n * @default false\n */\n selected?: boolean;\n}> {}\n"],"mappings":""}
|
package/build/module/Tab/Tab.js
CHANGED
|
@@ -50,12 +50,20 @@ export default function Tab(props) {
|
|
|
50
50
|
const tabElement = typeof children !== 'string' ? cloneElementSafely(children, {
|
|
51
51
|
selected
|
|
52
52
|
}) : /*#__PURE__*/React.createElement(React.Fragment, null, iconElement ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Badge, {
|
|
53
|
-
|
|
53
|
+
horizontalOffset: -6,
|
|
54
|
+
invisible: !badgeVisible,
|
|
55
|
+
verticalOffset: -4.5
|
|
54
56
|
}, iconElement), /*#__PURE__*/React.createElement(Spacer, {
|
|
55
57
|
size: 1.25
|
|
56
|
-
})
|
|
58
|
+
}), /*#__PURE__*/React.createElement(Text, {
|
|
57
59
|
style: css(labelStyle)
|
|
58
|
-
}, children))
|
|
60
|
+
}, children)) : /*#__PURE__*/React.createElement(Badge, {
|
|
61
|
+
horizontalOffset: -7,
|
|
62
|
+
invisible: !badgeVisible,
|
|
63
|
+
verticalOffset: 3
|
|
64
|
+
}, /*#__PURE__*/React.createElement(Text, {
|
|
65
|
+
style: css(labelStyle)
|
|
66
|
+
}, children)));
|
|
59
67
|
return /*#__PURE__*/React.createElement(TabBase, _extends({
|
|
60
68
|
pressEffect: pressEffect,
|
|
61
69
|
style: tabBaseStyle,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Platform","Text","View","Badge","Spacer","TabBase","css","StyleSheet","useTheme","cloneElementSafely","useVariantStyleMap","styles","create","root","OS","minWidth","filledInner","alignItems","justifyContent","Tab","props","badgeVisible","children","enableIndicator","icon","defaultIcon","selected","selectedIcon","variant","style","styleProp","onTabInnerLayout","otherProps","theme","vertical","container","containerStyle","inner","innerStyle","label","labelStyle","tabBaseStyle","tabInnerStyle","pressEffect","iconColor","palette","strong","base","iconElement","fill","tabElement"],"sources":["Tab.tsx"],"sourcesContent":["import React from 'react';\nimport { Platform, Text, View } from 'react-native';\nimport Badge from '../Badge';\nimport Spacer from '../Spacer';\nimport TabBase from '../TabBase';\nimport { css, StyleSheet, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport type TabProps from './TabProps';\nimport type { TabVariant } from './TabProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\nconst styles = StyleSheet.create({\n root: {\n // TODO: Remove redundant platform checking\n ...(Platform.OS === 'web' ? { minWidth: 'auto' } : {}),\n },\n filledInner: {\n alignItems: 'center',\n justifyContent: 'center',\n },\n});\n\nexport default function Tab(props: TabProps) {\n const {\n badgeVisible = false,\n children,\n enableIndicator = false,\n icon: defaultIcon,\n selected = false,\n selectedIcon,\n variant = 'default' as TabVariant,\n style: styleProp,\n onTabInnerLayout,\n ...otherProps\n } = props;\n\n const theme = useTheme();\n\n const vertical = variant === 'bottom-navigation';\n\n const {\n container: containerStyle,\n inner: innerStyle,\n label: labelStyle,\n } = useVariantStyleMap(variant, selected);\n\n const tabBaseStyle = css([\n styles.root,\n containerStyle,\n styleProp,\n ]);\n\n const tabInnerStyle = css([\n styles.filledInner,\n innerStyle,\n ]);\n\n const pressEffect = selected ? 'none' : 'opacity';\n\n const icon = selected ? (selectedIcon || defaultIcon) : defaultIcon;\n const iconColor = selected ? theme.palette.icon.strong : theme.palette.icon.base;\n const iconElement = cloneElementSafely(icon, { fill: iconColor });\n\n const tabElement = typeof children !== 'string' ? (\n cloneElementSafely(children, {\n selected,\n })\n ) : (\n <React.Fragment>\n {iconElement ? (\n <React.Fragment>\n <Badge
|
|
1
|
+
{"version":3,"names":["React","Platform","Text","View","Badge","Spacer","TabBase","css","StyleSheet","useTheme","cloneElementSafely","useVariantStyleMap","styles","create","root","OS","minWidth","filledInner","alignItems","justifyContent","Tab","props","badgeVisible","children","enableIndicator","icon","defaultIcon","selected","selectedIcon","variant","style","styleProp","onTabInnerLayout","otherProps","theme","vertical","container","containerStyle","inner","innerStyle","label","labelStyle","tabBaseStyle","tabInnerStyle","pressEffect","iconColor","palette","strong","base","iconElement","fill","tabElement"],"sources":["Tab.tsx"],"sourcesContent":["import React from 'react';\nimport { Platform, Text, View } from 'react-native';\nimport Badge from '../Badge';\nimport Spacer from '../Spacer';\nimport TabBase from '../TabBase';\nimport { css, StyleSheet, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport type TabProps from './TabProps';\nimport type { TabVariant } from './TabProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\nconst styles = StyleSheet.create({\n root: {\n // TODO: Remove redundant platform checking\n ...(Platform.OS === 'web' ? { minWidth: 'auto' } : {}),\n },\n filledInner: {\n alignItems: 'center',\n justifyContent: 'center',\n },\n});\n\nexport default function Tab(props: TabProps) {\n const {\n badgeVisible = false,\n children,\n enableIndicator = false,\n icon: defaultIcon,\n selected = false,\n selectedIcon,\n variant = 'default' as TabVariant,\n style: styleProp,\n onTabInnerLayout,\n ...otherProps\n } = props;\n\n const theme = useTheme();\n\n const vertical = variant === 'bottom-navigation';\n\n const {\n container: containerStyle,\n inner: innerStyle,\n label: labelStyle,\n } = useVariantStyleMap(variant, selected);\n\n const tabBaseStyle = css([\n styles.root,\n containerStyle,\n styleProp,\n ]);\n\n const tabInnerStyle = css([\n styles.filledInner,\n innerStyle,\n ]);\n\n const pressEffect = selected ? 'none' : 'opacity';\n\n const icon = selected ? (selectedIcon || defaultIcon) : defaultIcon;\n const iconColor = selected ? theme.palette.icon.strong : theme.palette.icon.base;\n const iconElement = cloneElementSafely(icon, { fill: iconColor });\n\n const tabElement = typeof children !== 'string' ? (\n cloneElementSafely(children, {\n selected,\n })\n ) : (\n <React.Fragment>\n {iconElement ? (\n <React.Fragment>\n <Badge\n horizontalOffset={-6}\n invisible={!badgeVisible}\n verticalOffset={-4.5}\n >\n {iconElement}\n </Badge>\n\n <Spacer size={1.25}/>\n\n <Text style={css(labelStyle)}>\n {children}\n </Text>\n </React.Fragment>\n ) : (\n <Badge\n horizontalOffset={-7}\n invisible={!badgeVisible}\n verticalOffset={3}\n >\n <Text style={css(labelStyle)}>\n {children}\n </Text>\n </Badge>\n )}\n </React.Fragment>\n );\n\n return (\n <TabBase\n pressEffect={pressEffect}\n style={tabBaseStyle}\n vertical={vertical}\n {...otherProps}\n >\n <View onLayout={onTabInnerLayout} style={tabInnerStyle}>\n {tabElement}\n </View>\n </TabBase>\n );\n};\n"],"mappings":"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"}
|
|
@@ -1,14 +1,16 @@
|
|
|
1
1
|
import { useMemo } from 'react';
|
|
2
|
+
import { useBreakpointUp } from '../hooks';
|
|
2
3
|
import { useTheme } from '../styles';
|
|
3
4
|
export default function useTabsStyle(variant) {
|
|
4
5
|
const theme = useTheme();
|
|
6
|
+
const isDesktop = useBreakpointUp('md', true, false);
|
|
5
7
|
return useMemo(() => {
|
|
6
8
|
switch (variant) {
|
|
7
9
|
case 'circular':
|
|
8
10
|
return {
|
|
9
11
|
container: {
|
|
10
|
-
paddingBottom:
|
|
11
|
-
paddingHorizontal:
|
|
12
|
+
paddingBottom: 8,
|
|
13
|
+
paddingHorizontal: isDesktop ? 20 : 12
|
|
12
14
|
}
|
|
13
15
|
};
|
|
14
16
|
|
|
@@ -21,10 +23,10 @@ export default function useTabsStyle(variant) {
|
|
|
21
23
|
default:
|
|
22
24
|
return {
|
|
23
25
|
container: {
|
|
24
|
-
paddingHorizontal:
|
|
26
|
+
paddingHorizontal: isDesktop ? 14 : 6
|
|
25
27
|
}
|
|
26
28
|
};
|
|
27
29
|
}
|
|
28
|
-
}, [theme, variant]);
|
|
30
|
+
}, [theme, variant, isDesktop]);
|
|
29
31
|
}
|
|
30
32
|
//# sourceMappingURL=useTabsStyle.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useMemo","useTheme","useTabsStyle","variant","theme","
|
|
1
|
+
{"version":3,"names":["useMemo","useBreakpointUp","useTheme","useTabsStyle","variant","theme","isDesktop","container","paddingBottom","paddingHorizontal"],"sources":["useTabsStyle.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { useBreakpointUp } from '../hooks';\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 const isDesktop = useBreakpointUp('md', true, false);\n\n return useMemo<TabsStyle>(() => {\n switch (variant) {\n case 'circular':\n return {\n container: {\n paddingBottom: 8,\n paddingHorizontal: isDesktop ? 20 : 12,\n },\n };\n case 'bottom-navigation':\n return {\n container: {},\n };\n case 'default':\n default:\n return {\n container: {\n paddingHorizontal: isDesktop ? 14 : 6,\n },\n };\n }\n }, [theme, variant, isDesktop]);\n}\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB;AAEA,SAASC,eAAT,QAAgC,UAAhC;AACA,SAASC,QAAT,QAAyB,WAAzB;AAOA,eAAe,SAASC,YAAT,CAAsBC,OAAtB,EAA2C;EACtD,MAAMC,KAAK,GAAGH,QAAQ,EAAtB;EAEA,MAAMI,SAAS,GAAGL,eAAe,CAAC,IAAD,EAAO,IAAP,EAAa,KAAb,CAAjC;EAEA,OAAOD,OAAO,CAAY,MAAM;IAC5B,QAAQI,OAAR;MACI,KAAK,UAAL;QACI,OAAO;UACHG,SAAS,EAAE;YACPC,aAAa,EAAE,CADR;YAEPC,iBAAiB,EAAEH,SAAS,GAAG,EAAH,GAAQ;UAF7B;QADR,CAAP;;MAMJ,KAAK,mBAAL;QACI,OAAO;UACHC,SAAS,EAAE;QADR,CAAP;;MAGJ,KAAK,SAAL;MACA;QACI,OAAO;UACHA,SAAS,EAAE;YACPE,iBAAiB,EAAEH,SAAS,GAAG,EAAH,GAAQ;UAD7B;QADR,CAAP;IAdR;EAoBH,CArBa,EAqBX,CAACD,KAAD,EAAQD,OAAR,EAAiBE,SAAjB,CArBW,CAAd;AAsBH"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { StyleSheet } from 'react-native';
|
|
5
|
+
import IconButton from '../../IconButton';
|
|
6
|
+
import { ChevronLeft } from '../../internal';
|
|
7
|
+
import { css } from '@fountain-ui/styles';
|
|
8
|
+
const styles = StyleSheet.create({
|
|
9
|
+
root: {
|
|
10
|
+
height: 40,
|
|
11
|
+
left: 4,
|
|
12
|
+
paddingLeft: 5,
|
|
13
|
+
paddingRight: 11,
|
|
14
|
+
paddingVertical: 8,
|
|
15
|
+
position: 'absolute',
|
|
16
|
+
width: 40
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
export default function BackButton(props) {
|
|
20
|
+
const {
|
|
21
|
+
style: styleProp,
|
|
22
|
+
...otherProps
|
|
23
|
+
} = props;
|
|
24
|
+
const rootStyle = css([styles.root, styleProp]);
|
|
25
|
+
return /*#__PURE__*/React.createElement(IconButton, _extends({
|
|
26
|
+
style: rootStyle
|
|
27
|
+
}, otherProps), /*#__PURE__*/React.createElement(ChevronLeft, {
|
|
28
|
+
color: 'strong',
|
|
29
|
+
size: 'large'
|
|
30
|
+
}));
|
|
31
|
+
}
|
|
32
|
+
//# sourceMappingURL=BackButton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","StyleSheet","IconButton","ChevronLeft","css","styles","create","root","height","left","paddingLeft","paddingRight","paddingVertical","position","width","BackButton","props","style","styleProp","otherProps","rootStyle"],"sources":["BackButton.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleSheet } from 'react-native';\nimport IconButton from '../../IconButton';\nimport { ChevronLeft } from '../../internal';\nimport type BackButtonProps from './BackButtonProps';\nimport { css } from '@fountain-ui/styles';\n\nconst styles = StyleSheet.create({\n root: {\n height: 40,\n left: 4,\n paddingLeft: 5,\n paddingRight: 11,\n paddingVertical: 8,\n position: 'absolute',\n width: 40,\n },\n});\n\nexport default function BackButton(props: BackButtonProps) {\n const {\n style: styleProp,\n ...otherProps\n } = props;\n\n const rootStyle = css([\n styles.root,\n styleProp,\n ]);\n\n return (\n <IconButton\n style={rootStyle}\n {...otherProps}\n >\n <ChevronLeft\n color={'strong'}\n size={'large'}\n />\n </IconButton>\n );\n}\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,UAAT,QAA2B,cAA3B;AACA,OAAOC,UAAP,MAAuB,kBAAvB;AACA,SAASC,WAAT,QAA4B,gBAA5B;AAEA,SAASC,GAAT,QAAoB,qBAApB;AAEA,MAAMC,MAAM,GAAGJ,UAAU,CAACK,MAAX,CAAkB;EAC7BC,IAAI,EAAE;IACFC,MAAM,EAAE,EADN;IAEFC,IAAI,EAAE,CAFJ;IAGFC,WAAW,EAAE,CAHX;IAIFC,YAAY,EAAE,EAJZ;IAKFC,eAAe,EAAE,CALf;IAMFC,QAAQ,EAAE,UANR;IAOFC,KAAK,EAAE;EAPL;AADuB,CAAlB,CAAf;AAYA,eAAe,SAASC,UAAT,CAAoBC,KAApB,EAA4C;EACvD,MAAM;IACFC,KAAK,EAAEC,SADL;IAEF,GAAGC;EAFD,IAGFH,KAHJ;EAKA,MAAMI,SAAS,GAAGhB,GAAG,CAAC,CAClBC,MAAM,CAACE,IADW,EAElBW,SAFkB,CAAD,CAArB;EAKA,oBACI,oBAAC,UAAD;IACI,KAAK,EAAEE;EADX,GAEQD,UAFR,gBAII,oBAAC,WAAD;IACI,KAAK,EAAE,QADX;IAEI,IAAI,EAAE;EAFV,EAJJ,CADJ;AAWH"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sources":["BackButtonProps.ts"],"sourcesContent":["import type { IconButtonProps } from '../../IconButton';\nimport type { OverridableComponentProps } from '../../types';\n\nexport default interface BackButtonProps extends OverridableComponentProps<Omit<IconButtonProps, 'children'>, {}> {}\n"],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["default"],"sources":["index.ts"],"sourcesContent":["export { default } from './BackButton';\nexport type { default as BackButtonProps } from './BackButtonProps';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,cAAxB"}
|
|
@@ -3,6 +3,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
|
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import Row from '../Row';
|
|
5
5
|
import { css, useTheme } from '../styles';
|
|
6
|
+
import BackButton from './BackButton';
|
|
6
7
|
|
|
7
8
|
const useStyles = function () {
|
|
8
9
|
const theme = useTheme();
|
|
@@ -28,7 +29,8 @@ const sizeMap = {
|
|
|
28
29
|
height: 56
|
|
29
30
|
}
|
|
30
31
|
};
|
|
31
|
-
|
|
32
|
+
|
|
33
|
+
const Toolbar = props => {
|
|
32
34
|
const {
|
|
33
35
|
disableGutters = false,
|
|
34
36
|
size = 'medium',
|
|
@@ -39,6 +41,8 @@ export default function Toolbar(props) {
|
|
|
39
41
|
return /*#__PURE__*/React.createElement(Row, _extends({
|
|
40
42
|
style: css([styles.root, !disableGutters ? styles.gutters : undefined, sizeMap[size], style])
|
|
41
43
|
}, otherProps));
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
Toolbar.BackButton = BackButton;
|
|
47
|
+
export default Toolbar;
|
|
44
48
|
//# sourceMappingURL=Toolbar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Row","css","useTheme","useStyles","theme","root","alignItems","flexWrap","gutters","paddingHorizontal","spacing","sizeMap","small","height","medium","large","Toolbar","props","disableGutters","size","style","otherProps","styles","undefined"],"sources":["Toolbar.tsx"],"sourcesContent":["import React from 'react';\nimport type { FountainUiStyle, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Row from '../Row';\nimport { css, useTheme } from '../styles';\nimport type ToolbarProps from './ToolbarProps';\nimport type { ToolbarSize } from './ToolbarProps';\n\ntype ToolbarStyles = NamedStylesStringUnion<'root' | 'gutters'>;\n\nconst useStyles: UseStyles<ToolbarStyles> = function (): ToolbarStyles {\n const theme = useTheme();\n\n return {\n root: {\n alignItems: 'center',\n flexWrap: 'nowrap',\n },\n gutters: {\n paddingHorizontal: theme.spacing(4),\n },\n };\n};\n\nconst sizeMap: Record<ToolbarSize, FountainUiStyle> = {\n small: { height: 48 },\n medium: { height: 50 },\n large: { height: 56 },\n};\n\
|
|
1
|
+
{"version":3,"names":["React","Row","css","useTheme","BackButton","useStyles","theme","root","alignItems","flexWrap","gutters","paddingHorizontal","spacing","sizeMap","small","height","medium","large","Toolbar","props","disableGutters","size","style","otherProps","styles","undefined"],"sources":["Toolbar.tsx"],"sourcesContent":["import React from 'react';\nimport type { FountainUiStyle, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Row from '../Row';\nimport { css, useTheme } from '../styles';\nimport BackButton from './BackButton';\nimport type ToolbarProps from './ToolbarProps';\nimport type { ToolbarSize } from './ToolbarProps';\n\ntype ToolbarStyles = NamedStylesStringUnion<'root' | 'gutters'>;\n\nconst useStyles: UseStyles<ToolbarStyles> = function (): ToolbarStyles {\n const theme = useTheme();\n\n return {\n root: {\n alignItems: 'center',\n flexWrap: 'nowrap',\n },\n gutters: {\n paddingHorizontal: theme.spacing(4),\n },\n };\n};\n\nconst sizeMap: Record<ToolbarSize, FountainUiStyle> = {\n small: { height: 48 },\n medium: { height: 50 },\n large: { height: 56 },\n};\n\nconst Toolbar = (props: ToolbarProps) => {\n const {\n disableGutters = false,\n size = 'medium',\n style,\n ...otherProps\n } = props;\n\n const styles = useStyles();\n\n return (\n <Row\n style={css([\n styles.root,\n !disableGutters ? styles.gutters : undefined,\n sizeMap[size],\n style,\n ])}\n {...otherProps}\n />\n );\n};\n\nToolbar.BackButton = BackButton;\n\nexport default Toolbar;\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAOC,GAAP,MAAgB,QAAhB;AACA,SAASC,GAAT,EAAcC,QAAd,QAA8B,WAA9B;AACA,OAAOC,UAAP,MAAuB,cAAvB;;AAMA,MAAMC,SAAmC,GAAG,YAA2B;EACnE,MAAMC,KAAK,GAAGH,QAAQ,EAAtB;EAEA,OAAO;IACHI,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,QAAQ,EAAE;IAFR,CADH;IAKHC,OAAO,EAAE;MACLC,iBAAiB,EAAEL,KAAK,CAACM,OAAN,CAAc,CAAd;IADd;EALN,CAAP;AASH,CAZD;;AAcA,MAAMC,OAA6C,GAAG;EAClDC,KAAK,EAAE;IAAEC,MAAM,EAAE;EAAV,CAD2C;EAElDC,MAAM,EAAE;IAAED,MAAM,EAAE;EAAV,CAF0C;EAGlDE,KAAK,EAAE;IAAEF,MAAM,EAAE;EAAV;AAH2C,CAAtD;;AAMA,MAAMG,OAAO,GAAIC,KAAD,IAAyB;EACrC,MAAM;IACFC,cAAc,GAAG,KADf;IAEFC,IAAI,GAAG,QAFL;IAGFC,KAHE;IAIF,GAAGC;EAJD,IAKFJ,KALJ;EAOA,MAAMK,MAAM,GAAGnB,SAAS,EAAxB;EAEA,oBACI,oBAAC,GAAD;IACI,KAAK,EAAEH,GAAG,CAAC,CACPsB,MAAM,CAACjB,IADA,EAEP,CAACa,cAAD,GAAkBI,MAAM,CAACd,OAAzB,GAAmCe,SAF5B,EAGPZ,OAAO,CAACQ,IAAD,CAHA,EAIPC,KAJO,CAAD;EADd,GAOQC,UAPR,EADJ;AAWH,CArBD;;AAuBAL,OAAO,CAACd,UAAR,GAAqBA,UAArB;AAEA,eAAec,OAAf"}
|
|
@@ -2,6 +2,8 @@ import React from 'react';
|
|
|
2
2
|
import { Path } from 'react-native-svg';
|
|
3
3
|
import { createSvgIcon } from '../../utils';
|
|
4
4
|
export default createSvgIcon( /*#__PURE__*/React.createElement(Path, {
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
fillRule: "evenodd",
|
|
6
|
+
clipRule: "evenodd",
|
|
7
|
+
d: "M0 12C3.16267e-09 11.7348 0.105357 11.4804 0.292893 11.2929L6.29289 5.29289C6.68342 4.90237 7.31658 4.90237 7.70711 5.29289C8.09763 5.68342 8.09763 6.31658 7.70711 6.70711L2.41421 12L7.70711 17.2929C8.09763 17.6834 8.09763 18.3166 7.70711 18.7071C7.31658 19.0976 6.68342 19.0976 6.29289 18.7071L0.292893 12.7071C0.105357 12.5196 -3.16267e-09 12.2652 0 12Z"
|
|
8
|
+
}), 'ChevronLeft', '0 0 8 24');
|
|
7
9
|
//# sourceMappingURL=ChevronLeft.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Path","createSvgIcon"],"sources":["ChevronLeft.tsx"],"sourcesContent":["import React from 'react';\nimport { Path } from 'react-native-svg';\nimport { createSvgIcon } from '../../utils';\n\nexport default createSvgIcon(\n <Path\n d=\"
|
|
1
|
+
{"version":3,"names":["React","Path","createSvgIcon"],"sources":["ChevronLeft.tsx"],"sourcesContent":["import React from 'react';\nimport { Path } from 'react-native-svg';\nimport { createSvgIcon } from '../../utils';\n\nexport default createSvgIcon(\n <Path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M0 12C3.16267e-09 11.7348 0.105357 11.4804 0.292893 11.2929L6.29289 5.29289C6.68342 4.90237 7.31658 4.90237 7.70711 5.29289C8.09763 5.68342 8.09763 6.31658 7.70711 6.70711L2.41421 12L7.70711 17.2929C8.09763 17.6834 8.09763 18.3166 7.70711 18.7071C7.31658 19.0976 6.68342 19.0976 6.29289 18.7071L0.292893 12.7071C0.105357 12.5196 -3.16267e-09 12.2652 0 12Z\"\n />,\n 'ChevronLeft',\n '0 0 8 24',\n);\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,kBAArB;AACA,SAASC,aAAT,QAA8B,aAA9B;AAEA,eAAeA,aAAa,eACxB,oBAAC,IAAD;EACI,QAAQ,EAAC,SADb;EAEI,QAAQ,EAAC,SAFb;EAGI,CAAC,EAAC;AAHN,EADwB,EAMxB,aANwB,EAOxB,UAPwB,CAA5B"}
|
|
@@ -2,6 +2,8 @@ import React from 'react';
|
|
|
2
2
|
import { Path } from 'react-native-svg';
|
|
3
3
|
import { createSvgIcon } from '../../utils';
|
|
4
4
|
export default createSvgIcon( /*#__PURE__*/React.createElement(Path, {
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
fillRule: "evenodd",
|
|
6
|
+
clipRule: "evenodd",
|
|
7
|
+
d: "M8 12C8 12.2652 7.89464 12.5196 7.70711 12.7071L1.70711 18.7071C1.31658 19.0976 0.683417 19.0976 0.292892 18.7071C-0.0976309 18.3166 -0.0976309 17.6834 0.292893 17.2929L5.58579 12L0.292894 6.70711C-0.0976304 6.31658 -0.0976304 5.68342 0.292895 5.29289C0.683418 4.90237 1.31658 4.90237 1.70711 5.29289L7.70711 11.2929C7.89464 11.4804 8 11.7348 8 12Z"
|
|
8
|
+
}), 'ChevronRight', '0 0 8 24');
|
|
7
9
|
//# sourceMappingURL=ChevronRight.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Path","createSvgIcon"],"sources":["ChevronRight.tsx"],"sourcesContent":["import React from 'react';\nimport { Path } from 'react-native-svg';\nimport { createSvgIcon } from '../../utils';\n\nexport default createSvgIcon(\n <Path\n d=\"
|
|
1
|
+
{"version":3,"names":["React","Path","createSvgIcon"],"sources":["ChevronRight.tsx"],"sourcesContent":["import React from 'react';\nimport { Path } from 'react-native-svg';\nimport { createSvgIcon } from '../../utils';\n\nexport default createSvgIcon(\n <Path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M8 12C8 12.2652 7.89464 12.5196 7.70711 12.7071L1.70711 18.7071C1.31658 19.0976 0.683417 19.0976 0.292892 18.7071C-0.0976309 18.3166 -0.0976309 17.6834 0.292893 17.2929L5.58579 12L0.292894 6.70711C-0.0976304 6.31658 -0.0976304 5.68342 0.292895 5.29289C0.683418 4.90237 1.31658 4.90237 1.70711 5.29289L7.70711 11.2929C7.89464 11.4804 8 11.7348 8 12Z\"\n />,\n 'ChevronRight',\n '0 0 8 24',\n);\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,kBAArB;AACA,SAASC,aAAT,QAA8B,aAA9B;AAEA,eAAeA,aAAa,eACxB,oBAAC,IAAD;EACI,QAAQ,EAAC,SADb;EAEI,QAAQ,EAAC,SAFb;EAGI,CAAC,EAAC;AAHN,EADwB,EAMxB,cANwB,EAOxB,UAPwB,CAA5B"}
|