koval-ui
Version:
React components collection with minimalistic design. Supports theming, layout, and input validation.
3 lines (2 loc) • 2.73 kB
JavaScript
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),e=require("react"),k=require("classnames"),w=require("../../../internal/Icons/IconClose.cjs"),M=require("../../../internal/Icons/IconEdit.cjs"),B=require("../../../internal/Icons/IconColumns.cjs"),L=require("../../../internal/locale/useBrowserLocale.cjs"),r=require("./Dialog.module.css.cjs"),s=require("../types.cjs"),R=require("./PercentageInput.cjs"),V=require("../../Dialog/useDialogState.cjs"),A=require("../../Dialog/Dialog.cjs"),g=require("../../FormField/FormField.cjs"),O=require("../../Select/Select.cjs"),W=require("../../InputDate/InputDate.cjs"),N=require("../../InputText/InputText.cjs"),I=require("../../InputNumeric/InputNumeric.cjs"),a=i=>{const l=({onChange:d=()=>{},...p})=>{const t=e.useCallback(c=>{var n;d((n=c.target)==null?void 0:n.value)},[d]);return u.jsx(i,{...p,mode:"floating",onChange:t})};return l.displayName=i.displayName,l},_={[s.ColumnTypes.text]:a(N.InputText),[s.ColumnTypes.currency]:a(I.InputNumeric),[s.ColumnTypes.decimal]:a(I.InputNumeric),[s.ColumnTypes.unit]:a(I.InputNumeric),[s.ColumnTypes.percentage]:R.PercentageInput,[s.ColumnTypes.select]:a(N.InputText),[s.ColumnTypes.date]:a(W.InputDate)},S=e.memo(({id:i,columnsConfig:l=[],selectionAmount:d,onEdit:p})=>{const{dialogParams:t,closeDialog:c}=V.useDialogState(i),[n,C]=e.useState(l[0].id);e.useEffect(()=>{t!=null&&t.columnId&&C(t==null?void 0:t.columnId)},[t==null?void 0:t.columnId]);const D=e.useCallback(o=>{C(o.target.value)},[]),[q,x]=e.useState(s.ColumnTypes.text);e.useEffect(()=>{var m;const o=((m=l.find(({id:F})=>F===n))==null?void 0:m.type)||s.ColumnTypes.text;x(o)},[l,n,x]);const j=e.useMemo(()=>_[q],[q]),[y,T]=e.useState("");e.useEffect(()=>{T("")},[n]);const h=e.useCallback(()=>{p(n||l[0].id,y),c()},[c,l,p,n,y]),f=e.useCallback(()=>{c()},[c]),v=e.useMemo(()=>[[{title:"Cancel",onClick:f,icon:w.IconClose},{title:"Apply change",icon:M.IconEdit,onClick:h,type:"link"}]],[h,f]),b=L.useBrowserLocale(),E=new Intl.NumberFormat(b,{style:"decimal"}).format(d||0);return u.jsx(A.Dialog,{animation:"scale-in",showCloseButton:!1,dialogTitle:`Edit ${E} row(s)`,id:i,className:r.default.dialog,actions:v,children:u.jsxs("div",{className:r.default.fieldset,children:[u.jsx(g.FormField,{className:r.default.field,label:"Column:",children:u.jsx(O.Select,{prefix:B.IconColumns,value:n,onChange:D,children:l.map(({id:o,name:m})=>u.jsx("option",{value:o,children:m},o))})}),u.jsx(g.FormField,{className:k(r.default.field,r.default.valueField),label:"New value:",children:u.jsx(j,{value:y,onChange:T})})]})})});S.displayName="EditDialog";exports.EditDialog=S;
//# sourceMappingURL=EditDialog.cjs.map