@tsminh/spreacte 0.1.5 → 0.1.7

package/dist/cjs/index.js

@@ -1 +1 @@
-"use strict";var n=require("react/jsx-runtime"),e=require("react"),t=require("@fluejs/noscroll"),r=require("styled-components"),i=function(){return i=Object.assign||function(n){for(var e,t=1,r=arguments.length;t<r;t++)for(var i in e=arguments[t])Object.prototype.hasOwnProperty.call(e,i)&&(n[i]=e[i]);return n},i.apply(this,arguments)};function o(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n}"function"==typeof SuppressedError&&SuppressedError;var a,c,s,l,u=e.createContext({ratio:1}),d=function(){return e.useContext(u)},p=["onClick","children","className","fwidth","safeAreaTop"],f=r.div(c||(c=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 e=n.$open;return r.css(a||(a=o(["\n    opacity: ",";\n    pointer-events: ",";\n  "],["\n    opacity: ",";\n    pointer-events: ",";\n  "])),e?1:0,e?"all":"none")}),v=r.div(l||(l=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 e=n.$open;return r.css(s||(s=o(["\n    opacity: ",";\n    pointer-events: ",";\n    transform: translateY(","px) scale(",");\n  "],["\n    opacity: ",";\n    pointer-events: ",";\n    transform: translateY(","px) scale(",");\n  "])),e?1:0,e?"all":"none",e?0:20,e?1:.9)});var h=Object.freeze({__proto__:null,isDev:function(){return window.location.hostname.includes("localhost")},measureWindowSize:function(){document.documentElement.style.setProperty("--vw","".concat(window.innerWidth,"px")),document.documentElement.style.setProperty("--vh","".concat(window.innerHeight,"px"))},numberWithCommas:function(n){void 0===n&&(n=0);var e=n.toString().split(".");return e[0]=e[0].replace(/\B(?=(\d{3})+(?!\d))/g,"."),e.join(".")}});exports.Box=function(t){var r=d().ratio,o=e.useMemo(function(){return i({style:i(i(i(i(i(i({},Object.fromEntries(Object.entries(t).filter(function(n){var e=n[0];return!p.includes(e)&&"style"!==e}).map(function(n){var e,t=n[0],i=n[1];return[(e=t,["p","m"].includes(e[0])&&2===e.length?"".concat({p:"padding",m:"margin"}[e[0]]).concat({l:"Left",r:"Right",b:"Bottom",t:"Top"}[e[1]]):e),i*r]}))),t.img?{backgroundImage:"url(".concat(process.env.PUBLIC_URL,"/img/").concat(t.img,")"),backgroundSize:"cover",backgroundRepeat:"no-repeat",backgroundPosition:"center"}:void 0),t.safeAreaTop?{top:"calc(var(--ot) + ".concat((t.top||0)*r,"px)")}:void 0),t.fwidth?{width:"var(--vw)"}:void 0),{aspectRatio:t.aspectRatio,pointerEvents:t.onClick||!t.img?"all":"none"}),t.style)},Object.fromEntries(Object.entries(t).filter(function(n){var e=n[0];return p.includes(e)}).map(function(n){return[n[0],n[1]]})))},[t,r]);return n.jsx("div",i({},o))},exports.GlobalContextProvider=function(t){var r=t.children,o=function(n){var t=e.useState({width:window.innerWidth,height:window.innerHeight,ratio:window.innerWidth/n}),r=t[0],i=t[1];return e.useEffect(function(){function e(){i({width:window.screen.availWidth,height:window.screen.availHeight,ratio:window.screen.availWidth/n})}return window.addEventListener("resize",e),e(),function(){return window.removeEventListener("resize",e)}},[n]),r}(t.width).ratio,a=e.useMemo(function(){return{ratio:o}},[o]);return n.jsx(u.Provider,i({value:a},{children:r}))},exports.Modal=function(r){var o=r.open,a=r.children,c=e.useMemo(function(){return Math.floor(1e3*Math.random())},[]);return e.useEffect(function(){o?t.disablePageScroll():t.enablePageScroll()},[o]),n.jsxs(n.Fragment,{children:[n.jsx(f,{"data-mid":c,$open:o}),n.jsx(v,i({"data-mid":c,$open:o},{children:a}))]})},exports.useGlobalContext=d,exports.utils=h;
+"use strict";var n=require("react/jsx-runtime"),e=require("react"),t=require("@fluejs/noscroll"),i=require("styled-components"),r=function(){return r=Object.assign||function(n){for(var e,t=1,i=arguments.length;t<i;t++)for(var r in e=arguments[t])Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n},r.apply(this,arguments)};function o(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n}"function"==typeof SuppressedError&&SuppressedError;var a,s,c,d,l=function(){document.documentElement.style.setProperty("--vw","".concat(window.innerWidth,"px")),document.documentElement.style.setProperty("--vh","".concat(window.innerHeight,"px"))},u=Object.freeze({__proto__:null,isDev:function(){return window.location.hostname.includes("localhost")},measureWindowSize:l,numberWithCommas:function(n){void 0===n&&(n=0);var e=n.toString().split(".");return e[0]=e[0].replace(/\B(?=(\d{3})+(?!\d))/g,"."),e.join(".")}}),p=e.createContext({ratio:1,imgRootPath:""}),f=function(){return e.useContext(p)},v={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"]},h=new Set(["onClick","children","className","style","img","fwidth","safeAreaTop"]),m=new Set(["fwidth","safeAreaTop","img"]),g=i.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 e=n.$open;return i.css(a||(a=o(["\n    opacity: ",";\n    pointer-events: ",";\n  "],["\n    opacity: ",";\n    pointer-events: ",";\n  "])),e?1:0,e?"all":"none")}),w=i.div(d||(d=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 e=n.$open;return i.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  "])),e?1:0,e?"all":"none",e?0:20,e?1:.9)});exports.Box=function(t){var i=f(),o=i.ratio,a=i.imgRootPath,s=e.useMemo(function(){var n;return r({style:r(r(r(r(r(r({},Object.fromEntries(Object.entries(t).filter(function(n){var e=n[0];return!h.has(e)&&"style"!==e}).flatMap(function(n){var e=n[0],t=n[1];return v[e]?v[e].map(function(n){return[n,t*o]}):[[e,t*o]]}))),t.img?{backgroundImage:t.img.startsWith("http")?t.img:"url(".concat([process.env.PUBLIC_URL,a,t.img].filter(function(n){return!!n}).join("/"),")"),backgroundSize:"cover",backgroundRepeat:"no-repeat",backgroundPosition:"center"}:void 0),t.safeAreaTop?{top:"calc(var(--ot) + ".concat((null!==(n=t.top)&&void 0!==n?n:0)*o,"px)")}:void 0),t.fwidth?{width:"var(--vw)"}:void 0),{aspectRatio:t.aspectRatio,pointerEvents:t.onClick||!t.img?"all":"none"}),t.style)},Object.fromEntries(Object.entries(t).filter(function(n){var e=n[0];return h.has(e)&&!m.has(e)}).map(function(n){return[n[0],n[1]]})))},[t,o]);return n.jsx("div",r({},s))},exports.GlobalContextProvider=function(t){var i=t.children,o=t.width,a=t.imgRootPath,s=void 0===a?"":a,c=function(n){var t=e.useState({width:window.innerWidth,height:window.innerHeight,ratio:window.innerWidth/n}),i=t[0],r=t[1];return e.useEffect(function(){function e(){r({width:window.screen.availWidth,height:window.screen.availHeight,ratio:window.screen.availWidth/n})}return window.addEventListener("resize",e),e(),function(){return window.removeEventListener("resize",e)}},[n]),i}(o).ratio,d=e.useMemo(function(){return{ratio:c,imgRootPath:s}},[s,c]);return e.useEffect(function(){window.addEventListener("resize",l),l()},[]),n.jsx(p.Provider,r({value:d},{children:i}))},exports.Modal=function(i){var o=i.open,a=i.children,s=e.useMemo(function(){return Math.floor(1e3*Math.random())},[]);return e.useEffect(function(){o?t.disablePageScroll():t.enablePageScroll()},[o]),n.jsxs(n.Fragment,{children:[n.jsx(g,{"data-mid":s,$open:o}),n.jsx(w,r({"data-mid":s,$open:o},{children:a}))]})},exports.useGlobalContext=f,exports.utils=u;

package/dist/esm/index.js

@@ -1 +1 @@
-import{jsx as n,jsxs as t,Fragment as e}from"react/jsx-runtime";import{useState as r,useEffect as i,createContext as o,useMemo as a,useContext as c}from"react";import{disablePageScroll as d,enablePageScroll as s}from"@fluejs/noscroll";import l,{css as u}from"styled-components";var p=function(){return p=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},p.apply(this,arguments)};function f(n,t){return Object.defineProperty?Object.defineProperty(n,"raw",{value:t}):n.raw=t,n}"function"==typeof SuppressedError&&SuppressedError;var v,h,m,w,g=o({ratio:1}),y=function(t){var e=t.children,o=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}(t.width).ratio,c=a(function(){return{ratio:o}},[o]);return n(g.Provider,p({value:c},{children:e}))},b=function(){return c(g)},x=["onClick","children","className","fwidth","safeAreaTop"],j=function(t){var e=b().ratio,r=a(function(){return p({style:p(p(p(p(p(p({},Object.fromEntries(Object.entries(t).filter(function(n){var t=n[0];return!x.includes(t)&&"style"!==t}).map(function(n){var t,r=n[0],i=n[1];return[(t=r,["p","m"].includes(t[0])&&2===t.length?"".concat({p:"padding",m:"margin"}[t[0]]).concat({l:"Left",r:"Right",b:"Bottom",t:"Top"}[t[1]]):t),i*e]}))),t.img?{backgroundImage:"url(".concat(process.env.PUBLIC_URL,"/img/").concat(t.img,")"),backgroundSize:"cover",backgroundRepeat:"no-repeat",backgroundPosition:"center"}:void 0),t.safeAreaTop?{top:"calc(var(--ot) + ".concat((t.top||0)*e,"px)")}:void 0),t.fwidth?{width:"var(--vw)"}:void 0),{aspectRatio:t.aspectRatio,pointerEvents:t.onClick||!t.img?"all":"none"}),t.style)},Object.fromEntries(Object.entries(t).filter(function(n){var t=n[0];return x.includes(t)}).map(function(n){return[n[0],n[1]]})))},[t,e]);return n("div",p({},r))},O=l.div(h||(h=f(["\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 u(v||(v=f(["\n    opacity: ",";\n    pointer-events: ",";\n  "],["\n    opacity: ",";\n    pointer-events: ",";\n  "])),t?1:0,t?"all":"none")}),z=l.div(w||(w=f(["\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 u(m||(m=f(["\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)}),E=function(r){var o=r.open,c=r.children,l=a(function(){return Math.floor(1e3*Math.random())},[]);return i(function(){o?d():s()},[o]),t(e,{children:[n(O,{"data-mid":l,$open:o}),n(z,p({"data-mid":l,$open:o},{children:c}))]})};var k=Object.freeze({__proto__:null,isDev:function(){return window.location.hostname.includes("localhost")},measureWindowSize:function(){document.documentElement.style.setProperty("--vw","".concat(window.innerWidth,"px")),document.documentElement.style.setProperty("--vh","".concat(window.innerHeight,"px"))},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(".")}});export{j as Box,y as GlobalContextProvider,E as Modal,b as useGlobalContext,k as utils};
+import{jsx as n,jsxs as t,Fragment as e}from"react/jsx-runtime";import{useState as i,useEffect as r,createContext as o,useMemo as a,useContext as d}from"react";import{disablePageScroll as c,enablePageScroll as s}from"@fluejs/noscroll";import p,{css as l}from"styled-components";var u=function(){return u=Object.assign||function(n){for(var t,e=1,i=arguments.length;e<i;e++)for(var r in t=arguments[e])Object.prototype.hasOwnProperty.call(t,r)&&(n[r]=t[r]);return n},u.apply(this,arguments)};function f(n,t){return Object.defineProperty?Object.defineProperty(n,"raw",{value:t}):n.raw=t,n}"function"==typeof SuppressedError&&SuppressedError;var m,h,v,g,w=function(){document.documentElement.style.setProperty("--vw","".concat(window.innerWidth,"px")),document.documentElement.style.setProperty("--vh","".concat(window.innerHeight,"px"))},y=Object.freeze({__proto__:null,isDev:function(){return window.location.hostname.includes("localhost")},measureWindowSize:w,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(".")}}),x=o({ratio:1,imgRootPath:""}),b=function(t){var e=t.children,o=t.width,d=t.imgRootPath,c=void 0===d?"":d,s=function(n){var t=i({width:window.innerWidth,height:window.innerHeight,ratio:window.innerWidth/n}),e=t[0],o=t[1];return r(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,p=a(function(){return{ratio:s,imgRootPath:c}},[c,s]);return r(function(){window.addEventListener("resize",w),w()},[]),n(x.Provider,u({value:p},{children:e}))},j=function(){return d(x)},P={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"]},R=new Set(["onClick","children","className","style","img","fwidth","safeAreaTop"]),z=new Set(["fwidth","safeAreaTop","img"]),E=function(t){var e=j(),i=e.ratio,r=e.imgRootPath,o=a(function(){var n;return u({style:u(u(u(u(u(u({},Object.fromEntries(Object.entries(t).filter(function(n){var t=n[0];return!R.has(t)&&"style"!==t}).flatMap(function(n){var t=n[0],e=n[1];return P[t]?P[t].map(function(n){return[n,e*i]}):[[t,e*i]]}))),t.img?{backgroundImage:t.img.startsWith("http")?t.img:"url(".concat([process.env.PUBLIC_URL,r,t.img].filter(function(n){return!!n}).join("/"),")"),backgroundSize:"cover",backgroundRepeat:"no-repeat",backgroundPosition:"center"}:void 0),t.safeAreaTop?{top:"calc(var(--ot) + ".concat((null!==(n=t.top)&&void 0!==n?n:0)*i,"px)")}:void 0),t.fwidth?{width:"var(--vw)"}:void 0),{aspectRatio:t.aspectRatio,pointerEvents:t.onClick||!t.img?"all":"none"}),t.style)},Object.fromEntries(Object.entries(t).filter(function(n){var t=n[0];return R.has(t)&&!z.has(t)}).map(function(n){return[n[0],n[1]]})))},[t,i]);return n("div",u({},o))},O=p.div(h||(h=f(["\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(m||(m=f(["\n    opacity: ",";\n    pointer-events: ",";\n  "],["\n    opacity: ",";\n    pointer-events: ",";\n  "])),t?1:0,t?"all":"none")}),L=p.div(g||(g=f(["\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(v||(v=f(["\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)}),k=function(i){var o=i.open,d=i.children,p=a(function(){return Math.floor(1e3*Math.random())},[]);return r(function(){o?c():s()},[o]),t(e,{children:[n(O,{"data-mid":p,$open:o}),n(L,u({"data-mid":p,$open:o},{children:d}))]})};export{E as Box,b as GlobalContextProvider,k as Modal,j as useGlobalContext,y as utils};

package/dist/index.d.ts

@@ -1,27 +1,23 @@
 import { ReactNode, CSSProperties } from 'react';
 
-interface BoxProps {
-    onClick?: () => void;
-    children?: ReactNode;
-    style?: CSSProperties;
+type SpacingKey = "mt" | "mb" | "ml" | "mr" | "pt" | "pb" | "pl" | "pr" | "px" | "py" | "mx" | "my";
+type StyleNumberProps = {
     width?: number;
     height?: number;
-    mt?: number;
-    mb?: number;
-    ml?: number;
-    mr?: number;
-    pt?: number;
-    pb?: number;
-    pl?: number;
-    pr?: number;
     top?: number;
     left?: number;
     right?: number;
     bottom?: number;
     fontSize?: number;
-    img?: string;
     aspectRatio?: number;
+    borderRadius?: number;
+} & Partial<Record<SpacingKey, number>>;
+interface BoxProps extends StyleNumberProps {
+    onClick?: () => void;
+    children?: ReactNode;
+    style?: CSSProperties;
     className?: string;
+    img?: string;
     fwidth?: boolean;
     safeAreaTop?: boolean;
 }
@@ -53,9 +49,11 @@ declare namespace utils {
 declare const GlobalContextProvider: React.FC<{
     children: ReactNode;
     width: number;
+    imgRootPath?: string;
 }>;
 declare const useGlobalContext: () => {
     ratio: number;
+    imgRootPath?: string | undefined;
 };
 
 export { Box, GlobalContextProvider, Modal, useGlobalContext, utils };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsminh/spreacte",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
@@ -17,8 +17,7 @@
     "build": "GENERATE_SOURCEMAP=false react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "rollup": "rollup -c --bundleConfigAsCjs",
-    "publish": "npm publish --access public"
+    "rollup": "rollup -c --bundleConfigAsCjs"
   },
   "eslintConfig": {
     "extends": [