### Basic Spin Usage
Source: https://github.com/secondarycoder/h0-front/blob/main/Spin.md
A simple example demonstrating the basic loading state of the Spin component.
```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import { Spin } from 'choerodon-ui/pro';
ReactDOM.render(, document.getElementById('container'));
```
--------------------------------
### JavaScript Example with DataSet and UI Components
Source: https://github.com/secondarycoder/h0-front/blob/main/DataSet_Example.md
This example demonstrates the integration of DataSet with various UI components like Form, Table, and SelectBox. It includes data initialization, JSON formatting, and state management for UI interactions. It requires importing React, ReactDOM, and specific components from choerodon-ui/pro, along with MobX actions and formatters.
```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import {
Button,
DataSet,
Form,
Table,
SelectBox,
CodeArea,
Row,
Col,
} from 'choerodon-ui/pro';
import { action } from 'mobx';
// 引入格式化器
import JSONFormatter from 'choerodon-ui/pro/lib/code-area/formatters/JSONFormatter';
// 引入 json lint
import 'choerodon-ui/pro/lib/code-area/lint/json';
// 处理 codemirror 的SSR问题， 如无需SSR，请用import代替require;
import 'codemirror/mode/javascript/javascript';
const data = [
{
id: '1',
code: 'code1',
name: 'name1',
number: 30,
date_multiple_range: [
['1984-11-22', '1985-07-01'],
['2020-11-22', '2021-07-01'],
],
jsonData: JSON.stringify({
view: [
{ id: 'id1-1', code: 'code1-1', name: 'view1-1' },
{ id: 'id1-2', code: 'code1-2', name: 'view1-2' },
],
model: [
{ id: 'id1-1', code: 'code1-1', name: 'model1-1' },
{ id: 'id1-2', code: 'code1-2', name: 'model1-2' },
],
}),
},
{
id: '2',
code: 'code2',
name: 'name2',
number: 30,
jsonData: JSON.stringify({
view: [
{ id: 'id2-1', code: 'code2-1', name: 'view2-1' },
{ id: 'id2-2', code: 'code2-2', name: 'view2-2' },
],
model: [
{ id: 'id2-1', code: 'code2-1', name: 'model2-1' },
{ id: 'id2-2', code: 'code2-2', name: 'model2-2' },
],
}),
},
];
const json = JSON.stringify(data, null, 2);
const jsonStyle = { height: 400 };
const App = () => {
const [result, setResult] = React.useState();
const [dataToJSON, setDataToJSON] = React.useState('dirty');
const dataToJSONOptions = React.useMemo(
() =>
new DataSet({
data: [
{ value: 'dirty', meaning: 'dirty' },
{ value: 'dirty-field', meaning: 'dirty-field' },
{ value: 'selected', meaning: 'selected' },
{ value: 'all', meaning: 'all' },
{ value: 'normal', meaning: 'normal' },
{ value: 'dirty-self', meaning: 'dirty-self' },
{ value: 'dirty-field-self', meaning: 'dirty-field-self' },
{ value: 'selected-self', meaning: 'selected-self' },
{ value: 'all-self', meaning: 'all-self' },
{ value: 'normal-self', meaning: 'normal-self' },
],
}),
[]
```
--------------------------------
### Spin with Custom Indicator
Source: https://github.com/secondarycoder/h0-front/blob/main/Spin.md
Demonstrates how to use a custom indicator for the Spin component. This example shows small, default, and large Spin components with a custom 'c7nIcon' indicator.
```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import { Spin } from 'choerodon-ui/pro';
const c7nIcon = (
);
ReactDOM.render(
,
document.getElementById('container'),
);
```
--------------------------------
### Layout Structure Example
Source: https://github.com/secondarycoder/h0-front/blob/main/Layout.md
This JSX snippet illustrates a basic layout structure comprising a header, a main content area, and two sidebars (left and right).
```jsx
headerleft sidebarmain contentright sidebar
```
--------------------------------
### Basic Form Usage
Source: https://github.com/secondarycoder/h0-front/blob/main/Form.md
Demonstrates the basic setup of a Form component with various input fields like TextField, Password, NumberField, and Select. Includes custom validators and renderers for validation messages.
```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import {
Form,
TextField,
Password,
NumberField,
EmailField,
UrlField,
DatePicker,
Select,
SelectBox,
Button,
Menu,
Dropdown,
Icon,
} from 'choerodon-ui/pro';
const { Option } = Select;
function passwordValidator(value, name, form) {
if (value !== form.getField('password').getValue()) {
return '您两次输入的密码不一致，请重新输入';
}
return true;
}
function validationRenderer(error, props) {
if (error.ruleName === 'valueMissing' && props.name === 'password') {
return (
{error.validationMessage}(自定义)
);
}
}
const menu = (