Move to expo and react-navigation (#288)
* WIP - adding expo * WIP - adding expo 2 * Fix tsc * Finish adding expo * Disable the 'require cycle' warning * Tweak plist * Modify some dependency versions to make expo happy * Fix icon fill * Get Web compiling for expo * 1.7 * Switch to react-navigation in expo2 (#287) * WIP Switch to react-navigation * WIP Switch to react-navigation 2 * WIP Switch to react-navigation 3 * Convert all screens to react navigation * Update BottomBar for react navigation * Update mobile menu to be react-native drawer * Fixes to drawer and bottombar * Factor out some helpers * Replace the navigation model with react-navigation * Restructure the shell folder and fix the header positioning * Restore the error boundary * Fix tsc * Implement not-found page * Remove react-native-gesture-handler (no longer used) * Handle notifee card presses * Handle all navigations from the state layer * Fix drawer behaviors * Fix two linking issues * Switch to our react-native-progress fork to fix an svg rendering issue * Get Web working with react-navigation * Refactor routes and navigation for a bit more clarity * Remove dead code * Rework Web shell to left/right nav to make this easier * Fix ViewHeader for desktop web * Hide profileheader back btn on desktop web * Move the compose button to the left nav * Implement reply prompt in threads for desktop web * Composer refactors * Factor out all platform-specific text input behaviors from the composer * Small fix * Update the web build to use tiptap for the composer * Tune up the mention autocomplete dropdown * Simplify the default avatar and banner * Fixes to link cards in web composer * Fix dropdowns on web * Tweak load latest on desktop * Add web beta message and feedback link * Fix up links in desktop web
This commit is contained in:
Paul Frazee
GitHub
parent
503e03d91e
commit
56cf890deb
222 changed files with 8705 additions and 6338 deletions
175
web/index.html
Normal file
175
web/index.html
Normal file
|
|
@ -0,0 +1,175 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="%LANG_ISO_CODE%">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
|
||||
<!--
|
||||
This viewport works for phones with notches.
|
||||
It's optimized for gestures by disabling global zoom.
|
||||
-->
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1.00001, viewport-fit=cover"
|
||||
/>
|
||||
<title>%WEB_TITLE%</title>
|
||||
<style>
|
||||
/**
|
||||
* Extend the react-native-web reset:
|
||||
* https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/StyleSheet/initialRules.js
|
||||
*/
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
width: 100%;
|
||||
/* To smooth any scrolling behavior */
|
||||
-webkit-overflow-scrolling: touch;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
/* Allows content to fill the viewport and go beyond the bottom */
|
||||
min-height: 100%;
|
||||
}
|
||||
#root {
|
||||
flex-shrink: 0;
|
||||
flex-basis: auto;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
/* Prevent text size change on orientation change https://gist.github.com/tfausak/2222823#file-ios-8-web-app-html-L138 */
|
||||
-webkit-text-size-adjust: 100%;
|
||||
height: calc(100% + env(safe-area-inset-top));
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
/* Allows you to scroll below the viewport; default value is visible */
|
||||
overflow-y: auto;
|
||||
overscroll-behavior-y: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-ms-overflow-style: scrollbar;
|
||||
}
|
||||
/* Enable for apps that support dark-theme */
|
||||
/*@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
background-color: black;
|
||||
}
|
||||
}*/
|
||||
|
||||
/* Remove focus state on inputs */
|
||||
*:focus {
|
||||
outline: 0;
|
||||
}
|
||||
/* Remove default link styling */
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
a[role="link"]:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* ProseMirror */
|
||||
.ProseMirror {
|
||||
font: 18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
min-height: 140px;
|
||||
}
|
||||
.ProseMirror p {
|
||||
margin: 0;
|
||||
}
|
||||
.ProseMirror p.is-editor-empty:first-child::before {
|
||||
color: #8d8e96;
|
||||
content: attr(data-placeholder);
|
||||
float: left;
|
||||
height: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.ProseMirror .mention {
|
||||
color: #0085ff;
|
||||
}
|
||||
.ProseMirror a {
|
||||
color: #0085ff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tippy-content .items {
|
||||
border-radius: 6px;
|
||||
background: #F3F3F8;
|
||||
border: 1px solid #e0d9d9;
|
||||
padding: 3px 3px;
|
||||
}
|
||||
.tippy-content .items .item {
|
||||
display: block;
|
||||
background: transparent;
|
||||
color: #8a8c9a;
|
||||
border: 0;
|
||||
font: 17px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
padding: 7px 10px 8px;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
.tippy-content .items .item.is-selected {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!--
|
||||
A generic no script element with a reload button and a message.
|
||||
Feel free to customize this however you'd like.
|
||||
-->
|
||||
<noscript>
|
||||
<form
|
||||
action=""
|
||||
style="
|
||||
background-color: #fff;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 9999;
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
font-size: 18px;
|
||||
font-family: Helvetica, sans-serif;
|
||||
line-height: 24px;
|
||||
margin: 10%;
|
||||
width: 80%;
|
||||
"
|
||||
>
|
||||
<p>Oh no! It looks like JavaScript is not enabled in your browser.</p>
|
||||
<p style="margin: 20px 0;">
|
||||
<button
|
||||
type="submit"
|
||||
style="
|
||||
background-color: #4630eb;
|
||||
border-radius: 100px;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
line-height: 20px;
|
||||
padding: 6px 16px;
|
||||
"
|
||||
>
|
||||
Reload
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
</noscript>
|
||||
<!-- The root element for your Expo app. -->
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,121 +0,0 @@
|
|||
const path = require('path')
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin')
|
||||
const webpackEnv = process.env.NODE_ENV || 'development'
|
||||
|
||||
const appDirectory = path.resolve(__dirname, '../')
|
||||
|
||||
// NOTE: node modules that ship as typescript must be listed here
|
||||
const uncompiled_deps = [
|
||||
'@bam.tech/react-native-image-resizer',
|
||||
'react-native-fs',
|
||||
'rn-fetch-blob',
|
||||
'react-native-root-siblings',
|
||||
'react-native-linear-gradient',
|
||||
]
|
||||
|
||||
const babelLoaderConfiguration = {
|
||||
test: /\.(js|jsx|ts|tsx)$/,
|
||||
include: [
|
||||
path.resolve(appDirectory, 'index.web.js'),
|
||||
path.resolve(appDirectory, 'src'),
|
||||
...uncompiled_deps.map(dep =>
|
||||
path.resolve(appDirectory, `node_modules/${dep}`),
|
||||
),
|
||||
],
|
||||
use: {
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
cacheDirectory: true,
|
||||
presets: ['module:metro-react-native-babel-preset'],
|
||||
plugins: ['react-native-web'],
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
const imageLoaderConfiguration = {
|
||||
test: /\.(gif|jpe?g|png|svg)$/,
|
||||
use: {
|
||||
loader: 'url-loader',
|
||||
options: {
|
||||
name: '[name].[ext]',
|
||||
esModule: false,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
const reactNativeWebWebviewConfiguration = {
|
||||
test: /postMock.html$/,
|
||||
use: {
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: '[name].[ext]',
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
mode: webpackEnv,
|
||||
|
||||
entry: [
|
||||
// NOTE: load any web API polyfills needed here
|
||||
path.resolve(appDirectory, 'index.web.js'),
|
||||
],
|
||||
|
||||
output: {
|
||||
filename: 'bundle.web.js',
|
||||
path: path.resolve(appDirectory, 'dist'),
|
||||
},
|
||||
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
template: path.join(appDirectory, './public/index.html'),
|
||||
}),
|
||||
],
|
||||
|
||||
module: {
|
||||
rules: [
|
||||
babelLoaderConfiguration,
|
||||
imageLoaderConfiguration,
|
||||
reactNativeWebWebviewConfiguration,
|
||||
],
|
||||
},
|
||||
|
||||
devServer: {
|
||||
historyApiFallback: {
|
||||
rewrites: [
|
||||
{from: /.*\/bundle.web.js/, to: '/bundle.web.js'},
|
||||
{
|
||||
from: /.*^\/(.*.hot-update.json)$/,
|
||||
to: function (context) {
|
||||
return '/' + context.parsedUrl.pathname.split('/').pop()
|
||||
},
|
||||
},
|
||||
{
|
||||
from: /.*^\/(.*.hot-update.js)$/,
|
||||
to: function (context) {
|
||||
return '/' + context.parsedUrl.pathname.split('/').pop()
|
||||
},
|
||||
},
|
||||
{from: /.*/, to: '/index.html'},
|
||||
],
|
||||
},
|
||||
},
|
||||
|
||||
resolve: {
|
||||
alias: {
|
||||
'react-native$': 'react-native-web',
|
||||
'react-native-linear-gradient': 'react-native-web-linear-gradient',
|
||||
'react-native-webview': 'react-native-web-webview',
|
||||
},
|
||||
extensions: [
|
||||
'.web.tsx',
|
||||
'.web.ts',
|
||||
'.tsx',
|
||||
'.ts',
|
||||
'.web.jsx',
|
||||
'.web.js',
|
||||
'.jsx',
|
||||
'.js',
|
||||
],
|
||||
},
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue