forked from crowetic/commerce
use FC instead of FunctionalComponent
This commit is contained in:
parent
cf7c85e3ba
commit
44a41eb3e1
@ -1,10 +1,10 @@
|
|||||||
import React, { FunctionComponent } from 'react'
|
import React, { FC } from 'react'
|
||||||
import { UserNav } from '@components/core'
|
import { UserNav } from '@components/core'
|
||||||
import { Button } from '@components/ui'
|
import { Button } from '@components/ui'
|
||||||
import { Trash, Cross } from '@components/icon'
|
import { Trash, Cross } from '@components/icon'
|
||||||
import { useUI } from '@components/ui/context'
|
import { useUI } from '@components/ui/context'
|
||||||
|
|
||||||
const CartSidebarView: FunctionComponent = () => {
|
const CartSidebarView: FC = () => {
|
||||||
const { closeSidebar } = useUI()
|
const { closeSidebar } = useUI()
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import cn from 'classnames'
|
import cn from 'classnames'
|
||||||
import React, { FunctionComponent } from 'react'
|
import React, { FC } from 'react'
|
||||||
import s from './Avatar.module.css'
|
import s from './Avatar.module.css'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
@ -7,7 +7,7 @@ interface Props {
|
|||||||
children?: any
|
children?: any
|
||||||
}
|
}
|
||||||
|
|
||||||
const Avatar: FunctionComponent<Props> = ({ className }) => {
|
const Avatar: FC<Props> = ({ className }) => {
|
||||||
const rootClassName = cn(s.root, className)
|
const rootClassName = cn(s.root, className)
|
||||||
return (
|
return (
|
||||||
<div className={rootClassName}>
|
<div className={rootClassName}>
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import cn from 'classnames'
|
import cn from 'classnames'
|
||||||
import { FunctionComponent } from 'react'
|
import { FC } from 'react'
|
||||||
import s from './Featurebar.module.css'
|
import s from './Featurebar.module.css'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
@ -8,11 +8,7 @@ interface Props {
|
|||||||
description: string
|
description: string
|
||||||
}
|
}
|
||||||
|
|
||||||
const Featurebar: FunctionComponent<Props> = ({
|
const Featurebar: FC<Props> = ({ title, description, className }) => {
|
||||||
title,
|
|
||||||
description,
|
|
||||||
className,
|
|
||||||
}) => {
|
|
||||||
const rootClassName = cn(s.root, className)
|
const rootClassName = cn(s.root, className)
|
||||||
return (
|
return (
|
||||||
<div className={rootClassName}>
|
<div className={rootClassName}>
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import cn from 'classnames'
|
import cn from 'classnames'
|
||||||
import React, { FunctionComponent } from 'react'
|
import React, { FC } from 'react'
|
||||||
import s from './Footer.module.css'
|
import s from './Footer.module.css'
|
||||||
import { Container } from '@components/ui'
|
import { Container } from '@components/ui'
|
||||||
|
|
||||||
@ -8,7 +8,7 @@ interface Props {
|
|||||||
children?: any
|
children?: any
|
||||||
}
|
}
|
||||||
|
|
||||||
const Footer: FunctionComponent<Props> = ({ className }) => {
|
const Footer: FC<Props> = ({ className }) => {
|
||||||
const rootClassName = cn(s.root, className)
|
const rootClassName = cn(s.root, className)
|
||||||
return (
|
return (
|
||||||
<footer className={rootClassName}>
|
<footer className={rootClassName}>
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import cn from 'classnames'
|
import cn from 'classnames'
|
||||||
import { FunctionComponent } from 'react'
|
import { FC } from 'react'
|
||||||
import s from './Layout.module.css'
|
import s from './Layout.module.css'
|
||||||
import { Navbar, Featurebar } from '@components/core'
|
import { Navbar, Featurebar } from '@components/core'
|
||||||
import { Container, Sidebar } from '@components/ui'
|
import { Container, Sidebar } from '@components/ui'
|
||||||
@ -11,7 +11,7 @@ interface Props {
|
|||||||
children?: any
|
children?: any
|
||||||
}
|
}
|
||||||
|
|
||||||
const CoreLayout: FunctionComponent<Props> = ({ className, children }) => {
|
const CoreLayout: FC<Props> = ({ className, children }) => {
|
||||||
const rootClassName = cn(s.root, className)
|
const rootClassName = cn(s.root, className)
|
||||||
const { displaySidebar } = useUI()
|
const { displaySidebar } = useUI()
|
||||||
|
|
||||||
@ -34,7 +34,7 @@ const CoreLayout: FunctionComponent<Props> = ({ className, children }) => {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
const Layout: FunctionComponent<Props> = (props) => (
|
const Layout: FC<Props> = (props) => (
|
||||||
<UIProvider>
|
<UIProvider>
|
||||||
<CoreLayout {...props} />
|
<CoreLayout {...props} />
|
||||||
</UIProvider>
|
</UIProvider>
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import cn from 'classnames'
|
import cn from 'classnames'
|
||||||
import React, { FunctionComponent } from 'react'
|
import React, { FC } from 'react'
|
||||||
import s from './Navbar.module.css'
|
import s from './Navbar.module.css'
|
||||||
import { Logo, Container } from '@components/ui'
|
import { Logo, Container } from '@components/ui'
|
||||||
import { Searchbar } from '@components/core'
|
import { Searchbar } from '@components/core'
|
||||||
@ -8,7 +8,7 @@ interface Props {
|
|||||||
className?: string
|
className?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
const Navbar: FunctionComponent<Props> = ({ className }) => {
|
const Navbar: FC<Props> = ({ className }) => {
|
||||||
const rootClassName = cn(s.root, className)
|
const rootClassName = cn(s.root, className)
|
||||||
return (
|
return (
|
||||||
<Container className={rootClassName}>
|
<Container className={rootClassName}>
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import cn from 'classnames'
|
import cn from 'classnames'
|
||||||
import React, { FunctionComponent } from 'react'
|
import React, { FC } from 'react'
|
||||||
import s from './Searchbar.module.css'
|
import s from './Searchbar.module.css'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
@ -7,7 +7,7 @@ interface Props {
|
|||||||
children?: any
|
children?: any
|
||||||
}
|
}
|
||||||
|
|
||||||
const Searchbar: FunctionComponent<Props> = ({ className }) => {
|
const Searchbar: FC<Props> = ({ className }) => {
|
||||||
const rootClassName = cn(s.root, className)
|
const rootClassName = cn(s.root, className)
|
||||||
return (
|
return (
|
||||||
<div className={rootClassName}>
|
<div className={rootClassName}>
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import cn from 'classnames'
|
import cn from 'classnames'
|
||||||
import React, { FunctionComponent } from 'react'
|
import React, { FC } from 'react'
|
||||||
import s from './UserNav.module.css'
|
import s from './UserNav.module.css'
|
||||||
import { Avatar } from '@components/core'
|
import { Avatar } from '@components/core'
|
||||||
import { Heart, Bag } from '@components/icon'
|
import { Heart, Bag } from '@components/icon'
|
||||||
@ -9,7 +9,7 @@ interface Props {
|
|||||||
className?: string
|
className?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
const UserNav: FunctionComponent<Props> = ({ className }) => {
|
const UserNav: FC<Props> = ({ className }) => {
|
||||||
const rootClassName = cn(s.root, className)
|
const rootClassName = cn(s.root, className)
|
||||||
const { openSidebar } = useUI()
|
const { openSidebar } = useUI()
|
||||||
|
|
||||||
|
@ -1,13 +1,13 @@
|
|||||||
import cn from 'classnames'
|
import cn from 'classnames'
|
||||||
import s from './ProductCard.module.css'
|
import s from './ProductCard.module.css'
|
||||||
import React, { FunctionComponent } from 'react'
|
import React, { FC } from 'react'
|
||||||
import { Heart } from '@components/icon'
|
import { Heart } from '@components/icon'
|
||||||
interface Props {
|
interface Props {
|
||||||
className?: string
|
className?: string
|
||||||
children?: any
|
children?: any
|
||||||
}
|
}
|
||||||
|
|
||||||
const ProductCard: FunctionComponent<Props> = ({ className }) => {
|
const ProductCard: FC<Props> = ({ className }) => {
|
||||||
const rootClassName = cn(s.root, className)
|
const rootClassName = cn(s.root, className)
|
||||||
return (
|
return (
|
||||||
<div className={rootClassName}>
|
<div className={rootClassName}>
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import cn from 'classnames'
|
import cn from 'classnames'
|
||||||
import React, { FunctionComponent } from 'react'
|
import React, { FC } from 'react'
|
||||||
import s from './ProductGrid.module.css'
|
import s from './ProductGrid.module.css'
|
||||||
import ProductCard from '@components/ProductCard'
|
import ProductCard from '@components/ProductCard'
|
||||||
interface Props {
|
interface Props {
|
||||||
@ -8,7 +8,7 @@ interface Props {
|
|||||||
products: [any]
|
products: [any]
|
||||||
}
|
}
|
||||||
|
|
||||||
const ProductView: FunctionComponent<Props> = ({ products, className }) => {
|
const ProductView: FC<Props> = ({ products, className }) => {
|
||||||
const rootClassName = cn(s.root, className)
|
const rootClassName = cn(s.root, className)
|
||||||
return (
|
return (
|
||||||
<div className={rootClassName}>
|
<div className={rootClassName}>
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import cn from 'classnames'
|
import cn from 'classnames'
|
||||||
import React, { FunctionComponent } from 'react'
|
import React, { FC } from 'react'
|
||||||
import s from './ProductView.module.css'
|
import s from './ProductView.module.css'
|
||||||
import { Button } from '@components/ui'
|
import { Button } from '@components/ui'
|
||||||
import { Swatch } from '@components/product'
|
import { Swatch } from '@components/product'
|
||||||
@ -10,7 +10,7 @@ interface Props {
|
|||||||
productData: ProductData
|
productData: ProductData
|
||||||
}
|
}
|
||||||
|
|
||||||
const ProductView: FunctionComponent<Props> = ({ productData, className }) => {
|
const ProductView: FC<Props> = ({ productData, className }) => {
|
||||||
const rootClassName = cn(s.root, className)
|
const rootClassName = cn(s.root, className)
|
||||||
console.log(productData)
|
console.log(productData)
|
||||||
return (
|
return (
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import cn from 'classnames'
|
import cn from 'classnames'
|
||||||
import React, { FunctionComponent } from 'react'
|
import React, { FC } from 'react'
|
||||||
import s from './Swatch.module.css'
|
import s from './Swatch.module.css'
|
||||||
import { Colors } from '@components/ui/types'
|
import { Colors } from '@components/ui/types'
|
||||||
|
|
||||||
@ -11,12 +11,7 @@ interface Props {
|
|||||||
size?: string
|
size?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
const Swatch: FunctionComponent<Props> = ({
|
const Swatch: FC<Props> = ({ className, size, color, active }) => {
|
||||||
className,
|
|
||||||
size,
|
|
||||||
color,
|
|
||||||
active,
|
|
||||||
}) => {
|
|
||||||
const rootClassName = cn(
|
const rootClassName = cn(
|
||||||
s.root,
|
s.root,
|
||||||
{
|
{
|
||||||
|
@ -1,9 +1,4 @@
|
|||||||
import React, {
|
import React, { FC, MutableRefObject, useEffect, useRef } from 'react'
|
||||||
FunctionComponent,
|
|
||||||
MutableRefObject,
|
|
||||||
useEffect,
|
|
||||||
useRef,
|
|
||||||
} from 'react'
|
|
||||||
|
|
||||||
import { Component } from 'react'
|
import { Component } from 'react'
|
||||||
import PropTypes from 'prop-types'
|
import PropTypes from 'prop-types'
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import cn from 'classnames'
|
import cn from 'classnames'
|
||||||
import { FunctionComponent } from 'react'
|
import { FC } from 'react'
|
||||||
import s from './Container.module.css'
|
import s from './Container.module.css'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
@ -8,11 +8,7 @@ interface Props {
|
|||||||
el?: HTMLElement
|
el?: HTMLElement
|
||||||
}
|
}
|
||||||
|
|
||||||
const Container: FunctionComponent<Props> = ({
|
const Container: FC<Props> = ({ children, className, el = 'div' }) => {
|
||||||
children,
|
|
||||||
className,
|
|
||||||
el = 'div',
|
|
||||||
}) => {
|
|
||||||
const rootClassName = cn(s.root, className)
|
const rootClassName = cn(s.root, className)
|
||||||
|
|
||||||
let Component: React.ComponentType<React.HTMLAttributes<
|
let Component: React.ComponentType<React.HTMLAttributes<
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import cn from 'classnames'
|
import cn from 'classnames'
|
||||||
import React, { FunctionComponent } from 'react'
|
import React, { FC } from 'react'
|
||||||
import s from './Sidebar.module.css'
|
import s from './Sidebar.module.css'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
@ -7,7 +7,7 @@ interface Props {
|
|||||||
children?: any
|
children?: any
|
||||||
}
|
}
|
||||||
|
|
||||||
const Sidebar: FunctionComponent<Props> = ({ className, children }) => {
|
const Sidebar: FC<Props> = ({ className, children }) => {
|
||||||
const rootClassName = cn(s.root, className)
|
const rootClassName = cn(s.root, className)
|
||||||
return (
|
return (
|
||||||
<div className={rootClassName}>
|
<div className={rootClassName}>
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import cn from 'classnames'
|
import cn from 'classnames'
|
||||||
import { FunctionComponent } from 'react'
|
import { FC } from 'react'
|
||||||
import s from './Featurebar.module.css'
|
import s from './Featurebar.module.css'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
@ -7,7 +7,7 @@ interface Props {
|
|||||||
children?: any
|
children?: any
|
||||||
}
|
}
|
||||||
|
|
||||||
const Featurebar: FunctionComponent<Props> = ({ children, className }) => {
|
const Featurebar: FC<Props> = ({ children, className }) => {
|
||||||
const rootClassName = cn(s.root, className)
|
const rootClassName = cn(s.root, className)
|
||||||
return <div className={rootClassName}>{children}</div>
|
return <div className={rootClassName}>{children}</div>
|
||||||
}
|
}
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import React, { FunctionComponent } from 'react'
|
import React, { FC } from 'react'
|
||||||
|
|
||||||
export interface UIState {
|
export interface UIState {
|
||||||
displaySidebar: boolean
|
displaySidebar: boolean
|
||||||
@ -15,7 +15,7 @@ const initialState = {
|
|||||||
export const UIContext = React.createContext(initialState)
|
export const UIContext = React.createContext(initialState)
|
||||||
UIContext.displayName = 'UIContext'
|
UIContext.displayName = 'UIContext'
|
||||||
|
|
||||||
export const UIProvider: FunctionComponent = (props) => {
|
export const UIProvider: FC = (props) => {
|
||||||
const [state, dispatch] = React.useReducer(uiReducer, initialState)
|
const [state, dispatch] = React.useReducer(uiReducer, initialState)
|
||||||
|
|
||||||
const openSidebar = () => dispatch('OPEN_SIDEBAR')
|
const openSidebar = () => dispatch('OPEN_SIDEBAR')
|
||||||
|
Loading…
x
Reference in New Issue
Block a user