commonUI - UI Component Library

Overview

CommonUI API is a component UI library designed for the low-code engine. Plugins built with it stay consistent and compatible across projects and theme switches.

Component List

Tip

Tooltip component

Parameter	Description	Type	Default
className	className	string (optional)
children	Tip content	IPublicTypeI18nData | ReactNode
direction	Tip direction	'top' | 'bottom' | 'left' | 'right'

HelpTip

Tooltip component with a help icon

Parameter	Description	Type	Default
help	Description	IPublicTypeHelpTipConfig
direction	Direction	IPublicTypeTipConfig['direction']	'top'
size	Size	IconProps['size']	'small'

Title

Title component

Parameter	Description	Type	Default
title	Title content	IPublicTypeTitleContent
className	className	string (optional)
onClick	Click handler	() => void (optional)

ContextMenu

Parameter	Description	Type	Default
menus	Array of context menu actions	IPublicTypeContextMenuAction[]
children	Child elements	React.ReactElement[]

IPublicTypeContextMenuAction Interface

Parameter	Description	Type	Default
name	Unique identifier for the action	string
title	Display title, can be a string or internationalized data	string | IPublicTypeI18nData (optional)
type	Menu item type	IPublicEnumContextMenuType (optional)	IPublicEnumContextMenuType.MENU_ITEM
action	Action to execute on click, optional	(nodes: IPublicModelNode[]) => void (optional)
items	Sub-menu items or function to generate child nodes, optional; only two levels supported	Omit<IPublicTypeContextMenuAction, 'items'>[] | ((nodes: IPublicModelNode[]) => Omit<IPublicTypeContextMenuAction, 'items'>[]) (optional)
condition	Function to determine display condition	(nodes: IPublicModelNode[]) => boolean (optional)
disabled	Function to determine disabled condition, optional	(nodes: IPublicModelNode[]) => boolean (optional)

ContextMenu Example

const App = () => {
  const menuItems: IPublicTypeContextMenuAction[] = [
    {
      name: 'a',
      title: 'Option 1',
      action: () => console.log('Option 1 clicked'),
    },
    {
      name: 'b',
      title: 'Option 2',
      action: () => console.log('Option 2 clicked'),
    },
  ];

  const ContextMenu = ctx.commonUI.ContextMenu;

  return (
    <div>
      <ContextMenu menus={menuItems}>
        <div>Right-click here</div>
      </ContextMenu>
    </div>
  );
};

export default App;

ContextMenu.create Example

const App = () => {
  const menuItems: IPublicTypeContextMenuAction[] = [
    {
      name: 'a',
      title: 'Option 1',
      action: () => console.log('Option 1 clicked'),
    },
    {
      name: 'b',
      title: 'Option 2',
      action: () => console.log('Option 2 clicked'),
    },
  ];

  const ContextMenu = ctx.commonUI.ContextMenu;

  return (
    <div>
      <div
        onClick={(e) => {
          ContextMenu.create(menuItems, e);
        }}
      >
        Click here
      </div>
    </div>
  );
};

export default App;

Balloon

See: Balloon Documentation

Breadcrumb

See: Breadcrumb Documentation

Button

See: Button Documentation

Card

See: Card Documentation

Checkbox

See: Checkbox Documentation

DatePicker

See: DatePicker Documentation

Dialog

See: Dialog Documentation

Dropdown

See: Dropdown Documentation

Form

See: Form Documentation

Icon

See: Icon Documentation

Icons supported by the engine default theme: https://fusion.design/64063/component/icon?themeid=20133

Input

See: Input Documentation

Loading

See: Loading Documentation

Message

See: Message Documentation

Overlay

See: Overlay Documentation

Pagination

See: Pagination Documentation

Radio

See: Radio Documentation

Search

See: Search Documentation

Select

See: Select Documentation

SplitButton

See: SplitButton Documentation

Step

See: Step Documentation

Switch

See: Switch Documentation

Tab

See: Tab Documentation

Table

See: Table Documentation

Tree

See: Tree Documentation

TreeSelect

See: TreeSelect Documentation

Upload

See: Upload Documentation

Divider

See: Divider Documentation

Notes

If you need other components, please open an issue.