@aliretail/react-materials-components/es/Tablex/components/FullscreenButton/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 React from 'react';
import * as R from 'ramda';
import { useFullscreen } from 'ahooks';
import { TableConsumer } from "../../TableContext";

function FullscreenButton(_ref) {
  var tableState = _ref.tableState;
  var containerId = tableState.containerId;

  var _useFullscreen = useFullscreen(document.getElementById(containerId), {
    onFull: function onFull() {
      var ele = document.getElementById(containerId);

      if (ele) {
        ele.style.padding = '20px';
        ele.style.background = '#ffffff';
      }
    },
    onExitFull: function onExitFull() {
      var ele = document.getElementById(containerId);

      if (ele) {
        ele.style.padding = '0';
        ele.style.background = 'initial';
      }
    }
  }),
      isFullscreen = _useFullscreen[0],
      toggleFull = _useFullscreen[1].toggleFull;

  return /*#__PURE__*/React.createElement(_Balloon, {
    trigger: /*#__PURE__*/React.createElement(_Button, {
      text: true,
      size: "large",
      onClick: toggleFull,
      "data-name": "AliretailTableFullscreen"
    }, /*#__PURE__*/React.createElement(_Icon, {
      type: "ic_fullscreen"
    })),
    triggerType: "hover",
    closable: false
  }, "\u5168\u5C4F\u67E5\u770B");
}

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

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

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

  TableFullscreen.displayName = 'AliretailTableFullscreen';
  return TableFullscreen;
};

export default withContext(FullscreenButton);