123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121 |
- import { __assign, __spreadArray } from "tslib";
- import { PINYIN_MAP } from './constants';
- import { RareWordsKeyboardProps } from './props';
- import { formatZDatas, loadFontFace, matchWordsRecommend } from './utils';
- import { ZDATAS } from './zdatas';
- import '../_util/assert-component2';
- var wordsData = formatZDatas(ZDATAS.datas);
- Component({
- props: RareWordsKeyboardProps,
- data: {
- loading: false,
- inputValue: [],
- displayStr: '',
- matchWordsList: [],
- showMoreWords: false,
- pinyinMaps: PINYIN_MAP,
- maxDisplayNum: 0,
- showErrorPage: false, // 是否展示错误页
- },
- didMount: function () {
- this.loadFont();
- this.computeMaxDisplayNum();
- },
- methods: {
- // 隐藏键盘,失去焦点
- onHide: function () {
- this.setData({
- inputValue: [],
- matchWordsList: [],
- displayStr: '',
- showMoreWords: false,
- });
- if (this.props.onClose)
- this.props.onClose();
- },
- // 点击键盘key值
- handleKeyClick: function (e) {
- if (this.data.loading)
- return;
- var _a = e.target.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.onHide();
- return;
- }
- this.setData({
- showMoreWords: !this.data.showMoreWords,
- });
- },
- // 计算每行可以展示的最大字数
- computeMaxDisplayNum: function () {
- var _this = this;
- my.createSelectorQuery()
- .select('.ant-rare-words-keyboard-match_words_hidden')
- .boundingClientRect()
- .select('.ant-rare-words-keyboard-match_words_inner')
- .boundingClientRect()
- .exec(function (res) {
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- var _a = res, 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;
- var 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 });
- });
- },
- // 加载字体
- 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 });
- if (_this.props.onError)
- _this.props.onError(err);
- });
- },
- // 点击重试
- handleRetry: function () {
- this.loadFont();
- },
- handleWordClick: function (e) {
- var _a = e.target.dataset.value, value = _a === void 0 ? '' : _a;
- if (!value)
- return;
- if (this.props.onChange)
- this.props.onChange(value);
- this.onHide();
- },
- },
- });
|