index.js 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. import { __assign, __awaiter, __generator, __spreadArray } from "tslib";
  2. import { Component, triggerEvent, triggerEventOnly } from '../_util/simply';
  3. import { PINYIN_MAP } from './constants';
  4. import { RareWordsKeyboardProps } from './props';
  5. import { formatZDatas, loadFontFace, matchWordsRecommend } from './utils';
  6. import { ZDATAS } from './zdatas';
  7. import { getInstanceBoundingClientRect } from '../_util/jsapi/get-instance-bounding-client-rect';
  8. var wordsData = formatZDatas(ZDATAS.datas);
  9. Component(RareWordsKeyboardProps, {
  10. getInstance: function () {
  11. if (this.$id) {
  12. return my;
  13. }
  14. return this;
  15. },
  16. getBoundingClientRect: function (query) {
  17. return __awaiter(this, void 0, void 0, function () {
  18. return __generator(this, function (_a) {
  19. switch (_a.label) {
  20. case 0: return [4 /*yield*/, getInstanceBoundingClientRect(this.getInstance(), query)];
  21. case 1: return [2 /*return*/, _a.sent()];
  22. }
  23. });
  24. });
  25. },
  26. // 隐藏键盘,失去焦点
  27. handleHide: function () {
  28. this.setData({
  29. inputValue: [],
  30. matchWordsList: [],
  31. displayStr: '',
  32. showMoreWords: false,
  33. });
  34. triggerEventOnly(this, 'close');
  35. },
  36. // 点击键盘key值
  37. handleKeyClick: function (e) {
  38. if (this.data.loading)
  39. return;
  40. var _a = e.currentTarget.dataset.value, value = _a === void 0 ? '' : _a;
  41. if (!value)
  42. return;
  43. var inputValue = __spreadArray(__spreadArray([], this.data.inputValue, true), [value], false);
  44. this.setData(__assign({ inputValue: __spreadArray([], inputValue, true) }, this.computeMatchWords(inputValue)));
  45. },
  46. // 点击删除
  47. handleDelete: function () {
  48. var inputValue = __spreadArray([], this.data.inputValue, true);
  49. if (this.data.inputValue.length === 0)
  50. return;
  51. inputValue.pop();
  52. this.setData(__assign({ inputValue: __spreadArray([], inputValue, true) }, this.computeMatchWords(inputValue)));
  53. },
  54. // 计算展示值和候选字列表
  55. computeMatchWords: function (inputValue) {
  56. var displayStr = Array.isArray(inputValue)
  57. ? inputValue.join('')
  58. : inputValue;
  59. var curMatchWords = matchWordsRecommend(wordsData, displayStr);
  60. return {
  61. displayStr: displayStr,
  62. matchWordsList: curMatchWords,
  63. };
  64. },
  65. // 点击查看更多
  66. hanleLookMore: function () {
  67. if (this.data.matchWordsList.length <= this.data.maxDisplayNum) {
  68. this.handleHide();
  69. return;
  70. }
  71. this.setData({
  72. showMoreWords: !this.data.showMoreWords,
  73. });
  74. },
  75. // 计算每行可以展示的最大字数
  76. computeMaxDisplayNum: function () {
  77. return __awaiter(this, void 0, void 0, function () {
  78. var _a, singleWords, wordsWrap, maxDisplayNumInOneLine;
  79. return __generator(this, function (_b) {
  80. switch (_b.label) {
  81. case 0: return [4 /*yield*/, Promise.all([
  82. this.getBoundingClientRect('.ant-rare-words-keyboard-match_words_hidden'),
  83. this.getBoundingClientRect('.ant-rare-words-keyboard-match_words_inner'),
  84. ])];
  85. case 1:
  86. _a = _b.sent(), singleWords = _a[0], wordsWrap = _a[1];
  87. if (!(wordsWrap === null || wordsWrap === void 0 ? void 0 : wordsWrap.width) || !(singleWords === null || singleWords === void 0 ? void 0 : singleWords.width))
  88. return [2 /*return*/];
  89. maxDisplayNumInOneLine = parseInt(((wordsWrap === null || wordsWrap === void 0 ? void 0 : wordsWrap.width) / (singleWords === null || singleWords === void 0 ? void 0 : singleWords.width)).toString(), 10);
  90. this.setData({ maxDisplayNum: maxDisplayNumInOneLine });
  91. return [2 /*return*/];
  92. }
  93. });
  94. });
  95. },
  96. // 加载字体
  97. loadFont: function () {
  98. var _this = this;
  99. this.setData({
  100. loading: true,
  101. });
  102. loadFontFace()
  103. .then(function () {
  104. _this.setData({ showErrorPage: false, loading: false });
  105. })
  106. .catch(function (err) {
  107. _this.setData({ showErrorPage: true, loading: false });
  108. triggerEvent(_this, 'error', err);
  109. });
  110. },
  111. // 点击重试
  112. handleRetry: function () {
  113. this.loadFont();
  114. },
  115. handleWordClick: function (e) {
  116. var _a = e.currentTarget.dataset.value, value = _a === void 0 ? '' : _a;
  117. if (!value)
  118. return;
  119. triggerEvent(this, 'change', value);
  120. this.handleHide();
  121. },
  122. }, {
  123. loading: false,
  124. inputValue: [],
  125. displayStr: '',
  126. matchWordsList: [],
  127. showMoreWords: false,
  128. pinyinMaps: PINYIN_MAP,
  129. maxDisplayNum: 0,
  130. showErrorPage: false, // 是否展示错误页
  131. }, null, {
  132. didMount: function () {
  133. this.loadFont();
  134. this.computeMaxDisplayNum();
  135. },
  136. });