doodle-mini/miniprogram/toy/button-v2/button.ts

Component({
    options: {
        styleIsolation: 'apply-shared',
        addGlobalClass: true,
    },
    properties: {
        type: {
            type: String,
            value: 'default',
        },
        openType: {
            type: String,
            value: '',
        },
        plain: {
            type: Boolean,
            value: false,
        },
        size: {
            type: String,
            value: 'normal',
        },
        disabled: {
            type: Boolean,
            value: false,
        },
        flat: {
            type: Boolean,
            value: false,
        },
        loading: {
            type: Boolean,
            value: false,
        },
        style: {
            type: String,
            value: '',
        },
        width: {
            type: String,
            value: '',
        },
        height: {
            type: String,
            value: '',
        },
        loadingType: {
            type: String,
            value: 'circular',
        },
        loadingSize: {
            type: String,
            value: '20px',
        },
        loadingColor: {
            type: String,
            value: '#ffffff',
        },
        icon: {
            type: String,
            value: '',
        },
        iconClassPrefix: {
            type: String,
            value: 'toy-icon',
        },
        iconSize: {
            type: String,
            value: '44rpx',
        },
        iconColor: {
            type: String,
            value: '#ffffff',
        },
        sessionFrom: {
            type: String,
            value: '',
        },
        sendMessageTitle: {
            type: String,
            value: '',
        },
        sendMessagePath: {
            type: String,
            value: '',
        },
        sendMessageImg: {
            type: String,
            value: '',
        },
        showMessageCard: {
            type: Boolean,
            value: false,
        },
        appParameter: {
            type: String,
            value: '',
        },
        ariaLabel: {
            type: String,
            value: '',
        },
    },
    data: {
        pressed: false,
        rootClassName: '',
        rootStyle: '',
        resolvedIconColor: '#ffffff',
        resolvedLoadingColor: '#ffffff',
        resolvedIconSize: '44rpx',
        resolvedLoadingSize: '20px',
    },
    observers: {
        'type,plain,size,disabled,flat,loading,style,width,height,iconColor,iconSize,loadingColor,loadingSize,pressed':
            function () {
                this.syncViewState();
            },
    },
    lifetimes: {
        attached() {
            this.syncViewState();
        },
    },
    methods: {
        syncViewState() {
            const {
                type,
                plain,
                size,
                disabled,
                flat,
                loading,
                style,
                width,
                height,
                iconColor,
                iconSize,
                loadingColor,
                loadingSize,
                pressed,
            } = this.data;

            const classNames = ['toy-button', `toy-button--${type}`, `toy-button--${size}`];
            if (flat) {
                classNames.push('toy-button--flat');
            }
            if (plain) {
                classNames.push('plain');
            }
            if (disabled) {
                classNames.push('disabled');
            }
            if (loading) {
                classNames.push('loading');
            }
            if (pressed && !disabled && !loading) {
                classNames.push('active');
            }

            const styleSegments = [style];
            const normalizedWidth = this.normalizeUnit(width);
            const normalizedHeight = this.normalizeUnit(height);
            if (normalizedWidth) {
                styleSegments.push(`width:${normalizedWidth}`);
            }
            if (normalizedHeight) {
                styleSegments.push(`height:${normalizedHeight}`);
            }

            const resolvedIconColor = this.getResolvedIconColor(
                iconColor,
                type,
                plain,
                disabled,
            );
            const resolvedLoadingColor = loadingColor || resolvedIconColor;

            this.setData({
                rootClassName: classNames.join(' '),
                rootStyle: styleSegments.filter(Boolean).join(';'),
                resolvedIconColor,
                resolvedLoadingColor,
                resolvedIconSize: this.normalizeUnit(iconSize) || '44rpx',
                resolvedLoadingSize: this.normalizeUnit(loadingSize) || '20px',
            });
        },
        normalizeUnit(value: string) {
            if (!value) {
                return '';
            }
            return /^\d+(\.\d+)?$/.test(value) ? `${value}rpx` : value;
        },
        getResolvedIconColor(
            iconColor: string,
            type: string,
            plain: boolean,
            disabled: boolean,
        ) {
            if (disabled) {
                return '#b8b2a6';
            }
            if (type === 'primary') {
                return '#6c5a00';
            }
            if (type === 'white' && !plain) {
                return '#322e25';
            }
            return iconColor || '#ffffff';
        },
        onTouchStart() {
            if (this.data.disabled || this.data.loading) {
                return;
            }
            this.setData({ pressed: true });
        },
        onTouchEnd() {
            if (!this.data.pressed) {
                return;
            }
            this.setData({ pressed: false });
        },
        onTouchCancel() {
            if (!this.data.pressed) {
                return;
            }
            this.setData({ pressed: false });
        },
        onClick(e: WechatMiniprogram.TouchEvent): void {
            this.triggerEvent('click', e);
        },
        onGetUserInfo(e: WechatMiniprogram.CustomEvent) {
            this.triggerEvent('getuserinfo', e.detail);
        },
        onContact(e: WechatMiniprogram.CustomEvent) {
            this.triggerEvent('contact', e.detail);
        },
        onGetPhoneNumber(e: WechatMiniprogram.CustomEvent) {
            this.triggerEvent('getphonenumber', e.detail);
        },
        onGetRealTimePhoneNumber(e: WechatMiniprogram.CustomEvent) {
            this.triggerEvent('getrealtimephonenumber', e.detail);
        },
        onAgreePrivacyAuthorization(e: WechatMiniprogram.CustomEvent) {
            this.triggerEvent('agreeprivacyauthorization', e.detail);
        },
        onError(e: WechatMiniprogram.CustomEvent) {
            this.triggerEvent('error', e.detail);
        },
        onLaunchApp(e: WechatMiniprogram.CustomEvent) {
            this.triggerEvent('launchapp', e.detail);
        },
        onOpenSetting(e: WechatMiniprogram.CustomEvent) {
            this.triggerEvent('opensetting', e.detail);
        },
        onChooseAvatar(e: WechatMiniprogram.CustomEvent) {
            this.triggerEvent('chooseavatar', e.detail);
        },
    },
    externalClasses: ['custom-class'],
});