From 04622f5aadbca81296cdd861995360a4349120da Mon Sep 17 00:00:00 2001 From: Septs Date: Thu, 12 May 2022 21:19:55 +0800 Subject: [PATCH 1/3] refactor: generate contact avatar color --- .../Personas/components/ContactTableRow/index.tsx | 2 +- .../src/utils/generateContactAvatarColor.ts | 9 --------- packages/mask/src/utils/components/Avatar.tsx | 14 +++----------- packages/shared-base-ui/src/color/avatar.ts | 10 ++++++++++ packages/shared-base-ui/src/color/index.ts | 1 + packages/shared-base-ui/src/index.ts | 1 + 6 files changed, 16 insertions(+), 21 deletions(-) delete mode 100644 packages/dashboard/src/utils/generateContactAvatarColor.ts create mode 100644 packages/shared-base-ui/src/color/avatar.ts create mode 100644 packages/shared-base-ui/src/color/index.ts diff --git a/packages/dashboard/src/pages/Personas/components/ContactTableRow/index.tsx b/packages/dashboard/src/pages/Personas/components/ContactTableRow/index.tsx index fbbbd0edf03d..6a881947abf2 100644 --- a/packages/dashboard/src/pages/Personas/components/ContactTableRow/index.tsx +++ b/packages/dashboard/src/pages/Personas/components/ContactTableRow/index.tsx @@ -5,11 +5,11 @@ import { makeStyles, MaskColorVar } from '@masknet/theme' import { StarIcon, MaskBlueIcon } from '@masknet/icons' import { Services } from '../../../../API' import { useDashboardI18N } from '../../../../locales' -import { generateContactAvatarColor } from '../../../../utils/generateContactAvatarColor' import { useAddContactToFavorite, useRemoveContactFromFavorite } from '../../hooks/useFavoriteContact' import { PersonaContext } from '../../hooks/usePersonaContext' import { useAsyncFn } from 'react-use' import { LoadingButton } from '@mui/lab' +import { generateContactAvatarColor } from '@masknet/shared-base-ui' const useStyles = makeStyles()((theme) => ({ favorite: { diff --git a/packages/dashboard/src/utils/generateContactAvatarColor.ts b/packages/dashboard/src/utils/generateContactAvatarColor.ts deleted file mode 100644 index f9cf5129a560..000000000000 --- a/packages/dashboard/src/utils/generateContactAvatarColor.ts +++ /dev/null @@ -1,9 +0,0 @@ -export function generateContactAvatarColor(string: string, theme: 'light' | 'dark') { - const hash = [...string].reduce((prev, current) => { - // eslint-disable-next-line no-bitwise - const next = current.charCodeAt(0) + (prev << 5) - prev - // eslint-disable-next-line no-bitwise - return next & next - }, 0) - return `hsl(${hash % 360}, ${theme === 'dark' ? '78%' : '98%'}, ${theme === 'dark' ? '50%' : '70%'})` -} diff --git a/packages/mask/src/utils/components/Avatar.tsx b/packages/mask/src/utils/components/Avatar.tsx index 0654b1f0f866..fedf4f44f371 100644 --- a/packages/mask/src/utils/components/Avatar.tsx +++ b/packages/mask/src/utils/components/Avatar.tsx @@ -1,20 +1,12 @@ import MuiAvatar, { AvatarProps } from '@mui/material/Avatar/Avatar' import type { ProfileInformation as Profile } from '@masknet/shared-base' import { useTheme } from '@mui/material' - -export function mapContactAvatarColor(string: string, theme: 'light' | 'dark') { - const hash = [...string].reduce((prev, current) => { - // eslint-disable-next-line no-bitwise - const next = current.charCodeAt(0) + (prev << 5) - prev - // eslint-disable-next-line no-bitwise - return next & next - }, 0) - return `hsl(${hash % 360}, ${theme === 'dark' ? '78%' : '98%'}, ${theme === 'dark' ? '50%' : '70%'})` -} +import { generateContactAvatarColor } from '@masknet/shared-base-ui' interface Props extends AvatarProps { person: Profile } + export function Avatar({ person, ...props }: Props) { const { avatar, nickname, identifier } = person const name = nickname || identifier.userId || '' @@ -24,7 +16,7 @@ export function Avatar({ person, ...props }: Props) { {first[0]} {(last || '')[0]} diff --git a/packages/shared-base-ui/src/color/avatar.ts b/packages/shared-base-ui/src/color/avatar.ts new file mode 100644 index 000000000000..2b32d55b143a --- /dev/null +++ b/packages/shared-base-ui/src/color/avatar.ts @@ -0,0 +1,10 @@ +export function generateContactAvatarColor(input: string, theme: 'light' | 'dark') { + const hash = [...input].reduce((prev, current) => { + // eslint-disable-next-line no-bitwise + const next = current.charCodeAt(0) + (prev << 5) - prev + // eslint-disable-next-line no-bitwise + return next & next + }, 0) + const values = [hash % 360, theme === 'dark' ? '78%' : '98%', theme === 'dark' ? '50%' : '70%'] + return `hsl(${values.join(', ')})` +} diff --git a/packages/shared-base-ui/src/color/index.ts b/packages/shared-base-ui/src/color/index.ts new file mode 100644 index 000000000000..886c6ec3a011 --- /dev/null +++ b/packages/shared-base-ui/src/color/index.ts @@ -0,0 +1 @@ +export * from './avatar' diff --git a/packages/shared-base-ui/src/index.ts b/packages/shared-base-ui/src/index.ts index a28a3c5e7b2d..12a723bb3a70 100644 --- a/packages/shared-base-ui/src/index.ts +++ b/packages/shared-base-ui/src/index.ts @@ -1,3 +1,4 @@ export * from './bom' +export * from './color' export * from './components' export * from './hooks' From c77cf17ecc76c3d7a8f6388ed3e2f1c896db3187 Mon Sep 17 00:00:00 2001 From: Septs Date: Thu, 12 May 2022 23:19:13 +0800 Subject: [PATCH 2/3] chore: accpet review --- .../components/ContactTableRow/index.tsx | 2 +- packages/mask/src/utils/components/Avatar.tsx | 2 +- .../src/color/avatar.ts | 0 .../src/color/index.ts | 0 packages/shared-base/src/index.ts | 24 +++++++++---------- 5 files changed, 14 insertions(+), 14 deletions(-) rename packages/{shared-base-ui => shared-base}/src/color/avatar.ts (100%) rename packages/{shared-base-ui => shared-base}/src/color/index.ts (100%) diff --git a/packages/dashboard/src/pages/Personas/components/ContactTableRow/index.tsx b/packages/dashboard/src/pages/Personas/components/ContactTableRow/index.tsx index 6a881947abf2..90c44883aee8 100644 --- a/packages/dashboard/src/pages/Personas/components/ContactTableRow/index.tsx +++ b/packages/dashboard/src/pages/Personas/components/ContactTableRow/index.tsx @@ -9,7 +9,7 @@ import { useAddContactToFavorite, useRemoveContactFromFavorite } from '../../hoo import { PersonaContext } from '../../hooks/usePersonaContext' import { useAsyncFn } from 'react-use' import { LoadingButton } from '@mui/lab' -import { generateContactAvatarColor } from '@masknet/shared-base-ui' +import { generateContactAvatarColor } from '@masknet/shared-base' const useStyles = makeStyles()((theme) => ({ favorite: { diff --git a/packages/mask/src/utils/components/Avatar.tsx b/packages/mask/src/utils/components/Avatar.tsx index fedf4f44f371..03530e878308 100644 --- a/packages/mask/src/utils/components/Avatar.tsx +++ b/packages/mask/src/utils/components/Avatar.tsx @@ -1,7 +1,7 @@ import MuiAvatar, { AvatarProps } from '@mui/material/Avatar/Avatar' import type { ProfileInformation as Profile } from '@masknet/shared-base' import { useTheme } from '@mui/material' -import { generateContactAvatarColor } from '@masknet/shared-base-ui' +import { generateContactAvatarColor } from '@masknet/shared-base' interface Props extends AvatarProps { person: Profile diff --git a/packages/shared-base-ui/src/color/avatar.ts b/packages/shared-base/src/color/avatar.ts similarity index 100% rename from packages/shared-base-ui/src/color/avatar.ts rename to packages/shared-base/src/color/avatar.ts diff --git a/packages/shared-base-ui/src/color/index.ts b/packages/shared-base/src/color/index.ts similarity index 100% rename from packages/shared-base-ui/src/color/index.ts rename to packages/shared-base/src/color/index.ts diff --git a/packages/shared-base/src/index.ts b/packages/shared-base/src/index.ts index ba5eb85dab5c..d9a26fe21636 100644 --- a/packages/shared-base/src/index.ts +++ b/packages/shared-base/src/index.ts @@ -1,18 +1,18 @@ -export * from './serializer' export * from './collections' -export * from './Identifier' +export * from './color' +export * from './convert' +export * from './crypto' export * from './i18n' -export * from './utils' +export * from './Identifier' export * from './kv-storage' -export * from './crypto' -export * from './Pure' -export * from './Persona/type' -export * from './Post/type' -export * from './Persona/type' -export * from './Site/type' -export * from './Routes' export * from './Messages/Mask' export * from './Messages/Shared' -export * from './Results' -export * from './convert' export * from './NextID/type' +export * from './Persona/type' +export * from './Post/type' +export * from './Pure' +export * from './Results' +export * from './Routes' +export * from './serializer' +export * from './Site/type' +export * from './utils' From 4e76089ad57adb91761c50417b0af7ef992465d3 Mon Sep 17 00:00:00 2001 From: Septs Date: Thu, 12 May 2022 23:24:45 +0800 Subject: [PATCH 3/3] fix: ci failed --- packages/shared-base-ui/src/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/shared-base-ui/src/index.ts b/packages/shared-base-ui/src/index.ts index 12a723bb3a70..a28a3c5e7b2d 100644 --- a/packages/shared-base-ui/src/index.ts +++ b/packages/shared-base-ui/src/index.ts @@ -1,4 +1,3 @@ export * from './bom' -export * from './color' export * from './components' export * from './hooks'