@tarojs/taro-h5 3.4.0-beta.0 → 3.4.0

package/dist/api/ui/interaction/actionSheet.js

@@ -0,0 +1,188 @@
+import { inlineStyle, setTransform } from '../../utils';
+const noop = function () { };
+export default class ActionSheet {
+    constructor() {
+        this.options = {
+            itemList: [],
+            itemColor: '#000000',
+            success: noop,
+            fail: noop,
+            complete: noop
+        };
+        this.style = {
+            maskStyle: {
+                position: 'fixed',
+                'z-index': '1000',
+                top: '0',
+                right: '0',
+                left: '0',
+                bottom: '0',
+                background: 'rgba(0,0,0,0.6)'
+            },
+            actionSheetStyle: {
+                'z-index': '4999',
+                position: 'fixed',
+                left: '0',
+                bottom: '0',
+                '-webkit-transform': 'translate(0, 100%)',
+                transform: 'translate(0, 100%)',
+                width: '100%',
+                'line-height': '1.6',
+                background: '#EFEFF4',
+                '-webkit-transition': '-webkit-transform .3s',
+                transition: 'transform .3s'
+            },
+            menuStyle: {
+                'background-color': '#FCFCFD'
+            },
+            cellStyle: {
+                position: 'relative',
+                padding: '10px 0',
+                'text-align': 'center',
+                'font-size': '18px'
+            },
+            cancelStyle: {
+                'margin-top': '6px',
+                padding: '10px 0',
+                'text-align': 'center',
+                'font-size': '18px',
+                color: '#000000',
+                'background-color': '#FCFCFD'
+            }
+        };
+        this.lastConfig = {};
+    }
+    create(options = {}) {
+        return new Promise((resolve) => {
+            // style
+            const { maskStyle, actionSheetStyle, menuStyle, cellStyle, cancelStyle } = this.style;
+            // configuration
+            const config = {
+                ...this.options,
+                ...options
+            };
+            this.lastConfig = config;
+            // wrapper
+            this.el = document.createElement('div');
+            this.el.className = 'taro__actionSheet';
+            this.el.style.opacity = '0';
+            this.el.style.transition = 'opacity 0.2s linear';
+            // mask
+            const mask = document.createElement('div');
+            mask.setAttribute('style', inlineStyle(maskStyle));
+            // actionSheet
+            this.actionSheet = document.createElement('div');
+            this.actionSheet.setAttribute('style', inlineStyle(actionSheetStyle));
+            // menu
+            this.menu = document.createElement('div');
+            this.menu.setAttribute('style', inlineStyle({
+                ...menuStyle,
+                color: config.itemColor
+            }));
+            // cells
+            this.cells = config.itemList.map((item, index) => {
+                const cell = document.createElement('div');
+                cell.className = 'taro-actionsheet__cell';
+                cell.setAttribute('style', inlineStyle(cellStyle));
+                cell.textContent = item;
+                cell.dataset.tapIndex = `${index}`;
+                cell.onclick = e => {
+                    this.hide();
+                    const target = e.currentTarget;
+                    const index = Number(target === null || target === void 0 ? void 0 : target.dataset.tapIndex) || 0;
+                    resolve(index);
+                };
+                return cell;
+            });
+            // cancel
+            this.cancel = document.createElement('div');
+            this.cancel.setAttribute('style', inlineStyle(cancelStyle));
+            this.cancel.textContent = '取消';
+            // result
+            this.cells.forEach(item => this.menu.appendChild(item));
+            this.actionSheet.appendChild(this.menu);
+            this.actionSheet.appendChild(this.cancel);
+            this.el.appendChild(mask);
+            this.el.appendChild(this.actionSheet);
+            // callbacks
+            const cb = () => {
+                this.hide();
+                resolve('cancel');
+            };
+            mask.onclick = cb;
+            this.cancel.onclick = cb;
+            // show immediately
+            document.body.appendChild(this.el);
+            setTimeout(() => {
+                this.el.style.opacity = '1';
+                setTransform(this.actionSheet, 'translate(0, 0)');
+            }, 0);
+        });
+    }
+    show(options = {}) {
+        return new Promise((resolve) => {
+            const config = {
+                ...this.options,
+                ...options
+            };
+            this.lastConfig = config;
+            if (this.hideOpacityTimer)
+                clearTimeout(this.hideOpacityTimer);
+            if (this.hideDisplayTimer)
+                clearTimeout(this.hideDisplayTimer);
+            // itemColor
+            if (config.itemColor)
+                this.menu.style.color = config.itemColor;
+            // cells
+            const { cellStyle } = this.style;
+            config.itemList.forEach((item, index) => {
+                let cell;
+                if (this.cells[index]) {
+                    // assign new content
+                    cell = this.cells[index];
+                }
+                else {
+                    // create new cell
+                    cell = document.createElement('div');
+                    cell.className = 'taro-actionsheet__cell';
+                    cell.setAttribute('style', inlineStyle(cellStyle));
+                    cell.dataset.tapIndex = `${index}`;
+                    this.cells.push(cell);
+                    this.menu.appendChild(cell);
+                }
+                cell.textContent = item;
+                cell.onclick = e => {
+                    this.hide();
+                    const target = e.currentTarget;
+                    const index = Number(target === null || target === void 0 ? void 0 : target.dataset.tapIndex) || 0;
+                    resolve(index);
+                };
+            });
+            const cellsLen = this.cells.length;
+            const itemListLen = config.itemList.length;
+            if (cellsLen > itemListLen) {
+                for (let i = itemListLen; i < cellsLen; i++) {
+                    this.menu.removeChild(this.cells[i]);
+                }
+                this.cells.splice(itemListLen);
+            }
+            // show
+            this.el.style.display = 'block';
+            setTimeout(() => {
+                this.el.style.opacity = '1';
+                setTransform(this.actionSheet, 'translate(0, 0)');
+            }, 0);
+        });
+    }
+    hide() {
+        if (this.hideOpacityTimer)
+            clearTimeout(this.hideOpacityTimer);
+        if (this.hideDisplayTimer)
+            clearTimeout(this.hideDisplayTimer);
+        this.hideOpacityTimer = setTimeout(() => {
+            this.el.style.opacity = '0';
+            setTransform(this.actionSheet, 'translate(0, 100%)');
+            this.hideDisplayTimer = setTimeout(() => { this.el.style.display = 'none'; }, 200);
+        }, 0);
+    }
+}

package/dist/api/ui/interaction/index.js

@@ -0,0 +1,268 @@
+import Taro from '@tarojs/api';
+import { getParameterError, temporarilyNotSupport } from '../../utils';
+import { MethodHandler } from '../../utils/handler';
+import Toast from './toast';
+import Modal from './modal';
+import ActionSheet from './actionSheet';
+// 交互
+let status = 'default';
+// inject necessary style
+function init(doc) {
+    if (status === 'ready')
+        return;
+    const taroStyle = doc.createElement('style');
+    taroStyle.textContent = '@font-face{font-weight:normal;font-style:normal;font-family:"taro";src:url("data:application/x-font-ttf;charset=utf-8;base64, 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") format("truetype");}@-webkit-keyframes taroLoading{0%{-webkit-transform:rotate3d(0, 0, 1, 0deg);}100%{-webkit-transform:rotate3d(0, 0, 1, 360deg);transform:rotate3d(0, 0, 1, 360deg);}}@keyframes taroLoading{0%{-webkit-transform:rotate3d(0, 0, 1, 0deg);}100%{-webkit-transform:rotate3d(0, 0, 1, 360deg);transform:rotate3d(0, 0, 1, 360deg);}}.taro-modal__foot:after {content: "";position: absolute;left: 0;top: 0;right: 0;height: 1px;border-top: 1px solid #D5D5D6;color: #D5D5D6;-webkit-transform-origin: 0 0;transform-origin: 0 0;-webkit-transform: scaleY(0.5);transform: scaleY(0.5);} .taro-model__btn:active {background-color: #EEEEEE}.taro-model__btn:not(:first-child):after {content: "";position: absolute;left: 0;top: 0;width: 1px;bottom: 0;border-left: 1px solid #D5D5D6;color: #D5D5D6;-webkit-transform-origin: 0 0;transform-origin: 0 0;-webkit-transform: scaleX(0.5);transform: scaleX(0.5);}.taro-actionsheet__cell:not(:first-child):after {content: "";position: absolute;left: 0;top: 0;right: 0;height: 1px;border-top: 1px solid #e5e5e5;color: #e5e5e5;-webkit-transform-origin: 0 0;transform-origin: 0 0;-webkit-transform: scaleY(0.5);transform: scaleY(0.5);}';
+    doc.querySelector('head').appendChild(taroStyle);
+    status = 'ready';
+}
+const toast = new Toast();
+const modal = new Modal();
+const actionSheet = new ActionSheet();
+const showToast = (options = { title: '' }) => {
+    init(document);
+    options = Object.assign({
+        title: '',
+        icon: 'success',
+        image: '',
+        duration: 1500,
+        mask: false
+    }, options);
+    const { success, fail, complete } = options;
+    const handle = new MethodHandler({ name: 'showToast', success, fail, complete });
+    if (typeof options.title !== 'string') {
+        return handle.fail({
+            errMsg: getParameterError({
+                para: 'title',
+                correct: 'String',
+                wrong: options.title
+            })
+        });
+    }
+    if (typeof options.duration !== 'number') {
+        return handle.fail({
+            errMsg: getParameterError({
+                para: 'duration',
+                correct: 'Number',
+                wrong: options.duration
+            })
+        });
+    }
+    if (options.image && typeof options.image !== 'string')
+        options.image = '';
+    options.mask = !!options.mask;
+    let errMsg = '';
+    if (!toast.el) {
+        errMsg = toast.create(options, 'toast');
+    }
+    else {
+        errMsg = toast.show(options, 'toast');
+    }
+    return handle.success({ errMsg });
+};
+const hideToast = ({ success, fail, complete } = {}) => {
+    const handle = new MethodHandler({ name: 'hideToast', success, fail, complete });
+    if (!toast.el)
+        return handle.success();
+    toast.hide(0, 'toast');
+    return handle.success();
+};
+const showLoading = (options = { title: '' }) => {
+    init(document);
+    options = Object.assign({
+        title: '',
+        mask: false
+    }, options);
+    const { success, fail, complete } = options;
+    const handle = new MethodHandler({ name: 'showLoading', success, fail, complete });
+    const config = {
+        icon: 'loading',
+        image: '',
+        duration: -1
+    };
+    options = Object.assign({}, options, config);
+    if (typeof options.title !== 'string') {
+        return handle.fail({
+            errMsg: getParameterError({
+                para: 'title',
+                correct: 'String',
+                wrong: options.title
+            })
+        });
+    }
+    options.mask = !!options.mask;
+    let errMsg = '';
+    if (!toast.el) {
+        errMsg = toast.create(options, 'loading');
+    }
+    else {
+        errMsg = toast.show(options, 'loading');
+    }
+    return handle.success({ errMsg });
+};
+const hideLoading = ({ success, fail, complete } = {}) => {
+    const handle = new MethodHandler({ name: 'hideLoading', success, fail, complete });
+    if (!toast.el)
+        return handle.success();
+    toast.hide(0, 'loading');
+    return handle.success();
+};
+const showModal = async (options = {}) => {
+    init(document);
+    options = Object.assign({
+        title: '',
+        content: '',
+        showCancel: true,
+        cancelText: '取消',
+        cancelColor: '#000000',
+        confirmText: '确定',
+        confirmColor: '#3CC51F'
+    }, options);
+    const { success, fail, complete } = options;
+    const handle = new MethodHandler({ name: 'showModal', success, fail, complete });
+    if (typeof options.title !== 'string') {
+        return handle.fail({
+            errMsg: getParameterError({
+                para: 'title',
+                correct: 'String',
+                wrong: options.title
+            })
+        });
+    }
+    if (typeof options.content !== 'string') {
+        return handle.fail({
+            errMsg: getParameterError({
+                para: 'content',
+                correct: 'String',
+                wrong: options.content
+            })
+        });
+    }
+    if (typeof options.cancelText !== 'string') {
+        return handle.fail({
+            errMsg: getParameterError({
+                para: 'cancelText',
+                correct: 'String',
+                wrong: options.cancelText
+            })
+        });
+    }
+    if (options.cancelText.replace(/[\u0391-\uFFE5]/g, 'aa').length > 8) {
+        return handle.fail({
+            errMsg: 'cancelText length should not larger then 4 Chinese characters'
+        });
+    }
+    if (typeof options.confirmText !== 'string') {
+        return handle.fail({
+            errMsg: getParameterError({
+                para: 'confirmText',
+                correct: 'String',
+                wrong: options.confirmText
+            })
+        });
+    }
+    if (options.confirmText.replace(/[\u0391-\uFFE5]/g, 'aa').length > 8) {
+        return handle.fail({
+            errMsg: 'confirmText length should not larger then 4 Chinese characters'
+        });
+    }
+    if (typeof options.cancelColor !== 'string') {
+        return handle.fail({
+            errMsg: getParameterError({
+                para: 'cancelColor',
+                correct: 'String',
+                wrong: options.cancelColor
+            })
+        });
+    }
+    if (typeof options.confirmColor !== 'string') {
+        return handle.fail({
+            errMsg: getParameterError({
+                para: 'confirmColor',
+                correct: 'String',
+                wrong: options.confirmColor
+            })
+        });
+    }
+    options.showCancel = !!options.showCancel;
+    let result = '';
+    if (!modal.el) {
+        result = await modal.create(options);
+    }
+    else {
+        result = await modal.show(options);
+    }
+    const res = { cancel: !1, confirm: !1 };
+    res[result] = !0;
+    return handle.success(res);
+};
+function hideModal() {
+    if (!modal.el)
+        return;
+    modal.hide();
+}
+const showActionSheet = async (options = { itemList: [] }) => {
+    init(document);
+    options = Object.assign({
+        itemColor: '#000000',
+        itemList: []
+    }, options);
+    const { success, fail, complete } = options;
+    const handle = new MethodHandler({ name: 'showActionSheet', success, fail, complete });
+    // list item String
+    if (!Array.isArray(options.itemList)) {
+        return handle.fail({
+            errMsg: getParameterError({
+                para: 'itemList',
+                correct: 'Array',
+                wrong: options.itemList
+            })
+        });
+    }
+    if (options.itemList.length < 1) {
+        return handle.fail({ errMsg: 'parameter error: parameter.itemList should have at least 1 item' });
+    }
+    if (options.itemList.length > 6) {
+        return handle.fail({ errMsg: 'parameter error: parameter.itemList should not be large than 6' });
+    }
+    for (let i = 0; i < options.itemList.length; i++) {
+        if (typeof options.itemList[i] !== 'string') {
+            return handle.fail({
+                errMsg: getParameterError({
+                    para: `itemList[${i}]`,
+                    correct: 'String',
+                    wrong: options.itemList[i]
+                })
+            });
+        }
+    }
+    if (typeof options.itemColor !== 'string') {
+        return handle.fail({
+            errMsg: getParameterError({
+                para: 'itemColor',
+                correct: 'String',
+                wrong: options.itemColor
+            })
+        });
+    }
+    let result = '';
+    if (!actionSheet.el) {
+        result = await actionSheet.create(options);
+    }
+    else {
+        result = await actionSheet.show(options);
+    }
+    if (typeof result === 'string') {
+        return handle.fail(({ errMsg: result }));
+    }
+    else {
+        return handle.success(({ tapIndex: result }));
+    }
+};
+Taro.eventCenter.on('__taroRouterChange', () => {
+    hideToast();
+    hideLoading();
+    hideModal();
+});
+const enableAlertBeforeUnload = temporarilyNotSupport('enableAlertBeforeUnload');
+const disableAlertBeforeUnload = temporarilyNotSupport('disableAlertBeforeUnload');
+export { showToast, showModal, showLoading, showActionSheet, hideToast, hideLoading, enableAlertBeforeUnload, disableAlertBeforeUnload };

package/dist/api/ui/interaction/modal.js

@@ -0,0 +1,207 @@
+import { inlineStyle } from '../../utils';
+export default class Modal {
+    constructor() {
+        this.options = {
+            title: '',
+            content: '',
+            showCancel: true,
+            cancelText: '取消',
+            cancelColor: '#000000',
+            confirmText: '确定',
+            confirmColor: '#3CC51F'
+        };
+        this.style = {
+            maskStyle: {
+                position: 'fixed',
+                'z-index': '1000',
+                top: '0',
+                right: '0',
+                left: '0',
+                bottom: '0',
+                background: 'rgba(0,0,0,0.6)'
+            },
+            modalStyle: {
+                'z-index': '4999',
+                position: 'fixed',
+                top: '50%',
+                left: '50%',
+                transform: 'translate(-50%, -50%)',
+                width: '80%',
+                'max-width': '300px',
+                'border-radius': '3px',
+                'text-align': 'center',
+                'line-height': '1.6',
+                overflow: 'hidden',
+                background: '#FFFFFF'
+            },
+            titleStyle: {
+                padding: '20px 24px 9px',
+                'font-size': '18px'
+            },
+            textStyle: {
+                padding: '0 24px 12px',
+                'min-height': '40px',
+                'font-size': '15px',
+                'line-height': '1.3',
+                color: '#808080'
+            },
+            footStyle: {
+                position: 'relative',
+                'line-height': '48px',
+                'font-size': '18px',
+                display: 'flex'
+            },
+            btnStyle: {
+                position: 'relative',
+                '-webkit-box-flex': '1',
+                '-webkit-flex': '1',
+                flex: '1'
+            }
+        };
+    }
+    create(options = {}) {
+        return new Promise((resolve) => {
+            // style
+            const { maskStyle, modalStyle, titleStyle, textStyle, footStyle, btnStyle } = this.style;
+            // configuration
+            const config = {
+                ...this.options,
+                ...options
+            };
+            // wrapper
+            this.el = document.createElement('div');
+            this.el.className = 'taro__modal';
+            this.el.style.opacity = '0';
+            this.el.style.transition = 'opacity 0.2s linear';
+            // mask
+            const mask = document.createElement('div');
+            mask.className = 'taro-modal__mask';
+            mask.setAttribute('style', inlineStyle(maskStyle));
+            // modal
+            const modal = document.createElement('div');
+            modal.className = 'taro-modal__content';
+            modal.setAttribute('style', inlineStyle(modalStyle));
+            // title
+            const titleCSS = config.title ? titleStyle : {
+                ...titleStyle,
+                display: 'none'
+            };
+            this.title = document.createElement('div');
+            this.title.className = 'taro-modal__title';
+            this.title.setAttribute('style', inlineStyle(titleCSS));
+            this.title.textContent = config.title;
+            // text
+            const textCSS = config.title ? textStyle : {
+                ...textStyle,
+                padding: '40px 20px 26px',
+                color: '#353535'
+            };
+            this.text = document.createElement('div');
+            this.text.className = 'taro-modal__text';
+            this.text.setAttribute('style', inlineStyle(textCSS));
+            this.text.textContent = config.content;
+            // foot
+            const foot = document.createElement('div');
+            foot.className = 'taro-modal__foot';
+            foot.setAttribute('style', inlineStyle(footStyle));
+            // cancel button
+            const cancelCSS = {
+                ...btnStyle,
+                color: config.cancelColor,
+                display: config.showCancel ? 'block' : 'none'
+            };
+            this.cancel = document.createElement('div');
+            this.cancel.className = 'taro-model__btn taro-model__cancel';
+            this.cancel.setAttribute('style', inlineStyle(cancelCSS));
+            this.cancel.textContent = config.cancelText;
+            this.cancel.onclick = () => {
+                this.hide();
+                resolve('cancel');
+            };
+            // confirm button
+            this.confirm = document.createElement('div');
+            this.confirm.className = 'taro-model__btn taro-model__confirm';
+            this.confirm.setAttribute('style', inlineStyle(btnStyle));
+            this.confirm.style.color = config.confirmColor;
+            this.confirm.textContent = config.confirmText;
+            this.confirm.onclick = () => {
+                this.hide();
+                resolve('confirm');
+            };
+            // result
+            foot.appendChild(this.cancel);
+            foot.appendChild(this.confirm);
+            modal.appendChild(this.title);
+            modal.appendChild(this.text);
+            modal.appendChild(foot);
+            this.el.appendChild(mask);
+            this.el.appendChild(modal);
+            // show immediately
+            document.body.appendChild(this.el);
+            setTimeout(() => { this.el.style.opacity = '1'; }, 0);
+        });
+    }
+    show(options = {}) {
+        return new Promise((resolve) => {
+            const config = {
+                ...this.options,
+                ...options
+            };
+            if (this.hideOpacityTimer)
+                clearTimeout(this.hideOpacityTimer);
+            if (this.hideDisplayTimer)
+                clearTimeout(this.hideDisplayTimer);
+            // title & text
+            const { textStyle } = this.style;
+            if (config.title) {
+                this.title.textContent = config.title;
+                // none => block
+                this.title.style.display = 'block';
+                this.text.setAttribute('style', inlineStyle(textStyle));
+            }
+            else {
+                // block => none
+                this.title.style.display = 'none';
+                const textCSS = {
+                    ...textStyle,
+                    padding: '40px 20px 26px',
+                    color: '#353535'
+                };
+                this.text.setAttribute('style', inlineStyle(textCSS));
+            }
+            this.text.textContent = config.content || '';
+            // showCancel
+            this.cancel.style.display = config.showCancel ? 'block' : 'none';
+            // cancelText
+            this.cancel.textContent = config.cancelText || '';
+            // cancelColor
+            this.cancel.style.color = config.cancelColor || '';
+            // confirmText
+            this.confirm.textContent = config.confirmText || '';
+            // confirmColor
+            this.confirm.style.color = config.confirmColor || '';
+            // cbs
+            this.cancel.onclick = () => {
+                this.hide();
+                resolve('cancel');
+            };
+            this.confirm.onclick = () => {
+                this.hide();
+                resolve('confirm');
+            };
+            // show
+            this.el.style.display = 'block';
+            setTimeout(() => { this.el.style.opacity = '1'; }, 0);
+        });
+    }
+    hide() {
+        if (this.hideOpacityTimer)
+            clearTimeout(this.hideOpacityTimer);
+        if (this.hideDisplayTimer)
+            clearTimeout(this.hideDisplayTimer);
+        this.hideOpacityTimer = setTimeout(() => {
+            this.el.style.opacity = '0';
+            this.hideDisplayTimer = setTimeout(() => { this.el.style.display = 'none'; }, 200);
+        }, 0);
+    }
+}