@fountain-ui/core 2.0.0-beta.60 → 2.0.0-beta.61
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/Divider/Divider.js +15 -8
- package/build/commonjs/Divider/Divider.js.map +1 -1
- package/build/commonjs/Divider/DividerProps.js.map +1 -1
- package/build/module/Divider/Divider.js +15 -8
- package/build/module/Divider/Divider.js.map +1 -1
- package/build/module/Divider/DividerProps.js.map +1 -1
- package/build/typescript/Divider/DividerProps.d.ts +5 -0
- package/package.json +2 -2
- package/src/Divider/Divider.tsx +12 -4
- package/src/Divider/DividerProps.ts +6 -0
|
@@ -36,6 +36,7 @@ function Divider(props) {
|
|
|
36
36
|
borderWidth = 1,
|
|
37
37
|
children: childrenProp,
|
|
38
38
|
color = 'divider',
|
|
39
|
+
elementAlign = 'center',
|
|
39
40
|
inset = 0,
|
|
40
41
|
marginBetweenChildren = 2,
|
|
41
42
|
style,
|
|
@@ -76,15 +77,21 @@ function Divider(props) {
|
|
|
76
77
|
const containerStyle = (0, _styles.css)([insetStyle, marginStyle, styles.container, vertical ? styles.column : styles.row, childrenProp ? undefined : borderColorStyle, childrenProp ? undefined : borderWidthStyle, style]);
|
|
77
78
|
const dividerStyle = (0, _styles.css)([borderColorStyle, borderWidthStyle, styles.divider]);
|
|
78
79
|
const dividerMarginSize = theme.spacing(marginBetweenChildren);
|
|
79
|
-
const startDividerStyle =
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
80
|
+
const startDividerStyle = {
|
|
81
|
+
display: elementAlign !== 'start' ? 'flex' : 'none',
|
|
82
|
+
...(vertical ? {
|
|
83
|
+
marginBottom: dividerMarginSize
|
|
84
|
+
} : {
|
|
85
|
+
marginRight: dividerMarginSize
|
|
86
|
+
})
|
|
83
87
|
};
|
|
84
|
-
const endDividerStyle =
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
+
const endDividerStyle = {
|
|
89
|
+
display: elementAlign !== 'end' ? 'flex' : 'none',
|
|
90
|
+
...(vertical ? {
|
|
91
|
+
marginTop: dividerMarginSize
|
|
92
|
+
} : {
|
|
93
|
+
marginLeft: dividerMarginSize
|
|
94
|
+
})
|
|
88
95
|
};
|
|
89
96
|
const fontStyle = (0, _styles.createFontStyle)(theme, {
|
|
90
97
|
selector: typo => typo.caption2,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["styles","StyleSheet","create","container","alignSelf","alignItems","row","flexDirection","column","divider","flexGrow","Divider","props","borderWidth","children","childrenProp","color","inset","marginBetweenChildren","style","vertical","otherProps","theme","useTheme","fontColor","palette","text","secondary","borderColor","main","marginSize","spacing","insetSize","marginLeft","marginRight","marginTop","marginBottom","marginStyle","insetStyle","borderColorStyle","borderWidthStyle","borderRightWidth","borderBottomWidth","containerStyle","css","undefined","dividerStyle","dividerMarginSize","startDividerStyle","endDividerStyle","fontStyle","createFontStyle","selector","typo","caption2","element"],"sources":["Divider.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport type DividerProps 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\nexport default function Divider(props: DividerProps) {\n const {\n borderWidth = 1,\n children: childrenProp,\n color = 'divider',\n inset = 0,\n marginBetweenChildren = 2,\n style,\n vertical = false,\n ...otherProps\n } = props;\n\n const theme = useTheme();\n\n const fontColor = theme.palette.text.secondary;\n const borderColor = color === 'divider'\n ? theme.palette.divider\n : theme.palette[color].main;\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 = vertical ? { marginBottom: dividerMarginSize } : { marginRight: dividerMarginSize };\n const endDividerStyle = vertical ? { marginTop: dividerMarginSize } : { marginLeft: dividerMarginSize };\n\n const fontStyle = createFontStyle(theme, {\n selector: (typo) => typo.caption2,\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
|
|
1
|
+
{"version":3,"names":["styles","StyleSheet","create","container","alignSelf","alignItems","row","flexDirection","column","divider","flexGrow","Divider","props","borderWidth","children","childrenProp","color","elementAlign","inset","marginBetweenChildren","style","vertical","otherProps","theme","useTheme","fontColor","palette","text","secondary","borderColor","main","marginSize","spacing","insetSize","marginLeft","marginRight","marginTop","marginBottom","marginStyle","insetStyle","borderColorStyle","borderWidthStyle","borderRightWidth","borderBottomWidth","containerStyle","css","undefined","dividerStyle","dividerMarginSize","startDividerStyle","display","endDividerStyle","fontStyle","createFontStyle","selector","typo","caption2","element"],"sources":["Divider.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport { ExtendedStyle } from '../types';\nimport type DividerProps 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\nexport default function Divider(props: DividerProps) {\n const {\n borderWidth = 1,\n children: childrenProp,\n color = 'divider',\n elementAlign = 'center',\n inset = 0,\n marginBetweenChildren = 2,\n style,\n vertical = false,\n ...otherProps\n } = props;\n\n const theme = useTheme();\n\n const fontColor = theme.palette.text.secondary;\n const borderColor = color === 'divider'\n ? theme.palette.divider\n : theme.palette[color].main;\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,\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":[],"sources":["DividerProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { CommonComponentColor, OverridableComponentProps } from '../types';\n\nexport type DividerColor = 'divider' | CommonComponentColor;\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 color of divider. It supports default divider color and those theme colors that make sense for this component.\n * @default 'divider'\n */\n color?: DividerColor;\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 1\n */\n borderWidth?: number;\n}> {}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"names":[],"sources":["DividerProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { CommonComponentColor, OverridableComponentProps } from '../types';\n\nexport type DividerColor = 'divider' | CommonComponentColor;\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 color of divider. It supports default divider color and those theme colors that make sense for this component.\n * @default 'divider'\n */\n color?: DividerColor;\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 1\n */\n borderWidth?: number;\n\n /**\n * Set position of children.\n * @default center\n */\n elementAlign?: 'start' | 'center' | 'end';\n}> {}\n"],"mappings":""}
|
|
@@ -23,6 +23,7 @@ export default function Divider(props) {
|
|
|
23
23
|
borderWidth = 1,
|
|
24
24
|
children: childrenProp,
|
|
25
25
|
color = 'divider',
|
|
26
|
+
elementAlign = 'center',
|
|
26
27
|
inset = 0,
|
|
27
28
|
marginBetweenChildren = 2,
|
|
28
29
|
style,
|
|
@@ -63,15 +64,21 @@ export default function Divider(props) {
|
|
|
63
64
|
const containerStyle = css([insetStyle, marginStyle, styles.container, vertical ? styles.column : styles.row, childrenProp ? undefined : borderColorStyle, childrenProp ? undefined : borderWidthStyle, style]);
|
|
64
65
|
const dividerStyle = css([borderColorStyle, borderWidthStyle, styles.divider]);
|
|
65
66
|
const dividerMarginSize = theme.spacing(marginBetweenChildren);
|
|
66
|
-
const startDividerStyle =
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
67
|
+
const startDividerStyle = {
|
|
68
|
+
display: elementAlign !== 'start' ? 'flex' : 'none',
|
|
69
|
+
...(vertical ? {
|
|
70
|
+
marginBottom: dividerMarginSize
|
|
71
|
+
} : {
|
|
72
|
+
marginRight: dividerMarginSize
|
|
73
|
+
})
|
|
70
74
|
};
|
|
71
|
-
const endDividerStyle =
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
+
const endDividerStyle = {
|
|
76
|
+
display: elementAlign !== 'end' ? 'flex' : 'none',
|
|
77
|
+
...(vertical ? {
|
|
78
|
+
marginTop: dividerMarginSize
|
|
79
|
+
} : {
|
|
80
|
+
marginLeft: dividerMarginSize
|
|
81
|
+
})
|
|
75
82
|
};
|
|
76
83
|
const fontStyle = createFontStyle(theme, {
|
|
77
84
|
selector: typo => typo.caption2,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Text","View","createFontStyle","css","StyleSheet","useTheme","styles","create","container","alignSelf","alignItems","row","flexDirection","column","divider","flexGrow","Divider","props","borderWidth","children","childrenProp","color","inset","marginBetweenChildren","style","vertical","otherProps","theme","fontColor","palette","text","secondary","borderColor","main","marginSize","spacing","insetSize","marginLeft","marginRight","marginTop","marginBottom","marginStyle","insetStyle","borderColorStyle","borderWidthStyle","borderRightWidth","borderBottomWidth","containerStyle","undefined","dividerStyle","dividerMarginSize","startDividerStyle","endDividerStyle","fontStyle","selector","typo","caption2","element"],"sources":["Divider.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport type DividerProps 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\nexport default function Divider(props: DividerProps) {\n const {\n borderWidth = 1,\n children: childrenProp,\n color = 'divider',\n inset = 0,\n marginBetweenChildren = 2,\n style,\n vertical = false,\n ...otherProps\n } = props;\n\n const theme = useTheme();\n\n const fontColor = theme.palette.text.secondary;\n const borderColor = color === 'divider'\n ? theme.palette.divider\n : theme.palette[color].main;\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 = vertical ? { marginBottom: dividerMarginSize } : { marginRight: dividerMarginSize };\n const endDividerStyle = vertical ? { marginTop: dividerMarginSize } : { marginLeft: dividerMarginSize };\n\n const fontStyle = createFontStyle(theme, {\n selector: (typo) => typo.caption2,\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
|
|
1
|
+
{"version":3,"names":["React","Text","View","createFontStyle","css","StyleSheet","useTheme","styles","create","container","alignSelf","alignItems","row","flexDirection","column","divider","flexGrow","Divider","props","borderWidth","children","childrenProp","color","elementAlign","inset","marginBetweenChildren","style","vertical","otherProps","theme","fontColor","palette","text","secondary","borderColor","main","marginSize","spacing","insetSize","marginLeft","marginRight","marginTop","marginBottom","marginStyle","insetStyle","borderColorStyle","borderWidthStyle","borderRightWidth","borderBottomWidth","containerStyle","undefined","dividerStyle","dividerMarginSize","startDividerStyle","display","endDividerStyle","fontStyle","selector","typo","caption2","element"],"sources":["Divider.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport { ExtendedStyle } from '../types';\nimport type DividerProps 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\nexport default function Divider(props: DividerProps) {\n const {\n borderWidth = 1,\n children: childrenProp,\n color = 'divider',\n elementAlign = 'center',\n inset = 0,\n marginBetweenChildren = 2,\n style,\n vertical = false,\n ...otherProps\n } = props;\n\n const theme = useTheme();\n\n const fontColor = theme.palette.text.secondary;\n const borderColor = color === 'divider'\n ? theme.palette.divider\n : theme.palette[color].main;\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,\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":[],"sources":["DividerProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { CommonComponentColor, OverridableComponentProps } from '../types';\n\nexport type DividerColor = 'divider' | CommonComponentColor;\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 color of divider. It supports default divider color and those theme colors that make sense for this component.\n * @default 'divider'\n */\n color?: DividerColor;\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 1\n */\n borderWidth?: number;\n}> {}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"names":[],"sources":["DividerProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { CommonComponentColor, OverridableComponentProps } from '../types';\n\nexport type DividerColor = 'divider' | CommonComponentColor;\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 color of divider. It supports default divider color and those theme colors that make sense for this component.\n * @default 'divider'\n */\n color?: DividerColor;\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 1\n */\n borderWidth?: number;\n\n /**\n * Set position of children.\n * @default center\n */\n elementAlign?: 'start' | 'center' | 'end';\n}> {}\n"],"mappings":""}
|
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.61",
|
|
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": "8976c712365cbe8117e1ac9d024188f2c75c1f23"
|
|
71
71
|
}
|
package/src/Divider/Divider.tsx
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Text, View } from 'react-native';
|
|
3
3
|
import { createFontStyle, css, StyleSheet, useTheme } from '../styles';
|
|
4
|
+
import { ExtendedStyle } from '../types';
|
|
4
5
|
import type DividerProps from './DividerProps';
|
|
5
6
|
|
|
6
7
|
const styles = StyleSheet.create({
|
|
@@ -24,6 +25,7 @@ export default function Divider(props: DividerProps) {
|
|
|
24
25
|
borderWidth = 1,
|
|
25
26
|
children: childrenProp,
|
|
26
27
|
color = 'divider',
|
|
28
|
+
elementAlign = 'center',
|
|
27
29
|
inset = 0,
|
|
28
30
|
marginBetweenChildren = 2,
|
|
29
31
|
style,
|
|
@@ -73,8 +75,14 @@ export default function Divider(props: DividerProps) {
|
|
|
73
75
|
]);
|
|
74
76
|
|
|
75
77
|
const dividerMarginSize = theme.spacing(marginBetweenChildren);
|
|
76
|
-
const startDividerStyle
|
|
77
|
-
|
|
78
|
+
const startDividerStyle: ExtendedStyle = {
|
|
79
|
+
display: elementAlign !== 'start' ? 'flex' : 'none',
|
|
80
|
+
...(vertical ? { marginBottom: dividerMarginSize } : { marginRight: dividerMarginSize }),
|
|
81
|
+
};
|
|
82
|
+
const endDividerStyle: ExtendedStyle = {
|
|
83
|
+
display: elementAlign !== 'end' ? 'flex' : 'none',
|
|
84
|
+
...(vertical ? { marginTop: dividerMarginSize } : { marginLeft: dividerMarginSize }),
|
|
85
|
+
};
|
|
78
86
|
|
|
79
87
|
const fontStyle = createFontStyle(theme, {
|
|
80
88
|
selector: (typo) => typo.caption2,
|
|
@@ -86,11 +94,11 @@ export default function Divider(props: DividerProps) {
|
|
|
86
94
|
: childrenProp;
|
|
87
95
|
|
|
88
96
|
const children = childrenProp ? (
|
|
89
|
-
|
|
97
|
+
<React.Fragment>
|
|
90
98
|
<View style={css([dividerStyle, startDividerStyle])}/>
|
|
91
99
|
{element}
|
|
92
100
|
<View style={css([dividerStyle, endDividerStyle])}/>
|
|
93
|
-
|
|
101
|
+
</React.Fragment>
|
|
94
102
|
) : null;
|
|
95
103
|
|
|
96
104
|
return (
|