From f13f28afde3f22999ebae916f2a390b819559231 Mon Sep 17 00:00:00 2001 From: sualko Date: Sat, 29 Aug 2020 10:33:59 +0200 Subject: [PATCH] refactor: share with element reuse share selection component --- ts/Common/ShareSelection.scss | 33 +++++++ .../ShareSelection.tsx | 2 +- ts/Manager/ShareWith.scss | 35 +------ ts/Manager/ShareWith.tsx | 92 +++++-------------- ts/Restrictions/App.tsx | 5 +- ts/Restrictions/ShareWith.scss | 82 ----------------- 6 files changed, 59 insertions(+), 190 deletions(-) create mode 100644 ts/Common/ShareSelection.scss rename ts/{Restrictions => Common}/ShareSelection.tsx (98%) delete mode 100644 ts/Restrictions/ShareWith.scss diff --git a/ts/Common/ShareSelection.scss b/ts/Common/ShareSelection.scss new file mode 100644 index 0000000..b326988 --- /dev/null +++ b/ts/Common/ShareSelection.scss @@ -0,0 +1,33 @@ +.bbb-selection-container { + position: relative; + + input { + width: 100%; + } +} + +.bbb-selection { + position: absolute; + width: 100%; + background-color: #ffffff; + border: 1px solid var(--color-border-dark); + max-height: 88px; + overflow: auto; + box-shadow: 0 5px 10px -5px var(--color-box-shadow); + z-index: 100; + + li { + color: var(--color-text-lighter); + padding: 0 1em; + line-height: 44px; + + &.suggestion { + color: var(--color-main-text); + cursor: pointer; + + &:hover { + background-color: var(--color-background-hover); + } + } + } +} diff --git a/ts/Restrictions/ShareSelection.tsx b/ts/Common/ShareSelection.tsx similarity index 98% rename from ts/Restrictions/ShareSelection.tsx rename to ts/Common/ShareSelection.tsx index fec770b..61ad29d 100644 --- a/ts/Restrictions/ShareSelection.tsx +++ b/ts/Common/ShareSelection.tsx @@ -1,6 +1,6 @@ import React, { useState, useEffect } from 'react'; import { api, ShareWith, ShareType, ShareWithOption } from '../Common/Api'; -import './ShareWith.scss'; +import './ShareSelection.scss'; type Props = { selectShare: (selection: ShareWithOption) => void; diff --git a/ts/Manager/ShareWith.scss b/ts/Manager/ShareWith.scss index 1101b2e..f1214a4 100644 --- a/ts/Manager/ShareWith.scss +++ b/ts/Manager/ShareWith.scss @@ -35,43 +35,10 @@ } } -.bbb-selection-container { - position: relative; -} - -.bbb-selection { - position: absolute; - width: 100%; - background-color: #ffffff; - border: 1px solid var(--color-border-dark); - max-height: 88px; - overflow: auto; - box-shadow: 0 5px 10px -5px var(--color-box-shadow); - - li { - color: var(--color-text-lighter); - padding: 0 1em; - line-height: 44px; - - &.suggestion { - color: var(--color-main-text); - cursor: pointer; - - &:hover { - background-color: var(--color-background-hover); - } - } - } -} - -.bbb-form-shareWith { - margin-top: -1.5em; -} - .bbb-icon-unselected { opacity: 0.2 !important; &:hover { opacity: 0.5 !important; } -} \ No newline at end of file +} diff --git a/ts/Manager/ShareWith.tsx b/ts/Manager/ShareWith.tsx index 44cbc6d..a55e373 100644 --- a/ts/Manager/ShareWith.tsx +++ b/ts/Manager/ShareWith.tsx @@ -1,6 +1,7 @@ -import React, { useState, useEffect } from 'react'; -import { api, ShareWith, ShareType, RoomShare, Room, Permission, ShareWithOption } from '../Common/Api'; +import React from 'react'; +import { api, ShareWith, ShareType, RoomShare, Room, Permission } from '../Common/Api'; import './ShareWith.scss'; +import ShareSelection from '../Common/ShareSelection'; type Props = { room: Room; @@ -10,12 +11,6 @@ type Props = { } const ShareWith: React.FC = ({ room, permission, shares: allShares, setShares }) => { - const [search, setSearch] = useState(''); - const [hasFocus, setFocus] = useState(false); - const [showSearchResults, setShowSearchResults] = useState(false); - const [recommendations, setRecommendations] = useState(); - const [searchResults, setSearchResults] = useState(); - const isOwner = room.userId === OC.currentUser; const shares = (allShares && permission === Permission.Moderator) ? @@ -24,32 +19,11 @@ const ShareWith: React.FC = ({ room, permission, shares: allShares, setSh const sharedUserIds = shares ? shares.filter(share => share.shareType === ShareType.User).map(share => share.shareWith) : []; const sharedGroupIds = shares ? shares.filter(share => share.shareType === ShareType.Group).map(share => share.shareWith) : []; - useEffect(() => { - setSearchResults(undefined); - const searchQuery = search; - - api.searchShareWith(searchQuery).then(result => { - if (searchQuery === search) { - setSearchResults(result); - } - }); - }, [search]); - - useEffect(() => { - api.getRecommendedShareWith().then(result => setRecommendations(result)); - }, []); - - useEffect(() => { - setTimeout(() => setShowSearchResults(hasFocus), 100); - }, [hasFocus]); - async function addRoomShare(shareWith: string, shareType: number, displayName: string, permission: Permission) { const roomShare = await api.createRoomShare(room.id, shareType, shareWith, permission); roomShare.shareWithDisplayName = displayName; - console.log('addRoomShare', allShares, roomShare); - const newShares = allShares ? [...allShares] : []; const index = newShares.findIndex(share => share.id === roomShare.id); @@ -59,10 +33,7 @@ const ShareWith: React.FC = ({ room, permission, shares: allShares, setSh newShares.push(roomShare); } - console.log('newroomshares', newShares); - setShares(newShares); - setSearch(''); } async function deleteRoomShare(id: number) { @@ -79,27 +50,12 @@ const ShareWith: React.FC = ({ room, permission, shares: allShares, setSh return addRoomShare(share.shareWith, share.shareType, share.shareWithDisplayName || share.shareWith, newPermission); } - function renderSearchResults(options: ShareWith|undefined) { - const results = options ? [ - ...options.users.filter(user => !sharedUserIds.includes(user.value.shareWith)), - ...options.groups.filter(group => !sharedGroupIds.includes(group.value.shareWith)), - ] : []; - - const renderOption = (option: ShareWithOption) => { - return (
  • addRoomShare(option.value.shareWith, option.value.shareType, option.label, permission)}> - {option.label}{option.value.shareType === ShareType.Group ? ` (${t('bbb', 'Group')})` : ''} -
    • ); - }; - - return ( -
      - {!options ? -
    • {t('bbb', 'Searching')}
      • : - ( - (results.length === 0 && search) ?
    • {t('bbb', 'No matches')}
      • : results.map(renderOption) - )} -
    - ); + function getAvatarUrl(userId: string) { + return OC.generateUrl('/avatar/' + encodeURIComponent(userId) + '/' + 32, { + user: userId, + size: 32, + requesttoken: OC.requestToken, + }); } function renderShares(shares: RoomShare[]) { @@ -116,11 +72,7 @@ const ShareWith: React.FC = ({ room, permission, shares: allShares, setSh return (