Skip to content

Commit bb9b412

Browse files
dkozardkozar
committed
Added Demo 6.
1 parent 56eda79 commit bb9b412

File tree

16 files changed

+321
-39
lines changed

16 files changed

+321
-39
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ http://dkozar.github.io/react-liberator/
2121
* [Demo 3 - Activate / deactivate](http://dkozar.github.io/react-liberator/#/demo3)
2222
* [Demo 4 - Maximized popup](http://dkozar.github.io/react-liberator/#/demo4)
2323
* [Demo 5 - Full screen sync](http://dkozar.github.io/react-liberator/#/demo5)
24+
* [Demo 6 - Multiple children](http://dkozar.github.io/react-liberator/#/demo6)
2425

2526
## :zap: Usage
2627

‎build/components/Demo5.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ var Demo5 = function (_Component) {
153153
) : null,
154154
popup = _react2.default.createElement(
155155
_reactBootstrap.Panel,
156-
{ bsStyle: 'primary', className: 'indent-top', header: this.props.params.title || panelTitle },
156+
{ bsStyle: 'primary', className: 'indent-top', header: panelTitle },
157157
alert,
158158
_react2.default.createElement(
159159
_reactBootstrap.Button,
@@ -164,7 +164,7 @@ var Demo5 = function (_Component) {
164164
),
165165
_react2.default.createElement('br', null),
166166
_react2.default.createElement('br', null),
167-
this.props.params.text || text
167+
text
168168
);
169169

170170
return _react2.default.createElement(

‎build/components/Demo6.js‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
'use strict';
2+
3+
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; }; }();
4+
5+
Object.defineProperty(exports, "__esModule", {
6+
value: true
7+
});
8+
9+
var _react = require('react');
10+
11+
var _react2 = _interopRequireDefault(_react);
12+
13+
var _reactBootstrap = require('react-bootstrap');
14+
15+
var _Toolbar = require('./Toolbar');
16+
17+
var _Toolbar2 = _interopRequireDefault(_Toolbar);
18+
19+
var _Liberator = require('./Liberator');
20+
21+
var _Liberator2 = _interopRequireDefault(_Liberator);
22+
23+
var _SourceLink = require('./SourceLink');
24+
25+
var _SourceLink2 = _interopRequireDefault(_SourceLink);
26+
27+
var _reactWrappyText = require('react-wrappy-text');
28+
29+
var _reactWrappyText2 = _interopRequireDefault(_reactWrappyText);
30+
31+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
32+
33+
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
34+
35+
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; }
36+
37+
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; }
38+
39+
require('./../styles/demo6.css');
40+
41+
var Demo6 = function (_Component) {
42+
_inherits(Demo6, _Component);
43+
44+
function Demo6(props) {
45+
_classCallCheck(this, Demo6);
46+
47+
var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Demo6).call(this, props));
48+
49+
_this.state = {
50+
active: false,
51+
visible: true
52+
};
53+
54+
_this.onButtonClick = _this.onButtonClick.bind(_this);
55+
_this.changeVisibility = _this.changeVisibility.bind(_this);
56+
return _this;
57+
}
58+
59+
_createClass(Demo6, [{
60+
key: 'onButtonClick',
61+
value: function onButtonClick() {
62+
this.setState({
63+
active: !this.state.active
64+
});
65+
}
66+
}, {
67+
key: 'changeVisibility',
68+
value: function changeVisibility() {
69+
this.setState({
70+
visible: !this.state.visible
71+
});
72+
}
73+
}, {
74+
key: 'render',
75+
value: function render() {
76+
var active = this.state.active,
77+
visible = this.state.visible,
78+
className = 'popup ' + (active ? 'green' : 'red'),
79+
buttonIcon = active ? _react2.default.createElement('span', { className: 'glyphicon glyphicon-star' }) : _react2.default.createElement('span', { className: 'glyphicon glyphicon-star-empty' }),
80+
buttonText = active ? 'Active: true' : 'Active: false',
81+
buttonIcon2 = visible ? _react2.default.createElement('span', { className: 'glyphicon glyphicon-star' }) : _react2.default.createElement('span', { className: 'glyphicon glyphicon-star-empty' }),
82+
buttonText2 = visible ? 'Visible: true' : 'Visible: false',
83+
classNameLeft = className + ' left',
84+
classNameRight = className + ' right';
85+
86+
return _react2.default.createElement(
87+
'div',
88+
null,
89+
_react2.default.createElement(
90+
_reactBootstrap.Alert,
91+
{ bsStyle: 'success' },
92+
_react2.default.createElement(
93+
'h3',
94+
null,
95+
_react2.default.createElement(
96+
_reactWrappyText2.default,
97+
null,
98+
'Demo 6 - Multiple children'
99+
)
100+
),
101+
_react2.default.createElement('br', null),
102+
_react2.default.createElement(
103+
'strong',
104+
null,
105+
'Click the buttons to liberate both children.'
106+
),
107+
_react2.default.createElement('br', null),
108+
_react2.default.createElement('br', null),
109+
'Two children are wrapped into single Liberator.',
110+
_react2.default.createElement('br', null),
111+
_react2.default.createElement('br', null),
112+
'Both are displayed in the same overlay.',
113+
_react2.default.createElement('br', null),
114+
_react2.default.createElement('br', null),
115+
_react2.default.createElement(
116+
_SourceLink2.default,
117+
null,
118+
'Demo6.js'
119+
),
120+
_react2.default.createElement('br', null),
121+
_react2.default.createElement('br', null)
122+
),
123+
_react2.default.createElement(
124+
_reactBootstrap.Button,
125+
{ bsStyle: 'primary', bsSize: 'large', onClick: this.onButtonClick },
126+
buttonIcon,
127+
' ',
128+
buttonText
129+
),
130+
_react2.default.createElement(
131+
_reactBootstrap.Button,
132+
{ bsSize: 'large', className: 'indent-left', onClick: this.changeVisibility },
133+
buttonIcon2,
134+
' ',
135+
buttonText2
136+
),
137+
_react2.default.createElement(
138+
_Liberator2.default,
139+
{ active: active, visible: visible },
140+
_react2.default.createElement(
141+
'div',
142+
{ className: classNameLeft },
143+
active ? 'In popup' : 'Normal'
144+
),
145+
_react2.default.createElement(
146+
'div',
147+
{ className: classNameRight },
148+
active ? 'In popup' : 'Normal'
149+
)
150+
)
151+
);
152+
}
153+
}]);
154+
155+
return Demo6;
156+
}(_react.Component);
157+
158+
exports.default = Demo6;

‎build/components/Liberator.js‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
2323
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; }
2424

2525
var DEFAULT_LIBERATOR_LAYER_ID = '___liberator___';
26+
var DEFAULT_LIBERATOR_LAYER_ELEMENT_TYPE = 'div';
2627

2728
var Liberator = function (_Component) {
2829
_inherits(Liberator, _Component);
@@ -55,21 +56,24 @@ var Liberator = function (_Component) {
5556
}, {
5657
key: 'activate',
5758
value: function activate() {
58-
var layerId = this.props.layerId,
59-
layerElement = document.getElementById(layerId),
60-
// layer lookup
61-
wrapperElement;
59+
var layerElement = this.props.layer,
60+
layerId,
61+
wrapperElement;
62+
63+
if (!layerElement) {
64+
layerId = this.props.layerId, layerElement = document.getElementById(layerId); // layer lookup
65+
}
6266

6367
if (!layerElement) {
6468
// if we haven't found the predefined div, we're creating it on the fly
65-
layerElement = document.createElement('div');
66-
layerElement.setAttribute("id", layerId);
69+
layerElement = document.createElement(this.props.layerElementType);
70+
layerElement.setAttribute('id', layerId);
6771
document.body.appendChild(layerElement);
6872
}
6973

7074
this.state.layerElement = layerElement;
7175

72-
// we're creating the wrapper element on the fly
76+
// we're creating a wrapper element on the fly
7377
// we're rendering the component into this element when active
7478
wrapperElement = document.createElement('div');
7579
wrapperElement.className = this.props.className || '';
@@ -165,12 +169,16 @@ exports.default = Liberator;
165169
Liberator.propTypes = {
166170
active: _react2.default.PropTypes.bool,
167171
visible: _react2.default.PropTypes.bool,
172+
layer: _react2.default.PropTypes.node,
168173
layerId: _react2.default.PropTypes.string,
174+
layerElementType: _react2.default.PropTypes.string,
169175
autoCleanup: _react2.default.PropTypes.bool
170176
};
171177
Liberator.defaultProps = {
172178
active: true, // popping up by default
173179
visible: true, // visible by default
180+
layer: null, // we could pass the layer element to render the popup to (takes precedence to layerId/layerElementType),
174181
layerId: DEFAULT_LIBERATOR_LAYER_ID, // the ID of the element to render the popup to,
182+
layerElementType: DEFAULT_LIBERATOR_LAYER_ELEMENT_TYPE, // the type of the element to render the popup to,
175183
autoCleanup: false // automatically destroying the layer when having no child elements
176184
};

‎demo/bundle.js‎

Lines changed: 17 additions & 17 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/bundle.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/styles.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-liberator",
3-
"version": "1.0.10",
3+
"version": "1.0.11",
44
"description": "Liberates React components from the captivity of their siblings",
55
"main": "index.js",
66
"scripts": {

‎src/components/Demo1.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export default class Demo1 extends Component {
3636

3737
onTextChange(text) {
3838
this.setState({
39-
text: text
39+
text
4040
});
4141
}
4242

‎src/components/Demo2.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export default class Demo2 extends Component {
4343

4444
onTextChange(text) {
4545
this.setState({
46-
text: text
46+
text
4747
});
4848
}
4949

0 commit comments

Comments
 (0)