GitHub/divkit
1
0
Fork 0
mirror of https://github.com/divkit/divkit.git synced 2026-06-06 20:07:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Custom file dialog

Browse Source 
commit_hash:711677a73f1ec8302190d28f891f5ba4c190536d
This commit is contained in:
4eb0da
2025-09-16 12:45:11 +03:00
parent 0aa8ad5f78
commit 738e54daed
11 changed files with 64 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.mapping.json
-1
View File
@@ -23060,7 +23060,6 @@
"visual-editor/src/lib/utils/tanker.ts":"divkit/public/visual-editor/src/lib/utils/tanker.ts",
"visual-editor/src/lib/utils/tree.ts":"divkit/public/visual-editor/src/lib/utils/tree.ts",
"visual-editor/src/lib/utils/truthy.ts":"divkit/public/visual-editor/src/lib/utils/truthy.ts",
"visual-editor/src/lib/utils/video.ts":"divkit/public/visual-editor/src/lib/utils/video.ts",
"visual-editor/src/main.css":"divkit/public/visual-editor/src/main.css",
"visual-editor/src/types/divjson.d.ts":"divkit/public/visual-editor/src/types/divjson.d.ts",
"visual-editor/src/vite-env.d.ts":"divkit/public/visual-editor/src/vite-env.d.ts",
visual-editor/src/App.svelte
+17 -3
View File
@@ -5,7 +5,7 @@
import type { LanguageContext } from './lib/ctx/languageContext';
import { LANGUAGE_CTX } from './lib/ctx/languageContext';
import ContextMenu from './lib/components/ContextMenu.svelte';
import type { CardLocale, EditorInstance, EditorOptions, FileLimits, FontFaceDesc, GetTranslationKey, GetTranslationSuggest, Layout } from './lib';
import type { CardLocale, EditorInstance, EditorOptions, FileDialogApi, FileLimits, FontFaceDesc, GetTranslationKey, GetTranslationSuggest, Layout } from './lib';
import LayoutColumn from './lib/components/LayoutColumn.svelte';
import { APP_CTX, type AppContext, type ContextMenuApi, type RendererApi, type ShowErrors } from './lib/ctx/appContext';
import { editorFabric as editorFabricInternal } from './lib/data/editorWrapper';
@@ -70,6 +70,8 @@
export let getTranslationKey: GetTranslationKey | undefined = undefined;
export let fileDialogApi: FileDialogApi | undefined = undefined;
export function setLayout(newLayout: Layout): void {
layout = newLayout;
}
@@ -118,6 +120,8 @@
let selectOptionsDialog: SelectOptionsDialog;
let itemsListDialog: ItemsListDialog;
let isCustomFileDialogShown = false;
setContext<LanguageContext>(LANGUAGE_CTX, {
lang,
getLanguage(): string {
@@ -237,10 +241,20 @@
file2Dialog() {
return {
show(props) {
file2Dialog.show(props);
if (fileDialogApi?.canShow(props)) {
fileDialogApi.show(props);
isCustomFileDialogShown = true;
} else {
file2Dialog.show(props);
isCustomFileDialogShown = false;
}
},
hide() {
file2Dialog.hide();
if (isCustomFileDialogShown) {
fileDialogApi?.hide();
} else {
file2Dialog.hide();
}
}
};
},
visual-editor/src/lib.ts
+33 -1
View File
@@ -1,4 +1,5 @@
import { get, type Unsubscriber } from 'svelte/store';
import type { VideoSource } from '@divkitframework/divkit/typings/common';
import App from './App.svelte';
import type { Loc } from './lib/utils/stringifyWithLoc';
import type { TypedRange } from './lib/data/editor';
@@ -98,12 +99,42 @@ export type GetTranslationSuggest = (query: string, locale: string) => Promise<T
export type GetTranslationKey = (key: string) => Promise<Record<string, string> | undefined>;
export interface FileDialogValue {
url: string;
width?: number;
height?: number;
}
export type FileDialogCallback = (opts: FileDialogValue) => void;
export interface FileDialogShowProps {
value: FileDialogValue;
title: string;
subtype: 'image' | 'gif' | 'lottie' | 'video' | 'image_preview';
direction?: 'left' | 'right';
hasSize?: boolean;
hasDelete?: boolean;
target: HTMLElement;
disabled?: boolean;
generateFromVideo?: VideoSource[];
generateFromLottie?: string;
callback: FileDialogCallback;
onHide?(): void;
}
export interface FileDialogApi {
canShow(props: FileDialogShowProps): boolean;
show(props: FileDialogShowProps): void;
hide(): void;
}
export interface DivProEditorApi {
uploadFile?(file: File): Promise<string>;
editorFabric?(opts: EditorOptions): EditorInstance;
onChange?(): void;
getTranslationSuggest?: GetTranslationSuggest;
getTranslationKey?: GetTranslationKey;
fileDialog?: FileDialogApi;
}
export interface Source {
@@ -257,7 +288,8 @@ export const DivProEditor = {
uploadFile: opts.api?.uploadFile,
editorFabric: opts.api?.editorFabric,
getTranslationKey: opts.api?.getTranslationKey,
getTranslationSuggest: opts.api?.getTranslationSuggest
getTranslationSuggest: opts.api?.getTranslationSuggest,
fileDialogApi: opts.api?.fileDialog
}
});
visual-editor/src/lib/components/controls/Text.svelte
+1 -1
View File
@@ -11,11 +11,11 @@
<script lang="ts">
import { createEventDispatcher, getContext } from 'svelte';
import type { VideoSource } from '@divkitframework/divkit/typings/common';
import { LANGUAGE_CTX, type LanguageContext } from '../../ctx/languageContext';
import { APP_CTX, type AppContext } from '../../ctx/appContext';
import { formatFileSize } from '../../utils/formatFileSize';
import { calcFileSizeMod, getFileSize } from '../../utils/fileSize';
import type { VideoSource } from '../../utils/video';
import type { StringValueFilter } from '../../../lib';
import { checkStringValue } from '../../utils/checkValue';
visual-editor/src/lib/components/prop-dialog/File2Dialog.svelte
+6 -5
View File
@@ -13,12 +13,13 @@
import { getContext, onDestroy } from 'svelte';
import type { AnimationItem } from 'lottie-web';
import type { VideoSource } from '../../utils/video';
import type { VideoSource } from '@divkitframework/divkit/typings/common';
import type { FileDialogCallback, FileDialogShowProps, FileDialogValue } from '../../../lib';
import Text from '../controls/Text.svelte';
import ContextDialog from './ContextDialog.svelte';
import { LANGUAGE_CTX, type LanguageContext } from '../../ctx/languageContext';
import Button2 from '../controls/Button2.svelte';
import { APP_CTX, type AppContext, type File2DialogCallback, type File2DialogShowProps, type File2DialogValue } from '../../ctx/appContext';
import { APP_CTX, type AppContext } from '../../ctx/appContext';
import loaderImage from '../../../assets/loader.svg?raw';
import trashIcon from '../../../assets/trash.svg?raw';
import generateIcon from '../../../assets/generate.svg?raw';
@@ -110,7 +111,7 @@
} */
}
export function show(props: File2DialogShowProps): void {
export function show(props: FileDialogShowProps): void {
callback = props.callback;
target = props.target;
value = props.value;
@@ -143,12 +144,12 @@
let isShown = false;
let hasSize: boolean | undefined = false;
let hasDelete: boolean | undefined = false;
let value: File2DialogValue = {
let value: FileDialogValue = {
url: '',
width: 0,
height: 0
};
let callback: File2DialogCallback;
let callback: FileDialogCallback;
let title = '';
let subtype: '' | 'image' | 'gif' | 'lottie' | 'video' | 'image_preview' = '';
let commonSubtype = '';
visual-editor/src/lib/components/prop-dialog/VideoSourcesDialog.svelte
+1 -1
View File
@@ -1,11 +1,11 @@
<script lang="ts">
import { getContext } from 'svelte';
import type { VideoSource } from '@divkitframework/divkit/typings/common';
import type { ComponentProperty, SiblingComponentProperty } from '../../data/componentProps';
import { LANGUAGE_CTX, type LanguageContext } from '../../ctx/languageContext';
import Text from '../controls/Text.svelte';
import ContextDialog from './ContextDialog.svelte';
import { APP_CTX, type AppContext, type VideoSourceShowProps } from '../../ctx/appContext';
import type { VideoSource } from '../../utils/video';
import UnknownPropWithLabel from '../simple-props/UnknownPropWithLabel.svelte';
const { l10n } = getContext<LanguageContext>(LANGUAGE_CTX);
visual-editor/src/lib/components/simple-props/FileProp.svelte
+1 -1
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import { createEventDispatcher, getContext } from 'svelte';
import type { VideoSource } from '@divkitframework/divkit/typings/common';
import type { FileProperty } from '../../data/componentProps';
import type { VideoSource } from '../../utils/video';
import Text from '../controls/Text.svelte';
import { APP_CTX, type AppContext } from '../../ctx/appContext';
import { getObjectProperty } from '../../utils/objectProperty';
visual-editor/src/lib/components/simple-props/VideoSourcesItem.svelte
+1 -1
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import { createEventDispatcher, getContext, onDestroy } from 'svelte';
import type { VideoSource } from '../../utils/video';
import type { VideoSource } from '@divkitframework/divkit/typings/common';
import { APP_CTX, type AppContext } from '../../ctx/appContext';
import { calcFileSizeMod, getFileSize } from '../../utils/fileSize';
import { LANGUAGE_CTX, type LanguageContext } from '../../ctx/languageContext';
visual-editor/src/lib/components/simple-props/VideoSourcesProp.svelte
+1 -1
View File
@@ -1,12 +1,12 @@
<script lang="ts">
import { createEventDispatcher, getContext } from 'svelte';
import type { VideoSource } from '@divkitframework/divkit/typings/common';
import { LANGUAGE_CTX, type LanguageContext } from '../../ctx/languageContext';
import type { ComponentProperty } from '../../data/componentProps';
import MoveList2 from '../controls/MoveList2.svelte';
import VideoSourcesItem from './VideoSourcesItem.svelte';
import AddButton from '../controls/AddButton.svelte';
import { APP_CTX, type AppContext } from '../../ctx/appContext';
import type { VideoSource } from '../../utils/video';
export let value: VideoSource[];
export let item: ComponentProperty;
visual-editor/src/lib/ctx/appContext.ts
+3 -27
View File
@@ -1,9 +1,8 @@
import type { Action } from '@divkitframework/divkit/typings/common';
import type { CardLocale, EditorInstance, EditorOptions, FileLimits, FontFaceDesc, GetTranslationKey, GetTranslationSuggest } from '../../lib';
import type { Action, VideoSource } from '@divkitframework/divkit/typings/common';
import type { CardLocale, EditorInstance, EditorOptions, FileDialogShowProps, FileLimits, FontFaceDesc, GetTranslationKey, GetTranslationSuggest } from '../../lib';
import type { State } from '../data/state';
import type { TreeLeaf } from './tree';
import type { Background } from '../data/background';
import type { VideoSource } from '../utils/video';
import type { SelectOption } from '../utils/select';
import type { Item } from '../utils/items';
@@ -69,29 +68,6 @@ export interface Expression2ShowProps {
callback(val: string): void;
}
export interface File2DialogValue {
url: string;
width?: number;
height?: number;
}
export type File2DialogCallback = (opts: File2DialogValue) => void;
export interface File2DialogShowProps {
value: File2DialogValue;
title: string;
subtype: 'image' | 'gif' | 'lottie' | 'video' | 'image_preview';
direction?: 'left' | 'right';
hasSize?: boolean;
hasDelete?: boolean;
target: HTMLElement;
disabled?: boolean;
generateFromVideo?: VideoSource[];
generateFromLottie?: string;
callback: File2DialogCallback;
onHide?(): void;
}
export interface Link2DialogShowProps {
value: string;
target: HTMLElement;
@@ -199,7 +175,7 @@ export interface Expression2DialogApi {
}
export interface File2DialogApi {
show(props: File2DialogShowProps): void;
show(props: FileDialogShowProps): void;
hide(): void;
}
visual-editor/src/lib/utils/video.ts
-4
View File
@@ -1,4 +0,0 @@
export interface VideoSource {
url?: string;
mime_type?: string;
}