@fountain-ui/core 2.0.0-beta.4 → 2.0.0-beta.7

package/build/commonjs/AppBar/AppBar.js

@@ -23,15 +23,6 @@ const useStyles = function () {
       flexShrink: 0,
       width: '100%',
       zIndex: theme.zIndex.appBar
-    },
-    colorDefault: {
-      backgroundColor: theme.palette.background.default
-    },
-    colorPrimary: {
-      backgroundColor: theme.palette.primary.main
-    },
-    colorTransparent: {
-      backgroundColor: 'transparent'
     }
   };
 };
@@ -42,14 +33,18 @@ const AppBar = /*#__PURE__*/_react.default.forwardRef(function AppBar(props, ref
     style,
     ...otherProps
   } = props;
+  const theme = (0, _styles.useTheme)();
   const styles = useStyles();
-  const colorStyle = color === 'default' ? styles.colorDefault : color === 'primary' ? styles.colorPrimary : styles.colorTransparent;
-  const paperStyle = (0, _styles.css)([styles.root, colorStyle, style]);
+  const backgroundColor = color === 'default' ? theme.palette.background.default : color === 'paper' ? theme.palette.paper.default : color === 'primary' ? theme.palette.primary.main : 'transparent';
+  const paperStyle = (0, _styles.css)([styles.root, {
+    backgroundColor
+  }, style]);
   return /*#__PURE__*/_react.default.createElement(_Paper.default, _extends({
     ref: ref,
-    square: true,
+    colorValue: backgroundColor,
     elevation: 0,
-    style: paperStyle
+    style: paperStyle,
+    square: true
   }, otherProps));
 });
 

package/build/commonjs/AppBar/AppBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["AppBar.tsx"],"names":["useStyles","theme","root","flexDirection","flexShrink","width","zIndex","appBar","colorDefault","backgroundColor","palette","background","default","colorPrimary","primary","main","colorTransparent","AppBar","React","forwardRef","props","ref","color","style","otherProps","styles","colorStyle","paperStyle"],"mappings":";;;;;;;AAAA;;AAGA;;AACA;;;;;;AAWA,MAAMA,SAAkC,GAAG,YAA0B;AACjE,QAAMC,KAAK,GAAG,uBAAd;AAEA,SAAO;AACHC,IAAAA,IAAI,EAAE;AACFC,MAAAA,aAAa,EAAE,QADb;AAEFC,MAAAA,UAAU,EAAE,CAFV;AAGFC,MAAAA,KAAK,EAAE,MAHL;AAIFC,MAAAA,MAAM,EAAEL,KAAK,CAACK,MAAN,CAAaC;AAJnB,KADH;AAOHC,IAAAA,YAAY,EAAE;AACVC,MAAAA,eAAe,EAAER,KAAK,CAACS,OAAN,CAAcC,UAAd,CAAyBC;AADhC,KAPX;AAUHC,IAAAA,YAAY,EAAE;AACVJ,MAAAA,eAAe,EAAER,KAAK,CAACS,OAAN,CAAcI,OAAd,CAAsBC;AAD7B,KAVX;AAaHC,IAAAA,gBAAgB,EAAE;AACdP,MAAAA,eAAe,EAAE;AADH;AAbf,GAAP;AAiBH,CApBD;;AAsBA,MAAMQ,MAAM,gBAAGC,eAAMC,UAAN,CAAoC,SAASF,MAAT,CAAgBG,KAAhB,EAAuBC,GAAvB,EAA4B;AAC3E,QAAM;AACFC,IAAAA,KAAK,GAAG,SADN;AAEFC,IAAAA,KAFE;AAGF,OAAGC;AAHD,MAIFJ,KAJJ;AAMA,QAAMK,MAAM,GAAGzB,SAAS,EAAxB;AAEA,QAAM0B,UAAU,GAAGJ,KAAK,KAAK,SAAV,GACbG,MAAM,CAACjB,YADM,GAEbc,KAAK,KAAK,SAAV,GACIG,MAAM,CAACZ,YADX,GAEIY,MAAM,CAACT,gBAJjB;AAMA,QAAMW,UAAU,GAAG,iBAAI,CACnBF,MAAM,CAACvB,IADY,EAEnBwB,UAFmB,EAGnBH,KAHmB,CAAJ,CAAnB;AAMA,sBACI,6BAAC,cAAD;AACI,IAAA,GAAG,EAAEF,GADT;AAEI,IAAA,MAAM,MAFV;AAGI,IAAA,SAAS,EAAE,CAHf;AAII,IAAA,KAAK,EAAEM;AAJX,KAKQH,UALR,EADJ;AASH,CA9Bc,CAAf;;eAgCeP,M","sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Paper from '../Paper';\nimport { css, useTheme } from '../styles';\nimport type AppBarProps from './AppBarProps';\n\ntype AppBarStyleKeys =\n    | 'root'\n    | 'colorDefault'\n    | 'colorPrimary'\n    | 'colorTransparent';\n\ntype AppBarStyles = NamedStylesStringUnion<AppBarStyleKeys>;\n\nconst useStyles: UseStyles<AppBarStyles> = function (): AppBarStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            flexDirection: 'column',\n            flexShrink: 0,\n            width: '100%',\n            zIndex: theme.zIndex.appBar,\n        },\n        colorDefault: {\n            backgroundColor: theme.palette.background.default,\n        },\n        colorPrimary: {\n            backgroundColor: theme.palette.primary.main,\n        },\n        colorTransparent: {\n            backgroundColor: 'transparent',\n        },\n    };\n};\n\nconst AppBar = React.forwardRef<View, AppBarProps>(function AppBar(props, ref) {\n    const {\n        color = 'default',\n        style,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const colorStyle = color === 'default'\n        ? styles.colorDefault\n        : color === 'primary'\n            ? styles.colorPrimary\n            : styles.colorTransparent;\n\n    const paperStyle = css([\n        styles.root,\n        colorStyle,\n        style,\n    ]);\n\n    return (\n        <Paper\n            ref={ref}\n            square\n            elevation={0}\n            style={paperStyle}\n            {...otherProps}\n        />\n    );\n});\n\nexport default AppBar;\n"]}
+{"version":3,"sources":["AppBar.tsx"],"names":["useStyles","theme","root","flexDirection","flexShrink","width","zIndex","appBar","AppBar","React","forwardRef","props","ref","color","style","otherProps","styles","backgroundColor","palette","background","default","paper","primary","main","paperStyle"],"mappings":";;;;;;;AAAA;;AAGA;;AACA;;;;;;AAOA,MAAMA,SAAkC,GAAG,YAA0B;AACjE,QAAMC,KAAK,GAAG,uBAAd;AAEA,SAAO;AACHC,IAAAA,IAAI,EAAE;AACFC,MAAAA,aAAa,EAAE,QADb;AAEFC,MAAAA,UAAU,EAAE,CAFV;AAGFC,MAAAA,KAAK,EAAE,MAHL;AAIFC,MAAAA,MAAM,EAAEL,KAAK,CAACK,MAAN,CAAaC;AAJnB;AADH,GAAP;AAQH,CAXD;;AAaA,MAAMC,MAAM,gBAAGC,eAAMC,UAAN,CAAoC,SAASF,MAAT,CAAgBG,KAAhB,EAAuBC,GAAvB,EAA4B;AAC3E,QAAM;AACFC,IAAAA,KAAK,GAAG,SADN;AAEFC,IAAAA,KAFE;AAGF,OAAGC;AAHD,MAIFJ,KAJJ;AAMA,QAAMV,KAAK,GAAG,uBAAd;AAEA,QAAMe,MAAM,GAAGhB,SAAS,EAAxB;AAEA,QAAMiB,eAAe,GAAGJ,KAAK,KAAK,SAAV,GAClBZ,KAAK,CAACiB,OAAN,CAAcC,UAAd,CAAyBC,OADP,GAElBP,KAAK,KAAK,OAAV,GACIZ,KAAK,CAACiB,OAAN,CAAcG,KAAd,CAAoBD,OADxB,GAEIP,KAAK,KAAK,SAAV,GACIZ,KAAK,CAACiB,OAAN,CAAcI,OAAd,CAAsBC,IAD1B,GAEI,aANd;AAQA,QAAMC,UAAU,GAAG,iBAAI,CACnBR,MAAM,CAACd,IADY,EAEnB;AAAEe,IAAAA;AAAF,GAFmB,EAGnBH,KAHmB,CAAJ,CAAnB;AAMA,sBACI,6BAAC,cAAD;AACI,IAAA,GAAG,EAAEF,GADT;AAEI,IAAA,UAAU,EAAEK,eAFhB;AAGI,IAAA,SAAS,EAAE,CAHf;AAII,IAAA,KAAK,EAAEO,UAJX;AAKI,IAAA,MAAM,EAAE;AALZ,KAMQT,UANR,EADJ;AAUH,CAnCc,CAAf;;eAqCeP,M","sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Paper from '../Paper';\nimport { css, useTheme } from '../styles';\nimport type AppBarProps from './AppBarProps';\n\ntype AppBarStyleKeys = 'root';\n\ntype AppBarStyles = NamedStylesStringUnion<AppBarStyleKeys>;\n\nconst useStyles: UseStyles<AppBarStyles> = function (): AppBarStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            flexDirection: 'column',\n            flexShrink: 0,\n            width: '100%',\n            zIndex: theme.zIndex.appBar,\n        },\n    };\n};\n\nconst AppBar = React.forwardRef<View, AppBarProps>(function AppBar(props, ref) {\n    const {\n        color = 'default',\n        style,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const styles = useStyles();\n\n    const backgroundColor = color === 'default'\n        ? theme.palette.background.default\n        : color === 'paper'\n            ? theme.palette.paper.default\n            : color === 'primary'\n                ? theme.palette.primary.main\n                : 'transparent';\n\n    const paperStyle = css([\n        styles.root,\n        { backgroundColor },\n        style,\n    ]);\n\n    return (\n        <Paper\n            ref={ref}\n            colorValue={backgroundColor}\n            elevation={0}\n            style={paperStyle}\n            square={true}\n            {...otherProps}\n        />\n    );\n});\n\nexport default AppBar;\n"]}

package/build/commonjs/Paper/Paper.js

@@ -13,6 +13,8 @@ var _styles = require("../styles");
 
 var _hooks = require("../hooks");
 
+var _PaperStylesProvider = _interopRequireDefault(require("./PaperStylesProvider"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || 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); }
@@ -20,6 +22,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 const Paper = /*#__PURE__*/_react.default.forwardRef(function Paper(props, ref) {
   const {
     color = 'default',
+    colorValue,
     elevation = 1,
     style: styleProp,
     square = false,
@@ -27,8 +30,9 @@ const Paper = /*#__PURE__*/_react.default.forwardRef(function Paper(props, ref)
     ...otherProps
   } = props;
   const theme = (0, _styles.useTheme)();
+  const backgroundColor = colorValue !== null && colorValue !== void 0 ? colorValue : theme.palette.paper[color];
   const rootStyle = {
-    backgroundColor: theme.palette.paper[color]
+    backgroundColor
   };
   const roundedStyle = {
     borderRadius: theme.shape.roundness
@@ -40,10 +44,14 @@ const Paper = /*#__PURE__*/_react.default.forwardRef(function Paper(props, ref)
     borderColor: theme.palette.divider
   };
   const style = (0, _styles.css)([rootStyle, variant === 'elevation' ? elevationStyle : outlinedStyle, !square ? roundedStyle : undefined, styleProp]);
-  return /*#__PURE__*/_react.default.createElement(_reactNative.View, _extends({
+  return /*#__PURE__*/_react.default.createElement(_PaperStylesProvider.default, {
+    value: {
+      backgroundColor
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, _extends({
     ref: ref,
     style: style
-  }, otherProps));
+  }, otherProps)));
 });
 
 var _default = Paper;

package/build/commonjs/Paper/Paper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Paper.tsx"],"names":["Paper","React","forwardRef","props","ref","color","elevation","style","styleProp","square","variant","otherProps","theme","rootStyle","backgroundColor","palette","paper","roundedStyle","borderRadius","shape","roundness","elevationStyle","outlinedStyle","borderWidth","StyleSheet","hairlineWidth","borderStyle","borderColor","divider","undefined"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;AAGA,MAAMA,KAAK,gBAAGC,eAAMC,UAAN,CAAmC,SAASF,KAAT,CAAeG,KAAf,EAAsBC,GAAtB,EAA2B;AACxE,QAAM;AACFC,IAAAA,KAAK,GAAG,SADN;AAEFC,IAAAA,SAAS,GAAG,CAFV;AAGFC,IAAAA,KAAK,EAAEC,SAHL;AAIFC,IAAAA,MAAM,GAAG,KAJP;AAKFC,IAAAA,OAAO,GAAG,WALR;AAMF,OAAGC;AAND,MAOFR,KAPJ;AASA,QAAMS,KAAK,GAAG,uBAAd;AAEA,QAAMC,SAAS,GAAG;AACdC,IAAAA,eAAe,EAAEF,KAAK,CAACG,OAAN,CAAcC,KAAd,CAAoBX,KAApB;AADH,GAAlB;AAIA,QAAMY,YAAY,GAAG;AACjBC,IAAAA,YAAY,EAAEN,KAAK,CAACO,KAAN,CAAYC;AADT,GAArB;AAIA,QAAMC,cAAc,GAAG,8BAAkBf,SAAlB,CAAvB;AAEA,QAAMgB,aAAa,GAAG;AAClBC,IAAAA,WAAW,EAAEC,mBAAWC,aADN;AAElBC,IAAAA,WAAW,EAAE,OAFK;AAGlBC,IAAAA,WAAW,EAAEf,KAAK,CAACG,OAAN,CAAca;AAHT,GAAtB;AAMA,QAAMrB,KAAK,GAAG,iBAAI,CACdM,SADc,EAEdH,OAAO,KAAK,WAAZ,GAA0BW,cAA1B,GAA2CC,aAF7B,EAGd,CAACb,MAAD,GAAUQ,YAAV,GAAyBY,SAHX,EAIdrB,SAJc,CAAJ,CAAd;AAOA,sBACI,6BAAC,iBAAD;AACI,IAAA,GAAG,EAAEJ,GADT;AAEI,IAAA,KAAK,EAAEG;AAFX,KAGQI,UAHR,EADJ;AAOH,CA1Ca,CAAd;;eA4CeX,K","sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { css, StyleSheet, useTheme } from '../styles';\nimport { useElevationStyle } from '../hooks';\nimport type PaperProps from './PaperProps';\n\nconst Paper = React.forwardRef<View, PaperProps>(function Paper(props, ref) {\n    const {\n        color = 'default',\n        elevation = 1,\n        style: styleProp,\n        square = false,\n        variant = 'elevation',\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const rootStyle = {\n        backgroundColor: theme.palette.paper[color],\n    };\n\n    const roundedStyle = {\n        borderRadius: theme.shape.roundness,\n    };\n\n    const elevationStyle = useElevationStyle(elevation);\n\n    const outlinedStyle = {\n        borderWidth: StyleSheet.hairlineWidth,\n        borderStyle: 'solid',\n        borderColor: theme.palette.divider,\n    };\n\n    const style = css([\n        rootStyle,\n        variant === 'elevation' ? elevationStyle : outlinedStyle,\n        !square ? roundedStyle : undefined,\n        styleProp,\n    ]);\n\n    return (\n        <View\n            ref={ref}\n            style={style}\n            {...otherProps}\n        />\n    );\n});\n\nexport default Paper;\n"]}
+{"version":3,"sources":["Paper.tsx"],"names":["Paper","React","forwardRef","props","ref","color","colorValue","elevation","style","styleProp","square","variant","otherProps","theme","backgroundColor","palette","paper","rootStyle","roundedStyle","borderRadius","shape","roundness","elevationStyle","outlinedStyle","borderWidth","StyleSheet","hairlineWidth","borderStyle","borderColor","divider","undefined"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;;;;;AAEA,MAAMA,KAAK,gBAAGC,eAAMC,UAAN,CAAmC,SAASF,KAAT,CAAeG,KAAf,EAAsBC,GAAtB,EAA2B;AACxE,QAAM;AACFC,IAAAA,KAAK,GAAG,SADN;AAEFC,IAAAA,UAFE;AAGFC,IAAAA,SAAS,GAAG,CAHV;AAIFC,IAAAA,KAAK,EAAEC,SAJL;AAKFC,IAAAA,MAAM,GAAG,KALP;AAMFC,IAAAA,OAAO,GAAG,WANR;AAOF,OAAGC;AAPD,MAQFT,KARJ;AAUA,QAAMU,KAAK,GAAG,uBAAd;AAEA,QAAMC,eAAe,GAAGR,UAAH,aAAGA,UAAH,cAAGA,UAAH,GAAiBO,KAAK,CAACE,OAAN,CAAcC,KAAd,CAAoBX,KAApB,CAAtC;AAEA,QAAMY,SAAS,GAAG;AAAEH,IAAAA;AAAF,GAAlB;AAEA,QAAMI,YAAY,GAAG;AACjBC,IAAAA,YAAY,EAAEN,KAAK,CAACO,KAAN,CAAYC;AADT,GAArB;AAIA,QAAMC,cAAc,GAAG,8BAAkBf,SAAlB,CAAvB;AAEA,QAAMgB,aAAa,GAAG;AAClBC,IAAAA,WAAW,EAAEC,mBAAWC,aADN;AAElBC,IAAAA,WAAW,EAAE,OAFK;AAGlBC,IAAAA,WAAW,EAAEf,KAAK,CAACE,OAAN,CAAcc;AAHT,GAAtB;AAMA,QAAMrB,KAAK,GAAG,iBAAI,CACdS,SADc,EAEdN,OAAO,KAAK,WAAZ,GAA0BW,cAA1B,GAA2CC,aAF7B,EAGd,CAACb,MAAD,GAAUQ,YAAV,GAAyBY,SAHX,EAIdrB,SAJc,CAAJ,CAAd;AAOA,sBACI,6BAAC,4BAAD;AACI,IAAA,KAAK,EAAE;AAAEK,MAAAA;AAAF;AADX,kBAGI,6BAAC,iBAAD;AACI,IAAA,GAAG,EAAEV,GADT;AAEI,IAAA,KAAK,EAAEI;AAFX,KAGQI,UAHR,EAHJ,CADJ;AAWH,CA/Ca,CAAd;;eAiDeZ,K","sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { css, StyleSheet, useTheme } from '../styles';\nimport { useElevationStyle } from '../hooks';\nimport type PaperProps from './PaperProps';\nimport PaperStylesProvider from './PaperStylesProvider';\n\nconst Paper = React.forwardRef<View, PaperProps>(function Paper(props, ref) {\n    const {\n        color = 'default',\n        colorValue,\n        elevation = 1,\n        style: styleProp,\n        square = false,\n        variant = 'elevation',\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const backgroundColor = colorValue ?? theme.palette.paper[color];\n\n    const rootStyle = { backgroundColor };\n\n    const roundedStyle = {\n        borderRadius: theme.shape.roundness,\n    };\n\n    const elevationStyle = useElevationStyle(elevation);\n\n    const outlinedStyle = {\n        borderWidth: StyleSheet.hairlineWidth,\n        borderStyle: 'solid',\n        borderColor: theme.palette.divider,\n    };\n\n    const style = css([\n        rootStyle,\n        variant === 'elevation' ? elevationStyle : outlinedStyle,\n        !square ? roundedStyle : undefined,\n        styleProp,\n    ]);\n\n    return (\n        <PaperStylesProvider\n            value={{ backgroundColor }}\n        >\n            <View\n                ref={ref}\n                style={style}\n                {...otherProps}\n            />\n        </PaperStylesProvider>\n    );\n});\n\nexport default Paper;\n"]}

package/build/commonjs/Paper/PaperStylesProvider.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.PaperStylesContext = void 0;
+
+var _react = require("react");
+
+const PaperStylesContext = /*#__PURE__*/(0, _react.createContext)(null);
+exports.PaperStylesContext = PaperStylesContext;
+var _default = PaperStylesContext.Provider;
+exports.default = _default;
+//# sourceMappingURL=PaperStylesProvider.js.map

package/build/commonjs/Paper/PaperStylesProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["PaperStylesProvider.tsx"],"names":["PaperStylesContext","Provider"],"mappings":";;;;;;;AAAA;;AAMO,MAAMA,kBAAkB,gBAAG,0BAAkC,IAAlC,CAA3B;;eAEQA,kBAAkB,CAACC,Q","sourcesContent":["import { createContext } from 'react';\n\nexport type PaperStyles = {\n    backgroundColor: string;\n}\n\nexport const PaperStylesContext = createContext<PaperStyles | null>(null);\n\nexport default PaperStylesContext.Provider;\n"]}

package/build/commonjs/Paper/usePaperStyles.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = usePaperStyles;
+
+var _react = require("react");
+
+var _PaperStylesProvider = require("./PaperStylesProvider");
+
+function usePaperStyles() {
+  return (0, _react.useContext)(_PaperStylesProvider.PaperStylesContext);
+}
+
+;
+//# sourceMappingURL=usePaperStyles.js.map

package/build/commonjs/Paper/usePaperStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["usePaperStyles.ts"],"names":["usePaperStyles","PaperStylesContext"],"mappings":";;;;;;;AAAA;;AACA;;AAEe,SAASA,cAAT,GAA0B;AACrC,SAAO,uBAAWC,uCAAX,CAAP;AACH;;AAAA","sourcesContent":["import { useContext } from 'react';\nimport { PaperStylesContext } from './PaperStylesProvider';\n\nexport default function usePaperStyles() {\n    return useContext(PaperStylesContext);\n};\n"]}

package/build/commonjs/TextField/InputLabel.js

@@ -11,12 +11,13 @@ var _reactNative = require("react-native");
 
 var _styles = require("../styles");
 
+var _usePaperStyles = _interopRequireDefault(require("../Paper/usePaperStyles"));
+
 var _utils = require("./utils");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const useStyles = function () {
-  const theme = (0, _styles.useTheme)();
   return {
     background: {
       position: 'absolute',
@@ -25,15 +26,13 @@ const useStyles = function () {
       bottom: 0,
       right: 0,
       width: 8,
-      height: 2,
-      backgroundColor: theme.palette.background.default
+      height: 4
     },
     backgroundText: {
       position: 'absolute',
       left: 18,
       paddingHorizontal: 0,
-      color: 'transparent',
-      backgroundColor: theme.palette.background.default
+      color: 'transparent'
     },
     placeholder: {
       position: 'absolute',
@@ -44,6 +43,8 @@ const useStyles = function () {
 };
 
 const InputLabel = props => {
+  var _paperStyles$backgrou;
+
   const {
     activeColor,
     animatedError,
@@ -65,7 +66,12 @@ const InputLabel = props => {
     topPosition,
     value
   } = props;
+  const theme = (0, _styles.useTheme)();
   const styles = useStyles();
+  const paperStyles = (0, _usePaperStyles.default)();
+  const backgroundStyle = {
+    backgroundColor: (_paperStyles$backgrou = paperStyles === null || paperStyles === void 0 ? void 0 : paperStyles.backgroundColor) !== null && _paperStyles$backgrou !== void 0 ? _paperStyles$backgrou : theme.palette.background.default
+  };
   const hasFocus = hasActiveOutline || value;
   const opacity = animatedLabel.interpolate({
     inputRange: [0, 1],
@@ -106,7 +112,7 @@ const InputLabel = props => {
   }, [/*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
     key: 'labelBackground-view',
     pointerEvents: 'none',
-    style: [styles.background, {
+    style: [styles.background, backgroundStyle, {
       opacity,
       transform: [{
         translateX: animatedLabel.interpolate({
@@ -117,7 +123,7 @@ const InputLabel = props => {
     }]
   }), /*#__PURE__*/_react.default.createElement(_reactNative.Animated.Text, {
     key: 'labelBackground-text',
-    style: [styles.placeholder, styles.backgroundText, labelStyle, {
+    style: [styles.placeholder, styles.backgroundText, backgroundStyle, labelStyle, {
       top: topPosition + 1,
       opacity,
       transform: [...labelStyle.transform, {

package/build/commonjs/TextField/InputLabel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["InputLabel.tsx"],"names":["useStyles","theme","background","position","top","left","bottom","right","width","height","backgroundColor","palette","default","backgroundText","paddingHorizontal","color","placeholder","inputPaddingHorizontal","InputLabel","props","activeColor","animatedError","animatedLabel","error","errorColor","focused","fontSize","hasActiveOutline","label","labelLayout","labelScale","labelTranslateX","labelTranslateY","onLayoutAnimatedText","paddingOffset","placeholderColor","placeholderOpacity","topPosition","value","styles","hasFocus","opacity","interpolate","inputRange","outputRange","labelTranslationX","transform","translateX","labelStyle","translateY","scale","StyleSheet","absoluteFill","measured","scaleY","textAlign"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Animated, LayoutChangeEvent, StyleSheet } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport { inputPaddingHorizontal } from './utils';\n\ninterface LabelProps {\n    activeColor: string;\n    animatedError: Animated.Value;\n    animatedLabel: Animated.Value;\n    error?: boolean;\n    errorColor?: string;\n    focused?: boolean;\n    fontSize?: number;\n    hasActiveOutline?: boolean;\n    label?: string;\n    labelLayout: { measured: boolean; width: number; height: number };\n    labelScale: number;\n    labelTranslateX: number;\n    labelTranslateY: number;\n    onLayoutAnimatedText: (event: LayoutChangeEvent) => void;\n    paddingOffset?: { paddingLeft: number; paddingRight: number };\n    placeholder?: string;\n    placeholderColor?: string;\n    placeholderOpacity: number | Animated.AnimatedInterpolation;\n    topPosition: number;\n    value?: string;\n}\n\ntype InputLabelStyles = NamedStylesStringUnion<'background' | 'backgroundText' | 'placeholder'>;\n\nconst useStyles: UseStyles<InputLabelStyles> = function (): InputLabelStyles {\n    const theme = useTheme();\n\n    return {\n        background: {\n            position: 'absolute',\n            top: 6,\n            left: 10,\n            bottom: 0,\n            right: 0,\n            width: 8,\n            height: 2,\n            backgroundColor: theme.palette.background.default,\n        },\n        backgroundText: {\n            position: 'absolute',\n            left: 18,\n            paddingHorizontal: 0,\n            color: 'transparent',\n            backgroundColor: theme.palette.background.default,\n        },\n        placeholder: {\n            position: 'absolute',\n            left: 0,\n            paddingHorizontal: inputPaddingHorizontal,\n        },\n    };\n};\n\nconst InputLabel = (props: LabelProps) => {\n    const {\n        activeColor,\n        animatedError,\n        animatedLabel,\n        error = false,\n        errorColor,\n        focused,\n        fontSize,\n        hasActiveOutline,\n        label,\n        labelLayout,\n        labelScale,\n        labelTranslateX,\n        labelTranslateY,\n        onLayoutAnimatedText,\n        paddingOffset,\n        placeholderColor,\n        placeholderOpacity,\n        topPosition,\n        value,\n    } = props;\n\n    const styles = useStyles();\n\n    const hasFocus = hasActiveOutline || value;\n    const opacity = animatedLabel.interpolate({\n        inputRange: [0, 1],\n        outputRange: [hasFocus ? 1 : 0, 0],\n    });\n\n    const labelTranslationX = {\n        transform: [\n            {\n                translateX: animatedLabel.interpolate({\n                    inputRange: [0, 1],\n                    outputRange: [labelTranslateX, 0 || 0],\n                }),\n            },\n        ],\n    };\n\n    const labelStyle = {\n        fontSize,\n        transform: [\n            {\n                translateX: animatedError.interpolate({\n                    inputRange: [0, 0.5, 1],\n                    outputRange: [0, value && error ? 4 : 0, 0],\n                }),\n            },\n            {\n                translateY: animatedLabel.interpolate({\n                    inputRange: [0, 1],\n                    outputRange: [labelTranslateY, 0],\n                }),\n            },\n            {\n                scale: animatedLabel.interpolate({\n                    inputRange: [0, 1],\n                    outputRange: [labelScale, 1],\n                }),\n            },\n        ],\n    };\n\n    return (label ? (\n        <Animated.View\n            pointerEvents={'none'}\n            style={[\n                StyleSheet.absoluteFill,\n                {\n                    opacity: value || focused ? (labelLayout.measured ? 1 : 0) : 1,\n                },\n                labelTranslationX,\n            ]}\n        >\n            {[\n                <Animated.View\n                    key={'labelBackground-view'}\n                    pointerEvents={'none'}\n                    style={[\n                        styles.background,\n                        {\n                            opacity,\n                            transform: [\n                                {\n                                    translateX: animatedLabel.interpolate({\n                                        inputRange: [0, 1],\n                                        outputRange: [-labelTranslateX, 0],\n                                    }),\n                                },\n                            ],\n                        },\n                    ]}\n                />,\n                <Animated.Text\n                    key={'labelBackground-text'}\n                    style={[\n                        styles.placeholder,\n                        styles.backgroundText,\n                        labelStyle,\n                        {\n                            top: topPosition + 1,\n                            opacity,\n                            transform: [\n                                ...labelStyle.transform,\n                                {\n                                    scaleY: animatedLabel.interpolate({\n                                        inputRange: [0, 1],\n                                        outputRange: [0.2, 1],\n                                    }),\n                                },\n                            ],\n                        },\n                    ]}\n                    numberOfLines={1}\n                >\n                    {label}\n                </Animated.Text>,\n            ]}\n            <Animated.Text\n                onLayout={onLayoutAnimatedText}\n                style={[\n                    styles.placeholder,\n                    labelStyle,\n                    paddingOffset,\n                    {\n                        textAlign: 'left',\n                        top: topPosition,\n                        color: error && errorColor ? errorColor : activeColor,\n                        opacity: animatedLabel.interpolate({\n                            inputRange: [0, 1],\n                            outputRange: [hasActiveOutline ? 1 : 0, 0],\n                        }),\n                    },\n                ]}\n                numberOfLines={1}\n            >\n                {label}\n            </Animated.Text>\n            <Animated.Text\n                style={[\n                    styles.placeholder,\n                    labelStyle,\n                    paddingOffset,\n                    {\n                        textAlign: 'left',\n                        top: topPosition,\n                        color: error && errorColor ? errorColor : placeholderColor,\n                        opacity: placeholderOpacity,\n                    },\n                ]}\n                numberOfLines={1}\n            >\n                {label}\n            </Animated.Text>\n        </Animated.View>\n    ) : null);\n};\n\nexport default InputLabel;\n"]}
+{"version":3,"sources":["InputLabel.tsx"],"names":["useStyles","background","position","top","left","bottom","right","width","height","backgroundText","paddingHorizontal","color","placeholder","inputPaddingHorizontal","InputLabel","props","activeColor","animatedError","animatedLabel","error","errorColor","focused","fontSize","hasActiveOutline","label","labelLayout","labelScale","labelTranslateX","labelTranslateY","onLayoutAnimatedText","paddingOffset","placeholderColor","placeholderOpacity","topPosition","value","theme","styles","paperStyles","backgroundStyle","backgroundColor","palette","default","hasFocus","opacity","interpolate","inputRange","outputRange","labelTranslationX","transform","translateX","labelStyle","translateY","scale","StyleSheet","absoluteFill","measured","scaleY","textAlign"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Animated, LayoutChangeEvent, StyleSheet } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport usePaperStyles from '../Paper/usePaperStyles';\nimport { inputPaddingHorizontal } from './utils';\n\ninterface LabelProps {\n    activeColor: string;\n    animatedError: Animated.Value;\n    animatedLabel: Animated.Value;\n    error?: boolean;\n    errorColor?: string;\n    focused?: boolean;\n    fontSize?: number;\n    hasActiveOutline?: boolean;\n    label?: string;\n    labelLayout: { measured: boolean; width: number; height: number };\n    labelScale: number;\n    labelTranslateX: number;\n    labelTranslateY: number;\n    onLayoutAnimatedText: (event: LayoutChangeEvent) => void;\n    paddingOffset?: { paddingLeft: number; paddingRight: number };\n    placeholder?: string;\n    placeholderColor?: string;\n    placeholderOpacity: number | Animated.AnimatedInterpolation;\n    topPosition: number;\n    value?: string;\n}\n\ntype InputLabelStyles = NamedStylesStringUnion<'background' | 'backgroundText' | 'placeholder'>;\n\nconst useStyles: UseStyles<InputLabelStyles> = function (): InputLabelStyles {\n    return {\n        background: {\n            position: 'absolute',\n            top: 6,\n            left: 10,\n            bottom: 0,\n            right: 0,\n            width: 8,\n            height: 4,\n        },\n        backgroundText: {\n            position: 'absolute',\n            left: 18,\n            paddingHorizontal: 0,\n            color: 'transparent',\n        },\n        placeholder: {\n            position: 'absolute',\n            left: 0,\n            paddingHorizontal: inputPaddingHorizontal,\n        },\n    };\n};\n\nconst InputLabel = (props: LabelProps) => {\n    const {\n        activeColor,\n        animatedError,\n        animatedLabel,\n        error = false,\n        errorColor,\n        focused,\n        fontSize,\n        hasActiveOutline,\n        label,\n        labelLayout,\n        labelScale,\n        labelTranslateX,\n        labelTranslateY,\n        onLayoutAnimatedText,\n        paddingOffset,\n        placeholderColor,\n        placeholderOpacity,\n        topPosition,\n        value,\n    } = props;\n\n    const theme = useTheme();\n\n    const styles = useStyles();\n\n    const paperStyles = usePaperStyles();\n\n    const backgroundStyle = {\n        backgroundColor: paperStyles?.backgroundColor ?? theme.palette.background.default,\n    };\n\n    const hasFocus = hasActiveOutline || value;\n    const opacity = animatedLabel.interpolate({\n        inputRange: [0, 1],\n        outputRange: [hasFocus ? 1 : 0, 0],\n    });\n\n    const labelTranslationX = {\n        transform: [\n            {\n                translateX: animatedLabel.interpolate({\n                    inputRange: [0, 1],\n                    outputRange: [labelTranslateX, 0 || 0],\n                }),\n            },\n        ],\n    };\n\n    const labelStyle = {\n        fontSize,\n        transform: [\n            {\n                translateX: animatedError.interpolate({\n                    inputRange: [0, 0.5, 1],\n                    outputRange: [0, value && error ? 4 : 0, 0],\n                }),\n            },\n            {\n                translateY: animatedLabel.interpolate({\n                    inputRange: [0, 1],\n                    outputRange: [labelTranslateY, 0],\n                }),\n            },\n            {\n                scale: animatedLabel.interpolate({\n                    inputRange: [0, 1],\n                    outputRange: [labelScale, 1],\n                }),\n            },\n        ],\n    };\n\n    return (label ? (\n        <Animated.View\n            pointerEvents={'none'}\n            style={[\n                StyleSheet.absoluteFill,\n                {\n                    opacity: value || focused ? (labelLayout.measured ? 1 : 0) : 1,\n                },\n                labelTranslationX,\n            ]}\n        >\n            {[\n                <Animated.View\n                    key={'labelBackground-view'}\n                    pointerEvents={'none'}\n                    style={[\n                        styles.background,\n                        backgroundStyle,\n                        {\n                            opacity,\n                            transform: [\n                                {\n                                    translateX: animatedLabel.interpolate({\n                                        inputRange: [0, 1],\n                                        outputRange: [-labelTranslateX, 0],\n                                    }),\n                                },\n                            ],\n                        },\n                    ]}\n                />,\n                <Animated.Text\n                    key={'labelBackground-text'}\n                    style={[\n                        styles.placeholder,\n                        styles.backgroundText,\n                        backgroundStyle,\n                        labelStyle,\n                        {\n                            top: topPosition + 1,\n                            opacity,\n                            transform: [\n                                ...labelStyle.transform,\n                                {\n                                    scaleY: animatedLabel.interpolate({\n                                        inputRange: [0, 1],\n                                        outputRange: [0.2, 1],\n                                    }),\n                                },\n                            ],\n                        },\n                    ]}\n                    numberOfLines={1}\n                >\n                    {label}\n                </Animated.Text>,\n            ]}\n            <Animated.Text\n                onLayout={onLayoutAnimatedText}\n                style={[\n                    styles.placeholder,\n                    labelStyle,\n                    paddingOffset,\n                    {\n                        textAlign: 'left',\n                        top: topPosition,\n                        color: error && errorColor ? errorColor : activeColor,\n                        opacity: animatedLabel.interpolate({\n                            inputRange: [0, 1],\n                            outputRange: [hasActiveOutline ? 1 : 0, 0],\n                        }),\n                    },\n                ]}\n                numberOfLines={1}\n            >\n                {label}\n            </Animated.Text>\n            <Animated.Text\n                style={[\n                    styles.placeholder,\n                    labelStyle,\n                    paddingOffset,\n                    {\n                        textAlign: 'left',\n                        top: topPosition,\n                        color: error && errorColor ? errorColor : placeholderColor,\n                        opacity: placeholderOpacity,\n                    },\n                ]}\n                numberOfLines={1}\n            >\n                {label}\n            </Animated.Text>\n        </Animated.View>\n    ) : null);\n};\n\nexport default InputLabel;\n"]}

package/build/commonjs/TextField/OutlinedTextField.js

@@ -29,7 +29,6 @@ const useStyles = function () {
       left: 0,
       right: 0,
       bottom: 0,
-      backgroundColor: theme.palette.background.default,
       borderRadius: theme.shape.roundness
     },
     input: {

package/build/commonjs/TextField/OutlinedTextField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["OutlinedTextField.tsx"],"names":["useStyles","theme","outline","position","left","right","bottom","backgroundColor","palette","background","default","borderRadius","shape","roundness","input","flexGrow","paddingHorizontal","inputPaddingHorizontal","textAlignVertical","textAlign","zIndex","textField","iconContainer","width","height","justifyContent","alignItems","OutlinedTextField","React","forwardRef","props","ref","animatedError","animatedLabel","disabled","error","focused","forceFocus","icon","keyboardType","label","labelLayout","onBlur","onChangeText","onFocus","onIconPress","onLayoutAnimatedText","onSubmitEditing","placeholder","secureTextEntry","style","value","styles","hasActiveOutline","inputTextColor","tertiary","main","primary","activeColor","warning","accent","placeholderColor","text","hint","outlineColor","border","errorColor","typography","body2","fontSize","unitless","labelScale","labelFontSize","labelWidth","labelHeight","labelHalfWidth","labelHalfHeight","labelTranslateX","minInputHeight","defaultHeight","labelPaddingTop","inputHeight","topPosition","Math","floor","iconTopPosition","iconSize","labelYOffset","labelTranslateY","placeholderOpacity","interpolate","inputRange","outputRange","measured","labelProps","outlineStyle","borderWidth","borderColor","top","textInputStyle","color","marginRight","paddingRight","Platform","OS","outlineWidth","containerStyle","paddingTop","minHeight","iconContainerStyle","onIconButtonPress"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Animated, LayoutChangeEvent, Platform, TextInput, View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport IconButton from '../IconButton';\nimport TextFieldProps from './TextFieldProps';\nimport InputLabel from './InputLabel';\nimport {\n    defaultHeight,\n    iconSize,\n    inputPaddingHorizontal,\n    labelFontSize,\n    labelPaddingTop,\n    labelYOffset,\n} from './utils';\n\ninterface OutlinedTextFieldProps extends TextFieldProps {\n    animatedError: Animated.Value;\n    animatedLabel: Animated.Value;\n    focused: boolean;\n    forceFocus: () => void;\n    labelLayout: { measured: boolean; width: number; height: number };\n    onLayoutAnimatedText: (event: LayoutChangeEvent) => void;\n}\n\ntype OutlinedTextFieldStyles = NamedStylesStringUnion<'outline' | 'input' | 'iconContainer'>;\n\nconst useStyles: UseStyles<OutlinedTextFieldStyles> = function (): OutlinedTextFieldStyles {\n    const theme = useTheme();\n\n    return {\n        outline: {\n            position: 'absolute',\n            left: 0,\n            right: 0,\n            bottom: 0,\n            backgroundColor: theme.palette.background.default,\n            borderRadius: theme.shape.roundness,\n        },\n        input: {\n            flexGrow: 1,\n            paddingHorizontal: inputPaddingHorizontal,\n            textAlignVertical: 'center',\n            textAlign: 'left',\n            zIndex: theme.zIndex.textField,\n        },\n        iconContainer: {\n            position: 'absolute',\n            width: 24,\n            height: 24,\n            justifyContent: 'center',\n            alignItems: 'center',\n            right: 12,\n        },\n    };\n};\n\nconst OutlinedTextField = React.forwardRef<TextInput, OutlinedTextFieldProps>(function OutlinedTextField(props, ref) {\n    const {\n        animatedError,\n        animatedLabel,\n        disabled,\n        error,\n        focused,\n        forceFocus,\n        icon,\n        keyboardType,\n        label,\n        labelLayout,\n        onBlur,\n        onChangeText,\n        onFocus,\n        onIconPress,\n        onLayoutAnimatedText,\n        onSubmitEditing,\n        placeholder,\n        secureTextEntry,\n        style,\n        value,\n    } = props;\n\n    const theme = useTheme();\n    const styles = useStyles();\n\n    const hasActiveOutline = focused || error;\n    const inputTextColor = disabled ? theme.palette.tertiary.main : theme.palette.primary.main;\n    const activeColor = error\n        ? theme.palette.warning.main\n        : disabled\n            ? theme.palette.tertiary.main\n            : theme.palette.accent.main;\n    const placeholderColor = disabled ? theme.palette.tertiary.main : theme.palette.text.hint;\n    const outlineColor = disabled ? theme.palette.border : theme.palette.border;\n    const errorColor = disabled ? theme.palette.tertiary.main : theme.palette.warning.main;\n\n    const typography = theme.typography.body2;\n    const fontSize = typography.fontSize.unitless;\n\n    const labelScale = labelFontSize / fontSize;\n    const labelWidth = labelLayout.width;\n    const labelHeight = labelLayout.height;\n    const labelHalfWidth = labelWidth / 2;\n    const labelHalfHeight = labelHeight / 2;\n\n    const labelTranslateX = -1 * (labelHalfWidth - (labelScale * labelWidth) / 2 - (fontSize - labelFontSize) * labelScale);\n    const minInputHeight = defaultHeight - labelPaddingTop;\n    const inputHeight = labelHeight < minInputHeight ? minInputHeight : labelHeight;\n    const topPosition = Math.floor(((inputHeight > 0 ? inputHeight : 0) - labelHeight) / 2 + labelPaddingTop);\n    const iconTopPosition = (defaultHeight - (label ? 0 : labelPaddingTop) - iconSize - (label ? labelYOffset : 0)) / 2;\n    const labelTranslateY = -labelHalfHeight - (topPosition + labelYOffset);\n\n    const placeholderOpacity = hasActiveOutline\n        ? animatedLabel.interpolate({\n            inputRange: [0, 1],\n            outputRange: [hasActiveOutline ? 0 : 1, 1],\n        })\n        : labelLayout.measured ? 1 : 0;\n\n    const labelProps = {\n        activeColor,\n        error,\n        errorColor,\n        fontSize,\n        hasActiveOutline,\n        label,\n        labelScale,\n        labelTranslateX,\n        labelTranslateY,\n        onLayoutAnimatedText,\n        placeholderColor,\n        placeholderOpacity,\n        topPosition,\n    };\n\n    const outlineStyle = css([\n        styles.outline,\n        {\n            borderWidth: hasActiveOutline ? 2 : 1,\n            borderColor: error ? errorColor : (hasActiveOutline ? activeColor : outlineColor),\n            top: label ? 6 : 0,\n        },\n    ]);\n\n    const textInputStyle = css([\n        styles.input,\n        {\n            fontSize,\n            color: inputTextColor,\n            height: inputHeight,\n        },\n        icon && {\n            marginRight: iconSize + 20,\n            paddingRight: 0,\n        },\n        Platform.OS === 'web' && {\n            //@ts-ignore\n            outlineWidth: 0,\n        },\n    ]);\n\n    const containerStyle = css([\n        {\n            paddingTop: label ? labelPaddingTop : 0,\n            minHeight: label ? defaultHeight : defaultHeight + labelYOffset,\n        },\n    ]);\n\n    const iconContainerStyle = css([\n        styles.iconContainer,\n        { top: iconTopPosition },\n    ]);\n\n    const onIconButtonPress = () => {\n        forceFocus();\n        onIconPress?.();\n    };\n\n    return (\n        <View style={style}>\n            <View\n                pointerEvents={'none'}\n                style={outlineStyle}\n            />\n            <View style={containerStyle}>\n                {label ? (\n                    <InputLabel\n                        animatedLabel={animatedLabel}\n                        animatedError={animatedError}\n                        focused={focused}\n                        labelLayout={labelLayout}\n                        placeholder={placeholder}\n                        value={value}\n                        {...labelProps}\n                    />\n                ) : null}\n                <TextInput\n                    autoCapitalize={'none'}\n                    autoCorrect={false}\n                    disableFullscreenUI={true}\n                    ref={ref}\n                    onChangeText={onChangeText}\n                    placeholder={placeholder}\n                    placeholderTextColor={placeholderColor}\n                    editable={!disabled}\n                    selectionColor={activeColor}\n                    onFocus={onFocus}\n                    onBlur={onBlur}\n                    onSubmitEditing={onSubmitEditing}\n                    keyboardType={keyboardType}\n                    secureTextEntry={secureTextEntry}\n                    underlineColorAndroid={'transparent'}\n                    style={textInputStyle}\n                    value={value}\n                />\n            </View>\n            {icon ? (\n                <View style={iconContainerStyle}>\n                    <IconButton\n                        children={icon}\n                        onPress={onIconButtonPress}\n                    />\n                </View>\n            ) : null}\n        </View>\n    );\n});\n\nexport default OutlinedTextField;\n"]}
+{"version":3,"sources":["OutlinedTextField.tsx"],"names":["useStyles","theme","outline","position","left","right","bottom","borderRadius","shape","roundness","input","flexGrow","paddingHorizontal","inputPaddingHorizontal","textAlignVertical","textAlign","zIndex","textField","iconContainer","width","height","justifyContent","alignItems","OutlinedTextField","React","forwardRef","props","ref","animatedError","animatedLabel","disabled","error","focused","forceFocus","icon","keyboardType","label","labelLayout","onBlur","onChangeText","onFocus","onIconPress","onLayoutAnimatedText","onSubmitEditing","placeholder","secureTextEntry","style","value","styles","hasActiveOutline","inputTextColor","palette","tertiary","main","primary","activeColor","warning","accent","placeholderColor","text","hint","outlineColor","border","errorColor","typography","body2","fontSize","unitless","labelScale","labelFontSize","labelWidth","labelHeight","labelHalfWidth","labelHalfHeight","labelTranslateX","minInputHeight","defaultHeight","labelPaddingTop","inputHeight","topPosition","Math","floor","iconTopPosition","iconSize","labelYOffset","labelTranslateY","placeholderOpacity","interpolate","inputRange","outputRange","measured","labelProps","outlineStyle","borderWidth","borderColor","top","textInputStyle","color","marginRight","paddingRight","Platform","OS","outlineWidth","containerStyle","paddingTop","minHeight","iconContainerStyle","onIconButtonPress"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Animated, LayoutChangeEvent, Platform, TextInput, View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport IconButton from '../IconButton';\nimport TextFieldProps from './TextFieldProps';\nimport InputLabel from './InputLabel';\nimport {\n    defaultHeight,\n    iconSize,\n    inputPaddingHorizontal,\n    labelFontSize,\n    labelPaddingTop,\n    labelYOffset,\n} from './utils';\n\ninterface OutlinedTextFieldProps extends TextFieldProps {\n    animatedError: Animated.Value;\n    animatedLabel: Animated.Value;\n    focused: boolean;\n    forceFocus: () => void;\n    labelLayout: { measured: boolean; width: number; height: number };\n    onLayoutAnimatedText: (event: LayoutChangeEvent) => void;\n}\n\ntype OutlinedTextFieldStyles = NamedStylesStringUnion<'outline' | 'input' | 'iconContainer'>;\n\nconst useStyles: UseStyles<OutlinedTextFieldStyles> = function (): OutlinedTextFieldStyles {\n    const theme = useTheme();\n\n    return {\n        outline: {\n            position: 'absolute',\n            left: 0,\n            right: 0,\n            bottom: 0,\n            borderRadius: theme.shape.roundness,\n        },\n        input: {\n            flexGrow: 1,\n            paddingHorizontal: inputPaddingHorizontal,\n            textAlignVertical: 'center',\n            textAlign: 'left',\n            zIndex: theme.zIndex.textField,\n        },\n        iconContainer: {\n            position: 'absolute',\n            width: 24,\n            height: 24,\n            justifyContent: 'center',\n            alignItems: 'center',\n            right: 12,\n        },\n    };\n};\n\nconst OutlinedTextField = React.forwardRef<TextInput, OutlinedTextFieldProps>(function OutlinedTextField(props, ref) {\n    const {\n        animatedError,\n        animatedLabel,\n        disabled,\n        error,\n        focused,\n        forceFocus,\n        icon,\n        keyboardType,\n        label,\n        labelLayout,\n        onBlur,\n        onChangeText,\n        onFocus,\n        onIconPress,\n        onLayoutAnimatedText,\n        onSubmitEditing,\n        placeholder,\n        secureTextEntry,\n        style,\n        value,\n    } = props;\n\n    const theme = useTheme();\n\n    const styles = useStyles();\n\n    const hasActiveOutline = focused || error;\n    const inputTextColor = disabled ? theme.palette.tertiary.main : theme.palette.primary.main;\n    const activeColor = error\n        ? theme.palette.warning.main\n        : disabled\n            ? theme.palette.tertiary.main\n            : theme.palette.accent.main;\n    const placeholderColor = disabled ? theme.palette.tertiary.main : theme.palette.text.hint;\n    const outlineColor = disabled ? theme.palette.border : theme.palette.border;\n    const errorColor = disabled ? theme.palette.tertiary.main : theme.palette.warning.main;\n\n    const typography = theme.typography.body2;\n    const fontSize = typography.fontSize.unitless;\n\n    const labelScale = labelFontSize / fontSize;\n    const labelWidth = labelLayout.width;\n    const labelHeight = labelLayout.height;\n    const labelHalfWidth = labelWidth / 2;\n    const labelHalfHeight = labelHeight / 2;\n\n    const labelTranslateX = -1 * (labelHalfWidth - (labelScale * labelWidth) / 2 - (fontSize - labelFontSize) * labelScale);\n    const minInputHeight = defaultHeight - labelPaddingTop;\n    const inputHeight = labelHeight < minInputHeight ? minInputHeight : labelHeight;\n    const topPosition = Math.floor(((inputHeight > 0 ? inputHeight : 0) - labelHeight) / 2 + labelPaddingTop);\n    const iconTopPosition = (defaultHeight - (label ? 0 : labelPaddingTop) - iconSize - (label ? labelYOffset : 0)) / 2;\n    const labelTranslateY = -labelHalfHeight - (topPosition + labelYOffset);\n\n    const placeholderOpacity = hasActiveOutline\n        ? animatedLabel.interpolate({\n            inputRange: [0, 1],\n            outputRange: [hasActiveOutline ? 0 : 1, 1],\n        })\n        : labelLayout.measured ? 1 : 0;\n\n    const labelProps = {\n        activeColor,\n        error,\n        errorColor,\n        fontSize,\n        hasActiveOutline,\n        label,\n        labelScale,\n        labelTranslateX,\n        labelTranslateY,\n        onLayoutAnimatedText,\n        placeholderColor,\n        placeholderOpacity,\n        topPosition,\n    };\n\n    const outlineStyle = css([\n        styles.outline,\n        {\n            borderWidth: hasActiveOutline ? 2 : 1,\n            borderColor: error ? errorColor : (hasActiveOutline ? activeColor : outlineColor),\n            top: label ? 6 : 0,\n        },\n    ]);\n\n    const textInputStyle = css([\n        styles.input,\n        {\n            fontSize,\n            color: inputTextColor,\n            height: inputHeight,\n        },\n        icon && {\n            marginRight: iconSize + 20,\n            paddingRight: 0,\n        },\n        Platform.OS === 'web' && {\n            //@ts-ignore\n            outlineWidth: 0,\n        },\n    ]);\n\n    const containerStyle = css([\n        {\n            paddingTop: label ? labelPaddingTop : 0,\n            minHeight: label ? defaultHeight : defaultHeight + labelYOffset,\n        },\n    ]);\n\n    const iconContainerStyle = css([\n        styles.iconContainer,\n        { top: iconTopPosition },\n    ]);\n\n    const onIconButtonPress = () => {\n        forceFocus();\n        onIconPress?.();\n    };\n\n    return (\n        <View style={style}>\n            <View\n                pointerEvents={'none'}\n                style={outlineStyle}\n            />\n            <View style={containerStyle}>\n                {label ? (\n                    <InputLabel\n                        animatedLabel={animatedLabel}\n                        animatedError={animatedError}\n                        focused={focused}\n                        labelLayout={labelLayout}\n                        placeholder={placeholder}\n                        value={value}\n                        {...labelProps}\n                    />\n                ) : null}\n                <TextInput\n                    autoCapitalize={'none'}\n                    autoCorrect={false}\n                    disableFullscreenUI={true}\n                    ref={ref}\n                    onChangeText={onChangeText}\n                    placeholder={placeholder}\n                    placeholderTextColor={placeholderColor}\n                    editable={!disabled}\n                    selectionColor={activeColor}\n                    onFocus={onFocus}\n                    onBlur={onBlur}\n                    onSubmitEditing={onSubmitEditing}\n                    keyboardType={keyboardType}\n                    secureTextEntry={secureTextEntry}\n                    underlineColorAndroid={'transparent'}\n                    style={textInputStyle}\n                    value={value}\n                />\n            </View>\n            {icon ? (\n                <View style={iconContainerStyle}>\n                    <IconButton\n                        children={icon}\n                        onPress={onIconButtonPress}\n                    />\n                </View>\n            ) : null}\n        </View>\n    );\n});\n\nexport default OutlinedTextField;\n"]}

package/build/commonjs/hooks/useCollapsibleAppBar.js

@@ -22,15 +22,13 @@ var _useAppbarStyles = _interopRequireDefault(require("./useAppbarStyles"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const defaultOptions = {
-  keyboardDismissMode: 'none',
-  translucent: false
+  keyboardDismissMode: 'none'
 };
 const ANIMATION_DURATION_MILLIS = 100;
 const SUPPORTS_DRAG_DETECTION = _reactNative.Platform.OS !== 'web';
 
 function useCollapsibleAppBar(userOptions = defaultOptions) {
   const {
-    translucent,
     keyboardDismissMode
   } = { ...defaultOptions,
     ...userOptions
@@ -159,9 +157,9 @@ function useCollapsibleAppBar(userOptions = defaultOptions) {
   });
 
   const hasCollapsible = collapsibleToolbarHeight > 0;
-  const appBarStyle = [animatedStyle, translucent ? {
+  const appBarStyle = [animatedStyle, {
     paddingTop: safeAreaInsets.top
-  } : undefined, hasCollapsible ? styles.floating : undefined];
+  }, hasCollapsible ? styles.floating : undefined];
   return {
     appBarStyle,
     onAppBarLayout,

package/build/commonjs/hooks/useCollapsibleAppBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useCollapsibleAppBar.ts"],"names":["defaultOptions","keyboardDismissMode","translucent","ANIMATION_DURATION_MILLIS","SUPPORTS_DRAG_DETECTION","Platform","OS","useCollapsibleAppBar","userOptions","styles","safeAreaInsets","appBarHeight","onAppBarLayout","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","Animated","useDerivedValue","translateY","useSharedValue","lastTranslateY","lastOffsetY","overlapped","elevationStyle","animatedStyle","useAnimatedStyle","transform","value","boxShadow","elevation","shadowColor","shadowOffset","shadowRadius","shadowOpacity","indexRef","React","useRef","offsetsRef","onScrollViewChanged","nextIndex","prevIndex","current","savedOffsetY","withTiming","duration","scrollHandler","useAnimatedScrollHandler","onBeginDrag","runOnJS","Keyboard","dismiss","onMomentumBegin","onScroll","event","offsetY","contentOffset","y","ty","maxTy","dy","Math","min","max","onEndDrag","onMomentumEnd","threshold","nextTranslateY","hasCollapsible","appBarStyle","paddingTop","top","undefined","floating","scrollContentInsets"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport Animated from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { useHeight } from '../internal/hooks';\nimport useElevationStyle from './useElevationStyle';\nimport useAppbarStyles from './useAppbarStyles';\n\ntype WebOnlyStyle = { boxShadow: any };\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | WebOnlyStyle | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface ContentInsets {\n    top?: number;\n    bottom?: number;\n    left?: number;\n    right?: number;\n}\n\nexport interface Options {\n    keyboardDismissMode?: 'none' | 'on-drag';\n    translucent?: boolean;\n}\n\nexport interface CollapsibleAppBar {\n    appBarStyle: ViewStyleProp;\n    onAppBarLayout: OnLayoutCallback;\n    onCollapsibleToolbarLayout: OnLayoutCallback;\n    onScroll: OnScroll;\n    onScrollViewChanged: (index: number) => void;\n    scrollContentInsets: ContentInsets;\n}\n\nconst defaultOptions: Required<Options> = {\n    keyboardDismissMode: 'none',\n    translucent: false,\n};\n\nconst ANIMATION_DURATION_MILLIS = 100;\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\n\nexport default function useCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {\n    const { translucent, keyboardDismissMode }: Required<Options> = {\n        ...defaultOptions,\n        ...userOptions,\n    };\n\n    const styles = useAppbarStyles();\n\n    const safeAreaInsets = useSafeAreaInsets();\n\n    const [appBarHeight, onAppBarLayout] = useHeight();\n    const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();\n\n    const maxTranslateY = Animated.useDerivedValue(() => -collapsibleToolbarHeight);\n\n    const translateY = Animated.useSharedValue<number>(0);\n    const lastTranslateY = Animated.useSharedValue<number>(0);\n    const lastOffsetY = Animated.useSharedValue<number>(0);\n    const overlapped = Animated.useSharedValue<boolean>(false);\n\n    const elevationStyle = useElevationStyle(4);\n    const animatedStyle = Animated.useAnimatedStyle(() => {\n        return Platform.OS === 'web' ? ({\n            transform: [{ translateY: translateY.value }],\n            boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,\n        }) : ({\n            transform: [{ translateY: translateY.value }],\n            elevation: overlapped.value ? elevationStyle?.elevation : 0,\n            shadowColor: elevationStyle?.shadowColor,\n            shadowOffset: elevationStyle?.shadowOffset,\n            shadowRadius: elevationStyle?.shadowRadius,\n            shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,\n        });\n    });\n\n    const indexRef = React.useRef<number>(0);\n    const offsetsRef = React.useRef<Array<number>>([]);\n\n    const onScrollViewChanged = (nextIndex: number) => {\n        const prevIndex = indexRef.current;\n        if (prevIndex === nextIndex) {\n            return;\n        }\n\n        offsetsRef.current[prevIndex] = lastOffsetY.value;\n\n        const savedOffsetY = offsetsRef.current[nextIndex] ?? 0;\n        lastOffsetY.value = savedOffsetY;\n\n        indexRef.current = nextIndex;\n\n        // Determine whether to overlap every time index is changed.\n        overlapped.value = savedOffsetY > 0;\n\n        // If next ScrollView's offset is too short, expand app bar.\n        if (translateY.value < 0 && savedOffsetY < appBarHeight) {\n            translateY.value = Animated.withTiming(0, {\n                duration: ANIMATION_DURATION_MILLIS,\n            });\n        }\n    };\n\n    const scrollHandler = Animated.useAnimatedScrollHandler({\n        onBeginDrag: () => {\n            if (keyboardDismissMode === 'on-drag') {\n                Animated.runOnJS(Keyboard.dismiss)();\n            }\n            lastTranslateY.value = translateY.value;\n        },\n        onMomentumBegin: () => {\n            lastTranslateY.value = translateY.value;\n        },\n        onScroll: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            const ty = translateY.value;\n            const maxTy = maxTranslateY.value;\n\n            if (SUPPORTS_DRAG_DETECTION) {\n                const dy = offsetY - lastOffsetY.value;\n\n                translateY.value = offsetY <= 0 ? 0 : Math.min(Math.max(lastTranslateY.value - dy, maxTy), 0);\n\n                overlapped.value = offsetY + translateY.value > 0;\n            } else {\n                if (offsetY > -maxTy) {\n                    if (ty === 0) {\n                        translateY.value = Animated.withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {\n                            duration: ANIMATION_DURATION_MILLIS,\n                        });\n                    }\n                } else {\n                    if (ty === maxTy) {\n                        translateY.value = Animated.withTiming(0, {\n                            duration: ANIMATION_DURATION_MILLIS,\n                        });\n                    }\n                }\n\n                overlapped.value = offsetY > 0;\n\n                lastOffsetY.value = offsetY;\n            }\n        },\n        onEndDrag: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n        onMomentumEnd: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            lastOffsetY.value = offsetY;\n\n            const ty = translateY.value;\n            const maxTy = maxTranslateY.value;\n\n            // If toolbar is already positioned on edge, do nothing.\n            if (ty <= maxTy || ty >= 0) {\n                return;\n            }\n\n            const threshold = maxTy * 0.5;\n\n            const nextTranslateY = (ty > threshold || offsetY < appBarHeight) ? 0 : maxTy;\n\n            overlapped.value = offsetY + nextTranslateY > 0;\n\n            translateY.value = Animated.withTiming(nextTranslateY, {\n                duration: ANIMATION_DURATION_MILLIS,\n            });\n        },\n    });\n\n    const hasCollapsible = collapsibleToolbarHeight > 0;\n\n    const appBarStyle = [\n        animatedStyle,\n        translucent ? { paddingTop: safeAreaInsets.top } : undefined,\n        hasCollapsible ? styles.floating : undefined,\n    ];\n\n    return {\n        appBarStyle,\n        onAppBarLayout,\n        onCollapsibleToolbarLayout,\n        onScroll: scrollHandler,\n        onScrollViewChanged,\n        scrollContentInsets: { top: hasCollapsible ? appBarHeight : 0 },\n    };\n};\n"]}
+{"version":3,"sources":["useCollapsibleAppBar.ts"],"names":["defaultOptions","keyboardDismissMode","ANIMATION_DURATION_MILLIS","SUPPORTS_DRAG_DETECTION","Platform","OS","useCollapsibleAppBar","userOptions","styles","safeAreaInsets","appBarHeight","onAppBarLayout","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","Animated","useDerivedValue","translateY","useSharedValue","lastTranslateY","lastOffsetY","overlapped","elevationStyle","animatedStyle","useAnimatedStyle","transform","value","boxShadow","elevation","shadowColor","shadowOffset","shadowRadius","shadowOpacity","indexRef","React","useRef","offsetsRef","onScrollViewChanged","nextIndex","prevIndex","current","savedOffsetY","withTiming","duration","scrollHandler","useAnimatedScrollHandler","onBeginDrag","runOnJS","Keyboard","dismiss","onMomentumBegin","onScroll","event","offsetY","contentOffset","y","ty","maxTy","dy","Math","min","max","onEndDrag","onMomentumEnd","threshold","nextTranslateY","hasCollapsible","appBarStyle","paddingTop","top","floating","undefined","scrollContentInsets"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport Animated from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { useHeight } from '../internal/hooks';\nimport useElevationStyle from './useElevationStyle';\nimport useAppbarStyles from './useAppbarStyles';\n\ntype WebOnlyStyle = { boxShadow: any };\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | WebOnlyStyle | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface ContentInsets {\n    top?: number;\n    bottom?: number;\n    left?: number;\n    right?: number;\n}\n\nexport interface Options {\n    keyboardDismissMode?: 'none' | 'on-drag';\n}\n\nexport interface CollapsibleAppBar {\n    appBarStyle: ViewStyleProp;\n    onAppBarLayout: OnLayoutCallback;\n    onCollapsibleToolbarLayout: OnLayoutCallback;\n    onScroll: OnScroll;\n    onScrollViewChanged: (index: number) => void;\n    scrollContentInsets: ContentInsets;\n}\n\nconst defaultOptions: Required<Options> = {\n    keyboardDismissMode: 'none',\n};\n\nconst ANIMATION_DURATION_MILLIS = 100;\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\n\nexport default function useCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {\n    const { keyboardDismissMode }: Required<Options> = {\n        ...defaultOptions,\n        ...userOptions,\n    };\n\n    const styles = useAppbarStyles();\n\n    const safeAreaInsets = useSafeAreaInsets();\n\n    const [appBarHeight, onAppBarLayout] = useHeight();\n    const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();\n\n    const maxTranslateY = Animated.useDerivedValue(() => -collapsibleToolbarHeight);\n\n    const translateY = Animated.useSharedValue<number>(0);\n    const lastTranslateY = Animated.useSharedValue<number>(0);\n    const lastOffsetY = Animated.useSharedValue<number>(0);\n    const overlapped = Animated.useSharedValue<boolean>(false);\n\n    const elevationStyle = useElevationStyle(4);\n    const animatedStyle = Animated.useAnimatedStyle(() => {\n        return Platform.OS === 'web' ? ({\n            transform: [{ translateY: translateY.value }],\n            boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,\n        }) : ({\n            transform: [{ translateY: translateY.value }],\n            elevation: overlapped.value ? elevationStyle?.elevation : 0,\n            shadowColor: elevationStyle?.shadowColor,\n            shadowOffset: elevationStyle?.shadowOffset,\n            shadowRadius: elevationStyle?.shadowRadius,\n            shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,\n        });\n    });\n\n    const indexRef = React.useRef<number>(0);\n    const offsetsRef = React.useRef<Array<number>>([]);\n\n    const onScrollViewChanged = (nextIndex: number) => {\n        const prevIndex = indexRef.current;\n        if (prevIndex === nextIndex) {\n            return;\n        }\n\n        offsetsRef.current[prevIndex] = lastOffsetY.value;\n\n        const savedOffsetY = offsetsRef.current[nextIndex] ?? 0;\n        lastOffsetY.value = savedOffsetY;\n\n        indexRef.current = nextIndex;\n\n        // Determine whether to overlap every time index is changed.\n        overlapped.value = savedOffsetY > 0;\n\n        // If next ScrollView's offset is too short, expand app bar.\n        if (translateY.value < 0 && savedOffsetY < appBarHeight) {\n            translateY.value = Animated.withTiming(0, {\n                duration: ANIMATION_DURATION_MILLIS,\n            });\n        }\n    };\n\n    const scrollHandler = Animated.useAnimatedScrollHandler({\n        onBeginDrag: () => {\n            if (keyboardDismissMode === 'on-drag') {\n                Animated.runOnJS(Keyboard.dismiss)();\n            }\n            lastTranslateY.value = translateY.value;\n        },\n        onMomentumBegin: () => {\n            lastTranslateY.value = translateY.value;\n        },\n        onScroll: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            const ty = translateY.value;\n            const maxTy = maxTranslateY.value;\n\n            if (SUPPORTS_DRAG_DETECTION) {\n                const dy = offsetY - lastOffsetY.value;\n\n                translateY.value = offsetY <= 0 ? 0 : Math.min(Math.max(lastTranslateY.value - dy, maxTy), 0);\n\n                overlapped.value = offsetY + translateY.value > 0;\n            } else {\n                if (offsetY > -maxTy) {\n                    if (ty === 0) {\n                        translateY.value = Animated.withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {\n                            duration: ANIMATION_DURATION_MILLIS,\n                        });\n                    }\n                } else {\n                    if (ty === maxTy) {\n                        translateY.value = Animated.withTiming(0, {\n                            duration: ANIMATION_DURATION_MILLIS,\n                        });\n                    }\n                }\n\n                overlapped.value = offsetY > 0;\n\n                lastOffsetY.value = offsetY;\n            }\n        },\n        onEndDrag: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n        onMomentumEnd: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            lastOffsetY.value = offsetY;\n\n            const ty = translateY.value;\n            const maxTy = maxTranslateY.value;\n\n            // If toolbar is already positioned on edge, do nothing.\n            if (ty <= maxTy || ty >= 0) {\n                return;\n            }\n\n            const threshold = maxTy * 0.5;\n\n            const nextTranslateY = (ty > threshold || offsetY < appBarHeight) ? 0 : maxTy;\n\n            overlapped.value = offsetY + nextTranslateY > 0;\n\n            translateY.value = Animated.withTiming(nextTranslateY, {\n                duration: ANIMATION_DURATION_MILLIS,\n            });\n        },\n    });\n\n    const hasCollapsible = collapsibleToolbarHeight > 0;\n\n    const appBarStyle = [\n        animatedStyle,\n        { paddingTop: safeAreaInsets.top },\n        hasCollapsible ? styles.floating : undefined,\n    ];\n\n    return {\n        appBarStyle,\n        onAppBarLayout,\n        onCollapsibleToolbarLayout,\n        onScroll: scrollHandler,\n        onScrollViewChanged,\n        scrollContentInsets: { top: hasCollapsible ? appBarHeight : 0 },\n    };\n};\n"]}

package/build/commonjs/hooks/useFadeInAppBar.js

@@ -27,8 +27,7 @@ const defaultOptions = {
   fadeInBeginY: (endY, appBarHeight) => endY - appBarHeight,
   fadeInEndY: appBarHeight => appBarHeight,
   floating: true,
-  keyboardDismissMode: 'none',
-  translucent: false
+  keyboardDismissMode: 'none'
 };
 const shadowOffset = _reactNative.Platform.OS === 'ios' ? {
   width: 0,
@@ -40,8 +39,7 @@ function useFadeInAppBar(userOptions = defaultOptions) {
     fadeInBeginY,
     fadeInEndY,
     floating,
-    keyboardDismissMode,
-    translucent
+    keyboardDismissMode
   } = { ...defaultOptions,
     ...userOptions
   };
@@ -100,9 +98,9 @@ function useFadeInAppBar(userOptions = defaultOptions) {
     }
   });
 
-  const appBarStyle = [animatedAppBarStyle, translucent ? {
+  const appBarStyle = [animatedAppBarStyle, {
     paddingTop: safeAreaInsets.top
-  } : undefined, floating ? styles.floating : undefined];
+  }, floating ? styles.floating : undefined];
   return {
     appBarStyle,
     titleStyle: [animatedTitleStyle],

package/build/commonjs/hooks/useFadeInAppBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useFadeInAppBar.ts"],"names":["defaultOptions","fadeInBeginY","endY","appBarHeight","fadeInEndY","floating","keyboardDismissMode","translucent","shadowOffset","Platform","OS","width","height","undefined","useFadeInAppBar","userOptions","theme","styles","safeAreaInsets","onAppBarLayout","fromOffsetY","toOffsetY","React","useMemo","beginY","dy","Animated","useSharedValue","lastOffsetY","normalized","backgroundColor","palette","background","default","r","g","b","animatedAppBarStyle","useAnimatedStyle","value","elevation","shadowColor","shadowRadius","shadowOpacity","animatedTitleStyle","opacity","scrollHandler","useAnimatedScrollHandler","onBeginDrag","runOnJS","Keyboard","dismiss","onScroll","event","offsetY","contentOffset","y","distance","Math","max","localOffsetY","min","onEndDrag","onMomentumEnd","appBarStyle","paddingTop","top","titleStyle"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport Animated from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { rgb } from '@fountain-ui/utils';\nimport { useHeight } from '../internal/hooks';\nimport { useTheme } from '../styles';\nimport useAppbarStyles from './useAppbarStyles';\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface Options {\n    fadeInBeginY?: number | ((endY: number, appBarHeight: number) => number);\n    fadeInEndY?: number | ((appBarHeight: number) => number);\n    floating?: boolean;\n    keyboardDismissMode?: 'none' | 'on-drag';\n    translucent?: boolean;\n}\n\nexport interface FadeInAppBar {\n    appBarStyle: ViewStyleProp;\n    titleStyle: ViewStyleProp;\n    onAppBarLayout: OnLayoutCallback;\n    onScroll: OnScroll;\n    dy: Animated.SharedValue<number>;\n    normalized: Animated.SharedValue<number>;\n}\n\nconst defaultOptions: Required<Options> = {\n    fadeInBeginY: (endY, appBarHeight) => endY - appBarHeight,\n    fadeInEndY: (appBarHeight) => appBarHeight,\n    floating: true,\n    keyboardDismissMode: 'none',\n    translucent: false,\n};\n\nconst shadowOffset = Platform.OS === 'ios' ? { width: 0, height: 3 } : undefined;\n\nexport default function useFadeInAppBar(userOptions: Options = defaultOptions): FadeInAppBar {\n    const {\n        fadeInBeginY,\n        fadeInEndY,\n        floating,\n        keyboardDismissMode,\n        translucent,\n    }: Required<Options> = {\n        ...defaultOptions,\n        ...userOptions,\n    };\n\n    const theme = useTheme();\n\n    const styles = useAppbarStyles();\n\n    const safeAreaInsets = useSafeAreaInsets();\n\n    const [appBarHeight, onAppBarLayout] = useHeight();\n\n    const [fromOffsetY, toOffsetY] = React.useMemo(() => {\n        const endY = typeof fadeInEndY === 'function'\n            ? fadeInEndY(appBarHeight)\n            : fadeInEndY;\n\n        const beginY = typeof fadeInBeginY === 'function'\n            ? fadeInBeginY(endY, appBarHeight)\n            : fadeInBeginY;\n\n        return [beginY, endY];\n    }, [fadeInBeginY, fadeInBeginY, appBarHeight]);\n\n    const dy = Animated.useSharedValue<number>(0);\n    const lastOffsetY = Animated.useSharedValue<number>(0);\n    const normalized = Animated.useSharedValue<number>(0);\n\n    const backgroundColor = theme.palette.background.default;\n    const [r, g, b] = React.useMemo(() => rgb(backgroundColor), [backgroundColor]);\n\n    const animatedAppBarStyle = Animated.useAnimatedStyle(() => ({\n        backgroundColor: `rgba(${r}, ${g}, ${b}, ${normalized.value})`,\n        elevation: normalized.value >= 1 ? 6 : 0,\n        shadowColor: '#000',\n        shadowOffset,\n        shadowRadius: 4.65,\n        shadowOpacity: normalized.value >= 1 ? 0.25 : 0,\n    }));\n\n    const animatedTitleStyle = Animated.useAnimatedStyle(() => ({\n        opacity: normalized.value,\n    }));\n\n    const scrollHandler = Animated.useAnimatedScrollHandler({\n        onBeginDrag: () => {\n            if (keyboardDismissMode === 'on-drag') {\n                Animated.runOnJS(Keyboard.dismiss)();\n            }\n        },\n        onScroll: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            const distance = Math.max(toOffsetY - fromOffsetY, 1);\n            const localOffsetY = offsetY - fromOffsetY;\n\n            dy.value = offsetY - lastOffsetY.value;\n\n            normalized.value = Math.min(Math.max(localOffsetY / distance, 0), 1);\n        },\n        onEndDrag: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n        onMomentumEnd: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n    });\n\n    const appBarStyle = [\n        animatedAppBarStyle,\n        translucent ? { paddingTop: safeAreaInsets.top } : undefined,\n        floating ? styles.floating : undefined,\n    ];\n\n    return {\n        appBarStyle,\n        titleStyle: [animatedTitleStyle],\n        onAppBarLayout,\n        onScroll: scrollHandler,\n        dy,\n        normalized,\n    };\n};\n"]}
+{"version":3,"sources":["useFadeInAppBar.ts"],"names":["defaultOptions","fadeInBeginY","endY","appBarHeight","fadeInEndY","floating","keyboardDismissMode","shadowOffset","Platform","OS","width","height","undefined","useFadeInAppBar","userOptions","theme","styles","safeAreaInsets","onAppBarLayout","fromOffsetY","toOffsetY","React","useMemo","beginY","dy","Animated","useSharedValue","lastOffsetY","normalized","backgroundColor","palette","background","default","r","g","b","animatedAppBarStyle","useAnimatedStyle","value","elevation","shadowColor","shadowRadius","shadowOpacity","animatedTitleStyle","opacity","scrollHandler","useAnimatedScrollHandler","onBeginDrag","runOnJS","Keyboard","dismiss","onScroll","event","offsetY","contentOffset","y","distance","Math","max","localOffsetY","min","onEndDrag","onMomentumEnd","appBarStyle","paddingTop","top","titleStyle"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport Animated from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { rgb } from '@fountain-ui/utils';\nimport { useHeight } from '../internal/hooks';\nimport { useTheme } from '../styles';\nimport useAppbarStyles from './useAppbarStyles';\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface Options {\n    fadeInBeginY?: number | ((endY: number, appBarHeight: number) => number);\n    fadeInEndY?: number | ((appBarHeight: number) => number);\n    floating?: boolean;\n    keyboardDismissMode?: 'none' | 'on-drag';\n}\n\nexport interface FadeInAppBar {\n    appBarStyle: ViewStyleProp;\n    titleStyle: ViewStyleProp;\n    onAppBarLayout: OnLayoutCallback;\n    onScroll: OnScroll;\n    dy: Animated.SharedValue<number>;\n    normalized: Animated.SharedValue<number>;\n}\n\nconst defaultOptions: Required<Options> = {\n    fadeInBeginY: (endY, appBarHeight) => endY - appBarHeight,\n    fadeInEndY: (appBarHeight) => appBarHeight,\n    floating: true,\n    keyboardDismissMode: 'none',\n};\n\nconst shadowOffset = Platform.OS === 'ios' ? { width: 0, height: 3 } : undefined;\n\nexport default function useFadeInAppBar(userOptions: Options = defaultOptions): FadeInAppBar {\n    const {\n        fadeInBeginY,\n        fadeInEndY,\n        floating,\n        keyboardDismissMode,\n    }: Required<Options> = {\n        ...defaultOptions,\n        ...userOptions,\n    };\n\n    const theme = useTheme();\n\n    const styles = useAppbarStyles();\n\n    const safeAreaInsets = useSafeAreaInsets();\n\n    const [appBarHeight, onAppBarLayout] = useHeight();\n\n    const [fromOffsetY, toOffsetY] = React.useMemo(() => {\n        const endY = typeof fadeInEndY === 'function'\n            ? fadeInEndY(appBarHeight)\n            : fadeInEndY;\n\n        const beginY = typeof fadeInBeginY === 'function'\n            ? fadeInBeginY(endY, appBarHeight)\n            : fadeInBeginY;\n\n        return [beginY, endY];\n    }, [fadeInBeginY, fadeInBeginY, appBarHeight]);\n\n    const dy = Animated.useSharedValue<number>(0);\n    const lastOffsetY = Animated.useSharedValue<number>(0);\n    const normalized = Animated.useSharedValue<number>(0);\n\n    const backgroundColor = theme.palette.background.default;\n    const [r, g, b] = React.useMemo(() => rgb(backgroundColor), [backgroundColor]);\n\n    const animatedAppBarStyle = Animated.useAnimatedStyle(() => ({\n        backgroundColor: `rgba(${r}, ${g}, ${b}, ${normalized.value})`,\n        elevation: normalized.value >= 1 ? 6 : 0,\n        shadowColor: '#000',\n        shadowOffset,\n        shadowRadius: 4.65,\n        shadowOpacity: normalized.value >= 1 ? 0.25 : 0,\n    }));\n\n    const animatedTitleStyle = Animated.useAnimatedStyle(() => ({\n        opacity: normalized.value,\n    }));\n\n    const scrollHandler = Animated.useAnimatedScrollHandler({\n        onBeginDrag: () => {\n            if (keyboardDismissMode === 'on-drag') {\n                Animated.runOnJS(Keyboard.dismiss)();\n            }\n        },\n        onScroll: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            const distance = Math.max(toOffsetY - fromOffsetY, 1);\n            const localOffsetY = offsetY - fromOffsetY;\n\n            dy.value = offsetY - lastOffsetY.value;\n\n            normalized.value = Math.min(Math.max(localOffsetY / distance, 0), 1);\n        },\n        onEndDrag: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n        onMomentumEnd: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n    });\n\n    const appBarStyle = [\n        animatedAppBarStyle,\n        { paddingTop: safeAreaInsets.top },\n        floating ? styles.floating : undefined,\n    ];\n\n    return {\n        appBarStyle,\n        titleStyle: [animatedTitleStyle],\n        onAppBarLayout,\n        onScroll: scrollHandler,\n        dy,\n        normalized,\n    };\n};\n"]}

package/build/module/AppBar/AppBar.js

@@ -12,15 +12,6 @@ const useStyles = function () {
       flexShrink: 0,
       width: '100%',
       zIndex: theme.zIndex.appBar
-    },
-    colorDefault: {
-      backgroundColor: theme.palette.background.default
-    },
-    colorPrimary: {
-      backgroundColor: theme.palette.primary.main
-    },
-    colorTransparent: {
-      backgroundColor: 'transparent'
     }
   };
 };
@@ -31,14 +22,18 @@ const AppBar = /*#__PURE__*/React.forwardRef(function AppBar(props, ref) {
     style,
     ...otherProps
   } = props;
+  const theme = useTheme();
   const styles = useStyles();
-  const colorStyle = color === 'default' ? styles.colorDefault : color === 'primary' ? styles.colorPrimary : styles.colorTransparent;
-  const paperStyle = css([styles.root, colorStyle, style]);
+  const backgroundColor = color === 'default' ? theme.palette.background.default : color === 'paper' ? theme.palette.paper.default : color === 'primary' ? theme.palette.primary.main : 'transparent';
+  const paperStyle = css([styles.root, {
+    backgroundColor
+  }, style]);
   return /*#__PURE__*/React.createElement(Paper, _extends({
     ref: ref,
-    square: true,
+    colorValue: backgroundColor,
     elevation: 0,
-    style: paperStyle
+    style: paperStyle,
+    square: true
   }, otherProps));
 });
 export default AppBar;