feat(client): add disabled option to props of SchemaSettingsItem (#4817)

* feat(client): add disabled option to props of SchemaSettingsItem

* docs(client): add doc and demo

* feat(client): add disabled option to SchemaInitializerItem

packages/core/client/docs/en-US/core/ui-schema/demos/schema-settings-components-item.tsx

@@ -26,6 +26,12 @@ const mySettings = new SchemaSettings({
       name: 'markdown',
       Component: MarkdownEdit,
     },
+    {
+      name: 'disabled',
+      Component() {
+        return <SchemaSettingsItem title="Disabled" disabled />;
+      },
+    },
   ],
 });
 

packages/core/client/docs/zh-CN/core/ui-schema/demos/schema-settings-components-item.tsx

@@ -26,6 +26,12 @@ const mySettings = new SchemaSettings({
       name: 'markdown',
       Component: MarkdownEdit,
     },
+    {
+      name: 'disabled',
+      Component() {
+        return <SchemaSettingsItem title="Disabled" disabled />;
+      },
+    },
   ],
 });
 

packages/core/client/src/application/schema-initializer/components/SchemaInitializerItem.tsx

@@ -24,6 +24,7 @@ export interface SchemaInitializerItemProps {
   icon?: React.ReactNode;
   title?: React.ReactNode;
   items?: any[];
+  disabled?: boolean;
   onClick?: (args?: any) => any;
   applyMenuStyle?: boolean;
   children?: ReactNode;
@@ -41,6 +42,7 @@ export const SchemaInitializerItem = memo(
       name = uid(),
       applyMenuStyle = true,
       className,
+      disabled,
       items,
       icon,
       title,
@@ -89,7 +91,10 @@ export const SchemaInitializerItem = memo(
       >
         <div
           {...attribute}
-          className={classNames({ [`${componentCls}-menu-item`]: applyMenuStyle }, className)}
+          className={classNames(
+            { [`${componentCls}-menu-item`]: applyMenuStyle, [`${componentCls}-menu-item-disabled`]: disabled },
+            className,
+          )}
           style={style}
         >
           {children || (

packages/core/client/src/application/schema-initializer/components/SchemaInitializerSwitch.tsx

@@ -24,7 +24,8 @@ export const SchemaInitializerSwitch: FC<SchemaInitializerSwitchItemProps> = (pr
   return (
     <SchemaInitializerItem {...resets} closeInitializerMenuWhenClick={false}>
       <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-        {compile(title)} <Switch style={{ marginLeft: 20 }} size={'small'} checked={checked} />
+        {compile(title)}
+        <Switch disabled={props.disabled} style={{ marginLeft: 20 }} size={'small'} checked={checked} />
       </div>
     </SchemaInitializerItem>
   );

packages/core/client/src/application/schema-initializer/components/style.ts

@@ -35,11 +35,18 @@ export const useSchemaInitializerStyles = genStyleHook('nb-schema-initializer',
           // height: token.controlHeight,
           lineHeight: `${token.controlHeight}px`,
           color: token.colorText,
-          cursor: 'pointer',
 
-          '&:hover': {
-            borderRadius: token.borderRadiusSM,
-            backgroundColor: token.colorBgTextHover,
+          [`&:not(${componentCls}-menu-item-disabled)`]: {
+            cursor: 'pointer',
+            [`&:hover`]: {
+              borderRadius: token.borderRadiusSM,
+              backgroundColor: token.colorBgTextHover,
+            },
+          },
+
+          [`&${componentCls}-menu-item-disabled`]: {
+            cursor: 'not-allowed',
+            color: token.colorTextDisabled,
           },
         },
       },

packages/core/client/src/schema-component/antd/action/Action.Designer.tsx

@@ -321,6 +321,7 @@ export function AfterSuccess() {
 export function RemoveButton(
   props: {
     onConfirmOk?: ModalProps['onOk'];
+    disabled?: boolean;
   } = {},
 ) {
   const { t } = useTranslation();
@@ -335,6 +336,7 @@ export function RemoveButton(
           breakRemoveOn={(s) => {
             return s['x-component'] === 'Space' || s['x-component'].endsWith('ActionBar');
           }}
+          disabled={props.disabled}
           confirm={{
             title: t('Delete action'),
             onOk: props.onConfirmOk,

packages/core/client/src/schema-settings/SchemaSettings.tsx

@@ -446,12 +446,13 @@ export const SchemaSettingsDivider = function Divider() {
 };
 
 export interface SchemaSettingsRemoveProps {
+  disabled?: boolean;
   confirm?: ModalFuncProps;
   removeParentsIfNoChildren?: boolean;
   breakRemoveOn?: ISchema | ((s: ISchema) => boolean);
 }
 export const SchemaSettingsRemove: FC<SchemaSettingsRemoveProps> = (props) => {
-  const { confirm, removeParentsIfNoChildren, breakRemoveOn } = props;
+  const { disabled, confirm, removeParentsIfNoChildren, breakRemoveOn } = props;
   const { dn, template } = useSchemaSettings();
   const { t } = useTranslation();
   const field = useField<Field>();
@@ -464,6 +465,7 @@ export const SchemaSettingsRemove: FC<SchemaSettingsRemoveProps> = (props) => {
 
   return (
     <SchemaSettingsItem
+      disabled={disabled}
       title="Delete"
       eventKey="remove"
       onClick={() => {

packages/core/client/src/schema-settings/demos/built-type.tsx

@@ -1,5 +1,3 @@
-
-
 import React from 'react';
 import { Input } from 'antd';
 import {
@@ -119,6 +117,17 @@ const mySchemaSetting = new SchemaSettings({
         },
       },
     },
+    {
+      name: 'demo10', // 唯一标识
+      type: 'item', // 文本类型
+      componentProps: {
+        title: 'Disabled title',
+        onClick() {
+          alert('Disabled');
+        },
+        disabled: true,
+      },
+    },
   ],
 });