@ebscn/ui 1.0.3-beta.3 → 1.0.3-beta.30

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

@@ -1,74 +1,81 @@
+html[data-prefers-color-scheme='dark'] .ebscn-stock-count-keyboard-delete {
+  background: url(../../assets/images/delete_dark.png) var(--ebscn-color-keyboard-fckey-bg) no-repeat center;
+  background-size: 24px 24px;
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
+}
+html[data-prefers-color-scheme='dark'] .ebscn-stock-count-keyboard-delete:active {
+  background-color: var(--ebscn-color-keyboard-fckey-bg-active);
+}
 .ebscn-stock-count-keyboard {
   display: none;
+  box-sizing: border-box;
   position: fixed;
+  z-index: 999;
   bottom: 0;
   transform: translateY(101%);
   display: flex;
   flex-wrap: wrap;
   width: 100%;
-  height: 216px;
+  height: 223px;
+  background-color: var(--ebscn-color-keyboard-bg);
+  padding: 3px;
   transition: all 0.5s;
   align-content: flex-start;
 }
-.ebscn-stock-count-keyboard :last-child {
-  background: var(--ebscn-color-primary);
-  color: var(--ebscn-color-background);
+.ebscn-stock-count-keyboard-key,
+.ebscn-stock-count-keyboard-confirmKey {
+  border-radius: 4.17px;
+  width: calc(20% - 8px);
+  margin: 3px;
+  height: 46px;
+  text-align: center;
+  line-height: 48px;
+  font-weight: 400;
+  border: 0.5px solid #888;
+  border-color: var(--ebscn-color-keyboard-key-border);
 }
 .ebscn-stock-count-keyboard-key {
-  width: 20%;
-  height: 54px;
-  text-align: center;
-  line-height: 54px;
-  font-size: 24px;
-  color: var(--ebscn-color-text-dark-solid);
-  font-weight: 300;
-  box-shadow: 0 0 0 1px #cccccc;
-  background: var(--ebscn-color-background);
+  font-size: 23px;
+  color: var(--ebscn-color-text);
+  background: var(--ebscn-color-keyboard-key-bg);
 }
 .ebscn-stock-count-keyboard-key:active {
-  width: 20%;
-  height: 54px;
-  text-align: center;
-  font-size: 24px;
-  color: var(--ebscn-color-text-dark-solid);
-  font-weight: 300;
-  box-shadow: 0 0 0 1px #cccccc;
-  background: var(--ebscn-color-border);
+  background-color: #e5e5e5;
+  background-color: var(--ebscn-color-keyboard-key-bg-active);
 }
 .ebscn-stock-count-keyboard-option {
-  font-size: var(--ebscn-font-size-11);
-  background: #e1e3e8;
+  font-size: 18px;
+  font-size: var(--ebscn-font-size-10);
+  color: var(--ebscn-color-text);
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
+  border: 0.5px solid #888;
+  border-color: var(--ebscn-color-keyboard-fckey-border);
 }
 .ebscn-stock-count-keyboard-option:active {
-  font-size: var(--ebscn-font-size-11);
-  background: #CACBD0;
+  background-color: #252525;
+  background-color: var(--ebscn-color-keyboard-fckey-bg-active);
 }
 .ebscn-stock-count-keyboard-delete {
-  background: url(../../assets/images/delete.png) #e1e3e8 no-repeat center;
-  background-size: 24px 24px;
+  background: url(../../assets/images/delete.png) var(--ebscn-color-keyboard-fckey-bg) no-repeat center;
+  background-size: 25px 25px;
 }
 .ebscn-stock-count-keyboard-delete:active {
-  background: url(../../assets/images/delete.png) #CACBD0 no-repeat center;
-  background-size: 24px 24px;
+  background: url(../../assets/images/delete.png) var(--ebscn-color-keyboard-key-bg-active) no-repeat center;
+  background-size: 25px 25px;
+  background-color: #252525;
+  background-color: var(--ebscn-color-keyboard-fckey-bg-active);
 }
 .ebscn-stock-count-keyboard-confirmKey {
   background-color: var(--ebscn-color-primary);
-  width: 20%;
-  height: 54px;
-  line-height: 54px;
-  text-align: center;
-  font-size: var(--ebscn-font-size-11);
-  color: var(--ebscn-color-text-dark-solid);
-  font-weight: 300;
-  box-shadow: 0 0 0 1px #cccccc;
+  font-size: var(--ebscn-font-size-10);
+  color: var(--ebscn-color-white);
 }
 .ebscn-stock-count-keyboard-confirmKey:active {
-  background-color: #D03B21;
-  color: var(--ebscn-color-background);
+  background-color: #d13c21;
 }
 @supports (bottom: env(safe-area-inset-bottom)) or (constant(safe-area-inset-bottom)) {
   .ebscn-stock-count-keyboard {
-    height: calc(216px + env(safe-area-inset-bottom));
-    height: calc(216px + constant(safe-area-inset-bottom));
+    height: calc(223px + env(safe-area-inset-bottom));
+    height: calc(223px + constant(safe-area-inset-bottom));
   }
 }

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

@@ -63,7 +63,7 @@ export function StockCountKeyboard(p) {
   }, keys.map(function (item, index) {
     return React.createElement("div", {
       key: item || index,
-      className: cns(item !== '确定' ? "".concat(classPrefix, "-key") : "".concat(classPrefix, "-confirmKey"), typeof item !== 'number' && item.length && item !== '.' && item !== '确定' ? "".concat(classPrefix, "-option") : item == '确定' ? "".concat(classPrefix, "-confirmKey") : "".concat(classPrefix, "-number-key"), item === 'X' && "".concat(classPrefix, "-delete")),
+      className: cns(item !== '确定' ? "".concat(classPrefix, "-key") : "".concat(classPrefix, "-confirmKey"), typeof item !== 'number' && item !== '00' && item.length && item !== '.' && item !== '确定' ? "".concat(classPrefix, "-option") : item == '确定' ? "".concat(classPrefix, "-confirmKey") : "".concat(classPrefix, "-number-key"), item === 'X' && "".concat(classPrefix, "-delete")),
       onClick: function () {
         if (visible) {
           onKeyPress(item);

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"),
+      onTouchStart: 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"),
+      onTouchStart: 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"),
+      onTouchStart: 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"),
+      onTouchStart: 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;