@topthink/common 1.0.29 → 1.0.32

package/scss/menu.scss

@@ -0,0 +1,400 @@
+@font-face {
+  font-family: 'FontAwesome';
+  src: url('https://jsdelivr.topthink.com/npm/font-awesome@4.2.0/fonts/fontawesome-webfont.eot');
+  src: url('https://jsdelivr.topthink.com/npm/font-awesome@4.2.0/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
+  url('https://jsdelivr.topthink.com/npm/font-awesome@4.2.0/fonts/fontawesome-webfont.woff') format('woff'),
+  url('https://jsdelivr.topthink.com/npm/font-awesome@4.2.0/fonts/fontawesome-webfont.ttf') format('truetype'),
+  url('https://jsdelivr.topthink.com/npm/font-awesome@4.2.0/fonts/fontawesome-webfont.svg?#fontawesomeregular') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+.rc-menu {
+  outline: none;
+  margin-bottom: 0;
+  padding-left: 0;
+  padding-right: 0;
+  list-style: none;
+  border: 1px solid #d9d9d9;
+  box-shadow: 0 0 4px #d9d9d9;
+  border-radius: 3px;
+  color: #666;
+}
+
+.rc-menu-rtl {
+  direction: rtl;
+}
+
+.rc-menu-hidden {
+  display: none;
+}
+
+.rc-menu-collapse {
+  overflow: hidden;
+  transition: height 0.3s ease-out;
+}
+
+.rc-menu-item-group-list {
+  margin: 0;
+  padding: 0;
+}
+
+.rc-menu-item-group-title {
+  color: #999;
+  line-height: 1.5;
+  padding: 8px 10px;
+  border-bottom: 1px solid #dedede;
+}
+
+.rc-menu-item-active,
+.rc-menu-submenu-active > .rc-menu-submenu-title {
+  background-color: #eaf8fe;
+}
+
+.rc-menu-item-selected {
+  background-color: #eaf8fe;
+  transform: translateZ(0);
+}
+
+.rc-menu-submenu-selected {
+  background-color: #eaf8fe;
+}
+
+.rc-menu > li.rc-menu-submenu {
+  padding: 0;
+}
+
+.rc-menu-horizontal.rc-menu-sub,
+.rc-menu-vertical.rc-menu-sub,
+.rc-menu-vertical-left.rc-menu-sub,
+.rc-menu-vertical-right.rc-menu-sub {
+  min-width: 160px;
+  margin-top: 0;
+}
+
+.rc-menu-item,
+.rc-menu-submenu-title {
+  margin: 0;
+  position: relative;
+  display: block;
+  padding: 7px 7px 7px 16px;
+  white-space: nowrap;
+}
+
+.rc-menu-rtl .rc-menu-item,
+.rc-menu-rtl .rc-menu-submenu-title {
+  padding: 7px 16px 7px 7px;
+}
+
+.rc-menu-item.rc-menu-item-disabled,
+.rc-menu-submenu-title.rc-menu-item-disabled,
+.rc-menu-item.rc-menu-submenu-disabled,
+.rc-menu-submenu-title.rc-menu-submenu-disabled {
+  color: #777 !important;
+}
+
+.rc-menu > .rc-menu-item-divider {
+  height: 1px;
+  margin: 1px 0;
+  overflow: hidden;
+  padding: 0;
+  line-height: 0;
+  background-color: #e5e5e5;
+}
+
+.rc-menu-submenu-popup {
+  position: absolute;
+}
+
+.rc-menu-submenu-popup .submenu-title-wrapper {
+  padding-right: 20px;
+}
+
+.rc-menu-submenu-rtl.rc-menu-submenu-popup .submenu-title-wrapper,
+.rc-menu-submenu-rtl .rc-menu-submenu-popup .submenu-title-wrapper {
+  padding-right: 0;
+  padding-left: 20px;
+}
+
+.rc-menu-submenu > .rc-menu {
+  background-color: #fff;
+}
+
+.rc-menu .rc-menu-submenu-title .anticon,
+.rc-menu .rc-menu-item .anticon {
+  width: 14px;
+  height: 14px;
+  margin-right: 8px;
+  top: -1px;
+}
+
+.rc-menu-rtl .rc-menu .rc-menu-submenu-title .anticon,
+.rc-menu-rtl .rc-menu .rc-menu-item .anticon {
+  margin-right: 0;
+  margin-left: 8px;
+}
+
+.rc-menu-horizontal {
+  background-color: #f3f5f7;
+  border: none;
+  border-bottom: 1px solid #d9d9d9;
+  box-shadow: none;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.rc-menu-horizontal > .rc-menu-item,
+.rc-menu-horizontal > .rc-menu-submenu > .rc-menu-submenu-title {
+  padding: 15px 20px;
+}
+
+.rc-menu-horizontal > .rc-menu-submenu,
+.rc-menu-horizontal > .rc-menu-item {
+  border-bottom: 2px solid transparent;
+  display: inline-block;
+  vertical-align: bottom;
+}
+
+.rc-menu-horizontal > .rc-menu-submenu-active,
+.rc-menu-horizontal > .rc-menu-item-active {
+  border-bottom: 2px solid #2db7f5;
+  background-color: #f3f5f7;
+  color: #2baee9;
+}
+
+.rc-menu-horizontal:after {
+  content: '\20';
+  display: block;
+  height: 0;
+  clear: both;
+}
+
+.rc-menu-vertical,
+.rc-menu-vertical-left,
+.rc-menu-vertical-right,
+.rc-menu-inline {
+  padding: 12px 0;
+}
+
+.rc-menu-vertical > .rc-menu-item,
+.rc-menu-vertical-left > .rc-menu-item,
+.rc-menu-vertical-right > .rc-menu-item,
+.rc-menu-inline > .rc-menu-item,
+.rc-menu-vertical > .rc-menu-submenu > .rc-menu-submenu-title,
+.rc-menu-vertical-left > .rc-menu-submenu > .rc-menu-submenu-title,
+.rc-menu-vertical-right > .rc-menu-submenu > .rc-menu-submenu-title,
+.rc-menu-inline > .rc-menu-submenu > .rc-menu-submenu-title {
+  padding: 12px 8px 12px 24px;
+}
+
+.rc-menu-rtl.rc-menu-vertical > .rc-menu-item,
+.rc-menu-rtl.rc-menu-vertical-left > .rc-menu-item,
+.rc-menu-rtl.rc-menu-vertical-right > .rc-menu-item,
+.rc-menu-rtl.rc-menu-inline > .rc-menu-item,
+.rc-menu-rtl.rc-menu-vertical > .rc-menu-submenu > .rc-menu-submenu-title,
+.rc-menu-rtl.rc-menu-vertical-left > .rc-menu-submenu > .rc-menu-submenu-title,
+.rc-menu-rtl.rc-menu-vertical-right > .rc-menu-submenu > .rc-menu-submenu-title,
+.rc-menu-rtl.rc-menu-inline > .rc-menu-submenu > .rc-menu-submenu-title {
+  padding: 12px 24px 12px 8px;
+}
+
+.rc-menu-vertical .rc-menu-submenu-arrow,
+.rc-menu-vertical-left .rc-menu-submenu-arrow,
+.rc-menu-vertical-right .rc-menu-submenu-arrow,
+.rc-menu-inline .rc-menu-submenu-arrow {
+  display: inline-block;
+  font: normal normal normal 14px/1 FontAwesome;
+  font-size: inherit;
+  vertical-align: baseline;
+  text-align: center;
+  text-transform: none;
+  text-rendering: auto;
+  position: absolute;
+  right: 16px;
+  line-height: 1.5em;
+}
+
+.rc-menu-vertical .rc-menu-submenu-arrow:before,
+.rc-menu-vertical-left .rc-menu-submenu-arrow:before,
+.rc-menu-vertical-right .rc-menu-submenu-arrow:before,
+.rc-menu-inline .rc-menu-submenu-arrow:before {
+  content: '\f0da';
+}
+
+.rc-menu-rtl.rc-menu-vertical .rc-menu-submenu-arrow:before,
+.rc-menu-rtl.rc-menu-vertical-left .rc-menu-submenu-arrow:before,
+.rc-menu-rtl.rc-menu-vertical-right .rc-menu-submenu-arrow:before,
+.rc-menu-rtl.rc-menu-inline .rc-menu-submenu-arrow:before,
+.rc-menu-submenu-rtl .rc-menu-vertical .rc-menu-submenu-arrow:before,
+.rc-menu-submenu-rtl .rc-menu-vertical-left .rc-menu-submenu-arrow:before,
+.rc-menu-submenu-rtl .rc-menu-vertical-right .rc-menu-submenu-arrow:before,
+.rc-menu-submenu-rtl .rc-menu-inline .rc-menu-submenu-arrow:before {
+  content: '\f0d9';
+}
+
+.rc-menu-rtl.rc-menu-vertical .rc-menu-submenu-arrow,
+.rc-menu-rtl.rc-menu-vertical-left .rc-menu-submenu-arrow,
+.rc-menu-rtl.rc-menu-vertical-right .rc-menu-submenu-arrow,
+.rc-menu-rtl.rc-menu-inline .rc-menu-submenu-arrow,
+.rc-menu-submenu-rtl .rc-menu-vertical .rc-menu-submenu-arrow,
+.rc-menu-submenu-rtl .rc-menu-vertical-left .rc-menu-submenu-arrow,
+.rc-menu-submenu-rtl .rc-menu-vertical-right .rc-menu-submenu-arrow,
+.rc-menu-submenu-rtl .rc-menu-inline .rc-menu-submenu-arrow {
+  right: auto;
+  left: 16px;
+}
+
+.rc-menu-inline .rc-menu-submenu-arrow {
+  transform: rotate(90deg);
+  transition: transform 0.3s;
+}
+
+.rc-menu-inline .rc-menu-submenu-open > .rc-menu-submenu-title .rc-menu-submenu-arrow {
+  transform: rotate(-90deg);
+}
+
+.rc-menu-vertical.rc-menu-sub,
+.rc-menu-vertical-left.rc-menu-sub,
+.rc-menu-vertical-right.rc-menu-sub {
+  padding: 0;
+}
+
+.rc-menu-submenu-rtl .rc-menu-vertical.rc-menu-sub,
+.rc-menu-submenu-rtl .rc-menu-vertical-left.rc-menu-sub,
+.rc-menu-submenu-rtl .rc-menu-vertical-right.rc-menu-sub {
+  direction: rtl;
+}
+
+.rc-menu-sub.rc-menu-inline {
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.rc-menu-sub.rc-menu-inline > .rc-menu-item,
+.rc-menu-sub.rc-menu-inline > .rc-menu-submenu > .rc-menu-submenu-title {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  padding-right: 0;
+}
+
+.rc-menu-rtl .rc-menu-sub.rc-menu-inline > .rc-menu-item,
+.rc-menu-rtl .rc-menu-sub.rc-menu-inline > .rc-menu-submenu > .rc-menu-submenu-title {
+  padding-left: 0;
+}
+
+.rc-menu-open-slide-up-enter,
+.rc-menu-open-slide-up-appear {
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+  transform-origin: 0 0;
+  opacity: 0;
+  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+  animation-play-state: paused;
+}
+
+.rc-menu-open-slide-up-leave {
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+  transform-origin: 0 0;
+  opacity: 1;
+  animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+  animation-play-state: paused;
+}
+
+.rc-menu-open-slide-up-enter.rc-menu-open-slide-up-enter-active,
+.rc-menu-open-slide-up-appear.rc-menu-open-slide-up-appear-active {
+  animation-name: rcMenuOpenSlideUpIn;
+  animation-play-state: running;
+}
+
+.rc-menu-open-slide-up-leave.rc-menu-open-slide-up-leave-active {
+  animation-name: rcMenuOpenSlideUpOut;
+  animation-play-state: running;
+}
+
+@keyframes rcMenuOpenSlideUpIn {
+  0% {
+    opacity: 0;
+    transform-origin: 0% 0%;
+    transform: scaleY(0);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 0% 0%;
+    transform: scaleY(1);
+  }
+}
+
+@keyframes rcMenuOpenSlideUpOut {
+  0% {
+    opacity: 1;
+    transform-origin: 0% 0%;
+    transform: scaleY(1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 0% 0%;
+    transform: scaleY(0);
+  }
+}
+
+.rc-menu-open-zoom-enter,
+.rc-menu-open-zoom-appear {
+  opacity: 0;
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+  transform-origin: 0 0;
+  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+  animation-play-state: paused;
+}
+
+.rc-menu-open-zoom-leave {
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+  transform-origin: 0 0;
+  animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+  animation-play-state: paused;
+}
+
+.rc-menu-open-zoom-enter.rc-menu-open-zoom-enter-active,
+.rc-menu-open-zoom-appear.rc-menu-open-zoom-appear-active {
+  animation-name: rcMenuOpenZoomIn;
+  animation-play-state: running;
+}
+
+.rc-menu-open-zoom-leave.rc-menu-open-zoom-leave-active {
+  animation-name: rcMenuOpenZoomOut;
+  animation-play-state: running;
+}
+
+.rc-menu-submenu-rtl.rc-menu-open-zoom-enter,
+.rc-menu-submenu-rtl.rc-menu-open-zoom-appear,
+.rc-menu-submenu-rtl.rc-menu-open-zoom-leave,
+.rc-menu-submenu-rtl .rc-menu-open-zoom-enter,
+.rc-menu-submenu-rtl .rc-menu-open-zoom-appear,
+.rc-menu-submenu-rtl .rc-menu-open-zoom-leave {
+  transform-origin: top right !important;
+}
+
+@keyframes rcMenuOpenZoomIn {
+  0% {
+    opacity: 0;
+    transform: scale(0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1, 1);
+  }
+}
+
+@keyframes rcMenuOpenZoomOut {
+  0% {
+    transform: scale(1, 1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0, 0);
+  }
+}

package/scss/notification.scss

@@ -0,0 +1,92 @@
+.notification {
+  position: fixed;
+  z-index: 1100;
+
+  &-notice {
+    border-radius: 3px 3px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+    border: 0 solid rgba(0, 0, 0, 0);;
+    background: #fff;
+    display: block;
+    width: auto;
+    line-height: 1.5;
+    position: relative;
+    margin: 10px 0;
+    max-width: 300px;
+    white-space: pre-wrap;
+
+    &-close {
+      position: absolute;
+      right: 5px;
+      top: 3px;
+      color: #000;
+      cursor: pointer;
+      outline: none;
+      font-size: 16px;
+      font-weight: 700;
+      line-height: 1;
+      text-shadow: 0 1px 0 #fff;
+      filter: alpha(opacity=20);
+      opacity: .2;
+      text-decoration: none;
+
+      &-x:after {
+        content: '×';
+      }
+
+      &:hover {
+        opacity: 1;
+        filter: alpha(opacity=100);
+        text-decoration: none;
+      }
+    }
+  }
+
+  @mixin fade-effect {
+    animation-duration: 0.3s;
+    animation-fill-mode: both;
+    animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
+  }
+
+  &-fade-appear,
+  &-fade-enter {
+    opacity: 0;
+
+    @include fade-effect;
+    animation-play-state: paused;
+  }
+
+  &-fade-leave {
+    @include fade-effect;
+    animation-play-state: paused;
+  }
+
+  &-fade-appear#{&}-fade-appear-active,
+  &-fade-enter#{&}-fade-enter-active {
+    animation-name: rcNotificationFadeIn;
+    animation-play-state: running;
+  }
+
+  &-fade-leave#{&}-fade-leave-active {
+    animation-name: rcDialogFadeOut;
+    animation-play-state: running;
+  }
+
+  @keyframes rcNotificationFadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes rcDialogFadeOut {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+}

package/types/components/error-boundary.d.ts

@@ -0,0 +1,17 @@
+import { Component } from 'react';
+import Unauthorized from '../errors/unauthorized';
+interface Props {
+    onUnauthorized?: (error: Unauthorized) => void;
+}
+interface State {
+    unauthorized?: Unauthorized;
+}
+export default class ErrorBoundary extends Component<Props, State> {
+    constructor(props: Props);
+    static getDerivedStateFromError(error: Error): {
+        unauthorized: Unauthorized;
+    } | undefined;
+    componentDidUpdate(): void;
+    render(): import("react").ReactNode;
+}
+export {};

package/types/components/header.d.ts

@@ -1,6 +1,8 @@
 import { PropsWithChildren, ReactNode } from 'react';
 interface Props {
     menus: ReactNode;
+    className?: string;
+    logo?: boolean;
 }
-export default function Header({ children, menus }: PropsWithChildren<Props>): JSX.Element;
+export default function Header({ children, menus, className, logo }: PropsWithChildren<Props>): JSX.Element;
 export {};

package/types/components/root.d.ts

@@ -1,2 +1,11 @@
 import { PropsWithChildren } from 'react';
-export default function Root({ children }: PropsWithChildren<any>): JSX.Element;
+import Unauthorized from '../errors/unauthorized';
+interface Props {
+    basename?: string;
+    onUnauthorized?: (error: Unauthorized) => void;
+    authentication?: 'cookie' | 'token';
+    onLogout?: () => void | Promise<void>;
+    onLogin?: () => (void | string) | Promise<void | string>;
+}
+export default function Root({ children, basename, authentication, onLogout, onLogin }: PropsWithChildren<Props>): JSX.Element;
+export {};

package/types/components/user-provider.d.ts

@@ -1,9 +1,6 @@
 import React, { PropsWithChildren } from 'react';
 import { User } from '../utils/types';
-export declare const UserContext: React.Context<[User | null, (user: User) => void]>;
-interface Props {
-    user: User;
-}
-declare const UserProvider: ({ children, user }: PropsWithChildren<Props>) => JSX.Element;
-export declare function useUser(): [User, ((user: User) => void)];
+export declare const UserContext: React.Context<[User, (user: User) => void] | null>;
+declare const UserProvider: ({ children }: PropsWithChildren<any>) => JSX.Element;
+export declare function useUser(): [User, (user: User) => void];
 export default UserProvider;

package/types/errors/unauthorized.d.ts

@@ -0,0 +1,4 @@
+export default class Unauthorized extends Error {
+    url: string;
+    constructor(url: string);
+}

package/types/index.d.ts

@@ -2,6 +2,7 @@ declare module 'react-router' {
     interface RouteObject {
         meta?: {
             title?: string;
+            icon?: string;
             hideInMenu?: boolean;
             hideChildrenInMenu?: boolean;
         };
@@ -13,7 +14,6 @@ export { default as Result } from './components/result';
 export { default as Header } from './components/header';
 export { default as Footer } from './components/footer';
 export { default as Loader } from './components/loader';
-export { default as Root } from './components/root';
 export { default as Card } from './components/card';
 export { default as Error } from './components/error';
 export { default as Access } from './components/access';
@@ -34,4 +34,5 @@ export { default as UserProvider, useUser } from './components/user-provider';
 export { default as Tooltip } from './components/tooltip';
 export { default as request, RequestConfig, RequestInstance, isRequestError } from './request';
 export { PaginationType, User } from './utils/types';
+export { default as createApplication } from './utils/create-application';
 export { UiSchema as FormUiSchema, Schema as FormSchema, WidgetProps as FormWidgetProps, Widget as FormWidget, IChangeEvent as FormChangeEvent, ISubmitEvent as FormSubmitEvent } from '@topthink/json-form';

package/types/layout/sider.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import 'rc-menu/assets/index.css';
 import type { RouteObject } from 'react-router';
 interface Props {
     title: string;

package/types/pages/login.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface LoginProps {
+    onLogin: () => void | Promise<void>;
+}
+export default function Login({ onLogin }: LoginProps): JSX.Element;
+export {};

package/types/pages/logout.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface LogoutProps {
+    onLogout: () => void | Promise<void>;
+}
+export default function Logout({ onLogout }: LogoutProps): JSX.Element;
+export {};

package/types/request.d.ts

@@ -1,4 +1,4 @@
-import { AxiosRequestConfig, AxiosInstance } from 'axios';
+import { AxiosInstance, AxiosRequestConfig } from 'axios';
 import { RetryConfig } from 'retry-axios';
 export declare type Errors = string | {
     [key: string]: string;
@@ -14,5 +14,12 @@ declare module 'axios' {
 export declare type RequestConfig = AxiosRequestConfig | string;
 export declare type RequestInstance = AxiosInstance;
 export declare const isRequestError: (payload: any) => payload is import("axios").AxiosError<unknown, any>;
-declare const request: <T = any>(config: RequestConfig) => Promise<T>;
+declare const request: {
+    <T = any>(config: RequestConfig): Promise<T>;
+    defaults: import("axios").AxiosDefaults<any>;
+    interceptors: {
+        request: import("axios").AxiosInterceptorManager<AxiosRequestConfig<any>>;
+        response: import("axios").AxiosInterceptorManager<import("axios").AxiosResponse<any, any>>;
+    };
+};
 export default request;

package/types/utils/create-application.d.ts

@@ -0,0 +1,18 @@
+import Unauthorized from '../errors/unauthorized';
+import React, { PropsWithChildren } from 'react';
+import { User } from './types';
+declare type UserResolver = () => User | Promise<User>;
+export declare const AppContext: React.Context<{
+    userResolver?: UserResolver | undefined;
+    onUnauthorized?: ((error: Unauthorized) => void) | undefined;
+}>;
+interface Options {
+    baseURL?: string;
+    basename?: string;
+    authentication?: 'cookie' | 'token';
+    onLogout?: () => void | Promise<void>;
+    onLogin?: () => (void | string) | Promise<void | string>;
+    userResolver?: UserResolver;
+}
+export default function createApplication(options: Options): ({ children }: PropsWithChildren<any>) => JSX.Element;
+export {};

package/types/utils/get-menu-data.d.ts

@@ -2,6 +2,7 @@ import type { RouteObject } from 'react-router';
 export interface MenuData {
     path: string;
     title: string;
+    icon?: string;
     children: MenuData[];
 }
 export default function getMenuData(routes: RouteObject[], base?: string): MenuData[];

package/types/utils/toast.d.ts

@@ -0,0 +1,6 @@
+import { NoticeContent } from 'rc-notification/lib/Notification';
+declare const types: string[];
+declare let Toast: {
+    [index in typeof types[number]]: (content: string, options?: NoticeContent) => void;
+};
+export default Toast;

package/types/layout/basic.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export default function BasicLayout(): JSX.Element;