@authing/react-ui-components 3.1.1-rc.8 → 3.1.2

package/scripts/start.js

@@ -1,166 +0,0 @@
-'use strict';
-
-// Do this as the first thing so that any code reading it knows the right env.
-process.env.BABEL_ENV = 'development';
-process.env.NODE_ENV = 'development';
-
-// Makes the script crash on unhandled rejections instead of silently
-// ignoring them. In the future, promise rejections that are not handled will
-// terminate the Node.js process with a non-zero exit code.
-process.on('unhandledRejection', err => {
-  throw err;
-});
-
-// Ensure environment variables are read.
-require('../config/env');
-
-
-const fs = require('fs');
-const chalk = require('react-dev-utils/chalk');
-const webpack = require('webpack');
-const WebpackDevServer = require('webpack-dev-server');
-const clearConsole = require('react-dev-utils/clearConsole');
-const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
-const {
-  choosePort,
-  createCompiler,
-  prepareProxy,
-  prepareUrls,
-} = require('react-dev-utils/WebpackDevServerUtils');
-const openBrowser = require('react-dev-utils/openBrowser');
-const semver = require('semver');
-const paths = require('../config/paths');
-const configFactory = require('../config/webpack.config');
-const createDevServerConfig = require('../config/webpackDevServer.config');
-const getClientEnvironment = require('../config/env');
-const react = require(require.resolve('react', { paths: [paths.appPath] }));
-
-const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
-const useYarn = fs.existsSync(paths.yarnLockFile);
-const isInteractive = process.stdout.isTTY;
-
-// Warn and crash if required files are missing
-if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
-  process.exit(1);
-}
-
-// Tools like Cloud9 rely on this.
-const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
-const HOST = process.env.HOST || '0.0.0.0';
-
-if (process.env.HOST) {
-  console.log(
-    chalk.cyan(
-      `Attempting to bind to HOST environment variable: ${chalk.yellow(
-        chalk.bold(process.env.HOST)
-      )}`
-    )
-  );
-  console.log(
-    `If this was unintentional, check that you haven't mistakenly set it in your shell.`
-  );
-  console.log(
-    `Learn more here: ${chalk.yellow('https://cra.link/advanced-config')}`
-  );
-  console.log();
-}
-
-// We require that you explicitly set browsers and do not fall back to
-// browserslist defaults.
-const { checkBrowsers } = require('react-dev-utils/browsersHelper');
-checkBrowsers(paths.appPath, isInteractive)
-  .then(() => {
-    // We attempt to use the default port but if it is busy, we offer the user to
-    // run on a different port. `choosePort()` Promise resolves to the next free port.
-    return choosePort(HOST, DEFAULT_PORT);
-  })
-  .then(port => {
-    if (port == null) {
-      // We have not found a port.
-      return;
-    }
-
-    const config = configFactory('development');
-    const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
-    const appName = require(paths.appPackageJson).name;
-
-    const useTypeScript = fs.existsSync(paths.appTsConfig);
-    const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
-    const urls = prepareUrls(
-      protocol,
-      HOST,
-      port,
-      paths.publicUrlOrPath.slice(0, -1)
-    );
-    const devSocket = {
-      warnings: warnings =>
-        devServer.sockWrite(devServer.sockets, 'warnings', warnings),
-      errors: errors =>
-        devServer.sockWrite(devServer.sockets, 'errors', errors),
-    };
-    // Create a webpack compiler that is configured with custom messages.
-    const compiler = createCompiler({
-      appName,
-      config,
-      devSocket,
-      urls,
-      useYarn,
-      useTypeScript,
-      tscCompileOnError,
-      webpack,
-    });
-    // Load proxy config
-    const proxySetting = require(paths.appPackageJson).proxy;
-    const proxyConfig = prepareProxy(
-      proxySetting,
-      paths.appPublic,
-      paths.publicUrlOrPath
-    );
-    // Serve webpack assets generated by the compiler over a web server.
-    const serverConfig = createDevServerConfig(
-      proxyConfig,
-      urls.lanUrlForConfig
-    );
-    const devServer = new WebpackDevServer(compiler, serverConfig);
-    // Launch WebpackDevServer.
-    devServer.listen(port, HOST, err => {
-      if (err) {
-        return console.log(err);
-      }
-      if (isInteractive) {
-        clearConsole();
-      }
-
-      if (env.raw.FAST_REFRESH && semver.lt(react.version, '16.10.0')) {
-        console.log(
-          chalk.yellow(
-            `Fast Refresh requires React 16.10 or higher. You are using React ${react.version}.`
-          )
-        );
-      }
-
-      console.log(chalk.cyan('Starting the development server...\n'));
-      openBrowser(urls.localUrlForBrowser);
-    });
-
-    ['SIGINT', 'SIGTERM'].forEach(function (sig) {
-      process.on(sig, function () {
-        devServer.close();
-        process.exit();
-      });
-    });
-
-    if (process.env.CI !== 'true') {
-      // Gracefully exit when stdin ends
-      process.stdin.on('end', function () {
-        devServer.close();
-        process.exit();
-      });
-    }
-  })
-  .catch(err => {
-    if (err && err.message) {
-      console.log(err.message);
-    }
-    process.exit(1);
-  });

package/scripts/test.js

@@ -1,53 +0,0 @@
-'use strict';
-
-// Do this as the first thing so that any code reading it knows the right env.
-process.env.BABEL_ENV = 'test';
-process.env.NODE_ENV = 'test';
-process.env.PUBLIC_URL = '';
-
-// Makes the script crash on unhandled rejections instead of silently
-// ignoring them. In the future, promise rejections that are not handled will
-// terminate the Node.js process with a non-zero exit code.
-process.on('unhandledRejection', err => {
-  throw err;
-});
-
-// Ensure environment variables are read.
-require('../config/env');
-
-
-const jest = require('jest');
-const execSync = require('child_process').execSync;
-let argv = process.argv.slice(2);
-
-function isInGitRepository() {
-  try {
-    execSync('git rev-parse --is-inside-work-tree', { stdio: 'ignore' });
-    return true;
-  } catch (e) {
-    return false;
-  }
-}
-
-function isInMercurialRepository() {
-  try {
-    execSync('hg --cwd . root', { stdio: 'ignore' });
-    return true;
-  } catch (e) {
-    return false;
-  }
-}
-
-// Watch unless on CI or explicitly running all tests
-if (
-  !process.env.CI &&
-  argv.indexOf('--watchAll') === -1 &&
-  argv.indexOf('--watchAll=false') === -1
-) {
-  // https://github.com/facebook/create-react-app/issues/5210
-  const hasSourceControl = isInGitRepository() || isInMercurialRepository();
-  argv.push(hasSourceControl ? '--watch' : '--watchAll');
-}
-
-
-jest.run(argv);

package/src/common/AuthingDropdown/index.tsx

@@ -1,52 +0,0 @@
-import { DownOutlined } from '@ant-design/icons'
-import React, { FC, useState } from 'react'
-import { getClassnames } from '../../utils'
-
-import './style.less'
-
-/**
- * 不使用 antd 的 dropdown，因为里面会用 tooltip，体积过大
- */
-export const AuthingDropdown: FC<{
-  className?: string
-  menus: {
-    label: React.ReactNode
-    key: string | number
-    onClick?: (
-      key: string | number,
-      evt: React.MouseEvent<HTMLDivElement, MouseEvent>
-    ) => void
-  }[]
-}> = ({ menus, children, className }) => {
-  const [visible, setVisible] = useState(false)
-
-  return (
-    <div
-      className={getClassnames(['authing-dropdown', className])}
-      onMouseEnter={() => setVisible(true)}
-      onMouseLeave={() => setVisible(false)}
-    >
-      <div className="authing-dropdown-trigger">{children}</div>
-      <div
-        className={getClassnames([
-          'authing-dropdown-menu-container',
-          visible && 'authing-dropdown-menu-container__visible',
-        ])}
-      >
-        {menus.map((item) => (
-          <div
-            className="authing-dropdown-menu-item"
-            onClick={(evt) => {
-              setVisible(false)
-              item.onClick?.(item.key, evt)
-            }}
-            key={item.key}
-          >
-            {item.label}
-          </div>
-        ))}
-      </div>
-      <DownOutlined className="authing-dropdown-icon" />
-    </div>
-  )
-}

package/src/common/AuthingDropdown/style.less

@@ -1,43 +0,0 @@
-.authing-dropdown {
-  display: inline-flex;
-  position: relative;
-  align-items: center;
-}
-
-.authing-dropdown-trigger {
-  cursor: pointer;
-}
-
-.authing-dropdown-menu-container {
-  height: 0;
-  opacity: 0;
-  position: absolute;
-  top: 100%;
-  left: 0;
-  transition: all 0.3s;
-  cursor: pointer;
-  background-color: #fff;
-  padding: 4px 0;
-  border-radius: 2px;
-  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
-    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
-  pointer-events: none;
-}
-
-.authing-dropdown-menu-container__visible {
-  height: auto;
-  opacity: 1;
-  pointer-events: unset;
-}
-
-.authing-dropdown-menu-item {
-  padding: 5px 12px;
-  transition: all 0.3s;
-  &:hover {
-    background-color: #f5f5f5;
-  }
-}
-
-.authing-dropdown-icon {
-  margin-left: 8px;
-}

package/src/common/AuthingTabs/index.tsx

@@ -1,98 +0,0 @@
-import { Button } from 'antd'
-import React, { FC, useMemo } from 'react'
-import { EllipsisOutlined } from '@ant-design/icons'
-
-import { getClassnames } from '../../utils'
-
-import './style.less'
-
-export interface AuthingTabsProps extends React.HTMLAttributes<HTMLDivElement> {
-  activeKey?: string
-  onTabClick: (key: string) => void
-  showLen?: number
-  tabs: {
-    key: string
-    label: string
-    component: JSX.Element
-  }[]
-}
-
-export const AuthingTabs: FC<AuthingTabsProps> = ({
-  tabs,
-  showLen = 3,
-  className,
-  activeKey,
-  onTabClick,
-}) => {
-  const activeIndex = useMemo(
-    () => tabs.findIndex((item) => item.key === activeKey),
-    [tabs, activeKey]
-  )
-
-  const showTabs = useMemo(() => {
-    if (tabs.length <= showLen) {
-      return [...tabs]
-    }
-
-    let startIndex = Math.max(activeIndex - 1, 0)
-    if (startIndex + showLen > tabs.length - 1) {
-      startIndex = tabs.length - showLen
-    }
-
-    return tabs.slice(startIndex, startIndex + showLen)
-  }, [showLen, activeIndex, tabs])
-
-  const hideTabs = useMemo(() => {
-    const showKeys = showTabs.map((item) => item.key)
-    return tabs.filter((item) => !showKeys.find((key) => item.key === key))
-  }, [tabs, showTabs])
-
-  return (
-    <>
-      <div className={getClassnames(['authing-tabs', className])}>
-        <div
-          className={getClassnames([
-            'authing-tabs-inner',
-            Boolean(hideTabs.length) && 'authing-tabs-inner--more',
-          ])}
-        >
-          {showTabs.map((item, index) => (
-            <div
-              onClick={() => onTabClick(item.key)}
-              className={getClassnames([
-                'authing-tab-item',
-                activeKey === item.key && 'authing-tab-item__active',
-              ])}
-              key={item.key}
-            >
-              {item.label}
-            </div>
-          ))}
-        </div>
-        {Boolean(hideTabs.length) && (
-          <Button
-            className="authing-tabs-show-more"
-            type="text"
-            icon={<EllipsisOutlined />}
-          >
-            <ul className="authing-tabs-more-panel">
-              {hideTabs.map((item) => (
-                <li
-                  key={item.key}
-                  onClick={() => onTabClick(item.key)}
-                  className="authing-tabs-more-panel-item"
-                >
-                  {item.label}
-                </li>
-              ))}
-            </ul>
-          </Button>
-        )}
-      </div>
-
-      <div className="authing-tab-pane">
-        {tabs.find((item) => item.key === activeKey)?.component}
-      </div>
-    </>
-  )
-}

package/src/common/AuthingTabs/style.less

@@ -1,135 +0,0 @@
-.authing-tabs {
-  display: flex;
-  margin-bottom: 36px;
-  align-items: center;
-}
-.authing-tabs-inner {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  flex: 1;
-}
-.authing-tabs-inner--more {
-  box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);
-}
-.authing-tab-item {
-  color: #aeb9d4;
-  font-size: 16px;
-  transition: all 0.3s ease-in-out;
-  white-space: nowrap;
-  cursor: pointer;
-  position: relative;
-  height: 28px;
-  margin-right: 32px;
-  &:last-child {
-    margin-right: 12px;
-  }
-  &:only-child {
-    margin-right: 0;
-  }
-  &::after {
-    content: '';
-    width: 0;
-    height: 2px;
-    display: block;
-    position: absolute;
-    left: 50%;
-    bottom: -4px;
-    transform: translateX(-50%);
-    background-color: transparent;
-    transition: all 0.3s ease-in-out;
-  }
-}
-.authing-tab-item__active {
-  color: #396aff;
-  font-size: 18px;
-  &::after {
-    width: 26px;
-    background-color: #396aff;
-  }
-}
-.authing-tabs-show-more {
-  position: relative;
-  z-index: 2;
-  &.ant-btn {
-    padding: 0 12px;
-  }
-  &:hover,
-  &:focus,
-  &:active {
-    background-color: #fff;
-  }
-  &:hover {
-    .authing-tabs-more-panel {
-      height: auto;
-      opacity: 1;
-      padding: 4px 0;
-    }
-  }
-
-  &:after {
-    content: '';
-    display: block;
-    width: 100%;
-    height: 6px;
-    top: 100%;
-    left: 0;
-    position: absolute;
-  }
-}
-.authing-tabs-more-panel {
-  position: absolute;
-  box-sizing: border-box;
-  transition: all 0.3s;
-  height: 0;
-  opacity: 0;
-  right: 0;
-  top: 100%;
-  transform: translateY(6px);
-  background-color: #fff;
-  max-height: 200px;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  overflow-y: auto;
-  text-align: left;
-  list-style-type: none;
-  background-clip: padding-box;
-  border-radius: 2px;
-  outline: none;
-  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
-    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
-}
-.authing-tabs-more-panel-item {
-  min-width: 120px;
-  margin: 0;
-  padding: 5px 12px;
-  overflow: hidden;
-  color: rgba(0, 0, 0, 0.85);
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 22px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  cursor: pointer;
-  transition: all 0.3s;
-  &:hover {
-    background-color: #f5f5f5;
-  }
-}
-
-@media only screen and (max-width: 719px) {
-  .authing-tabs-inner {
-    justify-content: flex-start;
-  }
-  .authing-tab-item {
-    margin-right: 40px;
-    font-size: 14px;
-  }
-  .authing-tab-item__active {
-    font-size: 16px;
-  }
-  .authing-tab-pane {
-    padding-bottom: 70px;
-  }
-}

package/src/common/CopyAbleText/index.tsx

@@ -1,54 +0,0 @@
-import React, { FC, useCallback, useEffect, useRef, useState } from 'react'
-import { CopyOutlined, CheckOutlined } from '@ant-design/icons'
-import { copyToClipboard, getClassnames } from '../../utils'
-
-import './style.less'
-import { useTranslation } from 'react-i18next'
-
-export interface CopyTextProps extends React.HTMLAttributes<HTMLDivElement> {}
-
-export const CopyAbleText: FC<CopyTextProps> = ({ children, className }) => {
-  const { t } = useTranslation()
-  const divRef = useRef<HTMLDivElement>(null)
-  const [copied, setCopied] = useState(false)
-  const timer = useRef(-1)
-
-  const startTimer = useCallback(() => {
-    setCopied(true)
-    clearTimeout(timer.current)
-    timer.current = (setTimeout(
-      () => setCopied(false),
-      3000
-    ) as unknown) as number
-  }, [timer])
-
-  useEffect(() => {
-    return () => clearTimeout(timer.current)
-  }, [])
-
-  const handleCopy = () => {
-    copyToClipboard(divRef.current!.innerText)
-    startTimer()
-  }
-
-  return (
-    <div
-      className={getClassnames(['authing-copy-text', className])}
-      ref={divRef}
-    >
-      {children}
-      {copied ? (
-        <CheckOutlined
-          className="authing-data-tips authing-data-tips__top authing-guard-pointer authing-copy-text-icon authing-copy-text-icon__success"
-          data-tips={t('common.copied')}
-        />
-      ) : (
-        <CopyOutlined
-          className="authing-data-tips authing-data-tips__top authing-guard-pointer authing-copy-text-icon"
-          data-tips={t('common.copy')}
-          onClick={handleCopy}
-        />
-      )}
-    </div>
-  )
-}

package/src/common/CopyAbleText/style.less

@@ -1,13 +0,0 @@
-.authing-copy-text {
-  display: flex;
-  align-items: center;
-}
-
-.authing-copy-text-icon {
-  margin-left: 4px;
-  color: #396aff;
-}
-
-.authing-copy-text-icon__success {
-  color: #b7eb8f;
-}

package/src/common/VerifyCodeInput/index.tsx

@@ -1,76 +0,0 @@
-import { Divider, Input } from 'antd'
-import React, { FC, Fragment, useRef } from 'react'
-
-import './style.less'
-
-interface VerifyCodeInputProps extends React.HTMLAttributes<HTMLDivElement> {
-  verifyCode: string[]
-  setVerifyCode: (code: string[]) => void
-  length?: number
-  onEnter?: Function
-}
-
-export const VerifyCodeInput: FC<VerifyCodeInputProps> = ({
-  verifyCode,
-  setVerifyCode,
-  length = 6,
-  onEnter,
-}) => {
-  const inputRef = useRef<any[]>([])
-
-  const handleChange = (val: string | undefined = '', index: number) => {
-    const num = parseInt(val)
-    if (isNaN(num)) {
-      val = ''
-    } else {
-      val = String(num)
-    }
-    const codes = [...verifyCode]
-    codes[index] = val.split('').slice(-1)[0] || ''
-    setVerifyCode(codes)
-
-    if (val && inputRef.current[index + 1]) {
-      inputRef.current[index + 1].focus()
-    }
-  }
-
-  const handleKeyDown = (evt: any, index: number) => {
-    const currentVal = verifyCode[index]
-
-    switch (evt.keyCode) {
-      case 8:
-        if (!currentVal && inputRef.current[index - 1]) {
-          handleChange('', index - 1)
-          inputRef.current[index - 1].focus()
-        }
-        break
-
-      case 13:
-        onEnter?.()
-        break
-      default:
-        break
-    }
-  }
-
-  return (
-    <div className="authing-code-input">
-      {new Array(length).fill(0).map((_, index) => (
-        <Fragment key={index}>
-          <Input
-            ref={(el) => (inputRef.current[index] = el)}
-            className="authing-code-input-item"
-            size="large"
-            autoFocus={index === 0}
-            onKeyDown={(evt) => handleKeyDown(evt, index)}
-            value={verifyCode[index]}
-            onChange={(evt) => handleChange(evt.target.value, index)}
-          />
-          {index === Math.floor(length / 2 - 1) && (
-            <Divider className="authing-code-input-divider" />
-          )}
-        </Fragment>
-      ))}
-    </div>
-  )
-}