diff --git a/assets/autofocus.less b/assets/autofocus.less new file mode 100644 index 0000000..e0018a6 --- /dev/null +++ b/assets/autofocus.less @@ -0,0 +1,134 @@ +.rc-dialog { + position: relative; + width: auto; + margin: 10px; + + &-wrap { + position: fixed; + overflow: auto; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1050; + -webkit-overflow-scrolling: touch; + outline: 0; + } + + &-title { + margin: 0; + font-size: 14px; + line-height: 21px; + font-weight: bold; + } + + &-content { + position: relative; + background-color: #ffffff; + border: none; + border-radius: 6px 6px; + background-clip: padding-box; + } + + &-close { + cursor: pointer; + border: 0; + background: transparent; + font-size: 21px; + position: absolute; + right: 20px; + top: 12px; + font-weight: 700; + line-height: 1; + color: #000; + text-shadow: 0 1px 0 #fff; + filter: alpha(opacity=20); + opacity: .2; + text-decoration: none; + + &-x:after { + content: '×' + } + + &:hover { + opacity: 1; + filter: alpha(opacity=100); + text-decoration: none; + } + } + + &-header { + padding: 13px 20px 14px 20px; + border-radius: 5px 5px 0 0; + background: #fff; + color: #666; + border-bottom: 1px solid #e9e9e9; + } + + &-body { + padding: 20px; + } + + &-footer { + border-top: 1px solid #e9e9e9; + padding: 10px 20px; + text-align: right; + border-radius: 0 0 5px 5px; + } + + .effect() { + animation-duration: 0.3s; + animation-fill-mode: both; + } + + &-zoom-enter, &-zoom-appear { + opacity: 0; + .effect(); + animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); + animation-play-state: paused; + } + + &-zoom-leave { + .effect(); + animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); + animation-play-state: paused; + } + + &-zoom-enter&-zoom-enter-active, &-zoom-appear&-zoom-appear-active { + animation-name: rcDialogZoomIn; + animation-play-state: running; + } + + &-zoom-leave&-zoom-leave-active { + animation-name: rcDialogZoomOut; + animation-play-state: running; + } + + @keyframes rcDialogZoomIn { + 0% { + opacity: 0; + transform: scale(0, 0); + } + 100% { + opacity: 1; + transform: scale(1, 1); + } + } + @keyframes rcDialogZoomOut { + 0% { + + transform: scale(1, 1); + } + 100% { + opacity: 0; + transform: scale(0, 0); + } + } +} + +@media (min-width: 768px) { + .rc-dialog { + width: 600px; + margin: 30px auto; + } +} diff --git a/assets/index.less b/assets/index.less index adab276..afac539 100644 --- a/assets/index.less +++ b/assets/index.less @@ -30,3 +30,4 @@ } } } +@import './autofocus.less'; diff --git a/docs/demo/autofocus.md b/docs/demo/autofocus.md new file mode 100644 index 0000000..1ae8407 --- /dev/null +++ b/docs/demo/autofocus.md @@ -0,0 +1,8 @@ +--- +title: AutoFocus +nav: + title: Demo + path: /demo +--- + + diff --git a/docs/examples/autofocus.tsx b/docs/examples/autofocus.tsx new file mode 100644 index 0000000..89bbd9b --- /dev/null +++ b/docs/examples/autofocus.tsx @@ -0,0 +1,31 @@ +import Dialog from 'rc-dialog'; +import Input from 'rc-input'; +import type { FC } from 'react'; +import React from 'react'; +import '../../assets/index.less'; + +const Demo: FC = () => { + const [vis, setVis] = React.useState(false); + return ( +
+ normal: + +
+
+ dialog: + + setVis(false)} + style={{ width: 600 }} + title={
第二个弹框
} + > + +
+
+ ); +}; + +export default Demo; diff --git a/package.json b/package.json index 0912394..d37acc0 100644 --- a/package.json +++ b/package.json @@ -69,6 +69,7 @@ "np": "^7.0.0", "prettier": "^2.0.5", "pretty-quick": "^3.0.0", + "rc-dialog": "^9.1.0", "rc-test": "^7.0.15", "react": "^18.0.0", "react-dom": "^18.0.0", diff --git a/src/Input.tsx b/src/Input.tsx index 4ce793f..249064c 100644 --- a/src/Input.tsx +++ b/src/Input.tsx @@ -99,6 +99,12 @@ const Input = forwardRef((props, ref) => { } setFocused((prev) => (prev && disabled ? false : prev)); }, [disabled]); + + useEffect(() => { + if (rest.autoFocus) { + focus(); + } + }, [rest.autoFocus]); const triggerChange = ( e: