From c095d247e769e938f4908ccdee2082e5f8ce61e5 Mon Sep 17 00:00:00 2001 From: Marek Rozmus Date: Wed, 15 Apr 2020 19:33:47 +0200 Subject: [PATCH 1/3] Allow custom container with styles --- README.md | 36 ++++++------- examples/src/App.js | 9 +++- examples/src/animations/List.js | 9 +++- examples/src/styled/List.js | 78 +++++++++++++++++++++++++++ examples/src/styled/custom.module.css | 4 ++ src/SwipeableList.js | 32 ++++++----- src/module.d.ts | 6 ++- 7 files changed, 137 insertions(+), 37 deletions(-) create mode 100644 examples/src/styled/List.js create mode 100644 examples/src/styled/custom.module.css diff --git a/README.md b/README.md index febb832..3a521c8 100644 --- a/README.md +++ b/README.md @@ -60,28 +60,26 @@ import '@sandstreamdev/react-swipeable-list/dist/styles.css'; ``` -or use function as children pattern if other container is needed (check animation example) +or use function as children pattern if other container is needed (check animation and styled container examples). Note that in this case you need to provide list wrapper and pass default `className` props to have same behaviour. Default `SwipeableList` styles are passed in `className` prop. ```jsx - {props => ( - - - Revealed content during swipe, - action: () => console.info('swipe action triggered') - }} - swipeRight={{ - content:
Revealed content during swipe
, - action: () => console.info('swipe action triggered') - }} - {...props} - > -
Item name
- - - + {({ className, ...rest }) => ( +
+ Revealed content during swipe
, + action: () => console.info('swipe action triggered') + }} + swipeRight={{ + content:
Revealed content during swipe
, + action: () => console.info('swipe action triggered') + }} + {...rest} + > +
Item name
+ + )} ``` diff --git a/examples/src/App.js b/examples/src/App.js index 9a3c7a3..871a2fc 100644 --- a/examples/src/App.js +++ b/examples/src/App.js @@ -5,6 +5,7 @@ import BasicList from './basic/List'; import ComplexList from './complex/List'; import SizeToContentList from './size-to-content/List'; import AnimationsList from './animations/List'; +import StyledList from './styled/List'; import styles from './app.module.css'; @@ -12,7 +13,8 @@ const ExampleType = enumerable( 'BASIC', 'COMPLEX', 'SIZE_TO_CONTENT', - 'ANIMATIONS' + 'ANIMATIONS', + 'STYLED' ); const Examples = [ @@ -22,7 +24,8 @@ const Examples = [ id: ExampleType.SIZE_TO_CONTENT, text: 'List in size to content container' }, - { id: ExampleType.ANIMATIONS, text: 'Animations' } + { id: ExampleType.ANIMATIONS, text: 'Animations' }, + { id: ExampleType.STYLED, text: 'Custom container' } ]; class App extends PureComponent { @@ -46,6 +49,8 @@ class App extends PureComponent { return ; case ExampleType.ANIMATIONS: return ; + case ExampleType.STYLED: + return ; } return null; diff --git a/examples/src/animations/List.js b/examples/src/animations/List.js index f3d6550..41698c0 100644 --- a/examples/src/animations/List.js +++ b/examples/src/animations/List.js @@ -72,9 +72,14 @@ const SimpleList = () => {
- {({ scrollStartThreshold, swipeStartThreshold, threshold }) => ( + {({ + className, + scrollStartThreshold, + swipeStartThreshold, + threshold + }) => ( diff --git a/examples/src/styled/List.js b/examples/src/styled/List.js new file mode 100644 index 0000000..763d653 --- /dev/null +++ b/examples/src/styled/List.js @@ -0,0 +1,78 @@ +import React from 'react'; +import { v4 as uuidv4 } from 'uuid'; +import { + SwipeableList, + SwipeableListItem +} from '@sandstreamdev/react-swipeable-list'; +import '@sandstreamdev/react-swipeable-list/dist/styles.css'; +import { classNames } from '@sandstreamdev/std/web'; +import { identity } from '@sandstreamdev/std/function'; + +import styles from '../app.module.css'; +import customStyles from './custom.module.css'; + +const itemContent = name => ( +
+ {name} +
+); + +const StyledList = () => { + const items = [ + { id: uuidv4(), text: 'Item 1' }, + { id: uuidv4(), text: 'Item 2' }, + { id: uuidv4(), text: 'Item 3' }, + { id: uuidv4(), text: 'Item 4' } + ]; + + const swipeRightOptions = () => ({ + content: ( +
+ Delete +
+ ), + action: identity + }); + + const swipeLeftOptions = () => ({ + content: ( +
+ Delete +
+ ), + action: identity + }); + + return ( + <> + + Custom styled list wrapper width + +
+ + {({ className, ...rest }) => ( +
+ {items.map(({ id, text }) => ( + + {itemContent(text)} + + ))} +
+ )} + +
+ + ); +}; + +export default StyledList; diff --git a/examples/src/styled/custom.module.css b/examples/src/styled/custom.module.css new file mode 100644 index 0000000..ead8d51 --- /dev/null +++ b/examples/src/styled/custom.module.css @@ -0,0 +1,4 @@ +.customList { + height: 320px; + background-color: cornsilk; +} diff --git a/src/SwipeableList.js b/src/SwipeableList.js index 17d5af7..ff4e771 100644 --- a/src/SwipeableList.js +++ b/src/SwipeableList.js @@ -8,19 +8,25 @@ const SwipeableList = ({ scrollStartThreshold, swipeStartThreshold, threshold -}) => ( -
- {typeof children === 'function' - ? children({ scrollStartThreshold, swipeStartThreshold, threshold }) - : React.Children.map(children, child => - React.cloneElement(child, { - scrollStartThreshold, - swipeStartThreshold, - threshold - }) - )} -
-); +}) => + typeof children === 'function' ? ( + children({ + className: styles.swipeableList, + scrollStartThreshold, + swipeStartThreshold, + threshold + }) + ) : ( +
+ {React.Children.map(children, child => + React.cloneElement(child, { + scrollStartThreshold, + swipeStartThreshold, + threshold + }) + )} +
+ ); SwipeableList.propTypes = { children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]), diff --git a/src/module.d.ts b/src/module.d.ts index 6b92767..95d64f7 100644 --- a/src/module.d.ts +++ b/src/module.d.ts @@ -112,9 +112,13 @@ interface IBaseSwipeableListProps { threshold?: number; } +interface IStyledSwipeableListProps extends IBaseSwipeableListProps { + className: string; +} + type SwipeableListChildren = | ReactNode - | ((props: IBaseSwipeableListProps) => ReactNode); + | ((props: IStyledSwipeableListProps) => ReactNode); interface ISwipeableListProps extends IBaseSwipeableListProps { /** From c2c78aae8027b20077253f276c0d12e51dbad924 Mon Sep 17 00:00:00 2001 From: Marek Rozmus Date: Thu, 16 Apr 2020 10:08:32 +0200 Subject: [PATCH 2/3] Fix code review issues and update tests --- examples/src/size-to-content/List.js | 6 +++--- examples/src/styled/List.js | 13 ++++--------- src/SwipeableList.js | 2 +- src/__tests__/SwipeableList.test.js | 21 +++++++++++++++++++-- 4 files changed, 27 insertions(+), 15 deletions(-) diff --git a/examples/src/size-to-content/List.js b/examples/src/size-to-content/List.js index cf4d3ac..58b9328 100644 --- a/examples/src/size-to-content/List.js +++ b/examples/src/size-to-content/List.js @@ -4,7 +4,7 @@ import { SwipeableListItem } from '@sandstreamdev/react-swipeable-list'; import '@sandstreamdev/react-swipeable-list/dist/styles.css'; -import { identity } from '@sandstreamdev/std/function'; +import { noOp } from '@sandstreamdev/std/function'; import ListItem from '../complex/ListItem'; import ItemContent from '../complex/ItemContent'; @@ -37,7 +37,7 @@ const SizeToContentList = () => { side="right" /> ), - action: identity + action: noOp }); const swipeLeftOptions = () => ({ @@ -49,7 +49,7 @@ const SizeToContentList = () => { side="left" /> ), - action: identity + action: noOp }); return ( diff --git a/examples/src/styled/List.js b/examples/src/styled/List.js index 763d653..02ce2a8 100644 --- a/examples/src/styled/List.js +++ b/examples/src/styled/List.js @@ -6,7 +6,7 @@ import { } from '@sandstreamdev/react-swipeable-list'; import '@sandstreamdev/react-swipeable-list/dist/styles.css'; import { classNames } from '@sandstreamdev/std/web'; -import { identity } from '@sandstreamdev/std/function'; +import { noOp } from '@sandstreamdev/std/function'; import styles from '../app.module.css'; import customStyles from './custom.module.css'; @@ -31,7 +31,7 @@ const StyledList = () => { Delete
), - action: identity + action: noOp }); const swipeLeftOptions = () => ({ @@ -40,7 +40,7 @@ const StyledList = () => { Delete ), - action: identity + action: noOp }); return ( @@ -51,12 +51,7 @@ const StyledList = () => {
{({ className, ...rest }) => ( -
+
{items.map(({ id, text }) => ( +
{React.Children.map(children, child => React.cloneElement(child, { scrollStartThreshold, diff --git a/src/__tests__/SwipeableList.test.js b/src/__tests__/SwipeableList.test.js index 2005ac7..74b3356 100644 --- a/src/__tests__/SwipeableList.test.js +++ b/src/__tests__/SwipeableList.test.js @@ -14,7 +14,7 @@ import { afterEach(cleanup); test('list rendering with items', () => { - const { getByText } = render( + const { container, getByText } = render( Item content 1 @@ -27,10 +27,11 @@ test('list rendering with items', () => { expect(getByText('Item content 1')).toBeInTheDocument(); expect(getByText('Item content 2')).toBeInTheDocument(); + expect(container.firstChild).toHaveClass('swipeableList'); }); test('list rendering with items when child as function', () => { - const { getByText } = render( + const { container, getByText } = render( {props => ( <> @@ -47,6 +48,22 @@ test('list rendering with items when child as function', () => { expect(getByText('Item content 1')).toBeInTheDocument(); expect(getByText('Item content 2')).toBeInTheDocument(); + expect(container.firstChild).not.toHaveClass('swipeableList'); +}); + +test('passing className to child function', () => { + const { container, getByTestId } = render( + + {({ className }) => ( +
+
+
+ )} + + ); + + expect(container.firstChild).not.toHaveClass('swipeableList'); + expect(getByTestId('tested-div')).toHaveClass('swipeableList'); }); test('blocking swipe on scroll', () => { From 7151e1824d9879913677559cfaabd9979074fd22 Mon Sep 17 00:00:00 2001 From: Marek Rozmus Date: Thu, 16 Apr 2020 10:20:32 +0200 Subject: [PATCH 3/3] Update title text in example sample --- examples/src/styled/List.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/examples/src/styled/List.js b/examples/src/styled/List.js index 02ce2a8..fcb841d 100644 --- a/examples/src/styled/List.js +++ b/examples/src/styled/List.js @@ -45,9 +45,7 @@ const StyledList = () => { return ( <> - - Custom styled list wrapper width - + Custom styled list wrapper
{({ className, ...rest }) => (