@morjs/runtime-web/lib/components/src/form/button.js

mor runtime for web

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const lit_element_1 = require("lit-element");
const my_1 = require("../../../api/my");
const baseElement_1 = require("../baseElement");
const rpx_1 = require("../rpx");
const bool_converter_1 = tslib_1.__importDefault(require("../utils/bool-converter"));
class Button extends baseElement_1.BaseElement {
    constructor() {
        super(...arguments);
        this.enableHover = true;
        this.loading = false;
        this.onClicked = () => {
            if (this.getFormType()) {
                const form = this.getForm();
                if (form) {
                    switch (this.getFormType()) {
                        case 'submit': {
                            form.submit();
                            break;
                        }
                        case 'reset': {
                            form.reset();
                            break;
                        }
                    }
                }
            }
            if (this['open-type']) {
                switch (this['open-type']) {
                    case 'getAuthorize': {
                        // 调用 getAuthCode 。相当于检查登录态
                        my_1.my.getAuthCode({
                            success: () => {
                                this.dispatchEvent(new CustomEvent('getauthorize'));
                            },
                            fail: () => {
                                this.dispatchEvent(new CustomEvent('error', {
                                    detail: {}
                                }));
                            }
                        });
                        break;
                    }
                }
            }
        };
    }
    static get styles() {
        return (0, lit_element_1.css) `
      :host {
        display: block;
        box-sizing: border-box;
        padding: 0;
        text-align: center;
        font-size: ${(0, lit_element_1.unsafeCSS)((0, rpx_1.rpxToRem)(36))};
        height: ${(0, lit_element_1.unsafeCSS)((0, rpx_1.rpxToRem)(94))};
        line-height: ${(0, lit_element_1.unsafeCSS)((0, rpx_1.rpxToRem)(94))};
        border-radius: ${(0, lit_element_1.unsafeCSS)((0, rpx_1.rpxToRem)(4))};
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-word;
        white-space: nowrap;
        color: #000;
        background-color: #fff;
        border: 1px solid #eee;
      }

      :host([disabled='true']) {
        color: rgba(0, 0, 0, 0.6);
        background-color: rgba(255, 255, 255, 0.6);
      }

      :host([isHover='true']) {
        color: rgba(0, 0, 0, 0.3);
        background-color: #ddd;
      }

      /* primary */
      :host([type='primary']) {
        color: #fff;
        background-color: #108ee9;
        border-color: #108ee9;
      }

      :host([type='primary'][disabled='true']) {
        color: rgba(255, 255, 255, 0.6);
        background-color: #9fd2f6;
        border: 0;
      }

      :host([type='primary'][isHover='true']) {
        color: rgba(255, 255, 255, 0.3);
        background-color: #0b71ba;
      }

      /* ghost */
      :host([type='ghost']) {
        color: #108ee9;
        background-color: transparent;
        border-color: #108ee9;
      }
      :host([type='ghost'][disabled='true']) {
        color: #ccc;
        background-color: #ddd;
        border: 0;
      }

      :host([type='ghost'][isHover='true']) {
        color: #fff;
        background-color: #0b71ba;
      }

      /* warn */
      :host([type='warn']) {
        color: #fff;
        background-color: #e94f4f;
        border-color: #e94f4f;
      }
      :host([type='warn'][disabled='true']) {
        color: rgba(255, 255, 255, 0.6);
        background-color: rgba(233, 79, 79, 0.4);
        border-width: 0;
      }

      :host([type='warn'][isHover='true']) {
        color: rgba(255, 255, 255, 0.3);
        background-color: #ea3c3c;
      }

      /* size 相关 */
      :host([size='mini']) {
        display: inline-block;
        font-size: ${(0, lit_element_1.unsafeCSS)((0, rpx_1.rpxToRem)(28))};
        min-width: ${(0, lit_element_1.unsafeCSS)((0, rpx_1.rpxToRem)(96))};
        height: ${(0, lit_element_1.unsafeCSS)((0, rpx_1.rpxToRem)(52))};
        line-height: ${(0, lit_element_1.unsafeCSS)((0, rpx_1.rpxToRem)(48))};
        padding: 0 ${(0, lit_element_1.unsafeCSS)((0, rpx_1.rpxToRem)(8))};
      }

      /* loading 相关 */
      .loading {
        display: inline-block;
        width: 0.5em;
        height: 0.5em;
        color: inherit;
        pointer-events: none;
        border: 0.1em solid currentcolor;
        border-bottom-color: transparent;
        border-radius: 50%;
        -webkit-animation: 1s loading linear infinite;
        animation: 1s loading linear infinite;
      }
      @-webkit-keyframes loading {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }
      @keyframes loading {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }
    `;
    }
    getFormType() {
        return this['form-type'] || this.formtype;
    }
    connectedCallback() {
        super.connectedCallback();
        this.addEventListener('click', this.onClicked, false);
    }
    getForm() {
        const forms = document.querySelectorAll('tiga-form');
        for (const f of forms) {
            if (f.contains(this)) {
                return f;
            }
        }
        return null;
    }
    render() {
        return (0, lit_element_1.html) `
      ${this.loading ? (0, lit_element_1.html) `<div class="loading"></div>` : undefined}
      <slot></slot>
    `;
    }
}
tslib_1.__decorate([
    (0, lit_element_1.property)({ converter: bool_converter_1.default })
], Button.prototype, "loading", void 0);
tslib_1.__decorate([
    (0, lit_element_1.property)({ type: String })
], Button.prototype, 'form-type', void 0);
tslib_1.__decorate([
    (0, lit_element_1.property)({ type: String })
], Button.prototype, "formtype", void 0);
tslib_1.__decorate([
    (0, lit_element_1.property)({ type: String })
], Button.prototype, 'open-type', void 0);
exports.default = Button;
//# sourceMappingURL=button.js.map