[d565449] | 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 | };
|
---|