@sky-mavis/tanto-widget/dist/cjs/components/qr-code/AnimatedQRCode.cjs

Tanto Widget

'use strict';

var _styled = require('@emotion/styled/base');
var jsxRuntime = require('@emotion/react/jsx-runtime');
var react = require('motion/react');
var m = require('motion/react-m');
var constants = require('./constants.cjs');
var QRCode = require('./QRCode.cjs');
var QRCodePlaceholder = require('./QRCodePlaceholder.cjs');

function _interopNamespaceDefault(e) {
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n.default = e;
  return Object.freeze(n);
}

var m__namespace = /*#__PURE__*/_interopNamespaceDefault(m);

const Container = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
  target: "evdnne60"
} : {
  target: "evdnne60",
  label: "Container"
})({
  position: 'relative',
  overflow: 'hidden',
  width: constants.SIZE,
  height: constants.SIZE
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkFuaW1hdGVkUVJDb2RlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPa0IiLCJmaWxlIjoiQW5pbWF0ZWRRUkNvZGUudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsganN4IGFzIF9qc3ggfSBmcm9tIFwiQGVtb3Rpb24vcmVhY3QvanN4LXJ1bnRpbWVcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IEFuaW1hdGVQcmVzZW5jZSB9IGZyb20gJ21vdGlvbi9yZWFjdCc7XG5pbXBvcnQgKiBhcyBtIGZyb20gJ21vdGlvbi9yZWFjdC1tJztcbmltcG9ydCB7IFNJWkUsIFRSQU5TSVRJT05fRFVSQVRJT04gfSBmcm9tICcuL2NvbnN0YW50cyc7XG5pbXBvcnQgeyBRUkNvZGUgfSBmcm9tICcuL1FSQ29kZSc7XG5pbXBvcnQgeyBRUkNvZGVQbGFjZWhvbGRlciB9IGZyb20gJy4vUVJDb2RlUGxhY2Vob2xkZXInO1xuY29uc3QgQ29udGFpbmVyID0gc3R5bGVkLmRpdih7XG4gICAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG4gICAgb3ZlcmZsb3c6ICdoaWRkZW4nLFxuICAgIHdpZHRoOiBTSVpFLFxuICAgIGhlaWdodDogU0laRSxcbn0pO1xuZXhwb3J0IGZ1bmN0aW9uIEFuaW1hdGVkUVJDb2RlKHsgdmFsdWUgfSkge1xuICAgIHJldHVybiAoX2pzeChDb250YWluZXIsIHsgY2hpbGRyZW46IF9qc3goQW5pbWF0ZVByZXNlbmNlLCB7IGluaXRpYWw6IGZhbHNlLCBtb2RlOiBcInBvcExheW91dFwiLCBjaGlsZHJlbjogdmFsdWUgPyAoX2pzeChtLmRpdiwgeyBpbml0aWFsOiB7IG9wYWNpdHk6IDAgfSwgYW5pbWF0ZTogeyBvcGFjaXR5OiAxIH0sIGV4aXQ6IHsgb3BhY2l0eTogMCB9LCB0cmFuc2l0aW9uOiB7IGR1cmF0aW9uOiBUUkFOU0lUSU9OX0RVUkFUSU9OIH0sIGNoaWxkcmVuOiBfanN4KFFSQ29kZSwgeyB2YWx1ZTogdmFsdWUgfSkgfSwgYHFyLSR7dmFsdWV9YCkpIDogKF9qc3gobS5kaXYsIHsgaW5pdGlhbDogeyBvcGFjaXR5OiAxIH0sIGFuaW1hdGU6IHsgb3BhY2l0eTogMSB9LCBleGl0OiB7IG9wYWNpdHk6IDAgfSwgdHJhbnNpdGlvbjogeyBkdXJhdGlvbjogVFJBTlNJVElPTl9EVVJBVElPTiB9LCBjaGlsZHJlbjogX2pzeChRUkNvZGVQbGFjZWhvbGRlciwge30pIH0sIFwicGxhY2Vob2xkZXJcIikpIH0pIH0pKTtcbn1cbiJdfQ== */");
function AnimatedQRCode({
  value
}) {
  return jsxRuntime.jsx(Container, {
    children: jsxRuntime.jsx(react.AnimatePresence, {
      initial: false,
      mode: "popLayout",
      children: value ? jsxRuntime.jsx(m__namespace.div, {
        initial: {
          opacity: 0
        },
        animate: {
          opacity: 1
        },
        exit: {
          opacity: 0
        },
        transition: {
          duration: constants.TRANSITION_DURATION
        },
        children: jsxRuntime.jsx(QRCode.QRCode, {
          value: value
        })
      }, `qr-${value}`) : jsxRuntime.jsx(m__namespace.div, {
        initial: {
          opacity: 1
        },
        animate: {
          opacity: 1
        },
        exit: {
          opacity: 0
        },
        transition: {
          duration: constants.TRANSITION_DURATION
        },
        children: jsxRuntime.jsx(QRCodePlaceholder.QRCodePlaceholder, {})
      }, "placeholder")
    })
  });
}

exports.AnimatedQRCode = AnimatedQRCode;