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

package/src/AppBar/AppBar.tsx

@@ -5,11 +5,7 @@ import Paper from '../Paper';
 import { css, useTheme } from '../styles';
 import type AppBarProps from './AppBarProps';
 
-type AppBarStyleKeys =
-    | 'root'
-    | 'colorDefault'
-    | 'colorPrimary'
-    | 'colorTransparent';
+type AppBarStyleKeys = 'root';
 
 type AppBarStyles = NamedStylesStringUnion<AppBarStyleKeys>;
 
@@ -23,15 +19,6 @@ const useStyles: UseStyles<AppBarStyles> = function (): AppBarStyles {
             width: '100%',
             zIndex: theme.zIndex.appBar,
         },
-        colorDefault: {
-            backgroundColor: theme.palette.background.default,
-        },
-        colorPrimary: {
-            backgroundColor: theme.palette.primary.main,
-        },
-        colorTransparent: {
-            backgroundColor: 'transparent',
-        },
     };
 };
 
@@ -42,26 +29,31 @@ const AppBar = React.forwardRef<View, AppBarProps>(function AppBar(props, ref) {
         ...otherProps
     } = props;
 
+    const theme = useTheme();
+
     const styles = useStyles();
 
-    const colorStyle = color === 'default'
-        ? styles.colorDefault
-        : color === 'primary'
-            ? styles.colorPrimary
-            : styles.colorTransparent;
+    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,
-        colorStyle,
+        { backgroundColor },
         style,
     ]);
 
     return (
         <Paper
             ref={ref}
-            square
+            colorValue={backgroundColor}
             elevation={0}
             style={paperStyle}
+            square={true}
             {...otherProps}
         />
     );

package/src/AppBar/AppBarProps.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import type { OverridableComponentProps } from '../types';
 import type { PaperProps } from '../Paper';
 
-export type AppBarColor = 'default' | 'primary' | 'transparent';
+export type AppBarColor = 'default' | 'paper' | 'primary' | 'transparent';
 
 export default interface AppBarProps extends OverridableComponentProps<PaperProps, {
     /**

package/src/Paper/Paper.tsx

@@ -3,10 +3,12 @@ import { View } from 'react-native';
 import { css, StyleSheet, useTheme } from '../styles';
 import { useElevationStyle } from '../hooks';
 import type PaperProps from './PaperProps';
+import PaperStylesProvider from './PaperStylesProvider';
 
 const Paper = React.forwardRef<View, PaperProps>(function Paper(props, ref) {
     const {
         color = 'default',
+        colorValue,
         elevation = 1,
         style: styleProp,
         square = false,
@@ -16,9 +18,9 @@ const Paper = React.forwardRef<View, PaperProps>(function Paper(props, ref) {
 
     const theme = useTheme();
 
-    const rootStyle = {
-        backgroundColor: theme.palette.paper[color],
-    };
+    const backgroundColor = colorValue ?? theme.palette.paper[color];
+
+    const rootStyle = { backgroundColor };
 
     const roundedStyle = {
         borderRadius: theme.shape.roundness,
@@ -40,11 +42,15 @@ const Paper = React.forwardRef<View, PaperProps>(function Paper(props, ref) {
     ]);
 
     return (
-        <View
-            ref={ref}
-            style={style}
-            {...otherProps}
-        />
+        <PaperStylesProvider
+            value={{ backgroundColor }}
+        >
+            <View
+                ref={ref}
+                style={style}
+                {...otherProps}
+            />
+        </PaperStylesProvider>
     );
 });
 

package/src/Paper/PaperProps.ts

@@ -19,6 +19,12 @@ export default interface PaperProps extends OverridableComponentProps<ViewProps,
      */
     color?: PaperColor;
 
+    /**
+     * The hex color value of Paper.
+     * It has higher priority than `color` prop.
+     */
+    colorValue?: string;
+
     /**
      * Shadow depth, corresponds to `dp` in the spec.
      * It accepts values between 0 and 24 inclusive.

package/src/Paper/PaperStylesProvider.tsx

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+
+export type PaperStyles = {
+    backgroundColor: string;
+}
+
+export const PaperStylesContext = createContext<PaperStyles | null>(null);
+
+export default PaperStylesContext.Provider;

package/src/Paper/usePaperStyles.ts

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import { PaperStylesContext } from './PaperStylesProvider';
+
+export default function usePaperStyles() {
+    return useContext(PaperStylesContext);
+};

package/src/TextField/InputLabel.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Animated, LayoutChangeEvent, StyleSheet } from 'react-native';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import { useTheme } from '../styles';
+import usePaperStyles from '../Paper/usePaperStyles';
 import { inputPaddingHorizontal } from './utils';
 
 interface LabelProps {
@@ -30,8 +31,6 @@ interface LabelProps {
 type InputLabelStyles = NamedStylesStringUnion<'background' | 'backgroundText' | 'placeholder'>;
 
 const useStyles: UseStyles<InputLabelStyles> = function (): InputLabelStyles {
-    const theme = useTheme();
-
     return {
         background: {
             position: 'absolute',
@@ -40,15 +39,13 @@ const useStyles: UseStyles<InputLabelStyles> = function (): InputLabelStyles {
             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,
         },
         placeholder: {
             position: 'absolute',
@@ -81,8 +78,16 @@ const InputLabel = (props: LabelProps) => {
         value,
     } = props;
 
+    const theme = useTheme();
+
     const styles = useStyles();
 
+    const paperStyles = usePaperStyles();
+
+    const backgroundStyle = {
+        backgroundColor: paperStyles?.backgroundColor ?? theme.palette.background.default,
+    };
+
     const hasFocus = hasActiveOutline || value;
     const opacity = animatedLabel.interpolate({
         inputRange: [0, 1],
@@ -141,6 +146,7 @@ const InputLabel = (props: LabelProps) => {
                     pointerEvents={'none'}
                     style={[
                         styles.background,
+                        backgroundStyle,
                         {
                             opacity,
                             transform: [
@@ -159,6 +165,7 @@ const InputLabel = (props: LabelProps) => {
                     style={[
                         styles.placeholder,
                         styles.backgroundText,
+                        backgroundStyle,
                         labelStyle,
                         {
                             top: topPosition + 1,

package/src/TextField/OutlinedTextField.tsx

@@ -34,7 +34,6 @@ const useStyles: UseStyles<OutlinedTextFieldStyles> = function (): OutlinedTextF
             left: 0,
             right: 0,
             bottom: 0,
-            backgroundColor: theme.palette.background.default,
             borderRadius: theme.shape.roundness,
         },
         input: {
@@ -80,6 +79,7 @@ const OutlinedTextField = React.forwardRef<TextInput, OutlinedTextFieldProps>(fu
     } = props;
 
     const theme = useTheme();
+
     const styles = useStyles();
 
     const hasActiveOutline = focused || error;

package/src/hooks/useCollapsibleAppBar.ts

@@ -23,7 +23,6 @@ export interface ContentInsets {
 
 export interface Options {
     keyboardDismissMode?: 'none' | 'on-drag';
-    translucent?: boolean;
 }
 
 export interface CollapsibleAppBar {
@@ -37,7 +36,6 @@ export interface CollapsibleAppBar {
 
 const defaultOptions: Required<Options> = {
     keyboardDismissMode: 'none',
-    translucent: false,
 };
 
 const ANIMATION_DURATION_MILLIS = 100;
@@ -45,7 +43,7 @@ const ANIMATION_DURATION_MILLIS = 100;
 const SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';
 
 export default function useCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {
-    const { translucent, keyboardDismissMode }: Required<Options> = {
+    const { keyboardDismissMode }: Required<Options> = {
         ...defaultOptions,
         ...userOptions,
     };
@@ -180,7 +178,7 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
 
     const appBarStyle = [
         animatedStyle,
-        translucent ? { paddingTop: safeAreaInsets.top } : undefined,
+        { paddingTop: safeAreaInsets.top },
         hasCollapsible ? styles.floating : undefined,
     ];
 

package/src/hooks/useFadeInAppBar.ts

@@ -18,7 +18,6 @@ export interface Options {
     fadeInEndY?: number | ((appBarHeight: number) => number);
     floating?: boolean;
     keyboardDismissMode?: 'none' | 'on-drag';
-    translucent?: boolean;
 }
 
 export interface FadeInAppBar {
@@ -35,7 +34,6 @@ const defaultOptions: Required<Options> = {
     fadeInEndY: (appBarHeight) => appBarHeight,
     floating: true,
     keyboardDismissMode: 'none',
-    translucent: false,
 };
 
 const shadowOffset = Platform.OS === 'ios' ? { width: 0, height: 3 } : undefined;
@@ -46,7 +44,6 @@ export default function useFadeInAppBar(userOptions: Options = defaultOptions):
         fadeInEndY,
         floating,
         keyboardDismissMode,
-        translucent,
     }: Required<Options> = {
         ...defaultOptions,
         ...userOptions,
@@ -118,7 +115,7 @@ export default function useFadeInAppBar(userOptions: Options = defaultOptions):
 
     const appBarStyle = [
         animatedAppBarStyle,
-        translucent ? { paddingTop: safeAreaInsets.top } : undefined,
+        { paddingTop: safeAreaInsets.top },
         floating ? styles.floating : undefined,
     ];