Ant designでカスタマイズしたもの、使いやすくしたもの

Ant designとは

https://ant.design/
Reactコンポーネントを、すぐに使える形（デザインされたもの）で返してくれる。
同時に、基本的な機能を揃え、開発をスムーズにしてくれる。

カスタマイズしたもの

省略した文字＋ツールチップ

// 省略文字(かつ長い時切り捨て)とツールチップの表示
export const EllipsisTooltip = (props) => {
  const { text, toolTipText, maxSize, children } = props;
  const flgTruncate = maxSize ? text.length > maxSize : false;
  return (
    <Space>
      {flgTruncate ? text.slice(0, maxSize) + '…' : text}
      {(text !== toolTipText || flgTruncate) && <Tooltip title={toolTipText}>{children}</Tooltip>}
    </Space>
  );
};

// use
<Link href={url} target="blank">
  <EllipsisTooltip text="" toolTipText={url}>URL <ExportOutlined />
  </EllipsisTooltip>
</Link>

テーブルのpaddingを狭め、子要素を囲むようなスタイルに変更

export const TableList = styled(Table)`
  .ant-table-thead > tr > th,
  .ant-table-tbody > tr > td,
  .ant-table tfoot > tr > th,
  .ant-table tfoot > tr > td {
    padding: 10px 10px;
  }
  .ant-table-tbody > tr.ant-table-expanded-row {
    > td {
      padding: 0;
    }
  }
  .ant-table-column-sorters {
    padding: 0;
  }
  .ant-table-tbody > tr > td > .ant-table-wrapper:only-child .ant-table {
    margin: 0;
  }
`;

// 子スタイル
export const ChildTable = styled(Table)`
  background-color: #ccc;
  .ant-table {
    font-size: 90%;
  }
  .ant-spin-container {
    /* padding: 24px 22px 20px 22px; */
    padding: 10px;
    background-color: #ccc;
    position: relative;
    &:before {
      content: '';
      display: block;
      position: absolute;
      left: 72px;
      top: 5px;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 8px 14px 8px;
      border-color: transparent transparent #fafafa transparent;
    }
  }
  .ant-table-thead > tr > th,
  .ant-table-tbody > tr > td,
  .ant-table tfoot > tr > th,
  .ant-table tfoot > tr > td {
    padding: 8px 10px;
  }
  .ant-table-content {
    overflow: auto !important;
  }

テーブル > ドロップダウンフィルター

dataから存在するデータをドロップダウンで表示

export const getFilterOption = (datalist, dataIndex) => {
  if (!datalist) return false;
  let array = [],
    filters = [];
  datalist.forEach((value) => {
    if (array.indexOf(value[dataIndex]) === -1) {
      array.push(value[dataIndex]);
      filters.push({ text: value[dataIndex], value: value[dataIndex] });
    }
  });

  return {
    filters: filters,
    onFilter: (value, record) => record[dataIndex].indexOf(value) === 0,
  };
};

テーブル > 単語検索フィルター

編集中

export const getSearchOption = (dataIndex) => {
  let searchInput;
  let searchState = {
    searchText: '',
    columnIndex: '',
  };

  const handleSearch = (selectedKeys, confirm, dataIndex) => {
    confirm();
    return { searchText: selectedKeys[0], columnIndex: dataIndex };
  };

  const handleReset = (clearFilters) => {
    clearFilters();
    return { searchText: false, columnIndex: false };
  };

  return {
    // eslint-disable-next-line react/display-name
    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
      <div style={{ padding: 8 }}>
        <Input
          ref={(node) => {
            searchInput = node;
          }}
          placeholder={`検索したいキワードを入力してください`}
          value={selectedKeys[0]}
          onChange={(e) => setSelectedKeys(e.target.value ? [e.target.value] : [])}
          onPressEnter={() => {
            searchState = handleSearch(selectedKeys, confirm, dataIndex);
          }}
          style={{ width: 188, marginBottom: 8, display: 'block' }}
        />
        <Space>
          <Button
            type="primary"
            onClick={() => {
              searchState = handleSearch(selectedKeys, confirm, dataIndex);
            }}
            icon={<SearchOutlined />}
            size="small"
            style={{ width: 90 }}>
            検索
          </Button>
          <Button onClick={() => handleReset(clearFilters)} size="small" style={{ width: 90 }}>
            リセット
          </Button>
        </Space>
      </div>
    ),
    // eslint-disable-next-line react/display-name
    filterIcon: (filtered) => (
      <SearchOutlined
        style={
          filtered
            ? { color: '#ffffff', backgroundColor: '#000', padding: '8px', borderRadius: '50%' }
            : { padding: '8px' }
        }
      />
    ),
    onFilter: (value, record) =>
      record[dataIndex] ? record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()) : '',
    onFilterDropdownVisibleChange: (visible) => {
      if (visible) {
        setTimeout(() => searchInput.select(), 100);
      }
    },
  };
};