@syncfusion/ej2-react-form-builder 0.1.0-beta → 35.1.37
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +81 -36
- package/diConfig.json +148 -0
- package/dist/ej2-react-form-builder.min.js +10 -0
- package/dist/ej2-react-form-builder.umd.min.js +11 -0
- package/dist/ej2-react-form-builder.umd.min.js.map +1 -0
- package/dist/es6/ej2-react-form-builder.es2015.js +60 -0
- package/dist/es6/ej2-react-form-builder.es2015.js.map +1 -0
- package/form-builder.d.ts +4 -0
- package/form-builder.js +4 -0
- package/index.d.ts +2 -4
- package/index.js +2 -4
- package/license +6 -13
- package/package.json +19 -43
- package/src/form-builder/formbuilder.component.d.ts +37 -0
- package/src/form-builder/formbuilder.component.js +50 -0
- package/src/form-builder/index.d.ts +2 -0
- package/src/form-builder/index.js +2 -0
- package/src/form-builder/toolboxitems-directive.d.ts +28 -0
- package/src/form-builder/toolboxitems-directive.js +47 -0
- package/src/global.js +1 -0
- package/src/index.d.ts +2 -16
- package/src/index.js +2 -6
- package/Common/CheckboxGroup.d.ts +0 -13
- package/Common/CheckboxGroup.js +0 -50
- package/Common/ConditionalRuleEngine.d.ts +0 -296
- package/Common/ConditionalRuleEngine.js +0 -566
- package/Common/CustomTabComponent.d.ts +0 -17
- package/Common/CustomTabComponent.js +0 -30
- package/Common/CustomValidationEngine.d.ts +0 -58
- package/Common/CustomValidationEngine.js +0 -146
- package/Common/DataGridComponent.d.ts +0 -20
- package/Common/DataGridComponent.js +0 -273
- package/Common/FormValidator.d.ts +0 -485
- package/Common/FormValidator.js +0 -575
- package/Common/MinMaxRuleEngine.d.ts +0 -105
- package/Common/MinMaxRuleEngine.js +0 -365
- package/Common/StaticHtmlRenderer.d.ts +0 -14
- package/Common/StaticHtmlRenderer.js +0 -24
- package/Common/expressions/DependencyTracker.d.ts +0 -30
- package/Common/expressions/DependencyTracker.js +0 -128
- package/Common/expressions/ExpressionEngine.d.ts +0 -95
- package/Common/expressions/ExpressionEngine.js +0 -506
- package/Common/expressions/ExpressionParser.d.ts +0 -41
- package/Common/expressions/ExpressionParser.js +0 -269
- package/Common/expressions/useGridExpressions.d.ts +0 -12
- package/Common/expressions/useGridExpressions.js +0 -71
- package/Common/globalFormId.d.ts +0 -26
- package/Common/globalFormId.js +0 -45
- package/Common/json-converter.d.ts +0 -444
- package/Common/json-converter.js +0 -1184
- package/Common/parser.d.ts +0 -98
- package/Common/parser.js +0 -753
- package/Common/utils.d.ts +0 -130
- package/Common/utils.js +0 -574
- package/src/FormBuilder.d.ts +0 -211
- package/src/FormBuilder.js +0 -1299
- package/src/components/Database/ConnectionForm.d.ts +0 -8
- package/src/components/Database/ConnectionForm.js +0 -28
- package/src/components/TopBar.d.ts +0 -10
- package/src/components/TopBar.js +0 -7
- package/src/components/icons/ComponentIcons.d.ts +0 -44
- package/src/components/icons/ComponentIcons.js +0 -40
- package/src/components/layout/FormFieldWrapper.d.ts +0 -41
- package/src/components/layout/FormFieldWrapper.js +0 -112
- package/src/components/layout/LeftPane.d.ts +0 -23
- package/src/components/layout/LeftPane.js +0 -310
- package/src/components/layout/ListBoxPane.d.ts +0 -24
- package/src/components/layout/ListBoxPane.js +0 -94
- package/src/components/layout/MainSection.d.ts +0 -39
- package/src/components/layout/MainSection.js +0 -1766
- package/src/components/layout/Preview.d.ts +0 -12
- package/src/components/layout/Preview.js +0 -337
- package/src/components/layout/RightPane.d.ts +0 -22
- package/src/components/layout/RightPane.js +0 -370
- package/src/components/theme/ThemeSwitcher.d.ts +0 -14
- package/src/components/theme/ThemeSwitcher.js +0 -24
- package/src/components/theme/theme-constant.d.ts +0 -37
- package/src/components/theme/theme-constant.js +0 -23
- package/src/config/component-properties.json +0 -4929
- package/src/config/form-setting.json +0 -56
- package/src/config/locale.d.ts +0 -449
- package/src/config/locale.js +0 -449
- package/src/context/FormSchemaContext.d.ts +0 -32
- package/src/context/FormSchemaContext.js +0 -155
- package/src/context/LocalizationContext.d.ts +0 -27
- package/src/context/LocalizationContext.js +0 -43
- package/src/context/ThemeContext.d.ts +0 -23
- package/src/context/ThemeContext.js +0 -161
- package/src/context/contexts.d.ts +0 -6
- package/src/context/contexts.js +0 -6
- package/src/context/defaultFormSchema.d.ts +0 -6
- package/src/context/defaultFormSchema.js +0 -20
- package/src/defaultPalette.d.ts +0 -9
- package/src/defaultPalette.js +0 -45
- package/src/defaultTemplate.d.ts +0 -3
- package/src/defaultTemplate.js +0 -185
- package/src/import/schemaImportUtils.d.ts +0 -24
- package/src/import/schemaImportUtils.js +0 -121
- package/src/types/ActionButtons.d.ts +0 -44
- package/src/types/ActionButtons.js +0 -27
- package/src/types/ComponentProperties.d.ts +0 -33
- package/src/types/ComponentProperties.js +0 -2
- package/src/types/FormSchema.d.ts +0 -585
- package/src/types/FormSchema.js +0 -147
- package/src/types/connection.d.ts +0 -19
- package/src/types/connection.js +0 -9
- package/src/utils/AttributesEditor.d.ts +0 -13
- package/src/utils/AttributesEditor.js +0 -117
- package/src/utils/ButtonGroupEditor.d.ts +0 -15
- package/src/utils/ButtonGroupEditor.js +0 -141
- package/src/utils/ChoiceBasedFieldEditor.d.ts +0 -16
- package/src/utils/ChoiceBasedFieldEditor.js +0 -87
- package/src/utils/ClipboardHelper.d.ts +0 -26
- package/src/utils/ClipboardHelper.js +0 -83
- package/src/utils/ColumnBuilder.d.ts +0 -11
- package/src/utils/ColumnBuilder.js +0 -153
- package/src/utils/ColumnSpanEditor.d.ts +0 -8
- package/src/utils/ColumnSpanEditor.js +0 -98
- package/src/utils/ConditionDataEditor.d.ts +0 -29
- package/src/utils/ConditionDataEditor.js +0 -177
- package/src/utils/ConditionalEditorUtils.d.ts +0 -27
- package/src/utils/ConditionalEditorUtils.js +0 -310
- package/src/utils/ConditionsEditor.d.ts +0 -20
- package/src/utils/ConditionsEditor.js +0 -571
- package/src/utils/CustomAccordion.d.ts +0 -13
- package/src/utils/CustomAccordion.js +0 -38
- package/src/utils/CustomValidationEditor.d.ts +0 -11
- package/src/utils/CustomValidationEditor.js +0 -208
- package/src/utils/DataSourceCollector.d.ts +0 -3
- package/src/utils/DataSourceCollector.js +0 -252
- package/src/utils/ExpressionEditor.d.ts +0 -13
- package/src/utils/ExpressionEditor.js +0 -99
- package/src/utils/FormSettingsPanel.d.ts +0 -9
- package/src/utils/FormSettingsPanel.js +0 -60
- package/src/utils/LookupConfig.d.ts +0 -11
- package/src/utils/LookupConfig.js +0 -159
- package/src/utils/MinMaxValueEditor.d.ts +0 -25
- package/src/utils/MinMaxValueEditor.js +0 -188
- package/src/utils/OptionsEditor.d.ts +0 -8
- package/src/utils/OptionsEditor.js +0 -79
- package/src/utils/PropertyRenderer.d.ts +0 -22
- package/src/utils/PropertyRenderer.js +0 -210
- package/src/utils/ValueRenderer.d.ts +0 -2
- package/src/utils/ValueRenderer.js +0 -91
- package/src/utils/ej2DbAdaptor.d.ts +0 -6
- package/src/utils/ej2DbAdaptor.js +0 -38
- package/src/utils/mappingHeuristics.d.ts +0 -10
- package/src/utils/mappingHeuristics.js +0 -33
- package/src/utils/renderComponent.d.ts +0 -18
- package/src/utils/renderComponent.js +0 -300
- package/styles/tailwind3.css +0 -67
- package/styles/themes/action-buttons.css +0 -110
- package/styles/themes/datagrid.css +0 -380
- package/styles/themes/drag-reorder.css +0 -248
- package/styles/themes/import-dialog.css +0 -292
- package/styles/themes/index.css +0 -658
- package/styles/themes/left-pane.css +0 -253
- package/styles/themes/options-editor.css +0 -63
- package/styles/themes/preview.css +0 -702
- package/styles/themes/property-dialog.css +0 -371
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* filename: ej2-react-form-builder.umd.min.js
|
|
3
|
+
* version : 35.1.37
|
|
4
|
+
* Copyright Syncfusion Inc. 2001 - 2025. All rights reserved.
|
|
5
|
+
* Use of this code is subject to the terms of our license.
|
|
6
|
+
* A copy of the current license can be obtained at any time by e-mailing
|
|
7
|
+
* licensing@syncfusion.com. Any infringement will be prosecuted under
|
|
8
|
+
* applicable laws.
|
|
9
|
+
*/
|
|
10
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@syncfusion/ej2-react-base"),require("react"),require("@syncfusion/ej2-form-builder")):"function"==typeof define&&define.amd?define(["exports","@syncfusion/ej2-react-base","react","@syncfusion/ej2-form-builder"],t):t((e=e||self).ej={},e.ej2ReactBase,e.React,e.ej2FormBuilder)}(this,function(t,e,o,n){"use strict";r=function(e,t){return(r=Object.setPrototypeOf||({__proto__:[]}instanceof Array?function(e,t){e.__proto__=t}:function(e,t){for(var o in t)t.hasOwnProperty(o)&&(e[o]=t[o])}))(e,t)};var r,i,s=function(e,t){function o(){this.constructor=e}r(e,t),e.prototype=null===t?Object.create(t):(o.prototype=t.prototype,new o)},c=(i=e.ComplexBase,s(u,i),u.moduleName="toolboxItemSetting",u);function u(){return null!==i&&i.apply(this,arguments)||this}l=e.ComplexBase,s(a,l),a.propertyName="toolboxItems",a.moduleName="toolboxItemSettings";var l,s=a;function a(){return null!==l&&l.apply(this,arguments)||this}p=function(e,t){return(p=Object.setPrototypeOf||({__proto__:[]}instanceof Array?function(e,t){e.__proto__=t}:function(e,t){for(var o in t)t.hasOwnProperty(o)&&(e[o]=t[o])}))(e,t)};var p,f,d=function(e,t){function o(){this.constructor=e}p(e,t),e.prototype=null===t?Object.create(t):(o.prototype=t.prototype,new o)},d=(f=n.FormBuilder,d(m,f),m.prototype.render=function(){if(this.isReactMock=!1,!(this.element&&!this.initRenderCalled||this.refreshing)||this.isReactForeceUpdate)return o.createElement("div",this.getDefaultAttributes(),[].concat(this.props.children,this.portals));f.prototype.render.call(this),this.initRenderCalled=!0},m);function m(e){e=f.call(this,e)||this;return e.initRenderCalled=!1,e.checkInjectedModules=!1,e.directivekeys={toolboxItemSettings:"toolboxItemSetting"},e.statelessTemplateProps=null,e.templateProps=null,e.immediateRender=!1,e.isReactMock=!0,e.portals=[],e}e.applyMixins(d,[e.ComponentBase,o.Component]),Object.keys(n).forEach(function(e){"default"!==e&&Object.defineProperty(t,e,{enumerable:!0,get:function(){return n[e]}})}),t.FormBuilderComponent=d,t.ToolboxItemSettingDirective=c,t.ToolboxItemSettingsDirective=s,Object.defineProperty(t,"__esModule",{value:!0})});
|
|
11
|
+
//# sourceMappingURL=ej2-react-form-builder.umd.min.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ej2-react-form-builder.umd.min.js","sources":["../src/form-builder/toolboxitems-directive.js","../src/form-builder/formbuilder.component.js"],"sourcesContent":["var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { ComplexBase } from '@syncfusion/ej2-react-base';\n/**\n * `ToolboxItemSettingDirective` represents a custom widget\n * configuration item of the React FormBuilder component.\n * It must be contained within a\n * `ToolboxItemSettingsDirective` collection of a\n * `FormBuilderComponent`.\n * ```tsx\n * <FormBuilderComponent>\n * <ToolboxItemSettingsDirective>\n * <ToolboxItemSettingDirective />\n * </ToolboxItemSettingsDirective>\n * </FormBuilderComponent>\n * ```\n */\nvar ToolboxItemSettingDirective = /** @class */ (function (_super) {\n __extends(ToolboxItemSettingDirective, _super);\n function ToolboxItemSettingDirective() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n ToolboxItemSettingDirective.moduleName = 'toolboxItemSetting';\n return ToolboxItemSettingDirective;\n}(ComplexBase));\nexport { ToolboxItemSettingDirective };\nvar ToolboxItemSettingsDirective = /** @class */ (function (_super) {\n __extends(ToolboxItemSettingsDirective, _super);\n function ToolboxItemSettingsDirective() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n ToolboxItemSettingsDirective.propertyName = 'toolboxItems';\n ToolboxItemSettingsDirective.moduleName = 'toolboxItemSettings';\n return ToolboxItemSettingsDirective;\n}(ComplexBase));\nexport { ToolboxItemSettingsDirective };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport * as React from 'react';\nimport { FormBuilder } from '@syncfusion/ej2-form-builder';\nimport { ComponentBase, applyMixins } from '@syncfusion/ej2-react-base';\n/**\n * `FormBuilder` represents the React Form Builder Component.\n * ```ts\n * <FormBuilder />\n * ```\n */\nvar FormBuilderComponent = /** @class */ (function (_super) {\n __extends(FormBuilderComponent, _super);\n function FormBuilderComponent(props) {\n var _this = _super.call(this, props) || this;\n _this.initRenderCalled = false;\n _this.checkInjectedModules = false;\n _this.directivekeys = { 'toolboxItemSettings': 'toolboxItemSetting' };\n _this.statelessTemplateProps = null;\n _this.templateProps = null;\n _this.immediateRender = false;\n _this.isReactMock = true;\n _this.portals = [];\n return _this;\n }\n FormBuilderComponent.prototype.render = function () {\n this.isReactMock = false;\n if (((this.element && !this.initRenderCalled) || this.refreshing) && !this.isReactForeceUpdate) {\n _super.prototype.render.call(this);\n this.initRenderCalled = true;\n }\n else {\n return React.createElement('div', this.getDefaultAttributes(), [].concat(this.props.children, this.portals));\n }\n };\n return FormBuilderComponent;\n}(FormBuilder));\nexport { FormBuilderComponent };\napplyMixins(FormBuilderComponent, [ComponentBase, React.Component]);\n"],"names":["extendStatics","d","b","Object","setPrototypeOf","__proto__","Array","p","hasOwnProperty","_super","__extends","__","this","constructor","prototype","create","ToolboxItemSettingDirective","ComplexBase","moduleName","apply","arguments","ToolboxItemSettingsDirective","propertyName","FormBuilderComponent","FormBuilder","render","isReactMock","element","initRenderCalled","refreshing","isReactForeceUpdate","React.createElement","getDefaultAttributes","concat","props","children","portals","call","_this","checkInjectedModules","directivekeys","toolboxItemSettings","statelessTemplateProps","templateProps","immediateRender","ComponentBase","React.Component"],"mappings":"gZACQA,EAAgB,SAAUC,EAAGC,GAI7B,OAHAF,EAAgBG,OAAOC,iBAClB,CAAEC,UAAW,cAAgBC,MAAS,SAAUL,EAAGC,GAAKD,EAAEI,UAAYH,GACvE,SAAUD,EAAGC,GAAK,IAAK,IAAIK,KAAKL,EAAOA,EAAEM,eAAeD,CAAC,IAAGN,EAAEM,GAAKL,EAAEK,OACpDN,EAAGC,CAAC,GALjC,IACQF,EA2BmDS,EA5BvDC,EAOO,SAAUT,EAAGC,GAEhB,SAASS,IAAOC,KAAKC,YAAcZ,EADnCD,EAAcC,EAAGC,CAAC,EAElBD,EAAEa,UAAkB,OAANZ,EAAaC,OAAOY,OAAOb,CAAC,GAAKS,EAAGG,UAAYZ,EAAEY,UAAW,IAAIH,IAkBnFK,GAAuDP,EAOzDQ,cANEP,EAAUM,EAA6BP,CAAM,EAI7CO,EAA4BE,WAAa,qBAClCF,GAJP,SAASA,IACL,OAAkB,OAAXP,GAAmBA,EAAOU,MAAMP,KAAMQ,SAAS,GAAKR,KAMPH,EAQ1DQ,cAPEP,EAAUW,EAA8BZ,CAAM,EAI9CY,EAA6BC,aAAe,eAC5CD,EAA6BH,WAAa,0BANcT,EAAxDY,EAOOA,EALP,SAASA,IACL,OAAkB,OAAXZ,GAAmBA,EAAOU,MAAMP,KAAMQ,SAAS,GAAKR,KCvC3DZ,EAAgB,SAAUC,EAAGC,GAI7B,OAHAF,EAAgBG,OAAOC,iBAClB,CAAEC,UAAW,cAAgBC,MAAS,SAAUL,EAAGC,GAAKD,EAAEI,UAAYH,GACvE,SAAUD,EAAGC,GAAK,IAAK,IAAIK,KAAKL,EAAOA,EAAEM,eAAeD,CAAC,IAAGN,EAAEM,GAAKL,EAAEK,OACpDN,EAAGC,CAAC,GALjC,IACQF,EAqB4CS,EAtBhDC,EAOO,SAAUT,EAAGC,GAEhB,SAASS,IAAOC,KAAKC,YAAcZ,EADnCD,EAAcC,EAAGC,CAAC,EAElBD,EAAEa,UAAkB,OAANZ,EAAaC,OAAOY,OAAOb,CAAC,GAAKS,EAAGG,UAAYZ,EAAEY,UAAW,IAAIH,IAYnFY,GAAgDd,EAyBlDe,cAxBEd,EAAUa,EAAsBd,CAAM,EAatCc,EAAqBT,UAAUW,OAAS,WAEpC,GADAb,KAAKc,YAAc,CAAA,EACf,EAAEd,KAAKe,SAAW,CAACf,KAAKgB,kBAAqBhB,KAAKiB,aAAgBjB,KAAKkB,oBAKvE,OAAOC,gBAAoB,MAAOnB,KAAKoB,uBAAwB,GAAGC,OAAOrB,KAAKsB,MAAMC,SAAUvB,KAAKwB,OAAO,CAAC,EAJ3G3B,EAAOK,UAAUW,OAAOY,KAAKzB,IAAI,EACjCA,KAAKgB,iBAAmB,CAAA,GAMzBL,GAtBP,SAASA,EAAqBW,GACtBI,EAAQ7B,EAAO4B,KAAKzB,KAAMsB,CAAK,GAAKtB,KASxC,OARA0B,EAAMV,iBAAmB,CAAA,EACzBU,EAAMC,qBAAuB,CAAA,EAC7BD,EAAME,cAAgB,CAAEC,oBAAuB,sBAC/CH,EAAMI,uBAAyB,KAC/BJ,EAAMK,cAAgB,KACtBL,EAAMM,gBAAkB,CAAA,EACxBN,EAAMZ,YAAc,CAAA,EACpBY,EAAMF,QAAU,GACTE,gBAeHf,EAAsB,CAACsB,gBAAeC,YAAgB"}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { ComplexBase, applyMixins, ComponentBase } from '@syncfusion/ej2-react-base';
|
|
2
|
+
import { createElement, Component } from 'react';
|
|
3
|
+
import { FormBuilder } from '@syncfusion/ej2-form-builder';
|
|
4
|
+
export * from '@syncfusion/ej2-form-builder';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* `ToolboxItemSettingDirective` represents a custom widget
|
|
8
|
+
* configuration item of the React FormBuilder component.
|
|
9
|
+
* It must be contained within a
|
|
10
|
+
* `ToolboxItemSettingsDirective` collection of a
|
|
11
|
+
* `FormBuilderComponent`.
|
|
12
|
+
* ```tsx
|
|
13
|
+
* <FormBuilderComponent>
|
|
14
|
+
* <ToolboxItemSettingsDirective>
|
|
15
|
+
* <ToolboxItemSettingDirective />
|
|
16
|
+
* </ToolboxItemSettingsDirective>
|
|
17
|
+
* </FormBuilderComponent>
|
|
18
|
+
* ```
|
|
19
|
+
*/
|
|
20
|
+
class ToolboxItemSettingDirective extends ComplexBase {
|
|
21
|
+
}
|
|
22
|
+
ToolboxItemSettingDirective.moduleName = 'toolboxItemSetting';
|
|
23
|
+
class ToolboxItemSettingsDirective extends ComplexBase {
|
|
24
|
+
}
|
|
25
|
+
ToolboxItemSettingsDirective.propertyName = 'toolboxItems';
|
|
26
|
+
ToolboxItemSettingsDirective.moduleName = 'toolboxItemSettings';
|
|
27
|
+
|
|
28
|
+
/**
|
|
29
|
+
* `FormBuilder` represents the React Form Builder Component.
|
|
30
|
+
* ```ts
|
|
31
|
+
* <FormBuilder />
|
|
32
|
+
* ```
|
|
33
|
+
*/
|
|
34
|
+
class FormBuilderComponent extends FormBuilder {
|
|
35
|
+
constructor(props) {
|
|
36
|
+
super(props);
|
|
37
|
+
this.initRenderCalled = false;
|
|
38
|
+
this.checkInjectedModules = false;
|
|
39
|
+
this.directivekeys = { 'toolboxItemSettings': 'toolboxItemSetting' };
|
|
40
|
+
this.statelessTemplateProps = null;
|
|
41
|
+
this.templateProps = null;
|
|
42
|
+
this.immediateRender = false;
|
|
43
|
+
this.isReactMock = true;
|
|
44
|
+
this.portals = [];
|
|
45
|
+
}
|
|
46
|
+
render() {
|
|
47
|
+
this.isReactMock = false;
|
|
48
|
+
if (((this.element && !this.initRenderCalled) || this.refreshing) && !this.isReactForeceUpdate) {
|
|
49
|
+
super.render();
|
|
50
|
+
this.initRenderCalled = true;
|
|
51
|
+
}
|
|
52
|
+
else {
|
|
53
|
+
return createElement('div', this.getDefaultAttributes(), [].concat(this.props.children, this.portals));
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
applyMixins(FormBuilderComponent, [ComponentBase, Component]);
|
|
58
|
+
|
|
59
|
+
export { FormBuilderComponent, ToolboxItemSettingDirective, ToolboxItemSettingsDirective };
|
|
60
|
+
//# sourceMappingURL=ej2-react-form-builder.es2015.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ej2-react-form-builder.es2015.js","sources":["../src/es6/form-builder/toolboxitems-directive.js","../src/es6/form-builder/formbuilder.component.js"],"sourcesContent":["import { ComplexBase } from '@syncfusion/ej2-react-base';\n/**\n * `ToolboxItemSettingDirective` represents a custom widget\n * configuration item of the React FormBuilder component.\n * It must be contained within a\n * `ToolboxItemSettingsDirective` collection of a\n * `FormBuilderComponent`.\n * ```tsx\n * <FormBuilderComponent>\n * <ToolboxItemSettingsDirective>\n * <ToolboxItemSettingDirective />\n * </ToolboxItemSettingsDirective>\n * </FormBuilderComponent>\n * ```\n */\nexport class ToolboxItemSettingDirective extends ComplexBase {\n}\nToolboxItemSettingDirective.moduleName = 'toolboxItemSetting';\nexport class ToolboxItemSettingsDirective extends ComplexBase {\n}\nToolboxItemSettingsDirective.propertyName = 'toolboxItems';\nToolboxItemSettingsDirective.moduleName = 'toolboxItemSettings';\n","import * as React from 'react';\nimport { FormBuilder } from '@syncfusion/ej2-form-builder';\nimport { ComponentBase, applyMixins } from '@syncfusion/ej2-react-base';\n/**\n * `FormBuilder` represents the React Form Builder Component.\n * ```ts\n * <FormBuilder />\n * ```\n */\nexport class FormBuilderComponent extends FormBuilder {\n constructor(props) {\n super(props);\n this.initRenderCalled = false;\n this.checkInjectedModules = false;\n this.directivekeys = { 'toolboxItemSettings': 'toolboxItemSetting' };\n this.statelessTemplateProps = null;\n this.templateProps = null;\n this.immediateRender = false;\n this.isReactMock = true;\n this.portals = [];\n }\n render() {\n this.isReactMock = false;\n if (((this.element && !this.initRenderCalled) || this.refreshing) && !this.isReactForeceUpdate) {\n super.render();\n this.initRenderCalled = true;\n }\n else {\n return React.createElement('div', this.getDefaultAttributes(), [].concat(this.props.children, this.portals));\n }\n }\n}\napplyMixins(FormBuilderComponent, [ComponentBase, React.Component]);\n"],"names":["React.createElement","React.Component"],"mappings":";;;;;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAM,2BAA2B,SAAS,WAAW,CAAC;AAC7D,CAAC;AACD,2BAA2B,CAAC,UAAU,GAAG,oBAAoB,CAAC;AACvD,MAAM,4BAA4B,SAAS,WAAW,CAAC;AAC9D,CAAC;AACD,4BAA4B,CAAC,YAAY,GAAG,cAAc,CAAC;AAC3D,4BAA4B,CAAC,UAAU,GAAG,qBAAqB;;AClB/D;AACA;AACA;AACA;AACA;AACA;AACA,AAAO,MAAM,oBAAoB,SAAS,WAAW,CAAC;AACtD,IAAI,WAAW,CAAC,KAAK,EAAE;AACvB,QAAQ,KAAK,CAAC,KAAK,CAAC,CAAC;AACrB,QAAQ,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;AACtC,QAAQ,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC;AAC1C,QAAQ,IAAI,CAAC,aAAa,GAAG,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,CAAC;AAC7E,QAAQ,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC;AAC3C,QAAQ,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;AAClC,QAAQ,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;AACrC,QAAQ,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;AAChC,QAAQ,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;AAC1B,KAAK;AACL,IAAI,MAAM,GAAG;AACb,QAAQ,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;AACjC,QAAQ,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,gBAAgB,KAAK,IAAI,CAAC,UAAU,KAAK,CAAC,IAAI,CAAC,mBAAmB,EAAE;AACxG,YAAY,KAAK,CAAC,MAAM,EAAE,CAAC;AAC3B,YAAY,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;AACzC,SAAS;AACT,aAAa;AACb,YAAY,OAAOA,aAAmB,CAAC,KAAK,EAAE,IAAI,CAAC,oBAAoB,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;AACzH,SAAS;AACT,KAAK;AACL,CAAC;AACD,WAAW,CAAC,oBAAoB,EAAE,CAAC,aAAa,EAAEC,SAAe,CAAC,CAAC,CAAC;;;;"}
|
package/form-builder.js
ADDED
package/index.d.ts
CHANGED
package/index.js
CHANGED
package/license
CHANGED
|
@@ -1,13 +1,6 @@
|
|
|
1
|
-
Syncfusion
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
To qualify for the Syncfusion® Community License Program, your organization must have annual gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and fewer than five (5) developers. Additionally, you must agree to Syncfusion®'s terms and conditions.
|
|
8
|
-
|
|
9
|
-
If you do not meet the requirements for the community license, please reach out to sales@syncfusion.com for commercial licensing options.
|
|
10
|
-
|
|
11
|
-
You are required to obtain either a Community License or a Commercial License before using this product and must agree to comply with Syncfusion®'s terms and conditions.
|
|
12
|
-
|
|
13
|
-
The full Syncfusion® license, including terms and conditions, can be found at: https://www.syncfusion.com/content/downloads/syncfusion_license.pdf
|
|
1
|
+
Essential JS 2 library is available under the Syncfusion Essential Studio program, and can be licensed either under the Syncfusion Community License Program or the Syncfusion commercial license.
|
|
2
|
+
To be qualified for the Syncfusion Community License Program you must have a gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and have less than five (5) developers in your organization, and agree to be bound by Syncfusion’s terms and conditions.
|
|
3
|
+
Customers who do not qualify for the community license can contact sales@syncfusion.com for commercial licensing options.
|
|
4
|
+
Under no circumstances can you use this product without (1) either a Community License or a commercial license and (2) without agreeing and abiding by Syncfusion’s license containing all terms and conditions.
|
|
5
|
+
The Syncfusion license that contains the terms and conditions can be found at
|
|
6
|
+
https://www.syncfusion.com/content/downloads/syncfusion_license.pdf
|
package/package.json
CHANGED
|
@@ -1,54 +1,30 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@syncfusion/ej2-react-form-builder",
|
|
3
|
-
"version": "
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "35.1.37",
|
|
4
|
+
"description": "A package of feature-rich Essential JS 2 form builder component. for React",
|
|
5
5
|
"author": "Syncfusion Inc.",
|
|
6
6
|
"license": "SEE LICENSE IN license",
|
|
7
7
|
"keywords": [
|
|
8
|
-
"syncfusion",
|
|
9
|
-
"ej2",
|
|
10
8
|
"react",
|
|
11
|
-
"
|
|
12
|
-
"form-builder",
|
|
13
|
-
"form-
|
|
14
|
-
"
|
|
15
|
-
"json-forms",
|
|
16
|
-
"schema-forms",
|
|
17
|
-
"ui-components",
|
|
18
|
-
"react-components",
|
|
19
|
-
"drag-and-drop"
|
|
9
|
+
"reactjs",
|
|
10
|
+
"ej2-react-form-builder",
|
|
11
|
+
"react-form-builder",
|
|
12
|
+
"form-builder"
|
|
20
13
|
],
|
|
21
|
-
"
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
"typings": "./index.d.ts",
|
|
25
|
-
"readme": "README.md",
|
|
26
|
-
"exports": {
|
|
27
|
-
".": {
|
|
28
|
-
"import": "./index.js",
|
|
29
|
-
"types": "./index.d.ts"
|
|
30
|
-
},
|
|
31
|
-
"./styles/*": "./styles/*"
|
|
14
|
+
"repository": {
|
|
15
|
+
"type": "git",
|
|
16
|
+
"url": "https://github.com/syncfusion/ej2-react-ui-components.git"
|
|
32
17
|
},
|
|
33
|
-
"
|
|
18
|
+
"main": "./dist/ej2-react-form-builder.umd.min.js",
|
|
19
|
+
"module": "./index.js",
|
|
20
|
+
"es2015": "dist/es6/ej2-react-form-builder.es2015.js",
|
|
21
|
+
"readme": "ReadMe.md",
|
|
34
22
|
"dependencies": {
|
|
35
|
-
"@syncfusion/ej2-
|
|
36
|
-
"@syncfusion/ej2-react-
|
|
37
|
-
"@syncfusion/ej2-
|
|
38
|
-
"@syncfusion/ej2-react-grids": "*",
|
|
39
|
-
"@syncfusion/ej2-react-image-editor": "*",
|
|
40
|
-
"@syncfusion/ej2-react-inplace-editor": "*",
|
|
41
|
-
"@syncfusion/ej2-react-inputs": "*",
|
|
42
|
-
"@syncfusion/ej2-react-layouts": "*",
|
|
43
|
-
"@syncfusion/ej2-react-lists": "*",
|
|
44
|
-
"@syncfusion/ej2-react-navigations": "*",
|
|
45
|
-
"@syncfusion/ej2-react-notifications": "*",
|
|
46
|
-
"@syncfusion/ej2-react-popups": "*",
|
|
47
|
-
"@syncfusion/ej2-react-querybuilder": "*",
|
|
48
|
-
"@syncfusion/ej2-react-richtexteditor": "*",
|
|
49
|
-
"@syncfusion/ej2-react-splitbuttons": "*",
|
|
50
|
-
"@syncfusion/ej2-react-form-renderer": "*",
|
|
51
|
-
"@syncfusion/react-base": "*"
|
|
23
|
+
"@syncfusion/ej2-base": "~35.1.37",
|
|
24
|
+
"@syncfusion/ej2-react-base": "~35.1.37",
|
|
25
|
+
"@syncfusion/ej2-form-builder": "35.1.37"
|
|
52
26
|
},
|
|
53
|
-
"devDependencies": {}
|
|
27
|
+
"devDependencies": {},
|
|
28
|
+
"sideEffects": false,
|
|
29
|
+
"homepage": "https://www.syncfusion.com/react-components"
|
|
54
30
|
}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { FormBuilder, FormBuilderModel } from '@syncfusion/ej2-form-builder';
|
|
3
|
+
import { DefaultHtmlAttributes } from '@syncfusion/ej2-react-base';
|
|
4
|
+
/**
|
|
5
|
+
* `FormBuilder` represents the React Form Builder Component.
|
|
6
|
+
* ```ts
|
|
7
|
+
* <FormBuilder />
|
|
8
|
+
* ```
|
|
9
|
+
*/
|
|
10
|
+
export declare class FormBuilderComponent extends FormBuilder {
|
|
11
|
+
state: Readonly<{
|
|
12
|
+
children?: React.ReactNode | React.ReactNode[];
|
|
13
|
+
}> & Readonly<FormBuilderModel | DefaultHtmlAttributes>;
|
|
14
|
+
setState: any;
|
|
15
|
+
private getDefaultAttributes;
|
|
16
|
+
initRenderCalled: boolean;
|
|
17
|
+
private checkInjectedModules;
|
|
18
|
+
directivekeys: {
|
|
19
|
+
[key: string]: Object;
|
|
20
|
+
};
|
|
21
|
+
private statelessTemplateProps;
|
|
22
|
+
private templateProps;
|
|
23
|
+
private immediateRender;
|
|
24
|
+
private isReactMock;
|
|
25
|
+
props: Readonly<{
|
|
26
|
+
children?: React.ReactNode | React.ReactNode[];
|
|
27
|
+
}> & Readonly<FormBuilderModel | DefaultHtmlAttributes>;
|
|
28
|
+
forceUpdate: (callBack?: () => any) => void;
|
|
29
|
+
context: Object;
|
|
30
|
+
portals: any;
|
|
31
|
+
isReactComponent: Object;
|
|
32
|
+
refs: {
|
|
33
|
+
[key: string]: React.ReactInstance;
|
|
34
|
+
};
|
|
35
|
+
constructor(props: any);
|
|
36
|
+
render(): any;
|
|
37
|
+
}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
var __extends = (this && this.__extends) || (function () {
|
|
2
|
+
var extendStatics = function (d, b) {
|
|
3
|
+
extendStatics = Object.setPrototypeOf ||
|
|
4
|
+
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
5
|
+
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
|
6
|
+
return extendStatics(d, b);
|
|
7
|
+
};
|
|
8
|
+
return function (d, b) {
|
|
9
|
+
extendStatics(d, b);
|
|
10
|
+
function __() { this.constructor = d; }
|
|
11
|
+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
12
|
+
};
|
|
13
|
+
})();
|
|
14
|
+
import * as React from 'react';
|
|
15
|
+
import { FormBuilder } from '@syncfusion/ej2-form-builder';
|
|
16
|
+
import { ComponentBase, applyMixins } from '@syncfusion/ej2-react-base';
|
|
17
|
+
/**
|
|
18
|
+
* `FormBuilder` represents the React Form Builder Component.
|
|
19
|
+
* ```ts
|
|
20
|
+
* <FormBuilder />
|
|
21
|
+
* ```
|
|
22
|
+
*/
|
|
23
|
+
var FormBuilderComponent = /** @class */ (function (_super) {
|
|
24
|
+
__extends(FormBuilderComponent, _super);
|
|
25
|
+
function FormBuilderComponent(props) {
|
|
26
|
+
var _this = _super.call(this, props) || this;
|
|
27
|
+
_this.initRenderCalled = false;
|
|
28
|
+
_this.checkInjectedModules = false;
|
|
29
|
+
_this.directivekeys = { 'toolboxItemSettings': 'toolboxItemSetting' };
|
|
30
|
+
_this.statelessTemplateProps = null;
|
|
31
|
+
_this.templateProps = null;
|
|
32
|
+
_this.immediateRender = false;
|
|
33
|
+
_this.isReactMock = true;
|
|
34
|
+
_this.portals = [];
|
|
35
|
+
return _this;
|
|
36
|
+
}
|
|
37
|
+
FormBuilderComponent.prototype.render = function () {
|
|
38
|
+
this.isReactMock = false;
|
|
39
|
+
if (((this.element && !this.initRenderCalled) || this.refreshing) && !this.isReactForeceUpdate) {
|
|
40
|
+
_super.prototype.render.call(this);
|
|
41
|
+
this.initRenderCalled = true;
|
|
42
|
+
}
|
|
43
|
+
else {
|
|
44
|
+
return React.createElement('div', this.getDefaultAttributes(), [].concat(this.props.children, this.portals));
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
return FormBuilderComponent;
|
|
48
|
+
}(FormBuilder));
|
|
49
|
+
export { FormBuilderComponent };
|
|
50
|
+
applyMixins(FormBuilderComponent, [ComponentBase, React.Component]);
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { ComplexBase } from '@syncfusion/ej2-react-base';
|
|
2
|
+
import { ToolboxItemSettingModel } from '@syncfusion/ej2-form-builder';
|
|
3
|
+
export interface ToolboxItemSettingDirTypecast {
|
|
4
|
+
template?: string | Function | any;
|
|
5
|
+
}
|
|
6
|
+
/**
|
|
7
|
+
* `ToolboxItemSettingDirective` represents a custom widget
|
|
8
|
+
* configuration item of the React FormBuilder component.
|
|
9
|
+
* It must be contained within a
|
|
10
|
+
* `ToolboxItemSettingsDirective` collection of a
|
|
11
|
+
* `FormBuilderComponent`.
|
|
12
|
+
* ```tsx
|
|
13
|
+
* <FormBuilderComponent>
|
|
14
|
+
* <ToolboxItemSettingsDirective>
|
|
15
|
+
* <ToolboxItemSettingDirective />
|
|
16
|
+
* </ToolboxItemSettingsDirective>
|
|
17
|
+
* </FormBuilderComponent>
|
|
18
|
+
* ```
|
|
19
|
+
*/
|
|
20
|
+
export declare class ToolboxItemSettingDirective extends ComplexBase<ToolboxItemSettingModel | ToolboxItemSettingDirTypecast & {
|
|
21
|
+
children?: React.ReactNode;
|
|
22
|
+
}, ToolboxItemSettingModel | ToolboxItemSettingDirTypecast> {
|
|
23
|
+
static moduleName: string;
|
|
24
|
+
}
|
|
25
|
+
export declare class ToolboxItemSettingsDirective extends ComplexBase<{}, {}> {
|
|
26
|
+
static propertyName: string;
|
|
27
|
+
static moduleName: string;
|
|
28
|
+
}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
var __extends = (this && this.__extends) || (function () {
|
|
2
|
+
var extendStatics = function (d, b) {
|
|
3
|
+
extendStatics = Object.setPrototypeOf ||
|
|
4
|
+
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
5
|
+
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
|
6
|
+
return extendStatics(d, b);
|
|
7
|
+
};
|
|
8
|
+
return function (d, b) {
|
|
9
|
+
extendStatics(d, b);
|
|
10
|
+
function __() { this.constructor = d; }
|
|
11
|
+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
12
|
+
};
|
|
13
|
+
})();
|
|
14
|
+
import { ComplexBase } from '@syncfusion/ej2-react-base';
|
|
15
|
+
/**
|
|
16
|
+
* `ToolboxItemSettingDirective` represents a custom widget
|
|
17
|
+
* configuration item of the React FormBuilder component.
|
|
18
|
+
* It must be contained within a
|
|
19
|
+
* `ToolboxItemSettingsDirective` collection of a
|
|
20
|
+
* `FormBuilderComponent`.
|
|
21
|
+
* ```tsx
|
|
22
|
+
* <FormBuilderComponent>
|
|
23
|
+
* <ToolboxItemSettingsDirective>
|
|
24
|
+
* <ToolboxItemSettingDirective />
|
|
25
|
+
* </ToolboxItemSettingsDirective>
|
|
26
|
+
* </FormBuilderComponent>
|
|
27
|
+
* ```
|
|
28
|
+
*/
|
|
29
|
+
var ToolboxItemSettingDirective = /** @class */ (function (_super) {
|
|
30
|
+
__extends(ToolboxItemSettingDirective, _super);
|
|
31
|
+
function ToolboxItemSettingDirective() {
|
|
32
|
+
return _super !== null && _super.apply(this, arguments) || this;
|
|
33
|
+
}
|
|
34
|
+
ToolboxItemSettingDirective.moduleName = 'toolboxItemSetting';
|
|
35
|
+
return ToolboxItemSettingDirective;
|
|
36
|
+
}(ComplexBase));
|
|
37
|
+
export { ToolboxItemSettingDirective };
|
|
38
|
+
var ToolboxItemSettingsDirective = /** @class */ (function (_super) {
|
|
39
|
+
__extends(ToolboxItemSettingsDirective, _super);
|
|
40
|
+
function ToolboxItemSettingsDirective() {
|
|
41
|
+
return _super !== null && _super.apply(this, arguments) || this;
|
|
42
|
+
}
|
|
43
|
+
ToolboxItemSettingsDirective.propertyName = 'toolboxItems';
|
|
44
|
+
ToolboxItemSettingsDirective.moduleName = 'toolboxItemSettings';
|
|
45
|
+
return ToolboxItemSettingsDirective;
|
|
46
|
+
}(ComplexBase));
|
|
47
|
+
export { ToolboxItemSettingsDirective };
|
package/src/global.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './index';
|
package/src/index.d.ts
CHANGED
|
@@ -1,16 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
* @syncfusion/ej2-
|
|
3
|
-
* Form Builder Component - Visual drag-and-drop form editor
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
export { FormBuilder } from './FormBuilder.js';
|
|
7
|
-
|
|
8
|
-
export type {
|
|
9
|
-
IFormBuilder,
|
|
10
|
-
PropertyChangedEventArgs,
|
|
11
|
-
FieldDragStartedEventArgs,
|
|
12
|
-
FieldDraggingOverEventArgs,
|
|
13
|
-
FieldDroppedEventArgs
|
|
14
|
-
} from './FormBuilder.js';
|
|
15
|
-
|
|
16
|
-
export type { DefaultTemplates, PaletteConfig, Schema, } from './types/FormSchema.js';
|
|
1
|
+
export * from './form-builder';
|
|
2
|
+
export * from '@syncfusion/ej2-form-builder';
|
package/src/index.js
CHANGED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { FormComponent } from '../FormBuilder/types/FormSchema';
|
|
3
|
-
import type { FormState } from './FormValidator';
|
|
4
|
-
interface Props {
|
|
5
|
-
component: FormComponent;
|
|
6
|
-
formState?: FormState;
|
|
7
|
-
value?: string[];
|
|
8
|
-
onChange?: (value: string[]) => void;
|
|
9
|
-
optionRef?: (el: any, idx?: number) => void;
|
|
10
|
-
enableRtl?: boolean;
|
|
11
|
-
}
|
|
12
|
-
declare const CheckboxGroup: React.FC<Props>;
|
|
13
|
-
export default CheckboxGroup;
|
package/Common/CheckboxGroup.js
DELETED
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
|
|
3
|
-
const resolveAttributes = (attributes) => {
|
|
4
|
-
if (!attributes)
|
|
5
|
-
return {};
|
|
6
|
-
if (Array.isArray(attributes)) {
|
|
7
|
-
return attributes.reduce((acc, item) => {
|
|
8
|
-
if (item && item.key && item.value !== undefined) {
|
|
9
|
-
acc[item.key] = item.value;
|
|
10
|
-
}
|
|
11
|
-
return acc;
|
|
12
|
-
}, {});
|
|
13
|
-
}
|
|
14
|
-
return attributes;
|
|
15
|
-
};
|
|
16
|
-
const CheckboxGroup = ({ component, formState, value, onChange, optionRef, enableRtl }) => {
|
|
17
|
-
const resolvedValue = (formState ? formState.values[component.id] : (value ?? component.defaultValue));
|
|
18
|
-
const selectedItems = Array.isArray(resolvedValue) ? resolvedValue : [];
|
|
19
|
-
const handleCheckboxChange = (option, checked) => {
|
|
20
|
-
const newValue = checked ? [...selectedItems, option] : selectedItems.filter(i => i !== option);
|
|
21
|
-
if (formState) {
|
|
22
|
-
formState.onChange(component.id, { value: newValue });
|
|
23
|
-
}
|
|
24
|
-
else {
|
|
25
|
-
onChange?.(newValue);
|
|
26
|
-
}
|
|
27
|
-
};
|
|
28
|
-
const groupLabel = component.label && component.required ? `${component.label} *` : component.label;
|
|
29
|
-
const containerStyle = {
|
|
30
|
-
display: 'flex',
|
|
31
|
-
flexDirection: component.layoutDirection === 'row' ? 'row' : 'column',
|
|
32
|
-
gap: component.gap || '8px',
|
|
33
|
-
alignItems: 'flex-start'
|
|
34
|
-
};
|
|
35
|
-
const itemsStyle = {
|
|
36
|
-
display: 'flex',
|
|
37
|
-
flexDirection: component.layoutDirection === 'row' ? 'row' : 'column',
|
|
38
|
-
flexWrap: 'wrap',
|
|
39
|
-
gap: component.gap || '2px',
|
|
40
|
-
width: '100%'
|
|
41
|
-
};
|
|
42
|
-
const htmlAttrs = resolveAttributes(component.htmlAttributes);
|
|
43
|
-
const options = Array.isArray(component.options) ? component.options : ['Option 1'];
|
|
44
|
-
return (_jsx("div", { className: `checkbox-group ${component.cssClass || ''}`, style: containerStyle, ...htmlAttrs, role: "group", "aria-label": groupLabel, title: component.tooltip, children: _jsx("div", { className: "checkbox-group-items", style: itemsStyle, children: (options).map((option, idx) => {
|
|
45
|
-
const optionValue = typeof option === 'string' ? option : (option.value ?? option.label ?? option.key);
|
|
46
|
-
const optionLabel = typeof option === 'string' ? option : (option.label ?? option.value ?? String(optionValue));
|
|
47
|
-
return (_jsx(CheckBoxComponent, { id: `${component.id}_${idx}`, label: optionLabel, enableRtl: enableRtl, checked: selectedItems.includes(optionValue), disabled: component.disabled, labelPosition: component.checkboxLabelPosition || 'After', change: (e) => handleCheckboxChange(optionValue, e.checked), cssClass: `${component.cssClass}${component.size === 'Small' ? ' e-small' : component.size === 'Bigger' ? ' e-bigger' : ''}`, htmlAttributes: htmlAttrs, ref: optionRef ? (el) => optionRef(el, idx) : undefined }, `${component.id}-${idx}`));
|
|
48
|
-
}) }) }, `form-checkboxgroup-${component.id}`));
|
|
49
|
-
};
|
|
50
|
-
export default CheckboxGroup;
|