solid-toast/src/components/ToastBar.tsx at 9fce5d873ce71c8df83047d3443aafcedede978e · ardeora/solid-toast · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
import { createEffect, Match, Switch, Component } from 'solid-js';
import { resolveValue, ToastBarProps } from '../types';
import { getToastYDirection as d, iconContainer, messageContainer, toastBarBase } from '../util';
import { Error, Loader, Success } from './';

export const ToastBar: Component<ToastBarProps> = (props) => {
  let el: HTMLDivElement | undefined;

  createEffect(() => {
    if (!el) return;
    const direction = d(props.toast, props.position);
    if (props.toast.visible) {
      el.animate(
        [
          { transform: `translate3d(0,${direction * -200}%,0) scale(.6)`, opacity: 0.5 },
          { transform: 'translate3d(0,0,0) scale(1)', opacity: 1 },
        ],
        {
          duration: 350,
          fill: 'forwards',
          easing: 'cubic-bezier(.21,1.02,.73,1)',
        }
      );
    } else {
      el.animate(
        [
          { transform: 'translate3d(0,0,-1px) scale(1)', opacity: 1 },
          { transform: `translate3d(0,${direction * -150}%,-1px) scale(.4)`, opacity: 0 },
        ],
        {
          duration: 400,
          fill: 'forwards',
          easing: 'cubic-bezier(.06,.71,.55,1)',
        }
      );
    }
  });

  return (
    <div
      ref={el}
      class={props.toast.className}
      style={{
        ...toastBarBase,
        ...props.toast.style,
      }}
    >
      <Switch>
        <Match when={props.toast.successIcon}>
          <div class={props.toast.type} style={{ ...iconContainer, ...props.toast.iconContainerStyle }}>
            {props.toast.successIcon}
          </div>
        </Match>
        <Match when={props.toast.errorIcon}>
          <div class={props.toast.type} style={{ ...iconContainer, ...props.toast.iconContainerStyle }}>
            {props.toast.errorIcon}
          </div>
        </Match>
        <Match when={props.toast.icon}>
          <div style={{ ...iconContainer, ...props.toast.iconContainerStyle }}>{props.toast.icon}</div>
        </Match>
        <Match when={props.toast.loadingIcon}>
          <div class={props.toast.type} style={{ ...iconContainer, ...props.toast.iconContainerStyle }}>
            {props.toast.loadingIcon}
          </div>
        </Match>
        <Match when={props.toast.type === 'loading'}>
          <div class={props.toast.type} style={{ ...iconContainer, ...props.toast.iconContainerStyle }}>
            <Loader {...props.toast.iconTheme} />
          </div>
        </Match>
        <Match when={props.toast.type === 'success'}>
          <div class={props.toast.type} style={{ ...iconContainer, ...props.toast.iconContainerStyle }}>
            <Success {...props.toast.iconTheme} />
          </div>
        </Match>
        <Match when={props.toast.type === 'error'}>
          <div class={props.toast.type} style={{ ...iconContainer, ...props.toast.iconContainerStyle }}>
            <Error {...props.toast.iconTheme} />
          </div>
        </Match>
      </Switch>

      <div style={messageContainer} {...props.toast.ariaProps}>
        {resolveValue(props.toast.message, props.toast)}
      </div>
    </div>
  );
};