react-semantic-ui-kit - npm Package Compare versions

Comparing version 0.1.6 to 0.1.7

lib/collections/grid/Column.js

@@ -37,2 +37,6 @@ 'use strict';
 
+var _SemanticUiPropTypes = require('../../common/SemanticUiPropTypes');
+
+var _SemanticUiPropTypes2 = _interopRequireDefault(_SemanticUiPropTypes);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -51,9 +55,12 @@
     value: function render() {
-      var className = this.props.className;
+      var _props = this.props;
+      var className = _props.className;
+      var style = _props.style;
+      var color = _props.color;
 
-      var classes = (0, _classnames2.default)((0, _semanticClasses.widthClasses)(this.props), 'column', className);
+      var classes = (0, _classnames2.default)((0, _semanticClasses.widthClasses)(this.props), (0, _semanticClasses.deviceWidthClasses)(this.props), (0, _semanticClasses.alignedClasses)(this.props), (0, _semanticClasses.floatedClasses)(this.props), color, 'column', className);
 
       return _react2.default.createElement(
         'div',
-        { className: classes, style: this.props.style },
+        { className: classes, style: style },
         this.props.children
@@ -67,4 +74,10 @@ );
 Column.propTypes = {
-  width: _react.PropTypes.number
+  width: _react.PropTypes.number,
+  mobileWidth: _react.PropTypes.number,
+  tabletWidth: _react.PropTypes.number,
+  computerWidth: _react.PropTypes.number,
+  color: _SemanticUiPropTypes2.default.color,
+  floated: _SemanticUiPropTypes2.default.floated,
+  aligned: _SemanticUiPropTypes2.default.aligned
 };
 exports.default = Column;

lib/collections/grid/Grid.js

@@ -41,2 +41,10 @@ 'use strict';
 
+var _propsToClasses = require('../../util/propsToClasses');
+
+var _propsToClasses2 = _interopRequireDefault(_propsToClasses);
+
+var _SemanticUiPropTypes = require('../../common/SemanticUiPropTypes');
+
+var _SemanticUiPropTypes2 = _interopRequireDefault(_SemanticUiPropTypes);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -58,9 +66,13 @@
       var container = _props.container;
+      var internallyCelled = _props.internallyCelled;
+      var style = _props.style;
+      var equalWidth = _props.equalWidth;
       var className = _props.className;
 
-      var classes = (0, _classnames2.default)('ui', (0, _semanticClasses.columnClasses)(this.props), 'grid', { 'container': page || container }, className);
+      var classesFromProps = (0, _propsToClasses2.default)(['relaxed', 'celled', 'centered', 'stackable', 'padded'], this.props);
+      var classes = (0, _classnames2.default)('ui', (0, _semanticClasses.alignedClasses)(this.props), (0, _semanticClasses.columnClasses)(this.props), classesFromProps, (0, _semanticClasses.reversedDevicesClasses)(this.props), { 'internally celled': internallyCelled }, { 'equal width': equalWidth }, 'grid', { 'container': page || container }, className);
 
       return _react2.default.createElement(
         'div',
-        (0, _extends3.default)({}, this.props, { className: classes }),
+        (0, _extends3.default)({}, this.props, { className: classes, style: style }),
         this.props.children
@@ -77,4 +89,13 @@ );
   page: _react.PropTypes.bool,
-  container: _react.PropTypes.bool
+  container: _react.PropTypes.bool,
+  relaxed: _react.PropTypes.bool,
+  celled: _react.PropTypes.bool,
+  centered: _react.PropTypes.bool,
+  stackable: _react.PropTypes.bool,
+  padded: _react.PropTypes.bool,
+  internallyCelled: _react.PropTypes.bool,
+  equalWidth: _react.PropTypes.bool,
+  aligned: _SemanticUiPropTypes2.default.verticalAndHorizontalAlignment,
+  reversedDevices: _SemanticUiPropTypes2.default.commonDevices
 };
 exports.default = Grid;

lib/collections/grid/Row.js

@@ -39,2 +39,12 @@ 'use strict';
 
+var _propsToClasses = require('../../util/propsToClasses');
+
+var _propsToClasses2 = _interopRequireDefault(_propsToClasses);
+
+var _SemanticUiPropTypes = require('../../common/SemanticUiPropTypes');
+
+var _SemanticUiPropTypes2 = _interopRequireDefault(_SemanticUiPropTypes);
+
+var _semanticClasses = require('../../common/semanticClasses');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -60,7 +70,13 @@
     value: function render() {
-      var classes = (0, _classnames2.default)('ui', this.columnClasses(), 'row', this.props.className);
+      var _props = this.props;
+      var style = _props.style;
+      var className = _props.className;
+      var equalWidth = _props.equalWidth;
 
+      var classesFromProps = (0, _propsToClasses2.default)(['centered', 'doubling'], this.props);
+      var classes = (0, _classnames2.default)('ui', (0, _semanticClasses.deviceClasses)(this.props), (0, _semanticClasses.alignedClasses)(this.props), this.columnClasses(), { 'equal width': equalWidth }, classesFromProps, 'row', className);
+
       return _react2.default.createElement(
         'div',
-        { className: classes },
+        { className: classes, style: style },
         this.props.children
@@ -75,4 +91,9 @@ );
   children: _react.PropTypes.node,
-  columns: _react.PropTypes.number
+  columns: _react.PropTypes.number,
+  doubling: _react.PropTypes.bool,
+  centered: _react.PropTypes.bool,
+  equalWidth: _react.PropTypes.bool,
+  aligned: _SemanticUiPropTypes2.default.aligned,
+  devices: _SemanticUiPropTypes2.default.devices
 };
 exports.default = Row;

lib/collections/menu/Menu.js

@@ -41,2 +41,6 @@ 'use strict';
 
+var _SemanticUiPropTypes = require('../../common/SemanticUiPropTypes');
+
+var _SemanticUiPropTypes2 = _interopRequireDefault(_SemanticUiPropTypes);
+
 var _MenuItem = require('./MenuItem');
@@ -62,5 +66,8 @@
       var parentMenu = _props.parentMenu;
+      var color = _props.color;
+      var labeledIcon = _props.labeledIcon;
+      var size = _props.size;
 
-      var classesFromProps = (0, _propsToClasses2.default)(['secondary', 'right', 'vertical', 'compact', 'pointing', 'pagination', 'text', 'basic', 'tabular', 'stackable', 'inverted'], this.props);
-      var classes = (0, _classnames2.default)({ 'ui': !parentMenu }, (0, _semanticClasses.itemClasses)(this.props), classesFromProps, 'menu', className);
+      var classesFromProps = (0, _propsToClasses2.default)(['secondary', 'right', 'vertical', 'borderless', 'compact', 'pointing', 'pagination', 'icon', 'text', 'basic', 'fluid', 'tabular', 'stackable', 'inverted'], this.props);
+      var classes = (0, _classnames2.default)({ 'ui': !parentMenu }, color, size, (0, _semanticClasses.itemClasses)(this.props), { 'labeled icon': labeledIcon }, classesFromProps, 'menu', className);
 
@@ -74,2 +81,3 @@ var children = _react2.default.Children.map(this.props.children, function (child) {
       });
+
       return _react2.default.createElement(
@@ -104,2 +112,3 @@ 'div',
   basic: _react.PropTypes.bool,
+  borderless: _react.PropTypes.bool,
   tabular: _react.PropTypes.bool,
@@ -114,4 +123,9 @@ text: _react.PropTypes.bool,
   stackable: _react.PropTypes.bool,
-  inverted: _react.PropTypes.bool
+  inverted: _react.PropTypes.bool,
+  icon: _react.PropTypes.bool,
+  labeledIcon: _react.PropTypes.bool,
+  fluid: _react.PropTypes.bool,
+  color: _SemanticUiPropTypes2.default.color,
+  size: _react.PropTypes.oneOf(['small', 'large'])
 };
 exports.default = Menu;

lib/collections/menu/MenuItem.js

@@ -39,2 +39,8 @@ 'use strict';
 
+var _SemanticUiPropTypes = require('../../common/SemanticUiPropTypes');
+
+var _SemanticUiPropTypes2 = _interopRequireDefault(_SemanticUiPropTypes);
+
+var _semanticClasses = require('../../common/semanticClasses');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -57,5 +63,7 @@
       var children = _props.children;
+      var onClick = _props.onClick;
+      var color = _props.color;
 
       var classesFromProps = (0, _propsToClasses2.default)(['active', 'disabled', 'link', 'down', 'header'], this.props);
-      var classes = (0, _classnames2.default)(classesFromProps, 'item', className);
+      var classes = (0, _classnames2.default)(color, classesFromProps, (0, _semanticClasses.fittedClasses)(this.props), 'item', className);
 
@@ -65,3 +73,3 @@ if (href) {
           'a',
-          { href: href, className: classes },
+          { href: href, className: classes, onClick: onClick },
           children
@@ -72,3 +80,3 @@ );
           'div',
-          { className: classes },
+          { className: classes, onClick: onClick },
           children
@@ -88,4 +96,7 @@ );
   link: _react.PropTypes.bool,
-  down: _react.PropTypes.bool
+  down: _react.PropTypes.bool,
+  fitted: _SemanticUiPropTypes2.default.fitted,
+  onClick: _react.PropTypes.func,
+  color: _SemanticUiPropTypes2.default.color
 };
 exports.default = MenuItem;

lib/common/semanticClasses.js

@@ -6,4 +6,8 @@ 'use strict';
 });
-exports.socialClasses = exports.sortedClasses = exports.buttonClasses = exports.widthClasses = exports.itemClasses = exports.columnClasses = exports.floatedClasses = exports.alignedClasses = exports.attachedClasses = undefined;
+exports.deviceClasses = exports.socialClasses = exports.sortedClasses = exports.buttonClasses = exports.deviceWidthClasses = exports.reversedDevicesClasses = exports.widthClasses = exports.itemClasses = exports.fittedClasses = exports.columnClasses = exports.floatedClasses = exports.alignedClasses = exports.attachedClasses = undefined;
 
+var _typeof2 = require('babel-runtime/helpers/typeof');
+
+var _typeof3 = _interopRequireDefault(_typeof2);
+
 var _spellNumber = require('../util/spellNumber');
@@ -13,2 +17,4 @@
 
+var _string = require('../util/string');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -74,2 +80,14 @@
 
+var fittedClasses = exports.fittedClasses = function fittedClasses(props) {
+  var fitted = props.fitted;
+
+  if (fitted === 'both') {
+    return 'fitted';
+  } else if (fitted === 'horizontally') {
+    return 'horizontally fitted';
+  } else if (fitted === 'vertically') {
+    return 'vertically fitted';
+  }
+};
+
 var itemClasses = exports.itemClasses = function itemClasses(props) {
@@ -87,2 +105,32 @@ var items = props.items;
 
+var reversedDevicesClasses = exports.reversedDevicesClasses = function reversedDevicesClasses(props) {
+  var classes = [];
+  var reversedDevices = props.reversedDevices;
+
+  if (reversedDevices) {
+    reversedDevices.forEach(function (device) {
+      classes.push(device + ' reversed');
+    });
+
+    return classes.join(' ');
+  }
+};
+
+var deviceWidthClasses = exports.deviceWidthClasses = function deviceWidthClasses(props) {
+  var classes = [];
+  var devices = ['mobile', 'tablet', 'computer'];
+
+  devices.forEach(function (device) {
+    var width = props[device + 'Width'];
+
+    if (width) {
+      classes.push((0, _spellNumber2.default)(width) + ' wide ' + device);
+    }
+  });
+
+  if (classes.length > 0) {
+    return classes.join(' ');
+  }
+};
+
 var buttonClasses = exports.buttonClasses = function buttonClasses(props) {
@@ -114,2 +162,22 @@ var buttons = props.buttons;
   }
+};
+
+var deviceClasses = exports.deviceClasses = function deviceClasses(props) {
+  var devices = props.devices;
+
+  if (devices) {
+    var _ret = (function () {
+      var classes = [];
+
+      devices.forEach(function (device) {
+        classes.push((0, _string.splitAndLowerCamelCase)(device));
+      });
+
+      return {
+        v: classes.join(' ') + ' only'
+      };
+    })();
+
+    if ((typeof _ret === 'undefined' ? 'undefined' : (0, _typeof3.default)(_ret)) === "object") return _ret.v;
+  }
 };

lib/common/SemanticUiProptypes.js

@@ -18,3 +18,7 @@ 'use strict';
 var social = _react.PropTypes.oneOf(['facebook', 'twitter', 'googlePlus', 'vk', 'linkedIn', 'instagram', 'youtube']);
+var fitted = _react.PropTypes.oneOf(['both', 'horizontally', 'vertically']);
 
+var devices = _react.PropTypes.arrayOf(_react.PropTypes.oneOf(['computer', 'tablet', 'mobile', 'largeScreen']));
+var commonDevices = _react.PropTypes.arrayOf(_react.PropTypes.oneOf(['computer', 'tablet', 'mobile']));
+
 var SemanticUiPropTypes = {
@@ -24,2 +28,5 @@ attached: attached,
   color: color,
+  commonDevices: commonDevices,
+  devices: devices,
+  fitted: fitted,
   floated: floated,
@@ -26,0 +33,0 @@ social: social,

lib/elements/extra/Text.js

@@ -19,5 +19,6 @@ 'use strict';
   var className = props.className;
+  var extra = props.extra;
   var children = props.children;
 
-  var classes = (0, _classnames2.default)('text', className);
+  var classes = (0, _classnames2.default)({ 'extra': extra }, 'text', className);
 
@@ -31,2 +32,6 @@ return _react2.default.createElement(
 
+Text.propTypes = {
+  extra: _react.PropTypes.bool
+};
+
 exports.default = Text;

lib/index.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.Text = exports.TableFooter = exports.TableHeader = exports.TableRow = exports.TableCell = exports.Table = exports.StepGroup = exports.Step = exports.Statistic = exports.SegmentGroup = exports.Segment = exports.Row = exports.Rail = exports.Message = exports.ModalActions = exports.ModalContent = exports.ModalHeader = exports.Modal = exports.MetaData = exports.Meta = exports.MenuItem = exports.Menu = exports.ListItem = exports.List = exports.LabelGroup = exports.Label = exports.ItemGroup = exports.Item = exports.ImageGroup = exports.Image = exports.Grid = exports.FormField = exports.Form = exports.Flag = exports.Input = exports.Header = exports.FeedEvent = exports.Feed = exports.Divider = exports.Date = exports.ContentSummary = exports.ContentDescription = exports.ContentHeader = exports.Content = exports.Container = exports.CommentGroup = exports.Comment = exports.Column = exports.Checkbox = exports.CardGroup = exports.Card = exports.ButtonGroup = exports.Button = exports.Avatar = exports.Author = exports.Actions = undefined;
+exports.Text = exports.TableFooter = exports.TableHeader = exports.TableRow = exports.TableCell = exports.Table = exports.StepGroup = exports.Step = exports.Statistic = exports.SegmentGroup = exports.Segment = exports.Row = exports.Rail = exports.Message = exports.ModalActions = exports.ModalContent = exports.ModalHeader = exports.Modal = exports.MetaData = exports.Meta = exports.MenuItem = exports.Menu = exports.ListItem = exports.List = exports.LabelGroup = exports.Label = exports.ItemGroup = exports.Item = exports.ImageGroup = exports.Image = exports.Grid = exports.FormField = exports.Form = exports.Flag = exports.Input = exports.Icon = exports.Header = exports.FeedEvent = exports.Feed = exports.Divider = exports.Date = exports.ContentSummary = exports.ContentImages = exports.ContentDescription = exports.ContentHeader = exports.Content = exports.Container = exports.CommentGroup = exports.Comment = exports.Column = exports.Checkbox = exports.CardGroup = exports.Card = exports.ButtonGroup = exports.Button = exports.Avatar = exports.Author = exports.Actions = undefined;
 
@@ -95,2 +95,6 @@ var _Form = require('./collections/Form');
 
+var _Icon = require('./elements/Icon');
+
+var _Icon2 = _interopRequireDefault(_Icon);
+
 var _Input = require('./elements/Input');
@@ -198,2 +202,6 @@
 
+var _ContentImages = require('./elements/extra/ContentImages');
+
+var _ContentImages2 = _interopRequireDefault(_ContentImages);
+
 var _ContentSummary = require('./elements/extra/ContentSummary');
@@ -240,2 +248,3 @@
 exports.ContentDescription = _ContentDescription2.default;
+exports.ContentImages = _ContentImages2.default;
 exports.ContentSummary = _ContentSummary2.default;
@@ -247,2 +256,3 @@ exports.Date = _Date2.default;
 exports.Header = _Header2.default;
+exports.Icon = _Icon2.default;
 exports.Input = _Input2.default;
@@ -249,0 +259,0 @@ exports.Flag = _Flag2.default;

lib/views/feed/Feed.js

@@ -52,5 +52,7 @@ 'use strict';
     value: function render() {
-      var className = this.props.className;
+      var _props = this.props;
+      var className = _props.className;
+      var size = _props.size;
 
-      var classes = (0, _classnames2.default)('ui', 'feed', className);
+      var classes = (0, _classnames2.default)('ui', size, 'feed', className);
 
@@ -68,2 +70,3 @@ return _react2.default.createElement(
 Feed.propTypes = {
+  size: _react.PropTypes.oneOf(['small', 'large']),
   children: function children(props, propName, componentName) {
@@ -70,0 +73,0 @@ var prop = props[propName];

package.json

 {
   "name": "react-semantic-ui-kit",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Semantic UI components built with React",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

No alert changes

Improved metrics

Total package byte prevSize

173884

increased by5.72%

Number of package files

71

increased by4.41%

Lines of code

3979

increased by5.74%

No dependency changes