feat: button component add popconfirm button styles

jd-opensource · Apr 29, 2024 · 62a557f · 62a557f
1 parent a213b56
commit 62a557f
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 1 deletion.
diff --git a/docs/drip-table/components/button.md b/docs/drip-table/components/button.md
@@ -301,7 +301,9 @@ const Demo = () => {
             content: '您确认要执行删除“{{props.record.name}}”这个操作吗？该操作将无法撤销！',
             placement: 'top',
             cancelText: '取消',
+            cancelStyle: { transform: 'translateX(120%)' },
             confirmText: '确认',
+            confirmStyle: { transform: 'translateX(-120%)' },
           },
         },
       },

diff --git a/packages/drip-table/src/components/cell-components/button/index.tsx b/packages/drip-table/src/components/cell-components/button/index.tsx
@@ -49,7 +49,15 @@ export type DTCButtonColumnSchema = DripTableColumnSchema<'button', {
     content: string;
     placement?: string;
     cancelText?: string;
+    /**
+     * 取消按钮自定义样式
+     */
+    cancelStyle?: string | Record<string, string>;
     confirmText?: string;
+    /**
+     * 确认按钮自定义样式
+     */
+    confirmStyle?: string | Record<string, string>;
   };
   disableFunc?: string;
   visibleFunc?: string;
@@ -150,7 +158,39 @@ export default class DTCButton<RecordType extends DripTableRecordTypeBase> exten
           content: { type: 'string' },
           placement: { type: 'string' },
           cancelText: { type: 'string' },
+          cancelStyle: {
+            anyOf: [
+              { type: 'string' },
+              {
+                type: 'object',
+                patternProperties: {
+                  '^.*$': {
+                    anyOf: [
+                      { type: 'string' },
+                      { type: 'number' },
+                    ],
+                  },
+                },
+              },
+            ],
+          },
           confirmText: { type: 'string' },
+          confirmStyle: {
+            anyOf: [
+              { type: 'string' },
+              {
+                type: 'object',
+                patternProperties: {
+                  '^.*$': {
+                    anyOf: [
+                      { type: 'string' },
+                      { type: 'number' },
+                    ],
+                  },
+                },
+              },
+            ],
+          },
         },
       },
       disableFunc: { type: 'string' },
@@ -302,6 +342,7 @@ export default class DTCButton<RecordType extends DripTableRecordTypeBase> exten
                           popconfirm.cancelText
                             ? (
                               <Button
+                                style={this.parseReactCSS(popconfirm.cancelStyle)}
                                 size="small"
                                 onClick={() => {
                                   this.setState({ showPopconfirm: false });
@@ -313,7 +354,7 @@ export default class DTCButton<RecordType extends DripTableRecordTypeBase> exten
                             : null
                         }
                         <Button
-                          style={{ marginLeft: '10px' }}
+                          style={{ marginLeft: '10px', ...this.parseReactCSS(popconfirm.confirmStyle) }}
                           type="primary"
                           size="small"
                           shape={options.shape}