choerodon-ui/pro/es/table/combo-customization-settings/column-groups/ItemSuffix.js

An enterprise-class UI design language and React-based implementation

import React, { useCallback, useContext } from 'react';
import { observer } from 'mobx-react-lite';
import Button from '../../../button/Button';
import { ButtonColor, ButtonTooltip, FuncType } from '../../../button/enum';
import { Size } from '../../../core/enum';
import TableContext from '../../TableContext';
import { ColumnLock } from '../../enum';
import { $l } from '../../../locale-context';
import Tooltip from '../../../tooltip';

var ItemSuffix = function ItemSuffix(props) {
  var records = props.records,
      record = props.record;

  var _useContext = useContext(TableContext),
      _useContext$tableStor = _useContext.tableStore,
      columnHideable = _useContext$tableStor.columnHideable,
      columnDraggable = _useContext$tableStor.columnDraggable;

  var changeLock = useCallback(function (lock) {
    var sort = record.get('sort');
    record.set('lock', lock);

    if (!lock) {
      records.forEach(function (r) {
        if (r.get('sort') > sort) {
          r.set('lock', lock);
        }
      });
    } else {
      records.forEach(function (r) {
        if (r.get('sort') < sort) {
          r.set('lock', lock);
        }
      });
    }
  }, [record]);
  var changeHidden = useCallback(function (hidden) {
    record.set('hidden', hidden);
  }, [record]);

  var getTreeNodes = function getTreeNodes() {
    var lock = record.get('lock');

    if (columnDraggable && record.get('draggable') !== false) {
      if (!record.parent) {
        if (lock) {
          return /*#__PURE__*/React.createElement(Tooltip, {
            title: $l('Table', 'lock_column')
          }, /*#__PURE__*/React.createElement(Button, {
            funcType: FuncType.flat,
            color: ButtonColor.primary,
            size: Size.small,
            icon: "lock-o",
            onClick: function onClick() {
              return changeLock(false);
            }
          }));
        }

        return /*#__PURE__*/React.createElement(Tooltip, {
          title: $l('Table', 'cancel_lock_column')
        }, /*#__PURE__*/React.createElement(Button, {
          funcType: FuncType.flat,
          size: Size.small,
          icon: "lock_open",
          onClick: function onClick() {
            return changeLock(ColumnLock.left);
          },
          tooltip: ButtonTooltip.always
        }));
      }
    }
  };

  return /*#__PURE__*/React.createElement(React.Fragment, null, getTreeNodes(), /*#__PURE__*/React.createElement(Tooltip, {
    title: record.get('hidden') === false ? $l('Table', 'show') : $l('Table', 'hide')
  }, /*#__PURE__*/React.createElement(Button, {
    funcType: FuncType.flat,
    color: record.get('hidden') === false ? ButtonColor.primary : ButtonColor["default"],
    size: Size.small,
    disabled: !columnHideable || record.get('hideable') === false || record.parent && record.parent.get('hidden'),
    icon: record.get('hidden') === false ? 'visibility' : 'visibility_off',
    onClick: function onClick() {
      return changeHidden(!record.get('hidden'));
    }
  })));
};

ItemSuffix.displayName = 'ItemSuffix';
export default observer(ItemSuffix);
//# sourceMappingURL=ItemSuffix.js.map