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: UI/UX adjust#1142

Merged
mydearxym merged 1 commit intodevfromre-design-join-model
Aug 11, 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
22 changes: 22 additions & 0 deletionssrc/containers/tool/JoinModal/Content.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
import { FC, memo } from 'react'

import { INGroup, RGroup } from './Groups'
import { GROUPS } from './constant'

type TProps = {
activeGroup: string
}

const Content: FC<TProps> = ({ activeGroup }) => {
switch (activeGroup) {
case 'R': {
return <RGroup qr={GROUPS[activeGroup].QR} />
}

default: {
return <INGroup qr={GROUPS[activeGroup].QR} />
}
}
}

export default memo(Content)
35 changes: 35 additions & 0 deletionssrc/containers/tool/JoinModal/Footer.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
import { FC, memo } from 'react'

import Button from '@/components/Buttons/Button'
import {
Wrapper,
Note,
WelcomeWrapper,
Welcome,
WelcomeDesc,
} from './styles/footer'

type TProps = {
onConfirm: () => void
mask: boolean
}

const Footer: FC<TProps> = ({ onConfirm, mask }) => {
return (
<Wrapper>
<Note>
为营造一个有意义的交流氛围，请阅读对应的「进群须知」后谨慎加入，谢谢理解。
</Note>
{mask ? (
<Button onClick={onConfirm}>确定加入</Button>
) : (
<WelcomeWrapper>
<Welcome>欢迎加入</Welcome>
<WelcomeDesc>期待你的宝贵意见</WelcomeDesc>
</WelcomeWrapper>
)}
</Wrapper>
)
}

export default memo(Footer)
23 changes: 0 additions & 23 deletionssrc/containers/tool/JoinModal/FooterWechat.js
View file
Open in desktop

This file was deleted.

83 changes: 83 additions & 0 deletionssrc/containers/tool/JoinModal/Groups.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
import { FC, useState } from 'react'

import Footer from './Footer'
import {
Wrapper,
InnerWrapper,
QRCodePic,
Title,
DescWrapper,
UL,
LI,
Focus,
} from './styles/groups'

type TProps = {
qr: string
}

export const INGroup: FC<TProps> = ({ qr }) => {
const [mask, setMask] = useState(true)

return (
<Wrapper>
<InnerWrapper>
<QRCodePic src={qr} noLazy mask={mask} />
<DescWrapper>
<Title>进群须知：</Title>
<UL>
<LI>
本群内<Focus>仅限于</Focus>讨论和「CoderPlanets」相关的话题。
</LI>
<LI>
除自我介绍外，在本群内<Focus>摸鱼吹水等同于自我退群声明</Focus>。
</LI>
<LI>
本群<Focus>不欢迎潜水</Focus>
，每月会不定期清理潜水人员以保持低水位，请确保你对本社区有持续的兴趣。
</LI>
<LI>
群内有价值的内容会<Focus>定期同步</Focus>
到反馈建议子社区，你不会因为不在群里而错过任何东西。
</LI>
</UL>
</DescWrapper>
</InnerWrapper>
<Footer onConfirm={() => setMask(false)} mask={mask} />
</Wrapper>
)
}

// 雷达站
export const RGroup: FC<TProps> = ({ qr }) => {
const [mask, setMask] = useState(true)

return (
<Wrapper>
<InnerWrapper>
<QRCodePic src={qr} noLazy mask={mask} />
<DescWrapper>
<Title>进群须知：</Title>
<UL>
<LI>
本群内<Focus>仅限于</Focus>
讨论信息（源）搜集等「雷达」相关的话题。
</LI>
<LI>
除自我介绍外，在本群内<Focus>摸鱼吹水等同于自我退群声明</Focus>。
</LI>
<LI>
本群<Focus>不欢迎潜水</Focus>
，每月会不定期清理潜水人员以保持低水位，请确保你对本社区有持续的兴趣。
</LI>
<LI>
群内有价值的内容会<Focus>定期同步</Focus>
到各个社区的雷达版块，你不会因为不在群里而错过任何东西。
</LI>
</UL>
</DescWrapper>
</InnerWrapper>
<Footer onConfirm={() => setMask(false)} mask={mask} />
</Wrapper>
)
}
46 changes: 46 additions & 0 deletionssrc/containers/tool/JoinModal/Header.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
import { FC, memo } from 'react'
import { keys } from 'ramda'

import { ICON } from '@/config'

import { SpaceGrow } from '@/components/Common'
import Tooltip from '@/components/Tooltip'

import { GROUPS } from './constant'
import {
Wrapper,
WechatLogo,
Title,
SelectWrapper,
Letter,
} from './styles/header'
import { switchGroup } from './logic'

type TProps = {
activeGroup: string
}

const Header: FC<TProps> = ({ activeGroup }) => {
return (
<Wrapper>
<Title>
<WechatLogo src={`${ICON}/social/wechat-share.png`} /> 加入微信群
</Title>
<SpaceGrow />
<SelectWrapper>
{keys(GROUPS).map((group) => (
<Tooltip key={group} content={GROUPS[group].title}>
<Letter
$active={activeGroup === group}
onClick={() => switchGroup(group)}
>
{group}
</Letter>
</Tooltip>
))}
</SelectWrapper>
</Wrapper>
)
}

export default memo(Header)
32 changes: 32 additions & 0 deletionssrc/containers/tool/JoinModal/constant.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
import { ICON_BASE } from '@/config'

export const GROUPS = {
IN: {
title: 'CP 内测群',
QR: `${ICON_BASE}/cps_wechat_group.png`,
},
// V: {
// title: 'CP 志愿者',
// QR: `${ICON_BASE}/cps_wechat_group.png`,
// },
// 雷达站
R: {
title: 'CP 雷达站',
QR: `${ICON_BASE}/cps_wechat_group.png`,
},
// 创作者群
W: {
title: 'CP Makers',
QR: `${ICON_BASE}/cps_wechat_group.png`,
},
G: {
title: 'CP 酷导航',
QR: `${ICON_BASE}/cps_wechat_group.png`,
},
D: {
title: 'CP 来一杯',
QR: `${ICON_BASE}/cps_wechat_group.png`,
},
}

export const holder = 1
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,41 @@
//

/*
*
* JoinModal
*
*/

import React from 'react'
import T from 'prop-types'
import { FC } from 'react'

import { buildLog } from '@/utils/logger'
import { pluggedIn } from '@/utils/mobx'

import Modal from '@/components/Modal'
import FooterWechat from './FooterWechat'

import { Wrapper } from './styles'
import Header from './Header'
import Content from './Content'

import type { TStore } from './store'
import { Wrapper } from './styles'
import { useInit, onClose } from './logic'

/* eslint-disable-next-line */
const log = buildLog('C:JoinModal')

const JoinModalContainer = ({ joinModal: store }) => {
type TProps = {
joinModal?: TStore
}

const JoinModalContainer: FC<TProps> = ({ joinModal: store }) => {
useInit(store)

const { show } = store
const { show, activeGroup } = store

return (
<Modal width="600px" show={show} showCloseBtn onClose={onClose}>
<Wrapper testid="joinModal">
<FooterWechat />
<Header activeGroup={activeGroup} />
<Content activeGroup={activeGroup} />
</Wrapper>
</Modal>
)
}

JoinModalContainer.propTypes = {
joinModal: T.any.isRequired,
}

JoinModalContainer.defaultProps = {}

export default pluggedIn(JoinModalContainer)
export default pluggedIn(JoinModalContainer) as FC<TProps>
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,36 @@
import { useEffect } from 'react'

import { EVENT } from '@/constant'
import { asyncSuit, buildLog } from '@/utils'
import asyncSuit from '@/utils/async'
import { buildLog } from '@/utils/logger'

import type { TStore } from './store'

const { SR71, asyncRes, $solver } = asyncSuit
const sr71$ = new SR71({
// @ts-ignore
receive: [EVENT.JOIN_US],
})

let store = null
let store: TStore | undefined
let sub$ = null

/* eslint-disable-next-line */
const log = buildLog('L:JoinModal')

export const switchGroup = (activeGroup: string): void => {
store.mark({ activeGroup })
}

/**
* close current modal
*/
export const onClose = () => store.mark({ show: false })
export const onClose = (): void => store.mark({ show: false })

const DataResolver = [
{
match: asyncRes(EVENT.JOIN_US),
action: (data) => {
action: () => {
store.mark({ show: true })
},
},
Expand All@@ -31,7 +39,7 @@ const DataResolver = [
// ###############################
// init & uninit
// ###############################
export const useInit = (_store) => {
export const useInit = (_store: TStore): void => {
useEffect(() => {
store = _store
log(store)
Expand All@@ -40,7 +48,7 @@ export const useInit = (_store) => {
}

return () => {
if (!sub$) return false
if (!sub$) return
sr71$.stop()
sub$.unsubscribe()
sub$ = null
Expand Down
Original file line numberDiff line numberDiff line change
Expand Up@@ -3,22 +3,20 @@
*
*/

import { types as T,getParent } from 'mobx-state-tree'
import { types as T,Instance } from 'mobx-state-tree'

import { markStates } from '@/utils/mobx'

const JoinModal = T.model('JoinModal', {
show: T.optional(T.boolean, false),
activeGroup: T.optional(T.string, 'IN'),
})
.views((self) => ({
get root() {
return getParent(self)
},
}))
.views((self) => ({}))
.actions((self) => ({
mark(sobj) {
markStates(sobj, self)
},
}))

export type TStore = Instance<typeof JoinModal>
export default JoinModal
Loading
[8]ページ先頭
©2009-2025 Movatter.jp