From f51f5a6e737669e4eccc909cc9d402ca3fc0baf4 Mon Sep 17 00:00:00 2001 From: aidencao Date: Thu, 12 Oct 2023 17:09:51 +0800 Subject: [PATCH] feat(dcellar-web-ui): minor styles fix --- .../src/components/formitems/QuotaItem.tsx | 6 +++++- .../object/components/CancelObjectOperation.tsx | 12 ++++++++++-- .../object/components/DeleteObjectOperation.tsx | 6 +++++- .../object/components/DetailObjectOperation.tsx | 3 +-- .../src/modules/object/components/ViewerList.tsx | 15 ++++++++++++--- .../src/modules/upload/UploadObjectsOperation.tsx | 2 +- 6 files changed, 34 insertions(+), 10 deletions(-) diff --git a/apps/dcellar-web-ui/src/components/formitems/QuotaItem.tsx b/apps/dcellar-web-ui/src/components/formitems/QuotaItem.tsx index bc0e3711..9f837a08 100644 --- a/apps/dcellar-web-ui/src/components/formitems/QuotaItem.tsx +++ b/apps/dcellar-web-ui/src/components/formitems/QuotaItem.tsx @@ -55,6 +55,7 @@ export const QuotaItem = memo(function QuotaItem({ quotaUpdateAt, }) { const dispatch = useAppDispatch(); + const [_, forceUpdate] = useState(0); const percent = valueToPercent(value); const title = formatByGB(value * G_BYTES).replace(' ', ''); const originPercent = valueToPercent(current || 0); @@ -87,7 +88,7 @@ export const QuotaItem = memo(function QuotaItem({ onChange(percentToValue(percent)); }; - const onDragStart = (e: React.MouseEvent) => { + const onDragStart = () => { const container = document.getElementById('buy-quota-progress-bar')!; const movingClass = 'indicator-moving'; @@ -109,6 +110,7 @@ export const QuotaItem = memo(function QuotaItem({ container.classList.remove(movingClass); document.removeEventListener('mousemove', mousemove); document.removeEventListener('mouseup', mouseup); + forceUpdate((v) => v + 1); }; document.addEventListener('mousemove', mousemove); document.addEventListener('mouseup', mouseup); @@ -233,6 +235,7 @@ const Indicator = styled(Box)` right: -7px; top: -3px; cursor: pointer; + .indicator-moving & { background: #009e2c; } @@ -244,6 +247,7 @@ const Progress = styled(Box)` position: absolute; left: 0; top: 0; + .indicator-moving & { background: #009e2c; } diff --git a/apps/dcellar-web-ui/src/modules/object/components/CancelObjectOperation.tsx b/apps/dcellar-web-ui/src/modules/object/components/CancelObjectOperation.tsx index ad25e33a..260f682b 100644 --- a/apps/dcellar-web-ui/src/modules/object/components/CancelObjectOperation.tsx +++ b/apps/dcellar-web-ui/src/modules/object/components/CancelObjectOperation.tsx @@ -11,7 +11,12 @@ import { import { USER_REJECT_STATUS_NUM } from '@/utils/constant'; import { Tips } from '@/components/common/Tips'; import { DCButton } from '@/components/common/DCButton'; -import { addDeletedObject, setStatusDetail, TStatusDetail } from '@/store/slices/object'; +import { + addDeletedObject, + setSelectedRowKeys, + setStatusDetail, + TStatusDetail, +} from '@/store/slices/object'; import { useAppDispatch, useAppSelector } from '@/store'; import { useAsyncEffect } from 'ahooks'; import { queryLockFee } from '@/facade/object'; @@ -32,6 +37,7 @@ import { import { getClient } from '@/facade'; import { signTypedDataCallback } from '@/facade/wallet'; import { Animates } from '@/components/AnimatePng'; +import { without } from 'lodash-es'; export const renderFee = ( key: string, @@ -99,7 +105,7 @@ export const CancelObjectOperation = memo( const { bnb: { price: bnbPrice }, } = useAppSelector((root) => root.global); - const { bucketName } = useAppSelector((root) => root.object); + const { bucketName, selectedRowKeys } = useAppSelector((root) => root.object); const availableBalance = useAppSelector(selectAvailableBalance(bucket?.PaymentAddress)); const exchangeRate = +bnbPrice ?? 0; const [loading, setLoading] = useState(false); @@ -263,6 +269,8 @@ export const CancelObjectOperation = memo( ts: Date.now(), }), ); + // unselected + dispatch(setSelectedRowKeys(without(selectedRowKeys, objectInfo.ObjectName))); refetch(); dispatch(setupBucketQuota(bucketName)); } else { diff --git a/apps/dcellar-web-ui/src/modules/object/components/DeleteObjectOperation.tsx b/apps/dcellar-web-ui/src/modules/object/components/DeleteObjectOperation.tsx index 2e937a3c..9b2abc8d 100644 --- a/apps/dcellar-web-ui/src/modules/object/components/DeleteObjectOperation.tsx +++ b/apps/dcellar-web-ui/src/modules/object/components/DeleteObjectOperation.tsx @@ -15,6 +15,7 @@ import { useAppDispatch, useAppSelector } from '@/store'; import { addDeletedObject, setObjectList, + setSelectedRowKeys, setStatusDetail, TStatusDetail, } from '@/store/slices/object'; @@ -40,6 +41,7 @@ import { signTypedDataCallback } from '@/facade/wallet'; import { reportEvent } from '@/utils/gtag'; import { Animates } from '@/components/AnimatePng'; import { TotalFees } from '@/modules/object/components/TotalFees'; +import { without } from 'lodash-es'; interface DeleteObjectOperationProps { selectObjectInfo: ObjectMeta; @@ -66,7 +68,7 @@ export const DeleteObjectOperation = memo( const { loginAccount } = useAppSelector((root) => root.persist); // Since reserveTime rarely change, we can optimize performance by using global data. const { reserveTime } = useAppSelector(selectStoreFeeParams); - const { bucketName, path } = useAppSelector((root) => root.object); + const { bucketName, path, selectedRowKeys } = useAppSelector((root) => root.object); const [balanceEnough, setBalanceEnough] = useState(true); const [loading, setLoading] = useState(false); const [buttonDisabled, setButtonDisabled] = useState(false); @@ -295,6 +297,8 @@ export const DeleteObjectOperation = memo( ts: Date.now(), }), ); + // unselected + dispatch(setSelectedRowKeys(without(selectedRowKeys, objectInfo.ObjectName))); } else { toast.error({ description: 'Object deletion failed.' }); } diff --git a/apps/dcellar-web-ui/src/modules/object/components/DetailObjectOperation.tsx b/apps/dcellar-web-ui/src/modules/object/components/DetailObjectOperation.tsx index 6aadcd0e..46c158db 100644 --- a/apps/dcellar-web-ui/src/modules/object/components/DetailObjectOperation.tsx +++ b/apps/dcellar-web-ui/src/modules/object/components/DetailObjectOperation.tsx @@ -106,13 +106,12 @@ const renderAddressWithLink = ( }; const renderUrlWithLink = ( - text: string, + encodedText: string, needSlim = true, reservedNumber = 32, gaClickName?: string, gaCopyClickName?: string, ) => { - const encodedText = encodeURI(text); const finalText = needSlim ? encodedText.substring(0, reservedNumber) + '...' : encodedText; return ( diff --git a/apps/dcellar-web-ui/src/modules/object/components/ViewerList.tsx b/apps/dcellar-web-ui/src/modules/object/components/ViewerList.tsx index dc855d2a..bb578ac5 100644 --- a/apps/dcellar-web-ui/src/modules/object/components/ViewerList.tsx +++ b/apps/dcellar-web-ui/src/modules/object/components/ViewerList.tsx @@ -23,7 +23,7 @@ import { } from '@bnb-chain/greenfield-js-sdk'; import { useAsyncEffect, useMount, useUnmount } from 'ahooks'; import { selectGroupList, setMemberListPage, setupGroups } from '@/store/slices/group'; -import { without } from 'lodash-es'; +import { uniq, without } from 'lodash-es'; import { RenderItem } from '@/components/common/DCComboBox/RenderItem'; import { useTableNav } from '@/components/common/DCTable/useTableNav'; import { ObjectMeta, PolicyMeta } from '@bnb-chain/greenfield-js-sdk/dist/esm/types/sp/Common'; @@ -40,6 +40,7 @@ import { MenuOption } from '@/components/common/DCMenuList'; const MAX_COUNT = 20; const MEMBER_SIZE = 20; +const MAX_GROUP = 10; const menus: MenuOption[] = [ { label: 'Viewer', value: 'viewer' }, @@ -113,7 +114,11 @@ export const ViewerList = memo(function ViewerList({ selectObje dispatch(setObjectPoliciesPage(0)); }; - const invalid = !!error || !!invalidIds.length; + const groups = uniq( + values.concat(memberList.map((l) => l.PrincipalValue)).filter((v) => v.match(GROUP_ID)), + ); + + const invalid = !!error || !!invalidIds.length || groups.length > MAX_GROUP; const onError = (type: string) => { switch (type) { @@ -399,7 +404,11 @@ export const ViewerList = memo(function ViewerList({ selectObje {invalid && ( - {!invalidIds.length ? error : 'Invalid addresses or group IDs.\n'} + {!invalidIds.length + ? groups.length > MAX_GROUP + ? `Exceed the group limit (${MAX_GROUP})` + : error + : 'Invalid addresses or group IDs.\n'} )} diff --git a/apps/dcellar-web-ui/src/modules/upload/UploadObjectsOperation.tsx b/apps/dcellar-web-ui/src/modules/upload/UploadObjectsOperation.tsx index bcfaffd3..e1070d68 100644 --- a/apps/dcellar-web-ui/src/modules/upload/UploadObjectsOperation.tsx +++ b/apps/dcellar-web-ui/src/modules/upload/UploadObjectsOperation.tsx @@ -44,7 +44,7 @@ import { UPLOADING_STATUSES, WaitFile, } from '@/store/slices/global'; -import { useAsyncEffect, useScroll, useUnmount, useWhyDidYouUpdate } from 'ahooks'; +import { useAsyncEffect, useScroll } from 'ahooks'; import { VisibilityType } from '@bnb-chain/greenfield-cosmos-types/greenfield/storage/common'; import { OBJECT_ERROR_TYPES, ObjectErrorType } from '../object/ObjectError'; import { isEmpty, round } from 'lodash-es';