@magmamath/students-features 0.9.4-rc.0 → 0.9.4

package/dist/commonjs/features/keyboard/components/Keyboard.js

@@ -44,7 +44,8 @@ const Keyboard = ({
       }]
     }],
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_MainLayout.MainLayout, {
-      ...props
+      ...props,
+      characterType: characterType
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Numpad.Numpad, {
       ...props,
       style: mobileStyles

package/dist/commonjs/features/keyboard/components/Keyboard.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeUi","_Numpad","_constants","_constants2","_MainLayout","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Keyboard","style","characterType","isVisible","props","slideAnim","useRef","Animated","Value","KEYBOARD_SLIDE_DISTANCE","current","width","useWindowDimensions","isMobile","MOBILE_LAYOUT_WIDTH","IS_MOBILE","mobileStyles","useMemo","getLayoutConfigStyles","useEffect","animationConfig","slideOutAnimationSettings","slideInAnimationSettings","anim","spring","mass","velocity","useNativeDriver","start","stop","jsxs","View","styles","container","transform","translateY","children","jsx","MainLayout","Numpad","exports","StyleSheet","create","flexDirection","alignItems","justifyContent","backgroundColor","COLORS","NEUTRAL_2","borderRadius","paddingTop","paddingHorizontal","paddingBottom","borderColor","NEUTRAL_5","borderWidth","height","SHADOWS"],"sourceRoot":"../../../../../src","sources":["features/keyboard/components/Keyboard.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeUi","_Numpad","_constants","_constants2","_MainLayout","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Keyboard","style","characterType","isVisible","props","slideAnim","useRef","Animated","Value","KEYBOARD_SLIDE_DISTANCE","current","width","useWindowDimensions","isMobile","MOBILE_LAYOUT_WIDTH","IS_MOBILE","mobileStyles","useMemo","getLayoutConfigStyles","useEffect","animationConfig","slideOutAnimationSettings","slideInAnimationSettings","anim","spring","mass","velocity","useNativeDriver","start","stop","jsxs","View","styles","container","transform","translateY","children","jsx","MainLayout","Numpad","exports","StyleSheet","create","flexDirection","alignItems","justifyContent","backgroundColor","COLORS","NEUTRAL_2","borderRadius","paddingTop","paddingHorizontal","paddingBottom","borderColor","NEUTRAL_5","borderWidth","height","SHADOWS"],"sourceRoot":"../../../../../src","sources":["features/keyboard/components/Keyboard.tsx"],"mappings":"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","ignoreList":[]}

package/dist/commonjs/features/keyboard/components/MainLayout.js

@@ -14,9 +14,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 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; }
 const MainLayout = ({
-  style,
   characterType,
-  showUnderlinedKeys,
+  showUnderlinedKeys = false,
   ...props
 }) => {
   const [isUnderlinedVisible, setIsUnderlinedVisible] = (0, _react.useState)(showUnderlinedKeys);
@@ -28,33 +27,33 @@ const MainLayout = ({
   } = (0, _reactNative.useWindowDimensions)();
   const isMobile = width <= _constants.MOBILE_LAYOUT_WIDTH || _reactNativeUi.IS_MOBILE;
   const Layout = (0, _react.useMemo)(() => (0, _keyboardLayouts.getLayoutByCharType)(characterType), [characterType]);
+  const isUnderlinedLayoutVisible = isUnderlinedVisible && !isSecondaryLayoutSelected && !isMobile;
+  const animateFade = (0, _react.useCallback)((toValue, onComplete) => {
+    fadeRef.current?.stop();
+    fadeRef.current = _reactNative.Animated.timing(fadeAnim, {
+      toValue,
+      duration: 250,
+      useNativeDriver: !_reactNativeUi.IS_WEB
+    });
+    fadeRef.current.start(() => onComplete?.());
+  }, [fadeAnim]);
   (0, _react.useEffect)(() => {
     if (showUnderlinedKeys) {
       setIsUnderlinedVisible(true);
-      fadeRef.current = _reactNative.Animated.timing(fadeAnim, {
-        toValue: 1,
-        duration: 250,
-        useNativeDriver: true
-      });
-      fadeRef.current.start();
+      animateFade(1);
       return;
     }
-    fadeRef.current = _reactNative.Animated.timing(fadeAnim, {
-      toValue: 0,
-      duration: 250,
-      useNativeDriver: true
-    });
-    fadeRef.current.start(() => setIsUnderlinedVisible(false));
+    animateFade(0, () => setIsUnderlinedVisible(false));
     return () => {
       fadeRef.current?.stop();
     };
-  }, [showUnderlinedKeys]);
+  }, [showUnderlinedKeys, animateFade]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: styles.container,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Layout, {
       ...props,
       onLayoutChange: setIsSecondaryLayoutSelected
-    }), isUnderlinedVisible && !isSecondaryLayoutSelected && !isMobile && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+    }), isUnderlinedLayoutVisible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
       style: {
         opacity: fadeAnim
       },

package/dist/commonjs/features/keyboard/components/MainLayout.js.map

@@ -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","style","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","useEffect","timing","toValue","duration","useNativeDriver","start","stop","jsxs","View","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":[]}
+{"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":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,cAAA,GAAAF,OAAA;AACA,IAAAG,gBAAA,GAAAH,OAAA;AAEA,IAAAI,iBAAA,GAAAJ,OAAA;AACA,IAAAK,UAAA,GAAAL,OAAA;AAA4D,IAAAM,WAAA,GAAAN,OAAA;AAAA,SAAAO,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAT,wBAAAS,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAYrD,MAAMW,UAAU,GAAGA,CAAC;EACzBC,aAAa;EACbC,kBAAkB,GAAG,KAAK;EAC1B,GAAGC;AACQ,CAAC,KAAK;EACjB,MAAM,CAACC,mBAAmB,EAAEC,sBAAsB,CAAC,GAAG,IAAAC,eAAQ,EAACJ,kBAAkB,CAAC;EAClF,MAAM,CAACK,yBAAyB,EAAEC,4BAA4B,CAAC,GAAG,IAAAF,eAAQ,EAAC,KAAK,CAAC;EAEjF,MAAMG,QAAQ,GAAG,IAAAC,aAAM,EAAC,IAAIC,qBAAQ,CAACC,KAAK,CAACV,kBAAkB,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAACW,OAAO;EAC/E,MAAMC,OAAO,GAAG,IAAAJ,aAAM,EAAqC,IAAI,CAAC;EAEhE,MAAM;IAAEK;EAAM,CAAC,GAAG,IAAAC,gCAAmB,EAAC,CAAC;EACvC,MAAMC,QAAQ,GAAGF,KAAK,IAAIG,8BAAmB,IAAIC,wBAAS;EAE1D,MAAMC,MAAM,GAAG,IAAAC,cAAO,EAAC,MAAM,IAAAC,oCAAmB,EAACrB,aAAa,CAAC,EAAE,CAACA,aAAa,CAAC,CAAC;EACjF,MAAMsB,yBAAyB,GAAGnB,mBAAmB,IAAI,CAACG,yBAAyB,IAAI,CAACU,QAAQ;EAEhG,MAAMO,WAAW,GAAG,IAAAC,kBAAW,EAC7B,CAACC,OAAe,EAAEC,UAAuB,KAAK;IAC5Cb,OAAO,CAACD,OAAO,EAAEe,IAAI,CAAC,CAAC;IACvBd,OAAO,CAACD,OAAO,GAAGF,qBAAQ,CAACkB,MAAM,CAACpB,QAAQ,EAAE;MAC1CiB,OAAO;MACPI,QAAQ,EAAE,GAAG;MACbC,eAAe,EAAE,CAACC;IACpB,CAAC,CAAC;IACFlB,OAAO,CAACD,OAAO,CAACoB,KAAK,CAAC,MAAMN,UAAU,GAAG,CAAC,CAAC;EAC7C,CAAC,EACD,CAAClB,QAAQ,CACX,CAAC;EAED,IAAAyB,gBAAS,EAAC,MAAM;IACd,IAAIhC,kBAAkB,EAAE;MACtBG,sBAAsB,CAAC,IAAI,CAAC;MAC5BmB,WAAW,CAAC,CAAC,CAAC;MACd;IACF;IACAA,WAAW,CAAC,CAAC,EAAE,MAAMnB,sBAAsB,CAAC,KAAK,CAAC,CAAC;IAEnD,OAAO,MAAM;MACXS,OAAO,CAACD,OAAO,EAAEe,IAAI,CAAC,CAAC;IACzB,CAAC;EACH,CAAC,EAAE,CAAC1B,kBAAkB,EAAEsB,WAAW,CAAC,CAAC;EAErC,oBACE,IAAA7C,WAAA,CAAAwD,IAAA,EAAC7D,YAAA,CAAA8D,IAAI;IAACC,KAAK,EAAEC,MAAM,CAACC,SAAU;IAAAC,QAAA,gBAC5B,IAAA7D,WAAA,CAAA8D,GAAA,EAACrB,MAAM;MAAA,GAAKjB,KAAK;MAAEuC,cAAc,EAAElC;IAA6B,CAAE,CAAC,EAClEe,yBAAyB,iBACxB,IAAA5C,WAAA,CAAA8D,GAAA,EAACnE,YAAA,CAAAqC,QAAQ,CAACyB,IAAI;MAACC,KAAK,EAAE;QAAEM,OAAO,EAAElC;MAAS,CAAE;MAAA+B,QAAA,eAC1C,IAAA7D,WAAA,CAAA8D,GAAA,EAAChE,iBAAA,CAAAmE,gBAAgB;QAAA,GAAKzC;MAAK,CAAG;IAAC,CAClB,CAChB;EAAA,CACG,CAAC;AAEX,CAAC;AAAA0C,OAAA,CAAA7C,UAAA,GAAAA,UAAA;AAED,MAAMsC,MAAM,GAAGQ,uBAAU,CAACC,MAAM,CAAC;EAC/BR,SAAS,EAAE;IACTS,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,YAAY;IACxBC,cAAc,EAAE;EAClB;AACF,CAAC,CAAC","ignoreList":[]}

package/dist/module/features/keyboard/components/Keyboard.js

@@ -38,7 +38,8 @@ export const Keyboard = ({
       }]
     }],
     children: [/*#__PURE__*/_jsx(MainLayout, {
-      ...props
+      ...props,
+      characterType: characterType
     }), /*#__PURE__*/_jsx(Numpad, {
       ...props,
       style: mobileStyles

package/dist/module/features/keyboard/components/Keyboard.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useMemo","useRef","Animated","StyleSheet","useWindowDimensions","COLORS","IS_MOBILE","SHADOWS","Numpad","MOBILE_LAYOUT_WIDTH","getLayoutConfigStyles","KEYBOARD_SLIDE_DISTANCE","slideInAnimationSettings","slideOutAnimationSettings","MainLayout","jsx","_jsx","jsxs","_jsxs","Keyboard","style","characterType","isVisible","props","slideAnim","Value","current","width","isMobile","mobileStyles","animationConfig","anim","spring","mass","velocity","useNativeDriver","start","stop","View","styles","container","transform","translateY","children","create","flexDirection","alignItems","justifyContent","backgroundColor","NEUTRAL_2","borderRadius","paddingTop","paddingHorizontal","paddingBottom","borderColor","NEUTRAL_5","borderWidth","height"],"sourceRoot":"../../../../../src","sources":["features/keyboard/components/Keyboard.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AACzD,SAASC,QAAQ,EAAaC,UAAU,EAAEC,mBAAmB,QAAmB,cAAc;AAC9F,SAASC,MAAM,EAAEC,SAAS,EAAqBC,OAAO,QAAQ,4BAA4B;AAE1F,SAASC,MAAM,QAAQ,oBAAiB;AACxC,SAASC,mBAAmB,QAAQ,2BAAwB;AAC5D,SACEC,qBAAqB,EACrBC,uBAAuB,EACvBC,wBAAwB,EACxBC,yBAAyB,QACpB,gBAAa;AACpB,SAASC,UAAU,QAAQ,iBAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAazC,OAAO,MAAMC,QAAQ,GAAGA,CAAC;EAAEC,KAAK;EAAEC,aAAa;EAAEC,SAAS,GAAG,IAAI;EAAE,GAAGC;AAAqB,CAAC,KAAK;EAC/F,MAAMC,SAAS,GAAGvB,MAAM,CAAC,IAAIC,QAAQ,CAACuB,KAAK,CAACH,SAAS,GAAG,CAAC,GAAGX,uBAAuB,CAAC,CAAC,CAACe,OAAO;EAE7F,MAAM;IAAEC;EAAM,CAAC,GAAGvB,mBAAmB,CAAC,CAAC;EACvC,MAAMwB,QAAQ,GAAGD,KAAK,IAAIlB,mBAAmB,IAAIH,SAAS;EAC1D,MAAMuB,YAAY,GAAG7B,OAAO,CAC1B,MAAMU,qBAAqB,CAACW,aAAa,EAAEO,QAAQ,CAAC,EACpD,CAACP,aAAa,EAAEO,QAAQ,CAC1B,CAAC;EAED7B,SAAS,CAAC,MAAM;IACd,MAAM+B,eAAe,GAAGR,SAAS,GAAGT,yBAAyB,GAAGD,wBAAwB;IACxF,MAAMmB,IAAI,GAAG7B,QAAQ,CAAC8B,MAAM,CAACR,SAAS,EAAE;MACtC,GAAGM,eAAe;MAClBG,IAAI,EAAE,CAAC;MACPC,QAAQ,EAAE,CAAC;MACXC,eAAe,EAAE;IACnB,CAAC,CAAC;IAEFJ,IAAI,CAACK,KAAK,CAAC,CAAC;IAEZ,OAAO,MAAML,IAAI,CAACM,IAAI,CAAC,CAAC;EAC1B,CAAC,EAAE,CAACf,SAAS,CAAC,CAAC;EAEf,oBACEJ,KAAA,CAAChB,QAAQ,CAACoC,IAAI;IACZlB,KAAK,EAAE,CACLmB,MAAM,CAACC,SAAS,EAChBpB,KAAK,EACL;MACEqB,SAAS,EAAE,CAAC;QAAEC,UAAU,EAAElB;MAAU,CAAC;IACvC,CAAC,CACD;IAAAmB,QAAA,gBAEF3B,IAAA,CAACF,UAAU;MAAA,GAAKS;IAAK,CAAG,CAAC,eACzBP,IAAA,CAACR,MAAM;MAAA,GAAKe,KAAK;MAAEH,KAAK,EAAES;IAAa,CAAE,CAAC;EAAA,CAC7B,CAAC;AAEpB,CAAC;AAED,MAAMU,MAAM,GAAGpC,UAAU,CAACyC,MAAM,CAAC;EAC/BJ,SAAS,EAAE;IACTK,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,YAAY;IACxBC,cAAc,EAAE,eAAe;IAC/BC,eAAe,EAAE3C,MAAM,CAAC4C,SAAS;IACjCC,YAAY,EAAE,EAAE;IAChBC,UAAU,EAAE,CAAC;IACbC,iBAAiB,EAAE,EAAE;IACrBC,aAAa,EAAE,EAAE;IACjBC,WAAW,EAAEjD,MAAM,CAACkD,SAAS;IAC7BC,WAAW,EAAE,CAAC;IACd7B,KAAK,EAAE,MAAM;IACb8B,MAAM,EAAE,GAAG;IACX,GAAGlD,OAAO,CAAC,CAAC;EACd;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useEffect","useMemo","useRef","Animated","StyleSheet","useWindowDimensions","COLORS","IS_MOBILE","SHADOWS","Numpad","MOBILE_LAYOUT_WIDTH","getLayoutConfigStyles","KEYBOARD_SLIDE_DISTANCE","slideInAnimationSettings","slideOutAnimationSettings","MainLayout","jsx","_jsx","jsxs","_jsxs","Keyboard","style","characterType","isVisible","props","slideAnim","Value","current","width","isMobile","mobileStyles","animationConfig","anim","spring","mass","velocity","useNativeDriver","start","stop","View","styles","container","transform","translateY","children","create","flexDirection","alignItems","justifyContent","backgroundColor","NEUTRAL_2","borderRadius","paddingTop","paddingHorizontal","paddingBottom","borderColor","NEUTRAL_5","borderWidth","height"],"sourceRoot":"../../../../../src","sources":["features/keyboard/components/Keyboard.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AACzD,SAASC,QAAQ,EAAaC,UAAU,EAAEC,mBAAmB,QAAmB,cAAc;AAC9F,SAASC,MAAM,EAAEC,SAAS,EAAqBC,OAAO,QAAQ,4BAA4B;AAE1F,SAASC,MAAM,QAAQ,oBAAiB;AACxC,SAASC,mBAAmB,QAAQ,2BAAwB;AAC5D,SACEC,qBAAqB,EACrBC,uBAAuB,EACvBC,wBAAwB,EACxBC,yBAAyB,QACpB,gBAAa;AACpB,SAASC,UAAU,QAAQ,iBAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAazC,OAAO,MAAMC,QAAQ,GAAGA,CAAC;EAAEC,KAAK;EAAEC,aAAa;EAAEC,SAAS,GAAG,IAAI;EAAE,GAAGC;AAAqB,CAAC,KAAK;EAC/F,MAAMC,SAAS,GAAGvB,MAAM,CAAC,IAAIC,QAAQ,CAACuB,KAAK,CAACH,SAAS,GAAG,CAAC,GAAGX,uBAAuB,CAAC,CAAC,CAACe,OAAO;EAE7F,MAAM;IAAEC;EAAM,CAAC,GAAGvB,mBAAmB,CAAC,CAAC;EACvC,MAAMwB,QAAQ,GAAGD,KAAK,IAAIlB,mBAAmB,IAAIH,SAAS;EAC1D,MAAMuB,YAAY,GAAG7B,OAAO,CAC1B,MAAMU,qBAAqB,CAACW,aAAa,EAAEO,QAAQ,CAAC,EACpD,CAACP,aAAa,EAAEO,QAAQ,CAC1B,CAAC;EAED7B,SAAS,CAAC,MAAM;IACd,MAAM+B,eAAe,GAAGR,SAAS,GAAGT,yBAAyB,GAAGD,wBAAwB;IACxF,MAAMmB,IAAI,GAAG7B,QAAQ,CAAC8B,MAAM,CAACR,SAAS,EAAE;MACtC,GAAGM,eAAe;MAClBG,IAAI,EAAE,CAAC;MACPC,QAAQ,EAAE,CAAC;MACXC,eAAe,EAAE;IACnB,CAAC,CAAC;IAEFJ,IAAI,CAACK,KAAK,CAAC,CAAC;IAEZ,OAAO,MAAML,IAAI,CAACM,IAAI,CAAC,CAAC;EAC1B,CAAC,EAAE,CAACf,SAAS,CAAC,CAAC;EAEf,oBACEJ,KAAA,CAAChB,QAAQ,CAACoC,IAAI;IACZlB,KAAK,EAAE,CACLmB,MAAM,CAACC,SAAS,EAChBpB,KAAK,EACL;MACEqB,SAAS,EAAE,CAAC;QAAEC,UAAU,EAAElB;MAAU,CAAC;IACvC,CAAC,CACD;IAAAmB,QAAA,gBAEF3B,IAAA,CAACF,UAAU;MAAA,GAAKS,KAAK;MAAEF,aAAa,EAAEA;IAAc,CAAE,CAAC,eACvDL,IAAA,CAACR,MAAM;MAAA,GAAKe,KAAK;MAAEH,KAAK,EAAES;IAAa,CAAE,CAAC;EAAA,CAC7B,CAAC;AAEpB,CAAC;AAED,MAAMU,MAAM,GAAGpC,UAAU,CAACyC,MAAM,CAAC;EAC/BJ,SAAS,EAAE;IACTK,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,YAAY;IACxBC,cAAc,EAAE,eAAe;IAC/BC,eAAe,EAAE3C,MAAM,CAAC4C,SAAS;IACjCC,YAAY,EAAE,EAAE;IAChBC,UAAU,EAAE,CAAC;IACbC,iBAAiB,EAAE,EAAE;IACrBC,aAAa,EAAE,EAAE;IACjBC,WAAW,EAAEjD,MAAM,CAACkD,SAAS;IAC7BC,WAAW,EAAE,CAAC;IACd7B,KAAK,EAAE,MAAM;IACb8B,MAAM,EAAE,GAAG;IACX,GAAGlD,OAAO,CAAC,CAAC;EACd;AACF,CAAC,CAAC","ignoreList":[]}

package/dist/module/features/keyboard/components/MainLayout.js

@@ -1,16 +1,15 @@
 "use strict";
 
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react';
 import { Animated, StyleSheet, useWindowDimensions, View } from 'react-native';
-import { IS_MOBILE } from '@magmamath/react-native-ui';
+import { IS_MOBILE, IS_WEB } from '@magmamath/react-native-ui';
 import { getLayoutByCharType } from "../constants/keyboardLayouts.js";
 import { UnderlinedLayout } from "./UnderlinedLayout/UnderlinedLayout.js";
 import { MOBILE_LAYOUT_WIDTH } from "../constants/constants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const MainLayout = ({
-  style,
   characterType,
-  showUnderlinedKeys,
+  showUnderlinedKeys = false,
   ...props
 }) => {
   const [isUnderlinedVisible, setIsUnderlinedVisible] = useState(showUnderlinedKeys);
@@ -22,33 +21,33 @@ export const MainLayout = ({
   } = useWindowDimensions();
   const isMobile = width <= MOBILE_LAYOUT_WIDTH || IS_MOBILE;
   const Layout = useMemo(() => getLayoutByCharType(characterType), [characterType]);
+  const isUnderlinedLayoutVisible = isUnderlinedVisible && !isSecondaryLayoutSelected && !isMobile;
+  const animateFade = useCallback((toValue, onComplete) => {
+    fadeRef.current?.stop();
+    fadeRef.current = Animated.timing(fadeAnim, {
+      toValue,
+      duration: 250,
+      useNativeDriver: !IS_WEB
+    });
+    fadeRef.current.start(() => onComplete?.());
+  }, [fadeAnim]);
   useEffect(() => {
     if (showUnderlinedKeys) {
       setIsUnderlinedVisible(true);
-      fadeRef.current = Animated.timing(fadeAnim, {
-        toValue: 1,
-        duration: 250,
-        useNativeDriver: true
-      });
-      fadeRef.current.start();
+      animateFade(1);
       return;
     }
-    fadeRef.current = Animated.timing(fadeAnim, {
-      toValue: 0,
-      duration: 250,
-      useNativeDriver: true
-    });
-    fadeRef.current.start(() => setIsUnderlinedVisible(false));
+    animateFade(0, () => setIsUnderlinedVisible(false));
     return () => {
       fadeRef.current?.stop();
     };
-  }, [showUnderlinedKeys]);
+  }, [showUnderlinedKeys, animateFade]);
   return /*#__PURE__*/_jsxs(View, {
     style: styles.container,
     children: [/*#__PURE__*/_jsx(Layout, {
       ...props,
       onLayoutChange: setIsSecondaryLayoutSelected
-    }), isUnderlinedVisible && !isSecondaryLayoutSelected && !isMobile && /*#__PURE__*/_jsx(Animated.View, {
+    }), isUnderlinedLayoutVisible && /*#__PURE__*/_jsx(Animated.View, {
       style: {
         opacity: fadeAnim
       },

package/dist/module/features/keyboard/components/MainLayout.js.map

@@ -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","style","characterType","showUnderlinedKeys","props","isUnderlinedVisible","setIsUnderlinedVisible","isSecondaryLayoutSelected","setIsSecondaryLayoutSelected","fadeAnim","Value","current","fadeRef","width","isMobile","Layout","timing","toValue","duration","useNativeDriver","start","stop","styles","container","children","onLayoutChange","opacity","create","flexDirection","alignItems","justifyContent"],"sourceRoot":"../../../../../src","sources":["features/keyboard/components/MainLayout.tsx"],"mappings":"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","ignoreList":[]}
+{"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":"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","ignoreList":[]}

package/dist/typescript/commonjs/features/keyboard/components/MainLayout.d.ts

@@ -1,17 +1,15 @@
 import React from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
 import { SelectOptionColor } from '@magmamath/react-native-ui';
 import { KeyboardKey, KeyboardKeyValue } from '../types/types';
 type LayoutProps = {
     onKeyPress: (key: KeyboardKeyValue) => void;
     characterType?: number;
-    style?: StyleProp<ViewStyle>;
     color?: SelectOptionColor;
     isVisible?: boolean;
     isDisabled?: boolean;
     showUnderlinedKeys?: boolean;
     disabledKeys?: KeyboardKey[];
 };
-export declare const MainLayout: ({ style, characterType, showUnderlinedKeys, ...props }: LayoutProps) => React.JSX.Element;
+export declare const MainLayout: ({ characterType, showUnderlinedKeys, ...props }: LayoutProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=MainLayout.d.ts.map

package/dist/typescript/commonjs/features/keyboard/components/MainLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MainLayout.d.ts","sourceRoot":"","sources":["../../../../../../src/features/keyboard/components/MainLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAA;AACnE,OAAO,EAAY,SAAS,EAAyC,SAAS,EAAE,MAAM,cAAc,CAAA;AACpG,OAAO,EAAE,iBAAiB,EAAa,MAAM,4BAA4B,CAAA;AAEzE,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,SAAS,CAAC,SAAS,CAAC,CAAA;IAC5B,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,2DAA4D,WAAW,sBA4C7F,CAAA"}
+{"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/dist/typescript/module/features/keyboard/components/MainLayout.d.ts

@@ -1,17 +1,15 @@
 import React from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
 import { SelectOptionColor } from '@magmamath/react-native-ui';
 import { KeyboardKey, KeyboardKeyValue } from '../types/types';
 type LayoutProps = {
     onKeyPress: (key: KeyboardKeyValue) => void;
     characterType?: number;
-    style?: StyleProp<ViewStyle>;
     color?: SelectOptionColor;
     isVisible?: boolean;
     isDisabled?: boolean;
     showUnderlinedKeys?: boolean;
     disabledKeys?: KeyboardKey[];
 };
-export declare const MainLayout: ({ style, characterType, showUnderlinedKeys, ...props }: LayoutProps) => React.JSX.Element;
+export declare const MainLayout: ({ characterType, showUnderlinedKeys, ...props }: LayoutProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=MainLayout.d.ts.map

package/dist/typescript/module/features/keyboard/components/MainLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MainLayout.d.ts","sourceRoot":"","sources":["../../../../../../src/features/keyboard/components/MainLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAA;AACnE,OAAO,EAAY,SAAS,EAAyC,SAAS,EAAE,MAAM,cAAc,CAAA;AACpG,OAAO,EAAE,iBAAiB,EAAa,MAAM,4BAA4B,CAAA;AAEzE,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,SAAS,CAAC,SAAS,CAAC,CAAA;IAC5B,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,2DAA4D,WAAW,sBA4C7F,CAAA"}
+{"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

@@ -1,6 +1,6 @@
 {
   "name": "@magmamath/students-features",
-  "version": "0.9.4-rc.0",
+  "version": "0.9.4",
   "description": "Magmamath features library",
   "source": "src/index.ts",
   "main": "src/index.ts",

package/src/features/keyboard/components/Keyboard.tsx

@@ -57,7 +57,7 @@ export const Keyboard = ({ style, characterType, isVisible = true, ...props }: K
         },
       ]}
     >
-      <MainLayout {...props} />
+      <MainLayout {...props} characterType={characterType} />
       <Numpad {...props} style={mobileStyles} />
     </Animated.View>
   )

package/src/features/keyboard/components/MainLayout.tsx

@@ -1,6 +1,6 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react'
-import { Animated, StyleProp, StyleSheet, useWindowDimensions, View, ViewStyle } from 'react-native'
-import { SelectOptionColor, IS_MOBILE } from '@magmamath/react-native-ui'
+import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react'
+import { Animated, StyleSheet, useWindowDimensions, View } from 'react-native'
+import { SelectOptionColor, IS_MOBILE, IS_WEB } from '@magmamath/react-native-ui'
 import { getLayoutByCharType } from '../constants/keyboardLayouts'
 import { KeyboardKey, KeyboardKeyValue } from '../types/types'
 import { UnderlinedLayout } from './UnderlinedLayout/UnderlinedLayout'
@@ -9,7 +9,6 @@ import { MOBILE_LAYOUT_WIDTH } from '../constants/constants'
 type LayoutProps = {
   onKeyPress: (key: KeyboardKeyValue) => void
   characterType?: number
-  style?: StyleProp<ViewStyle>
   color?: SelectOptionColor
   isVisible?: boolean
   isDisabled?: boolean
@@ -17,44 +16,53 @@ type LayoutProps = {
   disabledKeys?: KeyboardKey[]
 }
 
-export const MainLayout = ({ style, characterType, showUnderlinedKeys, ...props }: LayoutProps) => {
+export const MainLayout = ({
+  characterType,
+  showUnderlinedKeys = false,
+  ...props
+}: LayoutProps) => {
   const [isUnderlinedVisible, setIsUnderlinedVisible] = useState(showUnderlinedKeys)
   const [isSecondaryLayoutSelected, setIsSecondaryLayoutSelected] = useState(false)
 
   const fadeAnim = useRef(new Animated.Value(showUnderlinedKeys ? 1 : 0)).current
   const fadeRef = useRef<Animated.CompositeAnimation | null>(null)
+
   const { width } = useWindowDimensions()
   const isMobile = width <= MOBILE_LAYOUT_WIDTH || IS_MOBILE
 
   const Layout = useMemo(() => getLayoutByCharType(characterType), [characterType])
+  const isUnderlinedLayoutVisible = isUnderlinedVisible && !isSecondaryLayoutSelected && !isMobile
 
-  useEffect(() => {
-    if (showUnderlinedKeys) {
-      setIsUnderlinedVisible(true)
+  const animateFade = useCallback(
+    (toValue: number, onComplete?: () => void) => {
+      fadeRef.current?.stop()
       fadeRef.current = Animated.timing(fadeAnim, {
-        toValue: 1,
+        toValue,
         duration: 250,
-        useNativeDriver: true,
+        useNativeDriver: !IS_WEB,
       })
-      fadeRef.current.start()
+      fadeRef.current.start(() => onComplete?.())
+    },
+    [fadeAnim],
+  )
+
+  useEffect(() => {
+    if (showUnderlinedKeys) {
+      setIsUnderlinedVisible(true)
+      animateFade(1)
       return
     }
-    fadeRef.current = Animated.timing(fadeAnim, {
-      toValue: 0,
-      duration: 250,
-      useNativeDriver: true,
-    })
-    fadeRef.current.start(() => setIsUnderlinedVisible(false))
+    animateFade(0, () => setIsUnderlinedVisible(false))
 
     return () => {
       fadeRef.current?.stop()
     }
-  }, [showUnderlinedKeys])
+  }, [showUnderlinedKeys, animateFade])
 
   return (
     <View style={styles.container}>
       <Layout {...props} onLayoutChange={setIsSecondaryLayoutSelected} />
-      {isUnderlinedVisible && !isSecondaryLayoutSelected && !isMobile && (
+      {isUnderlinedLayoutVisible && (
         <Animated.View style={{ opacity: fadeAnim }}>
           <UnderlinedLayout {...props} />
         </Animated.View>