feat(Col): add custom widths ability to Col (#309)

TheSharpieOne · eddywashere · commit 8487598907e1 · 2017-01-28T13:57:24.000-08:00
closes #297
diff --git a/docs/lib/Components/LayoutPage.js b/docs/lib/Components/LayoutPage.js
@@ -61,7 +61,10 @@ Col.propTypes = {
   sm: columnProps,
   md: columnProps,
   lg: columnProps,
-  xl: columnProps
+  xl: columnProps,
+  // override the predefined width (the ones above) with your own custom widths.
+  // see https://github.com/reactstrap/reactstrap/issues/297#issuecomment-273556116
+  widths: PropTypes.array,
 }`}
           </PrismCode>
         </pre>
diff --git a/src/Col.js b/src/Col.js
@@ -26,10 +26,11 @@ const propTypes = {
   xl: columnProps,
   className: PropTypes.string,
   cssModule: PropTypes.object,
+  widths: PropTypes.array,
 };
 
 const defaultProps = {
-  xs: true
+  widths: colWidths,
 };
 
 const getColumnSizeClass = (isXs, colWidth, colSize) => {
@@ -46,20 +47,25 @@ const Col = (props) => {
   const {
     className,
     cssModule,
+    widths,
     ...attributes
   } = props;
   const colClasses = [];
 
-  colWidths.forEach(colWidth => {
-    const columnProp = props[colWidth];
+  widths.forEach((colWidth, i) => {
+    let columnProp = props[colWidth];
+
+    if (!i && columnProp === undefined) {
+      columnProp = true;
+    }
 
     delete attributes[colWidth];
 
     if (!columnProp) {
       return;
     }
 
-    const isXs = colWidth === 'xs';
+    const isXs = !i;
     let colClass;
 
     if (isobject(columnProp)) {
diff --git a/src/__tests__/Col.spec.js b/src/__tests__/Col.spec.js
@@ -22,6 +22,23 @@ describe('Col', () => {
     expect(wrapper.hasClass('col')).toBe(true);
   });
 
+  it('should allow custom columns to be defined', () => {
+    const wrapper = shallow(<Col widths={['base', 'jumbo']} base="4" jumbo="6" />);
+
+    expect(wrapper.hasClass('col-4')).toBe(true);
+    expect(wrapper.hasClass('col-jumbo-6')).toBe(true);
+  });
+
+  it('should allow custom columns to be defined with objects', () => {
+    const wrapper = shallow(<Col widths={['base', 'jumbo', 'wtf']} wtf={{ size: 1, push: 2, pull: 3, offset: 4 }} />);
+
+    expect(wrapper.hasClass('col-wtf-1')).toBe(true);
+    expect(wrapper.hasClass('push-wtf-2')).toBe(true);
+    expect(wrapper.hasClass('pull-wtf-3')).toBe(true);
+    expect(wrapper.hasClass('offset-wtf-4')).toBe(true);
+    expect(wrapper.hasClass('col')).toBe(true);
+  });
+
   it('should pass col size specific classes as Strings', () => {
     const wrapper = shallow(<Col sm="6" />);
 
