@fountain-ui/core 2.0.0-beta.91 → 2.0.0-beta.92
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 +16 -4
- package/build/commonjs/Divider/Divider.js.map +1 -1
- package/build/commonjs/Divider/DividerProps.js +9 -0
- package/build/commonjs/Divider/DividerProps.js.map +1 -1
- package/build/commonjs/Divider/LegacyDivider.js +114 -0
- package/build/commonjs/Divider/LegacyDivider.js.map +1 -0
- package/build/commonjs/Divider/LegacyDividerProps.js +2 -0
- package/build/commonjs/Divider/LegacyDividerProps.js.map +1 -0
- package/build/commonjs/Divider/index.js +2 -2
- package/build/commonjs/Divider/index.js.map +1 -1
- package/build/commonjs/Modal/index.js +0 -10
- package/build/commonjs/Modal/index.js.map +1 -1
- package/build/commonjs/index.js +0 -7
- package/build/commonjs/index.js.map +1 -1
- package/build/module/Divider/Divider.js +17 -4
- package/build/module/Divider/Divider.js.map +1 -1
- package/build/module/Divider/DividerProps.js +2 -1
- package/build/module/Divider/DividerProps.js.map +1 -1
- package/build/module/Divider/LegacyDivider.js +100 -0
- package/build/module/Divider/LegacyDivider.js.map +1 -0
- package/build/module/Divider/LegacyDividerProps.js +2 -0
- package/build/module/Divider/LegacyDividerProps.js.map +1 -0
- package/build/module/Divider/index.js +1 -1
- package/build/module/Divider/index.js.map +1 -1
- package/build/module/Modal/index.js +0 -1
- package/build/module/Modal/index.js.map +1 -1
- package/build/module/index.js +1 -1
- package/build/module/index.js.map +1 -1
- package/build/typescript/Divider/DividerProps.d.ts +12 -9
- package/build/typescript/Divider/LegacyDivider.d.ts +3 -0
- package/build/typescript/Divider/LegacyDividerProps.d.ts +41 -0
- package/build/typescript/Divider/index.d.ts +2 -2
- package/build/typescript/Modal/index.d.ts +0 -2
- package/build/typescript/index.d.ts +2 -2
- package/package.json +2 -2
- package/src/Divider/Divider.tsx +17 -8
- package/src/Divider/DividerProps.ts +14 -10
- package/src/Divider/LegacyDivider.tsx +114 -0
- package/src/Divider/LegacyDividerProps.ts +48 -0
- package/src/Divider/index.ts +2 -2
- package/src/Modal/index.ts +0 -2
- package/src/index.ts +2 -2
|
@@ -31,21 +31,33 @@ const styles = _styles.StyleSheet.create({
|
|
|
31
31
|
}
|
|
32
32
|
});
|
|
33
33
|
|
|
34
|
+
function selectBorderColor(theme, variant, vertical) {
|
|
35
|
+
switch (variant) {
|
|
36
|
+
default:
|
|
37
|
+
case 'base':
|
|
38
|
+
return vertical ? theme.palette.border.weaker : theme.palette.border.weak;
|
|
39
|
+
|
|
40
|
+
case 'strong':
|
|
41
|
+
return vertical ? theme.palette.border.weak : theme.palette.border.base;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
34
45
|
function Divider(props) {
|
|
35
46
|
const {
|
|
36
|
-
borderWidth
|
|
47
|
+
borderWidth: borderWidthProp,
|
|
37
48
|
children: childrenProp,
|
|
38
|
-
color = 'divider',
|
|
39
49
|
elementAlign = 'center',
|
|
40
50
|
inset = 0,
|
|
41
51
|
marginBetweenChildren = 2,
|
|
42
52
|
style,
|
|
53
|
+
variant = 'base',
|
|
43
54
|
vertical = false,
|
|
44
55
|
...otherProps
|
|
45
56
|
} = props;
|
|
46
57
|
const theme = (0, _styles.useTheme)();
|
|
47
|
-
const
|
|
48
|
-
const
|
|
58
|
+
const borderWidth = borderWidthProp ?? (vertical ? 1 : 0.5);
|
|
59
|
+
const fontColor = theme.palette.text.weak;
|
|
60
|
+
const borderColor = selectBorderColor(theme, variant, vertical);
|
|
49
61
|
const marginSize = theme.spacing(1);
|
|
50
62
|
const insetSize = theme.spacing(inset);
|
|
51
63
|
const marginLeft = marginSize;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["styles","StyleSheet","create","container","alignSelf","alignItems","row","flexDirection","column","divider","flexGrow","
|
|
1
|
+
{"version":3,"names":["styles","StyleSheet","create","container","alignSelf","alignItems","row","flexDirection","column","divider","flexGrow","selectBorderColor","theme","variant","vertical","palette","border","weaker","weak","base","Divider","props","borderWidth","borderWidthProp","children","childrenProp","elementAlign","inset","marginBetweenChildren","style","otherProps","useTheme","fontColor","text","borderColor","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","color","element"],"sources":["Divider.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport type { Theme } from '@fountain-ui/styles';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport { ExtendedStyle } from '../types';\nimport type DividerProps from './DividerProps';\nimport type { DividerVariant } from './DividerProps';\n\nconst styles = StyleSheet.create({\n container: {\n alignSelf: 'stretch',\n alignItems: 'center',\n },\n row: {\n flexDirection: 'row',\n },\n column: {\n flexDirection: 'column',\n },\n divider: {\n flexGrow: 1,\n },\n});\n\nfunction selectBorderColor(theme: Theme, variant: DividerVariant, vertical: boolean) {\n switch (variant) {\n default:\n case 'base':\n return vertical ? theme.palette.border.weaker : theme.palette.border.weak;\n case 'strong':\n return vertical ? theme.palette.border.weak : theme.palette.border.base;\n }\n}\n\nexport default function Divider(props: DividerProps) {\n const {\n borderWidth: borderWidthProp,\n children: childrenProp,\n elementAlign = 'center',\n inset = 0,\n marginBetweenChildren = 2,\n style,\n variant = 'base' as DividerVariant,\n vertical = false,\n ...otherProps\n } = props;\n\n const theme = useTheme();\n\n const borderWidth = borderWidthProp ?? (vertical ? 1 : 0.5);\n const fontColor = theme.palette.text.weak;\n const borderColor = selectBorderColor(theme, variant, vertical);\n const marginSize = theme.spacing(1);\n const insetSize = theme.spacing(inset);\n\n const marginLeft = marginSize;\n const marginRight = marginSize;\n const marginTop = marginSize;\n const marginBottom = marginSize;\n\n const marginStyle = vertical\n ? { marginLeft, marginRight }\n : { marginTop, marginBottom };\n\n const insetStyle = vertical\n ? { marginTop: insetSize, marginBottom: insetSize }\n : { marginLeft: insetSize, marginRight: insetSize };\n\n const borderColorStyle = { borderColor };\n const borderWidthStyle = (vertical ? { borderRightWidth: borderWidth } : { borderBottomWidth: borderWidth });\n\n const containerStyle = css([\n insetStyle,\n marginStyle,\n styles.container,\n vertical ? styles.column : styles.row,\n childrenProp ? undefined : borderColorStyle,\n childrenProp ? undefined : borderWidthStyle,\n style,\n ]);\n\n const dividerStyle = css([\n borderColorStyle,\n borderWidthStyle,\n styles.divider,\n ]);\n\n const dividerMarginSize = theme.spacing(marginBetweenChildren);\n const startDividerStyle: ExtendedStyle = {\n display: elementAlign !== 'start' ? 'flex' : 'none',\n ...(vertical ? { marginBottom: dividerMarginSize } : { marginRight: dividerMarginSize }),\n };\n const endDividerStyle: ExtendedStyle = {\n display: elementAlign !== 'end' ? 'flex' : 'none',\n ...(vertical ? { marginTop: dividerMarginSize } : { marginLeft: dividerMarginSize }),\n };\n\n const fontStyle = createFontStyle(theme, {\n selector: (typo) => typo.caption2,\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,2 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.elementAligns = exports.dividerVariants = void 0;
|
|
7
|
+
const elementAligns = ['start', 'center', 'end'];
|
|
8
|
+
exports.elementAligns = elementAligns;
|
|
9
|
+
const dividerVariants = ['base', 'strong'];
|
|
10
|
+
exports.dividerVariants = dividerVariants;
|
|
2
11
|
//# sourceMappingURL=DividerProps.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["DividerProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type {
|
|
1
|
+
{"version":3,"names":["elementAligns","dividerVariants"],"sources":["DividerProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\n\nexport const elementAligns = ['start', 'center', 'end'] as const;\nexport type ElementAlign = typeof elementAligns[number];\n\nexport const dividerVariants = ['base', 'strong'] as const;\nexport type DividerVariant = typeof dividerVariants[number];\n\nexport default interface DividerProps extends OverridableComponentProps<ViewProps, {\n /**\n * The content of the component.\n */\n children?: React.ReactNode;\n\n /**\n * The size of the inset. It works as a multiplier factor based on spacing system.\n * @default 0\n */\n inset?: number;\n\n /**\n * If `true`, the divider orientation is set to vertical.\n * @default false\n */\n vertical?: boolean;\n\n /**\n * The size of margin between child element and the divider. It works as a multiplier factor based on spacing system.\n * @default 2\n */\n marginBetweenChildren?: number;\n\n /**\n * The size of border width. It works as an actual pixel-based border width value of a divider.\n * @default if vertical is true 1, otherwise 0.5\n */\n borderWidth?: number;\n\n /**\n * Set position of children.\n * @default center\n */\n elementAlign?: ElementAlign;\n\n /**\n * Select the style of the divider based on this value.\n * @default base\n */\n variant?: DividerVariant;\n}> {}\n"],"mappings":";;;;;;AAIO,MAAMA,aAAa,GAAG,CAAC,OAAD,EAAU,QAAV,EAAoB,KAApB,CAAtB;;AAGA,MAAMC,eAAe,GAAG,CAAC,MAAD,EAAS,QAAT,CAAxB"}
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = Divider;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
10
|
+
var _reactNative = require("react-native");
|
|
11
|
+
|
|
12
|
+
var _styles = require("../styles");
|
|
13
|
+
|
|
14
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
+
|
|
16
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
17
|
+
|
|
18
|
+
const styles = _styles.StyleSheet.create({
|
|
19
|
+
container: {
|
|
20
|
+
alignSelf: 'stretch',
|
|
21
|
+
alignItems: 'center'
|
|
22
|
+
},
|
|
23
|
+
row: {
|
|
24
|
+
flexDirection: 'row'
|
|
25
|
+
},
|
|
26
|
+
column: {
|
|
27
|
+
flexDirection: 'column'
|
|
28
|
+
},
|
|
29
|
+
divider: {
|
|
30
|
+
flexGrow: 1
|
|
31
|
+
}
|
|
32
|
+
});
|
|
33
|
+
|
|
34
|
+
function Divider(props) {
|
|
35
|
+
const {
|
|
36
|
+
borderWidth = 1,
|
|
37
|
+
children: childrenProp,
|
|
38
|
+
color = 'divider',
|
|
39
|
+
elementAlign = 'center',
|
|
40
|
+
inset = 0,
|
|
41
|
+
marginBetweenChildren = 2,
|
|
42
|
+
style,
|
|
43
|
+
vertical = false,
|
|
44
|
+
...otherProps
|
|
45
|
+
} = props;
|
|
46
|
+
const theme = (0, _styles.useTheme)();
|
|
47
|
+
const fontColor = theme.palette.text.secondary;
|
|
48
|
+
const borderColor = color === 'divider' ? theme.palette.divider : color === 'border' ? theme.palette.border.default : theme.palette[color].main;
|
|
49
|
+
const marginSize = theme.spacing(1);
|
|
50
|
+
const insetSize = theme.spacing(inset);
|
|
51
|
+
const marginLeft = marginSize;
|
|
52
|
+
const marginRight = marginSize;
|
|
53
|
+
const marginTop = marginSize;
|
|
54
|
+
const marginBottom = marginSize;
|
|
55
|
+
const marginStyle = vertical ? {
|
|
56
|
+
marginLeft,
|
|
57
|
+
marginRight
|
|
58
|
+
} : {
|
|
59
|
+
marginTop,
|
|
60
|
+
marginBottom
|
|
61
|
+
};
|
|
62
|
+
const insetStyle = vertical ? {
|
|
63
|
+
marginTop: insetSize,
|
|
64
|
+
marginBottom: insetSize
|
|
65
|
+
} : {
|
|
66
|
+
marginLeft: insetSize,
|
|
67
|
+
marginRight: insetSize
|
|
68
|
+
};
|
|
69
|
+
const borderColorStyle = {
|
|
70
|
+
borderColor
|
|
71
|
+
};
|
|
72
|
+
const borderWidthStyle = vertical ? {
|
|
73
|
+
borderRightWidth: borderWidth
|
|
74
|
+
} : {
|
|
75
|
+
borderBottomWidth: borderWidth
|
|
76
|
+
};
|
|
77
|
+
const containerStyle = (0, _styles.css)([insetStyle, marginStyle, styles.container, vertical ? styles.column : styles.row, childrenProp ? undefined : borderColorStyle, childrenProp ? undefined : borderWidthStyle, style]);
|
|
78
|
+
const dividerStyle = (0, _styles.css)([borderColorStyle, borderWidthStyle, styles.divider]);
|
|
79
|
+
const dividerMarginSize = theme.spacing(marginBetweenChildren);
|
|
80
|
+
const startDividerStyle = {
|
|
81
|
+
display: elementAlign !== 'start' ? 'flex' : 'none',
|
|
82
|
+
...(vertical ? {
|
|
83
|
+
marginBottom: dividerMarginSize
|
|
84
|
+
} : {
|
|
85
|
+
marginRight: dividerMarginSize
|
|
86
|
+
})
|
|
87
|
+
};
|
|
88
|
+
const endDividerStyle = {
|
|
89
|
+
display: elementAlign !== 'end' ? 'flex' : 'none',
|
|
90
|
+
...(vertical ? {
|
|
91
|
+
marginTop: dividerMarginSize
|
|
92
|
+
} : {
|
|
93
|
+
marginLeft: dividerMarginSize
|
|
94
|
+
})
|
|
95
|
+
};
|
|
96
|
+
const fontStyle = (0, _styles.createFontStyle)(theme, {
|
|
97
|
+
selector: typo => typo.caption2,
|
|
98
|
+
color: fontColor
|
|
99
|
+
});
|
|
100
|
+
const element = typeof childrenProp === 'string' ? /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
|
|
101
|
+
style: (0, _styles.css)(fontStyle)
|
|
102
|
+
}, childrenProp) : childrenProp;
|
|
103
|
+
const children = childrenProp ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
104
|
+
style: (0, _styles.css)([dividerStyle, startDividerStyle])
|
|
105
|
+
}), element, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
106
|
+
style: (0, _styles.css)([dividerStyle, endDividerStyle])
|
|
107
|
+
})) : null;
|
|
108
|
+
return /*#__PURE__*/_react.default.createElement(_reactNative.View, _extends({
|
|
109
|
+
style: containerStyle
|
|
110
|
+
}, otherProps), children);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
;
|
|
114
|
+
//# sourceMappingURL=LegacyDivider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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","border","default","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":["LegacyDivider.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 './LegacyDividerProps';\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 : color === 'border'\n ? theme.palette.border.default\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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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sources":["LegacyDividerProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { CommonComponentColor, OverridableComponentProps } from '../types';\n\nexport type DividerColor = 'divider' | 'border' | 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":""}
|
|
@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
Object.defineProperty(exports, "default", {
|
|
7
7
|
enumerable: true,
|
|
8
8
|
get: function () {
|
|
9
|
-
return
|
|
9
|
+
return _LegacyDivider.default;
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
12
|
|
|
13
|
-
var
|
|
13
|
+
var _LegacyDivider = _interopRequireDefault(require("./LegacyDivider"));
|
|
14
14
|
|
|
15
15
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
16
16
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './
|
|
1
|
+
{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './LegacyDivider';\nexport type { default as DividerProps } from './LegacyDividerProps';\n"],"mappings":";;;;;;;;;;;;AAAA"}
|
|
@@ -9,12 +9,6 @@ Object.defineProperty(exports, "ANIMATION_TYPE", {
|
|
|
9
9
|
return _ModalProps.ANIMATION_TYPE;
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
|
-
Object.defineProperty(exports, "SimpleBackdrop", {
|
|
13
|
-
enumerable: true,
|
|
14
|
-
get: function () {
|
|
15
|
-
return _SimpleBackdrop.default;
|
|
16
|
-
}
|
|
17
|
-
});
|
|
18
12
|
Object.defineProperty(exports, "createModalCloseEvent", {
|
|
19
13
|
enumerable: true,
|
|
20
14
|
get: function () {
|
|
@@ -30,12 +24,8 @@ Object.defineProperty(exports, "default", {
|
|
|
30
24
|
|
|
31
25
|
var _Modal = _interopRequireWildcard(require("./Modal"));
|
|
32
26
|
|
|
33
|
-
var _SimpleBackdrop = _interopRequireDefault(require("./SimpleBackdrop"));
|
|
34
|
-
|
|
35
27
|
var _ModalProps = require("./ModalProps");
|
|
36
28
|
|
|
37
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
38
|
-
|
|
39
29
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
40
30
|
|
|
41
31
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default, createModalCloseEvent } from './Modal';\nexport
|
|
1
|
+
{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default, createModalCloseEvent } from './Modal';\nexport type { ModalCloseEvent } from './Modal';\nexport type { default as ModalProps, AnimationUnit } from './ModalProps';\nexport { ANIMATION_TYPE } from './ModalProps';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAGA"}
|
package/build/commonjs/index.js
CHANGED
|
@@ -39,7 +39,6 @@ var _exportNames = {
|
|
|
39
39
|
MenuItem: true,
|
|
40
40
|
Modal: true,
|
|
41
41
|
createModalCloseEvent: true,
|
|
42
|
-
SimpleBackdrop: true,
|
|
43
42
|
Pagination: true,
|
|
44
43
|
PaginationItem: true,
|
|
45
44
|
Paper: true,
|
|
@@ -308,12 +307,6 @@ Object.defineProperty(exports, "Row", {
|
|
|
308
307
|
return _Row.default;
|
|
309
308
|
}
|
|
310
309
|
});
|
|
311
|
-
Object.defineProperty(exports, "SimpleBackdrop", {
|
|
312
|
-
enumerable: true,
|
|
313
|
-
get: function () {
|
|
314
|
-
return _Modal.SimpleBackdrop;
|
|
315
|
-
}
|
|
316
|
-
});
|
|
317
310
|
Object.defineProperty(exports, "Slide", {
|
|
318
311
|
enumerable: true,
|
|
319
312
|
get: function () {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from './styles';\n\nexport * from './types';\n\nexport * from './hooks';\n\nexport * from './utils';\n\nexport * from './store';\n\nexport { default as Accordion } from './Accordion';\nexport * from './Accordion';\n\nexport { default as AppBar } from './AppBar';\nexport * from './AppBar';\n\nexport { default as AspectRatio } from './AspectRatio';\nexport * from './AspectRatio';\n\nexport { default as Avatar } from './Avatar';\nexport * from './Avatar';\n\nexport { default as Badge } from './Badge';\nexport * from './Badge';\n\nexport { default as Button } from './Button';\nexport * from './Button';\n\nexport { default as ButtonBase } from './ButtonBase';\nexport * from './ButtonBase';\n\nexport { default as Card } from './Card';\nexport * from './Card';\n\nexport { default as CardActions } from './CardActions';\nexport * from './CardActions';\n\nexport { default as CardContent } from './CardContent';\nexport * from './CardContent';\n\nexport { default as CardMedia } from './CardMedia';\nexport * from './CardMedia';\n\nexport { default as Checkbox } from './Checkbox';\nexport * from './Checkbox';\n\nexport { default as Chip } from './Chip';\nexport * from './Chip';\n\nexport { default as CircularProgress } from './CircularProgress';\nexport * from './CircularProgress';\n\nexport { default as Column } from './Column';\nexport * from './Column';\n\nexport { default as Dialog } from './Dialog';\nexport * from './Dialog';\n\nexport { default as DialogActions } from './DialogActions';\nexport * from './DialogActions';\n\nexport { default as DialogContent } from './DialogContent';\nexport * from './DialogContent';\n\nexport { default as DialogMedia } from './DialogMedia';\nexport * from './DialogMedia';\n\nexport { default as DialogTitle } from './DialogTitle';\nexport * from './DialogTitle';\n\nexport { default as Divider } from './Divider';\nexport * from './Divider';\n\nexport { default as Fab } from './Fab';\nexport * from './Fab';\n\nexport { default as IconButton } from './IconButton';\nexport * from './IconButton';\n\nexport { default as Image } from './Image';\nexport * from './Image';\n\nexport * from './ImageCore';\n\nexport { default as Link } from './Link';\nexport * from './Link';\n\nexport { default as List } from './List';\nexport * from './List';\n\nexport { default as ListItem } from './ListItem';\nexport * from './ListItem';\n\nexport { default as ListItemIcon } from './ListItemIcon';\nexport * from './ListItemIcon';\n\nexport { default as ListItemSecondaryAction } from './ListItemSecondaryAction';\nexport * from './ListItemSecondaryAction';\n\nexport { default as ListItemText } from './ListItemText';\nexport * from './ListItemText';\n\nexport { default as ListSubheader } from './ListSubheader';\nexport * from './ListSubheader';\n\nexport { default as Menu } from './Menu';\nexport * from './Menu';\n\nexport { default as MenuItem } from './MenuItem';\nexport * from './MenuItem';\n\nexport { default as Modal, createModalCloseEvent
|
|
1
|
+
{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from './styles';\n\nexport * from './types';\n\nexport * from './hooks';\n\nexport * from './utils';\n\nexport * from './store';\n\nexport { default as Accordion } from './Accordion';\nexport * from './Accordion';\n\nexport { default as AppBar } from './AppBar';\nexport * from './AppBar';\n\nexport { default as AspectRatio } from './AspectRatio';\nexport * from './AspectRatio';\n\nexport { default as Avatar } from './Avatar';\nexport * from './Avatar';\n\nexport { default as Badge } from './Badge';\nexport * from './Badge';\n\nexport { default as Button } from './Button';\nexport * from './Button';\n\nexport { default as ButtonBase } from './ButtonBase';\nexport * from './ButtonBase';\n\nexport { default as Card } from './Card';\nexport * from './Card';\n\nexport { default as CardActions } from './CardActions';\nexport * from './CardActions';\n\nexport { default as CardContent } from './CardContent';\nexport * from './CardContent';\n\nexport { default as CardMedia } from './CardMedia';\nexport * from './CardMedia';\n\nexport { default as Checkbox } from './Checkbox';\nexport * from './Checkbox';\n\nexport { default as Chip } from './Chip';\nexport * from './Chip';\n\nexport { default as CircularProgress } from './CircularProgress';\nexport * from './CircularProgress';\n\nexport { default as Column } from './Column';\nexport * from './Column';\n\nexport { default as Dialog } from './Dialog';\nexport * from './Dialog';\n\nexport { default as DialogActions } from './DialogActions';\nexport * from './DialogActions';\n\nexport { default as DialogContent } from './DialogContent';\nexport * from './DialogContent';\n\nexport { default as DialogMedia } from './DialogMedia';\nexport * from './DialogMedia';\n\nexport { default as DialogTitle } from './DialogTitle';\nexport * from './DialogTitle';\n\nexport { default as Divider } from './Divider';\nexport * from './Divider';\n\nexport { default as Fab } from './Fab';\nexport * from './Fab';\n\nexport { default as IconButton } from './IconButton';\nexport * from './IconButton';\n\nexport { default as Image } from './Image';\nexport * from './Image';\n\nexport * from './ImageCore';\n\nexport { default as Link } from './Link';\nexport * from './Link';\n\nexport { default as List } from './List';\nexport * from './List';\n\nexport { default as ListItem } from './ListItem';\nexport * from './ListItem';\n\nexport { default as ListItemIcon } from './ListItemIcon';\nexport * from './ListItemIcon';\n\nexport { default as ListItemSecondaryAction } from './ListItemSecondaryAction';\nexport * from './ListItemSecondaryAction';\n\nexport { default as ListItemText } from './ListItemText';\nexport * from './ListItemText';\n\nexport { default as ListSubheader } from './ListSubheader';\nexport * from './ListSubheader';\n\nexport { default as Menu } from './Menu';\nexport * from './Menu';\n\nexport { default as MenuItem } from './MenuItem';\nexport * from './MenuItem';\n\nexport { default as Modal, createModalCloseEvent } from './Modal';\nexport type { ModalCloseEvent } from './Modal';\nexport * from './Modal';\n\nexport { default as Pagination } from './Pagination';\nexport * from './Pagination';\n\nexport { default as PaginationItem } from './PaginationItem';\nexport * from './PaginationItem';\n\nexport { default as Paper } from './Paper';\nexport * from './Paper';\n\nexport { default as Portal } from './Portal';\nexport * from './Portal';\n\nexport { default as Radio } from './Radio';\nexport * from './Radio';\n\nexport { default as RadioGroup } from './RadioGroup';\nexport * from './RadioGroup';\n\nexport { default as Row } from './Row';\nexport * from './Row';\n\nexport { default as Slide } from './Slide';\nexport * from './Slide';\n\nexport { default as Slider } from './Slider';\nexport * from './Slider';\n\nexport { default as Snackbar } from './Snackbar';\nexport * from './Snackbar';\n\nexport { default as SnackbarContent } from './SnackbarContent';\nexport * from './SnackbarContent';\n\nexport { default as Spacer } from './Spacer';\nexport * from './Spacer';\n\nexport { default as SvgIcon } from './SvgIcon';\nexport * from './SvgIcon';\n\nexport { default as Switch } from './Switch';\nexport * from './Switch';\n\nexport { default as Tab } from './Tab';\nexport * from './Tab';\n\nexport { default as TabBase } from './TabBase';\nexport * from './TabBase';\n\nexport { default as Tabs } from './Tabs';\nexport * from './Tabs';\n\nexport { default as TextField } from './TextField';\nexport * from './TextField';\n\nexport { default as Toolbar } from './Toolbar';\nexport * from './Toolbar';\n\nexport { default as Tooltip } from './Tooltip';\nexport * from './Tooltip';\n\nexport { default as Typography } from './Typography';\nexport * from './Typography';\n\nexport * from './animated';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AAEA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
|
|
@@ -18,21 +18,34 @@ const styles = StyleSheet.create({
|
|
|
18
18
|
flexGrow: 1
|
|
19
19
|
}
|
|
20
20
|
});
|
|
21
|
+
|
|
22
|
+
function selectBorderColor(theme, variant, vertical) {
|
|
23
|
+
switch (variant) {
|
|
24
|
+
default:
|
|
25
|
+
case 'base':
|
|
26
|
+
return vertical ? theme.palette.border.weaker : theme.palette.border.weak;
|
|
27
|
+
|
|
28
|
+
case 'strong':
|
|
29
|
+
return vertical ? theme.palette.border.weak : theme.palette.border.base;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
21
33
|
export default function Divider(props) {
|
|
22
34
|
const {
|
|
23
|
-
borderWidth
|
|
35
|
+
borderWidth: borderWidthProp,
|
|
24
36
|
children: childrenProp,
|
|
25
|
-
color = 'divider',
|
|
26
37
|
elementAlign = 'center',
|
|
27
38
|
inset = 0,
|
|
28
39
|
marginBetweenChildren = 2,
|
|
29
40
|
style,
|
|
41
|
+
variant = 'base',
|
|
30
42
|
vertical = false,
|
|
31
43
|
...otherProps
|
|
32
44
|
} = props;
|
|
33
45
|
const theme = useTheme();
|
|
34
|
-
const
|
|
35
|
-
const
|
|
46
|
+
const borderWidth = borderWidthProp ?? (vertical ? 1 : 0.5);
|
|
47
|
+
const fontColor = theme.palette.text.weak;
|
|
48
|
+
const borderColor = selectBorderColor(theme, variant, vertical);
|
|
36
49
|
const marginSize = theme.spacing(1);
|
|
37
50
|
const insetSize = theme.spacing(inset);
|
|
38
51
|
const marginLeft = marginSize;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Text","View","createFontStyle","css","StyleSheet","useTheme","styles","create","container","alignSelf","alignItems","row","flexDirection","column","divider","flexGrow","
|
|
1
|
+
{"version":3,"names":["React","Text","View","createFontStyle","css","StyleSheet","useTheme","styles","create","container","alignSelf","alignItems","row","flexDirection","column","divider","flexGrow","selectBorderColor","theme","variant","vertical","palette","border","weaker","weak","base","Divider","props","borderWidth","borderWidthProp","children","childrenProp","elementAlign","inset","marginBetweenChildren","style","otherProps","fontColor","text","borderColor","marginSize","spacing","insetSize","marginLeft","marginRight","marginTop","marginBottom","marginStyle","insetStyle","borderColorStyle","borderWidthStyle","borderRightWidth","borderBottomWidth","containerStyle","undefined","dividerStyle","dividerMarginSize","startDividerStyle","display","endDividerStyle","fontStyle","selector","typo","caption2","color","element"],"sources":["Divider.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport type { Theme } from '@fountain-ui/styles';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport { ExtendedStyle } from '../types';\nimport type DividerProps from './DividerProps';\nimport type { DividerVariant } from './DividerProps';\n\nconst styles = StyleSheet.create({\n container: {\n alignSelf: 'stretch',\n alignItems: 'center',\n },\n row: {\n flexDirection: 'row',\n },\n column: {\n flexDirection: 'column',\n },\n divider: {\n flexGrow: 1,\n },\n});\n\nfunction selectBorderColor(theme: Theme, variant: DividerVariant, vertical: boolean) {\n switch (variant) {\n default:\n case 'base':\n return vertical ? theme.palette.border.weaker : theme.palette.border.weak;\n case 'strong':\n return vertical ? theme.palette.border.weak : theme.palette.border.base;\n }\n}\n\nexport default function Divider(props: DividerProps) {\n const {\n borderWidth: borderWidthProp,\n children: childrenProp,\n elementAlign = 'center',\n inset = 0,\n marginBetweenChildren = 2,\n style,\n variant = 'base' as DividerVariant,\n vertical = false,\n ...otherProps\n } = props;\n\n const theme = useTheme();\n\n const borderWidth = borderWidthProp ?? (vertical ? 1 : 0.5);\n const fontColor = theme.palette.text.weak;\n const borderColor = selectBorderColor(theme, variant, vertical);\n const marginSize = theme.spacing(1);\n const insetSize = theme.spacing(inset);\n\n const marginLeft = marginSize;\n const marginRight = marginSize;\n const marginTop = marginSize;\n const marginBottom = marginSize;\n\n const marginStyle = vertical\n ? { marginLeft, marginRight }\n : { marginTop, marginBottom };\n\n const insetStyle = vertical\n ? { marginTop: insetSize, marginBottom: insetSize }\n : { marginLeft: insetSize, marginRight: insetSize };\n\n const borderColorStyle = { borderColor };\n const borderWidthStyle = (vertical ? { borderRightWidth: borderWidth } : { borderBottomWidth: borderWidth });\n\n const containerStyle = css([\n insetStyle,\n marginStyle,\n styles.container,\n vertical ? styles.column : styles.row,\n childrenProp ? undefined : borderColorStyle,\n childrenProp ? undefined : borderWidthStyle,\n style,\n ]);\n\n const dividerStyle = css([\n borderColorStyle,\n borderWidthStyle,\n styles.divider,\n ]);\n\n const dividerMarginSize = theme.spacing(marginBetweenChildren);\n const startDividerStyle: ExtendedStyle = {\n display: elementAlign !== 'start' ? 'flex' : 'none',\n ...(vertical ? { marginBottom: dividerMarginSize } : { marginRight: dividerMarginSize }),\n };\n const endDividerStyle: ExtendedStyle = {\n display: elementAlign !== 'end' ? 'flex' : 'none',\n ...(vertical ? { marginTop: dividerMarginSize } : { marginLeft: dividerMarginSize }),\n };\n\n const fontStyle = createFontStyle(theme, {\n selector: (typo) => typo.caption2,\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 {
|
|
1
|
+
{"version":3,"names":["elementAligns","dividerVariants"],"sources":["DividerProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\n\nexport const elementAligns = ['start', 'center', 'end'] as const;\nexport type ElementAlign = typeof elementAligns[number];\n\nexport const dividerVariants = ['base', 'strong'] as const;\nexport type DividerVariant = typeof dividerVariants[number];\n\nexport default interface DividerProps extends OverridableComponentProps<ViewProps, {\n /**\n * The content of the component.\n */\n children?: React.ReactNode;\n\n /**\n * The size of the inset. It works as a multiplier factor based on spacing system.\n * @default 0\n */\n inset?: number;\n\n /**\n * If `true`, the divider orientation is set to vertical.\n * @default false\n */\n vertical?: boolean;\n\n /**\n * The size of margin between child element and the divider. It works as a multiplier factor based on spacing system.\n * @default 2\n */\n marginBetweenChildren?: number;\n\n /**\n * The size of border width. It works as an actual pixel-based border width value of a divider.\n * @default if vertical is true 1, otherwise 0.5\n */\n borderWidth?: number;\n\n /**\n * Set position of children.\n * @default center\n */\n elementAlign?: ElementAlign;\n\n /**\n * Select the style of the divider based on this value.\n * @default base\n */\n variant?: DividerVariant;\n}> {}\n"],"mappings":"AAIA,OAAO,MAAMA,aAAa,GAAG,CAAC,OAAD,EAAU,QAAV,EAAoB,KAApB,CAAtB;AAGP,OAAO,MAAMC,eAAe,GAAG,CAAC,MAAD,EAAS,QAAT,CAAxB"}
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { Text, View } from 'react-native';
|
|
5
|
+
import { createFontStyle, css, StyleSheet, useTheme } from '../styles';
|
|
6
|
+
const styles = StyleSheet.create({
|
|
7
|
+
container: {
|
|
8
|
+
alignSelf: 'stretch',
|
|
9
|
+
alignItems: 'center'
|
|
10
|
+
},
|
|
11
|
+
row: {
|
|
12
|
+
flexDirection: 'row'
|
|
13
|
+
},
|
|
14
|
+
column: {
|
|
15
|
+
flexDirection: 'column'
|
|
16
|
+
},
|
|
17
|
+
divider: {
|
|
18
|
+
flexGrow: 1
|
|
19
|
+
}
|
|
20
|
+
});
|
|
21
|
+
export default function Divider(props) {
|
|
22
|
+
const {
|
|
23
|
+
borderWidth = 1,
|
|
24
|
+
children: childrenProp,
|
|
25
|
+
color = 'divider',
|
|
26
|
+
elementAlign = 'center',
|
|
27
|
+
inset = 0,
|
|
28
|
+
marginBetweenChildren = 2,
|
|
29
|
+
style,
|
|
30
|
+
vertical = false,
|
|
31
|
+
...otherProps
|
|
32
|
+
} = props;
|
|
33
|
+
const theme = useTheme();
|
|
34
|
+
const fontColor = theme.palette.text.secondary;
|
|
35
|
+
const borderColor = color === 'divider' ? theme.palette.divider : color === 'border' ? theme.palette.border.default : theme.palette[color].main;
|
|
36
|
+
const marginSize = theme.spacing(1);
|
|
37
|
+
const insetSize = theme.spacing(inset);
|
|
38
|
+
const marginLeft = marginSize;
|
|
39
|
+
const marginRight = marginSize;
|
|
40
|
+
const marginTop = marginSize;
|
|
41
|
+
const marginBottom = marginSize;
|
|
42
|
+
const marginStyle = vertical ? {
|
|
43
|
+
marginLeft,
|
|
44
|
+
marginRight
|
|
45
|
+
} : {
|
|
46
|
+
marginTop,
|
|
47
|
+
marginBottom
|
|
48
|
+
};
|
|
49
|
+
const insetStyle = vertical ? {
|
|
50
|
+
marginTop: insetSize,
|
|
51
|
+
marginBottom: insetSize
|
|
52
|
+
} : {
|
|
53
|
+
marginLeft: insetSize,
|
|
54
|
+
marginRight: insetSize
|
|
55
|
+
};
|
|
56
|
+
const borderColorStyle = {
|
|
57
|
+
borderColor
|
|
58
|
+
};
|
|
59
|
+
const borderWidthStyle = vertical ? {
|
|
60
|
+
borderRightWidth: borderWidth
|
|
61
|
+
} : {
|
|
62
|
+
borderBottomWidth: borderWidth
|
|
63
|
+
};
|
|
64
|
+
const containerStyle = css([insetStyle, marginStyle, styles.container, vertical ? styles.column : styles.row, childrenProp ? undefined : borderColorStyle, childrenProp ? undefined : borderWidthStyle, style]);
|
|
65
|
+
const dividerStyle = css([borderColorStyle, borderWidthStyle, styles.divider]);
|
|
66
|
+
const dividerMarginSize = theme.spacing(marginBetweenChildren);
|
|
67
|
+
const startDividerStyle = {
|
|
68
|
+
display: elementAlign !== 'start' ? 'flex' : 'none',
|
|
69
|
+
...(vertical ? {
|
|
70
|
+
marginBottom: dividerMarginSize
|
|
71
|
+
} : {
|
|
72
|
+
marginRight: dividerMarginSize
|
|
73
|
+
})
|
|
74
|
+
};
|
|
75
|
+
const endDividerStyle = {
|
|
76
|
+
display: elementAlign !== 'end' ? 'flex' : 'none',
|
|
77
|
+
...(vertical ? {
|
|
78
|
+
marginTop: dividerMarginSize
|
|
79
|
+
} : {
|
|
80
|
+
marginLeft: dividerMarginSize
|
|
81
|
+
})
|
|
82
|
+
};
|
|
83
|
+
const fontStyle = createFontStyle(theme, {
|
|
84
|
+
selector: typo => typo.caption2,
|
|
85
|
+
color: fontColor
|
|
86
|
+
});
|
|
87
|
+
const element = typeof childrenProp === 'string' ? /*#__PURE__*/React.createElement(Text, {
|
|
88
|
+
style: css(fontStyle)
|
|
89
|
+
}, childrenProp) : childrenProp;
|
|
90
|
+
const children = childrenProp ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
|
|
91
|
+
style: css([dividerStyle, startDividerStyle])
|
|
92
|
+
}), element, /*#__PURE__*/React.createElement(View, {
|
|
93
|
+
style: css([dividerStyle, endDividerStyle])
|
|
94
|
+
})) : null;
|
|
95
|
+
return /*#__PURE__*/React.createElement(View, _extends({
|
|
96
|
+
style: containerStyle
|
|
97
|
+
}, otherProps), children);
|
|
98
|
+
}
|
|
99
|
+
;
|
|
100
|
+
//# sourceMappingURL=LegacyDivider.js.map
|
|
@@ -0,0 +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","elementAlign","inset","marginBetweenChildren","style","vertical","otherProps","theme","fontColor","palette","text","secondary","borderColor","border","default","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":["LegacyDivider.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 './LegacyDividerProps';\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 : color === 'border'\n ? theme.palette.border.default\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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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sources":["LegacyDividerProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { CommonComponentColor, OverridableComponentProps } from '../types';\n\nexport type DividerColor = 'divider' | 'border' | 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":""}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { default } from './
|
|
1
|
+
export { default } from './LegacyDivider';
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["default"],"sources":["index.ts"],"sourcesContent":["export { default } from './
|
|
1
|
+
{"version":3,"names":["default"],"sources":["index.ts"],"sourcesContent":["export { default } from './LegacyDivider';\nexport type { default as DividerProps } from './LegacyDividerProps';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,iBAAxB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["default","createModalCloseEvent","
|
|
1
|
+
{"version":3,"names":["default","createModalCloseEvent","ANIMATION_TYPE"],"sources":["index.ts"],"sourcesContent":["export { default, createModalCloseEvent } from './Modal';\nexport type { ModalCloseEvent } from './Modal';\nexport type { default as ModalProps, AnimationUnit } from './ModalProps';\nexport { ANIMATION_TYPE } from './ModalProps';\n"],"mappings":"AAAA,SAASA,OAAT,EAAkBC,qBAAlB,QAA+C,SAA/C;AAGA,SAASC,cAAT,QAA+B,cAA/B"}
|
package/build/module/index.js
CHANGED
|
@@ -70,7 +70,7 @@ export { default as Menu } from './Menu';
|
|
|
70
70
|
export * from './Menu';
|
|
71
71
|
export { default as MenuItem } from './MenuItem';
|
|
72
72
|
export * from './MenuItem';
|
|
73
|
-
export { default as Modal, createModalCloseEvent
|
|
73
|
+
export { default as Modal, createModalCloseEvent } from './Modal';
|
|
74
74
|
export * from './Modal';
|
|
75
75
|
export { default as Pagination } from './Pagination';
|
|
76
76
|
export * from './Pagination';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["default","Accordion","AppBar","AspectRatio","Avatar","Badge","Button","ButtonBase","Card","CardActions","CardContent","CardMedia","Checkbox","Chip","CircularProgress","Column","Dialog","DialogActions","DialogContent","DialogMedia","DialogTitle","Divider","Fab","IconButton","Image","Link","List","ListItem","ListItemIcon","ListItemSecondaryAction","ListItemText","ListSubheader","Menu","MenuItem","Modal","createModalCloseEvent","
|
|
1
|
+
{"version":3,"names":["default","Accordion","AppBar","AspectRatio","Avatar","Badge","Button","ButtonBase","Card","CardActions","CardContent","CardMedia","Checkbox","Chip","CircularProgress","Column","Dialog","DialogActions","DialogContent","DialogMedia","DialogTitle","Divider","Fab","IconButton","Image","Link","List","ListItem","ListItemIcon","ListItemSecondaryAction","ListItemText","ListSubheader","Menu","MenuItem","Modal","createModalCloseEvent","Pagination","PaginationItem","Paper","Portal","Radio","RadioGroup","Row","Slide","Slider","Snackbar","SnackbarContent","Spacer","SvgIcon","Switch","Tab","TabBase","Tabs","TextField","Toolbar","Tooltip","Typography"],"sources":["index.ts"],"sourcesContent":["export * from './styles';\n\nexport * from './types';\n\nexport * from './hooks';\n\nexport * from './utils';\n\nexport * from './store';\n\nexport { default as Accordion } from './Accordion';\nexport * from './Accordion';\n\nexport { default as AppBar } from './AppBar';\nexport * from './AppBar';\n\nexport { default as AspectRatio } from './AspectRatio';\nexport * from './AspectRatio';\n\nexport { default as Avatar } from './Avatar';\nexport * from './Avatar';\n\nexport { default as Badge } from './Badge';\nexport * from './Badge';\n\nexport { default as Button } from './Button';\nexport * from './Button';\n\nexport { default as ButtonBase } from './ButtonBase';\nexport * from './ButtonBase';\n\nexport { default as Card } from './Card';\nexport * from './Card';\n\nexport { default as CardActions } from './CardActions';\nexport * from './CardActions';\n\nexport { default as CardContent } from './CardContent';\nexport * from './CardContent';\n\nexport { default as CardMedia } from './CardMedia';\nexport * from './CardMedia';\n\nexport { default as Checkbox } from './Checkbox';\nexport * from './Checkbox';\n\nexport { default as Chip } from './Chip';\nexport * from './Chip';\n\nexport { default as CircularProgress } from './CircularProgress';\nexport * from './CircularProgress';\n\nexport { default as Column } from './Column';\nexport * from './Column';\n\nexport { default as Dialog } from './Dialog';\nexport * from './Dialog';\n\nexport { default as DialogActions } from './DialogActions';\nexport * from './DialogActions';\n\nexport { default as DialogContent } from './DialogContent';\nexport * from './DialogContent';\n\nexport { default as DialogMedia } from './DialogMedia';\nexport * from './DialogMedia';\n\nexport { default as DialogTitle } from './DialogTitle';\nexport * from './DialogTitle';\n\nexport { default as Divider } from './Divider';\nexport * from './Divider';\n\nexport { default as Fab } from './Fab';\nexport * from './Fab';\n\nexport { default as IconButton } from './IconButton';\nexport * from './IconButton';\n\nexport { default as Image } from './Image';\nexport * from './Image';\n\nexport * from './ImageCore';\n\nexport { default as Link } from './Link';\nexport * from './Link';\n\nexport { default as List } from './List';\nexport * from './List';\n\nexport { default as ListItem } from './ListItem';\nexport * from './ListItem';\n\nexport { default as ListItemIcon } from './ListItemIcon';\nexport * from './ListItemIcon';\n\nexport { default as ListItemSecondaryAction } from './ListItemSecondaryAction';\nexport * from './ListItemSecondaryAction';\n\nexport { default as ListItemText } from './ListItemText';\nexport * from './ListItemText';\n\nexport { default as ListSubheader } from './ListSubheader';\nexport * from './ListSubheader';\n\nexport { default as Menu } from './Menu';\nexport * from './Menu';\n\nexport { default as MenuItem } from './MenuItem';\nexport * from './MenuItem';\n\nexport { default as Modal, createModalCloseEvent } from './Modal';\nexport type { ModalCloseEvent } from './Modal';\nexport * from './Modal';\n\nexport { default as Pagination } from './Pagination';\nexport * from './Pagination';\n\nexport { default as PaginationItem } from './PaginationItem';\nexport * from './PaginationItem';\n\nexport { default as Paper } from './Paper';\nexport * from './Paper';\n\nexport { default as Portal } from './Portal';\nexport * from './Portal';\n\nexport { default as Radio } from './Radio';\nexport * from './Radio';\n\nexport { default as RadioGroup } from './RadioGroup';\nexport * from './RadioGroup';\n\nexport { default as Row } from './Row';\nexport * from './Row';\n\nexport { default as Slide } from './Slide';\nexport * from './Slide';\n\nexport { default as Slider } from './Slider';\nexport * from './Slider';\n\nexport { default as Snackbar } from './Snackbar';\nexport * from './Snackbar';\n\nexport { default as SnackbarContent } from './SnackbarContent';\nexport * from './SnackbarContent';\n\nexport { default as Spacer } from './Spacer';\nexport * from './Spacer';\n\nexport { default as SvgIcon } from './SvgIcon';\nexport * from './SvgIcon';\n\nexport { default as Switch } from './Switch';\nexport * from './Switch';\n\nexport { default as Tab } from './Tab';\nexport * from './Tab';\n\nexport { default as TabBase } from './TabBase';\nexport * from './TabBase';\n\nexport { default as Tabs } from './Tabs';\nexport * from './Tabs';\n\nexport { default as TextField } from './TextField';\nexport * from './TextField';\n\nexport { default as Toolbar } from './Toolbar';\nexport * from './Toolbar';\n\nexport { default as Tooltip } from './Tooltip';\nexport * from './Tooltip';\n\nexport { default as Typography } from './Typography';\nexport * from './Typography';\n\nexport * from './animated';\n"],"mappings":"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"}
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { ViewProps } from 'react-native';
|
|
3
|
-
import type {
|
|
4
|
-
export declare
|
|
3
|
+
import type { OverridableComponentProps } from '../types';
|
|
4
|
+
export declare const elementAligns: readonly ["start", "center", "end"];
|
|
5
|
+
export declare type ElementAlign = typeof elementAligns[number];
|
|
6
|
+
export declare const dividerVariants: readonly ["base", "strong"];
|
|
7
|
+
export declare type DividerVariant = typeof dividerVariants[number];
|
|
5
8
|
export default interface DividerProps extends OverridableComponentProps<ViewProps, {
|
|
6
9
|
/**
|
|
7
10
|
* The content of the component.
|
|
@@ -17,11 +20,6 @@ export default interface DividerProps extends OverridableComponentProps<ViewProp
|
|
|
17
20
|
* @default false
|
|
18
21
|
*/
|
|
19
22
|
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
23
|
/**
|
|
26
24
|
* The size of margin between child element and the divider. It works as a multiplier factor based on spacing system.
|
|
27
25
|
* @default 2
|
|
@@ -29,13 +27,18 @@ export default interface DividerProps extends OverridableComponentProps<ViewProp
|
|
|
29
27
|
marginBetweenChildren?: number;
|
|
30
28
|
/**
|
|
31
29
|
* The size of border width. It works as an actual pixel-based border width value of a divider.
|
|
32
|
-
* @default 1
|
|
30
|
+
* @default if vertical is true 1, otherwise 0.5
|
|
33
31
|
*/
|
|
34
32
|
borderWidth?: number;
|
|
35
33
|
/**
|
|
36
34
|
* Set position of children.
|
|
37
35
|
* @default center
|
|
38
36
|
*/
|
|
39
|
-
elementAlign?:
|
|
37
|
+
elementAlign?: ElementAlign;
|
|
38
|
+
/**
|
|
39
|
+
* Select the style of the divider based on this value.
|
|
40
|
+
* @default base
|
|
41
|
+
*/
|
|
42
|
+
variant?: DividerVariant;
|
|
40
43
|
}> {
|
|
41
44
|
}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ViewProps } from 'react-native';
|
|
3
|
+
import type { CommonComponentColor, OverridableComponentProps } from '../types';
|
|
4
|
+
export declare type DividerColor = 'divider' | 'border' | CommonComponentColor;
|
|
5
|
+
export default interface DividerProps extends OverridableComponentProps<ViewProps, {
|
|
6
|
+
/**
|
|
7
|
+
* The content of the component.
|
|
8
|
+
*/
|
|
9
|
+
children?: React.ReactNode;
|
|
10
|
+
/**
|
|
11
|
+
* The size of the inset. It works as a multiplier factor based on spacing system.
|
|
12
|
+
* @default 0
|
|
13
|
+
*/
|
|
14
|
+
inset?: number;
|
|
15
|
+
/**
|
|
16
|
+
* If `true`, the divider orientation is set to vertical.
|
|
17
|
+
* @default false
|
|
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;
|
|
30
|
+
/**
|
|
31
|
+
* The size of border width. It works as an actual pixel-based border width value of a divider.
|
|
32
|
+
* @default 1
|
|
33
|
+
*/
|
|
34
|
+
borderWidth?: number;
|
|
35
|
+
/**
|
|
36
|
+
* Set position of children.
|
|
37
|
+
* @default center
|
|
38
|
+
*/
|
|
39
|
+
elementAlign?: 'start' | 'center' | 'end';
|
|
40
|
+
}> {
|
|
41
|
+
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { default } from './
|
|
2
|
-
export type { default as DividerProps } from './
|
|
1
|
+
export { default } from './LegacyDivider';
|
|
2
|
+
export type { default as DividerProps } from './LegacyDividerProps';
|
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
export { default, createModalCloseEvent } from './Modal';
|
|
2
|
-
export { default as SimpleBackdrop } from './SimpleBackdrop';
|
|
3
|
-
export type { default as SimpleBackdropProps } from './SimpleBackdropProps';
|
|
4
2
|
export type { ModalCloseEvent } from './Modal';
|
|
5
3
|
export type { default as ModalProps, AnimationUnit } from './ModalProps';
|
|
6
4
|
export { ANIMATION_TYPE } from './ModalProps';
|
|
@@ -70,8 +70,8 @@ export { default as Menu } from './Menu';
|
|
|
70
70
|
export * from './Menu';
|
|
71
71
|
export { default as MenuItem } from './MenuItem';
|
|
72
72
|
export * from './MenuItem';
|
|
73
|
-
export { default as Modal, createModalCloseEvent
|
|
74
|
-
export type { ModalCloseEvent
|
|
73
|
+
export { default as Modal, createModalCloseEvent } from './Modal';
|
|
74
|
+
export type { ModalCloseEvent } from './Modal';
|
|
75
75
|
export * from './Modal';
|
|
76
76
|
export { default as Pagination } from './Pagination';
|
|
77
77
|
export * from './Pagination';
|
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.92",
|
|
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": "879eb4620ace81a958583d4240fdc93b32faf8c1"
|
|
71
71
|
}
|
package/src/Divider/Divider.tsx
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Text, View } from 'react-native';
|
|
3
|
+
import type { Theme } from '@fountain-ui/styles';
|
|
3
4
|
import { createFontStyle, css, StyleSheet, useTheme } from '../styles';
|
|
4
5
|
import { ExtendedStyle } from '../types';
|
|
5
6
|
import type DividerProps from './DividerProps';
|
|
7
|
+
import type { DividerVariant } from './DividerProps';
|
|
6
8
|
|
|
7
9
|
const styles = StyleSheet.create({
|
|
8
10
|
container: {
|
|
@@ -20,27 +22,34 @@ const styles = StyleSheet.create({
|
|
|
20
22
|
},
|
|
21
23
|
});
|
|
22
24
|
|
|
25
|
+
function selectBorderColor(theme: Theme, variant: DividerVariant, vertical: boolean) {
|
|
26
|
+
switch (variant) {
|
|
27
|
+
default:
|
|
28
|
+
case 'base':
|
|
29
|
+
return vertical ? theme.palette.border.weaker : theme.palette.border.weak;
|
|
30
|
+
case 'strong':
|
|
31
|
+
return vertical ? theme.palette.border.weak : theme.palette.border.base;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
23
35
|
export default function Divider(props: DividerProps) {
|
|
24
36
|
const {
|
|
25
|
-
borderWidth
|
|
37
|
+
borderWidth: borderWidthProp,
|
|
26
38
|
children: childrenProp,
|
|
27
|
-
color = 'divider',
|
|
28
39
|
elementAlign = 'center',
|
|
29
40
|
inset = 0,
|
|
30
41
|
marginBetweenChildren = 2,
|
|
31
42
|
style,
|
|
43
|
+
variant = 'base' as DividerVariant,
|
|
32
44
|
vertical = false,
|
|
33
45
|
...otherProps
|
|
34
46
|
} = props;
|
|
35
47
|
|
|
36
48
|
const theme = useTheme();
|
|
37
49
|
|
|
38
|
-
const
|
|
39
|
-
const
|
|
40
|
-
|
|
41
|
-
: color === 'border'
|
|
42
|
-
? theme.palette.border.default
|
|
43
|
-
: theme.palette[color].main;
|
|
50
|
+
const borderWidth = borderWidthProp ?? (vertical ? 1 : 0.5);
|
|
51
|
+
const fontColor = theme.palette.text.weak;
|
|
52
|
+
const borderColor = selectBorderColor(theme, variant, vertical);
|
|
44
53
|
const marginSize = theme.spacing(1);
|
|
45
54
|
const insetSize = theme.spacing(inset);
|
|
46
55
|
|
|
@@ -1,8 +1,12 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { ViewProps } from 'react-native';
|
|
3
|
-
import type {
|
|
3
|
+
import type { OverridableComponentProps } from '../types';
|
|
4
4
|
|
|
5
|
-
export
|
|
5
|
+
export const elementAligns = ['start', 'center', 'end'] as const;
|
|
6
|
+
export type ElementAlign = typeof elementAligns[number];
|
|
7
|
+
|
|
8
|
+
export const dividerVariants = ['base', 'strong'] as const;
|
|
9
|
+
export type DividerVariant = typeof dividerVariants[number];
|
|
6
10
|
|
|
7
11
|
export default interface DividerProps extends OverridableComponentProps<ViewProps, {
|
|
8
12
|
/**
|
|
@@ -22,12 +26,6 @@ export default interface DividerProps extends OverridableComponentProps<ViewProp
|
|
|
22
26
|
*/
|
|
23
27
|
vertical?: boolean;
|
|
24
28
|
|
|
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
29
|
/**
|
|
32
30
|
* The size of margin between child element and the divider. It works as a multiplier factor based on spacing system.
|
|
33
31
|
* @default 2
|
|
@@ -36,7 +34,7 @@ export default interface DividerProps extends OverridableComponentProps<ViewProp
|
|
|
36
34
|
|
|
37
35
|
/**
|
|
38
36
|
* The size of border width. It works as an actual pixel-based border width value of a divider.
|
|
39
|
-
* @default 1
|
|
37
|
+
* @default if vertical is true 1, otherwise 0.5
|
|
40
38
|
*/
|
|
41
39
|
borderWidth?: number;
|
|
42
40
|
|
|
@@ -44,5 +42,11 @@ export default interface DividerProps extends OverridableComponentProps<ViewProp
|
|
|
44
42
|
* Set position of children.
|
|
45
43
|
* @default center
|
|
46
44
|
*/
|
|
47
|
-
elementAlign?:
|
|
45
|
+
elementAlign?: ElementAlign;
|
|
46
|
+
|
|
47
|
+
/**
|
|
48
|
+
* Select the style of the divider based on this value.
|
|
49
|
+
* @default base
|
|
50
|
+
*/
|
|
51
|
+
variant?: DividerVariant;
|
|
48
52
|
}> {}
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Text, View } from 'react-native';
|
|
3
|
+
import { createFontStyle, css, StyleSheet, useTheme } from '../styles';
|
|
4
|
+
import { ExtendedStyle } from '../types';
|
|
5
|
+
import type DividerProps from './LegacyDividerProps';
|
|
6
|
+
|
|
7
|
+
const styles = StyleSheet.create({
|
|
8
|
+
container: {
|
|
9
|
+
alignSelf: 'stretch',
|
|
10
|
+
alignItems: 'center',
|
|
11
|
+
},
|
|
12
|
+
row: {
|
|
13
|
+
flexDirection: 'row',
|
|
14
|
+
},
|
|
15
|
+
column: {
|
|
16
|
+
flexDirection: 'column',
|
|
17
|
+
},
|
|
18
|
+
divider: {
|
|
19
|
+
flexGrow: 1,
|
|
20
|
+
},
|
|
21
|
+
});
|
|
22
|
+
|
|
23
|
+
export default function Divider(props: DividerProps) {
|
|
24
|
+
const {
|
|
25
|
+
borderWidth = 1,
|
|
26
|
+
children: childrenProp,
|
|
27
|
+
color = 'divider',
|
|
28
|
+
elementAlign = 'center',
|
|
29
|
+
inset = 0,
|
|
30
|
+
marginBetweenChildren = 2,
|
|
31
|
+
style,
|
|
32
|
+
vertical = false,
|
|
33
|
+
...otherProps
|
|
34
|
+
} = props;
|
|
35
|
+
|
|
36
|
+
const theme = useTheme();
|
|
37
|
+
|
|
38
|
+
const fontColor = theme.palette.text.secondary;
|
|
39
|
+
const borderColor = color === 'divider'
|
|
40
|
+
? theme.palette.divider
|
|
41
|
+
: color === 'border'
|
|
42
|
+
? theme.palette.border.default
|
|
43
|
+
: theme.palette[color].main;
|
|
44
|
+
const marginSize = theme.spacing(1);
|
|
45
|
+
const insetSize = theme.spacing(inset);
|
|
46
|
+
|
|
47
|
+
const marginLeft = marginSize;
|
|
48
|
+
const marginRight = marginSize;
|
|
49
|
+
const marginTop = marginSize;
|
|
50
|
+
const marginBottom = marginSize;
|
|
51
|
+
|
|
52
|
+
const marginStyle = vertical
|
|
53
|
+
? { marginLeft, marginRight }
|
|
54
|
+
: { marginTop, marginBottom };
|
|
55
|
+
|
|
56
|
+
const insetStyle = vertical
|
|
57
|
+
? { marginTop: insetSize, marginBottom: insetSize }
|
|
58
|
+
: { marginLeft: insetSize, marginRight: insetSize };
|
|
59
|
+
|
|
60
|
+
const borderColorStyle = { borderColor };
|
|
61
|
+
const borderWidthStyle = (vertical ? { borderRightWidth: borderWidth } : { borderBottomWidth: borderWidth });
|
|
62
|
+
|
|
63
|
+
const containerStyle = css([
|
|
64
|
+
insetStyle,
|
|
65
|
+
marginStyle,
|
|
66
|
+
styles.container,
|
|
67
|
+
vertical ? styles.column : styles.row,
|
|
68
|
+
childrenProp ? undefined : borderColorStyle,
|
|
69
|
+
childrenProp ? undefined : borderWidthStyle,
|
|
70
|
+
style,
|
|
71
|
+
]);
|
|
72
|
+
|
|
73
|
+
const dividerStyle = css([
|
|
74
|
+
borderColorStyle,
|
|
75
|
+
borderWidthStyle,
|
|
76
|
+
styles.divider,
|
|
77
|
+
]);
|
|
78
|
+
|
|
79
|
+
const dividerMarginSize = theme.spacing(marginBetweenChildren);
|
|
80
|
+
const startDividerStyle: ExtendedStyle = {
|
|
81
|
+
display: elementAlign !== 'start' ? 'flex' : 'none',
|
|
82
|
+
...(vertical ? { marginBottom: dividerMarginSize } : { marginRight: dividerMarginSize }),
|
|
83
|
+
};
|
|
84
|
+
const endDividerStyle: ExtendedStyle = {
|
|
85
|
+
display: elementAlign !== 'end' ? 'flex' : 'none',
|
|
86
|
+
...(vertical ? { marginTop: dividerMarginSize } : { marginLeft: dividerMarginSize }),
|
|
87
|
+
};
|
|
88
|
+
|
|
89
|
+
const fontStyle = createFontStyle(theme, {
|
|
90
|
+
selector: (typo) => typo.caption2,
|
|
91
|
+
color: fontColor,
|
|
92
|
+
});
|
|
93
|
+
|
|
94
|
+
const element = typeof childrenProp === 'string'
|
|
95
|
+
? <Text style={css(fontStyle)}>{childrenProp}</Text>
|
|
96
|
+
: childrenProp;
|
|
97
|
+
|
|
98
|
+
const children = childrenProp ? (
|
|
99
|
+
<React.Fragment>
|
|
100
|
+
<View style={css([dividerStyle, startDividerStyle])}/>
|
|
101
|
+
{element}
|
|
102
|
+
<View style={css([dividerStyle, endDividerStyle])}/>
|
|
103
|
+
</React.Fragment>
|
|
104
|
+
) : null;
|
|
105
|
+
|
|
106
|
+
return (
|
|
107
|
+
<View
|
|
108
|
+
style={containerStyle}
|
|
109
|
+
{...otherProps}
|
|
110
|
+
>
|
|
111
|
+
{children}
|
|
112
|
+
</View>
|
|
113
|
+
);
|
|
114
|
+
};
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ViewProps } from 'react-native';
|
|
3
|
+
import type { CommonComponentColor, OverridableComponentProps } from '../types';
|
|
4
|
+
|
|
5
|
+
export type DividerColor = 'divider' | 'border' | CommonComponentColor;
|
|
6
|
+
|
|
7
|
+
export default interface DividerProps extends OverridableComponentProps<ViewProps, {
|
|
8
|
+
/**
|
|
9
|
+
* The content of the component.
|
|
10
|
+
*/
|
|
11
|
+
children?: React.ReactNode;
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* The size of the inset. It works as a multiplier factor based on spacing system.
|
|
15
|
+
* @default 0
|
|
16
|
+
*/
|
|
17
|
+
inset?: number;
|
|
18
|
+
|
|
19
|
+
/**
|
|
20
|
+
* If `true`, the divider orientation is set to vertical.
|
|
21
|
+
* @default false
|
|
22
|
+
*/
|
|
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;
|
|
36
|
+
|
|
37
|
+
/**
|
|
38
|
+
* The size of border width. It works as an actual pixel-based border width value of a divider.
|
|
39
|
+
* @default 1
|
|
40
|
+
*/
|
|
41
|
+
borderWidth?: number;
|
|
42
|
+
|
|
43
|
+
/**
|
|
44
|
+
* Set position of children.
|
|
45
|
+
* @default center
|
|
46
|
+
*/
|
|
47
|
+
elementAlign?: 'start' | 'center' | 'end';
|
|
48
|
+
}> {}
|
package/src/Divider/index.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { default } from './
|
|
2
|
-
export type { default as DividerProps } from './
|
|
1
|
+
export { default } from './LegacyDivider';
|
|
2
|
+
export type { default as DividerProps } from './LegacyDividerProps';
|
package/src/Modal/index.ts
CHANGED
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
export { default, createModalCloseEvent } from './Modal';
|
|
2
|
-
export { default as SimpleBackdrop } from './SimpleBackdrop'
|
|
3
|
-
export type { default as SimpleBackdropProps } from './SimpleBackdropProps'
|
|
4
2
|
export type { ModalCloseEvent } from './Modal';
|
|
5
3
|
export type { default as ModalProps, AnimationUnit } from './ModalProps';
|
|
6
4
|
export { ANIMATION_TYPE } from './ModalProps';
|
package/src/index.ts
CHANGED
|
@@ -109,8 +109,8 @@ export * from './Menu';
|
|
|
109
109
|
export { default as MenuItem } from './MenuItem';
|
|
110
110
|
export * from './MenuItem';
|
|
111
111
|
|
|
112
|
-
export { default as Modal, createModalCloseEvent
|
|
113
|
-
export type { ModalCloseEvent
|
|
112
|
+
export { default as Modal, createModalCloseEvent } from './Modal';
|
|
113
|
+
export type { ModalCloseEvent } from './Modal';
|
|
114
114
|
export * from './Modal';
|
|
115
115
|
|
|
116
116
|
export { default as Pagination } from './Pagination';
|