https://www.bangkokbiznews.com/_next/static/chunks/1586.85c220f4baefe80c.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[1586],{61586:function(n,e,t){t.r(e);var i=t(14924),o=t(7297),r=t(85893),s=t(96486),l=t.n(s),d=t(67294),u=t(37094),a=t(30080),$=t(25617),c=t(46827),p=t(98969),v=t(186);function f(){var n=(0,o.Z)(["\n  position: relative;\n  display: block;\n  width: 100%;\n  padding: 15px;\n  margin-bottom: 30px;\n  .input-form {\n    display: flex;\n    align-items: center;\n\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    background: transparent;\n    border-radius: 10px;\n    border: 1px solid rgb(0, 0, 0, 0.3);\n    box-sizing: border-box;\n    padding: 10px;\n    outline: none;\n    color: black;\n    font-size: 16px;\n    padding-left: 30px;\n\n    &:hover {\n      border: 1px solid #0600e7;\n    }\n  }\n  .label-icon {\n    position: absolute;\n    top: 50%;\n    left: 0px;\n    color: rgb(0, 0, 0, 0.3);\n    transform: translate(10px, 0px);\n  }\n  .arrow-icon {\n    position: absolute;\n    top: 50%;\n    right: 10px;\n    color: rgb(0, 0, 0, 0.3);\n  }\n  span {\n    position: absolute;\n    top: 0px;\n    left: 30px;\n    line-height: 2;\n    padding: 10px;\n    font-size: 16px;\n    pointer-events: none;\n    color: rgb(0, 0, 0, 0.3);\n    transition: all ease-in-out 0.2s;\n  }\n  .input-form:focus ~ span,\n  .input-form:not(:placeholder-shown) ~ span {\n    transform: translateX(-30px) translateY(-35px);\n    font-size: 12px;\n  }\n  ul.list-wrapper {\n    width: 100%;\n    flex-direction: column;\n    list-style-type: none;\n    background-color: #fff;\n    border-radius: 0 0 5px 5px;\n    border: 1px solid #add8e6;\n    border-top: none;\n    max-height: 150px;\n    margin: 0;\n    overflow-y: scroll;\n    overflow-x: hidden;\n    padding: 0;\n    position: absolute;\n    top: 43px;\n    right: 0px;\n    z-index: 5;\n    display: none;\n    li {\n      width: 100%;\n      padding: 7px 9px;\n      border-bottom: 1px solid #e1e1e1;\n      cursor: pointer;\n      color: black;\n      font-size: 16px;\n      &:hover {\n        background-color: #c0bcbc;\n      }\n    }\n  }\n  .active {\n    background-color: #1e90ff;\n    color: white !important;\n    &:hover {\n      background-color: #0578eb !important;\n      color: #fff;\n    }\n  }\n"]);return f=function(){return n},n}function m(){var n=(0,o.Z)(["\n  border-bottom: 1px solid rgb(0, 0, 0, 0.3);\n  padding: 15px 0 45px;\n  position: relative;\n  height: auto;\n  width: 100%;\n  gap: 15px;\n  display: flex;\n  justify-content: space-between;\n  flex-wrap: wrap;\n"]);return m=function(){return n},n}var x=[{nameTH:"จังหวัด",nameEN:"Province"},{nameTH:"เขต/อำเภอ",nameEN:"District"},{nameTH:"แขวง/ตำบล",nameEN:"Subdistrict"},{nameTH:"รหัสไปรษณีย์",nameEN:"PostCode"},{nameTH:"ที่อยู่",nameEN:"Address"}],b=v.default.div(f()),y=v.default.div(m());e.default=function(n){var e,t,o,s,v,f,m=n.defaultValue,_=n.lang,h=n.selectLang,g=n.addressData,j=function(n,e,t,i,o){ne(0),e((0,p.Ie)(i,n.target.value,N)[0]);var r=n.target.value;if(""===r)t(i),null===(s=document.querySelector(".".concat(o,"-input")))||void 0===s||s.setAttribute("style","border: 2px solid rgb(0, 0, 0, 0.3)");else{var s,d,u=i.filter(function(n){return null!=n&&!!n[N].toUpperCase().match(r.toUpperCase())});null===(d=document.querySelector(".".concat(o,"-input")))||void 0===d||d.setAttribute("style","border: 2px solid ".concat(l().isEmpty(u)?"red":"rgb(0, 0, 0, 0.3)")),t(u)}},E=(0,$.I0)(),N=_,w={jsonProvince:null==g?void 0:g.jsonProvince,jsonDistrict:null==g?void 0:g.jsonDistrict,jsonSubdistrict:null==g?void 0:g.jsonSubdistrict},S=(0,d.useRef)(!0),k=(0,d.useRef)(!0),z=(0,d.useState)((0,p.Ie)(null==w?void 0:w.jsonProvince,null==m?void 0:null===(e=m.province)||void 0===e?void 0:null===(t=e.id)||void 0===t?void 0:t.toString(),"id")[0]),T=z[0],I=z[1],C=(0,d.useState)((0,p.Ie)(null==w?void 0:w.jsonDistrict,null==m?void 0:null===(o=m.district)||void 0===o?void 0:null===(s=o.id)||void 0===s?void 0:s.toString(),"id")[0]),H=C[0],q=C[1],D=(0,d.useState)((0,p.Ie)(null==w?void 0:w.jsonSubdistrict,null==m?void 0:null===(v=m.subdistrict)||void 0===v?void 0:null===(f=v.id)||void 0===f?void 0:f.toString(),"id")[0]),A=D[0],P=D[1],F=(0,d.useState)([]),L=F[0],J=F[1],O=(0,d.useState)([]),Q=O[0],Z=O[1],B=(0,d.useState)([]),R=B[0],U=B[1],V=(0,d.useState)(),X=V[0],Y=V[1],G=(0,d.useState)(),K=G[0],M=G[1],W=(0,d.useState)(0),nn=W[0],ne=W[1],nt=function(n){"object"!=typeof n&&(n=document.getElementById(n));var e=null==n?void 0:n.parentNode;if(e){var t=e.scrollTop+(e.offsetHeight-0)-2*n.offsetHeight,i=e.scrollTop+0;n.offsetTop-e.offsetTop<=i?e.scrollTop=n.offsetTop-(e.offsetHeight-0-n.offsetHeight):n.offsetTop>=t&&(e.scrollTop=n.offsetTop-(e.offsetHeight-0-n.offsetHeight)+40)}};(0,d.useEffect)(function(){var n=function(n){var e=n.keyCode;40===e&&L.length-1>nn&&ne(nn+1),38===e&&nn>=1&&ne(nn-1),13!==e||l().isEmpty(L)||(n.preventDefault(),I(L[nn]),J([])),nt("li".concat(nn))};return window.addEventListener("keydown",n),function(){return window.removeEventListener("keydown",n)}},[L,nn]),(0,d.useEffect)(function(){var n=function(n){var e=n.keyCode;40===e&&void 0!==Q&&Q.length-1>nn&&ne(nn+1),38===e&&nn>

1=1&&ne(nn-1),13!==e||l().isEmpty(Q)||(n.preventDefault(),void 0!==Q&&q(Q[nn]),Z([])),nt("li".concat(nn))};return window.addEventListener("keydown",n),function(){return window.removeEventListener("keydown",n)}},[Q,nn]),(0,d.useEffect)(function(){var n=function(n){var e=n.keyCode;40===e&&void 0!==R&&R.length-1>nn&&ne(nn+1),38===e&&nn>=1&&ne(nn-1),13!==e||l().isEmpty(R)||(n.preventDefault(),void 0!==R&&P(R[nn]),U([])),nt("li".concat(nn))};return window.addEventListener("keydown",n),function(){return window.removeEventListener("keydown",n)}},[R,nn]),(0,d.useEffect)(function(){var n;l().isEmpty(null==w?void 0:w.jsonDistrict)||Y((0,p.Ie)(null==w?void 0:w.jsonDistrict,null==T?void 0:null===(n=T.id)||void 0===n?void 0:n.toString(),"province_id")),E((0,c.cu)({id:null==T?void 0:T.id,nameTH:null==T?void 0:T.name_th})),S.current?S.current=!1:q((0,i.Z)({},N,""))},[T]),(0,d.useEffect)(function(){var n,e;l().isEmpty(null==w?void 0:w.jsonSubdistrict)||M((0,p.Ie)(null==w?void 0:w.jsonSubdistrict,null==H?void 0:null===(n=H.id)||void 0===n?void 0:n.toString(),"district_id")),E((0,c.rc)({id:null==H?void 0:H.id,nameTH:null==H?void 0:H.name_th})),k.current?k.current=!1:P((e={},(0,i.Z)(e,N,""),(0,i.Z)(e,"zip_code",""),e))},[H]),(0,d.useEffect)(function(){E((0,c.I0)({id:null==A?void 0:A.id,nameTH:null==A?void 0:A.name_th}))},[A]),(0,d.useEffect)(function(){var n,e;l().isEmpty(L)?null===(e=document.querySelector(".ul-province"))||void 0===e||e.setAttribute("style","display:none;"):null===(n=document.querySelector(".ul-province"))||void 0===n||n.setAttribute("style","display:flex;")},[L]),(0,d.useEffect)(function(){var n,e;l().isEmpty(Q)?null===(e=document.querySelector(".ul-district"))||void 0===e||e.setAttribute("style","display:none;"):null===(n=document.querySelector(".ul-district"))||void 0===n||n.setAttribute("style","display:flex;")},[Q]),(0,d.useEffect)(function(){var n,e;l().isEmpty(R)?null===(e=document.querySelector(".ul-subdistrict"))||void 0===e||e.setAttribute("style","display:none;"):null===(n=document.querySelector(".ul-subdistrict"))||void 0===n||n.setAttribute("style","display:flex;")},[R]);var ni=function(n){var e=n.target.value;if(l().isEmpty(K)){var t=(0,p.Ie)(null==g?void 0:g.jsonSubdistrict,e,N)[0];P(t)}else j(n,P,U,K,"subdistrict")};return(0,r.jsxs)(y,{className:"address-wrapper",children:[(0,r.jsxs)(b,{className:"address-item detail",children:[(0,r.jsx)("input",{defaultValue:null==m?void 0:m.address,className:"input-form",type:"text",name:"address",id:"address",placeholder:" ",required:!0}),(0,r.jsx)(a.JFQ,{size:20,className:"label-icon"}),(0,r.jsx)("span",{children:x[4][h]})]}),(0,r.jsxs)(b,{className:"address-item",children:[(0,r.jsx)("input",{value:null==T?void 0:T[N],type:"text",name:"province",id:"province",placeholder:" ",className:"input-form province-input",onBlur:function(){return setTimeout(function(){return J([])},300)},onFocus:function(n){return!l().isEmpty(null==w?void 0:w.jsonProvince)&&j(n,I,J,null==w?void 0:w.jsonProvince,"province")},onChange:function(n){return!l().isEmpty(null==w?void 0:w.jsonProvince)&&j(n,I,J,null==w?void 0:w.jsonProvince,"province")},required:!0}),(0,r.jsx)(a.JFQ,{size:20,className:"label-icon"}),(0,r.jsx)(u.OId,{size:18,className:"arrow-icon"}),(0,r.jsx)("span",{children:x[0][h]}),(0,r.jsx)("ul",{className:"list-wrapper ul-province",children:L.map(function(n,e){return(0,r.jsx)("li",{onClick:function(){I(n),J([])},id:"li".concat(e),className:nn===e?"active":"",children:n[N]},e)})})]}),(0,r.jsxs)(b,{className:"address-item",children:[(0,r.jsx)("input",{value:null==H?void 0:H[N],type:"text",name:"district",id:"district",placeholder:" ",className:"input-form district-input",onBlur:function(){return setTimeout(function(){return Z([])},300)},onFocus:function(n){return!l().isEmpty(X)&&j(n,q,Z,X,"district")},onChange:function(n){return l().isEmpty(X)?q((0,p.Ie)(null==g?void 0:g.jsonDistrict,n.target.value,N)[0]):j(n,q,Z,X,"district")},required:!0}),(0,r.jsx)(a.JFQ,{size:20,className:"label-icon"}),(0,r.jsx)(u.OId,{size:18,className:"arrow-icon"}),(0,r.jsx)("span",{children:x[1][h]}),(0,r.jsx)("ul",{className:"list-wrapper ul-district",children:Q&&Q.map(function(n,e){return(0,r.jsx)("li",{id:"li".concat(e),onClick:function(){q(n),Z([])},className:nn===e?"active":"",children:n[N]},e)})})]}),(0,r.jsxs)(b,{className:"address-item",children:[(0,r.jsx)("input",{value:null==A?void 0:A[N],type:"text",placeholder:" ",name:"subdistrict",id:"subdistrict",onBlur:function(){return setTimeout(function(){return U([])},300)},onFocus:function(n){return!l().isEmpty(K)&&j(n,P,U,K,"subdistrict")},onChange:ni,className:"input-form subdistrict-input",required:!0}),(0,r.jsx)(a.JFQ,{size:20,className:"label-icon"}),(0,r.jsx)(u.OId,{size:18,className:"arrow-icon"}),(0,r.jsx)("span",{children:x[2][h]}),(0,r.jsx)("ul",{className:"list-wrapper ul-subdistrict",children:R&&R.map(function(n,e){return(0,r.jsx)("li",{id:"li".concat(e),onClick:function(){P(n),U([])},className:nn===e?"active":"",children:null==n?void 0:n[N]},e)})})]}),(0,r.jsxs)(b,{className:"address-item",children:[(0,r.jsx)("input",{value:null==A?void 0:A.zip_code,className:"input-form",type:"text",name:"zip_code",id:"zip_code",placeholder:" ",readOnly:!l().isEmpty(null==A?void 0:A.zip_code),required:!0}),(0,r.jsx)(a.JFQ,{size:20,className:"label-icon"}),l().isEmpty(null==A?void 0:A.zip_code)&&!l().isEmpty(null==A?void 0:A[N])&&(0,r.jsx)(u.OId,{size:18,className:"arrow-icon"}),(0,r.jsx)("span",{children:x[3][h]})]})]})}}}]);
2//# sourceMappingURL=1586.85c220f4baefe80c.js.map