@ebscn/ui 1.0.3-beta.2 → 1.0.3-beta.20

package/es/components/stock-keyboard/alphabet-keyboard.css

@@ -0,0 +1,186 @@
+html[data-prefers-color-scheme='dark'] .ebscn-alphabet-keyboard-extra-keybord {
+  background: url(../../assets/images/keybord_keybord_dark.png) no-repeat center;
+  background-size: 25px 25px;
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
+}
+html[data-prefers-color-scheme='dark'] .ebscn-alphabet-keyboard-extra-keybord:active {
+  background-color: var(--ebscn-color-keyboard-fckey-bg-active);
+}
+html[data-prefers-color-scheme='dark'] .ebscn-alphabet-keyboard-extra-delete {
+  background: url(../../assets/images/delete_dark.png) no-repeat center;
+  background-size: 25px 25px;
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
+}
+html[data-prefers-color-scheme='dark'] .ebscn-alphabet-keyboard-extra-delete:active {
+  background-color: var(--ebscn-color-keyboard-fckey-bg-active);
+}
+html[data-prefers-color-scheme='dark'] .ebscn-alphabet-keyboard-extra-shift {
+  background: url(../../assets/images/keybord_shift_dark.png) no-repeat center;
+  background-size: 25px 25px;
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
+}
+html[data-prefers-color-scheme='dark'] .ebscn-alphabet-keyboard-extra-shift:active {
+  background-color: var(--ebscn-color-keyboard-fckey-bg-active);
+}
+html[data-prefers-color-scheme='dark'] .ebscn-alphabet-keyboard-extra-shift-big {
+  background: url(../../assets/images/keybord_shift2_dark.png) no-repeat center;
+  background-color: #adb3bd;
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
+  background-size: 25px 25px;
+}
+.ebscn-alphabet-keyboard-extra {
+  position: relative;
+  transform: translateY(0);
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  align-content: flex-start;
+  background-color: #fff;
+  background-color: var(--ebscn-color-keyboard-bg);
+}
+.ebscn-alphabet-keyboard-extra-shift {
+  margin-right: 3.73%;
+  background: url(../../assets/images/keybord_shift.png) no-repeat center;
+  background-color: #adb3bd;
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
+  background-size: 17px 17px;
+  border: 0.5px solid #888;
+  border-color: var(--ebscn-color-keyboard-key-border);
+}
+.ebscn-alphabet-keyboard-extra-shift-big {
+  background: url(../../assets/images/keybord_shift2.png) no-repeat center;
+  background-color: #adb3bd;
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
+  background-size: 25px 25px;
+}
+.ebscn-alphabet-keyboard-extra-delete {
+  margin-left: 2.26%;
+  background: url(../../assets/images/delete.png) no-repeat center;
+  background-color: #adb3bd;
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
+  background-size: 25px 25px;
+  border: 0.5px solid #888;
+  border-color: var(--ebscn-color-keyboard-key-border);
+}
+.ebscn-alphabet-keyboard-extra-keybord {
+  background: url(../../assets/images/keybord_keybord.png) no-repeat center;
+  background-color: #adb3bd;
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
+  background-size: 25px 18px;
+  border: 0.5px solid #888;
+  border-color: var(--ebscn-color-keyboard-key-border);
+}
+.ebscn-alphabet-keyboard-extra-space {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48.4%;
+  height: 42px;
+  border-radius: 5px;
+  font-size: 16px;
+  background-color: #fff;
+  background: var(--ebscn-color-keyboard-key-bg);
+  border: 0.5px solid #888;
+  border-color: var(--ebscn-color-keyboard-key-border);
+}
+.ebscn-alphabet-keyboard-extra-space:active {
+  background-color: #e5e5e5;
+  background-color: var(--ebscn-color-keyboard-key-bg-active);
+}
+.ebscn-alphabet-keyboard-extra .ebscn-alphabet-keyboard-extra-firstline,
+.ebscn-alphabet-keyboard-extra .ebscn-alphabet-keyboard-extra-secondline,
+.ebscn-alphabet-keyboard-extra .ebscn-alphabet-keyboard-extra-thirdline,
+.ebscn-alphabet-keyboard-extra .ebscn-alphabet-keyboard-extra-firthline {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding-top: calc(3% - 1px);
+}
+.ebscn-alphabet-keyboard-extra .ebscn-alphabet-keyboard-extra-firstline-key,
+.ebscn-alphabet-keyboard-extra .ebscn-alphabet-keyboard-extra-secondline-key,
+.ebscn-alphabet-keyboard-extra .ebscn-alphabet-keyboard-extra-thirdline-key,
+.ebscn-alphabet-keyboard-extra .ebscn-alphabet-keyboard-extra-firthline-key {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  width: 8.4%;
+  height: 40px;
+  background-color: #fff;
+  background: var(--ebscn-color-keyboard-key-bg);
+  border-radius: 5px;
+  font-size: 23px;
+  font-weight: 400;
+  text-align: center;
+  color: #333;
+  color: var(--ebscn-color-text);
+  margin: 0 3px;
+  border: 0.5px solid #888;
+  border-color: var(--ebscn-color-keyboard-key-border);
+}
+.ebscn-alphabet-keyboard-extra .ebscn-alphabet-keyboard-extra-firstline-key:active,
+.ebscn-alphabet-keyboard-extra .ebscn-alphabet-keyboard-extra-secondline-key:active,
+.ebscn-alphabet-keyboard-extra .ebscn-alphabet-keyboard-extra-thirdline-key:active,
+.ebscn-alphabet-keyboard-extra .ebscn-alphabet-keyboard-extra-firthline-key:active {
+  background-color: #e5e5e5;
+  background-color: var(--ebscn-color-keyboard-key-bg-active);
+}
+.ebscn-alphabet-keyboard-extra-darkkey {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 11.2%;
+  height: 42px;
+  border-radius: 5px;
+  background-color: #adb3bd;
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
+  font-size: var(--ebscn-font-size-9);
+  border: 0.5px solid #888;
+  border-color: var(--ebscn-color-keyboard-fckey-border);
+}
+.ebscn-alphabet-keyboard-extra-darkkey:active {
+  background-color: #252525;
+  background-color: var(--ebscn-color-keyboard-fckey-bg-active);
+}
+.ebscn-alphabet-keyboard-extra .ebscn-alphabet-keyboard-extra-secondline {
+  padding-left: 5.73%;
+  padding-right: 5.73%;
+}
+.ebscn-alphabet-keyboard-extra .ebscn-alphabet-keyboard-extra-thirdline {
+  padding-left: 3px;
+  padding-right: 3px;
+}
+.ebscn-alphabet-keyboard-extra .ebscn-alphabet-keyboard-extra-firthline {
+  padding-left: 3px;
+  padding-right: 3px;
+  padding-bottom: 6px;
+}
+.ebscn-alphabet-keyboard-extra .ebscn-alphabet-keyboard-extra-firthline-confirm {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 23.46%;
+  height: 42px;
+  background-color: #e84225;
+  background: var(--ebscn-color-primary);
+  border-radius: 5px;
+  font-size: 16px;
+  font-weight: 400;
+  text-align: center;
+  color: #fff;
+  line-height: 22.5px;
+  border: 0.5px solid #888;
+  border-color: var(--ebscn-color-keyboard-key-border);
+}
+.ebscn-alphabet-keyboard-extra .ebscn-alphabet-keyboard-extra-firthline-confirm:active {
+  background-color: #d13c21;
+}
+.ebscn-alphabet-keyboard-extra .ebscn-alphabet-keyboard-extra-firthline img {
+  height: 20%;
+}
+@supports (bottom: env(safe-area-inset-bottom)) or (constant(safe-area-inset-bottom)) {
+  .ebscn-alphabet-keyboard-extra {
+    height: calc(223px + env(safe-area-inset-bottom));
+    height: calc(223px + constant(safe-area-inset-bottom));
+  }
+}

package/es/components/stock-keyboard/alphabet-keyboard.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { NativeProps } from '../../utils/native-props';
+export type AlphabetKeyboardProps = {
+    visible?: boolean;
+    onInput: Function;
+    onDelete: Function;
+    onClose: Function;
+    onChangeKeyBoard?: Function;
+    onConfirm: Function;
+} & NativeProps;
+export declare function AlphabetKeyboard(p: AlphabetKeyboardProps): JSX.Element;

package/es/components/stock-keyboard/alphabet-keyboard.js

@@ -0,0 +1,98 @@
+import React, { useRef, useState } from 'react';
+import { withNativeProps } from '../../utils/native-props';
+import { mergeProps } from '../../utils/with-default-props';
+var classPrefix = 'ebscn-alphabet-keyboard-extra';
+var defaultProps = {
+  visible: false
+};
+export function AlphabetKeyboard(p) {
+  var keyboardRef = useRef(null);
+  var props = mergeProps(defaultProps, p);
+  var visible = props.visible,
+    onInput = props.onInput,
+    onDelete = props.onDelete,
+    onClose = props.onClose,
+    onChangeKeyBoard = props.onChangeKeyBoard,
+    onConfirm = props.onConfirm;
+  var firstKeys = ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'];
+  var firstKeysBig = ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'];
+  var secondKeys = ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'];
+  var secondKeysBig = ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'];
+  var thirdKeys = ['↑', 'z', 'x', 'c', 'v', 'b', 'n', 'm', '×'];
+  var thirdKeysBig = ['↑', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', '×'];
+  var firthKeys = ['123', '⌨', '空格', '确定'];
+  var _a = useState(false),
+    isBig = _a[0],
+    setIsBIG = _a[1];
+  var imgKeys = ['×', '↑', '⌨'];
+  function onKeyPress(key) {
+    switch (key) {
+      case '×':
+        return onDelete === null || onDelete === void 0 ? void 0 : onDelete();
+      case '123':
+        return onChangeKeyBoard === null || onChangeKeyBoard === void 0 ? void 0 : onChangeKeyBoard();
+      case '⌨':
+        return onClose === null || onClose === void 0 ? void 0 : onClose();
+      case '确定':
+        return onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
+      case '空格':
+        return onInput === null || onInput === void 0 ? void 0 : onInput(' ');
+      case '↑':
+        return setIsBIG(!isBig);
+      default:
+        return onInput === null || onInput === void 0 ? void 0 : onInput(key);
+    }
+  }
+  return withNativeProps(props, React.createElement("div", {
+    ref: keyboardRef,
+    className: "".concat(classPrefix)
+  }, React.createElement("div", {
+    className: "".concat(classPrefix, "-firstline")
+  }, (isBig == false ? firstKeys : firstKeysBig).map(function (item, index) {
+    return React.createElement("div", {
+      key: item || index,
+      className: "".concat(classPrefix, "-firstline-key"),
+      onClick: function () {
+        if (visible) {
+          onKeyPress(item);
+        }
+      }
+    }, item);
+  })), React.createElement("div", {
+    className: "".concat(classPrefix, "-secondline")
+  }, (isBig == false ? secondKeys : secondKeysBig).map(function (item, index) {
+    return React.createElement("div", {
+      key: item || index,
+      className: "".concat(classPrefix, "-secondline-key"),
+      onClick: function () {
+        if (visible) {
+          onKeyPress(item);
+        }
+      }
+    }, item);
+  })), React.createElement("div", {
+    className: "".concat(classPrefix, "-thirdline")
+  }, (isBig == false ? thirdKeys : thirdKeysBig).map(function (item, index) {
+    return React.createElement("div", {
+      key: item || index,
+      className: item == '↑' && isBig ? "".concat(classPrefix, "-darkkey ").concat(classPrefix, "-shift ").concat(classPrefix, "-shift-big") : item == '↑' ? "".concat(classPrefix, "-darkkey ").concat(classPrefix, "-shift") : item == '×' ? "".concat(classPrefix, "-darkkey ").concat(classPrefix, "-delete") : "".concat(classPrefix, "-thirdline-key"),
+      onClick: function () {
+        if (visible) {
+          onKeyPress(item);
+        }
+      }
+    }, imgKeys.includes(item) ? '' : item);
+  })), React.createElement("div", {
+    className: "".concat(classPrefix, "-firthline")
+  }, firthKeys.map(function (item, index) {
+    return React.createElement("div", {
+      key: item || index,
+      className: item == '123' ? "".concat(classPrefix, "-darkkey") : item == '⌨' ? " ".concat(classPrefix, "-darkkey ").concat(classPrefix, "-keybord") : item == '空格' ? "".concat(classPrefix, "-space") : "".concat(classPrefix, "-firthline-confirm"),
+      onClick: function () {
+        if (visible) {
+          onKeyPress(item);
+        }
+      }
+    }, imgKeys.includes(item) ? '' : item);
+  }))));
+}

package/es/components/stock-keyboard/index.d.ts

@@ -1,4 +1,5 @@
 import "./stock-keyboard.less";
+import './alphabet-keyboard.less';
 import { StockKeyboard } from "./stock-keyboard";
 export type { StockKeyboardProps } from "./stock-keyboard";
 export default StockKeyboard;

package/es/components/stock-keyboard/index.js

@@ -1,3 +1,4 @@
 import "./stock-keyboard.css";
+import "./alphabet-keyboard.css";
 import { StockKeyboard } from "./stock-keyboard";
 export default StockKeyboard;

package/es/components/stock-keyboard/stock-keyboard.css

@@ -1,111 +1,170 @@
+html[data-prefers-color-scheme='dark'] .ebscn-stock-keyboard-bottom .ebscn-stock-keyboard-right-delete {
+  background: url(../../assets/images/delete_dark.png) var(--ebscn-color-keyboard-fckey-bg) no-repeat center;
+  background-size: 25px 25px;
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
+}
+html[data-prefers-color-scheme='dark'] .ebscn-stock-keyboard-bottom .ebscn-stock-keyboard-right-delete:active {
+  background-color: var(--ebscn-color-keyboard-fckey-bg-active);
+}
 .ebscn-stock-keyboard {
   transform: translateY(101%);
-  display: flex;
   position: fixed;
   bottom: 0;
+  left: 0;
   flex-direction: row;
+  z-index: 999;
   width: 100%;
-  height: 216px;
+  height: 262px;
   transition: all 0.5s;
   align-content: flex-start;
+  background-color: #fff;
+  background-color: var(--ebscn-color-keyboard-bg);
+}
+.ebscn-stock-keyboard-top {
+  padding: 11px 19px 6px 11px;
+  background-color: #fff;
+  background-color: var(--ebscn-color-background);
+  display: flex;
+  align-items: center;
+  font-size: 18px;
+  font-size: var(--ebscn-font-size-8);
+}
+.ebscn-stock-keyboard-top-item {
+  margin-right: 24px;
+  padding-bottom: 2px;
+  color: #666;
+  color: var(--ebscn-color-text-secondary);
+  line-height: 21px;
+  border-bottom: 2px solid transparent;
+}
+.ebscn-stock-keyboard-top-item-active {
+  color: #e84225;
+  color: var(--ebscn-color-primary);
+  position: relative;
+}
+.ebscn-stock-keyboard-top-item-active::after {
+  content: "";
+  position: absolute;
+  bottom: -2px;
+  left: 8px;
+  width: 14px;
+  /* 固定宽度 */
+  height: 2px;
+  background: var(--ebscn-color-primary);
+  border-radius: 1px;
 }
-.ebscn-stock-keyboard .ebscn-stock-keyboard-right {
+.ebscn-stock-keyboard-bottom {
+  display: flex;
+}
+.ebscn-stock-keyboard-bottom .ebscn-stock-keyboard-right {
+  background-color: #d3d5d8;
+  background-color: var(--ebscn-color-keyboard-bg);
   display: flex;
   flex-wrap: wrap;
   width: 80%;
-  height: 216px;
+  height: 223px;
   transition: all 0.5s;
   align-content: flex-start;
 }
-.ebscn-stock-keyboard .ebscn-stock-keyboard-right :last-child {
-  background: var(--ebscn-color-primary);
-  color: var(--ebscn-color-white);
-}
-.ebscn-stock-keyboard .ebscn-stock-keyboard-right-key {
-  width: 25%;
-  height: 54px;
-  line-height: 54px;
-  text-align: center;
-  font-size: 24px;
-  color: #000000;
-  font-weight: 300;
-  box-shadow: 0 0 0 1px var(--ebscn-color-light);
-  background: var(--ebscn-color-white);
-}
-.ebscn-stock-keyboard .ebscn-stock-keyboard-right-key:active {
-  width: 25%;
-  height: 54px;
-  line-height: 54px;
+.ebscn-stock-keyboard-bottom .ebscn-stock-keyboard-right :last-child {
+  background-color: #e84225;
+  background-color: var(--ebscn-color-primary);
+  color: #fff;
+}
+.ebscn-stock-keyboard-bottom .ebscn-stock-keyboard-right-key {
+  width: calc(25% - 8.5px);
+  margin: 6px 3px 0 3px;
+  border-radius: 4px;
+  height: 46px;
+  line-height: 46px;
   text-align: center;
-  font-size: 24px;
-  color: #000000;
-  font-weight: 300;
-  box-shadow: 0 0 0 1px var(--ebscn-color-light);
-  background: var(--ebscn-color-border);
-}
-.ebscn-stock-keyboard .ebscn-stock-keyboard-right-option {
+  font-weight: 400;
+  border: 0.5px solid #888;
+  border-color: var(--ebscn-color-keyboard-key-border);
+  color: #333;
+  color: var(--ebscn-color-text);
+  font-size: 23px;
+  background-color: #fff;
+  background-color: var(--ebscn-color-keyboard-key-bg);
+}
+.ebscn-stock-keyboard-bottom .ebscn-stock-keyboard-right-key:active {
+  background-color: #e5e5e5;
+  background-color: var(--ebscn-color-keyboard-key-bg-active);
+}
+.ebscn-stock-keyboard-bottom .ebscn-stock-keyboard-right-option {
+  font-size: 19px;
   font-size: var(--ebscn-font-size-11);
-  background: #e1e3e8;
-}
-.ebscn-stock-keyboard .ebscn-stock-keyboard-right-option:active {
+  color: #333;
+  color: var(--ebscn-color-text);
+  background-color: #adb3bd;
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
+  border-color: var(--ebscn-color-keyboard-fckey-border);
+}
+.ebscn-stock-keyboard-bottom .ebscn-stock-keyboard-right-option:active {
+  background-color: #252525;
+  background-color: var(--ebscn-color-keyboard-fckey-bg-active);
+}
+.ebscn-stock-keyboard-bottom .ebscn-stock-keyboard-right-delete {
+  background: url(../../assets/images/delete.png) no-repeat center;
+  background-color: #adb3bd;
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
+  background-size: 25px 25px;
+  border-color: var(--ebscn-color-keyboard-fckey-border);
+}
+.ebscn-stock-keyboard-bottom .ebscn-stock-keyboard-right-delete:active {
+  background: url(../../assets/images/delete.png) no-repeat center;
+  background-color: #252525;
+  background-color: var(--ebscn-color-keyboard-fckey-bg-active);
+  background-size: 25px 25px;
+}
+.ebscn-stock-keyboard-bottom .ebscn-stock-keyboard-right-confirmKey {
+  font-size: 19px;
   font-size: var(--ebscn-font-size-11);
-  background: #CACBD0;
-}
-.ebscn-stock-keyboard .ebscn-stock-keyboard-right-delete {
-  background: url(../../assets/images/delete.png) #e1e3e8 no-repeat center;
-  background-size: 24px 24px;
-}
-.ebscn-stock-keyboard .ebscn-stock-keyboard-right-delete:active {
-  background: url(../../assets/images/delete.png) #CACBD0 no-repeat center;
-  background-size: 24px 24px;
-}
-.ebscn-stock-keyboard .ebscn-stock-keyboard-right-header {
-  padding-top: 24px;
-  padding-bottom: 16px;
-  font-size: var(--ebscn-font-size-10);
-  color: #333333;
-  text-align: center;
-  font-weight: 500;
-}
-.ebscn-stock-keyboard .ebscn-stock-keyboard-right-confirmKey {
+  width: calc(25% - 7.5px);
+  background-color: #e84225;
   background-color: var(--ebscn-color-primary);
-  width: 25%;
-  height: 54px;
-  line-height: 54px;
-  text-align: center;
-  font-size: var(--ebscn-font-size-11);
-  color: #000000;
-  font-weight: 300;
-  box-shadow: 0 0 0 1px var(--ebscn-color-light);
+  border-color: var(--ebscn-color-keyboard-fckey-border);
 }
-.ebscn-stock-keyboard .ebscn-stock-keyboard-right-confirmKey:active {
-  background-color: #D03B21;
+.ebscn-stock-keyboard-bottom .ebscn-stock-keyboard-right-confirmKey:active {
+  background-color: #d13c21;
+  color: #fff;
   color: var(--ebscn-color-white);
 }
-.ebscn-stock-keyboard .ebscn-stock-keyboard-left {
+.ebscn-stock-keyboard-bottom .ebscn-stock-keyboard-right-bottom-option {
+  font-size: 19px;
+  font-size: var(--ebscn-font-size-11);
+}
+.ebscn-stock-keyboard-bottom .ebscn-stock-keyboard-left {
   width: 20%;
-  height: 216px;
+  background-color: #d3d5d8;
+  background-color: var(--ebscn-color-keyboard-bg);
 }
-.ebscn-stock-keyboard .ebscn-stock-keyboard-left-key {
+.ebscn-stock-keyboard-bottom .ebscn-stock-keyboard-left-key {
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 20%;
+  border-radius: 4.17px;
+  height: 46px;
+  margin: 6px 3px 6px 6px;
+  font-size: 18px;
   font-size: var(--ebscn-font-size-10);
   font-weight: 400;
   text-align: center;
-  color: #333333;
-  line-height: 25px;
-  box-shadow: 0 0 0 1px var(--ebscn-color-light);
-  background: #e1e3e8;
-}
-.ebscn-stock-keyboard .ebscn-stock-keyboard-left-key:active {
-  font-size: 18px;
-  background: #CACBD0;
+  color: #333;
+  color: var(--ebscn-color-text);
+  line-height: 46px;
+  background-color: #adb3bd;
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
+  border: 0.5px solid #888;
+  border-color: var(--ebscn-color-keyboard-fckey-border);
+}
+.ebscn-stock-keyboard-bottom .ebscn-stock-keyboard-left-key:active {
+  background-color: #252525;
+  background: var(--ebscn-color-keyboard-fckey-bg-active);
 }
 @supports (bottom: env(safe-area-inset-bottom)) or (constant(safe-area-inset-bottom)) {
   .ebscn-stock-keyboard {
-    height: calc(216px + env(safe-area-inset-bottom));
-    height: calc(216px + constant(safe-area-inset-bottom));
+    height: calc(262px + env(safe-area-inset-bottom));
+    height: calc(262px + constant(safe-area-inset-bottom));
   }
 }

package/es/components/stock-keyboard/stock-keyboard.d.ts

@@ -3,10 +3,10 @@ import { NativeProps } from '../../utils/native-props';
 export type StockKeyboardProps = {
     visible?: boolean;
     onInput: Function;
-    onChangeKeyBoard: Function;
     onDelete: Function;
     onClose: Function;
     onClean: Function;
-    onConfirm?: Function;
+    onConfirm: Function;
+    onSelectCN: Function;
 } & NativeProps;
 export declare function StockKeyboard(p: StockKeyboardProps): JSX.Element;

package/es/components/stock-keyboard/stock-keyboard.js

@@ -1,8 +1,8 @@
-import cns from "classnames";
-import { useEffect, useRef } from "react";
-import React from "react";
+import cns from 'classnames';
+import React, { useEffect, useRef, useState } from 'react';
 import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
+import { AlphabetKeyboard } from './alphabet-keyboard';
 var classPrefix = 'ebscn-stock-keyboard';
 var defaultProps = {
   visible: false
@@ -16,13 +16,15 @@ export function StockKeyboard(p) {
     onClose = props.onClose,
     onClean = props.onClean,
     onConfirm = props.onConfirm,
-    onChangeKeyBoard = props.onChangeKeyBoard;
-  var keys = [1, 2, 3, 'X', 4, 5, 6, '清除', 7, 8, 9, '隐藏', 'ABC', 0, '', '确定'];
-  var leftKeys = ['600', '601', '000', '002', '300'];
+    onSelectCN = props.onSelectCN;
+  var keys = [1, 2, 3, 'X', 4, 5, 6, '清除', 7, 8, 9, '隐藏', 'ABC', 0, '002', '确定'];
+  var leftKeys = ['600', '601', '000', '300'];
   var hideTimer = useRef(null);
   var appearTimer = useRef(null);
   var lastVisible = useRef(null);
-  var keyFlag = useRef(0);
+  var _a = useState(1),
+    keyboardType = _a[0],
+    setKeyboardType = _a[1];
   useEffect(function () {
     if (!visible) {
       if (lastVisible.current) {
@@ -62,7 +64,9 @@ export function StockKeyboard(p) {
       case '确定':
         return onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
       case 'ABC':
-        return onChangeKeyBoard === null || onChangeKeyBoard === void 0 ? void 0 : onChangeKeyBoard();
+        setKeyboardType(2);
+        return;
+      //return onChangeKeyBoard?.()
       default:
         return onInput === null || onInput === void 0 ? void 0 : onInput(key);
     }
@@ -71,6 +75,25 @@ export function StockKeyboard(p) {
     ref: keyboardRef,
     className: "".concat(classPrefix)
   }, React.createElement("div", {
+    className: "".concat(classPrefix, "-top")
+  }, React.createElement("div", {
+    onClick: function () {
+      return setKeyboardType(1);
+    },
+    className: "".concat(classPrefix, "-top-item ").concat(keyboardType === 1 ? "".concat(classPrefix, "-top-item-active") : '')
+  }, "123"), React.createElement("div", {
+    onClick: function () {
+      return setKeyboardType(2);
+    },
+    className: "".concat(classPrefix, "-top-item ").concat(keyboardType === 2 ? "".concat(classPrefix, "-top-item-active") : '')
+  }, "ABC"), React.createElement("div", {
+    onClick: function () {
+      return onSelectCN();
+    },
+    className: "".concat(classPrefix, "-top-item")
+  }, "\u4E2D\u6587")), keyboardType === 1 ? React.createElement("div", {
+    className: "".concat(classPrefix, "-bottom")
+  }, ' ', React.createElement("div", {
     className: "".concat(classPrefix, "-left")
   }, leftKeys.map(function (item, index) {
     return React.createElement("div", {
@@ -83,17 +106,25 @@ export function StockKeyboard(p) {
       }
     }, item !== 'X' ? item : '');
   })), React.createElement("div", {
-    ref: keyboardRef,
     className: "".concat(classPrefix, "-right")
   }, keys.map(function (item, index) {
     return React.createElement("div", {
       key: item || index,
-      className: cns(item !== '确定' ? "".concat(classPrefix, "-right-key") : "".concat(classPrefix, "-right-confirmKey"), typeof item !== 'number' && item.length && item !== '.' && item !== '确定' ? "".concat(classPrefix, "-right-option") : item == '确定' ? "".concat(classPrefix, "-right-confirmKey") : "".concat(classPrefix, "-right-number-key"), item === 'X' && "".concat(classPrefix, "-right-delete")),
+      className: cns("".concat(classPrefix, "-right-key"), item !== '确定' ? '' : "".concat(classPrefix, "-right-key ").concat(classPrefix, "-right-confirmKey"), item === 'ABC' || item === '002' ? "".concat(classPrefix, "-right-bottom-option") : '', typeof item !== 'number' && item !== 'ABC' && item !== '002' && item.length && item !== '.' && item !== '确定' ? "".concat(classPrefix, "-right-option") : item == '确定' ? "".concat(classPrefix, "-right-confirmKey") : "".concat(classPrefix, "-right-number-key"), item === 'X' && "".concat(classPrefix, "-right-delete")),
       onClick: function () {
         if (visible) {
           onKeyPress(item);
         }
       }
     }, item !== 'X' ? item : '');
-  }))));
+  }))) : React.createElement(AlphabetKeyboard, {
+    visible: true,
+    onConfirm: onConfirm,
+    onDelete: onDelete,
+    onClose: onClose,
+    onInput: onInput,
+    onChangeKeyBoard: function () {
+      return setKeyboardType(1);
+    }
+  })));
 }