update universal select ui

public/locale/en/deduplication.json

@@ -8,6 +8,7 @@
   "Empty": "Empty",
   "No_duplication": "No duplication",
   "Delete": "Delete",
+  "Close": "Close",
   "Settings": "Settings",
   "Select_a_column": "Select a column",
   "Add_new_column": "Add new column",

public/locale/zh_CN/deduplication.json

@@ -8,6 +8,7 @@
   "Empty": "空",
   "No_duplication": "无重复项",
   "Delete": "删除",
+  "Close": "关闭",
   "Settings": "设置",
   "Select_a_column": "选择一个列",
   "Add_new_column": "添加新去重列",

src/components/add-new-column.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import intl from 'react-intl-universal';
-import styles from '../css/plugin-layout.module.css';
+import { DtableCustomButton } from 'dtable-ui-component';
 
 class AddColumn extends React.Component {
 
@@ -21,10 +21,15 @@ class AddColumn extends React.Component {
     const {readonly} = this.props;
 
     return (
-      <button onClick={this.addColumn} className={`border-0 p-0 ${styles['add-column']} plugin-deduplicate-btn-add-column ${readonly ? 'readonly' : ''}`}>
-        <span className={`dtable-font dtable-icon-add-table mr-1 ${styles['add-column-icon']}`}></span>
-        <span>{intl.get('Add_new_column')}</span>
-      </button>
+      <DtableCustomButton 
+        variant='secondary'
+        onClick={this.addColumn} 
+        icon='dtable-icon-add-table'
+        disabled={readonly}
+        isOutline={false}
+      >
+        {intl.get('Add_new_column')}
+      </DtableCustomButton>
     );
   }
 }

src/components/deduplication-columns.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import PropTypes from 'prop-types';
-import { DTableSelect } from 'dtable-ui-component';
+import { DTableSelect,DtableIconButton } from 'dtable-ui-component';
 import styles from '../css/plugin-layout.module.css';
 
 class DeDuplicationColumns extends React.Component {
@@ -22,11 +22,13 @@ class DeDuplicationColumns extends React.Component {
               onChange={(option) => this.onSelectChange(option, index)}
             />
           </div>
-          <button type="button"
+          <DtableIconButton
+            symbol='dtable-icon-fork-number'
+            tooltip={intl.get('Delete')}
             aria-label={intl.get('Delete')}
-            title={intl.get('Delete')}
             onClick={() => this.deleteColumn(index)}
-            className={`border-0 p-0 ml-2 dtable-font dtable-icon-fork-number ${styles['column-delete-icon']}`}></button>
+            className='border-0 p-0 ml-2 mt-2'
+          />
         </div>
       );
     });

src/components/delete-component.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 import intl from 'react-intl-universal';
-import styles from '../css/plugin-layout.module.css';
+import {DtableIconButton} from 'dtable-ui-component';
 
 class DeleteRowDropdownMenu extends React.Component {
 
@@ -23,7 +23,11 @@ class DeleteRowDropdownMenu extends React.Component {
     return(
       <Dropdown isOpen={this.state.isItemMenuShow} toggle={this.onDropdownToggleClick} style={this.props.style || {}} className="align-middle">
         <DropdownToggle tag="span" data-toggle="dropdown" aria-expanded={this.state.isItemMenuShow}>
-          <i className={'dtable-font dtable-icon-more-level delete-row-font ' + styles['more-level-font']}></i>
+          <DtableIconButton
+            symbol='dtable-icon-more-level'
+            tooltip={intl.get('Close')}
+            aria-label={intl.get('Close')}
+          />
         </DropdownToggle>
         <DropdownMenu right={true}>
           <DropdownItem onClick={this.props.onDeleteRow}>

src/components/tips/delete-tip.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import intl from 'react-intl-universal';
 import { FormGroup, Label, Input } from 'reactstrap';
 import styles from '../../css/plugin-layout.module.css';
+import { DtableCustomButton } from 'dtable-ui-component';
 
 const propTypes = {
   onDelete: PropTypes.func.isRequired,
@@ -45,8 +46,8 @@ class DeleteTip extends React.Component {
           </Label>
         </FormGroup>
         <div className={styles['delete-tip-footer']}>
-          <button className="btn btn-secondary mr-2" onClick={this.props.toggle}>{intl.get('Cancel')}</button>
-          <button className="btn btn-primary" onClick={this.onDelete}>{intl.get('Delete')}</button>
+          <DtableCustomButton variant='secondary' className="mr-2" onClick={this.props.toggle}>{intl.get('Cancel')}</DtableCustomButton>
+          <DtableCustomButton variant='primary' onClick={this.onDelete}>{intl.get('Delete')}</DtableCustomButton>
         </div>
       </div>
     );