@oceanbase/ui 0.2.0

package/lib/IconFont/index.js

@@ -0,0 +1,82 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/IconFont/index.tsx
+var IconFont_exports = {};
+__export(IconFont_exports, {
+  default: () => IconFont_default
+});
+module.exports = __toCommonJS(IconFont_exports);
+var import_icons = require("@ant-design/icons");
+var import_react = __toESM(require("react"));
+var import_iconfont = require("./font/iconfont.css");
+var CustomIcon = (0, import_icons.createFromIconfontCN)({
+  // OceanBase 图标库地址: https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3786261
+  // 在 iconfont.cn 上生成
+  scriptUrl: "//at.alicdn.com/t/a/font_3786261_ifhixq9j5c.js"
+});
+var iconfontList = [
+  "backup",
+  "backup-colored",
+  "cluster",
+  "cluster-colored",
+  "data-source",
+  "data-source-colored",
+  "docs",
+  "diagnosis",
+  "diagnosis-colored",
+  "host",
+  "host-colored",
+  "log",
+  "log-colored",
+  "migration",
+  "migration-colored",
+  "monitor",
+  "monitor-colored",
+  "notification",
+  "obproxy",
+  "obproxy-colored",
+  "package",
+  "package-colored",
+  "overview",
+  "overview-colored",
+  "property",
+  "property-colored",
+  "tenant",
+  "tenant-colored",
+  "sync",
+  "sync-colored",
+  "system",
+  "system-colored",
+  "user"
+];
+var IconFont = (props) => {
+  const { type, className, ...restProps } = props;
+  return iconfontList.includes(type) ? /* @__PURE__ */ import_react.default.createElement(CustomIcon, { type, className, ...restProps }) : /* @__PURE__ */ import_react.default.createElement("i", { className: `iconfont ${type} ${className}`, ...restProps });
+};
+var IconFont_default = IconFont;

package/lib/LocaleDropdown/index.d.ts

@@ -0,0 +1,9 @@
+import type { DropdownProps } from 'antd/es/dropdown';
+import React from 'react';
+import type { Locale } from '../interface';
+export interface LocaleDropdownProps extends DropdownProps {
+    locales?: Locale[];
+    showLabel?: boolean;
+}
+declare const LocaleDropdown: React.FC<LocaleDropdownProps>;
+export default LocaleDropdown;

package/lib/LocaleDropdown/index.js

@@ -0,0 +1,70 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/LocaleDropdown/index.tsx
+var LocaleDropdown_exports = {};
+__export(LocaleDropdown_exports, {
+  default: () => LocaleDropdown_default
+});
+module.exports = __toCommonJS(LocaleDropdown_exports);
+var import_icons = require("@ant-design/icons");
+var import_util = require("@oceanbase/util");
+var import_design = require("@oceanbase/design");
+var import_react = __toESM(require("react"));
+var import_constant = require("../constant");
+var import_util2 = require("../_util");
+var prefix = (0, import_util2.getPrefix)("layout-header");
+var LocaleDropdown = ({ locales, showLabel, ...restProps }) => {
+  const localeMenu = /* @__PURE__ */ import_react.default.createElement(
+    import_design.Menu,
+    {
+      onClick: ({ key }) => {
+        (0, import_util2.setLocale)(key);
+      }
+    },
+    import_constant.LOCALE_LIST.filter((item) => !locales || locales.includes(item.value)).map((item) => /* @__PURE__ */ import_react.default.createElement(import_design.Menu.Item, { key: item.value }, item.label))
+  );
+  return /* @__PURE__ */ import_react.default.createElement(import_design.Dropdown, { overlay: localeMenu, ...restProps }, showLabel ? /* @__PURE__ */ import_react.default.createElement(
+    "span",
+    {
+      style: {
+        display: "inline-block",
+        width: 28,
+        height: 28,
+        fontSize: 12,
+        fontWeight: 500,
+        lineHeight: "28px",
+        textAlign: "center",
+        border: "0.88px solid #ced4e1",
+        borderRadius: 14
+      }
+    },
+    (0, import_util.findByValue)(import_constant.LOCALE_LIST, (0, import_util2.getLocale)()).minLabel
+  ) : /* @__PURE__ */ import_react.default.createElement(import_design.Space, { className: `${prefix}-extra-item` }, /* @__PURE__ */ import_react.default.createElement(import_icons.GlobalOutlined, null), (0, import_util.findByValue)(import_constant.LOCALE_LIST, (0, import_util2.getLocale)()).shortLabel));
+};
+var LocaleDropdown_default = LocaleDropdown;

package/lib/Login/ActivateForm.d.ts

@@ -0,0 +1,19 @@
+import type { FormProps } from 'antd/es/form';
+import React from 'react';
+import type { LoginLocale } from './index';
+import './index.less';
+export interface IActivateFormProps extends FormProps {
+    locale?: LoginLocale;
+    /**
+     * 用户自定义密码规则
+     */
+    passwordRule?: {
+        pattern: RegExp;
+        message: string;
+    };
+    loading?: boolean;
+    errorMessage?: React.ReactNode | string;
+    goBack?: () => void;
+}
+declare const Activate: React.FC<IActivateFormProps>;
+export default Activate;

package/lib/Login/ActivateForm.js

@@ -0,0 +1,132 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Login/ActivateForm.tsx
+var ActivateForm_exports = {};
+__export(ActivateForm_exports, {
+  default: () => ActivateForm_default
+});
+module.exports = __toCommonJS(ActivateForm_exports);
+var import_design = require("@oceanbase/design");
+var import_lodash = require("lodash");
+var import_react = __toESM(require("react"));
+var import_util = require("../_util");
+var import_index = require("./index.less");
+var import_RegisterForm = require("./RegisterForm");
+var prefix = (0, import_util.getPrefix)("login");
+var Activate = ({
+  locale,
+  loading,
+  passwordRule,
+  errorMessage,
+  goBack,
+  ...restProps
+}) => {
+  const [formRef] = import_design.Form.useForm();
+  const handleValidateConfirmPassword = (0, import_react.useCallback)(
+    (rule, value, callback) => {
+      if (!formRef) {
+        callback();
+        return;
+      }
+      const pwd = formRef.getFieldValue("password");
+      if ((0, import_lodash.toString)(value) !== (0, import_lodash.toString)(pwd)) {
+        callback(locale.samePasswordMessage);
+        return;
+      }
+      callback();
+    },
+    [formRef]
+  );
+  const passwordRegexpRule = passwordRule || {
+    pattern: import_RegisterForm.PASSWORD_REGEX,
+    message: locale.passwordHelp
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_design.Form,
+    {
+      layout: "vertical",
+      requiredMark: false,
+      className: `${prefix}-form`,
+      form: formRef,
+      ...restProps,
+      "data-testid": "login.register"
+    },
+    errorMessage && /* @__PURE__ */ import_react.default.createElement(import_design.Alert, { type: "error", showIcon: true, className: `${prefix}-alert`, message: errorMessage }),
+    /* @__PURE__ */ import_react.default.createElement(
+      import_design.Form.Item,
+      {
+        name: "password",
+        label: locale.passwordLabel,
+        dependencies: ["confirmPassword"],
+        help: passwordRegexpRule.message,
+        validateFirst: true,
+        rules: [
+          {
+            required: true,
+            message: locale.passwordMessage
+          },
+          passwordRegexpRule
+        ]
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_design.Input.Password, { visibilityToggle: true, autoComplete: "new-password" })
+    ),
+    /* @__PURE__ */ import_react.default.createElement(
+      import_design.Form.Item,
+      {
+        name: "confirmPassword",
+        label: locale.confirmPwdLabel,
+        dependencies: ["password"],
+        validateFirst: true,
+        rules: [
+          {
+            required: true,
+            message: locale.confirmPwdMessage
+          },
+          {
+            validator: handleValidateConfirmPassword
+          }
+        ]
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_design.Input.Password, { visibilityToggle: true, autoComplete: "new-password" })
+    ),
+    /* @__PURE__ */ import_react.default.createElement(
+      import_design.Button,
+      {
+        htmlType: "submit",
+        loading,
+        type: "primary",
+        block: true,
+        className: `${prefix}-submit-btn`
+      },
+      locale.activeSubmitBtn
+    ),
+    /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-switch-btn` }, /* @__PURE__ */ import_react.default.createElement(import_design.Button, { type: "link", onClick: goBack }, locale.activeBackBtn))
+  );
+};
+var ActivateForm_default = Activate;

package/lib/Login/LoginForm.d.ts

@@ -0,0 +1,20 @@
+import type { FormProps } from 'antd/es/form';
+import React from 'react';
+import type { LoginLocale } from '.';
+import './index.less';
+export interface Values {
+    username: string;
+    password: string;
+}
+export interface ILoginFormProps extends FormProps {
+    loading?: boolean;
+    locale?: LoginLocale;
+    errorMessage?: React.ReactNode | string;
+    showAuthCode?: boolean;
+    showOtherLoginButton?: boolean;
+    authCodeImg?: string;
+    otherLoginProps?: any;
+    onAuthCodeImgChange?: () => void;
+}
+declare const Login: React.FC<ILoginFormProps>;
+export default Login;

package/lib/Login/LoginForm.js

@@ -0,0 +1,175 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Login/LoginForm.tsx
+var LoginForm_exports = {};
+__export(LoginForm_exports, {
+  default: () => LoginForm_default
+});
+module.exports = __toCommonJS(LoginForm_exports);
+var import_icons = require("@ant-design/icons");
+var import_design = require("@oceanbase/design");
+var import_classnames = __toESM(require("classnames"));
+var import_react = __toESM(require("react"));
+var import_design2 = require("@oceanbase/design");
+var import_util = require("../_util");
+var import_index = require("./index.less");
+var prefix = (0, import_util.getPrefix)("login");
+var Login = ({
+  loading,
+  locale,
+  errorMessage,
+  showAuthCode,
+  showOtherLoginButton,
+  authCodeImg,
+  otherLoginProps,
+  onAuthCodeImgChange,
+  ...restProps
+}) => {
+  const [focusInput, setFocusInput] = (0, import_react.useState)("");
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_design.Form,
+    {
+      layout: "vertical",
+      hideRequiredMark: true,
+      className: `${prefix}-form`,
+      style: { paddingLeft: showAuthCode ? 96 : 0 },
+      ...restProps,
+      "data-testid": "login.form"
+    },
+    errorMessage && /* @__PURE__ */ import_react.default.createElement(import_design.Alert, { type: "error", showIcon: true, className: `${prefix}-alert`, message: errorMessage }),
+    /* @__PURE__ */ import_react.default.createElement(
+      import_design.Form.Item,
+      {
+        name: "username",
+        rules: [
+          {
+            required: true,
+            message: locale.usernameMessage
+          }
+        ]
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        import_design.Input,
+        {
+          prefix: /* @__PURE__ */ import_react.default.createElement(import_icons.UserOutlined, { style: { color: import_design2.token.colorIcon } }),
+          placeholder: locale.usernamePlaceholder,
+          onFocus: () => {
+            setFocusInput("username");
+          },
+          onBlur: () => {
+            setFocusInput("");
+          },
+          className: (0, import_classnames.default)({
+            [`${prefix}-focus-input`]: focusInput === "username"
+          })
+        }
+      )
+    ),
+    /* @__PURE__ */ import_react.default.createElement(
+      import_design.Form.Item,
+      {
+        name: "password",
+        rules: [
+          {
+            required: true,
+            message: locale.passwordMessage
+          }
+        ]
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        import_design.Input.Password,
+        {
+          visibilityToggle: true,
+          autoComplete: "current-password",
+          prefix: /* @__PURE__ */ import_react.default.createElement(import_icons.LockOutlined, { style: { color: import_design2.token.colorIcon } }),
+          placeholder: locale.passwordPlaceholder,
+          onFocus: () => {
+            setFocusInput("password");
+          },
+          onBlur: () => {
+            setFocusInput("");
+          },
+          className: focusInput === "password" ? `${prefix}-focus-input` : ""
+        }
+      )
+    ),
+    showAuthCode && /* @__PURE__ */ import_react.default.createElement(import_design.Space, { className: `${prefix}-auth-code` }, /* @__PURE__ */ import_react.default.createElement(
+      import_design.Form.Item,
+      {
+        name: "authCode",
+        rules: [
+          {
+            required: true,
+            message: "验证码不能为空"
+          }
+        ]
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        import_design.Input,
+        {
+          prefix: /* @__PURE__ */ import_react.default.createElement(import_icons.SafetyCertificateOutlined, { style: { color: import_design2.token.colorIcon } }),
+          placeholder: "请输入验证码",
+          onFocus: () => {
+            setFocusInput("authCode");
+          },
+          onBlur: () => {
+            setFocusInput("");
+          },
+          className: (0, import_classnames.default)({
+            [`${prefix}-focus-input`]: focusInput === "authCode"
+          })
+        }
+      )
+    ), /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(`${prefix}-code-btn`) }, /* @__PURE__ */ import_react.default.createElement("img", { src: authCodeImg, alt: "", width: "96", height: "38" }), /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-code-mask`, onClick: onAuthCodeImgChange }, /* @__PURE__ */ import_react.default.createElement(import_icons.SyncOutlined, null)))),
+    /* @__PURE__ */ import_react.default.createElement(import_design.Form.Item, null, /* @__PURE__ */ import_react.default.createElement(
+      import_design.Button,
+      {
+        htmlType: "submit",
+        loading,
+        type: "primary",
+        block: true,
+        className: `${prefix}-submit-btn`
+      },
+      locale.loginText
+    )),
+    showOtherLoginButton && /* @__PURE__ */ import_react.default.createElement(import_design.Form.Item, null, /* @__PURE__ */ import_react.default.createElement(
+      import_design.Button,
+      {
+        htmlType: "button",
+        loading: otherLoginProps.loading,
+        type: "primary",
+        block: true,
+        onClick: otherLoginProps.onFinish,
+        className: `${prefix}-submit-btn`
+      },
+      locale.otherLoginText
+    ))
+  );
+};
+var LoginForm_default = Login;

package/lib/Login/RegisterForm.d.ts

@@ -0,0 +1,23 @@
+import type { FormProps } from 'antd/es/form';
+import React from 'react';
+import type { LoginLocale } from './index';
+import './index.less';
+/**
+ * 冗余的转义符可以增强正则的可读性
+ */
+export declare const PASSWORD_REGEX: RegExp;
+export interface IRegisterFormProps extends FormProps {
+    locale?: LoginLocale;
+    /**
+     * 用户自定义密码规则
+     */
+    passwordRule?: {
+        pattern: RegExp;
+        message: string;
+    };
+    loading?: boolean;
+    isUserExists?: (account: string) => Promise<boolean>;
+    errorMessage?: React.ReactNode | string;
+}
+declare const Register: React.FC<IRegisterFormProps>;
+export default Register;