@stokr/components-library/dist/components/Button/GlareButton.js

STOKR - Components Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _reactVisibilitySensor = _interopRequireDefault(require("react-visibility-sensor"));
var _Button = _interopRequireDefault(require("./Button.styles"));
var _colors = _interopRequireDefault(require("../../styles/colors"));
const _excluded = ["children", "nowrap", "onClick", "disabled", "fullWidth", "disabledColor", "buttonId", "className", "backgroundColor", "textColor", "borderColor", "glareColorDark", "glareColorLight", "animationDuration"];
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
// Configuration for visual styling
const config = {
  colorDark: 'rgb(41, 112, 225)',
  colorLight: '#9bfcfd',
  colorFooter: _colors.default.blue,
  strokeWidth: 2,
  padding: 5,
  baseHeight: 50
};

// Animation for the glare effect
const createGlareAnimation = function () {
  let duration = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 4;
  return (0, _styledComponents.keyframes)(["0%{width:0;}50%{width:200%;}75%{opacity:1;}100%{width:400%;opacity:0;}"]);
};

// Styled components
const ButtonWrapper = _styledComponents.default.div.withConfig({
  displayName: "GlareButton__ButtonWrapper",
  componentId: "sc-1fjbp4c-0"
})(["position:relative;display:inline-block;", " ", ""], _ref => {
  let {
    nowrap
  } = _ref;
  return !nowrap && (0, _styledComponents.css)(["display:block;position:absolute;top:0;left:50%;transform:translate3d(-50%,-50%,0);"]);
}, _ref2 => {
  let {
    fullWidth
  } = _ref2;
  return fullWidth && (0, _styledComponents.css)(["width:100%;"]);
});
const StyledButton = (0, _styledComponents.default)(_Button.default).withConfig({
  displayName: "GlareButton__StyledButton",
  componentId: "sc-1fjbp4c-1"
})(["position:relative;margin:", "px;background-color:", ";color:", ";border-color:", ";", " &:disabled{background-color:", " !important;color:rgba(255,255,255,0.5) !important;border-color:#555 !important;}"], config.padding, props => props.backgroundColor || 'inherit', props => props.textColor || 'inherit', props => props.borderColor || 'inherit', _ref3 => {
  let {
    fullWidth
  } = _ref3;
  return fullWidth && (0, _styledComponents.css)(["width:calc(100% - ", "px);"], config.padding * 2);
}, props => props.disabledColor || '#333');
const ButtonGlare = _styledComponents.default.svg.withConfig({
  displayName: "GlareButton__ButtonGlare",
  componentId: "sc-1fjbp4c-2"
})(["position:absolute;left:0;top:0;width:100%;height:100%;"]);
const GlareShape = _styledComponents.default.rect.withConfig({
  displayName: "GlareButton__GlareShape",
  componentId: "sc-1fjbp4c-3"
})(["animation:", " ", "s linear infinite;"], props => createGlareAnimation(props.animationDuration), props => props.animationDuration || 4);
const GlareButton = _ref4 => {
  let {
      children,
      nowrap = false,
      onClick,
      disabled = false,
      fullWidth = false,
      disabledColor = '#333',
      buttonId = 'glare-button',
      className,
      backgroundColor,
      textColor,
      borderColor,
      glareColorDark = config.colorDark,
      glareColorLight = config.colorLight,
      animationDuration = 4
    } = _ref4,
    props = _objectWithoutProperties(_ref4, _excluded);
  const [isButtonVisible, setIsButtonVisible] = (0, _react.useState)(false);
  const [dimensions, setDimensions] = (0, _react.useState)({
    width: 295,
    height: config.baseHeight
  });
  const buttonRef = (0, _react.useRef)(null);
  const wrapperRef = (0, _react.useRef)(null);
  const observerRef = (0, _react.useRef)(null);
  const mediaQueryRef = (0, _react.useRef)(null);

  // Generate unique IDs for SVG elements
  const ids = (0, _react.useRef)({
    linearGradient: "gradient-".concat(Math.random().toString(32).substr(2)),
    fadeGradient: "fade-gradient-".concat(Math.random().toString(32).substr(2)),
    staticMask: "static-mask-".concat(Math.random().toString(32).substr(2)),
    mask: "mask-".concat(Math.random().toString(32).substr(2)),
    fadeMask: "fade-mask-".concat(Math.random().toString(32).substr(2))
  });

  // Update button dimensions when size changes
  const updateDimensions = () => {
    if (!buttonRef.current || !wrapperRef.current) return;
    const buttonRect = buttonRef.current.getBoundingClientRect();
    setDimensions({
      width: buttonRect.width + config.padding * 2,
      height: buttonRect.height + config.padding * 2
    });
  };

  // Handle visibility changes
  const handleButtonVisibility = isVisible => {
    setIsButtonVisible(isVisible);
  };

  // Setup resize observers and media query listeners
  (0, _react.useEffect)(() => {
    // Media query for responsive design
    mediaQueryRef.current = window.matchMedia('(max-width: 768px)');
    const handleMediaChange = event => {
      setTimeout(updateDimensions, 400);
    };
    mediaQueryRef.current.addEventListener('change', handleMediaChange);

    // Resize observer for button size changes
    observerRef.current = new ResizeObserver(updateDimensions);
    if (buttonRef.current) {
      observerRef.current.observe(buttonRef.current);
      updateDimensions(); // Initial dimensions calculation
    }
    return () => {
      mediaQueryRef.current.removeEventListener('change', handleMediaChange);
      if (observerRef.current) {
        observerRef.current.disconnect();
      }
    };
  }, []);
  return /*#__PURE__*/_react.default.createElement(_reactVisibilitySensor.default, {
    onChange: handleButtonVisibility,
    partialVisibility: true
  }, /*#__PURE__*/_react.default.createElement(ButtonWrapper, {
    ref: wrapperRef,
    nowrap: nowrap,
    fullWidth: fullWidth,
    className: className
  }, /*#__PURE__*/_react.default.createElement(ButtonGlare, {
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: "0 0 ".concat(dimensions.width, " ").concat(dimensions.height),
    preserveAspectRatio: "none"
  }, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("filter", {
    id: "glow",
    x: "-50%",
    y: "-50%",
    width: "200%",
    height: "200%"
  }, /*#__PURE__*/_react.default.createElement("feGaussianBlur", {
    stdDeviation: "100",
    result: "coloredBlur"
  }), /*#__PURE__*/_react.default.createElement("feMerge", null, /*#__PURE__*/_react.default.createElement("feMergeNode", {
    in: "coloredBlur"
  }))), /*#__PURE__*/_react.default.createElement("linearGradient", {
    id: "".concat(ids.current.linearGradient),
    x1: "0%",
    y1: "50%",
    x2: "100%",
    y2: "50%"
  }, /*#__PURE__*/_react.default.createElement("stop", {
    offset: "0%",
    stopColor: glareColorDark,
    stopOpacity: "0"
  }), /*#__PURE__*/_react.default.createElement("stop", {
    offset: "20%",
    stopColor: glareColorDark,
    stopOpacity: "1"
  }), /*#__PURE__*/_react.default.createElement("stop", {
    offset: "40%",
    stopColor: glareColorDark
  }), /*#__PURE__*/_react.default.createElement("stop", {
    offset: "60%",
    stopColor: glareColorLight
  }), /*#__PURE__*/_react.default.createElement("stop", {
    offset: "80%",
    stopColor: glareColorDark
  }), /*#__PURE__*/_react.default.createElement("stop", {
    offset: "100%",
    stopColor: glareColorDark,
    stopOpacity: "0"
  })), /*#__PURE__*/_react.default.createElement("linearGradient", {
    id: "".concat(ids.current.fadeGradient),
    x1: "0%",
    y1: "25%",
    x2: "0%",
    y2: "100%"
  }, /*#__PURE__*/_react.default.createElement("stop", {
    offset: "0",
    stopColor: "white",
    stopOpacity: "1"
  }), /*#__PURE__*/_react.default.createElement("stop", {
    offset: "1",
    stopColor: "white",
    stopOpacity: "0"
  })), /*#__PURE__*/_react.default.createElement("mask", {
    id: "".concat(ids.current.staticMask)
  }, /*#__PURE__*/_react.default.createElement("rect", {
    x: config.strokeWidth,
    y: config.strokeWidth,
    width: dimensions.width - config.strokeWidth * 2,
    height: dimensions.height - config.strokeWidth * 2,
    rx: (dimensions.height - config.strokeWidth * 2) / 2,
    ry: (dimensions.height - config.strokeWidth * 2) / 2,
    stroke: "#FFFFFF",
    strokeWidth: config.strokeWidth + 1,
    fill: "none"
  })), /*#__PURE__*/_react.default.createElement("mask", {
    id: "".concat(ids.current.mask)
  }, /*#__PURE__*/_react.default.createElement("rect", {
    x: config.strokeWidth,
    y: config.strokeWidth,
    width: dimensions.width - config.strokeWidth * 2,
    height: dimensions.height - config.strokeWidth * 2,
    rx: (dimensions.height - config.strokeWidth * 2) / 2,
    ry: (dimensions.height - config.strokeWidth * 2) / 2,
    stroke: "#FFFFFF",
    strokeWidth: config.strokeWidth + 1
  })), /*#__PURE__*/_react.default.createElement("mask", {
    id: "".concat(ids.current.fadeMask)
  }, /*#__PURE__*/_react.default.createElement("rect", {
    x: config.strokeWidth,
    y: config.strokeWidth,
    width: dimensions.width - config.strokeWidth * 2,
    height: dimensions.height - config.strokeWidth * 2,
    rx: (dimensions.height - config.strokeWidth * 2) / 2,
    ry: (dimensions.height - config.strokeWidth * 2) / 2,
    fill: "url(#".concat(ids.current.fadeGradient, ")")
  }))), /*#__PURE__*/_react.default.createElement("rect", {
    x: "0",
    y: "0",
    width: dimensions.width,
    height: dimensions.height,
    fill: glareColorDark,
    mask: "url(#".concat(ids.current.staticMask, ")"),
    filter: "url(#glow)"
  }), isButtonVisible && /*#__PURE__*/_react.default.createElement("g", {
    mask: "url(#".concat(ids.current.fadeMask, ")")
  }, /*#__PURE__*/_react.default.createElement(GlareShape, {
    x: dimensions.width * -0.5,
    y: config.strokeWidth,
    width: dimensions.width * 2.5,
    height: dimensions.height - config.strokeWidth * 2,
    fill: "url(#".concat(ids.current.linearGradient, ")"),
    mask: "url(#".concat(ids.current.mask, ")"),
    animationDuration: animationDuration
  }))), /*#__PURE__*/_react.default.createElement(StyledButton, _extends({
    beauty: true,
    disabled: disabled,
    id: buttonId,
    onClick: onClick,
    fullWidth: fullWidth,
    disabledColor: disabledColor,
    backgroundColor: backgroundColor,
    textColor: textColor,
    borderColor: borderColor,
    ref: buttonRef
  }, props), children)));
};
GlareButton.propTypes = {
  children: _propTypes.default.node.isRequired,
  nowrap: _propTypes.default.bool,
  onClick: _propTypes.default.func.isRequired,
  disabled: _propTypes.default.bool,
  fullWidth: _propTypes.default.bool,
  disabledColor: _propTypes.default.string,
  buttonId: _propTypes.default.string,
  className: _propTypes.default.string,
  backgroundColor: _propTypes.default.string,
  textColor: _propTypes.default.string,
  borderColor: _propTypes.default.string,
  glareColorDark: _propTypes.default.string,
  glareColorLight: _propTypes.default.string,
  animationDuration: _propTypes.default.number
};
var _default = exports.default = GlareButton;