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>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Watch } from 'vue-property-decorator';
|
||||
<script setup lang="ts">
|
||||
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 CloseIcon from '@/../static/images/notifications/closeSmall.svg';
|
||||
|
||||
// @vue/component
|
||||
@Component({
|
||||
components: {
|
||||
CloseIcon,
|
||||
InfoIcon,
|
||||
},
|
||||
})
|
||||
export default class VBanner extends Resizable {
|
||||
@Prop({ default: 'info' })
|
||||
private readonly severity: 'info' | 'warning' | 'critical';
|
||||
@Prop({ default: () => () => {} })
|
||||
public readonly onClick: () => void;
|
||||
@Prop({ default: () => {} })
|
||||
private readonly dashboardRef: HTMLElement;
|
||||
const props = withDefaults(defineProps<{
|
||||
severity?: 'info' | 'warning' | 'critical';
|
||||
onClick?: () => void;
|
||||
dashboardRef?: HTMLElement;
|
||||
}>(), {
|
||||
severity: 'info',
|
||||
onClick: () => () => {},
|
||||
dashboardRef: () => {},
|
||||
});
|
||||
|
||||
public isShown = true;
|
||||
public bannerWidth = 0;
|
||||
public resizeObserver?: ResizeObserver;
|
||||
const { isMobile } = useResize();
|
||||
|
||||
public mounted(): void {
|
||||
this.resizeObserver = new ResizeObserver(this.onBannerResize);
|
||||
const isShown = ref<boolean>(true);
|
||||
const bannerWidth = ref<number>(0);
|
||||
let resizeObserver = reactive<ResizeObserver>();
|
||||
|
||||
if (this.dashboardRef) {
|
||||
this.resizeObserver?.observe(this.dashboardRef);
|
||||
this.onBannerResize();
|
||||
}
|
||||
}
|
||||
const bannerStyle = computed((): string => {
|
||||
const margin = isMobile.value ? 30 : 60;
|
||||
|
||||
public beforeUnmount(): void {
|
||||
this.resizeObserver?.unobserve(this.dashboardRef);
|
||||
}
|
||||
return `width: ${bannerWidth.value - margin}px`;
|
||||
});
|
||||
|
||||
@Watch('dashboardRef')
|
||||
public setResizable(): void {
|
||||
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 onBannerResize(): void {
|
||||
bannerWidth.value = props.dashboardRef.offsetWidth;
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
@ -7,8 +7,8 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
|
||||
/**
|
||||
* BarFillStyle class holds info for BarFillStyle entity.
|
||||
@ -23,26 +23,25 @@ class BarFillStyle {
|
||||
}
|
||||
}
|
||||
|
||||
// @vue/component
|
||||
@Component
|
||||
export default class VBar extends Vue {
|
||||
@Prop({ default: 0 })
|
||||
private readonly current: number;
|
||||
@Prop({ default: 0 })
|
||||
private readonly max: number;
|
||||
@Prop({ default: '#0068DC' })
|
||||
private readonly color: string;
|
||||
const props = withDefaults(defineProps<{
|
||||
current?: number;
|
||||
max?: number;
|
||||
color?: string;
|
||||
}>(), {
|
||||
current: 0,
|
||||
max: 0,
|
||||
color: '#0068DC',
|
||||
});
|
||||
|
||||
public get barFillStyle(): BarFillStyle {
|
||||
if (this.current > this.max) {
|
||||
return new BarFillStyle(this.color, '100%');
|
||||
}
|
||||
|
||||
const width = (this.current / this.max) * 100 + '%';
|
||||
|
||||
return new BarFillStyle(this.color, width);
|
||||
const barFillStyle = computed((): BarFillStyle => {
|
||||
if (props.current > props.max) {
|
||||
return new BarFillStyle(props.color, '100%');
|
||||
}
|
||||
}
|
||||
|
||||
const width = (props.current / props.max) * 100 + '%';
|
||||
|
||||
return new BarFillStyle(props.color, width);
|
||||
});
|
||||
</script>
|
||||
|
||||
<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