@ebscn/ui 1.0.3-beta.4 → 1.0.3-beta.7

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

@@ -0,0 +1,100 @@
+import { useRef, useState } from "react";
+import React 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 == '↑' ? "".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,120 @@
+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-functionkey-background) no-repeat center;
+  background-size: 24px 24px;
+}
 .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: 267px;
   transition: all 0.5s;
   align-content: flex-start;
 }
-.ebscn-stock-keyboard .ebscn-stock-keyboard-right {
+.ebscn-stock-keyboard-top {
+  padding: 11px 19px;
+  background-color: var(--ebscn-color-background);
+  display: flex;
+  align-items: center;
+  font-size: var(--ebscn-font-size-8);
+}
+.ebscn-stock-keyboard-top-item {
+  margin-right: 24px;
+  color: var(--ebscn-color-text-secondary);
+}
+.ebscn-stock-keyboard-top-item-active {
+  color: var(--ebscn-color-primary);
+}
+.ebscn-stock-keyboard-bottom {
+  display: flex;
+}
+.ebscn-stock-keyboard-bottom .ebscn-stock-keyboard-right {
+  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 {
+.ebscn-stock-keyboard-bottom .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;
+  color: #fff;
+}
+.ebscn-stock-keyboard-bottom .ebscn-stock-keyboard-right-key,
+.ebscn-stock-keyboard-bottom .ebscn-stock-keyboard-right-confirmKey {
+  width: calc(25% - 7.5px);
+  margin: 6px 3px 0 3px;
+  border-radius: 4.17px;
+  height: 48px;
+  line-height: 48px;
   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-size: var(--ebscn-font-size-11);
-  background: #e1e3e8;
-}
-.ebscn-stock-keyboard .ebscn-stock-keyboard-right-option:active {
-  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;
+  font-weight: 400;
+}
+.ebscn-stock-keyboard-bottom .ebscn-stock-keyboard-right-key {
+  color: var(--ebscn-color-text);
+  font-size: 23px;
+  background: var(--ebscn-color-keyboard-key-bg);
+}
+.ebscn-stock-keyboard-bottom .ebscn-stock-keyboard-right-key:active {
+  background: var(--ebscn-color-keyboard-active-background);
+}
+.ebscn-stock-keyboard-bottom .ebscn-stock-keyboard-right-option {
+  font-size: var(--ebscn-font-size-10);
+  color: var(--ebscn-color-text);
+  background-color: var(--ebscn-color-functionkey-background);
+}
+.ebscn-stock-keyboard-bottom .ebscn-stock-keyboard-right-option:active {
+  font-size: var(--ebscn-font-size-10);
+  background-color: var(--ebscn-color-keyboard-active-background);
+}
+.ebscn-stock-keyboard-bottom .ebscn-stock-keyboard-right-delete {
+  background: url(../../assets/images/delete.png) var(--ebscn-color-functionkey-background) 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;
+.ebscn-stock-keyboard-bottom .ebscn-stock-keyboard-right-delete:active {
+  background: url(../../assets/images/delete.png) var(--ebscn-color-keyboard-active-background) no-repeat center;
   background-size: 24px 24px;
 }
-.ebscn-stock-keyboard .ebscn-stock-keyboard-right-header {
-  padding-top: 24px;
-  padding-bottom: 16px;
+.ebscn-stock-keyboard-bottom .ebscn-stock-keyboard-right-confirmKey {
   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: 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);
 }
-.ebscn-stock-keyboard .ebscn-stock-keyboard-right-confirmKey:active {
+.ebscn-stock-keyboard-bottom .ebscn-stock-keyboard-right-confirmKey:active {
   background-color: #D03B21;
   color: var(--ebscn-color-white);
 }
-.ebscn-stock-keyboard .ebscn-stock-keyboard-left {
+.ebscn-stock-keyboard-bottom .ebscn-stock-keyboard-right-bottom-option {
+  font-size: var(--ebscn-font-size-10);
+}
+.ebscn-stock-keyboard-bottom .ebscn-stock-keyboard-left {
   width: 20%;
-  height: 216px;
+  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: 48px;
+  margin: 6px 3px 6px 6px;
   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;
+  color: var(--ebscn-color-text);
+  line-height: 48px;
+  background-color: var(--ebscn-color-functionkey-background);
 }
-.ebscn-stock-keyboard .ebscn-stock-keyboard-left-key:active {
-  font-size: 18px;
-  background: #CACBD0;
+.ebscn-stock-keyboard-bottom .ebscn-stock-keyboard-left-key:active {
+  background: var(--ebscn-color-keyboard-active-background);
 }
 @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(267px + env(safe-area-inset-bottom));
+    height: calc(267px + 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,9 @@
 import cns from "classnames";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import React 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 +17,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 +65,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 +76,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 +107,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(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);
+    }
+  })));
 }

package/es/global/global.css

@@ -45,9 +45,13 @@
   --ebscn-color-golden: #b47816;
   --ebscn-color-grey: rgba(0, 0, 0, 0.7);
   --ebscn-color-split-line: #EBEBEB;
+  --ebscn-color-keyboard-bg: #d2d5d8;
+  --ebscn-color-keyboard-key-bg: #fff;
+  --ebscn-color-functionkey-background: #adb3bd;
+  --ebscn-color-keyboard-active-background: #E5E5E5;
 }
 html[data-prefers-color-scheme='dark'] {
-  --ebscn-color-primary: #3086ff;
+  --ebscn-color-blue: #4c7cf1;
   --ebscn-color-success: #34b368;
   --ebscn-color-warning: #ffa930;
   --ebscn-color-danger: #ff4a58;
@@ -56,13 +60,18 @@ html[data-prefers-color-scheme='dark'] {
   --ebscn-color-wathet: #0d2543;
   --ebscn-color-text: #ebebeb;
   --ebscn-color-text-secondary: #b3b3b3;
-  --ebscn-color-weak: #808080;
+  --ebscn-color-weak: #7a7a7a;
   --ebscn-color-light: #4d4d4d;
   --ebscn-color-border: #2b2b2b;
   --ebscn-color-box: #0a0a0a;
   --ebscn-color-background: #1a1a1a;
   --ebscn-color-background-body: var(--ebscn-color-background);
   --ebscn-border-color: var(--ebscn-color-border);
+  --ebscn-color-split-line: #2B2B2B;
+  --ebscn-color-keyboard-bg: #1a1a1a;
+  --ebscn-color-keyboard-key-bg: #474747;
+  --ebscn-color-functionkey-background: #292929;
+  --ebscn-color-keyboard-active-background: #323232;
 }
 :root {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

package/es/global/theme-dark.css

@@ -1,5 +1,5 @@
 html[data-prefers-color-scheme='dark'] {
-  --ebscn-color-primary: #3086ff;
+  --ebscn-color-blue: #4c7cf1;
   --ebscn-color-success: #34b368;
   --ebscn-color-warning: #ffa930;
   --ebscn-color-danger: #ff4a58;
@@ -8,11 +8,16 @@ html[data-prefers-color-scheme='dark'] {
   --ebscn-color-wathet: #0d2543;
   --ebscn-color-text: #ebebeb;
   --ebscn-color-text-secondary: #b3b3b3;
-  --ebscn-color-weak: #808080;
+  --ebscn-color-weak: #7a7a7a;
   --ebscn-color-light: #4d4d4d;
   --ebscn-color-border: #2b2b2b;
   --ebscn-color-box: #0a0a0a;
   --ebscn-color-background: #1a1a1a;
   --ebscn-color-background-body: var(--ebscn-color-background);
   --ebscn-border-color: var(--ebscn-color-border);
+  --ebscn-color-split-line: #2B2B2B;
+  --ebscn-color-keyboard-bg: #1a1a1a;
+  --ebscn-color-keyboard-key-bg: #474747;
+  --ebscn-color-functionkey-background: #292929;
+  --ebscn-color-keyboard-active-background: #323232;
 }

package/es/global/theme-default.css

@@ -45,4 +45,8 @@
   --ebscn-color-golden: #b47816;
   --ebscn-color-grey: rgba(0, 0, 0, 0.7);
   --ebscn-color-split-line: #EBEBEB;
+  --ebscn-color-keyboard-bg: #d2d5d8;
+  --ebscn-color-keyboard-key-bg: #fff;
+  --ebscn-color-functionkey-background: #adb3bd;
+  --ebscn-color-keyboard-active-background: #E5E5E5;
 }

package/es/index.d.ts

@@ -36,7 +36,3 @@ export { default as Tabs } from './components/tabs';
 export { default as Tip } from './components/tip';
 export { default as ToastLoading } from './components/toastLoading';
 export { default as Input } from './components/input';
-export { default as PayInput } from './components/pay-input';
-export { default as MoneyInput } from './components/money-input';
-export { default as FeneInput } from './components/fene-input';
-export { default as CommonInput } from './components/common-input';

package/es/index.js

@@ -38,7 +38,7 @@ export { default as Tabs } from './components/tabs';
 export { default as Tip } from './components/tip';
 export { default as ToastLoading } from './components/toastLoading';
 export { default as Input } from './components/input';
-export { default as PayInput } from './components/pay-input';
-export { default as MoneyInput } from './components/money-input';
-export { default as FeneInput } from './components/fene-input';
-export { default as CommonInput } from './components/common-input';
+// export { default as PayInput} from './components/pay-input';
+// export { default as MoneyInput } from './components/money-input';
+// export { default as FeneInput } from './components/fene-input';
+// export { default as CommonInput } from './components/common-input';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebscn/ui",
-  "version": "1.0.3-beta.4",
+  "version": "1.0.3-beta.7",
   "description": "ebscn react library",
   "module": "./es/index.js",
   "types": "./es/index.d.ts",