Feat: Add prop to disable close button

[Ke1sy]

I added a new prop for closable closable={{ disabled: true }} that allows to disable the close button.

Related issue: #417

This prop is useful when the content inside dialog includes long-running API call that is made upon clicking the “ok” button and need to prevent the user from closing the modal while the API call is still pending.
Currently there is no way to disable button while the API is still in flight.

Ref: UIEN-5893

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
dialog	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 28, 2024 9:56am

[Ke1sy]

@yoyo837 @zombieJ @MadCcc Please review. Thanks!

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 99.45%. Comparing base (a55e825) to head (fc6f5b6).
Report is 7 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master     #416      +/-   ##
==========================================
+ Coverage   99.43%   99.45%   +0.01%     
==========================================
  Files           8        8              
  Lines         178      183       +5     
  Branches       54       61       +7     
==========================================
+ Hits          177      182       +5     
  Misses          1        1              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[mellis481]

@yoyo837 @zombieJ @MadCcc Bump

[Ke1sy]

@yoyo837 @zombieJ @MadCcc I resolved conflict, now it's ready for review

[zombieJ]

That's what closable do. Just:

<Dialog closable={!loading} />

which will hide the close button.

[afc163]

Is it any reasone to diable close button rather than hide it by closable={false} in your application?

[mellis481]

Is it any reasone to diable close button rather than hide it by closable={false} in your application?

@afc163 Indeed there are situations where you never want a modal to be closable (by a close button and/or mask click). There is another scenario, however, where you want a modal to closable, but also want to be able to disable close functionality. An example of this would be if you had a form in a modal or were otherwise making an async call on OK button click. In this case, a common UX would be to have a loading indicator display in the modal as the async call was processing. During this time, you wouldn't want the user to close the modal so you would want to disable the OK and CANCEL buttons. If you disable those buttons, you'd also want to disable the close button. Hiding the button in this case would not be a good UX for a number of reasons.

[afc163]

OK, making this API design closable={{ disabled: true }} would be better than disableCloseBtn.

[zombieJ]

OK, making this API design closable={{ disabled: true }} would be better than disableCloseBtn.

Is there just <Dialog disabled /> better? Since if developer patch other button in it, it will also be though not clickable. We can patch disabled prop to make Dialog pointerEvents to none for all the disable.

[yoyo837]

OK, making this API design closable={{ disabled: true }} would be better than disableCloseBtn.

Is there just <Dialog disabled /> better? Since if developer patch other button in it, it will also be though not clickable. We can patch disabled prop to make Dialog pointerEvents to none for all the disable.

I think this will lead to ambiguity.

[Ke1sy]

@zombieJ @afc163 @yoyo837
Opinions differ, so could you please clarify what is the preffered option to add this functionality?

[afc163]

closable={{ disabled: true }}

This one.

[Ke1sy]

@zombieJ @afc163 @yoyo837
Changes are added, please review.

[afc163]

bump https://github.com/react-component/dialog/releases/tag/v9.5.0

[li-jia-nan]

原来 typeof 还能当函数调用，学到了

[afc163]

是的，typeof 后面跟着括号的用法在 JavaScript 中是有效的，但这实际上与函数调用不同。当你写 typeof(123) 时，括号在这里起到的是分组操作符的作用，而不是表示函数调用。这意味着括号内的表达式会被首先计算，然后 typeof 操作符应用于该表达式的结果。

这里是一些例子来说明这一点:

console.log(typeof(123)); // 输出: "number"
console.log(typeof("hello")); // 输出: "string"
console.log(typeof(true)); // 输出: "boolean"

在以上例子中，括号的使用并没有改变 typeof 的行为。它们仅仅是在语法上明确了 typeof 操作符作用的对象，特别是在表达式较为复杂时，使用括号可以帮助提高代码的可读性。

此外，你会注意到无论是使用括号 typeof(123) 还是不使用括号 typeof 123，结果都是相同的。这是因为 typeof 后面紧跟着的表达式（无论是否包含在括号中）都会被评估，然后 typeof 返回该表达式的类型。因此，即使 typeof 可以与括号一起使用，这并不意味着它是以函数的形式被调用。