antd-mobile
Version:
基于 React 的移动设计规范实现
287 lines (248 loc) • 11.2 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = undefined;
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = require('babel-runtime/helpers/inherits');
var _inherits3 = _interopRequireDefault(_inherits2);
var _react = require('react');
var React = _interopRequireWildcard(_react);
var _objectAssign = require('object-assign');
var _objectAssign2 = _interopRequireDefault(_objectAssign);
var _reactNative = require('react-native');
var _default = require('../style/themes/default');
var _default2 = _interopRequireDefault(_default);
var _index = require('./style/index');
var _index2 = _interopRequireDefault(_index);
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj["default"] = obj; return newObj; } }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var THEMES = _index2["default"].ThemesList;
var Brief = function (_React$Component) {
(0, _inherits3["default"])(Brief, _React$Component);
function Brief() {
(0, _classCallCheck3["default"])(this, Brief);
return (0, _possibleConstructorReturn3["default"])(this, _React$Component.apply(this, arguments));
}
Brief.prototype.render = function render() {
var _props = this.props;
var children = _props.children;
var style = _props.style;
var inExtra = _props.inExtra;
return React.createElement(
_reactNative.View,
{ style: {
marginTop: _default2["default"].v_spacing_sm,
height: _default2["default"].font_size_subhead
} },
React.createElement(
_reactNative.Text,
{ style: [THEMES.Brief, style, inExtra ? { textAlign: 'right' } : null], numberOfLines: 1 },
children
)
);
};
return Brief;
}(React.Component);
var Item = function (_React$Component2) {
(0, _inherits3["default"])(Item, _React$Component2);
function Item(props) {
(0, _classCallCheck3["default"])(this, Item);
var _this2 = (0, _possibleConstructorReturn3["default"])(this, _React$Component2.call(this, props));
_this2.state = {
__lazy: _this2.props.lazy
};
return _this2;
}
Item.prototype.componentWillMount = function componentWillMount() {
var _this3 = this;
if (this.state.__lazy) {
this.timer = setTimeout(function () {
return _this3.setState({ __lazy: false });
}, 500);
}
};
Item.prototype.componentWillUnmount = function componentWillUnmount() {
if (this.timer) {
clearTimeout(this.timer);
}
};
Item.prototype.render = function render() {
var _this4 = this;
if (this.state.__lazy) {
return React.createElement(_reactNative.View, null);
}
var line = 1;
var thumbDom = null;
var contentDom = null;
var extraDom = null;
var arrowDom = null;
var thumb = this.props.thumb;
if (thumb) {
if (typeof thumb === 'string') {
thumbDom = React.createElement(_reactNative.Image, { source: { uri: thumb }, style: [THEMES.Thumb, this.props.multipleLine ? THEMES.multipleLine.Thumb : null] });
} else {
thumbDom = thumb;
}
}
if (Array.isArray(this.props.children)) {
(function () {
var tempContentDom = [];
_this4.props.children.forEach(function (el, index) {
if (React.isValidElement(el)) {
tempContentDom.push(React.createElement(
_reactNative.View,
{ key: index + '-children' },
el
));
} else {
tempContentDom.push(React.createElement(
_reactNative.Text,
{ style: THEMES.Content, numberOfLines: 1, key: '{index}-children' },
el
));
}
});
line = _this4.props.children.length;
contentDom = React.createElement(
_reactNative.View,
{ style: { flex: 1, flexDirection: 'column' } },
tempContentDom
);
})();
} else {
if (React.isValidElement(this.props.children)) {
contentDom = React.createElement(
_reactNative.View,
{ style: { flex: 1, flexDirection: 'column' } },
this.props.children
);
} else {
contentDom = React.createElement(
_reactNative.View,
{ style: { flex: 1, flexDirection: 'column' } },
React.createElement(
_reactNative.Text,
{ style: THEMES.Content, numberOfLines: 1 },
this.props.children
)
);
}
}
if (this.props.extra) {
if (React.isValidElement(this.props.extra)) {
var extraChildren = this.props.extra.props.children;
if (Array.isArray(extraChildren)) {
(function () {
var tempExtraDom = [];
extraChildren.forEach(function (el, index) {
if (typeof el === 'string') {
tempExtraDom.push(React.createElement(
_reactNative.Text,
{ numberOfLines: 1, style: [THEMES.Extra, { textAlign: 'right' }], key: index + '-extra' },
el
));
} else {
tempExtraDom.push(React.cloneElement(el, (0, _objectAssign2["default"])({}, el.props, { inExtra: true, key: index })));
}
});
line = extraChildren.length > line ? extraChildren.length : line;
extraDom = React.createElement(
_reactNative.View,
{ style: { flex: 1, flexDirection: 'column' } },
tempExtraDom
);
})();
} else {
extraDom = this.props.extra;
}
} else {
extraDom = React.createElement(
_reactNative.View,
{ style: { flex: 1, flexDirection: 'column' } },
React.createElement(
_reactNative.Text,
{ style: [THEMES.Extra, { textAlign: 'right' }], numberOfLines: 1 },
this.props.extra
)
);
}
}
if (this.props.arrow) {
switch (this.props.arrow) {
case 'horizontal':
arrowDom = React.createElement(_reactNative.Image, { source: require('../style/images/arrow.png'), style: THEMES.Arrow });
break;
case 'down':
arrowDom = React.createElement(_reactNative.Image, { source: require('../style/images/arrow-up.png'), style: THEMES.ArrowV });
break;
case 'up':
arrowDom = React.createElement(_reactNative.Image, { source: require('../style/images/arrow-down.png'), style: THEMES.ArrowV });
break;
default:
arrowDom = React.createElement(_reactNative.View, { style: THEMES.Arrow });
break;
}
}
var itemHeight = void 0;
if (line === 2) {
if (_reactNative.Platform.OS === 'android') {
itemHeight = 60 + 2 * _default2["default"].v_spacing_sm;
} else {
itemHeight = 60 + _default2["default"].v_spacing_sm;
}
} else if (line > 2) {
if (_reactNative.Platform.OS === 'android') {
itemHeight = _default2["default"].list_item_height + (_default2["default"].font_size_subhead + _default2["default"].v_spacing_sm) * (line - 1) + 2 * _default2["default"].v_spacing_sm - 3;
} else {
itemHeight = _default2["default"].list_item_height + (_default2["default"].font_size_subhead + _default2["default"].v_spacing_sm) * (line - 1) + _default2["default"].v_spacing_sm - 3;
}
}
var ItemStyle = [THEMES.Item, this.props.last ? THEMES.Last.Item : {}, this.props.error ? THEMES.Error.Item : {}, line > 1 ? { height: itemHeight } : {}, this.props.style];
var LineStyle = [THEMES.Line, this.props.multipleLine ? THEMES.multipleLine.Line : {}, this.props.last ? THEMES.Last.Line : {}, this.props.error ? THEMES.Error.Line : {}];
var itemView = React.createElement(
_reactNative.View,
(0, _extends3["default"])({}, this.props, { style: ItemStyle }),
thumbDom,
React.createElement(
_reactNative.View,
{ style: LineStyle },
contentDom,
extraDom,
arrowDom
)
);
if (this.props.onClick) {
return React.createElement(
_reactNative.TouchableHighlight,
{ activeOpacity: 1, underlayColor: THEMES.underlayColor, onPress: this.props.onClick, onPressIn: function onPressIn() {}, onPressOut: function onPressOut() {} },
itemView
);
}
return itemView;
};
return Item;
}(React.Component);
exports["default"] = Item;
Item.propTypes = {
extra: function extra(props, propName) {
if (props[propName]) {
if (!React.isValidElement(props[propName]) && typeof props[propName] !== 'string') {
throw new Error('extra must be a string or element');
}
}
},
arrow: _react.PropTypes.oneOf(['horizontal', 'down', 'up', 'empty', ''])
};
Item.defaultProps = {
lazy: false,
last: false,
multipleLine: false
};
Item.Brief = Brief;
module.exports = exports['default'];