diff --git a/CHANGELOG.md b/CHANGELOG.md index e0cfe98eea299a..b454aed0404472 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,7 @@ ## HEAD +- Remove the deprecated API of `0.14.x`. (#3108) + ## 0.14.4 ###### _Feb 02, 2016_ diff --git a/ROADMAP.md b/ROADMAP.md index 368c5f1c98b7ca..1f7654362e2575 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -7,7 +7,7 @@ The roadmap is a living document, and it is likely that priorities will change, #### Breaking Changes - [ ] Remove deprecated usage of JSON to generate children across the components. -- [ ] [[#3108](https://github.com/callemall/material-ui/pull/3108)] Remove deprecated components, methods & props. +- [x] [[#3108](https://github.com/callemall/material-ui/pull/3108)] Remove deprecated components, methods & props. - [ ] [[#2957](https://github.com/callemall/material-ui/issues/2957)] Standardize callback signatures. - [ ] [[#2980](https://github.com/callemall/material-ui/issues/2980)] [[#1839](https://github.com/callemall/material-ui/issues/1839)] Standardise Datepicker for ISO8601. diff --git a/src/DropDownMenu/DropDownMenu.jsx b/src/DropDownMenu/DropDownMenu.jsx index 8e671eac17c79b..2a2813e740c27b 100644 --- a/src/DropDownMenu/DropDownMenu.jsx +++ b/src/DropDownMenu/DropDownMenu.jsx @@ -2,14 +2,11 @@ import React from 'react'; import Transitions from '../styles/transitions'; import DropDownArrow from '../svg-icons/navigation/arrow-drop-down'; import Menu from '../menus/menu'; -import MenuItem from '../menus/menu-item'; import ClearFix from '../clearfix'; import getMuiTheme from '../styles/getMuiTheme'; import Popover from '../popover/popover'; import PopoverAnimationFromTop from '../popover/popover-animation-from-top'; import {mergeStyles, prepareStyles} from '../utils/styles'; -import warning from 'warning'; -import deprecated from '../utils/deprecatedPropType'; const DropDownMenu = React.createClass({ @@ -40,25 +37,11 @@ const DropDownMenu = React.createClass({ */ disabled: React.PropTypes.bool, - /** - * `DropDownMenu` will use this member to display - * the name of the item. - */ - displayMember: deprecated(React.PropTypes.string, - 'Instead, use composability.'), - /** * Overrides the styles of icon element. */ iconStyle: React.PropTypes.object, - /** - * `DropDownMenu` will use this member to display - * the name of the item on the label. - */ - labelMember: deprecated(React.PropTypes.string, - 'Instead, use composability.'), - /** * Overrides the styles of label when the `DropDownMenu` is inactive. */ @@ -69,12 +52,6 @@ const DropDownMenu = React.createClass({ */ maxHeight: React.PropTypes.number, - /** - * JSON data representing all menu items in the dropdown. - */ - menuItems: deprecated(React.PropTypes.array, - 'Instead, use composability.'), - /** * Overrides the styles of `Menu` when the `DropDownMenu` is displayed. */ @@ -90,12 +67,6 @@ const DropDownMenu = React.createClass({ */ openImmediately: React.PropTypes.bool, - /** - * Index of the item selected. - */ - selectedIndex: deprecated(React.PropTypes.number, - 'Use value instead to control the component.'), - /** * Override the inline-styles of the root element. */ @@ -110,18 +81,6 @@ const DropDownMenu = React.createClass({ * The value that is currently selected. */ value: React.PropTypes.any, - - /** - * Two-way binding link. - */ - valueLink: deprecated(React.PropTypes.object, - 'It\'s deprecated by React too.'), - - /** - * `DropDownMenu` will use this member as the value representing an item. - */ - valueMember: deprecated(React.PropTypes.string, - 'Instead, use composability.'), }, contextTypes: { @@ -145,7 +104,6 @@ const DropDownMenu = React.createClass({ getInitialState() { return { open: this.props.openImmediately, - selectedIndex: this._isControlled() ? null : (this.props.selectedIndex || 0), muiTheme: this.context.muiTheme || getMuiTheme(), }; }, @@ -158,18 +116,14 @@ const DropDownMenu = React.createClass({ componentDidMount() { if (this.props.autoWidth) this._setWidth(); - if (this.props.hasOwnProperty('selectedIndex')) this._setSelectedIndex(this.props.selectedIndex); }, componentWillReceiveProps(nextProps, nextContext) { const newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; this.setState({muiTheme: newMuiTheme}); - if (this.props.autoWidth) this._setWidth(); - if (nextProps.hasOwnProperty('value') || nextProps.hasOwnProperty('valueLink')) { - return; - } else if (nextProps.hasOwnProperty('selectedIndex')) { - this._setSelectedIndex(nextProps.selectedIndex); + if (this.props.autoWidth) { + this._setWidth(); } }, @@ -235,10 +189,6 @@ const DropDownMenu = React.createClass({ */ getInputNode() { const root = this.refs.root; - const item = this.props.menuItems && this.props.menuItems[this.state.selectedIndex]; - if (item) { - root.value = item[this.props.displayMember || 'text']; - } root.focus = () => { if (!this.props.disabled) { @@ -260,11 +210,6 @@ const DropDownMenu = React.createClass({ } }, - _setSelectedIndex(index) { - warning(index >= 0, 'Cannot set selectedIndex to a negative index.'); - this.setState({selectedIndex: (index >= 0) ? index : 0}); - }, - _onControlTouchTap(event) { event.preventDefault(); if (!this.props.disabled) { @@ -276,30 +221,9 @@ const DropDownMenu = React.createClass({ }, _onMenuItemTouchTap(key, payload, e) { - const { - onChange, - menuItems, - value, - valueLink, - valueMember, - } = this.props; - - if (menuItems && (this.state.selectedIndex !== key || e.target.value !== value)) { - const selectedItem = menuItems[key]; - if (selectedItem) { - e.target.value = selectedItem[valueMember || 'payload']; - } - this._onMenuRequestClose(); - } - - if (valueLink) { - valueLink.requestChange(e.target.value); - } else if (onChange) { - onChange(e, key, payload); - } + this.props.onChange(e, key, payload); this.setState({ - selectedIndex: key, open: false, }); }, @@ -311,27 +235,18 @@ const DropDownMenu = React.createClass({ }); }, - _isControlled() { - return this.props.hasOwnProperty('value') || - this.props.hasOwnProperty('valueLink'); - }, - render() { const { autoWidth, children, className, - displayMember, iconStyle, - labelMember, labelStyle, maxHeight, - menuItems, menuStyle, style, underlineStyle, - valueLink, - valueMember = 'payload', + value, ...other, } = this.props; @@ -343,57 +258,19 @@ const DropDownMenu = React.createClass({ const styles = this.getStyles(); - let value; - let selectedIndex = this._isControlled() ? null : this.state.selectedIndex; - - if (menuItems && typeof selectedIndex === 'number') { - warning(menuItems[selectedIndex], - `SelectedIndex of ${selectedIndex} does not exist in menuItems.`); - } - - if (valueMember && this._isControlled()) { - value = this.props.hasOwnProperty('value') ? this.props.value : valueLink.value; - if (menuItems && value !== null && value !== undefined) { - for (let i = 0; i < menuItems.length; i++) { - if (menuItems[i][valueMember] === value) { - selectedIndex = i; - } - } - } - } - let displayValue = ''; - if (menuItems) { - const selectedItem = menuItems[selectedIndex]; - if (selectedItem) { - displayValue = selectedItem[labelMember || 'text'] || selectedItem[displayMember || 'text']; + React.Children.forEach(children, child => { + if (value === child.props.value) { + // This will need to be improved (in case primaryText is a node) + displayValue = child.props.label || child.props.primaryText; } - } else { - React.Children.forEach(children, child => { - if (value === child.props.value) { - // This will need to be improved (in case primaryText is a node) - displayValue = child.props.label || child.props.primaryText; - } - }); - } + }); - let index = 0; - const menuItemElements = menuItems - ? menuItems.map((item, idx) => ( - - )) - : React.Children.map(children, child => { - const clone = React.cloneElement(child, { - onTouchTap: this._onMenuItemTouchTap.bind(this, index, child.props.value), - }, child.props.children); - index += 1; - return clone; + const menuItemElements = React.Children.map(children, (child, index) => { + return React.cloneElement(child, { + onTouchTap: this._onMenuItemTouchTap.bind(this, index, child.props.value), }); + }); let popoverStyle; if (anchorEl && !autoWidth) { diff --git a/src/SelectField/SelectField.jsx b/src/SelectField/SelectField.jsx index acb8703ee3fcf9..182f7ab2beca22 100644 --- a/src/SelectField/SelectField.jsx +++ b/src/SelectField/SelectField.jsx @@ -4,7 +4,6 @@ import TextField from '../text-field'; import DropDownMenu from '../DropDownMenu'; import getMuiTheme from '../styles/getMuiTheme'; import ContextPure from '../mixins/context-pure'; -import deprecated from '../utils/deprecatedPropType'; const SelectField = React.createClass({ @@ -69,24 +68,11 @@ const SelectField = React.createClass({ */ iconStyle: React.PropTypes.object, - /** - * `SelectField` will use text as default value, - * with this property you can choose another name. - */ - labelMember: deprecated(React.PropTypes.string, - 'to promote composability.'), - /** * Overrides the styles of label when the `SelectField` is inactive. */ labelStyle: React.PropTypes.object, - /** - * JSON data representing all menu items in the dropdown. - */ - menuItems: deprecated(React.PropTypes.array, - 'to promote composability.'), - /** * Callback function that is fired when the `SelectField` loses focus. */ @@ -107,12 +93,6 @@ const SelectField = React.createClass({ */ selectFieldRoot: React.PropTypes.object, // Must be changed! - /** - * Index of the item selected. - */ - selectedIndex: deprecated(React.PropTypes.number, - 'with menuItems.'), - /** * Override the inline-styles of the root element. */ diff --git a/src/TextField/TextField.jsx b/src/TextField/TextField.jsx index c491c3f6e81fcb..f4d76e4847d4e4 100644 --- a/src/TextField/TextField.jsx +++ b/src/TextField/TextField.jsx @@ -10,7 +10,6 @@ import ContextPure from '../mixins/context-pure'; import TextFieldHint from './TextFieldHint'; import TextFieldLabel from './TextFieldLabel'; import TextFieldUnderline from './TextFieldUnderline'; -import warning from 'warning'; /** * Check if a value is valid to be displayed inside an input. @@ -351,10 +350,6 @@ const TextField = React.createClass({ if (this.isMounted()) this._getInputNode().blur(); }, - clearValue() { - this.setValue(''); - }, - focus() { if (this.isMounted()) this._getInputNode().focus(); }, @@ -363,30 +358,6 @@ const TextField = React.createClass({ return this.isMounted() ? this._getInputNode().value : undefined; }, - setErrorText(newErrorText) { - warning(false, 'setErrorText() method is deprecated. Use the errorText property instead.'); - - if (this.isMounted()) { - this.setState({errorText: newErrorText}); - } - }, - - setValue(newValue) { - warning(false, - `setValue() method is deprecated. Use the defaultValue property instead. - Or use the TextField as a controlled component with the value property.`); - - if (this.isMounted()) { - if (this.props.multiLine) { - this.refs.input.setValue(newValue); - } else { - this._getInputNode().value = newValue; - } - - this.setState({hasValue: isValid(newValue)}); - } - }, - _getInputNode() { return (this.props.children || this.props.multiLine) ? this.refs.input.getInputNode() : ReactDOM.findDOMNode(this.refs.input); diff --git a/src/auto-complete.jsx b/src/auto-complete.jsx index 0b1cc76fd8ad66..256cca415fb915 100644 --- a/src/auto-complete.jsx +++ b/src/auto-complete.jsx @@ -8,7 +8,6 @@ import MenuItem from './menus/menu-item'; import Divider from './divider'; import Popover from './popover/popover'; import PropTypes from './utils/prop-types'; -import deprecated from './utils/deprecatedPropType'; import getMuiTheme from './styles/getMuiTheme'; const AutoComplete = React.createClass({ @@ -103,8 +102,6 @@ const AutoComplete = React.createClass({ * Text being input to auto complete. */ searchText: React.PropTypes.string, - showAllItems: deprecated(React.PropTypes.bool, - 'showAllItems is deprecated, use noFilter instead'), /** * Override the inline-styles of the root element. @@ -125,8 +122,6 @@ const AutoComplete = React.createClass({ * If true, will update when focus event triggers. */ triggerUpdateOnFocus: React.PropTypes.bool, - updateWhenFocused: deprecated(React.PropTypes.bool, - 'updateWhenFocused has been renamed to triggerUpdateOnFocus'), }, contextTypes: { @@ -332,12 +327,6 @@ const AutoComplete = React.createClass({ let requestsList = []; this.props.dataSource.map((item) => { - //showAllItems is deprecated, will be removed in the future - if (this.props.showAllItems) { - requestsList.push(item); - return; - } - switch (typeof item) { case 'string': if (this.props.filter(this.state.searchText, item, item)) { @@ -435,7 +424,6 @@ const AutoComplete = React.createClass({ }} onFocus={() => { if (!open && (this.props.triggerUpdateOnFocus - || this.props.updateWhenFocused //this line will be removed in the future || this.requestsList > 0)) { this._updateRequests(this.state.searchText); } diff --git a/src/date-picker/date-picker.jsx b/src/date-picker/date-picker.jsx index fd87a820d71af5..de67b022aed5eb 100644 --- a/src/date-picker/date-picker.jsx +++ b/src/date-picker/date-picker.jsx @@ -5,8 +5,6 @@ import DateTime from '../utils/date-time'; import DatePickerDialog from './date-picker-dialog'; import TextField from '../text-field'; import getMuiTheme from '../styles/getMuiTheme'; -import deprecated from '../utils/deprecatedPropType'; -import warning from 'warning'; const DatePicker = React.createClass({ @@ -117,12 +115,6 @@ const DatePicker = React.createClass({ */ shouldDisableDate: React.PropTypes.func, - /** - * Enables the year selection in the date picker. - */ - showYearSelector: deprecated(React.PropTypes.bool, - 'Instead, use disableYearSelection.'), - /** * Override the inline-styles of the root element. */ @@ -211,15 +203,6 @@ const DatePicker = React.createClass({ return this.state.date; }, - setDate(date) { - warning(false, `setDate() method is deprecated. Use the defaultDate property instead. - Or use the DatePicker as a controlled component with the value property.`); - - this.setState({ - date: date, - }); - }, - /** * Open the date-picker dialog programmatically from a parent. */ diff --git a/src/dialog.jsx b/src/dialog.jsx index 850bf16826624d..fb183817cd8b83 100644 --- a/src/dialog.jsx +++ b/src/dialog.jsx @@ -4,13 +4,10 @@ import WindowListenable from './mixins/window-listenable'; import KeyCode from './utils/key-code'; import Transitions from './styles/transitions'; import StylePropable from './mixins/style-propable'; -import FlatButton from './flat-button'; import Overlay from './overlay'; import RenderToLayer from './render-to-layer'; import Paper from './paper'; import getMuiTheme from './styles/getMuiTheme'; -import warning from 'warning'; -import deprecated from './utils/deprecatedPropType'; import ReactTransitionGroup from 'react-addons-transition-group'; @@ -100,7 +97,6 @@ const TransitionItem = React.createClass({ const DialogInline = React.createClass({ propTypes: { - actionFocus: React.PropTypes.string, actions: React.PropTypes.node, actionsContainerClassName: React.PropTypes.string, actionsContainerStyle: React.PropTypes.object, @@ -122,7 +118,6 @@ const DialogInline = React.createClass({ title: React.PropTypes.node, titleClassName: React.PropTypes.string, titleStyle: React.PropTypes.object, - width: React.PropTypes.any, }, contextTypes: { @@ -170,7 +165,6 @@ const DialogInline = React.createClass({ const { autoScrollBodyContent, open, - width, } = this.props; const muiTheme = this.state.muiTheme; @@ -197,7 +191,7 @@ const DialogInline = React.createClass({ WebkitTapHighlightColor: 'rgba(0,0,0,0)', transition: Transitions.easeOut(), position: 'relative', - width: width || '75%', + width: '75%', maxWidth: spacing.desktopKeylineIncrement * 12, margin: '0 auto', zIndex: muiTheme.zIndex.dialog, @@ -232,82 +226,10 @@ const DialogInline = React.createClass({ }; }, - - _getAction(actionJSON) { - warning(false, `using actionsJSON is deprecated on Dialog, please provide an array of - buttons, or any other components instead. For more information please refer to documentations.`); - const props = { - secondary: true, - onClick: actionJSON.onClick, - onTouchTap: () => { - if (actionJSON.onTouchTap) { - actionJSON.onTouchTap.call(undefined); - } - if (!(actionJSON.onClick || actionJSON.onTouchTap)) { - this._requestClose(true); - } - }, - label: actionJSON.text, - style: { - marginRight: 8, - }, - }; - - if (actionJSON.ref) { - props.ref = actionJSON.ref; - props.keyboardFocused = actionJSON.ref === this.props.actionFocus; - } - if (actionJSON.id) { - props.id = actionJSON.id; - } - - return ( - - ); - }, - - _getActionObjects(actions) { - const actionObjects = []; - - // ------- Replace this selction with: - // - // React.Children.forEach(actions, action => { - // if (React.isValidElement(action)) { - // actionObjects.push(action); - // } - // }); - // - // Also the return element will not need a call to React.Children.toArray - // - // for the 0.15.0 release - - if (actions) { - - if (React.isValidElement(actions)) { - actionObjects.push(actions); - } else { - actions.forEach(action => { - if (action) { - if (!React.isValidElement(action)) { - action = this._getAction(action); - } - actionObjects.push(action); - } - }); - } - } - - // ------- End of section - - return actionObjects; - }, - _getActionsContainer(actions, styles, className) { - const actionObjects = this._getActionObjects(actions); - - return actionObjects.length > 0 && ( + return React.Children.count(actions) > 0 && (
- {React.Children.toArray(actionObjects)} + {React.Children.toArray(actions)}
); }, @@ -355,8 +277,9 @@ const DialogInline = React.createClass({ if (title) maxDialogContentHeight -= dialogContent.previousSibling.offsetHeight; - const hasActions = this._getActionObjects(actions).length > 0; - if (hasActions) maxDialogContentHeight -= dialogContent.nextSibling.offsetHeight; + if (React.Children.count(actions)) { + maxDialogContentHeight -= dialogContent.nextSibling.offsetHeight; + } dialogContent.style.maxHeight = maxDialogContentHeight + 'px'; } @@ -468,12 +391,6 @@ const DialogInline = React.createClass({ const Dialog = React.createClass({ propTypes: { - /** - * The `ref` of the action to focus on when the `Dialog` is displayed. - */ - actionFocus: deprecated(React.PropTypes.string, - 'Instead, use a custom `actions` property.'), - /** * This prop can be either a JSON object containing the actions to render (This is **DEPRECATED**), * a react elements, or an array of react elements. @@ -583,12 +500,6 @@ const Dialog = React.createClass({ * Overrides the inline-styles of the title's root container element. */ titleStyle: React.PropTypes.object, - - /** - * Changes the width of the `Dialog`. - */ - width: deprecated(React.PropTypes.any, - 'Use the contentStyle.'), }, getDefaultProps() { diff --git a/src/drop-down-icon.jsx b/src/drop-down-icon.jsx deleted file mode 100644 index 4bee988f1bd104..00000000000000 --- a/src/drop-down-icon.jsx +++ /dev/null @@ -1,150 +0,0 @@ -import React from 'react'; -import StylePropable from './mixins/style-propable'; -import Transitions from './styles/transitions'; -import ClickAwayable from './mixins/click-awayable'; -import FontIcon from './font-icon'; -import Menu from './menu/menu'; -import getMuiTheme from './styles/getMuiTheme'; -import warning from 'warning'; - -const DropDownIcon = React.createClass({ - - propTypes: { - children: React.PropTypes.node, - closeOnMenuItemTouchTap: React.PropTypes.bool, - iconClassName: React.PropTypes.string, - iconLigature: React.PropTypes.string, - iconStyle: React.PropTypes.object, - menuItems: React.PropTypes.array.isRequired, - onChange: React.PropTypes.func, - - /** - * Override the inline-styles of the root element. - */ - style: React.PropTypes.object, - }, - - contextTypes: { - muiTheme: React.PropTypes.object, - }, - - //for passing default theme context to children - childContextTypes: { - muiTheme: React.PropTypes.object, - }, - - mixins: [StylePropable, ClickAwayable], - - getDefaultProps() { - return { - closeOnMenuItemTouchTap: true, - }; - }, - - getInitialState() { - warning(false, 'DropDownIcon has been deprecated and will be removed in an upcoming verion.' + - ' Please use IconMenu instead.'); - - return { - open: false, - muiTheme: this.context.muiTheme || getMuiTheme(), - }; - }, - - getChildContext() { - return { - muiTheme: this.state.muiTheme, - }; - }, - - //to update theme inside state whenever a new theme is passed down - //from the parent / owner using context - componentWillReceiveProps(nextProps, nextContext) { - let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; - this.setState({muiTheme: newMuiTheme}); - }, - - componentClickAway() { - this.setState({open: false}); - }, - - getStyles() { - let spacing = this.state.muiTheme.rawTheme.spacing; - let iconWidth = 48; - let styles = { - root: { - display: 'inline-block', - width: iconWidth + 'px !important', - position: 'relative', - height: spacing.desktopToolbarHeight, - fontSize: spacing.desktopDropDownMenuFontSize, - cursor: 'pointer', - }, - menu: { - transition: Transitions.easeOut(), - right: '-14px !important', - top: '9px !important', - opacity: (this.state.open) ? 1 : 0, - }, - menuItem: { // similair to drop down menu's menu item styles - paddingRight: (spacing.iconSize + (spacing.desktopGutterLess * 2)), - height: spacing.desktopDropDownMenuItemHeight, - lineHeight: spacing.desktopDropDownMenuItemHeight + 'px', - }, - }; - return styles; - }, - - _onControlClick() { - this.setState({open: !this.state.open}); - }, - - _onMenuItemClick(e, key, payload) { - if (this.props.onChange) this.props.onChange(e, key, payload); - - if (this.props.closeOnMenuItemTouchTap) { - this.setState({open: false}); - } - }, - - render() { - const { - style, - children, - menuItems, - closeOnMenuItemTouchTap, - iconStyle, - iconLigature, - iconClassName, - ...other, - } = this.props; - - const styles = this.getStyles(); - - return ( -
-
- - {iconLigature} - - {children} -
- -
- ); - }, - -}); - -export default DropDownIcon; diff --git a/src/index.js b/src/index.js index 1eb2a4845ddb63..ca6f616cd9ec66 100644 --- a/src/index.js +++ b/src/index.js @@ -18,7 +18,6 @@ import DatePicker from './date-picker/date-picker'; import DatePickerDialog from './date-picker/date-picker-dialog'; import Dialog from './dialog'; import Divider from './divider'; -import DropDownIcon from './drop-down-icon'; import DropDownMenu from './drop-down-menu'; import EnhancedButton from './enhanced-button'; import FlatButton from './flat-button'; @@ -31,7 +30,6 @@ import IconMenu from './menus/icon-menu'; import LeftNav from './left-nav'; import LinearProgress from './linear-progress'; import List from './lists/list'; -import ListDivider from './lists/list-divider'; import ListItem from './lists/list-item'; import Menu from './menus/menu'; import MenuItem from './menus/menu-item'; @@ -90,7 +88,6 @@ export {DatePicker}; export {DatePickerDialog}; export {Dialog}; export {Divider}; -export {DropDownIcon}; export {DropDownMenu}; export {EnhancedButton}; export {FlatButton}; @@ -103,7 +100,6 @@ export {IconMenu}; export {LeftNav}; export {LinearProgress}; export {List}; -export {ListDivider}; export {ListItem}; export {Menu}; export {MenuItem}; @@ -173,7 +169,6 @@ export default { DatePickerDialog, Dialog, Divider, - DropDownIcon, DropDownMenu, EnhancedButton, FlatButton, @@ -186,7 +181,6 @@ export default { LeftNav, LinearProgress, List, - ListDivider, ListItem, Menu, MenuItem, diff --git a/src/left-nav.jsx b/src/left-nav.jsx index f130eea842cde5..c3ea0065825c02 100644 --- a/src/left-nav.jsx +++ b/src/left-nav.jsx @@ -7,10 +7,7 @@ import Transitions from './styles/transitions'; import WindowListenable from './mixins/window-listenable'; import Overlay from './overlay'; import Paper from './paper'; -import Menu from './menu/menu'; import getMuiTheme from './styles/getMuiTheme'; -import warning from 'warning'; -import deprecated from './utils/deprecatedPropType'; let openNavEventHandler = null; @@ -38,64 +35,13 @@ const LeftNav = React.createClass({ */ docked: React.PropTypes.bool, - /** - * A react component that will be displayed above all the menu items. - * Usually, this is used for a logo or a profile image. - */ - header: deprecated(React.PropTypes.element, - 'Instead, use composability.'), - - /** - * Class name for the menuItem. - */ - menuItemClassName: deprecated(React.PropTypes.string, - 'It will be removed with menuItems.'), - - /** - * Class name for the link menuItem. - */ - menuItemClassNameLink: deprecated(React.PropTypes.string, - 'It will be removed with menuItems.'), - - /** - * Class name for the subheader menuItem. - */ - menuItemClassNameSubheader: deprecated(React.PropTypes.string, - 'It will be removed with menuItems.'), - - /** - * JSON data representing all menu items to render. - */ - menuItems: deprecated(React.PropTypes.array, - 'Instead, use composability.'), - - /** - * Fired when a menu item is clicked that is not the - * one currently selected. Note that this requires the `injectTapEventPlugin` - * component. See the "Get Started" section for more detail. - */ - onChange: deprecated(React.PropTypes.func, - 'It will be removed with menuItems.'), - - /** - * Fired when the component is opened. - */ - onNavClose: deprecated(React.PropTypes.func, - 'Instead, use onRequestChange.'), - - /** - * Fired when the component is closed. - */ - onNavOpen: deprecated(React.PropTypes.func, - 'Instead, use onRequestChange.'), - /** * Callback function that is fired when the open state of the `LeftNav` is * requested to be changed. The provided open argument determines whether * the `LeftNav` is requested to be opened or closed. Also, the reason * argument states why the `LeftNav` got closed or opend. It can be either - * `'clickaway'` for menuItem and overlay clicks, `'escape'` for pressing the - * escape key and 'swipe' for swiping. For opening the reason is always `'swipe'`. + * `'clickaway'` for overlay clicks, `'escape'` for pressing the + * escape key and `'swipe'` for swiping. For opening the reason is always `'swipe'`. */ onRequestChange: React.PropTypes.func, @@ -120,12 +66,6 @@ const LeftNav = React.createClass({ */ overlayStyle: React.PropTypes.object, - /** - * Indicates the particular item in the menuItems array that is currently selected. - */ - selectedIndex: deprecated(React.PropTypes.number, - 'It will be removed with menuItems.'), - /** * Override the inline-styles of the root element. */ @@ -190,7 +130,6 @@ const LeftNav = React.createClass({ }, componentDidMount() { - this._updateMenuHeight(); this._enableSwipeHandling(); }, @@ -210,7 +149,6 @@ const LeftNav = React.createClass({ }, componentDidUpdate() { - this._updateMenuHeight(); this._enableSwipeHandling(); }, @@ -220,34 +158,11 @@ const LeftNav = React.createClass({ windowListeners: { keyup: '_onWindowKeyUp', - resize: '_onWindowResize', - }, - - toggle() { - warning(false, 'using methods on left nav has been deprecated. Please refer to documentations.'); - if (this.state.open) this.close(); - else this.open(); - return this; - }, - - close() { - warning(false, 'using methods on left nav has been deprecated. Please refer to documentations.'); - this.setState({open: false}); - if (this.props.onNavClose) this.props.onNavClose(); - return this; - }, - - open() { - warning(false, 'using methods on left nav has been deprecated. Please refer to documentations.'); - this.setState({open: true}); - if (this.props.onNavOpen) this.props.onNavOpen(); - return this; }, getStyles() { const muiTheme = this.state.muiTheme; const theme = muiTheme.leftNav; - const rawTheme = muiTheme.rawTheme; const x = this._getTranslateMultiplier() * (this.state.open ? 0 : this._getMaxTranslateX()); @@ -264,35 +179,16 @@ const LeftNav = React.createClass({ backgroundColor: theme.color, overflow: 'auto', }, - menu: { - overflowY: 'auto', - overflowX: 'hidden', - height: '100%', - borderRadius: '0', - }, overlay: { zIndex: muiTheme.zIndex.leftNavOverlay, pointerEvents: this.state.open ? 'auto' : 'none', // Bypass mouse events when left nav is closing. }, - menuItem: { - height: rawTheme.spacing.desktopLeftNavMenuItemHeight, - lineHeight: `${rawTheme.spacing.desktopLeftNavMenuItemHeight}px`, - }, rootWhenOpenRight: { left: 'auto', right: 0, }, }; - styles.menuItemLink = this.mergeStyles(styles.menuItem, { - display: 'block', - textDecoration: 'none', - color: rawTheme.palette.textColor, - }); - styles.menuItemSubheader = this.mergeStyles(styles.menuItem, { - overflow: 'hidden', - }); - return styles; }, @@ -312,24 +208,6 @@ const LeftNav = React.createClass({ return this; }, - _updateMenuHeight() { - if (this.props.header) { - const menu = ReactDOM.findDOMNode(this.refs.menuItems); - if (menu) { - const container = ReactDOM.findDOMNode(this.refs.clickAwayableElement); - const menuHeight = container.clientHeight - menu.offsetTop; - menu.style.height = menuHeight + 'px'; - } - } - }, - - _onMenuItemClick(e, key, payload) { - if (this.props.onChange && this.props.selectedIndex !== key) { - this.props.onChange(e, key, payload); - } - if (!this.props.docked) this._close('clickaway'); - }, - _onOverlayTouchTap(event) { event.preventDefault(); this._close('clickaway'); @@ -343,10 +221,6 @@ const LeftNav = React.createClass({ } }, - _onWindowResize() { - this._updateMenuHeight(); - }, - _getMaxTranslateX() { const width = this.props.width || this.state.muiTheme.leftNav.width; return width + 10; @@ -491,17 +365,12 @@ const LeftNav = React.createClass({ render() { const { + children, className, docked, - header, - menuItemClassName, - menuItemClassNameSubheader, - menuItemClassNameLink, - menuItems, openRight, overlayClassName, overlayStyle, - selectedIndex, style, } = this.props; @@ -520,27 +389,6 @@ const LeftNav = React.createClass({ /> ); } - let children; - if (menuItems === undefined) { - children = this.props.children; - } else { - children = ( - - ); - } return (
@@ -553,7 +401,6 @@ const LeftNav = React.createClass({ className={className} style={this.mergeStyles(styles.root, openRight && styles.rootWhenOpenRight, style)} > - {header} {children}
diff --git a/src/lists/index.js b/src/lists/index.js index 1e39d140a3a96f..c8c4bad676cd99 100644 --- a/src/lists/index.js +++ b/src/lists/index.js @@ -1,13 +1,10 @@ import List from './list'; -import ListDivider from './list-divider'; import ListItem from './list-item'; export {List}; -export {ListDivider}; export {ListItem}; export default { List, - ListDivider, ListItem, }; diff --git a/src/lists/list-divider.jsx b/src/lists/list-divider.jsx deleted file mode 100644 index acb2b093640dcb..00000000000000 --- a/src/lists/list-divider.jsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import Divider from '../divider'; -import warning from 'warning'; - -const ListDivider = React.createClass({ - - getInitialState() { - warning(false, ' has been deprecated. Please use the component.'); - return null; - }, - - render() { - return ; - }, -}); - -export default ListDivider; diff --git a/src/menu/index.js b/src/menu/index.js deleted file mode 100644 index 2bb8e6fa228f20..00000000000000 --- a/src/menu/index.js +++ /dev/null @@ -1,6 +0,0 @@ -export default { - Menu: require('./menu'), - MenuItem: require('./menu-item'), - LinkMenuItem: require('./link-menu-item'), - SubheaderMenuItem: require('./subheader-menu-item'), -}; diff --git a/src/menu/link-menu-item.jsx b/src/menu/link-menu-item.jsx deleted file mode 100644 index 0bd3da27468fa9..00000000000000 --- a/src/menu/link-menu-item.jsx +++ /dev/null @@ -1,138 +0,0 @@ -import React from 'react'; -import StylePropable from '../mixins/style-propable'; -import getMuiTheme from '../styles/getMuiTheme'; - -/*eslint-disable */ - -const LinkMenuItem = React.createClass({ - - propTypes: { - active: React.PropTypes.bool, - className: React.PropTypes.string, - disabled: React.PropTypes.bool, - index: React.PropTypes.number.isRequired, - onMouseEnter: React.PropTypes.func, - onMouseLeave: React.PropTypes.func, - payload: React.PropTypes.string.isRequired, - selected: React.PropTypes.bool, - style: React.PropTypes.object, - target: React.PropTypes.string, - text: React.PropTypes.string.isRequired, - }, - - contextTypes: { - muiTheme: React.PropTypes.object, - }, - - //for passing default theme context to children - childContextTypes: { - muiTheme: React.PropTypes.object, - }, - - mixins: [StylePropable], - - getDefaultProps() { - return { - active: false, - disabled: false, - }; - }, - - getInitialState() { - return { - muiTheme: this.context.muiTheme || getMuiTheme(), - hovered: false, - }; - }, - - getChildContext() { - return { - muiTheme: this.state.muiTheme, - }; - }, - - //to update theme inside state whenever a new theme is passed down - //from the parent / owner using context - componentWillReceiveProps(nextProps, nextContext) { - let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; - this.setState({muiTheme: newMuiTheme}); - }, - - getTheme() { - return this.state.muiTheme.menuItem; - }, - - getStyles() { - let style = { - root: { - userSelect: 'none', - cursor: 'pointer', - display: 'block', - lineHeight: this.getTheme().height + 'px', - paddingLeft: this.getTheme().padding, - paddingRight: this.getTheme().padding, - }, - rootWhenHovered: { - backgroundColor: this.getTheme().hoverColor, - }, - rootWhenSelected: { - color: this.getTheme().selectedTextColor, - }, - rootWhenDisabled: { - cursor: 'default', - color: this.state.muiTheme.rawTheme.palette.disabledColor, - }, - }; - - return style; - }, - - _stopLink(event) { - event.preventDefault(); - }, - - _handleMouseEnter(e) { - this.setState({hovered: true}); - if (!this.props.disabled && this.props.onMouseEnter) this.props.onMouseEnter(e); - }, - - _handleMouseLeave(e) { - this.setState({hovered: false}); - if (!this.props.disabled && this.props.onMouseLeave) this.props.onMouseLeave(e); - }, - - render() { - let onClickHandler = (this.props.disabled) ? this._stopLink : undefined; - // Prevent context menu 'Open In New Tab/Window' - let linkAttribute = (this.props.disabled) ? 'data-href' : 'href'; - let link = {}; - link[linkAttribute] = this.props.payload; - - let styles = this.getStyles(); - - let linkStyles = - this.prepareStyles( - styles.root, - this.props.selected && styles.rootWhenSelected, - this.props.selected && styles.rootWhenSelected, - (this.props.active && !this.props.disabled) && styles.rootWhenHovered, - this.props.style, - this.props.disabled && styles.rootWhenDisabled); - - return ( - - {this.props.text} - - ); - }, - -}); - -export default LinkMenuItem; diff --git a/src/menu/menu-item.jsx b/src/menu/menu-item.jsx deleted file mode 100644 index 7796ddf47895e1..00000000000000 --- a/src/menu/menu-item.jsx +++ /dev/null @@ -1,248 +0,0 @@ -import React from 'react'; -import StylePropable from '../mixins/style-propable'; -import FontIcon from '../font-icon'; -import Toggle from '../toggle'; -import getMuiTheme from '../styles/getMuiTheme'; -import warning from 'warning'; - -/*eslint-disable */ - -const Types = { - LINK: 'LINK', - SUBHEADER: 'SUBHEADER', - NESTED: 'NESTED', -}; - - -const MenuItem = React.createClass({ - - propTypes: { - active: React.PropTypes.bool, - attribute: React.PropTypes.string, - children: React.PropTypes.node, - className: React.PropTypes.string, - data: React.PropTypes.string, - disabled: React.PropTypes.bool, - icon: React.PropTypes.node, - iconClassName: React.PropTypes.string, - iconRightClassName: React.PropTypes.string, - iconRightStyle: React.PropTypes.object, - iconStyle: React.PropTypes.object, - index: React.PropTypes.number.isRequired, - number: React.PropTypes.string, - onMouseEnter: React.PropTypes.func, - onMouseLeave: React.PropTypes.func, - onToggle: React.PropTypes.func, - onTouchTap: React.PropTypes.func, - selected: React.PropTypes.bool, - style: React.PropTypes.object, - toggle: React.PropTypes.bool, - }, - - contextTypes: { - muiTheme: React.PropTypes.object, - }, - - //for passing default theme context to children - childContextTypes: { - muiTheme: React.PropTypes.object, - }, - - mixins: [StylePropable], - - statics: { - Types: Types, - }, - - getDefaultProps() { - return { - toggle: false, - disabled: false, - active: false, - }; - }, - - getInitialState() { - warning(false, 'This menu item component is deprecated use menus/menu-item instead.'); - - return { - muiTheme: this.context.muiTheme || getMuiTheme(), - }; - }, - - getChildContext() { - return { - muiTheme: this.state.muiTheme, - }; - }, - - //to update theme inside state whenever a new theme is passed down - //from the parent / owner using context - componentWillReceiveProps(nextProps, nextContext) { - let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; - this.setState({muiTheme: newMuiTheme}); - }, - - getTheme() { - return this.state.muiTheme.menuItem; - }, - - getSpacing() { - return this.state.muiTheme.rawTheme.spacing; - }, - - getStyles() { - const isRtl = this.context.muiTheme.isRtl; - - const right = isRtl ? 'left' : 'right'; - const left = isRtl ? 'right' : 'left'; - - const marginRight = isRtl ? 'marginLeft' : 'marginRight'; - const paddingLeft = isRtl ? 'paddingRight' : 'paddingLeft'; - - let styles = { - root: { - userSelect: 'none', - cursor: 'pointer', - lineHeight: this.getTheme().height + 'px', - paddingLeft: this.getTheme().padding, - paddingRight: this.getTheme().padding, - color: this.state.muiTheme.rawTheme.palette.textColor, - }, - number: { - float: right, - width: 24, - textAlign: 'center', - }, - attribute: { - float: right, - }, - iconRight: { - lineHeight: this.getTheme().height + 'px', - float: right, - }, - icon: { - float: left, - lineHeight: this.getTheme().height + 'px', - [marginRight]: this.getSpacing().desktopGutter, - }, - data: { - display: 'block', - [paddingLeft]: this.getSpacing().desktopGutter * 2, - lineHeight: this.getTheme().dataHeight + 'px', - height: this.getTheme().dataHeight + 'px', - verticalAlign: 'top', - top: -12, - position: 'relative', - fontWeight: 300, - color: this.state.muiTheme.rawTheme.palette.textColor, - }, - toggle: { - marginTop: ((this.getTheme().height - this.state.muiTheme.radioButton.size) / 2), - float: right, - width: 42, - }, - rootWhenHovered: { - backgroundColor: this.getTheme().hoverColor, - }, - rootWhenSelected: { - color: this.getTheme().selectedTextColor, - }, - rootWhenDisabled: { - cursor: 'default', - color: this.state.muiTheme.rawTheme.palette.disabledColor, - }, - }; - - return styles; - }, - - _handleTouchTap(e) { - if (!this.props.disabled && this.props.onTouchTap) this.props.onTouchTap(e, this.props.index); - }, - - _handleToggle(e, toggled) { - if (!this.props.disabled && this.props.onToggle) this.props.onToggle(e, this.props.index, toggled); - }, - - _handleMouseEnter(e) { - if (!this.props.disabled && this.props.onMouseEnter) this.props.onMouseEnter(e, this.props.index); - }, - - _handleMouseLeave(e) { - if (!this.props.disabled && this.props.onMouseLeave) this.props.onMouseLeave(e, this.props.index); - }, - - render() { - let icon; - let data; - let iconRight; - let attribute; - let number; - let toggleElement; - let styles = this.getStyles(); - - if (this.props.iconClassName) { - icon = ( - - ); - } - if (this.props.iconRightClassName) { - iconRight = ( - - ); - } - if (this.props.data) data = {this.props.data}; - if (this.props.number !== undefined) { - number = {this.props.number}; - } - if (this.props.attribute !== undefined) { - attribute = {this.props.attribute}; - } - if (this.props.icon) icon = this.props.icon; - - if (this.props.toggle) { - let { - toggle, - onTouchTap, - onToggle, - onMouseEnter, - onMouseLeave, - children, - style, - ...other, - } = this.props; - toggleElement = ; - } - - return ( -
- - {icon} - {this.props.children} - {number} - {attribute} - {data} - {toggleElement} - {iconRight} - -
- ); - }, -}); - -export default MenuItem; diff --git a/src/menu/menu.jsx b/src/menu/menu.jsx deleted file mode 100644 index 7ee7640037f0d7..00000000000000 --- a/src/menu/menu.jsx +++ /dev/null @@ -1,656 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import CssEvent from '../utils/css-event'; -import KeyLine from '../utils/key-line'; -import KeyCode from '../utils/key-code'; -import StylePropable from '../mixins/style-propable'; -import Transitions from '../styles/transitions'; -import ClickAwayable from '../mixins/click-awayable'; -import Paper from '../paper'; -import MenuItem from './menu-item'; -import LinkMenuItem from './link-menu-item'; -import SubheaderMenuItem from './subheader-menu-item'; -import getMuiTheme from '../styles/getMuiTheme'; -import warning from 'warning'; - -/*eslint-disable */ - -/*********************** -* Nested Menu Component -***********************/ -const NestedMenuItem = React.createClass({ - - propTypes: { - active: React.PropTypes.bool, - disabled: React.PropTypes.bool, - index: React.PropTypes.number.isRequired, - menuItemStyle: React.PropTypes.object, - menuItems: React.PropTypes.array.isRequired, - onItemTap: React.PropTypes.func, - onMouseOut: React.PropTypes.func, - onMouseOver: React.PropTypes.func, - style: React.PropTypes.object, - text: React.PropTypes.string, - zDepth: React.PropTypes.number, - }, - - contextTypes: { - muiTheme: React.PropTypes.object, - }, - - //for passing default theme context to children - childContextTypes: { - muiTheme: React.PropTypes.object, - }, - - mixins: [ClickAwayable, StylePropable], - - getDefaultProps() { - return { - disabled: false, - }; - }, - - getInitialState() { - return { - muiTheme: this.context.muiTheme || getMuiTheme(), - open: false, - activeIndex: 0, - }; - }, - - getChildContext() { - return { - muiTheme: this.state.muiTheme, - }; - }, - - componentDidMount() { - this._positionNestedMenu(); - ReactDOM.findDOMNode(this).focus(); - }, - - componentDidUpdate() { - this._positionNestedMenu(); - }, - - componentClickAway() { - this._closeNestedMenu(); - }, - - getSpacing() { - return this.state.muiTheme.rawTheme.spacing; - }, - - getStyles() { - let styles = { - root: { - userSelect: 'none', - cursor: 'pointer', - lineHeight: this.getTheme().height + 'px', - color: this.state.muiTheme.rawTheme.palette.textColor, - }, - icon: { - float: 'left', - lineHeight: this.getTheme().height + 'px', - marginRight: this.getSpacing().desktopGutter, - }, - toggle: { - marginTop: ((this.getTheme().height - this.state.muiTheme.radioButton.size) / 2), - float: 'right', - width: 42, - }, - rootWhenHovered: { - backgroundColor: this.getTheme().hoverColor, - }, - rootWhenSelected: { - color: this.getTheme().selectedTextColor, - }, - rootWhenDisabled: { - cursor: 'default', - color: this.state.muiTheme.rawTheme.palette.disabledColor, - }, - }; - - return styles; - }, - - getTheme() { - return this.state.muiTheme.menuItem; - }, - - toggleNestedMenu() { - if (!this.props.disabled) this.setState({open: !this.state.open}); - }, - - isOpen() { - return this.state.open; - }, - - _positionNestedMenu() { - let el = ReactDOM.findDOMNode(this); - let nestedMenu = ReactDOM.findDOMNode(this.refs.nestedMenu); - nestedMenu.style.left = el.offsetWidth + 'px'; - }, - - _openNestedMenu() { - if (!this.props.disabled) this.setState({open: true}); - }, - - _closeNestedMenu() { - this.setState({open: false}); - ReactDOM.findDOMNode(this).focus(); - }, - - _onParentItemTap() { - this.toggleNestedMenu(); - }, - - _onMenuItemTap(e, index, menuItem) { - if (this.props.onItemTap) this.props.onItemTap(e, index, menuItem); - this._closeNestedMenu(); - }, - _handleMouseOver(e) { - if (!this.props.disabled && this.props.onMouseOver) this.props.onMouseOver(e, this.props.index); - }, - - _handleMouseOut(e) { - if (!this.props.disabled && this.props.onMouseOut) this.props.onMouseOut(e, this.props.index); - }, - - render() { - let styles = this.getStyles(); - styles = this.mergeStyles(styles.root, - (this.props.active && !this.props.disabled) && styles.rootWhenHovered, { - position: 'relative', - }, this.props.style); - - let iconCustomArrowDropRight = { - marginRight: this.getSpacing().desktopGutterMini * -1, - color: this.state.muiTheme.dropDownMenu.accentColor, - }; - - let { - index, - menuItemStyle, - ...other, - } = this.props; - - return ( -
- - {this.props.text} - - -
- ); - }, - -}); - - -/**************** -* Menu Component -****************/ -const Menu = React.createClass({ - - propTypes: { - autoWidth: React.PropTypes.bool, - hideable: React.PropTypes.bool, - menuItemClassName: React.PropTypes.string, - menuItemClassNameLink: React.PropTypes.string, - menuItemClassNameSubheader: React.PropTypes.string, - menuItemStyle: React.PropTypes.object, - menuItemStyleLink: React.PropTypes.object, - menuItemStyleSubheader: React.PropTypes.object, - menuItems: React.PropTypes.array.isRequired, - onItemTap: React.PropTypes.func, - onItemToggle: React.PropTypes.func, - onRequestClose: React.PropTypes.func, - onToggle: React.PropTypes.func, - selectedIndex: React.PropTypes.number, - style: React.PropTypes.object, - visible: React.PropTypes.bool, - zDepth: React.PropTypes.number, - }, - - contextTypes: { - muiTheme: React.PropTypes.object, - }, - - //for passing default theme context to children - childContextTypes: { - muiTheme: React.PropTypes.object, - }, - - mixins: [StylePropable], - - getDefaultProps() { - return { - autoWidth: true, - hideable: false, - visible: true, - zDepth: 1, - onRequestClose: () => {}, - }; - }, - - getInitialState() { - warning(false, 'This menu component is deprecated use menus/menu instead.'); - - return { - muiTheme: this.context.muiTheme || getMuiTheme(), - nestedMenuShown: false, - activeIndex: 0, - }; - }, - - getChildContext() { - return { - muiTheme: this.state.muiTheme, - }; - }, - - componentDidMount() { - let el = ReactDOM.findDOMNode(this); - - //Set the menu width - this._setKeyWidth(el); - - //Show or Hide the menu according to visibility - this._renderVisibility(); - }, - - //to update theme inside state whenever a new theme is passed down - //from the parent / owner using context - componentWillReceiveProps(nextProps, nextContext) { - let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; - this.setState({muiTheme: newMuiTheme}); - - //Set the menu width - this._setKeyWidth(ReactDOM.findDOMNode(this)); - }, - - componentDidUpdate(prevProps) { - if (this.props.visible !== prevProps.visible || this.props.menuItems.length !== prevProps.menuItems.length) { - this._renderVisibility(); - } - }, - - getTheme() { - return this.state.muiTheme.menu; - }, - - getSpacing() { - return this.state.muiTheme.rawTheme.spacing; - }, - - getStyles() { - let styles = { - root: { - backgroundColor: this.getTheme().containerBackgroundColor, - paddingTop: this.getSpacing().desktopGutterMini, - paddingBottom: this.getSpacing().desktopGutterMini, - transition: Transitions.easeOut(null, 'height'), - outline: 'none !important', - }, - subheader: { - paddingLeft: this.state.muiTheme.menuSubheader.padding, - paddingRight: this.state.muiTheme.menuSubheader.padding, - }, - hideable: { - overflow: 'hidden', - position: 'absolute', - top: 0, - zIndex: 1, - }, - item: { - height: 34, - }, - }; - - return styles; - }, - - - _getChildren() { - let menuItem; - let itemComponent; - let isDisabled; - - let styles = this.getStyles(); - - this._children = []; - //This array is used to keep track of all nested menu refs - this._nestedChildren = []; - - for (let i = 0; i < this.props.menuItems.length; i++) { - menuItem = this.props.menuItems[i]; - isDisabled = (menuItem.disabled === undefined) ? false : menuItem.disabled; - - let { - icon, - data, - attribute, - number, - toggle, - onTouchTap, - ...other, - } = menuItem; - - switch (menuItem.type) { - - case MenuItem.Types.LINK: - itemComponent = ( - - ); - break; - - case MenuItem.Types.SUBHEADER: - itemComponent = ( - - ); - break; - - case MenuItem.Types.NESTED: - let { - zDepth, - ...other, - } = this.props; - - itemComponent = ( - - ); - this._nestedChildren.push(i); - break; - - default: - itemComponent = ( - - {menuItem.text} - - ); - } - this._children.push(itemComponent); - } - - return this._children; - }, - - _setKeyWidth(el) { - //Update the menu width - let menuWidth = '100%'; - - if (this.props.autoWidth) { - el.style.width = 'auto'; - menuWidth = KeyLine.getIncrementalDim(el.offsetWidth) + 'px'; - } - - el.style.width = menuWidth; - }, - - _renderVisibility() { - if (this.props.hideable) { - if (this.props.visible) this._expandHideableMenu(); - else this._collapseHideableMenu(); - } - }, - - _expandHideableMenu() { - let el = ReactDOM.findDOMNode(this); - let container = ReactDOM.findDOMNode(this.refs.paperContainer); - let padding = this.getSpacing().desktopGutterMini; - let height = this._getHiddenMenuHeight(el, padding); - - //Add transition - if (!el.style.transition) { - el.style.transition = Transitions.easeOut(); - } - - this._nextAnimationFrame(() => { - container.style.overflow = 'hidden'; - - // Yeild to the DOM, then apply height and padding. This makes the transition smoother. - el.style.paddingTop = padding + 'px'; - el.style.paddingBottom = padding + 'px'; - el.style.height = height + 'px'; - el.style.opacity = 1; - - //Set the overflow to visible after the animation is done so - //that other nested menus can be shown - CssEvent.onTransitionEnd(el, () => { - //Make sure the menu is open before setting the overflow. - //This is to accout for fast clicks - if (this.props.visible) container.style.overflow = 'visible'; - el.style.transition = null; - el.focus(); - }); - }); - }, - - _getHiddenMenuHeight(el, padding) { - //Add padding to the offset height, because it is not yet set in the style. - let height = padding * 2; - - //Hide the element and allow the browser to automatically resize it. - el.style.visibility = 'hidden'; - el.style.height = 'auto'; - - //Determine the height of the menu. - height += el.offsetHeight; - - //Unhide the menu with the height set back to zero. - el.style.height = '0px'; - el.style.visibility = 'visible'; - - return height; - }, - - _collapseHideableMenu() { - let el = ReactDOM.findDOMNode(this); - let container = ReactDOM.findDOMNode(this.refs.paperContainer); - let originalOpacity = el.style.opacity; - - //Add transition - if (!el.style.transition && originalOpacity !== '') { - el.style.transition = Transitions.easeOut(); - } - - this._nextAnimationFrame(function() { - //Set the overflow to hidden so that animation works properly - container.style.overflow = 'hidden'; - - //Close the menu - el.style.opacity = 0; - el.style.height = '0px'; - el.style.paddingTop = '0px'; - el.style.paddingBottom = '0px'; - - let end = () => { - el.style.transition = null; - }; - - if (originalOpacity === '') end(); - else CssEvent.onTransitionEnd(el, end); - }); - }, - - _nextAnimationFrame(func) { - if (window.requestAnimationFrame) { - return window.requestAnimationFrame(func); - } - return setTimeout(func, 16); - }, - - _onNestedItemTap(e, index, menuItem) { - if (this.props.onItemTap) this.props.onItemTap(e, index, menuItem); - }, - - _onItemTap(e, index) { - if (this.props.onItemTap) this.props.onItemTap(e, index, this.props.menuItems[index]); - }, - - _onItemToggle(e, index, toggled) { - if (this.props.onItemToggle) this.props.onItemToggle(e, index, this.props.menuItems[index], toggled); - }, - _onItemActivated(e, index) { - this.setState({activeIndex: index}); - }, - _onItemDeactivated(e, index) { - if (this.state.activeKey === index) - this.setState({activeIndex: 0}); - }, - - _onKeyDown(e) { - if (!(this.state.open || this.props.visible)) - return; - - let nested = this._children[this.state.activeIndex]; - if (nested && nested.props.nested && this.refs[this.state.activeIndex].isOpen()) - return; - - switch (e.which) { - case KeyCode.UP: - this._activatePreviousItem(); - break; - case KeyCode.DOWN: - this._activateNextItem(); - break; - case KeyCode.RIGHT: - this._tryToggleNested(this.state.activeIndex); - break; - case KeyCode.LEFT: - this._close(); - break; - case KeyCode.ESC: - this._close(); - break; - case KeyCode.TAB: - this._close(); - return; // so the tab key can propagate - case KeyCode.ENTER: - case KeyCode.SPACE: - e.stopPropagation(); // needs called before the close - this._triggerSelection(e); - break; - default: - return; //important - } - e.preventDefault(); - e.stopPropagation(); - }, - - _activatePreviousItem() { - let active = this.state.activeIndex || 0; - active = Math.max(active - 1, 0); - this.setState({activeIndex: active}); - }, - - _activateNextItem() { - let active = this.state.activeIndex || 0; - active = Math.min(active + 1, this._children.length - 1); - this.setState({activeIndex: active}); - }, - - _triggerSelection(e) { - let index = this.state.activeIndex || 0; - this._onItemTap(e, index); - }, - - _close() { - this.props.onRequestClose(); - }, - - _tryToggleNested(index) { - let item = this.refs[index]; - if (item && item.toggleNestedMenu) - item.toggleNestedMenu(); - }, - - render() { - let styles = this.getStyles(); - return ( - - {this._getChildren()} - - ); - }, - -}); - -export default Menu; diff --git a/src/menu/subheader-menu-item.jsx b/src/menu/subheader-menu-item.jsx deleted file mode 100644 index 409b88aef156ad..00000000000000 --- a/src/menu/subheader-menu-item.jsx +++ /dev/null @@ -1,102 +0,0 @@ -import React from 'react'; -import StylePropable from '../mixins/style-propable'; -import Typography from '../styles/typography'; -import getMuiTheme from '../styles/getMuiTheme'; - -const SubheaderMenuItem = React.createClass({ - - propTypes: { - className: React.PropTypes.string, - firstChild: React.PropTypes.bool, - index: React.PropTypes.number.isRequired, - style: React.PropTypes.object, - text: React.PropTypes.string.isRequired, - }, - - contextTypes: { - muiTheme: React.PropTypes.object, - }, - - //for passing default theme context to children - childContextTypes: { - muiTheme: React.PropTypes.object, - }, - - mixins: [ - StylePropable, - ], - - getInitialState() { - return { - muiTheme: this.context.muiTheme || getMuiTheme(), - }; - }, - - getChildContext() { - return { - muiTheme: this.state.muiTheme, - }; - }, - - //to update theme inside state whenever a new theme is passed down - //from the parent / owner using context - componentWillReceiveProps(nextProps, nextContext) { - let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; - this.setState({muiTheme: newMuiTheme}); - }, - - getTheme() { - return this.state.muiTheme.menuSubheader; - }, - - getSpacing() { - return this.state.muiTheme.rawTheme.spacing; - }, - - getStyles() { - let gutterMini = this.getSpacing().desktopGutterMini; - let subheaderHeight = this.getSpacing().desktopSubheaderHeight; - let styles = { - root: { - boxSizing: 'border-box', - fontSize: '13px', - letterSpacing: 0, - fontWeight: Typography.fontWeightMedium, - margin: 0, - height: subheaderHeight + gutterMini, - lineHeight: subheaderHeight + 'px', - color: this.getTheme().textColor, - borderTop: 'solid 1px ' + this.getTheme().borderColor, - paddingTop: gutterMini, - marginTop: gutterMini, - }, - rootWhenFirstChild: { - height: subheaderHeight, - borderTop: 'none', - paddingTop: 0, - marginTop: 0, - }, - }; - - return styles; - }, - - render() { - return ( -
- {this.props.text} -
- ); - }, - -}); - -export default SubheaderMenuItem; diff --git a/src/menus/icon-menu.jsx b/src/menus/icon-menu.jsx index c51122185cb837..b70a202b3d442e 100644 --- a/src/menus/icon-menu.jsx +++ b/src/menus/icon-menu.jsx @@ -6,7 +6,6 @@ import PropTypes from '../utils/prop-types'; import Menu from '../menus/menu'; import getMuiTheme from '../styles/getMuiTheme'; import Popover from '../popover/popover'; -import warning from 'warning'; const IconMenu = React.createClass({ @@ -30,11 +29,6 @@ const IconMenu = React.createClass({ */ className: React.PropTypes.string, - /** - * If true, menu will close after an item is touchTapped. - */ - closeOnItemTouchTap: React.PropTypes.bool, - /** * This is the IconButton to render. This button will open the menu. */ @@ -114,12 +108,6 @@ const IconMenu = React.createClass({ * horizontal: [left, center, right]. */ targetOrigin: PropTypes.origin, - - /** - * Sets the delay in milliseconds before closing the - * menu when an item is clicked. - */ - touchTapCloseDelay: React.PropTypes.number, }, contextTypes: { @@ -137,7 +125,6 @@ const IconMenu = React.createClass({ getDefaultProps() { return { - closeOnItemTouchTap: true, open: null, onItemTouchTap: () => {}, onKeyboardFocus: () => {}, @@ -155,15 +142,10 @@ const IconMenu = React.createClass({ vertical: 'top', horizontal: 'left', }, - touchTapCloseDelay: 200, }; }, getInitialState() { - if (process.env.NODE_ENV !== 'production') { - this._warningIfNeeded(); - } - return { muiTheme: this.context.muiTheme || getMuiTheme(), iconButtonRef: this.props.iconButtonElement.props.ref || 'iconButton', @@ -181,10 +163,6 @@ const IconMenu = React.createClass({ //to update theme inside state whenever a new theme is passed down //from the parent / owner using context componentWillReceiveProps(nextProps, nextContext) { - if (process.env.NODE_ENV !== 'production') { - this._warningIfNeeded(); - } - let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; this.setState({muiTheme: newMuiTheme}); @@ -193,17 +171,6 @@ const IconMenu = React.createClass({ } }, - componentWillUnmount() { - if (this._timeout) clearTimeout(this._timeout); - }, - - _warningIfNeeded() { - if (this.props.hasOwnProperty('open')) { - warning(this.props.hasOwnProperty('closeOnItemTouchTap'), - 'closeOnItemTouchTap has been deprecated in favor of open, onRequestChange'); - } - }, - isOpen() { return this.state.open; }, @@ -247,17 +214,6 @@ const IconMenu = React.createClass({ }, _handleItemTouchTap(event, child) { - if (this.props.closeOnItemTouchTap) { - const isKeyboard = Events.isKeyboard(event); - this._timeout = setTimeout(() => { - if (!this.isMounted()) { - return; - } - - this.close(isKeyboard ? 'enter' : 'itemTap', isKeyboard); - }, this.props.touchTapCloseDelay); - } - this.props.onItemTouchTap(event, child); }, @@ -269,7 +225,6 @@ const IconMenu = React.createClass({ let { anchorOrigin, className, - closeOnItemTouchTap, iconButtonElement, iconStyle, onItemTouchTap, diff --git a/src/menus/menu-divider.jsx b/src/menus/menu-divider.jsx deleted file mode 100644 index c6669c9c6b66a6..00000000000000 --- a/src/menus/menu-divider.jsx +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react'; -import Divider from '../divider'; -import {mergeStyles} from '../utils/styles'; -import warning from 'warning'; - -const MenuDivider = React.createClass({ - - propTypes: { - /** - * Override the inline-styles of the root element. - */ - style: React.PropTypes.object, - }, - - getInitialState() { - warning(false, ' has been deprecated. Please use the component.'); - return null; - }, - - getStyles() { - return { - root: { - marginTop: 7, - marginBottom: 8, - }, - }; - }, - - render() { - const { - style, - ...other, - } = this.props; - - const styles = this.getStyles(); - - return ; - }, -}); - -export default MenuDivider; diff --git a/src/snackbar.jsx b/src/snackbar.jsx index c088fbbf43c21e..abc58705aeaa0e 100644 --- a/src/snackbar.jsx +++ b/src/snackbar.jsx @@ -6,8 +6,6 @@ import FlatButton from './flat-button'; import getMuiTheme from './styles/getMuiTheme'; import ContextPure from './mixins/context-pure'; import StyleResizable from './mixins/style-resizable'; -import warning from 'warning'; -import deprecated from './utils/deprecatedPropType'; const Snackbar = React.createClass({ @@ -47,12 +45,6 @@ const Snackbar = React.createClass({ */ onActionTouchTap: React.PropTypes.func, - /** - * Fired when the `Snackbar` is dismissed. - */ - onDismiss: deprecated(React.PropTypes.func, - 'Instead, use the open property to control the component.'), - /** * Fired when the `Snackbar` is requested to be closed by a click outside the `Snackbar`, or after the * `autoHideDuration` timer expires. @@ -67,23 +59,11 @@ const Snackbar = React.createClass({ */ onRequestClose: React.PropTypes.func.isRequired, - /** - * Fired when the `Snackbar` is shown. - */ - onShow: deprecated(React.PropTypes.func, - 'Instead, use the open property to control the component.'), - /** * Controls whether the `Snackbar` is opened or not. */ open: React.PropTypes.bool.isRequired, - /** - * If true, the `Snackbar` will open once mounted. - */ - openOnMount: deprecated(React.PropTypes.bool, - 'Instead, use the open property to control the component.'), - /** * Override the inline-styles of the root element. */ @@ -127,14 +107,8 @@ const Snackbar = React.createClass({ }, getInitialState() { - let open = this.props.open; - - if (open === null) { - open = this.props.openOnMount; - } - return { - open: open, + open: this.props.open, message: this.props.message, action: this.props.action, muiTheme: this.context.muiTheme || getMuiTheme(), @@ -289,32 +263,6 @@ const Snackbar = React.createClass({ return styles; }, - show() { - warning(false, 'show has been deprecated in favor of explicitly setting the open property.'); - - this.setState({ - open: true, - }); - - if (this.props.onShow) { - this.props.onShow(); - } - }, - - _onDismiss() { - if (this.props.onDismiss) { - this.props.onDismiss(); - } - }, - - dismiss() { - warning(false, 'dismiss has been deprecated in favor of explicitly setting the open property.'); - - this.setState({ - open: false, - }, this._onDismiss); - }, - _setAutoHideTimer() { const autoHideDuration = this.props.autoHideDuration; diff --git a/src/styles/auto-prefix.js b/src/styles/auto-prefix.js index db1c2981956aac..714159404dad86 100644 --- a/src/styles/auto-prefix.js +++ b/src/styles/auto-prefix.js @@ -1,69 +1,5 @@ -import InlineStylePrefixer from 'inline-style-prefixer'; -import warning from 'warning'; - -const prefixers = {}; - export default { - - getPrefixer() { - warning(false, `Material-UI: getPrefixer() is no longer used. Do not use it.`); - - if (typeof navigator === 'undefined') { - warning(false, `Material-UI expects the global navigator.userAgent to be defined - for server-side rendering. Set this property when receiving the request headers.`); - - return null; - } - - const userAgent = navigator.userAgent; - - // Get prefixing instance for this user agent - let prefixer = prefixers[userAgent]; - // None found, create a new instance - if (!prefixer) { - prefixer = new InlineStylePrefixer({userAgent: userAgent}); - prefixers[userAgent] = prefixer; - } - - return prefixer; - }, - - all(style) { - if (!style) { - return {}; - } - - warning(false, `Material-UI: all() is no longer used, it will be removed. Do not use it`); - - const prefixer = this.getPrefixer(); - - if (prefixer) { - return prefixer.prefix(style); - } else { - return InlineStylePrefixer.prefixAll(style); - } - }, - set(style, key, value) { style[key] = value; }, - - getPrefix(key) { - warning(false, `Material-UI: getPrefix() is no longer used, it will be removed. Do not use it`); - - let style = {}; - style[key] = true; - - const prefixer = this.getPrefixer(); - let prefixes; - - if (prefixer) { - prefixes = Object.keys(prefixer.prefix(style)); - } else { - prefixes = Object.keys(InlineStylePrefixer.prefixAll(style)); - } - - return prefixes ? prefixes[0] : key; - }, - }; diff --git a/src/toolbar/toolbar-group.jsx b/src/toolbar/toolbar-group.jsx index f77730a8db3202..871b5eb9e85165 100644 --- a/src/toolbar/toolbar-group.jsx +++ b/src/toolbar/toolbar-group.jsx @@ -142,16 +142,6 @@ const ToolbarGroup = React.createClass({ return styles; }, - _handleMouseEnterDropDownMenu(e) { - e.target.style.zIndex = this.getStyles().icon.hover.zIndex; - e.target.style.color = this.getStyles().icon.hover.color; - }, - - _handleMouseLeaveDropDownMenu(e) { - e.target.style.zIndex = 'auto'; - e.target.style.color = this.getStyles().icon.root.color; - }, - _handleMouseEnterFontIcon(e) { e.target.style.zIndex = this.getStyles().icon.hover.zIndex; e.target.style.color = this.getStyles().icon.hover.color; @@ -185,13 +175,6 @@ const ToolbarGroup = React.createClass({ styleControlBg: styles.dropDownMenu.controlBg, styleUnderline: styles.dropDownMenu.underline, }); - case 'DropDownIcon' : - return React.cloneElement(currentChild, { - style: this.mergeStyles({float: 'left'}, currentChild.props.style), - iconStyle: styles.icon.root, - onMouseEnter: this._handleMouseEnterDropDownMenu, - onMouseLeave: this._handleMouseLeaveDropDownMenu, - }); case 'RaisedButton' : case 'FlatButton' : return React.cloneElement(currentChild, { diff --git a/src/utils/styles.js b/src/utils/styles.js index cf61b04120dafe..541dc640989037 100644 --- a/src/utils/styles.js +++ b/src/utils/styles.js @@ -1,18 +1,5 @@ -import autoPrefix from '../styles/auto-prefix'; -import warning from 'warning'; - export const mergeStyles = (...args) => Object.assign({}, ...args); -/** - * `mergeAndPrefix` is used to merge styles and autoprefix them. It has has been deprecated - * and should no longer be used. - */ -export function mergeAndPrefix(...args) { - warning(false, 'Use of mergeAndPrefix() has been deprecated. ' + - 'Please use mergeStyles() for merging styles, and then prepareStyles() for prefixing and ensuring direction.'); - return autoPrefix.all(mergeStyles(...args)); -} - /** * `prepareStyles` is used to merge multiple styles, make sure they are flipped * to rtl if needed, and then autoprefix them. @@ -35,6 +22,5 @@ export function prepareStyles(muiTheme, style = {}, ...styles) { export default { mergeStyles, - mergeAndPrefix, prepareStyles, };