profectus/TMT-Demo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added events to onClick

Browse source
This commit is contained in:
thepaperpilot 2022-03-27 00:14:35 -05:00
parent 79db99fa9c
commit b31d43653d
7 changed files with 15 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/features/clickables/Clickable.vue
View file

@ -67,7 +67,7 @@ export default defineComponent({
}, },
style: processedPropType<StyleValue>(Object, String, Array), style: processedPropType<StyleValue>(Object, String, Array),
classes: processedPropType<Record<string, boolean>>(Object), classes: processedPropType<Record<string, boolean>>(Object),
onClick: Function as PropType<VoidFunction>, onClick: Function as PropType<(e?: MouseEvent | TouchEvent) => void>,
onHold: Function as PropType<VoidFunction>, onHold: Function as PropType<VoidFunction>,
canClick: { canClick: {
type: processedPropType<boolean>(Boolean), type: processedPropType<boolean>(Boolean),

6
src/features/clickables/clickable.ts
View file

@ -37,7 +37,7 @@ export interface ClickableOptions {
} }
>; >;
small?: boolean; small?: boolean;
onClick?: VoidFunction; onClick?: (e?: MouseEvent | TouchEvent) => void;
onHold?: VoidFunction; onHold?: VoidFunction;
} }
@ -88,9 +88,9 @@ export function createClickable<T extends ClickableOptions>(
if (clickable.onClick) { if (clickable.onClick) {
const onClick = clickable.onClick.bind(clickable); const onClick = clickable.onClick.bind(clickable);
clickable.onClick = function () { clickable.onClick = function (e) {
if (unref(clickable.canClick)) { if (unref(clickable.canClick)) {
onClick(); onClick(e);
} }
}; };
} }

2
src/features/grids/GridCell.vue
View file

@ -40,7 +40,7 @@ export default defineComponent({
type: processedPropType<Visibility>(Number), type: processedPropType<Visibility>(Number),
required: true required: true
}, },
onClick: Function as PropType<VoidFunction>, onClick: Function as PropType<(e?: MouseEvent | TouchEvent) => void>,
onHold: Function as PropType<VoidFunction>, onHold: Function as PropType<VoidFunction>,
display: { display: {
type: processedPropType<CoercableComponent>(Object, String, Function), type: processedPropType<CoercableComponent>(Object, String, Function),

4
src/features/grids/grid.ts
View file

@ -185,7 +185,7 @@ export interface GridCell {
classes?: Record<string, boolean>; classes?: Record<string, boolean>;
title?: CoercableComponent; title?: CoercableComponent;
display: CoercableComponent; display: CoercableComponent;
onClick?: VoidFunction; onClick?: (e?: MouseEvent | TouchEvent) => void;
onHold?: VoidFunction; onHold?: VoidFunction;
} }
@ -200,7 +200,7 @@ export interface GridOptions {
getClasses?: CellComputable<Record<string, boolean>>; getClasses?: CellComputable<Record<string, boolean>>;
getTitle?: CellComputable<CoercableComponent>; getTitle?: CellComputable<CoercableComponent>;
getDisplay: CellComputable<CoercableComponent>; getDisplay: CellComputable<CoercableComponent>;
onClick?: (id: string | number, state: State) => void; onClick?: (id: string | number, state: State, e?: MouseEvent | TouchEvent) => void;
onHold?: (id: string | number, state: State) => void; onHold?: (id: string | number, state: State) => void;
} }

2
src/features/trees/TreeNode.vue
View file

@ -72,7 +72,7 @@ export default defineComponent({
style: processedPropType<StyleValue>(String, Object, Array), style: processedPropType<StyleValue>(String, Object, Array),
classes: processedPropType<Record<string, boolean>>(Object), classes: processedPropType<Record<string, boolean>>(Object),
tooltip: processedPropType<CoercableComponent | Tooltip>(Object, String, Function), tooltip: processedPropType<CoercableComponent | Tooltip>(Object, String, Function),
onClick: Function as PropType<VoidFunction>, onClick: Function as PropType<(e?: MouseEvent | TouchEvent) => void>,
onHold: Function as PropType<VoidFunction>, onHold: Function as PropType<VoidFunction>,
color: processedPropType<string>(String), color: processedPropType<string>(String),
glowColor: processedPropType<string>(String), glowColor: processedPropType<string>(String),

2
src/features/trees/tree.ts
View file

@ -40,7 +40,7 @@ export interface TreeNodeOptions {
style?: Computable<StyleValue>; style?: Computable<StyleValue>;
mark?: Computable<boolean | string>; mark?: Computable<boolean | string>;
reset?: GenericReset; reset?: GenericReset;
onClick?: VoidFunction; onClick?: (e?: MouseEvent | TouchEvent) => void;
onHold?: VoidFunction; onHold?: VoidFunction;
} }

10
src/util/vue.tsx
View file

@ -86,19 +86,21 @@ export function isCoercableComponent(component: unknown): component is Coercable
} }
export function setupHoldToClick( export function setupHoldToClick(
onClick?: Ref<VoidFunction | undefined>, onClick?: Ref<((e?: MouseEvent | TouchEvent) => void) | undefined>,
onHold?: Ref<VoidFunction | undefined> onHold?: Ref<VoidFunction | undefined>
): { ): {
start: VoidFunction; start: (e: MouseEvent | TouchEvent) => void;
stop: VoidFunction; stop: VoidFunction;
handleHolding: VoidFunction; handleHolding: VoidFunction;
} { } {
const interval = ref<null | number>(null); const interval = ref<null | number>(null);
const event = ref<MouseEvent | TouchEvent | undefined>(undefined);
function start() { function start(e: MouseEvent | TouchEvent) {
if (!interval.value) { if (!interval.value) {
interval.value = setInterval(handleHolding, 250); interval.value = setInterval(handleHolding, 250);
} }
event.value = e;
} }
function stop() { function stop() {
if (interval.value) { if (interval.value) {
@ -110,7 +112,7 @@ export function setupHoldToClick(
if (onHold && onHold.value) { if (onHold && onHold.value) {
onHold.value(); onHold.value();
} else if (onClick && onClick.value) { } else if (onClick && onClick.value) {
onClick.value(); onClick.value(event.value);
} }
} }