tuya-panel-kit
Version:
a functional component library for developing tuya device panels!
307 lines (251 loc) • 10.4 kB
JavaScript
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _jsxFileName = 'src/components/notification-legacy/index.js';
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactNative = require('react-native');
var _reactNativeSvg = require('react-native-svg');
var _topbar = require('../layout/topbar');
var _topbar2 = _interopRequireDefault(_topbar);
var _linearGradient = require('../gradient/linear-gradient');
var _linearGradient2 = _interopRequireDefault(_linearGradient);
var _iconfont = require('../iconfont');
var _iconfont2 = _interopRequireDefault(_iconfont);
var _defaultSvg = require('../iconfont/svg/defaultSvg');
var _defaultSvg2 = _interopRequireDefault(_defaultSvg);
var _utils = require('../../utils');
var _styled = require('./styled');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var ThemeConsumer = _utils.ThemeUtils.ThemeConsumer;
var ICONS = {
success: _defaultSvg2.default.selected,
warning: _defaultSvg2.default.warning,
error: _defaultSvg2.default.error
};
var DEFAULT_THEME = {
background: '#fff',
text: '#495054',
iconColor: undefined,
successIcon: undefined,
warningIcon: undefined,
errorIcon: undefined,
closeIcon: '#81828B'
};
var shadowStyles = {
shadowColor: 'rgba(0,0,0,0.16)',
shadowOffset: {
width: 0,
height: 2
},
shadowOpacity: 1,
shadowRadius: 8,
elevation: 2
};
var NotificationLegacy = function (_PureComponent) {
_inherits(NotificationLegacy, _PureComponent);
function NotificationLegacy(props) {
_classCallCheck(this, NotificationLegacy);
var _this = _possibleConstructorReturn(this, (NotificationLegacy.__proto__ || Object.getPrototypeOf(NotificationLegacy)).call(this, props));
_this._handleLayout = function (_ref) {
var layout = _ref.nativeEvent.layout;
_this.setState({ height: layout.height || 56 });
};
_this._autoCloseId = null;
_this.state = {
height: 56
};
return _this;
}
_createClass(NotificationLegacy, [{
key: 'componentDidMount',
value: function componentDidMount() {
var _props = this.props,
enableClose = _props.enableClose,
autoCloseTime = _props.autoCloseTime,
onClose = _props.onClose;
if (!enableClose) {
this._autoCloseId = setTimeout(function () {
typeof onClose === 'function' && onClose();
}, autoCloseTime);
}
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
clearTimeout(this._autoCloseId);
}
}, {
key: 'render',
value: function render() {
var _this2 = this;
var theme = this.theme;
var _props2 = this.props,
accessibilityLabel = _props2.accessibilityLabel,
style = _props2.style,
icon = _props2.icon,
variant = _props2.variant,
message = _props2.message,
enableClose = _props2.enableClose,
onClose = _props2.onClose,
children = _props2.children,
onPress = _props2.onPress,
rest = _objectWithoutProperties(_props2, ['accessibilityLabel', 'style', 'icon', 'variant', 'message', 'enableClose', 'onClose', 'children', 'onPress']);
var disable = typeof onPress === 'function';
var warning = ICONS.warning;
return _react2.default.createElement(
ThemeConsumer,
{
__source: {
fileName: _jsxFileName,
lineNumber: 88
}
},
function (t) {
var iconPath = icon || ICONS[variant] || warning;
var iconColor = theme.iconColor || theme[variant + 'Icon'] || t.global[variant] || theme.warningIcon;
var shadowSize = {
width: _utils.RatioUtils.winWidth,
height: _this2.state.height + _topbar2.default.height + 40
};
var isOneLine = _this2.state.height === 56;
return _react2.default.createElement(
_styled.StyledNotification,
_extends({
disabled: !disable
}, rest, {
style: [shadowSize, style],
accessibilityLabel: accessibilityLabel,
activeOpacity: 1,
onPress: onPress,
__source: {
fileName: _jsxFileName,
lineNumber: 99
}
}),
_react2.default.createElement(
_linearGradient2.default,
{
style: shadowSize,
x1: '0%',
y1: '0%',
x2: '0%',
y2: '100%',
stops: {
'0%': 'rgba(0, 0, 0, 0.6)',
'100%': 'rgba(0, 0, 0, 0)'
},
__source: {
fileName: _jsxFileName,
lineNumber: 107
}
},
_react2.default.createElement(_reactNativeSvg.Rect, _extends({}, shadowSize, {
__source: {
fileName: _jsxFileName,
lineNumber: 118
}
}))
),
_react2.default.createElement(
_styled.StyledNotificationContent,
{
style: _extends({
alignItems: isOneLine ? 'center' : 'flex-start',
borderRadius: isOneLine ? 30 : 16
}, shadowStyles),
background: theme.background,
onLayout: _this2._handleLayout,
__source: {
fileName: _jsxFileName,
lineNumber: 120
}
},
_react2.default.createElement(_iconfont2.default, { d: iconPath, color: iconColor, size: 20, __source: {
fileName: _jsxFileName,
lineNumber: 129
}
}),
children || _react2.default.createElement(
_styled.StyledTitle,
{ color: theme.text, numberOfLines: 3, __source: {
fileName: _jsxFileName,
lineNumber: 131
}
},
message
),
enableClose && _react2.default.createElement(
_styled.StyledButton,
{
accessibilityLabel: accessibilityLabel + '_Close',
activeOpacity: 0.6,
onPress: onClose,
__source: {
fileName: _jsxFileName,
lineNumber: 136
}
},
_react2.default.createElement(_iconfont2.default, { name: 'close', color: theme.closeIcon, size: 15, __source: {
fileName: _jsxFileName,
lineNumber: 141
}
})
)
)
);
}
);
}
}, {
key: 'theme',
get: function get() {
return _extends({}, DEFAULT_THEME, this.props.theme);
}
}]);
return NotificationLegacy;
}(_react.PureComponent);
exports.default = NotificationLegacy;
NotificationLegacy.propTypes = {
accessibilityLabel: _propTypes2.default.string,
style: _reactNative.ViewPropTypes.style,
theme: _propTypes2.default.shape({
background: _reactNative.ColorPropType,
text: _reactNative.ColorPropType,
iconColor: _reactNative.ColorPropType,
successIcon: _reactNative.ColorPropType,
warningIcon: _reactNative.ColorPropType,
errorIcon: _reactNative.ColorPropType,
closeIcon: _reactNative.ColorPropType,
radius: _propTypes2.default.number
}),
icon: _propTypes2.default.string,
variant: _propTypes2.default.oneOf(['success', 'warning', 'error']),
enableClose: _propTypes2.default.bool,
autoCloseTime: _propTypes2.default.number,
message: _propTypes2.default.string,
onClose: _propTypes2.default.func,
children: _propTypes2.default.any,
onPress: _propTypes2.default.func
};
NotificationLegacy.defaultProps = {
accessibilityLabel: 'NotificationLegacy',
style: null,
theme: DEFAULT_THEME,
icon: undefined,
variant: 'warning',
enableClose: true,
autoCloseTime: 1500,
message: '',
onClose: null,
children: null,
onPress: null
};