@aliretail/react-materials-components/es/Tablex/components/CompactButton/index.js

B 端物料组件库

import _extends from "@babel/runtime/helpers/extends";
import _Balloon from "@alifd/next/es/balloon";
import _Button from "@alifd/next/es/button";
import _Icon from "@alifd/next/es/icon";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import * as React from 'react';
import * as R from 'ramda';
import { TableConsumer } from "../../TableContext";

var CompactButton = /*#__PURE__*/function (_React$PureComponent) {
  _inheritsLoose(CompactButton, _React$PureComponent);

  function CompactButton() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;

    _this.onSizeChange = function () {
      var size = _this.props.tableState.size;

      if (!size || size === 'medium') {
        _this.props.tableStateChange({
          size: 'small'
        });
      }

      if (size === 'small') {
        _this.props.tableStateChange({
          size: 'medium'
        });
      }
    };

    return _this;
  }

  var _proto = CompactButton.prototype;

  _proto.render = function render() {
    return /*#__PURE__*/React.createElement(_Balloon, {
      trigger: /*#__PURE__*/React.createElement(_Button, {
        text: true,
        size: "large",
        onClick: this.onSizeChange,
        "data-name": "AliretailTableCompact"
      }, /*#__PURE__*/React.createElement(_Icon, {
        type: "ic-Shape1"
      })),
      triggerType: "hover",
      closable: false
    }, "\u5BC6\u5EA6\u8C03\u6574");
  };

  return CompactButton;
}(React.PureComponent);

var withContext = function withContext(Comp) {
  var TableCompact = function TableCompact(props) {
    // props 为组件直接传入的 props 一般不需要使用此 props
    return /*#__PURE__*/React.createElement(TableConsumer, null, function (context) {
      var filterProps = R.pickAll(['compactProps', 'tableState', 'tableStateChange'], context);

      var actionBarProps = _extends({}, filterProps.compactProps, props, {
        tableState: filterProps.tableState,
        tableStateChange: filterProps.tableStateChange
      });

      return /*#__PURE__*/React.createElement(Comp, actionBarProps);
    });
  };

  TableCompact.displayName = 'AliretailTableCompact';
  return TableCompact;
};

export default withContext(CompactButton);