@semcore/fullscreen-modal 1.3.0 → 1.5.0

package/src/index.d.ts

@@ -0,0 +1,41 @@
+import { ComponentProps } from 'react';
+import { ReturnEl, CProps, PropGetterFn } from '@semcore/core';
+import { IModalProps } from '@semcore/modal';
+import { Box, IBoxProps } from '@semcore/flex-box';
+import { IIconProps } from '@semcore/icon';
+import { Text } from '@semcore/typography';
+
+export interface IFullscreenModalProps extends IModalProps {
+  /** This property is responsible for the visibility of the modal window */
+  hidden?: boolean;
+  /** Function that is invoked when hiding a component */
+  onClose?: (
+    trigger: 'onBackClick' | 'onCloseClick' | 'onEscape' | 'onOutsideClick',
+    e?: React.MouseEvent | React.KeyboardEvent,
+  ) => void;
+}
+
+export interface IFullscreenModalHeaderProps extends IBoxProps {
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+}
+
+export interface IFullscreenModalContext {
+  getBackProps: PropGetterFn;
+  getCloseProps: PropGetterFn;
+}
+
+declare const FullscreenModal: (<T>(
+  props: CProps<IFullscreenModalProps & T, IFullscreenModalContext>,
+) => ReturnEl) & {
+  Header: <T>(props: IFullscreenModalHeaderProps & T) => ReturnEl;
+  Footer: <T>(props: ComponentProps<typeof Box> & T) => ReturnEl;
+  Close: <T>(props: IIconProps & T) => ReturnEl;
+  Back: <T>(props: ComponentProps<typeof Box> & T) => ReturnEl;
+  Body: <T>(props: ComponentProps<typeof Box> & T) => ReturnEl;
+  Section: <T>(props: ComponentProps<typeof Box> & T) => ReturnEl;
+  Title: <T>(props: ComponentProps<typeof Text> & T) => ReturnEl;
+  Description: <T>(props: ComponentProps<typeof Text> & T) => ReturnEl;
+};
+
+export default FullscreenModal;

package/src/style/fullscreen-modal.shadow.css

@@ -22,9 +22,9 @@ SBack {
 }
 
 SClose {
-  top: media(12px);
-  right: media(20px);
-  padding: media(12px);
+  top: 12px;
+  right: 20px;
+  padding: 12px;
   color: var(--stone);
 
   &:hover {
@@ -33,11 +33,11 @@ SClose {
 }
 
 SBack {
-  top: media(10px);
-  left: media(32px);
+  top: 10px;
+  left: 32px;
   display: flex;
   align-items: center;
-  padding: media(2px);
+  padding: 2px;
   color: var(--gray60);
   font-size: var(--fs100);
   line-height: var(--lh100);
@@ -52,7 +52,7 @@ SBack {
 }
 
 SBackText {
-  margin-left: media(4px);
+  margin-left: 4px;
   border-bottom-width: 1px;
   border-bottom-style: solid;
   border-bottom-color: transparent;
@@ -81,10 +81,10 @@ SDescription {
 SHeader {
   display: flex;
   align-items: baseline;
-  padding-left: media(32px);
-  padding-bottom: media(12px);
-  padding-right: media(77px);
-  padding-top: media(30px);
+  padding-left: 32px;
+  padding-bottom: 12px;
+  padding-right: 77px;
+  padding-top: 30px;
   min-height: 72px;
   box-shadow: inset 0 -1px 1px 0 var(--gray80);
   box-sizing: border-box;
@@ -103,17 +103,17 @@ SBody {
 }
 
 SSection {
-  padding-top: media(24px);
-  padding-bottom: media(24px);
-  padding-left: media(32px);
-  padding-right: media(32px);
+  padding-top: 24px;
+  padding-bottom: 24px;
+  padding-left: 32px;
+  padding-right: 32px;
   flex: 1 1 auto;
 }
 
 SHeaderDivider {
-  margin-left: media(12px);
-  margin-right: media(12px);
-  height: media(16px);
+  margin-left: 12px;
+  margin-right: 12px;
+  height: 16px;
   width: 1px;
   background-color: var(--gray80);
 }

package/lib/types/FullscreenModal.d.ts

@@ -1,29 +0,0 @@
-import React, { HTMLAttributes } from 'react';
-import { Merge } from '@semcore/core';
-import { IModalProps, IModalContext } from '@semcore/modal';
-import { IBoxProps } from '@semcore/flex-box';
-import { IIconProps } from '@semcore/icon';
-import { ITextProps } from '@semcore/typography';
-export interface IFullscreenModalProps extends IModalProps {
-    /** This property is responsible for the visibility of the modal window */
-    hidden?: boolean;
-    /** Function that is invoked when hiding a component */
-    onClose?: (trigger: 'onBackClick' | 'onCloseClick' | 'onEscape' | 'onOutsideClick', e?: React.MouseEvent | React.KeyboardEvent) => void;
-}
-export interface IFullscreenModalHeaderProps extends IBoxProps {
-    title?: React.ReactNode;
-    description?: React.ReactNode;
-}
-declare const FullscreenModal: import("@semcore/core").ComponentType<Merge<IFullscreenModalProps, React.HTMLAttributes<HTMLDivElement>>, {
-    Header: Merge<IFullscreenModalHeaderProps, HTMLAttributes<HTMLDivElement>>;
-    Footer: Merge<IBoxProps, HTMLAttributes<HTMLDivElement>>;
-    Close: Merge<IIconProps, React.SVGAttributes<SVGElement>>;
-    Back: Merge<IBoxProps, HTMLAttributes<HTMLDivElement>>;
-    Body: Merge<IBoxProps, HTMLAttributes<HTMLDivElement>>;
-    Section: Merge<IBoxProps, HTMLAttributes<HTMLDivElement>>;
-    Title: Merge<ITextProps, HTMLAttributes<HTMLHeadingElement>>;
-    Description: Merge<ITextProps, HTMLAttributes<HTMLSpanElement>>;
-}, IModalContext, {
-    [key: string]: (arg: unknown) => void;
-}, null>;
-export default FullscreenModal;

package/src/FullscreenModal.tsx

@@ -1,183 +0,0 @@
-import React, { HTMLAttributes } from 'react';
-import createComponent, { Component, IFunctionProps, Merge, styled } from '@semcore/core';
-import Modal, { IModalProps, IModalContext } from '@semcore/modal';
-import { Box, IBoxProps } from '@semcore/flex-box';
-import { IIconProps } from '@semcore/icon';
-import CloseM from '@semcore/icon/lib/Close/m';
-import ArrowLeftS from '@semcore/icon/lib/ArrowLeft/s';
-import { ITextProps, Text } from '@semcore/typography';
-import fire from '@semcore/utils/lib/fire';
-import logger from '@semcore/utils/lib/logger';
-
-import style from './style/fullscreen-modal.shadow.css';
-
-export interface IFullscreenModalProps extends IModalProps {
-  /** This property is responsible for the visibility of the modal window */
-  hidden?: boolean;
-  /** Function that is invoked when hiding a component */
-  onClose?: (
-    trigger: 'onBackClick' | 'onCloseClick' | 'onEscape' | 'onOutsideClick',
-    e?: React.MouseEvent | React.KeyboardEvent,
-  ) => void;
-}
-
-class FullscreenModalRoot extends Component<IFullscreenModalProps> {
-  static displayName = 'FullscreenModal';
-  static style = style;
-
-  bindHandlerClose = (trigger?: 'onBackClick' | 'onCloseClick') => (
-    e?: React.MouseEvent | React.KeyboardEvent,
-  ) => {
-    fire(this, 'onClose', trigger, e);
-  };
-
-  getCloseProps() {
-    return {
-      onClick: this.bindHandlerClose('onCloseClick'),
-    };
-  }
-
-  getBackProps() {
-    return {
-      onClick: this.bindHandlerClose('onBackClick'),
-    };
-  }
-
-  render() {
-    const { Root: SFullscreenModal } = this;
-    const {
-      styles,
-      hidden,
-      Children,
-      onClose,
-      visible: visibleProps,
-      closable,
-      duration,
-      disablePortal,
-    } = this.asProps;
-    const SFullscreenOverlay = Modal.Overlay;
-
-    logger.warn(
-      hidden !== undefined,
-      "Свойство 'hidden' является устаревшим, используйте 'visible'",
-      this.asProps['data-ui-name'] || FullscreenModalRoot.displayName,
-    );
-
-    const visible = visibleProps === undefined ? !hidden : visibleProps;
-
-    return (
-      <Modal
-        closable={false}
-        visible={visible}
-        onClose={onClose}
-        duration={duration}
-        disablePortal={disablePortal}
-      >
-        {styled(styles)(
-          <SFullscreenOverlay>
-            <SFullscreenModal render={Modal.Window}>
-              {closable && <FullscreenModal.Close />}
-              <Children />
-            </SFullscreenModal>
-          </SFullscreenOverlay>,
-        )}
-      </Modal>
-    );
-  }
-}
-
-export interface IFullscreenModalHeaderProps extends IBoxProps {
-  title?: React.ReactNode;
-  description?: React.ReactNode;
-}
-
-function Header(props: IFunctionProps<IFullscreenModalHeaderProps>) {
-  const SHeaderDivider = 'div';
-  const { Root: SHeader, Children, styles, title, description } = props;
-  return styled(styles)(
-    <SHeader render={Box}>
-      {title && <FullscreenModal.Title children={title} />}
-      {description && (
-        <>
-          <SHeaderDivider />
-          <FullscreenModal.Description children={description} />
-        </>
-      )}
-      <Children />
-    </SHeader>,
-  );
-}
-
-function Body(props: IFunctionProps<IBoxProps>) {
-  const { Root: SBody, styles } = props;
-  return styled(styles)(<SBody render={Box} />);
-}
-
-function Section(props: IFunctionProps<IBoxProps>) {
-  const { Root: SSection, styles } = props;
-  return styled(styles)(<SSection render={Box} />);
-}
-
-function Footer(props: IFunctionProps<IBoxProps>) {
-  const { Root: SFooter, styles } = props;
-  return styled(styles)(<SFooter render={Box} />);
-}
-
-function Close(props: IFunctionProps<IIconProps>) {
-  const { Root: SClose, styles } = props;
-  return styled(styles)(<SClose render={CloseM} />);
-}
-
-function Title(props: IFunctionProps<ITextProps>) {
-  const { Root: STitle, styles } = props;
-  return styled(styles)(<STitle render={Text} tag="h4" />);
-}
-
-function Description(props: IFunctionProps<ITextProps>) {
-  const { Root: SDescription, styles } = props;
-  return styled(styles)(<SDescription render={Text} />);
-}
-
-function Back(props: IFunctionProps<IBoxProps>) {
-  const SBackText = Text;
-  const { Root: SBack, Children, styles } = props;
-
-  return styled(styles)(
-    <SBack render={Box}>
-      <ArrowLeftS />
-      <SBackText>
-        <Children />
-      </SBackText>
-    </SBack>,
-  );
-}
-
-const FullscreenModal = createComponent<
-  Merge<IFullscreenModalProps, HTMLAttributes<HTMLDivElement>>,
-  {
-    Header: Merge<IFullscreenModalHeaderProps, HTMLAttributes<HTMLDivElement>>;
-    Footer: Merge<IBoxProps, HTMLAttributes<HTMLDivElement>>;
-    Close: Merge<IIconProps, React.SVGAttributes<SVGElement>>;
-    Back: Merge<IBoxProps, HTMLAttributes<HTMLDivElement>>;
-    Body: Merge<IBoxProps, HTMLAttributes<HTMLDivElement>>;
-    Section: Merge<IBoxProps, HTMLAttributes<HTMLDivElement>>;
-    Title: Merge<ITextProps, HTMLAttributes<HTMLHeadingElement>>;
-    Description: Merge<ITextProps, HTMLAttributes<HTMLSpanElement>>;
-  },
-  IModalContext
->(
-  FullscreenModalRoot,
-  {
-    Header,
-    Footer,
-    Close,
-    Back,
-    Body,
-    Section,
-    Title,
-    Description,
-  },
-  { parent: Modal },
-);
-
-export default FullscreenModal;