academia-de-codigo / react-semantic-toasts Goto Github PK

@ferrao Still facing the same issue raised in #55 even after the merge of #61
if i run npm i react-semantic-toasts on local.

Below is the screenshot of peer dependencies in local for the version 0.6.5

Oi Rui!

Thanks for the great package! I've set it up and it's really easy to use and nice looking with those tiny animations. :)

I don't use semantic-ui-css in my project and it's not a required dependency of semantic-ui-react. However, this package fails if semantic-ui-css is not added. Please note that semantic-ui-css is a package that weights about 600KB. I've checked similar issues and noticed you moved the dependency to peer dependencies. This still doesn't solve the issue.

Would it be possible to have unstyled version of the package or some similar solution?

Thanks!

Can you make a css detached version?
Or Please let me know how to prevent build confliction...

/Users/dehypnosis/dev/syncodax-dev/web/node_modules/semantic-ui-css/components/reset.min.css:9
 */*,:after,:before{-webkit-box-sizing:inherit;box-sizing:inherit}html{-webkit-box-sizing:border-box;box-sizing:border-box}input[type=email],input[type=password],input[type=search],input[type=text]{-webkit-appearance:none;-moz-appearance:none}/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{

SyntaxError: Unexpected token *
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:616:28)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/dehypnosis/dev/syncodax-dev/web/node_modules/react-semantic-toasts/build/semantic-toast-container.js:4:1)

This component breaking layout as it is on block lvl?

Thanks for the toast, it's really easy to use!

When a condition met, toast appears in a particular component. SemanticToastContainer is placed inside of the component. When a user navigates to another component, and then comes back and toast condition is met again, two toasters appear.

An issue can be solved, if move SemanticToastContainer to the higher hierarchy.
However, in my case, I need toast time option to be 0 (toaster do not disappear until the user clicks close icon). If I move SemanticToastContainer to the higher hierarchy, toaster stays on all the pages/components until the user closes it.

I would like the toaster to stay or until the user close it, or until the user navigate to another context . Any suggestions how it can be solved? thanks!

I get this warning:

warning " > [email protected]" has incorrect peer dependency "[email protected] || 0.83.x || 0.84.x".

...because this lib specifically doesn't support 0.85. But I'm able to run it just fine with "semantic-ui-react": "0.85.0", in my project.

As far as I can tell this package should still work in React 18, so could the peer dependency be updated reflect that?

I get occasional crashes on this line:

Steps to reproduce:

1. Click on the close 'x' button at the same time when timeout happens.

I seems onClose method is called twice and at the same time - from the mouse click and from the timeout method.

Could you specify description in ToastOptions interface to allow also React node? It should work already, but interface is declared "wrongly" at the moment.

Hi @ferrao,

It appears the new version you released to NPM still includes all .css files in the /build directory. Did you forget to re-build before publishing to NPM?

Also, can you remove the import '../styles/react-semantic-alert.css'; statement from the semantic-toast-container.jsx file, and instead add to the documentation that developers need to import that file?? The reason for this, is that build tools (webpack, babel, etc..) by default do not include code that is in the node_modules directory. It would be better if the .css file you provided is imported so that it can easily be included in the local build packaging.

Thanks for the good work.

There is a hidden element in the lower left corner (same as toast position) that is invisible, but blocking click events etc. See screenshot.

I tried changing z-index of toast but not working. Is there any workaround for this?

I could not install this component because I am using the most recent semantic-ui-react, is there any plan to support it?
Thanks in advance!

Getting Cannot find name 'ToastSize'. and Cannot find name 'ToastColor'. on tsc in parent project. I think these just need to use SemanticCOLORS and SemanticSIZES.

Hello, is this library being maintained? The current version of semantic-ui-react is 2.0.3 but react-semantic-toasts declares a peer dependency compatible with up to 0.88.

when no icon props specified, it should automatically get the icon according to the type. but it only shows the success icon for all type.

Hi,

Thanks for this great library. It would be awesome if you can also support "size" and "color" variations (https://react.semantic-ui.com/collections/message/#variations-color) via prop.

Thanks!

still testing but should be in right way, here is the typescript definition:

declare module 'react-semantic-toasts' {
  import { ReactNode } from 'react'
  const SemanticToastContainer: () => JSX.Element
  const toast: (
    options: {
      title: string
      description: string
      type: 'info' | 'success' | 'warning' | 'error'
      icon?: any
      time?: number
    },
    onClose?: () => void,
    onClick?: () => void,
  ) => void

  export { SemanticToastContainer, toast }
}

It looks like react-semantic-toasts does css imports directly into component jsx files. Since I use semantic-ui as a CSS framework base for most of my components, I have a lot of css that I override. When I imported react-semantic-toasts, I noticed a lot of my css was being override and finally found out that the react-semantic-toasts jsx files import css files directly. Is there a way we can separate the tight coupling of css imports?

#39

I've commented there.

I notice that npmjs and github are not synced.

As npmjs code for semantic-toast.jsx is like this:

import React from 'react';
import PropTypes from 'prop-types';
import { Message } from 'semantic-ui-react';
import withTransition from './with-transition';

const icons = {
    info: 'announcement',
    success: 'checkmark',
    error: 'remove',
    warning: 'warning circle'
};

function SemanticToast(props) {
    const { type, title, description, size, color, list, onClose, onClick, onDismiss } = props;
    const icon = props.icon || icons[type];

    const onDispel = e => {
        e.stopPropagation();
        onDismiss();
        onClose();
    };

    return (
        <Message
            {...{ [type]: true }}
            onClick={onClick}
            onDismiss={onDispel}
            header={title}
            content={description}
            icon={icon}
            size={size}
            color={color}
            list={list}
            floating
        />
    );
}

SemanticToast.propTypes = {
    type: PropTypes.oneOf(['info', 'success', 'error', 'warning']).isRequired,
    title: PropTypes.string.isRequired,
    description: PropTypes.oneOfType([
        PropTypes.arrayOf(PropTypes.string),
        PropTypes.string,
        PropTypes.node
    ]).isRequired,
    icon: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
    size: PropTypes.string,
    color: PropTypes.string,
    list: PropTypes.arrayOf(PropTypes.string),
    onClick: PropTypes.func,
    onDismiss: PropTypes.func,
    onClose: PropTypes.func
};

SemanticToast.defaultProps = {
    onClick: undefined,
    onDismiss: undefined,
    onClose: undefined,
    icon: undefined,
    color: undefined,
    list: undefined,
    size: 'medium'
};

export default withTransition(SemanticToast);

And the github is like this:

import React from 'react';
import PropTypes from 'prop-types';
import { Message } from 'semantic-ui-react';
import withTransition from './with-transition';

const icons = {
    info: 'announcement',
    success: 'checkmark',
    error: 'remove',
    warning: 'warning circle'
};

function SemanticToast({ type, title, description, onClose, onDismiss, icon, ...props }) {
    const computedIcon = icon || icons[type];

    const onDispel = e => {
        e.stopPropagation();
        onDismiss();
        onClose();
    };

    return (
        <Message
            {...{ [type]: true }}
            onDismiss={onDispel}
            header={title}
            content={description}
            icon={computedIcon}
            floating
            {...props}
        />
    );
}

SemanticToast.propTypes = {
    type: PropTypes.oneOf(['info', 'success', 'error', 'warning']).isRequired,
    title: PropTypes.string.isRequired,
    description: PropTypes.oneOfType([
        PropTypes.arrayOf(PropTypes.string),
        PropTypes.string,
        PropTypes.node
    ]).isRequired,
    icon: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
    onDismiss: PropTypes.func,
    onClose: PropTypes.func
};

SemanticToast.defaultProps = {
    onDismiss: () => undefined,
    onClose: () => undefined,
    icon: undefined,
};

export default withTransition(SemanticToast);

I need the close to be working because currently my close button is not working (Crashing when calling onDismiss).

This is useful when there are many toasts in view

Expected behaviour

When a user is hovering over a toast, the toast shouldn't be dismissed, even if it times out. When the user moves mouse of the toast, it should be dismissed after a delay.

Actual behaviour

The toast gets dismissed even if the user is hovering over the toast message.

Explanation

This allows the user to delay dismissal of a toast, in case they need additional time reading the message.

Hi

I'm trying to use library in my project, but TS compiler fails with following error:

TypeScript error in node_modules/react-semantic-toasts/build/index.d.ts(35,2):
Statements are not allowed in ambient contexts.  TS1036

    33 | 
    34 |     export { SemanticToastContainer, toast, ToastOptions }
  > 35 | };
       |  ^
    36 | 

I'm using TypeScript 3.5.3 and react-semantic-toasts 0.6.2

Hello --

First, thanks for doing this library! It works very well, and looks nice.

However, I just started getting an error (...I believe...) where it complains that the icon is required.

My example code is:

toast({
        title: 'Success!',
        description: 'Saved successfully.',
        time: 3000,
        type: 'success'
      }
    )

The error message is:

Warning: Failed prop type: The prop `icon` is marked as required in `SemanticToast`, but its value is `undefined`.

The documentation says that the icon argument is optional. I fixed my code with:

toast({
        title: 'Success!',
        description: 'Saved successfully.',
        time: 3000,
        type: 'success',
        icon: 'announcement'
      }
    )

but it seems unfortunate that I have to look in the code to find the right icon to use.

Thanks!

I discover that result HTML override other HTML.

In my example, i have a Semantic dropdown in top right.
My ToastContainer is in top right (by default). The HTML render is a div with classes ui-alerts top-right . With this div, my dropdown is not clickable !
I think it will be better to put this div in display none while is not active.

My actual approach is too change padding to 0px for force to have no width when toast container is empty.

Thanks

Could you please added opportunity assign a className to the
SemanticToastContainer in /lib/semantic-toast-container.jsx exmaple such as:

static propTypes = {
        position: PropTypes.oneOf([
            'top-right',
            'top-center',
            'bottom-right',
            'bottom-center',
            'bottom-left'
        ]),
        animation: PropTypes.string,
        className: PropTypes.string,
};

      static defaultProps = {
           position: 'top-right',
           animation: null, 
           className: null, 
      };

render() {
        const { position, className } = this.props;
        const animation = this.props.animation || animations[position];

        return (
            <div className={`ui-alerts ${position} ${className}`}>

I would expect to be able to do:

toast({
  type: 'warning',
  icon: 'envelope',
  title: 'Warning Toast',
  description: <p>THis is a <b>node</b></p>,
  time: 5000,
});

If you try you get this error:

Warning: Failed prop type: Invalid prop `description` of type `object` supplied to `SemanticToast`, expected `string`.

This is what Ant does: https://ant.design/components/message/#API
The content argument's type is string|ReactNode.

Hi Guys,

First of all, thank you for this great plugin.

I have found one issue, react-semantic-toasts package imports a duplicate version of Semantic UI package, this in return increases my bundle size.

Please check the screenshot below:

How can I resolve this?

Hi,

Thanks for the great work! Is it possible to change or turn off the transition? The animation looks cool but I guess something simpler (such as sliding up/down) would be more preferred.

When animation: 'scale' is applied, the close animation is still bounce. Is there a way to override the close animation?

I'm getting the above error when I compile. Am using the default Semantic UI gulp build tool rather than the css version. Is it incompatible?