@wix/patterns-fields 1.124.0 → 1.125.0
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/dist/cjs/components/address/input/address-input.st.css.js +3 -3
- package/dist/cjs/components/address/input/address-input.st.css.js.map +1 -1
- package/dist/cjs/components/audio/actions/actions-menu/actions-menu.st.css.js +3 -3
- package/dist/cjs/components/audio/actions/actions-menu/actions-menu.st.css.js.map +1 -1
- package/dist/cjs/components/audio/audio-field/form-audio-field.st.css.js +4 -4
- package/dist/cjs/components/audio/audio-field/form-audio-field.st.css.js.map +1 -1
- package/dist/cjs/components/audio/audio-player/audio-player.st.css.js +2 -2
- package/dist/cjs/components/audio/audio-player/audio-player.st.css.js.map +1 -1
- package/dist/cjs/components/color-view/cell-color-view.st.css.js +3 -3
- package/dist/cjs/components/color-view/cell-color-view.st.css.js.map +1 -1
- package/dist/cjs/components/color-view/color-view.st.css.js +4 -4
- package/dist/cjs/components/color-view/color-view.st.css.js.map +1 -1
- package/dist/cjs/components/delete-dialog/delete-dialog.st.css.js +3 -3
- package/dist/cjs/components/delete-dialog/delete-dialog.st.css.js.map +1 -1
- package/dist/cjs/components/document/form-document-field.st.css.js +7 -7
- package/dist/cjs/components/document/form-document-field.st.css.js.map +1 -1
- package/dist/cjs/components/exclamation/exclamation.st.css.js +5 -5
- package/dist/cjs/components/exclamation/exclamation.st.css.js.map +1 -1
- package/dist/cjs/components/field-validation-settings/field-validation-settings-input.st.css.js +3 -3
- package/dist/cjs/components/field-validation-settings/field-validation-settings-input.st.css.js.map +1 -1
- package/dist/cjs/components/highlighted-text/highlighted-text.st.css.js +5 -5
- package/dist/cjs/components/highlighted-text/highlighted-text.st.css.js.map +1 -1
- package/dist/cjs/components/image/thumbnail-replace-overlay.st.css.js +3 -3
- package/dist/cjs/components/image/thumbnail-replace-overlay.st.css.js.map +1 -1
- package/dist/cjs/components/media-control/cell-media-edit-shell.st.css.js +2 -2
- package/dist/cjs/components/media-control/cell-media-edit-shell.st.css.js.map +1 -1
- package/dist/cjs/components/media-control/paste-url-button.st.css.js +4 -4
- package/dist/cjs/components/media-control/paste-url-button.st.css.js.map +1 -1
- package/dist/cjs/components/media-gallery/form-media-gallery-field.st.css.js +10 -10
- package/dist/cjs/components/media-gallery/form-media-gallery-field.st.css.js.map +1 -1
- package/dist/cjs/components/media-gallery/media-preview-modal.js +12 -10
- package/dist/cjs/components/media-gallery/media-preview-modal.js.map +1 -1
- package/dist/cjs/components/media-image/media-image.st.css.js +4 -4
- package/dist/cjs/components/media-image/media-image.st.css.js.map +1 -1
- package/dist/cjs/components/media-image/overlays/overlay.st.css.js +3 -3
- package/dist/cjs/components/media-image/overlays/overlay.st.css.js.map +1 -1
- package/dist/cjs/components/media-image-field/cell-media-image-edit.js +46 -213
- package/dist/cjs/components/media-image-field/cell-media-image-edit.js.map +1 -1
- package/dist/cjs/components/media-image-field/cell-media-image-edit.st.css.js +8 -8
- package/dist/cjs/components/media-image-field/cell-media-image-edit.st.css.js.map +1 -1
- package/dist/cjs/components/media-image-field/form-media-image-field.js +116 -24
- package/dist/cjs/components/media-image-field/form-media-image-field.js.map +1 -1
- package/dist/cjs/components/media-image-field/form-media-image-field.uni.driver.js +24 -8
- package/dist/cjs/components/media-image-field/form-media-image-field.uni.driver.js.map +1 -1
- package/dist/cjs/components/media-image-field/media-image-actions.js +256 -0
- package/dist/cjs/components/media-image-field/media-image-actions.js.map +1 -0
- package/dist/cjs/components/media-image-field/media-image-view.st.css.js +3 -3
- package/dist/cjs/components/media-image-field/media-image-view.st.css.js.map +1 -1
- package/dist/cjs/components/media-tag/web-media-tag/media-tag.st.css.js +2 -2
- package/dist/cjs/components/media-tag/web-media-tag/media-tag.st.css.js.map +1 -1
- package/dist/cjs/components/multi-document/cell-multi-document-edit.js +31 -38
- package/dist/cjs/components/multi-document/cell-multi-document-edit.js.map +1 -1
- package/dist/cjs/components/multi-document/cell-multi-document-edit.st.css.js +3 -3
- package/dist/cjs/components/multi-document/cell-multi-document-edit.st.css.js.map +1 -1
- package/dist/cjs/components/multi-document/multi-document-input/form-multi-document.st.css.js +5 -5
- package/dist/cjs/components/multi-document/multi-document-input/form-multi-document.st.css.js.map +1 -1
- package/dist/cjs/components/reference/cell-multi-reference-input.st.css.js +2 -2
- package/dist/cjs/components/reference/cell-multi-reference-input.st.css.js.map +1 -1
- package/dist/cjs/components/reference/cell-multi-reference-view.st.css.js +3 -3
- package/dist/cjs/components/reference/cell-multi-reference-view.st.css.js.map +1 -1
- package/dist/cjs/components/reference/cell-reference-input.st.css.js +3 -3
- package/dist/cjs/components/reference/cell-reference-input.st.css.js.map +1 -1
- package/dist/cjs/components/rich-content/rich-content-input/default-value-input/rich-content-default-value-input.st.css.js +4 -4
- package/dist/cjs/components/rich-content/rich-content-input/default-value-input/rich-content-default-value-input.st.css.js.map +1 -1
- package/dist/cjs/components/rich-content/rich-content-input/form-input/rich-content-form-input.st.css.js +3 -3
- package/dist/cjs/components/rich-content/rich-content-input/form-input/rich-content-form-input.st.css.js.map +1 -1
- package/dist/cjs/components/rich-content/rich-content-input/form-read-only-input/rich-content-form-read-only-input.st.css.js +2 -2
- package/dist/cjs/components/rich-content/rich-content-input/form-read-only-input/rich-content-form-read-only-input.st.css.js.map +1 -1
- package/dist/cjs/components/rich-content/rich-content-input/rich-content-common/fullscreen-modal/fullscreen-modal.st.css.js +3 -3
- package/dist/cjs/components/rich-content/rich-content-input/rich-content-common/fullscreen-modal/fullscreen-modal.st.css.js.map +1 -1
- package/dist/cjs/components/rich-content/rich-content-input/rich-content-common/publish-loader/publish-loader.st.css.js +3 -3
- package/dist/cjs/components/rich-content/rich-content-input/rich-content-common/publish-loader/publish-loader.st.css.js.map +1 -1
- package/dist/cjs/components/rich-content/rich-content-input/rich-content-common/toggle-fullscreen-button/toggle-fullscreen-button.st.css.js +2 -2
- package/dist/cjs/components/rich-content/rich-content-input/rich-content-common/toggle-fullscreen-button/toggle-fullscreen-button.st.css.js.map +1 -1
- package/dist/cjs/components/rich-content/rich-content-input/rich-content-editor/rich-content-editor.st.css.js +7 -7
- package/dist/cjs/components/rich-content/rich-content-input/rich-content-editor/rich-content-editor.st.css.js.map +1 -1
- package/dist/cjs/components/rich-content/rich-content-input/rich-content-editor/rich-content-toolbar.st.css.js +5 -5
- package/dist/cjs/components/rich-content/rich-content-input/rich-content-editor/rich-content-toolbar.st.css.js.map +1 -1
- package/dist/cjs/components/rich-content/rich-content-input/rich-content-viewer/rich-content-viewer.st.css.js +4 -4
- package/dist/cjs/components/rich-content/rich-content-input/rich-content-viewer/rich-content-viewer.st.css.js.map +1 -1
- package/dist/cjs/components/rich-text/rich-text-input/rich-text-editor/rich-editor.st.css.js +18 -18
- package/dist/cjs/components/rich-text/rich-text-input/rich-text-editor/rich-editor.st.css.js.map +1 -1
- package/dist/cjs/components/rich-text/rich-text-input/rich-text-editor/rich-text-editor.st.css.js +4 -4
- package/dist/cjs/components/rich-text/rich-text-input/rich-text-editor/rich-text-editor.st.css.js.map +1 -1
- package/dist/cjs/components/rich-text/rich-text-input/rich-text-editor/toolbar/toolbar.st.css.js +18 -18
- package/dist/cjs/components/rich-text/rich-text-input/rich-text-editor/toolbar/toolbar.st.css.js.map +1 -1
- package/dist/cjs/components/text/text-view.st.css.js +3 -3
- package/dist/cjs/components/text/text-view.st.css.js.map +1 -1
- package/dist/cjs/styles.global.css +1 -1
- package/dist/cjs/utils/detect-field-type.js +9 -17
- package/dist/cjs/utils/detect-field-type.js.map +1 -1
- package/dist/esm/components/address/input/address-input.st.css.js +2 -2
- package/dist/esm/components/audio/actions/actions-menu/actions-menu.st.css.js +2 -2
- package/dist/esm/components/audio/actions/actions-menu/actions-menu.st.css.js.map +1 -1
- package/dist/esm/components/audio/audio-field/form-audio-field.st.css.js +2 -2
- package/dist/esm/components/audio/audio-field/form-audio-field.st.css.js.map +1 -1
- package/dist/esm/components/audio/audio-player/audio-player.st.css.js +2 -2
- package/dist/esm/components/color-view/cell-color-view.st.css.js +2 -2
- package/dist/esm/components/color-view/color-view.st.css.js +2 -2
- package/dist/esm/components/color-view/color-view.st.css.js.map +1 -1
- package/dist/esm/components/delete-dialog/delete-dialog.st.css.js +2 -2
- package/dist/esm/components/document/form-document-field.st.css.js +2 -2
- package/dist/esm/components/exclamation/exclamation.st.css.js +2 -2
- package/dist/esm/components/exclamation/exclamation.st.css.js.map +1 -1
- package/dist/esm/components/field-validation-settings/field-validation-settings-input.st.css.js +2 -2
- package/dist/esm/components/highlighted-text/highlighted-text.st.css.js +3 -3
- package/dist/esm/components/image/thumbnail-replace-overlay.st.css.js +2 -2
- package/dist/esm/components/media-control/cell-media-edit-shell.st.css.js +2 -2
- package/dist/esm/components/media-control/paste-url-button.st.css.js +2 -2
- package/dist/esm/components/media-control/paste-url-button.st.css.js.map +1 -1
- package/dist/esm/components/media-gallery/form-media-gallery-field.st.css.js +2 -2
- package/dist/esm/components/media-gallery/media-preview-modal.js +2 -2
- package/dist/esm/components/media-gallery/media-preview-modal.js.map +1 -1
- package/dist/esm/components/media-image/media-image.st.css.js +3 -3
- package/dist/esm/components/media-image/overlays/overlay.st.css.js +2 -2
- package/dist/esm/components/media-image/overlays/overlay.st.css.js.map +1 -1
- package/dist/esm/components/media-image-field/cell-media-image-edit.js +11 -37
- package/dist/esm/components/media-image-field/cell-media-image-edit.js.map +1 -1
- package/dist/esm/components/media-image-field/cell-media-image-edit.st.css.js +2 -2
- package/dist/esm/components/media-image-field/form-media-image-field.js +37 -9
- package/dist/esm/components/media-image-field/form-media-image-field.js.map +1 -1
- package/dist/esm/components/media-image-field/form-media-image-field.uni.driver.js +24 -8
- package/dist/esm/components/media-image-field/form-media-image-field.uni.driver.js.map +1 -1
- package/dist/esm/components/media-image-field/media-image-actions.js +52 -0
- package/dist/esm/components/media-image-field/media-image-actions.js.map +1 -0
- package/dist/esm/components/media-image-field/media-image-view.st.css.js +2 -2
- package/dist/esm/components/media-tag/web-media-tag/media-tag.st.css.js +2 -2
- package/dist/esm/components/multi-document/cell-multi-document-edit.js +2 -8
- package/dist/esm/components/multi-document/cell-multi-document-edit.js.map +1 -1
- package/dist/esm/components/multi-document/cell-multi-document-edit.st.css.js +2 -2
- package/dist/esm/components/multi-document/multi-document-input/form-multi-document.st.css.js +2 -2
- package/dist/esm/components/reference/cell-multi-reference-input.st.css.js +2 -2
- package/dist/esm/components/reference/cell-multi-reference-view.st.css.js +2 -2
- package/dist/esm/components/reference/cell-reference-input.st.css.js +2 -2
- package/dist/esm/components/rich-content/rich-content-input/default-value-input/rich-content-default-value-input.st.css.js +2 -2
- package/dist/esm/components/rich-content/rich-content-input/form-input/rich-content-form-input.st.css.js +2 -2
- package/dist/esm/components/rich-content/rich-content-input/form-input/rich-content-form-input.st.css.js.map +1 -1
- package/dist/esm/components/rich-content/rich-content-input/form-read-only-input/rich-content-form-read-only-input.st.css.js +2 -2
- package/dist/esm/components/rich-content/rich-content-input/form-read-only-input/rich-content-form-read-only-input.st.css.js.map +1 -1
- package/dist/esm/components/rich-content/rich-content-input/rich-content-common/fullscreen-modal/fullscreen-modal.st.css.js +2 -2
- package/dist/esm/components/rich-content/rich-content-input/rich-content-common/fullscreen-modal/fullscreen-modal.st.css.js.map +1 -1
- package/dist/esm/components/rich-content/rich-content-input/rich-content-common/publish-loader/publish-loader.st.css.js +2 -2
- package/dist/esm/components/rich-content/rich-content-input/rich-content-common/publish-loader/publish-loader.st.css.js.map +1 -1
- package/dist/esm/components/rich-content/rich-content-input/rich-content-common/toggle-fullscreen-button/toggle-fullscreen-button.st.css.js +2 -2
- package/dist/esm/components/rich-content/rich-content-input/rich-content-common/toggle-fullscreen-button/toggle-fullscreen-button.st.css.js.map +1 -1
- package/dist/esm/components/rich-content/rich-content-input/rich-content-editor/rich-content-editor.st.css.js +2 -2
- package/dist/esm/components/rich-content/rich-content-input/rich-content-editor/rich-content-toolbar.st.css.js +2 -2
- package/dist/esm/components/rich-content/rich-content-input/rich-content-viewer/rich-content-viewer.st.css.js +2 -2
- package/dist/esm/components/rich-text/rich-text-input/rich-text-editor/rich-editor.st.css.js +2 -2
- package/dist/esm/components/rich-text/rich-text-input/rich-text-editor/rich-text-editor.st.css.js +2 -2
- package/dist/esm/components/rich-text/rich-text-input/rich-text-editor/toolbar/toolbar.st.css.js +2 -2
- package/dist/esm/components/text/text-view.st.css.js +2 -2
- package/dist/esm/styles.global.css +1 -1
- package/dist/esm/utils/detect-field-type.js +12 -16
- package/dist/esm/utils/detect-field-type.js.map +1 -1
- package/dist/types/components/audio/actions/actions-menu/actions-menu.st.css.d.ts.map +1 -1
- package/dist/types/components/audio/audio-field/form-audio-field.st.css.d.ts.map +1 -1
- package/dist/types/components/color-view/color-view.st.css.d.ts.map +1 -1
- package/dist/types/components/exclamation/exclamation.st.css.d.ts.map +1 -1
- package/dist/types/components/media-control/paste-url-button.st.css.d.ts.map +1 -1
- package/dist/types/components/media-image/overlays/overlay.st.css.d.ts.map +1 -1
- package/dist/types/components/media-image-field/cell-media-image-edit.d.ts.map +1 -1
- package/dist/types/components/media-image-field/form-media-image-field.d.ts.map +1 -1
- package/dist/types/components/media-image-field/form-media-image-field.uni.driver.d.ts +8 -4
- package/dist/types/components/media-image-field/form-media-image-field.uni.driver.d.ts.map +1 -1
- package/dist/types/components/media-image-field/media-image-actions.d.ts +33 -0
- package/dist/types/components/media-image-field/media-image-actions.d.ts.map +1 -0
- package/dist/types/components/multi-document/cell-multi-document-edit.d.ts.map +1 -1
- package/dist/types/components/rich-content/rich-content-input/form-input/rich-content-form-input.st.css.d.ts.map +1 -1
- package/dist/types/components/rich-content/rich-content-input/form-read-only-input/rich-content-form-read-only-input.st.css.d.ts.map +1 -1
- package/dist/types/components/rich-content/rich-content-input/rich-content-common/fullscreen-modal/fullscreen-modal.st.css.d.ts.map +1 -1
- package/dist/types/components/rich-content/rich-content-input/rich-content-common/publish-loader/publish-loader.st.css.d.ts.map +1 -1
- package/dist/types/components/rich-content/rich-content-input/rich-content-common/toggle-fullscreen-button/toggle-fullscreen-button.st.css.d.ts.map +1 -1
- package/dist/types/utils/detect-field-type.d.ts +1 -1
- package/dist/types/utils/detect-field-type.d.ts.map +1 -1
- package/package.json +4 -4
- package/src/__tests__/components/media-image-field/form-media-image-input.spec.tsx +69 -2
- package/src/__tests__/utils/detect-field-type.spec.ts +5 -5
- package/src/components/address/input/address-input.st.css.ts +2 -2
- package/src/components/audio/actions/actions-menu/actions-menu.st.css.ts +2 -2
- package/src/components/audio/audio-field/form-audio-field.st.css.ts +2 -2
- package/src/components/audio/audio-player/audio-player.st.css.ts +2 -2
- package/src/components/color-view/cell-color-view.st.css.ts +2 -2
- package/src/components/color-view/color-view.st.css.ts +2 -2
- package/src/components/delete-dialog/delete-dialog.st.css.ts +2 -2
- package/src/components/document/form-document-field.st.css.ts +2 -2
- package/src/components/exclamation/exclamation.st.css.ts +2 -2
- package/src/components/field-validation-settings/field-validation-settings-input.st.css.ts +2 -2
- package/src/components/highlighted-text/highlighted-text.st.css.ts +3 -3
- package/src/components/image/thumbnail-replace-overlay.st.css.ts +2 -2
- package/src/components/media-control/cell-media-edit-shell.st.css.ts +2 -2
- package/src/components/media-control/paste-url-button.st.css.ts +2 -2
- package/src/components/media-gallery/form-media-gallery-field.st.css.ts +2 -2
- package/src/components/media-gallery/media-preview-modal.tsx +2 -1
- package/src/components/media-image/media-image.st.css.ts +3 -3
- package/src/components/media-image/overlays/overlay.st.css.ts +2 -2
- package/src/components/media-image-field/cell-media-image-edit.st.css.ts +2 -2
- package/src/components/media-image-field/cell-media-image-edit.tsx +26 -129
- package/src/components/media-image-field/form-media-image-field.tsx +105 -23
- package/src/components/media-image-field/form-media-image-field.uni.driver.ts +45 -10
- package/src/components/media-image-field/media-image-actions.tsx +205 -0
- package/src/components/media-image-field/media-image-view.st.css.ts +2 -2
- package/src/components/media-tag/web-media-tag/media-tag.st.css.ts +2 -2
- package/src/components/multi-document/cell-multi-document-edit.st.css.ts +2 -2
- package/src/components/multi-document/cell-multi-document-edit.tsx +3 -6
- package/src/components/multi-document/multi-document-input/form-multi-document.st.css.ts +2 -2
- package/src/components/reference/cell-multi-reference-input.st.css.ts +2 -2
- package/src/components/reference/cell-multi-reference-view.st.css.ts +2 -2
- package/src/components/reference/cell-reference-input.st.css.ts +2 -2
- package/src/components/rich-content/rich-content-input/default-value-input/rich-content-default-value-input.st.css.ts +2 -2
- package/src/components/rich-content/rich-content-input/form-input/rich-content-form-input.st.css.ts +2 -2
- package/src/components/rich-content/rich-content-input/form-read-only-input/rich-content-form-read-only-input.st.css.ts +2 -2
- package/src/components/rich-content/rich-content-input/rich-content-common/fullscreen-modal/fullscreen-modal.st.css.ts +2 -2
- package/src/components/rich-content/rich-content-input/rich-content-common/publish-loader/publish-loader.st.css.ts +2 -2
- package/src/components/rich-content/rich-content-input/rich-content-common/toggle-fullscreen-button/toggle-fullscreen-button.st.css.ts +2 -2
- package/src/components/rich-content/rich-content-input/rich-content-editor/rich-content-editor.st.css.ts +2 -2
- package/src/components/rich-content/rich-content-input/rich-content-editor/rich-content-toolbar.st.css.ts +2 -2
- package/src/components/rich-content/rich-content-input/rich-content-viewer/rich-content-viewer.st.css.ts +2 -2
- package/src/components/rich-text/rich-text-input/rich-text-editor/rich-editor.st.css.ts +2 -2
- package/src/components/rich-text/rich-text-input/rich-text-editor/rich-text-editor.st.css.ts +2 -2
- package/src/components/rich-text/rich-text-input/rich-text-editor/toolbar/toolbar.st.css.ts +2 -2
- package/src/components/text/text-view.st.css.ts +2 -2
- package/src/styles.global.css +1 -1
- package/src/utils/detect-field-type.ts +14 -16
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
// @ts-nocheck
|
|
2
2
|
import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
|
|
3
|
-
var _namespace_ = "
|
|
3
|
+
var _namespace_ = "thumbnailreplaceoverlay3362007242";
|
|
4
4
|
var _style_ = classesRuntime.bind(null, _namespace_);
|
|
5
5
|
export var cssStates = statesRuntime.bind(null, _namespace_);
|
|
6
6
|
export var style = _style_;
|
|
7
7
|
export var st = _style_;
|
|
8
8
|
export var namespace = _namespace_;
|
|
9
|
-
export var classes = { "root": "
|
|
9
|
+
export var classes = { "root": "thumbnailreplaceoverlay3362007242__root", "icon": "thumbnailreplaceoverlay3362007242__icon" };
|
|
10
10
|
export var keyframes = {};
|
|
11
11
|
export var layers = {};
|
|
12
12
|
export var containers = {};
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
// @ts-nocheck
|
|
2
2
|
import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
|
|
3
|
-
var _namespace_ = "
|
|
3
|
+
var _namespace_ = "cellmediaeditshell2595876078";
|
|
4
4
|
var _style_ = classesRuntime.bind(null, _namespace_);
|
|
5
5
|
export var cssStates = statesRuntime.bind(null, _namespace_);
|
|
6
6
|
export var style = _style_;
|
|
7
7
|
export var st = _style_;
|
|
8
8
|
export var namespace = _namespace_;
|
|
9
|
-
export var classes = { "root": "
|
|
9
|
+
export var classes = { "root": "cellmediaeditshell2595876078__root" };
|
|
10
10
|
export var keyframes = {};
|
|
11
11
|
export var layers = {};
|
|
12
12
|
export var containers = {};
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
// @ts-nocheck
|
|
2
2
|
import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
|
|
3
|
-
var _namespace_ = "
|
|
3
|
+
var _namespace_ = "pasteurlbutton3722309293";
|
|
4
4
|
var _style_ = classesRuntime.bind(null, _namespace_);
|
|
5
5
|
export var cssStates = statesRuntime.bind(null, _namespace_);
|
|
6
6
|
export var style = _style_;
|
|
7
7
|
export var st = _style_;
|
|
8
8
|
export var namespace = _namespace_;
|
|
9
|
-
export var classes = { "root": "
|
|
9
|
+
export var classes = { "root": "pasteurlbutton3722309293__root", "iconButtonTooltip": "pasteurlbutton3722309293__iconButtonTooltip", "iconButton": "pasteurlbutton3722309293__iconButton" };
|
|
10
10
|
export var keyframes = {};
|
|
11
11
|
export var layers = {};
|
|
12
12
|
export var containers = {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"paste-url-button.st.css.js","sourceRoot":"","sources":["../../../../src/components/media-control/paste-url-button.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,
|
|
1
|
+
{"version":3,"file":"paste-url-button.st.css.js","sourceRoot":"","sources":["../../../../src/components/media-control/paste-url-button.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,0BAA0B,CAAC;AAC7C,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAA2C,OAAO,CAAC;AACnE,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,gCAAgC,EAAC,mBAAmB,EAAC,6CAA6C,EAAC,YAAY,EAAC,sCAAsC,EAAC,CAAC;AACrL,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAE,CAAC"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
// @ts-nocheck
|
|
2
2
|
import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
|
|
3
|
-
var _namespace_ = "
|
|
3
|
+
var _namespace_ = "formmediagalleryfield2443479833";
|
|
4
4
|
var _style_ = classesRuntime.bind(null, _namespace_);
|
|
5
5
|
export var cssStates = statesRuntime.bind(null, _namespace_);
|
|
6
6
|
export var style = _style_;
|
|
7
7
|
export var st = _style_;
|
|
8
8
|
export var namespace = _namespace_;
|
|
9
|
-
export var classes = { "root": "
|
|
9
|
+
export var classes = { "root": "formmediagalleryfield2443479833__root", "container": "formmediagalleryfield2443479833__container", "viewBox": "formmediagalleryfield2443479833__viewBox", "addItemWrapper": "formmediagalleryfield2443479833__addItemWrapper", "addItem": "formmediagalleryfield2443479833__addItem", "overlay": "formmediagalleryfield2443479833__overlay", "image": "formmediagalleryfield2443479833__image", "previewImage": "formmediagalleryfield2443479833__previewImage", "previewVideo": "formmediagalleryfield2443479833__previewVideo" };
|
|
10
10
|
export var keyframes = {};
|
|
11
11
|
export var layers = {};
|
|
12
12
|
export var containers = {};
|
|
@@ -9,7 +9,7 @@ export const MediaPreviewModal = ({ isOpen, onClose, value, onRequestMedia, onCl
|
|
|
9
9
|
if (!isOpen || !value) {
|
|
10
10
|
return null;
|
|
11
11
|
}
|
|
12
|
-
return (React.createElement(Modal, { isOpen: true, screen: "full" },
|
|
12
|
+
return (React.createElement(Modal, { isOpen: true, screen: "full", onRequestClose: onClose },
|
|
13
13
|
React.createElement(MediaPreviewLayout, { src: value, onClose: onClose, textKeys: textKeys, onDownload: onDownloadMedia, onClear: onClearMedia, onReplace: onRequestMedia, readOnly: readOnly })));
|
|
14
14
|
};
|
|
15
15
|
const MediaPreviewLayout = ({ src, onClose, textKeys, onDownload, onReplace, onClear, readOnly, }) => {
|
|
@@ -41,7 +41,7 @@ const MediaPreviewLayout = ({ src, onClose, textKeys, onDownload, onReplace, onC
|
|
|
41
41
|
React.createElement(Box, { marginRight: 2 },
|
|
42
42
|
React.createElement(TextButton, { size: "small", skin: "light", prefixIcon: React.createElement(Download, null), onClick: handleDownload }, t(textKeys.download))),
|
|
43
43
|
React.createElement(Box, { marginRight: 2 },
|
|
44
|
-
React.createElement(Button, { priority: "secondary", size: "small", skin: "light", prefixIcon: React.createElement(Replace, null), onClick: onReplace, disabled: readOnly }, t(textKeys.replace))),
|
|
44
|
+
React.createElement(Button, { priority: "secondary", size: "small", skin: "light", prefixIcon: React.createElement(Replace, null), dataHook: "preview-modal-replace-button", onClick: onReplace, disabled: readOnly }, t(textKeys.replace))),
|
|
45
45
|
onClear && (React.createElement(Box, { marginRight: 2 },
|
|
46
46
|
React.createElement(Tooltip, { content: t(textKeys.delete) },
|
|
47
47
|
React.createElement(IconButton, { priority: "secondary", size: "small", skin: "light", onClick: handleClear, disabled: readOnly },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"media-preview-modal.js","sourceRoot":"","sources":["../../../../src/components/media-gallery/media-preview-modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzE,OAAO,EACL,GAAG,EACH,MAAM,EACN,UAAU,EACV,KAAK,EACL,MAAM,EACN,KAAK,EACL,kBAAkB,EAClB,UAAU,EACV,OAAO,GACR,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EACL,OAAO,EACP,cAAc,IAAI,QAAQ,EAC1B,MAAM,GACP,MAAM,+BAA+B,CAAC;AACvC,OAAO,EACL,aAAa,EACb,eAAe,EACf,kBAAkB,GACnB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAG9C,OAAO,EAAE,OAAO,EAAE,MAAM,sCAAsC,CAAC;AAC/D,OAAO,EAAE,gCAAgC,EAAE,MAAM,8BAA8B,CAAC;AAmBhF,MAAM,CAAC,MAAM,iBAAiB,GAAgC,CAAC,EAC7D,MAAM,EACN,OAAO,EACP,KAAK,EACL,cAAc,EACd,YAAY,EACZ,eAAe,EACf,QAAQ,EACR,QAAQ,GACT,EAAE,EAAE;IACH,IAAI,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC;QACtB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,oBAAC,KAAK,IAAC,MAAM,QAAC,MAAM,EAAC,MAAM;
|
|
1
|
+
{"version":3,"file":"media-preview-modal.js","sourceRoot":"","sources":["../../../../src/components/media-gallery/media-preview-modal.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
// @ts-nocheck
|
|
2
2
|
import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
|
|
3
|
-
var _namespace_ = "
|
|
3
|
+
var _namespace_ = "mediaimage3563739252";
|
|
4
4
|
var _style_ = classesRuntime.bind(null, _namespace_);
|
|
5
5
|
export var cssStates = statesRuntime.bind(null, _namespace_);
|
|
6
6
|
export var style = _style_;
|
|
7
7
|
export var st = _style_;
|
|
8
8
|
export var namespace = _namespace_;
|
|
9
|
-
export var classes = { "root": "
|
|
9
|
+
export var classes = { "root": "mediaimage3563739252__root" };
|
|
10
10
|
export var keyframes = {};
|
|
11
11
|
export var layers = {};
|
|
12
12
|
export var containers = {};
|
|
13
13
|
export var stVars = {};
|
|
14
|
-
export var vars = { "wds-color-red-200": "--wds-color-red-200", "wsr-color-R20": "--wsr-color-R20", "wds-color-black-550": "--wds-color-black-550", "wsr-color-D55": "--wsr-color-D55", "from": "--
|
|
14
|
+
export var vars = { "wds-color-red-200": "--wds-color-red-200", "wsr-color-R20": "--wsr-color-R20", "wds-color-black-550": "--wds-color-black-550", "wsr-color-D55": "--wsr-color-D55", "from": "--mediaimage3563739252-from", "to": "--mediaimage3563739252-to" };
|
|
15
15
|
//# sourceMappingURL=media-image.st.css.js.map
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
// @ts-nocheck
|
|
2
2
|
import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js";
|
|
3
|
-
var _namespace_ = "
|
|
3
|
+
var _namespace_ = "overlay1797606365";
|
|
4
4
|
var _style_ = classesRuntime.bind(null, _namespace_);
|
|
5
5
|
export var cssStates = statesRuntime.bind(null, _namespace_);
|
|
6
6
|
export var style = _style_;
|
|
7
7
|
export var st = _style_;
|
|
8
8
|
export var namespace = _namespace_;
|
|
9
|
-
export var classes = { "root": "
|
|
9
|
+
export var classes = { "root": "overlay1797606365__root", "iconOverlay": "overlay1797606365__iconOverlay" };
|
|
10
10
|
export var keyframes = {};
|
|
11
11
|
export var layers = {};
|
|
12
12
|
export var containers = {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"overlay.st.css.js","sourceRoot":"","sources":["../../../../../src/components/media-image/overlays/overlay.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAIjF,IAAI,WAAW,GAAG,
|
|
1
|
+
{"version":3,"file":"overlay.st.css.js","sourceRoot":"","sources":["../../../../../src/components/media-image/overlays/overlay.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAIjF,IAAI,WAAW,GAAG,mBAAmB,CAAC;AACtC,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAA2C,OAAO,CAAC;AACnE,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,yBAAyB,EAAC,aAAa,EAAC,gCAAgC,EAAC,CAAC;AACvG,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAC,YAAY,EAAC,8CAA8C,EAAC,CAAC;AAClF,MAAM,CAAC,IAAI,IAAI,GAAG,EAAC,iBAAiB,EAAC,mBAAmB,EAAC,eAAe,EAAC,iBAAiB,EAAC,CAAC"}
|
|
@@ -1,26 +1,17 @@
|
|
|
1
1
|
import React, { useCallback, useEffect, useState } from 'react';
|
|
2
|
-
import { Box, FormField, IconButton, Input, Popover,
|
|
3
|
-
import { Add,
|
|
2
|
+
import { Box, FormField, IconButton, Input, Popover, Tooltip, } from '@wix/design-system';
|
|
3
|
+
import { Add, LinkSmall } from '@wix/wix-ui-icons-common/lazy';
|
|
4
4
|
import { ThumbnailSize } from '../../auto-field-types';
|
|
5
5
|
import { useTranslations } from '../../hooks';
|
|
6
6
|
import { getImageSource } from '../../utils/get-image-source';
|
|
7
7
|
import { fromImageUrl, fromMediaManagerPick, isExternalMediaImage, replaceImage, toMediaImageValue, withAltText, } from '../../utils/media-image-value';
|
|
8
|
-
import {
|
|
8
|
+
import { MEDIA_TYPES } from '../../utils/media-utils';
|
|
9
9
|
import { CellMediaEditShell, MediaFieldType, useCellMediaEdit, } from '../media-control';
|
|
10
|
-
import { MediaPreviewModal } from '../media-gallery/media-preview-modal';
|
|
11
10
|
import { MediaImage } from '../media-image';
|
|
11
|
+
import { MediaImageActions, MediaImagePreviewModal, useMediaImageDownload, } from './media-image-actions';
|
|
12
12
|
import { MediaImageView } from './media-image-view';
|
|
13
13
|
import { st, classes } from './cell-media-image-edit.st.css.js';
|
|
14
14
|
const imageFromUrl = (url, current) => replaceImage(current, fromImageUrl(url));
|
|
15
|
-
/** WDS shows the menu's open state only to its trigger, so the trigger
|
|
16
|
-
* reports it. */
|
|
17
|
-
const MenuTrigger = ({ isOpen, toggle, buttonRef, onOpenChange, ariaLabel, }) => {
|
|
18
|
-
useEffect(() => {
|
|
19
|
-
onOpenChange(isOpen);
|
|
20
|
-
}, [isOpen, onOpenChange]);
|
|
21
|
-
return (React.createElement(IconButton, { ref: buttonRef, size: "small", skin: "light", priority: "secondary", dataHook: "media-image-edit-more-button", ariaLabel: ariaLabel, "aria-haspopup": "menu", "aria-expanded": isOpen, onClick: toggle },
|
|
22
|
-
React.createElement(MoreSmall, null)));
|
|
23
|
-
};
|
|
24
15
|
/**
|
|
25
16
|
* Edits a `MEDIA_IMAGE` cell. An empty cell shows the add and paste-URL
|
|
26
17
|
* buttons. A cell with an image opens a popover with the image and its alt
|
|
@@ -59,15 +50,7 @@ export const CellMediaImageEdit = ({ value, onChange, onCommit, onCancel, onStar
|
|
|
59
50
|
title: t('CMS.image.replaceWithUrl.title'),
|
|
60
51
|
value: isExternalMediaImage(image) ? image.url : undefined,
|
|
61
52
|
});
|
|
62
|
-
const handleDownload =
|
|
63
|
-
// The Media Manager can't make a download link for an external URL.
|
|
64
|
-
if (isExternalMediaImage(image)) {
|
|
65
|
-
executeDownloading(image.url);
|
|
66
|
-
}
|
|
67
|
-
else if (src) {
|
|
68
|
-
downloadMedia(src);
|
|
69
|
-
}
|
|
70
|
-
}, [src, image, downloadMedia]);
|
|
53
|
+
const handleDownload = useMediaImageDownload(image, downloadMedia);
|
|
71
54
|
const commit = useCallback(() => {
|
|
72
55
|
setPopoverLayer('none');
|
|
73
56
|
onCommit();
|
|
@@ -131,7 +114,10 @@ export const CellMediaImageEdit = ({ value, onChange, onCommit, onCancel, onStar
|
|
|
131
114
|
// Modals open at WDS's z-index 5000, under this popover.
|
|
132
115
|
, {
|
|
133
116
|
// Modals open at WDS's z-index 5000, under this popover.
|
|
134
|
-
shown: openLayer === 'popover' || openLayer === 'menu', appendTo: "window", placement: "bottom-start",
|
|
117
|
+
shown: openLayer === 'popover' || openLayer === 'menu', appendTo: "window", placement: "bottom-start",
|
|
118
|
+
// The anchor sits inside the cell's 1px border. Figma puts the
|
|
119
|
+
// popover 4px under the border, aligned with its left edge.
|
|
120
|
+
moveBy: { x: -1, y: 5 }, zIndex: 5001, animate: true, flip: true, fixed: false, onClickOutside: handleClickOutside },
|
|
135
121
|
React.createElement(Popover.Element, null,
|
|
136
122
|
React.createElement("div", { className: classes.anchorBox })),
|
|
137
123
|
React.createElement(Popover.Content, null,
|
|
@@ -142,22 +128,10 @@ export const CellMediaImageEdit = ({ value, onChange, onCommit, onCancel, onStar
|
|
|
142
128
|
React.createElement("div", { className: st(classes.imageActions, {
|
|
143
129
|
menuOpen: popoverLayer === 'menu',
|
|
144
130
|
}) },
|
|
145
|
-
React.createElement(
|
|
146
|
-
React.createElement(IconButton, { size: "small", skin: "light", priority: "secondary", dataHook: "media-image-edit-replace-button", ariaLabel: t('CMS.image.replace'), onClick: handleCallMedia },
|
|
147
|
-
React.createElement(Replace, null))),
|
|
148
|
-
React.createElement(PopoverMenu, { textSize: "small", appendTo: "window", zIndex: 5002, triggerElement: ({ isOpen, toggle, ref }) => (React.createElement(MenuTrigger, { isOpen: isOpen, toggle: toggle, buttonRef: ref, onOpenChange: handleMenuOpenChange, ariaLabel: t('auto-patterns.fields.more_actions_tooltip') })) },
|
|
149
|
-
React.createElement(PopoverMenu.MenuItem, { dataHook: "media-image-edit-action-replace-url", text: t('CMS.image.replaceWithUrl.button'), prefixIcon: React.createElement(Link, null), onClick: openPasteUrl }),
|
|
150
|
-
React.createElement(PopoverMenu.MenuItem, { dataHook: "media-image-edit-action-preview", text: t('CMS.mediaGallery.preview'), prefixIcon: React.createElement(Maximize, null), onClick: () => setPopoverLayer('preview') }),
|
|
151
|
-
React.createElement(PopoverMenu.MenuItem, { dataHook: "media-image-edit-action-download", text: t('CMS.image.download'), prefixIcon: React.createElement(Download, null), onClick: handleDownload }),
|
|
152
|
-
React.createElement(PopoverMenu.Divider, null),
|
|
153
|
-
React.createElement(PopoverMenu.MenuItem, { dataHook: "media-image-edit-action-delete", text: t('CMS.image.clear'), skin: "destructive", prefixIcon: React.createElement(Delete, null), onClick: handleDelete }))))),
|
|
131
|
+
React.createElement(MediaImageActions, { dataHook: "media-image-edit", onReplace: handleCallMedia, onReplaceWithUrl: openPasteUrl, onPreview: () => setPopoverLayer('preview'), onDownload: handleDownload, onDelete: handleDelete, onMenuOpenChange: handleMenuOpenChange, menuZIndex: 5002 })))),
|
|
154
132
|
React.createElement(FormField, { label: t('CMS.image.altText.label') },
|
|
155
133
|
React.createElement(Input, { dataHook: "media-image-edit-alt-input", size: "small", value: image.altText ?? '', placeholder: t('CMS.image.altText.inputPlaceholder'), onChange: (e) => onChange(withAltText(image, e.target.value)), onEnterPressed: commit }))))))))),
|
|
156
|
-
image && (React.createElement(
|
|
157
|
-
replace: 'CMS.image.replace',
|
|
158
|
-
download: 'CMS.image.download',
|
|
159
|
-
delete: 'CMS.image.clear',
|
|
160
|
-
} }))));
|
|
134
|
+
image && (React.createElement(MediaImagePreviewModal, { isOpen: popoverLayer === 'preview', image: image, onClose: () => setPopoverLayer('popover'), onReplace: handleCallMedia, onDelete: handleDelete, onDownload: handleDownload }))));
|
|
161
135
|
};
|
|
162
136
|
CellMediaImageEdit.displayName = 'CellMediaImageEdit';
|
|
163
137
|
//# sourceMappingURL=cell-media-image-edit.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cell-media-image-edit.js","sourceRoot":"","sources":["../../../../src/components/media-image-field/cell-media-image-edit.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,EACL,GAAG,EACH,SAAS,EACT,UAAU,EACV,KAAK,EACL,OAAO,EACP,
|
|
1
|
+
{"version":3,"file":"cell-media-image-edit.js","sourceRoot":"","sources":["../../../../src/components/media-image-field/cell-media-image-edit.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
// @ts-nocheck
|
|
2
2
|
import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
|
|
3
|
-
var _namespace_ = "
|
|
3
|
+
var _namespace_ = "cellmediaimageedit3927008540";
|
|
4
4
|
var _style_ = classesRuntime.bind(null, _namespace_);
|
|
5
5
|
export var cssStates = statesRuntime.bind(null, _namespace_);
|
|
6
6
|
export var style = _style_;
|
|
7
7
|
export var st = _style_;
|
|
8
8
|
export var namespace = _namespace_;
|
|
9
|
-
export var classes = { "root": "
|
|
9
|
+
export var classes = { "root": "cellmediaimageedit3927008540__root", "view": "cellmediaimageedit3927008540__view", "anchor": "cellmediaimageedit3927008540__anchor", "anchorBox": "cellmediaimageedit3927008540__anchorBox", "popoverContent": "cellmediaimageedit3927008540__popoverContent", "image": "cellmediaimageedit3927008540__image", "imageActions": "cellmediaimageedit3927008540__imageActions" };
|
|
10
10
|
export var keyframes = {};
|
|
11
11
|
export var layers = {};
|
|
12
12
|
export var containers = {};
|
|
@@ -1,13 +1,15 @@
|
|
|
1
|
-
import React, { useCallback, useRef } from 'react';
|
|
2
|
-
import { Box, FormField, ImageViewer, Input } from '@wix/design-system';
|
|
1
|
+
import React, { useCallback, useRef, useState } from 'react';
|
|
2
|
+
import { Box, FormField, Image, ImageViewer, Input, MediaOverlay, } from '@wix/design-system';
|
|
3
3
|
import { useIsMobile, useWixPatternsContainer } from '@wix/bex-core/react';
|
|
4
|
+
import { Z_INDEX_MODAL_POPOVER } from '../common';
|
|
4
5
|
import { useMergedRef, useTranslations } from '../../hooks';
|
|
5
6
|
import { getImageSource } from '../../utils/get-image-source';
|
|
6
7
|
import { getImageUrl } from '../../utils/get-image-url';
|
|
7
8
|
import { MEDIA_HEIGHT, MEDIA_MAX_WIDTH } from '../../utils/media-constants';
|
|
8
|
-
import { fromMediaManagerPick, toMediaImageValue, withAltText, } from '../../utils/media-image-value';
|
|
9
|
+
import { fromImageUrl, fromMediaManagerPick, isExternalMediaImage, replaceImage, toMediaImageValue, withAltText, } from '../../utils/media-image-value';
|
|
9
10
|
import { MEDIA_TYPES } from '../../utils/media-utils';
|
|
10
|
-
import { useMediaControl } from '../media-control';
|
|
11
|
+
import { MediaFieldType, PasteURLForm, useMediaControl, usePasteURLForm, } from '../media-control';
|
|
12
|
+
import { MediaImageActions, MediaImagePreviewModal, useMediaImageDownload, } from './media-image-actions';
|
|
11
13
|
/**
|
|
12
14
|
* The entity page input of a `MEDIA_IMAGE` field: the image, and an alt text
|
|
13
15
|
* input to its right once there is an image. A pick fills an empty alt text
|
|
@@ -29,7 +31,7 @@ export const FormMediaImageField = ({ data, onChange, onBlur, readOnly, autoFocu
|
|
|
29
31
|
onChange(next);
|
|
30
32
|
}
|
|
31
33
|
}, [onChange]);
|
|
32
|
-
const { callMedia,
|
|
34
|
+
const { callMedia, downloadMedia } = useMediaControl({
|
|
33
35
|
mediaType: MEDIA_TYPES.IMAGE,
|
|
34
36
|
value: getImageSource(image),
|
|
35
37
|
onChange: handlePick,
|
|
@@ -37,8 +39,24 @@ export const FormMediaImageField = ({ data, onChange, onBlur, readOnly, autoFocu
|
|
|
37
39
|
readOnly,
|
|
38
40
|
onBlur,
|
|
39
41
|
inputRef,
|
|
40
|
-
initialLoading: true,
|
|
41
42
|
});
|
|
43
|
+
const pasteUrlForm = usePasteURLForm({
|
|
44
|
+
onChange: (url) => onChange(replaceImage(imageRef.current, fromImageUrl(url))),
|
|
45
|
+
});
|
|
46
|
+
const openPasteUrl = pasteUrlForm.onOpen({
|
|
47
|
+
title: t('CMS.image.replaceWithUrl.title'),
|
|
48
|
+
value: isExternalMediaImage(image) ? image.url : undefined,
|
|
49
|
+
});
|
|
50
|
+
const [isPreviewOpen, setIsPreviewOpen] = useState(false);
|
|
51
|
+
const handleDownload = useMediaImageDownload(image, downloadMedia);
|
|
52
|
+
const handleDelete = useCallback(() => {
|
|
53
|
+
setIsPreviewOpen(false);
|
|
54
|
+
onChange(null);
|
|
55
|
+
}, [onChange]);
|
|
56
|
+
const handlePreviewReplace = useCallback(() => {
|
|
57
|
+
setIsPreviewOpen(false);
|
|
58
|
+
callMedia();
|
|
59
|
+
}, [callMedia]);
|
|
42
60
|
const canEdit = !isMobile && !readOnly;
|
|
43
61
|
const handleAltTextChange = (e) => {
|
|
44
62
|
if (image) {
|
|
@@ -47,11 +65,21 @@ export const FormMediaImageField = ({ data, onChange, onBlur, readOnly, autoFocu
|
|
|
47
65
|
};
|
|
48
66
|
return (React.createElement(Box, { dataHook: dataHook, gap: "SP4", width: "100%" },
|
|
49
67
|
React.createElement(Box, { width: "100%", maxWidth: MEDIA_MAX_WIDTH, flexShrink: 0 },
|
|
50
|
-
React.createElement(FormField, { ...imageFormFieldProps, dataHook: "media-image-field-image" },
|
|
51
|
-
React.createElement(
|
|
68
|
+
React.createElement(FormField, { ...imageFormFieldProps, dataHook: "media-image-field-image" }, image ? (React.createElement(MediaOverlay, { dataHook: "media-image-field-overlay", hoverSkin: "dark", media: React.createElement(Image, { dataHook: "media-image-field-current-image", src: getImageUrl(image), width: "100%", height: MEDIA_HEIGHT, fit: "cover" }) },
|
|
69
|
+
React.createElement(MediaOverlay.Content, { placement: "middle", visible: "hover" },
|
|
70
|
+
React.createElement(Box, { gap: "SP2" },
|
|
71
|
+
React.createElement(MediaImageActions, { dataHook: "media-image-field", onReplace: canEdit ? callMedia : undefined, onReplaceWithUrl: readOnly ? undefined : openPasteUrl, onPreview: () => setIsPreviewOpen(true), onDownload: handleDownload, onDelete: readOnly ? undefined : handleDelete, menuZIndex: Z_INDEX_MODAL_POPOVER }))))) : (React.createElement(ImageViewer
|
|
72
|
+
// Only the empty state has a focusable control, so this is the
|
|
73
|
+
// only place inputRef can land.
|
|
74
|
+
, {
|
|
75
|
+
// Only the empty state has a focusable control, so this is the
|
|
76
|
+
// only place inputRef can land.
|
|
77
|
+
ref: setInputRef, dataHook: "media-image-field-viewer", onAddImage: canEdit ? callMedia : undefined, disabled: !canEdit, addImageInfo: translate('cairo.add-image.tooltip'), height: MEDIA_HEIGHT, width: "100%" })))),
|
|
52
78
|
image && (React.createElement(Box, { direction: "vertical", flexGrow: 1, minWidth: "0" },
|
|
53
79
|
React.createElement(FormField, { label: t('CMS.image.altText.label') },
|
|
54
|
-
React.createElement(Input, { dataHook: "media-image-field-alt-input", value: image.altText ?? '', placeholder: t('CMS.image.altText.inputPlaceholder'), onChange: handleAltTextChange, readOnly: readOnly }))))
|
|
80
|
+
React.createElement(Input, { dataHook: "media-image-field-alt-input", value: image.altText ?? '', placeholder: t('CMS.image.altText.inputPlaceholder'), onChange: handleAltTextChange, readOnly: readOnly })))),
|
|
81
|
+
React.createElement(PasteURLForm, { title: pasteUrlForm.title, value: pasteUrlForm.value, show: pasteUrlForm.isOpen, closeModal: pasteUrlForm.onClose, onSave: pasteUrlForm.onSave, fieldType: MediaFieldType.image }),
|
|
82
|
+
image && (React.createElement(MediaImagePreviewModal, { isOpen: isPreviewOpen, image: image, onClose: () => setIsPreviewOpen(false), onReplace: handlePreviewReplace, onDelete: handleDelete, onDownload: handleDownload, readOnly: !canEdit }))));
|
|
55
83
|
};
|
|
56
84
|
FormMediaImageField.displayName = 'FormMediaImageField';
|
|
57
85
|
export const ControlledMediaImageInput = ({ data, onChange, onBlur, readOnly, autoFocus, dataHook, }) => (React.createElement(FormMediaImageField, { data: data, onChange: onChange, onBlur: onBlur, readOnly: readOnly, autoFocus: autoFocus, dataHook: dataHook }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form-media-image-field.js","sourceRoot":"","sources":["../../../../src/components/media-image-field/form-media-image-field.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"form-media-image-field.js","sourceRoot":"","sources":["../../../../src/components/media-image-field/form-media-image-field.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,27 +1,43 @@
|
|
|
1
|
-
import { FormFieldUniDriver, ImageViewerUniDriver, } from '@wix/design-system/dist/testkit/unidriver';
|
|
1
|
+
import { ButtonUniDriver, CustomModalLayoutUniDriver, FormFieldUniDriver, IconButtonUniDriver, ImageViewerUniDriver, InputUniDriver, } from '@wix/design-system/dist/testkit/unidriver';
|
|
2
2
|
import { baseUniDriverFactory } from '../../testkit/base-driver';
|
|
3
|
+
/** The more actions menu, the URL form and the preview render in the body. */
|
|
3
4
|
export function FormMediaImageFieldUniDriver(base, body) {
|
|
4
5
|
const formField = FormFieldUniDriver(base.$('[data-hook="media-image-field-image"]'), body);
|
|
5
6
|
const imageViewer = ImageViewerUniDriver(base.$('[data-hook="media-image-field-viewer"]'), body);
|
|
7
|
+
const replaceButton = IconButtonUniDriver(base.$('[data-hook="media-image-field-replace-button"]'), body);
|
|
6
8
|
const altInput = base.$('[data-hook="media-image-field-alt-input"] input');
|
|
9
|
+
const menuItem = (action) => body.$(`[data-hook="media-image-field-action-${action}"]`);
|
|
10
|
+
const openMenu = () => base.$('[data-hook="media-image-field-more-button"]').click();
|
|
7
11
|
return {
|
|
8
12
|
...baseUniDriverFactory(base),
|
|
9
13
|
getLabel: async () => (await formField.getLabel())?.textContent ?? '',
|
|
10
14
|
isRequired: () => formField.isRequired(),
|
|
11
15
|
hasError: () => formField.hasStatus('error'),
|
|
12
16
|
getErrorMessage: () => formField.getStatusMessage(),
|
|
13
|
-
getImageUrl: () => imageViewer.getImageUrl(),
|
|
14
|
-
isAddItemVisible: () => imageViewer.isAddItemVisible(),
|
|
15
17
|
clickAdd: () => imageViewer.clickAdd(),
|
|
16
|
-
clickReplace: () =>
|
|
17
|
-
|
|
18
|
+
clickReplace: () => replaceButton.click(),
|
|
19
|
+
isReplaceDisabled: () => replaceButton.isButtonDisabled(),
|
|
20
|
+
replaceWithUrl: async (url) => {
|
|
21
|
+
await openMenu();
|
|
22
|
+
await menuItem('replace-url').click();
|
|
23
|
+
await InputUniDriver(body.$('[data-hook="paste-url-form.urlInput"]'), body).enterText(url);
|
|
24
|
+
await (await CustomModalLayoutUniDriver(body.$('[data-hook="paste-url-form.layout"]'), body).getPrimaryButtonDriver()).click();
|
|
25
|
+
},
|
|
26
|
+
openPreview: async () => {
|
|
27
|
+
await openMenu();
|
|
28
|
+
await menuItem('preview').click();
|
|
29
|
+
},
|
|
30
|
+
isPreviewOpen: () => body.$('[data-hook="preview-modal-content"]').exists(),
|
|
31
|
+
pressEscapeInPreview: () => body.$('[data-hook="preview-modal-content"]').pressKey('Escape'),
|
|
32
|
+
clickPreviewReplace: () => ButtonUniDriver(body.$('[data-hook="preview-modal-replace-button"]'), body).click(),
|
|
33
|
+
clickDelete: async () => {
|
|
34
|
+
await openMenu();
|
|
35
|
+
await menuItem('delete').click();
|
|
36
|
+
},
|
|
18
37
|
hasAltTextInput: () => altInput.exists(),
|
|
19
38
|
getAltText: () => altInput.value(),
|
|
20
39
|
getAltTextPlaceholder: () => altInput.attr('placeholder'),
|
|
21
40
|
enterAltText: (text) => altInput.enterValue(text),
|
|
22
|
-
// ImageViewer hides its edit buttons behind a loader until the image
|
|
23
|
-
// loads, and jsdom never fires that event on its own.
|
|
24
|
-
simulateImageLoad: async () => (await base.$('[data-hook="image-viewer-current-image"]').getNative()).dispatchEvent(new Event('load')),
|
|
25
41
|
};
|
|
26
42
|
}
|
|
27
43
|
//# sourceMappingURL=form-media-image-field.uni.driver.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form-media-image-field.uni.driver.js","sourceRoot":"","sources":["../../../../src/components/media-image-field/form-media-image-field.uni.driver.ts"],"names":[],"mappings":"AACA,OAAO,EACL,kBAAkB,EAClB,oBAAoB,
|
|
1
|
+
{"version":3,"file":"form-media-image-field.uni.driver.js","sourceRoot":"","sources":["../../../../src/components/media-image-field/form-media-image-field.uni.driver.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import React, { useCallback, useEffect } from 'react';
|
|
2
|
+
import { IconButton, PopoverMenu, Tooltip } from '@wix/design-system';
|
|
3
|
+
import { Delete, Download, Link, Maximize, MoreSmall, Replace, } from '@wix/wix-ui-icons-common/lazy';
|
|
4
|
+
import { useTranslations } from '../../hooks';
|
|
5
|
+
import { getImageSource } from '../../utils/get-image-source';
|
|
6
|
+
import { isExternalMediaImage } from '../../utils/media-image-value';
|
|
7
|
+
import { executeDownloading } from '../../utils/media-utils';
|
|
8
|
+
import { MediaPreviewModal } from '../media-gallery/media-preview-modal';
|
|
9
|
+
/** WDS shows the menu's open state only to its trigger, so the trigger
|
|
10
|
+
* reports it. */
|
|
11
|
+
const MenuTrigger = ({ isOpen, toggle, buttonRef, onOpenChange, ariaLabel, dataHook, }) => {
|
|
12
|
+
useEffect(() => {
|
|
13
|
+
onOpenChange?.(isOpen);
|
|
14
|
+
}, [isOpen, onOpenChange]);
|
|
15
|
+
return (React.createElement(IconButton, { ref: buttonRef, size: "small", skin: "light", priority: "secondary", dataHook: dataHook, ariaLabel: ariaLabel, "aria-haspopup": "menu", "aria-expanded": isOpen, onClick: toggle },
|
|
16
|
+
React.createElement(MoreSmall, null)));
|
|
17
|
+
};
|
|
18
|
+
/** The actions over a `MEDIA_IMAGE` image: Replace, and a menu with Replace
|
|
19
|
+
* with URL, Preview, Download and Delete. */
|
|
20
|
+
export const MediaImageActions = ({ dataHook, onReplace, onReplaceWithUrl, onPreview, onDownload, onDelete, onMenuOpenChange, menuZIndex, }) => {
|
|
21
|
+
const { t } = useTranslations();
|
|
22
|
+
return (React.createElement(React.Fragment, null,
|
|
23
|
+
React.createElement(Tooltip, { content: t('CMS.image.replace'), appendTo: "window" },
|
|
24
|
+
React.createElement(IconButton, { size: "small", skin: "light", priority: "secondary", dataHook: `${dataHook}-replace-button`, ariaLabel: t('CMS.image.replace'), disabled: !onReplace, onClick: onReplace },
|
|
25
|
+
React.createElement(Replace, null))),
|
|
26
|
+
React.createElement(PopoverMenu, { textSize: "small", appendTo: "window", zIndex: menuZIndex, triggerElement: ({ isOpen, toggle, ref }) => (React.createElement(MenuTrigger, { isOpen: isOpen, toggle: toggle, buttonRef: ref, onOpenChange: onMenuOpenChange, ariaLabel: t('auto-patterns.fields.more_actions_tooltip'), dataHook: `${dataHook}-more-button` })) },
|
|
27
|
+
React.createElement(PopoverMenu.MenuItem, { dataHook: `${dataHook}-action-replace-url`, text: t('CMS.image.replaceWithUrl.button'), prefixIcon: React.createElement(Link, null), disabled: !onReplaceWithUrl, onClick: () => onReplaceWithUrl?.() }),
|
|
28
|
+
React.createElement(PopoverMenu.MenuItem, { dataHook: `${dataHook}-action-preview`, text: t('CMS.mediaGallery.preview'), prefixIcon: React.createElement(Maximize, null), onClick: onPreview }),
|
|
29
|
+
React.createElement(PopoverMenu.MenuItem, { dataHook: `${dataHook}-action-download`, text: t('CMS.image.download'), prefixIcon: React.createElement(Download, null), onClick: onDownload }),
|
|
30
|
+
React.createElement(PopoverMenu.Divider, null),
|
|
31
|
+
React.createElement(PopoverMenu.MenuItem, { dataHook: `${dataHook}-action-delete`, text: t('CMS.image.clear'), skin: "destructive", prefixIcon: React.createElement(Delete, null), disabled: !onDelete, onClick: () => onDelete?.() }))));
|
|
32
|
+
};
|
|
33
|
+
MediaImageActions.displayName = 'MediaImageActions';
|
|
34
|
+
/** Downloads the image: through the Media Manager, or straight from an
|
|
35
|
+
* external URL, which the Media Manager can't make a download link for. */
|
|
36
|
+
export const useMediaImageDownload = (image, downloadMedia) => useCallback(() => {
|
|
37
|
+
if (isExternalMediaImage(image)) {
|
|
38
|
+
executeDownloading(image.url);
|
|
39
|
+
return;
|
|
40
|
+
}
|
|
41
|
+
const src = getImageSource(image);
|
|
42
|
+
if (src) {
|
|
43
|
+
downloadMedia(src);
|
|
44
|
+
}
|
|
45
|
+
}, [image, downloadMedia]);
|
|
46
|
+
export const MediaImagePreviewModal = ({ isOpen, image, onClose, onReplace, onDelete, onDownload, readOnly, }) => (React.createElement(MediaPreviewModal, { isOpen: isOpen, value: getImageSource(image), onClose: onClose, onRequestMedia: onReplace, onClearMedia: onDelete, onDownloadMedia: onDownload, readOnly: readOnly, textKeys: {
|
|
47
|
+
replace: 'CMS.image.replace',
|
|
48
|
+
download: 'CMS.image.download',
|
|
49
|
+
delete: 'CMS.image.clear',
|
|
50
|
+
} }));
|
|
51
|
+
MediaImagePreviewModal.displayName = 'MediaImagePreviewModal';
|
|
52
|
+
//# sourceMappingURL=media-image-actions.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"media-image-actions.js","sourceRoot":"","sources":["../../../../src/components/media-image-field/media-image-actions.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
// @ts-nocheck
|
|
2
2
|
import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
|
|
3
|
-
var _namespace_ = "
|
|
3
|
+
var _namespace_ = "mediaimageview2431025458";
|
|
4
4
|
var _style_ = classesRuntime.bind(null, _namespace_);
|
|
5
5
|
export var cssStates = statesRuntime.bind(null, _namespace_);
|
|
6
6
|
export var style = _style_;
|
|
7
7
|
export var st = _style_;
|
|
8
8
|
export var namespace = _namespace_;
|
|
9
|
-
export var classes = { "root": "
|
|
9
|
+
export var classes = { "root": "mediaimageview2431025458__root", "altTextPlaceholder": "mediaimageview2431025458__altTextPlaceholder" };
|
|
10
10
|
export var keyframes = {};
|
|
11
11
|
export var layers = {};
|
|
12
12
|
export var containers = {};
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
// @ts-nocheck
|
|
2
2
|
import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js";
|
|
3
|
-
var _namespace_ = "
|
|
3
|
+
var _namespace_ = "mediatag4208340969";
|
|
4
4
|
var _style_ = classesRuntime.bind(null, _namespace_);
|
|
5
5
|
export var cssStates = statesRuntime.bind(null, _namespace_);
|
|
6
6
|
export var style = _style_;
|
|
7
7
|
export var st = _style_;
|
|
8
8
|
export var namespace = _namespace_;
|
|
9
|
-
export var classes = { "root": "
|
|
9
|
+
export var classes = { "root": "mediatag4208340969__root" };
|
|
10
10
|
export var keyframes = {};
|
|
11
11
|
export var layers = {};
|
|
12
12
|
export var containers = {};
|