tntd 1.3.66 → 1.4.2

package/es/Layout/paaslayout/index.js

@@ -0,0 +1,235 @@
+import "antd/lib/layout/style";
+import _Layout from "antd/lib/layout";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+
+function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _templateObject() {
+  var data = _taggedTemplateLiteral(["\n    position: relative;\n    height: 100vh;\n    overflow: hidden;\n    & > .ant-layout {\n        flex-direction: row;\n        & > .ant-layout-content {\n            overflow-x: hidden;\n            flex: 1;\n        }\n    }\n    .tnt-layout-sider {\n        overflow-x: hidden;\n        background: #fff !important;\n        box-shadow: 0 1px 10px 0 rgba(0,0,0,0.10);\n        z-index: 8;\n    }\n    &.isInIframe, &.isEmptyLayout {\n        .tnt-layout-sider {\n            display: none;\n        }\n    }\n    &.tnt-themeS1 .tnt-layout-sider {\n        background: #fff !important;\n    }\n    .tnt-layout-content {\n        background: ", ";\n    }\n"]);
+
+  _templateObject = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+import { useState, useEffect } from 'react';
+import styled, { withTheme } from 'styled-components';
+import cn from 'classnames';
+import { get, reduce, isUndefined } from 'lodash';
+import { getSelectedMenuInfo } from '../utils';
+import HeaderNavs from '../HeaderNavs';
+import Header from './Header';
+import SideMenu from './SideMenu';
+import CompactSideMenu from './CompactSideMenu';
+import { getLanguageStore, getThemeStore } from '../storage';
+var Content = _Layout.Content,
+    Sider = _Layout.Sider;
+var TNTPaasLayout = styled(_Layout)(_templateObject(), function (props) {
+  return props.theme.lightBgColor;
+});
+
+var noop = function noop() {
+  return true;
+};
+
+export default withTheme(function (props) {
+  var appKey = props.appKey,
+      logo = props.logo,
+      name = props.name,
+      enName = props.enName,
+      isInIframe = props.isInIframe,
+      isEmptyLayout = props.isEmptyLayout,
+      selectedAppKey = props.selectedAppKey,
+      appList = props.appList,
+      _props$config = props.config,
+      config = _props$config === void 0 ? {} : _props$config,
+      extraHeaderActions = props.extraHeaderActions,
+      headerNavs = props.headerNavs,
+      sideMenu = props.sideMenu,
+      selectedMenuKey = props.selectedMenuKey,
+      _props$menuAlignMode = props.menuAlignMode,
+      menuAlignMode = _props$menuAlignMode === void 0 ? 'side' : _props$menuAlignMode,
+      _props$menus = props.menus,
+      menus = _props$menus === void 0 ? [] : _props$menus,
+      formatMenuPath = props.formatMenuPath,
+      changeRouter = props.changeRouter,
+      _props$onLogoClick = props.onLogoClick,
+      onLogoClick = _props$onLogoClick === void 0 ? noop : _props$onLogoClick,
+      _props$onThemeChange = props.onThemeChange,
+      _onThemeChange = _props$onThemeChange === void 0 ? noop : _props$onThemeChange,
+      _props$onLanguageChan = props.onLanguageChange,
+      _onLanguageChange = _props$onLanguageChan === void 0 ? noop : _props$onLanguageChan,
+      _props$onApplicationC = props.onApplicationChange,
+      _onApplicationChange = _props$onApplicationC === void 0 ? noop : _props$onApplicationC,
+      _props$onAppChange = props.onAppChange,
+      onAppChange = _props$onAppChange === void 0 ? noop : _props$onAppChange,
+      onLogout = props.onLogout,
+      _props$onBeforeMenuCh = props.onBeforeMenuChange,
+      onBeforeMenuChange = _props$onBeforeMenuCh === void 0 ? noop : _props$onBeforeMenuCh,
+      _props$onMenuChange = props.onMenuChange,
+      onMenuChange = _props$onMenuChange === void 0 ? noop : _props$onMenuChange,
+      _props$onMenuSelect = props.onMenuSelect,
+      onMenuSelect = _props$onMenuSelect === void 0 ? noop : _props$onMenuSelect,
+      _props$onHeaderNavCha = props.onHeaderNavChange,
+      onHeaderNavChange = _props$onHeaderNavCha === void 0 ? noop : _props$onHeaderNavCha;
+
+  var _useState = useState(props.userInfo || {}),
+      _useState2 = _slicedToArray(_useState, 2),
+      userInfo = _useState2[0],
+      setUserInfo = _useState2[1];
+
+  var theme = getThemeStore() || userInfo.theme || 'themeS2'; // theme === 'default' ? 'themeS2' : theme;
+
+  theme = ['default', 'themeS3'].includes(theme) ? 'themeS2' : theme;
+  var language = getLanguageStore() || userInfo.lang || 'cn';
+  var menusMapByApp = menus.reduce(function (acc, menu) {
+    var subMenus = menu.children || [];
+    var singleGroupMap = subMenus.reduce(function (acc, subMenu) {
+      var path = subMenu.path;
+      var appKey = !/^http/i.test(path) ? path == null ? void 0 : path.match(/\/([^\/]+)/)[1] : '';
+
+      if (appKey) {
+        acc[appKey] = acc[appKey] || _objectSpread({}, menu, {
+          children: []
+        });
+        acc[appKey].children.push(subMenu);
+      }
+
+      return acc;
+    }, {});
+
+    for (var _appKey in singleGroupMap) {
+      acc[_appKey] = acc[_appKey] || [];
+
+      acc[_appKey].push(singleGroupMap[_appKey]);
+    }
+
+    return acc;
+  }, {});
+
+  var _useState3 = useState(appKey),
+      _useState4 = _slicedToArray(_useState3, 2),
+      currentAppKey = _useState4[0],
+      setCurrentAppKey = _useState4[1];
+
+  var apps = reduce(menusMapByApp, function (acc, value, key) {
+    acc.push({
+      appKey: key,
+      name: key
+    });
+    return acc;
+  }, []);
+  var isMenusTop = menuAlignMode === 'top';
+  var headerNavMenus = headerNavs;
+  var currentSystemMenus = menusMapByApp[currentAppKey] || [];
+
+  var _useState5 = useState(get(currentSystemMenus, '0.code')),
+      _useState6 = _slicedToArray(_useState5, 2),
+      currentHeaderNavKey = _useState6[0],
+      setCurrentHeaderNavKey = _useState6[1];
+
+  var sideMenus = isMenusTop ? get(currentSystemMenus.find(function (_ref) {
+    var code = _ref.code;
+    return currentHeaderNavKey === code;
+  }), 'children', []) : currentSystemMenus;
+  var FinalSideMenu = isMenusTop ? CompactSideMenu : SideMenu; // 一级菜单放在顶部(Header里面菜单作为一级导航)
+
+  if (isMenusTop) {
+    headerNavMenus = React.createElement(HeaderNavs, {
+      selectedKey: currentHeaderNavKey,
+      navs: currentSystemMenus.map(function (item) {
+        return _objectSpread({}, item, {
+          key: item.code,
+          name: item.groupName
+        });
+      }),
+      onChange: function onChange(item) {
+        setCurrentHeaderNavKey(item.key);
+        onHeaderNavChange(item);
+      }
+    });
+  }
+
+  useEffect(function () {
+    setUserInfo(props.userInfo);
+  }, [props.userInfo]);
+  useEffect(function () {
+    if (isMenusTop) {
+      setCurrentHeaderNavKey(get(getSelectedMenuInfo(selectedMenuKey, menus), 'menu.code'));
+    }
+  }, [menus, selectedMenuKey]);
+  return React.createElement(TNTPaasLayout, {
+    className: cn("tnt-".concat(theme, " ").concat(props.className || ''), {
+      'large-size': props.theme.size === 'large',
+      compatible: props.theme.compatible,
+      isInIframe: isInIframe,
+      isEmptyLayout: isEmptyLayout,
+      noAppList: !appList
+    })
+  }, React.createElement(Header, {
+    logo: logo,
+    name: name,
+    enName: enName,
+    language: language,
+    theme: theme,
+    userInfo: userInfo,
+    config: config,
+    appKey: currentAppKey,
+    selectedAppKey: selectedAppKey,
+    menus: menus,
+    appList: appList,
+    apps: apps,
+    extraActions: extraHeaderActions,
+    onLogoClick: onLogoClick,
+    onAppChange: onAppChange,
+    onThemeChange: function onThemeChange(theme) {
+      setUserInfo(_objectSpread({}, userInfo, {
+        theme: theme
+      }));
+      _onThemeChange && _onThemeChange(theme);
+    },
+    onLanguageChange: function onLanguageChange(lang) {
+      setUserInfo(_objectSpread({}, userInfo, {
+        lang: lang
+      }));
+      _onLanguageChange && _onLanguageChange(lang);
+    },
+    onApplicationChange: function onApplicationChange(appKey) {
+      setCurrentAppKey(appKey);
+
+      _onApplicationChange(appKey);
+    },
+    onLogout: onLogout
+  }, headerNavMenus), React.createElement(_Layout, null, !isUndefined(sideMenu) ? sideMenu : React.createElement(Sider, {
+    breakpoint: "md",
+    className: "tnt-layout-sider",
+    width: 220,
+    trigger: null
+  }, React.createElement(FinalSideMenu, {
+    language: language,
+    selectedKey: selectedMenuKey,
+    menus: sideMenus,
+    formatMenuPath: formatMenuPath,
+    changeRouter: changeRouter,
+    onBeforeChange: onBeforeMenuChange,
+    onChange: onMenuChange,
+    onSelect: onMenuSelect
+  })), React.createElement(Content, {
+    className: "tnt-layout-content"
+  }, props.children)));
+});

package/es/Layout/storage.js

@@ -0,0 +1,47 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import { safeParseJSON } from './utils';
+export var getSideMenuStore = function getSideMenuStore() {
+  return safeParseJSON(localStorage.getItem('sideMenu'), {});
+};
+export var setSideMenuStore = function setSideMenuStore() {
+  var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  localStorage.setItem('sideMenu', JSON.stringify(_objectSpread({}, getSideMenuStore(), {}, params)));
+};
+export var setCurrentAppStore = function setCurrentAppStore() {
+  var currentApp = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  localStorage.setItem('currentApp', JSON.stringify(currentApp));
+};
+export var getCurrentAppStore = function getCurrentAppStore() {
+  return safeParseJSON(localStorage.getItem('currentApp'), {});
+};
+export var setCurrentOrgStore = function setCurrentOrgStore() {
+  var currentOrg = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  localStorage.setItem('currentOrg', JSON.stringify(currentOrg));
+};
+export var getCurrentOrgStore = function getCurrentOrgStore() {
+  return safeParseJSON(localStorage.getItem('currentOrg'), {});
+};
+export var setCurrentOrgTreeStore = function setCurrentOrgTreeStore() {
+  var currentOrgTree = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  localStorage.setItem('currentOrgTree', JSON.stringify(currentOrgTree));
+};
+export var getCurrentOrgTreeStore = function getCurrentOrgTreeStore() {
+  return safeParseJSON(localStorage.getItem('currentOrgTree'), []);
+};
+export var setLanguageStore = function setLanguageStore(lang) {
+  return localStorage.setItem('lang', lang);
+};
+export var getLanguageStore = function getLanguageStore() {
+  return localStorage.getItem('lang');
+};
+export var setThemeStore = function setThemeStore(theme) {
+  return localStorage.setItem('theme', theme);
+};
+export var getThemeStore = function getThemeStore() {
+  return localStorage.getItem('theme');
+};

package/es/Layout/utils.js

@@ -0,0 +1,136 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
+
+function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
+
+export var isGroupMenu = function isGroupMenu(menu) {
+  return (menu == null ? void 0 : menu.children) && !(menu == null ? void 0 : menu.path);
+};
+export var getSelectedMenuInfo = function getSelectedMenuInfo(selectedKey) {
+  var menus = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var subMenu;
+  var menu;
+  var parentMenus = [];
+
+  if (selectedKey) {
+    traverseTree(menus, function (node, pnode, pnodes) {
+      if (!isGroupMenu(node) && node.code === selectedKey) {
+        subMenu = node;
+        menu = pnode;
+        parentMenus = pnodes;
+        return false;
+      }
+    });
+  } else {
+    // 默认找到第一个菜单项
+    traverseTree(menus, function (node, pnode, pnodes) {
+      if (!isGroupMenu(node)) {
+        subMenu = node;
+        menu = pnode;
+        parentMenus = pnodes;
+        return false;
+      }
+    });
+  }
+
+  return {
+    subMenu: subMenu,
+    menu: menu,
+    parentMenus: parentMenus
+  };
+};
+export var findMenuInfoByPath = function findMenuInfoByPath(menuTree, path, matchFunc) {
+  var menu;
+  var subMenu;
+  var matchedSubMenu;
+  var parentMenus;
+
+  if (path) {
+    traverseTree(menuTree, function (menu, pnode, pnodes) {
+      if (!isGroupMenu(menu)) {
+        var _menu;
+
+        if (((_menu = menu) == null ? void 0 : _menu.path) === path) {
+          subMenu = menu;
+          menu = pnode;
+          parentMenus = pnodes;
+          return false;
+        }
+
+        if (!matchedSubMenu && matchFunc && matchFunc(menu)) {
+          matchedSubMenu = menu;
+          menu = pnode;
+          parentMenus = pnodes;
+        }
+      }
+    });
+    return {
+      subMenu: subMenu,
+      matchedSubMenu: matchedSubMenu,
+      menu: menu,
+      parentMenus: parentMenus
+    };
+  }
+
+  return {
+    subMenu: subMenu,
+    menu: menu,
+    parentMenus: parentMenus
+  };
+};
+export var hasLevel3 = function hasLevel3(menus) {
+  return menus == null ? void 0 : menus.some(function (menu) {
+    var _menu$children;
+
+    return menu == null ? void 0 : (_menu$children = menu.children) == null ? void 0 : _menu$children.some(function (item) {
+      var _item$children;
+
+      return item == null ? void 0 : (_item$children = item.children) == null ? void 0 : _item$children.length;
+    });
+  });
+};
+export var isNewTabMenu = function isNewTabMenu(menu) {
+  var _ref = menu || {},
+      target = _ref.target,
+      path = _ref.path;
+
+  return target === '_blank' || /^http/i.test(path) && /blankType=newTarget/.test(path);
+};
+export var openInNewTab = function openInNewTab(path) {
+  window.open(path, '_blank');
+};
+export var traverseTree = function traverseTree(treeData, callback, pnode) {
+  var pnodes = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
+  (treeData || []).every(function (node, index) {
+    var result;
+
+    if (callback) {
+      result = callback(node, pnode, (pnodes == null ? void 0 : pnodes.length) ? pnodes : [pnode].filter(function (item) {
+        return !!item;
+      }), index);
+    } // 回调函数返回false则终止遍历
+
+
+    if (result !== false) {
+      node && traverseTree(node.children || [], callback, node, [node].concat(_toConsumableArray(pnodes)));
+    }
+
+    return result !== false;
+  });
+  return treeData;
+};
+export var safeParseJSON = function safeParseJSON(str, defaultObj) {
+  var result;
+
+  try {
+    result = JSON.parse(str);
+  } catch (err) {
+    console.warn('json parse error:', err);
+    result = typeof defaultObj === 'undefined' ? str : defaultObj;
+  }
+
+  return result || defaultObj;
+};

package/es/LoadingButton/README.md

@@ -0,0 +1,75 @@
+## LoadingButton
+主要用于点击需要与后端有数据交互的场景，自动添加loading状态及防止重复提交问题，支持两种使用方式：
+- onClick 方法返回一个promise[推荐方式]，不需要额外代码
+- onClick 返回的如果不是一个promise时，需要业务自己调用 hideLoading
+具体用法见下面代码演示部分。
+
+### 代码演示
+```jsx
+import { Fragment, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { createGlobalStyle } from 'styled-components';
+import { LoadingButton } from 'tntd';
+import 'antd/dist/antd.css';
+
+const GlobalStyle = createGlobalStyle`
+  .site-body {
+    .ichYgh {
+        padding: 0;
+        overflow: visible;
+    }
+}
+`;
+
+ReactDOM.render(
+    <Fragment>
+        <LoadingButton
+            type="primary"
+            onClick={() => {
+                console.log('onClick resolve...');
+                return new Promise(resolve => {
+                    setTimeout(resolve, 2000);
+                });
+            }}
+        >
+            resolve
+        </LoadingButton>
+        <LoadingButton
+            type="primary"
+            onClick={() => {
+                console.log('onClick reject...');
+                return new Promise((resolve, reject) => {
+                    setTimeout(reject, 2000);
+                });
+            }}
+        >
+            reject
+        </LoadingButton>
+        <LoadingButton
+            type="primary"
+            loadingText="提交中..."
+            onClick={(evt, hideLoading) => {
+                console.log('onClick 2...');
+                setTimeout(() => {
+                    // do your logic here
+                    hideLoading();
+                }, 2000);
+            }}
+        >
+            回调方式
+        </LoadingButton>
+        <GlobalStyle />
+    </Fragment>,
+    document.getElementById('root')
+);
+```
+
+
+### API
+#### LoadingButton
+同antd Button
+
+| 属性名称    | 属性说明                           | 类型     | 默认值      | 是否必须 |
+| :---------- | :------------------------------ | :------- | :---------- | :------- |
+| loadingText        | 按钮加载状态显示的文字                      | string   | 按钮文字          | 否       |
+

package/es/LoadingButton/index.js

@@ -0,0 +1,45 @@
+import "antd/lib/button/style";
+import _Button from "antd/lib/button";
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+
+function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import { useState, useEffect } from 'react';
+export default (function (props) {
+  var _useState = useState(props.loading),
+      _useState2 = _slicedToArray(_useState, 2),
+      loading = _useState2[0],
+      setLoading = _useState2[1];
+
+  var onClick = function onClick(evt) {
+    if (!loading) {
+      setLoading(true);
+      var returnVal = props.onClick && props.onClick(evt, function () {
+        return setLoading(false);
+      });
+
+      if (returnVal instanceof Promise) {
+        returnVal.then(function () {
+          return setLoading(false);
+        })["catch"](function () {
+          return setLoading(false);
+        });
+      }
+    }
+  };
+
+  useEffect(function () {
+    setLoading(props.loading);
+  }, [props.loading]);
+  return React.createElement(_Button, _extends({}, props, {
+    loading: loading,
+    onClick: onClick
+  }), loading ? props.loadingText || props.children : props.children);
+});

package/es/Modal/README.md

@@ -0,0 +1,59 @@
+## Modal全屏浮层组件
+### 代码演示
+```jsx
+import { Fragment, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { createGlobalStyle } from 'styled-components';
+import { Button } from 'antd';
+import { Modal as TntModal } from 'tntd';
+import 'antd/dist/antd.css';
+
+const GlobalStyle = createGlobalStyle`
+  .site-body {
+    .ichYgh {
+        padding: 0;
+        overflow: visible;
+    }
+}
+`;
+
+const FullscreenModalDemo = props => {
+    const [visible, setVisible] = useState(false);
+
+    return (
+        <Fragment>
+            <Button type="primary" onClick={() => setVisible(true)}>带全屏Modal</Button>
+            <TntModal
+                visible={visible}
+                title="司南"
+                fullscreen
+                logo="https://sinan.tongdun.me/cdn/bucket/20191127134944493_favicon.png"
+                onCancel={() => setVisible(false)}
+                onToggleFullscreen={isFullscreen => {
+                    console.log(`isFullscreen: ${isFullscreen}`);
+                }}
+            >
+                <iframe src="https://sinan.tongdun.me/project/45?versionId=5" />
+            </TntModal>
+            <GlobalStyle />
+        </Fragment>
+    );
+};
+
+
+ReactDOM.render(
+    <FullscreenModalDemo />,
+    document.getElementById('root')
+);
+```
+
+
+### API
+#### TntModal
+同antd Modal
+
+| 属性名称    | 属性说明                           | 类型     | 默认值      | 是否必须 |
+| :---------- | :------------------------------ | :------- | :---------- | :------- |
+| logo        | logo 地址                        | string   | 无          | 是       |
+| supportFullscreen | 是否支持全屏                | boolean   | true       | 否       |
+| onToggleFullscreen | 全屏切换事件                | Function   | null       | 否       |