antd-mobile/es/menu/SubMenu.web.js

基于 React 的移动设计规范实现

import _defineProperty from 'babel-runtime/helpers/defineProperty';
import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _createClass from 'babel-runtime/helpers/createClass';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
/* tslint:disable:jsx-no-multiline-js */
import React from 'react';
import classNames from 'classnames';
import List from '../list/index.web';
import Radio from '../radio/Radio.web';

var SubMenu = function (_React$Component) {
    _inherits(SubMenu, _React$Component);

    function SubMenu(props) {
        _classCallCheck(this, SubMenu);

        var _this = _possibleConstructorReturn(this, (SubMenu.__proto__ || Object.getPrototypeOf(SubMenu)).call(this, props));

        _this.onClick = function (dataItem) {
            _this.setState({
                selItem: [dataItem]
            });
            if (_this.props.onSel) {
                _this.props.onSel(dataItem);
            }
        };
        _this.state = {
            selItem: props.selItem
        };
        return _this;
    }

    _createClass(SubMenu, [{
        key: 'componentWillReceiveProps',
        value: function componentWillReceiveProps(nextProps) {
            if (nextProps.subMenuData !== this.props.subMenuData) {
                this.setState({
                    selItem: nextProps.selItem
                });
            }
        }
    }, {
        key: 'render',
        value: function render() {
            var _this2 = this;

            var _props = this.props,
                subMenuPrefixCls = _props.subMenuPrefixCls,
                radioPrefixCls = _props.radioPrefixCls,
                subMenuData = _props.subMenuData;
            var selItem = this.state.selItem;

            var selected = function selected(dataItem) {
                return selItem.length > 0 && selItem[0].value === dataItem.value;
            };
            return React.createElement(
                List,
                { style: { paddingTop: 0 }, className: subMenuPrefixCls },
                subMenuData.map(function (dataItem, idx) {
                    var _classNames;

                    return React.createElement(
                        List.Item,
                        { className: classNames((_classNames = {}, _defineProperty(_classNames, radioPrefixCls + '-item', true), _defineProperty(_classNames, subMenuPrefixCls + '-item-selected', selected(dataItem)), _defineProperty(_classNames, subMenuPrefixCls + '-item-disabled', dataItem.disabled), _classNames)), key: idx, extra: React.createElement(Radio, { checked: selected(dataItem), disabled: dataItem.disabled, onChange: function onChange() {
                                    return _this2.onClick(dataItem);
                                } }) },
                        dataItem.label
                    );
                })
            );
        }
    }]);

    return SubMenu;
}(React.Component);

export default SubMenu;