@scaleflex/asset-picker 0.2.11 → 0.2.13
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/.claude/settings.local.json +38 -52
- package/README.md +195 -11
- package/dist/{asset-picker-BvXr_8iN.cjs → asset-picker-CMsm4Ewp.cjs} +51 -51
- package/dist/{asset-picker-Cd9cgAZ6.js → asset-picker-DCcLalcQ.js} +2 -1
- package/dist/define.cjs +1 -1
- package/dist/define.js +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +68 -2
- package/dist/react.cjs +1 -1
- package/dist/react.d.ts +82 -1
- package/dist/react.d.ts.map +1 -1
- package/dist/react.js +75 -31
- package/dist/types/asset.types.d.ts +6 -1
- package/dist/types/asset.types.d.ts.map +1 -1
- package/dist/utils/asset-helpers.d.ts +80 -0
- package/dist/utils/asset-helpers.d.ts.map +1 -0
- package/package.json +2 -2
|
@@ -13203,5 +13203,6 @@ Tt([
|
|
|
13203
13203
|
p({ type: Object })
|
|
13204
13204
|
], Ge.prototype, "config");
|
|
13205
13205
|
export {
|
|
13206
|
-
Ge as A
|
|
13206
|
+
Ge as A,
|
|
13207
|
+
rr as g
|
|
13207
13208
|
};
|
package/dist/define.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";const e=require("./asset-picker-
|
|
1
|
+
"use strict";const e=require("./asset-picker-CMsm4Ewp.cjs");typeof customElements<"u"&&!customElements.get("sfx-asset-picker")&&customElements.define("sfx-asset-picker",e.AssetPicker);
|
package/dist/define.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { A as e } from "./asset-picker-
|
|
1
|
+
import { A as e } from "./asset-picker-DCcLalcQ.js";
|
|
2
2
|
typeof customElements < "u" && !customElements.get("sfx-asset-picker") && customElements.define("sfx-asset-picker", e);
|
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("./asset-picker-CMsm4Ewp.cjs");function l(t){return(t.type??"").startsWith("image")}function d(t){return(t.type??"").startsWith("video")}function h(t){return(t.type??"").startsWith("audio")}function u(t){var i,e;return((i=t.url)==null?void 0:i.cdn)??((e=t.url)==null?void 0:e.public)??""}function A(t,i){const{meta:e,name:f}=t;if(e!=null&&e.alt)return e.alt;const n=e==null?void 0:e.title;if(typeof n=="string"&&n)return n;if(n&&typeof n=="object"){if(i){const r=n[i];if(r)return r}const o=Object.keys(n)[0];if(o){const r=n[o];if(r)return r}}return f.split(".")[0]}function c(t){var i,e;return((i=t.info)==null?void 0:i.img_w)??((e=t.info)==null?void 0:e.video_w)??0}function g(t){var i,e;return((i=t.info)==null?void 0:i.img_h)??((e=t.info)==null?void 0:e.video_h)??0}function a(t){return{width:c(t),height:g(t)}}function y(t){return s.getHlsUrl(t)!==null}function U(t){return s.getHlsUrl(t)}function p(t){return s.getHlsUrl(t)??u(t)}exports.AssetPicker=s.AssetPicker;exports.getAltText=A;exports.getAssetDimensions=a;exports.getAssetHeight=g;exports.getAssetWidth=c;exports.getBestVideoUrl=p;exports.getCdnUrl=u;exports.getTranscodedUrl=U;exports.isAudio=h;exports.isImage=l;exports.isTranscoded=y;exports.isVideo=d;
|
package/dist/index.d.ts
CHANGED
|
@@ -5,4 +5,5 @@ export type { Folder } from './types/folder.types';
|
|
|
5
5
|
export type { Label } from './types/label.types';
|
|
6
6
|
export type { FilterKey, FilterOperator, FilterLogic, AnyFilterKey, AnyFilter, StringFilter, DateFilter, FiltersState, MetadataFieldType, MetadataModelField, FiltersConfig } from './types/filter.types';
|
|
7
7
|
export type { AssetPickerSelectDetail, AssetPickerCancelDetail, FolderSelectDetail } from './types/events.types';
|
|
8
|
+
export { getAltText, getCdnUrl, getAssetWidth, getAssetHeight, getAssetDimensions, isTranscoded, getTranscodedUrl, getBestVideoUrl, isVideo, isImage, isAudio, } from './utils/asset-helpers';
|
|
8
9
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,YAAY,EAAE,iBAAiB,EAAE,yBAAyB,EAAE,UAAU,EAAE,oBAAoB,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC3L,YAAY,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAClF,YAAY,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AACnD,YAAY,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AACjD,YAAY,EAAE,SAAS,EAAE,cAAc,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC1M,YAAY,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,YAAY,EAAE,iBAAiB,EAAE,yBAAyB,EAAE,UAAU,EAAE,oBAAoB,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC3L,YAAY,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAClF,YAAY,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AACnD,YAAY,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AACjD,YAAY,EAAE,SAAS,EAAE,cAAc,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC1M,YAAY,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAGjH,OAAO,EACL,UAAU,EACV,SAAS,EACT,aAAa,EACb,cAAc,EACd,kBAAkB,EAClB,YAAY,EACZ,gBAAgB,EAChB,eAAe,EACf,OAAO,EACP,OAAO,EACP,OAAO,GACR,MAAM,uBAAuB,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,70 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { g as o } from "./asset-picker-DCcLalcQ.js";
|
|
2
|
+
import { A as b } from "./asset-picker-DCcLalcQ.js";
|
|
3
|
+
function d(t) {
|
|
4
|
+
return (t.type ?? "").startsWith("image");
|
|
5
|
+
}
|
|
6
|
+
function h(t) {
|
|
7
|
+
return (t.type ?? "").startsWith("video");
|
|
8
|
+
}
|
|
9
|
+
function p(t) {
|
|
10
|
+
return (t.type ?? "").startsWith("audio");
|
|
11
|
+
}
|
|
12
|
+
function s(t) {
|
|
13
|
+
var i, n;
|
|
14
|
+
return ((i = t.url) == null ? void 0 : i.cdn) ?? ((n = t.url) == null ? void 0 : n.public) ?? "";
|
|
15
|
+
}
|
|
16
|
+
function y(t, i) {
|
|
17
|
+
const { meta: n, name: f } = t;
|
|
18
|
+
if (n != null && n.alt) return n.alt;
|
|
19
|
+
const r = n == null ? void 0 : n.title;
|
|
20
|
+
if (typeof r == "string" && r) return r;
|
|
21
|
+
if (r && typeof r == "object") {
|
|
22
|
+
if (i) {
|
|
23
|
+
const e = r[i];
|
|
24
|
+
if (e) return e;
|
|
25
|
+
}
|
|
26
|
+
const u = Object.keys(r)[0];
|
|
27
|
+
if (u) {
|
|
28
|
+
const e = r[u];
|
|
29
|
+
if (e) return e;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
return f.split(".")[0];
|
|
33
|
+
}
|
|
34
|
+
function c(t) {
|
|
35
|
+
var i, n;
|
|
36
|
+
return ((i = t.info) == null ? void 0 : i.img_w) ?? ((n = t.info) == null ? void 0 : n.video_w) ?? 0;
|
|
37
|
+
}
|
|
38
|
+
function g(t) {
|
|
39
|
+
var i, n;
|
|
40
|
+
return ((i = t.info) == null ? void 0 : i.img_h) ?? ((n = t.info) == null ? void 0 : n.video_h) ?? 0;
|
|
41
|
+
}
|
|
42
|
+
function A(t) {
|
|
43
|
+
return {
|
|
44
|
+
width: c(t),
|
|
45
|
+
height: g(t)
|
|
46
|
+
};
|
|
47
|
+
}
|
|
48
|
+
function a(t) {
|
|
49
|
+
return o(t) !== null;
|
|
50
|
+
}
|
|
51
|
+
function m(t) {
|
|
52
|
+
return o(t);
|
|
53
|
+
}
|
|
54
|
+
function U(t) {
|
|
55
|
+
return o(t) ?? s(t);
|
|
56
|
+
}
|
|
2
57
|
export {
|
|
3
|
-
|
|
58
|
+
b as AssetPicker,
|
|
59
|
+
y as getAltText,
|
|
60
|
+
A as getAssetDimensions,
|
|
61
|
+
g as getAssetHeight,
|
|
62
|
+
c as getAssetWidth,
|
|
63
|
+
U as getBestVideoUrl,
|
|
64
|
+
s as getCdnUrl,
|
|
65
|
+
m as getTranscodedUrl,
|
|
66
|
+
p as isAudio,
|
|
67
|
+
d as isImage,
|
|
68
|
+
a as isTranscoded,
|
|
69
|
+
h as isVideo
|
|
4
70
|
};
|
package/dist/react.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react");typeof customElements<"u"&&Promise.resolve().then(()=>require("./define.cjs"));const R=e.forwardRef(function({config:k,open:o,onSelect:a,onSelectWithFolders:p,onCancel:m,className:c,style:t},u){const n=e.useRef(null),i=e.useRef(a),f=e.useRef(p),P=e.useRef(m);return e.useLayoutEffect(()=>{i.current=a,f.current=p,P.current=m}),e.useImperativeHandle(u,()=>({open(){var r;(r=n.current)==null||r.open()},close(){var r;(r=n.current)==null||r.close()}})),e.useLayoutEffect(()=>{const r=n.current;r&&(r.config=k)},[k]),e.useEffect(()=>{const r=n.current;r&&(o===!0?r.open():o===!1&&r.close())},[o]),e.useEffect(()=>{const r=n.current;if(!r)return;const E=s=>{var C,y,A;const v=s.detail;(C=i.current)==null||C.call(i,v.assets,v.folders),((y=v.folders)==null?void 0:y.length)>0&&((A=f.current)==null||A.call(f,{assets:v.assets,folders:v.folders}))},d=()=>{var s;(s=P.current)==null||s.call(P)};return r.addEventListener("ap-select",E),r.addEventListener("ap-cancel",d),()=>{r.removeEventListener("ap-select",E),r.removeEventListener("ap-cancel",d)}},[]),e.createElement("sfx-asset-picker",{ref:n,className:c,style:t})}),b=e.createContext(null);function g({config:l,children:k}){const[o,a]=e.useState(!1),[p,m]=e.useState(l),c=e.useRef(null),t=e.useRef(null),u=e.useRef(null),n=e.useRef(null),i=e.useCallback(d=>{t.current&&(t.current("cancelled"),c.current=null,t.current=null);const{onSelect:s,onCancel:v,...C}=d??{};return m({...l,...C}),a(!0),u.current=s??null,n.current=v??null,s?Promise.resolve([]):new Promise((y,A)=>{c.current=y,t.current=A})},[l]),f=e.useCallback(()=>{t.current&&t.current("cancelled"),c.current=null,t.current=null,u.current=null,n.current=null,a(!1)},[]),P=e.useCallback((d,s)=>{try{u.current?u.current(d,s):c.current&&c.current(d)}finally{c.current=null,t.current=null,u.current=null,n.current=null,a(!1)}},[]),r=e.useCallback(()=>{try{n.current?n.current():t.current&&t.current("cancelled")}finally{c.current=null,t.current=null,u.current=null,n.current=null,a(!1)}},[]),E=e.useMemo(()=>({open:i,close:f,isOpen:o}),[i,f,o]);return e.createElement(b.Provider,{value:E},k,e.createElement(R,{config:p,open:o,onSelect:P,onCancel:r}))}function h(){const l=e.useContext(b);if(!l)throw new Error("useAssetPicker() must be used inside <AssetPickerProvider>. Wrap your app (or layout) with <AssetPickerProvider config={...}>.");return l}exports.AssetPicker=R;exports.AssetPickerProvider=g;exports.useAssetPicker=h;
|
package/dist/react.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { CSSProperties } from 'react';
|
|
1
|
+
import { CSSProperties, ReactNode } from 'react';
|
|
2
2
|
import { AssetPickerConfig } from './types/config.types';
|
|
3
3
|
import { Asset } from './types/asset.types';
|
|
4
4
|
import { Folder } from './types/folder.types';
|
|
@@ -19,4 +19,85 @@ export interface AssetPickerProps {
|
|
|
19
19
|
style?: CSSProperties;
|
|
20
20
|
}
|
|
21
21
|
export declare const AssetPicker: import('react').ForwardRefExoticComponent<AssetPickerProps & import('react').RefAttributes<AssetPickerRef>>;
|
|
22
|
+
/**
|
|
23
|
+
* Options passed to `picker.open()`. Extends the base config with optional
|
|
24
|
+
* callback overrides. Any config property here merges with (and overrides)
|
|
25
|
+
* the base config from the provider.
|
|
26
|
+
*/
|
|
27
|
+
export interface OpenOptions extends Partial<AssetPickerConfig> {
|
|
28
|
+
/** Called when the user confirms selection. */
|
|
29
|
+
onSelect?: (assets: Asset[], folders?: Folder[]) => void;
|
|
30
|
+
/** Called when the user cancels / closes the picker. */
|
|
31
|
+
onCancel?: () => void;
|
|
32
|
+
}
|
|
33
|
+
export interface UseAssetPickerReturn {
|
|
34
|
+
/**
|
|
35
|
+
* Open the asset picker.
|
|
36
|
+
*
|
|
37
|
+
* **Promise mode** (no `onSelect` in options):
|
|
38
|
+
* ```ts
|
|
39
|
+
* const assets = await picker.open({ multiSelect: true });
|
|
40
|
+
* ```
|
|
41
|
+
*
|
|
42
|
+
* **Callback mode** (pass `onSelect`):
|
|
43
|
+
* ```ts
|
|
44
|
+
* picker.open({ onSelect: (assets) => console.log(assets) });
|
|
45
|
+
* ```
|
|
46
|
+
*
|
|
47
|
+
* In promise mode the promise rejects with `'cancelled'` if the user
|
|
48
|
+
* closes without selecting.
|
|
49
|
+
*/
|
|
50
|
+
open(overrides?: OpenOptions): Promise<Asset[]>;
|
|
51
|
+
/** Close the picker programmatically. */
|
|
52
|
+
close(): void;
|
|
53
|
+
/** Whether the picker is currently open. */
|
|
54
|
+
isOpen: boolean;
|
|
55
|
+
}
|
|
56
|
+
export interface AssetPickerProviderProps {
|
|
57
|
+
/** Base configuration applied to every `open()` call. */
|
|
58
|
+
config: AssetPickerConfig;
|
|
59
|
+
children: ReactNode;
|
|
60
|
+
}
|
|
61
|
+
interface PickerContextValue {
|
|
62
|
+
open(overrides?: OpenOptions): Promise<Asset[]>;
|
|
63
|
+
close(): void;
|
|
64
|
+
isOpen: boolean;
|
|
65
|
+
}
|
|
66
|
+
/**
|
|
67
|
+
* Mount a single `<AssetPicker>` instance at the root of your React tree.
|
|
68
|
+
* All `useAssetPicker()` calls share this instance.
|
|
69
|
+
*
|
|
70
|
+
* @example
|
|
71
|
+
* ```tsx
|
|
72
|
+
* <AssetPickerProvider config={{ auth: { mode: 'sassKey', sassKey, projectToken } }}>
|
|
73
|
+
* <App />
|
|
74
|
+
* </AssetPickerProvider>
|
|
75
|
+
* ```
|
|
76
|
+
*/
|
|
77
|
+
export declare function AssetPickerProvider({ config, children }: AssetPickerProviderProps): import('react').FunctionComponentElement<import('react').ProviderProps<PickerContextValue | null>>;
|
|
78
|
+
/**
|
|
79
|
+
* Access the singleton asset picker from anywhere in the React tree.
|
|
80
|
+
*
|
|
81
|
+
* Must be used inside an `<AssetPickerProvider>`.
|
|
82
|
+
*
|
|
83
|
+
* @example
|
|
84
|
+
* ```tsx
|
|
85
|
+
* function UploadButton() {
|
|
86
|
+
* const picker = useAssetPicker();
|
|
87
|
+
*
|
|
88
|
+
* const handleClick = async () => {
|
|
89
|
+
* try {
|
|
90
|
+
* const assets = await picker.open({ multiSelect: true });
|
|
91
|
+
* console.log('Selected:', assets);
|
|
92
|
+
* } catch {
|
|
93
|
+
* console.log('User cancelled');
|
|
94
|
+
* }
|
|
95
|
+
* };
|
|
96
|
+
*
|
|
97
|
+
* return <button onClick={handleClick}>Choose files</button>;
|
|
98
|
+
* }
|
|
99
|
+
* ```
|
|
100
|
+
*/
|
|
101
|
+
export declare function useAssetPicker(): UseAssetPickerReturn;
|
|
102
|
+
export {};
|
|
22
103
|
//# sourceMappingURL=react.d.ts.map
|
package/dist/react.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../src/react.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../src/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAWL,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAQnD,MAAM,WAAW,cAAc;IAC7B,IAAI,IAAI,IAAI,CAAC;IACb,KAAK,IAAI,IAAI,CAAC;CACf;AAED,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,iBAAiB,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,OAAO,CAAC,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACzD,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,MAAM,EAAE,KAAK,EAAE,CAAC;QAAC,OAAO,EAAE,MAAM,EAAE,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/E,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,eAAO,MAAM,WAAW,6GAyEvB,CAAC;AAMF;;;;GAIG;AACH,MAAM,WAAW,WAAY,SAAQ,OAAO,CAAC,iBAAiB,CAAC;IAC7D,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,OAAO,CAAC,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACzD,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,oBAAoB;IACnC;;;;;;;;;;;;;;;OAeG;IACH,IAAI,CAAC,SAAS,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC,KAAK,EAAE,CAAC,CAAC;IAChD,yCAAyC;IACzC,KAAK,IAAI,IAAI,CAAC;IACd,4CAA4C;IAC5C,MAAM,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,wBAAwB;IACvC,yDAAyD;IACzD,MAAM,EAAE,iBAAiB,CAAC;IAC1B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,UAAU,kBAAkB;IAC1B,IAAI,CAAC,SAAS,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC,KAAK,EAAE,CAAC,CAAC;IAChD,KAAK,IAAI,IAAI,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;CACjB;AAID;;;;;;;;;;GAUG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,wBAAwB,sGA2FjF;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,cAAc,IAAI,oBAAoB,CASrD"}
|
package/dist/react.js
CHANGED
|
@@ -1,46 +1,90 @@
|
|
|
1
|
-
import { forwardRef as
|
|
1
|
+
import { forwardRef as R, useRef as u, useLayoutEffect as w, useImperativeHandle as O, useEffect as L, createElement as h, createContext as I, useState as b, useCallback as x, useMemo as S, useContext as j } from "react";
|
|
2
2
|
typeof customElements < "u" && import("./define.js");
|
|
3
|
-
const
|
|
4
|
-
function({ config:
|
|
5
|
-
const
|
|
6
|
-
return
|
|
7
|
-
|
|
8
|
-
}),
|
|
3
|
+
const H = R(
|
|
4
|
+
function({ config: P, open: o, onSelect: i, onSelectWithFolders: m, onCancel: k, className: t, style: r }, l) {
|
|
5
|
+
const n = u(null), a = u(i), f = u(m), v = u(k);
|
|
6
|
+
return w(() => {
|
|
7
|
+
a.current = i, f.current = m, v.current = k;
|
|
8
|
+
}), O(l, () => ({
|
|
9
9
|
open() {
|
|
10
10
|
var e;
|
|
11
|
-
(e =
|
|
11
|
+
(e = n.current) == null || e.open();
|
|
12
12
|
},
|
|
13
13
|
close() {
|
|
14
14
|
var e;
|
|
15
|
-
(e =
|
|
15
|
+
(e = n.current) == null || e.close();
|
|
16
16
|
}
|
|
17
|
-
})),
|
|
18
|
-
const e =
|
|
19
|
-
e && (e.config =
|
|
20
|
-
}, [
|
|
21
|
-
const e =
|
|
17
|
+
})), w(() => {
|
|
18
|
+
const e = n.current;
|
|
19
|
+
e && (e.config = P);
|
|
20
|
+
}, [P]), L(() => {
|
|
21
|
+
const e = n.current;
|
|
22
22
|
e && (o === !0 ? e.open() : o === !1 && e.close());
|
|
23
|
-
}, [o]),
|
|
24
|
-
const e =
|
|
23
|
+
}, [o]), L(() => {
|
|
24
|
+
const e = n.current;
|
|
25
25
|
if (!e) return;
|
|
26
|
-
const
|
|
27
|
-
var E,
|
|
28
|
-
const
|
|
29
|
-
(E =
|
|
30
|
-
},
|
|
31
|
-
var
|
|
32
|
-
(
|
|
26
|
+
const C = (c) => {
|
|
27
|
+
var E, y, A;
|
|
28
|
+
const p = c.detail;
|
|
29
|
+
(E = a.current) == null || E.call(a, p.assets, p.folders), ((y = p.folders) == null ? void 0 : y.length) > 0 && ((A = f.current) == null || A.call(f, { assets: p.assets, folders: p.folders }));
|
|
30
|
+
}, d = () => {
|
|
31
|
+
var c;
|
|
32
|
+
(c = v.current) == null || c.call(v);
|
|
33
33
|
};
|
|
34
|
-
return e.addEventListener("ap-select",
|
|
35
|
-
e.removeEventListener("ap-select",
|
|
34
|
+
return e.addEventListener("ap-select", C), e.addEventListener("ap-cancel", d), () => {
|
|
35
|
+
e.removeEventListener("ap-select", C), e.removeEventListener("ap-cancel", d);
|
|
36
36
|
};
|
|
37
|
-
}, []),
|
|
38
|
-
ref:
|
|
39
|
-
className:
|
|
40
|
-
style:
|
|
37
|
+
}, []), h("sfx-asset-picker", {
|
|
38
|
+
ref: n,
|
|
39
|
+
className: t,
|
|
40
|
+
style: r
|
|
41
41
|
});
|
|
42
42
|
}
|
|
43
|
-
);
|
|
43
|
+
), g = I(null);
|
|
44
|
+
function q({ config: s, children: P }) {
|
|
45
|
+
const [o, i] = b(!1), [m, k] = b(s), t = u(null), r = u(null), l = u(null), n = u(null), a = x((d) => {
|
|
46
|
+
r.current && (r.current("cancelled"), t.current = null, r.current = null);
|
|
47
|
+
const { onSelect: c, onCancel: p, ...E } = d ?? {};
|
|
48
|
+
return k({ ...s, ...E }), i(!0), l.current = c ?? null, n.current = p ?? null, c ? Promise.resolve([]) : new Promise((y, A) => {
|
|
49
|
+
t.current = y, r.current = A;
|
|
50
|
+
});
|
|
51
|
+
}, [s]), f = x(() => {
|
|
52
|
+
r.current && r.current("cancelled"), t.current = null, r.current = null, l.current = null, n.current = null, i(!1);
|
|
53
|
+
}, []), v = x((d, c) => {
|
|
54
|
+
try {
|
|
55
|
+
l.current ? l.current(d, c) : t.current && t.current(d);
|
|
56
|
+
} finally {
|
|
57
|
+
t.current = null, r.current = null, l.current = null, n.current = null, i(!1);
|
|
58
|
+
}
|
|
59
|
+
}, []), e = x(() => {
|
|
60
|
+
try {
|
|
61
|
+
n.current ? n.current() : r.current && r.current("cancelled");
|
|
62
|
+
} finally {
|
|
63
|
+
t.current = null, r.current = null, l.current = null, n.current = null, i(!1);
|
|
64
|
+
}
|
|
65
|
+
}, []), C = S(() => ({ open: a, close: f, isOpen: o }), [a, f, o]);
|
|
66
|
+
return h(
|
|
67
|
+
g.Provider,
|
|
68
|
+
{ value: C },
|
|
69
|
+
P,
|
|
70
|
+
h(H, {
|
|
71
|
+
config: m,
|
|
72
|
+
open: o,
|
|
73
|
+
onSelect: v,
|
|
74
|
+
onCancel: e
|
|
75
|
+
})
|
|
76
|
+
);
|
|
77
|
+
}
|
|
78
|
+
function z() {
|
|
79
|
+
const s = j(g);
|
|
80
|
+
if (!s)
|
|
81
|
+
throw new Error(
|
|
82
|
+
"useAssetPicker() must be used inside <AssetPickerProvider>. Wrap your app (or layout) with <AssetPickerProvider config={...}>."
|
|
83
|
+
);
|
|
84
|
+
return s;
|
|
85
|
+
}
|
|
44
86
|
export {
|
|
45
|
-
|
|
87
|
+
H as AssetPicker,
|
|
88
|
+
q as AssetPickerProvider,
|
|
89
|
+
z as useAssetPicker
|
|
46
90
|
};
|
|
@@ -23,7 +23,12 @@ export interface AssetInfo {
|
|
|
23
23
|
}>;
|
|
24
24
|
}
|
|
25
25
|
export interface AssetMeta {
|
|
26
|
-
|
|
26
|
+
/**
|
|
27
|
+
* Asset title. May be a plain string or a localized record keyed by
|
|
28
|
+
* language code (e.g. `{ en: "Sunset", fr: "Coucher de soleil" }`).
|
|
29
|
+
* Use `getAltText()` from the package to handle both cases.
|
|
30
|
+
*/
|
|
31
|
+
title?: string | Record<string, string>;
|
|
27
32
|
description?: string;
|
|
28
33
|
alt?: string;
|
|
29
34
|
[key: string]: unknown;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"asset.types.d.ts","sourceRoot":"","sources":["../../src/types/asset.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,KAAK,CAAC;QAAE,SAAS,EAAE,MAAM,EAAE,CAAC;QAAC,UAAU,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACjE;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"asset.types.d.ts","sourceRoot":"","sources":["../../src/types/asset.types.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import { Asset } from '../types/asset.types';
|
|
2
|
+
/** Check if the asset is an image (type starts with "image"). */
|
|
3
|
+
export declare function isImage(asset: Asset): boolean;
|
|
4
|
+
/** Check if the asset is a video (type starts with "video"). */
|
|
5
|
+
export declare function isVideo(asset: Asset): boolean;
|
|
6
|
+
/** Check if the asset is audio (type starts with "audio"). */
|
|
7
|
+
export declare function isAudio(asset: Asset): boolean;
|
|
8
|
+
/**
|
|
9
|
+
* Get the CDN URL for an asset, falling back to the public URL.
|
|
10
|
+
*
|
|
11
|
+
* @example
|
|
12
|
+
* ```ts
|
|
13
|
+
* const url = getCdnUrl(asset);
|
|
14
|
+
* // "https://token.filerobot.com/path/to/image.jpg"
|
|
15
|
+
* ```
|
|
16
|
+
*/
|
|
17
|
+
export declare function getCdnUrl(asset: Asset): string;
|
|
18
|
+
/**
|
|
19
|
+
* Derive a human-readable alt text from asset metadata.
|
|
20
|
+
*
|
|
21
|
+
* Priority: `meta.alt` > `meta.title` (string or localized record) > filename
|
|
22
|
+
* (without extension).
|
|
23
|
+
*
|
|
24
|
+
* @param asset - The asset to extract alt text from.
|
|
25
|
+
* @param lang - Preferred language code for localized titles (e.g. "en").
|
|
26
|
+
* Falls back to the first available language.
|
|
27
|
+
*
|
|
28
|
+
* @example
|
|
29
|
+
* ```ts
|
|
30
|
+
* const alt = getAltText(asset); // uses first available language
|
|
31
|
+
* const alt = getAltText(asset, 'fr'); // prefers French title
|
|
32
|
+
* ```
|
|
33
|
+
*/
|
|
34
|
+
export declare function getAltText(asset: Asset, lang?: string): string;
|
|
35
|
+
/**
|
|
36
|
+
* Get the asset width (works for both images and videos).
|
|
37
|
+
*
|
|
38
|
+
* @returns Width in pixels, or `0` if unknown.
|
|
39
|
+
*/
|
|
40
|
+
export declare function getAssetWidth(asset: Asset): number;
|
|
41
|
+
/**
|
|
42
|
+
* Get the asset height (works for both images and videos).
|
|
43
|
+
*
|
|
44
|
+
* @returns Height in pixels, or `0` if unknown.
|
|
45
|
+
*/
|
|
46
|
+
export declare function getAssetHeight(asset: Asset): number;
|
|
47
|
+
/**
|
|
48
|
+
* Get the asset dimensions as `{ width, height }`.
|
|
49
|
+
*
|
|
50
|
+
* @example
|
|
51
|
+
* ```ts
|
|
52
|
+
* const { width, height } = getAssetDimensions(asset);
|
|
53
|
+
* ```
|
|
54
|
+
*/
|
|
55
|
+
export declare function getAssetDimensions(asset: Asset): {
|
|
56
|
+
width: number;
|
|
57
|
+
height: number;
|
|
58
|
+
};
|
|
59
|
+
/**
|
|
60
|
+
* Check whether the video asset has a transcoded (HLS) version available.
|
|
61
|
+
*/
|
|
62
|
+
export declare function isTranscoded(asset: Asset): boolean;
|
|
63
|
+
/**
|
|
64
|
+
* Get the transcoded (HLS manifest) URL if available.
|
|
65
|
+
*
|
|
66
|
+
* @returns The HLS URL string, or `null` if not transcoded.
|
|
67
|
+
*/
|
|
68
|
+
export declare function getTranscodedUrl(asset: Asset): string | null;
|
|
69
|
+
/**
|
|
70
|
+
* Get the best playback URL for a video asset.
|
|
71
|
+
*
|
|
72
|
+
* Priority: transcoded HLS URL > CDN URL > public URL.
|
|
73
|
+
*
|
|
74
|
+
* @example
|
|
75
|
+
* ```ts
|
|
76
|
+
* const videoSrc = getBestVideoUrl(asset);
|
|
77
|
+
* ```
|
|
78
|
+
*/
|
|
79
|
+
export declare function getBestVideoUrl(asset: Asset): string;
|
|
80
|
+
//# sourceMappingURL=asset-helpers.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"asset-helpers.d.ts","sourceRoot":"","sources":["../../src/utils/asset-helpers.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAOlD,iEAAiE;AACjE,wBAAgB,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,OAAO,CAE7C;AAED,gEAAgE;AAChE,wBAAgB,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,OAAO,CAE7C;AAED,8DAA8D;AAC9D,wBAAgB,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,OAAO,CAE7C;AAMD;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,KAAK,GAAG,MAAM,CAE9C;AAMD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAuB9D;AAMD;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,KAAK,GAAG,MAAM,CAElD;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,KAAK,GAAG,MAAM,CAEnD;AAED;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAKlF;AAMD;;GAEG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,KAAK,GAAG,OAAO,CAElD;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,KAAK,GAAG,MAAM,GAAG,IAAI,CAE5D;AAED;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,GAAG,MAAM,CAEpD"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@scaleflex/asset-picker",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.13",
|
|
4
4
|
"description": "Framework-agnostic Asset Picker for Scaleflex VXP DAM",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.cjs",
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
"vite-plugin-dts": "^4.0.0"
|
|
56
56
|
},
|
|
57
57
|
"peerDependencies": {
|
|
58
|
-
"@scaleflex/uploader": "^0.2.
|
|
58
|
+
"@scaleflex/uploader": "^0.2.3",
|
|
59
59
|
"react": ">=18",
|
|
60
60
|
"react-dom": ">=18"
|
|
61
61
|
},
|