add size props group sorting

components/grid/index.en-US.md

@@ -99,15 +99,15 @@ If the Ant Design grid layout component does not meet your needs, you can use th
 
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
-| lg | `≥1200px`, could be a `span` value or an object containing above props | number\|object | - |
-| md | `≥992px`, could be a `span` value or an object containing above props | number\|object | - |
 | offset | the number of cells to offset Col from the left | number | 0 |
 | order | raster order, used in `flex` layout mode | number | 0 |
 | pull | the number of cells that raster is moved to the left | number | 0 |
 | push | the number of cells that raster is moved to the right | number | 0 |
-| sm | `≥768px`, could be a `span` value or an object containing above props | number\|object | - |
 | span | raster number of cells to occupy, 0 corresponds to `display: none` | number | none |
-| xl | `≥1600px`, could be a `span` value or an object containing above props | number\|object | - |
 | xs | `<768px` and also default setting, could be a `span` value or an object containing above props | number\|object | - |
+| sm | `≥768px`, could be a `span` value or an object containing above props | number\|object | - |
+| md | `≥992px`, could be a `span` value or an object containing above props | number\|object | - |
+| lg | `≥1200px`, could be a `span` value or an object containing above props | number\|object | - |
+| xl | `≥1600px`, could be a `span` value or an object containing above props | number\|object | - |
 
 The breakpoints of responsive grid follow [BootStrap 3 media queries rules](https://getbootstrap.com/docs/3.3/css/#responsive-utilities-classes)(not including `occasionally part`).

components/grid/index.zh-CN.md

@@ -98,15 +98,15 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用
 
 | 成员 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| lg | `≥1200px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
-| md | `≥992px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
 | offset | 栅格左侧的间隔格数，间隔内不可以有栅格 | number | 0 |
 | order | 栅格顺序，`flex` 布局模式下有效 | number | 0 |
 | pull | 栅格向左移动格数 | number | 0 |
 | push | 栅格向右移动格数 | number | 0 |
-| sm | `≥768px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
 | span | 栅格占位格数，为 0 时相当于 `display: none` | number | - |
-| xl | `≥1600px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
 | xs | `<768px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
+| sm | `≥768px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
+| md | `≥992px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
+| lg | `≥1200px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
+| xl | `≥1600px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
 
 响应式栅格的断点遵循了 [BootStrap 3 的规则](https://getbootstrap.com/docs/3.3/css/#responsive-utilities-classes)（不包含链接里 `occasionally` 的部分)。

scripts/sort-api-table.js

@@ -24,30 +24,51 @@ function getCellValue(node) {
   return node.children[0].children[0].value;
 }
 
-function innerSort(nodes) {
-  return nodes.sort((prev, next) => {
-    // use toLowerCase to keep `case insensitive`
-    prev = getCellValue(prev).toLowerCase();
-    next = getCellValue(next).toLowerCase();
+// from small to large
+const sizeBreakPoints = ['xs', 'sm', 'md', 'lg', 'xl'];
 
-    // follow the alphabet order
-    if (prev > next) {
-      return 1;
-    }
+const groups = {
+  isDynamic: val => /^on[A-Z]/.test(val),
+  isSize: val => sizeBreakPoints.indexOf(val) > 0,
+};
 
-    if (prev < next) {
-      return -1;
-    }
+function asciiSort(prev, next) {
+  if (prev > next) {
+    return 1;
+  }
 
-    return 0;
+  if (prev < next) {
+    return -1;
+  }
+
+  return 0;
+}
+
+// follow the alphabet order
+function alphabetSort(nodes) {
+  // use toLowerCase to keep `case insensitive`
+  return nodes.sort((...comparison) => {
+    return asciiSort(...comparison.map(val => getCellValue(val).toLowerCase()));
+  });
+}
+
+function sizeSort(nodes) {
+  return nodes.sort((...comparison) => {
+    return asciiSort(
+      ...comparison.map(val =>
+        sizeBreakPoints.indexOf(getCellValue(val).toLowerCase())
+      )
+    );
   });
 }
 
 function sort(ast) {
   ast.children.forEach((child) => {
-    const staticProp = [];
+    const staticProps = [];
     // prefix with `on`
-    const dynamicProp = [];
+    const dynamicProps = [];
+    // one of ['xs', 'sm', 'md', 'lg', 'xl']
+    const sizeProps = [];
 
     // find table markdown type
     if (child.type === 'table') {
@@ -55,17 +76,20 @@ function sort(ast) {
       // slice(1) cut down the thead
       child.children.slice(1).forEach((node) => {
         const value = getCellValue(node);
-        if (/^on[A-Z]/.test(value)) {
-          dynamicProp.push(node);
+        if (groups.isDynamic(value)) {
+          dynamicProps.push(node);
+        } else if (groups.isSize(value)) {
+          sizeProps.push(node);
         } else {
-          staticProp.push(node);
+          staticProps.push(node);
         }
       });
 
       child.children = [
         child.children[0],
-        ...innerSort(staticProp),
-        ...innerSort(dynamicProp),
+        ...alphabetSort(staticProps),
+        ...sizeSort(sizeProps),
+        ...alphabetSort(dynamicProps),
       ];
     }
   });
@@ -106,3 +130,8 @@ stream
     );
     /* eslint-enable no-console */
   });
+
+module.exports = {
+  getCellValue,
+  sort,
+};