Merge branch 'master' into dependabot/npm_and_yarn/minimist-1.2.8

Author: Normaltic

.babelrc

@@ -2,7 +2,6 @@
   "presets": [
     "@babel/preset-react",
     "@babel/preset-typescript",
-    ["@babel/preset-env", { "targets": "defaults" }],
-    "babel-preset-minify"
+    ["@babel/preset-env", { "targets": "defaults" }]
   ]
 }

package.json

@@ -1,16 +1,15 @@
 {
   "name": "react-daum-postcode",
-  "version": "3.1.1",
+  "version": "3.1.3",
   "description": "Daum Postcode service for React",
-  "main": "./lib/index.js",
+  "main": "./lib/index.cjs.js",
   "types": "./lib/index.d.ts",
+  "module": "./lib/index.esm.js",
   "files": [
     "lib"
   ],
   "scripts": {
-    "build": "concurrently \"yarn:build:*\"",
-    "build:babel": "babel src -d lib --extensions \".ts,.tsx\"",
-    "build:types": "tsc --declarationDir lib"
+    "build": "rollup -c"
   },
   "author": "kimminsik-bernard",
   "contributors": [
@@ -45,6 +44,10 @@
     {
       "name": "TaeSang Cho",
       "url": "https://github.com/Web-Engine"
+    },
+    {
+      "name": "HK1211",
+      "url": "https://github.com/HK1211"
     }
   ],
   "repository": {
@@ -69,10 +72,12 @@
     "@babel/preset-env": "^7.14.9",
     "@babel/preset-react": "^7.14.5",
     "@babel/preset-typescript": "^7.14.5",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.1.1",
     "@types/react": "^17.0.15",
     "@typescript-eslint/eslint-plugin": "^4.29.0",
     "@typescript-eslint/parser": "^4.29.0",
-    "babel-preset-minify": "^0.5.1",
     "concurrently": "^6.2.0",
     "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.2.1",
@@ -82,6 +87,7 @@
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
+    "rollup": "^4.28.1",
     "typescript": "^4.3.5"
   }
 }

rollup.config.mjs

@@ -0,0 +1,25 @@
+import babel from '@rollup/plugin-babel';
+import typescript from '@rollup/plugin-typescript';
+import terser from '@rollup/plugin-terser';
+
+const extensions = ['.js', '.jsx', '.ts', '.tsx'];
+
+export default {
+  input: 'src/index.ts',
+  output: [
+    {
+      file: 'lib/index.cjs.js',
+      format: 'cjs',
+    },
+    {
+      file: 'lib/index.esm.js',
+      format: 'esm',
+    },
+  ],
+  plugins: [
+    babel({extensions, include: 'src' }),
+    typescript({ declarationDir: 'lib' }),
+    terser({ format: { comments: false }}),
+  ],
+  external: ['react'],
+};

src/DaumPostcodeEmbed.tsx

@@ -24,6 +24,7 @@ export type DaumPostcodeProps = DaumPostcodeEmbedProps;
 
 interface State {
   hasError: boolean;
+  completed: boolean;
 }
 
 const defaultErrorMessage = <p>현재 Daum 우편번호 서비스를 이용할 수 없습니다. 잠시 후 다시 시도해주세요.</p>;
@@ -41,19 +42,27 @@ const defaultProps = {
 
 class DaumPostcodeEmbed extends Component<DaumPostcodeEmbedProps, State> {
   static defaultProps = defaultProps;
+  /**
+   * See #61
+   */
+  private mounted = false;
 
   wrap = createRef<HTMLDivElement>();
 
   state = {
     hasError: false,
+    completed: false,
   };
 
   componentDidMount() {
     const { initiate, onError } = this;
     const { scriptUrl } = this.props;
 
     if (!scriptUrl) return;
-    loadPostcode(scriptUrl).then(initiate).catch(onError);
+    if (!this.mounted) {
+      loadPostcode(scriptUrl).then(initiate).catch(onError);
+      this.mounted = true;
+    }
   }
 
   initiate = (Postcode: PostcodeConstructor) => {
@@ -65,7 +74,7 @@ class DaumPostcodeEmbed extends Component<DaumPostcodeEmbedProps, State> {
       ...options,
       oncomplete: (address) => {
         if (onComplete) onComplete(address);
-        if (autoClose && this.wrap.current) this.wrap.current.remove();
+        this.setState({ completed: true });
       },
       onsearch: onSearch,
       onresize: onResize,
@@ -83,8 +92,10 @@ class DaumPostcodeEmbed extends Component<DaumPostcodeEmbedProps, State> {
   };
 
   render() {
-    const { className, style, errorMessage } = this.props;
-    const { hasError } = this.state;
+    const { className, style, errorMessage, autoClose } = this.props;
+    const { hasError, completed } = this.state;
+
+    if (autoClose === true && completed === true) return null;
 
     return (
       <div ref={this.wrap} className={className} style={{ ...defaultStyle, ...style }}>

src/index.ts

@@ -1,7 +1,12 @@
-import DaumPostcodeEmbed, { DaumPostcodeEmbedProps, DaumPostcodeProps } from './DaumPostcodeEmbed';
-import useDaumPostcodePopup, { DaumPostcodePopupParams } from './useDaumPostcodePopup';
-import loadPostcode, { Address, Search, State } from './loadPostcode';
+import DaumPostcodeEmbed from './DaumPostcodeEmbed';
+import useDaumPostcodePopup from './useDaumPostcodePopup';
+import loadPostcode from './loadPostcode';
 
-export type { DaumPostcodeEmbedProps, DaumPostcodeProps, DaumPostcodePopupParams, Address, Search, State };
 export { loadPostcode, DaumPostcodeEmbed, useDaumPostcodePopup };
 export default DaumPostcodeEmbed;
+
+import type { DaumPostcodeEmbedProps, DaumPostcodeProps } from './DaumPostcodeEmbed';
+import type { DaumPostcodePopupParams } from './useDaumPostcodePopup';
+import type { Address, Search, State } from './loadPostcode';
+
+export type { DaumPostcodeEmbedProps, DaumPostcodeProps, DaumPostcodePopupParams, Address, Search, State };

src/loadPostcode.ts

@@ -79,6 +79,7 @@ export interface PostcodeOptions {
   onclose?: (state: State) => void;
   onsearch?: (search: Search) => void;
   width?: string | number;
+  minWidth?: number;
   height?: string | number;
   animation?: boolean;
   focusInput?: boolean;
@@ -130,21 +131,21 @@ const loadPostcode = (function () {
   let promise: Promise<PostcodeConstructor> | null = null;
 
   return function (url: string = postcodeScriptUrl): Promise<PostcodeConstructor> {
-    if( promise ) return promise;
+    if (promise) return promise;
 
     promise = new Promise((resolve, reject) => {
       const script = document.createElement('script');
       script.src = url;
       script.onload = () => {
-        if( window?.daum?.Postcode ) {
+        if (window?.daum?.Postcode) {
           return resolve(window.daum.Postcode);
         }
-        reject(new Error('Script is loaded successfully, but cannot find Postcode module. Check your scriptURL property.'))
+        reject(new Error('Script is loaded successfully, but cannot find Postcode module. Check your scriptURL property.'));
       };
       script.onerror = (error) => reject(error);
       script.id = scriptId;
       document.body.appendChild(script);
-    })
+    });
 
     return promise;
   };