@fountain-ui/core 2.0.0-beta.51 → 2.0.0-beta.52
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 +5 -3
- package/build/commonjs/Divider/Divider.js.map +1 -1
- package/build/commonjs/Divider/DividerProps.js.map +1 -1
- package/build/module/Divider/Divider.js +5 -3
- 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 +12 -1
- package/package.json +2 -2
- package/src/Divider/Divider.tsx +7 -3
- package/src/Divider/DividerProps.ts +15 -1
|
@@ -40,14 +40,16 @@ const styles = _styles.StyleSheet.create({
|
|
|
40
40
|
function Divider(props) {
|
|
41
41
|
const {
|
|
42
42
|
children: childrenProp,
|
|
43
|
+
color = 'divider',
|
|
43
44
|
inset = 0,
|
|
44
|
-
|
|
45
|
+
marginBetweenChildren = 2,
|
|
45
46
|
style,
|
|
47
|
+
vertical = false,
|
|
46
48
|
...otherProps
|
|
47
49
|
} = props;
|
|
48
50
|
const theme = (0, _styles.useTheme)();
|
|
49
51
|
const fontColor = theme.palette.text.secondary;
|
|
50
|
-
const borderColor = theme.palette.divider;
|
|
52
|
+
const borderColor = color === 'divider' ? theme.palette.divider : theme.palette[color].main;
|
|
51
53
|
const marginSize = theme.spacing(1);
|
|
52
54
|
const insetSize = theme.spacing(inset);
|
|
53
55
|
const marginLeft = marginSize;
|
|
@@ -74,7 +76,7 @@ function Divider(props) {
|
|
|
74
76
|
const borderWidthStyle = vertical ? styles.borderRight : styles.borderBottom;
|
|
75
77
|
const containerStyle = (0, _styles.css)([insetStyle, marginStyle, styles.container, vertical ? styles.column : styles.row, childrenProp ? undefined : borderColorStyle, childrenProp ? undefined : borderWidthStyle, style]);
|
|
76
78
|
const dividerStyle = (0, _styles.css)([borderColorStyle, borderWidthStyle, styles.divider]);
|
|
77
|
-
const dividerMarginSize = theme.spacing(
|
|
79
|
+
const dividerMarginSize = theme.spacing(marginBetweenChildren);
|
|
78
80
|
const startDividerStyle = vertical ? {
|
|
79
81
|
marginBottom: dividerMarginSize
|
|
80
82
|
} : {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["styles","StyleSheet","create","container","alignSelf","alignItems","row","flexDirection","column","divider","flexGrow","borderBottom","borderBottomWidth","borderRight","borderRightWidth","Divider","props","children","childrenProp","inset","
|
|
1
|
+
{"version":3,"names":["styles","StyleSheet","create","container","alignSelf","alignItems","row","flexDirection","column","divider","flexGrow","borderBottom","borderBottomWidth","borderRight","borderRightWidth","Divider","props","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","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 borderBottom: {\n borderBottomWidth: 1,\n },\n borderRight: {\n borderRightWidth: 1,\n },\n});\n\nexport default function Divider(props: DividerProps) {\n const {\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 ? styles.borderRight : styles.borderBottom);\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 <>\n <View style={css([dividerStyle, startDividerStyle])}/>\n {element}\n <View style={css([dividerStyle, endDividerStyle])}/>\n </>\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 { OverridableComponentProps } from '../types';\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"],"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"],"mappings":""}
|
|
@@ -27,14 +27,16 @@ const styles = StyleSheet.create({
|
|
|
27
27
|
export default function Divider(props) {
|
|
28
28
|
const {
|
|
29
29
|
children: childrenProp,
|
|
30
|
+
color = 'divider',
|
|
30
31
|
inset = 0,
|
|
31
|
-
|
|
32
|
+
marginBetweenChildren = 2,
|
|
32
33
|
style,
|
|
34
|
+
vertical = false,
|
|
33
35
|
...otherProps
|
|
34
36
|
} = props;
|
|
35
37
|
const theme = useTheme();
|
|
36
38
|
const fontColor = theme.palette.text.secondary;
|
|
37
|
-
const borderColor = theme.palette.divider;
|
|
39
|
+
const borderColor = color === 'divider' ? theme.palette.divider : theme.palette[color].main;
|
|
38
40
|
const marginSize = theme.spacing(1);
|
|
39
41
|
const insetSize = theme.spacing(inset);
|
|
40
42
|
const marginLeft = marginSize;
|
|
@@ -61,7 +63,7 @@ export default function Divider(props) {
|
|
|
61
63
|
const borderWidthStyle = vertical ? styles.borderRight : styles.borderBottom;
|
|
62
64
|
const containerStyle = css([insetStyle, marginStyle, styles.container, vertical ? styles.column : styles.row, childrenProp ? undefined : borderColorStyle, childrenProp ? undefined : borderWidthStyle, style]);
|
|
63
65
|
const dividerStyle = css([borderColorStyle, borderWidthStyle, styles.divider]);
|
|
64
|
-
const dividerMarginSize = theme.spacing(
|
|
66
|
+
const dividerMarginSize = theme.spacing(marginBetweenChildren);
|
|
65
67
|
const startDividerStyle = vertical ? {
|
|
66
68
|
marginBottom: dividerMarginSize
|
|
67
69
|
} : {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Text","View","createFontStyle","css","StyleSheet","useTheme","styles","create","container","alignSelf","alignItems","row","flexDirection","column","divider","flexGrow","borderBottom","borderBottomWidth","borderRight","borderRightWidth","Divider","props","children","childrenProp","inset","
|
|
1
|
+
{"version":3,"names":["React","Text","View","createFontStyle","css","StyleSheet","useTheme","styles","create","container","alignSelf","alignItems","row","flexDirection","column","divider","flexGrow","borderBottom","borderBottomWidth","borderRight","borderRightWidth","Divider","props","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","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 borderBottom: {\n borderBottomWidth: 1,\n },\n borderRight: {\n borderRightWidth: 1,\n },\n});\n\nexport default function Divider(props: DividerProps) {\n const {\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 ? styles.borderRight : styles.borderBottom);\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 <>\n <View style={css([dividerStyle, startDividerStyle])}/>\n {element}\n <View style={css([dividerStyle, endDividerStyle])}/>\n </>\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 { OverridableComponentProps } from '../types';\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"],"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"],"mappings":""}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { ViewProps } from 'react-native';
|
|
3
|
-
import type { OverridableComponentProps } from '../types';
|
|
3
|
+
import type { CommonComponentColor, OverridableComponentProps } from '../types';
|
|
4
|
+
export declare type DividerColor = 'divider' | CommonComponentColor;
|
|
4
5
|
export default interface DividerProps extends OverridableComponentProps<ViewProps, {
|
|
5
6
|
/**
|
|
6
7
|
* The content of the component.
|
|
@@ -16,5 +17,15 @@ export default interface DividerProps extends OverridableComponentProps<ViewProp
|
|
|
16
17
|
* @default false
|
|
17
18
|
*/
|
|
18
19
|
vertical?: boolean;
|
|
20
|
+
/**
|
|
21
|
+
* The color of divider. It supports default divider color and those theme colors that make sense for this component.
|
|
22
|
+
* @default 'divider'
|
|
23
|
+
*/
|
|
24
|
+
color?: DividerColor;
|
|
25
|
+
/**
|
|
26
|
+
* The size of margin between child element and the divider. It works as a multiplier factor based on spacing system.
|
|
27
|
+
* @default 2
|
|
28
|
+
*/
|
|
29
|
+
marginBetweenChildren?: number;
|
|
19
30
|
}> {
|
|
20
31
|
}
|
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.52",
|
|
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": "0fc9a9c4db15a8c83560130af2f76d83e91d235c"
|
|
71
71
|
}
|
package/src/Divider/Divider.tsx
CHANGED
|
@@ -28,16 +28,20 @@ const styles = StyleSheet.create({
|
|
|
28
28
|
export default function Divider(props: DividerProps) {
|
|
29
29
|
const {
|
|
30
30
|
children: childrenProp,
|
|
31
|
+
color = 'divider',
|
|
31
32
|
inset = 0,
|
|
32
|
-
|
|
33
|
+
marginBetweenChildren = 2,
|
|
33
34
|
style,
|
|
35
|
+
vertical = false,
|
|
34
36
|
...otherProps
|
|
35
37
|
} = props;
|
|
36
38
|
|
|
37
39
|
const theme = useTheme();
|
|
38
40
|
|
|
39
41
|
const fontColor = theme.palette.text.secondary;
|
|
40
|
-
const borderColor =
|
|
42
|
+
const borderColor = color === 'divider'
|
|
43
|
+
? theme.palette.divider
|
|
44
|
+
: theme.palette[color].main;
|
|
41
45
|
const marginSize = theme.spacing(1);
|
|
42
46
|
const insetSize = theme.spacing(inset);
|
|
43
47
|
|
|
@@ -73,7 +77,7 @@ export default function Divider(props: DividerProps) {
|
|
|
73
77
|
styles.divider,
|
|
74
78
|
]);
|
|
75
79
|
|
|
76
|
-
const dividerMarginSize = theme.spacing(
|
|
80
|
+
const dividerMarginSize = theme.spacing(marginBetweenChildren);
|
|
77
81
|
const startDividerStyle = vertical ? { marginBottom: dividerMarginSize } : { marginRight: dividerMarginSize };
|
|
78
82
|
const endDividerStyle = vertical ? { marginTop: dividerMarginSize } : { marginLeft: dividerMarginSize };
|
|
79
83
|
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { ViewProps } from 'react-native';
|
|
3
|
-
import type { OverridableComponentProps } from '../types';
|
|
3
|
+
import type { CommonComponentColor, OverridableComponentProps } from '../types';
|
|
4
|
+
|
|
5
|
+
export type DividerColor = 'divider' | CommonComponentColor;
|
|
4
6
|
|
|
5
7
|
export default interface DividerProps extends OverridableComponentProps<ViewProps, {
|
|
6
8
|
/**
|
|
@@ -19,4 +21,16 @@ export default interface DividerProps extends OverridableComponentProps<ViewProp
|
|
|
19
21
|
* @default false
|
|
20
22
|
*/
|
|
21
23
|
vertical?: boolean;
|
|
24
|
+
|
|
25
|
+
/**
|
|
26
|
+
* The color of divider. It supports default divider color and those theme colors that make sense for this component.
|
|
27
|
+
* @default 'divider'
|
|
28
|
+
*/
|
|
29
|
+
color?: DividerColor;
|
|
30
|
+
|
|
31
|
+
/**
|
|
32
|
+
* The size of margin between child element and the divider. It works as a multiplier factor based on spacing system.
|
|
33
|
+
* @default 2
|
|
34
|
+
*/
|
|
35
|
+
marginBetweenChildren?: number;
|
|
22
36
|
}> {}
|