Merge branch 'next-sticky' into 'next'
Next: Layout: convert to tsx, use sticky sidebars See merge request soapbox-pub/soapbox-fe!1189
This commit is contained in:
Alex Gleason
commit
94c112c8cf
4 changed files with 31 additions and 61 deletions
|
|
@ -1,8 +1,8 @@
|
|||
import classNames from 'classnames';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import StickyBox from 'react-sticky-box';
|
||||
|
||||
const Layout = ({ children }) => (
|
||||
const Layout: React.FC = ({ children }) => (
|
||||
<div className='sm:py-4 relative pb-36'>
|
||||
<div className='max-w-3xl mx-auto sm:px-6 md:max-w-7xl md:px-8 md:grid md:grid-cols-12 md:gap-8'>
|
||||
{children}
|
||||
|
|
@ -11,52 +11,37 @@ const Layout = ({ children }) => (
|
|||
);
|
||||
|
||||
|
||||
const Sidebar = ({ children }) => (
|
||||
const Sidebar: React.FC = ({ children }) => (
|
||||
<div className='hidden lg:block lg:col-span-3'>
|
||||
<div className='sticky top-20'>
|
||||
<StickyBox offsetTop={80} className='pb-4'>
|
||||
{children}
|
||||
</div>
|
||||
</StickyBox>
|
||||
</div>
|
||||
);
|
||||
|
||||
const Main = ({ children, className }) => (
|
||||
const Main: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({ children, className }) => (
|
||||
<main
|
||||
className={classNames({
|
||||
'md:col-span-12 lg:col-span-9 xl:col-span-6 sm:space-y-4': true,
|
||||
[className]: typeof className !== 'undefined',
|
||||
})}
|
||||
}, className)}
|
||||
>
|
||||
{children}
|
||||
</main>
|
||||
);
|
||||
|
||||
const Aside = ({ children }) => (
|
||||
const Aside: React.FC = ({ children }) => (
|
||||
<aside className='hidden xl:block xl:col-span-3'>
|
||||
<div className='sticky top-20 space-y-6'>
|
||||
<StickyBox offsetTop={80} className='space-y-6 pb-4' >
|
||||
{children}
|
||||
</div>
|
||||
</StickyBox>
|
||||
</aside>
|
||||
);
|
||||
|
||||
Layout.propTypes = {
|
||||
children: PropTypes.node.isRequired,
|
||||
};
|
||||
|
||||
Sidebar.propTypes = {
|
||||
children: PropTypes.node,
|
||||
};
|
||||
|
||||
Main.propTypes = {
|
||||
children: PropTypes.node,
|
||||
className: PropTypes.string,
|
||||
};
|
||||
|
||||
Aside.propTypes = {
|
||||
children: PropTypes.node,
|
||||
};
|
||||
|
||||
// @ts-ignore
|
||||
Layout.Sidebar = Sidebar;
|
||||
// @ts-ignore
|
||||
Layout.Main = Main;
|
||||
// @ts-ignore
|
||||
Layout.Aside = Aside;
|
||||
|
||||
export default Layout;
|
||||
|
|
@ -35,8 +35,11 @@ module.exports = {
|
|||
'testMatch': ['**/*/__tests__/**/?(*.|*-)+(test).(ts|js)?(x)'],
|
||||
'testEnvironment': 'jsdom',
|
||||
'transformIgnorePatterns': [
|
||||
// FIXME: react-sticky-box doesn't provide a CJS build, so transform it for now
|
||||
// https://github.com/codecks-io/react-sticky-box/issues/79
|
||||
`/node_modules/(?!(react-sticky-box|.+\\.(${ASSET_EXTS})))`,
|
||||
// Ignore node_modules, except static assets
|
||||
`/node_modules/(?!.+\\.(${ASSET_EXTS}))`,
|
||||
// `/node_modules/(?!.+\\.(${ASSET_EXTS}))`,
|
||||
],
|
||||
'transform': {
|
||||
'\\.[jt]sx?$': 'babel-jest',
|
||||
|
|
|
|||
|
|
@ -164,7 +164,7 @@
|
|||
"react-router-scroll-4": "^1.0.0-beta.1",
|
||||
"react-simple-pull-to-refresh": "^1.3.0",
|
||||
"react-sparklines": "^1.7.0",
|
||||
"react-stickynode": "^4.0.0",
|
||||
"react-sticky-box": "^1.0.2",
|
||||
"react-swipeable-views": "^0.14.0",
|
||||
"react-textarea-autosize": "^8.3.3",
|
||||
"react-toggle": "^4.0.1",
|
||||
|
|
|
|||
44
yarn.lock
44
yarn.lock
|
|
@ -3444,7 +3444,7 @@ cjs-module-lexer@^1.0.0:
|
|||
resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz#9f84ba3244a512f3a54e5277e8eef4c489864e40"
|
||||
integrity sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==
|
||||
|
||||
classnames@^2.0.0, classnames@^2.2.5, classnames@^2.2.6:
|
||||
classnames@^2.2.5, classnames@^2.2.6:
|
||||
version "2.3.1"
|
||||
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
|
||||
integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
|
||||
|
|
@ -3687,7 +3687,7 @@ core-js@^2.4.0:
|
|||
resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
|
||||
integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
|
||||
|
||||
core-js@^3.1.3, core-js@^3.15.2, core-js@^3.6.5:
|
||||
core-js@^3.1.3, core-js@^3.15.2:
|
||||
version "3.18.0"
|
||||
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.18.0.tgz#9af3f4a6df9ba3428a3fb1b171f1503b3f40cc49"
|
||||
integrity sha512-WJeQqq6jOYgVgg4NrXKL0KLQhi0CT4ZOCvFL+3CQ5o7I6J8HkT5wd53EadMfqTDp1so/MT1J+w2ujhWcCJtN7w==
|
||||
|
|
@ -4806,11 +4806,6 @@ etag@~1.8.1:
|
|||
resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
|
||||
integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
|
||||
|
||||
eventemitter3@^3.0.0:
|
||||
version "3.1.2"
|
||||
resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-3.1.2.tgz#2d3d48f9c346698fce83a85d7d664e98535df6e7"
|
||||
integrity sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q==
|
||||
|
||||
eventemitter3@^4.0.0:
|
||||
version "4.0.7"
|
||||
resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
|
||||
|
|
@ -8625,7 +8620,7 @@ quote@^0.4.0:
|
|||
resolved "https://registry.yarnpkg.com/quote/-/quote-0.4.0.tgz#10839217f6c1362b89194044d29b233fd7f32f01"
|
||||
integrity sha1-EIOSF/bBNiuJGUBE0psjP9fzLwE=
|
||||
|
||||
raf@^3.0.0, raf@^3.1.0, raf@^3.4.1:
|
||||
raf@^3.1.0, raf@^3.4.1:
|
||||
version "3.4.1"
|
||||
resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
|
||||
integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
|
||||
|
|
@ -8910,16 +8905,12 @@ react-sparklines@^1.7.0:
|
|||
dependencies:
|
||||
prop-types "^15.5.10"
|
||||
|
||||
react-stickynode@^4.0.0:
|
||||
version "4.0.0"
|
||||
resolved "https://registry.yarnpkg.com/react-stickynode/-/react-stickynode-4.0.0.tgz#ca1deeda866aeace3d522d01eb868f286cdb49d1"
|
||||
integrity sha512-H6Ae6l8soAc188eFAmE4CGJz3oidQa88jNO/fnJWjpFw4DwGRS6boL9gHNE4DCvbMPgek1AAP85pUPIEKUMgtw==
|
||||
react-sticky-box@^1.0.2:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/react-sticky-box/-/react-sticky-box-1.0.2.tgz#7e72a0f237bdf8270cec9254337f49519a411174"
|
||||
integrity sha512-Kyvtppdtv1KqJyNU4DtrSMI0unyQRgtraZvVQ0GAazVbYiTsIVpyhpr+5R0Aavzu4uJNSe1awj2rk/qI7i6Zfw==
|
||||
dependencies:
|
||||
classnames "^2.0.0"
|
||||
core-js "^3.6.5"
|
||||
prop-types "^15.6.0"
|
||||
shallowequal "^1.0.0"
|
||||
subscribe-ui-event "^2.0.6"
|
||||
resize-observer-polyfill "^1.5.1"
|
||||
|
||||
react-swipeable-views-core@^0.14.0:
|
||||
version "0.14.0"
|
||||
|
|
@ -9240,6 +9231,11 @@ reselect@^4.0.0:
|
|||
resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.0.0.tgz#f2529830e5d3d0e021408b246a206ef4ea4437f7"
|
||||
integrity sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA==
|
||||
|
||||
resize-observer-polyfill@^1.5.1:
|
||||
version "1.5.1"
|
||||
resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
|
||||
integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
|
||||
|
||||
resolve-cwd@^3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"
|
||||
|
|
@ -9544,11 +9540,6 @@ shallow-equal@^1.2.1:
|
|||
resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-1.2.1.tgz#4c16abfa56043aa20d050324efa68940b0da79da"
|
||||
integrity sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==
|
||||
|
||||
shallowequal@^1.0.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
|
||||
integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
|
||||
|
||||
shebang-command@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
|
||||
|
|
@ -9987,15 +9978,6 @@ stylelint@^13.7.2:
|
|||
v8-compile-cache "^2.3.0"
|
||||
write-file-atomic "^3.0.3"
|
||||
|
||||
subscribe-ui-event@^2.0.6:
|
||||
version "2.0.7"
|
||||
resolved "https://registry.yarnpkg.com/subscribe-ui-event/-/subscribe-ui-event-2.0.7.tgz#8d18b6339c35b25246a5335775573f0e5dc461f8"
|
||||
integrity sha512-Acrtf9XXl6lpyHAWYeRD1xTPUQHDERfL4GHeNuYAtZMc4Z8Us2iDBP0Fn3xiRvkQ1FO+hx+qRLmPEwiZxp7FDQ==
|
||||
dependencies:
|
||||
eventemitter3 "^3.0.0"
|
||||
lodash "^4.17.15"
|
||||
raf "^3.0.0"
|
||||
|
||||
substring-trie@^1.0.2:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/substring-trie/-/substring-trie-1.0.2.tgz#7b42592391628b4f2cb17365c6cce4257c7b7af5"
|
||||
|
|
|
|||
Loading…
Reference in a new issue