@douyinfe/semi-ui 2.1.0-beta.2 → 2.1.0-next.2

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

@@ -0,0 +1,200 @@
+import React, { CSSProperties } from 'react';
+import PropTypes from 'prop-types';
+import { ToastListAdapter, ToastListProps, ToastListState } from '@douyinfe/semi-foundation/lib/cjs/toast/toastListFoundation';
+import '@douyinfe/semi-foundation/lib/cjs/toast/toast.css';
+import useToast from './useToast';
+import { ConfigProps, ToastInstance, ToastProps, ToastState } from '@douyinfe/semi-foundation/lib/cjs/toast/toastFoundation';
+import { Motion } from '../_base/base';
+export { ToastTransitionProps } from './ToastTransition';
+export interface ToastReactProps extends ToastProps {
+    style?: CSSProperties;
+    icon?: React.ReactNode;
+    content: React.ReactNode;
+}
+export { ConfigProps, ToastListProps, ToastListState, ToastState };
+declare const createBaseToast: () => {
+    new (props: ToastListProps): {
+        readonly adapter: ToastListAdapter;
+        add(opts: ToastInstance): any;
+        remove(id: string): any;
+        destroyAll(): any;
+        render(): JSX.Element;
+        cache: any;
+        foundation: any;
+        componentDidMount(): void;
+        componentWillUnmount(): void;
+        isControlled: (key: any) => boolean;
+        log(text: string, ...rest: any): any;
+        context: any;
+        setState<K extends keyof ToastListState>(state: ToastListState | ((prevState: Readonly<ToastListState>, props: Readonly<ToastListProps>) => ToastListState | Pick<ToastListState, K>) | Pick<ToastListState, K>, callback?: () => void): void;
+        forceUpdate(callback?: () => void): void;
+        readonly props: Readonly<ToastListProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<ToastListState>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<ToastListProps>, nextState: Readonly<ToastListState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<ToastListProps>, prevState: Readonly<ToastListState>): any;
+        componentDidUpdate?(prevProps: Readonly<ToastListProps>, prevState: Readonly<ToastListState>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<ToastListProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<ToastListProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<ToastListProps>, nextState: Readonly<ToastListState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<ToastListProps>, nextState: Readonly<ToastListState>, nextContext: any): void;
+    };
+    ref: {
+        readonly adapter: ToastListAdapter;
+        add(opts: ToastInstance): any;
+        remove(id: string): any;
+        destroyAll(): any;
+        render(): JSX.Element;
+        cache: any;
+        foundation: any;
+        componentDidMount(): void;
+        componentWillUnmount(): void;
+        isControlled: (key: any) => boolean;
+        log(text: string, ...rest: any): any;
+        context: any;
+        setState<K extends keyof ToastListState>(state: ToastListState | ((prevState: Readonly<ToastListState>, props: Readonly<ToastListProps>) => ToastListState | Pick<ToastListState, K>) | Pick<ToastListState, K>, callback?: () => void): void;
+        forceUpdate(callback?: () => void): void;
+        readonly props: Readonly<ToastListProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<ToastListState>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<ToastListProps>, nextState: Readonly<ToastListState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<ToastListProps>, prevState: Readonly<ToastListState>): any;
+        componentDidUpdate?(prevProps: Readonly<ToastListProps>, prevState: Readonly<ToastListState>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<ToastListProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<ToastListProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<ToastListProps>, nextState: Readonly<ToastListState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<ToastListProps>, nextState: Readonly<ToastListState>, nextContext: any): void;
+    };
+    useToast: typeof useToast;
+    defaultOpts: ToastReactProps & {
+        motion: Motion;
+    };
+    propTypes: {
+        content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        duration: PropTypes.Requireable<number>;
+        onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        direction: PropTypes.Requireable<string>;
+    };
+    defaultProps: {};
+    wrapperId: null | string;
+    create(opts: ToastReactProps): string;
+    close(id: string): void;
+    destroyAll(): void;
+    getWrapperId(): string;
+    info(opts: Omit<ToastReactProps, 'type'> | string): string;
+    warning(opts: Omit<ToastReactProps, 'type'> | string): string;
+    error(opts: Omit<ToastReactProps, 'type'> | string): string;
+    success(opts: Omit<ToastReactProps, 'type'> | string): string;
+    config(opts: ConfigProps): void;
+    contextType?: React.Context<any>;
+};
+export declare class ToastFactory {
+    static create(config?: ConfigProps): ReturnType<typeof createBaseToast>;
+}
+declare const _default: {
+    new (props: ToastListProps): {
+        readonly adapter: ToastListAdapter;
+        add(opts: ToastInstance): any;
+        remove(id: string): any;
+        destroyAll(): any;
+        render(): JSX.Element;
+        cache: any;
+        foundation: any;
+        componentDidMount(): void;
+        componentWillUnmount(): void;
+        isControlled: (key: any) => boolean;
+        log(text: string, ...rest: any): any;
+        context: any;
+        setState<K extends keyof ToastListState>(state: ToastListState | ((prevState: Readonly<ToastListState>, props: Readonly<ToastListProps>) => ToastListState | Pick<ToastListState, K>) | Pick<ToastListState, K>, callback?: () => void): void;
+        forceUpdate(callback?: () => void): void;
+        readonly props: Readonly<ToastListProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<ToastListState>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<ToastListProps>, nextState: Readonly<ToastListState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<ToastListProps>, prevState: Readonly<ToastListState>): any;
+        componentDidUpdate?(prevProps: Readonly<ToastListProps>, prevState: Readonly<ToastListState>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<ToastListProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<ToastListProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<ToastListProps>, nextState: Readonly<ToastListState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<ToastListProps>, nextState: Readonly<ToastListState>, nextContext: any): void;
+    };
+    ref: {
+        readonly adapter: ToastListAdapter;
+        add(opts: ToastInstance): any;
+        remove(id: string): any;
+        destroyAll(): any;
+        render(): JSX.Element;
+        cache: any;
+        foundation: any;
+        componentDidMount(): void;
+        componentWillUnmount(): void;
+        isControlled: (key: any) => boolean;
+        log(text: string, ...rest: any): any;
+        context: any;
+        setState<K extends keyof ToastListState>(state: ToastListState | ((prevState: Readonly<ToastListState>, props: Readonly<ToastListProps>) => ToastListState | Pick<ToastListState, K>) | Pick<ToastListState, K>, callback?: () => void): void;
+        forceUpdate(callback?: () => void): void;
+        readonly props: Readonly<ToastListProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<ToastListState>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<ToastListProps>, nextState: Readonly<ToastListState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<ToastListProps>, prevState: Readonly<ToastListState>): any;
+        componentDidUpdate?(prevProps: Readonly<ToastListProps>, prevState: Readonly<ToastListState>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<ToastListProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<ToastListProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<ToastListProps>, nextState: Readonly<ToastListState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<ToastListProps>, nextState: Readonly<ToastListState>, nextContext: any): void;
+    };
+    useToast: typeof useToast;
+    defaultOpts: ToastReactProps & {
+        motion: Motion<any>;
+    };
+    propTypes: {
+        content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        duration: PropTypes.Requireable<number>;
+        onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        direction: PropTypes.Requireable<string>;
+    };
+    defaultProps: {};
+    wrapperId: string;
+    create(opts: ToastReactProps): string;
+    close(id: string): void;
+    destroyAll(): void;
+    getWrapperId(): string;
+    info(opts: string | Omit<ToastReactProps, "type">): string;
+    warning(opts: string | Omit<ToastReactProps, "type">): string;
+    error(opts: string | Omit<ToastReactProps, "type">): string;
+    success(opts: string | Omit<ToastReactProps, "type">): string;
+    config(opts: ConfigProps): void;
+    contextType?: React.Context<any>;
+};
+export default _default;

package/lib/cjs/toast/index.js

@@ -0,0 +1,281 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = exports.ToastFactory = void 0;
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
+
+var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set"));
+
+var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _toastListFoundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/toast/toastListFoundation"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/toast/constants");
+
+var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
+
+var _toast = _interopRequireDefault(require("./toast"));
+
+require("@douyinfe/semi-foundation/lib/cjs/toast/toast.css");
+
+var _ToastTransition = _interopRequireDefault(require("./ToastTransition"));
+
+var _uuid = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/uuid"));
+
+var _useToast = _interopRequireDefault(require("./useToast"));
+
+/* eslint-disable no-param-reassign */
+const createBaseToast = () => {
+  var _a;
+
+  return _a = class ToastList extends _baseComponent.default {
+    constructor(props) {
+      super(props);
+      this.state = {
+        list: [],
+        removedItems: []
+      };
+      this.foundation = new _toastListFoundation.default(this.adapter);
+    }
+
+    get adapter() {
+      return (0, _assign.default)((0, _assign.default)({}, super.adapter), {
+        updateToast: (list, removedItems) => {
+          this.setState({
+            list,
+            removedItems
+          });
+        }
+      });
+    }
+
+    static create(opts) {
+      const id = (0, _uuid.default)('toast'); // this.id = id;
+
+      if (!ToastList.ref) {
+        var _context2;
+
+        const div = document.createElement('div');
+
+        if (!this.wrapperId) {
+          var _context;
+
+          this.wrapperId = (0, _slice.default)(_context = (0, _uuid.default)('toast-wrapper')).call(_context, 0, 26);
+        }
+
+        div.className = _constants.cssClasses.WRAPPER;
+        div.id = this.wrapperId;
+        div.style.zIndex = String(typeof opts.zIndex === 'number' ? opts.zIndex : ToastList.defaultOpts.zIndex);
+        (0, _map.default)(_context2 = ['top', 'left', 'bottom', 'right']).call(_context2, pos => {
+          if (pos in ToastList.defaultOpts || pos in opts) {
+            const val = opts[pos] ? opts[pos] : ToastList.defaultOpts[pos];
+            div.style[pos] = typeof val === 'number' ? "".concat(val, "px") : val;
+          }
+        }); // document.body.appendChild(div);
+
+        if (ToastList.defaultOpts.getPopupContainer) {
+          const container = ToastList.defaultOpts.getPopupContainer();
+          container.appendChild(div);
+        } else {
+          document.body.appendChild(div);
+        }
+
+        _reactDom.default.render( /*#__PURE__*/_react.default.createElement(ToastList, {
+          ref: instance => ToastList.ref = instance
+        }), div, () => {
+          ToastList.ref.add((0, _assign.default)((0, _assign.default)({}, opts), {
+            id
+          }));
+        });
+      } else {
+        var _context3;
+
+        const node = document.querySelector("#".concat(this.wrapperId));
+        (0, _map.default)(_context3 = ['top', 'left', 'bottom', 'right']).call(_context3, pos => {
+          if (pos in opts) {
+            node.style[pos] = typeof opts[pos] === 'number' ? "".concat(opts[pos], "px") : opts[pos];
+          }
+        });
+        ToastList.ref.add((0, _assign.default)((0, _assign.default)({}, opts), {
+          id
+        }));
+      }
+
+      return id;
+    }
+
+    static close(id) {
+      if (ToastList.ref) {
+        ToastList.ref.remove(id);
+      }
+    }
+
+    static destroyAll() {
+      if (ToastList.ref) {
+        ToastList.ref.destroyAll();
+        const wrapper = document.querySelector("#".concat(this.wrapperId));
+
+        _reactDom.default.unmountComponentAtNode(wrapper);
+
+        wrapper && wrapper.parentNode.removeChild(wrapper);
+        ToastList.ref = null;
+        this.wrapperId = null;
+      }
+    }
+
+    static getWrapperId() {
+      return this.wrapperId;
+    }
+
+    static info(opts) {
+      if (typeof opts === 'string') {
+        opts = {
+          content: opts
+        };
+      }
+
+      return this.create((0, _assign.default)((0, _assign.default)((0, _assign.default)({}, ToastList.defaultOpts), opts), {
+        type: 'info'
+      }));
+    }
+
+    static warning(opts) {
+      if (typeof opts === 'string') {
+        opts = {
+          content: opts
+        };
+      }
+
+      return this.create((0, _assign.default)((0, _assign.default)((0, _assign.default)({}, ToastList.defaultOpts), opts), {
+        type: 'warning'
+      }));
+    }
+
+    static error(opts) {
+      if (typeof opts === 'string') {
+        opts = {
+          content: opts
+        };
+      }
+
+      return this.create((0, _assign.default)((0, _assign.default)((0, _assign.default)({}, ToastList.defaultOpts), opts), {
+        type: 'error'
+      }));
+    }
+
+    static success(opts) {
+      if (typeof opts === 'string') {
+        opts = {
+          content: opts
+        };
+      }
+
+      return this.create((0, _assign.default)((0, _assign.default)((0, _assign.default)({}, ToastList.defaultOpts), opts), {
+        type: 'success'
+      }));
+    }
+
+    static config(opts) {
+      var _context4;
+
+      (0, _forEach.default)(_context4 = ['top', 'left', 'bottom', 'right']).call(_context4, pos => {
+        if (pos in opts) {
+          ToastList.defaultOpts[pos] = opts[pos];
+        }
+      });
+
+      if (typeof opts.zIndex === 'number') {
+        ToastList.defaultOpts.zIndex = opts.zIndex;
+      }
+
+      if (typeof opts.duration === 'number') {
+        ToastList.defaultOpts.duration = opts.duration;
+      }
+
+      if (typeof opts.getPopupContainer === 'function') {
+        ToastList.defaultOpts.getPopupContainer = opts.getPopupContainer;
+      }
+    }
+
+    add(opts) {
+      return this.foundation.addToast(opts);
+    }
+
+    remove(id) {
+      return this.foundation.removeToast(id);
+    }
+
+    destroyAll() {
+      return this.foundation.destroyAll();
+    }
+
+    render() {
+      let {
+        list
+      } = this.state;
+      const {
+        removedItems
+      } = this.state;
+      list = (0, _from.default)(new _set.default([...list, ...removedItems]));
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _map.default)(list).call(list, (item, index) => item.motion ? /*#__PURE__*/_react.default.createElement(_ToastTransition.default, {
+        key: item.id || index,
+        motion: item.motion
+      }, (0, _find.default)(removedItems).call(removedItems, removedItem => removedItem.id === item.id) ? null : transitionStyle => /*#__PURE__*/_react.default.createElement(_toast.default, (0, _assign.default)({}, item, {
+        style: (0, _assign.default)((0, _assign.default)({}, transitionStyle), item.style),
+        close: id => this.remove(id)
+      }))) : /*#__PURE__*/_react.default.createElement(_toast.default, (0, _assign.default)({}, item, {
+        style: (0, _assign.default)({}, item.style),
+        close: id => this.remove(id)
+      }))));
+    }
+
+  }, _a.defaultOpts = {
+    motion: true,
+    zIndex: 1010,
+    content: ''
+  }, _a.propTypes = {
+    content: _propTypes.default.node,
+    duration: _propTypes.default.number,
+    onClose: _propTypes.default.func,
+    icon: _propTypes.default.node,
+    direction: _propTypes.default.oneOf(_constants.strings.directions)
+  }, _a.defaultProps = {}, _a;
+};
+
+class ToastFactory {
+  static create(config) {
+    const newToast = createBaseToast();
+    newToast.useToast = _useToast.default;
+    config && newToast.config(config);
+    return newToast;
+  }
+
+}
+
+exports.ToastFactory = ToastFactory;
+
+var _default = ToastFactory.create();
+
+exports.default = _default;

package/lib/cjs/toast/toast.d.ts

@@ -0,0 +1,45 @@
+import React, { CSSProperties } from 'react';
+import PropTypes from 'prop-types';
+import { ToastAdapter, ToastState, ToastProps } from '@douyinfe/semi-foundation/lib/cjs/toast/toastFoundation';
+import BaseComponent from '../_base/baseComponent';
+export interface ToastReactProps extends ToastProps {
+    style?: CSSProperties;
+    icon?: React.ReactNode;
+    content: React.ReactNode;
+}
+declare class Toast extends BaseComponent<ToastReactProps, ToastState> {
+    static contextType: React.Context<import("../configProvider/context").ContextValue>;
+    static propTypes: {
+        onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        close: PropTypes.Requireable<(...args: any[]) => any>;
+        duration: PropTypes.Requireable<number>;
+        theme: PropTypes.Requireable<string>;
+        type: PropTypes.Requireable<string>;
+        textMaxWidth: PropTypes.Requireable<string | number>;
+        style: PropTypes.Requireable<object>;
+        className: PropTypes.Requireable<string>;
+        showClose: PropTypes.Requireable<boolean>;
+        icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        direction: PropTypes.Requireable<string>;
+    };
+    static defaultProps: {
+        onClose: (...args: any[]) => void;
+        content: string;
+        close: (...args: any[]) => void;
+        duration: number;
+        textMaxWidth: number;
+        showClose: boolean;
+        theme: string;
+    };
+    constructor(props: ToastReactProps);
+    get adapter(): ToastAdapter;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    close(e: React.MouseEvent): void;
+    clearCloseTimer: () => void;
+    startCloseTimer: () => void;
+    renderIcon(): {};
+    render(): JSX.Element;
+}
+export default Toast;