@oceanbase/ui 0.2.0

package/es/NavMenu/index.js

@@ -0,0 +1,99 @@
+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 { Menu } from '@oceanbase/design';
+import { isArray } from 'lodash';
+import { pathToRegexp } from 'path-to-regexp';
+import React, { useCallback, useEffect, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import { getPrefix } from "../_util";
+import useHistory from "../_util/useHistory";
+import "./index.less";
+var prefix = getPrefix('menu');
+export default (function (props) {
+  var menuList = props.menuList,
+    className = props.className,
+    style = props.style;
+  var _useState = useState(['0']),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedKeys = _useState2[0],
+    setSelectedKeys = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    menus = _useState4[0],
+    setMenus = _useState4[1];
+  var location = useLocation();
+  var history = useHistory();
+  var preProcess = useCallback(function (list) {
+    var pathname = location.pathname;
+    for (var i = 0; i < list.length; i++) {
+      var _list$i = list[i],
+        link = _list$i.link,
+        openNewTab = _list$i.openNewTab,
+        href = _list$i.href,
+        key = _list$i.key,
+        children = _list$i.children;
+      if (openNewTab || href) return false;
+      var linkList = isArray(link) ? link : [link];
+      var match = linkList.some(function (lk) {
+        return pathToRegexp(lk).test(pathname);
+      });
+      if (match) {
+        setSelectedKeys([key]);
+        setMenus(list);
+        return;
+      }
+      if (!!(children !== null && children !== void 0 && children.length)) {
+        preProcess(children);
+      }
+    }
+  }, [location]);
+  useEffect(function () {
+    preProcess(menuList);
+  }, [menuList, preProcess]);
+  var onMenuItemSelect = useCallback(function (payload) {
+    var newSelectedKeys = payload.selectedKeys;
+    // 打开新tab类型的不需要设置选中态
+    if (menus.some(function (i) {
+      return i.key === newSelectedKeys[0] && i.openNewTab;
+    })) return;
+    setSelectedKeys(newSelectedKeys);
+  }, [setSelectedKeys, menus]);
+  var onMenuClick = useCallback(function (link) {
+    var linkList = isArray(link) ? link : [link];
+    history.push(linkList[0]);
+  }, [history]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefix, "-container ").concat(className),
+    style: style
+  }, /*#__PURE__*/React.createElement(Menu, {
+    style: {
+      height: '100%',
+      borderRight: 0
+    },
+    defaultSelectedKeys: ['0'],
+    selectedKeys: selectedKeys,
+    onSelect: onMenuItemSelect,
+    mode: "inline",
+    theme: "light"
+  }, menus.map(function (config) {
+    var _config$disabled;
+    return /*#__PURE__*/React.createElement(Menu.Item, {
+      key: config.key,
+      disabled: (_config$disabled = config.disabled) !== null && _config$disabled !== void 0 ? _config$disabled : false
+    }, config.openNewTab ? /*#__PURE__*/React.createElement("a", {
+      id: config.id,
+      href: config.link,
+      target: "_blank",
+      rel: "noreferrer"
+    }, config.title) : /*#__PURE__*/React.createElement("a", {
+      id: config.id,
+      onClick: function onClick() {
+        return onMenuClick(config.link);
+      }
+    }, config.title));
+  })));
+});

package/es/NavMenu/index.less

@@ -0,0 +1,50 @@
+@import '../variable.less';
+
+@prefix: ob-menu;
+
+.@{prefix}-container {
+  margin-top: 21px;
+  background-color: transparent;
+  user-select: none;
+
+  ul {
+    background-color: transparent;
+
+    li {
+      padding-right: 0 !important;
+
+      .@{prefixCls}-menu-title-content {
+        padding: 0 20px;
+        border-radius: 10px;
+        transition: 0.6s;
+
+        &:hover {
+          background-color: #e4e8f5;
+        }
+      }
+    }
+
+    .@{prefixCls}-menu-item:not(.@{prefixCls}-menu-item-selected):hover {
+      background-color: transparent !important;
+    }
+
+    .@{prefixCls}-menu-item-selected {
+      background-color: transparent !important;
+
+      .@{prefixCls}-menu-title-content {
+        background-color: #d7e2fc;
+
+        a {
+          color: transparent;
+          font-family: SourceSansPro-Semibold, SourceSansPro-Regular;
+          background: linear-gradient(-45deg, #002bff 0%, #0080ff 100%);
+          background-clip: text;
+        }
+      }
+
+      &::after {
+        display: none;
+      }
+    }
+  }
+}

package/es/PageContainer/ItemRender.js

@@ -0,0 +1,21 @@
+import useHistory from "../_util/useHistory";
+export default (function (_ref) {
+  var route = _ref.route,
+    params = _ref.params,
+    routes = _ref.routes,
+    paths = _ref.paths;
+  var routeIndex = routes.indexOf(route);
+  var last = routeIndex === routes.length - 1;
+  // title > breadcrumbName
+  var title = route.title || route.breadcrumbName;
+  // href (目的路径) > path (拼接路径)
+  var path = route.href || routes.slice(0, routeIndex + 1).map(function (item) {
+    return item.path;
+  }).join('/');
+  var history = useHistory();
+  return last ? /*#__PURE__*/React.createElement("span", null, title) : /*#__PURE__*/React.createElement("a", {
+    onClick: function onClick() {
+      history.push(path);
+    }
+  }, title);
+});

package/es/PageContainer/index.d.ts

@@ -0,0 +1,16 @@
+import type { IconComponentProps } from '@ant-design/icons/es/components/Icon';
+import type { PageContainerProps as AntPageContainerProps, PageHeaderProps as AntPageHeaderProps } from '@ant-design/pro-components';
+import React from 'react';
+export declare type ReloadType = boolean | IconComponentProps | React.ReactNode;
+export interface PageContainerLocale {
+    reload?: string;
+}
+export declare type PageHeaderProps = AntPageHeaderProps & {
+    reload?: ReloadType;
+};
+export interface PageContainerProps extends AntPageContainerProps {
+    header?: PageHeaderProps;
+    locale?: PageContainerLocale;
+}
+declare const _default: any;
+export default _default;

package/es/PageContainer/index.js

@@ -0,0 +1,71 @@
+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 = ["prefixCls", "className", "header", "locale"];
+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 _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 _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 { SyncOutlined } from '@ant-design/icons';
+import { PageContainer as AntPageContainer } from '@ant-design/pro-components';
+import { Space } from '@oceanbase/design';
+import classNames from 'classnames';
+import { isObject } from 'lodash';
+import React, { useContext } from 'react';
+import { ConfigProvider, Tooltip } from '@oceanbase/design';
+import LocaleWrapper from "../locale/LocaleWrapper";
+import ItemRender from "./ItemRender";
+import zhCN from "./locale/zh-CN";
+import useStyle from "./style";
+var PageContainer = function PageContainer(_ref) {
+  var customizePrefixCls = _ref.prefixCls,
+    className = _ref.className,
+    header = _ref.header,
+    locale = _ref.locale,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  var _useContext = useContext(ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls;
+  var rootPrefixCls = getPrefixCls();
+  var prefixCls = getPrefixCls('pro-page-container', customizePrefixCls);
+  var _useStyle = useStyle(prefixCls),
+    wrapSSR = _useStyle.wrapSSR,
+    hashId = _useStyle.hashId;
+  var pageContainerCls = classNames(className, hashId);
+  var _ref2 = header || {},
+    reload = _ref2.reload,
+    subTitle = _ref2.subTitle,
+    breadcrumb = _ref2.breadcrumb;
+  var reloadProps = isObject(reload) && ! /*#__PURE__*/React.isValidElement(reload) ? reload : {};
+  var reloadCls = classNames("".concat(rootPrefixCls, "-page-header-heading-reload"), reloadProps.className);
+  var newSubTitle = /*#__PURE__*/React.createElement(Space, {
+    size: 12
+  }, reload && /*#__PURE__*/React.createElement(Tooltip, {
+    title: locale.reload
+  }, isObject(reload) && /*#__PURE__*/React.isValidElement(reload) ? reload : /*#__PURE__*/React.createElement(SyncOutlined, _extends({}, reloadProps, {
+    className: reloadCls
+  }))), subTitle);
+  var newHeader = header && _objectSpread(_objectSpread({}, header), {}, {
+    subTitle: newSubTitle,
+    breadcrumb: _objectSpread({
+      itemRender: function itemRender(route, params, routes, paths) {
+        return /*#__PURE__*/React.createElement(ItemRender, {
+          route: route,
+          params: params,
+          routes: routes,
+          paths: paths
+        });
+      }
+    }, breadcrumb)
+  });
+  return wrapSSR( /*#__PURE__*/React.createElement(AntPageContainer, _extends({
+    prefixCls: customizePrefixCls,
+    className: pageContainerCls,
+    header: newHeader
+  }, restProps)));
+};
+export default LocaleWrapper({
+  componentName: 'PageContainer',
+  defaultLocale: zhCN
+})(PageContainer);

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

@@ -0,0 +1,3 @@
+export default {
+  reload: 'Reload'
+};

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

@@ -0,0 +1,3 @@
+export default {
+  reload: '刷新'
+};

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

@@ -0,0 +1,3 @@
+export default {
+  reload: '重新加載'
+};

package/es/PageContainer/style/index.d.ts

@@ -0,0 +1,5 @@
+import type { PageContainerToken } from '@ant-design/pro-layout/es/components/PageContainer/style';
+import type { GenerateStyle } from 'antd/es/theme/internal';
+export declare const genPageContainerStyle: GenerateStyle<PageContainerToken>;
+declare const _default: (prefixCls: string) => any;
+export default _default;

package/es/PageContainer/style/index.js

@@ -0,0 +1,72 @@
+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 _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); }
+import { genComponentStyleHook } from "../../_util/genComponentStyleHook";
+export var genPageContainerStyle = function genPageContainerStyle(token) {
+  var _$concat, _$concat2, _$concat3, _$concat4, _ref;
+  var antCls = token.antCls,
+    proComponentsCls = token.proComponentsCls,
+    componentCls = token.componentCls,
+    colorBgBase = token.colorBgBase,
+    borderRadius = token.borderRadius,
+    boxShadowSecondary = token.boxShadowSecondary,
+    fontSizeHeading3 = token.fontSizeHeading3,
+    controlHeightLG = token.controlHeightLG,
+    padding = token.padding,
+    paddingLG = token.paddingLG;
+  var height = controlHeightLG;
+  var lineHeight = "".concat(controlHeightLG, "px");
+  return _ref = {}, _defineProperty(_ref, "".concat(componentCls), (_$concat3 = {
+    // 48px is the height of BasicLayout header
+    minHeight: 'calc(100vh - 48px)'
+  }, _defineProperty(_$concat3, "".concat(proComponentsCls, "-grid-content"), {
+    minHeight: 'auto'
+  }), _defineProperty(_$concat3, "".concat(antCls, "-page-header"), (_$concat2 = {}, _defineProperty(_$concat2, "".concat(antCls, "-page-header-breadcrumb"), {
+    marginBottom: 6
+  }), _defineProperty(_$concat2, "".concat(antCls, "-page-header-heading-title"), {
+    fontSize: fontSizeHeading3
+  }), _defineProperty(_$concat2, "".concat(antCls, "-page-header-heading-reload"), {
+    cursor: 'pointer'
+  }), _defineProperty(_$concat2, "".concat(antCls, "-page-header-heading-extra"), (_$concat = {
+    height: height,
+    lineHeight: lineHeight,
+    marginBlock: 0
+  }, _defineProperty(_$concat, "".concat(antCls, "-btn:not(").concat(antCls, "-input-search-button)"), {
+    minWidth: controlHeightLG,
+    height: height
+  }), _defineProperty(_$concat, "".concat(antCls, "-radio-button-wrapper"), {
+    height: height,
+    lineHeight: lineHeight
+  }), _defineProperty(_$concat, "".concat(antCls, "-input-wrapper"), {
+    lineHeight: lineHeight
+  }), _$concat)), _defineProperty(_$concat2, "".concat(antCls, "-page-header-footer"), {
+    marginBlockStart: 0
+  }), _$concat2)), _defineProperty(_$concat3, "".concat(componentCls, "-warp-page-header"), {
+    paddingInline: paddingLG,
+    paddingBlock: padding
+  }), _defineProperty(_$concat3, "".concat(componentCls, "-children-container"), {
+    paddingInline: paddingLG,
+    paddingBlockStart: 0,
+    paddingBlockEnd: paddingLG
+  }), _$concat3)), _defineProperty(_ref, "".concat(componentCls, "-with-footer "), {
+    paddingBottom: 64
+  }), _defineProperty(_ref, "".concat(proComponentsCls, "-footer-bar"), (_$concat4 = {
+    backgroundColor: colorBgBase,
+    borderRadius: borderRadius,
+    boxShadow: boxShadowSecondary,
+    borderBlockStart: 'none'
+  }, _defineProperty(_$concat4, "".concat(antCls, "-btn:not(").concat(antCls, "-input-search-button)"), {
+    minWidth: 68,
+    height: height
+  }), _defineProperty(_$concat4, "".concat(antCls, "-radio-button-wrapper"), {
+    height: height,
+    lineHeight: lineHeight
+  }), _$concat4)), _ref;
+};
+export default (function (prefixCls) {
+  var useStyle = genComponentStyleHook('PageContainer', function (token) {
+    return [genPageContainerStyle(token)];
+  });
+  return useStyle(prefixCls);
+});

package/es/Password/Content.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface Validator {
+    validate: (value?: string) => boolean;
+    message: string;
+    optional?: boolean;
+}
+declare const Content: React.FC<{
+    rules: Validator[];
+    fieldError: string[];
+    isValidating: boolean;
+    value?: string;
+    isTouched: boolean;
+}>;
+export default Content;

package/es/Password/Content.js

@@ -0,0 +1,92 @@
+import { CheckCircleFilled, CloseCircleFilled, LoadingOutlined } from '@ant-design/icons';
+import { Progress, Space } from '@oceanbase/design';
+import React from 'react';
+import { token } from '@oceanbase/design';
+var Content = function Content(_ref) {
+  var rules = _ref.rules,
+    fieldError = _ref.fieldError,
+    isValidating = _ref.isValidating,
+    value = _ref.value,
+    isTouched = _ref.isTouched;
+  var statusIconMap = {
+    error: /*#__PURE__*/React.createElement(CloseCircleFilled, {
+      style: {
+        color: token.colorError
+      }
+    }),
+    success: /*#__PURE__*/React.createElement(CheckCircleFilled, {
+      style: {
+        color: token.colorSuccess
+      }
+    }),
+    wait: /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: 14,
+        height: 22
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: 6,
+        height: 6,
+        backgroundColor: token.colorTextTertiary,
+        borderRadius: 4
+      }
+    }))
+  };
+  var isRequireFail = rules.filter(function (rule) {
+    return !rule.optional;
+  }).filter(function (rule) {
+    return fieldError.includes(rule.message);
+  }).length > 0;
+  // 密码强度
+  var percent = Math.max(0, Math.min(100, (rules.length - fieldError.length) / rules.length * 100));
+  var strokeColor = '';
+  if (isRequireFail) {
+    strokeColor = token.colorError;
+    if (percent > 50 && percent < 100 && percent !== 100) {
+      strokeColor = token.colorWarning;
+    }
+  } else {
+    strokeColor = token.colorSuccess;
+  }
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Progress, {
+    percent: value ? percent : 0,
+    strokeColor: strokeColor,
+    showInfo: false,
+    size: "small"
+  }), /*#__PURE__*/React.createElement("ul", {
+    style: {
+      margin: 0,
+      marginTop: '10px',
+      listStyle: 'none',
+      padding: '0'
+    }
+  }, rules === null || rules === void 0 ? void 0 : rules.map(function (rule, index) {
+    var isError = fieldError.includes(rule.message);
+    var status = 'wait';
+    if (isError) {
+      status = rule.optional ? 'wait' : 'error';
+    } else {
+      status = 'success';
+    }
+    if (!value) {
+      status = 'error';
+    }
+    if (!isTouched) {
+      status = 'wait';
+    }
+    return /*#__PURE__*/React.createElement("li", {
+      key: index
+    }, /*#__PURE__*/React.createElement(Space, {
+      align: "start"
+    }, isValidating ? /*#__PURE__*/React.createElement(LoadingOutlined, null) : statusIconMap[status], /*#__PURE__*/React.createElement("span", {
+      style: {
+        color: token.colorTextSecondary
+      }
+    }, rule.message)));
+  })));
+};
+export default Content;

package/es/Password/index.d.ts

@@ -0,0 +1,25 @@
+import type { PasswordProps as AntdPasswordProps } from 'antd/es/input';
+import type { LocaleWrapperProps } from '../locale/LocaleWrapper';
+import type { Validator } from './Content';
+export interface PasswordLocale {
+    lengthRuleMessage: string;
+    charRuleMessage: string;
+    strengthRuleMessage: string;
+    placeholder: string;
+    generatePlaceholder: string;
+    randomlyGenerate: string;
+    pleaseKeepYourPasswordIn: string;
+    copySuccessfully: string;
+    copyPassword: string;
+    andKeepItProperly: string;
+}
+export interface PasswordProps extends LocaleWrapperProps, Omit<AntdPasswordProps, 'onChange'> {
+    value?: string;
+    onChange?: (value?: string) => void;
+    rules?: Validator[];
+    onValidate?: (passed: boolean) => void;
+    generatePasswordRegex?: RegExp;
+    locale?: PasswordLocale;
+}
+declare const _default: any;
+export default _default;

package/es/Password/index.js

@@ -0,0 +1,137 @@
+var _excluded = ["value", "locale", "rules", "onChange", "onValidate", "generatePasswordRegex"];
+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 _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; }
+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 { Button, Input, message, Popover } from '@oceanbase/design';
+import RandExp from 'randexp';
+import React, { useState } from 'react';
+import { token } from '@oceanbase/design';
+import CopyToClipboard from 'react-copy-to-clipboard';
+import LocaleWrapper from "../locale/LocaleWrapper";
+import Content from "./Content";
+import zhCN from "./locale/zh-CN";
+var Password = function Password(_ref) {
+  var value = _ref.value,
+    locale = _ref.locale,
+    rules = _ref.rules,
+    onChange = _ref.onChange,
+    onValidate = _ref.onValidate,
+    generatePasswordRegex = _ref.generatePasswordRegex,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    fieldError = _useState2[0],
+    setFieldError = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isValidating = _useState4[0],
+    setIsValidating = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isTouched = _useState6[0],
+    setIsTouched = _useState6[1];
+  var defaultRules = [{
+    validate: function validate(val) {
+      return (val === null || val === void 0 ? void 0 : val.length) >= 8 && (val === null || val === void 0 ? void 0 : val.length) <= 32;
+    },
+    message: locale.lengthRuleMessage
+  }, {
+    validate: function validate(val) {
+      return /^[0-9a-zA-Z~!@#%^&*_\-+=|(){}\[\]:;,.?/`$'"<>\\]+$/.test(val);
+    },
+    message: locale.charRuleMessage
+  }, {
+    validate: function validate(val) {
+      return /(?=(.*[a-z]){2,})(?=(.*[A-Z]){2,})(?=(.*\d){2,})(?=(.*[~!@#%^&*_\-+=|(){}\[\]:;,.?/`$'"<>\\]){2,})/.test(val);
+    },
+    message: locale.strengthRuleMessage
+  }];
+  var newRules = rules || defaultRules;
+  var handleChange = function handleChange(newValue) {
+    if (!isTouched) {
+      setIsTouched(true);
+    }
+    setIsValidating(true);
+    var newFieldError = newRules.map(function (rule) {
+      // 规则校验通过，返回空的校验信息
+      if (rule.validate(newValue)) {
+        return undefined;
+      }
+      // 规则校验不通过，返回对应的校验信息
+      return rule.message;
+    }).filter(function (ruleMessage) {
+      return ruleMessage;
+    });
+    setIsValidating(false);
+    setFieldError(newFieldError);
+    onValidate === null || onValidate === void 0 ? void 0 : onValidate(newFieldError.length === 0);
+    // 先触发 onValidate，再异步触发 onChange，以便在 antd3 Form 的类组件场景下，校验规则 validator 能获取到最新的 passed 值。
+    setTimeout(function () {
+      onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+    }, 0);
+  };
+
+  // 根据正则表达式获取符合要求的随机密码
+  var getRandomPassword = function getRandomPassword() {
+    var newValue = new RandExp(generatePasswordRegex).gen();
+    // 由于生成密码的库目前不支持包含前后断言的正则表达式，因此需要多次生成密码，直到符合密码强度要求
+    if (generatePasswordRegex.test(newValue)) {
+      return newValue;
+    }
+    return getRandomPassword();
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex'
+    }
+  }, /*#__PURE__*/React.createElement(Popover, {
+    trigger: "click",
+    placement: "right",
+    content: /*#__PURE__*/React.createElement(Content, {
+      isTouched: isTouched,
+      value: value,
+      isValidating: isValidating,
+      rules: newRules,
+      fieldError: fieldError
+    }),
+    overlayStyle: {
+      maxWidth: 400
+    }
+  }, /*#__PURE__*/React.createElement(Input.Password, _extends({
+    value: value,
+    autoComplete: "new-password",
+    onChange: function onChange(e) {
+      var _e$target;
+      handleChange(e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value);
+    },
+    placeholder: generatePasswordRegex ? locale.generatePlaceholder : locale.placeholder
+  }, restProps))), generatePasswordRegex && /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      handleChange(getRandomPassword());
+    },
+    style: {
+      marginLeft: 8
+    }
+  }, locale.randomlyGenerate)), value && (fieldError === null || fieldError === void 0 ? void 0 : fieldError.length) === 0 && /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 14,
+      color: token.colorTextTertiary,
+      lineHeight: '22px'
+    }
+  }, locale.pleaseKeepYourPasswordIn, /*#__PURE__*/React.createElement(CopyToClipboard, {
+    text: value,
+    onCopy: function onCopy() {
+      message.success(locale.copySuccessfully);
+    }
+  }, /*#__PURE__*/React.createElement("a", null, locale.copyPassword)), locale.andKeepItProperly));
+};
+export default LocaleWrapper({
+  componentName: 'Password',
+  defaultLocale: zhCN
+})(Password);

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

@@ -0,0 +1,12 @@
+export default {
+  lengthRuleMessage: '8 to 32 characters',
+  charRuleMessage: 'Contains only letters, numbers and symbols including ~!@#%^&*_-+=|(){}[]:;,.?/`$"<>\\',
+  strengthRuleMessage: 'Containes at least 2 characters for each of uppercase letters, lowercase letters, numbers and symbols',
+  placeholder: 'Please enter the password',
+  generatePlaceholder: 'Enter or randomly generate',
+  randomlyGenerate: 'Randomly generate',
+  pleaseKeepYourPasswordIn: 'lease keep your password in mind.',
+  copySuccessfully: 'Copied',
+  copyPassword: ' copy password ',
+  andKeepItProperly: 'and keep it properly'
+};

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

@@ -0,0 +1,12 @@
+export default {
+  lengthRuleMessage: '长度为 8~32 个字符',
+  charRuleMessage: '只能包含字母、数字和特殊字符（~!@#%^&*_-+=|(){}[]:;,.?/`$"<>\\）',
+  strengthRuleMessage: '大小写字母、数字和特殊字符都至少包含 2 个',
+  placeholder: '请输入密码',
+  generatePlaceholder: '请输入或随机生成',
+  randomlyGenerate: '随机生成',
+  pleaseKeepYourPasswordIn: '请牢记密码，也可',
+  copySuccessfully: '复制成功',
+  copyPassword: '复制密码',
+  andKeepItProperly: '并妥善保存'
+};