Updated Styling. Control is adhering to form state and attribute sett…

…ing, in order to be disabled

.eslintrc.json

@@ -0,0 +1,24 @@
+{
+    "env": {
+      "browser": true,
+      "es2021": true
+    },
+    "extends": [
+      "eslint:recommended"
+    ],
+    "globals": {
+      "ComponentFramework": true
+    },
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+      "ecmaVersion": 12,
+      "sourceType": "module"
+    },
+    "plugins": [
+      "@microsoft/power-apps",
+      "@typescript-eslint"
+    ],
+    "rules": {
+      "no-unused-vars": "off"
+    }
+}

NNDropdown/ControlManifest.Input.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <manifest>
-  <control namespace="Controls" constructor="NNDropdown" version="0.0.94" display-name-key="NNDropdown" description-key="NN Relation converted into a Multiselect Dropdown" control-type="standard">
+  <control namespace="Controls" constructor="NNDropdown" version="0.0.100" display-name-key="NNDropdown" description-key="NN Relation converted into a Multiselect Dropdown" control-type="standard">
     <!--external-service-usage node declares whether this 3rd party PCF control is using external service or not, if yes, this control will be considered as premium and please also add the external domain it is using.
     If it is not using any external service, please set the enabled="false" and DO NOT add any domain below. The "enabled" will be true by default.
     Example1:

NNDropdown/fluentUIDropdown.tsx

@@ -4,8 +4,9 @@ import * as operations from './operations';
 import { EntityReference, Setting, DropDownData } from "./interface";
 import { IInputs } from './generated/ManifestTypes';
 import { useState } from 'react';
+import { inputProperties } from '@fluentui/react';
 
-const dropdownStyles: Partial<IDropdownStyles> = { dropdown: { } }; //width: 300
+const dropdownStyles: Partial<IDropdownStyles> = { title: { border: 'none', backgroundColor: '#F5F5F5' }};
 
 export const NNDropdownControl: React.FC<{ context: ComponentFramework.Context<IInputs>, setting: Setting, dropdowndata: DropDownData }> = ({ context, setting, dropdowndata }) => {
 
@@ -46,7 +47,8 @@ export const NNDropdownControl: React.FC<{ context: ComponentFramework.Context<I
       multiSelect
       defaultSelectedKeys={dropdowndata.selectedOptions} //selectedOptions  
       options={dropdowndata.allOptions} //allOptions 
-      styles={dropdownStyles}
+      styles={dropdownStyles} 
+      disabled={context.mode.isControlDisabled}
     />
   );
 };

NNDropdown/index.ts

@@ -1,4 +1,4 @@
-import ReactDOM = require("react-dom");
+import * as ReactDOM from 'react-dom'
 import { IInputs, IOutputs } from "./generated/ManifestTypes";
 import * as operations from './operations';
 

NNDropdown/operations.tsx

@@ -1,16 +1,17 @@
 import { IInputs } from "./generated/ManifestTypes";
 import * as webAPIHelper from "./webAPIHelper";
 import { EntityReference, Setting, DropDownOption, DropDownData, Globals } from "./interface";
-import ReactDOM = require("react-dom");
-import React = require("react");
+import * as ReactDOM from 'react-dom';
+import * as React from 'react'
 import * as dropdown from './fluentUIDropdown';
 
 export async function _sleep(ms: number) {
   return new Promise(resolve => setTimeout(resolve, ms));
 }
 
 export function _writeLog(message: string, data?: any) {
-  if (true) { //Needs to be set back to a shared value. Had issue when the control was on the form multiple times. Settings/Globals were mixed.
+  const condition = true;
+  if (condition) { //Needs to be set back to a shared value. Had issue when the control was on the form multiple times. Settings/Globals were mixed.
     console.log(message, data);
   }
 }
@@ -167,8 +168,8 @@ export async function _execute(context: ComponentFramework.Context<IInputs>, con
     ReactDOM.render(React.createElement(dropdown.NNDropdownControl, { context: context, setting: _setting, dropdowndata: dropDownData }), container);
   }
   else {
+    //@ts-ignore
     const msg = <div>This record hasn't been created yet. To enable this control, create the record.</div>;
     ReactDOM.render(msg, container);
   }
-
 }