@uploadcare/react-uploader 0.5.1 → 0.5.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/README.md +7 -7
- package/dist/react-uploader.cjs +1 -1
- package/dist/react-uploader.js +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -59,7 +59,7 @@ Each component serves specific use cases and can be easily implemented into your
|
|
|
59
59
|
|
|
60
60
|
```jsx
|
|
61
61
|
import { FileUploaderRegular } from "@uploadcare/react-uploader";
|
|
62
|
-
import "@uploadcare/react-
|
|
62
|
+
import "@uploadcare/react-uploader/core.css";
|
|
63
63
|
|
|
64
64
|
<FileUploaderRegular pubkey="YOUR_PUBLIC_KEY"/>;
|
|
65
65
|
```
|
|
@@ -68,7 +68,7 @@ import "@uploadcare/react-adapter/core.css";
|
|
|
68
68
|
|
|
69
69
|
```jsx
|
|
70
70
|
import { FileUploaderInline } from "@uploadcare/react-uploader";
|
|
71
|
-
import "@uploadcare/react-
|
|
71
|
+
import "@uploadcare/react-uploader/core.css";
|
|
72
72
|
|
|
73
73
|
<FileUploaderInline pubkey="YOUR_PUBLIC_KEY"/>;
|
|
74
74
|
```
|
|
@@ -77,7 +77,7 @@ import "@uploadcare/react-adapter/core.css";
|
|
|
77
77
|
|
|
78
78
|
```jsx
|
|
79
79
|
import { FileUploaderMinimal } from "@uploadcare/react-uploader";
|
|
80
|
-
import "@uploadcare/react-
|
|
80
|
+
import "@uploadcare/react-uploader/core.css";
|
|
81
81
|
|
|
82
82
|
<FileUploaderMinimal pubkey="YOUR_PUBLIC_KEY"/>;
|
|
83
83
|
```
|
|
@@ -86,7 +86,7 @@ import "@uploadcare/react-adapter/core.css";
|
|
|
86
86
|
|
|
87
87
|
An easy way to connect React-Uploader to your project and utilize the available API props.
|
|
88
88
|
We provide a full set of props that are used in blocks. For review we suggest you to look at
|
|
89
|
-
the [documentation]
|
|
89
|
+
the [documentation][uc-docs-file-uploader-options].
|
|
90
90
|
|
|
91
91
|
## Styles
|
|
92
92
|
|
|
@@ -95,7 +95,7 @@ classes to the uploader `FileUploader[Regular | Minimal | Inline]` wrapper.
|
|
|
95
95
|
|
|
96
96
|
```jsx
|
|
97
97
|
import { FileUploaderRegular } from "@uploadcare/react-uploader";
|
|
98
|
-
import "@uploadcare/react-
|
|
98
|
+
import "@uploadcare/react-uploader/core.css";
|
|
99
99
|
|
|
100
100
|
<FileUploaderRegular className="fileUploaderWrapper" pubkey="YOUR_PUBLIC_KEY"/>;
|
|
101
101
|
```
|
|
@@ -117,7 +117,7 @@ import {
|
|
|
117
117
|
FileUploaderRegular,
|
|
118
118
|
UploadCtxProvider
|
|
119
119
|
} from "@uploadcare/react-uploader";
|
|
120
|
-
import "@uploadcare/react-
|
|
120
|
+
import "@uploadcare/react-uploader/core.css";
|
|
121
121
|
|
|
122
122
|
const Example = () => {
|
|
123
123
|
const uploaderRef = useRef < InstanceType < UploadCtxProvider > | null > (null);
|
|
@@ -139,7 +139,7 @@ Example:
|
|
|
139
139
|
|
|
140
140
|
```jsx
|
|
141
141
|
import { FileUploaderRegular } from "@uploadcare/react-uploader";
|
|
142
|
-
import "@uploadcare/react-
|
|
142
|
+
import "@uploadcare/react-uploader/core.css";
|
|
143
143
|
|
|
144
144
|
<FileUploaderRegular
|
|
145
145
|
pubkey="YOUR_PUBLIC_KEY"
|
package/dist/react-uploader.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),v=require("@uploadcare/blocks");function j(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const a=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,a.get?a:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const i=j(v),F=new Set(["children","ref","style","className"]),I=(e={})=>Object==null?void 0:Object.keys(e).reduce((t,n)=>{var a,l;const o=e==null?void 0:e[n],c=`on${(l=(a=o==null?void 0:o.split("-"))==null?void 0:a.map(s=>s.charAt(0).toUpperCase()+s.slice(1)))==null?void 0:l.join("")}`;return t[c]=o,t},{}),y=new WeakMap,x=e=>{let t=y.get(e);return t===void 0&&(t=new Map,y.set(e,t)),t},A=({node:e,nameProp:t,valueProp:n,prevValueProp:a,event:l})=>{if(l!==void 0){if(n!==a){const o=x(e),c=o.has(l);let s=o.get(l);n!==void 0?c?s.handleEvent=n:(s={handleEvent:n},o.set(l,s),e.addEventListener(l,u=>s.handleEvent(u.detail))):c&&(o.delete(l),e.removeEventListener(l,s))}return}e[t]=n,n==null&&t in HTMLElement.prototype&&e.removeAttribute(t)},R=(e,t,n)=>{const a={},l={};return Object.entries(e).forEach(([o,c])=>{F.has(o)?a[o==="className"?"class":o]=c:t.has(o)||o in n.prototype?l[o]=c:a[o]=c}),{reactProps:a,customElProps:l}},f=({react:e,tag:t,elClass:n,schemaEvents:a})=>{const l=I(a),o=new Set(Object.keys(l??{})),c=e.forwardRef((s,u)=>{const d=e.useRef(new Map),g=e.useRef(null),{reactProps:O,customElProps:w}=R(s,o,n);return e.useLayoutEffect(()=>{if(g.current===null)return;const m=new Map;for(const p in w)A({node:g.current,nameProp:p,valueProp:w[p],prevValueProp:d.current.get(p),event:l[p]}),d.current.delete(p),m.set(p,s[p]);for(const[p,h]of d.current)A({node:g.current,nameProp:p,valueProp:void 0,prevValueProp:h,event:l[p]});d.current=m}),e.createElement(t??n.__tag,{...O,ref:e.useCallback(m=>{g.current=m,typeof u=="function"?u(m):u!==null&&(u.current=m)},[u])})});return c.displayName=n.name,c},E=f({react:r,tag:"lr-config",elClass:i.Config}),P=f({react:r,tag:"lr-upload-ctx-provider",elClass:i.UploadCtxProvider,schemaEvents:i.UploadCtxProvider.EventType}),M=e=>{const t={},n={};return Object.entries(e).forEach(([a,l])=>{a.startsWith("on")?t[a]=l:n[a]=l}),{eventHandlers:t,config:n}},B="0.5.
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),v=require("@uploadcare/blocks");function j(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const a=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,a.get?a:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const i=j(v),F=new Set(["children","ref","style","className"]),I=(e={})=>Object==null?void 0:Object.keys(e).reduce((t,n)=>{var a,l;const o=e==null?void 0:e[n],c=`on${(l=(a=o==null?void 0:o.split("-"))==null?void 0:a.map(s=>s.charAt(0).toUpperCase()+s.slice(1)))==null?void 0:l.join("")}`;return t[c]=o,t},{}),y=new WeakMap,x=e=>{let t=y.get(e);return t===void 0&&(t=new Map,y.set(e,t)),t},A=({node:e,nameProp:t,valueProp:n,prevValueProp:a,event:l})=>{if(l!==void 0){if(n!==a){const o=x(e),c=o.has(l);let s=o.get(l);n!==void 0?c?s.handleEvent=n:(s={handleEvent:n},o.set(l,s),e.addEventListener(l,u=>s.handleEvent(u.detail))):c&&(o.delete(l),e.removeEventListener(l,s))}return}e[t]=n,n==null&&t in HTMLElement.prototype&&e.removeAttribute(t)},R=(e,t,n)=>{const a={},l={};return Object.entries(e).forEach(([o,c])=>{F.has(o)?a[o==="className"?"class":o]=c:t.has(o)||o in n.prototype?l[o]=c:a[o]=c}),{reactProps:a,customElProps:l}},f=({react:e,tag:t,elClass:n,schemaEvents:a})=>{const l=I(a),o=new Set(Object.keys(l??{})),c=e.forwardRef((s,u)=>{const d=e.useRef(new Map),g=e.useRef(null),{reactProps:O,customElProps:w}=R(s,o,n);return e.useLayoutEffect(()=>{if(g.current===null)return;const m=new Map;for(const p in w)A({node:g.current,nameProp:p,valueProp:w[p],prevValueProp:d.current.get(p),event:l[p]}),d.current.delete(p),m.set(p,s[p]);for(const[p,h]of d.current)A({node:g.current,nameProp:p,valueProp:void 0,prevValueProp:h,event:l[p]});d.current=m}),e.createElement(t??n.__tag,{...O,ref:e.useCallback(m=>{g.current=m,typeof u=="function"?u(m):u!==null&&(u.current=m)},[u])})});return c.displayName=n.name,c},E=f({react:r,tag:"lr-config",elClass:i.Config}),P=f({react:r,tag:"lr-upload-ctx-provider",elClass:i.UploadCtxProvider,schemaEvents:i.UploadCtxProvider.EventType}),M=e=>{const t={},n={};return Object.entries(e).forEach(([a,l])=>{a.startsWith("on")?t[a]=l:n[a]=l}),{eventHandlers:t,config:n}},B="0.5.2",S="React-Uploader",U=()=>`${S}/${B}`,C=({condition:e,fallback:t,children:n,...a})=>e?r.createElement(r.Suspense,{fallback:t,...a},n):r.createElement(r.Fragment,null,t),b=()=>{const[e,t]=r.useState(!1);return r.useEffect(()=>{typeof window<"u"&&t(!0)},[]),e};i.registerBlocks(i);const T=f({react:r,tag:"lr-file-uploader-regular",elClass:i.FileUploaderRegular}),_=({ctxName:e,className:t,classNameUploader:n,apiRef:a,fallback:l,...o})=>{const c=r.useMemo(()=>e??i.UID.generate(),[e]),{eventHandlers:s,config:u}=r.useMemo(()=>M(o),[o]),d=b();return r.createElement(C,{condition:d,fallback:l},r.createElement("div",{className:t},r.createElement(E,{userAgentIntegration:U(),"ctx-name":c,...u}),r.createElement(P,{ref:a,"ctx-name":c,...s}),r.createElement(T,{class:n,"ctx-name":c})))};i.registerBlocks(i);const L=f({react:r,tag:"lr-file-uploader-minimal",elClass:i.FileUploaderMinimal}),N=({ctxName:e,className:t,classNameUploader:n,apiRef:a,fallback:l,...o})=>{const c=r.useMemo(()=>e??i.UID.generate(),[e]),{eventHandlers:s,config:u}=r.useMemo(()=>M(o),[o]),d=b();return r.createElement(C,{condition:d,fallback:l},r.createElement("div",{className:t},r.createElement(E,{userAgentIntegration:U(),"ctx-name":c,...u}),r.createElement(P,{ref:a,"ctx-name":c,...s}),r.createElement(L,{class:n,"ctx-name":c})))};i.registerBlocks(i);const k=f({react:r,tag:"lr-file-uploader-inline",elClass:i.FileUploaderMinimal}),D=({ctxName:e,className:t,classNameUploader:n,apiRef:a,fallback:l,...o})=>{const c=r.useMemo(()=>e??i.UID.generate(),[e]),{eventHandlers:s,config:u}=r.useMemo(()=>M(o),[o]),d=b();return r.createElement(C,{condition:d,fallback:l},r.createElement("div",{className:t},r.createElement(E,{userAgentIntegration:U(),"ctx-name":c,...u}),r.createElement(P,{ref:a,"ctx-name":c,...s}),r.createElement(k,{class:n,"ctx-name":c})))};Object.defineProperty(exports,"UploadCtxProvider",{enumerable:!0,get:()=>v.UploadCtxProvider});Object.defineProperty(exports,"defineLocale",{enumerable:!0,get:()=>v.defineLocale});exports.FileUploaderInline=D;exports.FileUploaderMinimal=N;exports.FileUploaderRegular=_;
|
package/dist/react-uploader.js
CHANGED
|
@@ -97,7 +97,7 @@ const b = /* @__PURE__ */ new Set([
|
|
|
97
97
|
eventHandlers: t,
|
|
98
98
|
config: o
|
|
99
99
|
};
|
|
100
|
-
}, L = "0.5.
|
|
100
|
+
}, L = "0.5.2", N = "React-Uploader", U = () => `${N}/${L}`, w = ({ condition: e, fallback: t, children: o, ...s }) => e ? /* @__PURE__ */ a.createElement(y, { fallback: t, ...s }, o) : /* @__PURE__ */ a.createElement(a.Fragment, null, t), A = () => {
|
|
101
101
|
const [e, t] = B(!1);
|
|
102
102
|
return R(() => {
|
|
103
103
|
typeof window < "u" && t(!0);
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uploadcare/react-uploader",
|
|
3
3
|
"description": "React component for file uploads using Uploadcare",
|
|
4
|
-
"version": "0.5.
|
|
4
|
+
"version": "0.5.3",
|
|
5
5
|
"private": false,
|
|
6
6
|
"type": "module",
|
|
7
7
|
"files": [
|
|
@@ -81,5 +81,5 @@
|
|
|
81
81
|
"react hook file upload",
|
|
82
82
|
"front-end"
|
|
83
83
|
],
|
|
84
|
-
"gitHead": "
|
|
84
|
+
"gitHead": "571b2ac54d476dde69019747d21482bb0208ca7f"
|
|
85
85
|
}
|