Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
interface Magazine {
kind: 'magazine'
issue: number
}
type SomethingToRead = Book | Magazine
const Readable: React.SFC = props => {
if (props.kind === 'magazine') {
return <div>magazine #{props.issue}</div>
}
return <div>magazine #{props.author}</div>
}
const StyledReadable = styled(Readable)`
font-size: ${props => (props.kind === 'book' ? 16 : 14)};
`
;
;
; // $ExpectError
; // $ExpectError
}
interface Props {
prop: boolean
}
class ClassWithDefaultProps extends React.Component {
static defaultProps = { prop: false }
render() {
return this.props.prop ? :
}
// $ExpectError
;
// $ExpectError
;
// $ExpectError
;
const Button4 = styled(
ReactClassComponent0
)`
backgroundColor: ${props => props.theme.backColor}
fontSize: ${5}px;
color: ${props => props.primary}
`
const Button5 = styled(ReactSFC0)(props => ({
color: props.primary
}))
;<div>
</div>
;<div>
</div>
// $ExpectError
;
// $ExpectError
;
// $ExpectError
;
;
interface PrimaryProps {
readonly primary: string
}
/**
* @desc
* This function accepts `InnerProps`/`Tag` to infer the type of `tag`,
* and accepts `ExtraProps` for user who use string style
* to be able to declare extra props without using
* `` styled('button')`...` ``, which does not supported in
* styled-component VSCode extension.
* If your tool support syntax highlighting for `` styled('button')`...` ``
* it could be more efficient.
*/
const Button2 = styled<'button', PrimaryProps>('button')`
fontsize: ${5}px;
color: ${props => props.primary};
`
const Button3 = styled<'button', PrimaryProps>('button')(props => ({
color: props.primary
}))
;<div>
</div>
;<div>
</div>
// $ExpectError
;
// $ExpectError
;
// $ExpectError
;
const Container5 = Container3.withComponent(ReactSFC2)
;
// $ExpectError
;
// $ExpectError
;
// $ExpectError
;
// $ExpectError
styled(ReactSFC2)()
/**
* @todo
* I wish we could raise errors for following two `withComponent`s.
*/
Container0.withComponent(ReactClassComponent2)
Container3.withComponent(ReactClassComponent2)
const StyledClass0 = styled(ReactClassComponent0)({})
declare const ref0_0: (element: ReactClassComponent0 | null) => void
declare const ref0_1: (element: ReactClassComponent1 | null) => void
declare const ref0_2: (element: HTMLDivElement | null) => void
;
// $ExpectError
;
// $ExpectError
static defaultProps = { prop: false }
render() {
return this.props.prop ? :
}
}
const StyledClassWithDefaultProps = styled(ClassWithDefaultProps)`
background-color: red;
`
const classInstance =
const FCWithDefaultProps = ({ prop }: Props) =>
prop ? :
FCWithDefaultProps.defaultProps = {
prop: false
}
const StyledFCWithDefaultProps = styled(FCWithDefaultProps)`
background-color: red;
`
const fcInstance =
})
;<div>
</div>
;<div>
</div>
const Input0 = styled('input', {
label: 'mystyle'
})`
padding: 4px;
`
const Input1 = styled('input', {
label: 'mystyle'
})({
padding: '4px'
})
;
;
const Input2 = Button0.withComponent('input')
const Canvas0 = styled('canvas', {
shouldForwardProp(propName) {
return propName === 'width' || propName === 'height'
}
})`
width: 200px;
`
const Canvas1 = styled('canvas', {
py={4}
as="header"
position="relative"
fontSize="xl"
fontWeight="semibold"
{...props}
/>
);
const ModalFooter = props => (
);
const ModalBody = props => ;
const StyledDialogOverlay = styled(DialogOverlay)(systemProps, extraConfig);
const ModalOverlay = forwardRef(
({ bg = "rgba(16,22,26,0.7)", zIndex, ...props }, ref) => (
),
import styled from '@emotion/styled-base'
import { Button } from 'components/atoms/Button'
import { isBold, Td, Tr } from 'components/atoms/ContentWrappers'
import { Contribution } from 'components/organisms/DefaultTable'
import { differenceInCalendarDays, isFuture, isPast } from 'date-fns'
import _ from 'lodash'
import React from 'react'
import intl from 'react-intl-universal'
import { mobileWidth } from 'styles/layout'
import { formatDateInWords } from 'utils/formatDate'
const ShowDetailButton = styled(Button)`
@media (max-width: ${mobileWidth}) {
width: 50px;
font-size: 10px;
height: 50px;
padding: 10px;
text-align: center;
}
`
type PropsType = {
isProposalSubmitted?: boolean;
isMyContribution?: boolean;
isSponsorPaid?: boolean;
} & Contribution
export default class MyContributionTableRow extends React.Component {
import PropTypes from 'prop-types';
import React from 'react';
import RecommendedPosts from './RecommendedPosts';
import '../css/subscribe.css';
import styled from '@emotion/styled-base';
const Footer = styled('div')({
marginTop: '1rem',
});
class PostFooter extends React.Component {
render() {
const { recommendedPosts } = this.props;
return (
<footer>
</footer>
);
}
}
PostFooter.propTypes = {
import styled from '@emotion/styled-base'
import { Button } from 'components/atoms/Button'
import { isBold, Td, Tr } from 'components/atoms/ContentWrappers'
import { differenceInCalendarDays, isFuture, isPast } from 'date-fns'
import _ from 'lodash'
import i18next from 'i18next'
import React from 'react'
import { mobileWidth } from 'styles/layout'
import { formatDateInWords } from 'utils/formatDate'
import { withNamespaces } from '../../i18n'
const ShowDetailButton = styled(Button)`
@media (max-width: ${mobileWidth}) {
width: 50px;
font-size: 10px;
height: 50px;
padding: 10px;
text-align: center;
}
`
type PropsType = {
t: i18next.TFunction;
title?: string;
openDate?: string;
closeDate?: string;
link?: string;
editLink?: string;