@confi/conflux-react-ui-test-package/esm/table/table.js

Modern and minimalist React UI library.

import _extends from "@babel/runtime/helpers/esm/extends";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _JSXStyle from "styled-jsx/style";
import React, { useEffect, useMemo, useRef } from 'react';
import TableHead from './table-head';
import TableBody from './table-body';
import useRealShape from '../utils/use-real-shape';
import useResize from '../utils/use-resize';
import { TableContext } from './table-context';
import useCurrentState from '../utils/use-current-state';
var defaultProps = {
  hover: true,
  emptyText: '',
  onRow: function () {},
  onCell: function () {},
  onChange: function () {},
  className: ''
};

var Table = function Table(_ref) {
  var children = _ref.children,
      data = _ref.data,
      hover = _ref.hover,
      emptyText = _ref.emptyText,
      onRow = _ref.onRow,
      onCell = _ref.onCell,
      onChange = _ref.onChange,
      className = _ref.className,
      props = _objectWithoutProperties(_ref, ["children", "data", "hover", "emptyText", "onRow", "onCell", "onChange", "className"]);

  var ref = useRef(null);

  var _useRealShape = useRealShape(ref),
      _useRealShape2 = _slicedToArray(_useRealShape, 2),
      width = _useRealShape2[0].width,
      updateShape = _useRealShape2[1];

  var _useCurrentState = useCurrentState([]),
      _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
      columns = _useCurrentState2[0],
      setColumns = _useCurrentState2[1],
      columnsRef = _useCurrentState2[2];

  var _useCurrentState3 = useCurrentState([]),
      _useCurrentState4 = _slicedToArray(_useCurrentState3, 3),
      selfData = _useCurrentState4[0],
      setSelfData = _useCurrentState4[1],
      dataRef = _useCurrentState4[2];

  var appendColumn = function appendColumn(column) {
    var pureCurrent = columnsRef.current.filter(function (item) {
      return item.value !== column.value;
    });
    setColumns([].concat(_toConsumableArray(pureCurrent), [column]));
  };

  var removeRow = function removeRow(rowIndex) {
    var next = dataRef.current.filter(function (_, index) {
      return index !== rowIndex;
    });
    onChange(next);
    setSelfData(_toConsumableArray(next));
  };

  var initialValue = useMemo(function () {
    return {
      columns: columns,
      appendColumn: appendColumn,
      removeRow: removeRow
    };
  }, [columns]);
  useEffect(function () {
    if (!data) return;
    setSelfData(data);
  }, [data]);
  useResize(function () {
    return updateShape();
  });
  return /*#__PURE__*/React.createElement(TableContext.Provider, {
    value: initialValue
  }, /*#__PURE__*/React.createElement("table", _extends({
    ref: ref
  }, props, {
    className: "jsx-1734006091" + " " + (props && props.className != null && props.className || className || "")
  }), /*#__PURE__*/React.createElement(TableHead, {
    columns: columns,
    width: width
  }), /*#__PURE__*/React.createElement(TableBody, {
    data: selfData,
    hover: hover,
    emptyText: emptyText,
    onRow: onRow,
    onCell: onCell
  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "1734006091"
  }, "table.jsx-1734006091{border-collapse:separate;border-spacing:0;width:100%;}")));
};

Table.defaultProps = defaultProps;
export default Table;