@draftbit/core 43.4.15-f2b58e.2 → 43.4.16-caba19.0
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/lib/commonjs/components/Surface.js +14 -2
- package/lib/commonjs/components/Surface.js.map +1 -1
- package/lib/module/components/Picker/PickerTypes.js.map +1 -1
- package/lib/module/components/ProgressCircle.js.map +1 -1
- package/lib/module/components/Surface.js +14 -2
- package/lib/module/components/Surface.js.map +1 -1
- package/lib/module/mappings/Container.js.map +1 -1
- package/package.json +2 -2
- package/src/components/Surface.js +16 -5
- package/src/components/Surface.tsx +16 -5
|
@@ -33,6 +33,7 @@ const Surface = _ref => {
|
|
|
33
33
|
} = _ref;
|
|
34
34
|
const {
|
|
35
35
|
elevation: styleElevation = 3,
|
|
36
|
+
backgroundColor,
|
|
36
37
|
borderRadius,
|
|
37
38
|
overflow,
|
|
38
39
|
height,
|
|
@@ -45,10 +46,21 @@ const Surface = _ref => {
|
|
|
45
46
|
} = theme;
|
|
46
47
|
const elevation = propElevation || styleElevation;
|
|
47
48
|
const evalationStyles = elevation ? (0, _shadow.default)(elevation) : {};
|
|
49
|
+
|
|
50
|
+
const getBackgroundColor = () => {
|
|
51
|
+
if (backgroundColor) {
|
|
52
|
+
return backgroundColor;
|
|
53
|
+
} else if (isDarkTheme && mode === "adaptive") {
|
|
54
|
+
return (0, _overlay.default)(elevation, colors.surface);
|
|
55
|
+
} else {
|
|
56
|
+
return colors.surface;
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
|
|
48
60
|
return /*#__PURE__*/React.createElement(_reactNative.Animated.View, _extends({}, rest, {
|
|
49
61
|
style: [style, {
|
|
50
|
-
backgroundColor:
|
|
51
|
-
overflow: _reactNative.Platform.OS === "web" ? "hidden" : "visible",
|
|
62
|
+
backgroundColor: getBackgroundColor(),
|
|
63
|
+
overflow: _reactNative.Platform.OS === "web" && overflow === "hidden" ? "hidden" : "visible",
|
|
52
64
|
elevation,
|
|
53
65
|
...evalationStyles
|
|
54
66
|
}]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Surface.tsx"],"names":["Surface","elevation","propElevation","style","theme","children","rest","styleElevation","borderRadius","overflow","height","width","StyleSheet","flatten","dark","isDarkTheme","mode","colors","evalationStyles","
|
|
1
|
+
{"version":3,"sources":["Surface.tsx"],"names":["Surface","elevation","propElevation","style","theme","children","rest","styleElevation","backgroundColor","borderRadius","overflow","height","width","StyleSheet","flatten","dark","isDarkTheme","mode","colors","evalationStyles","getBackgroundColor","surface","Platform","OS"],"mappings":";;;;;;;AACA;;AACA;;AASA;;AACA;;AACA;;;;;;;;;;AASA,MAAMA,OAAwB,GAAG,QAM3B;AAAA,MAN4B;AAChCC,IAAAA,SAAS,EAAEC,aADqB;AAEhCC,IAAAA,KAFgC;AAGhCC,IAAAA,KAHgC;AAIhCC,IAAAA,QAJgC;AAKhC,OAAGC;AAL6B,GAM5B;AACJ,QAAM;AACJL,IAAAA,SAAS,EAAEM,cAAc,GAAG,CADxB;AAEJC,IAAAA,eAFI;AAGJC,IAAAA,YAHI;AAIJC,IAAAA,QAJI;AAKJC,IAAAA,MALI;AAMJC,IAAAA;AANI,MAODC,wBAAWC,OAAX,CAAmBX,KAAnB,KAA6B,EAPlC;AASA,QAAM;AAAEY,IAAAA,IAAI,EAAEC,WAAR;AAAqBC,IAAAA,IAArB;AAA2BC,IAAAA;AAA3B,MAAsCd,KAA5C;AAEA,QAAMH,SAAS,GAAGC,aAAa,IAAIK,cAAnC;AAEA,QAAMY,eAAe,GAAGlB,SAAS,GAAG,qBAAOA,SAAP,CAAH,GAAuB,EAAxD;;AAEA,QAAMmB,kBAAkB,GAAG,MAAM;AAC/B,QAAIZ,eAAJ,EAAqB;AACnB,aAAOA,eAAP;AACD,KAFD,MAEO,IAAIQ,WAAW,IAAIC,IAAI,KAAK,UAA5B,EAAwC;AAC7C,aAAO,sBAAQhB,SAAR,EAAmBiB,MAAM,CAACG,OAA1B,CAAP;AACD,KAFM,MAEA;AACL,aAAOH,MAAM,CAACG,OAAd;AACD;AACF,GARD;;AAUA,sBACE,oBAAC,qBAAD,CAAU,IAAV,eACMf,IADN;AAEE,IAAA,KAAK,EAAE,CACLH,KADK,EAEL;AACEK,MAAAA,eAAe,EAAEY,kBAAkB,EADrC;AAEEV,MAAAA,QAAQ,EACNY,sBAASC,EAAT,KAAgB,KAAhB,IAAyBb,QAAQ,KAAK,QAAtC,GACI,QADJ,GAEI,SALR;AAMET,MAAAA,SANF;AAOE,SAAGkB;AAPL,KAFK;AAFT,mBAeE,oBAAC,iBAAD;AACE,IAAA,KAAK,EAAE,CACL;AACET,MAAAA,QADF;AAEED,MAAAA,YAFF;AAGEE,MAAAA,MAHF;AAIEC,MAAAA;AAJF,KADK;AADT,KAUGP,QAVH,CAfF,CADF;AA8BD,CA9DD;;eAgEe,wBAAUL,OAAV,C","sourcesContent":["/* Copied from https://github.com/callstack/react-native-paper/blob/main/src/components/Surface.tsx */\nimport * as React from \"react\";\nimport {\n Animated,\n StyleSheet,\n ViewProps,\n StyleProp,\n ViewStyle,\n View,\n Platform,\n} from \"react-native\";\nimport shadow from \"../styles/shadow\";\nimport overlay from \"../styles/overlay\";\nimport { withTheme } from \"../theming\";\nimport type { Theme } from \"../styles/DefaultTheme\";\n\ntype Props = {\n elevation?: number;\n style?: StyleProp<ViewStyle>;\n theme: Theme;\n} & ViewProps;\n\nconst Surface: React.FC<Props> = ({\n elevation: propElevation,\n style,\n theme,\n children,\n ...rest\n}) => {\n const {\n elevation: styleElevation = 3,\n backgroundColor,\n borderRadius,\n overflow,\n height,\n width,\n } = (StyleSheet.flatten(style) || {}) as ViewStyle;\n\n const { dark: isDarkTheme, mode, colors } = theme;\n\n const elevation = propElevation || styleElevation;\n\n const evalationStyles = elevation ? shadow(elevation) : {};\n\n const getBackgroundColor = () => {\n if (backgroundColor) {\n return backgroundColor;\n } else if (isDarkTheme && mode === \"adaptive\") {\n return overlay(elevation, colors.surface);\n } else {\n return colors.surface;\n }\n };\n\n return (\n <Animated.View\n {...rest}\n style={[\n style,\n {\n backgroundColor: getBackgroundColor(),\n overflow:\n Platform.OS === \"web\" && overflow === \"hidden\"\n ? \"hidden\"\n : \"visible\",\n elevation,\n ...evalationStyles,\n },\n ]}\n >\n <View\n style={[\n {\n overflow,\n borderRadius,\n height,\n width,\n },\n ]}\n >\n {children}\n </View>\n </Animated.View>\n );\n};\n\nexport default withTheme(Surface);\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["ProgressCircle.
|
|
1
|
+
{"version":3,"sources":["ProgressCircle.js"],"names":["React","Text","AnimatedCircularProgress","withTheme","ProgressCircle","progress","style","color","size","showsText","unfilledColor","strokeCap","textStyle","thickness","theme","progressNum","Math","round","tintColor","colors","primary","backgroundColor","secondary","createElement","width","backgroundWidth","fill","rotation","lineCap","fontSize"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,IAAT,QAAqB,cAArB;AACA,OAAOC,wBAAP,MAAqC,4BAArC;AACA,SAASC,SAAT,QAA0B,YAA1B;;AACA,MAAMC,cAAc,GAAG,QAAqJ;AAAA,MAApJ;AAAEC,IAAAA,QAAQ,GAAG,GAAb;AAAkBC,IAAAA,KAAlB;AAAyBC,IAAAA,KAAK,GAAG,SAAjC;AAA4CC,IAAAA,IAAI,GAAG,GAAnD;AAAwDC,IAAAA,SAAS,GAAG,IAApE;AAA0EC,IAAAA,aAA1E;AAAyFC,IAAAA,SAAS,GAAG,MAArG;AAA6GC,IAAAA,SAA7G;AAAwHC,IAAAA,SAAS,GAAG,CAApI;AAAuIC,IAAAA;AAAvI,GAAoJ;AACxK,QAAMC,WAAW,GAAGC,IAAI,CAACC,KAAL,CAAWZ,QAAQ,GAAG,GAAtB,CAApB;AACA,QAAMa,SAAS,GAAGX,KAAK,IAAIO,KAAK,CAACK,MAAN,CAAaC,OAAxC;AACA,QAAMC,eAAe,GAAGX,aAAa,IAAII,KAAK,CAACK,MAAN,CAAaG,SAAtD;AACA,sBAAQtB,KAAK,CAACuB,aAAN,CAAoBrB,wBAApB,EAA8C;AAAEM,IAAAA,IAAI,EAAEA,IAAR;AAAcgB,IAAAA,KAAK,EAAEX,SAArB;AAAgCY,IAAAA,eAAe,EAAEZ,SAAjD;AAA4Da,IAAAA,IAAI,EAAEX,WAAlE;AAA+EG,IAAAA,SAAS,EAAEA,SAA1F;AAAqGG,IAAAA,eAAe,EAAEA,eAAtH;AAAuIM,IAAAA,QAAQ,EAAE,CAAjJ;AAAoJC,IAAAA,OAAO,EAAEjB,SAA7J;AAAwKL,IAAAA,KAAK,EAAEA;AAA/K,GAA9C,EAAuOoB,IAAD,IAAUjB,SAAS,gBAAIT,KAAK,CAACuB,aAAN,CAAoBtB,IAApB,EAA0B;AAAEK,IAAAA,KAAK,EAAE,CAAC;AAAEuB,MAAAA,QAAQ,EAAErB,IAAI,GAAG,KAAnB;AAA0BD,MAAAA,KAAK,EAAEW;AAAjC,KAAD,EAA+CN,SAA/C;AAAT,GAA1B,EACjQI,IAAI,CAACC,KAAL,CAAWS,IAAX,CADiQ,EAEjQ,GAFiQ,CAAJ,GAErP,IAFJ,CAAR;AAGH,CAPD;;AAQA,eAAevB,SAAS,CAACC,cAAD,CAAxB","sourcesContent":["import * as React from \"react\";\nimport { Text } from \"react-native\";\nimport AnimatedCircularProgress from \"./AnimatedCircularProgress\";\nimport { withTheme } from \"../theming\";\nconst ProgressCircle = ({ progress = 0.5, style, color = \"primary\", size = 100, showsText = true, unfilledColor, strokeCap = \"butt\", textStyle, thickness = 1, theme, }) => {\n const progressNum = Math.round(progress * 100);\n const tintColor = color || theme.colors.primary;\n const backgroundColor = unfilledColor || theme.colors.secondary;\n return (React.createElement(AnimatedCircularProgress, { size: size, width: thickness, backgroundWidth: thickness, fill: progressNum, tintColor: tintColor, backgroundColor: backgroundColor, rotation: 0, lineCap: strokeCap, style: style }, (fill) => showsText ? (React.createElement(Text, { style: [{ fontSize: size * 0.275, color: tintColor }, textStyle] },\n Math.round(fill),\n \"%\")) : null));\n};\nexport default withTheme(ProgressCircle);\n"]}
|
|
@@ -17,6 +17,7 @@ const Surface = _ref => {
|
|
|
17
17
|
} = _ref;
|
|
18
18
|
const {
|
|
19
19
|
elevation: styleElevation = 3,
|
|
20
|
+
backgroundColor,
|
|
20
21
|
borderRadius,
|
|
21
22
|
overflow,
|
|
22
23
|
height,
|
|
@@ -29,10 +30,21 @@ const Surface = _ref => {
|
|
|
29
30
|
} = theme;
|
|
30
31
|
const elevation = propElevation || styleElevation;
|
|
31
32
|
const evalationStyles = elevation ? shadow(elevation) : {};
|
|
33
|
+
|
|
34
|
+
const getBackgroundColor = () => {
|
|
35
|
+
if (backgroundColor) {
|
|
36
|
+
return backgroundColor;
|
|
37
|
+
} else if (isDarkTheme && mode === "adaptive") {
|
|
38
|
+
return overlay(elevation, colors.surface);
|
|
39
|
+
} else {
|
|
40
|
+
return colors.surface;
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
|
|
32
44
|
return /*#__PURE__*/React.createElement(Animated.View, _extends({}, rest, {
|
|
33
45
|
style: [style, {
|
|
34
|
-
backgroundColor:
|
|
35
|
-
overflow: Platform.OS === "web" ? "hidden" : "visible",
|
|
46
|
+
backgroundColor: getBackgroundColor(),
|
|
47
|
+
overflow: Platform.OS === "web" && overflow === "hidden" ? "hidden" : "visible",
|
|
36
48
|
elevation,
|
|
37
49
|
...evalationStyles
|
|
38
50
|
}]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Surface.tsx"],"names":["React","Animated","StyleSheet","View","Platform","shadow","overlay","withTheme","Surface","elevation","propElevation","style","theme","children","rest","styleElevation","borderRadius","overflow","height","width","flatten","dark","isDarkTheme","mode","colors","evalationStyles","
|
|
1
|
+
{"version":3,"sources":["Surface.tsx"],"names":["React","Animated","StyleSheet","View","Platform","shadow","overlay","withTheme","Surface","elevation","propElevation","style","theme","children","rest","styleElevation","backgroundColor","borderRadius","overflow","height","width","flatten","dark","isDarkTheme","mode","colors","evalationStyles","getBackgroundColor","surface","OS"],"mappings":";;AAAA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SACEC,QADF,EAEEC,UAFF,EAMEC,IANF,EAOEC,QAPF,QAQO,cARP;AASA,OAAOC,MAAP,MAAmB,kBAAnB;AACA,OAAOC,OAAP,MAAoB,mBAApB;AACA,SAASC,SAAT,QAA0B,YAA1B;;AASA,MAAMC,OAAwB,GAAG,QAM3B;AAAA,MAN4B;AAChCC,IAAAA,SAAS,EAAEC,aADqB;AAEhCC,IAAAA,KAFgC;AAGhCC,IAAAA,KAHgC;AAIhCC,IAAAA,QAJgC;AAKhC,OAAGC;AAL6B,GAM5B;AACJ,QAAM;AACJL,IAAAA,SAAS,EAAEM,cAAc,GAAG,CADxB;AAEJC,IAAAA,eAFI;AAGJC,IAAAA,YAHI;AAIJC,IAAAA,QAJI;AAKJC,IAAAA,MALI;AAMJC,IAAAA;AANI,MAODlB,UAAU,CAACmB,OAAX,CAAmBV,KAAnB,KAA6B,EAPlC;AASA,QAAM;AAAEW,IAAAA,IAAI,EAAEC,WAAR;AAAqBC,IAAAA,IAArB;AAA2BC,IAAAA;AAA3B,MAAsCb,KAA5C;AAEA,QAAMH,SAAS,GAAGC,aAAa,IAAIK,cAAnC;AAEA,QAAMW,eAAe,GAAGjB,SAAS,GAAGJ,MAAM,CAACI,SAAD,CAAT,GAAuB,EAAxD;;AAEA,QAAMkB,kBAAkB,GAAG,MAAM;AAC/B,QAAIX,eAAJ,EAAqB;AACnB,aAAOA,eAAP;AACD,KAFD,MAEO,IAAIO,WAAW,IAAIC,IAAI,KAAK,UAA5B,EAAwC;AAC7C,aAAOlB,OAAO,CAACG,SAAD,EAAYgB,MAAM,CAACG,OAAnB,CAAd;AACD,KAFM,MAEA;AACL,aAAOH,MAAM,CAACG,OAAd;AACD;AACF,GARD;;AAUA,sBACE,oBAAC,QAAD,CAAU,IAAV,eACMd,IADN;AAEE,IAAA,KAAK,EAAE,CACLH,KADK,EAEL;AACEK,MAAAA,eAAe,EAAEW,kBAAkB,EADrC;AAEET,MAAAA,QAAQ,EACNd,QAAQ,CAACyB,EAAT,KAAgB,KAAhB,IAAyBX,QAAQ,KAAK,QAAtC,GACI,QADJ,GAEI,SALR;AAMET,MAAAA,SANF;AAOE,SAAGiB;AAPL,KAFK;AAFT,mBAeE,oBAAC,IAAD;AACE,IAAA,KAAK,EAAE,CACL;AACER,MAAAA,QADF;AAEED,MAAAA,YAFF;AAGEE,MAAAA,MAHF;AAIEC,MAAAA;AAJF,KADK;AADT,KAUGP,QAVH,CAfF,CADF;AA8BD,CA9DD;;AAgEA,eAAeN,SAAS,CAACC,OAAD,CAAxB","sourcesContent":["/* Copied from https://github.com/callstack/react-native-paper/blob/main/src/components/Surface.tsx */\nimport * as React from \"react\";\nimport {\n Animated,\n StyleSheet,\n ViewProps,\n StyleProp,\n ViewStyle,\n View,\n Platform,\n} from \"react-native\";\nimport shadow from \"../styles/shadow\";\nimport overlay from \"../styles/overlay\";\nimport { withTheme } from \"../theming\";\nimport type { Theme } from \"../styles/DefaultTheme\";\n\ntype Props = {\n elevation?: number;\n style?: StyleProp<ViewStyle>;\n theme: Theme;\n} & ViewProps;\n\nconst Surface: React.FC<Props> = ({\n elevation: propElevation,\n style,\n theme,\n children,\n ...rest\n}) => {\n const {\n elevation: styleElevation = 3,\n backgroundColor,\n borderRadius,\n overflow,\n height,\n width,\n } = (StyleSheet.flatten(style) || {}) as ViewStyle;\n\n const { dark: isDarkTheme, mode, colors } = theme;\n\n const elevation = propElevation || styleElevation;\n\n const evalationStyles = elevation ? shadow(elevation) : {};\n\n const getBackgroundColor = () => {\n if (backgroundColor) {\n return backgroundColor;\n } else if (isDarkTheme && mode === \"adaptive\") {\n return overlay(elevation, colors.surface);\n } else {\n return colors.surface;\n }\n };\n\n return (\n <Animated.View\n {...rest}\n style={[\n style,\n {\n backgroundColor: getBackgroundColor(),\n overflow:\n Platform.OS === \"web\" && overflow === \"hidden\"\n ? \"hidden\"\n : \"visible\",\n elevation,\n ...evalationStyles,\n },\n ]}\n >\n <View\n style={[\n {\n overflow,\n borderRadius,\n height,\n width,\n },\n ]}\n >\n {children}\n </View>\n </Animated.View>\n );\n};\n\nexport default withTheme(Surface);\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Container.
|
|
1
|
+
{"version":3,"sources":["Container.ts"],"names":["GROUPS","COMPONENT_TYPES","FORM_TYPES","PROP_TYPES","createElevationType","createImageProp","createResizeModeProp","SEED_DATA","name","tag","description","category","deprecated","layout","height","props","useThemeGutterPadding","group","basic","label","formType","boolean","propType","BOOLEAN","defaultValue","editable","required","backgroundImage","backgroundImageResizeMode","elevation"],"mappings":"AAAA,SACEA,MADF,EAEEC,eAFF,EAGEC,UAHF,EAIEC,UAJF,EAKEC,mBALF,EAMEC,eANF,EAOEC,oBAPF,QAQO,iBARP;AAUA,OAAO,MAAMC,SAAS,GAAG;AACvBC,EAAAA,IAAI,EAAE,WADiB;AAEvBC,EAAAA,GAAG,EAAE,WAFkB;AAGvBC,EAAAA,WAAW,EAAE,2CAHU;AAIvBC,EAAAA,QAAQ,EAAEV,eAAe,CAACW,UAJH;AAKvBC,EAAAA,MAAM,EAAE;AACNC,IAAAA,MAAM,EAAE;AADF,GALe;AAQvBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,qBAAqB,EAAE;AACrBC,MAAAA,KAAK,EAAEjB,MAAM,CAACkB,KADO;AAErBC,MAAAA,KAAK,EAAE,oBAFc;AAGrBT,MAAAA,WAAW,EACT,gFAJmB;AAKrBU,MAAAA,QAAQ,EAAElB,UAAU,CAACmB,OALA;AAMrBC,MAAAA,QAAQ,EAAEnB,UAAU,CAACoB,OANA;AAOrBC,MAAAA,YAAY,EAAE,KAPO;AAQrBC,MAAAA,QAAQ,EAAE,KARW;AASrBC,MAAAA,QAAQ,EAAE;AATW,KADlB;AAYLC,IAAAA,eAAe,EAAEtB,eAAe,CAAC;AAC/Bc,MAAAA,KAAK,EAAE,kBADwB;AAE/BT,MAAAA,WAAW,EAAE,iCAFkB;AAG/Bc,MAAAA,YAAY,EAAE;AAHiB,KAAD,CAZ3B;AAiBLI,IAAAA,yBAAyB,EAAEtB,oBAAoB,EAjB1C;AAkBLuB,IAAAA,SAAS,EAAEzB,mBAAmB,CAAC,CAAD;AAlBzB;AARgB,CAAlB","sourcesContent":["import {\n GROUPS,\n COMPONENT_TYPES,\n FORM_TYPES,\n PROP_TYPES,\n createElevationType,\n createImageProp,\n createResizeModeProp,\n} from \"@draftbit/types\";\n\nexport const SEED_DATA = {\n name: \"Container\",\n tag: \"Container\",\n description: \"A container component with gutter padding\",\n category: COMPONENT_TYPES.deprecated,\n layout: {\n height: 250,\n },\n props: {\n useThemeGutterPadding: {\n group: GROUPS.basic,\n label: \"Use gutter padding\",\n description:\n \"When true, uses the theme gutter spacing as the container's horizontal padding\",\n formType: FORM_TYPES.boolean,\n propType: PROP_TYPES.BOOLEAN,\n defaultValue: false,\n editable: false,\n required: true,\n },\n backgroundImage: createImageProp({\n label: \"Background Image\",\n description: \"Apply a custom background image\",\n defaultValue: null,\n }),\n backgroundImageResizeMode: createResizeModeProp(),\n elevation: createElevationType(0),\n },\n};\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@draftbit/core",
|
|
3
|
-
"version": "43.4.
|
|
3
|
+
"version": "43.4.16-caba19.0+caba193d",
|
|
4
4
|
"description": "Core (non-native) Components",
|
|
5
5
|
"main": "lib/commonjs/index.js",
|
|
6
6
|
"module": "lib/module/index.js",
|
|
@@ -80,5 +80,5 @@
|
|
|
80
80
|
]
|
|
81
81
|
]
|
|
82
82
|
},
|
|
83
|
-
"gitHead": "
|
|
83
|
+
"gitHead": "caba193df93cf7a7a6e77acbb0d8a4ad5fc06ad0"
|
|
84
84
|
}
|
|
@@ -5,17 +5,28 @@ import shadow from "../styles/shadow";
|
|
|
5
5
|
import overlay from "../styles/overlay";
|
|
6
6
|
import { withTheme } from "../theming";
|
|
7
7
|
const Surface = ({ elevation: propElevation, style, theme, children, ...rest }) => {
|
|
8
|
-
const { elevation: styleElevation = 3, borderRadius, overflow, height, width, } = (StyleSheet.flatten(style) || {});
|
|
8
|
+
const { elevation: styleElevation = 3, backgroundColor, borderRadius, overflow, height, width, } = (StyleSheet.flatten(style) || {});
|
|
9
9
|
const { dark: isDarkTheme, mode, colors } = theme;
|
|
10
10
|
const elevation = propElevation || styleElevation;
|
|
11
11
|
const evalationStyles = elevation ? shadow(elevation) : {};
|
|
12
|
+
const getBackgroundColor = () => {
|
|
13
|
+
if (backgroundColor) {
|
|
14
|
+
return backgroundColor;
|
|
15
|
+
}
|
|
16
|
+
else if (isDarkTheme && mode === "adaptive") {
|
|
17
|
+
return overlay(elevation, colors.surface);
|
|
18
|
+
}
|
|
19
|
+
else {
|
|
20
|
+
return colors.surface;
|
|
21
|
+
}
|
|
22
|
+
};
|
|
12
23
|
return (React.createElement(Animated.View, { ...rest, style: [
|
|
13
24
|
style,
|
|
14
25
|
{
|
|
15
|
-
backgroundColor:
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
26
|
+
backgroundColor: getBackgroundColor(),
|
|
27
|
+
overflow: Platform.OS === "web" && overflow === "hidden"
|
|
28
|
+
? "hidden"
|
|
29
|
+
: "visible",
|
|
19
30
|
elevation,
|
|
20
31
|
...evalationStyles,
|
|
21
32
|
},
|
|
@@ -29,6 +29,7 @@ const Surface: React.FC<Props> = ({
|
|
|
29
29
|
}) => {
|
|
30
30
|
const {
|
|
31
31
|
elevation: styleElevation = 3,
|
|
32
|
+
backgroundColor,
|
|
32
33
|
borderRadius,
|
|
33
34
|
overflow,
|
|
34
35
|
height,
|
|
@@ -41,17 +42,27 @@ const Surface: React.FC<Props> = ({
|
|
|
41
42
|
|
|
42
43
|
const evalationStyles = elevation ? shadow(elevation) : {};
|
|
43
44
|
|
|
45
|
+
const getBackgroundColor = () => {
|
|
46
|
+
if (backgroundColor) {
|
|
47
|
+
return backgroundColor;
|
|
48
|
+
} else if (isDarkTheme && mode === "adaptive") {
|
|
49
|
+
return overlay(elevation, colors.surface);
|
|
50
|
+
} else {
|
|
51
|
+
return colors.surface;
|
|
52
|
+
}
|
|
53
|
+
};
|
|
54
|
+
|
|
44
55
|
return (
|
|
45
56
|
<Animated.View
|
|
46
57
|
{...rest}
|
|
47
58
|
style={[
|
|
48
59
|
style,
|
|
49
60
|
{
|
|
50
|
-
backgroundColor:
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
61
|
+
backgroundColor: getBackgroundColor(),
|
|
62
|
+
overflow:
|
|
63
|
+
Platform.OS === "web" && overflow === "hidden"
|
|
64
|
+
? "hidden"
|
|
65
|
+
: "visible",
|
|
55
66
|
elevation,
|
|
56
67
|
...evalationStyles,
|
|
57
68
|
},
|