Merge branch 'Jayboy75-develop' into develop

2025-10-16 11:55:39 +00:00 · 2019-04-07 14:05:40 +08:00 · 2019-04-07 14:05:40 +08:00 · fc27c56cbb
commit fc27c56cbb
parent 497bf44192 8436edba7e
10 changed files with 163 additions and 88 deletions
--- a/packages/react-bootstrap-table2-example/.storybook/webpack.config.js
+++ b/packages/react-bootstrap-table2-example/.storybook/webpack.config.js
@ -9,6 +9,7 @@ const sourceStylePath = path.join(__dirname, '../../react-bootstrap-table2/style
 const paginationStylePath = path.join(__dirname, '../../react-bootstrap-table2-paginator/style');
 const filterStylePath = path.join(__dirname, '../../react-bootstrap-table2-filter/style');
 const toolkitSourcePath = path.join(__dirname, '../../react-bootstrap-table2-toolkit/index.js');
+const toolkitStylePath = path.join(__dirname, '../../react-bootstrap-table2-toolkit/style');
 const storyPath = path.join(__dirname, '../stories');
 const examplesPath = path.join(__dirname, '../examples');
 const srcPath = path.join(__dirname, '../src');
@ -43,7 +44,13 @@ const loaders = [{
 }, {
  test: /\.scss$/,
  use: ['style-loader', 'css-loader', 'sass-loader'],
-  include: [storyPath, sourceStylePath, paginationStylePath, filterStylePath],
+  include: [
+    storyPath,
+    sourceStylePath,
+    paginationStylePath,
+    filterStylePath,
+    toolkitStylePath
+  ],
 }, {
  test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/,
  loader: 'url-loader?limit=100000',
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@ -229,6 +229,7 @@ import 'stories/stylesheet/storybook.scss';
 import '../../react-bootstrap-table2/style/react-bootstrap-table2.scss';
 import '../../react-bootstrap-table2-paginator/style/react-bootstrap-table2-paginator.scss';
 import '../../react-bootstrap-table2-filter/style/react-bootstrap-table2-filter.scss';
+import '../../react-bootstrap-table2-toolkit/style/react-bootstrap-table2-toolkit.scss';

 // import bootstrap style by given version
 import bootstrapStyle, { BOOTSTRAP_VERSION } from './bootstrap-style';
--- a/packages/react-bootstrap-table2-filter/src/components/date.js
+++ b/packages/react-bootstrap-table2-filter/src/components/date.js
@ -132,24 +132,35 @@ class DateFilter extends Component {
        className={ `filter date-filter ${className}` }
        style={ style }
      >
-        <select
-          ref={ n => this.dateFilterComparator = n }
-          style={ comparatorStyle }
-          className={ `date-filter-comparator form-control ${comparatorClassName}` }
-          onChange={ this.onChangeComparator }
-          defaultValue={ defaultValue ? defaultValue.comparator : '' }
+        <label
+          className="filter-label"
+          htmlFor={ `date-filter-comparator-${text}` }
        >
-          { this.getComparatorOptions() }
-        </select>
-        <input
-          ref={ n => this.inputDate = n }
-          className={ `filter date-filter-input form-control ${dateClassName}` }
-          style={ dateStyle }
-          type="date"
-          onChange={ this.onChangeDate }
-          placeholder={ placeholder || `Enter ${text}...` }
-          defaultValue={ this.getDefaultDate() }
-        />
+          <span className="sr-only">Filter comparator</span>
+          <select
+            ref={ n => this.dateFilterComparator = n }
+            id={ `date-filter-comparator-${text}` }
+            style={ comparatorStyle }
+            className={ `date-filter-comparator form-control ${comparatorClassName}` }
+            onChange={ this.onChangeComparator }
+            defaultValue={ defaultValue ? defaultValue.comparator : '' }
+          >
+            { this.getComparatorOptions() }
+          </select>
+        </label>
+        <label htmlFor={ `date-filter-column-${text}` }>
+          <span className="sr-only">Enter ${ text }</span>
+          <input
+            ref={ n => this.inputDate = n }
+            id={ `date-filter-column-${text}` }
+            className={ `filter date-filter-input form-control ${dateClassName}` }
+            style={ dateStyle }
+            type="date"
+            onChange={ this.onChangeDate }
+            placeholder={ placeholder || `Enter ${text}...` }
+            defaultValue={ this.getDefaultDate() }
+          />
+        </label>
      </div>
    );
  }
--- a/packages/react-bootstrap-table2-filter/src/components/multiselect.js
+++ b/packages/react-bootstrap-table2-filter/src/components/multiselect.js
@ -111,18 +111,25 @@ class MultiSelectFilter extends Component {
      `filter select-filter form-control ${className} ${this.state.isSelected ? '' : 'placeholder-selected'}`;

    return (
-      <select
-        { ...rest }
-        ref={ n => this.selectInput = n }
-        style={ style }
-        multiple
-        className={ selectClass }
-        onChange={ this.filter }
-        onClick={ e => e.stopPropagation() }
-        defaultValue={ defaultValue !== undefined ? defaultValue : '' }
+      <label
+        className="filter-label"
+        htmlFor={ `multiselect-filter-column-${column.text}` }
      >
-        { this.getOptions() }
-      </select>
+        <span className="sr-only">Filter by {column.text}</span>
+        <select
+          { ...rest }
+          ref={ n => this.selectInput = n }
+          id={ `multiselect-filter-column-${column.text}` }
+          style={ style }
+          multiple
+          className={ selectClass }
+          onChange={ this.filter }
+          onClick={ e => e.stopPropagation() }
+          defaultValue={ defaultValue !== undefined ? defaultValue : '' }
+        >
+          { this.getOptions() }
+        </select>
+      </label>
    );
  }
 }
--- a/packages/react-bootstrap-table2-filter/src/components/number.js
+++ b/packages/react-bootstrap-table2-filter/src/components/number.js
@ -173,35 +173,53 @@ class NumberFilter extends Component {
        className={ `filter number-filter ${className}` }
        style={ style }
      >
-        <select
-          ref={ n => this.numberFilterComparator = n }
-          style={ comparatorStyle }
-          className={ `number-filter-comparator form-control ${comparatorClassName}` }
-          onChange={ this.onChangeComparator }
-          defaultValue={ defaultValue ? defaultValue.comparator : '' }
+        <label
+          className="filter-label"
+          htmlFor={ `number-filter-comparator-${column.text}` }
        >
-          { this.getComparatorOptions() }
-        </select>
+          <span className="sr-only">Filter comparator</span>
+          <select
+            ref={ n => this.numberFilterComparator = n }
+            style={ comparatorStyle }
+            id={ `number-filter-comparator-${column.text}` }
+            className={ `number-filter-comparator form-control ${comparatorClassName}` }
+            onChange={ this.onChangeComparator }
+            defaultValue={ defaultValue ? defaultValue.comparator : '' }
+          >
+            { this.getComparatorOptions() }
+          </select>
+        </label>
        {
          options ?
-            <select
-              ref={ n => this.numberFilter = n }
-              style={ numberStyle }
-              className={ selectClass }
-              onChange={ this.onChangeNumberSet }
-              defaultValue={ defaultValue ? defaultValue.number : '' }
+            <label
+              className="filter-label"
+              htmlFor={ `number-filter-column-${column.text}` }
            >
-              { this.getNumberOptions() }
-            </select> :
-            <input
-              ref={ n => this.numberFilter = n }
-              type="number"
-              style={ numberStyle }
-              className={ `number-filter-input form-control ${numberClassName}` }
-              placeholder={ placeholder || `Enter ${column.text}...` }
-              onChange={ this.onChangeNumber }
-              defaultValue={ defaultValue ? defaultValue.number : '' }
-            />
+              <span className="sr-only">{`Select ${column.text}`}</span>
+              <select
+                ref={ n => this.numberFilter = n }
+                id={ `number-filter-column-${column.text}` }
+                style={ numberStyle }
+                className={ selectClass }
+                onChange={ this.onChangeNumberSet }
+                defaultValue={ defaultValue ? defaultValue.number : '' }
+              >
+                { this.getNumberOptions() }
+              </select>
+            </label> :
+            <label htmlFor={ `number-filter-column-${column.text}` }>
+              <span className="sr-only">{`Enter ${column.text}`}</span>
+              <input
+                ref={ n => this.numberFilter = n }
+                id={ `number-filter-column-${column.text}` }
+                type="number"
+                style={ numberStyle }
+                className={ `number-filter-input form-control ${numberClassName}` }
+                placeholder={ placeholder || `Enter ${column.text}...` }
+                onChange={ this.onChangeNumber }
+                defaultValue={ defaultValue ? defaultValue.number : '' }
+              />
+            </label>
        }
      </div>
    );
--- a/packages/react-bootstrap-table2-filter/src/components/select.js
+++ b/packages/react-bootstrap-table2-filter/src/components/select.js
@ -136,17 +136,24 @@ class SelectFilter extends Component {
      `filter select-filter form-control ${className} ${this.state.isSelected ? '' : 'placeholder-selected'}`;

    return (
-      <select
-        { ...rest }
-        ref={ n => this.selectInput = n }
-        style={ style }
-        className={ selectClass }
-        onChange={ this.filter }
-        onClick={ e => e.stopPropagation() }
-        defaultValue={ defaultValue !== undefined ? defaultValue : '' }
+      <label
+        className="filter-label"
+        htmlFor={ `select-filter-column-${column.text}` }
      >
-        { this.getOptions() }
-      </select>
+        <span className="sr-only">Filter by { column.text }</span>
+        <select
+          { ...rest }
+          ref={ n => this.selectInput = n }
+          id={ `select-filter-column-${column.text}` }
+          style={ style }
+          className={ selectClass }
+          onChange={ this.filter }
+          onClick={ e => e.stopPropagation() }
+          defaultValue={ defaultValue !== undefined ? defaultValue : '' }
+        >
+          { this.getOptions() }
+        </select>
+      </label>
    );
  }
 }
--- a/packages/react-bootstrap-table2-filter/src/components/text.js
+++ b/packages/react-bootstrap-table2-filter/src/components/text.js
@ -94,17 +94,24 @@ class TextFilter extends Component {

    // stopPropagation for onClick event is try to prevent sort was triggered.
    return (
-      <input
-        { ...rest }
-        ref={ n => this.input = n }
-        type="text"
-        className={ `filter text-filter form-control ${className}` }
-        style={ style }
-        onChange={ this.filter }
-        onClick={ this.handleClick }
-        placeholder={ placeholder || `Enter ${text}...` }
-        value={ this.state.value }
-      />
+      <label
+        className="filter-label"
+        htmlFor={ `text-filter-column-${text}` }
+      >
+        <span className="sr-only">Filter by {text}</span>
+        <input
+          { ...rest }
+          ref={ n => this.input = n }
+          type="text"
+          id={ `text-filter-column-${text}` }
+          className={ `filter text-filter form-control ${className}` }
+          style={ style }
+          onChange={ this.filter }
+          onClick={ this.handleClick }
+          placeholder={ placeholder || `Enter ${text}...` }
+          value={ this.state.value }
+        />
+      </label>
    );
  }
 }
--- a/packages/react-bootstrap-table2-filter/style/react-bootstrap-table2-filter.scss
+++ b/packages/react-bootstrap-table2-filter/style/react-bootstrap-table2-filter.scss
@ -1,3 +1,7 @@
+.react-bootstrap-table > table > thead > tr > th .filter-label {
+  display: block !important;
+}
+
 .react-bootstrap-table > table > thead > tr > th .filter {
  font-weight: normal;
 }
--- a/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js
+++ b/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js
@ -54,20 +54,28 @@ class SearchBar extends React.Component {
    const {
      className,
      style,
-      placeholder
+      placeholder,
+      tableId
    } = this.props;

    return (
-      <input
-        ref={ n => this.input = n }
-        type="text"
-        style={ style }
-        onKeyUp={ () => this.onKeyup() }
-        onChange={ this.onChangeValue }
-        className={ `form-control ${className}` }
-        value={ this.state.value }
-        placeholder={ placeholder || SearchBar.defaultProps.placeholder }
-      />
+      <label
+        htmlFor={ `search-bar-${tableId}` }
+        className="search-label"
+      >
+        <span className="sr-only">Search this table</span>
+        <input
+          ref={ n => this.input = n }
+          id={ `search-bar-${tableId}` }
+          type="text"
+          style={ style }
+          onKeyUp={ () => this.onKeyup() }
+          onChange={ this.onChangeValue }
+          className={ `form-control ${className}` }
+          value={ this.state.value }
+          placeholder={ placeholder || SearchBar.defaultProps.placeholder }
+        />
+      </label>
    );
  }
 }
@ -78,7 +86,8 @@ SearchBar.propTypes = {
  placeholder: PropTypes.string,
  style: PropTypes.object,
  delay: PropTypes.number,
-  searchText: PropTypes.string
+  searchText: PropTypes.string,
+  tableId: PropTypes.string
 };

 SearchBar.defaultProps = {
@ -86,7 +95,8 @@ SearchBar.defaultProps = {
  style: {},
  placeholder: 'Search',
  delay: 250,
-  searchText: ''
+  searchText: '',
+  tableId: 0
 };

 export default SearchBar;
--- a/packages/react-bootstrap-table2-toolkit/style/react-bootstrap-table2-toolkit.scss
+++ b/packages/react-bootstrap-table2-toolkit/style/react-bootstrap-table2-toolkit.scss
@ -0,0 +1,3 @@
+.search-label {
+  display: block !important;
+}