Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

refactor(sidebar): convert to TS#1106

Merged
mydearxym merged 4 commits intodevfromsidebar-to-ts
Jul 4, 2021
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletionssrc/components/Input/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -33,12 +33,14 @@ type TProps = {
disabled?: boolean
autoFocus?: boolean

onFocus?: (e) => void | null
onChange?: (e) => void | null
}

const Input: FC<TProps> = ({
behavior = 'default',
onChange = null,
onFocus = null,
prefixIcon = null,
prefixActive = false,
suffixIcon = null,
Expand All@@ -47,6 +49,7 @@ const Input: FC<TProps> = ({
...restProps
}) => {
const handleOnChange = useCallback((e) => onChange && onChange(e), [onChange])
const handleOnFocus = useCallback((e) => onFocus && onFocus(e), [onFocus])
const validProps = pickBy((v) => v !== null, restProps)

return behavior === 'default' ? (
Expand All@@ -56,6 +59,7 @@ const Input: FC<TProps> = ({
</PrefixWrapper>
<InputWrapper
onChange={handleOnChange}
onFocus={handleOnFocus}
spellcheck="false"
// prefix={false}
hasPrefix={!nilOrEmpty(prefixIcon)}
Expand Down
2 changes: 1 addition & 1 deletionsrc/components/TabBar/spec.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -2,7 +2,7 @@ import { ReactNode } from 'react'

export type TTabItem = {
title?: string
raw?: string
raw: string
alias?: string
icon?: string | ReactNode
localIcon?: string
Expand Down
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
importReact from 'react'
import{ FC, memo } from 'react'

import { ICON_CMD, ISSUE_ADDR } from '@/config'

Expand All@@ -17,10 +17,15 @@ import {

import { sortBtnOnClick } from './logic'

const Footer = ({ pin, sortOptActive }) => {
type TProps = {
pin: boolean
sortOptActive: boolean
}

const Footer: FC<TProps> = ({ pin, sortOptActive }) => {
return (
<Wrapper pin={pin}>
<InnerWrapper pin={pin}>
<Wrapper>
<InnerWrapper>
<OptionWrapper pin={pin}>
<OptionItem active={sortOptActive} onClick={() => sortBtnOnClick()}>
<OptionIcon src={`${ICON_CMD}/sidebar_drag.svg`} />
Expand All@@ -42,4 +47,4 @@ const Footer = ({ pin, sortOptActive }) => {
)
}

export defaultReact.memo(Footer)
export default memo(Footer)
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
importReact from 'react'
import{ FC, memo } from 'react'

import { ICON } from '@/config'

Expand All@@ -15,12 +15,17 @@ import {
} from './styles/header'
import { searchOnFocus, searchCommunityValueOnChange, setPin } from './logic'

const Header = ({ pin, searchCommunityValue }) => (
<Wrapper pin={pin}>
type TProps = {
pin: boolean
searchCommunityValue: string
}

const Header: FC<TProps> = ({ pin, searchCommunityValue }) => (
<Wrapper>
<InnerWrapper>
{!pin ? (
<HeaderFuncs>
<MenuWrapperpin={pin}onClick={setPin}>
<MenuWrapper onClick={setPin}>
<MenuLogo src={`${ICON}/sidebar-menu.svg`} pin={pin} />
</MenuWrapper>
</HeaderFuncs>
Expand All@@ -37,7 +42,7 @@ const Header = ({ pin, searchCommunityValue }) => (
/>
</SearchContent>
</SearchWrapper>
<MenuWrapperpin={pin}onClick={setPin}>
<MenuWrapper onClick={setPin}>
<MenuLogo src={`${ICON}/sidebar-menu.svg`} pin={pin} />
</MenuWrapper>
</HeaderFuncs>
Expand All@@ -46,4 +51,4 @@ const Header = ({ pin, searchCommunityValue }) => (
</Wrapper>
)

export defaultReact.memo(Header)
export default memo(Header)
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
importReact from 'react'
import{ FC, memo } from 'react'

import { range } from 'ramda'
import { Wrapper, Block } from './styles/loading_blocks'

const LoadingBlocks = () => {
const LoadingBlocks: FC = () => {
return (
<Wrapper>
{range(0, 14).map((num) => (
Expand All@@ -13,4 +13,4 @@ const LoadingBlocks = () => {
)
}

export defaultReact.memo(LoadingBlocks)
export default memo(LoadingBlocks)
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
importReact, { useCallback } from 'react'
import{ FC, memo, useCallback } from 'react'
import { toLower } from 'ramda'

import type { TCommunity } from '@/spec'
import { ICON_CMD } from '@/config'
// import { uid } from '@/utils'

import TrendLine from '@/components/TrendLine'

Expand All@@ -19,44 +19,42 @@ import {

import { onCommunitySelect } from '../logic'

const MenuBar = ({ pin, sortOptActive, item, activeRaw, forceRerender }) => {
const handleSelect = useCallback(() => {
onCommunitySelect(item)
}, [item])
type TProps = {
item: TCommunity
pin: boolean
sortOptActive?: boolean
activeRaw: string
}

const MenuBar: FC<TProps> = ({
pin,
sortOptActive = false,
item,
activeRaw,
}) => {
const handleSelect = useCallback(() => onCommunitySelect(item), [item])

return (
<Wrapper onClick={handleSelect}>
<ActiveBar
pin={pin}
active={!sortOptActive && activeRaw === toLower(item.raw)}
/>
<ActiveBar active={!sortOptActive && activeRaw === toLower(item.raw)} />
<DragIcon src={`${ICON_CMD}/drag.svg`} show={sortOptActive} />
<MenuItemBar>
<MenuRow
pin={pin}
sortOptActive={sortOptActive}
active={!sortOptActive && activeRaw === toLower(item.raw)}
>
<MenuRow sortOptActive={sortOptActive}>
<MenuItemIcon
key={item.raw}
active={activeRaw === toLower(item.raw)}
raw={item.raw}
src={item.logo}
/>
{/* eslint-disable jsx-a11y/anchor-is-valid */}
<MenuItemTitle
pin={pin}
active={activeRaw === toLower(item.raw)}
forceRerender={forceRerender}
>
<MenuItemTitle pin={pin} active={activeRaw === toLower(item.raw)}>
{item.title}
</MenuItemTitle>

<MiniChartWrapper pin={pin}>
<TrendLine
key={item.raw}
data={item.contributesDigest}
duration={300}
radius={15}
width={7}
/>
Expand All@@ -67,4 +65,4 @@ const MenuBar = ({ pin, sortOptActive, item, activeRaw, forceRerender }) => {
)
}

export defaultReact.memo(MenuBar)
export default memo(MenuBar)
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,34 @@
importReact from 'react'
import{ FC, memo } from 'react'

import type { TCommunity } from '@/spec'
import CustomScroller from '@/components/CustomScroller'
import MenuBar from './MenuBar'

const NormalMenuList = ({ communities, pin, activeRaw, forceRerender }) => {
type TProps = {
communities: TCommunity[]
pin: boolean
activeRaw: string
}

const NormalMenuList: FC<TProps> = ({ communities, pin, activeRaw }) => {
const scrollHeight = !pin ? 'calc(100vh - 88px)' : 'calc(100vh - 140px)'
const barSize = !pin ? 'none' : 'small'

return (
<CustomScroller
direction="vertical"
height={scrollHeight}
barSize={barSize}
barSize="small"
withBorder
autoHide
>
<div>
{communities.map((item) => (
<MenuBar
key={item.raw}
pin={pin}
item={item}
activeRaw={activeRaw}
forceRerender={forceRerender}
/>
<MenuBar key={item.raw} pin={pin} item={item} activeRaw={activeRaw} />
))}
<br />
</div>
</CustomScroller>
)
}

export defaultReact.memo(NormalMenuList)
export default memo(NormalMenuList)
43 changes: 0 additions & 43 deletionssrc/containers/unit/Sidebar/MenuList/SortableMenuList.js
View file
Open in desktop

This file was deleted.

63 changes: 63 additions & 0 deletionssrc/containers/unit/Sidebar/MenuList/SortableMenuList.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
import{ComponentClass}from'react'
import{
SortableContainer,
SortableElement,
SortableElementProps,
SortableContainerProps,
}from'react-sortable-hoc'

importtype{TCommunity}from'@/spec'
importCustomScrollerfrom'@/components/CustomScroller'
importMenuBarfrom'./MenuBar'

typeTMenuBar={
item:TCommunity
pin:boolean
activeRaw:string
sortOptActive:boolean
}&SortableElementProps

constSortableMenuBar:ComponentClass<TMenuBar>=SortableElement(
({ pin, sortOptActive, item, activeRaw})=>{
return(
<MenuBar
pin={pin}
sortOptActive={sortOptActive}
item={item}
activeRaw={activeRaw}
/>
)
},
)

typeTProps={
communities:TCommunity[]
pin:boolean
activeRaw:string
sortOptActive:boolean
// see: https://github.com/clauderic/react-sortable-hoc/blob/master/types/index.d.ts
}&SortableContainerProps

constSortableMenuList:ComponentClass<TProps>=SortableContainer(
({ communities, pin, sortOptActive, activeRaw})=>{
return(
<CustomScrollerdirection="vertical"height="84vh"withBorderautoHide>
<div>
{communities.map((item:TCommunity,index:number)=>(
<SortableMenuBar
index={index}
key={item.raw}
pin={pin}
sortOptActive={sortOptActive}
item={item}
activeRaw={activeRaw}
/>
))}
<br/>
</div>
</CustomScroller>
)
},
)

exportdefaultSortableMenuList
Loading
[8]ページ先頭
©2009-2025 Movatter.jp