@tarojs/taro-h5 3.4.0-beta.2 → 3.4.2

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

@@ -0,0 +1,288 @@
+/**
+ * H5 下的 styleSheet 操作
+ * @author leeenx
+ */
+class StyleSheet {
+    constructor() {
+        this.$style = null;
+        this.sheet = null;
+        this.appendStyleSheet = () => {
+            if (this.$style) {
+                const head = document.getElementsByTagName('head')[0];
+                this.$style.setAttribute('type', 'text/css');
+                this.$style.setAttribute('data-type', 'Taro');
+                head.appendChild(this.$style);
+                this.sheet = this.$style.sheet;
+            }
+            if (this.sheet && !('insertRule' in this.sheet)) {
+                console.warn('当前浏览器不支持 stylesheet.insertRule 接口');
+            }
+        };
+        // 添加样式命令
+        this.add = (cssText, index = 0) => {
+            var _a;
+            if (this.sheet === null) {
+                // $style 未插入到 DOM
+                this.appendStyleSheet();
+            }
+            (_a = this.sheet) === null || _a === void 0 ? void 0 : _a.insertRule(cssText, index);
+        };
+        this.$style = document.createElement('style');
+    }
+}
+const styleSheet = new StyleSheet();
+// 监听事件
+let TRANSITION_END = 'transitionend';
+let TRANSFORM = 'transform';
+const $detect = document.createElement('div');
+$detect.style.cssText = '-webkit-animation-name:webkit;-moz-animation-name:moz;-ms-animation-name:ms;animation-name:standard;';
+if ($detect.style['animation-name'] === 'standard') {
+    // 支持标准写法
+    TRANSITION_END = 'transitionend';
+    TRANSFORM = 'transform';
+}
+else if ($detect.style['-webkit-animation-name'] === 'webkit') {
+    // webkit 前缀
+    TRANSITION_END = 'webkitTransitionEnd';
+    TRANSFORM = '-webkit-transform';
+}
+else if ($detect.style['-moz-animation-name'] === 'moz') {
+    // moz 前缀
+    TRANSITION_END = 'mozTransitionEnd';
+    TRANSFORM = '-moz-transform';
+}
+else if ($detect.style['-ms-animation-name'] === 'ms') {
+    // ms 前缀
+    TRANSITION_END = 'msTransitionEnd';
+    TRANSFORM = '-ms-transform';
+}
+let animId = 0;
+class Animation {
+    constructor({ duration = 400, delay = 0, timingFunction = 'linear', transformOrigin = '50% 50% 0', unit = 'px' } = {}) {
+        // 属性组合
+        this.rules = [];
+        // transform 对象
+        this.transform = [`${TRANSFORM}:`];
+        // 组合动画
+        this.steps = [];
+        // 动画 map ----- 永久保留
+        this.animationMap = {};
+        // animationMap 的长度
+        this.animationMapCount = 0;
+        // 默认值
+        this.setDefault(duration, delay, timingFunction, transformOrigin);
+        this.unit = unit;
+        // atom 环境下，animation 属性不会显示，所以要改成 data-animation
+        let animAttr = 'animation';
+        // 动画 id
+        this.id = ++animId;
+        // 监听事件
+        document.body.addEventListener(TRANSITION_END, (e) => {
+            const target = e.target;
+            if (target.getAttribute(animAttr) === null) {
+                animAttr = 'data-animation';
+            }
+            const animData = target.getAttribute(animAttr);
+            // 没有动画存在
+            if (animData === null)
+                return;
+            const [animName, animPath] = animData.split('__');
+            if (animName === `taro-h5-poly-fill/${this.id}/create-animation`) {
+                const [animIndex, __stepIndex = 0] = animPath.split('--');
+                const stepIndex = Number(__stepIndex);
+                // 动画总的关键帧
+                const animStepsCount = this.animationMap[`${animName}__${animIndex}`];
+                const animStepsMaxIndex = animStepsCount - 1;
+                if (stepIndex < animStepsMaxIndex) {
+                    // 播放下一个关键帧（因为 nerv 和 react 有差异所以 animation & data-animation 都需要写）
+                    target.setAttribute(animAttr, `${animName}__${animIndex}--${stepIndex + 1}`);
+                    if (animAttr === 'animation') {
+                        // Nerv 环境，animation & data-animation 双重保险
+                        target.setAttribute('data-animation', `${animName}__${animIndex}--${stepIndex + 1}`);
+                    }
+                }
+            }
+        });
+    }
+    transformUnit(...args) {
+        const ret = [];
+        args.forEach(each => {
+            ret.push(isNaN(each) ? each : `${each}${this.unit}`);
+        });
+        return ret;
+    }
+    // 设置默认值
+    setDefault(duration, delay, timingFunction, transformOrigin) {
+        this.DEFAULT = { duration, delay, timingFunction, transformOrigin };
+    }
+    matrix(a, b, c, d, tx, ty) {
+        this.transform.push(`matrix(${a}, ${b}, ${c}, ${d}, ${tx}, ${ty})`);
+        return this;
+    }
+    matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) {
+        this.transform.push(`matrix3d(${a1}, ${b1}, ${c1}, ${d1}, ${a2}, ${b2}, ${c2}, ${d2}, ${a3}, ${b3}, ${c3}, ${d3}, ${a4}, ${b4}, ${c4}, ${d4})`);
+        return this;
+    }
+    rotate(angle) {
+        this.transform.push(`rotate(${angle}deg)`);
+        return this;
+    }
+    rotate3d(x, y, z, angle) {
+        if (typeof y !== 'number') {
+            this.transform.push(`rotate3d(${x})`);
+        }
+        else {
+            this.transform.push(`rotate3d(${x}, ${y || 0}, ${z || 0}, ${angle || 0}deg)`);
+        }
+        return this;
+    }
+    rotateX(angle) {
+        this.transform.push(`rotateX(${angle}deg)`);
+        return this;
+    }
+    rotateY(angle) {
+        this.transform.push(`rotateY(${angle}deg)`);
+        return this;
+    }
+    rotateZ(angle) {
+        this.transform.push(`rotateZ(${angle}deg)`);
+        return this;
+    }
+    scale(x, y) {
+        this.transform.push(`scale(${x}, ${y})`);
+        return this;
+    }
+    scale3d(x, y, z) {
+        this.transform.push(`scale3d(${x}, ${y}, ${z})`);
+        return this;
+    }
+    scaleX(scale) {
+        this.transform.push(`scaleX(${scale})`);
+        return this;
+    }
+    scaleY(scale) {
+        this.transform.push(`scaleY(${scale})`);
+        return this;
+    }
+    scaleZ(scale) {
+        this.transform.push(`scaleZ(${scale})`);
+        return this;
+    }
+    skew(x, y) {
+        this.transform.push(`skew(${x}, ${y})`);
+        return this;
+    }
+    skewX(angle) {
+        this.transform.push(`skewX(${angle})`);
+        return this;
+    }
+    skewY(angle) {
+        this.transform.push(`skewY(${angle})`);
+        return this;
+    }
+    translate(x, y) {
+        [x, y] = this.transformUnit(x, y);
+        this.transform.push(`translate(${x}, ${y})`);
+        return this;
+    }
+    translate3d(x, y, z) {
+        [x, y, z] = this.transformUnit(x, y, z);
+        this.transform.push(`translate3d(${x}, ${y}, ${z})`);
+        return this;
+    }
+    translateX(translate) {
+        [translate] = this.transformUnit(translate);
+        this.transform.push(`translateX(${translate})`);
+        return this;
+    }
+    translateY(translate) {
+        [translate] = this.transformUnit(translate);
+        this.transform.push(`translateY(${translate})`);
+        return this;
+    }
+    translateZ(translate) {
+        [translate] = this.transformUnit(translate);
+        this.transform.push(`translateZ(${translate})`);
+        return this;
+    }
+    opacity(value) {
+        this.rules.push(`opacity: ${value}`);
+        return this;
+    }
+    backgroundColor(value) {
+        this.rules.push(`background-color: ${value}`);
+        return this;
+    }
+    width(value) {
+        [value] = this.transformUnit(value);
+        this.rules.push(`width: ${value}`);
+        return this;
+    }
+    height(value) {
+        [value] = this.transformUnit(value);
+        this.rules.push(`height: ${value}`);
+        return this;
+    }
+    top(value) {
+        [value] = this.transformUnit(value);
+        this.rules.push(`top: ${value}`);
+        return this;
+    }
+    right(value) {
+        [value] = this.transformUnit(value);
+        this.rules.push(`right: ${value}`);
+        return this;
+    }
+    bottom(value) {
+        [value] = this.transformUnit(value);
+        this.rules.push(`bottom: ${value}`);
+        return this;
+    }
+    left(value) {
+        [value] = this.transformUnit(value);
+        this.rules.push(`left: ${value}`);
+        return this;
+    }
+    // 关键帧载入
+    step(arg = {}) {
+        const { DEFAULT } = this;
+        const { duration = DEFAULT.duration, delay = DEFAULT.delay, timingFunction = DEFAULT.timingFunction, transformOrigin = DEFAULT.transformOrigin } = arg;
+        // 生成一条 transition 动画
+        this.steps.push([
+            this.rules.map(rule => `${rule}!important`).join(';'),
+            `${this.transform.join(' ')}!important`,
+            `${TRANSFORM}-origin: ${transformOrigin}`,
+            `transition: all ${duration}ms ${timingFunction} ${delay}ms`
+        ]
+            .filter(item => item !== '' && item !== `${TRANSFORM}:`)
+            .join(';'));
+        // 清空 rules 和 transform
+        this.rules = [];
+        this.transform = [`${TRANSFORM}:`];
+        return this;
+    }
+    // 创建底层数据
+    createAnimationData() {
+        const animIndex = `taro-h5-poly-fill/${this.id}/create-animation__${this.animationMapCount++}`;
+        // 记录动画分几个 step
+        this.animationMap[animIndex] = this.steps.length;
+        // 吐出 step
+        this.steps.forEach((step, index) => {
+            const selector = index === 0
+                ? `[animation="${animIndex}"], [data-animation="${animIndex}"]`
+                : `[animation="${animIndex}--${index}"], [data-animation="${animIndex}--${index}"]`;
+            styleSheet.add(`${selector} { ${step} }`);
+        });
+        // 清空 steps
+        this.steps = [];
+        return animIndex;
+    }
+    // 动画数据产出
+    export() {
+        return this.createAnimationData();
+    }
+}
+// h5 的 createAnimation
+export const createAnimation = (option) => {
+    return new Animation(option);
+};

package/dist/api/ui/background.js

@@ -0,0 +1,4 @@
+import { temporarilyNotSupport } from '../utils';
+// 背景
+export const setBackgroundTextStyle = temporarilyNotSupport('setBackgroundTextStyle');
+export const setBackgroundColor = temporarilyNotSupport('setBackgroundColor');

package/dist/api/ui/custom-component.js

@@ -0,0 +1,3 @@
+import Taro from '@tarojs/api';
+// 自定义组件
+export const nextTick = Taro.nextTick;

package/dist/api/ui/fonts.js

@@ -0,0 +1,51 @@
+import { MethodHandler } from '../utils/handler';
+// 字体
+export const loadFontFace = async (options) => {
+    options = Object.assign({ global: false }, options);
+    const { success, fail, complete, family, source, desc = {} } = options;
+    const handle = new MethodHandler({ name: 'loadFontFace', success, fail, complete });
+    // @ts-ignore
+    const fonts = document.fonts;
+    if (fonts) {
+        // @ts-ignore
+        const fontFace = new FontFace(family, source, desc);
+        try {
+            await fontFace.load();
+            fonts.add(fontFace);
+            return handle.success({});
+        }
+        catch (error) {
+            return handle.fail({
+                errMsg: error.message || error
+            });
+        }
+    }
+    else {
+        const style = document.createElement('style');
+        let innerText = `font-family:"${family}";src:${source};font-style:${desc.style || 'normal'};font-weight:${desc.weight || 'normal'};font-variant:${desc.variant || 'normal'};`;
+        if (desc.ascentOverride) {
+            innerText += `ascent-override:${desc.ascentOverride};`;
+        }
+        if (desc.descentOverride) {
+            innerText += `descent-override:${desc.descentOverride};`;
+        }
+        if (desc.featureSettings) {
+            innerText += `font-feature-settings:${desc.featureSettings};`;
+        }
+        if (desc.lineGapOverride) {
+            innerText += `line-gap-override:${desc.lineGapOverride};`;
+        }
+        if (desc.stretch) {
+            innerText += `font-stretch:${desc.stretch};`;
+        }
+        if (desc.unicodeRange) {
+            innerText += `unicode-range:${desc.unicodeRange};`;
+        }
+        if (desc.variationSettings) {
+            innerText += `font-variation-settings:${desc.variationSettings};`;
+        }
+        style.innerText = `@font-face{${innerText}}`;
+        document.head.appendChild(style);
+        return handle.success();
+    }
+};

package/dist/api/ui/index.js

@@ -0,0 +1,12 @@
+export * from './animation';
+export * from './background';
+export * from './custom-component';
+export * from './fonts';
+export * from './menu';
+export * from './navigation-bar';
+export * from './pull-down-refresh';
+export * from './scroll';
+export * from './sticky';
+export * from './tab-bar';
+export * from './window';
+export * from './interaction';

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);
+    }
+}