Feat: Add prop to disable close button #416
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Ke1sy
changed the title
Codecov ReportAll modified and coverable lines are covered by tests ✅
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. |
|
That's what <Dialog closable={!loading} />which will hide the close button. |
|
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. |
|
OK, making this API design |
Is there just |
I think this will lead to ambiguity. |
This one. |
| @@ -112,6 +112,7 @@ const Panel = React.forwardRef<ContentRef, PanelProps>((props, ref) => { | |||
| }, [closable, closeIcon, prefixCls]); | |||
|
|
|||
| const ariaProps = pickAttrs(closableObj, true); | |||
| const closeBtnIsDisabled = typeof(closable) === 'object' && closable.disabled; | |||
There was a problem hiding this comment.
是的，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 可以与括号一起使用，这并不意味着它是以函数的形式被调用。
I added a new prop
disableCloseBtnthat 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