diff --git a/package.json b/package.json index 216646b6..ab2d94f5 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "@emotion/core": "10.0.28", "@emotion/styled": "10.0.27", "antd": "4.0.3", - "framer-motion": "^2.0.0-beta.52", + "framer-motion": "^2.0.0-beta.57", "markdown-to-jsx": "6.11.0", "query-string": "6.11.1", "react": "16.13.0", diff --git a/src/components/common/DiffViewer.js b/src/components/common/DiffViewer.js index 0cca2b9b..c41f4593 100644 --- a/src/components/common/DiffViewer.js +++ b/src/components/common/DiffViewer.js @@ -8,6 +8,7 @@ import { getDiffPatchURL } from '../../utils' import DiffSection from './Diff/DiffSection' import DiffLoading from './Diff/DiffLoading' import UsefulContentSection from './UsefulContentSection' +import TroubleshootingSection from './TroubleshootingSection' import ViewStyleOptions from './Diff/DiffViewStyleOptions' import CompletedFilesCounter from './CompletedFilesCounter' @@ -162,6 +163,8 @@ const DiffViewer = ({ toVersion={toVersion} /> + + ( + +))` + padding: 0px 5px 0px 0px; +` + +const NextButton = styled( + ({ issues, issuesKeySince, setIssuesKeySince, ...props }) => { + const nextIssuesKeySince = issuesKeySince + MAX_ISSUES_PER_PAGE + + return ( + + ) + } +)` + padding: 0px 0px 0px 5px; +` + +const TroubleshootingSection = ({ isLoading }) => { + const [issuesKeySince, setIssuesKeySince] = useState(0) + + const renderTitle = () => ( + + Troubleshooting + + ) + + return ( +
+ + {issuesMock.map( + (issue, key) => + key > issuesKeySince && + key <= issuesKeySince + MAX_ISSUES_PER_PAGE && ( + + ) + )} + + + + + + + +
+ ) +} + +export default TroubleshootingSection diff --git a/src/components/common/UsefulContentSection.js b/src/components/common/UsefulContentSection.js index 26cfe28a..fd7f17bf 100644 --- a/src/components/common/UsefulContentSection.js +++ b/src/components/common/UsefulContentSection.js @@ -1,117 +1,22 @@ import React, { Component, Fragment } from 'react' import styled from '@emotion/styled' +import { motion } from 'framer-motion' import { UpOutlined, DownOutlined } from '@ant-design/icons' import { Button } from 'antd' import { getVersionsInDiff, getChangelogURL } from '../../utils' import { Link } from './Markdown' import UpgradeSupportAlert from './UpgradeSupportAlert' import AppNameWarning from './AppNameWarning' -import { motion } from 'framer-motion' - -const Container = styled.div` - position: relative; - margin-top: 16px; - color: rgba(0, 0, 0, 0.65); - overflow: hidden; -` - -const InnerContainer = styled.div` - color: rgba(0, 0, 0, 0.65); - background-color: #fffbe6; - border-width: 1px; - border-left-width: 7px; - border-color: #ffe58f; - border-style: solid; - border-radius: 3px; - transition: padding 0.25s ease-out; -` - -const Title = styled(({ isContentVisible, ...props }) => ( - -))` - font-size: 17px; - cursor: pointer; - margin: 0px; - padding: 18px 0px 0px 14px; -` - -const ContentContainer = styled(({ isContentVisible, children, ...props }) => ( - -
- -))` - & > div { - padding: 15px 24px 19px; - } -` +import Section from './Sections/Section' -const Icon = styled(props => ( - +const TitleIcon = styled(props => ( + 📣 ))` margin: 0px 10px; ` -const HideContentButton = styled( - ({ toggleContentVisibility, isContentVisible, ...props }) => ( -