@fountain-ui/core 2.0.0-beta.85 → 2.0.0-beta.87
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/Radio/Radio.js +11 -3
- package/build/commonjs/Radio/Radio.js.map +1 -1
- package/build/commonjs/Radio/RadioProps.js.map +1 -1
- package/build/commonjs/Tab/Tab.js +24 -4
- package/build/commonjs/Tab/Tab.js.map +1 -1
- package/build/commonjs/Tab/TabProps.js.map +1 -1
- package/build/module/Radio/Radio.js +8 -3
- package/build/module/Radio/Radio.js.map +1 -1
- package/build/module/Radio/RadioProps.js.map +1 -1
- package/build/module/Tab/Tab.js +24 -4
- package/build/module/Tab/Tab.js.map +1 -1
- package/build/module/Tab/TabProps.js.map +1 -1
- package/build/typescript/Radio/RadioProps.d.ts +13 -0
- package/build/typescript/Tab/TabProps.d.ts +1 -1
- package/package.json +2 -2
- package/src/Radio/Radio.tsx +9 -4
- package/src/Radio/RadioProps.ts +16 -0
- package/src/Tab/Tab.tsx +21 -9
- package/src/Tab/TabProps.ts +2 -2
|
@@ -34,7 +34,10 @@ function Radio(props) {
|
|
|
34
34
|
const {
|
|
35
35
|
checked = false,
|
|
36
36
|
children,
|
|
37
|
+
checkedIcon: checkIconProp,
|
|
38
|
+
uncheckedIcon: uncheckedIconProp,
|
|
37
39
|
disabled = false,
|
|
40
|
+
iconPlacement = 'left',
|
|
38
41
|
onChange: onChangeProp,
|
|
39
42
|
style,
|
|
40
43
|
value,
|
|
@@ -53,21 +56,26 @@ function Radio(props) {
|
|
|
53
56
|
};
|
|
54
57
|
|
|
55
58
|
const isChecked = (context === null || context === void 0 ? void 0 : context.value) === value ?? checked;
|
|
56
|
-
|
|
59
|
+
|
|
60
|
+
const checkedIcon = checkIconProp ?? /*#__PURE__*/_react.default.createElement(_internal.RadioChecked, {
|
|
57
61
|
width: ICON_SIZE,
|
|
58
62
|
height: ICON_SIZE,
|
|
59
63
|
color: 'primary'
|
|
60
|
-
})
|
|
64
|
+
});
|
|
65
|
+
|
|
66
|
+
const uncheckedIcon = uncheckedIconProp ?? /*#__PURE__*/_react.default.createElement(_internal.Radio, {
|
|
61
67
|
width: ICON_SIZE,
|
|
62
68
|
height: ICON_SIZE,
|
|
63
69
|
color: 'tertiary'
|
|
64
70
|
});
|
|
71
|
+
|
|
72
|
+
const icon = isChecked ? checkedIcon : uncheckedIcon;
|
|
65
73
|
const rootStyle = (0, _styles.css)([styles.root, style]);
|
|
66
74
|
return /*#__PURE__*/_react.default.createElement(_ButtonBase.default, _extends({
|
|
67
75
|
disabled: disabled,
|
|
68
76
|
onPress: handlePress,
|
|
69
77
|
style: rootStyle
|
|
70
|
-
}, otherProps), icon, children ? children : null);
|
|
78
|
+
}, otherProps), iconPlacement === 'left' ? icon : null, children ? children : null, iconPlacement === 'right' ? icon : null);
|
|
71
79
|
}
|
|
72
80
|
|
|
73
81
|
;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["ICON_SIZE","useStyles","root","alignItems","flexDirection","Radio","props","checked","children","disabled","onChange","onChangeProp","style","value","otherProps","styles","context","React","useContext","RadioContext","handlePress","isChecked","icon","rootStyle","css"],"sources":["Radio.tsx"],"sourcesContent":["import React from 'react';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase';\nimport { Radio as RadioIcon, RadioChecked as RadioCheckedIcon } from '../internal';\nimport { css } from '../styles';\nimport { RadioContext } from '../RadioGroup/RadioContextProvider';\nimport type RadioProps from './RadioProps';\n\ntype RadioStyles = NamedStylesStringUnion<'root'>;\n\nconst ICON_SIZE = 20;\n\nconst useStyles: UseStyles<RadioStyles> = function (): RadioStyles {\n return {\n root: {\n alignItems: 'center',\n flexDirection: 'row',\n },\n };\n};\n\nexport default function Radio(props: RadioProps) {\n const {\n checked = false,\n children,\n disabled = false,\n onChange: onChangeProp,\n style,\n value,\n ...otherProps\n } = props;\n\n const styles = useStyles();\n\n const context = React.useContext(RadioContext);\n\n const handlePress = () => {\n const onChange = context?.onChange ?? onChangeProp;\n if (onChange) {\n onChange(value);\n }\n };\n\n const isChecked = context?.value === value ?? checked;\n\n const
|
|
1
|
+
{"version":3,"names":["ICON_SIZE","useStyles","root","alignItems","flexDirection","Radio","props","checked","children","checkedIcon","checkIconProp","uncheckedIcon","uncheckedIconProp","disabled","iconPlacement","onChange","onChangeProp","style","value","otherProps","styles","context","React","useContext","RadioContext","handlePress","isChecked","icon","rootStyle","css"],"sources":["Radio.tsx"],"sourcesContent":["import React from 'react';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase';\nimport { Radio as RadioIcon, RadioChecked as RadioCheckedIcon } from '../internal';\nimport { css } from '../styles';\nimport { RadioContext } from '../RadioGroup/RadioContextProvider';\nimport type RadioProps from './RadioProps';\n\ntype RadioStyles = NamedStylesStringUnion<'root'>;\n\nconst ICON_SIZE = 20;\n\nconst useStyles: UseStyles<RadioStyles> = function (): RadioStyles {\n return {\n root: {\n alignItems: 'center',\n flexDirection: 'row',\n },\n };\n};\n\nexport default function Radio(props: RadioProps) {\n const {\n checked = false,\n children,\n checkedIcon: checkIconProp,\n uncheckedIcon: uncheckedIconProp,\n disabled = false,\n iconPlacement = 'left',\n onChange: onChangeProp,\n style,\n value,\n ...otherProps\n } = props;\n\n const styles = useStyles();\n\n const context = React.useContext(RadioContext);\n\n const handlePress = () => {\n const onChange = context?.onChange ?? onChangeProp;\n if (onChange) {\n onChange(value);\n }\n };\n\n const isChecked = context?.value === value ?? checked;\n\n const checkedIcon = checkIconProp ?? <RadioCheckedIcon width={ICON_SIZE} height={ICON_SIZE} color={'primary'}/>;\n const uncheckedIcon = uncheckedIconProp ?? <RadioIcon width={ICON_SIZE} height={ICON_SIZE} color={'tertiary'}/>;\n const icon = isChecked ? checkedIcon : uncheckedIcon;\n\n const rootStyle = css([\n styles.root,\n style,\n ]);\n\n return (\n <ButtonBase\n disabled={disabled}\n onPress={handlePress}\n style={rootStyle}\n {...otherProps}\n >\n {iconPlacement === 'left' ? icon : null}\n\n {children ? children : null}\n\n {iconPlacement === 'right' ? icon : null}\n </ButtonBase>\n );\n};\n"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;;;;;AAKA,MAAMA,SAAS,GAAG,EAAlB;;AAEA,MAAMC,SAAiC,GAAG,YAAyB;EAC/D,OAAO;IACHC,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,aAAa,EAAE;IAFb;EADH,CAAP;AAMH,CAPD;;AASe,SAASC,KAAT,CAAeC,KAAf,EAAkC;EAC7C,MAAM;IACFC,OAAO,GAAG,KADR;IAEFC,QAFE;IAGFC,WAAW,EAAEC,aAHX;IAIFC,aAAa,EAAEC,iBAJb;IAKFC,QAAQ,GAAG,KALT;IAMFC,aAAa,GAAG,MANd;IAOFC,QAAQ,EAAEC,YAPR;IAQFC,KARE;IASFC,KATE;IAUF,GAAGC;EAVD,IAWFb,KAXJ;EAaA,MAAMc,MAAM,GAAGnB,SAAS,EAAxB;;EAEA,MAAMoB,OAAO,GAAGC,cAAA,CAAMC,UAAN,CAAiBC,kCAAjB,CAAhB;;EAEA,MAAMC,WAAW,GAAG,MAAM;IACtB,MAAMV,QAAQ,GAAG,CAAAM,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO,CAAEN,QAAT,KAAqBC,YAAtC;;IACA,IAAID,QAAJ,EAAc;MACVA,QAAQ,CAACG,KAAD,CAAR;IACH;EACJ,CALD;;EAOA,MAAMQ,SAAS,GAAG,CAAAL,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO,CAAEH,KAAT,MAAmBA,KAAnB,IAA4BX,OAA9C;;EAEA,MAAME,WAAW,GAAGC,aAAa,iBAAI,6BAAC,sBAAD;IAAkB,KAAK,EAAEV,SAAzB;IAAoC,MAAM,EAAEA,SAA5C;IAAuD,KAAK,EAAE;EAA9D,EAArC;;EACA,MAAMW,aAAa,GAAGC,iBAAiB,iBAAI,6BAAC,eAAD;IAAW,KAAK,EAAEZ,SAAlB;IAA6B,MAAM,EAAEA,SAArC;IAAgD,KAAK,EAAE;EAAvD,EAA3C;;EACA,MAAM2B,IAAI,GAAGD,SAAS,GAAGjB,WAAH,GAAiBE,aAAvC;EAEA,MAAMiB,SAAS,GAAG,IAAAC,WAAA,EAAI,CAClBT,MAAM,CAAClB,IADW,EAElBe,KAFkB,CAAJ,CAAlB;EAKA,oBACI,6BAAC,mBAAD;IACI,QAAQ,EAAEJ,QADd;IAEI,OAAO,EAAEY,WAFb;IAGI,KAAK,EAAEG;EAHX,GAIQT,UAJR,GAMKL,aAAa,KAAK,MAAlB,GAA2Ba,IAA3B,GAAkC,IANvC,EAQKnB,QAAQ,GAAGA,QAAH,GAAc,IAR3B,EAUKM,aAAa,KAAK,OAAlB,GAA4Ba,IAA5B,GAAmC,IAVxC,CADJ;AAcH;;AAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["RadioProps.ts"],"sourcesContent":["import React from 'react';\nimport type { OverridableComponentProps } from '../types';\nimport type { ButtonBaseProps } from '../ButtonBase';\n\ntype BaseProps = Omit<ButtonBaseProps, 'onPress' | 'children'>;\n\nexport default interface RadioProps extends OverridableComponentProps<BaseProps, {\n /**\n * If `true`, the component is checked.\n * @default false\n */\n checked?: boolean;\n\n /**\n * Content which is sharing pressable next to radio.\n */\n children?: React.ReactNode;\n\n /**\n * If `true`, the radio is disabled.\n * @default false\n */\n disabled?: boolean;\n\n /**\n * Callback fired when the component is pressed.\n */\n onChange?: (newValue: string) => void;\n\n /**\n * Value of the component.\n */\n value: string;\n}> {}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"names":[],"sources":["RadioProps.ts"],"sourcesContent":["import React from 'react';\nimport type { OverridableComponentProps } from '../types';\nimport type { ButtonBaseProps } from '../ButtonBase';\n\ntype BaseProps = Omit<ButtonBaseProps, 'onPress' | 'children'>;\n\nexport default interface RadioProps extends OverridableComponentProps<BaseProps, {\n /**\n * If `true`, the component is checked.\n * @default false\n */\n checked?: boolean;\n\n /**\n * Content which is sharing pressable next to radio.\n */\n children?: React.ReactNode;\n\n /**\n * If `true`, the radio is disabled.\n * @default false\n */\n disabled?: boolean;\n\n /**\n * Callback fired when the component is pressed.\n */\n onChange?: (newValue: string) => void;\n\n /**\n * Value of the component.\n */\n value: string;\n\n /**\n * Determines the placement of the icon relative to the children.\n * @default 'left'\n */\n iconPlacement?: 'right' | 'left';\n\n /**\n * Custom icon element to display when the radio is unchecked.\n */\n uncheckedIcon?: React.ReactNode;\n\n /**\n * Custom icon element to display when the radio is checked.\n */\n checkedIcon?: React.ReactNode;\n}> {}\n"],"mappings":""}
|
|
@@ -37,6 +37,9 @@ const styles = _styles.StyleSheet.create({
|
|
|
37
37
|
},
|
|
38
38
|
filledInner: {
|
|
39
39
|
justifyContent: 'center'
|
|
40
|
+
},
|
|
41
|
+
tertiary: {
|
|
42
|
+
minHeight: 44
|
|
40
43
|
}
|
|
41
44
|
});
|
|
42
45
|
|
|
@@ -66,12 +69,29 @@ function Tab(props) {
|
|
|
66
69
|
paddingHorizontal: theme.spacing(3),
|
|
67
70
|
paddingVertical: theme.spacing(1.5)
|
|
68
71
|
};
|
|
69
|
-
const tabBaseStyle = (0, _styles.css)([styles.root, variant === 'bottom-navigation' && styles.bottomNavigation, variant === 'contained' && containedStyle, style]);
|
|
72
|
+
const tabBaseStyle = (0, _styles.css)([styles.root, variant === 'bottom-navigation' && styles.bottomNavigation, variant === 'contained' && containedStyle, variant === 'tertiary' && styles.tertiary, style]);
|
|
70
73
|
const tabInnerStyle = (0, _styles.css)([styles.root, styles.filledInner]);
|
|
71
74
|
const fontStyle = (0, _styles.createFontStyle)(theme, {
|
|
72
|
-
selector: typo =>
|
|
73
|
-
|
|
74
|
-
|
|
75
|
+
selector: typo => {
|
|
76
|
+
switch (variant) {
|
|
77
|
+
case 'primary':
|
|
78
|
+
return typo.h2;
|
|
79
|
+
|
|
80
|
+
case 'secondary':
|
|
81
|
+
return typo.button2;
|
|
82
|
+
|
|
83
|
+
case 'tertiary':
|
|
84
|
+
return typo.h3;
|
|
85
|
+
|
|
86
|
+
case 'contained':
|
|
87
|
+
return selected ? { ...typo.subtitle2,
|
|
88
|
+
fontWeight: typo.fontWeight.medium
|
|
89
|
+
} : typo.body2;
|
|
90
|
+
|
|
91
|
+
default:
|
|
92
|
+
return typo.flag;
|
|
93
|
+
}
|
|
94
|
+
},
|
|
75
95
|
color
|
|
76
96
|
});
|
|
77
97
|
const pressEffect = selected ? 'none' : 'opacity';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["styles","StyleSheet","create","root","Platform","OS","minWidth","minHeight","bottomNavigation","filledInner","justifyContent","Tab","props","badgeVisible","children","enableIndicator","icon","defaultIcon","indicatorColor","indicatorSize","selected","selectedIcon","variant","style","onTabInnerLayout","otherProps","theme","useTheme","vertical","color","palette","text","primary","secondary","hint","containedStyle","borderColor","main","border","borderRadius","shape","roundnessExtra","borderWidth","paddingHorizontal","spacing","paddingVertical","tabBaseStyle","css","tabInnerStyle","fontStyle","createFontStyle","selector","typo","h2","button2","subtitle2","fontWeight","medium","body2","flag","pressEffect","iconElement","cloneElement","fill","tabElement","React","tabIndicator"],"sources":["Tab.tsx"],"sourcesContent":["import React, { cloneElement } from 'react';\nimport { Platform, Text, View } from 'react-native';\nimport Badge from '../Badge';\nimport TabBase from '../TabBase';\nimport
|
|
1
|
+
{"version":3,"names":["styles","StyleSheet","create","root","Platform","OS","minWidth","minHeight","bottomNavigation","filledInner","justifyContent","tertiary","Tab","props","badgeVisible","children","enableIndicator","icon","defaultIcon","indicatorColor","indicatorSize","selected","selectedIcon","variant","style","onTabInnerLayout","otherProps","theme","useTheme","vertical","color","palette","text","primary","secondary","hint","containedStyle","borderColor","main","border","borderRadius","shape","roundnessExtra","borderWidth","paddingHorizontal","spacing","paddingVertical","tabBaseStyle","css","tabInnerStyle","fontStyle","createFontStyle","selector","typo","h2","button2","h3","subtitle2","fontWeight","medium","body2","flag","pressEffect","iconElement","cloneElement","fill","tabElement","React","tabIndicator"],"sources":["Tab.tsx"],"sourcesContent":["import React, { cloneElement } from 'react';\nimport { Platform, Text, View } from 'react-native';\nimport Badge from '../Badge';\nimport TabBase from '../TabBase';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport type TabProps from './TabProps';\nimport TabIndicator from './TabIndicator';\n\nconst styles = StyleSheet.create({\n root: {\n // TODO: Remove redundant platform checking\n ...(Platform.OS === 'web' ? { minWidth: 'auto' } : {}),\n minHeight: 40,\n },\n bottomNavigation: {\n minHeight: 56,\n },\n filledInner: {\n justifyContent: 'center',\n },\n tertiary: {\n minHeight: 44,\n }\n});\n\nexport default function Tab(props: TabProps) {\n const {\n badgeVisible = false,\n children,\n enableIndicator = false,\n icon: defaultIcon,\n indicatorColor = 'primary',\n indicatorSize = 'full',\n selected = false,\n selectedIcon,\n variant = 'primary',\n style,\n onTabInnerLayout,\n ...otherProps\n } = props;\n\n const theme = useTheme();\n\n const vertical = variant === 'bottom-navigation';\n\n const color = selected\n ? theme.palette.text.primary\n : variant === 'contained'\n ? theme.palette.text.secondary\n : theme.palette.text.hint;\n\n const containedStyle = {\n borderColor: selected ? theme.palette.primary.main : theme.palette.border,\n borderRadius: theme.shape.roundnessExtra,\n borderWidth: selected ? 1.5 : 1,\n minHeight: 'auto',\n paddingHorizontal: theme.spacing(3),\n paddingVertical: theme.spacing(1.5),\n };\n\n const tabBaseStyle = css([\n styles.root,\n variant === 'bottom-navigation' && styles.bottomNavigation,\n variant === 'contained' && containedStyle,\n variant === 'tertiary' && styles.tertiary,\n style,\n ]);\n\n const tabInnerStyle = css([\n styles.root,\n styles.filledInner,\n ]);\n\n const fontStyle = createFontStyle(theme, {\n selector: (typo) => {\n switch (variant) {\n case 'primary':\n return typo.h2;\n case 'secondary':\n return typo.button2;\n case 'tertiary':\n return typo.h3;\n case 'contained':\n return selected\n ? { ...typo.subtitle2, fontWeight: typo.fontWeight.medium }\n : typo.body2;\n default:\n return typo.flag;\n }\n },\n color,\n });\n const pressEffect = selected ? 'none' : 'opacity';\n\n const icon = selected ? (selectedIcon || defaultIcon) : defaultIcon;\n const iconElement = icon ? cloneElement(icon, { fill: color }) : null;\n\n const tabElement = typeof children !== 'string' ? (\n React.cloneElement(children, {\n selected,\n })\n ) : (\n <React.Fragment>\n <Badge\n children={iconElement}\n invisible={!badgeVisible}\n />\n\n <Text\n children={children}\n style={css(fontStyle)}\n />\n </React.Fragment>\n );\n const tabIndicator = (enableIndicator && selected)\n ? <TabIndicator indicatorSize={indicatorSize} color={indicatorColor}/>\n : null;\n\n return (\n <TabBase\n pressEffect={pressEffect}\n style={tabBaseStyle}\n vertical={vertical}\n {...otherProps}\n >\n {indicatorSize === 'fit-content' ? (\n <View onLayout={onTabInnerLayout} style={tabInnerStyle}>\n {tabElement}\n\n {tabIndicator}\n </View>\n ) : (\n <React.Fragment>\n {tabElement}\n\n {tabIndicator}\n </React.Fragment>\n )}\n </TabBase>\n );\n};\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["TabProps.ts"],"sourcesContent":["import React from 'react';\nimport type { LayoutChangeEvent } from 'react-native';\nimport type { TabBaseProps } from '../TabBase';\nimport type { OverridableComponentProps } from '../types';\n\nexport type TabVariant = 'primary' | 'secondary' | 'bottom-navigation' | 'contained';\nexport type TabIndicatorColor = 'primary' | 'secondary'
|
|
1
|
+
{"version":3,"names":[],"sources":["TabProps.ts"],"sourcesContent":["import React from 'react';\nimport type { LayoutChangeEvent } from 'react-native';\nimport type { TabBaseProps } from '../TabBase';\nimport type { OverridableComponentProps } from '../types';\n\nexport type TabVariant = 'primary' | 'secondary' | 'tertiary' | 'bottom-navigation' | 'contained';\nexport type TabIndicatorColor = 'primary' | 'secondary';\nexport type TabIndicatorSize = 'full' | 'fit-content';\n\nexport default interface TabProps extends OverridableComponentProps<TabBaseProps, {\n /**\n * If `true`, the badge is visible.\n * @default false\n */\n badgeVisible?: boolean;\n\n /**\n * The label of the Tab.\n */\n children: string | React.ReactElement;\n\n /**\n * If `true`, the indicator is enabled.\n * @default false\n */\n enableIndicator?: boolean;\n\n /**\n * If `true`, the component is selected.\n * @default false\n */\n selected?: boolean;\n\n /**\n * Element placed before the children.\n */\n icon?: React.ReactElement;\n\n /**\n * Tab indicator color\n * @default 'primary'\n */\n indicatorColor?: TabIndicatorColor;\n\n /**\n * The size of tab indicator.\n * 'full' adjusts the indicator to the size of the Tab,\n * while 'fit-content' adjusts the indicator to the size of the content inside the Tab.\n * @default 'full'\n */\n indicatorSize?: TabIndicatorSize;\n\n /**\n * If supplied, use this icon on selected state.\n */\n selectedIcon?: React.ReactElement;\n\n /**\n * The variant to use.\n * @default 'primary'\n */\n variant?: TabVariant;\n\n /**\n * Function to be passed to the child component's onLayout prop.\n */\n onTabInnerLayout?: (event: LayoutChangeEvent) => void;\n}> {}\n"],"mappings":""}
|
|
@@ -20,7 +20,10 @@ export default function Radio(props) {
|
|
|
20
20
|
const {
|
|
21
21
|
checked = false,
|
|
22
22
|
children,
|
|
23
|
+
checkedIcon: checkIconProp,
|
|
24
|
+
uncheckedIcon: uncheckedIconProp,
|
|
23
25
|
disabled = false,
|
|
26
|
+
iconPlacement = 'left',
|
|
24
27
|
onChange: onChangeProp,
|
|
25
28
|
style,
|
|
26
29
|
value,
|
|
@@ -38,21 +41,23 @@ export default function Radio(props) {
|
|
|
38
41
|
};
|
|
39
42
|
|
|
40
43
|
const isChecked = (context === null || context === void 0 ? void 0 : context.value) === value ?? checked;
|
|
41
|
-
const
|
|
44
|
+
const checkedIcon = checkIconProp ?? /*#__PURE__*/React.createElement(RadioCheckedIcon, {
|
|
42
45
|
width: ICON_SIZE,
|
|
43
46
|
height: ICON_SIZE,
|
|
44
47
|
color: 'primary'
|
|
45
|
-
})
|
|
48
|
+
});
|
|
49
|
+
const uncheckedIcon = uncheckedIconProp ?? /*#__PURE__*/React.createElement(RadioIcon, {
|
|
46
50
|
width: ICON_SIZE,
|
|
47
51
|
height: ICON_SIZE,
|
|
48
52
|
color: 'tertiary'
|
|
49
53
|
});
|
|
54
|
+
const icon = isChecked ? checkedIcon : uncheckedIcon;
|
|
50
55
|
const rootStyle = css([styles.root, style]);
|
|
51
56
|
return /*#__PURE__*/React.createElement(ButtonBase, _extends({
|
|
52
57
|
disabled: disabled,
|
|
53
58
|
onPress: handlePress,
|
|
54
59
|
style: rootStyle
|
|
55
|
-
}, otherProps), icon, children ? children : null);
|
|
60
|
+
}, otherProps), iconPlacement === 'left' ? icon : null, children ? children : null, iconPlacement === 'right' ? icon : null);
|
|
56
61
|
}
|
|
57
62
|
;
|
|
58
63
|
//# sourceMappingURL=Radio.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","ButtonBase","Radio","RadioIcon","RadioChecked","RadioCheckedIcon","css","RadioContext","ICON_SIZE","useStyles","root","alignItems","flexDirection","props","checked","children","disabled","onChange","onChangeProp","style","value","otherProps","styles","context","useContext","handlePress","isChecked","icon","rootStyle"],"sources":["Radio.tsx"],"sourcesContent":["import React from 'react';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase';\nimport { Radio as RadioIcon, RadioChecked as RadioCheckedIcon } from '../internal';\nimport { css } from '../styles';\nimport { RadioContext } from '../RadioGroup/RadioContextProvider';\nimport type RadioProps from './RadioProps';\n\ntype RadioStyles = NamedStylesStringUnion<'root'>;\n\nconst ICON_SIZE = 20;\n\nconst useStyles: UseStyles<RadioStyles> = function (): RadioStyles {\n return {\n root: {\n alignItems: 'center',\n flexDirection: 'row',\n },\n };\n};\n\nexport default function Radio(props: RadioProps) {\n const {\n checked = false,\n children,\n disabled = false,\n onChange: onChangeProp,\n style,\n value,\n ...otherProps\n } = props;\n\n const styles = useStyles();\n\n const context = React.useContext(RadioContext);\n\n const handlePress = () => {\n const onChange = context?.onChange ?? onChangeProp;\n if (onChange) {\n onChange(value);\n }\n };\n\n const isChecked = context?.value === value ?? checked;\n\n const
|
|
1
|
+
{"version":3,"names":["React","ButtonBase","Radio","RadioIcon","RadioChecked","RadioCheckedIcon","css","RadioContext","ICON_SIZE","useStyles","root","alignItems","flexDirection","props","checked","children","checkedIcon","checkIconProp","uncheckedIcon","uncheckedIconProp","disabled","iconPlacement","onChange","onChangeProp","style","value","otherProps","styles","context","useContext","handlePress","isChecked","icon","rootStyle"],"sources":["Radio.tsx"],"sourcesContent":["import React from 'react';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase';\nimport { Radio as RadioIcon, RadioChecked as RadioCheckedIcon } from '../internal';\nimport { css } from '../styles';\nimport { RadioContext } from '../RadioGroup/RadioContextProvider';\nimport type RadioProps from './RadioProps';\n\ntype RadioStyles = NamedStylesStringUnion<'root'>;\n\nconst ICON_SIZE = 20;\n\nconst useStyles: UseStyles<RadioStyles> = function (): RadioStyles {\n return {\n root: {\n alignItems: 'center',\n flexDirection: 'row',\n },\n };\n};\n\nexport default function Radio(props: RadioProps) {\n const {\n checked = false,\n children,\n checkedIcon: checkIconProp,\n uncheckedIcon: uncheckedIconProp,\n disabled = false,\n iconPlacement = 'left',\n onChange: onChangeProp,\n style,\n value,\n ...otherProps\n } = props;\n\n const styles = useStyles();\n\n const context = React.useContext(RadioContext);\n\n const handlePress = () => {\n const onChange = context?.onChange ?? onChangeProp;\n if (onChange) {\n onChange(value);\n }\n };\n\n const isChecked = context?.value === value ?? checked;\n\n const checkedIcon = checkIconProp ?? <RadioCheckedIcon width={ICON_SIZE} height={ICON_SIZE} color={'primary'}/>;\n const uncheckedIcon = uncheckedIconProp ?? <RadioIcon width={ICON_SIZE} height={ICON_SIZE} color={'tertiary'}/>;\n const icon = isChecked ? checkedIcon : uncheckedIcon;\n\n const rootStyle = css([\n styles.root,\n style,\n ]);\n\n return (\n <ButtonBase\n disabled={disabled}\n onPress={handlePress}\n style={rootStyle}\n {...otherProps}\n >\n {iconPlacement === 'left' ? icon : null}\n\n {children ? children : null}\n\n {iconPlacement === 'right' ? icon : null}\n </ButtonBase>\n );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAOC,UAAP,MAAuB,eAAvB;AACA,SAASC,KAAK,IAAIC,SAAlB,EAA6BC,YAAY,IAAIC,gBAA7C,QAAqE,aAArE;AACA,SAASC,GAAT,QAAoB,WAApB;AACA,SAASC,YAAT,QAA6B,oCAA7B;AAKA,MAAMC,SAAS,GAAG,EAAlB;;AAEA,MAAMC,SAAiC,GAAG,YAAyB;EAC/D,OAAO;IACHC,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,aAAa,EAAE;IAFb;EADH,CAAP;AAMH,CAPD;;AASA,eAAe,SAASV,KAAT,CAAeW,KAAf,EAAkC;EAC7C,MAAM;IACFC,OAAO,GAAG,KADR;IAEFC,QAFE;IAGFC,WAAW,EAAEC,aAHX;IAIFC,aAAa,EAAEC,iBAJb;IAKFC,QAAQ,GAAG,KALT;IAMFC,aAAa,GAAG,MANd;IAOFC,QAAQ,EAAEC,YAPR;IAQFC,KARE;IASFC,KATE;IAUF,GAAGC;EAVD,IAWFb,KAXJ;EAaA,MAAMc,MAAM,GAAGlB,SAAS,EAAxB;EAEA,MAAMmB,OAAO,GAAG5B,KAAK,CAAC6B,UAAN,CAAiBtB,YAAjB,CAAhB;;EAEA,MAAMuB,WAAW,GAAG,MAAM;IACtB,MAAMR,QAAQ,GAAG,CAAAM,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO,CAAEN,QAAT,KAAqBC,YAAtC;;IACA,IAAID,QAAJ,EAAc;MACVA,QAAQ,CAACG,KAAD,CAAR;IACH;EACJ,CALD;;EAOA,MAAMM,SAAS,GAAG,CAAAH,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO,CAAEH,KAAT,MAAmBA,KAAnB,IAA4BX,OAA9C;EAEA,MAAME,WAAW,GAAGC,aAAa,iBAAI,oBAAC,gBAAD;IAAkB,KAAK,EAAET,SAAzB;IAAoC,MAAM,EAAEA,SAA5C;IAAuD,KAAK,EAAE;EAA9D,EAArC;EACA,MAAMU,aAAa,GAAGC,iBAAiB,iBAAI,oBAAC,SAAD;IAAW,KAAK,EAAEX,SAAlB;IAA6B,MAAM,EAAEA,SAArC;IAAgD,KAAK,EAAE;EAAvD,EAA3C;EACA,MAAMwB,IAAI,GAAGD,SAAS,GAAGf,WAAH,GAAiBE,aAAvC;EAEA,MAAMe,SAAS,GAAG3B,GAAG,CAAC,CAClBqB,MAAM,CAACjB,IADW,EAElBc,KAFkB,CAAD,CAArB;EAKA,oBACI,oBAAC,UAAD;IACI,QAAQ,EAAEJ,QADd;IAEI,OAAO,EAAEU,WAFb;IAGI,KAAK,EAAEG;EAHX,GAIQP,UAJR,GAMKL,aAAa,KAAK,MAAlB,GAA2BW,IAA3B,GAAkC,IANvC,EAQKjB,QAAQ,GAAGA,QAAH,GAAc,IAR3B,EAUKM,aAAa,KAAK,OAAlB,GAA4BW,IAA5B,GAAmC,IAVxC,CADJ;AAcH;AAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["RadioProps.ts"],"sourcesContent":["import React from 'react';\nimport type { OverridableComponentProps } from '../types';\nimport type { ButtonBaseProps } from '../ButtonBase';\n\ntype BaseProps = Omit<ButtonBaseProps, 'onPress' | 'children'>;\n\nexport default interface RadioProps extends OverridableComponentProps<BaseProps, {\n /**\n * If `true`, the component is checked.\n * @default false\n */\n checked?: boolean;\n\n /**\n * Content which is sharing pressable next to radio.\n */\n children?: React.ReactNode;\n\n /**\n * If `true`, the radio is disabled.\n * @default false\n */\n disabled?: boolean;\n\n /**\n * Callback fired when the component is pressed.\n */\n onChange?: (newValue: string) => void;\n\n /**\n * Value of the component.\n */\n value: string;\n}> {}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"names":[],"sources":["RadioProps.ts"],"sourcesContent":["import React from 'react';\nimport type { OverridableComponentProps } from '../types';\nimport type { ButtonBaseProps } from '../ButtonBase';\n\ntype BaseProps = Omit<ButtonBaseProps, 'onPress' | 'children'>;\n\nexport default interface RadioProps extends OverridableComponentProps<BaseProps, {\n /**\n * If `true`, the component is checked.\n * @default false\n */\n checked?: boolean;\n\n /**\n * Content which is sharing pressable next to radio.\n */\n children?: React.ReactNode;\n\n /**\n * If `true`, the radio is disabled.\n * @default false\n */\n disabled?: boolean;\n\n /**\n * Callback fired when the component is pressed.\n */\n onChange?: (newValue: string) => void;\n\n /**\n * Value of the component.\n */\n value: string;\n\n /**\n * Determines the placement of the icon relative to the children.\n * @default 'left'\n */\n iconPlacement?: 'right' | 'left';\n\n /**\n * Custom icon element to display when the radio is unchecked.\n */\n uncheckedIcon?: React.ReactNode;\n\n /**\n * Custom icon element to display when the radio is checked.\n */\n checkedIcon?: React.ReactNode;\n}> {}\n"],"mappings":""}
|
package/build/module/Tab/Tab.js
CHANGED
|
@@ -18,6 +18,9 @@ const styles = StyleSheet.create({
|
|
|
18
18
|
},
|
|
19
19
|
filledInner: {
|
|
20
20
|
justifyContent: 'center'
|
|
21
|
+
},
|
|
22
|
+
tertiary: {
|
|
23
|
+
minHeight: 44
|
|
21
24
|
}
|
|
22
25
|
});
|
|
23
26
|
export default function Tab(props) {
|
|
@@ -46,12 +49,29 @@ export default function Tab(props) {
|
|
|
46
49
|
paddingHorizontal: theme.spacing(3),
|
|
47
50
|
paddingVertical: theme.spacing(1.5)
|
|
48
51
|
};
|
|
49
|
-
const tabBaseStyle = css([styles.root, variant === 'bottom-navigation' && styles.bottomNavigation, variant === 'contained' && containedStyle, style]);
|
|
52
|
+
const tabBaseStyle = css([styles.root, variant === 'bottom-navigation' && styles.bottomNavigation, variant === 'contained' && containedStyle, variant === 'tertiary' && styles.tertiary, style]);
|
|
50
53
|
const tabInnerStyle = css([styles.root, styles.filledInner]);
|
|
51
54
|
const fontStyle = createFontStyle(theme, {
|
|
52
|
-
selector: typo =>
|
|
53
|
-
|
|
54
|
-
|
|
55
|
+
selector: typo => {
|
|
56
|
+
switch (variant) {
|
|
57
|
+
case 'primary':
|
|
58
|
+
return typo.h2;
|
|
59
|
+
|
|
60
|
+
case 'secondary':
|
|
61
|
+
return typo.button2;
|
|
62
|
+
|
|
63
|
+
case 'tertiary':
|
|
64
|
+
return typo.h3;
|
|
65
|
+
|
|
66
|
+
case 'contained':
|
|
67
|
+
return selected ? { ...typo.subtitle2,
|
|
68
|
+
fontWeight: typo.fontWeight.medium
|
|
69
|
+
} : typo.body2;
|
|
70
|
+
|
|
71
|
+
default:
|
|
72
|
+
return typo.flag;
|
|
73
|
+
}
|
|
74
|
+
},
|
|
55
75
|
color
|
|
56
76
|
});
|
|
57
77
|
const pressEffect = selected ? 'none' : 'opacity';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","cloneElement","Platform","Text","View","Badge","TabBase","createFontStyle","css","StyleSheet","useTheme","TabIndicator","styles","create","root","OS","minWidth","minHeight","bottomNavigation","filledInner","justifyContent","Tab","props","badgeVisible","children","enableIndicator","icon","defaultIcon","indicatorColor","indicatorSize","selected","selectedIcon","variant","style","onTabInnerLayout","otherProps","theme","vertical","color","palette","text","primary","secondary","hint","containedStyle","borderColor","main","border","borderRadius","shape","roundnessExtra","borderWidth","paddingHorizontal","spacing","paddingVertical","tabBaseStyle","tabInnerStyle","fontStyle","selector","typo","h2","button2","subtitle2","fontWeight","medium","body2","flag","pressEffect","iconElement","fill","tabElement","tabIndicator"],"sources":["Tab.tsx"],"sourcesContent":["import React, { cloneElement } from 'react';\nimport { Platform, Text, View } from 'react-native';\nimport Badge from '../Badge';\nimport TabBase from '../TabBase';\nimport
|
|
1
|
+
{"version":3,"names":["React","cloneElement","Platform","Text","View","Badge","TabBase","createFontStyle","css","StyleSheet","useTheme","TabIndicator","styles","create","root","OS","minWidth","minHeight","bottomNavigation","filledInner","justifyContent","tertiary","Tab","props","badgeVisible","children","enableIndicator","icon","defaultIcon","indicatorColor","indicatorSize","selected","selectedIcon","variant","style","onTabInnerLayout","otherProps","theme","vertical","color","palette","text","primary","secondary","hint","containedStyle","borderColor","main","border","borderRadius","shape","roundnessExtra","borderWidth","paddingHorizontal","spacing","paddingVertical","tabBaseStyle","tabInnerStyle","fontStyle","selector","typo","h2","button2","h3","subtitle2","fontWeight","medium","body2","flag","pressEffect","iconElement","fill","tabElement","tabIndicator"],"sources":["Tab.tsx"],"sourcesContent":["import React, { cloneElement } from 'react';\nimport { Platform, Text, View } from 'react-native';\nimport Badge from '../Badge';\nimport TabBase from '../TabBase';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport type TabProps from './TabProps';\nimport TabIndicator from './TabIndicator';\n\nconst styles = StyleSheet.create({\n root: {\n // TODO: Remove redundant platform checking\n ...(Platform.OS === 'web' ? { minWidth: 'auto' } : {}),\n minHeight: 40,\n },\n bottomNavigation: {\n minHeight: 56,\n },\n filledInner: {\n justifyContent: 'center',\n },\n tertiary: {\n minHeight: 44,\n }\n});\n\nexport default function Tab(props: TabProps) {\n const {\n badgeVisible = false,\n children,\n enableIndicator = false,\n icon: defaultIcon,\n indicatorColor = 'primary',\n indicatorSize = 'full',\n selected = false,\n selectedIcon,\n variant = 'primary',\n style,\n onTabInnerLayout,\n ...otherProps\n } = props;\n\n const theme = useTheme();\n\n const vertical = variant === 'bottom-navigation';\n\n const color = selected\n ? theme.palette.text.primary\n : variant === 'contained'\n ? theme.palette.text.secondary\n : theme.palette.text.hint;\n\n const containedStyle = {\n borderColor: selected ? theme.palette.primary.main : theme.palette.border,\n borderRadius: theme.shape.roundnessExtra,\n borderWidth: selected ? 1.5 : 1,\n minHeight: 'auto',\n paddingHorizontal: theme.spacing(3),\n paddingVertical: theme.spacing(1.5),\n };\n\n const tabBaseStyle = css([\n styles.root,\n variant === 'bottom-navigation' && styles.bottomNavigation,\n variant === 'contained' && containedStyle,\n variant === 'tertiary' && styles.tertiary,\n style,\n ]);\n\n const tabInnerStyle = css([\n styles.root,\n styles.filledInner,\n ]);\n\n const fontStyle = createFontStyle(theme, {\n selector: (typo) => {\n switch (variant) {\n case 'primary':\n return typo.h2;\n case 'secondary':\n return typo.button2;\n case 'tertiary':\n return typo.h3;\n case 'contained':\n return selected\n ? { ...typo.subtitle2, fontWeight: typo.fontWeight.medium }\n : typo.body2;\n default:\n return typo.flag;\n }\n },\n color,\n });\n const pressEffect = selected ? 'none' : 'opacity';\n\n const icon = selected ? (selectedIcon || defaultIcon) : defaultIcon;\n const iconElement = icon ? cloneElement(icon, { fill: color }) : null;\n\n const tabElement = typeof children !== 'string' ? (\n React.cloneElement(children, {\n selected,\n })\n ) : (\n <React.Fragment>\n <Badge\n children={iconElement}\n invisible={!badgeVisible}\n />\n\n <Text\n children={children}\n style={css(fontStyle)}\n />\n </React.Fragment>\n );\n const tabIndicator = (enableIndicator && selected)\n ? <TabIndicator indicatorSize={indicatorSize} color={indicatorColor}/>\n : null;\n\n return (\n <TabBase\n pressEffect={pressEffect}\n style={tabBaseStyle}\n vertical={vertical}\n {...otherProps}\n >\n {indicatorSize === 'fit-content' ? (\n <View onLayout={onTabInnerLayout} style={tabInnerStyle}>\n {tabElement}\n\n {tabIndicator}\n </View>\n ) : (\n <React.Fragment>\n {tabElement}\n\n {tabIndicator}\n </React.Fragment>\n )}\n </TabBase>\n );\n};\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["TabProps.ts"],"sourcesContent":["import React from 'react';\nimport type { LayoutChangeEvent } from 'react-native';\nimport type { TabBaseProps } from '../TabBase';\nimport type { OverridableComponentProps } from '../types';\n\nexport type TabVariant = 'primary' | 'secondary' | 'bottom-navigation' | 'contained';\nexport type TabIndicatorColor = 'primary' | 'secondary'
|
|
1
|
+
{"version":3,"names":[],"sources":["TabProps.ts"],"sourcesContent":["import React from 'react';\nimport type { LayoutChangeEvent } from 'react-native';\nimport type { TabBaseProps } from '../TabBase';\nimport type { OverridableComponentProps } from '../types';\n\nexport type TabVariant = 'primary' | 'secondary' | 'tertiary' | 'bottom-navigation' | 'contained';\nexport type TabIndicatorColor = 'primary' | 'secondary';\nexport type TabIndicatorSize = 'full' | 'fit-content';\n\nexport default interface TabProps extends OverridableComponentProps<TabBaseProps, {\n /**\n * If `true`, the badge is visible.\n * @default false\n */\n badgeVisible?: boolean;\n\n /**\n * The label of the Tab.\n */\n children: string | React.ReactElement;\n\n /**\n * If `true`, the indicator is enabled.\n * @default false\n */\n enableIndicator?: boolean;\n\n /**\n * If `true`, the component is selected.\n * @default false\n */\n selected?: boolean;\n\n /**\n * Element placed before the children.\n */\n icon?: React.ReactElement;\n\n /**\n * Tab indicator color\n * @default 'primary'\n */\n indicatorColor?: TabIndicatorColor;\n\n /**\n * The size of tab indicator.\n * 'full' adjusts the indicator to the size of the Tab,\n * while 'fit-content' adjusts the indicator to the size of the content inside the Tab.\n * @default 'full'\n */\n indicatorSize?: TabIndicatorSize;\n\n /**\n * If supplied, use this icon on selected state.\n */\n selectedIcon?: React.ReactElement;\n\n /**\n * The variant to use.\n * @default 'primary'\n */\n variant?: TabVariant;\n\n /**\n * Function to be passed to the child component's onLayout prop.\n */\n onTabInnerLayout?: (event: LayoutChangeEvent) => void;\n}> {}\n"],"mappings":""}
|
|
@@ -25,6 +25,19 @@ export default interface RadioProps extends OverridableComponentProps<BaseProps,
|
|
|
25
25
|
* Value of the component.
|
|
26
26
|
*/
|
|
27
27
|
value: string;
|
|
28
|
+
/**
|
|
29
|
+
* Determines the placement of the icon relative to the children.
|
|
30
|
+
* @default 'left'
|
|
31
|
+
*/
|
|
32
|
+
iconPlacement?: 'right' | 'left';
|
|
33
|
+
/**
|
|
34
|
+
* Custom icon element to display when the radio is unchecked.
|
|
35
|
+
*/
|
|
36
|
+
uncheckedIcon?: React.ReactNode;
|
|
37
|
+
/**
|
|
38
|
+
* Custom icon element to display when the radio is checked.
|
|
39
|
+
*/
|
|
40
|
+
checkedIcon?: React.ReactNode;
|
|
28
41
|
}> {
|
|
29
42
|
}
|
|
30
43
|
export {};
|
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import type { LayoutChangeEvent } from 'react-native';
|
|
3
3
|
import type { TabBaseProps } from '../TabBase';
|
|
4
4
|
import type { OverridableComponentProps } from '../types';
|
|
5
|
-
export declare type TabVariant = 'primary' | 'secondary' | 'bottom-navigation' | 'contained';
|
|
5
|
+
export declare type TabVariant = 'primary' | 'secondary' | 'tertiary' | 'bottom-navigation' | 'contained';
|
|
6
6
|
export declare type TabIndicatorColor = 'primary' | 'secondary';
|
|
7
7
|
export declare type TabIndicatorSize = 'full' | 'fit-content';
|
|
8
8
|
export default interface TabProps extends OverridableComponentProps<TabBaseProps, {
|
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.87",
|
|
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": "dfa417385224924740cfd4438d32a3fbff88cb9c"
|
|
71
71
|
}
|
package/src/Radio/Radio.tsx
CHANGED
|
@@ -23,7 +23,10 @@ export default function Radio(props: RadioProps) {
|
|
|
23
23
|
const {
|
|
24
24
|
checked = false,
|
|
25
25
|
children,
|
|
26
|
+
checkedIcon: checkIconProp,
|
|
27
|
+
uncheckedIcon: uncheckedIconProp,
|
|
26
28
|
disabled = false,
|
|
29
|
+
iconPlacement = 'left',
|
|
27
30
|
onChange: onChangeProp,
|
|
28
31
|
style,
|
|
29
32
|
value,
|
|
@@ -43,9 +46,9 @@ export default function Radio(props: RadioProps) {
|
|
|
43
46
|
|
|
44
47
|
const isChecked = context?.value === value ?? checked;
|
|
45
48
|
|
|
46
|
-
const
|
|
47
|
-
|
|
48
|
-
|
|
49
|
+
const checkedIcon = checkIconProp ?? <RadioCheckedIcon width={ICON_SIZE} height={ICON_SIZE} color={'primary'}/>;
|
|
50
|
+
const uncheckedIcon = uncheckedIconProp ?? <RadioIcon width={ICON_SIZE} height={ICON_SIZE} color={'tertiary'}/>;
|
|
51
|
+
const icon = isChecked ? checkedIcon : uncheckedIcon;
|
|
49
52
|
|
|
50
53
|
const rootStyle = css([
|
|
51
54
|
styles.root,
|
|
@@ -59,9 +62,11 @@ export default function Radio(props: RadioProps) {
|
|
|
59
62
|
style={rootStyle}
|
|
60
63
|
{...otherProps}
|
|
61
64
|
>
|
|
62
|
-
{icon}
|
|
65
|
+
{iconPlacement === 'left' ? icon : null}
|
|
63
66
|
|
|
64
67
|
{children ? children : null}
|
|
68
|
+
|
|
69
|
+
{iconPlacement === 'right' ? icon : null}
|
|
65
70
|
</ButtonBase>
|
|
66
71
|
);
|
|
67
72
|
};
|
package/src/Radio/RadioProps.ts
CHANGED
|
@@ -31,4 +31,20 @@ export default interface RadioProps extends OverridableComponentProps<BaseProps,
|
|
|
31
31
|
* Value of the component.
|
|
32
32
|
*/
|
|
33
33
|
value: string;
|
|
34
|
+
|
|
35
|
+
/**
|
|
36
|
+
* Determines the placement of the icon relative to the children.
|
|
37
|
+
* @default 'left'
|
|
38
|
+
*/
|
|
39
|
+
iconPlacement?: 'right' | 'left';
|
|
40
|
+
|
|
41
|
+
/**
|
|
42
|
+
* Custom icon element to display when the radio is unchecked.
|
|
43
|
+
*/
|
|
44
|
+
uncheckedIcon?: React.ReactNode;
|
|
45
|
+
|
|
46
|
+
/**
|
|
47
|
+
* Custom icon element to display when the radio is checked.
|
|
48
|
+
*/
|
|
49
|
+
checkedIcon?: React.ReactNode;
|
|
34
50
|
}> {}
|
package/src/Tab/Tab.tsx
CHANGED
|
@@ -2,8 +2,8 @@ import React, { cloneElement } from 'react';
|
|
|
2
2
|
import { Platform, Text, View } from 'react-native';
|
|
3
3
|
import Badge from '../Badge';
|
|
4
4
|
import TabBase from '../TabBase';
|
|
5
|
-
import type TabProps from './TabProps';
|
|
6
5
|
import { createFontStyle, css, StyleSheet, useTheme } from '../styles';
|
|
6
|
+
import type TabProps from './TabProps';
|
|
7
7
|
import TabIndicator from './TabIndicator';
|
|
8
8
|
|
|
9
9
|
const styles = StyleSheet.create({
|
|
@@ -18,6 +18,9 @@ const styles = StyleSheet.create({
|
|
|
18
18
|
filledInner: {
|
|
19
19
|
justifyContent: 'center',
|
|
20
20
|
},
|
|
21
|
+
tertiary: {
|
|
22
|
+
minHeight: 44,
|
|
23
|
+
}
|
|
21
24
|
});
|
|
22
25
|
|
|
23
26
|
export default function Tab(props: TabProps) {
|
|
@@ -59,6 +62,7 @@ export default function Tab(props: TabProps) {
|
|
|
59
62
|
styles.root,
|
|
60
63
|
variant === 'bottom-navigation' && styles.bottomNavigation,
|
|
61
64
|
variant === 'contained' && containedStyle,
|
|
65
|
+
variant === 'tertiary' && styles.tertiary,
|
|
62
66
|
style,
|
|
63
67
|
]);
|
|
64
68
|
|
|
@@ -68,16 +72,24 @@ export default function Tab(props: TabProps) {
|
|
|
68
72
|
]);
|
|
69
73
|
|
|
70
74
|
const fontStyle = createFontStyle(theme, {
|
|
71
|
-
selector: (typo) =>
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
75
|
+
selector: (typo) => {
|
|
76
|
+
switch (variant) {
|
|
77
|
+
case 'primary':
|
|
78
|
+
return typo.h2;
|
|
79
|
+
case 'secondary':
|
|
80
|
+
return typo.button2;
|
|
81
|
+
case 'tertiary':
|
|
82
|
+
return typo.h3;
|
|
83
|
+
case 'contained':
|
|
84
|
+
return selected
|
|
85
|
+
? { ...typo.subtitle2, fontWeight: typo.fontWeight.medium }
|
|
86
|
+
: typo.body2;
|
|
87
|
+
default:
|
|
88
|
+
return typo.flag;
|
|
89
|
+
}
|
|
90
|
+
},
|
|
78
91
|
color,
|
|
79
92
|
});
|
|
80
|
-
|
|
81
93
|
const pressEffect = selected ? 'none' : 'opacity';
|
|
82
94
|
|
|
83
95
|
const icon = selected ? (selectedIcon || defaultIcon) : defaultIcon;
|
package/src/Tab/TabProps.ts
CHANGED
|
@@ -3,8 +3,8 @@ import type { LayoutChangeEvent } from 'react-native';
|
|
|
3
3
|
import type { TabBaseProps } from '../TabBase';
|
|
4
4
|
import type { OverridableComponentProps } from '../types';
|
|
5
5
|
|
|
6
|
-
export type TabVariant = 'primary' | 'secondary' | 'bottom-navigation' | 'contained';
|
|
7
|
-
export type TabIndicatorColor = 'primary' | 'secondary'
|
|
6
|
+
export type TabVariant = 'primary' | 'secondary' | 'tertiary' | 'bottom-navigation' | 'contained';
|
|
7
|
+
export type TabIndicatorColor = 'primary' | 'secondary';
|
|
8
8
|
export type TabIndicatorSize = 'full' | 'fit-content';
|
|
9
9
|
|
|
10
10
|
export default interface TabProps extends OverridableComponentProps<TabBaseProps, {
|