use-calculate-sheet-right.ts

Overview

The use-calculate-sheet-right.ts file defines a custom React hook useCalculateSheetRight that calculates a CSS class string to position an element from the right edge of the viewport dynamically based on the current width of the <body> element.

This hook leverages the useSize hook from the ahooks library to observe DOM size changes and returns a responsive CSS class string to be used in styling components, particularly for layout or positioning of side sheets, panels, or similar UI elements.

Detailed Description

Function: `useCalculateSheetRight`

export function useCalculateSheetRight(): string

Purpose

useCalculateSheetRight determines the CSS class to apply a right offset to an element, adapting the offset according to the current width of the browser's body element.

How it works

It uses useSize from ahooks to listen for size changes on the <body> element.
Extracts the current width (bodyWidth) of the body element.
Returns one of two CSS class strings:
- If bodyWidth > 1800 pixels, it returns 'right-[620px]'.
- Otherwise, it returns 'right-1/3'.

Parameters

This function takes no parameters.

Returns

Type: string
Description: A Tailwind CSS-style class string specifying the right offset for positioning.

Usage Example

import React from 'react';
import { useCalculateSheetRight } from './use-calculate-sheet-right';

function SideSheet() {
  const rightClass = useCalculateSheetRight();

  return (
    <div className={`fixed top-0 ${rightClass} w-80 h-full bg-white shadow-lg`}>
      {/* Side sheet content */}
    </div>
  );
}

In this example, the side sheet's position from the right edge changes responsively based on the body width.

Implementation Details

Dependency: useSize hook from ahooks library
- This hook listens for size changes on a DOM element and returns its size (width and height).
- Here, it is used to track the width of the <body> element.
Responsive Threshold:
- The threshold for switching positioning is set at 1800 pixels width.
- This threshold can be adjusted as needed for different responsive breakpoints.
CSS Class Strings:
- The returned strings follow Tailwind CSS conventions for positioning:
  - right-[620px] applies a fixed 620px offset from the right.
  - right-1/3 applies a relative offset equal to one-third of the parent width.
Fallback Handling:
- If the size object is undefined (e.g., during initial render), it defaults bodyWidth to 0, thus returning 'right-1/3'.

Interaction with the System

This hook is intended to be used within React functional components that require dynamic positioning styles based on viewport size.
It depends on the DOM being available (hence usage only in client-side React components).
It interacts indirectly with the CSS framework (Tailwind CSS) by returning class names expected by that system.
It may be part of a larger UI layout system where sheets, modals, or sidebars reposition responsively.

Mermaid Diagram

flowchart TD
    A[useCalculateSheetRight] --> B[useSize(document.querySelector('body'))]
    B --> C{size}
    C -->|defined| D[bodyWidth = size.width]
    C -->|undefined| E[bodyWidth = 0]
    D --> F{bodyWidth > 1800?}
    E --> F
    F -->|true| G[return 'right-[620px]']
    F -->|false| H[return 'right-1/3']

Summary

File Purpose: Provides a React hook to calculate right positioning classes based on body width.
Key Function: useCalculateSheetRight returns a responsive CSS class string.
Dependencies: Uses ahooks' useSize to track body element width.
Use Case: Dynamic, responsive positioning of UI elements like side sheets.
Responsive Logic: Switches between fixed pixel and fractional right offset based on a threshold width (1800px).

This simple yet effective utility supports responsive UI design by abstracting position calculations into a reusable hook.