npm - @fountain-ui/core - Versions diffs - 2.0.0-beta.5 → 2.0.0-beta.6 - Mend

@fountain-ui/core 2.0.0-beta.5 → 2.0.0-beta.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/build/commonjs/TextField/InputLabel.js +3 -3
package/build/commonjs/TextField/InputLabel.js.map +1 -1
package/build/module/TextField/InputLabel.js +3 -3
package/build/module/TextField/InputLabel.js.map +1 -1
package/package.json +2 -2
package/src/TextField/InputLabel.tsx +3 -1

package/build/commonjs/TextField/InputLabel.js CHANGED Viewed

@@ -26,7 +26,7 @@ const useStyles = function () {
       bottom: 0,
       right: 0,
       width: 8,
-      height: 2
+      height: 4
     },
     backgroundText: {
       position: 'absolute',
@@ -112,7 +112,7 @@ const InputLabel = props => {
   }, [/*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
     key: 'labelBackground-view',
     pointerEvents: 'none',
-    style: [backgroundStyle, {
+    style: [styles.background, backgroundStyle, {
       opacity,
       transform: [{
         translateX: animatedLabel.interpolate({
@@ -123,7 +123,7 @@ const InputLabel = props => {
     }]
   }), /*#__PURE__*/_react.default.createElement(_reactNative.Animated.Text, {
     key: 'labelBackground-text',
-    style: [styles.placeholder, backgroundStyle, labelStyle, {
+    style: [styles.placeholder, styles.backgroundText, backgroundStyle, labelStyle, {
       top: topPosition + 1,
       opacity,
       transform: [...labelStyle.transform, {

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

	@@ -1 +1 @@
1	- {"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: 2,\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 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 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"]}
1	+ {"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/module/TextField/InputLabel.js CHANGED Viewed

@@ -13,7 +13,7 @@ const useStyles = function () {
       bottom: 0,
       right: 0,
       width: 8,
-      height: 2
+      height: 4
     },
     backgroundText: {
       position: 'absolute',
@@ -99,7 +99,7 @@ const InputLabel = props => {
   }, [/*#__PURE__*/React.createElement(Animated.View, {
     key: 'labelBackground-view',
     pointerEvents: 'none',
-    style: [backgroundStyle, {
+    style: [styles.background, backgroundStyle, {
       opacity,
       transform: [{
         translateX: animatedLabel.interpolate({
@@ -110,7 +110,7 @@ const InputLabel = props => {
     }]
   }), /*#__PURE__*/React.createElement(Animated.Text, {
     key: 'labelBackground-text',
-    style: [styles.placeholder, backgroundStyle, labelStyle, {
+    style: [styles.placeholder, styles.backgroundText, backgroundStyle, labelStyle, {
       top: topPosition + 1,
       opacity,
       transform: [...labelStyle.transform, {

package/build/module/TextField/InputLabel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["InputLabel.tsx"],"names":["React","Animated","StyleSheet","useTheme","usePaperStyles","inputPaddingHorizontal","useStyles","background","position","top","left","bottom","right","width","height","backgroundText","paddingHorizontal","color","placeholder","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","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: 2,\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 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 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"]}
1	+ {"version":3,"sources":["InputLabel.tsx"],"names":["React","Animated","StyleSheet","useTheme","usePaperStyles","inputPaddingHorizontal","useStyles","background","position","top","left","bottom","right","width","height","backgroundText","paddingHorizontal","color","placeholder","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","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/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/core",
-  "version": "2.0.0-beta.5",
+  "version": "2.0.0-beta.6",
   "author": "Fountain-UI Team",
   "description": "React components that implement Tappytoon's Fountain Design.",
   "license": "MIT",
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5ff7454430142fbdfc2f57a71ad1de83768dd0ec"
+  "gitHead": "b1e9e3693498be161f9acc8eff92474d7ecdd678"
 }

package/src/TextField/InputLabel.tsx CHANGED Viewed

@@ -39,7 +39,7 @@ const useStyles: UseStyles<InputLabelStyles> = function (): InputLabelStyles {
             bottom: 0,
             right: 0,
             width: 8,
-            height: 2,
+            height: 4,
         },
         backgroundText: {
             position: 'absolute',
@@ -145,6 +145,7 @@ const InputLabel = (props: LabelProps) => {
                     key={'labelBackground-view'}
                     pointerEvents={'none'}
                     style={[
+                        styles.background,
                         backgroundStyle,
                         {
                             opacity,
@@ -163,6 +164,7 @@ const InputLabel = (props: LabelProps) => {
                     key={'labelBackground-text'}
                     style={[
                         styles.placeholder,
+                        styles.backgroundText,
                         backgroundStyle,
                         labelStyle,
                         {