@elvia/elvis-spotlight 1.4.4 → 1.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +28 -0
- package/dist/react/js/elvia-spotlight.d.ts +2 -21
- package/dist/react/js/elvia-spotlight.js +1 -1
- package/dist/react/js/elvia-spotlight.js.map +1 -1
- package/dist/react/js/elvia-spotlight.types.d.ts +18 -0
- package/dist/react/js/elvia-spotlight.types.js +6 -0
- package/dist/react/js/elvia-spotlight.types.js.map +1 -0
- package/package.json +14 -3
- package/react.d.ts +2 -1
package/CHANGELOG.json
CHANGED
|
@@ -1,6 +1,34 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "../../changelogSchema.json",
|
|
3
3
|
"content": [
|
|
4
|
+
{
|
|
5
|
+
"date": "04.04.23",
|
|
6
|
+
"version": "1.5.0",
|
|
7
|
+
"changelog": [
|
|
8
|
+
{
|
|
9
|
+
"type": "new_feature",
|
|
10
|
+
"changes": ["Added support for dark theme."]
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
"type": "patch",
|
|
14
|
+
"changes": ["Updated internal dependencies."]
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"type": "bug_fix",
|
|
18
|
+
"changes": ["Fixed the prop type exports for React."]
|
|
19
|
+
}
|
|
20
|
+
]
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"date": "20.12.22",
|
|
24
|
+
"version": "1.4.5",
|
|
25
|
+
"changelog": [
|
|
26
|
+
{
|
|
27
|
+
"type": "patch",
|
|
28
|
+
"changes": ["Add missing dependency."]
|
|
29
|
+
}
|
|
30
|
+
]
|
|
31
|
+
},
|
|
4
32
|
{
|
|
5
33
|
"date": "29.11.22",
|
|
6
34
|
"version": "1.4.4",
|
|
@@ -1,23 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
export interface SpotlightPosition {
|
|
4
|
-
vertical: number;
|
|
5
|
-
horizontal: number;
|
|
6
|
-
}
|
|
7
|
-
export interface SpotlightRectangleProps {
|
|
8
|
-
width?: number;
|
|
9
|
-
height?: number;
|
|
10
|
-
borderRadius?: number;
|
|
11
|
-
}
|
|
12
|
-
export interface SpotlightProps {
|
|
13
|
-
position: SpotlightPosition | undefined;
|
|
14
|
-
shape?: SpotlightShape;
|
|
15
|
-
radius?: number;
|
|
16
|
-
rectangleProps?: SpotlightRectangleProps;
|
|
17
|
-
hasLockBodyScroll?: boolean;
|
|
18
|
-
transitionDuration?: string;
|
|
19
|
-
className?: string;
|
|
20
|
-
inlineStyle?: CSSProperties;
|
|
21
|
-
}
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { SpotlightProps } from './elvia-spotlight.types';
|
|
22
3
|
declare const Spotlight: FC<SpotlightProps>;
|
|
23
4
|
export default Spotlight;
|
|
@@ -2,5 +2,5 @@
|
|
|
2
2
|
* THIS FILE IS AUTOMATICALLY GENERATED AND WILL BE OVERWRITTEN.
|
|
3
3
|
* DO NOT MAKE CHANGES TO THIS FILE DIRECTLY
|
|
4
4
|
*/
|
|
5
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=
|
|
5
|
+
"use strict";function _typeof(a){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a},_typeof(a)}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_styledComponents=require("./styledComponents"),_elvisToolbox=require("@elvia/elvis-toolbox"),_useLockBodyScroll=require("./useLockBodyScroll"),_excluded=["position","shape","radius","hasLockBodyScroll","transitionDuration","rectangleProps","className","inlineStyle"];function _getRequireWildcardCache(a){if("function"!=typeof WeakMap)return null;var b=new WeakMap,c=new WeakMap;return(_getRequireWildcardCache=function(a){return a?c:b})(a)}function _interopRequireWildcard(a,b){if(!b&&a&&a.__esModule)return a;if(null===a||"object"!==_typeof(a)&&"function"!=typeof a)return{default:a};var c=_getRequireWildcardCache(b);if(c&&c.has(a))return c.get(a);var d={},e=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var f in a)if("default"!=f&&Object.prototype.hasOwnProperty.call(a,f)){var g=e?Object.getOwnPropertyDescriptor(a,f):null;g&&(g.get||g.set)?Object.defineProperty(d,f,g):d[f]=a[f]}return d.default=a,c&&c.set(a,d),d}function _extends(){return _extends=Object.assign?Object.assign.bind():function(a){for(var b,c=1;c<arguments.length;c++)for(var d in b=arguments[c],b)Object.prototype.hasOwnProperty.call(b,d)&&(a[d]=b[d]);return a},_extends.apply(this,arguments)}function _objectWithoutProperties(a,b){if(null==a)return{};var c,d,e=_objectWithoutPropertiesLoose(a,b);if(Object.getOwnPropertySymbols){var f=Object.getOwnPropertySymbols(a);for(d=0;d<f.length;d++)c=f[d],0<=b.indexOf(c)||Object.prototype.propertyIsEnumerable.call(a,c)&&(e[c]=a[c])}return e}function _objectWithoutPropertiesLoose(a,b){if(null==a)return{};var c,d,e={},f=Object.keys(a);for(d=0;d<f.length;d++)c=f[d],0<=b.indexOf(c)||(e[c]=a[c]);return e}var Spotlight=function(a){var b=a.position,c=a.shape,d=void 0===c?"circle":c,e=a.radius,f=void 0===e?200:e,g=a.hasLockBodyScroll,h=a.transitionDuration,i=void 0===h?"350ms":h,j=a.rectangleProps,k=void 0===j?{width:200,height:200,borderRadius:8}:j,l=a.className,m=a.inlineStyle,n=_objectWithoutProperties(a,_excluded),o=b&&void 0!==b.horizontal&&void 0!==b.vertical,p=(0,_react.useRef)(null),q=(0,_elvisToolbox.useCurrentTheme)(p),r=q.currentTheme;return(0,_useLockBodyScroll.useLockBodyScroll)(void 0===g||g),o?/*#__PURE__*/_react.default.createElement("div",_extends({className:"".concat(l?l:""),style:m},n,{ref:p}),/*#__PURE__*/_react.default.createElement(_styledComponents.SpotlightArea,null,/*#__PURE__*/_react.default.createElement("defs",null,/*#__PURE__*/_react.default.createElement("mask",{id:"hole"},/*#__PURE__*/_react.default.createElement("rect",{width:"100%",height:"100%",fill:"white"}),"circle"===d?/*#__PURE__*/_react.default.createElement(_styledComponents.SpotlightCircle,{transitionDuration:i,r:f,cx:b.horizontal,cy:b.vertical,fill:"black"}):/*#__PURE__*/_react.default.createElement(_styledComponents.SpotlightRect,{transitionDuration:i,width:k.width,height:k.height,x:b.horizontal,y:b.vertical,rx:k.borderRadius,ry:k.borderRadius,fill:"black"}))),/*#__PURE__*/_react.default.createElement("rect",{fill:"rgba(0,0,0,".concat("light"===r?.25:.5,")"),width:"100%",height:"100%",mask:"url(#hole)"}))):/*#__PURE__*/_react.default.createElement("div",null)},_default=Spotlight;exports.default=_default;
|
|
6
6
|
//# sourceMappingURL=elvia-spotlight.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["elvia-spotlight.tsx"],"names":["Spotlight","position","shape","radius","hasLockBodyScroll","transitionDuration","rectangleProps","width","height","borderRadius","className","inlineStyle","rest","hasPosition","horizontal","vertical","useLockBodyScroll"],"mappings":";;;;
|
|
1
|
+
{"version":3,"sources":["elvia-spotlight.tsx"],"names":["Spotlight","position","shape","radius","hasLockBodyScroll","transitionDuration","rectangleProps","width","height","borderRadius","className","inlineStyle","rest","hasPosition","horizontal","vertical","spotlightDivRef","useRef","useCurrentTheme","currentTheme","useLockBodyScroll"],"mappings":";;;;ugEAOMA,UAA6B,CAAG,WAUhC,IATJC,EAAQ,GAARA,QAAQ,KACRC,KAAK,CAALA,CAAK,YAAG,QAAQ,OAChBC,MAAM,CAANA,CAAM,YAAG,GAAG,OACZC,iBAAiB,KACjBC,kBAAkB,CAAlBA,CAAkB,YAAG,OAAO,OAC5BC,cAAc,CAAdA,CAAc,YAAG,CAAEC,KAAK,CAAE,GAAG,CAAEC,MAAM,CAAE,GAAG,CAAEC,YAAY,CAAE,CAAE,CAAC,GAC7DC,CAAS,GAATA,SAAS,CACTC,CAAW,GAAXA,WAAW,CACRC,CAAI,uCAEDC,CAAW,CAAGZ,CAAQ,EAAI,SAAAA,CAAQ,CAACa,UAAwB,EAAI,SAAAb,CAAQ,CAACc,QAAsB,CAC9FC,CAAe,CAAG,GAAAC,aAAM,EAAiB,IAAI,CAAC,GAC3B,GAAAC,6BAAe,EAACF,CAAe,CAAC,CAAjDG,CAAY,GAAZA,YAAY,CAGpB,MAFA,GAAAC,oCAAiB,gBAAmB,CAE7BP,CAAW,cAChB,6CAAK,SAAS,WAAKH,CAAS,CAAGA,CAAS,CAAG,EAAE,CAAG,CAAC,KAAK,CAAEC,CAAY,EAAKC,CAAI,EAAE,GAAG,CAAEI,CAAgB,gBAClG,6BAAC,+BAAa,mBACZ,sDACE,qCAAM,EAAE,CAAC,MAAM,eACb,qCAAM,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,EAAG,CACrC,QAAQ,GAAlBd,CAAkB,cACjB,6BAAC,iCAAe,EACd,kBAAkB,CAAEG,CAAmB,CACvC,CAAC,CAAEF,CAAO,CACV,EAAE,CAAEF,CAAQ,CAACa,UAAW,CACxB,EAAE,CAAEb,CAAQ,CAACc,QAAS,CACtB,IAAI,CAAC,OAAO,EACZ,cAEF,6BAAC,+BAAa,EACZ,kBAAkB,CAAEV,CAAmB,CACvC,KAAK,CAAEC,CAAc,CAACC,KAAM,CAC5B,MAAM,CAAED,CAAc,CAACE,MAAO,CAC9B,CAAC,CAAEP,CAAQ,CAACa,UAAW,CACvB,CAAC,CAAEb,CAAQ,CAACc,QAAS,CACrB,EAAE,CAAET,CAAc,CAACG,YAAa,CAChC,EAAE,CAAEH,CAAc,CAACG,YAAa,CAChC,IAAI,CAAC,OAAO,EAEf,CACI,CACF,cACP,qCACE,IAAI,sBAAiC,OAAO,GAAxBU,CAAwB,CAAG,GAAI,CAAG,EAAG,KAAI,CAC7D,KAAK,CAAC,MAAM,CACZ,MAAM,CAAC,MAAM,CACb,IAAI,CAAC,YAAY,EACjB,CACY,CACZ,cAEN,wCAEJ,CAAC,UAEcnB,SAAS","file":"elvia-spotlight.js","sourcesContent":["import React, { FC, useRef } from 'react';\nimport { SpotlightArea, SpotlightCircle, SpotlightRect } from './styledComponents';\nimport { useCurrentTheme } from '@elvia/elvis-toolbox';\n\nimport { useLockBodyScroll } from './useLockBodyScroll';\nimport { SpotlightProps } from './elvia-spotlight.types';\n\nconst Spotlight: FC<SpotlightProps> = ({\n position,\n shape = 'circle',\n radius = 200,\n hasLockBodyScroll = true,\n transitionDuration = '350ms',\n rectangleProps = { width: 200, height: 200, borderRadius: 8 },\n className,\n inlineStyle,\n ...rest\n}) => {\n const hasPosition = position && position.horizontal !== undefined && position.vertical !== undefined;\n const spotlightDivRef = useRef<HTMLDivElement>(null);\n const { currentTheme } = useCurrentTheme(spotlightDivRef);\n useLockBodyScroll(hasLockBodyScroll);\n\n return hasPosition ? (\n <div className={`${className ? className : ''}`} style={inlineStyle} {...rest} ref={spotlightDivRef}>\n <SpotlightArea>\n <defs>\n <mask id=\"hole\">\n <rect width=\"100%\" height=\"100%\" fill=\"white\" />\n {shape === 'circle' ? (\n <SpotlightCircle\n transitionDuration={transitionDuration}\n r={radius}\n cx={position.horizontal}\n cy={position.vertical}\n fill=\"black\"\n />\n ) : (\n <SpotlightRect\n transitionDuration={transitionDuration}\n width={rectangleProps.width}\n height={rectangleProps.height}\n x={position.horizontal}\n y={position.vertical}\n rx={rectangleProps.borderRadius}\n ry={rectangleProps.borderRadius}\n fill=\"black\"\n />\n )}\n </mask>\n </defs>\n <rect\n fill={`rgba(0,0,0,${currentTheme === 'light' ? 0.25 : 0.5})`}\n width=\"100%\"\n height=\"100%\"\n mask=\"url(#hole)\"\n />\n </SpotlightArea>\n </div>\n ) : (\n <div></div>\n );\n};\n\nexport default Spotlight;\n"]}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { BaseProps, HasTransitionDuration } from '@elvia/elvis-toolbox';
|
|
2
|
+
export type SpotlightShape = 'circle' | 'rectangle';
|
|
3
|
+
export interface SpotlightPosition {
|
|
4
|
+
vertical: number;
|
|
5
|
+
horizontal: number;
|
|
6
|
+
}
|
|
7
|
+
export interface SpotlightRectangleProps {
|
|
8
|
+
width?: number;
|
|
9
|
+
height?: number;
|
|
10
|
+
borderRadius?: number;
|
|
11
|
+
}
|
|
12
|
+
export interface SpotlightProps extends BaseProps, HasTransitionDuration {
|
|
13
|
+
position?: SpotlightPosition;
|
|
14
|
+
shape?: SpotlightShape;
|
|
15
|
+
radius?: number;
|
|
16
|
+
rectangleProps?: SpotlightRectangleProps;
|
|
17
|
+
hasLockBodyScroll?: boolean;
|
|
18
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["elvia-spotlight.types.tsx"],"names":[],"mappings":";;;;AAAA","file":"elvia-spotlight.types.js","sourcesContent":["import { BaseProps, HasTransitionDuration } from '@elvia/elvis-toolbox';\n\nexport type SpotlightShape = 'circle' | 'rectangle';\n\nexport interface SpotlightPosition {\n vertical: number;\n horizontal: number;\n}\n\nexport interface SpotlightRectangleProps {\n width?: number;\n height?: number;\n borderRadius?: number;\n}\n\nexport interface SpotlightProps extends BaseProps, HasTransitionDuration {\n position?: SpotlightPosition;\n shape?: SpotlightShape;\n radius?: number;\n rectangleProps?: SpotlightRectangleProps;\n hasLockBodyScroll?: boolean;\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elvia/elvis-spotlight",
|
|
3
|
-
"version": "1.
|
|
4
|
-
"description": "",
|
|
3
|
+
"version": "1.5.0",
|
|
5
4
|
"main": "web_component.js",
|
|
6
|
-
"author": "",
|
|
7
5
|
"license": "MIT",
|
|
6
|
+
"homepage": "https://design.elvia.io/components/spotlight",
|
|
8
7
|
"files": [
|
|
9
8
|
"web_component.js",
|
|
10
9
|
"react.js",
|
|
@@ -15,11 +14,23 @@
|
|
|
15
14
|
],
|
|
16
15
|
"dependencies": {
|
|
17
16
|
"@elvia/elvis-component-wrapper": "^4.0.0",
|
|
17
|
+
"@elvia/elvis-toolbox": "^7.8.0",
|
|
18
18
|
"styled-components": "^5.3.3"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
21
21
|
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
|
22
22
|
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
|
23
23
|
"react-is": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
|
24
|
+
},
|
|
25
|
+
"peerDependenciesMeta": {
|
|
26
|
+
"react": {
|
|
27
|
+
"optional": true
|
|
28
|
+
},
|
|
29
|
+
"react-dom": {
|
|
30
|
+
"optional": true
|
|
31
|
+
},
|
|
32
|
+
"react-is": {
|
|
33
|
+
"optional": true
|
|
34
|
+
}
|
|
24
35
|
}
|
|
25
36
|
}
|
package/react.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
declare module '@elvia/elvis-spotlight/react';
|
|
2
2
|
export { default as Spotlight } from './dist/react/js/elvia-spotlight';
|
|
3
|
-
export type { SpotlightProps } from './dist/react/js/elvia-spotlight';
|
|
3
|
+
export type { SpotlightProps } from './dist/react/js/elvia-spotlight.types';
|
|
4
4
|
export type * from './dist/react/js/elvia-spotlight';
|
|
5
|
+
export type * from './dist/react/js/elvia-spotlight.types';
|