filipkopyt14/Profectus
1
0
Fork 0
forked from profectus/Profectus
Code Pull requests Releases 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"> <script setup lang="ts">
import { CoercableComponent } from "features/feature"; import { CoercableComponent } from "features/feature";
import { coerceComponent } from "util/vue"; import { computeComponent } from "util/vue";
import { computed, Ref } from "vue"; import { Ref, toRef } from "vue";
import Col from "./Column.vue"; import Col from "./Column.vue";
const props = defineProps<{ const props = defineProps<{
@ -19,8 +19,8 @@ const props = defineProps<{
content: CoercableComponent; content: CoercableComponent;
}>(); }>();
const displayComponent = computed(() => coerceComponent(props.display)); const displayComponent = computeComponent(toRef(props, "display"));
const contentComponent = computed(() => coerceComponent(props.content)); const contentComponent = computeComponent(toRef(props, "content"));
</script> </script>
<style scoped> <style scoped>

14
src/util/vue.tsx
View file

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