feat(app): add support for pinyin layout candidates in ODD keyboard

fix PLAT-505
Opentrons · Nov 18, 2024 · 01503d8 · 01503d8
1 parent d56f5c7
commit 01503d8
Show file tree

Hide file tree

Showing 6 changed files with 558 additions and 2 deletions.
diff --git a/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.css b/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.css
@@ -68,3 +68,12 @@ the rest is the same */
   height: 44.75px;
   width: 330px !important;
 }
+
+.hg-candidate-box {
+  max-width: 400px;
+}
+
+li.hg-candidate-box-list-item {
+  height: 60px;
+  width: 60px;
+}
diff --git a/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.tsx b/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.tsx
@@ -1,6 +1,12 @@
 import * as React from 'react'
 import Keyboard from 'react-simple-keyboard'
-import { alphanumericKeyboardLayout, customDisplay } from '../constants'
+import { useSelector } from 'react-redux'
+import { getAppLanguage } from '/app/redux/config'
+import {
+  alphanumericKeyboardLayout,
+  pinYinLayoutCandidates,
+  customDisplay,
+} from '../constants'
 import type { KeyboardReactInterface } from 'react-simple-keyboard'
 
 import '../index.css'
@@ -19,6 +25,7 @@ export function AlphanumericKeyboard({
   debug = false, // If true, <ENTER> will input a \n
 }: AlphanumericKeyboardProps): JSX.Element {
   const [layoutName, setLayoutName] = React.useState<string>('default')
+  const appLanguage = useSelector(getAppLanguage)
   const onKeyPress = (button: string): void => {
     if (button === '{ABC}') handleShift()
     if (button === '{numbers}') handleNumber()
@@ -47,6 +54,9 @@ export function AlphanumericKeyboard({
       onKeyPress={onKeyPress}
       layoutName={layoutName}
       layout={alphanumericKeyboardLayout}
+      layoutCandidates={
+        appLanguage === 'zh-CN' ? pinYinLayoutCandidates : undefined
+      }
       display={customDisplay}
       mergeDisplay={true}
       useButtonTag={true}

diff --git a/app/src/atoms/SoftwareKeyboard/FullKeyboard/index.css b/app/src/atoms/SoftwareKeyboard/FullKeyboard/index.css
@@ -103,3 +103,12 @@
   color: #16212d;
   background-color: #e3e3e3; /* grey30 */
 }
+
+.hg-candidate-box {
+  max-width: 400px;
+}
+
+li.hg-candidate-box-list-item {
+  height: 60px;
+  width: 60px;
+}
diff --git a/app/src/atoms/SoftwareKeyboard/FullKeyboard/index.tsx b/app/src/atoms/SoftwareKeyboard/FullKeyboard/index.tsx
@@ -1,6 +1,12 @@
 import * as React from 'react'
 import { KeyboardReact as Keyboard } from 'react-simple-keyboard'
-import { customDisplay, fullKeyboardLayout } from '../constants'
+import { useSelector } from 'react-redux'
+import { getAppLanguage } from '/app/redux/config'
+import {
+  customDisplay,
+  pinYinLayoutCandidates,
+  fullKeyboardLayout,
+} from '../constants'
 import type { KeyboardReactInterface } from 'react-simple-keyboard'
 
 import '../index.css'
@@ -19,6 +25,7 @@ export function FullKeyboard({
   debug = false,
 }: FullKeyboardProps): JSX.Element {
   const [layoutName, setLayoutName] = React.useState<string>('default')
+  const appLanguage = useSelector(getAppLanguage)
   const handleShift = (button: string): void => {
     switch (button) {
       case '{shift}':
@@ -56,6 +63,9 @@ export function FullKeyboard({
       onKeyPress={onKeyPress}
       layoutName={layoutName}
       layout={fullKeyboardLayout}
+      layoutCandidates={
+        appLanguage === 'zh-CN' ? pinYinLayoutCandidates : undefined
+      }
       display={customDisplay}
       mergeDisplay={true}
       useButtonTag={true}