ac-patterns/dist/signature.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _preact = require("preact");

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

class AnimatedPath extends _preact.Component {
  constructor(props) {
    super(props);
    this.state = {
      firstRender: true,
      length: 0
    };
  }

  componentDidMount() {
    setTimeout(() => {
      const length = Math.round(this.base.getTotalLength());
      this.setState({
        length
      });
      setTimeout(() => {
        this.setState({
          firstRender: false
        });
      }, 100);
    }, 100);
  }

  render({
    path,
    animate
  }, {
    firstRender,
    length
  }) {
    if (!animate) {
      return (0, _preact.h)("path", {
        d: path,
        fill: "none",
        stroke: "black",
        "stroke-width": "5"
      });
    }

    return (0, _preact.h)("path", {
      key: length ? 'real' : 'fake',
      d: path,
      fill: "none",
      stroke: length ? 'black' : 'none',
      "stroke-width": "5",
      style: {
        transitionDuration: '1s',
        transitionDelay: '.25s',
        transitionProperty: 'stroke-dashoffset',
        strokeDashoffset: firstRender ? length : 0,
        strokeDasharray: length
      }
    });
  }

}

var _default = (_ref) => {
  let {
    path,
    width = '100',
    animate
  } = _ref,
      rest = _objectWithoutProperties(_ref, ["path", "width", "animate"]);

  return (0, _preact.h)("svg", _extends({
    width: width,
    height: width / 2,
    viewBox: "0 0 800 400"
  }, rest), (0, _preact.h)(AnimatedPath, {
    key: path.slice(0, 10),
    path: path,
    animate: animate
  }));
};

exports.default = _default;