From a0e9077633bf70a9d3f96fd99472f3bf5ccc557a Mon Sep 17 00:00:00 2001 From: mydearxym Date: Fri, 19 Mar 2021 23:15:05 +0800 Subject: [PATCH 1/2] chore(ts-workflow): more ts --- src/spec/index.ts | 9 ++++++ utils/{graphql.js => graphql.ts} | 19 +++++++++---- utils/helper.ts | 5 +--- utils/{logger.js => logger.ts} | 2 +- utils/{toast.js => toast.ts} | 47 ++++++++++++++++++++++---------- 5 files changed, 56 insertions(+), 26 deletions(-) rename utils/{graphql.js => graphql.ts} (74%) rename utils/{logger.js => logger.ts} (94%) rename utils/{toast.js => toast.ts} (54%) diff --git a/src/spec/index.ts b/src/spec/index.ts index d5656e3df..d14140e9f 100644 --- a/src/spec/index.ts +++ b/src/spec/index.ts @@ -84,6 +84,15 @@ export type TViewing = { export type TTheme = any // export type TTheme = string +export type TThemeMap = { + toast: { + successBar: string + errorBar: string + warnBar: string + infoBar: string + } +} + // google analytis format export type GA_EVENT = { action: string diff --git a/utils/graphql.js b/utils/graphql.ts similarity index 74% rename from utils/graphql.js rename to utils/graphql.ts index cdec533ac..791a90fda 100755 --- a/utils/graphql.js +++ b/utils/graphql.ts @@ -5,11 +5,11 @@ import { GRAPHQL_ENDPOINT, PAGE_SIZE } from '@/config' import { nilOrEmpty, isString } from './validator' export const asyncRes = curry((key, obj) => and(obj[key], has(key, obj))) -export const asyncErr = (key) => pathEq(['error'], key) +export const asyncErr = (key: string): any => pathEq(['error'], key) // NOTE the client with jwt info is used for getInitialProps for SSR // to load user related data -export const makeGQClient = (token) => { +export const makeGQClient = (token: string): any => { if (!nilOrEmpty(token)) { const client = new GraphQLClient(GRAPHQL_ENDPOINT, { headers: { @@ -23,7 +23,10 @@ export const makeGQClient = (token) => { } } -export const makeGithubExplore = (GRAPHQL_ENDPOINT, token) => { +export const makeGithubExplore = ( + GRAPHQL_ENDPOINT: string, + token: string, +): any => { const client = new GraphQLClient(GRAPHQL_ENDPOINT, { headers: { authorization: `bearer ${token}`, @@ -32,14 +35,16 @@ export const makeGithubExplore = (GRAPHQL_ENDPOINT, token) => { return client } -export const pagedFilter = (page, options = {}) => +export const pagedFilter = (page, options = {}): Record => merge({ page, size: PAGE_SIZE.D }, options) /* * map value(string) to UPPER case for server absinthe-atom format * e.p: is server required :post, front-end should pass "POST" */ -export const atomizeValues = (_obj) => { +export const atomizeValues = ( + _obj: Record, +): Record => { const obj = clone(_obj) Object.keys(obj).forEach((k) => { @@ -55,4 +60,6 @@ export const atomizeValues = (_obj) => { // in rxjs, if you want to send parallel request you should use complex method // like forkJoin .. which need to refactor whole sr71 part // currently the simple later is fine -export const later = (func, time = 200) => setTimeout(func, time) +export const later = (func, time = 200): ReturnType => { + return setTimeout(func, time) +} diff --git a/utils/helper.ts b/utils/helper.ts index 7fedfd3ae..538003953 100755 --- a/utils/helper.ts +++ b/utils/helper.ts @@ -13,10 +13,7 @@ type TSORTABLE_ITEMS = { index?: number }[] -/* eslint-disable */ -// TODO: document ? -export const Global = typeof window !== 'undefined' ? window : global -/* eslint-enable */ +export const Global: any = typeof window !== 'undefined' ? window : {} // those two function used to encode/decode the value in element dataset export const o2s = JSON.stringify diff --git a/utils/logger.js b/utils/logger.ts similarity index 94% rename from utils/logger.js rename to utils/logger.ts index f304ea5f7..1db484d15 100755 --- a/utils/logger.js +++ b/utils/logger.ts @@ -40,7 +40,7 @@ if ( * debug('Some message') * @returns {Function} */ -export const buildLog = (namespace) => _debug(`${namespace}`) +export const buildLog = (namespace: string) => _debug(`${namespace}`) /** * Default debugger, simple log. diff --git a/utils/toast.js b/utils/toast.ts similarity index 54% rename from utils/toast.js rename to utils/toast.ts index 8e5b18f2f..a1baeb2e8 100755 --- a/utils/toast.js +++ b/utils/toast.ts @@ -4,10 +4,20 @@ import { merge, reject } from 'ramda' +import { TThemeMap } from '@/spec' import { Global } from './helper' import { nilOrEmpty } from './validator' -const checkValid = () => Global.iziToast || false +type TToastType = 'success' | 'error' | 'warn' + +type TToastOption = { + title: string + msg: string + progressBarColor: string + position: 'bottom' | 'top' +} + +const checkValid = () => (Global as any).iziToast || false const defaultOptions = { title: 'coderplanets', @@ -20,26 +30,33 @@ const defaultOptions = { transitionIn: 'fadeInDown', } -const doNotify = (options = {}) => { - if (!checkValid()) return false - - /* eslint-disable no-undef */ +const doNotify = (options = {}): void => { + if (!checkValid()) { + return + } + const { iziToast } = Global as any iziToast.show(merge(defaultOptions, reject(nilOrEmpty, options))) - return false } export const toast = { - info: ({ title, msg, progressBarColor, position }) => - doNotify({ title, message: msg, progressBarColor, position }), - error: ({ title, msg, progressBarColor, position }) => - doNotify({ title, message: msg, progressBarColor, position }), - success: ({ title, msg, progressBarColor, position }) => - doNotify({ title, message: msg, progressBarColor, position }), - warn: ({ title, msg, progressBarColor, position }) => - doNotify({ title, message: msg, progressBarColor, position }), + info: ({ title, msg, progressBarColor, position }: TToastOption): void => { + doNotify({ title, message: msg, progressBarColor, position }) + }, + error: ({ title, msg, progressBarColor, position }: TToastOption): void => { + doNotify({ title, message: msg, progressBarColor, position }) + }, + success: ({ title, msg, progressBarColor, position }: TToastOption): void => { + doNotify({ title, message: msg, progressBarColor, position }) + }, + warn: ({ title, msg, progressBarColor, position }: TToastOption): void => { + doNotify({ title, message: msg, progressBarColor, position }) + }, } -export const toastBarColor = (type, themeData) => { +export const toastBarColor = ( + type: TToastType, + themeData: TThemeMap, +): string => { switch (type) { case 'success': return themeData.toast.successBar From 863b2b3d78d3ed11ccb499f72a4a1eedccb3d5bc Mon Sep 17 00:00:00 2001 From: mydearxym Date: Fri, 19 Mar 2021 23:23:01 +0800 Subject: [PATCH 2/2] chore(ts-workflow): more ts --- .../Checker/{index.js => index.tsx} | 34 +++++++++---------- src/spec/index.ts | 2 +- src/spec/size.ts | 1 + 3 files changed, 18 insertions(+), 19 deletions(-) rename src/components/Checker/{index.js => index.tsx} (64%) diff --git a/src/components/Checker/index.js b/src/components/Checker/index.tsx similarity index 64% rename from src/components/Checker/index.js rename to src/components/Checker/index.tsx index 44fee43ca..1554b79c6 100755 --- a/src/components/Checker/index.js +++ b/src/components/Checker/index.tsx @@ -5,8 +5,8 @@ */ import React from 'react' -import T from 'prop-types' +import type { TSIZE_SM } from '@/spec' import { ICON } from '@/config' import { SIZE } from '@/constant' import { buildLog } from '@/utils' @@ -16,7 +16,21 @@ import { Wrapper, IconWrapper, Icon, ChildWrapper } from './styles' /* eslint-disable-next-line */ const log = buildLog('c:Checker:index') -const Checker = ({ checked, onChange, hiddenMode, size, children }) => { +type TProps = { + children: React.ReactNode + checked?: boolean + hiddenMode: boolean + size?: TSIZE_SM + onChange: (checked: boolean) => void +} + +const Checker: React.FC = ({ + checked = false, + onChange = log, + hiddenMode = false, + size = SIZE.MEDIUM, + children, +}) => { const show = checked || !hiddenMode return ( @@ -31,20 +45,4 @@ const Checker = ({ checked, onChange, hiddenMode, size, children }) => { ) } -Checker.propTypes = { - checked: T.bool, - hiddenMode: T.bool, - size: T.oneOf([SIZE.MEDIUM, SIZE.SMALL]), - children: T.oneOfType([T.string, T.node]), - onChange: T.func, -} - -Checker.defaultProps = { - checked: false, - hiddenMode: false, - children: '', - size: SIZE.MEDIUM, - onChange: log, -} - export default React.memo(Checker) diff --git a/src/spec/index.ts b/src/spec/index.ts index d14140e9f..9feebb528 100644 --- a/src/spec/index.ts +++ b/src/spec/index.ts @@ -1,6 +1,6 @@ import { TRootStore as RootStoreType } from '@/stores/RootStore' -export type { TSIZE, TSIZE_TS, TSIZE_TSM, TSIZE_SML } from './size' +export type { TSIZE, TSIZE_TS, TSIZE_TSM, TSIZE_SML, TSIZE_SM } from './size' export type { TButton } from './comp' export type TThemeName = diff --git a/src/spec/size.ts b/src/spec/size.ts index d97060a7f..445e6e44f 100644 --- a/src/spec/size.ts +++ b/src/spec/size.ts @@ -4,3 +4,4 @@ export type TSIZE = 'TINY' | 'SMALL' | 'MEDIUM' | 'LARGE' export type TSIZE_TS = 'TINY' | 'SMALL' export type TSIZE_TSM = 'TINY' | 'SMALL' | 'MEDIUM' export type TSIZE_SML = 'SMALL' | 'MEDIUM' | 'LARGE' +export type TSIZE_SM = 'SMALL' | 'MEDIUM'