Skip to content

Commit

Permalink
[chore] build
Browse files Browse the repository at this point in the history
  • Loading branch information
@romelperez
romelperez committed Aug 3, 2017
1 parent 7664c0e commit f88d16e
Show file tree
Hide file tree
Showing 8 changed files with 335 additions and 25 deletions.
143 changes: 135 additions & 8 deletions dist/components/Arwes/index.js
View file
Expand Up @@ -12,6 +12,10 @@ var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);
Expand All @@ -20,6 +24,14 @@ var _docReady = require('doc-ready');

var _docReady2 = _interopRequireDefault(_docReady);

var _getDims2 = require('../../tools/get-dims');

var _getDims3 = _interopRequireDefault(_getDims2);

var _responsive = require('../../tools/responsive');

var _responsive2 = _interopRequireDefault(_responsive);

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; }
Expand All @@ -30,6 +42,13 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen

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; }

// How often to create new puffs. Should be greater than 4 seconds.
var ARWES_PUFFS_INTERVAL = 5000;

/**
* Application container.
*/

var Arwes = function (_Component) {
_inherits(Arwes, _Component);

Expand All @@ -38,6 +57,24 @@ var Arwes = function (_Component) {

var _this = _possibleConstructorReturn(this, (Arwes.__proto__ || Object.getPrototypeOf(Arwes)).apply(this, arguments));

_this.onPuffs = function () {

var puffs = [];
for (var i = 0; i < 10; i++) {
puffs.push(_this.createPuff());
}

puffs.forEach(function (puff) {
return _this.elIntern.appendChild(puff);
});

_this.puffTimeout = setTimeout(function () {
puffs.forEach(function (puff) {
return puff.remove();
});
}, ARWES_PUFFS_INTERVAL - 100);
};

_this.state = {
ready: false
};
Expand All @@ -50,30 +87,65 @@ var Arwes = function (_Component) {
var _this2 = this;

(0, _docReady2.default)(function () {
_this2.setState({ ready: true });
return _this2.setState({ ready: true });
});

this.puffInterval = setInterval(this.onPuffs, ARWES_PUFFS_INTERVAL);
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
clearInterval(this.puffInterval);
clearTimeout(this.puffTimeout);
}
}, {
key: 'render',
value: function render() {
var _this3 = this;

var _props = this.props,
anim = _props.anim,
resources = _props.resources,
className = _props.className,
children = _props.children,
rest = _objectWithoutProperties(_props, ['resources', 'className', 'children']);
rest = _objectWithoutProperties(_props, ['anim', 'resources', 'className', 'children']);

var cls = (0, _classnames2.default)('arwes', {
'arwes--ready': this.state.ready,
'arwes--resources': resources,
'arwes--ready': this.state.ready
'arwes--anim': anim
}, className);

var _ref = resources || {},
patternImage = _ref.pattern,
bg = _ref.bg;

var patternStyle = void 0;
if (this.state.ready && patternImage) {
patternStyle = { backgroundImage: 'url(' + patternImage + ')' };
}

var bgImage = void 0;
var bgStyle = void 0;
if (typeof bg === 'string') {
bgImage = bg;
} else if (bg) {
var dims = _responsive2.default.get();
bgImage = dims.small ? bg.small : dims.medium ? bg.medium : bg.large;
}
if (this.state.ready && bgImage) {
bgStyle = { backgroundImage: 'url(' + bgImage + ')' };
}

return _react2.default.createElement(
'div',
_extends({ className: cls }, rest),
_extends({ className: cls, style: bgStyle }, rest),
_react2.default.createElement(
'div',
{ className: 'arwes__pattern' },
_react2.default.createElement('div', { className: 'arwes__intern' }),
{ className: 'arwes__pattern', style: patternStyle },
_react2.default.createElement('div', { className: 'arwes__intern', ref: function ref(el) {
return _this3.elIntern = el;
} }),
_react2.default.createElement(
'div',
{ className: 'arwes__main' },
Expand All @@ -82,6 +154,40 @@ var Arwes = function (_Component) {
)
);
}

/**
* Create a random set of puffs on the back of the container.
*/

}, {
key: 'createPuff',


/**
* Create a puff with random valid properties.
* @return {DOMElement}
*/
value: function createPuff() {

var el = document.createElement('div');
el.setAttribute('class', 'arwes__puff');

if (Math.round(Math.random())) {
el.setAttribute('class', 'arwes__puff arwes__puff--1');
}

var time = 1000 + Math.round(Math.random() * 3000);
el.style.animationDuration = time + 'ms';

var _getDims = (0, _getDims3.default)(),
width = _getDims.width,
height = _getDims.height;

el.style.left = 50 + Math.round(Math.random() * width - 100) + 'px';
el.style.top = 100 + Math.round(Math.random() * height - 200) + 'px';

return el;
}
}]);

return Arwes;
Expand All @@ -91,9 +197,30 @@ exports.default = Arwes;


Arwes.propTypes = {
resources: _react.PropTypes.bool

/**
* Resources to render.
*/
resources: _propTypes2.default.shape({

// Background
bg: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.shape({
small: _propTypes2.default.string,
medium: _propTypes2.default.string,
large: _propTypes2.default.string
})]),

// Pattern
pattern: _propTypes2.default.string
}),

/**
* Animations enabled.
*/
anim: _propTypes2.default.bool
};

Arwes.defaultProps = {
resources: false
resources: null,
anim: false
};
6 changes: 5 additions & 1 deletion dist/components/Button/index.js
View file
Expand Up @@ -12,6 +12,10 @@ var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);
Expand All @@ -35,7 +39,7 @@ function Button(props) {
}

Button.propTypes = {
children: _react.PropTypes.any
children: _propTypes2.default.any
};

Button.defaultProps = {
Expand Down
4 changes: 4 additions & 0 deletions dist/components/Card/index.js
View file
Expand Up @@ -12,6 +12,10 @@ var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);
Expand Down
42 changes: 28 additions & 14 deletions dist/components/Frame/index.js
View file
Expand Up @@ -12,6 +12,10 @@ var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);
Expand All @@ -26,6 +30,9 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen

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; }

/**
* Base container.
*/
var Frame = function (_Component) {
_inherits(Frame, _Component);

Expand All @@ -39,28 +46,33 @@ var Frame = function (_Component) {
key: 'render',
value: function render() {
var _props = this.props,
component = _props.component,
node = _props.node,
border = _props.border,
level = _props.level,
corners = _props.corners,
content = _props.content,
theme = _props.theme,
className = _props.className,
children = _props.children,
rest = _objectWithoutProperties(_props, ['component', 'border', 'corners', 'content', 'theme', 'className', 'children']);
rest = _objectWithoutProperties(_props, ['node', 'border', 'level', 'corners', 'content', 'theme', 'className', 'children']);

var cls = (0, _classnames2.default)('arwes-frame', {
'arwes-frame--content': content,
'arwes-frame--border-up': border === 'up',
'arwes-frame--border-down': border === 'down',
'arwes-frame--border': border,
'arwes-frame--level1': level === 1,
'arwes-frame--level2': level === 2,
'arwes-frame--level3': level === 3,
'arwes-frame--corners1': corners === 1,
'arwes-frame--corners2': corners === 2
'arwes-frame--corners2': corners === 2,
'arwes-frame--corners3': corners === 3
}, className);

var clsCorners = (0, _classnames2.default)('arwes-frame__corner', 'arwes-frame__corner--l' + corners);
var boxStyle = border && { borderWidth: border === true ? '1px' : border };

return _react2.default.createElement(component, _extends({ className: cls, 'data-theme': theme }, rest), _react2.default.createElement(
return _react2.default.createElement(node, _extends({ className: cls, 'data-theme': theme }, rest), _react2.default.createElement(
'div',
{ className: 'arwes-frame__box' },
{ className: 'arwes-frame__box', style: boxStyle },
!!corners && _react2.default.createElement('div', { className: clsCorners + ' arwes-frame__lt' }),
!!corners && _react2.default.createElement('div', { className: clsCorners + ' arwes-frame__lb' }),
!!corners && _react2.default.createElement('div', { className: clsCorners + ' arwes-frame__rt' }),
Expand All @@ -81,15 +93,17 @@ exports.default = Frame;


Frame.propTypes = {
component: _react.PropTypes.string,
border: _react.PropTypes.oneOf(['up', 'down']),
theme: _react.PropTypes.oneOf(['success', 'alert', 'disabled']),
corners: _react.PropTypes.number
node: _propTypes2.default.string,
border: _propTypes2.default.oneOfType([_propTypes2.default.bool, _propTypes2.default.string]),
level: _propTypes2.default.oneOf([0, 1, 2, 3]),
corners: _propTypes2.default.oneOf([0, 1, 2, 3]),
theme: _propTypes2.default.oneOf(['success', 'alert', 'disabled'])
};

Frame.defaultProps = {
component: 'div',
node: 'div',
border: null,
theme: null,
corners: 0
level: 1,
corners: 0,
theme: null
};
2 changes: 1 addition & 1 deletion dist/index.css
View file

Large diffs are not rendered by default.

14 changes: 13 additions & 1 deletion dist/settings.js
View file
@@ -1 +1,13 @@
"use strict";
'use strict';

Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = {
version: '1.0.0-alpha',
responsive: {
small: 600,
medium: 992,
large: 1200
}
};

0 comments on commit f88d16e

Please sign in to comment.