react-hold
Version:
Hold the empty presentational components in react.js
79 lines (62 loc) • 2.13 kB
JavaScript
'use strict';
exports.__esModule = 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 _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _shapes = require('../shapes');
var _shapes2 = _interopRequireDefault(_shapes);
var _align = require('../align');
var _utils = require('../utils');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var Square = function Square(_ref) {
var color = _ref.color,
width = _ref.width,
height = _ref.height,
children = _ref.children,
side = _ref.side,
align = _ref.align,
fillerStyle = _ref.fillerStyle;
if ((0, _utils.isNull)(side)) {
if (!(0, _utils.isNull)(width) && !(0, _utils.isNull)(height)) {
side = width > height ? height : width;
} else if (!(0, _utils.isNull)(width)) {
side = width;
} else if (!(0, _utils.isNull)(height)) {
side = height;
}
}
var lineHeight = typeof side === 'string' && side.trim() ? side : typeof side === 'number' ? side + 'px' : null;
return _react2.default.createElement(
'div',
{ style: { textAlign: align } },
_react2.default.createElement(
'div',
{
style: _extends({
background: color
}, fillerStyle, {
display: 'inline-block',
textAlign: 'center',
width: side,
height: side,
lineHeight: lineHeight
})
},
children
)
);
};
Square.propTypes = _extends({}, _shapes2.default, {
side: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
align: _propTypes2.default.string
});
Square.defaultProps = {
width: null,
height: null,
side: null,
align: _align.CENTER,
fillerStyle: null
};
exports.default = Square;