Feature/better sticky

.prettierrc

@@ -1,5 +1,6 @@
 {
   "semi": false,
   "singleQuote": true,
-  "trailingComma": "es5"
+  "trailingComma": "es5",
+  "eslintIntegration": true
 }

CHANGELOG.md

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+## [2.12.0] - 2019-04-05
+
+### Added
+- Better support for the `sticky` prop. Now it allows multiple and interspected sticky rows.
+
 ## [2.11.0] - 2019-03-28
 
 ### Added

manifest.json

@@ -1,7 +1,7 @@
 {
   "vendor": "vtex",
   "name": "store-header",
-  "version": "2.11.0",
+  "version": "2.12.0",
   "title": "VTEX Store Header",
   "defaultLocale": "pt-BR",
   "description": "The VTEX Store Header component",

package.json

@@ -0,0 +1,8 @@
+{
+  "devDependencies": {
+    "eslint": "^5.16.0",
+    "eslint-config-vtex-react": "^4.0.0",
+    "prettier": "^1.16.4",
+    "typescript": "^3.4.1"
+  }
+}

react/.eslintrc

@@ -0,0 +1,8 @@
+{
+  "extends": "vtex-react",
+  "env": {
+    "browser": true,
+    "es6": true,
+    "jest": true
+  }
+}

react/Row.js

@@ -1,3 +1,3 @@
 import Row from './components/Row'
 
-export default Row
+export default Row

react/components/Border.tsx

@@ -0,0 +1,14 @@
+import React, { FunctionComponent } from 'react'
+import StickyRow from './StickyRow'
+
+interface Props {
+  sticky: boolean
+}
+
+const Border: FunctionComponent<Props> = ({ sticky }) => (
+  <StickyRow sticky={sticky}>
+    <div className="bb b--muted-3" />
+  </StickyRow>
+)
+
+export default Border

react/components/CustomHeader.js → react/components/CustomHeader.tsx

@@ -1,9 +1,11 @@
-import React from 'react'
+import React, { FunctionComponent } from 'react'
 import { ExtensionPoint, useRuntime } from 'vtex.render-runtime'
 import Media from 'react-media'
 
-const CustomHeader = () => {
-  const { hints: { mobile } } = useRuntime()
+const CustomHeader: FunctionComponent = () => {
+  const {
+    hints: { mobile },
+  } = useRuntime()
 
   if (!window || !window.matchMedia) {
     return mobile ? (
@@ -16,11 +18,13 @@ const CustomHeader = () => {
   return (
     <React.Fragment>
       <Media query="(max-width:40rem)">
-        {matches => matches ? (
-          <ExtensionPoint id="unstable--header-layout.mobile" />
-        ) : (
-          <ExtensionPoint id="unstable--header-layout.desktop" />
-        )}
+        {matches =>
+          matches ? (
+            <ExtensionPoint id="unstable--header-layout.mobile" />
+          ) : (
+            <ExtensionPoint id="unstable--header-layout.desktop" />
+          )
+        }
       </Media>
     </React.Fragment>
   )

react/components/Layout.tsx

@@ -0,0 +1,8 @@
+import React, { FunctionComponent } from 'react'
+import StickyRows from './StickyRows'
+
+const Layout: FunctionComponent = ({ children }) => {
+  return <StickyRows>{children}</StickyRows>
+}
+
+export default Layout

react/components/Row.tsx

@@ -0,0 +1,40 @@
+import React, { FunctionComponent } from 'react'
+import classNames from 'classnames'
+import { Container } from 'vtex.store-components'
+import StickyRow from './StickyRow'
+
+interface Props {
+  sticky?: boolean
+  fullWidth?: boolean
+  inverted?: boolean
+}
+
+const Row: FunctionComponent<Props> = ({
+  children,
+  sticky,
+  fullWidth,
+  inverted,
+}) => {
+  const content = <div className="w-100 flex items-center">{children}</div>
+
+  return (
+    <StickyRow sticky={sticky}>
+      <div
+        className={classNames(
+          'w-100',
+          inverted
+            ? 'bg-base--inverted c-on-base--inverted'
+            : 'bg-base c-on-base'
+        )}
+      >
+        {fullWidth ? (
+          content
+        ) : (
+          <Container className="w-100 flex">{content}</Container>
+        )}
+      </div>
+    </StickyRow>
+  )
+}
+
+export default Row

react/components/Spacer.tsx

@@ -0,0 +1,5 @@
+import React, { FunctionComponent } from 'react'
+
+const Spacer: FunctionComponent = () => <div className="flex flex-grow-1" />
+
+export default Spacer

react/components/StickyRow.tsx

@@ -0,0 +1,34 @@
+import React, { FunctionComponent, useContext, CSSProperties } from 'react'
+import ReactResizeDetector from 'react-resize-detector'
+import { RowContext } from './StickyRows'
+
+interface Props {
+  sticky?: boolean
+}
+
+const StickyRow: FunctionComponent<Props> = ({ children, sticky }) => {
+  const { offset, onResize } = useContext(RowContext)
+
+  const stickyStyle: CSSProperties = {
+    position: 'sticky',
+    top: offset,
+    zIndex: 999,
+  }
+
+  return (
+    <div style={sticky ? stickyStyle : undefined}>
+      {children}
+
+      {sticky && (
+        <ReactResizeDetector
+          handleHeight
+          onResize={(_, height) => {
+            onResize(height)
+          }}
+        />
+      )}
+    </div>
+  )
+}
+
+export default StickyRow

react/components/StickyRows.tsx

@@ -0,0 +1,32 @@
+import React, { FunctionComponent } from 'react'
+import useCumulativeHeightState from '../hooks/useCumulativeHeightState'
+
+const RowContext = React.createContext<{
+  onResize(height: number): void
+  offset: number
+}>({
+  onResize: () => {},
+  offset: 0,
+})
+
+const StickyRows: FunctionComponent = ({ children }) => {
+  const { updateRowHeight, getAccumulatedHeight } = useCumulativeHeightState()
+
+  return (
+    <React.Fragment>
+      {React.Children.map(children, (child, index) => (
+        <RowContext.Provider
+          value={{
+            onResize: (height: number) => updateRowHeight({ height, index }),
+            offset: getAccumulatedHeight(index),
+          }}
+        >
+          {child}
+        </RowContext.Provider>
+      ))}
+    </React.Fragment>
+  )
+}
+
+export default StickyRows
+export { RowContext }

react/hooks/useCumulativeHeightState.tsx

@@ -0,0 +1,75 @@
+import React from 'react'
+
+interface State {
+  [id: string]: number
+}
+
+enum ActionTypes {
+  UPDATE = 'update',
+}
+
+interface UpdateAction {
+  type: ActionTypes.UPDATE
+  payload: {
+    index: number
+    height: number
+  }
+}
+
+type Actions = UpdateAction
+
+const reducer = (state: State, action: Actions) => {
+  switch (action.type) {
+    case 'update':
+      return {
+        ...state,
+        [action.payload.index]: action.payload.height,
+      }
+    default:
+      return state
+  }
+}
+
+const useCumulativeHeightState = () => {
+  const [state, dispatch]: [
+    State,
+    React.Dispatch<UpdateAction>
+  ] = React.useReducer(reducer, {})
+
+  const updateRowHeight = ({
+    height,
+    index,
+  }: {
+    height: number
+    index: number
+  }) => {
+    if (state[index] === height) {
+      return
+    }
+
+    dispatch({
+      payload: {
+        height,
+        index,
+      },
+      type: ActionTypes.UPDATE,
+    })
+  }
+
+  const getAccumulatedHeight = (index: number) => {
+    const sortedIndices = Object.keys(state)
+      .map(key => parseInt(key, 10))
+      .sort()
+
+    const indices = sortedIndices.slice(0, sortedIndices.indexOf(index))
+
+    return indices.reduce((acc, cur) => (state[cur] || 0) + acc, 0)
+  }
+
+  return {
+    getAccumulatedHeight,
+    updateRowHeight,
+  }
+}
+
+export default useCumulativeHeightState