From ad994f1eaf417d30b1d81a37a66187cd47dbbfca Mon Sep 17 00:00:00 2001 From: zerosoul Date: Thu, 17 Mar 2022 15:08:40 +0800 Subject: [PATCH] refactor: add member to channel modal --- src/common/component/styled/Checkbox.js | 5 +- src/common/component/styled/Input.js | 5 + src/routes/chat/ChannelChat/AddMemberModal.js | 139 +++--------------- .../chat/ChannelChat/add.member.styled.js | 109 ++++++++++++++ 4 files changed, 137 insertions(+), 121 deletions(-) create mode 100644 src/routes/chat/ChannelChat/add.member.styled.js diff --git a/src/common/component/styled/Checkbox.js b/src/common/component/styled/Checkbox.js index 30f4bc82..71c3ad2b 100644 --- a/src/common/component/styled/Checkbox.js +++ b/src/common/component/styled/Checkbox.js @@ -30,10 +30,7 @@ const Styled = styled.input` } } &:disabled { - border-color: #ccc; - &::before { - box-shadow: inset 10px 10px #ccc; - } + opacity: 0.4; } `; export default function StyledCheckbox(props) { diff --git a/src/common/component/styled/Input.js b/src/common/component/styled/Input.js index de7d3f1c..f963946c 100644 --- a/src/common/component/styled/Input.js +++ b/src/common/component/styled/Input.js @@ -10,6 +10,11 @@ const StyledInput = styled.input` line-height: 20px; color: #333; padding: 8px; + &.none { + border: none; + background: none; + box-shadow: none; + } &:disabled { color: #78787c; background-color: #f9fafb; diff --git a/src/routes/chat/ChannelChat/AddMemberModal.js b/src/routes/chat/ChannelChat/AddMemberModal.js index 171ecb56..934754b6 100644 --- a/src/routes/chat/ChannelChat/AddMemberModal.js +++ b/src/routes/chat/ChannelChat/AddMemberModal.js @@ -1,113 +1,15 @@ import { useState, useEffect } from "react"; -import styled from "styled-components"; import { useSelector } from "react-redux"; import Modal from "../../../common/component/Modal"; import Button from "../../../common/component/styled/Button"; +import Input from "../../../common/component/styled/Input"; import Contact from "../../../common/component/Contact"; import StyledCheckbox from "../../../common/component/styled/Checkbox"; import { useAddMembersMutation } from "../../../app/services/channel"; -import closeIcon from "../../../assets/icons/close.svg?url"; +import CloseIcon from "../../../assets/icons/close.svg"; import toast from "react-hot-toast"; -// import useFilteredUsers from "../../../common/hook/useFilteredUsers"; -const Styled = styled.div` - padding: 16px; - filter: drop-shadow(0px 25px 50px rgba(31, 41, 55, 0.25)); - border-radius: 8px; - background-color: #fff; - min-width: 410px; - > .head { - font-weight: 600; - font-size: 18px; - line-height: 28px; - color: #374151; - margin-bottom: 16px; - display: flex; - justify-content: space-between; - align-items: center; - .close { - width: 12px; - height: 12px; - cursor: pointer; - } - } - > .filter { - width: 376px; - height: 40px; - background: rgba(0, 0, 0, 0.08); - border-radius: 4px; - padding: 6px 8px; - display: flex; - align-items: center; - margin-bottom: 12px; - .selects { - display: flex; - align-items: center; - gap: 5px; - width: 100%; - overflow: scroll; - - white-space: nowrap; - &::-webkit-scrollbar { - width: 0; /* Remove scrollbar space */ - height: 0; /* Remove scrollbar space */ - background: transparent; /* Optional: just make scrollbar invisible */ - } - .select { - padding: 4px 6px; - background: #52edff; - border-radius: 4px; - font-weight: 600; - font-size: 14px; - line-height: 20px; - color: #ffffff; - display: flex; - justify-content: space-between; - align-items: center; - gap: 5px; - .close { - cursor: pointer; - width: 12px; - height: 12px; - filter: invert(1); - } - } - } - /* .input{ - background: none; - padding: ; - } */ - } - .users { - display: flex; - flex-direction: column; - /* height: 260px; */ - padding-bottom: 20px; - max-height: 364px; - overflow: scroll; - .user { - cursor: pointer; - display: flex; - align-items: center; - padding: 4px 8px; - /* margin: 0 4px; */ - width: -webkit-fill-available; - border-radius: 8px; - &:hover { - background: rgba(116, 127, 141, 0.1); - } - > div { - width: 100%; - } - } - } - > .btn { - width: 100%; - margin-top: 16px; - font-weight: 500; - font-size: 14px; - line-height: 20px; - } -`; +import useFilteredUsers from "../../../common/hook/useFilteredUsers"; +import Styled from "./add.member.styled"; export default function AddMemberModal({ uids = [], cid = null, closeModal }) { const [ @@ -115,10 +17,10 @@ export default function AddMemberModal({ uids = [], cid = null, closeModal }) { { isLoading: isAdding, isSuccess }, ] = useAddMembersMutation(); const [selects, setSelects] = useState([]); - const { channel, contactIds, contactData } = useSelector((store) => { + const { channel, contactData } = useSelector((store) => { return { channel: store.channels.byId[cid], - contactIds: store.contacts.ids, + // contactIds: store.contacts.ids, contactData: store.contacts.byId, }; }); @@ -132,7 +34,7 @@ export default function AddMemberModal({ uids = [], cid = null, closeModal }) { const handleAddMembers = () => { addMembers({ id: cid, members: selects }); }; - // const { input, updateInput, contacts } = useFilteredUsers(); + const { input, updateInput, contacts = [] } = useFilteredUsers(); const toggleCheckMember = ({ currentTarget }) => { const { uid } = currentTarget.dataset; if (selects.includes(+uid)) { @@ -143,40 +45,43 @@ export default function AddMemberModal({ uids = [], cid = null, closeModal }) { setSelects([...selects, +uid]); } }; - // const handleFilterInput = (evt) => { - // updateInput(evt.target.value); - // }; + const handleFilterInput = (evt) => { + updateInput(evt.target.value); + }; if (!channel) return null; + const contactIds = contacts.map(({ uid }) => uid); console.log("selects", selects); return (
Add friends to #{channel.name}{" "} - +
+ {/* {selects && selects.length > 0 && ( */}
    {selects.map((uid) => { return (
  • {contactData[uid].name} -
    • ); })} +
- {/* */} + {/* )} */}
    {contactIds.map((uid) => { diff --git a/src/routes/chat/ChannelChat/add.member.styled.js b/src/routes/chat/ChannelChat/add.member.styled.js new file mode 100644 index 00000000..215cabdb --- /dev/null +++ b/src/routes/chat/ChannelChat/add.member.styled.js @@ -0,0 +1,109 @@ +import styled from "styled-components"; + +const Styled = styled.div` + padding: 16px; + filter: drop-shadow(0px 25px 50px rgba(31, 41, 55, 0.25)); + border-radius: 8px; + background-color: #fff; + min-width: 410px; + > .head { + font-weight: 600; + font-size: 18px; + line-height: 28px; + color: #374151; + margin-bottom: 16px; + display: flex; + justify-content: space-between; + align-items: center; + .close { + width: 12px; + height: 12px; + cursor: pointer; + } + } + > .filter { + width: 376px; + min-height: 40px; + padding: 6px 8px; + display: flex; + align-items: center; + margin-bottom: 12px; + background: #ffffff; + border: 1px solid #e5e7eb; + box-shadow: 0px 1px 2px rgba(31, 41, 55, 0.08); + border-radius: 4px; + .selects { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 5px; + width: 100%; + overflow: scroll; + + /* white-space: nowrap; */ + &::-webkit-scrollbar { + width: 0; /* Remove scrollbar space */ + height: 0; /* Remove scrollbar space */ + background: transparent; /* Optional: just make scrollbar invisible */ + } + .select { + padding: 4px 6px; + background: #52edff; + border-radius: 4px; + font-weight: 600; + font-size: 14px; + line-height: 20px; + color: #ffffff; + display: flex; + justify-content: space-between; + align-items: center; + gap: 5px; + .close { + cursor: pointer; + width: 12px; + height: 12px; + path { + fill: #fff; + fill-opacity: 1; + } + /* filter: invert(1); */ + } + } + .input { + width: fit-content; + } + } + } + .users { + display: flex; + flex-direction: column; + /* height: 260px; */ + padding-bottom: 20px; + max-height: 364px; + overflow: scroll; + .user { + cursor: pointer; + display: flex; + align-items: center; + padding: 4px 8px; + /* margin: 0 4px; */ + width: -webkit-fill-available; + border-radius: 8px; + &:hover { + background: rgba(116, 127, 141, 0.1); + } + > div { + width: 100%; + } + } + } + > .btn { + width: 100%; + margin-top: 16px; + font-weight: 500; + font-size: 14px; + line-height: 20px; + } +`; + +export default Styled;