@fountain-ui/core 2.0.0-beta.86 → 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 +4 -1
- package/build/commonjs/Tab/Tab.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 +4 -1
- package/build/module/Tab/Tab.js.map +1 -1
- package/build/typescript/Radio/RadioProps.d.ts +13 -0
- package/package.json +2 -2
- package/src/Radio/Radio.tsx +9 -4
- package/src/Radio/RadioProps.ts +16 -0
- package/src/Tab/Tab.tsx +4 -0
|
@@ -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,7 +69,7 @@ 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
75
|
selector: typo => {
|
|
@@ -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","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});\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 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":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;;;;;AAEA,MAAMA,MAAM,GAAGC,kBAAA,CAAWC,MAAX,CAAkB;EAC7BC,IAAI,EAAE,EACF;IACA,IAAIC,qBAAA,CAASC,EAAT,KAAgB,KAAhB,GAAwB;MAAEC,QAAQ,EAAE;IAAZ,CAAxB,GAA+C,EAAnD,CAFE;IAGFC,SAAS,EAAE;EAHT,CADuB;EAM7BC,gBAAgB,EAAE;IACdD,SAAS,EAAE;EADG,CANW;EAS7BE,WAAW,EAAE;IACTC,cAAc,EAAE;EADP;
|
|
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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"}
|
|
@@ -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,7 +49,7 @@ 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
55
|
selector: typo => {
|
|
@@ -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","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});\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 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":";;AAAA,OAAOA,KAAP,IAAgBC,YAAhB,QAAoC,OAApC;AACA,SAASC,QAAT,EAAmBC,IAAnB,EAAyBC,IAAzB,QAAqC,cAArC;AACA,OAAOC,KAAP,MAAkB,UAAlB;AACA,OAAOC,OAAP,MAAoB,YAApB;AACA,SAASC,eAAT,EAA0BC,GAA1B,EAA+BC,UAA/B,EAA2CC,QAA3C,QAA2D,WAA3D;AAEA,OAAOC,YAAP,MAAyB,gBAAzB;AAEA,MAAMC,MAAM,GAAGH,UAAU,CAACI,MAAX,CAAkB;EAC7BC,IAAI,EAAE,EACF;IACA,IAAIZ,QAAQ,CAACa,EAAT,KAAgB,KAAhB,GAAwB;MAAEC,QAAQ,EAAE;IAAZ,CAAxB,GAA+C,EAAnD,CAFE;IAGFC,SAAS,EAAE;EAHT,CADuB;EAM7BC,gBAAgB,EAAE;IACdD,SAAS,EAAE;EADG,CANW;EAS7BE,WAAW,EAAE;IACTC,cAAc,EAAE;EADP;
|
|
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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"}
|
|
@@ -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 {};
|
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
|
@@ -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
|
|