Skip to content

Commit a6356e7

Browse files
czewailczewail
committed
add bin
1 parent 6732532 commit a6356e7

File tree

5 files changed

+398
-6
lines changed

5 files changed

+398
-6
lines changed

‎.gitignore‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,6 @@ node_modules
77
# OSX
88
*.DS_Store
99

10-
# Builds
11-
bin
12-
1310
# Logs
1411
*.log
1512
*~

‎dist/config.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
'use strict';
2+
3+
Object.defineProperty(exports, "__esModule", {
4+
value: true
5+
});
6+
// export render dom id
7+
var wrapper = exports.wrapper = 'toast-wrapper';
8+
// export duration time
9+
var duration = exports.duration = 500;
10+
// default options
11+
var options = exports.options = {
12+
timeout: 3000,
13+
position: 'default',
14+
backgroundColor: null,
15+
textColor: null
16+
};
17+
// default colors
18+
var colors = exports.colors = {
19+
white: 'white',
20+
error: '#E85742',
21+
success: '#55CA92',
22+
warning: '#F5E273',
23+
gray: '#333333',
24+
black: 'black'
25+
};

‎dist/index.js‎

Lines changed: 232 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,232 @@
1+
'use strict';
2+
3+
Object.defineProperty(exports, "__esModule", {
4+
value: true
5+
});
6+
exports.toast = undefined;
7+
8+
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; };
9+
10+
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; }; }();
11+
12+
var _react = require('react');
13+
14+
var _react2 = _interopRequireDefault(_react);
15+
16+
var _propTypes = require('prop-types');
17+
18+
var _propTypes2 = _interopRequireDefault(_propTypes);
19+
20+
var _reactDom = require('react-dom');
21+
22+
var _reactDom2 = _interopRequireDefault(_reactDom);
23+
24+
var _objectAssign = require('object-assign');
25+
26+
var _objectAssign2 = _interopRequireDefault(_objectAssign);
27+
28+
var _styles = require('./styles');
29+
30+
var _config = require('./config');
31+
32+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
33+
34+
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
35+
36+
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; }
37+
38+
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; }
39+
40+
var Toast = function (_React$Component) {
41+
_inherits(Toast, _React$Component);
42+
43+
function Toast(props) {
44+
_classCallCheck(this, Toast);
45+
46+
var _this = _possibleConstructorReturn(this, (Toast.__proto__ || Object.getPrototypeOf(Toast)).call(this, props));
47+
48+
_this.state = {
49+
containerStyleExt: _this.setContainerStyle().container
50+
};
51+
return _this;
52+
}
53+
// set container style
54+
55+
56+
_createClass(Toast, [{
57+
key: 'setContainerStyle',
58+
value: function setContainerStyle() {
59+
// create style object
60+
var style = {};
61+
style.animate = {};
62+
// switch position
63+
switch (this.props.position) {
64+
case 'top':
65+
style.container = (0, _objectAssign2.default)({}, _styles.containerStyle, _styles.containerTopStyle);
66+
style.animate.show = (0, _objectAssign2.default)({}, _styles.animateDownStyleToShow);
67+
style.animate.hide = (0, _objectAssign2.default)({}, _styles.animateDownStyleToHide);
68+
break;
69+
case 'bottom':
70+
style.container = (0, _objectAssign2.default)({}, _styles.containerStyle, _styles.containerBottomStyle);
71+
style.animate.show = (0, _objectAssign2.default)({}, _styles.animateUpStyleToShow);
72+
style.animate.hide = (0, _objectAssign2.default)({}, _styles.animateUpStyleToHide);
73+
break;
74+
case 'default':
75+
style.container = (0, _objectAssign2.default)({}, _styles.containerStyle, _styles.containerDefaultStyle);
76+
style.animate.show = (0, _objectAssign2.default)({}, _styles.animateFadeStyleToShow);
77+
style.animate.hide = (0, _objectAssign2.default)({}, _styles.animateFadeStyleToHide);
78+
break;
79+
default:
80+
style.container = (0, _objectAssign2.default)({}, _styles.containerStyle, _styles.containerDefaultStyle);
81+
style.animate.show = (0, _objectAssign2.default)({}, _styles.animateFadeStyleToShow);
82+
style.animate.hide = (0, _objectAssign2.default)({}, _styles.animateFadeStyleToHide);
83+
break;
84+
}
85+
// return style
86+
return style;
87+
}
88+
// set content style
89+
90+
}, {
91+
key: 'setContentStyle',
92+
value: function setContentStyle() {
93+
// create style object
94+
var style = {};
95+
// switch type
96+
switch (this.props.type) {
97+
case 'success':
98+
style = (0, _objectAssign2.default)({}, _styles.contentBaseStyle, _styles.contentSuccessStyle);
99+
break;
100+
case 'error':
101+
style = (0, _objectAssign2.default)({}, _styles.contentBaseStyle, _styles.contentErrorStyle);
102+
break;
103+
case 'warning':
104+
style = (0, _objectAssign2.default)({}, _styles.contentBaseStyle, _styles.contentWarningStyle);
105+
break;
106+
case 'info':
107+
style = (0, _objectAssign2.default)({}, _styles.contentBaseStyle, _styles.contentInfoStyle);
108+
break;
109+
default:
110+
style = (0, _objectAssign2.default)({}, _styles.contentBaseStyle);
111+
break;
112+
}
113+
// if set backgroundColor attr
114+
if (this.props.backgroundColor) {
115+
style = (0, _objectAssign2.default)({}, style, { backgroundColor: this.props.backgroundColor });
116+
}
117+
// if set textColor attr
118+
if (this.props.textColor) {
119+
style = (0, _objectAssign2.default)({}, style, { color: this.props.textColor });
120+
}
121+
// return style
122+
return style;
123+
}
124+
// after component mount
125+
126+
}, {
127+
key: 'componentDidMount',
128+
value: function componentDidMount() {
129+
var _this2 = this;
130+
131+
var _containerStyle = this.setContainerStyle();
132+
// // show toast effect style
133+
setTimeout(function () {
134+
_this2.setState({
135+
containerStyleExt: (0, _objectAssign2.default)({}, _containerStyle.container, _containerStyle.animate.show)
136+
});
137+
}, 100);
138+
// hide toast effect style, do it after timeout
139+
setTimeout(function () {
140+
_this2.setState({
141+
containerStyleExt: (0, _objectAssign2.default)({}, _containerStyle.container, _containerStyle.animate.hide)
142+
});
143+
}, this.props.timeout);
144+
}
145+
146+
// render component
147+
148+
}, {
149+
key: 'render',
150+
value: function render() {
151+
var text = this.props.text;
152+
153+
var _contentStyle = this.setContentStyle();
154+
return _react2.default.createElement(
155+
'div',
156+
{ style: this.state.containerStyleExt },
157+
_react2.default.createElement(
158+
'span',
159+
{ style: _contentStyle },
160+
text
161+
)
162+
);
163+
}
164+
}]);
165+
166+
return Toast;
167+
}(_react2.default.Component);
168+
// component prop types
169+
170+
171+
Toast.PropTypes = {
172+
text: _propTypes2.default.string,
173+
type: _propTypes2.default.string,
174+
style: _propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.bool])
175+
};
176+
177+
// will mount react dom
178+
179+
var _class = function (_React$Component2) {
180+
_inherits(_class, _React$Component2);
181+
182+
function _class() {
183+
_classCallCheck(this, _class);
184+
185+
return _possibleConstructorReturn(this, (_class.__proto__ || Object.getPrototypeOf(_class)).apply(this, arguments));
186+
}
187+
188+
_createClass(_class, [{
189+
key: 'render',
190+
value: function render() {
191+
return _react2.default.createElement('div', { id: _config.wrapper });
192+
}
193+
}]);
194+
195+
return _class;
196+
}(_react2.default.Component);
197+
198+
// mount toast to wrapper dom
199+
200+
201+
exports.default = _class;
202+
function mountToast(text, type, config) {
203+
_reactDom2.default.render(_react2.default.createElement(Toast, _extends({ text: text, type: type }, config)), document.getElementById(_config.wrapper));
204+
}
205+
206+
// un mount toast to wrapper dom
207+
function umountToast() {
208+
_reactDom2.default.unmountComponentAtNode(document.getElementById(_config.wrapper));
209+
}
210+
211+
// show animated toast
212+
function show(text) {
213+
var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'info';
214+
var config = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
215+
216+
var newConfig = (0, _objectAssign2.default)({}, _config.options, config);
217+
if (!document.getElementById(_config.wrapper).hasChildNodes()) {
218+
// mount toast
219+
mountToast(text, type, newConfig);
220+
// un mount after timeout
221+
setTimeout(function () {
222+
umountToast();
223+
}, newConfig.timeout + _config.duration);
224+
return true;
225+
}
226+
return false;
227+
}
228+
229+
// export methods what dispatch toast
230+
var toast = exports.toast = {
231+
show: show
232+
};

0 commit comments

Comments
 (0)