1 | 'use strict';
|
---|
2 |
|
---|
3 | var addonPipe = require('./pipe').addon;
|
---|
4 |
|
---|
5 | // eslint-disable-next-line no-undef
|
---|
6 | var sNano = typeof Symbol === 'object' ? Symbol('nano-css') : '@@nano-css';
|
---|
7 |
|
---|
8 | exports.addon = function (renderer) {
|
---|
9 | if (!renderer.pipe) {
|
---|
10 | addonPipe(renderer);
|
---|
11 | }
|
---|
12 |
|
---|
13 | if (process.env.NODE_ENV !== 'production') {
|
---|
14 | require('./__dev__/warnOnMissingDependencies')('ref', renderer, ['pipe']);
|
---|
15 | }
|
---|
16 |
|
---|
17 | renderer.createRef = function () {
|
---|
18 | var pipe = renderer.pipe();
|
---|
19 | var el = null;
|
---|
20 | var ref = function (element) {
|
---|
21 | if (el) el = element;
|
---|
22 | else {
|
---|
23 | el = null;
|
---|
24 | pipe.remove();
|
---|
25 | }
|
---|
26 | };
|
---|
27 | var obj = {ref: ref};
|
---|
28 |
|
---|
29 | obj[pipe.attr] = '';
|
---|
30 |
|
---|
31 | return function (css) {
|
---|
32 | pipe.css(css);
|
---|
33 | return obj;
|
---|
34 | };
|
---|
35 | };
|
---|
36 |
|
---|
37 | renderer.ref = function (css, originalRef) {
|
---|
38 | if (process.env.NODE_ENV !== 'production') {
|
---|
39 | if (originalRef && typeof originalRef !== 'function') {
|
---|
40 | console.error(
|
---|
41 | 'nano-css "ref" function expects argument to be a ref function, "' + (typeof originalRef) + '" provided.'
|
---|
42 | );
|
---|
43 | }
|
---|
44 | }
|
---|
45 |
|
---|
46 | var obj = {
|
---|
47 | ref: function (el) {
|
---|
48 | if (originalRef) originalRef(el);
|
---|
49 | if (!el) return;
|
---|
50 |
|
---|
51 | var pipe = el[sNano];
|
---|
52 |
|
---|
53 | if (!pipe) {
|
---|
54 | el[sNano] = pipe = renderer.pipe();
|
---|
55 | el.setAttribute(pipe.attr, '');
|
---|
56 |
|
---|
57 | // Add unmount logic
|
---|
58 |
|
---|
59 | var observer = new MutationObserver(function (mutations) {
|
---|
60 | for (var i = 0; i < mutations.length; i++) {
|
---|
61 | var mutation = mutations[i];
|
---|
62 |
|
---|
63 | if (mutation.removedNodes.length) {
|
---|
64 | var nodes = mutation.removedNodes;
|
---|
65 |
|
---|
66 | for (var j = 0; j < nodes.length; j++) {
|
---|
67 | if (nodes[j] === el) {
|
---|
68 | pipe.remove();
|
---|
69 | delete el[sNano];
|
---|
70 | observer.disconnect();
|
---|
71 | return;
|
---|
72 | }
|
---|
73 | }
|
---|
74 | }
|
---|
75 | }
|
---|
76 | });
|
---|
77 |
|
---|
78 | observer.observe(el.parentNode, {childList: true});
|
---|
79 | }
|
---|
80 |
|
---|
81 | pipe.css(css);
|
---|
82 | }
|
---|
83 | };
|
---|
84 |
|
---|
85 | return obj;
|
---|
86 | };
|
---|
87 | };
|
---|