stardust - npm Package Compare versions

Comparing version 0.41.4 to 0.42.0

dist/collections/Menu/Menu.js

@@ -7,2 +7,6 @@ 'use strict';
 
+var _without2 = require('lodash/without');
+
+var _without3 = _interopRequireDefault(_without2);
+
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
@@ -12,2 +16,6 @@
 
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
 var _react = require('react');
@@ -17,6 +25,8 @@
 
-var _classnames = require('classnames');
+var _lib = require('../../lib');
 
-var _classnames2 = _interopRequireDefault(_classnames);
+var _MenuHeader = require('./MenuHeader');
 
+var _MenuHeader2 = _interopRequireDefault(_MenuHeader);
+
 var _MenuItem = require('./MenuItem');
@@ -26,4 +36,6 @@
 
-var _lib = require('../../lib');
+var _MenuMenu = require('./MenuMenu');
 
+var _MenuMenu2 = _interopRequireDefault(_MenuMenu);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -37,22 +49,27 @@
 
+var _meta = {
+  name: 'Menu',
+  type: _lib.META.TYPES.COLLECTION,
+  props: {
+    attached: ['top', 'bottom'],
+    color: _lib.SUI.COLORS,
+    icon: ['labeled'],
+    fixed: ['bottom', 'top'],
+    size: (0, _without3.default)(_lib.SUI.SIZES, 'medium', 'big'),
+    tabular: ['right'],
+    widths: _lib.SUI.WIDTHS
+  }
+};
+
+/**
+ * A menu displays grouped navigation actions.
+ * */
+
 var Menu = function (_Component) {
   _inherits(Menu, _Component);
 
-  function Menu(props, context) {
+  function Menu() {
     _classCallCheck(this, Menu);
 
-    var _this = _possibleConstructorReturn(this, (Menu.__proto__ || Object.getPrototypeOf(Menu)).call(this, props, context));
-
-    _initialiseProps.call(_this);
-
-    var _this$props = _this.props;
-    var activeItem = _this$props.activeItem;
-    var children = _this$props.children;
-
-    var firstMenuItem = _lib.childrenUtils.findByType(children, _MenuItem2.default);
-
-    _this.state = {
-      activeItem: activeItem || firstMenuItem && firstMenuItem.props.name
-    };
-    return _this;
+    return _possibleConstructorReturn(this, (Menu.__proto__ || Object.getPrototypeOf(Menu)).apply(this, arguments));
   }
@@ -63,28 +80,32 @@
     value: function render() {
-      var _this2 = this;
-
       var _props = this.props;
-      var activeItem = _props.activeItem;
+      var attached = _props.attached;
+      var borderless = _props.borderless;
+      var className = _props.className;
       var children = _props.children;
-      var className = _props.className;
+      var color = _props.color;
+      var compact = _props.compact;
+      var fixed = _props.fixed;
+      var fluid = _props.fluid;
+      var icon = _props.icon;
+      var inverted = _props.inverted;
+      var pagination = _props.pagination;
+      var pointing = _props.pointing;
+      var secondary = _props.secondary;
+      var stackable = _props.stackable;
+      var tabular = _props.tabular;
+      var text = _props.text;
+      var vertical = _props.vertical;
+      var size = _props.size;
+      var widths = _props.widths;
 
+      var classes = (0, _classnames2.default)('ui', color, size, (0, _lib.useWidthProp)(widths, 'item'), (0, _lib.useKeyOrValueAndKey)(attached, 'attached'), (0, _lib.useKeyOnly)(borderless, 'borderless'), (0, _lib.useKeyOnly)(compact, 'compact'), (0, _lib.useValueAndKey)(fixed, 'fixed'), (0, _lib.useKeyOnly)(fluid, 'fluid'), (0, _lib.useKeyOrValueAndKey)(icon, 'icon'), (0, _lib.useKeyOnly)(inverted, 'inverted'), (0, _lib.useKeyOnly)(pagination, 'pagination'), (0, _lib.useKeyOnly)(pointing, 'pointing'), (0, _lib.useKeyOnly)(secondary, 'secondary'), (0, _lib.useKeyOnly)(stackable, 'stackable'), (0, _lib.useKeyOrValueAndKey)(tabular, 'tabular'), (0, _lib.useKeyOnly)(text, 'text'), (0, _lib.useKeyOnly)(vertical, 'vertical'), className, 'menu');
 
-      var classes = (0, _classnames2.default)('ui', className, 'menu');
+      var rest = (0, _lib.getUnhandledProps)(Menu, this.props);
+      var ElementType = (0, _lib.getElementType)(Menu, this.props);
 
-      var _children = _react.Children.map(children, function (child) {
-        var type = child.type;
-        var props = child.props;
-
-
-        return type !== _MenuItem2.default ? child : (0, _react.cloneElement)(child, {
-          active: props.name === _this2.state.activeItem || props.name === activeItem,
-          __onClick: _this2.handleClickItem
-        });
-      });
-      var ElementType = (0, _lib.getElementType)(Menu, this.props);
-      var rest = (0, _lib.getUnhandledProps)(Menu, this.props);
       return _react2.default.createElement(
         ElementType,
         _extends({}, rest, { className: classes }),
-        _children
+        children
       );
@@ -95,3 +116,3 @@ }
   return Menu;
-}(_react.Component);
+}(_lib.AutoControlledComponent);
 
@@ -102,20 +123,73 @@ Menu.propTypes = {
 
-  activeItem: _react.PropTypes.string,
+  /** Index of the currently active item. */
+  activeIndex: _react.PropTypes.number,
+
+  /** A menu may be attached to other content segments. */
+  attached: _react.PropTypes.oneOfType([_react.PropTypes.bool, _react.PropTypes.oneOf(_meta.props.attached)]),
+
+  /** A menu item or menu can have no borders. */
+  borderless: _react.PropTypes.bool,
+
+  /** Primary content of the Menu. */
   children: _react.PropTypes.node,
-  className: _react.PropTypes.string
-};
-Menu._meta = {
-  name: 'Menu',
-  type: _lib.META.TYPES.COLLECTION
-};
-Menu.Item = _MenuItem2.default;
 
-var _initialiseProps = function _initialiseProps() {
-  var _this3 = this;
+  /** Classes that will be added to the Menu className. */
+  className: _react.PropTypes.string,
 
-  this.handleClickItem = function (activeItem) {
-    _this3.setState({ activeItem: activeItem });
-  };
+  /** Additional colors can be specified. */
+  color: _react.PropTypes.oneOf(_meta.props.color),
+
+  /** A menu can take up only the space necessary to fit its content. */
+  compact: _react.PropTypes.bool,
+
+  /** Initial activeIndex value. */
+  defaultActiveIndex: _react.PropTypes.number,
+
+  /** A menu can be fixed to a side of its context. */
+  fixed: _react.PropTypes.oneOf(_meta.props.fixed),
+
+  /** A vertical menu may take the size of its container. */
+  fluid: _react.PropTypes.bool,
+
+  /** A menu may have labeled icons. */
+  icon: _react.PropTypes.oneOfType([_react.PropTypes.bool, _react.PropTypes.oneOf(_meta.props.icon)]),
+
+  /** A menu may have its colors inverted to show greater contrast. */
+  inverted: _react.PropTypes.bool,
+
+  /** onClick handler for MenuItem. */
+  onItemClick: _react.PropTypes.func,
+
+  /** A pagination menu is specially formatted to present links to pages of content. */
+  pagination: _react.PropTypes.bool,
+
+  /** A menu can point to show its relationship to nearby content. */
+  pointing: _react.PropTypes.bool,
+
+  /** A menu can adjust its appearance to de-emphasize its contents. */
+  secondary: _react.PropTypes.bool,
+
+  /** A menu can stack at mobile resolutions. */
+  stackable: _react.PropTypes.bool,
+
+  /** A menu can be formatted to show tabs of information. */
+  tabular: _react.PropTypes.oneOfType([_react.PropTypes.bool, _react.PropTypes.oneOf(_meta.props.tabular)]),
+
+  /** A menu can be formatted for text content. */
+  text: _react.PropTypes.bool,
+
+  /** A vertical menu displays elements vertically. */
+  vertical: _react.PropTypes.bool,
+
+  /** A menu can vary in size. */
+  size: _react.PropTypes.oneOf(_meta.props.size),
+
+  /** A menu can have its items divided evenly. */
+  widths: _react.PropTypes.oneOf(_meta.props.widths)
 };
-
+Menu._meta = _meta;
+Menu.autoControlledProps = ['activeIndex'];
+Menu.Header = _MenuHeader2.default;
+Menu.Item = _MenuItem2.default;
+Menu.Menu = _MenuMenu2.default;
 exports.default = Menu;

dist/collections/Menu/MenuItem.js

@@ -7,7 +7,7 @@ 'use strict';
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+var _startCase2 = require('lodash/startCase');
 
-var _react = require('react');
+var _startCase3 = _interopRequireDefault(_startCase2);
 
-var _react2 = _interopRequireDefault(_react);
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
@@ -18,25 +18,32 @@ var _classnames = require('classnames');
 
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
 var _lib = require('../../lib');
 
-var _elements = require('../../elements');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function MenuItem(props) {
-  var __onClick = props.__onClick;
   var active = props.active;
   var children = props.children;
   var className = props.className;
-  var label = props.label;
+  var color = props.color;
+  var content = props.content;
+  var down = props.down;
+  var fitted = props.fitted;
+  var header = props.header;
+  var index = props.index;
+  var link = props.link;
   var name = props.name;
   var onClick = props.onClick;
+  var position = props.position;
 
+  var classes = (0, _classnames2.default)((0, _lib.useKeyOnly)(active, 'active'), (0, _lib.useKeyOnly)(down, 'down'), (0, _lib.useKeyOrValueAndKey)(fitted, 'fitted'), (0, _lib.useKeyOnly)(header, 'header'), (0, _lib.useKeyOnly)(link, 'link'), color, position, className, 'item');
+  var ElementType = (0, _lib.getElementType)(MenuItem, props, function () {
+    if (onClick) return 'a';
+  });
   var handleClick = function handleClick(e) {
-    if (__onClick) __onClick(name);
-    if (onClick) onClick(name);
+    if (onClick) onClick(e, { name: name, index: index });
   };
-
-  var classes = (0, _classnames2.default)(active && 'active', className, 'item');
-
-  var ElementType = (0, _lib.getElementType)(MenuItem, props);
   var rest = (0, _lib.getUnhandledProps)(MenuItem, props);
@@ -47,9 +54,3 @@
     _extends({}, rest, { className: classes, onClick: handleClick }),
-    name,
-    label && _react2.default.createElement(
-      _elements.Label,
-      null,
-      label
-    ),
-    children
+    children || content || (0, _startCase3.default)(name)
   );
@@ -61,3 +62,8 @@ }
   type: _lib.META.TYPES.COLLECTION,
-  parent: 'Menu'
+  parent: 'Menu',
+  props: {
+    color: _lib.SUI.COLORS,
+    fitted: ['horizontally', 'vertically'],
+    position: ['right']
+  }
 };
@@ -69,15 +75,42 @@
 
-  __onClick: _react.PropTypes.func,
+  /** A menu item can be active. */
   active: _react.PropTypes.bool,
-  children: _react.PropTypes.node,
+
+  /** Primary content of the MenuItem. */
+  children: _lib.customPropTypes.every([_lib.customPropTypes.disallow(['content']), _react.PropTypes.node]),
+
+  /** Classes that will be added to the MenuItem className. */
   className: _react.PropTypes.string,
-  label: _react.PropTypes.node,
+
+  /** Additional colors can be specified. */
+  color: _react.PropTypes.oneOf(MenuItem._meta.props.color),
+
+  /** Shorthand for primary content of the MenuItem. Mutually exclusive with the children. */
+  content: _lib.customPropTypes.every([_lib.customPropTypes.disallow(['children']), _react.PropTypes.string]),
+
+  /** A menu item can be pressed in. */
+  down: _react.PropTypes.bool,
+
+  /** A menu item or menu can remove element padding, vertically or horizontally. */
+  fitted: _react.PropTypes.oneOfType([_react.PropTypes.bool, _react.PropTypes.oneOf(MenuItem._meta.props.fitted)]),
+
+  /** A menu item may include a header or may itself be a header. */
+  header: _react.PropTypes.bool,
+
+  /** MenuItem index inside Menu. */
+  index: _react.PropTypes.number,
+
+  /** A menu item can be link. */
+  link: _react.PropTypes.bool,
+
+  /** Internal name of the MenuItem. */
   name: _react.PropTypes.string,
-  onClick: _react.PropTypes.func
-};
 
-MenuItem.defaultProps = {
-  as: 'a'
+  /** Render as an `a` tag instead of a `div` and called with event on MenuItem click. */
+  onClick: _react.PropTypes.func,
+
+  /** A menu item can take right position. */
+  position: _react.PropTypes.oneOf(MenuItem._meta.props.position)
 };
 
 exports.default = MenuItem;

package.json

 {
   "name": "stardust",
-  "version": "0.41.4",
+  "version": "0.42.0",
   "description": "The official Semantic-UI-React integration.",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/collections/Menu/Menu.js

@@ -1,8 +0,38 @@
-import React, { Children, Component, cloneElement, PropTypes } from 'react'
+import _ from 'lodash'
 import cx from 'classnames'
+import React, { PropTypes } from 'react'
 
+import {
+  AutoControlledComponent as Component,
+  getElementType,
+  getUnhandledProps,
+  META,
+  SUI,
+  useKeyOnly,
+  useKeyOrValueAndKey,
+  useValueAndKey,
+  useWidthProp,
+} from '../../lib'
+import MenuHeader from './MenuHeader'
 import MenuItem from './MenuItem'
-import { childrenUtils, getElementType, getUnhandledProps, META } from '../../lib'
+import MenuMenu from './MenuMenu'
 
-export default class Menu extends Component {
+const _meta = {
+  name: 'Menu',
+  type: META.TYPES.COLLECTION,
+  props: {
+    attached: ['top', 'bottom'],
+    color: SUI.COLORS,
+    icon: ['labeled'],
+    fixed: ['bottom', 'top'],
+    size: _.without(SUI.SIZES, 'medium', 'big'),
+    tabular: ['right'],
+    widths: SUI.WIDTHS,
+  },
+}
+
+/**
+ * A menu displays grouped navigation actions.
+ * */
+class Menu extends Component {
   static propTypes = {
@@ -15,49 +45,123 @@ /** An element type to render as (string or function). */
 
-    activeItem: PropTypes.string,
+    /** Index of the currently active item. */
+    activeIndex: PropTypes.number,
+
+    /** A menu may be attached to other content segments. */
+    attached: PropTypes.oneOfType([
+      PropTypes.bool,
+      PropTypes.oneOf(_meta.props.attached),
+    ]),
+
+    /** A menu item or menu can have no borders. */
+    borderless: PropTypes.bool,
+
+    /** Primary content of the Menu. */
     children: PropTypes.node,
+
+    /** Classes that will be added to the Menu className. */
     className: PropTypes.string,
-  }
 
-  constructor(props, context) {
-    super(props, context)
-    const { activeItem, children } = this.props
-    const firstMenuItem = childrenUtils.findByType(children, MenuItem)
+    /** Additional colors can be specified. */
+    color: PropTypes.oneOf(_meta.props.color),
 
-    this.state = {
-      activeItem: activeItem || firstMenuItem && firstMenuItem.props.name,
-    }
-  }
+    /** A menu can take up only the space necessary to fit its content. */
+    compact: PropTypes.bool,
 
-  handleClickItem = (activeItem) => {
-    this.setState({ activeItem })
-  }
+    /** Initial activeIndex value. */
+    defaultActiveIndex: PropTypes.number,
 
-  static _meta = {
-    name: 'Menu',
-    type: META.TYPES.COLLECTION,
+    /** A menu can be fixed to a side of its context. */
+    fixed: PropTypes.oneOf(_meta.props.fixed),
+
+    /** A vertical menu may take the size of its container. */
+    fluid: PropTypes.bool,
+
+    /** A menu may have labeled icons. */
+    icon: PropTypes.oneOfType([
+      PropTypes.bool,
+      PropTypes.oneOf(_meta.props.icon),
+    ]),
+
+    /** A menu may have its colors inverted to show greater contrast. */
+    inverted: PropTypes.bool,
+
+    /** onClick handler for MenuItem. */
+    onItemClick: PropTypes.func,
+
+    /** A pagination menu is specially formatted to present links to pages of content. */
+    pagination: PropTypes.bool,
+
+    /** A menu can point to show its relationship to nearby content. */
+    pointing: PropTypes.bool,
+
+    /** A menu can adjust its appearance to de-emphasize its contents. */
+    secondary: PropTypes.bool,
+
+    /** A menu can stack at mobile resolutions. */
+    stackable: PropTypes.bool,
+
+    /** A menu can be formatted to show tabs of information. */
+    tabular: PropTypes.oneOfType([
+      PropTypes.bool,
+      PropTypes.oneOf(_meta.props.tabular),
+    ]),
+
+    /** A menu can be formatted for text content. */
+    text: PropTypes.bool,
+
+    /** A vertical menu displays elements vertically. */
+    vertical: PropTypes.bool,
+
+    /** A menu can vary in size. */
+    size: PropTypes.oneOf(_meta.props.size),
+
+    /** A menu can have its items divided evenly. */
+    widths: PropTypes.oneOf(_meta.props.widths),
   }
 
+  static _meta = _meta
+
+  static autoControlledProps = [
+    'activeIndex',
+  ]
+
+  static Header = MenuHeader
   static Item = MenuItem
+  static Menu = MenuMenu
 
   render() {
-    const { activeItem, children, className } = this.props
+    const {
+      attached, borderless, className, children, color, compact, fixed, fluid, icon, inverted, pagination, pointing,
+      secondary, stackable, tabular, text, vertical, size, widths,
+    } = this.props
+    const classes = cx(
+      'ui',
+      color,
+      size,
+      useWidthProp(widths, 'item'),
+      useKeyOrValueAndKey(attached, 'attached'),
+      useKeyOnly(borderless, 'borderless'),
+      useKeyOnly(compact, 'compact'),
+      useValueAndKey(fixed, 'fixed'),
+      useKeyOnly(fluid, 'fluid'),
+      useKeyOrValueAndKey(icon, 'icon'),
+      useKeyOnly(inverted, 'inverted'),
+      useKeyOnly(pagination, 'pagination'),
+      useKeyOnly(pointing, 'pointing'),
+      useKeyOnly(secondary, 'secondary'),
+      useKeyOnly(stackable, 'stackable'),
+      useKeyOrValueAndKey(tabular, 'tabular'),
+      useKeyOnly(text, 'text'),
+      useKeyOnly(vertical, 'vertical'),
+      className,
+      'menu'
+    )
 
-    const classes = cx('ui', className, 'menu')
+    const rest = getUnhandledProps(Menu, this.props)
+    const ElementType = getElementType(Menu, this.props)
 
-    const _children = Children.map(children, (child) => {
-      const { type, props } = child
-
-      return type !== MenuItem ? child : cloneElement(child, {
-        active: props.name === this.state.activeItem || props.name === activeItem,
-        __onClick: this.handleClickItem,
-      })
-    })
-    const ElementType = getElementType(Menu, this.props)
-    const rest = getUnhandledProps(Menu, this.props)
-    return (
-      <ElementType {...rest} className={classes}>
-        {_children}
-      </ElementType>
-    )
+    return <ElementType {...rest} className={classes}>{children}</ElementType>
   }
 }
+
+export default Menu

src/collections/Menu/MenuItem.js

@@ -0,21 +1,36 @@
+import _ from 'lodash'
+import cx from 'classnames'
 import React, { PropTypes } from 'react'
-import cx from 'classnames'
 
-import { getElementType, getUnhandledProps, META } from '../../lib'
-import { Label } from '../../elements'
+import {
+  customPropTypes,
+  getElementType,
+  getUnhandledProps,
+  META,
+  SUI,
+  useKeyOnly,
+  useKeyOrValueAndKey,
+} from '../../lib'
 
 function MenuItem(props) {
-  const { __onClick, active, children, className, label, name, onClick } = props
-  const handleClick = (e) => {
-    if (__onClick) __onClick(name)
-    if (onClick) onClick(name)
-  }
-
+  const {
+    active, children, className, color, content, down, fitted, header, index, link, name, onClick, position,
+  } = props
   const classes = cx(
-    active && 'active',
+    useKeyOnly(active, 'active'),
+    useKeyOnly(down, 'down'),
+    useKeyOrValueAndKey(fitted, 'fitted'),
+    useKeyOnly(header, 'header'),
+    useKeyOnly(link, 'link'),
+    color,
+    position,
     className,
     'item',
   )
-
-  const ElementType = getElementType(MenuItem, props)
+  const ElementType = getElementType(MenuItem, props, () => {
+    if (onClick) return 'a'
+  })
+  const handleClick = (e) => {
+    if (onClick) onClick(e, { name, index })
+  }
   const rest = getUnhandledProps(MenuItem, props)
@@ -25,5 +40,3 @@
     <ElementType {...rest} className={classes} onClick={handleClick}>
-      {name}
-      {label && <Label>{label}</Label>}
-      {children}
+      {children || content || _.startCase(name)}
     </ElementType>
@@ -37,2 +50,7 @@ )
   parent: 'Menu',
+  props: {
+    color: SUI.COLORS,
+    fitted: ['horizontally', 'vertically'],
+    position: ['right'],
+  },
 }
@@ -47,15 +65,51 @@
 
-  __onClick: PropTypes.func,
+  /** A menu item can be active. */
   active: PropTypes.bool,
-  children: PropTypes.node,
+
+  /** Primary content of the MenuItem. */
+  children: customPropTypes.every([
+    customPropTypes.disallow(['content']),
+    PropTypes.node,
+  ]),
+
+  /** Classes that will be added to the MenuItem className. */
   className: PropTypes.string,
-  label: PropTypes.node,
+
+  /** Additional colors can be specified. */
+  color: PropTypes.oneOf(MenuItem._meta.props.color),
+
+  /** Shorthand for primary content of the MenuItem. Mutually exclusive with the children. */
+  content: customPropTypes.every([
+    customPropTypes.disallow(['children']),
+    PropTypes.string,
+  ]),
+
+  /** A menu item can be pressed in. */
+  down: PropTypes.bool,
+
+  /** A menu item or menu can remove element padding, vertically or horizontally. */
+  fitted: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.oneOf(MenuItem._meta.props.fitted),
+  ]),
+
+  /** A menu item may include a header or may itself be a header. */
+  header: PropTypes.bool,
+
+  /** MenuItem index inside Menu. */
+  index: PropTypes.number,
+
+  /** A menu item can be link. */
+  link: PropTypes.bool,
+
+  /** Internal name of the MenuItem. */
   name: PropTypes.string,
+
+  /** Render as an `a` tag instead of a `div` and called with event on MenuItem click. */
   onClick: PropTypes.func,
-}
 
-MenuItem.defaultProps = {
-  as: 'a',
+  /** A menu item can take right position. */
+  position: PropTypes.oneOf(MenuItem._meta.props.position),
 }
 
 export default MenuItem

No alert changes

Improved metrics

Total package byte prevSize

806874

increased by1.86%

Number of package files

251

increased by1.62%

Lines of code

17982

increased by2.05%

No dependency changes