Merge pull request #1291 from core-ds/feat/use-match-media-default

feat: add defaultMatchMediaValue
core-ds · Jul 16, 2024 · b2ebcd9 · b2ebcd9
2 parents c4e113c + 1979b0e
commit b2ebcd9
Show file tree

Hide file tree

Showing 19 changed files with 129 additions and 27 deletions.
diff --git a/.changeset/smart-nails-buy.md b/.changeset/smart-nails-buy.md
@@ -0,0 +1,19 @@
+---
+'@alfalab/core-components-calendar': minor
+'@alfalab/core-components-checkbox-group': minor
+'@alfalab/core-components-code-input': minor
+'@alfalab/core-components-confirmation': minor
+'@alfalab/core-components-custom-picker-button': minor
+'@alfalab/core-components-filter-tag': minor
+'@alfalab/core-components-mq': minor
+'@alfalab/core-components-pass-code': minor
+'@alfalab/core-components-pattern-lock': minor
+'@alfalab/core-components-plate': minor
+'@alfalab/core-components-radio-group': minor
+'@alfalab/core-components-tag': minor
+'@alfalab/core-components-toast': minor
+'@alfalab/core-components-toast-plate': minor
+'@alfalab/core-components-typography': minor
+---
+
+- Добавлен пропс defaultMatchMediaValue. С помощью него можно задавать fallback значение для хука useMatchMedia внутри компонента.
diff --git a/packages/calendar/src/Component.responsive.tsx b/packages/calendar/src/Component.responsive.tsx
@@ -12,11 +12,16 @@ export type ResponsiveCalendarProps = CalendarDesktopProps &
          * @default 1024
          */
         breakpoint?: number;
+
+        /**
+         * Значение по-умолчанию для хука useMatchMedia
+         */
+        defaultMatchMediaValue?: boolean | (() => boolean);
     };
 
 export const CalendarResponsive = forwardRef<HTMLDivElement, ResponsiveCalendarProps>(
-    ({ breakpoint = 1024, ...restProps }, ref) => {
-        const [isDesktop] = useMatchMedia(`(min-width: ${breakpoint}px)`);
+    ({ breakpoint = 1024, defaultMatchMediaValue, ...restProps }, ref) => {
+        const [isDesktop] = useMatchMedia(`(min-width: ${breakpoint}px)`, defaultMatchMediaValue);
 
         return isDesktop ? (
             <CalendarDesktop {...restProps} ref={ref} />

diff --git a/packages/checkbox-group/src/Component.responsive.tsx b/packages/checkbox-group/src/Component.responsive.tsx
@@ -12,12 +12,21 @@ export type CheckboxGroupProps = Omit<BaseCheckboxGroupProps, 'styles'> & {
      * @default 1024
      */
     breakpoint?: number;
+
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
 };
 
-export const CheckboxGroup: FC<CheckboxGroupProps> = ({ breakpoint = 1024, ...restProps }) => {
+export const CheckboxGroup: FC<CheckboxGroupProps> = ({
+    breakpoint = 1024,
+    defaultMatchMediaValue,
+    ...restProps
+}) => {
     const query = `(min-width: ${breakpoint}px)`;
 
-    const [isDesktop] = useMatchMedia(query);
+    const [isDesktop] = useMatchMedia(query, defaultMatchMediaValue);
 
     const Component = isDesktop ? CheckboxGroupDesktop : CheckboxGroupMobile;
 

diff --git a/packages/code-input/src/Component.responsive.tsx b/packages/code-input/src/Component.responsive.tsx
@@ -12,13 +12,18 @@ export type CodeInputProps = Omit<BaseCodeInputProps, 'stylesInput'> & {
      * @default 1024
      */
     breakpoint?: number;
+
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
 };
 
 export const CodeInput = forwardRef<CustomInputRef, CodeInputProps>(
-    ({ breakpoint = 1024, ...restProps }, ref) => {
+    ({ breakpoint = 1024, defaultMatchMediaValue, ...restProps }, ref) => {
         const query = `(min-width: ${breakpoint}px)`;
 
-        const [isDesktop] = useMatchMedia(query);
+        const [isDesktop] = useMatchMedia(query, defaultMatchMediaValue);
 
         const Component = isDesktop ? CodeInputDesktop : CodeInputMobile;
 

diff --git a/packages/confirmation/src/component.responsive.tsx b/packages/confirmation/src/component.responsive.tsx
@@ -15,13 +15,19 @@ export type ResponsiveConfirmationProps = Omit<
      * @default 1024
      */
     breakpoint?: number;
+
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
 };
 
 export const ConfirmationResponsive: FC<ResponsiveConfirmationProps> = ({
     breakpoint = 1024,
+    defaultMatchMediaValue = true,
     ...restProps
 }) => {
-    const [isDesktop] = useMatchMedia(`(min-width: ${breakpoint}px)`, true);
+    const [isDesktop] = useMatchMedia(`(min-width: ${breakpoint}px)`, defaultMatchMediaValue);
 
     return isDesktop ? (
         <ConfirmationDesktop {...restProps} />

diff --git a/packages/custom-picker-button/src/Component.responsive.tsx b/packages/custom-picker-button/src/Component.responsive.tsx
@@ -19,6 +19,11 @@ export type CustomPickerButtonResponsiveProps = CustomPickerButtonDesktopProps &
          * @default 1024
          */
         breakpoint?: number;
+
+        /**
+         * Значение по-умолчанию для хука useMatchMedia
+         */
+        defaultMatchMediaValue?: boolean | (() => boolean);
     };
 
 export const CustomPickerButtonResponsive = forwardRef<
@@ -33,12 +38,13 @@ export const CustomPickerButtonResponsive = forwardRef<
             swipeable,
             bottomSheetProps,
             breakpoint = 1024,
+            defaultMatchMediaValue,
             ...restProps
         },
         ref,
     ) => {
         const query = `(min-width: ${breakpoint}px)`;
-        const [isDesktop] = useMatchMedia(query);
+        const [isDesktop] = useMatchMedia(query, defaultMatchMediaValue);
 
         return isDesktop ? (
             <CustomPickerButtonDesktop

diff --git a/packages/filter-tag/src/Component.responsive.tsx b/packages/filter-tag/src/Component.responsive.tsx
@@ -12,13 +12,18 @@ export type FilterTagProps = Omit<BaseFilterTagProps, 'styles'> & {
      * @default 1024
      */
     breakpoint?: number;
+
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
 };
 
 export const FilterTag = forwardRef<HTMLDivElement, FilterTagProps>(
-    ({ children, breakpoint = 1024, ...restProps }, ref) => {
+    ({ children, breakpoint = 1024, defaultMatchMediaValue, ...restProps }, ref) => {
         const query = `(min-width: ${breakpoint}px)`;
 
-        const [isDesktop] = useMatchMedia(query);
+        const [isDesktop] = useMatchMedia(query, defaultMatchMediaValue);
 
         const Component = isDesktop ? FilterTagDesktop : FilterTagMobile;
 

diff --git a/packages/mq/src/Component.tsx b/packages/mq/src/Component.tsx
@@ -17,6 +17,11 @@ export type MqProps = {
      */
     touch?: boolean;
 
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
+
     /**
      * Дочерние элементы.
      */
@@ -28,8 +33,14 @@ export type MqProps = {
     onMatchChange?: (isMatched: boolean) => void;
 };
 
-export const Mq: FC<MqProps> = ({ children, query = '', touch, onMatchChange }) => {
-    const [queryMatches] = useMatchMedia(query);
+export const Mq: FC<MqProps> = ({
+    children,
+    query = '',
+    touch,
+    defaultMatchMediaValue,
+    onMatchChange,
+}) => {
+    const [queryMatches] = useMatchMedia(query, defaultMatchMediaValue);
 
     const touchPass = touch === undefined ? true : touch === SUPPORTS_TOUCH;
 

diff --git a/packages/pass-code/src/Component.responsive.tsx b/packages/pass-code/src/Component.responsive.tsx
@@ -7,10 +7,10 @@ import { PassCodeMobile } from './mobile/PassCodeMobile';
 import { PassCodeProps } from './typings';
 
 export const PassCode = forwardRef<HTMLDivElement, PassCodeProps>(
-    ({ breakpoint = 1024, ...restProps }, ref) => {
+    ({ breakpoint = 1024, defaultMatchMediaValue, ...restProps }, ref) => {
         const query = `(min-width: ${breakpoint}px)`;
 
-        const [isDesktop] = useMatchMedia(query);
+        const [isDesktop] = useMatchMedia(query, defaultMatchMediaValue);
 
         const Component = isDesktop ? PassCodeDesktop : PassCodeMobile;
 

diff --git a/packages/pass-code/src/Component.tsx b/packages/pass-code/src/Component.tsx
@@ -60,6 +60,11 @@ export type BasePassCodeProps = {
      */
     breakpoint?: number;
 
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
+
     /**
      * Стили компонента
      */

diff --git a/packages/pattern-lock/src/Component.responsive.tsx b/packages/pattern-lock/src/Component.responsive.tsx
@@ -8,10 +8,10 @@ import { PatternLockMobile } from './mobile';
 import { PatternLockProps } from './typings';
 
 export const PatternLock = forwardRef<TPatternLockInstance, PatternLockProps>(
-    ({ breakpoint = 1024, ...restProps }, ref) => {
+    ({ breakpoint = 1024, defaultMatchMediaValue, ...restProps }, ref) => {
         const query = `(min-width: ${breakpoint}px)`;
 
-        const [isDesktop] = useMatchMedia(query);
+        const [isDesktop] = useMatchMedia(query, defaultMatchMediaValue);
 
         const Component = isDesktop ? PatternLockDesktop : PatternLockMobile;
 

diff --git a/packages/pattern-lock/src/typings.ts b/packages/pattern-lock/src/typings.ts
@@ -80,6 +80,11 @@ export type PatternLockProps = CommonPatternLockProps & {
      * @default 1024
      */
     breakpoint?: number;
+
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
 };
 export type ObservableTokens = {
     ACCENT_INITIAL: string;

diff --git a/packages/plate/src/Component.responsive.tsx b/packages/plate/src/Component.responsive.tsx
@@ -12,13 +12,18 @@ export type PlateProps = Omit<BasePlateProps, 'styles'> & {
      * @default 1024
      */
     breakpoint?: number;
+
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
 };
 
 export const Plate = forwardRef<HTMLDivElement, PlateProps>(
-    ({ children, breakpoint = 1024, ...restProps }, ref) => {
+    ({ children, breakpoint = 1024, defaultMatchMediaValue, ...restProps }, ref) => {
         const query = `(min-width: ${breakpoint}px)`;
 
-        const [isDesktop] = useMatchMedia(query);
+        const [isDesktop] = useMatchMedia(query, defaultMatchMediaValue);
 
         const Component = isDesktop ? PlateDesktop : PlateMobile;
 

diff --git a/packages/radio-group/src/Component.responsive.tsx b/packages/radio-group/src/Component.responsive.tsx
@@ -12,13 +12,18 @@ export type RadioGroupProps = Omit<BaseRadioGroupProps, 'styles'> & {
      * @default 1024
      */
     breakpoint?: number;
+
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
 };
 
 export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
-    ({ breakpoint = 1024, ...restProps }, ref) => {
+    ({ breakpoint = 1024, defaultMatchMediaValue, ...restProps }, ref) => {
         const query = `(min-width: ${breakpoint}px)`;
 
-        const [isDesktop] = useMatchMedia(query);
+        const [isDesktop] = useMatchMedia(query, defaultMatchMediaValue);
 
         const Component = isDesktop ? RadioGroupDesktop : RadioGroupMobile;
 

diff --git a/packages/tag/src/Component.responsive.tsx b/packages/tag/src/Component.responsive.tsx
@@ -12,13 +12,18 @@ export type TagProps = Omit<BaseTagProps, 'styles' | 'colorStylesMap'> & {
      * @default 1024
      */
     breakpoint?: number;
+
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
 };
 
 export const Tag = forwardRef<HTMLButtonElement, TagProps>(
-    ({ children, breakpoint = 1024, ...restProps }, ref) => {
+    ({ children, breakpoint = 1024, defaultMatchMediaValue, ...restProps }, ref) => {
         const query = `(min-width: ${breakpoint}px)`;
 
-        const [isDesktop] = useMatchMedia(query);
+        const [isDesktop] = useMatchMedia(query, defaultMatchMediaValue);
 
         const Component = isDesktop ? TagDesktop : TagMobile;
 

diff --git a/packages/toast-plate/src/Component.responsive.tsx b/packages/toast-plate/src/Component.responsive.tsx
@@ -12,13 +12,18 @@ export type ToastPlateProps = Omit<BaseToastPlateProps, 'styles'> & {
      * @default 1024
      */
     breakpoint?: number;
+
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
 };
 
 export const ToastPlate = forwardRef<HTMLDivElement, ToastPlateProps>(
-    ({ children, breakpoint = 1024, ...restProps }, ref) => {
+    ({ children, breakpoint = 1024, defaultMatchMediaValue, ...restProps }, ref) => {
         const query = `(min-width: ${breakpoint}px)`;
 
-        const [isDesktop] = useMatchMedia(query);
+        const [isDesktop] = useMatchMedia(query, defaultMatchMediaValue);
 
         const Component = isDesktop ? ToastPlateDesktop : ToastPlateMobile;
 

diff --git a/packages/toast/src/Component.responsive.tsx b/packages/toast/src/Component.responsive.tsx
@@ -9,10 +9,10 @@ import { ToastMobile } from './mobile';
 export type ToastProps = BaseToastProps;
 
 export const Toast = forwardRef<HTMLDivElement, ToastProps>(
-    ({ children, breakpoint = 1024, ...restProps }, ref) => {
+    ({ children, breakpoint = 1024, defaultMatchMediaValue, ...restProps }, ref) => {
         const query = `(min-width: ${breakpoint}px)`;
 
-        const [isDesktop] = useMatchMedia(query);
+        const [isDesktop] = useMatchMedia(query, defaultMatchMediaValue);
 
         const Component = isDesktop ? ToastDesktop : ToastMobile;
 

diff --git a/packages/typography/src/title-responsive/component.tsx b/packages/typography/src/title-responsive/component.tsx
@@ -9,7 +9,8 @@ import styles from './index.module.css';
 
 export const TitleResponsive = forwardRef<HTMLHeadingElement | HTMLDivElement, TitleProps>(
     (props, ref) => {
-        const [isDesktop] = useMatchMedia('(min-width: 1024px)');
+        const { defaultMatchMediaValue } = props;
+        const [isDesktop] = useMatchMedia('(min-width: 1024px)', defaultMatchMediaValue);
 
         return (
             <TitleBase

diff --git a/packages/typography/src/title/component.tsx b/packages/typography/src/title/component.tsx
@@ -72,6 +72,11 @@ export type TitleProps = Omit<NativeProps, 'color'> & {
      * Пропы для скелетона
      */
     skeletonProps?: TextSkeletonProps;
+
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
 };
 
 type PrivateProps = {