tntd 2.0.8 → 2.0.10

package/es/tntd-second-page/index.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import cn from 'classnames';
+import LocaleReceiver from 'antd/es/locale-provider/LocaleReceiver';
+import Icon from '../icon';
+import './index.less';
+
+const empty = () => {};
+
+export default function TntdSecondPage({
+  title,
+  header,
+  toolBar = null,
+  footer,
+  visible,
+  destroyOnClose,
+  onBack = empty,
+  mode = 'default',
+  inTab = false,
+  children,
+  className
+}) {
+  if (!visible && destroyOnClose) {
+    return null;
+  }
+
+  return React.createElement(LocaleReceiver, {
+    componentName: "TntdSecondPage"
+  }, locale => {
+    return React.createElement("div", {
+      className: cn('tntd-second-page', className, {
+        'tntd-second-page-intab': inTab,
+        'tntd-second-page-absolute': mode === 'absolute',
+        'tntd-second-page-fixed': mode === 'fixed',
+        'tntd-second-page-hidden': !visible
+      })
+    }, React.createElement("div", {
+      className: "tntd-second-page-header"
+    }, header ? header : React.createElement(React.Fragment, null, React.createElement("a", {
+      className: "tntd-second-page-header-back",
+      onClick: onBack
+    }, React.createElement(Icon, {
+      type: "left"
+    }), locale.back), React.createElement("span", {
+      className: "tntd-second-page-header-title"
+    }, title), React.createElement("div", {
+      className: "tntd-second-page-header-toolbar"
+    }, toolBar))), React.createElement("div", {
+      className: "tntd-second-page-body"
+    }, React.createElement("div", {
+      className: "tntd-second-page-inner"
+    }, children)), footer && React.createElement("div", {
+      className: "tntd-second-page-footer"
+    }, footer));
+  });
+}

package/es/tntd-second-page/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/tntd-second-page/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,cAAc,MAAM,wCAAwC,CAAA;AACnE,OAAO,IAAI,MAAM,SAAS,CAAA;AAC1B,OAAO,cAAc,CAAA;AACrB,MAAM,KAAK,GAAG,GAAG,EAAE,GAAE,CAAC,CAAA;AAgBtB,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,KAAK,EACL,MAAM,EACN,OAAO,GAAG,IAAI,EACd,MAAM,EACN,OAAO,EACP,cAAc,EACd,MAAM,GAAG,KAAK,EACd,IAAI,GAAG,SAAS,EAChB,KAAK,GAAG,KAAK,EACb,QAAQ,EACR,SAAS,GACW;IACpB,IAAI,CAAC,OAAO,IAAI,cAAc,EAAE;QAC9B,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL,oBAAC,cAAc,IAAC,aAAa,EAAC,gBAAgB,IAC3C,CAAC,MAAM,EAAE,EAAE;QACV,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CAAC,kBAAkB,EAAE,SAAS,EAAE;gBAC3C,wBAAwB,EAAE,KAAK;gBAC/B,2BAA2B,EAAE,IAAI,KAAK,UAAU;gBAChD,wBAAwB,EAAE,IAAI,KAAK,OAAO;gBAC1C,yBAAyB,EAAE,CAAC,OAAO;aACpC,CAAC;YAEF,6BAAK,SAAS,EAAC,yBAAyB,IACrC,MAAM,CAAC,CAAC,CAAC,CACR,MAAM,CACP,CAAC,CAAC,CAAC,CACF;gBACE,2BAAG,SAAS,EAAC,8BAA8B,EAAC,OAAO,EAAE,MAAM;oBACzD,oBAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG;oBAClB,MAAiC,CAAC,IAAI,CACtC;gBACJ,8BAAM,SAAS,EAAC,+BAA+B,IAAE,KAAK,CAAQ;gBAC9D,6BAAK,SAAS,EAAC,iCAAiC,IAAE,OAAO,CAAO,CAC/D,CACJ,CACG;YACN,6BAAK,SAAS,EAAC,uBAAuB;gBACpC,6BAAK,SAAS,EAAC,wBAAwB,IAAE,QAAQ,CAAO,CACpD;YACL,MAAM,IAAI,6BAAK,SAAS,EAAC,yBAAyB,IAAE,MAAM,CAAO,CAC9D,CACP,CAAA;IACH,CAAC,CACc,CAClB,CAAA;AACH,CAAC","sourcesContent":["import React from 'react'\nimport cn from 'classnames'\nimport LocaleReceiver from 'antd/es/locale-provider/LocaleReceiver'\nimport Icon from '../icon'\nimport './index.less'\nconst empty = () => {}\n\nexport interface TntdSecondPageProps {\n  title?: string | React.ReactNode\n  header?: React.ReactNode\n  toolBar?: React.ReactNode\n  footer?: React.ReactNode\n  visible?: boolean\n  destroyOnClose?: boolean\n  onBack?: () => void\n  mode?: 'default' | 'absolute' | 'fixed'\n  inTab?: boolean\n  className?: string\n  children?: React.ReactNode\n}\n\nexport default function TntdSecondPage({\n  title,\n  header,\n  toolBar = null,\n  footer,\n  visible,\n  destroyOnClose,\n  onBack = empty,\n  mode = 'default',\n  inTab = false,\n  children,\n  className,\n}: TntdSecondPageProps): React.ReactElement | null {\n  if (!visible && destroyOnClose) {\n    return null\n  }\n\n  return (\n    <LocaleReceiver componentName=\"TntdSecondPage\">\n      {(locale) => {\n        return (\n          <div\n            className={cn('tntd-second-page', className, {\n              'tntd-second-page-intab': inTab,\n              'tntd-second-page-absolute': mode === 'absolute',\n              'tntd-second-page-fixed': mode === 'fixed',\n              'tntd-second-page-hidden': !visible,\n            })}\n          >\n            <div className=\"tntd-second-page-header\">\n              {header ? (\n                header\n              ) : (\n                <>\n                  <a className=\"tntd-second-page-header-back\" onClick={onBack}>\n                    <Icon type=\"left\" />\n                    {(locale as Record<'back', object>).back}\n                  </a>\n                  <span className=\"tntd-second-page-header-title\">{title}</span>\n                  <div className=\"tntd-second-page-header-toolbar\">{toolBar}</div>\n                </>\n              )}\n            </div>\n            <div className=\"tntd-second-page-body\">\n              <div className=\"tntd-second-page-inner\">{children}</div>\n            </div>\n            {footer && <div className=\"tntd-second-page-footer\">{footer}</div>}\n          </div>\n        )\n      }}\n    </LocaleReceiver>\n  )\n}\n"]}

package/es/tntd-second-page/index.less

@@ -0,0 +1,105 @@
+@header-height: 50px;
+@title-height: 40px;
+@bgColor: #f1f2f5;
+
+.tntd-second-page {
+  & {
+    background: @white;
+    height: calc(100vh - @header-height);
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+  &-header {
+    position: relative;
+    background: @white;
+    padding: 0 20px;
+    height: @title-height;
+    line-height: @title-height;
+    box-shadow: 1px 0 5px 0 rgba(0, 0, 0, 0.1);
+    z-index: 2;
+    &-back {
+      font-size: 14px;
+      font-weight: 400;
+      color: #17233d;
+      margin-right: 10px;
+    }
+    &-title {
+      font-size: 14px;
+      color: #17233d;
+    }
+    &-toolbar {
+      float: right;
+    }
+  }
+  &-body {
+    padding: 16px 20px;
+    flex: 1;
+    overflow-x: hidden;
+    overflow-y: auto;
+    background-color: @bgColor;
+    height: calc(100vh - @header-height - @title-height);
+  }
+  &-inner {
+    background: @white;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.06);
+    border-radius: 2px;
+    min-height: 100%;
+    & > div > .ant-form,
+    & > .ant-form,
+    .ant-form {
+      padding: 20px 0;
+    }
+  }
+  &-footer {
+    height: 60px;
+    line-height: 60px;
+    text-align: center;
+    padding: 0 20px;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1), 0 10px 12px 0 rgba(170, 182, 206, 0.2),
+      inset 0 -1px 0 0 hsla(0, 0%, 100%, 0.3);
+    z-index: 2;
+  }
+  &-hidden {
+    display: none !important;
+  }
+  &-absolute {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 4;
+  }
+  &-intab {
+    top: -@title-height;
+  }
+  &-fixed {
+    & {
+      height: 100vh;
+      position: fixed;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 500;
+    }
+    .tntd-second-page {
+      &-header {
+        height: 50px;
+        line-height: 50px;
+        &-back {
+          font-size: 16px;
+        }
+        &-title {
+          font-size: 16px;
+        }
+      }
+      &-body {
+        background: @white;
+        height: calc(100vh - @header-height);
+      }
+      &-inner {
+        box-shadow: none;
+      }
+    }
+  }
+}

package/es/tntd-select/DropDownWrap.js

@@ -1,58 +1,83 @@
 import React, { PureComponent } from 'react';
 export default class DropDownWrap extends PureComponent {
-    constructor(props) {
-        super(props);
-        Object.defineProperty(this, "getItemStyle", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (i) => {
-                const { itemHeight } = this.props;
-                return {
-                    position: 'absolute',
-                    top: itemHeight * i,
-                    height: itemHeight,
-                    width: '100%',
-                };
-            }
-        });
-        Object.defineProperty(this, "reactList", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (allHeight, startIndex, endIndex) => this.setState({ allHeight, startIndex, endIndex })
-        });
-        const { allHeight, startIndex, endIndex } = props;
-        this.state = {
-            allHeight,
-            startIndex,
-            endIndex,
+  constructor(props) {
+    super(props);
+    Object.defineProperty(this, "getItemStyle", {
+      enumerable: true,
+      configurable: true,
+      writable: true,
+      value: i => {
+        const {
+          itemHeight
+        } = this.props;
+        return {
+          position: 'absolute',
+          top: itemHeight * i,
+          height: itemHeight,
+          width: '100%'
         };
+      }
+    });
+    Object.defineProperty(this, "reactList", {
+      enumerable: true,
+      configurable: true,
+      writable: true,
+      value: (allHeight, startIndex, endIndex) => this.setState({
+        allHeight,
+        startIndex,
+        endIndex
+      })
+    });
+    const {
+      allHeight,
+      startIndex,
+      endIndex
+    } = props;
+    this.state = {
+      allHeight,
+      startIndex,
+      endIndex
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.allHeight !== prevProps.allHeight) {
+      this.setState({
+        allHeight: this.props.allHeight
+      });
     }
-    componentDidUpdate(prevProps) {
-        if (this.props.allHeight !== prevProps.allHeight) {
-            this.setState({ allHeight: this.props.allHeight });
+  }
+
+  render() {
+    const {
+      menu
+    } = this.props;
+    const {
+      startIndex,
+      endIndex,
+      allHeight
+    } = this.state; // 截取 Select 下拉列表中需要显示的部分
+
+    const cloneMenu = React.cloneElement(menu, {
+      menuItems: menu.props.menuItems.slice(startIndex, endIndex).map((item, i) => {
+        const realIndex = (startIndex || 0) + Number(i);
+        const style = this.getItemStyle(realIndex); // 未搜到数据提示高度使用默认高度
+
+        if (item.key === 'NOT_FOUND') {
+          delete style.height;
         }
-    }
-    render() {
-        const { menu } = this.props;
-        const { startIndex, endIndex, allHeight } = this.state;
-        // 截取 Select 下拉列表中需要显示的部分
-        const cloneMenu = React.cloneElement(menu, {
-            menuItems: menu.props.menuItems.slice(startIndex, endIndex).map((item, i) => {
-                const realIndex = (startIndex || 0) + Number(i);
-                const style = this.getItemStyle(realIndex);
-                // 未搜到数据提示高度使用默认高度
-                if (item.key === 'NOT_FOUND') {
-                    delete style.height;
-                }
-                return React.cloneElement(item, {
-                    style: Object.assign(Object.assign({}, item.props.style), style),
-                });
-            }),
-            dropdownMenuStyle: Object.assign(Object.assign({}, menu.props.dropdownMenuStyle), { height: allHeight, maxHeight: allHeight, overflow: 'hidden' }),
+
+        return React.cloneElement(item, {
+          style: Object.assign(Object.assign({}, item.props.style), style)
         });
-        return cloneMenu;
-    }
-}
-//# sourceMappingURL=DropDownWrap.js.map
+      }),
+      dropdownMenuStyle: Object.assign(Object.assign({}, menu.props.dropdownMenuStyle), {
+        height: allHeight,
+        maxHeight: allHeight,
+        overflow: 'hidden'
+      })
+    });
+    return cloneMenu;
+  }
+
+}