@semcore/d3-chart 1.0.0-8 → 1.2.0

package/lib/es6/Bar.js

@@ -5,33 +5,35 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _extends from "@babel/runtime/helpers/extends";
+import { sstyled as _sstyled } from "@semcore/core";
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 import React from 'react';
-import { Component, styled, css, __css__, set, create, map } from '@semcore/core';
+import { Component, sstyled } from '@semcore/core';
 import createElement from './createElement';
+import ClipPath from './ClipPath';
+import uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';
+import { transition } from 'd3-transition';
 
 /*__reshadow-styles__:"./style/bar.shadow.css"*/
-var _ref = (
+var style = (
 /*__reshadow_css_start__*/
-__css__(
+_sstyled.insert(
 /*__inner_css_start__*/
-".___SBar_1fqx0_gg_.__hide_1fqx0_gg_{display:none}.___SBackground_1fqx0_gg_{fill:#e4ecf1}"
+".___SBar_1u1r9_gg_{fill:var(--color_10kcl1b);transition-property:height,width,y;transition-duration:var(--duration_10kcl1b);transition-timing-function:ease-in-out}.___SBar_1u1r9_gg_.__hide_1u1r9_gg_{display:none}.___SBackground_1u1r9_gg_{fill:#e4ecf1}"
 /*__inner_css_end__*/
-, "1qbp5w9_gg_")
+, "10kcl1b_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SBar": "___SBar_1fqx0_gg_",
-  "_hide": "__hide_1fqx0_gg_",
-  "__SBackground": "___SBackground_1fqx0_gg_"
-}),
-    style = _extends({}, _ref);
-
-var styled_c8 = create([]);
+  "__SBar": "___SBar_1u1r9_gg_",
+  "--color": "--color_10kcl1b",
+  "--duration": "--duration_10kcl1b",
+  "_hide": "__hide_1u1r9_gg_",
+  "__SBackground": "___SBackground_1u1r9_gg_"
+});
 
 var BarRoot = /*#__PURE__*/function (_Component) {
   _inherits(BarRoot, _Component);
@@ -55,42 +57,83 @@ var BarRoot = /*#__PURE__*/function (_Component) {
       };
     }
   }, {
-    key: "render",
-    value: function render() {
-      var SBar = this.Element;
+    key: "animationBar",
+    value: function animationBar() {
       var _this$asProps2 = this.asProps,
-          styles = _this$asProps2.styles,
-          color = _this$asProps2.color,
-          x = _this$asProps2.x,
-          y = _this$asProps2.y,
-          y0 = _this$asProps2.y0,
-          data = _this$asProps2.data,
-          scale = _this$asProps2.scale,
-          hide = _this$asProps2.hide,
-          offset = _this$asProps2.offset;
+          duration = _this$asProps2.duration,
+          uid = _this$asProps2.uid;
+      var selectRect = transition().selection().selectAll("#".concat(uid, " rect"));
+      var selectRectNode = selectRect.node();
+
+      if (duration > 0 && selectRectNode && selectRectNode.getAttribute('y') !== '0') {
+        selectRect.transition().duration(duration).attr('y', 0);
+      }
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.animationBar();
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.animationBar();
+    }
+  }, {
+    key: "renderBar",
+    value: function renderBar(d, i) {
+      var _ref, _d$y, _d$y2;
+
+      var SBar = this.Element;
+      var _this$asProps3 = this.asProps,
+          styles = _this$asProps3.styles,
+          color = _this$asProps3.color,
+          x = _this$asProps3.x,
+          y = _this$asProps3.y,
+          y0 = _this$asProps3.y0,
+          scale = _this$asProps3.scale,
+          hide = _this$asProps3.hide,
+          offset = _this$asProps3.offset,
+          duration = _this$asProps3.duration,
+          uid = _this$asProps3.uid;
 
       var _scale = _slicedToArray(scale, 2),
           xScale = _scale[0],
           yScale = _scale[1];
 
-      return data.map(function (d, i) {
-        var _d$y, _d$y2;
-
-        return styled((set([styled_c8, styles]), /*#__PURE__*/React.createElement(SBar, map("SBar", {
-          key: i,
-          __excludeProps: ['data', 'scale', 'value'],
-          value: d,
-          index: i,
-          render: "rect",
-          childrenPosition: "above",
-          hide: hide,
-          fill: color,
-          width: xScale.bandwidth(),
-          height: Math.abs(yScale(d[y]) - Math.min(yScale(yScale.domain()[0]), yScale((_d$y = d[y0]) !== null && _d$y !== void 0 ? _d$y : 0))),
-          x: xScale(d[x]) + offset[0],
-          y: yScale(Math.max((_d$y2 = d[y0]) !== null && _d$y2 !== void 0 ? _d$y2 : 0, d[y])) + offset[1]
-        }))));
-      });
+      return _ref = sstyled(styles), /*#__PURE__*/React.createElement(SBar, _ref.cn("SBar", {
+        "key": "bar-".concat(i),
+        "render": "rect",
+        "clipPath": "url(#".concat(uid, ")"),
+        "__excludeProps": ['data', 'scale', 'value'],
+        "childrenPosition": "above",
+        "value": d,
+        "index": i,
+        "hide": hide,
+        "color": color,
+        "width": xScale.bandwidth(),
+        "height": Math.abs(yScale(d[y]) - Math.min(yScale(yScale.domain()[0]), yScale((_d$y = d[y0]) !== null && _d$y !== void 0 ? _d$y : 0))),
+        "x": xScale(d[x]) + offset[0],
+        "y": yScale(Math.max((_d$y2 = d[y0]) !== null && _d$y2 !== void 0 ? _d$y2 : 0, d[y])) + offset[1],
+        "use:duration": "".concat(duration, "ms")
+      }));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$asProps4 = this.asProps,
+          data = _this$asProps4.data,
+          uid = _this$asProps4.uid,
+          size = _this$asProps4.size,
+          duration = _this$asProps4.duration;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, data.map(this.renderBar.bind(this)), duration && /*#__PURE__*/React.createElement(ClipPath, {
+        key: "".concat(uid, "-animation"),
+        id: uid,
+        x: "0",
+        y: size[1],
+        width: size[0],
+        height: "".concat(size[1], "px")
+      }));
     }
   }]);
 
@@ -101,14 +144,17 @@ _defineProperty(BarRoot, "displayName", 'Bar');
 
 _defineProperty(BarRoot, "style", style);
 
+_defineProperty(BarRoot, "enhance", [uniqueIDEnhancement()]);
+
 _defineProperty(BarRoot, "defaultProps", {
   color: '#50aef4',
-  offset: [0, 0]
+  offset: [0, 0],
+  duration: 500
 });
 
-var styled_12c = create([]);
-
 function Background(props) {
+  var _ref2;
+
   var SBackground = props.Element,
       styles = props.styles,
       scale = props.scale,
@@ -119,14 +165,14 @@ function Background(props) {
       yScale = _scale2[1];
 
   var yRange = yScale.range();
-  return styled((set([styled_12c, styles]), /*#__PURE__*/React.createElement(SBackground, map("SBackground", {
-    render: "rect",
-    childrenPosition: "above",
-    width: xScale.bandwidth(),
-    height: yRange[0] - yRange[1],
-    x: xScale(value),
-    y: yRange[1]
-  }))));
+  return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(SBackground, _ref2.cn("SBackground", {
+    "render": "rect",
+    "childrenPosition": "above",
+    "width": xScale.bandwidth(),
+    "height": yRange[0] - yRange[1],
+    "x": xScale(value),
+    "y": yRange[1]
+  }));
 }
 
 export default createElement(BarRoot, {

package/lib/es6/Bar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Bar.js"],"names":["React","Component","styled","createElement","BarRoot","props","index","asProps","x","data","value","SBar","Element","styles","color","y","y0","scale","hide","offset","xScale","yScale","map","d","i","bandwidth","Math","abs","min","domain","max","style","Background","SBackground","yRange","range"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Component, styled } from '@semcore/core';\nimport createElement from './createElement';\n\nimport style from './style/bar.shadow.css';\n\nclass BarRoot extends Component {\n  static displayName = 'Bar';\n\n  static style = style;\n\n  static defaultProps = {\n    color: '#50aef4',\n    offset: [0, 0],\n  };\n\n  getBackgroundProps(props, index) {\n    const { x, data } = this.asProps;\n    return {\n      value: data[index][x],\n    };\n  }\n\n  render() {\n    const SBar = this.Element;\n    const { styles, color, x, y, y0, data, scale, hide, offset } = this.asProps;\n\n    const [xScale, yScale] = scale;\n\n    return data.map((d, i) => {\n      return styled(styles)(\n        <SBar\n          key={i}\n          __excludeProps={['data', 'scale', 'value']}\n          value={d}\n          index={i}\n          render=\"rect\"\n          childrenPosition=\"above\"\n          hide={hide}\n          fill={color}\n          // TODO: https://github.com/airbnb/visx/blob/2fa674e7d7fdc9cffea13e8bf644d46dd6f0db5b/packages/visx-shape/src/util/getBandwidth.ts#L3\n          width={xScale.bandwidth()}\n          height={Math.abs(yScale(d[y]) - Math.min(yScale(yScale.domain()[0]), yScale(d[y0] ?? 0)))}\n          x={xScale(d[x]) + offset[0]}\n          y={yScale(Math.max(d[y0] ?? 0, d[y])) + offset[1]}\n        />,\n      );\n    });\n  }\n}\n\nfunction Background(props) {\n  const { Element: SBackground, styles, scale, value } = props;\n\n  const [xScale, yScale] = scale;\n  const yRange = yScale.range();\n\n  return styled(styles)(\n    <SBackground\n      render=\"rect\"\n      childrenPosition=\"above\"\n      width={xScale.bandwidth()}\n      height={yRange[0] - yRange[1]}\n      x={xScale(value)}\n      y={yRange[1]}\n    />,\n  );\n}\n\nexport default createElement(BarRoot, { Background });\n"],"file":"Bar.js"}
+{"version":3,"sources":["../../src/Bar.js"],"names":["React","Component","sstyled","createElement","ClipPath","uniqueIDEnhancement","transition","BarRoot","props","index","asProps","x","data","value","duration","uid","selectRect","selection","selectAll","selectRectNode","node","getAttribute","attr","animationBar","d","i","SBar","Element","styles","color","y","y0","scale","hide","offset","xScale","yScale","bandwidth","Math","abs","min","domain","max","size","map","renderBar","bind","style","Background","SBackground","yRange","range"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Component, sstyled } from '@semcore/core';\nimport createElement from './createElement';\nimport ClipPath from './ClipPath';\nimport uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';\nimport { transition } from 'd3-transition';\n\nimport style from './style/bar.shadow.css';\n\nclass BarRoot extends Component {\n  static displayName = 'Bar';\n  static style = style;\n  static enhance = [uniqueIDEnhancement()];\n\n  static defaultProps = {\n    color: '#50aef4',\n    offset: [0, 0],\n    duration: 500,\n  };\n\n  getBackgroundProps(props, index) {\n    const { x, data } = this.asProps;\n    return {\n      value: data[index][x],\n    };\n  }\n\n  animationBar() {\n    const { duration, uid } = this.asProps;\n    const selectRect = transition()\n      .selection()\n      .selectAll(`#${uid} rect`);\n    const selectRectNode = selectRect.node();\n\n    if (duration > 0 && selectRectNode && selectRectNode.getAttribute('y') !== '0') {\n      selectRect\n        .transition()\n        .duration(duration)\n        .attr('y', 0);\n    }\n  }\n\n  componentDidUpdate() {\n    this.animationBar();\n  }\n\n  componentDidMount() {\n    this.animationBar();\n  }\n\n  renderBar(d, i) {\n    const SBar = this.Element;\n    const { styles, color, x, y, y0, scale, hide, offset, duration, uid } = this.asProps;\n\n    const [xScale, yScale] = scale;\n\n    return sstyled(styles)(\n      <SBar\n        key={`bar-${i}`}\n        render=\"rect\"\n        clipPath={`url(#${uid})`}\n        __excludeProps={['data', 'scale', 'value']}\n        childrenPosition=\"above\"\n        value={d}\n        index={i}\n        hide={hide}\n        color={color}\n        // TODO: https://github.com/airbnb/visx/blob/2fa674e7d7fdc9cffea13e8bf644d46dd6f0db5b/packages/visx-shape/src/util/getBandwidth.ts#L3\n        width={xScale.bandwidth()}\n        height={Math.abs(yScale(d[y]) - Math.min(yScale(yScale.domain()[0]), yScale(d[y0] ?? 0)))}\n        x={xScale(d[x]) + offset[0]}\n        y={yScale(Math.max(d[y0] ?? 0, d[y])) + offset[1]}\n        use:duration={`${duration}ms`}\n      />,\n    );\n  }\n  render() {\n    const { data, uid, size, duration } = this.asProps;\n    return (\n      <>\n        {data.map(this.renderBar.bind(this))}\n        {duration && (\n          <ClipPath\n            key={`${uid}-animation`}\n            id={uid}\n            x=\"0\"\n            y={size[1]}\n            width={size[0]}\n            height={`${size[1]}px`}\n          />\n        )}\n      </>\n    );\n  }\n}\n\nfunction Background(props) {\n  const { Element: SBackground, styles, scale, value } = props;\n\n  const [xScale, yScale] = scale;\n  const yRange = yScale.range();\n\n  return sstyled(styles)(\n    <SBackground\n      render=\"rect\"\n      childrenPosition=\"above\"\n      width={xScale.bandwidth()}\n      height={yRange[0] - yRange[1]}\n      x={xScale(value)}\n      y={yRange[1]}\n    />,\n  );\n}\n\nexport default createElement(BarRoot, { Background });\n"],"file":"Bar.js"}

package/lib/es6/ClipPath.js

@@ -0,0 +1,91 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+import React from 'react';
+import createComponent, { Component } from '@semcore/core';
+import propsForElement from '@semcore/utils/lib/propsForElement';
+
+var ClipPath = /*#__PURE__*/function (_Component) {
+  _inherits(ClipPath, _Component);
+
+  var _super = _createSuper(ClipPath);
+
+  function ClipPath() {
+    var _this;
+
+    _classCallCheck(this, ClipPath);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "refClipPath", /*#__PURE__*/React.createRef());
+
+    return _this;
+  }
+
+  _createClass(ClipPath, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this$asProps = this.asProps,
+          id = _this$asProps.id,
+          tag = _this$asProps.tag,
+          setAttributeTag = _this$asProps.setAttributeTag;
+      if (!document || !document.querySelector("#".concat(id))) return;
+      var svg = document.querySelector("#".concat(id)).closest('svg');
+      Array.from(svg.querySelectorAll("[clip-path=\"url(#".concat(id, ")\"]"))).forEach(function (node) {
+        node && node.getTotalLength && node.getTotalLength();
+      });
+      setAttributeTag && Array.from(document.querySelectorAll("#".concat(id, " ").concat(tag))).forEach(setAttributeTag);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$asProps2 = this.asProps,
+          id = _this$asProps2.id,
+          transition = _this$asProps2.transition,
+          Tag = _this$asProps2.tag,
+          style = _this$asProps2.style,
+          className = _this$asProps2.className,
+          other = _objectWithoutProperties(_this$asProps2, ["id", "transition", "tag", "style", "className"]);
+
+      return /*#__PURE__*/React.createElement("clipPath", {
+        ref: this.refClipPath,
+        id: id
+      }, /*#__PURE__*/React.createElement(Tag, _extends({
+        style: _objectSpread(_objectSpread({}, style), {}, {
+          transition: transition
+        })
+      }, propsForElement(other, Tag))));
+    }
+  }]);
+
+  return ClipPath;
+}(Component);
+
+_defineProperty(ClipPath, "defaultProps", {
+  tag: 'rect',
+  id: '',
+  transition: '',
+  setAttributeTag: null
+});
+
+export default createComponent(ClipPath);
+//# sourceMappingURL=ClipPath.js.map

package/lib/es6/ClipPath.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ClipPath.js"],"names":["React","createComponent","Component","propsForElement","ClipPath","createRef","asProps","id","tag","setAttributeTag","document","querySelector","svg","closest","Array","from","querySelectorAll","forEach","node","getTotalLength","transition","Tag","style","className","other","refClipPath"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,eAAP,IAA0BC,SAA1B,QAA2C,eAA3C;AACA,OAAOC,eAAP,MAA4B,oCAA5B;;IAEMC,Q;;;;;;;;;;;;;;;;+EAQUJ,KAAK,CAACK,SAAN,E;;;;;;;WAEd,6BAAoB;AAAA,0BACmB,KAAKC,OADxB;AAAA,UACVC,EADU,iBACVA,EADU;AAAA,UACNC,GADM,iBACNA,GADM;AAAA,UACDC,eADC,iBACDA,eADC;AAElB,UAAI,CAACC,QAAD,IAAa,CAACA,QAAQ,CAACC,aAAT,YAA2BJ,EAA3B,EAAlB,EAAoD;AACpD,UAAMK,GAAG,GAAGF,QAAQ,CAACC,aAAT,YAA2BJ,EAA3B,GAAiCM,OAAjC,CAAyC,KAAzC,CAAZ;AACAC,MAAAA,KAAK,CAACC,IAAN,CAAWH,GAAG,CAACI,gBAAJ,6BAAyCT,EAAzC,UAAX,EAA8DU,OAA9D,CAAsE,UAACC,IAAD,EAAU;AAC9EA,QAAAA,IAAI,IAAIA,IAAI,CAACC,cAAb,IAA+BD,IAAI,CAACC,cAAL,EAA/B;AACD,OAFD;AAGAV,MAAAA,eAAe,IACbK,KAAK,CAACC,IAAN,CAAWL,QAAQ,CAACM,gBAAT,YAA8BT,EAA9B,cAAoCC,GAApC,EAAX,EAAuDS,OAAvD,CAA+DR,eAA/D,CADF;AAED;;;WAED,kBAAS;AAAA,2BAC0D,KAAKH,OAD/D;AAAA,UACCC,EADD,kBACCA,EADD;AAAA,UACKa,UADL,kBACKA,UADL;AAAA,UACsBC,GADtB,kBACiBb,GADjB;AAAA,UAC2Bc,KAD3B,kBAC2BA,KAD3B;AAAA,UACkCC,SADlC,kBACkCA,SADlC;AAAA,UACgDC,KADhD;;AAEP,0BACE;AAAU,QAAA,GAAG,EAAE,KAAKC,WAApB;AAAiC,QAAA,EAAE,EAAElB;AAArC,sBACE,oBAAC,GAAD;AAAK,QAAA,KAAK,kCAAOe,KAAP;AAAcF,UAAAA,UAAU,EAAVA;AAAd;AAAV,SAA0CjB,eAAe,CAACqB,KAAD,EAAQH,GAAR,CAAzD,EADF,CADF;AAKD;;;;EA5BoBnB,S;;gBAAjBE,Q,kBACkB;AACpBI,EAAAA,GAAG,EAAE,MADe;AAEpBD,EAAAA,EAAE,EAAE,EAFgB;AAGpBa,EAAAA,UAAU,EAAE,EAHQ;AAIpBX,EAAAA,eAAe,EAAE;AAJG,C;;AA8BxB,eAAeR,eAAe,CAACG,QAAD,CAA9B","sourcesContent":["import React from 'react';\nimport createComponent, { Component } from '@semcore/core';\nimport propsForElement from '@semcore/utils/lib/propsForElement';\n\nclass ClipPath extends Component {\n  static defaultProps = {\n    tag: 'rect',\n    id: '',\n    transition: '',\n    setAttributeTag: null,\n  };\n\n  refClipPath = React.createRef();\n\n  componentDidMount() {\n    const { id, tag, setAttributeTag } = this.asProps;\n    if (!document || !document.querySelector(`#${id}`)) return;\n    const svg = document.querySelector(`#${id}`).closest('svg');\n    Array.from(svg.querySelectorAll(`[clip-path=\"url(#${id})\"]`)).forEach((node) => {\n      node && node.getTotalLength && node.getTotalLength();\n    });\n    setAttributeTag &&\n      Array.from(document.querySelectorAll(`#${id} ${tag}`)).forEach(setAttributeTag);\n  }\n\n  render() {\n    const { id, transition, tag: Tag, style, className, ...other } = this.asProps;\n    return (\n      <clipPath ref={this.refClipPath} id={id}>\n        <Tag style={{ ...style, transition }} {...propsForElement(other, Tag)} />\n      </clipPath>\n    );\n  }\n}\n\nexport default createComponent(ClipPath);\n"],"file":"ClipPath.js"}