Infra/live code playground device wrapper #3298
Conversation
…code-add-more-components-2
There was a problem hiding this comment.
Please remove these changes of the icons 🙏
scripts/buildDocs.js
Outdated
| const divTagIndex = processedSnippet.findIndex(line => | ||
| line.trim().startsWith('return (') && processedSnippet[processedSnippet.indexOf(line) + 1]?.includes('<div>')); | ||
|
|
||
| if (divTagIndex !== -1) { | ||
| //If <div> tag is found, replace <div> and </div> with <MobileDeviceWrapper> and </MobileDeviceWrapper> | ||
| return processedSnippet | ||
| .map(line => line.replace('<div>', '<MobileDeviceWrapper>').replace('</div>', '</MobileDeviceWrapper>')) | ||
| .join('\n'); | ||
| } |
There was a problem hiding this comment.
This code has a few assumptions, hopefully they don't break; we can try to fins a better solution with a convention we can set.
There was a problem hiding this comment.
Let's sync about it.
Iv'e tried to implement it as HOC but I had some issues.
| [SimulatorTypes.TABLET]: {width: 900, height: 754} | ||
| }; | ||
|
|
||
| const simulatorOptions = [ |
There was a problem hiding this comment.
Should this be simulatorSegments?
| style={styles.uilibLogo} | ||
| /> | ||
| <Text text60 marginV-s1> | ||
| Wix React Native UILIB |
There was a problem hiding this comment.
| Wix React Native UILIB | |
| React Native UILIB |
| </View> | ||
| ); | ||
|
|
||
| const findSelectedIndex = () => simulatorOptions.findIndex(option => option.value === type); |
There was a problem hiding this comment.
How about getSelectedIndex?
docuilib/yarn.lock
Outdated
| @@ -6069,7 +6069,7 @@ lodash.uniq@^4.5.0: | |||
| resolved "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773" | |||
| integrity sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ== | |||
|
|
|||
| lodash@^4.17.20, lodash@^4.17.21: | |||
| lodash@4.x.x, lodash@^4.17.20, lodash@^4.17.21: | |||
There was a problem hiding this comment.
yarn.lock should not change
There was a problem hiding this comment.
You are right I'm not sure about that checking it.
There was a problem hiding this comment.
I didn't managed to revert it, tried to checkout the commit and revert the file didn't managed to.
|
@M-i-k-e-l Alexey made some changes in the Design. |
|
Closing this PR, #3351 has new approach with iframe. |
Description
Docs playground (
live-code) device wrapper to simulateMobile or Tabletdevice.In the
buildDocsscript wrapping the component snippet with theMobileDeviceWrapperthat changes the size of theViewcontainer according to the selected mode.Note: in
buildDocsscript there is a new functionprocessSnippetthat process the componentsnippet, since now we have cases that the live-code playground render a function or plain JSX that should be wrapped with theMobileDeviceWrapper.Based on #3272
Changelog
Docs playground (
live-code) device wrapper to simulateMobile or Tabletdevice.Additional info
MADS-4507