@magmamath/students-features 0.9.4-rc.1 → 0.9.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/commonjs/features/keyboard/components/MainLayout.js +15 -15
- package/dist/commonjs/features/keyboard/components/MainLayout.js.map +1 -1
- package/dist/module/features/keyboard/components/MainLayout.js +17 -17
- package/dist/module/features/keyboard/components/MainLayout.js.map +1 -1
- package/dist/typescript/commonjs/features/keyboard/components/MainLayout.d.ts.map +1 -1
- package/dist/typescript/module/features/keyboard/components/MainLayout.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/features/keyboard/components/MainLayout.tsx +27 -18
|
@@ -15,7 +15,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
|
|
|
15
15
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
16
16
|
const MainLayout = ({
|
|
17
17
|
characterType,
|
|
18
|
-
showUnderlinedKeys,
|
|
18
|
+
showUnderlinedKeys = false,
|
|
19
19
|
...props
|
|
20
20
|
}) => {
|
|
21
21
|
const [isUnderlinedVisible, setIsUnderlinedVisible] = (0, _react.useState)(showUnderlinedKeys);
|
|
@@ -27,33 +27,33 @@ const MainLayout = ({
|
|
|
27
27
|
} = (0, _reactNative.useWindowDimensions)();
|
|
28
28
|
const isMobile = width <= _constants.MOBILE_LAYOUT_WIDTH || _reactNativeUi.IS_MOBILE;
|
|
29
29
|
const Layout = (0, _react.useMemo)(() => (0, _keyboardLayouts.getLayoutByCharType)(characterType), [characterType]);
|
|
30
|
+
const isUnderlinedLayoutVisible = isUnderlinedVisible && !isSecondaryLayoutSelected && !isMobile;
|
|
31
|
+
const animateFade = (0, _react.useCallback)((toValue, onComplete) => {
|
|
32
|
+
fadeRef.current?.stop();
|
|
33
|
+
fadeRef.current = _reactNative.Animated.timing(fadeAnim, {
|
|
34
|
+
toValue,
|
|
35
|
+
duration: 250,
|
|
36
|
+
useNativeDriver: !_reactNativeUi.IS_WEB
|
|
37
|
+
});
|
|
38
|
+
fadeRef.current.start(() => onComplete?.());
|
|
39
|
+
}, [fadeAnim]);
|
|
30
40
|
(0, _react.useEffect)(() => {
|
|
31
41
|
if (showUnderlinedKeys) {
|
|
32
42
|
setIsUnderlinedVisible(true);
|
|
33
|
-
|
|
34
|
-
toValue: 1,
|
|
35
|
-
duration: 250,
|
|
36
|
-
useNativeDriver: true
|
|
37
|
-
});
|
|
38
|
-
fadeRef.current.start();
|
|
43
|
+
animateFade(1);
|
|
39
44
|
return;
|
|
40
45
|
}
|
|
41
|
-
|
|
42
|
-
toValue: 0,
|
|
43
|
-
duration: 250,
|
|
44
|
-
useNativeDriver: true
|
|
45
|
-
});
|
|
46
|
-
fadeRef.current.start(() => setIsUnderlinedVisible(false));
|
|
46
|
+
animateFade(0, () => setIsUnderlinedVisible(false));
|
|
47
47
|
return () => {
|
|
48
48
|
fadeRef.current?.stop();
|
|
49
49
|
};
|
|
50
|
-
}, [showUnderlinedKeys]);
|
|
50
|
+
}, [showUnderlinedKeys, animateFade]);
|
|
51
51
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
52
52
|
style: styles.container,
|
|
53
53
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Layout, {
|
|
54
54
|
...props,
|
|
55
55
|
onLayoutChange: setIsSecondaryLayoutSelected
|
|
56
|
-
}),
|
|
56
|
+
}), isUnderlinedLayoutVisible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
|
|
57
57
|
style: {
|
|
58
58
|
opacity: fadeAnim
|
|
59
59
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeUi","_keyboardLayouts","_UnderlinedLayout","_constants","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","MainLayout","characterType","showUnderlinedKeys","props","isUnderlinedVisible","setIsUnderlinedVisible","useState","isSecondaryLayoutSelected","setIsSecondaryLayoutSelected","fadeAnim","useRef","Animated","Value","current","fadeRef","width","useWindowDimensions","isMobile","MOBILE_LAYOUT_WIDTH","IS_MOBILE","Layout","useMemo","getLayoutByCharType","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeUi","_keyboardLayouts","_UnderlinedLayout","_constants","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","MainLayout","characterType","showUnderlinedKeys","props","isUnderlinedVisible","setIsUnderlinedVisible","useState","isSecondaryLayoutSelected","setIsSecondaryLayoutSelected","fadeAnim","useRef","Animated","Value","current","fadeRef","width","useWindowDimensions","isMobile","MOBILE_LAYOUT_WIDTH","IS_MOBILE","Layout","useMemo","getLayoutByCharType","isUnderlinedLayoutVisible","animateFade","useCallback","toValue","onComplete","stop","timing","duration","useNativeDriver","IS_WEB","start","useEffect","jsxs","View","style","styles","container","children","jsx","onLayoutChange","opacity","UnderlinedLayout","exports","StyleSheet","create","flexDirection","alignItems","justifyContent"],"sourceRoot":"../../../../../src","sources":["features/keyboard/components/MainLayout.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
|
3
|
+
import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react';
|
|
4
4
|
import { Animated, StyleSheet, useWindowDimensions, View } from 'react-native';
|
|
5
|
-
import { IS_MOBILE } from '@magmamath/react-native-ui';
|
|
5
|
+
import { IS_MOBILE, IS_WEB } from '@magmamath/react-native-ui';
|
|
6
6
|
import { getLayoutByCharType } from "../constants/keyboardLayouts.js";
|
|
7
7
|
import { UnderlinedLayout } from "./UnderlinedLayout/UnderlinedLayout.js";
|
|
8
8
|
import { MOBILE_LAYOUT_WIDTH } from "../constants/constants.js";
|
|
9
9
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
10
10
|
export const MainLayout = ({
|
|
11
11
|
characterType,
|
|
12
|
-
showUnderlinedKeys,
|
|
12
|
+
showUnderlinedKeys = false,
|
|
13
13
|
...props
|
|
14
14
|
}) => {
|
|
15
15
|
const [isUnderlinedVisible, setIsUnderlinedVisible] = useState(showUnderlinedKeys);
|
|
@@ -21,33 +21,33 @@ export const MainLayout = ({
|
|
|
21
21
|
} = useWindowDimensions();
|
|
22
22
|
const isMobile = width <= MOBILE_LAYOUT_WIDTH || IS_MOBILE;
|
|
23
23
|
const Layout = useMemo(() => getLayoutByCharType(characterType), [characterType]);
|
|
24
|
+
const isUnderlinedLayoutVisible = isUnderlinedVisible && !isSecondaryLayoutSelected && !isMobile;
|
|
25
|
+
const animateFade = useCallback((toValue, onComplete) => {
|
|
26
|
+
fadeRef.current?.stop();
|
|
27
|
+
fadeRef.current = Animated.timing(fadeAnim, {
|
|
28
|
+
toValue,
|
|
29
|
+
duration: 250,
|
|
30
|
+
useNativeDriver: !IS_WEB
|
|
31
|
+
});
|
|
32
|
+
fadeRef.current.start(() => onComplete?.());
|
|
33
|
+
}, [fadeAnim]);
|
|
24
34
|
useEffect(() => {
|
|
25
35
|
if (showUnderlinedKeys) {
|
|
26
36
|
setIsUnderlinedVisible(true);
|
|
27
|
-
|
|
28
|
-
toValue: 1,
|
|
29
|
-
duration: 250,
|
|
30
|
-
useNativeDriver: true
|
|
31
|
-
});
|
|
32
|
-
fadeRef.current.start();
|
|
37
|
+
animateFade(1);
|
|
33
38
|
return;
|
|
34
39
|
}
|
|
35
|
-
|
|
36
|
-
toValue: 0,
|
|
37
|
-
duration: 250,
|
|
38
|
-
useNativeDriver: true
|
|
39
|
-
});
|
|
40
|
-
fadeRef.current.start(() => setIsUnderlinedVisible(false));
|
|
40
|
+
animateFade(0, () => setIsUnderlinedVisible(false));
|
|
41
41
|
return () => {
|
|
42
42
|
fadeRef.current?.stop();
|
|
43
43
|
};
|
|
44
|
-
}, [showUnderlinedKeys]);
|
|
44
|
+
}, [showUnderlinedKeys, animateFade]);
|
|
45
45
|
return /*#__PURE__*/_jsxs(View, {
|
|
46
46
|
style: styles.container,
|
|
47
47
|
children: [/*#__PURE__*/_jsx(Layout, {
|
|
48
48
|
...props,
|
|
49
49
|
onLayoutChange: setIsSecondaryLayoutSelected
|
|
50
|
-
}),
|
|
50
|
+
}), isUnderlinedLayoutVisible && /*#__PURE__*/_jsx(Animated.View, {
|
|
51
51
|
style: {
|
|
52
52
|
opacity: fadeAnim
|
|
53
53
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useEffect","useMemo","useRef","useState","Animated","StyleSheet","useWindowDimensions","View","IS_MOBILE","getLayoutByCharType","UnderlinedLayout","MOBILE_LAYOUT_WIDTH","jsx","_jsx","jsxs","_jsxs","MainLayout","characterType","showUnderlinedKeys","props","isUnderlinedVisible","setIsUnderlinedVisible","isSecondaryLayoutSelected","setIsSecondaryLayoutSelected","fadeAnim","Value","current","fadeRef","width","isMobile","Layout","
|
|
1
|
+
{"version":3,"names":["React","useEffect","useMemo","useRef","useState","useCallback","Animated","StyleSheet","useWindowDimensions","View","IS_MOBILE","IS_WEB","getLayoutByCharType","UnderlinedLayout","MOBILE_LAYOUT_WIDTH","jsx","_jsx","jsxs","_jsxs","MainLayout","characterType","showUnderlinedKeys","props","isUnderlinedVisible","setIsUnderlinedVisible","isSecondaryLayoutSelected","setIsSecondaryLayoutSelected","fadeAnim","Value","current","fadeRef","width","isMobile","Layout","isUnderlinedLayoutVisible","animateFade","toValue","onComplete","stop","timing","duration","useNativeDriver","start","style","styles","container","children","onLayoutChange","opacity","create","flexDirection","alignItems","justifyContent"],"sourceRoot":"../../../../../src","sources":["features/keyboard/components/MainLayout.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,WAAW,QAAQ,OAAO;AAChF,SAASC,QAAQ,EAAEC,UAAU,EAAEC,mBAAmB,EAAEC,IAAI,QAAQ,cAAc;AAC9E,SAA4BC,SAAS,EAAEC,MAAM,QAAQ,4BAA4B;AACjF,SAASC,mBAAmB,QAAQ,iCAA8B;AAElE,SAASC,gBAAgB,QAAQ,wCAAqC;AACtE,SAASC,mBAAmB,QAAQ,2BAAwB;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAY5D,OAAO,MAAMC,UAAU,GAAGA,CAAC;EACzBC,aAAa;EACbC,kBAAkB,GAAG,KAAK;EAC1B,GAAGC;AACQ,CAAC,KAAK;EACjB,MAAM,CAACC,mBAAmB,EAAEC,sBAAsB,CAAC,GAAGpB,QAAQ,CAACiB,kBAAkB,CAAC;EAClF,MAAM,CAACI,yBAAyB,EAAEC,4BAA4B,CAAC,GAAGtB,QAAQ,CAAC,KAAK,CAAC;EAEjF,MAAMuB,QAAQ,GAAGxB,MAAM,CAAC,IAAIG,QAAQ,CAACsB,KAAK,CAACP,kBAAkB,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAACQ,OAAO;EAC/E,MAAMC,OAAO,GAAG3B,MAAM,CAAqC,IAAI,CAAC;EAEhE,MAAM;IAAE4B;EAAM,CAAC,GAAGvB,mBAAmB,CAAC,CAAC;EACvC,MAAMwB,QAAQ,GAAGD,KAAK,IAAIjB,mBAAmB,IAAIJ,SAAS;EAE1D,MAAMuB,MAAM,GAAG/B,OAAO,CAAC,MAAMU,mBAAmB,CAACQ,aAAa,CAAC,EAAE,CAACA,aAAa,CAAC,CAAC;EACjF,MAAMc,yBAAyB,GAAGX,mBAAmB,IAAI,CAACE,yBAAyB,IAAI,CAACO,QAAQ;EAEhG,MAAMG,WAAW,GAAG9B,WAAW,CAC7B,CAAC+B,OAAe,EAAEC,UAAuB,KAAK;IAC5CP,OAAO,CAACD,OAAO,EAAES,IAAI,CAAC,CAAC;IACvBR,OAAO,CAACD,OAAO,GAAGvB,QAAQ,CAACiC,MAAM,CAACZ,QAAQ,EAAE;MAC1CS,OAAO;MACPI,QAAQ,EAAE,GAAG;MACbC,eAAe,EAAE,CAAC9B;IACpB,CAAC,CAAC;IACFmB,OAAO,CAACD,OAAO,CAACa,KAAK,CAAC,MAAML,UAAU,GAAG,CAAC,CAAC;EAC7C,CAAC,EACD,CAACV,QAAQ,CACX,CAAC;EAED1B,SAAS,CAAC,MAAM;IACd,IAAIoB,kBAAkB,EAAE;MACtBG,sBAAsB,CAAC,IAAI,CAAC;MAC5BW,WAAW,CAAC,CAAC,CAAC;MACd;IACF;IACAA,WAAW,CAAC,CAAC,EAAE,MAAMX,sBAAsB,CAAC,KAAK,CAAC,CAAC;IAEnD,OAAO,MAAM;MACXM,OAAO,CAACD,OAAO,EAAES,IAAI,CAAC,CAAC;IACzB,CAAC;EACH,CAAC,EAAE,CAACjB,kBAAkB,EAAEc,WAAW,CAAC,CAAC;EAErC,oBACEjB,KAAA,CAACT,IAAI;IAACkC,KAAK,EAAEC,MAAM,CAACC,SAAU;IAAAC,QAAA,gBAC5B9B,IAAA,CAACiB,MAAM;MAAA,GAAKX,KAAK;MAAEyB,cAAc,EAAErB;IAA6B,CAAE,CAAC,EAClEQ,yBAAyB,iBACxBlB,IAAA,CAACV,QAAQ,CAACG,IAAI;MAACkC,KAAK,EAAE;QAAEK,OAAO,EAAErB;MAAS,CAAE;MAAAmB,QAAA,eAC1C9B,IAAA,CAACH,gBAAgB;QAAA,GAAKS;MAAK,CAAG;IAAC,CAClB,CAChB;EAAA,CACG,CAAC;AAEX,CAAC;AAED,MAAMsB,MAAM,GAAGrC,UAAU,CAAC0C,MAAM,CAAC;EAC/BJ,SAAS,EAAE;IACTK,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,YAAY;IACxBC,cAAc,EAAE;EAClB;AACF,CAAC,CAAC","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MainLayout.d.ts","sourceRoot":"","sources":["../../../../../../src/features/keyboard/components/MainLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"MainLayout.d.ts","sourceRoot":"","sources":["../../../../../../src/features/keyboard/components/MainLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAA;AAEhF,OAAO,EAAE,iBAAiB,EAAqB,MAAM,4BAA4B,CAAA;AAEjF,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAI9D,KAAK,WAAW,GAAG;IACjB,UAAU,EAAE,CAAC,GAAG,EAAE,gBAAgB,KAAK,IAAI,CAAA;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,iBAAiB,CAAA;IACzB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,YAAY,CAAC,EAAE,WAAW,EAAE,CAAA;CAC7B,CAAA;AAED,eAAO,MAAM,UAAU,oDAIpB,WAAW,sBAiDb,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MainLayout.d.ts","sourceRoot":"","sources":["../../../../../../src/features/keyboard/components/MainLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"MainLayout.d.ts","sourceRoot":"","sources":["../../../../../../src/features/keyboard/components/MainLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAA;AAEhF,OAAO,EAAE,iBAAiB,EAAqB,MAAM,4BAA4B,CAAA;AAEjF,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAI9D,KAAK,WAAW,GAAG;IACjB,UAAU,EAAE,CAAC,GAAG,EAAE,gBAAgB,KAAK,IAAI,CAAA;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,iBAAiB,CAAA;IACzB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,YAAY,CAAC,EAAE,WAAW,EAAE,CAAA;CAC7B,CAAA;AAED,eAAO,MAAM,UAAU,oDAIpB,WAAW,sBAiDb,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import React, { useEffect, useMemo, useRef, useState } from 'react'
|
|
2
|
-
import { Animated,
|
|
3
|
-
import { SelectOptionColor, IS_MOBILE } from '@magmamath/react-native-ui'
|
|
1
|
+
import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react'
|
|
2
|
+
import { Animated, StyleSheet, useWindowDimensions, View } from 'react-native'
|
|
3
|
+
import { SelectOptionColor, IS_MOBILE, IS_WEB } from '@magmamath/react-native-ui'
|
|
4
4
|
import { getLayoutByCharType } from '../constants/keyboardLayouts'
|
|
5
5
|
import { KeyboardKey, KeyboardKeyValue } from '../types/types'
|
|
6
6
|
import { UnderlinedLayout } from './UnderlinedLayout/UnderlinedLayout'
|
|
@@ -16,44 +16,53 @@ type LayoutProps = {
|
|
|
16
16
|
disabledKeys?: KeyboardKey[]
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
-
export const MainLayout = ({
|
|
19
|
+
export const MainLayout = ({
|
|
20
|
+
characterType,
|
|
21
|
+
showUnderlinedKeys = false,
|
|
22
|
+
...props
|
|
23
|
+
}: LayoutProps) => {
|
|
20
24
|
const [isUnderlinedVisible, setIsUnderlinedVisible] = useState(showUnderlinedKeys)
|
|
21
25
|
const [isSecondaryLayoutSelected, setIsSecondaryLayoutSelected] = useState(false)
|
|
22
26
|
|
|
23
27
|
const fadeAnim = useRef(new Animated.Value(showUnderlinedKeys ? 1 : 0)).current
|
|
24
28
|
const fadeRef = useRef<Animated.CompositeAnimation | null>(null)
|
|
29
|
+
|
|
25
30
|
const { width } = useWindowDimensions()
|
|
26
31
|
const isMobile = width <= MOBILE_LAYOUT_WIDTH || IS_MOBILE
|
|
27
32
|
|
|
28
33
|
const Layout = useMemo(() => getLayoutByCharType(characterType), [characterType])
|
|
34
|
+
const isUnderlinedLayoutVisible = isUnderlinedVisible && !isSecondaryLayoutSelected && !isMobile
|
|
29
35
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
36
|
+
const animateFade = useCallback(
|
|
37
|
+
(toValue: number, onComplete?: () => void) => {
|
|
38
|
+
fadeRef.current?.stop()
|
|
33
39
|
fadeRef.current = Animated.timing(fadeAnim, {
|
|
34
|
-
toValue
|
|
40
|
+
toValue,
|
|
35
41
|
duration: 250,
|
|
36
|
-
useNativeDriver:
|
|
42
|
+
useNativeDriver: !IS_WEB,
|
|
37
43
|
})
|
|
38
|
-
fadeRef.current.start()
|
|
44
|
+
fadeRef.current.start(() => onComplete?.())
|
|
45
|
+
},
|
|
46
|
+
[fadeAnim],
|
|
47
|
+
)
|
|
48
|
+
|
|
49
|
+
useEffect(() => {
|
|
50
|
+
if (showUnderlinedKeys) {
|
|
51
|
+
setIsUnderlinedVisible(true)
|
|
52
|
+
animateFade(1)
|
|
39
53
|
return
|
|
40
54
|
}
|
|
41
|
-
|
|
42
|
-
toValue: 0,
|
|
43
|
-
duration: 250,
|
|
44
|
-
useNativeDriver: true,
|
|
45
|
-
})
|
|
46
|
-
fadeRef.current.start(() => setIsUnderlinedVisible(false))
|
|
55
|
+
animateFade(0, () => setIsUnderlinedVisible(false))
|
|
47
56
|
|
|
48
57
|
return () => {
|
|
49
58
|
fadeRef.current?.stop()
|
|
50
59
|
}
|
|
51
|
-
}, [showUnderlinedKeys])
|
|
60
|
+
}, [showUnderlinedKeys, animateFade])
|
|
52
61
|
|
|
53
62
|
return (
|
|
54
63
|
<View style={styles.container}>
|
|
55
64
|
<Layout {...props} onLayoutChange={setIsSecondaryLayoutSelected} />
|
|
56
|
-
{
|
|
65
|
+
{isUnderlinedLayoutVisible && (
|
|
57
66
|
<Animated.View style={{ opacity: fadeAnim }}>
|
|
58
67
|
<UnderlinedLayout {...props} />
|
|
59
68
|
</Animated.View>
|