web/satellite: VBar, VBanner migrated to use composition api
composables folder created (same as react hooks) for functionality reusage; related test moved to ignored folder; Change-Id: I494aa27079aa5694bee7b18511eeadd56ced59e9
This commit is contained in:
parent
870eefbb5d
commit
235e9be208
@ -17,62 +17,61 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import { Component, Prop, Watch } from 'vue-property-decorator';
|
import { computed, onMounted, onUnmounted, reactive, ref, watch } from 'vue';
|
||||||
|
|
||||||
import Resizable from '@/components/common/Resizable.vue';
|
import { useResize } from '@/composables/resize';
|
||||||
|
|
||||||
import InfoIcon from '@/../static/images/notifications/info.svg';
|
import InfoIcon from '@/../static/images/notifications/info.svg';
|
||||||
import CloseIcon from '@/../static/images/notifications/closeSmall.svg';
|
import CloseIcon from '@/../static/images/notifications/closeSmall.svg';
|
||||||
|
|
||||||
// @vue/component
|
const props = withDefaults(defineProps<{
|
||||||
@Component({
|
severity?: 'info' | 'warning' | 'critical';
|
||||||
components: {
|
onClick?: () => void;
|
||||||
CloseIcon,
|
dashboardRef?: HTMLElement;
|
||||||
InfoIcon,
|
}>(), {
|
||||||
},
|
severity: 'info',
|
||||||
})
|
onClick: () => () => {},
|
||||||
export default class VBanner extends Resizable {
|
dashboardRef: () => {},
|
||||||
@Prop({ default: 'info' })
|
});
|
||||||
private readonly severity: 'info' | 'warning' | 'critical';
|
|
||||||
@Prop({ default: () => () => {} })
|
|
||||||
public readonly onClick: () => void;
|
|
||||||
@Prop({ default: () => {} })
|
|
||||||
private readonly dashboardRef: HTMLElement;
|
|
||||||
|
|
||||||
public isShown = true;
|
const { isMobile } = useResize();
|
||||||
public bannerWidth = 0;
|
|
||||||
public resizeObserver?: ResizeObserver;
|
|
||||||
|
|
||||||
public mounted(): void {
|
const isShown = ref<boolean>(true);
|
||||||
this.resizeObserver = new ResizeObserver(this.onBannerResize);
|
const bannerWidth = ref<number>(0);
|
||||||
|
let resizeObserver = reactive<ResizeObserver>();
|
||||||
|
|
||||||
if (this.dashboardRef) {
|
const bannerStyle = computed((): string => {
|
||||||
this.resizeObserver?.observe(this.dashboardRef);
|
const margin = isMobile.value ? 30 : 60;
|
||||||
this.onBannerResize();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
public beforeUnmount(): void {
|
return `width: ${bannerWidth.value - margin}px`;
|
||||||
this.resizeObserver?.unobserve(this.dashboardRef);
|
});
|
||||||
}
|
|
||||||
|
|
||||||
@Watch('dashboardRef')
|
function onBannerResize(): void {
|
||||||
public setResizable(): void {
|
bannerWidth.value = props.dashboardRef.offsetWidth;
|
||||||
this.resizeObserver?.observe(this.dashboardRef);
|
|
||||||
}
|
|
||||||
|
|
||||||
@Watch('dashboardRef')
|
|
||||||
public onBannerResize(): void {
|
|
||||||
this.bannerWidth = this.dashboardRef.offsetWidth;
|
|
||||||
}
|
|
||||||
|
|
||||||
public get bannerStyle(): string {
|
|
||||||
const margin = this.isMobile ? 30 : 60;
|
|
||||||
|
|
||||||
return `width: ${this.bannerWidth - margin}px`;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function setResizable(): void {
|
||||||
|
resizeObserver?.observe(props.dashboardRef);
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted((): void => {
|
||||||
|
resizeObserver = new ResizeObserver(onBannerResize);
|
||||||
|
|
||||||
|
if (props.dashboardRef) {
|
||||||
|
setResizable();
|
||||||
|
onBannerResize();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted((): void => {
|
||||||
|
resizeObserver?.unobserve(props.dashboardRef);
|
||||||
|
});
|
||||||
|
|
||||||
|
watch(() => props.dashboardRef, () => {
|
||||||
|
setResizable();
|
||||||
|
onBannerResize();
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
@ -7,8 +7,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
import { computed } from 'vue';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* BarFillStyle class holds info for BarFillStyle entity.
|
* BarFillStyle class holds info for BarFillStyle entity.
|
||||||
@ -23,26 +23,25 @@ class BarFillStyle {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// @vue/component
|
const props = withDefaults(defineProps<{
|
||||||
@Component
|
current?: number;
|
||||||
export default class VBar extends Vue {
|
max?: number;
|
||||||
@Prop({ default: 0 })
|
color?: string;
|
||||||
private readonly current: number;
|
}>(), {
|
||||||
@Prop({ default: 0 })
|
current: 0,
|
||||||
private readonly max: number;
|
max: 0,
|
||||||
@Prop({ default: '#0068DC' })
|
color: '#0068DC',
|
||||||
private readonly color: string;
|
});
|
||||||
|
|
||||||
public get barFillStyle(): BarFillStyle {
|
const barFillStyle = computed((): BarFillStyle => {
|
||||||
if (this.current > this.max) {
|
if (props.current > props.max) {
|
||||||
return new BarFillStyle(this.color, '100%');
|
return new BarFillStyle(props.color, '100%');
|
||||||
}
|
|
||||||
|
|
||||||
const width = (this.current / this.max) * 100 + '%';
|
|
||||||
|
|
||||||
return new BarFillStyle(this.color, width);
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
const width = (props.current / props.max) * 100 + '%';
|
||||||
|
|
||||||
|
return new BarFillStyle(props.color, width);
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
37
web/satellite/src/composables/resize.ts
Normal file
37
web/satellite/src/composables/resize.ts
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
// Copyright (C) 2022 Storj Labs, Inc.
|
||||||
|
// See LICENSE for copying information.
|
||||||
|
|
||||||
|
import { computed, onMounted, onUnmounted, ref } from 'vue';
|
||||||
|
|
||||||
|
export function useResize() {
|
||||||
|
const screenWidth = ref<number>(window.innerWidth);
|
||||||
|
const screenHeight = ref<number>(window.innerHeight);
|
||||||
|
|
||||||
|
const isMobile = computed((): boolean => {
|
||||||
|
return screenWidth.value <= 550;
|
||||||
|
});
|
||||||
|
|
||||||
|
const isTablet = computed((): boolean => {
|
||||||
|
return !isMobile.value && screenWidth.value <= 800;
|
||||||
|
});
|
||||||
|
|
||||||
|
function onResize(): void {
|
||||||
|
screenWidth.value = window.innerWidth;
|
||||||
|
screenHeight.value = window.innerHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted((): void => {
|
||||||
|
window.addEventListener('resize', onResize);
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted((): void => {
|
||||||
|
window.removeEventListener('resize', onResize);
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
screenWidth,
|
||||||
|
screenHeight,
|
||||||
|
isMobile,
|
||||||
|
isTablet,
|
||||||
|
};
|
||||||
|
}
|
@ -1,13 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`VBar.vue renders correctly 1`] = `
|
|
||||||
<div class="bar-container">
|
|
||||||
<div class="bar-container__fill" style="background-color: rgb(0, 104, 220); width: 50%;"></div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`VBar.vue renders correctly if current > max 1`] = `
|
|
||||||
<div class="bar-container">
|
|
||||||
<div class="bar-container__fill" style="background-color: rgb(0, 104, 220); width: 100%;"></div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
Loading…
Reference in New Issue
Block a user