YTBreakPoint.ets 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. import { BreakPointString } from '../models'
  2. interface BreakPointTypeOption<T> {
  3. xs?: T
  4. sm?: T
  5. md?: T
  6. lg?: T
  7. }
  8. export class BreakPointType<T> {
  9. private readonly options: BreakPointTypeOption<T>
  10. constructor(option: BreakPointTypeOption<T>) {
  11. this.options = option
  12. }
  13. getValue(currentBreakPoint: BreakPointString) {
  14. switch (currentBreakPoint) {
  15. case 'xs':
  16. return this.options.xs;
  17. case 'sm':
  18. return this.options.sm;
  19. case 'md':
  20. return this.options.md;
  21. case 'lg':
  22. return this.options.lg;
  23. default:
  24. return undefined;
  25. }
  26. }
  27. }
  28. export class YTBreakPoint {
  29. static readonly KEY = 'bp'
  30. private static declare instance: YTBreakPoint
  31. static getInstance() {
  32. if (!YTBreakPoint.instance) {
  33. YTBreakPoint.instance = new YTBreakPoint()
  34. }
  35. return YTBreakPoint.instance
  36. }
  37. setBreakPoint(width: number) {
  38. const vpWidth = px2vp(width)
  39. let bp = ''
  40. if (vpWidth < 320) {
  41. bp = 'xs'
  42. } else if (vpWidth < 600) {
  43. bp = 'sm'
  44. } else if (vpWidth < 840) {
  45. bp = 'md'
  46. } else {
  47. bp = 'lg'
  48. }
  49. AppStorage.setOrCreate<string>(YTBreakPoint.KEY, bp)
  50. }
  51. getBreakPoint() {
  52. return AppStorage.get<string>(YTBreakPoint.KEY)
  53. }
  54. }