DOCSEARCHbyAlgolia
Submit Docs

shineout

repository·master·Indexed 21 days ago

https://github.com/sheinsight/shineout

A high-performance React component library (version 2.0.32-beta.9) designed for building complex interfaces such as intelligent forms and high-performance data tables. It features a concise API, support for multiple themes including a default and Ant Design style theme, and utility classes like Datum.Form for form data processing and Datum.List for managing array-based data.

Tokens
42K
Snippets
143
Records
251
Agent score
75%

What's inside shineout

  1. Use the Message component for operational feedback

    master

    The Message component is used to display operational feedback to users. It supports four distinct types of feedback:

    • success: For positive outcomes or completed actions.
    • warnings: For non-critical issues or cautionary information.
    • errors: For failed actions or critical issues.
    • general: For standard informational messages.

    It is designed to be an immersive, lightweight, and customizable interactive experience that can be used in multiple locations within an application.

  2. Use the Message component for operation feedback

    master

    The Message component is used to display operational feedback information to users. It is a lightweight component designed for multi-position display with customizable disappearance times, providing an immersive interaction experience.

    It supports four distinct message types:

    • Success: For positive feedback or completed operations.
    • Warning: For cautionary information.
    • Error: For failure notifications or critical issues.
    • Info (Regular): For general information or status updates.

  3. Use Datum.List to process array values

    master

    The Datum.List class is an auxiliary utility designed to process and manage array-based data. It allows you to transform raw data objects into specific formats (like strings or specific keys), manage selections, and handle value changes via callbacks. It is particularly useful for managing multi-select or single-select data sets where the underlying data structure differs from the displayed or stored value.

    const data = {
  red: { id: 1, name: 'red' },
  orange: { id: 2, name: 'orange' },
  // ...
};

// Datum.List would then be used to manage selections from this data object.

  4. Use Form.FieldSet for nested data and validation

    master

    In version 1.2.0, Form.FieldSet was introduced as a replacement for Form.Block, Form.BlockField, and Form.Loop.

    When dealing with multi-layer nested data, Form.FieldSet flattens the data into a single-level array for processing. This makes it significantly easier to perform operations on errors and prepares the form for linked validation (联动校验).

  10. Understand the Form component architecture

    master

    The Form component is a composite system designed to manage complex form states, layouts, and validations. It is composed of several specialized sub-components:

    • Form: The root container for the form.
    • Form.Item: Used for layout, displaying labels, and showing hint/error messages.
    • Form.Field: Handles custom components, implements rules validation, and manages data storage.
    • Form.FieldSet: Used to group a set of related fields.
    • Form.Flow: Manages data streams for handling field interdependencies (data linkage/联动).
    • Form.Submit: A shortcut for the submit button. Using this component enables the Enter key to trigger form submission.
    • Form.Reset: A shortcut for the reset button.
    • Form.Button: Similar to a standard button, but unlike Form.Submit, using this component prevents the Enter key from triggering form submission.

  11. How the Classname utility works

    master

    The classname utility is used to isolate CSS code by applying a naming convention of prefix-moduleName-className. It is designed to support both standard CSS and CSS Modules by automatically prefixing class names and mapping them to hashed identifiers when CSS Modules are enabled.

    Naming Convention

    By default, the utility follows the pattern: prefix-moduleName-className.

    Key Behaviors

    • Prefixing: Every class name passed to the generated function is prefixed with the configured prefix and the provided module name.
    • The Underscore Placeholder: Passing an underscore '_' as an argument acts as a placeholder for the base module class (e.g., prefix-moduleName).
    • CSS Modules Support: If config.cssModule is enabled, the utility looks up the generated class name within the provided style object (the object returned by css-loader) to retrieve the actual hashed class name used in the DOM.
    import genaration from 'src/utils/classname'
const alertClass = genaration(require('src/styles/alert.less'), 'alert', 'shineout')

// Example usage:
const classes = alertClass('_', 'success', 'show')
// Result (Standard CSS): 'shineout-alert shineout-alert-success shineout-alert-show'
// Result (CSS Modules): 'shineout-alert-xxxxx shineout-alert-success-xxxxx shineout-alert-show-xxxxx'