https://react-uploady.org/assets/js/0af39cf7.762ace70.js

1"use strict";(self.webpackChunkreact_uploady_docs=self.webpackChunkreact_uploady_docs||[]).push([[4462],{56:(e,t,n)=>{n.d(t,{A:()=>l});n(6363);var a=n(3526);const r={tabItem:"tabItem_WQI_"};var s=n(7259);function l(e){let{children:t,hidden:n,className:l}=e;return(0,s.jsx)("div",{role:"tabpanel",className:(0,a.A)(r.tabItem,l),hidden:n,children:t})}},4061:(e,t,n)=>{n.d(t,{A:()=>k});var a=n(6363),r=n(3526),s=n(5269),l=n(6782),i=n(7596),o=n(6853),c=n(7667),u=n(3040),d=n(820);function h(e){return a.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,a.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad <Tabs> child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,a.useMemo)((()=>{const e=t??function(e){return h(e).map((e=>{let{props:{value:t,label:n,attributes:a,default:r}}=e;return{value:t,label:n,attributes:a,default:r}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in <Tabs>. Every value needs to be unique.`)}(e),e}),[t,n])}function b(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function m(e){let{queryString:t=!1,groupId:n}=e;const r=(0,i.W6)(),s=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,c.aZ)(s),(0,a.useCallback)((e=>{if(!s)return;const t=new URLSearchParams(r.location.search);t.set(s,e),r.replace({...r.location,search:t.toString()})}),[s,r])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,s=p(e),[l,i]=(0,a.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(t){if(!b({value:t,tabValues:n}))throw new Error(`Docusaurus error: The <Tabs> has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const a=n.find((e=>e.default))??n[0];if(!a)throw new Error("Unexpected error: 0 tabValues");return a.value}({defaultValue:t,tabValues:s}))),[c,u]=m({queryString:n,groupId:r}),[h,f]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,s]=(0,d.Dv)(n);return[r,(0,a.useCallback)((e=>{n&&s.set(e)}),[n,s])]}({groupId:r}),v=(()=>{const e=c??h;return b({value:e,tabValues:s})?e:null})();(0,o.A)((()=>{v&&i(v)}),[v]);return{selectedValue:l,selectValue:(0,a.useCallback)((e=>{if(!b({value:e,tabValues:s}))throw new Error(`Can't select invalid tab value=${e}`);i(e),u(e),f(e)}),[u,f,s]),tabValues:s}}var v=n(1751);const x={tabList:"tabList_hEov",tabItem:"tabItem_bQse"};var g=n(7259);function y(e){let{className:t,block:n,selectedValue:a,selectValue:s,tabValues:i}=e;const o=[],{blockElementScrollPositionUntilNextRender:c}=(0,l.a_)(),u=e=>{const t=e.currentTarget,n=o.indexOf(t),r=i[n].value;r!==a&&(c(t),s(r))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const n=o.indexOf(e.currentTarget)+1;t=o[n]??o[0];break}case"ArrowLeft":{const n=o.indexOf(e.currentTarget)-1;t=o[n]??o[o.length-1];break}}t?.focus()};return(0,g.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:i.map((e=>{let{value:t,label:n,attributes:s}=e;return(0,g.jsx)("li",{role:"tab",tabIndex:a===t?0:-1,"aria-selected":a===t,ref:e=>{o.push(e)},onKeyDown:d,onClick:u,...s,className:(0,r.A)("tabs__item",x.tabItem,s?.className,{"tabs__item--active":a===t}),children:n??t},t)}))})}function j(e){let{lazy:t,children:n,selectedValue:s}=e;

1const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===s));return e?(0,a.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,g.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,a.cloneElement)(e,{key:t,hidden:e.props.value!==s})))})}function S(e){const t=f(e);return(0,g.jsxs)("div",{className:(0,r.A)(s.G.tabs.container,"tabs-container",x.tabList),children:[(0,g.jsx)(y,{...t,...e}),(0,g.jsx)(j,{...t,...e})]})}function k(e){const t=(0,v.A)();return(0,g.jsx)(S,{...e,children:h(e.children)},String(t))}},6044:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>p,frontMatter:()=>o,metadata:()=>a,toc:()=>d});const a=JSON.parse('{"id":"api/hooks/useBatchStartListener","title":"useBatchStartListener","description":"Package","source":"@site/docs/api/hooks/useBatchStartListener.mdx","sourceDirName":"api/hooks","slug":"/api/hooks/useBatchStartListener","permalink":"/docs/api/hooks/useBatchStartListener","draft":false,"unlisted":false,"editUrl":"https://github.com/rpldy/react-uploady-docs/edit/master/docs/api/hooks/useBatchStartListener.mdx","tags":[{"inline":true,"label":"hook","permalink":"/docs/tags/hook"},{"inline":true,"label":"event","permalink":"/docs/tags/event"},{"inline":true,"label":"batch","permalink":"/docs/tags/batch"},{"inline":true,"label":"cancellable","permalink":"/docs/tags/cancellable"}],"version":"current","lastUpdatedAt":1694704784000,"frontMatter":{"id":"useBatchStartListener","title":"useBatchStartListener","pagination_label":"useBatchStartListener","sidebar_label":"\ud83e\ude9d useBatchStartListener","tags":["hook","event","batch","cancellable"]},"sidebar":"api","previous":{"title":"useBatchRetry","permalink":"/docs/api/hooks/useBatchRetry"},"next":{"title":"useChunkFinishListener","permalink":"/docs/api/hooks/useChunkFinishListener"}}');var r=n(7259),s=n(9058),l=n(4061),i=n(56);const o={id:"useBatchStartListener",title:"useBatchStartListener",pagination_label:"useBatchStartListener",sidebar_label:"\ud83e\ude9d useBatchStartListener",tags:["hook","event","batch","cancellable"]},c=void 0,u={},d=[{value:"Package",id:"package",level:2},{value:"Installation",id:"installation",level:2},{value:"Details",id:"details",level:2},{value:"Example",id:"example",level:2},{value:"Cancel Batch",id:"cancel-batch",level:3},{value:"Update Batch Options",id:"update-batch-options",level:3}];function h(e){const t={a:"a",admonition:"admonition",code:"code",em:"em",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,s.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h2,{id:"package",children:"Package"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.strong,{children:(0,r.jsx)(t.em,{children:(0,r.jsx)(t.a,{href:"../../../packages/rpldy-uploady",children:"@rpldy/uploady"})})})}),"\n",(0,r.jsx)(t.h2,{id:"installation",children:"Installation"}),"\n",(0,r.jsxs)(l.A,{groupId:"npm2yarn",children:[(0,r.jsx)(i.A,{value:"npm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"npm install @rpldy/uploady\n"})})}),(0,r.jsx)(i.A,{value:"yarn",label:"Yarn",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"yarn add @rpldy/uploady\n"})})}),(0,r.jsx)(i.A,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"pnpm add @rpldy/uploady\n"})})})]}),"\n",(0,r.jsx)(t.h2,{id:"details",children:"Details"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-typescript",children:"type BatchStartHook = (cb: (batch: Batch, options: CreateOptions) =>\n    PreSendResponse | Promise<PreSendResponse>) => void;\n"})}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["See: ",(0,r.jsx)(t.a,{href:"../../types#createoptions",children:"CreateOptions"})]}),"\n",(0,r.jsxs)(t.li,{children:["See; ",(0,r.jsx)(t.a,{href:"../../types#presendresponse",children:"PreSendResponse"})]}),"\n",(0,r.jsxs)(t.li,{children:["See: ",(0,r.jsx)(t.a,{href:"../../entities#batch",children:"Batch Entity"})]}),"\n"]}),"\n",(0,r.jsx)(t.admonition,{type:"note",children:(0,r.jsxs)(t.p,{children:["Event Hook - ",(0,r.jsx)(t.a,{href:"../../events#batchStart",children:"BATCH-START"})]})}),"\n",(0,r.jsx)(t.p,{children:"Called when batch items start uploading"}),"\n",(0,r.jsxs)(t.p,{children:["The callback passed to the hook may also return an object c

1ontaining items and/or options\nin order to update the request dynamically, similar to ",(0,r.jsx)(t.a,{href:"../useRequestPreSend",children:"useRequestPreSend"})," only for the entire batch.\nSee ",(0,r.jsx)(t.a,{href:"../../hocs/withBatchStartUpdate",children:"withBatchStartUpdate"})," HOC below for more details."]}),"\n",(0,r.jsx)(t.admonition,{type:"info",children:(0,r.jsxs)(t.p,{children:["This event is ",(0,r.jsx)(t.em,{children:(0,r.jsx)(t.a,{href:"../../events#cancellable-events",children:"cancellable"})})]})}),"\n",(0,r.jsx)(t.admonition,{type:"info",children:(0,r.jsx)(t.p,{children:"This event can be scoped to a specific batch by passing the batch id as a second parameter"})}),"\n",(0,r.jsx)(t.h2,{id:"example",children:"Example"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-javascript",children:'import { useBatchStartListener } from "@rpldy/uploady";\n\nconst MyComponent = () => {\n    useBatchStartListener((batch, options) => {\n        console.log(`batch ${batch.id} started uploading`);\n    });\n\n    //or scoped:\n    useBatchStartListener((batch) => {\n        console.log(`batch ${batch.id} started uploading`);\n    }, "b-123");\n    //...\n};\n'})}),"\n",(0,r.jsx)(t.h3,{id:"cancel-batch",children:"Cancel Batch"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-javascript",children:'import { useBatchStartListener } from "@rpldy/uploady";\n\nconst MyComponent = () => {\n    useBatchStartListener(() => {\n        return false;\n    });\n};\n'})}),"\n",(0,r.jsx)(t.h3,{id:"update-batch-options",children:"Update Batch Options"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-javascript",children:'import { useBatchStartListener } from "@rpldy/uploady";\n    const MyComponent = () => {\n        useBatchStartListener((batch, options) => {\n            return {\n\t\t\t\toptions: {\n\t\t\t\t\tdestination: {\n\t\t\t\t\t\theaders: {\n\t\t\t\t\t\t\t"x-custom":\n\t\t\t\t\t\t\t\toptions.destination.headers["x-custom"]\t+ " updated",\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n            }\n        });\n    };\n'})})]})}function p(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},9058:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>i});var a=n(6363);const r={},s=a.createContext(r);function l(e){const t=a.useContext(s);return a.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),a.createElement(s.Provider,{value:t},e.children)}}}]);