d2coreui

Reusable React components of the Ipesoft D2000 HTML5 UI, built on antd 5 and ag-grid 34: data grid, date/time and duration inputs, masked inputs, draggable modal dialogs, color pickers and smaller helpers.

The components are D2000-agnostic UI; they rely on d2core for localization and date/time handling.

Installation

npm install d2coreui d2core react@18 react-dom@18

antd, ag-grid, dayjs and the other libraries the components use are regular dependencies of the package. React and React DOM (18) are provided by the application. The package is published as ES modules with TypeScript declarations.

Setup

1. Locale - set the language once at startup, before rendering. It also calls LocaleHolder.setLocale of d2core and loads the component translations (sk, cs, uk; other languages use the built-in English texts).
2. Modal provider - render DraggableModalProvider around the application; ModalDialog and the dialogs of other components throw without it.
3. Styles - components import their own CSS, so the bundler needs a CSS loader. Global styles are optional: d2coreui/style/index.less (less, includes antd/dist/reset.css), d2coreui/style/loading.css, d2coreui/style/splitPane/splitPane.css and d2coreui/style/flexLayout/flexLayout.scss (sass).

import {createRoot} from "react-dom/client";
import {ComponentsLocaleHolder} from "d2coreui/i18n/componentsLocaleHolder";
import {DraggableModalProvider} from "d2coreui/components/modal/draggableModalProvider";

await ComponentsLocaleHolder.setLocale("sk", "sk-SK");

createRoot(document.getElementById("root")!).render(
    <DraggableModalProvider>
        <App/>
    </DraggableModalProvider>
);

Bundler notes

• The grid export (CSV, TXT, PDF, clipboard) runs in web workers created as new Worker(new URL(..., import.meta.url))
  • Vite and webpack 5 handle this natively. A webpack application emitting its chunks into a subdirectory needs output.publicPath: "auto".
• With Vite, add node_modules/d2coreui/components/grid/export/worker/*.js to optimizeDeps.entries, otherwise the CommonJS dependencies of the workers (threads, pdfmake, lodash) are not pre-bundled in dev mode.

Host integration

Some components call into the hosting application (saving grid configuration, reloading the window, saving exported files). The default PlatformSpecific is a browser-only fallback; replace it at startup to customize the behavior:

import PlatformSpecific from "d2coreui/components/platformSpecific";

class MyPlatformSpecific extends PlatformSpecific {
    getCurrentWindowName() {
        return "Alarms";
    }
}

PlatformSpecific.INSTANCE = new MyPlatformSpecific();

Usage

There is no index module - import each component by its path. Every exported component, its props and public methods are documented with JSDoc, so your editor shows the details on hover.

import {useState} from "react";
import {Dayjs} from "dayjs";
import DateTimeInput from "d2coreui/components/date/dateTimeInput";
import {ModalDialog, ModalDialogMode} from "d2coreui/components/modal/modalDialog";
import {LocaleHolder} from "d2core/i18n/localeHolder";

function Example() {
    const [value, setValue] = useState<Dayjs | null>(null);
    return <DateTimeInput mask={LocaleHolder.getDateTimeFormat(true, true)} value={value} onChange={setValue} allowClear/>;
}

ModalDialog.confirm({
    mode: ModalDialogMode.YES_NO,
    title: "Delete the record?",
    onOk: () => deleteRecord(),
});

Components

All paths are relative to d2coreui/components/.

Data grid

| Module | Contents | |---|---| | grid/dataGrid | DataGrid - ag-grid based table with D2000 column types, paging, search, toolbar, export and settings menus, row styling, keyboard navigation. | | grid/extendedDataGrid | ExtendedDataGrid - DataGrid with filter and detail side panels, keeping the whole grid configuration (columns, paging, row styles) as one object reported through onChangeConfiguration; applies pushed record changes. | | grid/cell/*CellEditor | ag-grid cell editors: text, number, big number (64-bit), duration, date, hexadecimal value / octet string, enumeration, status text. | | grid/cell/tableDefaultRowStyleRules | RowStyleRule, GridRowStyle and the default row style rules. | | grid/config/* | Table configuration UI: DataGridEditor, ColumnTransfer, RowStylePicker, row height helpers. | | grid/filter/* | Column filters and WildcardQuickFilterEngine (* / ? quick filter). | | grid/export/contextMenu | getContextMenu - row context menu with export (CSV, TXT, PDF, clipboard). | | grid/export/progressPopup | Export progress notification. | | grid/header/simpleHeader, grid/panel/*, grid/detail/* | Header, pagination, overlay and detail panel components used by the grids. | | grid/columnUtils | ColumnUtils.mergeColumnsState. |

Date and time

| Module | Contents | |---|---| | date/dateTimeInput | DateTimeInput - masked date-time input with a calendar popup, stepping by arrow keys and mouse wheel, DST-aware UTC offset field. | | date/dateRangeInput | DateRangeInput - from/to range input with predefined and saved intervals, time shift and an advanced panel. | | date/dateRangeInputConfirm | DateRangeInputConfirm - DateRangeInput whose changes are applied by a confirm button. | | date/durationInput | DurationInput - masked duration input (d2core/dayjs durations). | | date/savedIntervals, date/savedIntervalsDialog | User-defined intervals: model, storage and management dialog. |

Inputs and pickers

| Module | Contents | |---|---| | input/maskedInput | MaskedInput - antd input with an editable mask (input/mask/* holds the mask engine). | | input/autoCompleteInput | AutoCompleteInput - text input with a history dropdown. | | input/simpleAutoComplete | SimpleAutoComplete - antd AutoComplete with a clearable input and options opened by a dropdown arrow. | | input/passwordInput | PasswordInput - password input that reveals the password only while the eye icon is held down. | | input/hexaFormattedInput | HexaFormattedInput - input accepting hexadecimal digits only, normalized on blur. | | input/textarea/mentionsWithHighlighting | MentionsWithHighlighting - antd Mentions textarea with highlighted parts of the text. | | input/draftUtils | DraftUtils - helpers for Draft.js / Draftail rich-text content. | | picker/enumValuePicker | EnumValuePicker - antd Select offering the values of an enum. | | color/colorPicker, color/colorSwatch, color/colorUtils | Color picker, color swatch and color helpers. |

Dialogs, layout and utilities

| Module | Contents | |---|---| | modal/modalDialog | ModalDialog - draggable, resizable antd modal with button sets (ModalDialogMode) and static confirm, info, success, error, delete. | | modal/draggableModalProvider | DraggableModalProvider - required ancestor of draggable dialogs. | | form/NiceFormItem | NiceFormItem - antd Form.Item with a floating label. | | table/dragSortingTable | DragSortingTable - antd Table with rows reordered by drag and drop. | | collapse/expandable | Expandable - section with animated collapsible extra content. | | scrollTo/scrollTo | ScrollTo, ScrollToItem - keyboard-navigable list with type-ahead search. | | text/textFit | TextFit - fits text to its container by adjusting the font size. | | codemirror/SyntaxHighlighter | SyntaxHighlighter - read-only syntax highlighting by CodeMirror runMode (no editor instance). | | icons/* | DropdownArrow, UndoIcon. | | style/withCss | WithCss - lets class components use antd-style createStyles hooks. | | clipboard/clipboardUtils, keyboard/keyboardUtils | Clipboard and keyboard helpers. | | platformSpecific | PlatformSpecific - host integration hooks (see above). |

Changelog

See CHANGELOG.md.