@starasia/input 1.0.2 → 1.0.3
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/input.es.js +6 -21
- package/dist/input.umd.js +7 -22
- package/package.json +6 -6
package/dist/input.es.js
CHANGED
|
@@ -16,27 +16,12 @@ const G = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
16
16
|
--starasia-ui-input-spacing-lg: var(--starasia-ui-spacing-xl, 24px);
|
|
17
17
|
|
|
18
18
|
/* color */
|
|
19
|
-
/*
|
|
20
|
-
--starasia-ui-input-color-primary-blue: var(
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
);
|
|
24
|
-
--starasia-ui-input-color-
|
|
25
|
-
--starasia-ui-color-blue-500,
|
|
26
|
-
#2196f3
|
|
27
|
-
);
|
|
28
|
-
--starasia-ui-input-color-tertiary-blue: var(
|
|
29
|
-
--starasia-ui-color-blue-300,
|
|
30
|
-
#64b5f6
|
|
31
|
-
);
|
|
32
|
-
--starasia-ui-input-color-quaternary-blue: var(
|
|
33
|
-
--starasia-ui-color-blue-100,
|
|
34
|
-
#bbdefb
|
|
35
|
-
);
|
|
36
|
-
--starasia-ui-input-color-quinary-blue: var(
|
|
37
|
-
--starasia-ui-color-blue-50,
|
|
38
|
-
#e3f2fd
|
|
39
|
-
);
|
|
19
|
+
/* brand */
|
|
20
|
+
--starasia-ui-input-color-primary-blue: var(--starasia-ui-brand-primary-default);
|
|
21
|
+
--starasia-ui-input-color-secondary-blue: var(--starasia-ui-brand-primary-default);
|
|
22
|
+
--starasia-ui-input-color-tertiary-blue: var(--starasia-ui-brand-primary-secondary);
|
|
23
|
+
--starasia-ui-input-color-quaternary-blue: var(--starasia-ui-brand-primary-tertiary);
|
|
24
|
+
--starasia-ui-input-color-quinary-blue: var(--starasia-ui-brand-primary-tertiary);
|
|
40
25
|
/* gray */
|
|
41
26
|
--starasia-ui-input-color-primary-gray: var(
|
|
42
27
|
--starasia-ui-color-gray-700,
|
package/dist/input.umd.js
CHANGED
|
@@ -14,27 +14,12 @@
|
|
|
14
14
|
--starasia-ui-input-spacing-lg: var(--starasia-ui-spacing-xl, 24px);
|
|
15
15
|
|
|
16
16
|
/* color */
|
|
17
|
-
/*
|
|
18
|
-
--starasia-ui-input-color-primary-blue: var(
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
);
|
|
22
|
-
--starasia-ui-input-color-
|
|
23
|
-
--starasia-ui-color-blue-500,
|
|
24
|
-
#2196f3
|
|
25
|
-
);
|
|
26
|
-
--starasia-ui-input-color-tertiary-blue: var(
|
|
27
|
-
--starasia-ui-color-blue-300,
|
|
28
|
-
#64b5f6
|
|
29
|
-
);
|
|
30
|
-
--starasia-ui-input-color-quaternary-blue: var(
|
|
31
|
-
--starasia-ui-color-blue-100,
|
|
32
|
-
#bbdefb
|
|
33
|
-
);
|
|
34
|
-
--starasia-ui-input-color-quinary-blue: var(
|
|
35
|
-
--starasia-ui-color-blue-50,
|
|
36
|
-
#e3f2fd
|
|
37
|
-
);
|
|
17
|
+
/* brand */
|
|
18
|
+
--starasia-ui-input-color-primary-blue: var(--starasia-ui-brand-primary-default);
|
|
19
|
+
--starasia-ui-input-color-secondary-blue: var(--starasia-ui-brand-primary-default);
|
|
20
|
+
--starasia-ui-input-color-tertiary-blue: var(--starasia-ui-brand-primary-secondary);
|
|
21
|
+
--starasia-ui-input-color-quaternary-blue: var(--starasia-ui-brand-primary-tertiary);
|
|
22
|
+
--starasia-ui-input-color-quinary-blue: var(--starasia-ui-brand-primary-tertiary);
|
|
38
23
|
/* gray */
|
|
39
24
|
--starasia-ui-input-color-primary-gray: var(
|
|
40
25
|
--starasia-ui-color-gray-700,
|
|
@@ -337,4 +322,4 @@
|
|
|
337
322
|
color: var(--starasia-ui-input-placeholder-color);
|
|
338
323
|
font-weight: var(--starasia-ui-fontWeights-normal, 300);
|
|
339
324
|
}
|
|
340
|
-
`,q=
|
|
325
|
+
`,q=a=>{if(a==="sm")return 16;if(a==="md")return 16;if(a==="lg")return 20},z=a=>a==="default"?"#939E99":a==="error"?"#EF4444":a==="warning"?"#EAB308":"#939E99",j=a=>a==="default"?"#939E99":a==="error"?"#EF4444":a==="warning"?"#EAB308":"#939E99",O=t.forwardRef(({options:a,value:n,setValue:o,isComponentVisible:l,onOptionChange:u},e)=>{const[k,V]=t.useState([]),c=t.useRef(null),h=()=>{if(e!=null&&e.current&&c.current){const y=window.innerHeight,b=e==null?void 0:e.current.getBoundingClientRect(),C=c.current.getBoundingClientRect(),m=b.bottom+C.height;c.current.style.left=`${b.left}px`,c.current.style.width=`${b.width}px`,m>=y-10?c.current.style.top=`${b.top-C.height-5}px`:c.current.style.top=`${b.top+b.height}px`}};return t.useEffect(()=>(window.addEventListener("scroll",h),window.addEventListener("resize",h),()=>{window.removeEventListener("scroll",h),window.removeEventListener("resize",h)}),[e,c]),t.useEffect(()=>{h()},[l]),t.useEffect(()=>{V((a==null?void 0:a.filter(y=>y.toLowerCase().startsWith(n.toLowerCase())))||[])},[n,a]),i.jsx("div",{ref:c,style:{position:"fixed",padding:"8px",boxSizing:"border-box",boxShadow:"0px 8px 12px 0px rgba(0, 0, 0, 0.08)",borderRadius:"8px",background:"white",overflow:"auto",zIndex:5e4},children:k==null?void 0:k.map(y=>W(y,n,o,u))})}),W=(a,n,o,l)=>{const u=a.toLowerCase().indexOf(n.toLowerCase());return i.jsxs("p",{style:{fontFamily:"Poppins",color:"#c9cecc",fontWeight:500,padding:"8px 14px",cursor:"pointer"},onClick:()=>{o(a),l&&l(a)},children:[a.slice(0,u),i.jsx("span",{style:{color:"#374151"},children:a.slice(u,u+n.length)}),a.slice(u+n.length)]})};function A(a){const[n,o]=t.useState(a),l=t.useRef(null),u=e=>{l.current&&!l.current.contains(e.target)&&o(!1)};return t.useEffect(()=>(document.addEventListener("click",u,!0),()=>{document.removeEventListener("click",u,!0)}),[]),{ref:l,isComponentVisible:n,setIsComponentVisible:o}}const T="starasia-input-styles";(a=>{if(!document.getElementById(T)){const n=document.createElement("style");n.id=T,n.textContent=a,document.head.appendChild(n)}})(D);function K(a){return Number(a.replace(/\./g,""))}const N=a=>{let n=a.replace(/[^\d]/g,"");return n=n.replace(/^0+(?=\d)/,""),n.replace(/\B(?=(\d{3})+(?!\d))/g,".")},F=t.forwardRef((a,n)=>{const{leftIcon:o,rightIcon:l,size:u="md",status:e="default",inputUse:k="icon",variant:V="outline",leftAddons:c,rightAddons:h,onClickLeftIcon:y,onClickRightIcon:b,highlightPlaceholder:C,currency:m,fullWidth:U=!1,options:S,onOptionChange:M,...r}=a;{const[Y,E]=t.useState(!0),[v,I]=t.useState(""),[G,$]=t.useState(""),{isComponentVisible:B,ref:P,setIsComponentVisible:J}=A(!1),Q=()=>{J(s=>!s)};return t.useEffect(()=>{typeof r.value=="string"&&r.value.length||r.defaultValue||typeof r.value=="number"?E(!1):E(!0)},[r.value,r.defaultValue]),t.useEffect(()=>{I(m?N(String(r.value)):r.value||"")},[r]),i.jsxs("div",{className:`starasia-input-container starasia-input-${V} starasia-input-container-${e} ${u} `,style:{width:U?"auto":"max-content",position:"relative"},ref:P,onClick:Q,children:[c?i.jsx("div",{className:"starasia-input-container-addons-left",children:c}):null,o?i.jsx("div",{className:"starasia-input-container-icon-left",children:t.cloneElement(o,{width:q(u),color:z(r.disabled?"disable":e),onClick:y,style:{color:`${z(r.disabled?"disable":e)}`}})}):null,i.jsxs("div",{className:"starasia-input-preview-container",children:[i.jsx("input",{className:"starasia-input",...r,placeholder:"",disabled:e==="disable"?!0:r.disabled,ref:n,onChange:s=>{let p=m?N(s.target.value):s.target.value;const d=s.target.selectionStart;if(m)if(G==="Backspace")if(typeof d=="number"&&v[d]==="."){let x=p.slice(0,d-1),w=p.slice(d,p.length);p=N(x+w);const g=v.length-1,L=p.length-1;setTimeout(()=>s.target.setSelectionRange(d-(g-L)<0?0:d-(g-L),d-(g-L)<0?0:d-(g-L)),0)}else{const x=v.length-1,w=p.length-1;let g=d+1-(x-w);setTimeout(()=>s.target.setSelectionRange(g<0?0:g,g<0?0:g),0)}else{const x=v.length-1,w=p.length-1;setTimeout(()=>s.target.setSelectionRange(d+(w-x)-1,d+(w-x)-1),0)}I(p),s.target.value?E(!1):E(!0),r.onChange&&r.onChange({...s,target:{...s.target,value:m?String(K(p)):p,name:s.target.name}}),$("")},value:v,onKeyDown:s=>{s.key==="Backspace"&&$(s.key),r.onKeyDown&&r.onKeyDown(s)}}),Y?H(r.placeholder,C):null]}),l?i.jsx("div",{className:"starasia-input-container-icon-right",children:t.cloneElement(l,{width:q(u),color:j(r.disabled?"disable":e),onClick:b,style:{color:`${j(r.disabled?"disable":e)}`}})}):null,h?i.jsx("div",{className:"starasia-input-container-addons-right",children:h}):null,v&&B&&(S!=null&&S.length)?i.jsx(O,{options:S,value:v,setValue:I,ref:P,isComponentVisible:B,onOptionChange:M}):null]})}}),H=(a,n)=>{if(!a||!n)return i.jsx("p",{className:"starasia-input-placeholder",children:a||""});const o=a.toLowerCase().indexOf(n.toLowerCase());return o===-1?i.jsx("p",{className:"starasia-input-placeholder",children:a}):i.jsxs("p",{className:"starasia-input-placeholder",children:[a.slice(0,o),i.jsx("span",{className:"starasia-input-placeholder-highlighted",children:a.slice(o,o+n.length)}),a.slice(o+n.length)]})};f.Input=F,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@starasia/input",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"description": "input component for starasia UI",
|
|
5
5
|
"author": "Prawito Hudoro",
|
|
6
6
|
"main": "dist/input.umd.js",
|
|
@@ -12,6 +12,10 @@
|
|
|
12
12
|
"dist/*.map",
|
|
13
13
|
"dist/*.css"
|
|
14
14
|
],
|
|
15
|
+
"scripts": {
|
|
16
|
+
"dev": "vite --config vite.config.ts --port 3000",
|
|
17
|
+
"build": "vite build --config vite.config.ts"
|
|
18
|
+
},
|
|
15
19
|
"keywords": [],
|
|
16
20
|
"license": "ISC",
|
|
17
21
|
"type": "module",
|
|
@@ -33,9 +37,5 @@
|
|
|
33
37
|
"react-dom": "^18.2.0",
|
|
34
38
|
"@types/react": "^18.2.55",
|
|
35
39
|
"@types/react-dom": "^18.2.19"
|
|
36
|
-
},
|
|
37
|
-
"scripts": {
|
|
38
|
-
"dev": "vite --config vite.config.ts --port 3000",
|
|
39
|
-
"build": "vite build --config vite.config.ts"
|
|
40
40
|
}
|
|
41
|
-
}
|
|
41
|
+
}
|