devextreme-react
Version:
DevExtreme React UI and Visualization Components
474 lines (472 loc) • 16.2 kB
JavaScript
/*!
* devextreme-react
* Version: 24.2.6
* Build date: Mon Mar 17 2025
*
* Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
*
* This software may be modified and distributed under the terms
* of the MIT license. See the LICENSE file in the root of the project for details.
*
* https://github.com/DevExpress/devextreme-react
*/
"use client";
import * as React from "react";
import { memo, forwardRef, useImperativeHandle, useRef, useMemo } from "react";
import dxForm from "devextreme/ui/form";
import { Component as BaseComponent } from "./core/component";
import NestedOption from "./core/nested-option";
const Form = memo(forwardRef((props, ref) => {
const baseRef = useRef(null);
useImperativeHandle(ref, () => ({
instance() {
return baseRef.current?.getInstance();
}
}), [baseRef.current]);
const subscribableOptions = useMemo(() => (["formData"]), []);
const independentEvents = useMemo(() => (["onContentReady", "onDisposing", "onEditorEnterKey", "onInitialized"]), []);
const defaults = useMemo(() => ({
defaultFormData: "formData",
}), []);
const expectedChildren = useMemo(() => ({
ButtonItem: { optionName: "items", isCollectionItem: true },
colCountByScreen: { optionName: "colCountByScreen", isCollectionItem: false },
EmptyItem: { optionName: "items", isCollectionItem: true },
GroupItem: { optionName: "items", isCollectionItem: true },
item: { optionName: "items", isCollectionItem: true },
SimpleItem: { optionName: "items", isCollectionItem: true },
TabbedItem: { optionName: "items", isCollectionItem: true }
}), []);
return (React.createElement((BaseComponent), {
WidgetClass: dxForm,
ref: baseRef,
subscribableOptions,
independentEvents,
defaults,
expectedChildren,
...props,
}));
}));
const _componentAsyncRule = (props) => {
return React.createElement((NestedOption), {
...props,
elementDescriptor: {
OptionName: "validationRules",
IsCollectionItem: true,
PredefinedProps: {
type: "async"
},
},
});
};
const AsyncRule = Object.assign(_componentAsyncRule, {
componentType: "option",
});
const _componentButtonItem = (props) => {
return React.createElement((NestedOption), {
...props,
elementDescriptor: {
OptionName: "items",
IsCollectionItem: true,
ExpectedChildren: {
buttonOptions: { optionName: "buttonOptions", isCollectionItem: false }
},
PredefinedProps: {
itemType: "button"
},
},
});
};
const ButtonItem = Object.assign(_componentButtonItem, {
componentType: "option",
});
const _componentButtonOptions = (props) => {
return React.createElement((NestedOption), {
...props,
elementDescriptor: {
OptionName: "buttonOptions",
TemplateProps: [{
tmplOption: "template",
render: "render",
component: "component"
}],
},
});
};
const ButtonOptions = Object.assign(_componentButtonOptions, {
componentType: "option",
});
const _componentColCountByScreen = (props) => {
return React.createElement((NestedOption), {
...props,
elementDescriptor: {
OptionName: "colCountByScreen",
},
});
};
const ColCountByScreen = Object.assign(_componentColCountByScreen, {
componentType: "option",
});
const _componentCompareRule = (props) => {
return React.createElement((NestedOption), {
...props,
elementDescriptor: {
OptionName: "validationRules",
IsCollectionItem: true,
PredefinedProps: {
type: "compare"
},
},
});
};
const CompareRule = Object.assign(_componentCompareRule, {
componentType: "option",
});
const _componentCustomRule = (props) => {
return React.createElement((NestedOption), {
...props,
elementDescriptor: {
OptionName: "validationRules",
IsCollectionItem: true,
PredefinedProps: {
type: "custom"
},
},
});
};
const CustomRule = Object.assign(_componentCustomRule, {
componentType: "option",
});
const _componentEmailRule = (props) => {
return React.createElement((NestedOption), {
...props,
elementDescriptor: {
OptionName: "validationRules",
IsCollectionItem: true,
PredefinedProps: {
type: "email"
},
},
});
};
const EmailRule = Object.assign(_componentEmailRule, {
componentType: "option",
});
const _componentEmptyItem = (props) => {
return React.createElement((NestedOption), {
...props,
elementDescriptor: {
OptionName: "items",
IsCollectionItem: true,
PredefinedProps: {
itemType: "empty"
},
},
});
};
const EmptyItem = Object.assign(_componentEmptyItem, {
componentType: "option",
});
const _componentGroupItem = (props) => {
return React.createElement((NestedOption), {
...props,
elementDescriptor: {
OptionName: "items",
IsCollectionItem: true,
ExpectedChildren: {
colCountByScreen: { optionName: "colCountByScreen", isCollectionItem: false }
},
TemplateProps: [{
tmplOption: "captionTemplate",
render: "captionRender",
component: "captionComponent"
}, {
tmplOption: "template",
render: "render",
component: "component"
}],
PredefinedProps: {
itemType: "group"
},
},
});
};
const GroupItem = Object.assign(_componentGroupItem, {
componentType: "option",
});
const _componentItem = (props) => {
return React.createElement((NestedOption), {
...props,
elementDescriptor: {
OptionName: "items",
IsCollectionItem: true,
ExpectedChildren: {
AsyncRule: { optionName: "validationRules", isCollectionItem: true },
buttonOptions: { optionName: "buttonOptions", isCollectionItem: false },
colCountByScreen: { optionName: "colCountByScreen", isCollectionItem: false },
CompareRule: { optionName: "validationRules", isCollectionItem: true },
CustomRule: { optionName: "validationRules", isCollectionItem: true },
EmailRule: { optionName: "validationRules", isCollectionItem: true },
label: { optionName: "label", isCollectionItem: false },
NumericRule: { optionName: "validationRules", isCollectionItem: true },
PatternRule: { optionName: "validationRules", isCollectionItem: true },
RangeRule: { optionName: "validationRules", isCollectionItem: true },
RequiredRule: { optionName: "validationRules", isCollectionItem: true },
StringLengthRule: { optionName: "validationRules", isCollectionItem: true },
tab: { optionName: "tabs", isCollectionItem: true },
tabPanelOptions: { optionName: "tabPanelOptions", isCollectionItem: false },
validationRule: { optionName: "validationRules", isCollectionItem: true }
},
TemplateProps: [{
tmplOption: "tabTemplate",
render: "tabRender",
component: "tabComponent"
}, {
tmplOption: "template",
render: "render",
component: "component"
}, {
tmplOption: "captionTemplate",
render: "captionRender",
component: "captionComponent"
}],
},
});
};
const Item = Object.assign(_componentItem, {
componentType: "option",
});
const _componentLabel = (props) => {
return React.createElement((NestedOption), {
...props,
elementDescriptor: {
OptionName: "label",
TemplateProps: [{
tmplOption: "template",
render: "render",
component: "component"
}],
},
});
};
const Label = Object.assign(_componentLabel, {
componentType: "option",
});
const _componentNumericRule = (props) => {
return React.createElement((NestedOption), {
...props,
elementDescriptor: {
OptionName: "validationRules",
IsCollectionItem: true,
PredefinedProps: {
type: "numeric"
},
},
});
};
const NumericRule = Object.assign(_componentNumericRule, {
componentType: "option",
});
const _componentPatternRule = (props) => {
return React.createElement((NestedOption), {
...props,
elementDescriptor: {
OptionName: "validationRules",
IsCollectionItem: true,
PredefinedProps: {
type: "pattern"
},
},
});
};
const PatternRule = Object.assign(_componentPatternRule, {
componentType: "option",
});
const _componentRangeRule = (props) => {
return React.createElement((NestedOption), {
...props,
elementDescriptor: {
OptionName: "validationRules",
IsCollectionItem: true,
PredefinedProps: {
type: "range"
},
},
});
};
const RangeRule = Object.assign(_componentRangeRule, {
componentType: "option",
});
const _componentRequiredRule = (props) => {
return React.createElement((NestedOption), {
...props,
elementDescriptor: {
OptionName: "validationRules",
IsCollectionItem: true,
PredefinedProps: {
type: "required"
},
},
});
};
const RequiredRule = Object.assign(_componentRequiredRule, {
componentType: "option",
});
const _componentSimpleItem = (props) => {
return React.createElement((NestedOption), {
...props,
elementDescriptor: {
OptionName: "items",
IsCollectionItem: true,
ExpectedChildren: {
AsyncRule: { optionName: "validationRules", isCollectionItem: true },
CompareRule: { optionName: "validationRules", isCollectionItem: true },
CustomRule: { optionName: "validationRules", isCollectionItem: true },
EmailRule: { optionName: "validationRules", isCollectionItem: true },
label: { optionName: "label", isCollectionItem: false },
NumericRule: { optionName: "validationRules", isCollectionItem: true },
PatternRule: { optionName: "validationRules", isCollectionItem: true },
RangeRule: { optionName: "validationRules", isCollectionItem: true },
RequiredRule: { optionName: "validationRules", isCollectionItem: true },
StringLengthRule: { optionName: "validationRules", isCollectionItem: true },
validationRule: { optionName: "validationRules", isCollectionItem: true }
},
TemplateProps: [{
tmplOption: "template",
render: "render",
component: "component"
}],
PredefinedProps: {
itemType: "simple"
},
},
});
};
const SimpleItem = Object.assign(_componentSimpleItem, {
componentType: "option",
});
const _componentStringLengthRule = (props) => {
return React.createElement((NestedOption), {
...props,
elementDescriptor: {
OptionName: "validationRules",
IsCollectionItem: true,
PredefinedProps: {
type: "stringLength"
},
},
});
};
const StringLengthRule = Object.assign(_componentStringLengthRule, {
componentType: "option",
});
const _componentTab = (props) => {
return React.createElement((NestedOption), {
...props,
elementDescriptor: {
OptionName: "tabs",
IsCollectionItem: true,
ExpectedChildren: {
colCountByScreen: { optionName: "colCountByScreen", isCollectionItem: false }
},
TemplateProps: [{
tmplOption: "tabTemplate",
render: "tabRender",
component: "tabComponent"
}, {
tmplOption: "template",
render: "render",
component: "component"
}],
},
});
};
const Tab = Object.assign(_componentTab, {
componentType: "option",
});
const _componentTabbedItem = (props) => {
return React.createElement((NestedOption), {
...props,
elementDescriptor: {
OptionName: "items",
IsCollectionItem: true,
ExpectedChildren: {
tab: { optionName: "tabs", isCollectionItem: true },
tabPanelOptions: { optionName: "tabPanelOptions", isCollectionItem: false }
},
PredefinedProps: {
itemType: "tabbed"
},
},
});
};
const TabbedItem = Object.assign(_componentTabbedItem, {
componentType: "option",
});
const _componentTabPanelOptions = (props) => {
return React.createElement((NestedOption), {
...props,
elementDescriptor: {
OptionName: "tabPanelOptions",
DefaultsProps: {
defaultItems: "items",
defaultSelectedIndex: "selectedIndex",
defaultSelectedItem: "selectedItem"
},
ExpectedChildren: {
item: { optionName: "items", isCollectionItem: true },
tabPanelOptionsItem: { optionName: "items", isCollectionItem: true }
},
TemplateProps: [{
tmplOption: "itemTemplate",
render: "itemRender",
component: "itemComponent"
}, {
tmplOption: "itemTitleTemplate",
render: "itemTitleRender",
component: "itemTitleComponent"
}],
},
});
};
const TabPanelOptions = Object.assign(_componentTabPanelOptions, {
componentType: "option",
});
const _componentTabPanelOptionsItem = (props) => {
return React.createElement((NestedOption), {
...props,
elementDescriptor: {
OptionName: "items",
IsCollectionItem: true,
TemplateProps: [{
tmplOption: "tabTemplate",
render: "tabRender",
component: "tabComponent"
}, {
tmplOption: "template",
render: "render",
component: "component"
}],
},
});
};
const TabPanelOptionsItem = Object.assign(_componentTabPanelOptionsItem, {
componentType: "option",
});
const _componentValidationRule = (props) => {
return React.createElement((NestedOption), {
...props,
elementDescriptor: {
OptionName: "validationRules",
IsCollectionItem: true,
PredefinedProps: {
type: "required"
},
},
});
};
const ValidationRule = Object.assign(_componentValidationRule, {
componentType: "option",
});
export default Form;
export { Form, AsyncRule, ButtonItem, ButtonOptions, ColCountByScreen, CompareRule, CustomRule, EmailRule, EmptyItem, GroupItem, Item, Label, NumericRule, PatternRule, RangeRule, RequiredRule, SimpleItem, StringLengthRule, Tab, TabbedItem, TabPanelOptions, TabPanelOptionsItem, ValidationRule };