@elvia/elvis-spotlight 1.0.0-beta.3 → 1.2.0

package/dist/react/js/elvia-spotlight.d.ts

@@ -6,10 +6,9 @@ export interface SpotlightPosition {
 export interface SpotlightProps {
     position: SpotlightPosition | undefined;
     radius?: number;
+    hasLockBodyScroll?: boolean;
     className?: string;
-    inlineStyle?: {
-        [style: string]: CSSProperties;
-    };
+    inlineStyle?: CSSProperties;
 }
 declare const Spotlight: FC<SpotlightProps>;
 export default Spotlight;

package/dist/react/js/elvia-spotlight.js

@@ -2,36 +2,62 @@
  * THIS FILE IS AUTOMATICALLY GENERATED AND WILL BE OVERWRITTEN.
  * DO NOT MAKE CHANGES TO THIS FILE DIRECTLY
  */
-import React from 'react';
-import { SpotlightArea, SpotlightCircle } from './styledComponents';
-
-const Spotlight = ({
-  position,
-  radius = 200,
-  className,
-  inlineStyle
-}) => {
-  const hasPosition = position && position.horizontal && position.vertical;
-  return /*#__PURE__*/React.createElement("div", {
-    className: `${hasPosition && className ? className : ''}`,
-    style: hasPosition ? inlineStyle : {}
-  }, hasPosition && /*#__PURE__*/React.createElement(SpotlightArea, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("mask", {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = require("./styledComponents");
+
+var _useLockBodyScroll = require("./useLockBodyScroll");
+
+var _excluded = ["position", "radius", "hasLockBodyScroll", "className", "inlineStyle"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }
+
+var Spotlight = function Spotlight(_ref) {
+  var position = _ref.position,
+      _ref$radius = _ref.radius,
+      radius = _ref$radius === void 0 ? 200 : _ref$radius,
+      _ref$hasLockBodyScrol = _ref.hasLockBodyScroll,
+      hasLockBodyScroll = _ref$hasLockBodyScrol === void 0 ? true : _ref$hasLockBodyScrol,
+      className = _ref.className,
+      inlineStyle = _ref.inlineStyle,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var hasPosition = position && position.horizontal && position.vertical;
+  (0, _useLockBodyScroll.useLockBodyScroll)(hasLockBodyScroll);
+  return hasPosition ? /*#__PURE__*/_react.default.createElement("div", _extends({
+    className: "".concat(className ? className : ''),
+    style: inlineStyle
+  }, rest), /*#__PURE__*/_react.default.createElement(_styledComponents.SpotlightArea, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("mask", {
     id: "hole"
-  }, /*#__PURE__*/React.createElement("rect", {
+  }, /*#__PURE__*/_react.default.createElement("rect", {
     width: "100%",
     height: "100%",
     fill: "white"
-  }), /*#__PURE__*/React.createElement(SpotlightCircle, {
+  }), /*#__PURE__*/_react.default.createElement(_styledComponents.SpotlightCircle, {
     r: radius,
     cx: position.horizontal,
     cy: position.vertical,
     fill: "black"
-  }))), /*#__PURE__*/React.createElement("rect", {
+  }))), /*#__PURE__*/_react.default.createElement("rect", {
     fill: "rgba(0,0,0,0.25)",
     width: "100%",
     height: "100%",
     mask: "url(#hole)"
-  })));
+  }))) : /*#__PURE__*/_react.default.createElement("div", null);
 };
 
-export default Spotlight;
+var _default = Spotlight;
+exports.default = _default;

package/dist/react/js/styledComponents.js

@@ -2,12 +2,27 @@
  * THIS FILE IS AUTOMATICALLY GENERATED AND WILL BE OVERWRITTEN.
  * DO NOT MAKE CHANGES TO THIS FILE DIRECTLY
  */
-import styled from 'styled-components';
-export const SpotlightArea = styled.svg.withConfig({
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SpotlightCircle = exports.SpotlightArea = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var SpotlightArea = _styledComponents.default.svg.withConfig({
   displayName: "styledComponents__SpotlightArea",
   componentId: "sc-env4mw-0"
 })(["position:fixed;top:0;left:0;z-index:99999;width:100vw;height:100vh;"]);
-export const SpotlightCircle = styled.circle.withConfig({
+
+exports.SpotlightArea = SpotlightArea;
+
+var SpotlightCircle = _styledComponents.default.circle.withConfig({
   displayName: "styledComponents__SpotlightCircle",
   componentId: "sc-env4mw-1"
-})(["transition:all 350ms ease-in-out;"]);
+})(["transition:all 350ms ease-in-out;"]);
+
+exports.SpotlightCircle = SpotlightCircle;

package/dist/react/js/useLockBodyScroll.d.ts

@@ -0,0 +1 @@
+export declare function useLockBodyScroll(removeLockBodyScroll: boolean): void;

package/dist/react/js/useLockBodyScroll.js

@@ -0,0 +1,33 @@
+/* 
+ * THIS FILE IS AUTOMATICALLY GENERATED AND WILL BE OVERWRITTEN.
+ * DO NOT MAKE CHANGES TO THIS FILE DIRECTLY
+ */
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useLockBodyScroll = useLockBodyScroll;
+
+var _react = require("react");
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+function useLockBodyScroll(removeLockBodyScroll) {
+  (0, _react.useEffect)(function () {
+    var originalStyleOverflowBody = window.getComputedStyle(document.body).overflow;
+    var originalStyleOverflowHtml = window.getComputedStyle(document.documentElement).overflow;
+
+    if (!removeLockBodyScroll) {
+      document.body.style.overflow = originalStyleOverflowBody;
+      document.documentElement.style.overflow = originalStyleOverflowHtml;
+      return;
+    }
+
+    document.body.style.overflow = 'hidden';
+    document.documentElement.style.overflow = 'hidden';
+    return function () {
+      document.body.style.overflow = originalStyleOverflowBody;
+      document.documentElement.style.overflow = originalStyleOverflowHtml;
+    };
+  }, [removeLockBodyScroll]);
+}

package/dist/web_component/js/elvia-spotlight.js

@@ -7,7 +7,7 @@ import { ElvisComponentWrapper } from '@elvia/elvis-component-wrapper';
 const style = ``;
 export default class ElviaComponent extends ElvisComponentWrapper {
   static get observedAttributes() {
-    return ["position", "radius"];
+    return ["position", "radius", "haslockbodyscroll", "classname", "inlinestyle"];
   }
 
   static getComponentData() {
@@ -22,6 +22,18 @@ export default class ElviaComponent extends ElvisComponentWrapper {
         "name": "radius",
         "type": "number",
         "propType": "number"
+      }, {
+        "name": "hasLockBodyScroll",
+        "type": "boolean",
+        "propType": "boolean"
+      }, {
+        "name": "className",
+        "type": "string",
+        "propType": "string | undefined"
+      }, {
+        "name": "inlineStyle",
+        "type": "object",
+        "propType": "object | undefined"
       }],
       "reactName": "Spotlight",
       "slotItems": false,
@@ -50,6 +62,66 @@ export default class ElviaComponent extends ElvisComponentWrapper {
     return super.getProps()['radius'];
   }
 
+  set hasLockBodyScroll(newValue) {
+    super.setProps({
+      'haslockbodyscroll': newValue
+    });
+  }
+
+  get hasLockBodyScroll() {
+    return super.getProps()['haslockbodyscroll'];
+  }
+
+  set haslockbodyscroll(newValue) {
+    super.setProps({
+      'haslockbodyscroll': newValue
+    });
+  }
+
+  get haslockbodyscroll() {
+    return super.getProps()['haslockbodyscroll'];
+  }
+
+  set className(newValue) {
+    super.setProps({
+      'classname': newValue
+    });
+  }
+
+  get className() {
+    return super.getProps()['classname'];
+  }
+
+  set classname(newValue) {
+    super.setProps({
+      'classname': newValue
+    });
+  }
+
+  get classname() {
+    return super.getProps()['classname'];
+  }
+
+  set inlineStyle(newValue) {
+    super.setProps({
+      'inlinestyle': newValue
+    });
+  }
+
+  get inlineStyle() {
+    return super.getProps()['inlinestyle'];
+  }
+
+  set inlinestyle(newValue) {
+    super.setProps({
+      'inlinestyle': newValue
+    });
+  }
+
+  get inlinestyle() {
+    return super.getProps()['inlinestyle'];
+  }
+
   constructor() {
     super(ElviaComponent, ReactComponent['Spotlight'], style);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elvia/elvis-spotlight",
-  "version": "1.0.0-beta.3",
+  "version": "1.2.0",
   "description": "",
   "main": "web_component.js",
   "scripts": {
@@ -9,7 +9,7 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@elvia/elvis-component-wrapper": "^2.2.2",
+    "@elvia/elvis-component-wrapper": "^2.3.0",
     "styled-components": "^5.3.3"
   },
   "devDependencies": {
@@ -22,4 +22,4 @@
     "react-dom": "^16.8.0 || ^17.0.0",
     "react-is": ">= 16.8.0"
   }
-}
+}

package/react.d.ts

@@ -0,0 +1,4 @@
+declare module '@elvia/elvis-spotlight/react';
+export { default as Spotlight } from './dist/react/js/elvia-spotlight';
+export type { SpotlightProps } from './dist/react/js/elvia-spotlight';
+export type * from './dist/react/js/elvia-spotlight';

package/src/react/elvia-spotlight.tsx

@@ -1,35 +1,45 @@
-import React, { CSSProperties, FC } from 'react';
-import { SpotlightArea, SpotlightCircle } from './styledComponents';
-
-export interface SpotlightPosition {
-  vertical: number | undefined;
-  horizontal: number | undefined;
-}
-export interface SpotlightProps {
-  position: SpotlightPosition | undefined;
-  radius?: number;
-  className?: string;
-  inlineStyle?: { [style: string]: CSSProperties };
-}
-
-const Spotlight: FC<SpotlightProps> = ({ position, radius = 200, className, inlineStyle }) => {
-  const hasPosition = position && position.horizontal && position.vertical;
-
-  return (
-    <div className={`${hasPosition && className ? className : ''}`} style={hasPosition ? inlineStyle : {}}>
-      {hasPosition && (
-        <SpotlightArea>
-          <defs>
-            <mask id="hole">
-              <rect width="100%" height="100%" fill="white" />
-              <SpotlightCircle r={radius} cx={position.horizontal} cy={position.vertical} fill="black" />
-            </mask>
-          </defs>
-          <rect fill="rgba(0,0,0,0.25)" width="100%" height="100%" mask="url(#hole)" />
-        </SpotlightArea>
-      )}
-    </div>
-  );
-};
-
-export default Spotlight;
+import React, { CSSProperties, FC } from 'react';
+import { SpotlightArea, SpotlightCircle } from './styledComponents';
+import { useLockBodyScroll } from './useLockBodyScroll';
+
+export interface SpotlightPosition {
+  vertical: number | undefined;
+  horizontal: number | undefined;
+}
+export interface SpotlightProps {
+  position: SpotlightPosition | undefined;
+  radius?: number;
+  hasLockBodyScroll?: boolean;
+  className?: string;
+  inlineStyle?: CSSProperties;
+}
+
+const Spotlight: FC<SpotlightProps> = ({
+  position,
+  radius = 200,
+  hasLockBodyScroll = true,
+  className,
+  inlineStyle,
+  ...rest
+}) => {
+  const hasPosition = position && position.horizontal && position.vertical;
+  useLockBodyScroll(hasLockBodyScroll);
+
+  return hasPosition ? (
+    <div className={`${className ? className : ''}`} style={inlineStyle} {...rest}>
+      <SpotlightArea>
+        <defs>
+          <mask id="hole">
+            <rect width="100%" height="100%" fill="white" />
+            <SpotlightCircle r={radius} cx={position.horizontal} cy={position.vertical} fill="black" />
+          </mask>
+        </defs>
+        <rect fill="rgba(0,0,0,0.25)" width="100%" height="100%" mask="url(#hole)" />
+      </SpotlightArea>
+    </div>
+  ) : (
+    <div></div>
+  );
+};
+
+export default Spotlight;

package/src/react/useLockBodyScroll.tsx

@@ -0,0 +1,21 @@
+import { useEffect } from 'react';
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export function useLockBodyScroll(removeLockBodyScroll: boolean) {
+  useEffect(() => {
+    const originalStyleOverflowBody = window.getComputedStyle(document.body).overflow;
+    const originalStyleOverflowHtml = window.getComputedStyle(document.documentElement).overflow;
+    if (!removeLockBodyScroll) {
+      document.body.style.overflow = originalStyleOverflowBody;
+      document.documentElement.style.overflow = originalStyleOverflowHtml;
+      return;
+    }
+    document.body.style.overflow = 'hidden';
+    document.documentElement.style.overflow = 'hidden';
+
+    return () => {
+      document.body.style.overflow = originalStyleOverflowBody;
+      document.documentElement.style.overflow = originalStyleOverflowHtml;
+    };
+  }, [removeLockBodyScroll]);
+}

package/dist/react/js/declarations.d.js

@@ -1,4 +0,0 @@
-/* 
- * THIS FILE IS AUTOMATICALLY GENERATED AND WILL BE OVERWRITTEN.
- * DO NOT MAKE CHANGES TO THIS FILE DIRECTLY
- */

package/dist/react/js/declarations.d.ts

@@ -1 +0,0 @@
-declare module '*';

package/src/react/declarations.d.ts

@@ -1 +0,0 @@
-declare module '*';