@tsminh/spreacte 0.2.0 → 0.2.1
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/dist/cjs/index.js +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/index.d.ts +17 -12
- package/package.json +1 -1
package/dist/cjs/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var n=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";var n=require("react/jsx-runtime"),t=require("react"),e=require("styled-components"),r=function(){return r=Object.assign||function(n){for(var t,e=1,r=arguments.length;e<r;e++)for(var i in t=arguments[e])Object.prototype.hasOwnProperty.call(t,i)&&(n[i]=t[i]);return n},r.apply(this,arguments)};function i(n,t,e){if(e||2===arguments.length)for(var r,i=0,o=t.length;i<o;i++)!r&&i in t||(r||(r=Array.prototype.slice.call(t,0,i)),r[i]=t[i]);return n.concat(r||Array.prototype.slice.call(t))}function o(n,t){return Object.defineProperty?Object.defineProperty(n,"raw",{value:t}):n.raw=t,n}"function"==typeof SuppressedError&&SuppressedError;var a,s,c,u,d=function(){document.documentElement.style.setProperty("--vw","".concat(window.innerWidth,"px")),document.documentElement.style.setProperty("--vh","".concat(window.innerHeight,"px"))},l=Object.freeze({__proto__:null,isDev:function(){return window.location.hostname.includes("localhost")},measureWindowSize:d,numberWithCommas:function(n){void 0===n&&(n=0);var t=n.toString().split(".");return t[0]=t[0].replace(/\B(?=(\d{3})+(?!\d))/g,"."),t.join(".")}}),p=e.div(s||(s=o(["\n background: rgba(0, 0, 0, 0.7);\n width: var(--vw);\n height: var(--vh);\n position: fixed;\n top: 0;\n left: 0;\n z-index: 99;\n transition: 0.5s ease all;\n ","\n"],["\n background: rgba(0, 0, 0, 0.7);\n width: var(--vw);\n height: var(--vh);\n position: fixed;\n top: 0;\n left: 0;\n z-index: 99;\n transition: 0.5s ease all;\n ","\n"])),function(n){var t=n.$open;return e.css(a||(a=o(["\n opacity: ",";\n pointer-events: ",";\n "],["\n opacity: ",";\n pointer-events: ",";\n "])),t?1:0,t?"all":"none")}),f=e.div(u||(u=o(["\n width: var(--vw);\n height: var(--vh);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n position: fixed;\n top: 0;\n left: 0;\n z-index: 100;\n transition: 0.2s ease all;\n ","\n"],["\n width: var(--vw);\n height: var(--vh);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n position: fixed;\n top: 0;\n left: 0;\n z-index: 100;\n transition: 0.2s ease all;\n ","\n"])),function(n){var t=n.$open;return e.css(c||(c=o(["\n opacity: ",";\n pointer-events: ",";\n transform: translateY(","px) scale(",");\n "],["\n opacity: ",";\n pointer-events: ",";\n transform: translateY(","px) scale(",");\n "])),t?1:0,t?"all":"none",t?0:20,t?1:.9)}),v=t.createContext(null),h=function(e){var o=e.children,a=t.useState([]),s=a[0],c=a[1];return n.jsxs(v.Provider,r({value:{open:function(n){var t=crypto.randomUUID();return c(function(e){return i(i([],e,!0),[{id:t,content:n}],!1)}),t},close:function(n){c(function(t){return n?t.filter(function(t){return t.id!==n}):t.slice(0,-1)})},closeAll:function(){return c([])},stack:s}},{children:[o,s.map(function(t,e){var i=e===s.length-1;return n.jsxs(n.Fragment,{children:[n.jsx(p,{$open:!0,style:{zIndex:1e3+2*e,pointerEvents:i?"auto":"none"}}),n.jsx(f,r({$open:!0,style:{zIndex:1e3+2*e,pointerEvents:i?"auto":"none"}},{children:t.content}))]})})]}))},m=t.createContext({ratio:1,imgRootPath:""}),g=function(){return t.useContext(m)},w={mt:["marginTop"],mb:["marginBottom"],ml:["marginLeft"],mr:["marginRight"],mx:["marginLeft","marginRight"],my:["marginTop","marginBottom"],pt:["paddingTop"],pb:["paddingBottom"],pl:["paddingLeft"],pr:["paddingRight"],px:["paddingLeft","paddingRight"],py:["paddingTop","paddingBottom"]},x=new Set(["onClick","children","className","style","img","fwidth","safeAreaTop"]),y=new Set(["fwidth","safeAreaTop","img","style"]),b=function(n){var t=n.img,e=n.imgRootPath;return t?{backgroundImage:t.startsWith("http")?t:"url(".concat([process.env.PUBLIC_URL,e,t].filter(function(n){return!!n}).join("/"),")"),backgroundSize:"cover",backgroundRepeat:"no-repeat",backgroundPosition:"center"}:void 0};exports.Box=function(e){var i=g(),o=i.ratio,a=i.imgRootPath,s=t.useMemo(function(){var n;return r({style:r(r(r(r(r(r({},Object.fromEntries(Object.entries(e).filter(function(n){var t=n[0];return!x.has(t)&&"style"!==t}).flatMap(function(n){var t=n[0],e=n[1];return w[t]?w[t].map(function(n){return[n,e*o]}):[[t,e*o]]}))),b({img:e.img,imgRootPath:a})),e.safeAreaTop?{top:"calc(var(--ot) + ".concat((null!==(n=e.top)&&void 0!==n?n:0)*o,"px)")}:void 0),e.fwidth?{width:"var(--vw)"}:void 0),{aspectRatio:e.aspectRatio,pointerEvents:e.onClick||!e.img?"all":"none"}),e.style)},Object.fromEntries(Object.entries(e).filter(function(n){var t=n[0];return x.has(t)&&!y.has(t)}).map(function(n){return[n[0],n[1]]})))},[a,e,o]);return console.log(s),alert(1),n.jsx("div",r({},s))},exports.GlobalContextProvider=function(e){var i=e.children,o=e.width,a=e.imgRootPath,s=void 0===a?"":a,c=function(n){var e=t.useState({width:window.innerWidth,height:window.innerHeight,ratio:window.innerWidth/n}),r=e[0],i=e[1];return t.useEffect(function(){function t(){i({width:window.screen.availWidth,height:window.screen.availHeight,ratio:window.screen.availWidth/n})}return window.addEventListener("resize",t),t(),function(){return window.removeEventListener("resize",t)}},[n]),r}(o).ratio,u=t.useMemo(function(){return{ratio:c,imgRootPath:s}},[s,c]);return t.useEffect(function(){return d(),window.addEventListener("resize",d),function(){window.removeEventListener("resize",d)}},[]),n.jsx(m.Provider,r({value:u},{children:n.jsx(h,{children:i})}))},exports.useGlobalContext=g,exports.useModal=function(){var n=t.useContext(v);if(!n)throw new Error("useModal must be used inside ModalProvider");return n},exports.utils=l;
|
package/dist/esm/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{jsxs as n,Fragment as t,jsx as e}from"react/jsx-runtime";import{useState as r,useEffect as i,createContext as o,useContext as a,useMemo as c}from"react";import d,{css as l}from"styled-components";var s=function(){return s=Object.assign||function(n){for(var t,e=1,r=arguments.length;e<r;e++)for(var i in t=arguments[e])Object.prototype.hasOwnProperty.call(t,i)&&(n[i]=t[i]);return n},s.apply(this,arguments)};function u(n,t,e){if(e||2===arguments.length)for(var r,i=0,o=t.length;i<o;i++)!r&&i in t||(r||(r=Array.prototype.slice.call(t,0,i)),r[i]=t[i]);return n.concat(r||Array.prototype.slice.call(t))}function p(n,t){return Object.defineProperty?Object.defineProperty(n,"raw",{value:t}):n.raw=t,n}"function"==typeof SuppressedError&&SuppressedError;var f,v,h,m,g=function(){document.documentElement.style.setProperty("--vw","".concat(window.innerWidth,"px")),document.documentElement.style.setProperty("--vh","".concat(window.innerHeight,"px"))},w=Object.freeze({__proto__:null,isDev:function(){return window.location.hostname.includes("localhost")},measureWindowSize:g,numberWithCommas:function(n){void 0===n&&(n=0);var t=n.toString().split(".");return t[0]=t[0].replace(/\B(?=(\d{3})+(?!\d))/g,"."),t.join(".")}}),y=d.div(v||(v=p(["\n background: rgba(0, 0, 0, 0.7);\n width: var(--vw);\n height: var(--vh);\n position: fixed;\n top: 0;\n left: 0;\n z-index: 99;\n transition: 0.5s ease all;\n ","\n"],["\n background: rgba(0, 0, 0, 0.7);\n width: var(--vw);\n height: var(--vh);\n position: fixed;\n top: 0;\n left: 0;\n z-index: 99;\n transition: 0.5s ease all;\n ","\n"])),function(n){var t=n.$open;return l(f||(f=p(["\n opacity: ",";\n pointer-events: ",";\n "],["\n opacity: ",";\n pointer-events: ",";\n "])),t?1:0,t?"all":"none")}),x=d.div(m||(m=p(["\n width: var(--vw);\n height: var(--vh);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n position: fixed;\n top: 0;\n left: 0;\n z-index: 100;\n transition: 0.2s ease all;\n ","\n"],["\n width: var(--vw);\n height: var(--vh);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n position: fixed;\n top: 0;\n left: 0;\n z-index: 100;\n transition: 0.2s ease all;\n ","\n"])),function(n){var t=n.$open;return l(h||(h=p(["\n opacity: ",";\n pointer-events: ",";\n transform: translateY(","px) scale(",");\n "],["\n opacity: ",";\n pointer-events: ",";\n transform: translateY(","px) scale(",");\n "])),t?1:0,t?"all":"none",t?0:20,t?1:.9)}),b=o(null),P=function(){var n=a(b);if(!n)throw new Error("useModal must be used inside ModalProvider");return n},j=function(i){var o=i.children,a=r([]),c=a[0],d=a[1];return n(b.Provider,s({value:{open:function(n){var t=crypto.randomUUID();return d(function(e){return u(u([],e,!0),[{id:t,content:n}],!1)}),t},close:function(n){d(function(t){return n?t.filter(function(t){return t.id!==n}):t.slice(0,-1)})},closeAll:function(){return d([])},stack:c}},{children:[o,c.map(function(r,i){var o=i===c.length-1;return n(t,{children:[e(y,{$open:!0,style:{zIndex:1e3+2*i,pointerEvents:o?"auto":"none"}}),e(x,s({$open:!0,style:{zIndex:1e3+2*i,pointerEvents:o?"auto":"none"}},{children:r.content}))]})})]}))},E=o({ratio:1,imgRootPath:""}),R=function(n){var t=n.children,o=n.width,a=n.imgRootPath,d=void 0===a?"":a,l=function(n){var t=r({width:window.innerWidth,height:window.innerHeight,ratio:window.innerWidth/n}),e=t[0],o=t[1];return i(function(){function t(){o({width:window.screen.availWidth,height:window.screen.availHeight,ratio:window.screen.availWidth/n})}return window.addEventListener("resize",t),t(),function(){return window.removeEventListener("resize",t)}},[n]),e}(o).ratio,u=c(function(){return{ratio:l,imgRootPath:d}},[d,l]);return i(function(){return g(),window.addEventListener("resize",g),function(){window.removeEventListener("resize",g)}},[]),e(E.Provider,s({value:u},{children:e(j,{children:t})}))},z=function(){return a(E)},L={mt:["marginTop"],mb:["marginBottom"],ml:["marginLeft"],mr:["marginRight"],mx:["marginLeft","marginRight"],my:["marginTop","marginBottom"],pt:["paddingTop"],pb:["paddingBottom"],pl:["paddingLeft"],pr:["paddingRight"],px:["paddingLeft","paddingRight"],py:["paddingTop","paddingBottom"]},O=new Set(["onClick","children","className","style","img","fwidth","safeAreaTop"]),k=new Set(["fwidth","safeAreaTop","img","style"]),W=function(n){var t=n.img,e=n.imgRootPath;return t?{backgroundImage:t.startsWith("http")?t:"url(".concat([process.env.PUBLIC_URL,e,t].filter(function(n){return!!n}).join("/"),")"),backgroundSize:"cover",backgroundRepeat:"no-repeat",backgroundPosition:"center"}:void 0},S=function(n){var t=z(),r=t.ratio,i=t.imgRootPath,o=c(function(){var t;return s({style:s(s(s(s(s(s({},Object.fromEntries(Object.entries(n).filter(function(n){var t=n[0];return!O.has(t)&&"style"!==t}).flatMap(function(n){var t=n[0],e=n[1];return L[t]?L[t].map(function(n){return[n,e*r]}):[[t,e*r]]}))),W({img:n.img,imgRootPath:i})),n.safeAreaTop?{top:"calc(var(--ot) + ".concat((null!==(t=n.top)&&void 0!==t?t:0)*r,"px)")}:void 0),n.fwidth?{width:"var(--vw)"}:void 0),{aspectRatio:n.aspectRatio,pointerEvents:n.onClick||!n.img?"all":"none"}),n.style)},Object.fromEntries(Object.entries(n).filter(function(n){var t=n[0];return O.has(t)&&!k.has(t)}).map(function(n){return[n[0],n[1]]})))},[i,n,r]);return console.log(o),alert(1),e("div",s({},o))};export{S as Box,R as GlobalContextProvider,z as useGlobalContext,P as useModal,w as utils};
|
package/dist/index.d.ts
CHANGED
|
@@ -23,14 +23,6 @@ interface BoxProps extends StyleNumberProps {
|
|
|
23
23
|
}
|
|
24
24
|
declare const Box: React.FC<BoxProps>;
|
|
25
25
|
|
|
26
|
-
interface IModal {
|
|
27
|
-
open?: boolean;
|
|
28
|
-
onClose?: () => void;
|
|
29
|
-
}
|
|
30
|
-
declare const Modal: React.FC<IModal & {
|
|
31
|
-
children?: ReactNode;
|
|
32
|
-
}>;
|
|
33
|
-
|
|
34
26
|
declare function numberWithCommas(x?: number): string;
|
|
35
27
|
declare const isDev: () => boolean;
|
|
36
28
|
declare const measureWindowSize: () => void;
|
|
@@ -46,14 +38,27 @@ declare namespace utils {
|
|
|
46
38
|
};
|
|
47
39
|
}
|
|
48
40
|
|
|
41
|
+
interface IGlobalContext {
|
|
42
|
+
ratio: number;
|
|
43
|
+
imgRootPath: string;
|
|
44
|
+
}
|
|
49
45
|
declare const GlobalContextProvider: React.FC<{
|
|
50
46
|
children: ReactNode;
|
|
51
47
|
width: number;
|
|
52
48
|
imgRootPath?: string;
|
|
53
49
|
}>;
|
|
54
|
-
declare const useGlobalContext: () =>
|
|
55
|
-
|
|
56
|
-
|
|
50
|
+
declare const useGlobalContext: () => IGlobalContext;
|
|
51
|
+
|
|
52
|
+
type ModalItem = {
|
|
53
|
+
id: string;
|
|
54
|
+
content: ReactNode;
|
|
57
55
|
};
|
|
56
|
+
interface ModalContextValue {
|
|
57
|
+
open: (content: ReactNode) => string;
|
|
58
|
+
close: (id?: string) => void;
|
|
59
|
+
closeAll: () => void;
|
|
60
|
+
stack: ModalItem[];
|
|
61
|
+
}
|
|
62
|
+
declare const useModal: () => ModalContextValue;
|
|
58
63
|
|
|
59
|
-
export { Box, GlobalContextProvider,
|
|
64
|
+
export { Box, GlobalContextProvider, useGlobalContext, useModal, utils };
|