From aa249af62342a0fa8d07fd46d5965acca70e2c90 Mon Sep 17 00:00:00 2001 From: Alfredo Arronte Date: Wed, 26 Jun 2024 12:12:10 +0200 Subject: [PATCH 1/3] feat(components/behavior/sticky): Share isSticky state --- components/behavior/sticky/src/index.js | 10 ++++++++-- components/behavior/sticky/test/index.test.js | 11 ++++------- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/components/behavior/sticky/src/index.js b/components/behavior/sticky/src/index.js index bbfb23dda..89c105162 100644 --- a/components/behavior/sticky/src/index.js +++ b/components/behavior/sticky/src/index.js @@ -6,10 +6,16 @@ import PropTypes from 'prop-types' import {BASE_CLASS, CLASS_ANIMATE} from './settings.js' import BehaviorStickyScrollUp from './StickyScrollUp.js' +const isFunction = children => typeof children === 'function' + const BehaviorSticky = ({children, animate, ...props}) => { return ( - {({isSticky}) =>
{children}
} + {({isSticky}) => ( +
+ {isFunction(children) ? children({isSticky}) : children} +
+ )} ) } @@ -17,7 +23,7 @@ const BehaviorSticky = ({children, animate, ...props}) => { BehaviorSticky.displayName = 'BehaviorSticky' BehaviorSticky.propTypes = { - children: PropTypes.node, + children: PropTypes.oneOf([PropTypes.node, PropTypes.func]), animate: PropTypes.bool, container: PropTypes.exact({ current: PropTypes.object diff --git a/components/behavior/sticky/test/index.test.js b/components/behavior/sticky/test/index.test.js index abd3d0733..9538ecf27 100644 --- a/components/behavior/sticky/test/index.test.js +++ b/components/behavior/sticky/test/index.test.js @@ -70,18 +70,15 @@ describe(json.name, () => { expect(container.innerHTML).to.not.have.lengthOf(0) }) - it.skip('example', () => { - // Example TO BE DELETED!!!! - + it('should allow knowing the sticky current state', () => { // Given - // const props = {} + const props = {children: ({isSticky}) =>

{`Sticky position is ${isSticky}`}

} // When - // const {getByRole} = setup(props) + const {getByRole} = setup(props) // Then - // expect(getByRole('button')).to.have.text('HOLA') - expect(true).to.be.eql(false) + expect(getByRole('heading')).to.have.text('Sticky position is false') }) }) }) From ca8411e38b376936021ad0524e75b05e07b58570 Mon Sep 17 00:00:00 2001 From: Alfredo Arronte Date: Wed, 26 Jun 2024 12:14:02 +0200 Subject: [PATCH 2/3] feat(components/behavior/sticky/demo): Get sticky current state demo --- .../demo/articles/ArticleStickyState.js | 52 +++++++++++++++++++ components/behavior/sticky/demo/index.js | 3 ++ 2 files changed, 55 insertions(+) create mode 100644 components/behavior/sticky/demo/articles/ArticleStickyState.js diff --git a/components/behavior/sticky/demo/articles/ArticleStickyState.js b/components/behavior/sticky/demo/articles/ArticleStickyState.js new file mode 100644 index 000000000..553f3e4ef --- /dev/null +++ b/components/behavior/sticky/demo/articles/ArticleStickyState.js @@ -0,0 +1,52 @@ +import {useRef} from 'react' + +import PropTypes from 'prop-types' + +import {Article, Bold, Box, Code, H2, Paragraph} from '@s-ui/documentation-library' + +import BehaviorSticky, {BehaviorStickyProvider} from '../../src/index.js' +import LoremIpsum from '../LoremIpsum.js' +import {CLASS_DEMO_PLACEHOLDER} from '../settings.js' + +const ArticleStickyState = ({className}) => { + const ref = useRef() + return ( +
+

Sticky State

+ + The BehaviorSticky allow us to know when the component given gets sticky. Using{' '} + children as a function, a parameter called isSticky is shared with the + current state. It allows rendering the sticky component with different variants depending on the{' '} + isSticky state. + + + + + {({isSticky}) => ( + + {`The element wrapped by a BehaviorSticky is ${!isSticky ? 'not ' : ''}sticky`}. + + )} + + + + + + + + + + + + +
+ ) +} + +ArticleStickyState.displayName = 'ArticleStickyState' + +ArticleStickyState.propTypes = { + className: PropTypes.string +} + +export default ArticleStickyState diff --git a/components/behavior/sticky/demo/index.js b/components/behavior/sticky/demo/index.js index 4702c2054..f2655cb89 100644 --- a/components/behavior/sticky/demo/index.js +++ b/components/behavior/sticky/demo/index.js @@ -7,6 +7,7 @@ import ArticleDefault from './articles/ArticleDefault.js' import ArticleGridDemo from './articles/ArticleGridDemo.js' import ArticleScrollUp from './articles/ArticleScrollUp.js' import ArticleStacked from './articles/ArticleStacked.js' +import ArticleStickyState from './articles/ArticleStickyState.js' import LoremIpsum from './LoremIpsum.js' import {BASE_CLASS_DEMO, CLASS_DEMO_SECTION} from './settings.js' @@ -33,6 +34,8 @@ const Demo = () => (
+ +

From a214bd38aea149b66b270065dc029707a4bfb7eb Mon Sep 17 00:00:00 2001 From: Alfredo Arronte Date: Wed, 26 Jun 2024 12:15:14 +0200 Subject: [PATCH 3/3] docs(components/behavior/sticky): Add sticky state usage to Readme --- components/behavior/sticky/README.md | 52 +++++++++++++++++----------- 1 file changed, 31 insertions(+), 21 deletions(-) diff --git a/components/behavior/sticky/README.md b/components/behavior/sticky/README.md index aa000cc1d..c89ad6ff0 100644 --- a/components/behavior/sticky/README.md +++ b/components/behavior/sticky/README.md @@ -11,34 +11,44 @@ $ npm install @s-ui/react-behavior-sticky --save ## Usage ```js -import BehaviorSticky, { - BehaviorStickyProvider -} from '@s-ui/react-behavior-sticky' +import BehaviorSticky, {BehaviorStickyProvider} from '@s-ui/react-behavior-sticky' ``` ### Basic usage (Fixed at top) + ```js - - ... - - - - ... - + + ... + + + + ... + +``` + +### Sticky state + +```js + + ... + {({isSticky}) => } + ... + ``` ### Sticky per container + ```js - - ... -
- - - - -
- ... - + + ... +
+ + + + +
+ ... + ``` -> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/behavior/sticky/demo).** \ No newline at end of file +> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/behavior/sticky/demo).**