@gmfe/table-x 2.14.20 → 2.14.26-beta.0

package/src/util/batch_action_bar.js

@@ -1,124 +1,124 @@
-import React from 'react'
-import _ from 'lodash'
-import { Flex, Popover, Button } from '@gmfe/react'
-import styled from 'styled-components'
-import { getLocale } from '@gmfe/locales'
-import PropTypes from 'prop-types'
-import SVGRemove from '../../svg/remove.svg'
-import SVGDelete from '../../svg/delete.svg'
-import SVGEdit from '../../svg/edit-pen.svg'
-import SVGBusiness from '../../svg/business.svg'
-
-const ICON_MAP = {
-  delete: <SVGDelete />,
-  edit: <SVGEdit />,
-  business: <SVGBusiness />
-}
-
-const Icon = styled.span`
-  padding-right: 4px;
-`
-
-const BatchActionBar = props => {
-  const {
-    isSelectAll,
-    pure,
-    count,
-    batchActions,
-    toggleSelectAll,
-    onClose,
-    extra
-  } = props
-
-  let selectAllBtn = null
-  // 如果pure = true,不展示[勾选所有页内容]按钮
-  if (!pure) {
-    selectAllBtn = isSelectAll ? (
-      <Button
-        type='primary'
-        className='gm-margin-left-20'
-        onClick={() => toggleSelectAll(false)}
-      >
-        {getLocale('勾选当前页内容')}
-      </Button>
-    ) : (
-      <Button
-        type='primary'
-        className='gm-margin-left-20'
-        onClick={() => toggleSelectAll(true)}
-      >
-        {getLocale('勾选所有页内容')}
-      </Button>
-    )
-  }
-
-  return (
-    <Flex className='gm-react-table-select-batch-action-bar' alignCenter>
-      <Popover
-        type='hover'
-        popup={<div className='gm-padding-5'>{getLocale('取消批量勾选')}</div>}
-        bottom
-        left
-        offset={-8}
-        showArrow
-      >
-        <span style={{ display: 'block', width: '12px' }} className='gm-cursor'>
-          <SVGRemove onClick={onClose} />
-        </span>
-      </Popover>
-      {selectAllBtn}
-      {_.isNumber(count) ? (
-        <div className='gm-text-bold gm-margin-left-20'>
-          {getLocale('已选择')}
-          <span className='text-primary'>{count}</span>
-          {getLocale('项')}
-        </div>
-      ) : (
-        <div className='gm-text-bold gm-margin-left-20'>
-          {getLocale('已选择')}
-          <span className='text-primary'>{getLocale('所有')}</span>
-          {getLocale('页')}
-        </div>
-      )}
-      {extra}
-      {batchActions.length && <div className='gm-margin-left-20'>|</div>}
-      {batchActions.map(
-        o =>
-          o.show !== false && (
-            <div
-              data-id={o.dataId}
-              onClick={o.onClick} // eslint-disable-line
-              className='gm-text-hover-primary gm-cursor gm-text-bold'
-              style={{ marginLeft: '30px' }}
-              key={o.name}
-            >
-              {ICON_MAP[o.type] && <Icon>{ICON_MAP[o.type]}</Icon>}
-              {o.name}
-            </div>
-          )
-      )}
-    </Flex>
-  )
-}
-
-BatchActionBar.propTypes = {
-  /** pure=true,不展示[勾选所有页内容]按钮,也没有勾选所有页相关操作 */
-  pure: PropTypes.bool,
-  /** 是否选中所有页 */
-  isSelectAll: PropTypes.bool,
-  /** 选中多少项 */
-  count: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
-  /** 批量操作按钮 */
-  batchActions: PropTypes.array.isRequired,
-  /** 所有页/当前页 切换函数 */
-  toggleSelectAll: PropTypes.func,
-  /** 点击关闭BatchActionBar的回调函数 */
-  onClose: PropTypes.func.isRequired,
-  extra: PropTypes.node
-}
-
-BatchActionBar.defaultProps = {
-  toggleSelectAll: () => {}
-}
-
-export default BatchActionBar
+import React from 'react'
+import _ from 'lodash'
+import { Flex, Popover, Button } from '@gmfe/react'
+import styled from 'styled-components'
+import { getLocale } from '@gmfe/locales'
+import PropTypes from 'prop-types'
+import SVGRemove from '../../svg/remove.svg'
+import SVGDelete from '../../svg/delete.svg'
+import SVGEdit from '../../svg/edit-pen.svg'
+import SVGBusiness from '../../svg/business.svg'
+
+const ICON_MAP = {
+  delete: <SVGDelete />,
+  edit: <SVGEdit />,
+  business: <SVGBusiness />
+}
+
+const Icon = styled.span`
+  padding-right: 4px;
+`
+
+const BatchActionBar = props => {
+  const {
+    isSelectAll,
+    pure,
+    count,
+    batchActions,
+    toggleSelectAll,
+    onClose,
+    extra
+  } = props
+
+  let selectAllBtn = null
+  // 如果pure = true,不展示[勾选所有页内容]按钮
+  if (!pure) {
+    selectAllBtn = isSelectAll ? (
+      <Button
+        type='primary'
+        className='gm-margin-left-20'
+        onClick={() => toggleSelectAll(false)}
+      >
+        {getLocale('勾选当前页内容')}
+      </Button>
+    ) : (
+      <Button
+        type='primary'
+        className='gm-margin-left-20'
+        onClick={() => toggleSelectAll(true)}
+      >
+        {getLocale('勾选所有页内容')}
+      </Button>
+    )
+  }
+
+  return (
+    <Flex className='gm-react-table-select-batch-action-bar' alignCenter>
+      <Popover
+        type='hover'
+        popup={<div className='gm-padding-5'>{getLocale('取消批量勾选')}</div>}
+        bottom
+        left
+        offset={-8}
+        showArrow
+      >
+        <span style={{ display: 'block', width: '12px' }} className='gm-cursor'>
+          <SVGRemove onClick={onClose} />
+        </span>
+      </Popover>
+      {selectAllBtn}
+      {_.isNumber(count) ? (
+        <div className='gm-text-bold gm-margin-left-20'>
+          {getLocale('已选择')}
+          <span className='text-primary'>{count}</span>
+          {getLocale('项')}
+        </div>
+      ) : (
+        <div className='gm-text-bold gm-margin-left-20'>
+          {getLocale('已选择')}
+          <span className='text-primary'>{getLocale('所有')}</span>
+          {getLocale('页')}
+        </div>
+      )}
+      {extra}
+      {batchActions.length && <div className='gm-margin-left-20'>|</div>}
+      {batchActions.map(
+        o =>
+          o.show !== false && (
+            <div
+              data-id={o.dataId}
+              onClick={o.onClick} // eslint-disable-line
+              className='gm-text-hover-primary gm-cursor gm-text-bold'
+              style={{ marginLeft: '30px' }}
+              key={o.name}
+            >
+              {ICON_MAP[o.type] && <Icon>{ICON_MAP[o.type]}</Icon>}
+              {o.name}
+            </div>
+          )
+      )}
+    </Flex>
+  )
+}
+
+BatchActionBar.propTypes = {
+  /** pure=true,不展示[勾选所有页内容]按钮,也没有勾选所有页相关操作 */
+  pure: PropTypes.bool,
+  /** 是否选中所有页 */
+  isSelectAll: PropTypes.bool,
+  /** 选中多少项 */
+  count: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
+  /** 批量操作按钮 */
+  batchActions: PropTypes.array.isRequired,
+  /** 所有页/当前页 切换函数 */
+  toggleSelectAll: PropTypes.func,
+  /** 点击关闭BatchActionBar的回调函数 */
+  onClose: PropTypes.func.isRequired,
+  extra: PropTypes.node
+}
+
+BatchActionBar.defaultProps = {
+  toggleSelectAll: () => {}
+}
+
+export default BatchActionBar

package/src/util/edit.js

@@ -1,83 +1,83 @@
-import React, { useRef } from 'react'
-import classNames from 'classnames'
-import PropTypes from 'prop-types'
-import { Popover } from '@gmfe/react'
-import SVGEditPen from '../../svg/edit-pen.svg'
-import SVGPlusSquare from '../../svg/plus-square.svg'
-import SVGMinusSquare from '../../svg/minus-square.svg'
-import { OperationCell, OperationIconTip } from './operation'
-import { getLocale } from '@gmfe/locales'
-
-const EditButton = ({ popupRender, right }) => {
-  const refPopover = useRef(null)
-  const closePopup = () => refPopover.current.apiDoSetActive(false)
-
-  return (
-    <Popover
-      ref={refPopover}
-      right={right}
-      popup={popupRender(closePopup)}
-      offset={right ? 24 : -24}
-      showArrow
-      arrowLeft={right ? 'calc(100% - 42px)' : 26}
-      animName={false}
-    >
-      <span className='gm-table-x-edit-button'>
-        <OperationIconTip tip={getLocale('编辑')}>
-          <span>
-            <SVGEditPen />
-          </span>
-        </OperationIconTip>
-      </span>
-    </Popover>
-  )
-}
-
-EditButton.propTypes = {
-  popupRender: PropTypes.func.isRequired,
-  right: PropTypes.bool
-}
-
-const EditOperation = props => {
-  return (
-    <OperationCell>
-      <Popover
-        showArrow
-        type='hover'
-        popup={<div className='gm-padding-5'>添加</div>}
-        disabled={!props.onAddRow}
-      >
-        <span
-          onClick={props.onAddRow}
-          className={classNames('gm-table-x-edit-action-add', {
-            disabled: !props.onAddRow
-          })}
-        >
-          <SVGPlusSquare />
-        </span>
-      </Popover>
-      <Popover
-        showArrow
-        type='hover'
-        popup={<div className='gm-padding-5'>删除</div>}
-        disabled={!props.onDeleteRow}
-      >
-        <span
-          onClick={props.onDeleteRow}
-          className={classNames('gm-table-x-edit-action-delete', {
-            disabled: !props.onDeleteRow
-          })}
-        >
-          <SVGMinusSquare />
-        </span>
-      </Popover>
-    </OperationCell>
-  )
-}
-
-EditOperation.propTypes = {
-  onAddRow: PropTypes.func,
-  onDeleteRow: PropTypes.func
-}
-
-export { EditButton, EditOperation }
+import React, { useRef } from 'react'
+import classNames from 'classnames'
+import PropTypes from 'prop-types'
+import { Popover } from '@gmfe/react'
+import SVGEditPen from '../../svg/edit-pen.svg'
+import SVGPlusSquare from '../../svg/plus-square.svg'
+import SVGMinusSquare from '../../svg/minus-square.svg'
+import { OperationCell, OperationIconTip } from './operation'
+import { getLocale } from '@gmfe/locales'
+
+const EditButton = ({ popupRender, right }) => {
+  const refPopover = useRef(null)
+  const closePopup = () => refPopover.current.apiDoSetActive(false)
+
+  return (
+    <Popover
+      ref={refPopover}
+      right={right}
+      popup={popupRender(closePopup)}
+      offset={right ? 24 : -24}
+      showArrow
+      arrowLeft={right ? 'calc(100% - 42px)' : 26}
+      animName={false}
+    >
+      <span className='gm-table-x-edit-button'>
+        <OperationIconTip tip={getLocale('编辑')}>
+          <span>
+            <SVGEditPen />
+          </span>
+        </OperationIconTip>
+      </span>
+    </Popover>
+  )
+}
+
+EditButton.propTypes = {
+  popupRender: PropTypes.func.isRequired,
+  right: PropTypes.bool
+}
+
+const EditOperation = props => {
+  return (
+    <OperationCell>
+      <Popover
+        showArrow
+        type='hover'
+        popup={<div className='gm-padding-5'>添加</div>}
+        disabled={!props.onAddRow}
+      >
+        <span
+          onClick={props.onAddRow}
+          className={classNames('gm-table-x-edit-action-add', {
+            disabled: !props.onAddRow
+          })}
+        >
+          <SVGPlusSquare />
+        </span>
+      </Popover>
+      <Popover
+        showArrow
+        type='hover'
+        popup={<div className='gm-padding-5'>删除</div>}
+        disabled={!props.onDeleteRow}
+      >
+        <span
+          onClick={props.onDeleteRow}
+          className={classNames('gm-table-x-edit-action-delete', {
+            disabled: !props.onDeleteRow
+          })}
+        >
+          <SVGMinusSquare />
+        </span>
+      </Popover>
+    </OperationCell>
+  )
+}
+
+EditOperation.propTypes = {
+  onAddRow: PropTypes.func,
+  onDeleteRow: PropTypes.func
+}
+
+export { EditButton, EditOperation }