feat: 增加禁用属性

Author: twp0217

README.md

@@ -36,6 +36,7 @@ export default () => {
 | -------------- | -------------------- | --------- | ------------------ |
 | className      | string               | -         | 类名               |
 | style          | React.CSSProperties  | -         | 样式               |
+| disabled       | `boolean`            | `false`   | 是否禁用           |
 | keepOpenOnBlur | `boolean`            | `false`   | 失去焦点时保持打开 |
 | hideActions    | `boolean`            | `false`   | 是否隐藏操作按钮   |
 | confirmText    | `string`             | `Confirm` | 确认文本           |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twp0217/react-inline-edit",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "Inline edit component for React",
   "scripts": {
     "start": "dumi dev",

src/InlineEdit.tsx

@@ -9,6 +9,7 @@ const InlineEdit = (props: InlineEditProps) => {
   const {
     className,
     style,
+    disabled,
     keepOpenOnBlur,
     isEditing: customizeIsEditing,
     readView,
@@ -80,7 +81,7 @@ const InlineEdit = (props: InlineEditProps) => {
 
   return (
     <div className={classNames('inline-edit-container', className)} style={style}>
-      {isEditing ? (
+      {!disabled && isEditing ? (
         <EditView
           {...props}
           onBlur={handleBlur}
@@ -90,7 +91,7 @@ const InlineEdit = (props: InlineEditProps) => {
           onCancel={handleCancel}
         />
       ) : (
-        <ReadView readView={readView} onClick={handleReadViewClick} />
+        <ReadView disabled={disabled} readView={readView} onClick={handleReadViewClick} />
       )}
     </div>
   );

src/components/ReadView.tsx

@@ -1,15 +1,16 @@
 import React from 'react';
 import { InlineEditProps } from '../interface';
+import classNames from 'classnames';
 
-interface ReadViewProps extends Pick<InlineEditProps, 'readView'> {
+interface ReadViewProps extends Pick<InlineEditProps, 'disabled' | 'readView'> {
   onClick: () => void;
 }
 
 const ReadView = (props: ReadViewProps) => {
-  const { readView, onClick } = props;
+  const { disabled, readView, onClick } = props;
 
   return (
-    <div className="inline-edit-read-view-container" onClick={onClick}>
+    <div className={classNames('inline-edit-read-view-container', { disabled })} onClick={onClick}>
       {readView}
     </div>
   );

src/index.less

@@ -31,7 +31,7 @@
       border-radius: 2px;
       box-shadow: 0 0 0 0 transparent;
 
-      &:hover {
+      &:not(.disabled):hover {
         box-shadow: 0 0 0 1px @border-color;
       }
     }

src/interface.ts

@@ -5,6 +5,7 @@ export type Placement = 'top' | 'bottom';
 export interface InlineEditProps<T = Value> {
   className?: string;
   style?: React.CSSProperties;
+  disabled?: boolean;
   keepOpenOnBlur?: boolean;
   hideActions?: boolean;
   confirmText?: string;