antd-mobile
Version:
基于 React 的移动设计规范实现
219 lines (184 loc) • 9.78 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Brief = undefined;
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _createClass2 = require('babel-runtime/helpers/createClass');
var _createClass3 = _interopRequireDefault(_createClass2);
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 _react2 = _interopRequireDefault(_react);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _rcTouchable = require('rc-touchable');
var _rcTouchable2 = _interopRequireDefault(_rcTouchable);
var _omit = require('omit.js');
var _omit2 = _interopRequireDefault(_omit);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var __rest = undefined && undefined.__rest || function (s, e) {
var t = {};
for (var p in s) {
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
}if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0) t[p[i]] = s[p[i]];
}return t;
};
/* tslint:disable:jsx-no-multiline-js */
var Brief = exports.Brief = function (_React$Component) {
(0, _inherits3['default'])(Brief, _React$Component);
function Brief() {
(0, _classCallCheck3['default'])(this, Brief);
return (0, _possibleConstructorReturn3['default'])(this, (Brief.__proto__ || Object.getPrototypeOf(Brief)).apply(this, arguments));
}
(0, _createClass3['default'])(Brief, [{
key: 'render',
value: function render() {
return _react2['default'].createElement(
'div',
{ className: 'am-list-brief', style: this.props.style },
this.props.children
);
}
}]);
return Brief;
}(_react2['default'].Component);
var ListItem = function (_React$Component2) {
(0, _inherits3['default'])(ListItem, _React$Component2);
function ListItem(props) {
(0, _classCallCheck3['default'])(this, ListItem);
var _this2 = (0, _possibleConstructorReturn3['default'])(this, (ListItem.__proto__ || Object.getPrototypeOf(ListItem)).call(this, props));
_this2.onClick = function (ev) {
var _this2$props = _this2.props,
onClick = _this2$props.onClick,
platform = _this2$props.platform;
var isAndroid = platform === 'android' || platform === 'cross' && !!navigator.userAgent.match(/Android/i);
if (!!onClick && isAndroid) {
if (_this2.debounceTimeout) {
clearTimeout(_this2.debounceTimeout);
_this2.debounceTimeout = null;
}
var Item = ev.currentTarget;
var RippleWidth = Math.max(Item.offsetHeight, Item.offsetWidth);
var ClientRect = ev.currentTarget.getBoundingClientRect();
var pointX = ev.clientX - ClientRect.left - Item.offsetWidth / 2;
var pointY = ev.clientY - ClientRect.top - Item.offsetWidth / 2;
var coverRippleStyle = {
width: RippleWidth + 'px',
height: RippleWidth + 'px',
left: pointX + 'px',
top: pointY + 'px'
};
_this2.setState({
coverRippleStyle: coverRippleStyle,
RippleClicked: true
}, function () {
_this2.debounceTimeout = setTimeout(function () {
_this2.setState({
coverRippleStyle: { display: 'none' },
RippleClicked: false
});
}, 1000);
});
}
if (onClick) {
onClick(ev);
}
};
_this2.state = {
coverRippleStyle: { display: 'none' },
RippleClicked: false
};
return _this2;
}
(0, _createClass3['default'])(ListItem, [{
key: 'componentWillUnmount',
value: function componentWillUnmount() {
if (this.debounceTimeout) {
clearTimeout(this.debounceTimeout);
this.debounceTimeout = null;
}
}
}, {
key: 'render',
value: function render() {
var _wrapCls,
_classNames,
_classNames2,
_classNames3,
_this3 = this;
var _a = this.props,
prefixCls = _a.prefixCls,
className = _a.className,
activeStyle = _a.activeStyle,
error = _a.error,
align = _a.align,
wrap = _a.wrap,
disabled = _a.disabled,
children = _a.children,
multipleLine = _a.multipleLine,
thumb = _a.thumb,
extra = _a.extra,
arrow = _a.arrow,
onClick = _a.onClick,
restProps = __rest(_a, ["prefixCls", "className", "activeStyle", "error", "align", "wrap", "disabled", "children", "multipleLine", "thumb", "extra", "arrow", "onClick"]);var _state = this.state,
coverRippleStyle = _state.coverRippleStyle,
RippleClicked = _state.RippleClicked;
var wrapCls = (_wrapCls = {}, (0, _defineProperty3['default'])(_wrapCls, className, className), (0, _defineProperty3['default'])(_wrapCls, prefixCls + '-item', true), (0, _defineProperty3['default'])(_wrapCls, prefixCls + '-item-disabled', disabled), (0, _defineProperty3['default'])(_wrapCls, prefixCls + '-item-error', error), (0, _defineProperty3['default'])(_wrapCls, prefixCls + '-item-top', align === 'top'), (0, _defineProperty3['default'])(_wrapCls, prefixCls + '-item-middle', align === 'middle'), (0, _defineProperty3['default'])(_wrapCls, prefixCls + '-item-bottom', align === 'bottom'), _wrapCls);
var rippleCls = (0, _classnames2['default'])((_classNames = {}, (0, _defineProperty3['default'])(_classNames, prefixCls + '-ripple', true), (0, _defineProperty3['default'])(_classNames, prefixCls + '-ripple-animate', RippleClicked), _classNames));
var lineCls = (0, _classnames2['default'])((_classNames2 = {}, (0, _defineProperty3['default'])(_classNames2, prefixCls + '-line', true), (0, _defineProperty3['default'])(_classNames2, prefixCls + '-line-multiple', multipleLine), (0, _defineProperty3['default'])(_classNames2, prefixCls + '-line-wrap', wrap), _classNames2));
var arrowCls = (0, _classnames2['default'])((_classNames3 = {}, (0, _defineProperty3['default'])(_classNames3, prefixCls + '-arrow', true), (0, _defineProperty3['default'])(_classNames3, prefixCls + '-arrow-horizontal', arrow === 'horizontal'), (0, _defineProperty3['default'])(_classNames3, prefixCls + '-arrow-vertical', arrow === 'down' || arrow === 'up'), (0, _defineProperty3['default'])(_classNames3, prefixCls + '-arrow-vertical-up', arrow === 'up'), _classNames3));
var content = _react2['default'].createElement(
'div',
(0, _extends3['default'])({}, (0, _omit2['default'])(restProps, ['platform']), { onClick: function onClick(ev) {
_this3.onClick(ev);
}, className: (0, _classnames2['default'])(wrapCls) }),
thumb ? _react2['default'].createElement(
'div',
{ className: prefixCls + '-thumb' },
typeof thumb === 'string' ? _react2['default'].createElement('img', { src: thumb }) : thumb
) : null,
_react2['default'].createElement(
'div',
{ className: lineCls },
children !== undefined && _react2['default'].createElement(
'div',
{ className: prefixCls + '-content' },
children
),
extra !== undefined && _react2['default'].createElement(
'div',
{ className: prefixCls + '-extra' },
extra
),
arrow && _react2['default'].createElement('div', { className: arrowCls, 'aria-hidden': 'true' })
),
_react2['default'].createElement('div', { style: coverRippleStyle, className: rippleCls })
);
return _react2['default'].createElement(
_rcTouchable2['default'],
{ disabled: disabled || !onClick, activeStyle: activeStyle, activeClassName: prefixCls + '-item-active' },
content
);
}
}]);
return ListItem;
}(_react2['default'].Component);
ListItem.defaultProps = {
prefixCls: 'am-list',
align: 'middle',
error: false,
multipleLine: false,
wrap: false,
platform: 'cross'
};
ListItem.Brief = Brief;
exports['default'] = ListItem;