[website] add pagination

Author: nihgwu

README.md

@@ -59,8 +59,7 @@ The simplest way is overriding the default styles (assuming you are using `scss`
 // override default variables for BaseTable
 $table-prefix: AdvanceTable;
 
-$table-font-size: $bim-font-size-small;
-$table-border-radius: 4px;
+$table-font-size: 13px;
 $table-padding-left: 15px;
 $table-padding-right: 15px;
 $column-padding: 7.5px;

docs/advance.md

@@ -10,8 +10,7 @@ The simplest way is overriding the default styles (assuming you are using `scss`
 // override default variables for BaseTable
 $table-prefix: AdvanceTable;
 
-$table-font-size: $bim-font-size-small;
-$table-border-radius: 4px;
+$table-font-size: 13px;
 $table-padding-left: 15px;
 $table-padding-right: 15px;
 $column-padding: 7.5px;

docs/inline-editing.md

@@ -4,15 +4,15 @@
 
 ## The Problem
 
-`Inline Editing` would be a bit tricky in `BaseTable` because of it's using the `virtualization` technology to render the rows, so there are `overflow: hidden` for the table and rows and cells, so if your editing content is larger then the cell area, the content would be cut, you genius would find that you could override the `overflow: hidden` via style to prevent the content to be cut, but **PLEASE DON"T DO THAT**, as there would be always problems with this solution, e.g. what would happens if it's in the last row?
+`Inline Editing` would be a bit tricky in `BaseTable` because of it's using the virtualization technology to render the rows, there is `overflow: hidden` for the table and rows and cells, so if your editing content is larger than the cell area, the content would be cut, you genius would find that you could override the `overflow: hidden` via style to prevent the content to be clipped, but **PLEASE DON'T DO THAT**, as there would be always problems with this solution, e.g. what would happens if it's in the last row?
 
 ## How
 
-The suggested solution is using something like `Portal` to render the editing content out of the cell, then it won't be constrained in the cell. As `Portal` needs a container to attach the target to, most of the custom renderers provide a param `container` to be used in this case, the `container` is table itself.
+The recommended solution is using something like `Portal` to render the editing content out of the cell, then it won't be constrained in the cell. As `Portal` needs a container to attach the target to, most of the custom renderers provide a param `container` to be used in this case, the `container` is the table itself.
 
 Internally we are using the `Overlay` component from [react-overlays](https://github.com/react-bootstrap/react-overlays) to do that, `react-overlays` is based on [Popper.js](https://github.com/FezVrasta/popper.js) which provides excellent positioning mechanism.
 
-If you are using fixed mode with frozen columns, there will be a problem with the `Popper.js`. As the default `boundariesElement` for `preventOverflow` is `scrollParent`, but there would be three tables internal tables to mimic the frozen feature, and those tables are all scrollable, then the positioning could be not expected, you could change the `boundariesElement` to `viewport` or the `container` to fix that.
+If you are using fixed mode(fixed=true) with frozen columns, there will be a problem with the `Popper.js`. As the default `boundariesElement` for `preventOverflow` is `scrollParent`, but there would be three tables internal tables to implement the frozen feature, and those tables are all scrollable, then the positioning could be not expected, you could change the `boundariesElement` to `viewport` or the `container` to fix that.
 
 ## API Design
 
@@ -26,7 +26,7 @@ _The following is really a rough one, will improve it later_
 
 ```jsx
 // import { Overlay } from 'react-overlays'
-const { Overlay } = ReactOverlays
+const { Overlay } = ReactOverlays;
 
 const CellContainer = styled.div`
   display: flex;
@@ -37,7 +37,7 @@ const CellContainer = styled.div`
   margin: 0 -5px;
   padding: 5px;
   border: 1px dashed transparent;
-`
+`;
 
 const GlobalStyle = createGlobalStyle`
   .BaseTable__row:hover,
@@ -46,60 +46,50 @@ const GlobalStyle = createGlobalStyle`
       border: 1px dashed #ccc;
     }
   }
-`
+`;
 
 const Select = styled.select`
   width: 100%;
   height: 30px;
   margin-top: 10px;
-`
+`;
 
 class EditableCell extends React.PureComponent {
   state = {
     value: this.props.cellData,
     editing: false,
-  }
+  };
 
-  setTargetRef = ref => (this.targetRef = ref)
+  setTargetRef = ref => (this.targetRef = ref);
 
-  getTargetRef = () => this.targetRef
+  getTargetRef = () => this.targetRef;
 
-  handleClick = () => this.setState({ editing: true })
+  handleClick = () => this.setState({ editing: true });
 
-  handleHide = () => this.setState({ editing: false })
+  handleHide = () => this.setState({ editing: false });
 
   handleChange = e =>
     this.setState({
       value: e.target.value,
       editing: false,
-    })
+    });
 
   render() {
-    const { container, rowIndex, columnIndex } = this.props
-    const { value, editing } = this.state
+    const { container, rowIndex, columnIndex } = this.props;
+    const { value, editing } = this.state;
 
     return (
       <CellContainer ref={this.setTargetRef} onClick={this.handleClick}>
         {!editing && value}
         {editing && this.targetRef && (
-          <Overlay
-            show
-            flip
-            rootClose
-            container={container}
-            target={this.getTargetRef}
-            onHide={this.handleHide}
-          >
+          <Overlay show flip rootClose container={container} target={this.getTargetRef} onHide={this.handleHide}>
             {({ props, placement }) => (
               <div
                 {...props}
                 style={{
                   ...props.style,
                   width: this.targetRef.offsetWidth,
-                  top:
-                    placement === 'top'
-                      ? this.targetRef.offsetHeight
-                      : -this.targetRef.offsetHeight,
+                  top: placement === 'top' ? this.targetRef.offsetHeight : -this.targetRef.offsetHeight,
                 }}
               >
                 <Select value={value} onChange={this.handleChange}>
@@ -113,22 +103,24 @@ class EditableCell extends React.PureComponent {
           </Overlay>
         )}
       </CellContainer>
-    )
+    );
   }
 }
 
-const columns = generateColumns(5)
-const data = generateData(columns, 100)
+const columns = generateColumns(5);
+const data = generateData(columns, 100);
 
-columns[0].cellRenderer = EditableCell
-columns[0].width = 300
+columns[0].cellRenderer = EditableCell;
+columns[0].width = 300;
 
 export default () => (
   <>
     <GlobalStyle />
     <Table fixed columns={columns} data={data} />
   </>
-)
+);
 ```
 
+## Example
+
 Check the live example [here](https://autodesk.github.io/react-base-table/examples/inline-editing).

docs/selection.md

@@ -153,169 +153,6 @@ SelectableTable.defaultProps = {
 };
 ```
 
-## Playground
+## Example
 
-```jsx live editorHeight=400
-const StyledTable = styled(BaseTable)`
-  .row-selected {
-    background-color: #e3e3e3;
-  }
-`;
-
-class SelectionCell extends React.PureComponent {
-  _handleChange = e => {
-    const { rowData, rowIndex, column } = this.props;
-    const { onChange } = column;
-
-    onChange({ selected: e.target.checked, rowData, rowIndex });
-  };
-
-  render() {
-    const { rowData, column } = this.props;
-    const { selectedRowKeys, rowKey } = column;
-    const checked = selectedRowKeys.includes(rowData[rowKey]);
-
-    return <input type="checkbox" checked={checked} onChange={this._handleChange} />;
-  }
-}
-
-class SelectableTable extends React.PureComponent {
-  constructor(props) {
-    super(props);
-
-    const { selectedRowKeys, defaultSelectedRowKeys, expandedRowKeys, defaultExpandedRowKeys } = props;
-    this.state = {
-      selectedRowKeys: (selectedRowKeys !== undefined ? selectedRowKeys : defaultSelectedRowKeys) || [],
-      expandedRowKeys: (expandedRowKeys !== undefined ? expandedRowKeys : defaultExpandedRowKeys) || [],
-    };
-  }
-
-  /**
-   * Set `selectedRowKeys` manually.
-   * This method is available only if `selectedRowKeys` is uncontrolled.
-   *
-   * @param {array} selectedRowKeys
-   */
-  setSelectedRowKeys(selectedRowKeys) {
-    // if `selectedRowKeys` is controlled
-    if (this.props.selectedRowKeys !== undefined) return;
-
-    this.setState({
-      selectedRowKeys: cloneArray(selectedRowKeys),
-    });
-  }
-
-  /**
-   * See BaseTable#setExpandedRowKeys
-   */
-  setExpandedRowKeys(expandedRowKeys) {
-    // if `expandedRowKeys` is controlled
-    if (this.props.expandedRowKeys !== undefined) return;
-
-    this.setState({
-      expandedRowKeys: cloneArray(expandedRowKeys),
-    });
-  }
-
-  /* some other custom methods and proxy methods */
-
-  /**
-   * Remove rowKeys from inner state  manually, it's useful to purge dirty state after rows removed.
-   * This method is available only if `selectedRowKeys` or `expandedRowKeys` is uncontrolled.
-   *
-   * @param {array} rowKeys
-   */
-  removeRowKeysFromState(rowKeys) {
-    if (!Array.isArray(rowKeys)) return;
-
-    const state = {};
-    if (this.props.selectedRowKeys === undefined && this.state.selectedRowKeys.length > 0) {
-      state.selectedRowKeys = this.state.selectedRowKeys.filter(key => !rowKeys.includes(key));
-    }
-    if (this.props.expandedRowKeys === undefined && this.state.expandedRowKeys.length > 0) {
-      state.expandedRowKeys = this.state.expandedRowKeys.filter(key => !rowKeys.includes(key));
-    }
-    if (state.selectedRowKeys || state.expandedRowKeys) {
-      this.setState(state);
-    }
-  }
-
-  _handleSelectChange = ({ selected, rowData, rowIndex }) => {
-    const selectedRowKeys = [...this.state.selectedRowKeys];
-    const key = rowData[this.props.rowKey];
-
-    if (selected) {
-      if (!selectedRowKeys.includes(key)) selectedRowKeys.push(key);
-    } else {
-      const index = selectedRowKeys.indexOf(key);
-      if (index > -1) {
-        selectedRowKeys.splice(index, 1);
-      }
-    }
-
-    // if `selectedRowKeys` is uncontrolled, update internal state
-    if (this.props.selectedRowKeys === undefined) {
-      this.setState({ selectedRowKeys });
-    }
-    this.props.onRowSelect({ selected, rowData, rowIndex });
-    this.props.onSelectedRowsChange(selectedRowKeys);
-  };
-
-  _rowClassName = ({ rowData, rowIndex }) => {
-    const { rowClassName, rowKey } = this.props;
-    const { selectedRowKeys } = this.state;
-
-    const rowClass = rowClassName ? callOrReturn(rowClassName, { rowData, rowIndex }) : '';
-    const key = rowData[rowKey];
-
-    return [rowClass, selectedRowKeys.includes(key) && 'row-selected'].filter(Boolean).concat(' ');
-  };
-
-  render() {
-    const { columns, children, selectable, selectionColumnProps, ...rest } = this.props;
-    const { selectedRowKeys } = this.state;
-
-    // you'd better memoize this operation
-    let _columns = columns || normalizeColumns(children);
-    if (selectable) {
-      const selectionColumn = {
-        width: 40,
-        flexShrink: 0,
-        resizable: false,
-        frozen: Column.FrozenDirection.LEFT,
-        cellRenderer: SelectionCell,
-        ...selectionColumnProps,
-        key: '__selection__',
-        rowKey: this.props.rowKey,
-        selectedRowKeys: selectedRowKeys,
-        onChange: this._handleSelectChange,
-      };
-      _columns = [selectionColumn, ..._columns];
-    }
-
-    return <StyledTable {...rest} columns={_columns} rowClassName={this._rowClassName} />;
-  }
-}
-
-SelectableTable.defaultProps = {
-  ...BaseTable.defaultProps,
-  onRowSelect: noop,
-  onSelectedRowsChange: noop,
-};
-
-// Use case
-const columns = generateColumns(10);
-const data = generateData(columns, 200);
-
-export default () => (
-  <SelectableTable
-    width={700}
-    height={400}
-    selectable
-    columns={columns}
-    data={data}
-    onRowSelect={action('onRowSelect')}
-    onSelectedRowsChange={action('onSelectedRowsChange')}
-  />
-);
-```
+Check the live example [here](https://autodesk.github.io/react-base-table/examples/selection).

website/src/components/Methods.js

@@ -42,7 +42,7 @@ const Methods = ({ title = 'Methods', methods, ...rest }) => (
     <Anchor>{title}</Anchor>
     {Array.isArray(methods) &&
       methods.map((method, idx) => (
-        <Method key={method.name}>
+        <Method key={method.name} id={`methods-${method.name}`}>
           <Name>
             {method.name}
             <Tag>{getSignature(method.params)}</Tag>

website/src/components/Pagination.js

@@ -0,0 +1,51 @@
+import React from 'react'
+import styled from 'styled-components'
+import { Link } from 'gatsby'
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 50px;
+  margin-top: 20px;
+  border-top: 1px solid #edf0f2;
+`
+
+const StyledLink = styled(Link)`
+  display: block;
+  text-decoration: none;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  font-size: 16px;
+  color: #888;
+
+  &:hover,
+  &:active {
+    color: #222;
+  }
+`
+
+const Pagination = ({ links, link, ...rest }) => {
+  const index = links.indexOf(link)
+  if (index < 0) return null
+  const prevLink = index === 0 ? null : links[index - 1]
+  const nextLink = index === links.length - 1 ? null : links[index + 1]
+
+  return (
+    <Container {...rest}>
+      <div>
+        {prevLink && (
+          <StyledLink to={prevLink.to}>← {prevLink.title}</StyledLink>
+        )}
+      </div>
+      <div>
+        {nextLink && (
+          <StyledLink to={nextLink.to}>{nextLink.title}→ </StyledLink>
+        )}
+      </div>
+    </Container>
+  )
+}
+
+export default Pagination