From e173d8fd771d9e4f90b626c5302a739ad959aa8c Mon Sep 17 00:00:00 2001 From: "alejandro.tidele" Date: Mon, 11 Sep 2023 20:28:36 +0200 Subject: [PATCH 1/4] Add .prettierrc --- .prettierrc | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .prettierrc diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 00000000..b2d7299b --- /dev/null +++ b/.prettierrc @@ -0,0 +1,7 @@ +{ + "printWidth": 120, + "trailingComma": "es5", + "tabWidth": 2, + "semi": false, + "singleQuote": true, +} \ No newline at end of file From db50ce7e8e6efe7ccdad0cbb2c793b6fe8f0ed97 Mon Sep 17 00:00:00 2001 From: "alejandro.tidele" Date: Mon, 11 Sep 2023 20:29:00 +0200 Subject: [PATCH 2/4] Update .prettierrc --- .prettierrc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.prettierrc b/.prettierrc index b2d7299b..020ef330 100644 --- a/.prettierrc +++ b/.prettierrc @@ -3,5 +3,5 @@ "trailingComma": "es5", "tabWidth": 2, "semi": false, - "singleQuote": true, + "singleQuote": true } \ No newline at end of file From 974eaf88c6adb2c384be69d877f44b114cf85f3d Mon Sep 17 00:00:00 2001 From: "alejandro.tidele" Date: Mon, 11 Sep 2023 20:29:48 +0200 Subject: [PATCH 3/4] Bump dependencies versions --- package-lock.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index d43bfc04..49360151 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "react-insta-stories", - "version": "2.5.9", + "version": "2.6.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "react-insta-stories", - "version": "2.5.9", + "version": "2.6.2", "license": "MIT", "devDependencies": { "@babel/core": "^7.5.5", From 5af711f56c481d9845bbde05401712fcb5cd852f Mon Sep 17 00:00:00 2001 From: "alejandro.tidele" Date: Mon, 11 Sep 2023 20:32:17 +0200 Subject: [PATCH 4/4] Replace old prototype-based "defaultProps" with JavaScript default parameters --- src/index.tsx | 125 ++++++++++++++++++++++++++------------------------ 1 file changed, 65 insertions(+), 60 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index 075d645d..c3588c2a 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -2,78 +2,83 @@ import React, { useEffect, useState } from 'react' import { ReactInstaStoriesProps, GlobalCtx, Story, Tester, Renderer } from './interfaces' import Container from './components/Container' import GlobalContext from './context/Global' -import StoriesContext from './context/Stories'; +import StoriesContext from './context/Stories' import { getRenderer } from './util/renderers' -import { renderers as defaultRenderers } from './renderers/index'; +import { renderers as defaultRenderers } from './renderers/index' import withHeader from './renderers/wrappers/withHeader' import withSeeMore from './renderers/wrappers/withSeeMore' -const ReactInstaStories = function (props: ReactInstaStoriesProps) { - let renderers = props.renderers ? props.renderers.concat(defaultRenderers) : defaultRenderers; - let context: GlobalCtx = { - width: props.width, - height: props.height, - loader: props.loader, - header: props.header, - storyContainerStyles: props.storyContainerStyles, - storyInnerContainerStyles: props.storyInnerContainerStyles, - storyStyles: props.storyStyles, - progressContainerStyles: props.progressContainerStyles, - progressWrapperStyles: props.progressWrapperStyles, - progressStyles: props.progressStyles, - loop: props.loop, - defaultInterval: props.defaultInterval, - isPaused: props.isPaused, - currentIndex: props.currentIndex, - onStoryStart: props.onStoryStart, - onStoryEnd: props.onStoryEnd, - onAllStoriesEnd: props.onAllStoriesEnd, - onNext: props.onNext, - onPrevious: props.onPrevious, - keyboardNavigation: props.keyboardNavigation, - preventDefault: props.preventDefault, - preloadCount: props.preloadCount, - } - const [stories, setStories] = useState<{ stories: Story[] }>({ stories: generateStories(props.stories, renderers) }); +const ReactInstaStories = ({ + width = 360, + height = 640, + defaultInterval = 4000, + preloadCount = 1, + ...props +}: ReactInstaStoriesProps) => { + const renderers: ReactInstaStoriesProps['renderers'] = props.renderers + ? props.renderers.concat(defaultRenderers) + : defaultRenderers + + const context: GlobalCtx = { + width: width, + height: height, + loader: props.loader, + header: props.header, + storyContainerStyles: props.storyContainerStyles, + storyInnerContainerStyles: props.storyInnerContainerStyles, + storyStyles: props.storyStyles, + progressContainerStyles: props.progressContainerStyles, + progressWrapperStyles: props.progressWrapperStyles, + progressStyles: props.progressStyles, + loop: props.loop, + defaultInterval: defaultInterval, + isPaused: props.isPaused, + currentIndex: props.currentIndex, + onStoryStart: props.onStoryStart, + onStoryEnd: props.onStoryEnd, + onAllStoriesEnd: props.onAllStoriesEnd, + onNext: props.onNext, + onPrevious: props.onPrevious, + keyboardNavigation: props.keyboardNavigation, + preventDefault: props.preventDefault, + preloadCount: preloadCount, + } + const [stories, setStories] = useState<{ stories: Story[] }>({ + stories: generateStories(props.stories, renderers), + }) - useEffect(() => { - setStories({ stories: generateStories(props.stories, renderers) }); - }, [props.stories, props.renderers]); + useEffect(() => { + setStories({ stories: generateStories(props.stories, renderers) }) + }, [props.stories, props.renderers]) - return - - - + return ( + + + + + ) } +const generateStories = (stories: Story[], renderers: { renderer: Renderer; tester: Tester }[]) => { + return stories.map((s) => { + let story: Story = {} -const generateStories = (stories: Story[], renderers: { renderer: Renderer, tester: Tester }[]) => { - return stories.map(s => { - let story: Story = {}; - - if (typeof s === 'string') { - story.url = s; - story.type = 'image'; - } else if (typeof s === 'object') { - story = Object.assign(story, s); - } - - let renderer = getRenderer(story, renderers); - story.originalContent = story.content; - story.content = renderer; - return story - }) -}; + if (typeof s === 'string') { + story.url = s + story.type = 'image' + } else if (typeof s === 'object') { + story = Object.assign(story, s) + } -ReactInstaStories.defaultProps = { - width: 360, - height: 640, - defaultInterval: 4000, - preloadCount: 1, + let renderer = getRenderer(story, renderers) + story.originalContent = story.content + story.content = renderer + return story + }) } -export const WithHeader = withHeader; -export const WithSeeMore = withSeeMore; +export const WithHeader = withHeader +export const WithSeeMore = withSeeMore export default ReactInstaStories