@gmfe/table-x 2.14.15 → 2.14.19-beta.0

package/src/util/operation.js

@@ -1,249 +1,249 @@
-import classNames from 'classnames'
-import PropTypes from 'prop-types'
-import SVGCheckDetail from '../../svg/check-detail.svg'
-import React, { cloneElement, useRef } from 'react'
-import { PopupContentConfirm, Popover, Button, ToolTip } from '@gmfe/react'
-import styled from 'styled-components'
-import SVGDelete from '../../svg/delete.svg'
-import SVGPen from '../../svg/pen.svg'
-import SVGRecover from '../../svg/recover.svg'
-import { getLocale } from '@gmfe/locales'
-
-const IconTip = styled.div`
-  padding: 8px;
-`
-
-const OperationHeader = () => <div className='text-center'>操作</div>
-
-const OperationIconTip = ({ tip, children }) => {
-  const tipRef = useRef()
-
-  const handleClick = (fc, event) => {
-    tipRef.current.apiDoSetActive()
-    fc && fc(event)
-  }
-
-  return (
-    <ToolTip popup={<IconTip>{tip}</IconTip>} showArrow ref={tipRef}>
-      {cloneElement(children, {
-        onClick: event => handleClick(children.props.onClick, event)
-      })}
-    </ToolTip>
-  )
-}
-
-OperationIconTip.propTypes = {
-  tip: PropTypes.string.isRequired,
-  children: PropTypes.object.isRequired
-}
-
-const OperationCell = props => (
-  <div {...props} className={classNames('text-center', props.className)} />
-)
-
-OperationCell.propTypes = {
-  className: PropTypes.string,
-  style: PropTypes.object
-}
-
-const OperationDetail = ({ href, open, onClick, className, ...rest }) => {
-  const handleClick = e => {
-    onClick && onClick(e)
-
-    if (href) {
-      if (open) {
-        window.open(href)
-      } else {
-        window.location.href = href
-      }
-    }
-  }
-
-  return (
-    <div
-      {...rest}
-      onClick={handleClick}
-      className={classNames(
-        'gm-inline-block gm-cursor gm-padding-5 gm-text-14 gm-text gm-text-hover-primary',
-        className
-      )}
-    >
-      <OperationIconTip tip={getLocale('详情')}>
-        <div>
-          <SVGCheckDetail />
-        </div>
-      </OperationIconTip>
-    </div>
-  )
-}
-
-OperationDetail.propTypes = {
-  /** 如果提供了 href */
-  href: PropTypes.string,
-  /** true就新开tab页面 */
-  open: PropTypes.bool,
-  onClick: PropTypes.func,
-  className: PropTypes.string,
-  style: PropTypes.object
-}
-
-const OperationDelete = props => {
-  const { title, onClick, className, children, ...rest } = props
-  const refPopover = useRef()
-
-  const handleDelete = () => {
-    refPopover.current.apiDoSetActive(false)
-    return onClick()
-  }
-
-  const handleCancel = () => {
-    refPopover.current.apiDoSetActive(false)
-  }
-
-  const popup = (
-    <PopupContentConfirm
-      type='delete'
-      title={title}
-      onDelete={handleDelete}
-      onCancel={handleCancel}
-    >
-      {children || '确定删除？'}
-    </PopupContentConfirm>
-  )
-
-  return (
-    <Popover ref={refPopover} right popup={popup} showArrow>
-      <div
-        {...rest}
-        className={classNames(
-          'gm-inline-block gm-cursor gm-padding-5 gm-text-14 gm-text gm-text-hover-primary',
-          className
-        )}
-      >
-        <OperationIconTip tip={getLocale('删除')}>
-          <div>
-            <SVGDelete />
-          </div>
-        </OperationIconTip>
-      </div>
-    </Popover>
-  )
-}
-
-OperationDelete.propTypes = {
-  title: PropTypes.string,
-  onClick: PropTypes.func.isRequired,
-  className: PropTypes.string,
-  style: PropTypes.object
-}
-
-const OperationRowEdit = ({
-  children,
-  isEditing,
-  onClick,
-  onSave,
-  onCancel
-}) => {
-  const handleClick = () => {
-    onClick && onClick()
-  }
-
-  const handleSave = () => {
-    onSave && onSave()
-  }
-
-  const handleCancel = () => {
-    onCancel && onCancel()
-  }
-
-  return !isEditing ? (
-    <OperationCell>
-      <OperationIconTip tip={getLocale('编辑')}>
-        <span className='gm-padding-5'>
-          <SVGPen
-            className='gm-inline-block gm-cursor gm-text-14 gm-text gm-text-hover-primary'
-            onClick={handleClick}
-          />
-        </span>
-      </OperationIconTip>
-      {children}
-    </OperationCell>
-  ) : (
-    <OperationCell>
-      <Button type='link' onClick={handleSave}>
-        保存
-      </Button>
-      <span className='gm-padding-lr-5'>|</span>
-      <Button type='link' onClick={handleCancel}>
-        取消
-      </Button>
-    </OperationCell>
-  )
-}
-
-OperationRowEdit.propTypes = {
-  isEditing: PropTypes.bool.isRequired,
-  onClick: PropTypes.func,
-  onSave: PropTypes.func,
-  onCancel: PropTypes.func
-}
-
-const OperationRecover = props => {
-  const { title, onClick, className, children, ...rest } = props
-  const refPopover = useRef()
-
-  const handleRevover = () => {
-    refPopover.current.apiDoSetActive(false)
-    return onClick()
-  }
-
-  const handleCancel = () => {
-    refPopover.current.apiDoSetActive(false)
-  }
-
-  const popup = (
-    <PopupContentConfirm
-      type='save'
-      title={title}
-      onSave={handleRevover}
-      onCancel={handleCancel}
-    >
-      {children || '确定恢复？'}
-    </PopupContentConfirm>
-  )
-
-  return (
-    <Popover ref={refPopover} right popup={popup} showArrow>
-      <div
-        {...rest}
-        className={classNames(
-          'gm-inline-block gm-cursor gm-padding-5 gm-text-14 gm-text gm-text-hover-primary',
-          className
-        )}
-      >
-        <OperationIconTip tip={getLocale('恢复')}>
-          <div>
-            <SVGRecover />
-          </div>
-        </OperationIconTip>
-      </div>
-    </Popover>
-  )
-}
-
-OperationRecover.propTypes = {
-  title: PropTypes.string,
-  onClick: PropTypes.func.isRequired,
-  className: PropTypes.string,
-  style: PropTypes.object
-}
-
-export {
-  OperationHeader,
-  OperationDelete,
-  OperationRecover,
-  OperationDetail,
-  OperationCell,
-  OperationRowEdit,
-  OperationIconTip
-}
+import classNames from 'classnames'
+import PropTypes from 'prop-types'
+import SVGCheckDetail from '../../svg/check-detail.svg'
+import React, { cloneElement, useRef } from 'react'
+import { PopupContentConfirm, Popover, Button, ToolTip } from '@gmfe/react'
+import styled from 'styled-components'
+import SVGDelete from '../../svg/delete.svg'
+import SVGPen from '../../svg/pen.svg'
+import SVGRecover from '../../svg/recover.svg'
+import { getLocale } from '@gmfe/locales'
+
+const IconTip = styled.div`
+  padding: 8px;
+`
+
+const OperationHeader = () => <div className='text-center'>操作</div>
+
+const OperationIconTip = ({ tip, children }) => {
+  const tipRef = useRef()
+
+  const handleClick = (fc, event) => {
+    tipRef.current.apiDoSetActive()
+    fc && fc(event)
+  }
+
+  return (
+    <ToolTip popup={<IconTip>{tip}</IconTip>} showArrow ref={tipRef}>
+      {cloneElement(children, {
+        onClick: event => handleClick(children.props.onClick, event)
+      })}
+    </ToolTip>
+  )
+}
+
+OperationIconTip.propTypes = {
+  tip: PropTypes.string.isRequired,
+  children: PropTypes.object.isRequired
+}
+
+const OperationCell = props => (
+  <div {...props} className={classNames('text-center', props.className)} />
+)
+
+OperationCell.propTypes = {
+  className: PropTypes.string,
+  style: PropTypes.object
+}
+
+const OperationDetail = ({ href, open, onClick, className, ...rest }) => {
+  const handleClick = e => {
+    onClick && onClick(e)
+
+    if (href) {
+      if (open) {
+        window.open(href)
+      } else {
+        window.location.href = href
+      }
+    }
+  }
+
+  return (
+    <div
+      {...rest}
+      onClick={handleClick}
+      className={classNames(
+        'gm-inline-block gm-cursor gm-padding-5 gm-text-14 gm-text gm-text-hover-primary',
+        className
+      )}
+    >
+      <OperationIconTip tip={getLocale('详情')}>
+        <div>
+          <SVGCheckDetail />
+        </div>
+      </OperationIconTip>
+    </div>
+  )
+}
+
+OperationDetail.propTypes = {
+  /** 如果提供了 href */
+  href: PropTypes.string,
+  /** true就新开tab页面 */
+  open: PropTypes.bool,
+  onClick: PropTypes.func,
+  className: PropTypes.string,
+  style: PropTypes.object
+}
+
+const OperationDelete = props => {
+  const { title, onClick, className, children, ...rest } = props
+  const refPopover = useRef()
+
+  const handleDelete = () => {
+    refPopover.current.apiDoSetActive(false)
+    return onClick()
+  }
+
+  const handleCancel = () => {
+    refPopover.current.apiDoSetActive(false)
+  }
+
+  const popup = (
+    <PopupContentConfirm
+      type='delete'
+      title={title}
+      onDelete={handleDelete}
+      onCancel={handleCancel}
+    >
+      {children || '确定删除？'}
+    </PopupContentConfirm>
+  )
+
+  return (
+    <Popover ref={refPopover} right popup={popup} showArrow>
+      <div
+        {...rest}
+        className={classNames(
+          'gm-inline-block gm-cursor gm-padding-5 gm-text-14 gm-text gm-text-hover-primary',
+          className
+        )}
+      >
+        <OperationIconTip tip={getLocale('删除')}>
+          <div>
+            <SVGDelete />
+          </div>
+        </OperationIconTip>
+      </div>
+    </Popover>
+  )
+}
+
+OperationDelete.propTypes = {
+  title: PropTypes.string,
+  onClick: PropTypes.func.isRequired,
+  className: PropTypes.string,
+  style: PropTypes.object
+}
+
+const OperationRowEdit = ({
+  children,
+  isEditing,
+  onClick,
+  onSave,
+  onCancel
+}) => {
+  const handleClick = () => {
+    onClick && onClick()
+  }
+
+  const handleSave = () => {
+    onSave && onSave()
+  }
+
+  const handleCancel = () => {
+    onCancel && onCancel()
+  }
+
+  return !isEditing ? (
+    <OperationCell>
+      <OperationIconTip tip={getLocale('编辑')}>
+        <span className='gm-padding-5'>
+          <SVGPen
+            className='gm-inline-block gm-cursor gm-text-14 gm-text gm-text-hover-primary'
+            onClick={handleClick}
+          />
+        </span>
+      </OperationIconTip>
+      {children}
+    </OperationCell>
+  ) : (
+    <OperationCell>
+      <Button type='link' onClick={handleSave}>
+        保存
+      </Button>
+      <span className='gm-padding-lr-5'>|</span>
+      <Button type='link' onClick={handleCancel}>
+        取消
+      </Button>
+    </OperationCell>
+  )
+}
+
+OperationRowEdit.propTypes = {
+  isEditing: PropTypes.bool.isRequired,
+  onClick: PropTypes.func,
+  onSave: PropTypes.func,
+  onCancel: PropTypes.func
+}
+
+const OperationRecover = props => {
+  const { title, onClick, className, children, ...rest } = props
+  const refPopover = useRef()
+
+  const handleRevover = () => {
+    refPopover.current.apiDoSetActive(false)
+    return onClick()
+  }
+
+  const handleCancel = () => {
+    refPopover.current.apiDoSetActive(false)
+  }
+
+  const popup = (
+    <PopupContentConfirm
+      type='save'
+      title={title}
+      onSave={handleRevover}
+      onCancel={handleCancel}
+    >
+      {children || '确定恢复？'}
+    </PopupContentConfirm>
+  )
+
+  return (
+    <Popover ref={refPopover} right popup={popup} showArrow>
+      <div
+        {...rest}
+        className={classNames(
+          'gm-inline-block gm-cursor gm-padding-5 gm-text-14 gm-text gm-text-hover-primary',
+          className
+        )}
+      >
+        <OperationIconTip tip={getLocale('恢复')}>
+          <div>
+            <SVGRecover />
+          </div>
+        </OperationIconTip>
+      </div>
+    </Popover>
+  )
+}
+
+OperationRecover.propTypes = {
+  title: PropTypes.string,
+  onClick: PropTypes.func.isRequired,
+  className: PropTypes.string,
+  style: PropTypes.object
+}
+
+export {
+  OperationHeader,
+  OperationDelete,
+  OperationRecover,
+  OperationDetail,
+  OperationCell,
+  OperationRowEdit,
+  OperationIconTip
+}

package/src/util/sort_header.js

@@ -1,49 +1,49 @@
-import classNames from 'classnames'
-import PropTypes from 'prop-types'
-import _ from 'lodash'
-import React from 'react'
-
-const SortHeader = ({ type, className, onClick, onChange, ...rest }) => {
-  const handleClick = e => {
-    onClick(e)
-
-    if (!type) {
-      onChange('asc')
-    } else if (type === 'asc') {
-      onChange('desc')
-    } else if (type === 'desc') {
-      onChange(null)
-    }
-  }
-
-  return (
-    <span
-      {...rest}
-      onClick={handleClick}
-      className={classNames(
-        'gm-table-x-sort-header gm-cursor',
-        {
-          'gm-table-x-sort-header-asc': type === 'asc',
-          'gm-table-x-sort-header-desc': type === 'desc'
-        },
-        className
-      )}
-    />
-  )
-}
-
-SortHeader.propTypes = {
-  type: PropTypes.oneOf(['asc', 'desc']),
-  /** 之前很多用了 onClick */
-  onClick: PropTypes.func,
-  /** 建议用onChange，这样不用管理状态 */
-  onChange: PropTypes.func,
-  className: PropTypes.string
-}
-
-SortHeader.defaultProps = {
-  onClick: _.noop,
-  onChange: _.noop
-}
-
-export default SortHeader
+import classNames from 'classnames'
+import PropTypes from 'prop-types'
+import _ from 'lodash'
+import React from 'react'
+
+const SortHeader = ({ type, className, onClick, onChange, ...rest }) => {
+  const handleClick = e => {
+    onClick(e)
+
+    if (!type) {
+      onChange('asc')
+    } else if (type === 'asc') {
+      onChange('desc')
+    } else if (type === 'desc') {
+      onChange(null)
+    }
+  }
+
+  return (
+    <span
+      {...rest}
+      onClick={handleClick}
+      className={classNames(
+        'gm-table-x-sort-header gm-cursor',
+        {
+          'gm-table-x-sort-header-asc': type === 'asc',
+          'gm-table-x-sort-header-desc': type === 'desc'
+        },
+        className
+      )}
+    />
+  )
+}
+
+SortHeader.propTypes = {
+  type: PropTypes.oneOf(['asc', 'desc']),
+  /** 之前很多用了 onClick */
+  onClick: PropTypes.func,
+  /** 建议用onChange，这样不用管理状态 */
+  onChange: PropTypes.func,
+  className: PropTypes.string
+}
+
+SortHeader.defaultProps = {
+  onClick: _.noop,
+  onChange: _.noop
+}
+
+export default SortHeader

package/src/variables.less

@@ -1,28 +1,28 @@
-.gm-table-x-edit-table-common-input {
-  width: 100%;
-  outline: none;
-  border-width: 1px;
-  border-style: solid;
-  padding-left: 8px;
-  padding-right: 8px;
-  box-sizing: border-box;
-  height: 32px;
-  line-height: 32px;
-  border-color: #d4d7e9;
-  border-radius: 2px;
-
-  &:hover {
-    border-color: @brand-primary;
-    box-shadow: 0 0 0 1px @brand-primary;
-  }
-
-  &:focus {
-    border-color: @brand-primary;
-    box-shadow: 0 0 0 1px @brand-primary;
-  }
-
-  &.gm-popover-active {
-    border-color: @brand-primary;
-    box-shadow: 0 0 0 1px @brand-primary;
-  }
-}
+.gm-table-x-edit-table-common-input {
+  width: 100%;
+  outline: none;
+  border-width: 1px;
+  border-style: solid;
+  padding-left: 8px;
+  padding-right: 8px;
+  box-sizing: border-box;
+  height: 32px;
+  line-height: 32px;
+  border-color: #d4d7e9;
+  border-radius: 2px;
+
+  &:hover {
+    border-color: @brand-primary;
+    box-shadow: 0 0 0 1px @brand-primary;
+  }
+
+  &:focus {
+    border-color: @brand-primary;
+    box-shadow: 0 0 0 1px @brand-primary;
+  }
+
+  &.gm-popover-active {
+    border-color: @brand-primary;
+    box-shadow: 0 0 0 1px @brand-primary;
+  }
+}