@oceanbase/ui 0.2.0

package/es/Login/index.js

@@ -0,0 +1,177 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useControllableValue } from 'ahooks';
+import { App, Button, Divider, Menu, Typography } from '@oceanbase/design';
+import { message } from '@oceanbase/design';
+import classNames from 'classnames';
+import React, { useCallback } from 'react';
+import { LOCALE_LIST } from "../constant";
+import LocaleWrapper from "../locale/LocaleWrapper";
+import { getPrefix, setLocale } from "../_util";
+import ActivateForm from "./ActivateForm";
+import zhCN from "./locale/zh-CN";
+import LoginForm from "./LoginForm";
+import RegisterForm from "./RegisterForm";
+// @ts-ignore
+import logoImg from "../assets/logo/oceanbase_logo.svg";
+import LocaleDropdown from "../LocaleDropdown";
+import "./index.less";
+var prefix = getPrefix('login');
+var Login = function Login(props) {
+  var logo = props.logo,
+    bgImage = props.bgImage,
+    title = props.title,
+    description = props.description,
+    board = props.board,
+    alertProps = props.alertProps,
+    showLocale = props.showLocale,
+    locale = props.locale,
+    locales = props.locales,
+    loginProps = props.loginProps,
+    otherLoginProps = props.otherLoginProps,
+    registerProps = props.registerProps,
+    activateFormProps = props.activateFormProps,
+    enableRegister = props.enableRegister,
+    showAuthCode = props.showAuthCode,
+    showOtherLoginButton = props.showOtherLoginButton,
+    authCodeImg = props.authCodeImg,
+    onAuthCodeImgChange = props.onAuthCodeImgChange,
+    _props$style = props.style,
+    style = _props$style === void 0 ? {} : _props$style;
+  var _useControllableValue = useControllableValue(props, {
+      defaultValue: false,
+      valuePropName: 'showRegister',
+      trigger: 'onShowRegisterChange'
+    }),
+    _useControllableValue2 = _slicedToArray(_useControllableValue, 2),
+    showRegister = _useControllableValue2[0],
+    setShowRegister = _useControllableValue2[1];
+  var _useControllableValue3 = useControllableValue(props, {
+      defaultValue: false,
+      valuePropName: 'showActivate',
+      trigger: 'onShowActivateChange'
+    }),
+    _useControllableValue4 = _slicedToArray(_useControllableValue3, 2),
+    showActivate = _useControllableValue4[0],
+    setShowActivate = _useControllableValue4[1];
+  var isLoading = (loginProps === null || loginProps === void 0 ? void 0 : loginProps.loading) || (registerProps === null || registerProps === void 0 ? void 0 : registerProps.loading) || (otherLoginProps === null || otherLoginProps === void 0 ? void 0 : otherLoginProps.loading);
+  var switchForm = useCallback(function () {
+    if (isLoading) {
+      message.warning(locale.isLoadingWarn);
+    }
+    setShowRegister(!showRegister);
+  }, [showRegister, isLoading]);
+  var goBack = useCallback(function () {
+    if (isLoading) {
+      message.warning(locale.isLoadingWarn);
+    }
+    setShowActivate(!showActivate);
+  }, [showActivate, isLoading]);
+  var localeMenu = /*#__PURE__*/React.createElement(Menu, {
+    onClick: function onClick(_ref) {
+      var key = _ref.key;
+      setLocale(key);
+    }
+  }, LOCALE_LIST.filter(function (item) {
+    return !locales || locales.includes(item.value);
+  }).map(function (item) {
+    return /*#__PURE__*/React.createElement(Menu.Item, {
+      key: item.value
+    }, item.label);
+  }));
+  var showWaterMark = !showRegister;
+  return /*#__PURE__*/React.createElement(App, null, /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(prefix, "-container"), _defineProperty({}, "".concat(prefix, "-container-with-board"), board)),
+    style: style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefix, "-bg"),
+    style: {
+      backgroundImage: "url(".concat(bgImage, ")")
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefix, "-info")
+  }, title && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefix, "-welcome")
+  }, title), description && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefix, "-start")
+  }, description))), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefix, "-card")
+  }, showLocale && /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefix, "-locale")
+  }, /*#__PURE__*/React.createElement(LocaleDropdown, {
+    locales: locales
+  })), board && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefix, "-board")
+  }, board), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefix, "-content")
+  }, showActivate ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("img", {
+    src: logo,
+    alt: "",
+    className: "".concat(prefix, "-activate-logo")
+  }), /*#__PURE__*/React.createElement(Divider, {
+    style: {
+      marginTop: 14,
+      marginBottom: 20
+    }
+  }), /*#__PURE__*/React.createElement(Typography.Title, {
+    level: 3
+  }, locale.activeTitle), /*#__PURE__*/React.createElement(Typography.Paragraph, null, locale.activeTitleDescrition), /*#__PURE__*/React.createElement(ActivateForm, _extends({}, activateFormProps, {
+    locale: locale,
+    errorMessage: alertProps === null || alertProps === void 0 ? void 0 : alertProps.message,
+    goBack: goBack
+  }))) : /*#__PURE__*/React.createElement(React.Fragment, null, showRegister ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("img", {
+    src: logo,
+    alt: "",
+    className: "".concat(prefix, "-reigster-logo")
+  }), /*#__PURE__*/React.createElement(Divider, {
+    style: {
+      marginTop: 14,
+      marginBottom: 20
+    }
+  }), /*#__PURE__*/React.createElement(Typography.Title, {
+    level: 3
+  }, locale.registerTitle), /*#__PURE__*/React.createElement(RegisterForm, _extends({}, registerProps, {
+    locale: locale,
+    errorMessage: alertProps === null || alertProps === void 0 ? void 0 : alertProps.message
+  }))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("img", {
+    src: logo,
+    alt: "",
+    className: "".concat(prefix, "-logo")
+  }), /*#__PURE__*/React.createElement(LoginForm, _extends({}, loginProps, {
+    otherLoginProps: otherLoginProps,
+    locale: locale,
+    errorMessage: alertProps === null || alertProps === void 0 ? void 0 : alertProps.message,
+    showAuthCode: showAuthCode,
+    showOtherLoginButton: showOtherLoginButton,
+    authCodeImg: authCodeImg,
+    onAuthCodeImgChange: onAuthCodeImgChange
+  })))), !!enableRegister && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefix, "-switch-btn")
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "link",
+    onClick: switchForm,
+    "data-testid": "login.register.btn"
+  }, showRegister ? locale.switchLoginLabel : locale.switchRegisterLabel)), showWaterMark ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefix, "-watermark-wrapper"),
+    style: {
+      paddingLeft: showAuthCode ? 96 : 0
+    }
+  }, /*#__PURE__*/React.createElement("img", {
+    src: logoImg,
+    alt: "",
+    className: "".concat(prefix, "-watermark")
+  })) : null))));
+};
+export default LocaleWrapper({
+  componentName: 'Login',
+  defaultLocale: zhCN
+})(Login);

package/es/Login/index.less

@@ -0,0 +1,325 @@
+@import '../variable.less';
+
+@prefix: ob-login;
+
+.@{prefix}-container {
+  display: flex;
+  justify-content: space-between;
+  min-width: 768px;
+  height: 100vh;
+  min-height: 600px;
+  overflow: auto;
+
+  .@{prefix}-bg {
+    width: 540px;
+    min-width: 400px;
+    height: 100%;
+    background-repeat: no-repeat;
+    background-size: cover;
+
+    .@{prefix}-info {
+      margin: 185px 90px 0 90px;
+      color: #fff;
+      font-weight: 600;
+      font-size: 56px;
+      font-family: PingFangSC;
+
+      .@{prefix}-start {
+        margin-top: 22px;
+        color: #f4f4f4;
+        font-weight: 500;
+        font-size: 32px;
+        letter-spacing: 0;
+      }
+    }
+  }
+  .@{prefix}-card {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    min-height: 600px;
+    background-color: #fff;
+
+    .@{prefix}-locale {
+      position: fixed;
+      top: 24px;
+      right: 24px;
+      color: @colorTextTertiary;
+      font-family: PingFangSC-Regular;
+      cursor: pointer;
+    }
+
+    .@{prefix}-board {
+      position: absolute;
+      top: 48px;
+    }
+
+    .@{prefix}-content {
+      margin-top: -60px;
+      .@{prefix}-logo {
+        display: block;
+        height: 68px;
+        margin: 0 auto;
+        margin-bottom: 40px;
+      }
+
+      .@{prefix}-activate-logo,
+      .@{prefix}-reigster-logo {
+        display: block;
+        height: 68px;
+        margin: 0 auto;
+      }
+
+      .@{prefix}-register,
+      .@{prefix}-activate {
+        .@{prefixCls}-form-item-with-help {
+          margin-bottom: 24px;
+        }
+      }
+
+      .@{prefix}-form {
+        width: 100%;
+
+        input::placeholder {
+          font-size: 14px;
+        }
+
+        .@{prefixCls}-form-item {
+          width: 404px;
+          margin-bottom: 24px;
+          padding-bottom: 0;
+        }
+
+        .@{prefixCls}-input-affix-wrapper {
+          width: 404px;
+          height: 40px;
+          border-radius: 8px;
+
+          .@{prefixCls}-input-prefix {
+            .@{iconPrefixCls} {
+              font-size: 20px;
+            }
+          }
+
+          // 覆盖 input:-internal-autofill-selected 自带背景色样式问题
+          .@{prefixCls}-input {
+            box-shadow: inset 0 0 0 1000px white !important;
+          }
+
+          .@{prefixCls}-input:-internal-autofill-selected {
+            box-shadow: inset 0 0 0 1000px white !important;
+          }
+          .@{prefixCls}-input:focus:-internal-autofill-selected {
+            box-shadow: inset 0 0 0 1000px white !important;
+          }
+        }
+
+        .@{prefixCls}-input-affix-wrapper .@{prefixCls}-input:not(:first-child) {
+          padding-left: 8px;
+        }
+
+        .@{prefixCls}-input-affix-wrapper-focused {
+          border-color: @colorPrimary;
+        }
+
+        .@{prefix}-form-focus-input {
+          .@{prefixCls}-input-prefix {
+            .@{iconPrefixCls} {
+              color: @colorPrimary;
+            }
+          }
+        }
+      }
+
+      .@{prefix}-auth-code {
+        display: flex;
+        align-items: start;
+        width: 100%;
+        margin-bottom: 24px;
+        padding-bottom: 0;
+        & > .@{prefixCls}-space-item:first-child {
+          flex: 1;
+        }
+        .@{prefixCls}-form-item {
+          margin-bottom: 0;
+        }
+        .@{prefix}-code-btn {
+          position: relative;
+          height: 38px;
+          border: 1px solid @colorBorder;
+          border-radius: 8px;
+          cursor: pointer;
+          img {
+            height: 38px;
+            border-radius: 8px;
+          }
+          .@{prefix}-code-mask {
+            position: absolute;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 38px;
+            color: #fff;
+            background: rgba(0, 0, 0, 0.5);
+            border-radius: 8px;
+            cursor: pointer;
+            opacity: 0;
+            transition: opacity 0.3s;
+            inset: 0;
+          }
+          &.@{prefix}-error,
+          &:hover {
+            .@{prefix}-code-mask {
+              opacity: 1;
+            }
+          }
+        }
+      }
+      .@{prefix}-submit-btn {
+        width: 404px;
+        height: 40px;
+        border-radius: 8px;
+      }
+
+      .@{prefix}-switch-btn {
+        margin-top: 24px;
+        text-align: center;
+        cursor: pointer;
+      }
+
+      .@{prefix}-watermark-wrapper {
+        position: absolute;
+        bottom: 40px;
+        width: 404px;
+        text-align: center;
+
+        .@{prefix}-watermark {
+          height: 16px;
+        }
+      }
+
+      .@{prefix}-alert {
+        width: 404px;
+        margin-bottom: 24px;
+        border-radius: 8px;
+      }
+    }
+  }
+}
+
+@media (max-width: 2048px) {
+  .@{prefix}-container {
+    .@{prefix}-bg {
+      width: 800px;
+
+      .@{prefix}-info {
+        margin: 185px 48px 0 48px;
+        font-size: 72px;
+        .@{prefix}-start {
+          font-size: 48px;
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 1800px) {
+  .@{prefix}-container {
+    .@{prefix}-bg {
+      width: 700px;
+
+      .@{prefix}-info {
+        margin: 185px 48px 0 48px;
+        font-size: 64px;
+        .@{prefix}-start {
+          font-size: 40px;
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 1600px) {
+  .@{prefix}-container {
+    .@{prefix}-bg {
+      width: 600px;
+
+      .@{prefix}-info {
+        margin: 185px 48px 0 48px;
+        font-size: 56px;
+        .@{prefix}-start {
+          font-size: 32px;
+        }
+      }
+    }
+  }
+}
+
+// 设置的登录页最小高度，防止 logo 偏移位置偏移遮住输入框
+@media (max-height: 650px) {
+  .@{prefix}-container {
+    .@{prefix}-watermark-wrapper {
+      position: absolute;
+      top: 600px;
+    }
+  }
+}
+
+@media (max-width: 1200px) {
+  .@{prefix}-container {
+    .@{prefix}-bg {
+      width: 500px;
+
+      .@{prefix}-info {
+        margin: 185px 48px 0 48px;
+        font-size: 48px;
+        .@{prefix}-start {
+          font-size: 28px;
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 992px) {
+  .@{prefix}-container {
+    .@{prefix}-bg {
+      width: 400px;
+
+      .@{prefix}-info {
+        margin: 185px 32px 0 32px;
+        font-size: 40px;
+        .@{prefix}-start {
+          font-size: 24px;
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .@{prefix}-container {
+    .@{prefix}-bg {
+      width: 250px;
+
+      .@{prefix}-info {
+        margin: 185px 24px 0 24px;
+        font-size: 32px;
+
+        .@{prefix}-start {
+          font-size: 20px;
+        }
+      }
+    }
+  }
+}
+
+.@{prefix}-container-with-board {
+  .@{prefix}-card {
+    .@{prefix}-content {
+      margin-top: 0;
+    }
+  }
+}

package/es/Login/locale/en-US.js

@@ -0,0 +1,26 @@
+export default {
+  usernamePlaceholder: 'Please input username',
+  usernameMessage: 'Username is required',
+  passwordPlaceholder: 'Please input password',
+  passwordMessage: 'Password is required',
+  loginText: 'Login',
+  isLoadingWarn: 'In progress',
+  usernameLabel: 'Username',
+  switchLoginLabel: 'Already have an account',
+  switchRegisterLabel: 'Register',
+  userExistMessage: 'Username already exists',
+  usernameFormatMessage: 'Incorrect username format',
+  samePasswordMessage: 'The two passwords are inconsistent',
+  usernameHelp: 'Support English, numbers, underscores and special characters (._+@#$%), length 4~48 characters',
+  usernameLengthMessage: 'User name supports 4~48 characters in length',
+  passwordLabel: 'Password',
+  passwordHelp: 'Contain at least 2 digits, 2 uppercase letters, 2 lowercase letters and 2 special characters (._+@#$%), with a length of 8~32 characters',
+  confirmPwdLabel: 'Confirm password',
+  confirmPwdMessage: 'Please enter the password again',
+  registerBtn: 'Sign up',
+  registerTitle: 'Sign up',
+  activeTitle: 'Set password to activate account',
+  activeTitleDescrition: 'For account security, you need to set a password to activate the account',
+  activeSubmitBtn: 'Activation',
+  activeBackBtn: 'Go back to the previous step'
+};

package/es/Login/locale/zh-CN.js

@@ -0,0 +1,27 @@
+export default {
+  usernamePlaceholder: '请输入账号',
+  usernameMessage: '请输入账号',
+  passwordPlaceholder: '请输入密码',
+  passwordMessage: '请输入密码',
+  loginText: '登录',
+  otherLoginText: '第三方登录',
+  isLoadingWarn: '正在执行中',
+  usernameLabel: '用户名',
+  switchLoginLabel: '登录已有账号',
+  switchRegisterLabel: '注册账号',
+  userExistMessage: '用户名已存在',
+  usernameFormatMessage: '用户名格式不符合要求',
+  samePasswordMessage: '确认密码不一致',
+  usernameHelp: '支持英文、数字、下划线和特殊字符 (._+@#$%)，长度 4~48 位字符',
+  usernameLengthMessage: '用户名长度 4~48 位字符',
+  passwordLabel: '密码',
+  passwordHelp: '至少包含 2 位数字、2 位大写字母、2 位小写字母和 2 位特殊字符 (._+@#$%)，长度 8~32 位字符',
+  confirmPwdLabel: '确认密码',
+  confirmPwdMessage: '请再次输入密码',
+  registerBtn: '立即注册',
+  registerTitle: '注册账号',
+  activeTitle: '设置密码激活账号',
+  activeTitleDescrition: '为了账号安全，需要设置密码激活账号',
+  activeSubmitBtn: '激活',
+  activeBackBtn: '返回上一步'
+};

package/es/Login/locale/zh-TW.js

@@ -0,0 +1,26 @@
+export default {
+  usernamePlaceholder: '請輸入用戶名',
+  usernameMessage: '用戶名不能為空',
+  passwordPlaceholder: '請輸入密碼',
+  passwordMessage: '密碼不能為空',
+  loginText: '登錄',
+  isLoadingWarn: '正在執行中',
+  usernameLabel: '用戶名',
+  switchLoginLabel: '登錄已有帳號',
+  switchRegisterLabel: '註冊帳號',
+  userExistMessage: '用戶名已存在',
+  usernameFormatMessage: '用戶名格式不符合要求',
+  samePasswordMessage: '確認密碼不一致',
+  usernameHelp: '支持英文、數字、下劃線和特殊字符（._+@#$%），長度 4~48 位字符',
+  usernameLengthMessage: '用戶名長度 4~48 位字符',
+  passwordLabel: '密碼',
+  passwordHelp: '至少包含 2 位字符、2 位大寫字母、2 位小寫字母和 2 位特殊字符（._+@#$%），長度 8~32 位字符',
+  confirmPwdLabel: '確認密碼',
+  confirmPwdMessage: '請再次輸入密碼',
+  registerBtn: '立即注册',
+  registerTitle: '註冊帳號',
+  activeTitle: '設置密碼激活帳號',
+  activeTitleDescrition: '為了帳號安全，需要設置密碼激活帳號',
+  activeSubmitBtn: '激活',
+  activeBackBtn: '返回上一步'
+};

package/es/Lottie/index.js

@@ -0,0 +1,37 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _excluded = ["mode", "speed", "style"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import classNames from 'classnames';
+import lottie from 'lottie-web';
+import React, { useEffect, useRef } from 'react';
+var Lottie = function Lottie(_ref) {
+  var mode = _ref.mode,
+    _ref$speed = _ref.speed,
+    speed = _ref$speed === void 0 ? 1 : _ref$speed,
+    style = _ref.style,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  var ref = useRef();
+  useEffect(function () {
+    // ref: https://github.com/airbnb/lottie-web/blob/master/index.d.ts#L81
+    var animation = lottie.loadAnimation(_objectSpread({
+      container: ref.current,
+      renderer: 'svg',
+      loop: false,
+      autoplay: true
+    }, restProps));
+    // ref: https://github.com/airbnb/lottie-web/blob/master/index.d.ts#L6
+    animation.setSpeed(speed);
+  }, []);
+  return /*#__PURE__*/React.createElement("span", {
+    ref: ref,
+    className: classNames('ob-lottie', _defineProperty({}, 'anticon', mode === 'icon')),
+    style: style
+  });
+};
+export default Lottie;

package/es/NavMenu/index.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import './index.less';
+export interface IMenu {
+    key: string;
+    title: string;
+    link: string;
+    disabled?: boolean;
+    openNewTab?: boolean;
+    href?: boolean;
+    id?: string;
+    children?: IMenu[];
+}
+interface MenuProps {
+    menuList: IMenu[];
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const _default: (props: MenuProps) => React.JSX.Element;
+export default _default;