@ebscn/ui 1.0.2-beta.0 → 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 +5 -5
  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 +5 -5
  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) {
@@ -114,25 +114,25 @@ function AlphabetKeyboard(p) {
114
114
  }, (isBig == false ? thirdKeys : thirdKeysBig).map(function (item, index) {
115
115
  return _react.default.createElement("div", {
116
116
  key: item || index,
117
- 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"),
118
118
  onClick: function () {
119
119
  if (visible) {
120
120
  onKeyPress(item);
121
121
  }
122
122
  ;
123
123
  }
124
- }, item !== '×' ? item : '');
124
+ }, imgKeys.includes(item) ? '' : item);
125
125
  })), _react.default.createElement("div", {
126
126
  className: "".concat(classPrefix, "-firthline")
127
127
  }, firthKeys.map(function (item, index) {
128
128
  return _react.default.createElement("div", {
129
129
  key: item || index,
130
- 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"),
131
131
  onClick: function () {
132
132
  if (visible) {
133
133
  onKeyPress(item);
134
134
  }
135
135
  }
136
- }, item);
136
+ }, imgKeys.includes(item) ? '' : item);
137
137
  }))));
138
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) {
@@ -107,25 +107,25 @@ export function AlphabetKeyboard(p) {
107
107
  }, (isBig == false ? thirdKeys : thirdKeysBig).map(function (item, index) {
108
108
  return React.createElement("div", {
109
109
  key: item || index,
110
- 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"),
111
111
  onClick: function () {
112
112
  if (visible) {
113
113
  onKeyPress(item);
114
114
  }
115
115
  ;
116
116
  }
117
- }, item !== '×' ? item : '');
117
+ }, imgKeys.includes(item) ? '' : item);
118
118
  })), React.createElement("div", {
119
119
  className: "".concat(classPrefix, "-firthline")
120
120
  }, firthKeys.map(function (item, index) {
121
121
  return React.createElement("div", {
122
122
  key: item || index,
123
- 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"),
124
124
  onClick: function () {
125
125
  if (visible) {
126
126
  onKeyPress(item);
127
127
  }
128
128
  }
129
- }, item);
129
+ }, imgKeys.includes(item) ? '' : item);
130
130
  }))));
131
131
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ebscn/ui",
3
- "version": "1.0.2-beta.0",
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",