feat: new component Sheet & PromoSheet #420
Conversation
There was a problem hiding this comment.
You could add codeowners right here. Sheet - @korvin89 PromoSheet - @Avol-V
| <Sheet | ||
| className={cn(null, className)} | ||
| contentClassName={cn('content', contentClassName)} | ||
| visible={visible && loaded} |
There was a problem hiding this comment.
Can we have a lag here in case of slow connection?
There was a problem hiding this comment.
It's a promo-informer and should be visible only when it's ready to show. So it's just hidden while image loading and we don't need any visible loader.
|
|
||
| | Property | Type | Required | Default | Description | | ||
| | :----------------------- | :--------- | :------: | :---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | visible | `boolean` | ✓ | | Show/hide sheet | |
There was a problem hiding this comment.
Why it should be a required property?
There was a problem hiding this comment.
It was required in the original component. Maybe to highlight that you should to specify visible property to control visibility of the component, it's useless without visible property.
| } | ||
|
|
||
| .yc-root { | ||
| --yc-sheet-content-paddings: 0 10px; |
| export interface SheetProps { | ||
| onClose?: () => void; | ||
| /** Show/hide sheet */ | ||
| visible: boolean; |
src/components/Sheet/Sheet.tsx
Outdated
| /** Enable the behavior in which you can close the sheet window with a swipe down if the content is scrolled to its top (`contentNode.scrollTop === 0`) or has no scroll at all */ | ||
| allowHideOnContentScroll?: boolean; | ||
| /** Hide top bar with resize handle */ | ||
| noTopBar?: boolean; |
| interface SheetContentBaseProps { | ||
| hideSheet: () => void; | ||
| content: React.ReactNode; | ||
| visible: boolean; |
|
|
||
| interface SheetContentBaseProps { | ||
| hideSheet: () => void; | ||
| content: React.ReactNode; |
There was a problem hiding this comment.
Why don't use children for it?
| visible: boolean; | ||
| } | ||
|
|
||
| export class Sheet extends React.Component<SheetProps, SheetState> { |
There was a problem hiding this comment.
Why class component, not function?
| private static bodyScrollLocksCount = 0; | ||
| private static bodyInitialOverflow: string | undefined = undefined; | ||
|
|
||
| static lockBodyScroll() { |
There was a problem hiding this comment.
Its already implemented in useBodyScrollLock
| @@ -0,0 +1,142 @@ | |||
| import React from 'react'; | |||
| import ReactDOM from 'react-dom'; | |||
| import {SheetContentContainer} from './SheetContent'; | |||
There was a problem hiding this comment.
Let's name member as the filename
| inWindowResizeScope: boolean; | ||
| } | ||
|
|
||
| class SheetContent extends React.Component<SheetContentInnerProps, SheetContentState> { |
There was a problem hiding this comment.
Can be also implemented as a function
| --yc-promo-sheet-margin: 8px; | ||
| --yc-promo-sheet-padding: 20px; | ||
| --yc-promo-sheet-border-radius: 12px; | ||
| --yc-promo-sheet-header-margin: 12px; | ||
| --yc-promo-sheet-message-margin: 16px; | ||
| --yc-promo-sheet-image-margin: 12px; | ||
| --yc-promo-sheet-foreground: var(--yc-color-text-light-primary); | ||
| --yc-promo-sheet-background: var(--yc-my-color-brand-normal); |
There was a problem hiding this comment.
Same question here, we would allow to style this component?
|
Preview is ready. |
Add components
Sheet(MobileModal) andPromoSheet.