@plaudit/gutenberg-api-extensions 2.40.1 → 2.41.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/build/blocks/common-native-property-constructors.d.ts +6 -4
- package/build/blocks/common-native-property-constructors.js +100 -81
- package/build/blocks/common-native-property-constructors.js.map +1 -1
- package/build/blocks/data-store-list-holder.d.ts +2 -3
- package/build/blocks/data-store-list-holder.js.map +1 -1
- package/build/blocks/object-data-store.d.ts +6 -11
- package/build/blocks/object-data-store.js.map +1 -1
- package/build/blocks/simple-native-property-impl.js +6 -7
- package/build/blocks/simple-native-property-impl.js.map +1 -1
- package/build/blocks/snp-group-component.d.ts +2 -3
- package/build/blocks/snp-group-component.js.map +1 -1
- package/build/controls/AsynchronousFormTokenField.d.ts +17 -8
- package/build/controls/AsynchronousFormTokenField.js +20 -107
- package/build/controls/AsynchronousFormTokenField.js.map +1 -1
- package/build/controls/ExtendedPostPicker.d.ts +16 -8
- package/build/controls/ExtendedPostPicker.js +27 -23
- package/build/controls/ExtendedPostPicker.js.map +1 -1
- package/build/controls/ExtendedRadioControl.js +10 -9
- package/build/controls/ExtendedRadioControl.js.map +1 -1
- package/build/controls/ImageControl.js +20 -11
- package/build/controls/ImageControl.js.map +1 -1
- package/build/controls/LazySuggestionsComboboxControl.js +21 -85
- package/build/controls/LazySuggestionsComboboxControl.js.map +1 -1
- package/build/controls/MultiSelectControl.d.ts +1 -1
- package/build/controls/MultiSelectControl.js +26 -20
- package/build/controls/MultiSelectControl.js.map +1 -1
- package/build/controls/PromisableComponent.d.ts +10 -0
- package/build/controls/PromisableComponent.js +23 -0
- package/build/controls/PromisableComponent.js.map +1 -0
- package/build/controls/ProperLinkControl.d.ts +3 -1
- package/build/controls/ProperLinkControl.js +8 -4
- package/build/controls/ProperLinkControl.js.map +1 -1
- package/build/controls/SimpleToggle.js +3 -1
- package/build/controls/SimpleToggle.js.map +1 -1
- package/build/controls/SortableItemsControl.js +35 -74
- package/build/controls/SortableItemsControl.js.map +1 -1
- package/build/controls/hooks/useDragHandler.d.ts +9 -0
- package/build/controls/hooks/useDragHandler.js +55 -0
- package/build/controls/hooks/useDragHandler.js.map +1 -0
- package/build/controls/hooks/useMultiSingleConversionLayer.d.ts +4 -0
- package/build/controls/hooks/useMultiSingleConversionLayer.js +13 -0
- package/build/controls/hooks/useMultiSingleConversionLayer.js.map +1 -0
- package/build/controls/hooks/useNonRenderingCounter.d.ts +3 -0
- package/build/controls/hooks/useNonRenderingCounter.js +6 -0
- package/build/controls/hooks/useNonRenderingCounter.js.map +1 -0
- package/build/controls/hooks/useSuggestions.d.ts +15 -0
- package/build/controls/hooks/useSuggestions.js +74 -0
- package/build/controls/hooks/useSuggestions.js.map +1 -0
- package/build/controls/hooks/useTokenManager.d.ts +11 -0
- package/build/controls/hooks/useTokenManager.js +147 -0
- package/build/controls/hooks/useTokenManager.js.map +1 -0
- package/build/controls/index.d.ts +1 -1
- package/build/controls/index.js +1 -1
- package/build/controls/index.js.map +1 -1
- package/build/controls/shared.d.ts +1 -0
- package/build/controls/shared.js +6 -0
- package/build/controls/shared.js.map +1 -1
- package/build/controls/types.d.ts +3 -0
- package/package.json +1 -1
- package/styles/editor.pcss +7 -0
- package/build/controls/PromiseableComponent.d.ts +0 -12
- package/build/controls/PromiseableComponent.js +0 -24
- package/build/controls/PromiseableComponent.js.map +0 -1
|
@@ -1,99 +1,35 @@
|
|
|
1
1
|
import { BaseControl, ComboboxControl, Spinner } from "@wordpress/components";
|
|
2
|
-
import {
|
|
3
|
-
import { useEffect, useState } from "@wordpress/element";
|
|
2
|
+
import { useCallback, useMemo, useState } from "@wordpress/element";
|
|
4
3
|
import { __ } from "@wordpress/i18n";
|
|
4
|
+
import { useSuggestions } from "./hooks/useSuggestions";
|
|
5
5
|
import React from "react";
|
|
6
6
|
export function LazySuggestionsComboboxControl(props) {
|
|
7
|
-
const
|
|
8
|
-
const
|
|
9
|
-
const [hasLoadingError, setSetHasLoadingError] = useState(false);
|
|
7
|
+
const { help, allowReset, className, ...passthroughProps } = props;
|
|
8
|
+
const { hasLoadingError, isInitializing, isLoading, suggestions, input, setInput } = useSuggestions(props.value, props);
|
|
10
9
|
const [hasFocus, setHasFocus] = useState(false);
|
|
11
|
-
const [
|
|
12
|
-
const
|
|
13
|
-
const
|
|
14
|
-
const
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
debouncer: debounce(input => {
|
|
18
|
-
if (typeof input !== 'string') {
|
|
19
|
-
return;
|
|
20
|
-
}
|
|
21
|
-
setIsLoading(true);
|
|
22
|
-
const myNumber = ++mySuggestionRequestQueue.currentRequest;
|
|
23
|
-
mySuggestionRequestQueue.queue = mySuggestionRequestQueue.queue.then(async () => {
|
|
24
|
-
setSetHasLoadingError(false);
|
|
25
|
-
let suggestions;
|
|
26
|
-
if (input.length < 2) {
|
|
27
|
-
if (props.value) {
|
|
28
|
-
const propValue = await props.getOption(props.value);
|
|
29
|
-
if (propValue) {
|
|
30
|
-
suggestions = [propValue];
|
|
31
|
-
}
|
|
32
|
-
else {
|
|
33
|
-
suggestions = [];
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
else {
|
|
37
|
-
suggestions = [];
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
else {
|
|
41
|
-
suggestions = await props.getSuggestions(input);
|
|
42
|
-
}
|
|
43
|
-
if (myNumber === mySuggestionRequestQueue.currentRequest) {
|
|
44
|
-
if (props.onFilterValueChange) {
|
|
45
|
-
props.onFilterValueChange(input);
|
|
46
|
-
}
|
|
47
|
-
setSuggestions(suggestions);
|
|
48
|
-
setIsLoading(false);
|
|
49
|
-
}
|
|
50
|
-
return true;
|
|
51
|
-
}).catch(err => {
|
|
52
|
-
setSetHasLoadingError(true);
|
|
53
|
-
console.error("An error occurred while loading options:", err);
|
|
54
|
-
return false;
|
|
55
|
-
});
|
|
56
|
-
}, 500)
|
|
57
|
-
}));
|
|
58
|
-
useEffect(() => {
|
|
59
|
-
if (props.value) {
|
|
60
|
-
props.getOption(props.value).then(option => {
|
|
61
|
-
setSuggestions(option ? [option] : []);
|
|
62
|
-
setIsInitializing(false);
|
|
63
|
-
setSetHasLoadingError(false);
|
|
64
|
-
}, err => {
|
|
65
|
-
setSetHasLoadingError(true);
|
|
66
|
-
console.error("An error occurred while loading options:", err);
|
|
67
|
-
});
|
|
10
|
+
const options = useMemo(() => hasFocus && input.length < 2 || (isLoading && !suggestions.length) ? [{ label: input, value: "", disabled: true }] : suggestions, [hasFocus, input, isLoading, suggestions]);
|
|
11
|
+
const onFocus = useCallback((e) => setHasFocus(e.currentTarget.contains(e.target)), [setHasFocus]);
|
|
12
|
+
const onBlur = useCallback((e) => setHasFocus(e.currentTarget.contains(e.relatedTarget)), [setHasFocus]);
|
|
13
|
+
const onFilterValueChange = useCallback((value) => {
|
|
14
|
+
if (props.onFilterValueChange) {
|
|
15
|
+
props.onFilterValueChange(value);
|
|
68
16
|
}
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
17
|
+
setInput(value);
|
|
18
|
+
}, [props.onFilterValueChange, setInput]);
|
|
19
|
+
const __experimentalRenderItem = useMemo(() => {
|
|
20
|
+
return hasFocus && input.length < 2 ? () => __("Start typing to see suggestions")
|
|
21
|
+
: (isLoading && !suggestions.length ? () => __("Loading suggestions") : undefined);
|
|
22
|
+
}, [hasFocus, input, isLoading, suggestions]);
|
|
73
23
|
if (isInitializing) {
|
|
74
24
|
return React.createElement(BaseControl, { ...props },
|
|
75
25
|
React.createElement(Spinner, null),
|
|
76
26
|
React.createElement("span", null, __(`Initializing ${props.label}`)));
|
|
77
27
|
}
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
setMostRecentInput("");
|
|
83
|
-
}
|
|
84
|
-
} },
|
|
85
|
-
React.createElement(ComboboxControl, { ...passthroughProps, help: React.createElement(React.Fragment, null,
|
|
86
|
-
mostRecentInput.length < 2 && hasFocus && React.createElement(React.Fragment, null,
|
|
87
|
-
__("Start typing to see suggestions"),
|
|
88
|
-
React.createElement("br", null)),
|
|
89
|
-
help), options: suggestions, onFilterValueChange: value => {
|
|
90
|
-
mySuggestionRequestQueue.debouncer(value);
|
|
91
|
-
setMostRecentInput(value);
|
|
92
|
-
}, allowReset: allowReset !== false }),
|
|
28
|
+
const needsGreyOut = input.length < 2 || (isLoading && !suggestions.length);
|
|
29
|
+
return React.createElement("div", { onFocus: onFocus, onBlur: onBlur },
|
|
30
|
+
isLoading && React.createElement(Spinner, { style: { marginTop: "30px", position: "absolute", right: "40px" }, "aria-label": "Updating Suggestions" }),
|
|
31
|
+
React.createElement(ComboboxControl, { ...passthroughProps, className: className ? `${className}${needsGreyOut ? " insufficient-input-length" : ""}` : (needsGreyOut ? "insufficient-input-length" : undefined), help: help, options: options, onFilterValueChange: onFilterValueChange, __experimentalRenderItem: __experimentalRenderItem, allowReset: allowReset !== false }),
|
|
93
32
|
hasLoadingError && React.createElement("div", null,
|
|
94
|
-
React.createElement("span", { className: "components-base-control__help" }, __("An error occurred while updating suggestions")))
|
|
95
|
-
isLoading && React.createElement("div", null,
|
|
96
|
-
React.createElement(Spinner, null),
|
|
97
|
-
React.createElement("span", { className: "components-base-control__help" }, __("Updating Suggestions"))));
|
|
33
|
+
React.createElement("span", { className: "components-base-control__help" }, __("An error occurred while updating suggestions"))));
|
|
98
34
|
}
|
|
99
35
|
//# sourceMappingURL=LazySuggestionsComboboxControl.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LazySuggestionsComboboxControl.js","sourceRoot":"","sources":["../../src/controls/LazySuggestionsComboboxControl.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAE,eAAe,EAAE,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAE5E,OAAO,EAAC,QAAQ,EAAC,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"LazySuggestionsComboboxControl.js","sourceRoot":"","sources":["../../src/controls/LazySuggestionsComboboxControl.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,27 +1,33 @@
|
|
|
1
|
-
import { AsynchronousFormTokenField, ValidationState } from "./AsynchronousFormTokenField";
|
|
2
1
|
import { useMemo } from "@wordpress/element";
|
|
3
|
-
import
|
|
2
|
+
import { AsynchronousFormTokenField, ValidationState } from "./AsynchronousFormTokenField";
|
|
4
3
|
import { getLabel, normalizePickableOptionsToPairs } from "./shared";
|
|
4
|
+
import React, { useCallback } from "react";
|
|
5
5
|
export function MultiSelectControl(props) {
|
|
6
|
-
const { value
|
|
7
|
-
const normalizedOptions = normalizePickableOptionsToPairs(options);
|
|
8
|
-
const validOptions = normalizedOptions.
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
}
|
|
21
|
-
}, suggestionQuery: async (input) => normalizedOptions
|
|
6
|
+
const { value, options, ...fieldProps } = props;
|
|
7
|
+
const normalizedOptions = useMemo(() => normalizePickableOptionsToPairs(options), [options]);
|
|
8
|
+
const validOptions = useMemo(() => Object.fromEntries(normalizedOptions.map(opt => [opt[0], `${getLabel(opt)} (#${opt[0]})`])), [normalizedOptions]);
|
|
9
|
+
const makeTokenValueFromSuggestion = useCallback((token) => {
|
|
10
|
+
if (validOptions[token]) {
|
|
11
|
+
return { value: token, title: validOptions[token], status: ValidationState.Valid };
|
|
12
|
+
}
|
|
13
|
+
else {
|
|
14
|
+
const value = /\(#([^)]+)\)$/.exec(token)?.[1];
|
|
15
|
+
return value ? { value, title: token, status: ValidationState.Validating } : { value: token, status: ValidationState.Invalid, title: token };
|
|
16
|
+
}
|
|
17
|
+
}, [validOptions]);
|
|
18
|
+
const suggestionQuery = useCallback(async (input) => {
|
|
19
|
+
return normalizedOptions
|
|
22
20
|
.filter(option => option[0].includes(input) || getLabel(option).includes(input))
|
|
23
|
-
.map(option => `${getLabel(option)} (#${option[0]})`)
|
|
21
|
+
.map(option => `${getLabel(option)} (#${option[0]})`);
|
|
22
|
+
}, [normalizedOptions]);
|
|
23
|
+
const validationQuery = useCallback(async (values) => {
|
|
24
|
+
return values
|
|
24
25
|
.filter(value => validOptions[value] !== undefined)
|
|
25
|
-
.map(value => ({ value, title: validOptions[value], status: ValidationState.Valid }))
|
|
26
|
+
.map(value => ({ value, title: validOptions[value], status: ValidationState.Valid }));
|
|
27
|
+
}, [validOptions]);
|
|
28
|
+
return React.createElement(AsynchronousFormTokenField, { ...fieldProps, value: value, makeTokenFromSuggestion: makeTokenValueFromSuggestion, suggestionQuery: suggestionQuery, validationQuery: validationQuery, validator: validator });
|
|
29
|
+
}
|
|
30
|
+
function validator(token) {
|
|
31
|
+
return /\(#([^)]+)\)$/.exec(token)?.[1] !== undefined;
|
|
26
32
|
}
|
|
27
33
|
//# sourceMappingURL=MultiSelectControl.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelectControl.js","sourceRoot":"","sources":["../../src/controls/MultiSelectControl.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"MultiSelectControl.js","sourceRoot":"","sources":["../../src/controls/MultiSelectControl.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React, { type ReactNode } from "react";
|
|
2
|
+
export type AwaitedProps<T extends object> = {
|
|
3
|
+
[K in keyof T]: Awaited<T[K]>;
|
|
4
|
+
};
|
|
5
|
+
export type PromisableComponentProps<T extends Awaited<object>> = {
|
|
6
|
+
promisedProps: T | Promise<T>;
|
|
7
|
+
initializing?: () => ReactNode;
|
|
8
|
+
renderer(props: AwaitedProps<T>): ReactNode;
|
|
9
|
+
};
|
|
10
|
+
export declare function PromisableComponent<T extends Awaited<object>>(props: PromisableComponentProps<T>): string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { Spinner } from '@wordpress/components';
|
|
2
|
+
import { useEffect, useState } from "@wordpress/element";
|
|
3
|
+
import React from "react";
|
|
4
|
+
export function PromisableComponent(props) {
|
|
5
|
+
const { initializing, renderer: Renderer, promisedProps } = props;
|
|
6
|
+
const [initializedProps, setInitializedProps] = useState(undefined);
|
|
7
|
+
useEffect(() => {
|
|
8
|
+
Promise.all(Object.entries(promisedProps).filter(([_, value]) => value instanceof Promise)
|
|
9
|
+
.map(async ([key, value]) => [key, await value])).then(entries => {
|
|
10
|
+
setInitializedProps(Object.fromEntries(entries));
|
|
11
|
+
});
|
|
12
|
+
}, [...Object.values(props.promisedProps).filter(p => p instanceof Promise)]);
|
|
13
|
+
if (initializedProps === undefined) {
|
|
14
|
+
if (initializing) {
|
|
15
|
+
return initializing();
|
|
16
|
+
}
|
|
17
|
+
else {
|
|
18
|
+
return React.createElement(Spinner, null);
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
return React.createElement(Renderer, { ...promisedProps, ...initializedProps });
|
|
22
|
+
}
|
|
23
|
+
//# sourceMappingURL=PromisableComponent.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PromisableComponent.js","sourceRoot":"","sources":["../../src/controls/PromisableComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAC,SAAS,EAAE,QAAQ,EAAC,MAAM,oBAAoB,CAAC;AAEvD,OAAO,KAAuB,MAAM,OAAO,CAAC;AAK5C,MAAM,UAAU,mBAAmB,CAA4B,KAAkC;IAChG,MAAM,EAAC,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,aAAa,EAAC,GAAG,KAAK,CAAC;IAChE,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAA4B,SAAS,CAAC,CAAC;IAC/F,SAAS,CAAC,GAAG,EAAE;QACd,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAC,KAAK,CAAC,EAAE,EAAE,CAAC,KAAK,YAAY,OAAO,CAAC;aACvF,GAAG,CAAC,KAAK,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,EAAgD,EAAE,CAAC,CAAC,GAAG,EAAE,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;YAC/G,mBAAmB,CAAC,MAAM,CAAC,WAAW,CAAC,OAAO,CAAQ,CAAC,CAAC;QACzD,CAAC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,YAAY,OAAO,CAAC,CAAC,CAAC,CAAC;IAE9E,IAAI,gBAAgB,KAAK,SAAS,EAAE,CAAC;QACpC,IAAI,YAAY,EAAE,CAAC;YAClB,OAAO,YAAY,EAAE,CAAC;QACvB,CAAC;aAAM,CAAC;YACP,OAAO,oBAAC,OAAO,OAAG,CAAC;QACpB,CAAC;IACF,CAAC;IACD,OAAO,oBAAC,QAAQ,OAAK,aAAa,KAAM,gBAAgB,GAAI,CAAC;AAC9D,CAAC"}
|
|
@@ -10,13 +10,15 @@ export type ProperLinkControlSetting = LinkControlT.Setting & ({
|
|
|
10
10
|
export type ProperLinkControlProps = Omit<LinkControlProps, 'settings'> & {
|
|
11
11
|
label: string;
|
|
12
12
|
help?: string;
|
|
13
|
-
settings?: ProperLinkControlSetting[];
|
|
13
|
+
settings?: ProperLinkControlSetting[] | false;
|
|
14
14
|
};
|
|
15
15
|
export declare function ProperLinkControl(props: ProperLinkControlProps): React.JSX.Element;
|
|
16
16
|
export declare namespace ProperLinkControl {
|
|
17
17
|
var DEFAULT_LINK_SETTINGS: LinkControlT.Setting[];
|
|
18
|
+
var DUMMY_LINK_SETTINGS: LinkControlT.Setting[];
|
|
18
19
|
}
|
|
19
20
|
export interface ProperLinkControl {
|
|
20
21
|
(props: ProperLinkControlProps): ReactNode;
|
|
21
22
|
readonly DEFAULT_LINK_SETTINGS: ReadonlyArray<ProperLinkControlSetting>;
|
|
23
|
+
readonly DUMMY_LINK_SETTINGS: ReadonlyArray<LinkControlT.Setting>;
|
|
22
24
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { __experimentalLinkControl as LinkControl } from "@wordpress/block-editor";
|
|
2
2
|
import { BaseControl, Button, TextControl, ToggleControl } from "@wordpress/components";
|
|
3
|
-
import { useEffect, useRef, useState } from "@wordpress/element";
|
|
3
|
+
import { useCallback, useEffect, useRef, useState } from "@wordpress/element";
|
|
4
4
|
import { chevronDown, chevronUp } from "@wordpress/icons";
|
|
5
5
|
import React from "react";
|
|
6
6
|
export function ProperLinkControl(props) {
|
|
@@ -41,12 +41,16 @@ export function ProperLinkControl(props) {
|
|
|
41
41
|
window.requestAnimationFrame(() => advancedSettingsElement.style.maxHeight = "0px");
|
|
42
42
|
}
|
|
43
43
|
}, [areAdvancedSettingsVisible, advancedSettingsRef]);
|
|
44
|
+
const safeOnRemove = useCallback(() => onRemove !== undefined ? onRemove() : onChange(undefined), [onRemove, onChange]);
|
|
45
|
+
const renderableSettings = settings === false ? [] : settings;
|
|
46
|
+
const renderControlBottom = useCallback(() => (value?.url && renderableSettings?.length && React.createElement(React.Fragment, null,
|
|
47
|
+
React.createElement(Button, { variant: "tertiary", onClick: () => setAreAdvancedSettingsVisible(!areAdvancedSettingsVisible), icon: areAdvancedSettingsVisible ? chevronUp : chevronDown, iconPosition: "right", text: "Advanced" }),
|
|
48
|
+
React.createElement("div", { ref: advancedSettingsRef, style: { display: "none", transition: "max-height 200ms ease-in-out", overflow: "hidden" } }, ...renderableSettings.map(setting => React.createElement(ProperLinkControlSetting, { setting: setting, onChange: onChange, value: value }))))) || "", [value, settings, areAdvancedSettingsVisible, onChange]);
|
|
44
49
|
return React.createElement(BaseControl, { id: "", label: props.label, help: props.help },
|
|
45
|
-
React.createElement(LinkControl, { ...linkControlProps, value: value, onChange: onChange, onRemove:
|
|
46
|
-
React.createElement(Button, { variant: "tertiary", onClick: () => setAreAdvancedSettingsVisible(!areAdvancedSettingsVisible), icon: areAdvancedSettingsVisible ? chevronUp : chevronDown, iconPosition: "right", text: "Advanced" }),
|
|
47
|
-
React.createElement("div", { ref: advancedSettingsRef, style: { display: "none", transition: "max-height 200ms ease-in-out", overflow: "hidden" } }, ...settings.map(setting => React.createElement(ProperLinkControlSetting, { setting: setting, onChange: onChange, value: value }))))) || "" }));
|
|
50
|
+
React.createElement(LinkControl, { ...linkControlProps, value: value, onChange: onChange, onRemove: safeOnRemove, settings: ProperLinkControl.DUMMY_LINK_SETTINGS, renderControlBottom: renderControlBottom }));
|
|
48
51
|
}
|
|
49
52
|
ProperLinkControl.DEFAULT_LINK_SETTINGS = LinkControl.DEFAULT_LINK_SETTINGS;
|
|
53
|
+
ProperLinkControl.DUMMY_LINK_SETTINGS = [];
|
|
50
54
|
function ProperLinkControlSetting({ value, onChange, setting }) {
|
|
51
55
|
return React.createElement("div", { style: { marginTop: "8px" } }, setting.type === 'text'
|
|
52
56
|
? React.createElement(TextControl, { style: { marginTop: "8px" }, value: value?.[setting.id] ?? setting.default ?? '', label: setting.title, onChange: v => onChange({ ...value, [setting.id]: v }) })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProperLinkControl.js","sourceRoot":"","sources":["../../src/controls/ProperLinkControl.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,yBAAyB,IAAI,WAAW,EAAqD,MAAM,yBAAyB,CAAC;AACrI,OAAO,EAAC,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE,aAAa,EAAC,MAAM,uBAAuB,CAAC;AACtF,OAAO,EAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAC,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"ProperLinkControl.js","sourceRoot":"","sources":["../../src/controls/ProperLinkControl.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,yBAAyB,IAAI,WAAW,EAAqD,MAAM,yBAAyB,CAAC;AACrI,OAAO,EAAC,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE,aAAa,EAAC,MAAM,uBAAuB,CAAC;AACtF,OAAO,EAAC,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAC,MAAM,oBAAoB,CAAC;AAC5E,OAAO,EAAC,WAAW,EAAE,SAAS,EAAC,MAAM,kBAAkB,CAAC;AAExD,OAAO,KAAuB,MAAM,OAAO,CAAC;AAK5C,MAAM,UAAU,iBAAiB,CAAC,KAA6B;IAC9D,MAAM,EAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAC5C,QAAQ,GAAG,iBAAiB,CAAC,qBAAqB,EAAE,GAAG,gBAAgB,EAAC,GAAG,KAAK,CAAC;IAClF,MAAM,CAAC,0BAA0B,EAAE,6BAA6B,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpF,MAAM,mBAAmB,GAAG,MAAM,CAAsB,IAAI,CAAC,CAAC;IAE9D,SAAS,CAAC,GAAG,EAAE;QACd,MAAM,uBAAuB,GAAG,mBAAmB,CAAC,OAAO,CAAC;QAC5D,IAAI,CAAC,uBAAuB,EAAE,CAAC;YAC9B,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;QACjB,CAAC;QACD,MAAM,kBAAkB,GAAG,CAAC,GAAoB,EAAE,EAAE;YACnD,IAAI,GAAG,CAAC,YAAY,KAAK,YAAY,IAAI,GAAG,CAAC,MAAM,KAAK,uBAAuB,EAAE,CAAC;gBACjF,IAAI,uBAAuB,CAAC,KAAK,CAAC,SAAS,KAAK,KAAK,EAAE,CAAC;oBACvD,uBAAuB,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;gBAChD,CAAC;qBAAM,CAAC;oBACP,uBAAuB,CAAC,KAAK,CAAC,SAAS,GAAG,EAAE,CAAC;gBAC9C,CAAC;YACF,CAAC;QACF,CAAC,CAAC;QACF,uBAAuB,CAAC,gBAAgB,CAAC,eAAe,EAAE,kBAAkB,CAAC,CAAC;QAC9E,OAAO,GAAG,EAAE,CAAC,uBAAuB,CAAC,gBAAgB,CAAC,eAAe,EAAE,kBAAkB,CAAC,CAAC;IAC5F,CAAC,EAAE,CAAC,mBAAmB,CAAC,CAAC,CAAC;IAE1B,SAAS,CAAC,GAAG,EAAE;QACd,MAAM,uBAAuB,GAAG,mBAAmB,CAAC,OAAO,CAAC;QAC5D,IAAI,CAAC,uBAAuB,EAAE,CAAC;YAC9B,OAAO;QACR,CAAC;QACD,IAAI,0BAA0B,EAAE,CAAC;YAChC,uBAAuB,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC;YAC3C,uBAAuB,CAAC,KAAK,CAAC,SAAS,GAAG,uBAAuB,CAAC,YAAY,GAAG,IAAI,CAAC;QACvF,CAAC;aAAM,CAAC;YACP,uBAAuB,CAAC,KAAK,CAAC,SAAS,GAAG,uBAAuB,CAAC,YAAY,GAAG,IAAI,CAAC;YACtF,+GAA+G;YAC/G,yIAAyI;YACzI,MAAM,CAAC,qBAAqB,CAAC,GAAG,EAAE,CAAC,uBAAuB,CAAC,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,CAAC;QACrF,CAAC;IACF,CAAC,EAAE,CAAC,0BAA0B,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAEtD,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;IAExH,MAAM,kBAAkB,GAAG,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC;IAC9D,MAAM,mBAAmB,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,CAAC,KAAK,EAAE,GAAG,IAAI,kBAAkB,EAAE,MAAM,IAAI;QAC1F,oBAAC,MAAM,IAAC,OAAO,EAAC,UAAU,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,6BAA6B,CAAC,CAAC,0BAA0B,CAAC,EAC5F,IAAI,EAAE,0BAA0B,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,EAAE,YAAY,EAAC,OAAO,EAAC,IAAI,EAAC,UAAU,GACtG;QACF,6BAAK,GAAG,EAAE,mBAAmB,EAAE,KAAK,EAAE,EAAC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,8BAA8B,EAAE,QAAQ,EAAE,QAAQ,EAAC,OAClH,kBAAkB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,oBAAC,wBAAwB,IAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC,CAClH,CACJ,CAAC,IAAI,EAAE,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,0BAA0B,EAAE,QAAQ,CAAC,CAAC,CAAC;IAErE,OAAO,oBAAC,WAAW,IAAC,EAAE,EAAC,EAAE,EAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI;QAC7D,oBAAC,WAAW,OACP,gBAAgB,EACpB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,iBAAiB,CAAC,mBAAmB,EAC/C,mBAAmB,EAAE,mBAAmB,GACvC,CACW,CAAA;AACf,CAAC;AACD,iBAAiB,CAAC,qBAAqB,GAAG,WAAW,CAAC,qBAAqB,CAAC;AAC5E,iBAAiB,CAAC,mBAAmB,GAAG,EAA4B,CAAC;AASrE,SAAS,wBAAwB,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAgC;IAC1F,OAAO,6BAAK,KAAK,EAAE,EAAC,SAAS,EAAE,KAAK,EAAC,IACnC,OAAO,CAAC,IAAI,KAAK,MAAM;QACvB,CAAC,CAAC,oBAAC,WAAW,IAAC,KAAK,EAAE,EAAC,SAAS,EAAE,KAAK,EAAC,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,OAAO,CAAC,OAAO,IAAI,EAAE,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,EACpG,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAC,GAAG,KAAK,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,EAAC,CAAC,GAAI;QACvE,CAAC,CAAC,oBAAC,aAAa,IAAC,KAAK,EAAE,EAAC,SAAS,EAAE,KAAK,EAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,OAAO,CAAC,OAAO,IAAI,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,EACzG,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAC,GAAG,KAAK,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,EAAC,CAAC,GAAI,CAErE,CAAC;AACR,CAAC"}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { ToggleControl } from "@wordpress/components";
|
|
2
|
+
import { useCallback } from "@wordpress/element";
|
|
2
3
|
import React from "react";
|
|
3
4
|
export function SimpleToggle(props) {
|
|
4
|
-
|
|
5
|
+
const onChange = useCallback((checked) => props.setAttributes({ [props.attribute]: checked }), [props.setAttributes, props.attribute]);
|
|
6
|
+
return React.createElement(ToggleControl, { checked: props.attributes[props.attribute], label: props.label, onChange: onChange });
|
|
5
7
|
}
|
|
6
8
|
//# sourceMappingURL=SimpleToggle.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SimpleToggle.js","sourceRoot":"","sources":["../../src/controls/SimpleToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,aAAa,EAAC,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"SimpleToggle.js","sourceRoot":"","sources":["../../src/controls/SimpleToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,aAAa,EAAC,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAC,WAAW,EAAC,MAAM,oBAAoB,CAAC;AAI/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,UAAU,YAAY,CAAmB,KAA0C;IACxF,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,OAAgB,EAAE,EAAE,CAAC,KAAK,CAAC,aAAa,CAAC,EAAC,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,OAAO,EAAC,CAAC,EAAE,CAAC,KAAK,CAAC,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IAC9I,OAAO,oBAAC,aAAa,IAAC,OAAO,EAAE,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC;AAC9G,CAAC"}
|
|
@@ -1,67 +1,19 @@
|
|
|
1
1
|
import { BaseControl, Button, Icon, useBaseControlProps } from "@wordpress/components";
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
2
|
+
import { useMemo } from "@wordpress/element";
|
|
3
|
+
import { useDragHandler } from "./hooks/useDragHandler";
|
|
4
|
+
import React, { useCallback } from "react";
|
|
4
5
|
export function SortableItemsControl({ value = [], onChange, onRemove, onReorder, onAdd, children: makeChild, emptyValue, min, max, ...wrapperProps }) {
|
|
5
|
-
const
|
|
6
|
-
const [dragging, setDragging] = useState(null);
|
|
7
|
-
const [dropZone, setDropZone] = useState(null);
|
|
8
|
-
const [mouse, setMouse] = useState([0, 0]);
|
|
9
|
-
useEffect(() => {
|
|
10
|
-
if (dragging !== null) {
|
|
11
|
-
const handler = (event) => setMouse([event.x, event.y]);
|
|
12
|
-
document.addEventListener('mousemove', handler);
|
|
13
|
-
return () => document.removeEventListener('mousemove', handler);
|
|
14
|
-
}
|
|
15
|
-
return () => { };
|
|
16
|
-
}, [dragging]);
|
|
17
|
-
useEffect(() => {
|
|
18
|
-
if (dragging !== null && containerRef.current) {
|
|
19
|
-
const result = Array.from(containerRef.current.querySelectorAll(".drop-zone"))
|
|
20
|
-
.map(e => [parseInt(e.getAttribute("data-position")), Math.abs(e.getBoundingClientRect().y - mouse[1]), e])
|
|
21
|
-
.reduce((a, b) => {
|
|
22
|
-
if (a[2].classList.contains("dragging")) {
|
|
23
|
-
return b;
|
|
24
|
-
}
|
|
25
|
-
else if (b[2].classList.contains("dragging")) {
|
|
26
|
-
return a;
|
|
27
|
-
}
|
|
28
|
-
else if (b[1] < a[1]) {
|
|
29
|
-
return b;
|
|
30
|
-
}
|
|
31
|
-
return a;
|
|
32
|
-
})[0];
|
|
33
|
-
setDropZone(result);
|
|
34
|
-
}
|
|
35
|
-
}, [dragging, mouse]);
|
|
36
|
-
useEffect(() => {
|
|
37
|
-
if (dragging === null) {
|
|
38
|
-
return () => { };
|
|
39
|
-
}
|
|
40
|
-
const handler = (e) => {
|
|
41
|
-
e.preventDefault();
|
|
42
|
-
onDragEnd(dragging);
|
|
43
|
-
};
|
|
44
|
-
document.addEventListener('mouseup', handler);
|
|
45
|
-
return () => document.removeEventListener('mouseup', handler);
|
|
46
|
-
}, [dragging, dropZone]);
|
|
47
|
-
const onChangeByIndex = (datum, index) => {
|
|
6
|
+
const onChangeByIndex = useCallback((datum, index) => {
|
|
48
7
|
const newValue = [...value];
|
|
49
8
|
newValue[index] = datum;
|
|
50
9
|
onChange(newValue);
|
|
51
|
-
};
|
|
52
|
-
const removeByIndex = (index) => {
|
|
10
|
+
}, [onChange, value]);
|
|
11
|
+
const removeByIndex = useCallback((index) => {
|
|
53
12
|
const newValue = value.filter((_, i) => i !== index);
|
|
54
13
|
onRemove?.(index);
|
|
55
14
|
onChange(newValue);
|
|
56
|
-
};
|
|
57
|
-
const
|
|
58
|
-
if (dropZone !== null) {
|
|
59
|
-
transferByIndex(oldIndex, dropZone);
|
|
60
|
-
}
|
|
61
|
-
setDragging(null);
|
|
62
|
-
setDropZone(null);
|
|
63
|
-
};
|
|
64
|
-
const transferByIndex = (oldIndex, newIndex) => {
|
|
15
|
+
}, [onRemove, onChange, value]);
|
|
16
|
+
const transferByIndex = useCallback((oldIndex, newIndex) => {
|
|
65
17
|
if (newIndex !== oldIndex) {
|
|
66
18
|
const splicedValue = [...value];
|
|
67
19
|
if (newIndex > oldIndex) {
|
|
@@ -76,30 +28,39 @@ export function SortableItemsControl({ value = [], onChange, onRemove, onReorder
|
|
|
76
28
|
splicedValue.splice(changesStart, splicedValue.length, ...splicedValue.slice(changesStart).map(v => clone(v)));
|
|
77
29
|
onChange(splicedValue);
|
|
78
30
|
}
|
|
79
|
-
};
|
|
31
|
+
}, [onReorder, onChange, value]);
|
|
32
|
+
const addClickHandler = useCallback(() => {
|
|
33
|
+
const newValue = [...value, emptyValue];
|
|
34
|
+
onAdd?.(value?.length ?? 0);
|
|
35
|
+
onChange(newValue);
|
|
36
|
+
}, [value, emptyValue, onAdd, onChange]);
|
|
37
|
+
const { containerRef, dragging, dropZone, mouse, setMouse, setDragging } = useDragHandler(transferByIndex);
|
|
80
38
|
const removeDisabled = min !== undefined && value.length <= min;
|
|
81
39
|
const { baseControlProps, controlProps } = useBaseControlProps(wrapperProps);
|
|
82
40
|
return React.createElement(BaseControl, { ...baseControlProps },
|
|
83
41
|
React.createElement("div", { ...controlProps, className: "plaudit-sortable-items-container", ref: containerRef },
|
|
84
|
-
...value.map((datum, index) => React.createElement(
|
|
85
|
-
React.createElement(SortableItemsDropZone, { position: index, dragging: dragging, dropZone: dropZone }),
|
|
86
|
-
React.createElement("div", { className: `plaudit-sortable-items-row${dragging === index ? " floating" : ""}`, "data-index": index, style: dragging === index ? { top: `${mouse[1]}px`, left: `${mouse[0]}px` } : {} },
|
|
87
|
-
React.createElement("div", { className: "plaudit-sortable-items-drag-handle", onMouseDown: e => {
|
|
88
|
-
e.preventDefault();
|
|
89
|
-
setDragging(index);
|
|
90
|
-
setMouse([e.nativeEvent.x, e.nativeEvent.y]);
|
|
91
|
-
} },
|
|
92
|
-
React.createElement(Icon, { icon: "move" })),
|
|
93
|
-
React.createElement("div", null, makeChild(datum, datum => onChangeByIndex(datum, index), index)),
|
|
94
|
-
React.createElement("div", { className: "plaudit-sortable-items-controls" },
|
|
95
|
-
React.createElement(Button, { icon: "remove", disabled: removeDisabled, onClick: () => removeByIndex(index), "aria-label": "Remove" }))))),
|
|
42
|
+
...value.map((datum, index) => React.createElement(SortableItemsListNode, { datum: datum, dragging: dragging, dropZone: dropZone, index: index, makeChild: makeChild, mouse: mouse, onChangeByIndex: onChangeByIndex, removeByIndex: removeByIndex, removeDisabled: removeDisabled, setDragging: setDragging, setMouse: setMouse })),
|
|
96
43
|
React.createElement(SortableItemsDropZone, { position: value.length, dragging: dragging, dropZone: dropZone })),
|
|
97
44
|
React.createElement("div", { className: "plaudit-sortable-items-buttons" },
|
|
98
|
-
React.createElement(Button, { icon: "insert", disabled: max !== undefined && value.length >= max, onClick:
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
45
|
+
React.createElement(Button, { icon: "insert", disabled: max !== undefined && value.length >= max, onClick: addClickHandler }, "Add Row")));
|
|
46
|
+
}
|
|
47
|
+
function SortableItemsListNode({ datum, dragging, dropZone, index, makeChild, mouse, onChangeByIndex, removeByIndex, removeDisabled, setDragging, setMouse }) {
|
|
48
|
+
const dragHandleMouseDownHandler = useCallback((e) => {
|
|
49
|
+
e.preventDefault();
|
|
50
|
+
setDragging(index);
|
|
51
|
+
setMouse([e.nativeEvent.x, e.nativeEvent.y]);
|
|
52
|
+
}, [index]);
|
|
53
|
+
const removeClickHandler = useCallback(() => removeByIndex(index), [index, removeByIndex]);
|
|
54
|
+
const safeOnChangeListener = useCallback((newDatum) => onChangeByIndex(newDatum, index), [index]);
|
|
55
|
+
const style = useMemo(() => dragging === index ? { top: `${mouse[1]}px`, left: `${mouse[0]}px` } : undefined, [dragging, index, mouse]);
|
|
56
|
+
return React.createElement(React.Fragment, null,
|
|
57
|
+
React.createElement(SortableItemsDropZone, { position: index, dragging: dragging, dropZone: dropZone }),
|
|
58
|
+
React.createElement("div", { className: `plaudit-sortable-items-row${dragging === index ? " floating" : ""}`, "data-index": index, style: style },
|
|
59
|
+
React.createElement("div", { className: "plaudit-sortable-items-drag-handle", onMouseDown: dragHandleMouseDownHandler },
|
|
60
|
+
React.createElement(Icon, { icon: "move" })),
|
|
61
|
+
React.createElement("div", null, makeChild(datum, safeOnChangeListener, index)),
|
|
62
|
+
React.createElement("div", { className: "plaudit-sortable-items-controls" },
|
|
63
|
+
React.createElement(Button, { icon: "remove", disabled: removeDisabled, onClick: removeClickHandler, "aria-label": "Remove" }))));
|
|
103
64
|
}
|
|
104
65
|
function SortableItemsDropZone(props) {
|
|
105
66
|
return React.createElement("div", { "data-position": props.position, className: `drop-zone${props.dragging === null || props.position !== props.dropZone ? " plaudit-sortable-items-hidden" : ""}${props.position - 1 === props.dragging ? " dragging" : ""}` });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SortableItemsControl.js","sourceRoot":"","sources":["../../src/controls/SortableItemsControl.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAErF,OAAO,EAAC,
|
|
1
|
+
{"version":3,"file":"SortableItemsControl.js","sourceRoot":"","sources":["../../src/controls/SortableItemsControl.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare function useDragHandler(transferByIndex: (oldIndex: number, newIndex: number) => void): {
|
|
3
|
+
containerRef: import("react").MutableRefObject<HTMLDivElement | null>;
|
|
4
|
+
dragging: number | null;
|
|
5
|
+
dropZone: number | null;
|
|
6
|
+
mouse: [number, number];
|
|
7
|
+
setMouse: import("react").Dispatch<[number, number]>;
|
|
8
|
+
setDragging: import("react").Dispatch<import("react").SetStateAction<number | null>>;
|
|
9
|
+
};
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { useEffect, useRef, useState } from "@wordpress/element";
|
|
2
|
+
import { useReducer } from "react";
|
|
3
|
+
export function useDragHandler(transferByIndex) {
|
|
4
|
+
const containerRef = useRef(null);
|
|
5
|
+
const [dragging, setDragging] = useState(null);
|
|
6
|
+
const [dropZone, setDropZone] = useState(null);
|
|
7
|
+
const [mouse, setMouse] = useReducer((pairUpdateMinimizer), [0, 0]);
|
|
8
|
+
useEffect(() => {
|
|
9
|
+
if (dragging !== null) {
|
|
10
|
+
const handler = (event) => setMouse([event.x, event.y]);
|
|
11
|
+
document.addEventListener('mousemove', handler);
|
|
12
|
+
return () => document.removeEventListener('mousemove', handler);
|
|
13
|
+
}
|
|
14
|
+
return () => { };
|
|
15
|
+
}, [dragging]);
|
|
16
|
+
useEffect(() => {
|
|
17
|
+
if (dragging !== null && containerRef.current) {
|
|
18
|
+
const result = Array.from(containerRef.current.querySelectorAll(".drop-zone"))
|
|
19
|
+
.map(e => [parseInt(e.getAttribute("data-position")), Math.abs(e.getBoundingClientRect().y - mouse[1]), e])
|
|
20
|
+
.reduce((a, b) => {
|
|
21
|
+
if (a[2].classList.contains("dragging")) {
|
|
22
|
+
return b;
|
|
23
|
+
}
|
|
24
|
+
else if (b[2].classList.contains("dragging")) {
|
|
25
|
+
return a;
|
|
26
|
+
}
|
|
27
|
+
else if (b[1] < a[1]) {
|
|
28
|
+
return b;
|
|
29
|
+
}
|
|
30
|
+
return a;
|
|
31
|
+
})[0];
|
|
32
|
+
setDropZone(result);
|
|
33
|
+
}
|
|
34
|
+
}, [dragging, mouse]);
|
|
35
|
+
useEffect(() => {
|
|
36
|
+
if (dragging === null) {
|
|
37
|
+
return () => { };
|
|
38
|
+
}
|
|
39
|
+
const handler = (e) => {
|
|
40
|
+
e.preventDefault();
|
|
41
|
+
if (dropZone !== null) {
|
|
42
|
+
transferByIndex(dragging, dropZone);
|
|
43
|
+
}
|
|
44
|
+
setDragging(null);
|
|
45
|
+
setDropZone(null);
|
|
46
|
+
};
|
|
47
|
+
document.addEventListener('mouseup', handler);
|
|
48
|
+
return () => document.removeEventListener('mouseup', handler);
|
|
49
|
+
}, [dragging, dropZone]);
|
|
50
|
+
return { containerRef, dragging, dropZone, mouse, setMouse, setDragging };
|
|
51
|
+
}
|
|
52
|
+
function pairUpdateMinimizer(current, next) {
|
|
53
|
+
return current[0] !== next[0] || current[1] !== next[1] ? next : current;
|
|
54
|
+
}
|
|
55
|
+
//# sourceMappingURL=useDragHandler.js.map
|