@elementor/wp-media 0.1.0 → 0.1.2
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/CHANGELOG.md +10 -0
- package/README.md +1 -1
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +9 -9
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +9 -9
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
- package/src/errors.ts +1 -1
- package/src/hooks/use-wp-media-attachment.ts +1 -1
- package/src/hooks/use-wp-media-frame.ts +8 -8
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,16 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [0.1.2](https://github.com/elementor/elementor-packages/compare/@elementor/wp-media@0.1.1...@elementor/wp-media@0.1.2) (2024-08-20)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @elementor/wp-media
|
|
9
|
+
|
|
10
|
+
## [0.1.1](https://github.com/elementor/elementor-packages/compare/@elementor/wp-media@0.1.0...@elementor/wp-media@0.1.1) (2024-08-14)
|
|
11
|
+
|
|
12
|
+
### Bug Fixes
|
|
13
|
+
|
|
14
|
+
- **wp-media:** cleanup on close [EDS-365] ([#237](https://github.com/elementor/elementor-packages/issues/237)) ([06d6a32](https://github.com/elementor/elementor-packages/commit/06d6a32331e29ee97c230d4ea222693d14298aa6))
|
|
15
|
+
|
|
6
16
|
# 0.1.0 (2024-08-14)
|
|
7
17
|
|
|
8
18
|
### Features
|
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
# WP Media
|
|
2
2
|
|
|
3
3
|
This package is an adapter for WordPress' `wp.media` function. It allows you to open the WordPress media modal, select or upload images from the media library, and get attachment data.
|
|
4
|
-
It assumes that the `wp.media` function is available in the global scope, and will throw otherwise. Therefore, to use this package, make sure to add the `media-
|
|
4
|
+
It assumes that the `wp.media` function is available in the global scope, and will throw otherwise. Therefore, to use this package, make sure to add the `media-models` handle in the dependencies array of this package.
|
package/dist/index.d.mts
CHANGED
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -32,7 +32,7 @@ var import_query = require("@elementor/query");
|
|
|
32
32
|
var import_utils = require("@elementor/utils");
|
|
33
33
|
var WpMediaNotAvailableError = (0, import_utils.createError)({
|
|
34
34
|
code: "wp_media_not_available",
|
|
35
|
-
message: "`wp.media` is not available, make sure the `media-
|
|
35
|
+
message: "`wp.media` is not available, make sure the `media-models` handle is set in the dependencies array"
|
|
36
36
|
});
|
|
37
37
|
|
|
38
38
|
// src/media.ts
|
|
@@ -80,7 +80,7 @@ async function getAttachment({ queryKey: [, id] }) {
|
|
|
80
80
|
}
|
|
81
81
|
try {
|
|
82
82
|
return normalize(await model.fetch());
|
|
83
|
-
} catch
|
|
83
|
+
} catch {
|
|
84
84
|
return null;
|
|
85
85
|
}
|
|
86
86
|
}
|
|
@@ -90,17 +90,13 @@ var import_react = require("react");
|
|
|
90
90
|
function useWpMediaFrame(options) {
|
|
91
91
|
const frame = (0, import_react.useRef)();
|
|
92
92
|
const open = (openOptions = {}) => {
|
|
93
|
-
cleanupFrame();
|
|
93
|
+
cleanupFrame(frame.current);
|
|
94
94
|
frame.current = createFrame({ ...options, ...openOptions });
|
|
95
95
|
frame.current?.open();
|
|
96
96
|
};
|
|
97
|
-
const cleanupFrame = () => {
|
|
98
|
-
frame.current?.detach();
|
|
99
|
-
frame.current?.remove();
|
|
100
|
-
};
|
|
101
97
|
(0, import_react.useEffect)(() => {
|
|
102
98
|
return () => {
|
|
103
|
-
cleanupFrame();
|
|
99
|
+
cleanupFrame(frame.current);
|
|
104
100
|
};
|
|
105
101
|
}, []);
|
|
106
102
|
return {
|
|
@@ -117,9 +113,13 @@ function createFrame({ onSelect, multiple, types, selected, title, mode = "brows
|
|
|
117
113
|
}).on("open", () => {
|
|
118
114
|
applyMode(frame, mode);
|
|
119
115
|
applySelection(frame, selected);
|
|
120
|
-
}).on("close", () => frame
|
|
116
|
+
}).on("close", () => cleanupFrame(frame)).on("insert select", () => select(frame, multiple, onSelect));
|
|
121
117
|
return frame;
|
|
122
118
|
}
|
|
119
|
+
function cleanupFrame(frame) {
|
|
120
|
+
frame?.detach();
|
|
121
|
+
frame?.remove();
|
|
122
|
+
}
|
|
123
123
|
function applyMode(frame, mode = "browse") {
|
|
124
124
|
frame.content.mode(mode);
|
|
125
125
|
}
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/hooks/use-wp-media-attachment.ts","../src/errors.ts","../src/media.ts","../src/normalize.ts","../src/hooks/use-wp-media-frame.ts"],"sourcesContent":["export type { Attachment } from './types/attachment';\n\nexport { default as useWpMediaAttachment } from './hooks/use-wp-media-attachment';\nexport { default as useWpMediaFrame } from './hooks/use-wp-media-frame';\n","import { useQuery } from '@elementor/query';\nimport media from '../media';\nimport normalize from '../normalize';\n\nexport default function useWpMediaAttachment( id: number | undefined ) {\n\treturn useQuery( {\n\t\tqueryKey: [ 'wp-attachment', id ],\n\t\tqueryFn: getAttachment,\n\t\tenabled: !! id,\n\t} );\n}\n\nasync function getAttachment( { queryKey: [ , id ] }: { queryKey: [ string, number | undefined ] } ) {\n\tif ( ! id ) {\n\t\treturn null;\n\t}\n\n\tconst model = media().attachment( id );\n\tconst wpAttachment = model.toJSON();\n\n\tconst isFetched = 'url' in wpAttachment;\n\n\tif ( isFetched ) {\n\t\treturn normalize( wpAttachment );\n\t}\n\n\ttry {\n\t\treturn normalize( await model.fetch() );\n\t} catch
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/hooks/use-wp-media-attachment.ts","../src/errors.ts","../src/media.ts","../src/normalize.ts","../src/hooks/use-wp-media-frame.ts"],"sourcesContent":["export type { Attachment } from './types/attachment';\n\nexport { default as useWpMediaAttachment } from './hooks/use-wp-media-attachment';\nexport { default as useWpMediaFrame } from './hooks/use-wp-media-frame';\n","import { useQuery } from '@elementor/query';\nimport media from '../media';\nimport normalize from '../normalize';\n\nexport default function useWpMediaAttachment( id: number | undefined ) {\n\treturn useQuery( {\n\t\tqueryKey: [ 'wp-attachment', id ],\n\t\tqueryFn: getAttachment,\n\t\tenabled: !! id,\n\t} );\n}\n\nasync function getAttachment( { queryKey: [ , id ] }: { queryKey: [ string, number | undefined ] } ) {\n\tif ( ! id ) {\n\t\treturn null;\n\t}\n\n\tconst model = media().attachment( id );\n\tconst wpAttachment = model.toJSON();\n\n\tconst isFetched = 'url' in wpAttachment;\n\n\tif ( isFetched ) {\n\t\treturn normalize( wpAttachment );\n\t}\n\n\ttry {\n\t\treturn normalize( await model.fetch() );\n\t} catch {\n\t\treturn null;\n\t}\n}\n","import { createError } from '@elementor/utils';\n\nexport const WpMediaNotAvailableError = createError( {\n\tcode: 'wp_media_not_available',\n\tmessage: '`wp.media` is not available, make sure the `media-models` handle is set in the dependencies array',\n} );\n","import { WpMediaWindow } from './types/wp-media';\nimport { WpMediaNotAvailableError } from './errors';\n\nconst wpMediaWindow = window as unknown as WpMediaWindow;\n\nexport default () => {\n\tif ( ! wpMediaWindow.wp?.media ) {\n\t\tthrow new WpMediaNotAvailableError();\n\t}\n\n\treturn wpMediaWindow.wp.media;\n};\n","import { WpAttachmentJSON } from './types/wp-media';\nimport { Attachment } from './types/attachment';\n\nexport default function normalize( attachment: WpAttachmentJSON ): Attachment {\n\tconst { filesizeInBytes, filesizeHumanReadable, author, authorName, ...rest } = attachment;\n\n\treturn {\n\t\t...rest,\n\t\tfilesize: {\n\t\t\tinBytes: filesizeInBytes,\n\t\t\thumanReadable: filesizeHumanReadable,\n\t\t},\n\t\tauthor: {\n\t\t\tid: parseInt( author ),\n\t\t\tname: authorName,\n\t\t},\n\t};\n}\n","import { useEffect, useRef } from 'react';\nimport normalize from '../normalize';\nimport { MediaFrame } from '../types/wp-media';\nimport { Attachment } from '../types/attachment';\nimport media from '../media';\n\ntype OpenOptions = {\n\tmode?: 'upload' | 'browse';\n};\n\ntype Options = {\n\ttypes: Array< 'image' >;\n\ttitle?: string;\n} & (\n\t| {\n\t\t\tmultiple: true;\n\t\t\tselected: Array< number | undefined >;\n\t\t\tonSelect: ( val: Attachment[] ) => void;\n\t }\n\t| {\n\t\t\tmultiple: false;\n\t\t\tselected: number | undefined;\n\t\t\tonSelect: ( val: Attachment ) => void;\n\t }\n);\n\nexport default function useWpMediaFrame( options: Options ) {\n\tconst frame = useRef< MediaFrame >();\n\n\tconst open = ( openOptions: OpenOptions = {} ) => {\n\t\tcleanupFrame( frame.current );\n\n\t\tframe.current = createFrame( { ...options, ...openOptions } );\n\n\t\tframe.current?.open();\n\t};\n\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tcleanupFrame( frame.current );\n\t\t};\n\t}, [] );\n\n\treturn {\n\t\topen,\n\t};\n}\n\nfunction createFrame( { onSelect, multiple, types, selected, title, mode = 'browse' }: Options & OpenOptions ) {\n\tconst frame: MediaFrame = media()( {\n\t\ttitle,\n\t\tmultiple,\n\t\tlibrary: {\n\t\t\ttype: types,\n\t\t},\n\t} )\n\t\t.on( 'open', () => {\n\t\t\tapplyMode( frame, mode );\n\t\t\tapplySelection( frame, selected );\n\t\t} )\n\t\t.on( 'close', () => cleanupFrame( frame ) )\n\t\t.on( 'insert select', () => select( frame, multiple, onSelect ) );\n\n\treturn frame;\n}\n\nfunction cleanupFrame( frame?: MediaFrame ) {\n\tframe?.detach();\n\tframe?.remove();\n}\n\nfunction applyMode( frame: MediaFrame, mode: OpenOptions[ 'mode' ] = 'browse' ) {\n\tframe.content.mode( mode );\n}\n\nfunction applySelection( frame: MediaFrame, selected: number | undefined | Array< number | undefined > ) {\n\tconst selectedAttachments = ( typeof selected === 'number' ? [ selected ] : selected )\n\t\t?.filter( ( id ) => !! id )\n\t\t.map( ( id ) => media().attachment( id as number ) );\n\n\tframe\n\t\t.state()\n\t\t.get( 'selection' )\n\t\t.set( selectedAttachments || [] );\n}\n\nfunction select( frame: MediaFrame, multiple: boolean, onSelect: Options[ 'onSelect' ] ) {\n\tconst attachments = frame.state().get( 'selection' ).toJSON().map( normalize );\n\n\tconst onSelectFn = onSelect as ( val: Attachment | Attachment[] ) => void;\n\n\tonSelectFn( multiple ? attachments : attachments[ 0 ] );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAyB;;;ACAzB,mBAA4B;AAErB,IAAM,+BAA2B,0BAAa;AAAA,EACpD,MAAM;AAAA,EACN,SAAS;AACV,CAAE;;;ACFF,IAAM,gBAAgB;AAEtB,IAAO,gBAAQ,MAAM;AACpB,MAAK,CAAE,cAAc,IAAI,OAAQ;AAChC,UAAM,IAAI,yBAAyB;AAAA,EACpC;AAEA,SAAO,cAAc,GAAG;AACzB;;;ACRe,SAAR,UAA4B,YAA2C;AAC7E,QAAM,EAAE,iBAAiB,uBAAuB,QAAQ,YAAY,GAAG,KAAK,IAAI;AAEhF,SAAO;AAAA,IACN,GAAG;AAAA,IACH,UAAU;AAAA,MACT,SAAS;AAAA,MACT,eAAe;AAAA,IAChB;AAAA,IACA,QAAQ;AAAA,MACP,IAAI,SAAU,MAAO;AAAA,MACrB,MAAM;AAAA,IACP;AAAA,EACD;AACD;;;AHbe,SAAR,qBAAuC,IAAyB;AACtE,aAAO,uBAAU;AAAA,IAChB,UAAU,CAAE,iBAAiB,EAAG;AAAA,IAChC,SAAS;AAAA,IACT,SAAS,CAAC,CAAE;AAAA,EACb,CAAE;AACH;AAEA,eAAe,cAAe,EAAE,UAAU,CAAE,EAAE,EAAG,EAAE,GAAkD;AACpG,MAAK,CAAE,IAAK;AACX,WAAO;AAAA,EACR;AAEA,QAAM,QAAQ,cAAM,EAAE,WAAY,EAAG;AACrC,QAAM,eAAe,MAAM,OAAO;AAElC,QAAM,YAAY,SAAS;AAE3B,MAAK,WAAY;AAChB,WAAO,UAAW,YAAa;AAAA,EAChC;AAEA,MAAI;AACH,WAAO,UAAW,MAAM,MAAM,MAAM,CAAE;AAAA,EACvC,QAAQ;AACP,WAAO;AAAA,EACR;AACD;;;AI/BA,mBAAkC;AA0BnB,SAAR,gBAAkC,SAAmB;AAC3D,QAAM,YAAQ,qBAAqB;AAEnC,QAAM,OAAO,CAAE,cAA2B,CAAC,MAAO;AACjD,iBAAc,MAAM,OAAQ;AAE5B,UAAM,UAAU,YAAa,EAAE,GAAG,SAAS,GAAG,YAAY,CAAE;AAE5D,UAAM,SAAS,KAAK;AAAA,EACrB;AAEA,8BAAW,MAAM;AAChB,WAAO,MAAM;AACZ,mBAAc,MAAM,OAAQ;AAAA,IAC7B;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,SAAO;AAAA,IACN;AAAA,EACD;AACD;AAEA,SAAS,YAAa,EAAE,UAAU,UAAU,OAAO,UAAU,OAAO,OAAO,SAAS,GAA2B;AAC9G,QAAM,QAAoB,cAAM,EAAG;AAAA,IAClC;AAAA,IACA;AAAA,IACA,SAAS;AAAA,MACR,MAAM;AAAA,IACP;AAAA,EACD,CAAE,EACA,GAAI,QAAQ,MAAM;AAClB,cAAW,OAAO,IAAK;AACvB,mBAAgB,OAAO,QAAS;AAAA,EACjC,CAAE,EACD,GAAI,SAAS,MAAM,aAAc,KAAM,CAAE,EACzC,GAAI,iBAAiB,MAAM,OAAQ,OAAO,UAAU,QAAS,CAAE;AAEjE,SAAO;AACR;AAEA,SAAS,aAAc,OAAqB;AAC3C,SAAO,OAAO;AACd,SAAO,OAAO;AACf;AAEA,SAAS,UAAW,OAAmB,OAA8B,UAAW;AAC/E,QAAM,QAAQ,KAAM,IAAK;AAC1B;AAEA,SAAS,eAAgB,OAAmB,UAA6D;AACxG,QAAM,uBAAwB,OAAO,aAAa,WAAW,CAAE,QAAS,IAAI,WACzE,OAAQ,CAAE,OAAQ,CAAC,CAAE,EAAG,EACzB,IAAK,CAAE,OAAQ,cAAM,EAAE,WAAY,EAAa,CAAE;AAEpD,QACE,MAAM,EACN,IAAK,WAAY,EACjB,IAAK,uBAAuB,CAAC,CAAE;AAClC;AAEA,SAAS,OAAQ,OAAmB,UAAmB,UAAkC;AACxF,QAAM,cAAc,MAAM,MAAM,EAAE,IAAK,WAAY,EAAE,OAAO,EAAE,IAAK,SAAU;AAE7E,QAAM,aAAa;AAEnB,aAAY,WAAW,cAAc,YAAa,CAAE,CAAE;AACvD;","names":[]}
|
package/dist/index.mjs
CHANGED
|
@@ -5,7 +5,7 @@ import { useQuery } from "@elementor/query";
|
|
|
5
5
|
import { createError } from "@elementor/utils";
|
|
6
6
|
var WpMediaNotAvailableError = createError({
|
|
7
7
|
code: "wp_media_not_available",
|
|
8
|
-
message: "`wp.media` is not available, make sure the `media-
|
|
8
|
+
message: "`wp.media` is not available, make sure the `media-models` handle is set in the dependencies array"
|
|
9
9
|
});
|
|
10
10
|
|
|
11
11
|
// src/media.ts
|
|
@@ -53,7 +53,7 @@ async function getAttachment({ queryKey: [, id] }) {
|
|
|
53
53
|
}
|
|
54
54
|
try {
|
|
55
55
|
return normalize(await model.fetch());
|
|
56
|
-
} catch
|
|
56
|
+
} catch {
|
|
57
57
|
return null;
|
|
58
58
|
}
|
|
59
59
|
}
|
|
@@ -63,17 +63,13 @@ import { useEffect, useRef } from "react";
|
|
|
63
63
|
function useWpMediaFrame(options) {
|
|
64
64
|
const frame = useRef();
|
|
65
65
|
const open = (openOptions = {}) => {
|
|
66
|
-
cleanupFrame();
|
|
66
|
+
cleanupFrame(frame.current);
|
|
67
67
|
frame.current = createFrame({ ...options, ...openOptions });
|
|
68
68
|
frame.current?.open();
|
|
69
69
|
};
|
|
70
|
-
const cleanupFrame = () => {
|
|
71
|
-
frame.current?.detach();
|
|
72
|
-
frame.current?.remove();
|
|
73
|
-
};
|
|
74
70
|
useEffect(() => {
|
|
75
71
|
return () => {
|
|
76
|
-
cleanupFrame();
|
|
72
|
+
cleanupFrame(frame.current);
|
|
77
73
|
};
|
|
78
74
|
}, []);
|
|
79
75
|
return {
|
|
@@ -90,9 +86,13 @@ function createFrame({ onSelect, multiple, types, selected, title, mode = "brows
|
|
|
90
86
|
}).on("open", () => {
|
|
91
87
|
applyMode(frame, mode);
|
|
92
88
|
applySelection(frame, selected);
|
|
93
|
-
}).on("close", () => frame
|
|
89
|
+
}).on("close", () => cleanupFrame(frame)).on("insert select", () => select(frame, multiple, onSelect));
|
|
94
90
|
return frame;
|
|
95
91
|
}
|
|
92
|
+
function cleanupFrame(frame) {
|
|
93
|
+
frame?.detach();
|
|
94
|
+
frame?.remove();
|
|
95
|
+
}
|
|
96
96
|
function applyMode(frame, mode = "browse") {
|
|
97
97
|
frame.content.mode(mode);
|
|
98
98
|
}
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/use-wp-media-attachment.ts","../src/errors.ts","../src/media.ts","../src/normalize.ts","../src/hooks/use-wp-media-frame.ts"],"sourcesContent":["import { useQuery } from '@elementor/query';\nimport media from '../media';\nimport normalize from '../normalize';\n\nexport default function useWpMediaAttachment( id: number | undefined ) {\n\treturn useQuery( {\n\t\tqueryKey: [ 'wp-attachment', id ],\n\t\tqueryFn: getAttachment,\n\t\tenabled: !! id,\n\t} );\n}\n\nasync function getAttachment( { queryKey: [ , id ] }: { queryKey: [ string, number | undefined ] } ) {\n\tif ( ! id ) {\n\t\treturn null;\n\t}\n\n\tconst model = media().attachment( id );\n\tconst wpAttachment = model.toJSON();\n\n\tconst isFetched = 'url' in wpAttachment;\n\n\tif ( isFetched ) {\n\t\treturn normalize( wpAttachment );\n\t}\n\n\ttry {\n\t\treturn normalize( await model.fetch() );\n\t} catch
|
|
1
|
+
{"version":3,"sources":["../src/hooks/use-wp-media-attachment.ts","../src/errors.ts","../src/media.ts","../src/normalize.ts","../src/hooks/use-wp-media-frame.ts"],"sourcesContent":["import { useQuery } from '@elementor/query';\nimport media from '../media';\nimport normalize from '../normalize';\n\nexport default function useWpMediaAttachment( id: number | undefined ) {\n\treturn useQuery( {\n\t\tqueryKey: [ 'wp-attachment', id ],\n\t\tqueryFn: getAttachment,\n\t\tenabled: !! id,\n\t} );\n}\n\nasync function getAttachment( { queryKey: [ , id ] }: { queryKey: [ string, number | undefined ] } ) {\n\tif ( ! id ) {\n\t\treturn null;\n\t}\n\n\tconst model = media().attachment( id );\n\tconst wpAttachment = model.toJSON();\n\n\tconst isFetched = 'url' in wpAttachment;\n\n\tif ( isFetched ) {\n\t\treturn normalize( wpAttachment );\n\t}\n\n\ttry {\n\t\treturn normalize( await model.fetch() );\n\t} catch {\n\t\treturn null;\n\t}\n}\n","import { createError } from '@elementor/utils';\n\nexport const WpMediaNotAvailableError = createError( {\n\tcode: 'wp_media_not_available',\n\tmessage: '`wp.media` is not available, make sure the `media-models` handle is set in the dependencies array',\n} );\n","import { WpMediaWindow } from './types/wp-media';\nimport { WpMediaNotAvailableError } from './errors';\n\nconst wpMediaWindow = window as unknown as WpMediaWindow;\n\nexport default () => {\n\tif ( ! wpMediaWindow.wp?.media ) {\n\t\tthrow new WpMediaNotAvailableError();\n\t}\n\n\treturn wpMediaWindow.wp.media;\n};\n","import { WpAttachmentJSON } from './types/wp-media';\nimport { Attachment } from './types/attachment';\n\nexport default function normalize( attachment: WpAttachmentJSON ): Attachment {\n\tconst { filesizeInBytes, filesizeHumanReadable, author, authorName, ...rest } = attachment;\n\n\treturn {\n\t\t...rest,\n\t\tfilesize: {\n\t\t\tinBytes: filesizeInBytes,\n\t\t\thumanReadable: filesizeHumanReadable,\n\t\t},\n\t\tauthor: {\n\t\t\tid: parseInt( author ),\n\t\t\tname: authorName,\n\t\t},\n\t};\n}\n","import { useEffect, useRef } from 'react';\nimport normalize from '../normalize';\nimport { MediaFrame } from '../types/wp-media';\nimport { Attachment } from '../types/attachment';\nimport media from '../media';\n\ntype OpenOptions = {\n\tmode?: 'upload' | 'browse';\n};\n\ntype Options = {\n\ttypes: Array< 'image' >;\n\ttitle?: string;\n} & (\n\t| {\n\t\t\tmultiple: true;\n\t\t\tselected: Array< number | undefined >;\n\t\t\tonSelect: ( val: Attachment[] ) => void;\n\t }\n\t| {\n\t\t\tmultiple: false;\n\t\t\tselected: number | undefined;\n\t\t\tonSelect: ( val: Attachment ) => void;\n\t }\n);\n\nexport default function useWpMediaFrame( options: Options ) {\n\tconst frame = useRef< MediaFrame >();\n\n\tconst open = ( openOptions: OpenOptions = {} ) => {\n\t\tcleanupFrame( frame.current );\n\n\t\tframe.current = createFrame( { ...options, ...openOptions } );\n\n\t\tframe.current?.open();\n\t};\n\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tcleanupFrame( frame.current );\n\t\t};\n\t}, [] );\n\n\treturn {\n\t\topen,\n\t};\n}\n\nfunction createFrame( { onSelect, multiple, types, selected, title, mode = 'browse' }: Options & OpenOptions ) {\n\tconst frame: MediaFrame = media()( {\n\t\ttitle,\n\t\tmultiple,\n\t\tlibrary: {\n\t\t\ttype: types,\n\t\t},\n\t} )\n\t\t.on( 'open', () => {\n\t\t\tapplyMode( frame, mode );\n\t\t\tapplySelection( frame, selected );\n\t\t} )\n\t\t.on( 'close', () => cleanupFrame( frame ) )\n\t\t.on( 'insert select', () => select( frame, multiple, onSelect ) );\n\n\treturn frame;\n}\n\nfunction cleanupFrame( frame?: MediaFrame ) {\n\tframe?.detach();\n\tframe?.remove();\n}\n\nfunction applyMode( frame: MediaFrame, mode: OpenOptions[ 'mode' ] = 'browse' ) {\n\tframe.content.mode( mode );\n}\n\nfunction applySelection( frame: MediaFrame, selected: number | undefined | Array< number | undefined > ) {\n\tconst selectedAttachments = ( typeof selected === 'number' ? [ selected ] : selected )\n\t\t?.filter( ( id ) => !! id )\n\t\t.map( ( id ) => media().attachment( id as number ) );\n\n\tframe\n\t\t.state()\n\t\t.get( 'selection' )\n\t\t.set( selectedAttachments || [] );\n}\n\nfunction select( frame: MediaFrame, multiple: boolean, onSelect: Options[ 'onSelect' ] ) {\n\tconst attachments = frame.state().get( 'selection' ).toJSON().map( normalize );\n\n\tconst onSelectFn = onSelect as ( val: Attachment | Attachment[] ) => void;\n\n\tonSelectFn( multiple ? attachments : attachments[ 0 ] );\n}\n"],"mappings":"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","names":[]}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elementor/wp-media",
|
|
3
3
|
"description": "An adapter for WordPress' media utils",
|
|
4
|
-
"version": "0.1.
|
|
4
|
+
"version": "0.1.2",
|
|
5
5
|
"private": false,
|
|
6
6
|
"author": "Elementor Team",
|
|
7
7
|
"homepage": "https://elementor.com/",
|
|
@@ -46,5 +46,5 @@
|
|
|
46
46
|
"peerDependencies": {
|
|
47
47
|
"react": "^18.3.1"
|
|
48
48
|
},
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "fceae13994a4b8c16955e37448179b13ed78a71a"
|
|
50
50
|
}
|
package/src/errors.ts
CHANGED
|
@@ -2,5 +2,5 @@ import { createError } from '@elementor/utils';
|
|
|
2
2
|
|
|
3
3
|
export const WpMediaNotAvailableError = createError( {
|
|
4
4
|
code: 'wp_media_not_available',
|
|
5
|
-
message: '`wp.media` is not available, make sure the `media-
|
|
5
|
+
message: '`wp.media` is not available, make sure the `media-models` handle is set in the dependencies array',
|
|
6
6
|
} );
|
|
@@ -28,21 +28,16 @@ export default function useWpMediaFrame( options: Options ) {
|
|
|
28
28
|
const frame = useRef< MediaFrame >();
|
|
29
29
|
|
|
30
30
|
const open = ( openOptions: OpenOptions = {} ) => {
|
|
31
|
-
cleanupFrame();
|
|
31
|
+
cleanupFrame( frame.current );
|
|
32
32
|
|
|
33
33
|
frame.current = createFrame( { ...options, ...openOptions } );
|
|
34
34
|
|
|
35
35
|
frame.current?.open();
|
|
36
36
|
};
|
|
37
37
|
|
|
38
|
-
const cleanupFrame = () => {
|
|
39
|
-
frame.current?.detach();
|
|
40
|
-
frame.current?.remove();
|
|
41
|
-
};
|
|
42
|
-
|
|
43
38
|
useEffect( () => {
|
|
44
39
|
return () => {
|
|
45
|
-
cleanupFrame();
|
|
40
|
+
cleanupFrame( frame.current );
|
|
46
41
|
};
|
|
47
42
|
}, [] );
|
|
48
43
|
|
|
@@ -63,12 +58,17 @@ function createFrame( { onSelect, multiple, types, selected, title, mode = 'brow
|
|
|
63
58
|
applyMode( frame, mode );
|
|
64
59
|
applySelection( frame, selected );
|
|
65
60
|
} )
|
|
66
|
-
.on( 'close', () => frame
|
|
61
|
+
.on( 'close', () => cleanupFrame( frame ) )
|
|
67
62
|
.on( 'insert select', () => select( frame, multiple, onSelect ) );
|
|
68
63
|
|
|
69
64
|
return frame;
|
|
70
65
|
}
|
|
71
66
|
|
|
67
|
+
function cleanupFrame( frame?: MediaFrame ) {
|
|
68
|
+
frame?.detach();
|
|
69
|
+
frame?.remove();
|
|
70
|
+
}
|
|
71
|
+
|
|
72
72
|
function applyMode( frame: MediaFrame, mode: OpenOptions[ 'mode' ] = 'browse' ) {
|
|
73
73
|
frame.content.mode( mode );
|
|
74
74
|
}
|