@try-at-software/input-elements 1.2.0-aplha.5 → 1.2.0-beta.2

package/lib/Utilities/DropdownHelper.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropdownHelper = void 0;
-const office_ui_fabric_react_1 = require("office-ui-fabric-react");
+const react_1 = require("@fluentui/react");
 const SingleValueInputElements_1 = require("../SingleValueInputElements");
 class DropdownHelper {
     static getNormalizedOptions(defaultOption, allOptions) {
@@ -14,7 +14,7 @@ class DropdownHelper {
             allOptions.forEach((o) => {
                 if (!o)
                     return;
-                const newOption = Object.assign(Object.assign({}, DropdownHelper.toNormalizedDropdownOption(o)), { selected: false });
+                const newOption = this.toNormalizedDropdownOption(o);
                 options.push(newOption);
             });
         return options;
@@ -40,19 +40,20 @@ DropdownHelper.toNormalizedDropdownOption = (inputOption) => {
     if (inputOption.type !== undefined) {
         switch (inputOption.type) {
             case SingleValueInputElements_1.DropdownOptionType.Normal:
-                itemType = office_ui_fabric_react_1.SelectableOptionMenuItemType.Normal;
+                itemType = react_1.SelectableOptionMenuItemType.Normal;
                 break;
             case SingleValueInputElements_1.DropdownOptionType.Divider:
-                itemType = office_ui_fabric_react_1.SelectableOptionMenuItemType.Divider;
+                itemType = react_1.SelectableOptionMenuItemType.Divider;
                 break;
             case SingleValueInputElements_1.DropdownOptionType.Header:
-                itemType = office_ui_fabric_react_1.SelectableOptionMenuItemType.Header;
+                itemType = react_1.SelectableOptionMenuItemType.Header;
                 break;
         }
     }
     return {
         text: inputOption.text,
         key: inputOption.key,
-        itemType: itemType
+        itemType: itemType,
+        disabled: !!inputOption.disabled
     };
 };

package/lib/Utilities/FormHelper.js

@@ -8,8 +8,14 @@ function getFormState(inputs) {
     let hasChanges = false;
     let index = 0;
     while ((isValid || !hasChanges) && index < inputs.length) {
-        isValid = isValid && inputs[index].isValid;
-        hasChanges = hasChanges || inputs[index].hasChanges;
+        const currentInput = inputs[index];
+        if (!currentInput) {
+            isValid = false;
+        }
+        else {
+            isValid = isValid && currentInput.isValid;
+            hasChanges = hasChanges || currentInput.hasChanges;
+        }
         index++;
     }
     return {

package/lib/Utilities/InputElementsBuilding.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { UpdateCallback } from '../IInputElement';
+import { ValidationRule } from '../IValueInputElement';
+import { IDynamicProps, IOperativeProps, ISingleValueInputElement, ISingleValueInputElementConfiguration, ISingleValueInputElementProps } from '../SingleValueInputElements';
+declare class InputElementBuilder<TValue> {
+    private readonly _config;
+    private readonly _updateCallback;
+    private readonly _validationRules;
+    constructor(config: ISingleValueInputElementConfiguration<TValue>, updateCallback: UpdateCallback, validationRules: ValidationRule<TValue>[]);
+    materialize<TComponentProps, TDynamicProps>(component: React.ComponentType<ISingleValueInputElementProps<TValue> & IDynamicProps<TDynamicProps> & IOperativeProps<TComponentProps>>, props: TComponentProps): ISingleValueInputElement<TValue, TComponentProps, TDynamicProps>;
+}
+export declare function prepareInputElement<TValue>(config: ISingleValueInputElementConfiguration<TValue>, updateCallback: UpdateCallback, ...validationRules: ValidationRule<TValue>[]): InputElementBuilder<TValue>;
+export {};

package/lib/Utilities/InputElementsBuilding.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.prepareInputElement = void 0;
+const SingleValueInputElements_1 = require("../SingleValueInputElements");
+class InputElementBuilder {
+    constructor(config, updateCallback, validationRules) {
+        this._config = config;
+        this._updateCallback = updateCallback;
+        this._validationRules = validationRules;
+    }
+    materialize(component, props) {
+        return new SingleValueInputElements_1.SingleValueInputElement(this._config, component, props, this._updateCallback, ...this._validationRules);
+    }
+}
+function prepareInputElement(config, updateCallback, ...validationRules) {
+    return new InputElementBuilder(config, updateCallback, validationRules);
+}
+exports.prepareInputElement = prepareInputElement;

package/lib/Utilities/index.d.ts

@@ -1,4 +1,5 @@
 export * from './DropdownHelper';
 export * from './FormHelper';
+export * from './InputElementsBuilding';
 export * from './StylingHelper';
 export * from './TypingHelper';

package/lib/Utilities/index.js

@@ -7,10 +7,11 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
     o[k2] = m[k];
 }));
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./DropdownHelper"), exports);
 __exportStar(require("./FormHelper"), exports);
+__exportStar(require("./InputElementsBuilding"), exports);
 __exportStar(require("./StylingHelper"), exports);
 __exportStar(require("./TypingHelper"), exports);

package/lib/index.d.ts

@@ -1,3 +1,4 @@
+export * from './Components';
 export * from './ExtendedInputElement';
 export * from './IChangingInputElement';
 export * from './IHidingInputElement';

package/lib/index.js

@@ -7,9 +7,10 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
     o[k2] = m[k];
 }));
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Components"), exports);
 __exportStar(require("./ExtendedInputElement"), exports);
 __exportStar(require("./IChangingInputElement"), exports);
 __exportStar(require("./IHidingInputElement"), exports);

package/package.json

@@ -1,11 +1,11 @@
 {
     "name": "@try-at-software/input-elements",
-    "version": "1.2.0-aplha.5",
+    "version": "1.2.0-beta.2",
     "description": "A package providing different input elements that are extensible and easily configurable for your custom needs.",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
     "scripts": {
-        "start-dev": "npm run lint && webpack-dev-server --mode development --open",
+        "start-dev": "npm run lint && webpack serve --mode development --open",
         "lint": ".\\node_modules\\.bin\\eslint \"./src/**/*.{js,jsx,ts,tsx}\" && prettier --check \"src/**/*.{ts,tsx,js,jsx,css,less,json}\"",
         "fix-code-style": "prettier --write \"src/**/*.{ts,tsx,js,jsx,css,less,json}\"",
         "test": "jest",
@@ -21,9 +21,9 @@
     },
     "repository": {
         "type": "git",
-        "url": "https://dev.azure.com/TryAtSoftware/InputElements"
+        "url": "https://github.com/TryAtSoftware/InputElements"
     },
-    "homepage": "https://dev.azure.com/TryAtSoftware/InputElements",
+    "homepage": "https://github.com/TryAtSoftware/InputElements",
     "files": [
         "lib/**/*"
     ],
@@ -34,44 +34,46 @@
         "validation"
     ],
     "author": "Tony Troeff",
-    "license": "ISC",
+    "license": "MIT",
     "devDependencies": {
-        "@types/enzyme": "^3.10.5",
-        "@types/enzyme-adapter-react-16": "^1.0.6",
-        "@types/jest": "^26.0.8",
-        "@types/react": "^16.9.44",
-        "@types/react-beautiful-dnd": "^13.0.0",
-        "@types/react-dom": "^16.9.8",
-        "@typescript-eslint/eslint-plugin": "^3.7.1",
-        "@typescript-eslint/parser": "^3.7.1",
-        "awesome-typescript-loader": "^5.2.1",
-        "copyfiles": "^2.3.0",
-        "css-loader": "^4.2.0",
-        "enzyme": "^3.11.0",
-        "enzyme-adapter-react-16": "^1.15.2",
-        "eslint": "^7.6.0",
-        "eslint-config-prettier": "^6.11.0",
-        "eslint-loader": "^4.0.2",
-        "eslint-plugin-prettier": "^3.1.4",
-        "eslint-plugin-react": "^7.20.5",
-        "html-webpack-plugin": "^4.3.0",
-        "jest": "^26.2.2",
-        "jest-each": "^26.2.0",
-        "less-loader": "^6.2.0",
-        "prettier": "^2.0.5",
-        "react-dom": "^16.13.1",
-        "rimraf": "^3.0.2",
-        "source-map-loader": "^1.0.1",
-        "style-loader": "^1.2.1",
-        "ts-jest": "^26.1.4",
-        "typescript": "^3.9.7",
-        "webpack": "^4.44.1",
-        "webpack-cli": "^3.3.12",
-        "webpack-dev-server": "^3.11.0"
+        "@testing-library/react": "12.1.4",
+        "@types/enzyme": "3.10.12",
+        "@types/enzyme-adapter-react-16": "1.0.6",
+        "@types/jest": "27.4.1",
+        "@types/react": "16.9.0",
+        "@types/react-beautiful-dnd": "13.1.2",
+        "@types/react-dom": "16.9.0",
+        "@typescript-eslint/eslint-plugin": "5.18.0",
+        "@typescript-eslint/parser": "5.18.0",
+        "copyfiles": "2.4.1",
+        "css-loader": "6.7.1",
+        "eslint": "8.13.0",
+        "eslint-config-prettier": "8.5.0",
+        "eslint-plugin-prettier": "4.0.0",
+        "eslint-plugin-react": "7.29.4",
+        "html-webpack-plugin": "5.5.0",
+        "jest": "27.5.1",
+        "jest-each": "27.5.1",
+        "less": "4.1.2",
+        "less-loader": "10.2.0",
+        "@fluentui/react": "8.41.0",
+        "prettier": "2.6.2",
+        "react": "16.9.0",
+        "react-dom": "16.9.0",
+        "rimraf": "3.0.2",
+        "style-loader": "3.3.1",
+        "ts-jest": "27.1.4",
+        "ts-loader": "9.2.8",
+        "typescript": "4.3.2",
+        "webpack": "5.72.0",
+        "webpack-cli": "4.9.2",
+        "webpack-dev-server": "4.8.1"
     },
     "dependencies": {
-        "office-ui-fabric-react": "^7.124.1",
-        "react": "^16.13.1",
-        "react-beautiful-dnd": "^13.0.0"
+        "react-beautiful-dnd": "13.1.0"
+    },
+    "peerDependencies": {
+        "@fluentui/react": ">=7.179.1",
+        "react": ">=16.9.0"
     }
 }

package/lib/SingleValueInputElements/DependentInputElement/DependentInputElementInitializer.js

@@ -1,51 +0,0 @@
-// import { ISingleValueInputElement } from '../ISingleValueInputElement';
-// import { UpdateType } from '../../UpdateType';
-//
-// export class DependentInputElementInitializer {
-//     public static initializeDependency<TDependent, TPrincipal, TDependentProps = unknown, TPrincipalProps = unknown>(
-//         principal: ISingleValueInputElement<TPrincipal, TPrincipalProps>,
-//         dependent: ISingleValueInputElement<TDependent, TDependentProps>,
-//         onPrincipalValueChanged: (newValue: TPrincipal, doneCallback: () => void) => void,
-//         handleFalsyPrincipalValue?: () => void,
-//         handleInitialRender?: () => void
-//     ): void {
-//         if (!dependent || !principal || !onPrincipalValueChanged) return;
-//
-//         // If the dependent input element is required, this means that the principal should be required as well.
-//         if (!!dependent.configuration?.isRequired) {
-//             if (!principal.configuration) principal.configuration = { isRequired: true };
-//             else principal.configuration.isRequired = true;
-//         }
-//
-//         const originalUpdateFunction = principal.update;
-//         principal.update = (updateType: UpdateType): void => {
-//             if (!!originalUpdateFunction) originalUpdateFunction(updateType);
-//
-//             if (updateType === UpdateType.System) {
-//                 // Handle the system events - loading/ hiding an input element.
-//                 if (principal.isLoading || !principal.isVisible) dependent.hide();
-//                 else dependent.show();
-//             } else {
-//                 dependent.resetValue();
-//                 if (!!principal.value === false) {
-//                     // If the falsy value is handled explicitly, execute that callback.
-//                     // In every other case, hide the dependent component.
-//                     if (!!handleFalsyPrincipalValue) handleFalsyPrincipalValue();
-//                     else if (dependent.isVisible) dependent.hide();
-//                 } else {
-//                     // Ensure that the dependent input element is visible.
-//                     if (!dependent.isVisible) dependent.show();
-//
-//                     dependent.load((finish: () => void): void => {
-//                         onPrincipalValueChanged(principal.value, finish);
-//                     });
-//                 }
-//             }
-//         };
-//
-//         // If a callback to handle the initial render is passed, execute it.
-//         // Else, hide the input element.
-//         if (!!handleInitialRender) handleInitialRender();
-//         else dependent.hide();
-//     }
-// }

package/lib/SingleValueInputElements/DependentInputElement/index.js

@@ -1 +0,0 @@
-// export * from './DependentInputElementInitializer';

package/lib/SingleValueInputElements/DropdownInputElement/DropdownInputElement.d.ts

@@ -1,11 +0,0 @@
-import { UpdateCallback } from '../../IInputElement';
-import { ValidationRule } from '../../IValueInputElement';
-import { IBaseInputElementProps } from '../IBaseInputElementProps';
-import { ISingleValueInputElementConfiguration } from '../ISingleInputElementConfiguration';
-import { SingleValueInputElement } from '../SingleValueInputElement';
-import { IDropdownInputProps } from './IDropdownInputProps';
-export declare class DropdownInputElement extends SingleValueInputElement<string, IBaseInputElementProps, IDropdownInputProps> {
-    constructor(config: ISingleValueInputElementConfiguration<string>, props: IBaseInputElementProps, update: UpdateCallback, ...validationRules: ValidationRule<string>[]);
-    private static consistencyErrorMessage;
-    private getConsistencyValidationRule;
-}

package/lib/SingleValueInputElements/DropdownInputElement/DropdownInputElement.js

@@ -1,33 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DropdownInputElement = void 0;
-const SingleValueInputElement_1 = require("../SingleValueInputElement");
-const DropdownInput_1 = require("./DropdownInput");
-class DropdownInputElement extends SingleValueInputElement_1.SingleValueInputElement {
-    constructor(config, props, update, ...validationRules) {
-        super(config, DropdownInput_1.DropdownInput, props, update, ...validationRules);
-        this.validationRules.push(this.getConsistencyValidationRule());
-    }
-    getConsistencyValidationRule() {
-        return (newValue) => {
-            const dynamicProps = this.getDynamicProps();
-            if (!dynamicProps)
-                return DropdownInputElement.consistencyErrorMessage;
-            const allOptions = [];
-            if (dynamicProps.defaultOption)
-                allOptions.push(dynamicProps.defaultOption);
-            if (dynamicProps.options && Array.isArray(dynamicProps.options)) {
-                dynamicProps.options.forEach((o) => {
-                    if (!o)
-                        return;
-                    allOptions.push(o);
-                });
-            }
-            if (allOptions.some((o) => o.key === newValue))
-                return null;
-            return DropdownInputElement.consistencyErrorMessage;
-        };
-    }
-}
-exports.DropdownInputElement = DropdownInputElement;
-DropdownInputElement.consistencyErrorMessage = 'The value is not present within the specified options.';