fix(ui): remove invalid MUI v5 Button loading prop project-wide
prop loading روی Button فقط در MUI v6+ پشتیبانی میشود؛ این پروژه v5 است و هشدار "Received false for a non-boolean attribute loading" میداد. - دکمههای login/verify: disabled + CircularProgress شرطی (بازخورد بصری حفظ شد) - بقیه دکمهها: loading → disabled (ادغام با disabled موجود در صورت وجود) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -98,7 +98,7 @@ function ItemDoctor({ doctor, loading, setDoctors, priority = false }) {
|
|||||||
<Button
|
<Button
|
||||||
variant="contained"
|
variant="contained"
|
||||||
onClick={handleLoading}
|
onClick={handleLoading}
|
||||||
loading={doctor?.loading}
|
disabled={doctor?.loading}
|
||||||
className="!p-[14px] !absolute !left-4 !bottom-4 !rounded-full !w-fit"
|
className="!p-[14px] !absolute !left-4 !bottom-4 !rounded-full !w-fit"
|
||||||
>
|
>
|
||||||
<div className={doctor && doctor.loading ? "opacity-0" : ""}>
|
<div className={doctor && doctor.loading ? "opacity-0" : ""}>
|
||||||
|
|||||||
@@ -42,7 +42,7 @@ function ModalLogout({ open, handleClose }) {
|
|||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
onClick={logout}
|
onClick={logout}
|
||||||
loading={loading}
|
disabled={loading}
|
||||||
variant="contained"
|
variant="contained"
|
||||||
className="!py-[4px] md:!py-[6px] !min-h-[32px] md:!min-h-[39px] lg:!min-h-[46px] lg:!py-[8px] !px-[10px] md:!px-[14px] lg:!px-[18px] !rounded-[4px] !text-[12px] md:!text-[14px] lg:!text-[16px] !font-medium"
|
className="!py-[4px] md:!py-[6px] !min-h-[32px] md:!min-h-[39px] lg:!min-h-[46px] lg:!py-[8px] !px-[10px] md:!px-[14px] lg:!px-[18px] !rounded-[4px] !text-[12px] md:!text-[14px] lg:!text-[16px] !font-medium"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -50,7 +50,7 @@ function SendAnswer({ data }) {
|
|||||||
updateValue={(val) => setComment(val)}
|
updateValue={(val) => setComment(val)}
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
loading={loading}
|
disabled={loading}
|
||||||
onClick={sendReq}
|
onClick={sendReq}
|
||||||
variant="contained"
|
variant="contained"
|
||||||
className="!p-2 !h-10 !text-[12px] !font-medium sm:!py-[10px] md:!px-[12px] !rounded-[8px]
|
className="!p-2 !h-10 !text-[12px] !font-medium sm:!py-[10px] md:!px-[12px] !rounded-[8px]
|
||||||
|
|||||||
@@ -45,7 +45,7 @@ function SendAppo({ hour, setStep, setSelectedSlot, date, setSelectedDate }) {
|
|||||||
<Button
|
<Button
|
||||||
className="!gap-[4px] !text-[16px] !font-medium !shadow-none !px-[12px] !py-[8px] md:!py-[9px] !w-full md:!w-fit !min-w-[157px]"
|
className="!gap-[4px] !text-[16px] !font-medium !shadow-none !px-[12px] !py-[8px] md:!py-[9px] !w-full md:!w-fit !min-w-[157px]"
|
||||||
variant="contained"
|
variant="contained"
|
||||||
loading={loading}
|
disabled={loading}
|
||||||
onClick={sendReq}
|
onClick={sendReq}
|
||||||
disabled={!hour}
|
disabled={!hour}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -74,7 +74,7 @@ function Content({
|
|||||||
</div>
|
</div>
|
||||||
<div className="w-full flex justify-end">
|
<div className="w-full flex justify-end">
|
||||||
<Button
|
<Button
|
||||||
loading={loading}
|
disabled={loading}
|
||||||
className="!w-full md:!w-fit !flex !px-3 items-center justify-center gap-1 mr-auto"
|
className="!w-full md:!w-fit !flex !px-3 items-center justify-center gap-1 mr-auto"
|
||||||
onClick={handleClick}
|
onClick={handleClick}
|
||||||
variant="contained"
|
variant="contained"
|
||||||
|
|||||||
@@ -129,7 +129,7 @@ function SubmitData({ setStep, data, prevData, setErrors, doctor, selectedSlot,
|
|||||||
return (
|
return (
|
||||||
<ButtonFixed>
|
<ButtonFixed>
|
||||||
<Button
|
<Button
|
||||||
loading={loading}
|
disabled={loading}
|
||||||
className={`
|
className={`
|
||||||
!flex !w-full md:!w-fit !mt-0 md:!mt-[32px]
|
!flex !w-full md:!w-fit !mt-0 md:!mt-[32px]
|
||||||
!gap-[4px] md:!mr-auto !px-[12px] !py-[8px] md:!py-[9px] !min-w-[150px]
|
!gap-[4px] md:!mr-auto !px-[12px] !py-[8px] md:!py-[9px] !min-w-[150px]
|
||||||
|
|||||||
@@ -16,7 +16,7 @@ function ButtonApply({ sendReq, setOpen }) {
|
|||||||
return (
|
return (
|
||||||
<div className="flex justify-end w-full">
|
<div className="flex justify-end w-full">
|
||||||
<Button
|
<Button
|
||||||
loading={loading}
|
disabled={loading}
|
||||||
variant="contained"
|
variant="contained"
|
||||||
onClick={handleClick}
|
onClick={handleClick}
|
||||||
className="!px-3 !py-2 !text-[16px] !font-medium"
|
className="!px-3 !py-2 !text-[16px] !font-medium"
|
||||||
|
|||||||
@@ -29,7 +29,7 @@ function SendReq({ filter, setFilter, setDataInURL, sendReq }) {
|
|||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<Button
|
<Button
|
||||||
loading={loading}
|
disabled={loading}
|
||||||
onClick={filterData}
|
onClick={filterData}
|
||||||
className="!flex !m-1 !rounded-[4px] !w-[36px] sm:!w-[42px] md:!w-[49px] lg:!w-[56px] !min-w-[36px] sm:!min-w-[42px] md:!min-w-[49px] lg:!min-w-[56px]
|
className="!flex !m-1 !rounded-[4px] !w-[36px] sm:!w-[42px] md:!w-[49px] lg:!w-[56px] !min-w-[36px] sm:!min-w-[42px] md:!min-w-[49px] lg:!min-w-[56px]
|
||||||
!gap-2.5 !p-2.5 md:!p-4 !h-[calc(100%_-_8px)]"
|
!gap-2.5 !p-2.5 md:!p-4 !h-[calc(100%_-_8px)]"
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ function FilterButton({ limit, selected, filterData }) {
|
|||||||
return (
|
return (
|
||||||
<Button
|
<Button
|
||||||
onClick={sendReq}
|
onClick={sendReq}
|
||||||
loading={loading}
|
disabled={loading}
|
||||||
className="
|
className="
|
||||||
!rounded-[4px] !gap-2.5 !p-2 md:!p-3 lg:!p-4 !grid !place-items-center
|
!rounded-[4px] !gap-2.5 !p-2 md:!p-3 lg:!p-4 !grid !place-items-center
|
||||||
!w-[38px] sm:!w-[44px] md:!w-[50px] lg:!w-[56px]
|
!w-[38px] sm:!w-[44px] md:!w-[50px] lg:!w-[56px]
|
||||||
|
|||||||
@@ -73,7 +73,7 @@ function Content({
|
|||||||
<div className="w-full flex justify-end">
|
<div className="w-full flex justify-end">
|
||||||
<Button
|
<Button
|
||||||
color="primary"
|
color="primary"
|
||||||
loading={loading}
|
disabled={loading}
|
||||||
variant="contained"
|
variant="contained"
|
||||||
onClick={handleFilter}
|
onClick={handleFilter}
|
||||||
disabled={!selected.city || !selected.province}
|
disabled={!selected.city || !selected.province}
|
||||||
|
|||||||
@@ -68,7 +68,7 @@ function ItemClinic({ setFilteredClinics, data, loading }) {
|
|||||||
<Link href={`/clinic/${data.uuid}`}>
|
<Link href={`/clinic/${data.uuid}`}>
|
||||||
<Button
|
<Button
|
||||||
onClick={handleLoading}
|
onClick={handleLoading}
|
||||||
loading={data?.loading}
|
disabled={data?.loading}
|
||||||
className="!bg-[#5559CE] !p-[14px] !absolute !left-4 !bottom-4 !rounded-full !w-fit"
|
className="!bg-[#5559CE] !p-[14px] !absolute !left-4 !bottom-4 !rounded-full !w-fit"
|
||||||
>
|
>
|
||||||
<div className={data && data.loading ? "opacity-0" : ""}>
|
<div className={data && data.loading ? "opacity-0" : ""}>
|
||||||
|
|||||||
@@ -90,8 +90,7 @@ function ButtonSendData({
|
|||||||
<Button
|
<Button
|
||||||
variant="contained"
|
variant="contained"
|
||||||
onClick={sendReq}
|
onClick={sendReq}
|
||||||
loading={loading}
|
disabled={loading || isDisabled()}
|
||||||
disabled={isDisabled()}
|
|
||||||
className={`!gap-[4px] !mr-auto !text-nowrap !flex !flex-nowrap !py-[8px]
|
className={`!gap-[4px] !mr-auto !text-nowrap !flex !flex-nowrap !py-[8px]
|
||||||
!rounded-[4px] !text-[14px] md:!text-[16px] !font-medium
|
!rounded-[4px] !text-[14px] md:!text-[16px] !font-medium
|
||||||
!mt-[32px] sm:!mt-[38px] md:!mt-[43px] lg:!mt-[48px] !px-[16px] sm:!px-[19px] md:!px-[22px] lg:!px-[24px]
|
!mt-[32px] sm:!mt-[38px] md:!mt-[43px] lg:!mt-[48px] !px-[16px] sm:!px-[19px] md:!px-[22px] lg:!px-[24px]
|
||||||
|
|||||||
@@ -79,7 +79,7 @@ function Form({
|
|||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
onClick={sendReq}
|
onClick={sendReq}
|
||||||
loading={loading}
|
disabled={loading}
|
||||||
variant="contained"
|
variant="contained"
|
||||||
className="!py-2.5 !mr-auto !px-4 gap-1 !text-[14px] !font-medium !mt-[32px] !shadownon"
|
className="!py-2.5 !mr-auto !px-4 gap-1 !text-[14px] !font-medium !mt-[32px] !shadownon"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -52,10 +52,9 @@ function SendReq({ img, data, resetData }) {
|
|||||||
<div className="mt-[40px] w-full flex justify-end">
|
<div className="mt-[40px] w-full flex justify-end">
|
||||||
<Button
|
<Button
|
||||||
className="!w-full md:!w-fit !shadow-none !rounded-[4px] !gap-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium"
|
className="!w-full md:!w-fit !shadow-none !rounded-[4px] !gap-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium"
|
||||||
disabled={!checkAllValues(data)}
|
disabled={loading || !checkAllValues(data)}
|
||||||
variant="contained"
|
variant="contained"
|
||||||
onClick={saveImg}
|
onClick={saveImg}
|
||||||
loading={loading}
|
|
||||||
>
|
>
|
||||||
<p className={loading ? "opacity-0" : ""}>ثبت اطلاعات</p>
|
<p className={loading ? "opacity-0" : ""}>ثبت اطلاعات</p>
|
||||||
<div className={!checkAllValues(data) ? "opacity-40" : "opacity-100"}>
|
<div className={!checkAllValues(data) ? "opacity-40" : "opacity-100"}>
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import Field from "@/app/component/element/Field";
|
import Field from "@/app/component/element/Field";
|
||||||
import { validatePhoneNumber } from "@/helper";
|
import { validatePhoneNumber } from "@/helper";
|
||||||
import { request } from "@/services/response";
|
import { request } from "@/services/response";
|
||||||
import { InputAdornment, Button } from "@mui/material";
|
import { InputAdornment, Button, CircularProgress } from "@mui/material";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { toast } from "react-toastify";
|
import { toast } from "react-toastify";
|
||||||
@@ -72,7 +72,7 @@ function LogInPage({ setIsSendMsg, num, setNum, setUuid, matchedCity, setStep })
|
|||||||
<Button
|
<Button
|
||||||
fullWidth
|
fullWidth
|
||||||
variant="contained"
|
variant="contained"
|
||||||
loading={loading}
|
disabled={loading}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
const checkedNum = validatePhoneNumber(num);
|
const checkedNum = validatePhoneNumber(num);
|
||||||
if (!checkedNum.valid) {
|
if (!checkedNum.valid) {
|
||||||
@@ -83,7 +83,7 @@ function LogInPage({ setIsSendMsg, num, setNum, setUuid, matchedCity, setStep })
|
|||||||
}}
|
}}
|
||||||
className="!rounded-[8px] !bg-[#5559CE] !py-[7.5px] md:!py-[8.5px] lg:!py-[10px]"
|
className="!rounded-[8px] !bg-[#5559CE] !py-[7.5px] md:!py-[8.5px] lg:!py-[10px]"
|
||||||
>
|
>
|
||||||
ورود
|
{loading ? <CircularProgress size={22} sx={{ color: "#fff" }} /> : "ورود"}
|
||||||
</Button>
|
</Button>
|
||||||
<p className="text-[#525252] text-[14px] font-normal text-center mt-[34px] sm:mt-[36px] md:mt-[38px] lg:mt-[40px]">
|
<p className="text-[#525252] text-[14px] font-normal text-center mt-[34px] sm:mt-[36px] md:mt-[38px] lg:mt-[40px]">
|
||||||
<Link href="/">
|
<Link href="/">
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { Button } from "@mui/material";
|
import { Button, CircularProgress } from "@mui/material";
|
||||||
import { request } from "@/services/response";
|
import { request } from "@/services/response";
|
||||||
import Cookies from "js-cookie";
|
import Cookies from "js-cookie";
|
||||||
import { handleTimeExpiresToken } from "@/helper";
|
import { handleTimeExpiresToken } from "@/helper";
|
||||||
@@ -112,7 +112,7 @@ function SendReq({
|
|||||||
}}
|
}}
|
||||||
className="!rounded-[8px] !bg-[#5559CE]"
|
className="!rounded-[8px] !bg-[#5559CE]"
|
||||||
>
|
>
|
||||||
تایید
|
{loading ? <CircularProgress size={22} sx={{ color: "#fff" }} /> : "تایید"}
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user