DOCSEARCHbyAlgolia
Submit Docs

Choerodon UI

repository·master·Indexed 43 days ago

https://github.com/open-hand/choerodon-ui

An enterprise-class UI design language and React-based component library version 1.6.8 designed for medium and backstage enterprise products. It provides standard and 'pro' components, a pre-configured Axios instance for JSON API communication, an LRU Cache class with TTL support, and a DataSet component for managing data mapping, lookups, and attachments.

Tokens
650.4K
Snippets
1.5K
Records
2.1K
Agent score
51%

What's inside Choerodon UI

  8. Use the Upload component

    master

    The Upload component allows users to upload files via selection or drag-and-drop. It supports single or multiple file uploads, folder uploads, and provides visual feedback on the upload progress and status.

    When to use:

    • When you need to upload one or more files.
    • When you need to show the progress of an upload.
    • When you need to support drag-and-drop file uploading.

  10. Use the Lov component for pop-up selection inputs

    master

    The Lov (List of Values) component is a Pro Component used as a form control to provide a pop-up selection interface. It allows users to search for and select records from a list, typically displayed in a modal, drawer, or popup.

    Key Features

    • Multiple View Modes: Supports modal, drawer, and popup via the viewMode prop.
    • Customizable Search: Use searchMatcher to define how searches are performed and searchAction to determine when the search triggers (blur or input).
    • Selection Logic: Control how items are selected and displayed using autoSelectSingle, showCheckedStrategy, and selectionProps.
    • Lifecycle Hooks: Use onBeforeSelect to intercept and validate selections before the dialog closes.

    Usage Note

    Developers should be cautious when modifying properties that have higher priority than view configuration to avoid inconsistencies.

    // Example of basic Lov configuration
<Lov
  mode="default"
  viewMode="modal"
  searchAction="input"
  onBeforeSelect={(records) => {
    // Return false or a Promise that resolves(false) to prevent closing the modal
    return true;
  }}
/>

  12. How Form and Form.Item work together

    master

    The Form component manages data collection, validation, and submission. It uses Form.Item to wrap form fields (input controls, select menus, etc.).

    Layout Options:

    • horizontal (default): Label and control are arranged horizontally.
    • vertical: Label and control are arranged vertically.
    • inline: Form items are arranged in a single horizontal line.

    Usage Pattern: Wrap your input components with <Form.Item />. For automatic generation of help, required, and validateStatus, ensure each Form.Item contains exactly one child that has been registered via getFieldDecorator.

    <Form layout="vertical">
  <Form.Item label="Username">
    {/* The child here must be decorated with getFieldDecorator */}
    <Input />
  </Form.Item>
</Form>