@semcore/d3-chart 1.0.0-8 → 1.2.0

package/lib/cjs/Bar.js

@@ -21,35 +21,38 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _core = require("@semcore/core");
 
 var _react = _interopRequireDefault(require("react"));
 
-var _core = require("@semcore/core");
-
 var _createElement = _interopRequireDefault(require("./createElement"));
 
+var _ClipPath = _interopRequireDefault(require("./ClipPath"));
+
+var _uniqueID = _interopRequireDefault(require("@semcore/utils/lib/uniqueID"));
+
+var _d3Transition = require("d3-transition");
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(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; } }
 
 /*__reshadow-styles__:"./style/bar.shadow.css"*/
-var _ref = (
+var style = (
 /*__reshadow_css_start__*/
-(0, _core.__css__)(
+_core.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 = (0, _extends2["default"])({}, _ref);
-
-var styled_c8 = (0, _core.create)([]);
+  "__SBar": "___SBar_1u1r9_gg_",
+  "--color": "--color_10kcl1b",
+  "--duration": "--duration_10kcl1b",
+  "_hide": "__hide_1u1r9_gg_",
+  "__SBackground": "___SBackground_1u1r9_gg_"
+});
 
 var BarRoot = /*#__PURE__*/function (_Component) {
   (0, _inherits2["default"])(BarRoot, _Component);
@@ -72,42 +75,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 = (0, _d3Transition.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 = (0, _slicedToArray2["default"])(scale, 2),
           xScale = _scale[0],
           yScale = _scale[1];
 
-      return data.map(function (d, i) {
-        var _d$y, _d$y2;
-
-        return (0, _core.styled)(((0, _core.set)([styled_c8, styles]), /*#__PURE__*/_react["default"].createElement(SBar, (0, _core.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 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].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["default"].createElement(_react["default"].Fragment, null, data.map(this.renderBar.bind(this)), duration && /*#__PURE__*/_react["default"].createElement(_ClipPath["default"], {
+        key: "".concat(uid, "-animation"),
+        id: uid,
+        x: "0",
+        y: size[1],
+        width: size[0],
+        height: "".concat(size[1], "px")
+      }));
     }
   }]);
   return BarRoot;
@@ -115,13 +159,16 @@ var BarRoot = /*#__PURE__*/function (_Component) {
 
 (0, _defineProperty2["default"])(BarRoot, "displayName", 'Bar');
 (0, _defineProperty2["default"])(BarRoot, "style", style);
+(0, _defineProperty2["default"])(BarRoot, "enhance", [(0, _uniqueID["default"])()]);
 (0, _defineProperty2["default"])(BarRoot, "defaultProps", {
   color: '#50aef4',
-  offset: [0, 0]
+  offset: [0, 0],
+  duration: 500
 });
-var styled_12c = (0, _core.create)([]);
 
 function Background(props) {
+  var _ref2;
+
   var SBackground = props.Element,
       styles = props.styles,
       scale = props.scale,
@@ -132,14 +179,14 @@ function Background(props) {
       yScale = _scale2[1];
 
   var yRange = yScale.range();
-  return (0, _core.styled)(((0, _core.set)([styled_12c, styles]), /*#__PURE__*/_react["default"].createElement(SBackground, (0, _core.map)("SBackground", {
-    render: "rect",
-    childrenPosition: "above",
-    width: xScale.bandwidth(),
-    height: yRange[0] - yRange[1],
-    x: xScale(value),
-    y: yRange[1]
-  }))));
+  return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SBackground, _ref2.cn("SBackground", {
+    "render": "rect",
+    "childrenPosition": "above",
+    "width": xScale.bandwidth(),
+    "height": yRange[0] - yRange[1],
+    "x": xScale(value),
+    "y": yRange[1]
+  }));
 }
 
 var _default = (0, _createElement["default"])(BarRoot, {

package/lib/cjs/Bar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Bar.js"],"names":["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","Component","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":["BarRoot","props","index","asProps","x","data","value","duration","uid","selectRect","selection","selectAll","selectRectNode","node","getAttribute","transition","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","Component","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/cjs/ClipPath.js

@@ -0,0 +1,110 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _core = _interopRequireWildcard(require("@semcore/core"));
+
+var _propsForElement = _interopRequireDefault(require("@semcore/utils/lib/propsForElement"));
+
+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) { (0, _defineProperty2["default"])(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 = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(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; } }
+
+var ClipPath = /*#__PURE__*/function (_Component) {
+  (0, _inherits2["default"])(ClipPath, _Component);
+
+  var _super = _createSuper(ClipPath);
+
+  function ClipPath() {
+    var _this;
+
+    (0, _classCallCheck2["default"])(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));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "refClipPath", /*#__PURE__*/_react["default"].createRef());
+    return _this;
+  }
+
+  (0, _createClass2["default"])(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 = (0, _objectWithoutProperties2["default"])(_this$asProps2, ["id", "transition", "tag", "style", "className"]);
+      return /*#__PURE__*/_react["default"].createElement("clipPath", {
+        ref: this.refClipPath,
+        id: id
+      }, /*#__PURE__*/_react["default"].createElement(Tag, (0, _extends2["default"])({
+        style: _objectSpread(_objectSpread({}, style), {}, {
+          transition: transition
+        })
+      }, (0, _propsForElement["default"])(other, Tag))));
+    }
+  }]);
+  return ClipPath;
+}(_core.Component);
+
+(0, _defineProperty2["default"])(ClipPath, "defaultProps", {
+  tag: 'rect',
+  id: '',
+  transition: '',
+  setAttributeTag: null
+});
+
+var _default = (0, _core["default"])(ClipPath);
+
+exports["default"] = _default;
+//# sourceMappingURL=ClipPath.js.map

package/lib/cjs/ClipPath.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ClipPath.js"],"names":["ClipPath","React","createRef","asProps","id","tag","setAttributeTag","document","querySelector","svg","closest","Array","from","querySelectorAll","forEach","node","getTotalLength","transition","Tag","style","className","other","refClipPath","Component"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;IAEMA,Q;;;;;;;;;;;;;;;iHAQUC,kBAAMC,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,gCAAC,GAAD;AAAK,QAAA,KAAK,kCAAOe,KAAP;AAAcF,UAAAA,UAAU,EAAVA;AAAd;AAAV,SAA0C,iCAAgBI,KAAhB,EAAuBH,GAAvB,CAA1C,EADF,CADF;AAKD;;;EA5BoBK,e;;iCAAjBvB,Q,kBACkB;AACpBK,EAAAA,GAAG,EAAE,MADe;AAEpBD,EAAAA,EAAE,EAAE,EAFgB;AAGpBa,EAAAA,UAAU,EAAE,EAHQ;AAIpBX,EAAAA,eAAe,EAAE;AAJG,C;;eA8BT,sBAAgBN,QAAhB,C","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"}