Danovin
/
application_17
5
0
Fork 0
Code Issues 3 Pull Requests Projects Releases Wiki Activity

edit and delete button added in mobile view for address list | 20

Browse Source
temp
mahdi 2 years ago
parent 800f85613c
commit 654e2e2eb4
2 changed files with 73 additions and 40 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 64
      src/views/Address/index.js
  2. 49
      src/views/DeliveryForm/Address/index.js

64
src/views/Address/index.js
Unescape View File

@ -12,7 +12,8 @@ import Loading from "../../components/Loading";
import Radio from "../../components/Radio"; import Radio from "../../components/Radio";
//assets //assets
import dropdownIcon from "../../assets/icons/dropdown-blue.svg"; import dropdownIcon from "../../assets/icons/white-dropdown.svg";
import arrowBlueIcon from "../../assets/icons/arrow-right-blue.svg"; import arrowBlueIcon from "../../assets/icons/arrow-right-blue.svg";
import arrowWhiteIcon from "../../assets/icons/arrow-left-white.svg"; import arrowWhiteIcon from "../../assets/icons/arrow-left-white.svg";
@ -328,16 +329,27 @@ export const Address = ({
onClick={() => submit()} onClick={() => submit()}
/> />
<button <button
className="bg-transparent mt-4 text-tiny py-3 flex flex-row justify-center items-center border border-solid border-blueC0 text-green7B rounded-full" className="bg-transparent mt-4 text-base lg:text-tiny border bg-blueC0 text-white font-bold rounded-md py-3.5 lg:py-4 flex flex-row justify-center items-center"
onClick={() => setPhase("deliveryForm")} onClick={() => setPhase("deliveryForm")}
> >
بازگشت بازگشت
<img <img
src={dropdownIcon} src={dropdownIcon}
alt="" alt=""
className="w-3.5 transform rotate-90" className="w-4 transform rotate-90"
/> />
</button> </button>
{/* <button
className="bg-transparent mt-4 text-tiny py-3 flex flex-row justify-center items-center border border-solid border-blueC0 text-green7B rounded-full"
onClick={() => setPhase("deliveryForm")}
>
fsddsf
<img
src={dropdownIcon}
alt=""
className="w-3.5 transform rotate-90"
/>
</button> */}
</div> </div>
</div> </div>
</div> </div>
@ -348,29 +360,31 @@ export const Address = ({
profilePage ? "mx-auto" : "" profilePage ? "mx-auto" : ""
}`} }`}
> >
<div {!profilePage && (
className={`flex flex-row items-center mb-7 cursor-pointer <div
`} className={`flex flex-row items-center mb-7 cursor-pointer
onClick={() => { `}
setActiveCheckbox(!activeCheckbox); onClick={() => {
}} setActiveCheckbox(!activeCheckbox);
> }}
<div className="w-4 h-4 flex flex-col items-center justify-center ml-1 bg-gray-200 rounded-full"> >
<div className="w-2 h-2 bg-blueC0 rounded-full"></div> <div className="w-4 h-4 flex flex-col items-center justify-center ml-1 bg-gray-200 rounded-full">
<div className="w-2 h-2 bg-blueC0 rounded-full"></div>
</div>
<p className="font-bold text-sm ">
{activeCheckbox === false
? " گیرنده فرد دیگری است "
: " برای خودم "}
<span className="text-xs font-light">
{activeCheckbox
? "(در صورتی که فرد گیرنده شما نیستید اینجا کلیک کنید)"
: "(در صورتی که فرد گیرنده خودتون هستید اینجا کلیک کنید)"}
</span>
</p>
</div> </div>
<p className="font-bold text-sm "> )}
{activeCheckbox === false
? " گیرنده فرد دیگری است " {activeCheckbox === false && !profilePage ? (
: " برای خودم "}
<span className="text-xs font-light">
{activeCheckbox
? "(در صورتی که فرد گیرنده شما نیستید اینجا کلیک کنید)"
: "(در صورتی که فرد گیرنده خودتون هستید اینجا کلیک کنید)"}
</span>
</p>
</div>
{console.log(activeCheckbox)}
{activeCheckbox === false ? (
<> <>
<Header <Header
title="اطلاعات هویتی" title="اطلاعات هویتی"

49
src/views/DeliveryForm/Address/index.js
Unescape View File

@ -22,7 +22,7 @@ function Address({
const Location = ({ address, active }) => { const Location = ({ address, active }) => {
return isMobile ? ( return isMobile ? (
<button <button
className={`flex flex-row border-2 border-solid items-center w-full px-3 py-2 rounded-md mt-2 transition-all duration-500 dark:bg-opacity-5 ${ className={`flex flex-col border-2 border-solid items-center w-full px-3 py-2 rounded-md mt-2 transition-all duration-500 dark:bg-opacity-5 ${
userAddressId === address?.id userAddressId === address?.id
? "bg-blueC0 bg-opacity-5 border-blueC0" ? "bg-blueC0 bg-opacity-5 border-blueC0"
: "bg-grayF9 border-gray-200 dark:border-gray-500" : "bg-grayF9 border-gray-200 dark:border-gray-500"
@ -33,21 +33,40 @@ function Address({
: update({ userAddressId: address.id, userId }) : update({ userAddressId: address.id, userId })
} }
> >
{loading && userAddressId !== address?.id ? ( <div className="flex items-center">
<Loading size={2} color="bg-gray-400" /> {loading && userAddressId !== address?.id ? (
) : ( <Loading size={2} color="bg-gray-400" />
<Radio active={active} /> ) : (
)} <Radio active={active} />
<div className="flex flex-1 flex-col mr-2"> )}
<li <div className="flex flex-1 flex-col mr-2">
className={`text-right text-sm font-semibold leading-5 text-blue52 ${ <li
userAddressId === address?.id className={`text-right text-sm font-semibold leading-5 text-blue52 ${
? "dark:text-blueC0" userAddressId === address?.id
: "dark:text-gray-400" ? "dark:text-blueC0"
}`} : "dark:text-gray-400"
}`}
>
{address.address}
</li>
</div>
</div>
{/* edit / delete button */}
<div className="flex items-center gap-x-4 mt-4">
<div
style={{ border: "solid 1px #fca5a5" }}
class="w-full flex flex-row items-center justify-between px-2 py-1 rounded-sm cursor-pointer"
> >
{address.address} <button class="text-sm">حذف</button>
</li> <img src={trash} alt="delete-address" className="w-5 mr-3" />
</div>
<div
style={{ border: "solid 1px #12CF7F" }}
class="w-full flex flex-row items-center justify-between px-2 py-1 rounded-sm cursor-pointer"
>
<button class="text-sm">ویرایش</button>
<img src={editButton} alt="edit-address" className="w-5 mr-3 " />
</div>
</div> </div>
</button> </button>
) : ( ) : (

Write Preview
Loading…
Cancel
Save