jordy 0.17.0 → 0.18.0

package/esm5/adaptive-render/DeviceDetectContext.js

@@ -1,8 +1,8 @@
 import { __read } from "tslib";
+import { noop } from '../util/etc';
 import React, { createContext, useContext, useEffect, useMemo, useState, } from 'react';
-import { isMobile as isMobileCheck, isNativeApp as isNativeAppCheck, isServer, isTablet as isTabletCheck, } from '../util/envCheck';
-import { DeviceSizeEnum } from './device.type';
-function getIsMobile() {
+import { isMobile as isMobileCheck, isServer, isTablet as isTabletCheck, } from '../util/envCheck';
+function getIsMobile(breakpoint) {
     if (isServer()) {
         try {
             return isMobileCheck();
@@ -11,9 +11,9 @@ function getIsMobile() {
         }
         return false;
     }
-    return isMobileCheck() || window.innerWidth < DeviceSizeEnum.TABLET;
+    return isMobileCheck() || window.innerWidth <= breakpoint;
 }
-function getIsTablet() {
+function getIsTablet(breakpoints) {
     if (isServer()) {
         try {
             return isTabletCheck();
@@ -22,40 +22,70 @@ function getIsTablet() {
         }
         return false;
     }
+    if (isTabletCheck()) {
+        return true;
+    }
+    if (breakpoints.length < 2) {
+        return false;
+    }
     return (isTabletCheck() ||
-        (window.innerWidth >= DeviceSizeEnum.TABLET &&
-            window.innerWidth <= DeviceSizeEnum.DESKTOP_SM - 1));
+        (window.innerWidth > breakpoints[0] && window.innerWidth <= breakpoints[1]));
+}
+function defNativeAppChecker() {
+    return false;
 }
-export var DeviceDetectContext = createContext([
-    getIsMobile(),
-    getIsTablet(),
-    isNativeAppCheck(),
-]);
+export var DeviceDetectContext = createContext([false, false, false]);
 var DeviceDetectContextProvider = DeviceDetectContext.Provider;
+var DEVICE_DETECT_DEFAULT_BREAKPOINTS = [539, 1080];
+function subscribeForMobile(breakpoint, setIsMobile) {
+    var mqMobile = window.matchMedia("screen and (max-width: ".concat(breakpoint, "px)"));
+    var handleResizeForMobile = function (e) {
+        setIsMobile(e.matches);
+    };
+    mqMobile.addEventListener('change', handleResizeForMobile);
+    return {
+        unsubscribe: function () {
+            mqMobile.removeEventListener('change', handleResizeForMobile);
+        },
+    };
+}
+function subscribeForTablet(breakpoints, setIsTablet) {
+    if (breakpoints.length < 2) {
+        return {
+            unsubscribe: noop,
+        };
+    }
+    var mqTablet = window.matchMedia("screen and (min-width: ".concat(breakpoints[0] + 1, "px) and (max-width: ").concat(breakpoints[1], "px)"));
+    var handleResizeForTablet = function (e) {
+        setIsTablet(e.matches);
+    };
+    mqTablet.addEventListener('change', handleResizeForTablet);
+    return {
+        unsubscribe: function () {
+            mqTablet.removeEventListener('change', handleResizeForTablet);
+        },
+    };
+}
 export var DeviceDetectProvider = function (_a) {
-    var children = _a.children;
-    var _b = __read(useState(getIsMobile()), 2), isMobile = _b[0], setIsMobile = _b[1];
-    var _c = __read(useState(getIsTablet()), 2), isTablet = _c[0], setIsTablet = _c[1];
-    var isNative = useMemo(isNativeAppCheck, []);
+    var _b = _a.breakpoints, breakpoints = _b === void 0 ? DEVICE_DETECT_DEFAULT_BREAKPOINTS : _b, _c = _a.nativeAppChecker, nativeAppChecker = _c === void 0 ? defNativeAppChecker : _c, children = _a.children;
+    var _d = __read(useState(getIsMobile(breakpoints[0])), 2), isMobile = _d[0], setIsMobile = _d[1];
+    var _e = __read(useState(getIsTablet(breakpoints)), 2), isTablet = _e[0], setIsTablet = _e[1];
+    var isNative = useMemo(nativeAppChecker, []);
     useEffect(function () {
-        if (isServer() || !window || typeof window.matchMedia !== 'function') {
+        if (isServer() ||
+            !window ||
+            typeof window.matchMedia !== 'function' ||
+            !breakpoints ||
+            breakpoints.length === 0) {
             return undefined;
         }
-        var mqMobile = window.matchMedia("screen and (max-width: ".concat(DeviceSizeEnum.TABLET - 1, "px)"));
-        var mqTablet = window.matchMedia("screen and (min-width: ".concat(DeviceSizeEnum.TABLET, "px) and (max-width: ").concat(DeviceSizeEnum.DESKTOP_SM - 1, "px)"));
-        var handleResizeForMobile = function (e) {
-            setIsMobile(e.matches);
-        };
-        var handleResizeForTablet = function (e) {
-            setIsTablet(e.matches);
-        };
-        mqMobile.addEventListener('change', handleResizeForMobile);
-        mqTablet.addEventListener('change', handleResizeForTablet);
+        var subMobile = subscribeForMobile(breakpoints[0], setIsMobile);
+        var subTablet = subscribeForTablet(breakpoints, setIsTablet);
         return function () {
-            mqMobile.removeEventListener('change', handleResizeForMobile);
-            mqTablet.removeEventListener('change', handleResizeForTablet);
+            subMobile.unsubscribe();
+            subTablet.unsubscribe();
         };
-    }, []);
+    }, [breakpoints]);
     return (React.createElement(DeviceDetectContextProvider, { value: [isMobile, isTablet, isNative] }, children));
 };
 export var useIsMobile = function () { return useContext(DeviceDetectContext)[0]; };

package/esm5/util/envCheck.js

@@ -38,18 +38,3 @@ export function isIOS() {
     }
     return /iPad|iPhone|iPad/.test(ua);
 }
-var nativeAppKeyword = '';
-var bIsNativeApp = null;
-export function setNativeAppKeyword(keyword) {
-    nativeAppKeyword = keyword;
-}
-export function isNativeApp() {
-    var ua = userAgent;
-    if (!ua) {
-        return false;
-    }
-    if (bIsNativeApp === null) {
-        bIsNativeApp = ua.indexOf(nativeAppKeyword) >= 0;
-    }
-    return bIsNativeApp;
-}

package/esm5/validate/index.js

@@ -1,7 +1,7 @@
 import { validate as validateOrigin } from './validate';
 import fn from './fn';
-export var validateFn = validateOrigin;
-validateFn.fn = fn;
+export var validate = validateOrigin;
+validate.fn = fn;
 export * from './mergeValidates';
 export * from './validate.type';
 export * from './useValidate';

package/libs/adaptive-render/DeviceDetectContext.d.ts

@@ -1,7 +1,25 @@
 import React from 'react';
 export declare const DeviceDetectContext: React.Context<boolean[]>;
 interface DeviceDetectProviderProps {
-    children: React.ReactNode;
+    /**
+     * 디바이스 디텍터에서 모바일및 태블릿 여부를 확인하는 사이즈 기준.
+     *
+     * - 하나만 설정하면 mobile / desktop 으로 구분된다.
+     * - 두개를 설정하면 mobile / tablet / desktop 3가지로 구분된다.
+     *
+     * @default [539, 1080]
+     */
+    breakpoints?: number[];
+    /**
+     * 네이티브 앱 여부를 확인하는 콜백.
+     *
+     * 결과가 true 면 네이티브앱, false 면 일반 웹이다.
+     *
+     * 콜백을 설정하지 않으면 항상 false 로 간주된다.
+     * @returns
+     */
+    nativeAppChecker?: () => boolean;
+    children?: React.ReactNode;
 }
 /**
  * 컨텍스트: UserAgent 및 Resizing 여부에 따른 태블릿/모바일 여부를 판별 해 준다.
@@ -13,7 +31,7 @@ interface DeviceDetectProviderProps {
  * @see https://stackoverflow.com/questions/29046324/whats-the-most-reliable-way-to-integrate-javascript-with-media-queries
  * @see https://jsperf.com/matchmedia-vs-resize/3
  */
-export declare const DeviceDetectProvider: ({ children, }: DeviceDetectProviderProps) => JSX.Element;
+export declare const DeviceDetectProvider: ({ breakpoints, nativeAppChecker, children, }: DeviceDetectProviderProps) => JSX.Element;
 export declare const useIsMobile: () => boolean;
 export declare const useIsTablet: () => boolean;
 export declare const useIsNative: () => boolean;

package/libs/util/envCheck.d.ts

@@ -49,8 +49,3 @@ export declare function isTablet(): boolean;
  * user-agent 정보를 이용하여 ios 여부를 판단한다.
  */
 export declare function isIOS(): boolean;
-export declare function setNativeAppKeyword(keyword: string): void;
-/**
- * user-agent 정보를 이용하여 native app 여부를 판단한다.
- */
-export declare function isNativeApp(): boolean;

package/libs/validate/index.d.ts

@@ -52,7 +52,7 @@ declare type ValidationCheckerType = typeof validateOrigin & {
  *
  * @see ValidateBulkResultModel
  */
-export declare const validateFn: ValidationCheckerType;
+export declare const validate: ValidationCheckerType;
 export * from './mergeValidates';
 export * from './validate.type';
 export * from './useValidate';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jordy",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "description": "typescript based frontend toolkit",
   "repository": {
     "type": "git",

package/esm5/adaptive-render/device.type.js

@@ -1,9 +0,0 @@
-export var DeviceSizeEnum;
-(function (DeviceSizeEnum) {
-    DeviceSizeEnum[DeviceSizeEnum["MOBILE_SM"] = 320] = "MOBILE_SM";
-    DeviceSizeEnum[DeviceSizeEnum["MOBILE"] = 481] = "MOBILE";
-    DeviceSizeEnum[DeviceSizeEnum["TABLET_SM"] = 768] = "TABLET_SM";
-    DeviceSizeEnum[DeviceSizeEnum["TABLET"] = 961] = "TABLET";
-    DeviceSizeEnum[DeviceSizeEnum["DESKTOP_SM"] = 1025] = "DESKTOP_SM";
-    DeviceSizeEnum[DeviceSizeEnum["DESKTOP"] = 1120] = "DESKTOP";
-})(DeviceSizeEnum || (DeviceSizeEnum = {}));

package/libs/adaptive-render/device.type.d.ts

@@ -1,14 +0,0 @@
-/**
- * 기기별 사이즈를 정의한 것.
- *
- * 사이즈 참고:
- * https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile
- */
-export declare enum DeviceSizeEnum {
-    MOBILE_SM = 320,
-    MOBILE = 481,
-    TABLET_SM = 768,
-    TABLET = 961,
-    DESKTOP_SM = 1025,
-    DESKTOP = 1120
-}