@cloudflare/component-notifications 10.0.18 → 10.1.0

package/src/NotificationItem.tsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import { Icon } from '@cloudflare/component-icon';
+import {
+  createStyledComponent,
+  type ThemeProp
+} from '@cloudflare/style-container';
+import { getBorderColor } from './utils';
+import { type TNotificationType } from './Notification';
+
+const IconWrapper = createStyledComponent(() => ({
+  paddingRight: '6px',
+  display: 'flex'
+}));
+
+const NotificationWrapper = createStyledComponent(() => ({
+  display: 'flex'
+}));
+
+const CloseWrapper = createStyledComponent(() => ({
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%,-50%)'
+}));
+
+const NotificationMessage = createStyledComponent(
+  ({ theme }: ThemeProp) => ({
+    position: 'relative',
+    zIndex: 2,
+    color: theme.colors.white,
+    display: 'flex',
+    alignItems: 'center'
+  }),
+  'span'
+);
+
+type TNotificationCloseProps = ThemeProp & {
+  type?: TNotificationType;
+};
+
+const NotificationClose = createStyledComponent(
+  ({ theme, type }: TNotificationCloseProps) => ({
+    position: 'absolute',
+    zIndex: 3,
+    top: 0,
+    right: 0,
+    bottom: 0,
+    width: '2.5em',
+    cursor: 'pointer',
+    '&:hover': {
+      backgroundColor: getBorderColor(theme, type)
+    },
+    '&::before': {
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)'
+    }
+  }),
+  'span'
+);
+
+type TNotificationItemProps = {
+  children?: string;
+  closable?: boolean;
+  handleClickClose?: () => void;
+  type?: TNotificationType;
+};
+
+const NotificationItem = ({
+  children,
+  closable,
+  handleClickClose,
+  type
+}: TNotificationItemProps) => {
+  let iconType;
+
+  switch (type) {
+    case 'success':
+      iconType = 'ok-sign';
+      break;
+    case 'info':
+      iconType = 'info-sign';
+      break;
+    case 'warning':
+      iconType = 'exclamation-sign';
+      break;
+    case 'error':
+      iconType = 'exclamation-sign';
+      break;
+    default:
+      iconType = 'info-sign';
+      break;
+  }
+  return (
+    <NotificationWrapper>
+      <NotificationMessage>
+        <IconWrapper>
+          <Icon
+            type={iconType}
+            label={type ? type : 'info-sign'}
+            color="white"
+            size={24}
+          />
+        </IconWrapper>
+        {children}
+      </NotificationMessage>
+
+      {closable && (
+        <NotificationClose onClick={handleClickClose} type={type}>
+          <CloseWrapper>
+            <Icon type="remove" label="close" color="white" />
+          </CloseWrapper>
+        </NotificationClose>
+      )}
+    </NotificationWrapper>
+  );
+};
+
+export default NotificationItem;

package/src/NotificationList.tsx

@@ -0,0 +1,18 @@
+import React, { type ReactNode } from 'react';
+import { createStyledComponent } from '@cloudflare/style-container';
+
+const styles = () => ({
+  marginTop: 0,
+  marginBottom: 0
+});
+
+type TNotificationListProps = {
+  className?: string;
+  children?: ReactNode;
+};
+
+const NotificationList = ({ className, children }: TNotificationListProps) => {
+  return <div className={className}>{children}</div>;
+};
+
+export default createStyledComponent(styles, NotificationList);

package/src/utils.ts

@@ -0,0 +1,37 @@
+import { isDarkMode } from '@cloudflare/style-const';
+import { type TNotificationType } from './Notification';
+import { type ThemeProp } from '@cloudflare/style-container';
+
+export const getBorderColor = (
+  theme: ThemeProp['theme'],
+  type?: TNotificationType
+) => {
+  switch (type) {
+    case 'success':
+      return theme.colors.green[5];
+    case 'warning':
+      return theme.colors.orange[5];
+    case 'error':
+      return theme.colors.red[2];
+    case 'info':
+    default:
+      return theme.colors.blue[3];
+  }
+};
+
+export const getBackgroundColor = (
+  theme: ThemeProp['theme'],
+  type?: TNotificationType
+) => {
+  switch (type) {
+    case 'success':
+      return theme.colors.green[isDarkMode() ? 3 : 6];
+    case 'warning':
+      return theme.colors.orange[isDarkMode() ? 3 : 6];
+    case 'error':
+      return theme.colors.red[3];
+    case 'info':
+    default:
+      return theme.colors.blue[isDarkMode() ? 3 : 6];
+  }
+};

package/src/Notification.js

@@ -1,291 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { isDarkMode } from '@cloudflare/style-const';
-import raf from 'raf';
-import { createComponent } from '@cloudflare/style-container';
-
-import { Icon } from '@cloudflare/component-icon';
-
-const getBorderColor = (type, theme) => {
-  switch (type) {
-    case 'success':
-      return theme.colors.green[5];
-    case 'warning':
-      return theme.colors.orange[5];
-    case 'error':
-      return theme.colors.red[2];
-    case 'info':
-    default:
-      return theme.colors.blue[3];
-  }
-};
-
-const getBackgroundColor = (type, theme) => {
-  switch (type) {
-    case 'success':
-      return theme.colors.green[isDarkMode() ? 3 : 6];
-    case 'warning':
-      return theme.colors.orange[isDarkMode() ? 3 : 6];
-    case 'error':
-      return theme.colors.red[3];
-    case 'info':
-    default:
-      return theme.colors.blue[isDarkMode() ? 3 : 6];
-  }
-};
-
-const NotificationMessage = createComponent(
-  ({ theme }) => ({
-    position: 'relative',
-    zIndex: 2,
-    color: theme.colors.white,
-    display: 'flex',
-    alignItems: 'center'
-  }),
-  'span'
-);
-
-const NotificationClose = createComponent(
-  ({ theme, type }) => ({
-    position: 'absolute',
-    zIndex: 3,
-    top: 0,
-    right: 0,
-    bottom: 0,
-    width: '2.5em',
-    cursor: 'pointer',
-    '&:hover': {
-      backgroundColor: getBorderColor(type, theme)
-    },
-    '&::before': {
-      position: 'absolute',
-      top: '50%',
-      left: '50%',
-      transform: 'translate(-50%, -50%)'
-    }
-  }),
-  'span'
-);
-
-const NotificationContainer = createComponent(
-  ({ theme, type }) => ({
-    position: 'relative',
-    padding: theme.space[2],
-    verticalAlign: 'middle',
-    '-webkit-text-stroke': '0',
-    '-webkit-font-smoothing': 'antialiased',
-    cursor: 'pointer',
-    transformOrigin: 'bottom left',
-    borderTopColor: getBorderColor(type, theme),
-    borderBottomColor: getBorderColor(type, theme),
-    borderLeftColor: getBorderColor(type, theme),
-    borderRightColor: getBorderColor(type, theme),
-    borderTopWidth: 1,
-    borderRightWidth: 1,
-    borderBottomWidth: 0,
-    borderLeftWidth: 1,
-    borderStyle: 'solid',
-    backgroundColor: getBackgroundColor(type, theme),
-    animationName: {
-      '0%': {
-        transform: 'scaleY(0)'
-      },
-      '100%': {
-        transform: 'scaleY(1)'
-      }
-    },
-    animationDuration: '200ms',
-    animationTimingFunction: 'ease-in-out',
-    '&::before': {
-      position: 'absolute',
-      top: '50%',
-      left: '0.75rem',
-      transform: 'translate(0, -50%)',
-      lineHeight: '1',
-      verticalAlign: 'middle'
-    },
-    '&:first-child': {
-      borderTopWidth: 1
-    }
-  }),
-  'div'
-);
-
-const IconWrapper = createComponent(() => ({
-  paddingRight: 6,
-  display: 'flex'
-}));
-
-const NotificationWrapper = createComponent(() => ({
-  display: 'flex'
-}));
-
-const CloseWrapper = createComponent(() => ({
-  position: 'absolute',
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%,-50%)'
-}));
-
-const NotificationItem = createComponent(
-  () => ({}),
-  ({ children, closable, handleClickClose, type }) => {
-    let iconType;
-    switch (type) {
-      case 'success':
-        iconType = 'ok-sign';
-        break;
-      case 'info':
-        iconType = 'info-sign';
-        break;
-      case 'warning':
-        iconType = 'exclamation-sign';
-        break;
-      case 'error':
-        iconType = 'exclamation-sign';
-        break;
-      default:
-        iconType = 'info-sign';
-        break;
-    }
-    return (
-      <NotificationWrapper>
-        <NotificationMessage>
-          <IconWrapper>
-            <Icon
-              type={iconType}
-              label={type ? type : 'info-sign'}
-              color="white"
-              size={24}
-            />
-          </IconWrapper>
-          {children}
-        </NotificationMessage>
-        {closable && (
-          <NotificationClose onClick={handleClickClose} type={type}>
-            <CloseWrapper>
-              <Icon type="remove" label="close" color="white" />
-            </CloseWrapper>
-          </NotificationClose>
-        )}
-      </NotificationWrapper>
-    );
-  }
-);
-
-NotificationItem.propTypes = {
-  children: PropTypes.string,
-  closable: PropTypes.bool,
-  persist: PropTypes.bool,
-  duration: PropTypes.number,
-  active: PropTypes.bool,
-  handleClickClose: PropTypes.func
-};
-
-class Notification extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      persist: this.props.persist,
-      timeoutId: null
-    };
-  }
-
-  componentDidMount() {
-    // Read this https://stanko.github.io/react-rerender-in-component-did-mount/
-    this._raf = raf(() => {
-      this._raf = raf(() => {
-        this._raf = null;
-        this.startTimeout();
-      });
-    });
-  }
-
-  componentWillUnmount() {
-    this.stopTimeout();
-  }
-
-  startTimeout() {
-    // Don't dismiss errors if they're configured to be persisted,
-    // or if we're in a testing environment
-    if (this.state.persist || process.env.TESTING) {
-      return;
-    }
-    this.stopTimeout();
-    const timeoutId = setTimeout(() => this.props.onClose(), this.props.delay);
-    this.setState({ timeoutId });
-  }
-
-  stopTimeout() {
-    if (this._raf) {
-      raf.cancel(this._raf);
-      this._raf = null;
-    }
-    if (this.state.timeoutId) {
-      clearTimeout(this.state.timeoutId);
-      this.setState({ timeoutId: null });
-    }
-  }
-
-  handleMouseEnter() {
-    this.stopTimeout();
-  }
-
-  handleMouseLeave() {
-    this.startTimeout();
-  }
-
-  handleClickClose() {
-    this.props.onClose();
-  }
-
-  handleClick() {
-    this.stopTimeout();
-    this.setState({
-      persist: true
-    });
-  }
-
-  render() {
-    return (
-      <NotificationContainer
-        role="alert"
-        onClick={this.handleClick.bind(this)}
-        onMouseEnter={this.handleMouseEnter.bind(this)}
-        onMouseLeave={this.handleMouseLeave.bind(this)}
-        type={this.props.type}
-      >
-        <NotificationItem
-          closable={this.props.closable}
-          handleClickClose={this.handleClickClose.bind(this)}
-          duration={this.props.delay}
-          persist={this.state.persist}
-          active={!!this.state.timeoutId}
-          type={this.props.type}
-        >
-          {this.props.message}
-        </NotificationItem>
-      </NotificationContainer>
-    );
-  }
-}
-
-Notification.propTypes = {
-  type: PropTypes.oneOf(['success', 'error', 'info', 'warning']),
-  message: PropTypes.string.isRequired,
-
-  closable: PropTypes.bool,
-  delay: PropTypes.number,
-  persist: PropTypes.bool,
-
-  onClose: PropTypes.func.isRequired
-};
-
-Notification.defaultProps = {
-  closable: true,
-  delay: 4000,
-  persist: false,
-  type: 'info'
-};
-
-export default Notification;

package/src/NotificationGlobalContainer.js

@@ -1,26 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { createComponent } from '@cloudflare/style-container';
-
-const styles = ({ theme }) => ({
-  position: 'fixed',
-  bottom: 0,
-  left: 0,
-  right: 0,
-  maxHeight: '25%',
-  overflow: 'auto',
-  zIndex: 1600,
-  fontSize: theme.fontSizes[3]
-});
-
-const NotificationGlobalContainer = ({ className, children }) => (
-  <div className={className}>{children}</div>
-);
-
-NotificationGlobalContainer.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string
-};
-NotificationGlobalContainer.displayName = 'NotificationGlobalContainer';
-
-export default createComponent(styles, NotificationGlobalContainer);

package/src/NotificationList.js

@@ -1,20 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { createComponent } from '@cloudflare/style-container';
-
-const styles = () => ({
-  marginTop: 0,
-  marginBottom: 0
-});
-
-const NotificationList = ({ className, children }) => (
-  <div className={className}>{children}</div>
-);
-
-NotificationList.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string
-};
-NotificationList.displayName = 'NotificationList';
-
-export default createComponent(styles, NotificationList);