website·Indexed 31 days ago
https://acux.netlify.app/A comprehensive React UI framework consisting of acud and acu-react-common. It provides a wide array of components including data input (DatePicker, Cascader, ColorPicker), navigation (Menu, Breadcrumb, Pagination), and layout systems (Grid, Layout, Space). The library also includes a suite of utility tools for cookies, time, files, and browser environments, as well as specialized React hooks like useList, useFetch, and useForm for streamlined data fetching and form management.
The LabelBox component provides functionality for image panning and zooming, displaying annotation boxes with labels, and performing online annotation and editing.
Key Note: The coordinate system origin (0, 0) is located at the center of the container.
useInterval is a hook used to execute a callback function at a regular time interval. It remains active as long as the component using the hook exists, regardless of hook refreshes. By default, it starts immediately upon creation, but it can be deferred using the abort parameter.mode to drawPolygon. You can also configure an eagleMap (mini-map) to provide a zoomed-out overview of the image and grid.<LabelBox.LabelBox
mode="drawPolygon"
eagleMap={{
container: 'eaglemap',
grid: {
rowCount: 5,
columnCount: 5,
color: 'blue'
},
size: {
width: 300,
height: 150
}
}}
/>
<div id="eaglemap"></div>Loading component is used to alleviate user anxiety when a local part of the page is in a waiting state. It can be imported from the components object of the baidu-acu-react-common package.import {components} from 'baidu-acu-react-common';
const Loading = components.Loading;
// Basic usage
<Loading />LabelBox from the components object of baidu-acu-react-common. It is used to render an image with interactive labels and supports different modes such as drawRect for drawing rectangles or pan for simple browsing.import {components} from 'baidu-acu-react-common';
const {LabelBox} = components;
// Usage in render
<LabelBox
wrapClassName="label-ocr-container"
image={{
url: 'http://example.com/image.jpg',
width: 500,
height: 334
}}
labels={labels}
mode="drawRect"
onAdd={this.handleAdd}
onRemove={this.handleRemove}
onUpdate={this.handleUpdate}
/>useLatest hook is used to obtain a reference to the current latest value of a provided variable. This is particularly useful inside useEffect or asynchronous callbacks where a closure might otherwise capture a stale value of a state or prop.import { useLatest } from '@baidu/acud-pro-components';
import { useState, useEffect } from 'react';
function App() {
const [count1, setCount1] = useState(0);
const [count2, setCount2] = useState(0);
// latestCountRef always holds the most recent value of count2
const latestCountRef = useLatest(count2);
useEffect(() => {
const interval = setInterval(() => {
// count1 is captured by the closure and remains 0
setCount1(count1 + 1);
// latestCountRef.current always points to the current state of count2
setCount2(latestCountRef.current + 1);
}, 1000);
return () => clearInterval(interval);
}, []);
return (
<>
<p>Non-latest count: {count1}</p>
<p>Latest count: {count2}</p>
</>
);
}ColorPicker component is used for selecting and editing colors, providing more flexibility than a standard dropdown selector.import { ColorPicker } from 'acud';useFetch hook is used to request data. It remains active as long as the component using the hook is mounted. By default, the request is triggered immediately upon hook initialization, but this can be controlled using the abort parameter to manually trigger the request.import { request, useFetch } from 'baidu-acu-react-common';
function App() {
const url = 'https://yapi.baidu-int.com/mock/23714/api/list';
// Define the request action
const action = () => {
return request.post(url);
};
const FetchDemo = () => {
// useFetch returns data and loading state
const { data, loading } = useFetch(action);
const { result, pageNo, pageSize, totalCount } = data || {};
return (
<Table
rowKey="id"
loading={loading}
dataSource={result}
pagination={{ current: pageNo, total: totalCount }}
/>
);
}
return <FetchDemo />;
}acud package.import { Menu } from 'acud';useMemoizedFn is a hook used to persist a function. It is specifically designed to solve the implicit re-rendering issues and closure traps that occur when using useCallback with a dependency array. Unlike useCallback, it allows the function to maintain a stable reference while always accessing the latest state/props without triggering downstream re-renders of memoized components.import { useMemoizedFn } from '@baidu/acud-pro-components';
function App() {
const [count, setCount] = useState(0);
// This function reference remains stable across renders,
// but always captures the current value of 'count'.
const notifyCountFn = useMemoizedFn(() => {
message.success(`count: ${count}`);
});
return (
<div className="acux-demo-column">
<p>count: {count}</p>
<Button onClick={() => setCount(count + 1)}>setCount</Button>
{/* ReRenderCountComp will not re-render when count changes because notifyCountFn is stable */}
<ReRenderCountComp fn={notifyCountFn} />
</div>
);
}components object from the baidu-acu-react-common package.import {components} from 'baidu-acu-react-common';
const Select = components.Select;DatePicker component is used for inputting or selecting dates. It requires moment for date handling.import { DatePicker } from 'acud';
import moment from 'moment';