zhsw_wechat/miniprogram_npm/tdesign-miniprogram/guide/guide.js

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
import isFunction from 'lodash/isFunction';
import { SuperComponent, wxComponent } from '../common/src/index';
import props from './props';
import config from '../common/config';
import { systemInfo, debounce, getRect, isNumber, rpx2px, styles, unitConvert, nextTick } from '../common/utils';
const { prefix } = config;
const name = `${prefix}-guide`;
let Guide = class Guide extends SuperComponent {
    constructor() {
        super(...arguments);
        this.externalClasses = [
            `${prefix}-class`,
            `${prefix}-class-reference`,
            `${prefix}-class-popover`,
            `${prefix}-class-tooltip`,
            `${prefix}-class-title`,
            `${prefix}-class-body`,
            `${prefix}-class-footer`,
            `${prefix}-class-skip`,
            `${prefix}-class-next`,
            `${prefix}-class-back`,
            `${prefix}-class-finish`,
        ];
        this.properties = props;
        this.options = {
            pureDataPattern: /^_/,
            multipleSlots: true,
        };
        this.data = {
            prefix,
            classPrefix: name,
            visible: false,
            _current: -1,
            _steps: [],
            buttonProps: {},
            referenceStyle: '',
            popoverStyle: '',
            title: '',
            body: '',
            nonOverlay: false,
            modeType: '',
        };
        this.controlledProps = [
            {
                key: 'current',
                event: 'change',
            },
        ];
        this.observers = {
            'steps, current, showOverlay'() {
                return __awaiter(this, void 0, void 0, function* () {
                    this._init();
                });
            },
        };
        this.lifetimes = {
            created() {
                this._init = debounce(() => this.init(), 20);
                this._getPlacement = this.getPlacement();
            },
            attached() {
                this._init();
            },
        };
        this.methods = {
            init() {
                var _a, _b, _c, _d, _e, _f, _g;
                return __awaiter(this, void 0, void 0, function* () {
                    const { steps, current } = this.properties;
                    const { _steps, _current } = this.data;
                    const step = steps[current];
                    if (!step) {
                        return this.setData({ visible: false });
                    }
                    const modeType = ((_a = step.mode) !== null && _a !== void 0 ? _a : this.data.mode) === 'dialog' ? 'dialog' : 'popover';
                    const showOverlay = (_b = step.showOverlay) !== null && _b !== void 0 ? _b : this.data.showOverlay;
                    this.setData({ nonOverlay: !showOverlay, modeType });
                    if (steps === _steps && current === _current)
                        return;
                    if (modeType === 'popover') {
                        const rect = yield step.element();
                        if (!rect)
                            return;
                        const highlightPadding = rpx2px((_c = step.highlightPadding) !== null && _c !== void 0 ? _c : this.data.highlightPadding);
                        const referenceTop = rect.top - highlightPadding;
                        const referenceRight = systemInfo.windowWidth - rect.right - highlightPadding;
                        const referenceBottom = systemInfo.windowHeight - rect.bottom - highlightPadding;
                        const referenceLeft = rect.left - highlightPadding;
                        const style = {
                            top: `${referenceTop}px`,
                            right: `${referenceRight}px`,
                            bottom: `${referenceBottom}px`,
                            left: `${referenceLeft}px`,
                        };
                        this.setData({
                            _steps: this.data.steps,
                            _current: this.data.current,
                            visible: true,
                            referenceStyle: styles(style),
                            title: (_d = step.title) !== null && _d !== void 0 ? _d : '',
                            body: (_e = step.body) !== null && _e !== void 0 ? _e : '',
                            buttonProps: this.buttonProps(step, 'popover'),
                        });
                        const popoverStyle = yield this.placementOffset(step, style);
                        this.setData({ popoverStyle });
                    }
                    else {
                        this.setData({
                            _steps: this.data.steps,
                            _current: this.data.current,
                            visible: true,
                            title: (_f = step.title) !== null && _f !== void 0 ? _f : '',
                            body: (_g = step.body) !== null && _g !== void 0 ? _g : '',
                            buttonProps: this.buttonProps(step, 'dialog'),
                        });
                    }
                });
            },
            placementOffset({ placement, offset }, place) {
                var _a, _b;
                return __awaiter(this, void 0, void 0, function* () {
                    yield nextTick();
                    const rect = yield getRect(this, `.${name}__container`);
                    const style = (_b = (_a = this._getPlacement)[placement]) === null || _b === void 0 ? void 0 : _b.call(_a, rect, place, offset);
                    return styles(Object.assign({ position: 'absolute' }, style));
                });
            },
            buttonProps(step, mode) {
                var _a, _b, _c, _d;
                let skipButton = (_a = step.skipButtonProps) !== null && _a !== void 0 ? _a : this.data.skipButtonProps;
                const size = mode === 'popover' ? 'extra-small' : 'medium';
                skipButton = Object.assign(Object.assign({ theme: 'light', content: '跳过', size }, skipButton), { tClass: `${prefix}-class-skip ${name}__button ${(skipButton === null || skipButton === void 0 ? void 0 : skipButton.class) || ''}`, type: 'skip' });
                let nextButton = (_b = step.nextButtonProps) !== null && _b !== void 0 ? _b : this.data.nextButtonProps;
                nextButton = Object.assign(Object.assign({ theme: 'primary', content: '下一步', size }, nextButton), { tClass: `${prefix}-class-next ${name}__button ${(nextButton === null || nextButton === void 0 ? void 0 : nextButton.class) || ''}`, type: 'next' });
                nextButton = Object.assign(Object.assign({}, nextButton), { content: this.buttonContent(nextButton) });
                let backButton = (_c = step.backButtonProps) !== null && _c !== void 0 ? _c : this.data.backButtonProps;
                backButton = Object.assign(Object.assign({ theme: 'light', content: '返回', size }, backButton), { tClass: `${prefix}-class-back ${name}__button ${(backButton === null || backButton === void 0 ? void 0 : backButton.class) || ''}`, type: 'back' });
                let finishButton = (_d = step.finishButtonProps) !== null && _d !== void 0 ? _d : this.data.finishButtonProps;
                finishButton = Object.assign(Object.assign({ theme: 'primary', content: '完成', size }, finishButton), { tClass: `${prefix}-class-finish ${name}__button ${(finishButton === null || finishButton === void 0 ? void 0 : finishButton.class) || ''}`, type: 'finish' });
                finishButton = Object.assign(Object.assign({}, finishButton), { content: this.buttonContent(finishButton) });
                return {
                    skipButton,
                    nextButton,
                    backButton,
                    finishButton,
                };
            },
            renderCounter() {
                const { steps, current, counter } = this.data;
                const stepsTotal = steps.length;
                const innerCurrent = current + 1;
                const popupSlotCounter = isFunction(counter) ? counter({ total: stepsTotal, current: innerCurrent }) : counter;
                return counter ? popupSlotCounter : `(${innerCurrent}/${stepsTotal})`;
            },
            buttonContent(button) {
                const { hideCounter } = this.data;
                return `${button.content.replace(/ \(.*?\)/, '')} ${hideCounter ? '' : this.renderCounter()}`;
            },
            onTplButtonTap(e) {
                const { type } = e.target.dataset;
                const parmas = { e, current: this.data.current, total: this.data.steps.length };
                switch (type) {
                    case 'next':
                        this.triggerEvent('next-step-click', Object.assign({ next: this.data.current + 1 }, parmas));
                        this.setData({ current: this.data.current + 1 });
                        break;
                    case 'skip':
                        this.triggerEvent('skip', parmas);
                        this.setData({ current: -1 });
                        break;
                    case 'back':
                        this.triggerEvent('back', parmas);
                        this.setData({ current: 0 });
                        break;
                    case 'finish':
                        this.triggerEvent('finish', parmas);
                        this.setData({ current: -1 });
                        break;
                    default:
                        break;
                }
                this.triggerEvent('change', { current: this.data.current });
            },
            getPlacement() {
                const space = rpx2px(32);
                const offsetLeft = (offset) => unitConvert(isNumber(offset === null || offset === void 0 ? void 0 : offset[0]) ? `${offset === null || offset === void 0 ? void 0 : offset[0]}rpx` : (offset === null || offset === void 0 ? void 0 : offset[0]) || 0);
                const offsetTop = (offset) => unitConvert(isNumber(offset === null || offset === void 0 ? void 0 : offset[1]) ? `${offset === null || offset === void 0 ? void 0 : offset[1]}rpx` : (offset === null || offset === void 0 ? void 0 : offset[1]) || 0);
                const bottom = (place) => parseFloat(place.bottom);
                const left = (place) => parseFloat(place.left);
                const right = (place) => parseFloat(place.right);
                const top = (place) => parseFloat(place.top);
                const height = (place) => systemInfo.windowHeight - bottom(place) - top(place);
                const width = (place) => systemInfo.windowWidth - left(place) - right(place);
                return {
                    center: (rect, place, offset) => ({
                        top: `${Math.max(height(place) + top(place) + space + offsetTop(offset), 1)}px`,
                        left: `${Math.max(width(place) / 2 + left(place) - rect.width / 2 + offsetLeft(offset), 1)}px`,
                    }),
                    bottom: (rect, place, offset) => ({
                        top: `${Math.max(height(place) + top(place) + space + offsetTop(offset), 1)}px`,
                        left: `${Math.max(width(place) / 2 + left(place) - rect.width / 2 + offsetLeft(offset), 1)}px`,
                    }),
                    'bottom-left': (rect, place, offset) => ({
                        top: `${Math.max(height(place) + top(place) + space + offsetTop(offset), 1)}px`,
                        left: `${Math.max(left(place) + offsetLeft(offset), 1)}px`,
                    }),
                    'bottom-right': (rect, place, offset) => ({
                        top: `${Math.max(height(place) + top(place) + space + offsetTop(offset), 1)}px`,
                        right: `${Math.max(right(place) - offsetLeft(offset), 1)}px`,
                    }),
                    left: (rect, place, offset) => ({
                        top: `${Math.max(height(place) / 2 + top(place) - rect.height / 2 + offsetTop(offset), 1)}px`,
                        right: `${Math.max(width(place) + right(place) + space - offsetLeft(offset), 1)}px`,
                    }),
                    'left-top': (rect, place, offset) => ({
                        top: `${Math.max(top(place) + offsetTop(offset), 1)}px`,
                        right: `${Math.max(width(place) + right(place) + space - offsetLeft(offset), 1)}px`,
                    }),
                    'left-bottom': (rect, place, offset) => ({
                        bottom: `${Math.max(bottom(place) - offsetTop(offset), 1)}px`,
                        right: `${Math.max(width(place) + right(place) + space - offsetLeft(offset), 1)}px`,
                    }),
                    right: (rect, place, offset) => ({
                        top: `${Math.max(height(place) / 2 + top(place) - rect.height / 2 + offsetTop(offset), 1)}px`,
                        left: `${Math.max(left(place) + width(place) + space + offsetLeft(offset), 1)}px`,
                    }),
                    'right-top': (rect, place, offset) => ({
                        top: `${Math.max(top(place) + offsetTop(offset), 1)}px`,
                        left: `${Math.max(left(place) + width(place) + space + offsetLeft(offset), 1)}px`,
                    }),
                    'right-bottom': (rect, place, offset) => ({
                        bottom: `${Math.max(bottom(place) - offsetTop(offset), 1)}px`,
                        left: `${Math.max(left(place) + width(place) + space + offsetLeft(offset), 1)}px`,
                    }),
                    top: (rect, place, offset) => ({
                        bottom: `${Math.max(height(place) + bottom(place) + space - offsetTop(offset), 1)}px`,
                        left: `${Math.max(width(place) / 2 + left(place) - rect.width / 2 + offsetLeft(offset), 1)}px`,
                    }),
                    'top-left': (rect, place, offset) => ({
                        bottom: `${Math.max(height(place) + bottom(place) + space - offsetTop(offset), 1)}px`,
                        left: `${Math.max(left(place) + offsetLeft(offset), 1)}px`,
                    }),
                    'top-right': (rect, place, offset) => ({
                        bottom: `${Math.max(height(place) + bottom(place) + space - offsetTop(offset), 1)}px`,
                        right: `${Math.max(right(place) - offsetLeft(offset), 1)}px`,
                    }),
                };
            },
        };
    }
};
Guide = __decorate([
    wxComponent()
], Guide);
export default Guide;