index.js 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. import { __assign, __spreadArray } from "tslib";
  2. import { PINYIN_MAP } from './constants';
  3. import { RareWordsKeyboardProps } from './props';
  4. import { formatZDatas, loadFontFace, matchWordsRecommend } from './utils';
  5. import { ZDATAS } from './zdatas';
  6. import '../_util/assert-component2';
  7. var wordsData = formatZDatas(ZDATAS.datas);
  8. Component({
  9. props: RareWordsKeyboardProps,
  10. data: {
  11. loading: false,
  12. inputValue: [],
  13. displayStr: '',
  14. matchWordsList: [],
  15. showMoreWords: false,
  16. pinyinMaps: PINYIN_MAP,
  17. maxDisplayNum: 0,
  18. showErrorPage: false, // 是否展示错误页
  19. },
  20. didMount: function () {
  21. this.loadFont();
  22. this.computeMaxDisplayNum();
  23. },
  24. methods: {
  25. // 隐藏键盘,失去焦点
  26. onHide: function () {
  27. this.setData({
  28. inputValue: [],
  29. matchWordsList: [],
  30. displayStr: '',
  31. showMoreWords: false,
  32. });
  33. if (this.props.onClose)
  34. this.props.onClose();
  35. },
  36. // 点击键盘key值
  37. handleKeyClick: function (e) {
  38. if (this.data.loading)
  39. return;
  40. var _a = e.target.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.onHide();
  69. return;
  70. }
  71. this.setData({
  72. showMoreWords: !this.data.showMoreWords,
  73. });
  74. },
  75. // 计算每行可以展示的最大字数
  76. computeMaxDisplayNum: function () {
  77. var _this = this;
  78. my.createSelectorQuery()
  79. .select('.ant-rare-words-keyboard-match_words_hidden')
  80. .boundingClientRect()
  81. .select('.ant-rare-words-keyboard-match_words_inner')
  82. .boundingClientRect()
  83. .exec(function (res) {
  84. // eslint-disable-next-line @typescript-eslint/no-explicit-any
  85. var _a = res, singleWords = _a[0], wordsWrap = _a[1];
  86. if (!(wordsWrap === null || wordsWrap === void 0 ? void 0 : wordsWrap.width) || !(singleWords === null || singleWords === void 0 ? void 0 : singleWords.width))
  87. return;
  88. var maxDisplayNumInOneLine = parseInt(((wordsWrap === null || wordsWrap === void 0 ? void 0 : wordsWrap.width) / (singleWords === null || singleWords === void 0 ? void 0 : singleWords.width)).toString(), 10);
  89. _this.setData({ maxDisplayNum: maxDisplayNumInOneLine });
  90. });
  91. },
  92. // 加载字体
  93. loadFont: function () {
  94. var _this = this;
  95. this.setData({
  96. loading: true,
  97. });
  98. loadFontFace()
  99. .then(function () {
  100. _this.setData({ showErrorPage: false, loading: false });
  101. })
  102. .catch(function (err) {
  103. _this.setData({ showErrorPage: true, loading: false });
  104. if (_this.props.onError)
  105. _this.props.onError(err);
  106. });
  107. },
  108. // 点击重试
  109. handleRetry: function () {
  110. this.loadFont();
  111. },
  112. handleWordClick: function (e) {
  113. var _a = e.target.dataset.value, value = _a === void 0 ? '' : _a;
  114. if (!value)
  115. return;
  116. if (this.props.onChange)
  117. this.props.onChange(value);
  118. this.onHide();
  119. },
  120. },
  121. });