updated disabled styles

khoait · Nov 13, 2024 · 93e2cf0 · 93e2cf0
1 parent 92659da
commit 93e2cf0
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 6 deletions.
diff --git a/LookdownComponent/Lookdown/components/LookdownControlClassic.tsx b/LookdownComponent/Lookdown/components/LookdownControlClassic.tsx
@@ -367,7 +367,9 @@ export default function LookdownControlClassic({
         />
       </Stack.Item>
       <Stack horizontal>
-        {selectedId ? <IconButton iconProps={{ iconName: "Cancel" }} onClick={() => onChange?.(null)} /> : null}
+        {selectedId && !disabled && !isError ? (
+          <IconButton iconProps={{ iconName: "Cancel" }} onClick={() => onChange?.(null)} />
+        ) : null}
         {hasCommand ? <IconButton iconProps={commandIcon} menuProps={menuProps} onRenderMenuIcon={() => null} /> : null}
       </Stack>
     </Stack>

diff --git a/LookdownComponent/Lookdown/components/LookdownControlNewLook.tsx b/LookdownComponent/Lookdown/components/LookdownControlNewLook.tsx
@@ -53,6 +53,17 @@ const useStyle = makeStyles({
   breakWord: {
     wordBreak: "break-word",
   },
+  disabled: {
+    backgroundColor: tokens.colorNeutralBackground3,
+    ...shorthands.borderColor(tokens.colorTransparentStroke),
+    "&>button": {
+      color: tokens.colorNeutralForeground1,
+      cursor: "default",
+    },
+  },
+  hidden: {
+    display: "none",
+  },
 });
 
 export default function LookdownControlNewLook({
@@ -78,8 +89,6 @@ export default function LookdownControlNewLook({
   const queryClient = useQueryClient();
   const styles = useStyle();
 
-  const dropdownStyles = mergeClasses(styles.dropdown, styles.flexFill);
-
   const [selectedDisplayText, setSelectedDisplayText] = useState<string>(selectedText ?? "");
   const [selectedValues, setSelectedValues] = useState<string[]>(selectedId ? [selectedId] : []);
 
@@ -106,6 +115,8 @@ export default function LookdownControlNewLook({
 
   const isError = isErrorLanguagePack || isErrorMetadata || isErrorEntityOptions;
 
+  const dropdownStyles = mergeClasses(styles.dropdown, styles.flexFill, (disabled || isError) && styles.disabled);
+
   useEffect(() => {
     if (selectedId && entityOptions) {
       const selectionItem = entityOptions.find((item) => item.id === selectedId);
@@ -281,11 +292,13 @@ export default function LookdownControlNewLook({
         <Dropdown
           appearance="filled-darker"
           className={dropdownStyles}
-          clearable
+          clearable={!disabled && !isError}
+          disabled={disabled || isError}
           placeholder={isError ? languagePack.LoadDataErrorMessage : "---"}
           value={isError ? "" : selectedDisplayText}
           selectedOptions={isError ? [] : selectedValues}
           button={getSelectedOptionDisplay()}
+          expandIcon={disabled || isError ? { className: styles.hidden } : undefined}
           onOptionSelect={handleOptionSelect}
         >
           {renderOptions()}
@@ -304,12 +317,12 @@ export default function LookdownControlNewLook({
                     {languagePack.OpenRecordLabel}
                   </MenuItem>
                 ) : null}
-                {allowQuickCreate ? (
+                {allowQuickCreate && !disabled && !isError ? (
                   <MenuItem icon={<AddRegular />} onClick={handleQuickCreateMenuClick}>
                     {languagePack.QuickCreateLabel}
                   </MenuItem>
                 ) : null}
-                {allowLookupPanel ? (
+                {allowLookupPanel && !disabled && !isError ? (
                   <MenuItem icon={<SearchRegular />} onClick={handleLookupPanelMenuClick}>
                     {languagePack.LookupPanelLabel}
                   </MenuItem>