"use strict";(self.webpackChunkgrafana=self.webpackChunkgrafana||[]).push([[777],{40777(g,E,t){t.d(E,{FormatTimeTransfomerEditor:()=>O});var a=t(14553),s=t(55501),u=t(72830),n=t(52358),c=t(45415),m=t(72480),v=t(6634),i=t(87748),h=t(16244),M=t(75251);function O({input:f,options:r,onChange:o}){const _=[],D=(0,M.qt)(!0);for(const e of f)for(const l of e.fields)if(l.type==="time"){const d=(0,u.Ct)(l,e,f);_.push({label:d,value:d})}const P=(0,s.useCallback)(e=>{const l=e?.value!==void 0?e.value:"";o({...r,timeField:l})},[o,r]),C=(0,s.useCallback)(e=>{const l=e.target.value;o({...r,outputFormat:l})},[o,r]),T=(0,s.useCallback)(e=>{const l=e?.value!==void 0?e.value:"";o({...r,timezone:l})},[o,r]);return(0,a.jsx)(a.Fragment,{children:(0,a.jsxs)(v.C,{children:[(0,a.jsx)(m.I,{label:(0,n.t)("transformers.format-time-transfomer-editor.label-time-field","Time field"),labelWidth:15,grow:!0,children:(0,a.jsx)(i.l6,{options:_,value:r.timeField,onChange:P,placeholder:"time",isClearable:!0})}),(0,a.jsx)(m.I,{label:(0,n.t)("transformers.format-time-transfomer-editor.label-format","Format"),labelWidth:10,tooltip:(0,a.jsxs)(n.x6,{i18nKey:"transformers.format-time-transfomer-editor.tooltip-format",children:["The output format for the field specified as a"," ",(0,a.jsx)(c.Y,{href:"https://momentjs.com/docs/#/displaying/",external:!0,children:"Moment.js format string"}),"."]}),interactive:!0,children:(0,a.jsx)(h.p,{onChange:C,value:r.outputFormat})}),(0,a.jsx)(m.I,{label:(0,n.t)("transformers.format-time-transfomer-editor.label-set-timezone","Set timezone"),tooltip:(0,n.t)("transformers.format-time-transfomer-editor.tooltip-timezone-manually","Set the timezone of the date manually"),labelWidth:20,children:(0,a.jsx)(i.l6,{options:D,value:r.timezone,onChange:T,isClearable:!0})})]})})}}}]);

//# sourceMappingURL=777-react19.e66fd806f4be3c8740fd.js.map