academia-de-codigo / react-semantic-toasts

React Semantic UI notifications library
MIT License
87 stars 31 forks source link

npmjs is outdated #48

Closed michael-harley closed 5 years ago

michael-harley commented 5 years ago

https://github.com/academia-de-codigo/react-semantic-toasts/pull/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).

doncicuto commented 5 years ago

Hi @michael-harley, I agree. I think that package.json in GitHub has a wrong version number and I guess it should be at least 0.6.4. I don't know how npmjs works so I can't help with this issue. Maybe @ferrao could have a look.

Cheers

michael-harley commented 5 years ago

@doncicuto Hi, thanks for the quick response. For now I implement this workaround

toast(
        {
          type: "success",
          title: "Update",
          description: <p>Successfully update</p>,
          size: "small",
          time: 3000
        },
        () => {}, // TODO: Delete this after react-semantic-toasts is updated on npmjs https://github.com/academia-de-codigo/react-semantic-toasts/issues/48
        () => {}, // TODO: Delete this after react-semantic-toasts is updated on npmjs
        () => {} // TODO: Delete this after react-semantic-toasts is updated on npmjs
      );

But will need to remove this after this issue resolved. I too don't really know how npmjs works, but I saw another github case not syncing with the npmjs, so I thought you'll need to release the version manually if there are new updates.

ferrao commented 5 years ago

@doncicuto and @michael-harley, just pushed a new 0.6.5 version to npm.