fix: fix the problem that useToaster cannot be imported on demand and update the docs directory

[simonguo]

https://rsuite-nextjs-git-fix-use-toaster-rsuite.vercel.app/components/toaster/

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
rsuite-nextjs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 21, 2024 3:13am
rsuite-storybook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 21, 2024 3:13am

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
rsuite-v4	⬜️ Ignored (Inspect)	Visit Preview		Mar 21, 2024 3:13am

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 93.75%. Comparing base (524fc7a) to head (ff0e02b).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #3689   +/-   ##
=======================================
  Coverage   93.75%   93.75%           
=======================================
  Files         637      637           
  Lines       22318    22318           
  Branches     3052     3052           
=======================================
  Hits        20925    20925           
  Misses        713      713           
  Partials      680      680           

Flag	Coverage Δ
ChromeCi	93.71% <ø> (ø)
Firefox	93.13% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

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

[acefei]

Hi @simonguo, I'm wondering if this issue may be related to a regression. The custom toast doesn't close after the specified timeout.

[simonguo]

Hi @acefei, automatically closing the toast requires calling onClose with a timeout in the custom toast.

import React from 'react';
import { useToaster, ButtonToolbar, SelectPicker, Button } from 'rsuite';

const Toast = React.forwardRef((props, ref) => {
  const { type, placement, duration, children, onClose, ...rest } = props;
  
+  React.useEffect(()=>{
+  	setTimeout(onClose, duration);
+  },[]);
  
  return (
    <div
      ref={ref}
      {...rest}
      style={{ padding: 10, background: '#fff', borderRadius: 4, marginTop: 10 }}
    >
      {children}
      <hr />
      <button onClick={onClose}>Close</button>
    </div>
  );
});

const App = () => {
  const toaster = useToaster();

  return (
    <Button
      onClick={() =>
        toaster.push(
          <Toast>
            <h4>Custom Toast</h4>
            <p>
              This is a custom toast with a close button. You can also set the duration and
              placement.
            </p>
          </Toast>,
          { placement: 'topCenter', duration: 5000 }
        )
      }
      appearance="primary"
    >
      Push
    </Button>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));