Add help screen layout #116
Conversation
lubej
force-pushed
the
ml/mobile-help-screen
branch
from
c19113b
to
8dafda4
Compare
lubej
force-pushed
the
ml/mobile-help-screen
branch
from
0a72fb4
to
32aa454
Compare
lubej
force-pushed
the
ml/mobile-help-screen
branch
from
4631c02
to
aa517fe
Compare
|
that lib throws some warnings |
|
Good point. Will migrate to SwiperJs. As |
| disabled: boolean | ||
| } | ||
|
|
||
| const ParaTimeSelectorGlow = styled(Box, { | ||
| shouldForwardProp: (prop: string) => | ||
| !(['disabled'] as (keyof ParaTimeSelectorProps)[]).includes(prop as keyof ParaTimeSelectorProps), | ||
| })<ParaTimeSelectorProps>(({ disabled, theme }) => ({ | ||
| !(['disabled'] as (keyof ParaTimeSelectorBaseProps)[]).includes(prop as keyof ParaTimeSelectorBaseProps), |
There was a problem hiding this comment.
do we even need shouldForwardProp for disabled attr?
There was a problem hiding this comment.
I rather leave it, for cases where [disabled] style selector is globally applied, to not conflict with styling.
| return false | ||
| } | ||
|
|
||
| switch (step) { |
There was a problem hiding this comment.
why are we using switch statement to handle boolean ? Can't we just write
step === ParaTimeSelectorStep.ShowHelpScreen. Additionally, do we even need utils for such simple case?
There was a problem hiding this comment.
I thought that mobile version would be more complex. Simplified the simple switch statements to ifs, but I would keep the utils. If you feel strongly against I can move it into component.
| // declaration in d.ts file declaration not correctly recognized | ||
| declare global { | ||
| namespace JSX { | ||
| interface IntrinsicElements { |
There was a problem hiding this comment.
can we move it to src/types file?
|
|
||
| useEffect(() => { | ||
| const handleSlideChange = (e: Event) => { | ||
| const [swiper] = (e as SlideChangeEvent).detail |
There was a problem hiding this comment.
Are these types correct? handleSlideChange e param is a type of SlideChangeEvent not Event, right?
src/index.tsx
Outdated
| import { register } from 'swiper/element/swiper-element' | ||
| // register Swiper custom elements | ||
| register() |
There was a problem hiding this comment.
How come we aren't using 'swiper/react'?
There was a problem hiding this comment.
ah, i see, "Swiper React components will likely to be removed in future versions. It is recommended to migrate to Swiper Element instead."
lubej
force-pushed
the
ml/mobile-help-screen
branch
from
d95d4b4
to
2d8f99a
Compare
|
Something broke on small screens with this PR:
|
|
I'm also seeing: |
| component="img" | ||
| sx={{ | ||
| display: 'block', | ||
| width: '100%', |
There was a problem hiding this comment.
This is causing issue @lukaw3d was showing
Solution
Add help screen on mobile version
SwiperJsdependency for carousel effect;Links