137 lines
5.1 KiB
JavaScript
137 lines
5.1 KiB
JavaScript
|
import { __assign, __awaiter, __generator, __spreadArray } from "tslib";
|
||
|
|
import { Component, triggerEvent, triggerEventOnly } from '../_util/simply';
|
||
|
|
import { PINYIN_MAP } from './constants';
|
||
|
|
import { RareWordsKeyboardProps } from './props';
|
||
|
|
import { formatZDatas, loadFontFace, matchWordsRecommend } from './utils';
|
||
|
|
import { ZDATAS } from './zdatas';
|
||
|
|
import { getInstanceBoundingClientRect } from '../_util/jsapi/get-instance-bounding-client-rect';
|
||
|
|
var wordsData = formatZDatas(ZDATAS.datas);
|
||
|
|
Component(RareWordsKeyboardProps, {
|
||
|
|
getInstance: function () {
|
||
|
|
if (this.$id) {
|
||
|
|
return my;
|
||
|
|
}
|
||
|
|
return this;
|
||
|
|
},
|
||
|
|
getBoundingClientRect: function (query) {
|
||
|
|
return __awaiter(this, void 0, void 0, function () {
|
||
|
|
return __generator(this, function (_a) {
|
||
|
|
switch (_a.label) {
|
||
|
|
case 0: return [4 /*yield*/, getInstanceBoundingClientRect(this.getInstance(), query)];
|
||
|
|
case 1: return [2 /*return*/, _a.sent()];
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
},
|
||
|
|
// 隐藏键盘，失去焦点
|
||
|
|
handleHide: function () {
|
||
|
|
this.setData({
|
||
|
|
inputValue: [],
|
||
|
|
matchWordsList: [],
|
||
|
|
displayStr: '',
|
||
|
|
showMoreWords: false,
|
||
|
|
});
|
||
|
|
triggerEventOnly(this, 'close');
|
||
|
|
},
|
||
|
|
// 点击键盘key值
|
||
|
|
handleKeyClick: function (e) {
|
||
|
|
if (this.data.loading)
|
||
|
|
return;
|
||
|
|
var _a = e.currentTarget.dataset.value, value = _a === void 0 ? '' : _a;
|
||
|
|
if (!value)
|
||
|
|
return;
|
||
|
|
var inputValue = __spreadArray(__spreadArray([], this.data.inputValue, true), [value], false);
|
||
|
|
this.setData(__assign({ inputValue: __spreadArray([], inputValue, true) }, this.computeMatchWords(inputValue)));
|
||
|
|
},
|
||
|
|
// 点击删除
|
||
|
|
handleDelete: function () {
|
||
|
|
var inputValue = __spreadArray([], this.data.inputValue, true);
|
||
|
|
if (this.data.inputValue.length === 0)
|
||
|
|
return;
|
||
|
|
inputValue.pop();
|
||
|
|
this.setData(__assign({ inputValue: __spreadArray([], inputValue, true) }, this.computeMatchWords(inputValue)));
|
||
|
|
},
|
||
|
|
// 计算展示值和候选字列表
|
||
|
|
computeMatchWords: function (inputValue) {
|
||
|
|
var displayStr = Array.isArray(inputValue)
|
||
|
|
? inputValue.join('')
|
||
|
|
: inputValue;
|
||
|
|
var curMatchWords = matchWordsRecommend(wordsData, displayStr);
|
||
|
|
return {
|
||
|
|
displayStr: displayStr,
|
||
|
|
matchWordsList: curMatchWords,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
// 点击查看更多
|
||
|
|
hanleLookMore: function () {
|
||
|
|
if (this.data.matchWordsList.length <= this.data.maxDisplayNum) {
|
||
|
|
this.handleHide();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.setData({
|
||
|
|
showMoreWords: !this.data.showMoreWords,
|
||
|
|
});
|
||
|
|
},
|
||
|
|
// 计算每行可以展示的最大字数
|
||
|
|
computeMaxDisplayNum: function () {
|
||
|
|
return __awaiter(this, void 0, void 0, function () {
|
||
|
|
var _a, singleWords, wordsWrap, maxDisplayNumInOneLine;
|
||
|
|
return __generator(this, function (_b) {
|
||
|
|
switch (_b.label) {
|
||
|
|
case 0: return [4 /*yield*/, Promise.all([
|
||
|
|
this.getBoundingClientRect('.ant-rare-words-keyboard-match_words_hidden'),
|
||
|
|
this.getBoundingClientRect('.ant-rare-words-keyboard-match_words_inner'),
|
||
|
|
])];
|
||
|
|
case 1:
|
||
|
|
_a = _b.sent(), singleWords = _a[0], wordsWrap = _a[1];
|
||
|
|
if (!(wordsWrap === null || wordsWrap === void 0 ? void 0 : wordsWrap.width) || !(singleWords === null || singleWords === void 0 ? void 0 : singleWords.width))
|
||
|
|
return [2 /*return*/];
|
||
|
|
maxDisplayNumInOneLine = parseInt(((wordsWrap === null || wordsWrap === void 0 ? void 0 : wordsWrap.width) / (singleWords === null || singleWords === void 0 ? void 0 : singleWords.width)).toString(), 10);
|
||
|
|
this.setData({ maxDisplayNum: maxDisplayNumInOneLine });
|
||
|
|
return [2 /*return*/];
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
},
|
||
|
|
// 加载字体
|
||
|
|
loadFont: function () {
|
||
|
|
var _this = this;
|
||
|
|
this.setData({
|
||
|
|
loading: true,
|
||
|
|
});
|
||
|
|
loadFontFace()
|
||
|
|
.then(function () {
|
||
|
|
_this.setData({ showErrorPage: false, loading: false });
|
||
|
|
})
|
||
|
|
.catch(function (err) {
|
||
|
|
_this.setData({ showErrorPage: true, loading: false });
|
||
|
|
triggerEvent(_this, 'error', err);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
// 点击重试
|
||
|
|
handleRetry: function () {
|
||
|
|
this.loadFont();
|
||
|
|
},
|
||
|
|
handleWordClick: function (e) {
|
||
|
|
var _a = e.currentTarget.dataset.value, value = _a === void 0 ? '' : _a;
|
||
|
|
if (!value)
|
||
|
|
return;
|
||
|
|
triggerEvent(this, 'change', value);
|
||
|
|
this.handleHide();
|
||
|
|
},
|
||
|
|
}, {
|
||
|
|
loading: false,
|
||
|
|
inputValue: [],
|
||
|
|
displayStr: '',
|
||
|
|
matchWordsList: [],
|
||
|
|
showMoreWords: false,
|
||
|
|
pinyinMaps: PINYIN_MAP,
|
||
|
|
maxDisplayNum: 0,
|
||
|
|
showErrorPage: false, // 是否展示错误页
|
||
|
|
}, null, {
|
||
|
|
didMount: function () {
|
||
|
|
this.loadFont();
|
||
|
|
this.computeMaxDisplayNum();
|
||
|
|
},
|
||
|
|
});
|