optimize: bump @alicloud/console-components to 2.1.15 and extract sub…

…project to vendors directory

console/src/main/resources/static/console-fe/package.json

@@ -74,10 +74,8 @@
     "webpack-dev-server": "^4.15.1"
   },
   "dependencies": {
-    "@alicloud/console-components": "^1.6.2",
-    "@alicloud/console-components-actions": "^1.1.1",
-    "@alicloud/console-components-app-layout": "^1.1.4",
-    "@alicloud/console-components-console-menu": "^1.2.12",
+    "@alicloud/console-components": "^2.1.15",
+    "@alicloud/css-var-utils": "^0.1.0",
     "@babel/traverse": "^7.23.7",
     "axios": "^1.6.6",
     "browserify-sign": "^4.2.2",

console/src/main/resources/static/console-fe/src/app.tsx

@@ -21,7 +21,7 @@ import { Dispatch } from 'redux';
 import { Router, Route, Switch, Redirect, RouteComponentProps } from 'react-router-dom';
 import { ConfigProvider, Loading } from '@alicloud/console-components';
 import { createHashHistory, History } from 'history';
-import CCConsoleMenu from '@alicloud/console-components-console-menu';
+import CCConsoleMenu from '@/vendors/rc-console-menu';
 import { GlobalStateModel } from '@/reducers';
 import { changeLanguage, LocaleStateModel, getCurrentLanguage } from '@/reducers/locale';
 import Layout from '@/layout';

console/src/main/resources/static/console-fe/src/pages/GlobalLockInfo/GlobalLockInfo.tsx

@@ -16,7 +16,6 @@
  */
 import React from 'react';
 import { ConfigProvider, Table, Button, DatePicker, Form, Icon, Pagination, Input } from '@alicloud/console-components';
-import Actions, { LinkButton } from '@alicloud/console-components-actions';
 import { withRouter } from 'react-router-dom';
 import Page from '@/components/Page';
 import { GlobalProps } from '@/module';

console/src/main/resources/static/console-fe/src/pages/TransactionInfo/TransactionInfo.tsx

@@ -16,7 +16,7 @@
  */
 import React from 'react';
 import { ConfigProvider, Table, Button, DatePicker, Form, Icon, Switch, Pagination, Dialog, Input, Select } from '@alicloud/console-components';
-import Actions, { LinkButton } from '@alicloud/console-components-actions';
+import Actions, { LinkButton } from '@/vendors/rc-actions';
 import { withRouter } from 'react-router-dom';
 import Page from '@/components/Page';
 import { GlobalProps } from '@/module';

console/src/main/resources/static/console-fe/src/vendors/rc-actions/actions.tsx

@@ -0,0 +1,197 @@
+import React, {
+  CSSProperties,
+  ReactNode,
+  ReactElement,
+  createContext,
+  useMemo,
+} from 'react'
+import { Dropdown, Menu, Icon } from '@alicloud/console-components'
+import { DropdownProps } from '@alicloud/console-components'
+import { MenuProps } from '@alicloud/console-components'
+import cls from 'classnames'
+
+import {
+  GetFusionConfig,
+  IFusionConfigProps,
+  getWrapperProps,
+  partitionWithThreshold,
+  renderActionsChildren,
+} from './utils'
+import { LinkButton } from './linkButton'
+import {
+  baseClassName,
+  itemClassName,
+  triggerClassName,
+  expandMenuClassName,
+  collapsedItemClassName,
+} from './constants'
+import { SActions, DropDownStyle } from './styles'
+import { IActionsProps } from './types/IActionsProps.type'
+export type { IActionsProps }
+
+const Context = createContext<{
+  menuProps: MenuProps
+  dropdownProps: DropdownProps
+  prefix: string
+}>({
+  menuProps: {},
+  dropdownProps: {},
+  prefix: 'next-',
+})
+
+/**
+ * 多个操作器（如按钮、链接）的布局容器。
+ * @public
+ */
+const Actions: React.FC<IActionsProps & IFusionConfigProps> = (props) => {
+  const wrapperProps = getWrapperProps(props, { className: baseClassName })
+  const {
+    children,
+    threshold = 3,
+    dataSource,
+    expandTrigger = <Icon type="more" size="xs" tabIndex={0} />,
+    expandTriggerType = 'click' as IActionsProps['expandTriggerType'],
+    wrap = false,
+    dropdownProps = {},
+    menuProps = {},
+    fusionConfig = {},
+  } = props
+
+  /**
+   * 根据threshold将子节点分为两组：`[前threshold个, 剩下的x个]`
+   */
+  const partitionFn: PartitionFn = ((childrenArg) =>
+    partitionWithThreshold(childrenArg, threshold)) as PartitionFn
+  /**
+   * partitionFn已经将子元素分为了两组：`[前threshold个, 剩下的x个]`，它会将前面这组直接展示，并用竖线分开，将后面这组收敛在一个下拉菜单中
+   */
+  const renderItemsByParts: RenderItemsByParts = defaultRenderItemsByParts.bind(
+    null,
+    expandTrigger,
+    expandTriggerType
+  )
+
+  const { prefix = 'next-' } = fusionConfig
+
+  const providerValue = useMemo(
+    () => ({
+      dropdownProps,
+      menuProps,
+      prefix,
+    }),
+    [dropdownProps, menuProps, prefix]
+  )
+
+  return (
+    <Context.Provider value={providerValue}>
+      <SActions {...wrapperProps} wrap={wrap}>
+        {renderActionsChildren(
+          children || dataSource || [],
+          partitionFn,
+          renderItemsByParts
+        )}
+      </SActions>
+    </Context.Provider>
+  )
+}
+
+export default GetFusionConfig(Actions)
+
+function defaultRenderDisplayedItems(items: ReactElement[]) {
+  return items.map((item, index) => (
+    // eslint-disable-next-line react/no-array-index-key
+    <span key={index} className={itemClassName}>
+      {item}
+    </span>
+  ))
+}
+
+function defaultRenderShrinkItems(
+  items: ReactElement[],
+  config: {
+    expandTriggerType: IActionsProps['expandTriggerType']
+    expandTrigger: IActionsProps['expandTrigger']
+  }
+) {
+  if (items.length === 0) {
+    return null
+  }
+
+  const { expandTrigger, expandTriggerType } = config
+  return (
+    <Context.Consumer>
+      {({ prefix, dropdownProps, menuProps }) => {
+        return (
+          <>
+            <DropDownStyle prefix={prefix} />
+            <Dropdown
+              {...dropdownProps}
+              trigger={
+                <span className={triggerClassName}>{expandTrigger}</span>
+              }
+              triggerType={expandTriggerType}
+            >
+              <Menu
+                {...menuProps}
+                className={cls(expandMenuClassName, menuProps.className || '')}
+              >
+                {items.map((item, i) => {
+                  const {
+                    props: { disabled },
+                    type,
+                  } = item
+                  if (type && (type as any).__windType === 'LinkButton') {
+                    return <Menu.Item {...item.props} />
+                  }
+                  return (
+                    // eslint-disable-next-line react/no-array-index-key
+                    <Menu.Item disabled={disabled} key={i}>
+                      <span className={collapsedItemClassName}>{item}</span>
+                    </Menu.Item>
+                  )
+                })}
+              </Menu>
+            </Dropdown>
+          </>
+        )
+      }}
+    </Context.Consumer>
+  )
+}
+
+function defaultRenderItemsByParts(
+  expandTrigger: ReactNode,
+  expandTriggerType: IActionsProps['expandTriggerType'],
+  displayedItems: ReactElement[],
+  shrinkItems: ReactElement[]
+) {
+  return (
+    <>
+      {defaultRenderDisplayedItems(displayedItems)}
+      {defaultRenderShrinkItems(shrinkItems, {
+        expandTrigger,
+        expandTriggerType,
+      })}
+    </>
+  )
+}
+
+/**
+ * 这个函数将子元素划分为多个“部分”。比如，可以分为【需要直接展示的元素】和【需要藏在下拉菜单的元素】。
+ * 用户可以通过这个API来自定义如何将子元素**过滤、排序、分类**。分好类以后会被传给  `IActionsProps.renderItemsByParts` 处理。
+ * @param children - Actions组件的所有子元素。
+ * @returns 经过过滤、排序、分类后的子元素。比如可以返回`[Array<需要直接展示的元素>, Array<需要隐藏在下拉菜单的元素>]`。
+ * @public
+ */
+export type PartitionFn = (
+  children: ReactElement[]
+) => [ReactElement[], ReactElement[]]
+
+/**
+ * 这个函数接受经过 {@link IActionsProps.partitionFn | partitionFn}处理的子元素。返回需要渲染的元素。
+ * 比如，如果 {@link IActionsProps.partitionFn | partitionFn}将子元素划分为`[Array<displayedItem>, Array<shrinkItems>]`，那么这个函数的签名就应该是:"(displayedItems: ReactElement[], shrinkItems: ReactElement[]) =\> ReactNode"
+ * @param parts - 经过 {@link IActionsProps.partitionFn | partitionFn}分类以后的数组。
+ * @returns 最终需要渲染的ReactNode。
+ * @internal
+ */
+export type RenderItemsByParts = (...parts: ReactElement[][]) => ReactNode

console/src/main/resources/static/console-fe/src/vendors/rc-actions/constants.ts

@@ -0,0 +1,10 @@
+/** @internal */
+export const baseClassName = 'wind-rc-actions'
+/** @internal */
+export const itemClassName = `${baseClassName}-item`
+/** @internal */
+export const collapsedItemClassName = `${baseClassName}-item__collapsed`
+/** @internal */
+export const triggerClassName = `${baseClassName}-expand-trigger`
+/** @internal */
+export const expandMenuClassName = `${baseClassName}-expand-menu`

console/src/main/resources/static/console-fe/src/vendors/rc-actions/index.ts

@@ -0,0 +1,27 @@
+import Actions from './actions'
+import { LinkButton, LinkMore } from './linkButton'
+
+export type { IActionsProps } from './actions'
+export type { ILinkButtonProps } from './linkButton'
+
+/**
+ * @public
+ */
+export type IActions = typeof Actions & {
+  LinkButton: typeof LinkButton
+  LinkMore: typeof LinkMore
+}
+
+/**
+ * @public
+ */
+const ExpActions: IActions = Object.assign(Actions, {
+  LinkButton,
+  LinkMore,
+})
+
+export default ExpActions
+
+export { Actions, LinkButton, LinkMore }
+
+export * from './constants'

console/src/main/resources/static/console-fe/src/vendors/rc-actions/linkButton.tsx

@@ -0,0 +1,79 @@
+import React from 'react'
+import { Icon } from '@alicloud/console-components'
+import styled from 'styled-components'
+import { expandMenuClassName, collapsedItemClassName } from './constants'
+import { ILinkButtonProps } from './types/ILinkButtonProps.type'
+export type { ILinkButtonProps }
+
+/**
+ * looks like a link
+ * @internal
+ */
+export const SLinkButton = styled.button<{ disabled?: boolean }>`
+  /* reset button style */
+  background: transparent;
+  border: none;
+  padding: 0;
+  line-height: inherit;
+
+  display: inline-flex;
+  align-items: center;
+  color: ${({ disabled }) => (disabled ? '#c1c1c1' : '#0070cc')};
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  &:hover {
+    text-decoration: ${({ disabled }) => (disabled ? 'none' : 'underline')};
+  }
+  /* 在下拉菜单中的SLinkButton，不应该展示下划线，字体颜色也不应该是蓝色 */
+  .${expandMenuClassName} .${collapsedItemClassName} && {
+    color: ${({ disabled }) => (disabled ? '#c1c1c1' : '#333333')};
+    text-decoration: none;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
+    &:after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+    }
+  }
+`
+
+/**
+ * @public
+ */
+export const LinkButton: React.FC<
+    React.HTMLProps<HTMLSpanElement> & ILinkButtonProps & { [key: string]: any }
+  > = ({ children, onClick, disabled, Component, ...props }) => {
+    return (
+      <SLinkButton
+        {...(props as any)}
+        as={Component}
+        disabled={disabled}
+        onClick={(e) => {
+          if (!disabled && typeof onClick === 'function') onClick(e)
+        }}
+      >
+        {children}
+      </SLinkButton>
+    )
+  }
+;(LinkButton as any).__windType = 'LinkButton'
+
+/**
+ * @public
+ */
+export const LinkMore: React.FC<React.HTMLProps<HTMLSpanElement>> = ({
+                                                                       children,
+                                                                       ...props
+                                                                     }) => {
+  return (
+    <LinkButton {...props}>
+      {children}
+      <Icon type="caret-down" size="xs" />
+    </LinkButton>
+  )
+}