@ebscn/ui 1.0.1 → 1.0.2-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/assets/images/keybord_keybord.png +0 -0
  2. package/assets/images/keybord_shift.png +0 -0
  3. package/cjs/assets/images/keybord_keybord.png +0 -0
  4. package/cjs/assets/images/keybord_shift.png +0 -0
  5. package/cjs/components/alphabet-keyboard/alphabet-keyboard.css +42 -56
  6. package/cjs/components/alphabet-keyboard/alphabet-keyboard.js +7 -8
  7. package/es/assets/images/keybord_keybord.png +0 -0
  8. package/es/assets/images/keybord_shift.png +0 -0
  9. package/es/components/alphabet-keyboard/alphabet-keyboard.css +42 -56
  10. package/es/components/alphabet-keyboard/alphabet-keyboard.js +7 -8
  11. package/package.json +1 -1
package/assets/images/keybord_shift.png ADDED
Binary file
package/cjs/components/alphabet-keyboard/alphabet-keyboard.css CHANGED
@@ -9,6 +9,47 @@
9
9
  align-content: flex-start;
10
10
  background: #d2d5db;
11
11
  }
12
+ .ebscn-alphabet-keyboard-darkkey {
13
+ display: flex;
14
+ align-items: center;
15
+ justify-content: center;
16
+ width: 11.2%;
17
+ height: 42px;
18
+ border-radius: 5px;
19
+ box-shadow: 0px 0.5px 0px 0px #888888;
20
+ background: #adb3bd;
21
+ font-size: var(--ebscn-font-size-9);
22
+ }
23
+ .ebscn-alphabet-keyboard-darkkey:active {
24
+ background: #adb3bd;
25
+ }
26
+ .ebscn-alphabet-keyboard-shift {
27
+ margin-right: 3.73%;
28
+ background: url(../../assets/images/keybord_shift.png) #adb3bd no-repeat center;
29
+ background-size: 24px 24px;
30
+ }
31
+ .ebscn-alphabet-keyboard-delete {
32
+ margin-left: 2.26%;
33
+ background: url(../../assets/images/delete.png) #adb3bd no-repeat center;
34
+ background-size: 24px 24px;
35
+ }
36
+ .ebscn-alphabet-keyboard-keybord {
37
+ background: url(../../assets/images/keybord_keybord.png) #adb3bd no-repeat center;
38
+ background-size: 24px 24px;
39
+ }
40
+ .ebscn-alphabet-keyboard-space {
41
+ display: flex;
42
+ align-items: center;
43
+ justify-content: center;
44
+ width: 48.4%;
45
+ height: 42px;
46
+ background: var(--ebscn-color-white);
47
+ border-radius: 5px;
48
+ box-shadow: 0px 0.5px 0px 0px #888888;
49
+ }
50
+ .ebscn-alphabet-keyboard-space:active {
51
+ background: var(--ebscn-color-border);
52
+ }
12
53
  .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firstline,
13
54
  .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-secondline,
14
55
  .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-thirdline,
@@ -54,66 +95,11 @@
54
95
  padding-left: 0.8%;
55
96
  padding-right: 0.8%;
56
97
  }
57
- .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-thirdline-capital {
58
- display: flex;
59
- align-items: center;
60
- justify-content: center;
61
- width: 11.2%;
62
- height: 42px;
63
- background: #adb3bd;
64
- border-radius: 5px;
65
- box-shadow: 0px 0.5px 0px 0px #888888;
66
- margin-right: 3.73%;
67
- }
68
- .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-thirdline-capital:active {
69
- background: #CACBD0;
70
- }
71
- .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-thirdline-delete {
72
- display: flex;
73
- align-items: center;
74
- justify-content: center;
75
- width: 11.2%;
76
- height: 42px;
77
- border-radius: 5px;
78
- box-shadow: 0px 0.5px 0px 0px #888888;
79
- margin-left: 2.26%;
80
- background: url(../../assets/images/delete.png) #adb3bd no-repeat center;
81
- background-size: 24px 24px;
82
- }
83
- .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-thirdline-delete:active {
84
- background: #CACBD0;
85
- }
86
98
  .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firthline {
87
99
  padding-left: 0.8%;
88
100
  padding-right: 0.8%;
89
101
  padding-bottom: 1.06%;
90
102
  }
91
- .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firthline-function {
92
- display: flex;
93
- align-items: center;
94
- justify-content: center;
95
- width: 11.2%;
96
- height: 42px;
97
- background: #adb3bd;
98
- border-radius: 5px;
99
- box-shadow: 0px 0.5px 0px 0px #888888;
100
- }
101
- .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firthline-function:active {
102
- background: #CACBD0;
103
- }
104
- .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firthline-space {
105
- display: flex;
106
- align-items: center;
107
- justify-content: center;
108
- width: 48.4%;
109
- height: 42px;
110
- background: var(--ebscn-color-white);
111
- border-radius: 5px;
112
- box-shadow: 0px 0.5px 0px 0px #888888;
113
- }
114
- .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firthline-space:active {
115
- background: var(--ebscn-color-border);
116
- }
117
103
  .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firthline-confirm {
118
104
  display: flex;
119
105
  align-items: center;
@@ -136,7 +122,7 @@
136
122
  height: 20%;
137
123
  }
138
124
  @supports (bottom: env(safe-area-inset-bottom)) or (constant(safe-area-inset-bottom)) {
139
- .keyboard {
125
+ .ebscn-alphabet-keyboard {
140
126
  height: calc(216px + env(safe-area-inset-bottom));
141
127
  height: calc(216px + constant(safe-area-inset-bottom));
142
128
  }
package/cjs/components/alphabet-keyboard/alphabet-keyboard.js CHANGED
@@ -35,7 +35,7 @@ function AlphabetKeyboard(p) {
35
35
  var appearTimer = (0, _react.useRef)(null);
36
36
  var hideTimer = (0, _react.useRef)(null);
37
37
  var lastVisible = (0, _react.useRef)(null);
38
- var keyFlag = (0, _react.useRef)(0);
38
+ var imgKeys = ['×', '↑', '⌨'];
39
39
  (0, _react.useEffect)(function () {
40
40
  if (!visible) {
41
41
  if (lastVisible.current) {
@@ -76,6 +76,8 @@ function AlphabetKeyboard(p) {
76
76
  return onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
77
77
  case '空格':
78
78
  return onInput === null || onInput === void 0 ? void 0 : onInput(' ');
79
+ case '↑':
80
+ return setIsBIG(!isBig);
79
81
  default:
80
82
  return onInput === null || onInput === void 0 ? void 0 : onInput(key);
81
83
  }
@@ -112,28 +114,25 @@ function AlphabetKeyboard(p) {
112
114
  }, (isBig == false ? thirdKeys : thirdKeysBig).map(function (item, index) {
113
115
  return _react.default.createElement("div", {
114
116
  key: item || index,
115
- className: item == '↑' ? "".concat(classPrefix, "-thirdline-capital") : item == '×' ? "".concat(classPrefix, "-thirdline-delete") : "".concat(classPrefix, "-thirdline-key"),
117
+ className: item == '↑' ? "".concat(classPrefix, "-darkkey ").concat(classPrefix, "-shift") : item == '×' ? "".concat(classPrefix, "-darkkey ").concat(classPrefix, "-delete") : "".concat(classPrefix, "-thirdline-key"),
116
118
  onClick: function () {
117
119
  if (visible) {
118
120
  onKeyPress(item);
119
121
  }
120
122
  ;
121
- if (item == '↑') {
122
- isBig == false ? setIsBIG(true) : setIsBIG(false);
123
- }
124
123
  }
125
- }, item !== '×' ? item : '');
124
+ }, imgKeys.includes(item) ? '' : item);
126
125
  })), _react.default.createElement("div", {
127
126
  className: "".concat(classPrefix, "-firthline")
128
127
  }, firthKeys.map(function (item, index) {
129
128
  return _react.default.createElement("div", {
130
129
  key: item || index,
131
- className: item == '123' || item == '⌨' ? "".concat(classPrefix, "-firthline-function") : item == '空格' ? "".concat(classPrefix, "-firthline-space") : "".concat(classPrefix, "-firthline-confirm"),
130
+ className: item == '123' ? "".concat(classPrefix, "-darkkey") : item == '⌨' ? " ".concat(classPrefix, "-darkkey ").concat(classPrefix, "-keybord") : item == '空格' ? "".concat(classPrefix, "-space") : "".concat(classPrefix, "-firthline-confirm"),
132
131
  onClick: function () {
133
132
  if (visible) {
134
133
  onKeyPress(item);
135
134
  }
136
135
  }
137
- }, item);
136
+ }, imgKeys.includes(item) ? '' : item);
138
137
  }))));
139
138
  }
package/es/components/alphabet-keyboard/alphabet-keyboard.css CHANGED
@@ -9,6 +9,47 @@
9
9
  align-content: flex-start;
10
10
  background: #d2d5db;
11
11
  }
12
+ .ebscn-alphabet-keyboard-darkkey {
13
+ display: flex;
14
+ align-items: center;
15
+ justify-content: center;
16
+ width: 11.2%;
17
+ height: 42px;
18
+ border-radius: 5px;
19
+ box-shadow: 0px 0.5px 0px 0px #888888;
20
+ background: #adb3bd;
21
+ font-size: var(--ebscn-font-size-9);
22
+ }
23
+ .ebscn-alphabet-keyboard-darkkey:active {
24
+ background: #adb3bd;
25
+ }
26
+ .ebscn-alphabet-keyboard-shift {
27
+ margin-right: 3.73%;
28
+ background: url(../../assets/images/keybord_shift.png) #adb3bd no-repeat center;
29
+ background-size: 24px 24px;
30
+ }
31
+ .ebscn-alphabet-keyboard-delete {
32
+ margin-left: 2.26%;
33
+ background: url(../../assets/images/delete.png) #adb3bd no-repeat center;
34
+ background-size: 24px 24px;
35
+ }
36
+ .ebscn-alphabet-keyboard-keybord {
37
+ background: url(../../assets/images/keybord_keybord.png) #adb3bd no-repeat center;
38
+ background-size: 24px 24px;
39
+ }
40
+ .ebscn-alphabet-keyboard-space {
41
+ display: flex;
42
+ align-items: center;
43
+ justify-content: center;
44
+ width: 48.4%;
45
+ height: 42px;
46
+ background: var(--ebscn-color-white);
47
+ border-radius: 5px;
48
+ box-shadow: 0px 0.5px 0px 0px #888888;
49
+ }
50
+ .ebscn-alphabet-keyboard-space:active {
51
+ background: var(--ebscn-color-border);
52
+ }
12
53
  .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firstline,
13
54
  .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-secondline,
14
55
  .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-thirdline,
@@ -54,66 +95,11 @@
54
95
  padding-left: 0.8%;
55
96
  padding-right: 0.8%;
56
97
  }
57
- .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-thirdline-capital {
58
- display: flex;
59
- align-items: center;
60
- justify-content: center;
61
- width: 11.2%;
62
- height: 42px;
63
- background: #adb3bd;
64
- border-radius: 5px;
65
- box-shadow: 0px 0.5px 0px 0px #888888;
66
- margin-right: 3.73%;
67
- }
68
- .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-thirdline-capital:active {
69
- background: #CACBD0;
70
- }
71
- .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-thirdline-delete {
72
- display: flex;
73
- align-items: center;
74
- justify-content: center;
75
- width: 11.2%;
76
- height: 42px;
77
- border-radius: 5px;
78
- box-shadow: 0px 0.5px 0px 0px #888888;
79
- margin-left: 2.26%;
80
- background: url(../../assets/images/delete.png) #adb3bd no-repeat center;
81
- background-size: 24px 24px;
82
- }
83
- .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-thirdline-delete:active {
84
- background: #CACBD0;
85
- }
86
98
  .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firthline {
87
99
  padding-left: 0.8%;
88
100
  padding-right: 0.8%;
89
101
  padding-bottom: 1.06%;
90
102
  }
91
- .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firthline-function {
92
- display: flex;
93
- align-items: center;
94
- justify-content: center;
95
- width: 11.2%;
96
- height: 42px;
97
- background: #adb3bd;
98
- border-radius: 5px;
99
- box-shadow: 0px 0.5px 0px 0px #888888;
100
- }
101
- .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firthline-function:active {
102
- background: #CACBD0;
103
- }
104
- .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firthline-space {
105
- display: flex;
106
- align-items: center;
107
- justify-content: center;
108
- width: 48.4%;
109
- height: 42px;
110
- background: var(--ebscn-color-white);
111
- border-radius: 5px;
112
- box-shadow: 0px 0.5px 0px 0px #888888;
113
- }
114
- .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firthline-space:active {
115
- background: var(--ebscn-color-border);
116
- }
117
103
  .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firthline-confirm {
118
104
  display: flex;
119
105
  align-items: center;
@@ -136,7 +122,7 @@
136
122
  height: 20%;
137
123
  }
138
124
  @supports (bottom: env(safe-area-inset-bottom)) or (constant(safe-area-inset-bottom)) {
139
- .keyboard {
125
+ .ebscn-alphabet-keyboard {
140
126
  height: calc(216px + env(safe-area-inset-bottom));
141
127
  height: calc(216px + constant(safe-area-inset-bottom));
142
128
  }
package/es/components/alphabet-keyboard/alphabet-keyboard.js CHANGED
@@ -28,7 +28,7 @@ export function AlphabetKeyboard(p) {
28
28
  var appearTimer = useRef(null);
29
29
  var hideTimer = useRef(null);
30
30
  var lastVisible = useRef(null);
31
- var keyFlag = useRef(0);
31
+ var imgKeys = ['×', '↑', '⌨'];
32
32
  useEffect(function () {
33
33
  if (!visible) {
34
34
  if (lastVisible.current) {
@@ -69,6 +69,8 @@ export function AlphabetKeyboard(p) {
69
69
  return onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
70
70
  case '空格':
71
71
  return onInput === null || onInput === void 0 ? void 0 : onInput(' ');
72
+ case '↑':
73
+ return setIsBIG(!isBig);
72
74
  default:
73
75
  return onInput === null || onInput === void 0 ? void 0 : onInput(key);
74
76
  }
@@ -105,28 +107,25 @@ export function AlphabetKeyboard(p) {
105
107
  }, (isBig == false ? thirdKeys : thirdKeysBig).map(function (item, index) {
106
108
  return React.createElement("div", {
107
109
  key: item || index,
108
- className: item == '↑' ? "".concat(classPrefix, "-thirdline-capital") : item == '×' ? "".concat(classPrefix, "-thirdline-delete") : "".concat(classPrefix, "-thirdline-key"),
110
+ className: item == '↑' ? "".concat(classPrefix, "-darkkey ").concat(classPrefix, "-shift") : item == '×' ? "".concat(classPrefix, "-darkkey ").concat(classPrefix, "-delete") : "".concat(classPrefix, "-thirdline-key"),
109
111
  onClick: function () {
110
112
  if (visible) {
111
113
  onKeyPress(item);
112
114
  }
113
115
  ;
114
- if (item == '↑') {
115
- isBig == false ? setIsBIG(true) : setIsBIG(false);
116
- }
117
116
  }
118
- }, item !== '×' ? item : '');
117
+ }, imgKeys.includes(item) ? '' : item);
119
118
  })), React.createElement("div", {
120
119
  className: "".concat(classPrefix, "-firthline")
121
120
  }, firthKeys.map(function (item, index) {
122
121
  return React.createElement("div", {
123
122
  key: item || index,
124
- className: item == '123' || item == '⌨' ? "".concat(classPrefix, "-firthline-function") : item == '空格' ? "".concat(classPrefix, "-firthline-space") : "".concat(classPrefix, "-firthline-confirm"),
123
+ className: item == '123' ? "".concat(classPrefix, "-darkkey") : item == '⌨' ? " ".concat(classPrefix, "-darkkey ").concat(classPrefix, "-keybord") : item == '空格' ? "".concat(classPrefix, "-space") : "".concat(classPrefix, "-firthline-confirm"),
125
124
  onClick: function () {
126
125
  if (visible) {
127
126
  onKeyPress(item);
128
127
  }
129
128
  }
130
- }, item);
129
+ }, imgKeys.includes(item) ? '' : item);
131
130
  }))));
132
131
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ebscn/ui",
3
- "version": "1.0.1",
3
+ "version": "1.0.2-beta.1",
4
4
  "description": "ebscn react library",
5
5
  "module": "./es/index.js",
6
6
  "types": "./es/index.d.ts",