profectus/Profectus
Template
1
0
Fork 4
Code Issues 38 Pull requests 6 Projects 2 Releases Packages Wiki Activity Actions

Using getFirstFeature and Collapsible won't re-render each frame

Browse source
This commit is contained in:
thepaperpilot 2022-05-22 12:13:47 -05:00
parent 7db806afc6
commit d650cda84f
2 changed files with 15 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/layout/Collapsible.vue
View file

@ -9,8 +9,8 @@
<script setup lang="ts">
import { CoercableComponent } from "features/feature";
import { coerceComponent } from "util/vue";
import { computed, Ref } from "vue";
import { computeComponent } from "util/vue";
import { Ref, toRef } from "vue";
import Col from "./Column.vue";
const props = defineProps<{
@ -19,8 +19,8 @@ const props = defineProps<{
content: CoercableComponent;
}>();
const displayComponent = computed(() => coerceComponent(props.display));
const contentComponent = computed(() => coerceComponent(props.content));
const displayComponent = computeComponent(toRef(props, "display"));
const contentComponent = computeComponent(toRef(props, "content"));
</script>
<style scoped>

14
src/util/vue.tsx
View file

@ -5,6 +5,7 @@ import {
Component as ComponentKey,
GatherProps,
GenericComponent,
jsx,
JSXFunction,
Visibility
} from "features/feature";
@ -146,10 +147,16 @@ export function setupHoldToClick(
return { start, stop, handleHolding };
}
export function getFirstFeature<T extends { visibility: ProcessedComputable<Visibility> }>(
export function getFirstFeature<
T extends VueFeature & { visibility: ProcessedComputable<Visibility> }
>(
features: T[],
filter: (feature: T) => boolean
): { firstFeature: Ref<T | undefined>; hiddenFeatures: Ref<T[]> } {
): {
firstFeature: Ref<T | undefined>;
collapsedContent: JSXFunction;
hasCollapsedContent: Ref<boolean>;
} {
const filteredFeatures = computed(() =>
features.filter(
feature => unref(feature.visibility) === Visibility.Visible && filter(feature)
@ -157,7 +164,8 @@ export function getFirstFeature<T extends { visibility: ProcessedComputable<Visi
);
return {
firstFeature: computed(() => filteredFeatures.value[0]),
hiddenFeatures: computed(() => filteredFeatures.value.slice(1))
collapsedContent: jsx(() => renderCol(...filteredFeatures.value.slice(1))),
hasCollapsedContent: computed(() => filteredFeatures.value.length > 1)
};
}