tsp-component/lib/choice/index.js

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

var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
import * as React from 'react';
import classNames from 'classnames';
import Hammer from 'react-hammerjs';
import FormCore from '../form/core';
var prefix = 'tsp-component-Choice';
var Choice = (function (_super) {
    __extends(Choice, _super);
    function Choice(props, state) {
        var _this = _super.call(this, props, state) || this;
        _this.onClick = _this.onClick.bind(_this);
        return _this;
    }
    Choice.prototype.componentWillMount = function () {
        var length = this.props.value.length;
        var temp = [];
        var i;
        for (i = 0; i < length; i++) {
            if (this.props.type === 'radio') {
                if (this.props.value[i].checked) {
                    temp[0] = this.props.value[i].id;
                    break;
                }
            }
            else {
                temp.push(this.props.value[i].checked);
            }
        }
        this.setState({ value: temp });
    };
    Choice.prototype.componentDidMount = function () {
        this.formCore = new FormCore({
            elem: this.refs.elem,
            required: this.props.required,
            defaultValue: this.props.value.filter(function (value) { return value.checked; }).map(function (value) { return value.id; }).join()
        });
        this.setElemValue();
    };
    Choice.prototype.componentDidUpdate = function () {
        this.setElemValue();
    };
    Choice.prototype.onClick = function (index) {
        if (this.props.onClick && !this.props.disabled) {
            this.props.onClick(index);
        }
    };
    Choice.prototype.setElemValue = function () {
        var length = this.props.value.length;
        var value = [];
        for (var i = 0; i < length; i++) {
            var id = this.props.value[i].id.toString();
            if (this.props.value[i].checked) {
                value.push(id);
            }
        }
        this.formCore.elem.dataset.value = value.join();
    };
    Choice.prototype.render = function () {
        var _this = this;
        return (React.createElement("div", { id: this.props.id, className: classNames((_a = {},
                _a[prefix] = true,
                _a[this.props.className] = this.props.className,
                _a)), ref: "elem" }, this.props.value.map(function (value, i) {
            return (React.createElement(Hammer, { onTap: function () { return _this.onClick(i); }, key: i },
                React.createElement("div", { className: classNames((_a = {},
                        _a[prefix + "-item"] = true,
                        _a[prefix + "-item-checked"] = value.checked,
                        _a)) }, value.label)));
            var _a;
        })));
        var _a;
    };
    Choice.defaultProps = {
        id: '',
        type: 'radio',
        value: [],
        onClick: null
    };
    return Choice;
}(React.Component));
export default Choice;