agora-ui-foundation 1.0.0

package/lib/components/toast/index.css

@@ -0,0 +1,239 @@
+/** large size **/
+.fcr-toast-container {
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  border-radius: var(--fcr_cornerradius_round);
+  min-height: 42px;
+  max-width: 800px;
+  min-width: 200px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: fit-content;
+  justify-content: center;
+  pointer-events: all;
+  --toast-large-text-size: 14px;
+  --toast-small-text-size: 12px;
+}
+
+.fcr-toast-container-content,
+.fcr-toast-container-action,
+.fcr-toast-container-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fcr-toast-container-action,
+.fcr-toast-container-icon,
+.fcr-toast-container-close {
+  flex-shrink: 0;
+}
+.fcr-toast-container-icon {
+  padding-right: 10px;
+}
+.fcr-toast-container-action {
+  padding: 0 10px;
+  cursor: pointer;
+  height: 40px;
+}
+.fcr-toast-container-content {
+  padding: 10px 0;
+  flex: 1;
+  word-break: break-all;
+}
+.fcr-toast-container-content > span {
+  color: var(--fcr_ui_scene_white10);
+  font-size: var(--toast-large-text-size);
+  line-height: 130%;
+}
+
+.fcr-toast-container-action > span {
+  color: var(--fcr_ui_scene_white10);
+  font-size: var(--toast-large-text-size);
+}
+.fcr-toast-normal .fcr-toast-container-content > span {
+  color: var(--fcr_ui_scene_inverse);
+  font-size: var(--toast-large-text-size);
+  line-height: 130%;
+}
+
+.fcr-toast-normal .fcr-toast-container-action > span {
+  color: var(--fcr_ui_scene_inverse);
+  font-size: var(--toast-large-text-size);
+}
+.fcr-toast-warn .fcr-toast-container-content > span {
+  color: var(--fcr_ui_scene_black10);
+  font-size: var(--toast-large-text-size);
+  line-height: 130%;
+}
+
+.fcr-toast-warn .fcr-toast-container-action > span {
+  color: var(--fcr_ui_scene_black10);
+  font-size: var(--toast-large-text-size);
+}
+.fcr-toast-container .fcr-divider::before {
+  content: '';
+  width: 1px;
+  height: calc(100% - 8px);
+  background: linear-gradient(
+    rgba(255, 255, 255, 0) 0%,
+    #ffffff 52.6%,
+    rgba(255, 255, 255, 0) 97.92%
+  );
+  position: absolute;
+  top: 3px;
+  left: 0;
+}
+
+.fcr-toast-normal .fcr-divider::before {
+  background: linear-gradient(rgba(0, 0, 0, 0) 0%, #000000 52.6%, rgba(0, 0, 0, 0) 97.92%);
+}
+
+.fcr-toast-container-close {
+  width: 42px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 40px;
+  cursor: pointer;
+}
+
+/** small size **/
+.fcr-toast-container.fcr-toast-small {
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  border-radius: var(--fcr_cornerradius_round);
+  min-height: 36px;
+  max-width: 258px;
+  min-width: 110px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: fit-content;
+  justify-content: center;
+  pointer-events: all;
+}
+
+.fcr-toast-small .fcr-toast-container-icon {
+  padding-right: 8px;
+}
+.fcr-toast-small .fcr-toast-container-action {
+  padding: 0 10px;
+  cursor: pointer;
+  height: 36px;
+}
+.fcr-toast-small .fcr-toast-container-content {
+  padding: 10px 0;
+  flex: 1;
+}
+.fcr-toast-small .fcr-toast-container-content > span {
+  color: var(--fcr_ui_scene_white10);
+  font-size: var(--toast-small-text-size);
+  line-height: 130%;
+}
+
+.fcr-toast-small .fcr-toast-container-action > span {
+  color: var(--fcr_ui_scene_white10);
+  font-size: var(--toast-small-text-size);
+}
+.fcr-toast-small.fcr-toast-normal .fcr-toast-container-content > span {
+  color: var(--fcr_ui_scene_inverse);
+  font-size: var(--toast-small-text-size);
+  line-height: 130%;
+}
+
+.fcr-toast-small.fcr-toast-normal .fcr-toast-container-action > span {
+  color: var(--fcr_ui_scene_inverse);
+  font-size: var(--toast-small-text-size);
+}
+
+.fcr-toast-container-close {
+  width: 42px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 36px;
+  cursor: pointer;
+}
+
+/** style **/
+.fcr-toast-normal {
+  background: var(--fcr_mobile_ui_scene_toast1);
+}
+.fcr-toast-error {
+  background: var(--fcr_ui_scene_ramp_red6);
+}
+.fcr-toast-warn {
+  background: var(--fcr_ui_scene_ramp_yellow6);
+}
+.fcr-toast-info {
+  background: var(--fcr_ui_scene_ramp_brand6);
+}
+
+.fcr-toast-anim-enter {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+.fcr-toast-anim-enter-active {
+  opacity: 1;
+  transition: all 0.2s ease-in;
+  transform: translateY(0px);
+}
+.fcr-toast-anim-enter-done {
+  opacity: 1;
+}
+.fcr-toast-anim-exit {
+  opacity: 1;
+}
+.fcr-toast-anim-exit-active {
+  opacity: 0;
+  transition: all 0.2s ease-in;
+  transform: translateY(-10px);
+}
+.fcr-toast-anim-exit-done {
+  opacity: 0;
+}
+
+.fcr-single-toast-container {
+  width: fit-content;
+  pointer-events: none;
+  position: absolute;
+  top: 12%;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  z-index: 1100;
+}
+.fcr-presist-toast-container {
+  width: fit-content;
+  pointer-events: none;
+  position: absolute;
+  bottom: 75px;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  z-index: 1100;
+}
+.fcr-toast-portal {
+  display: flex;
+  justify-content: center;
+  padding: 15px 0;
+}
+
+.fcr-toast-placement-top {
+  width: fit-content;
+  pointer-events: none;
+  position: absolute;
+  top: 12%;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+}
+.fcr-toast-placement-bottom {
+  width: fit-content;
+  pointer-events: none;
+  position: absolute;
+  top: 75%;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+}

package/lib/components/toast/index.d.ts

@@ -0,0 +1,123 @@
+import './index.css';
+import { FcrIconType } from '../icon/type';
+export type ToastType = 'error' | 'warn' | 'info' | 'normal';
+export type ToastSize = 'small' | 'large';
+interface ToastProps {
+    /**
+     * 消息提示框类型，可选值为 'error'(错误) | 'warn'(警告) | 'info'（消息） | 'normal'（普通）
+     */
+    /** @en
+     * The type of toast, can be set to 'error' | 'warn' | 'info' | 'normal'.
+     */
+    type: ToastType;
+    /**
+     * 消息提示内容
+     */
+    /** @en
+     * The content of toast.
+     */
+    content: string;
+    /**
+     * 消息是否显示关闭按钮
+     */
+    /** @en
+     * wheter a close button is visible on right of the toast or not.
+     */
+    closable?: boolean;
+    /**
+     * 消息内容前显示的图标
+     */
+    /** @en
+     *
+     */
+    icon?: FcrIconType;
+    /**
+     * 消息中的额外操作选项
+     */
+    /** @en
+     * Size of the input box:
+     * medium
+     * large
+     */
+    action?: {
+        /**
+         * 消息中的额外操作选项文案
+         */
+        /** @en
+         * Size of the input box:
+         * medium
+         * large
+         */
+        text: string;
+        /**
+         * 消息中的额外操作选项点击回调
+         */
+        /** @en
+         * Size of the input box:
+         * medium
+         * large
+         */
+        onClick: () => void;
+    };
+    /**
+     * 点击关闭按钮的回调
+     */
+    /** @en
+     * Size of the input box:
+     * medium
+     * large
+     */
+    onClose?: () => void;
+    size?: ToastSize;
+}
+export declare const FcrToast: (props: ToastProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FcrToastTransitionGroup: (props: {
+    onEnded?: () => void;
+    duration?: number;
+    position?: 'top' | 'bottom';
+} & ToastProps) => import("react/jsx-runtime").JSX.Element;
+export interface ToastConfig {
+    id?: string;
+    persist?: boolean;
+    toastProps: ToastProps;
+    duration?: number;
+    customRootClass?: string;
+}
+export declare const TOAST_ROOT_CLASS_NAME = "fcr-toast-root";
+export declare class FcrToastApi {
+    private static get _presistToastContainer();
+    private static get _singleToastContainer();
+    private static get _toastRoot();
+    private static customRootClass?;
+    private static _maxPresistToastRenderCount;
+    private static _presistToastRenderCount;
+    private static _presistToasts;
+    private static _singleToast;
+    private static _singleToastContainerCls;
+    private static _presistToastContainerCls;
+    private static _unmountToast;
+    private static _preCheck;
+    private static _createToastContainer;
+    private static _removeToastContainer;
+    private static _scanRenderableToast;
+    private static _render;
+    static open(config: ToastConfig): void;
+    static destroyAll(): void;
+}
+export declare class FcrToastApiFactory {
+    private _toastPlacement;
+    private _renderContainer;
+    constructor({ toastPlacement, renderContainer, }: {
+        toastPlacement: 'top' | 'bottom';
+        renderContainer: HTMLElement;
+    });
+    private get _toastContainer();
+    private get _toastContainerCls();
+    private _toast;
+    private _unmountToast;
+    private _createToastContainer;
+    private _removeToastContainer;
+    private _render;
+    open(config: ToastConfig): void;
+}
+export {};