tsp-component/lib/picker/core.js

提供多端和react版本的UI组件

import { popupOpen, popupClose } from '../popup';
import { setTranslate } from '../util/animation';
import FormCore from '../form/core';
var prefix = 'tsp-component-Picker';
var coefficient = 102;
var Picker = (function () {
    function Picker(params) {
        this.translateY = [];
        this.isPanEnd = true;
        this.touchElementCol = 0;
        this.selected = [];
        this.isTransitionEnd = false;
        this.id = params.id;
        this.cascade = params.cascade || false;
        this.value = params.defaultValue;
        this.data = params.data;
        this.onOk = params.onOk;
        this.sliderElem = params.sliderElem;
        this.containerElem = params.containerElem;
        this.labelElem = params.labelElem;
        this.formatLabel = params.formatLabel;
        this.required = params.required;
        this.panStart = this.panStart.bind(this);
        this.pan = this.pan.bind(this);
        this.panEnd = this.panEnd.bind(this);
        this.ok = this.ok.bind(this);
        this.cancel = this.cancel.bind(this);
        this.open = this.open.bind(this);
        this.transitionEnd = this.transitionEnd.bind(this);
        this.labelElem.innerText = params.defaultLabel || '请选择';
    }
    Picker.prototype.init = function () {
        for (var i = 0; i < this.data.length; i++) {
            if (this.value) {
                this.selected.push(this.value[i]);
            }
            else {
                this.selected.push({
                    index: 0
                });
            }
            this.renderCol(this.data[i], i, 'init');
        }
        this.formCore = new FormCore({
            elem: this.containerElem,
            required: this.required,
            defaultValue: this.value.map(function (value) { return value.value; }).join()
        });
        this.setLabel();
        this.setElemValue();
    };
    Picker.prototype.panStart = function (evt) {
        this.touchElementCol = this.getTouchElementCol(evt);
        if (this.touchElementCol !== undefined) {
            this.isPanEnd = false;
            this.moveStartBeforeValueIndex = this.getValueIndex(this.touchElementCol, this.selected);
            this.moveingPrevValueIndex = this.moveStartBeforeValueIndex;
            this.isTransitionEnd = false;
            this.removePanEndClass(this.touchElementCol);
        }
    };
    Picker.prototype.pan = function (evt) {
        if (!this.isPanEnd) {
            var position = this.getMoveBeforePosition(this.touchElementCol, this.moveStartBeforeValueIndex);
            var moveY = this.getMoveDistance(this.touchElementCol, position, evt.deltaY);
            var nowValueIndex = this.getSelectedIndexByMoveY(this.touchElementCol, moveY);
            this.moveingPrevValueIndex = this.setCurrentStyle(this.touchElementCol, this.moveingPrevValueIndex, nowValueIndex);
            this.sliderMove(this.touchElementCol, moveY);
        }
    };
    Picker.prototype.panEnd = function (evt) {
        if (!this.isPanEnd) {
            var position = this.getMoveBeforePosition(this.touchElementCol, this.moveingPrevValueIndex);
            this.isPanEnd = true;
            this.setSelected(this.touchElementCol, this.moveingPrevValueIndex);
            this.addPanEndClass(this.touchElementCol);
            this.sliderMove(this.touchElementCol, position);
        }
    };
    Picker.prototype.transitionEnd = function (timeoutInstance) {
        this.isTransitionEnd = true;
        this.removePanEndClass(this.touchElementCol);
        clearTimeout(timeoutInstance);
    };
    Picker.prototype.ok = function () {
        popupClose(this.id);
        this.setLabel();
        this.setElemValue();
        if (this.onOk) {
            this.onOk(this.selected);
        }
    };
    Picker.prototype.cancel = function () {
        var children = this.sliderElem.children;
        for (var i = 0; i < this.data.length; i++) {
            children[i].children[this.getValueIndex(i, this.selected)].classList.remove(prefix + "-body-col-item-current");
            children[i].children[this.getValueIndex(i, this.selected)].classList.add(prefix + "-body-col-item-current");
            if (this.value) {
                this.selected[i] = this.value[i];
            }
        }
        popupClose(this.id);
    };
    Picker.prototype.open = function () {
        for (var i = 0; i < this.data.length; i++) {
            this.pickerTranslateInitial(i, this.getValueIndex(i, this.selected));
        }
        popupOpen(this.id);
    };
    Picker.prototype.setLabel = function () {
        if (this.formatLabel) {
            this.labelElem.textContent = this.formatLabel(this.selected);
        }
        else {
            var label = '';
            for (var i = 0; i < this.selected.length; i++) {
                if (this.selected[i].value !== undefined) {
                    label += this.selected[i].label;
                }
            }
            if (label !== '' && label !== 'undefined') {
                this.labelElem.textContent = label;
            }
        }
    };
    Picker.prototype.setElemValue = function () {
        var value = [];
        for (var i = 0; i < this.selected.length; i++) {
            value.push(this.selected[i].value);
        }
        this.formCore.elem.dataset.value = value.join();
    };
    Picker.prototype.pickerTranslateInitial = function (col, selectedIndex) {
        var elem = this.sliderElem.children[col];
        var position = this.getMoveBeforePosition(col, selectedIndex);
        var length = elem.children.length;
        this.translateY[col] = position;
        for (var i = 0; i < length; i++) {
            elem.children[i]['classList'].remove(prefix + "-body-col-item-current");
        }
        this.setSelected(col, selectedIndex);
        elem.children[selectedIndex]['classList'].add(prefix + "-body-col-item-current");
        setTranslate(elem, 0, position);
    };
    Picker.prototype.createColItemElement = function (data) {
        var elem = document.createElement('div');
        var tempArray = [];
        var length = data.length;
        var i = data.length;
        elem.classList.add(prefix + "-body-col-item");
        for (i = 0; i < length; i++) {
            var temp = elem.cloneNode(false);
            temp.textContent = data[i].label.toString();
            tempArray.push(temp);
        }
        return tempArray;
    };
    Picker.prototype.getValueIndex = function (col, value) {
        if (value === void 0) { value = this.value; }
        var selectedIndex = 0;
        if (!value) {
            return;
        }
        if (value[col].index !== undefined) {
            selectedIndex = value[col].index;
        }
        else if (value[col].value !== undefined) {
            var length_1 = this.data[col].length;
            var i = void 0;
            for (i = 0; i < length_1; i++) {
                if (value[col].value === this.data[col][i].value) {
                    selectedIndex = i;
                    break;
                }
            }
        }
        return selectedIndex;
    };
    Picker.prototype.getTouchElementCol = function (evt) {
        var col = evt.target.parentNode['dataset'].col;
        if (col) {
            return parseInt(col);
        }
        else {
            return undefined;
        }
    };
    Picker.prototype.addPanEndClass = function (col) {
        this.sliderElem.children[col].classList.add('tsp-component-slider-panend');
    };
    Picker.prototype.removePanEndClass = function (col) {
        if (this.sliderElem.children[col]) {
            this.sliderElem.children[col].classList.remove('tsp-component-slider-panend');
        }
    };
    Picker.prototype.getMoveBeforePosition = function (col, selectedIndex) {
        return selectedIndex * -34 + coefficient;
    };
    Picker.prototype.getMoveDistance = function (col, position, deltaY) {
        var length = (this.data[col].length - 1) * -34 + coefficient;
        var distance = position + deltaY;
        var symbol = deltaY < 0 ? -1 : 1;
        if (distance > coefficient || distance < length) {
            return this.translateY[col] + symbol * 0.25;
        }
        return distance;
    };
    Picker.prototype.sliderMove = function (col, y) {
        this.translateY[col] = y;
        setTranslate(this.sliderElem.children[col], 0, y);
    };
    Picker.prototype.getSelectedIndexByMoveY = function (col, moveY) {
        var nowValueIndex = -Math.round((moveY - coefficient) / 34);
        var count = this.data[col].length - 1;
        if (nowValueIndex >= count) {
            return count;
        }
        else if (nowValueIndex <= 0) {
            return 0;
        }
        return nowValueIndex;
    };
    Picker.prototype.setCurrentStyle = function (col, oldIndex, nowIndex) {
        if (oldIndex !== nowIndex) {
            var elem = this.sliderElem.children[col].children;
            elem[oldIndex].classList.remove(prefix + "-body-col-item-current");
            elem[nowIndex].classList.add(prefix + "-body-col-item-current");
        }
        return nowIndex;
    };
    Picker.prototype.setSelected = function (col, selectedIndex) {
        var data = this.data[col];
        this.selected[col] = {
            value: data[selectedIndex].value,
            index: selectedIndex,
            label: data[selectedIndex].label
        };
    };
    Picker.prototype.renderCol = function (data, col, type) {
        var fragment = document.createDocumentFragment();
        var elems = this.createColItemElement(data);
        var wrap = document.createElement('div');
        var length = elems.length;
        var i;
        for (i = 0; i < length; i++) {
            fragment.appendChild(elems[i]);
        }
        wrap.classList.add(prefix + "-body-col");
        wrap.dataset.col = col.toString();
        wrap.appendChild(fragment);
        if (type === 'init') {
            this.sliderElem.appendChild(wrap);
        }
        else {
            this.sliderElem.replaceChild(wrap, this.sliderElem.children[col]);
        }
    };
    Picker.prototype.componentWillReceiveProps = function (props, nextProps) {
        if (props.updateId !== nextProps.updateId || props.defaultLabel !== nextProps.defaultLabel) {
            if (nextProps['data']) {
                this.data = nextProps['data'];
            }
            this.sliderElem.innerHTML = '';
            for (var i = 0; i < nextProps.defaultValue.length; i++) {
                var defaultValue = nextProps.defaultValue[i].value;
                this.selected[i] = {
                    value: defaultValue === undefined || defaultValue === null ? undefined : defaultValue.toString(),
                    index: undefined,
                    label: props.changeLabel && nextProps.defaultValue[i].value !== undefined ? nextProps.defaultValue[i].label : undefined,
                };
                this.renderCol(this.data[i], i, 'init');
            }
            this.setLabel();
            this.setElemValue();
        }
    };
    return Picker;
}());
export default Picker;