123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136 |
- 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();
- },
- });
|