@os-design/core 1.0.199 → 1.0.200

package/src/message/Message.tsx

@@ -0,0 +1,108 @@
+import { keyframes } from '@emotion/react';
+import styled from '@emotion/styled';
+import { ellipsisStyles } from '@os-design/styles';
+import { clr, Color, light } from '@os-design/theming';
+import { omitEmotionProps } from '@os-design/utils';
+import React, { forwardRef } from 'react';
+import AlertIcon from './AlertIcon';
+
+export interface MessageProps {
+  type: 'info' | 'success' | 'error';
+  text: string;
+}
+
+const fadeIn = keyframes`
+  from {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+
+const MESSAGE_HEIGHT_EM = 2.5;
+const MESSAGE_MARGIN_TOP_EM = 0.7;
+export const MESSAGE_DURATION_MS = 3000;
+
+const fadeOut = keyframes`
+  from {
+    opacity: 1;
+    height: ${MESSAGE_HEIGHT_EM}em;
+    margin-top: ${MESSAGE_MARGIN_TOP_EM}em;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    height: 0;
+    margin-top: 0;
+    transform: translateY(-100%);
+  }
+`;
+
+interface ContainerProps extends Pick<MessageProps, 'type'> {
+  textColor: Color;
+  backgroundColor: Color;
+  transitionDelay: number;
+}
+const Container = styled(
+  'div',
+  omitEmotionProps('type', 'textColor', 'backgroundColor', 'transitionDelay')
+)<ContainerProps>`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  height: ${MESSAGE_HEIGHT_EM}em;
+  margin-top: ${MESSAGE_MARGIN_TOP_EM}em;
+
+  box-sizing: border-box;
+  padding: 0 1em;
+  max-width: 90%;
+
+  border-radius: 0.25em;
+  box-shadow: 0 0.15em 0.45em hsla(0, 0%, 0%, 0.1);
+  background-color: ${(p) => clr(p.backgroundColor)};
+  color: ${(p) => clr(p.textColor)};
+
+  pointer-events: auto;
+  overflow: hidden;
+
+  animation: ${fadeIn} ${(p) => p.transitionDelay}ms,
+    ${fadeOut} ${(p) => p.transitionDelay}ms
+      ${(p) => MESSAGE_DURATION_MS - p.transitionDelay}ms;
+  animation-fill-mode: forwards;
+`;
+
+const Text = styled.span`
+  ${ellipsisStyles};
+`;
+
+const Message = forwardRef<HTMLDivElement, MessageProps>(
+  ({ type, text }, ref) => {
+    const backgroundColor = {
+      info: light.messageInfoColorBg,
+      success: light.messageSuccessColorBg,
+      error: light.messageErrorColorBg,
+    }[type];
+
+    return (
+      <Container
+        ref={ref}
+        type={type}
+        textColor={light.colorText}
+        backgroundColor={backgroundColor}
+        transitionDelay={light.transitionDelay}
+        role='alert'
+      >
+        <AlertIcon type={type} />
+        <Text>{text}</Text>
+      </Container>
+    );
+  }
+);
+
+Message.displayName = 'Message';
+
+export default Message;

package/src/message/index.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { AlertProps } from '../Alert';
+
+import Message, { MESSAGE_DURATION_MS } from './Message';
+
+import {
+  containerStyles,
+  messageContainerStyles,
+  setStylesToHtmlElement,
+} from './styles';
+
+let containerElement: HTMLElement | null;
+
+/**
+ * Creates the container for storing messages.
+ */
+const getContainer = () => {
+  if (!containerElement) {
+    containerElement = document.createElement('div');
+    setStylesToHtmlElement(containerElement, containerStyles);
+    document.body.appendChild(containerElement);
+  }
+  return containerElement;
+};
+
+/**
+ * Delete the container if there are no more messages in it.
+ */
+const deleteContainerIfNoChildNodes = () => {
+  if (!containerElement || containerElement.hasChildNodes()) return;
+  document.body.removeChild(containerElement);
+  containerElement = null;
+};
+
+/**
+ * Renders a new message.
+ */
+const send = (type: AlertProps['type'], text: string) => {
+  // Create a new container for the message
+  const container = getContainer();
+  const messageContainer = document.createElement('div');
+  setStylesToHtmlElement(messageContainer, messageContainerStyles);
+  container.appendChild(messageContainer);
+
+  // Render the message element
+  const messageElement = <Message type={type} text={text} />;
+  ReactDOM.render(messageElement, messageContainer);
+
+  // Delete the message container after N ms
+  setTimeout(() => {
+    ReactDOM.unmountComponentAtNode(messageContainer);
+    container.removeChild(messageContainer);
+    deleteContainerIfNoChildNodes();
+  }, MESSAGE_DURATION_MS);
+};
+
+const message: Record<AlertProps['type'], (text: string) => void> = {
+  info: (text) => send('info', text),
+  success: (text) => send('success', text),
+  error: (text) => send('error', text),
+};
+
+export default message;

package/src/message/styles.ts

@@ -0,0 +1,25 @@
+export const containerStyles: Partial<CSSStyleDeclaration> = {
+  position: 'fixed',
+  top: '0',
+  left: '0',
+  right: '0',
+  zIndex: '1001',
+  pointerEvents: 'none',
+  display: 'flex',
+  flexDirection: 'column',
+};
+
+export const messageContainerStyles: Partial<CSSStyleDeclaration> = {
+  display: 'flex',
+  justifyContent: 'center',
+};
+
+export const setStylesToHtmlElement = (
+  element: HTMLElement,
+  styles: Partial<CSSStyleDeclaration>
+): void => {
+  Object.entries(styles).forEach(([key, value]) => {
+    // eslint-disable-next-line no-param-reassign
+    element.style[key] = value;
+  });
+};