From 12e27ec86a9ae35b9e4c7fbd775b6f2705d5a2b6 Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Tue, 29 Dec 2015 18:21:00 +0330 Subject: [PATCH] migrate select-field docs to the new standard --- docs/src/app/app-routes.jsx | 4 +- docs/src/app/components/pages/components.jsx | 2 +- .../SelectField/ExampleCustomLabel.jsx | 24 ++ .../SelectField/ExampleDisabled.jsx | 12 + .../components/SelectField/ExampleError.jsx | 48 +++ .../SelectField/ExampleFloatingLabel.jsx | 45 +++ .../components/SelectField/ExampleSimple.jsx | 25 ++ .../pages/components/SelectField/Page.jsx | 41 +++ .../pages/components/SelectField/README.md | 6 + .../pages/components/select-fields.jsx | 332 ------------------ .../raw-code/select-fields-code.txt | 40 --- src/SelectField/SelectField.jsx | 266 ++++++++++++++ src/SelectField/index.js | 3 + src/select-field.jsx | 166 +-------- 14 files changed, 474 insertions(+), 540 deletions(-) create mode 100644 docs/src/app/components/pages/components/SelectField/ExampleCustomLabel.jsx create mode 100644 docs/src/app/components/pages/components/SelectField/ExampleDisabled.jsx create mode 100644 docs/src/app/components/pages/components/SelectField/ExampleError.jsx create mode 100644 docs/src/app/components/pages/components/SelectField/ExampleFloatingLabel.jsx create mode 100644 docs/src/app/components/pages/components/SelectField/ExampleSimple.jsx create mode 100644 docs/src/app/components/pages/components/SelectField/Page.jsx create mode 100644 docs/src/app/components/pages/components/SelectField/README.md delete mode 100644 docs/src/app/components/pages/components/select-fields.jsx delete mode 100644 docs/src/app/components/raw-code/select-fields-code.txt create mode 100644 src/SelectField/SelectField.jsx create mode 100644 src/SelectField/index.js diff --git a/docs/src/app/app-routes.jsx b/docs/src/app/app-routes.jsx index 42f9d37c61d16c..9ae75cdc54b81f 100644 --- a/docs/src/app/app-routes.jsx +++ b/docs/src/app/app-routes.jsx @@ -43,7 +43,7 @@ import Paper from './components/pages/components/paper'; import Popover from './components/pages/components/popover'; import Progress from './components/pages/components/progress'; import RefreshIndicator from './components/pages/components/refresh-indicator'; -import SelectFields from './components/pages/components/select-fields'; +import SelectField from './components/pages/components/SelectField/Page'; import Sliders from './components/pages/components/sliders'; import SnackbarPage from './components/pages/components/Snackbar/Page'; import Switches from './components/pages/components/switches'; @@ -104,7 +104,7 @@ const AppRoutes = ( - + diff --git a/docs/src/app/components/pages/components.jsx b/docs/src/app/components/pages/components.jsx index 1ee45933a9bbd4..2fd5c678602471 100644 --- a/docs/src/app/components/pages/components.jsx +++ b/docs/src/app/components/pages/components.jsx @@ -23,7 +23,7 @@ const menuItems = [ {route: '/components/popover', text: 'Popover'}, {route: '/components/progress', text: 'Progress'}, {route: '/components/refresh-indicator', text: 'Refresh Indicator'}, - {route: '/components/select-fields', text: 'Select Fields'}, + {route: '/components/select-field', text: 'Select Field'}, {route: '/components/sliders', text: 'Sliders'}, {route: '/components/switches', text: 'Switches'}, {route: '/components/snackbar', text: 'Snackbar'}, diff --git a/docs/src/app/components/pages/components/SelectField/ExampleCustomLabel.jsx b/docs/src/app/components/pages/components/SelectField/ExampleCustomLabel.jsx new file mode 100644 index 00000000000000..35b39fafb5eaf4 --- /dev/null +++ b/docs/src/app/components/pages/components/SelectField/ExampleCustomLabel.jsx @@ -0,0 +1,24 @@ +import React from 'react'; +import SelectField from 'material-ui/lib/SelectField'; +import MenuItem from 'material-ui/lib/menus/menu-item'; + +export default class SelectFieldCustomLabelExample extends React.Component { + + constructor(props) { + super(props); + this.state = {value: 1}; + } + + handleChange = (e, index, value) => this.setState({value}); + + render() { + return ( + + + + + + + ); + } +} diff --git a/docs/src/app/components/pages/components/SelectField/ExampleDisabled.jsx b/docs/src/app/components/pages/components/SelectField/ExampleDisabled.jsx new file mode 100644 index 00000000000000..9390910f6407fd --- /dev/null +++ b/docs/src/app/components/pages/components/SelectField/ExampleDisabled.jsx @@ -0,0 +1,12 @@ +import React from 'react'; +import SelectField from 'material-ui/lib/SelectField'; +import MenuItem from 'material-ui/lib/menus/menu-item'; + +const SelectFieldDisabledExample = () => ( + + + + +); + +export default SelectFieldDisabledExample; diff --git a/docs/src/app/components/pages/components/SelectField/ExampleError.jsx b/docs/src/app/components/pages/components/SelectField/ExampleError.jsx new file mode 100644 index 00000000000000..3208c195da71db --- /dev/null +++ b/docs/src/app/components/pages/components/SelectField/ExampleError.jsx @@ -0,0 +1,48 @@ +import React from 'react'; +import SelectField from 'material-ui/lib/SelectField'; +import MenuItem from 'material-ui/lib/menus/menu-item'; + +export default class SelectFieldErrorExample extends React.Component { + + constructor(props) { + super(props); + this.state = {value: null}; + } + + handleChange = (e, index, value) => this.setState({value}); + + render() { + const {value} = this.state; + + const items = [ + , + , + , + , + , + ]; + + const night = value === 2 || value === 3; + + return ( +
+ + {items} + +
+ + {items} + +
+ ); + } +} diff --git a/docs/src/app/components/pages/components/SelectField/ExampleFloatingLabel.jsx b/docs/src/app/components/pages/components/SelectField/ExampleFloatingLabel.jsx new file mode 100644 index 00000000000000..442d7b3a3702ce --- /dev/null +++ b/docs/src/app/components/pages/components/SelectField/ExampleFloatingLabel.jsx @@ -0,0 +1,45 @@ +import React from 'react'; +import SelectField from 'material-ui/lib/SelectField'; +import MenuItem from 'material-ui/lib/menus/menu-item'; + +export default class SelectFieldFloatingLabelExample extends React.Component { + + constructor(props) { + super(props); + this.state = {value: null}; + } + + handleChange = (e, index, value) => this.setState({value}); + + render() { + + const items = [ + , + , + , + , + , + ]; + + return ( +
+ + {items} + +
+ + {items} + +
+ ); + } +} diff --git a/docs/src/app/components/pages/components/SelectField/ExampleSimple.jsx b/docs/src/app/components/pages/components/SelectField/ExampleSimple.jsx new file mode 100644 index 00000000000000..959e4cec28c152 --- /dev/null +++ b/docs/src/app/components/pages/components/SelectField/ExampleSimple.jsx @@ -0,0 +1,25 @@ +import React from 'react'; +import SelectField from 'material-ui/lib/SelectField'; +import MenuItem from 'material-ui/lib/menus/menu-item'; + +export default class SelectFieldSimpleExample extends React.Component { + + constructor(props) { + super(props); + this.state = {value: 2}; + } + + handleChange = (e, index, value) => this.setState({value}); + + render() { + return ( + + + + + + + + ); + } +} diff --git a/docs/src/app/components/pages/components/SelectField/Page.jsx b/docs/src/app/components/pages/components/SelectField/Page.jsx new file mode 100644 index 00000000000000..2530e6c00efe33 --- /dev/null +++ b/docs/src/app/components/pages/components/SelectField/Page.jsx @@ -0,0 +1,41 @@ +import React from 'react'; +import CodeExample from '../../../CodeExample'; +import PropTypeDescription from '../../../PropTypeDescription'; +import MarkdownElement from '../../../MarkdownElement'; + +import selectFieldReadmeText from './README'; +import SelectFieldSimpleExample from './ExampleSimple'; +import selectFieldSimpleExampleCode from '!raw!./ExampleSimple'; +import SelectFieldDisabledExample from './ExampleDisabled'; +import selectFieldDisabledExampleCode from '!raw!./ExampleDisabled'; +import SelectFieldCustomLabelExample from './ExampleCustomLabel'; +import selectFieldCustomLabelExampleCode from '!raw!./ExampleCustomLabel'; +import SelectFieldFloatingLabelExample from './ExampleFloatingLabel'; +import selectFieldFloatingLabelExampleCode from '!raw!./ExampleFloatingLabel'; +import SelectFieldErrorExample from './ExampleError'; +import selectFieldErrorExampleCode from '!raw!./ExampleError'; +import selectFieldCode from '!raw!material-ui/lib/SelectField/SelectField'; + +const SelectFieldPage = () => ( +
+ + + + + + + + + + + + + + + + + +
+); + +export default SelectFieldPage; diff --git a/docs/src/app/components/pages/components/SelectField/README.md b/docs/src/app/components/pages/components/SelectField/README.md new file mode 100644 index 00000000000000..eca26899bd5b40 --- /dev/null +++ b/docs/src/app/components/pages/components/SelectField/README.md @@ -0,0 +1,6 @@ +## Select Field + +To learn more about `SelectField` please visit the specifications +[here](https://www.google.com/design/spec/components/menus.html#menus-usage). + +### Examples diff --git a/docs/src/app/components/pages/components/select-fields.jsx b/docs/src/app/components/pages/components/select-fields.jsx deleted file mode 100644 index 9423a7fef129de..00000000000000 --- a/docs/src/app/components/pages/components/select-fields.jsx +++ /dev/null @@ -1,332 +0,0 @@ -import React from 'react'; -import {ClearFix, Mixins, SelectField, Paper, MenuItem} from 'material-ui'; -import ComponentDoc from '../../component-doc'; -const {StyleResizable} = Mixins; -import Code from 'select-fields-code'; -import LinkedStateMixin from 'react-addons-linked-state-mixin'; -import CodeExample from '../../CodeExample'; -import CodeBlock from '../../CodeExample/CodeBlock'; - -const SelectFieldsPage = React.createClass({ - - mixins: [StyleResizable, LinkedStateMixin], - - getInitialState() { - return { - selectValue: undefined, - selectValue2: 1, - selectValue3: 1, - selectValue4: 4, - selectValue5: 3, - selectValue6: 2, - }; - }, - - getStyles() { - let styles = { - textfield: { - marginBottom: 24, - }, - }; - - return styles; - }, - - render() { - let desc = `This component extends the current input element and will support all of its props and events. - It supports valueLink and can be controlled or uncontrolled.`; - - let componentInfo = [ - { - name: 'Props', - infoArray: [ - { - name: 'disabled', - type: 'bool', - header: 'optional', - desc: 'Disables the select field if set to true.', - }, - { - name: 'displayMember', - type: 'string', - header: 'default: text', - desc: 'SelectField will use text as default value, with this ' + - 'property you can choose another name.', - }, - { - name: 'labelMember', - type: 'string', - header: 'default: text', - desc: 'DropDownMenu will use text as default value, with this ' + - 'property you can choose another name.', - }, - { - name: 'errorStyle', - type: 'object', - header: 'optional', - desc: 'The style object to use to override error styles.', - }, - { - name: 'errorText', - type: 'node', - header: 'optional', - desc: 'The error content to display.', - }, - { - name: 'floatingLabelStyle', - type: 'object', - header: 'optional', - desc: 'The style object to use to override floating label styles.', - }, - { - name: 'floatingLabelText', - type: 'node', - header: 'optional', - desc: 'The content to use for the floating label element.', - }, - { - name: 'fullWidth', - type: 'bool', - header: 'optional', - desc: 'If true, the field receives the property width 100%.', - }, - { - name: 'hintText', - type: 'node', - header: 'optional', - desc: 'The hint content to display.', - }, - { - name: 'iconStyle', - type: 'object', - header: 'optional', - desc: 'Overrides the styles of SelectField\'s icon element.', - }, - { - name: 'labelStyle', - type: 'object', - header: 'optional', - desc: 'Overrides the styles of SelectField\'s label when the SelectField is inactive.', - }, - { - name: 'valueMember', - type: 'string', - header: 'default: payload', - desc: 'SelectField will use payload as default value, with this ' + - 'property you can choose another name.', - }, - { - name: 'menuItemStyle', - type: 'object', - header: 'optional', - desc: 'Overrides the inline-styles of the MenuItems when the ' + - 'SelectField is expanded.', - }, - { - name: 'selectedIndex', - type: 'number', - header: 'default: 0', - desc: 'Index of the item selected.', - }, - { - name: 'selectFieldRoot', - type: 'object', - header: 'optional', - desc: 'The style object to use to override the drop-down menu', - }, - { - name: 'style', - type: 'object', - header: 'optional', - desc: 'Override the inline-styles of the SelectField\'s root element.', - }, - { - name: 'underlineDisabledStyle', - type: 'object', - header: 'optional', - desc: 'Override the inline-styles of the SelectField\'s underline element when disabled.', - }, - { - name: 'underlineFocusStyle', - type: 'object', - header: 'optional', - desc: 'Override the inline-styles of the SelectField\'s underline element when focussed.', - }, - { - name: 'underlineStyle', - type: 'object', - header: 'optional', - desc: 'Overrides the styles of SelectField\'s underline.', - }, - ], - }, - { - name: 'Methods', - infoArray: [], - }, - { - name: 'Events', - infoArray: [ - { - name: 'onBlur', - header: 'function(event)', - desc: 'Callback function that is fired when the selectfield loses' + - 'focus.', - }, - { - name: 'onChange', - header: 'function(event, selectedIndex)', - desc: 'Callback function that is fired when the selectfield\'s value ' + - 'changes.', - }, - { - name: 'onFocus', - header: 'function(event)', - desc: 'Callback function that is fired when the selectfield gains ' + - 'focus.', - }, - ], - }, - ]; - - let styles = this.getStyles(); - - return ( - - - - - { - '//Import statement:\n' + - 'import SelectField from \'material-ui/lib/select-field\';\n\n' + - '//See material-ui/lib/index.js for more\n' - } - - - - - - - - - - - - -
- - - - - - - -
- - - - - - -
- - - - - - - -
- - - - - - - -
- - - - - - - -
- - - - - - - -
- - - - - - - -
- - - - - - - -
- - - - ); - }, - - _handleSelectValueChange(name, e, index, value) { - this.setState({[name]: value}); - }, -}); - -export default SelectFieldsPage; diff --git a/docs/src/app/components/raw-code/select-fields-code.txt b/docs/src/app/components/raw-code/select-fields-code.txt deleted file mode 100644 index 3a77a95de30079..00000000000000 --- a/docs/src/app/components/raw-code/select-fields-code.txt +++ /dev/null @@ -1,40 +0,0 @@ -
-
-
-
-
-
- diff --git a/src/SelectField/SelectField.jsx b/src/SelectField/SelectField.jsx new file mode 100644 index 00000000000000..b2faa70fe1342c --- /dev/null +++ b/src/SelectField/SelectField.jsx @@ -0,0 +1,266 @@ +import React from 'react'; +import StylePropable from '../mixins/style-propable'; +import TextField from '../text-field'; +import DropDownMenu from '../DropDownMenu'; +import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; +import ThemeManager from '../styles/theme-manager'; +import ContextPure from '../mixins/context-pure'; +import deprecated from '../utils/deprecatedPropType'; + +const SelectField = React.createClass({ + + mixins: [ + StylePropable, + ContextPure, + ], + + contextTypes: { + muiTheme: React.PropTypes.object, + }, + + statics: { + getChildrenClasses() { + return [ + TextField, + DropDownMenu, + ]; + }, + }, + + propTypes: { + /** + * The width will automatically be set according to the + * items inside the menu. To control this width in css + * instead, set this prop to `false`. + */ + autoWidth: React.PropTypes.bool, + + /** + * The `MenuItem` elements to populate the `Menu` with. + * If the MenuItems have the prop `label` that value will + * be used to render the representation of that + * item within the field. + */ + children: React.PropTypes.node, + + /** + * Disables the select field if set to true. + */ + disabled: React.PropTypes.bool, + + /** + * The style object to use to override error styles. + */ + errorStyle: React.PropTypes.object, + + /** + * The error content to display. + */ + errorText: React.PropTypes.node, + + /** + * The style object to use to override floating label styles. + */ + floatingLabelStyle: React.PropTypes.object, + + /** + * The content to use for the floating label element. + */ + floatingLabelText: React.PropTypes.node, + + /** + * If true, the field receives the property width 100%. + */ + fullWidth: React.PropTypes.bool, + + /** + * The hint content to display. + */ + hintText: React.PropTypes.node, + + /** + * Overrides the styles of the icon element. + */ + 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: deprecated(React.PropTypes.object, + 'to promote composability.'), + + /** + * 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. + */ + onBlur: React.PropTypes.func, + + /** + * Callback function that is fired when the value changes. + */ + onChange: React.PropTypes.func, + + /** + * Callback function that is fired when the `SelectField` gains focus. + */ + onFocus: React.PropTypes.func, + + /** + * The style object to use to override the `DropDownMenu`. + */ + selectFieldRoot: React.PropTypes.object, + + /** + * Index of the item selected. + */ + selectedIndex: deprecated(React.PropTypes.number, + 'with menuItems.'), + + /** + * Override the inline-styles of the root element. + */ + style: React.PropTypes.object, + + /** + * Override the inline-styles of the underline element when disabled. + */ + underlineDisabledStyle: React.PropTypes.object, + + /** + * Override the inline-styles of the underline element when focused. + */ + underlineFocusStyle: React.PropTypes.object, + + /** + * Overrides the styles of the underline element. + */ + underlineStyle: React.PropTypes.object, + + /** + * The value that is currently selected. + */ + value: React.PropTypes.any, + }, + + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext() { + return { + muiTheme: this.state.muiTheme, + }; + }, + + getInitialState() { + return { + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), + }; + }, + + getDefaultProps() { + return { + autoWidth: false, + disabled: false, + fullWidth: false, + }; + }, + + //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}); + }, + + getStyles() { + const {floatingLabelText} = this.props; + + return { + label: { + paddingLeft: 0, + top: floatingLabelText ? 6 : -4, + }, + icon: { + right: 0, + top: floatingLabelText ? 22 : 14, + }, + hideDropDownUnderline: { + borderTop: 'none', + }, + }; + }, + + render() { + const styles = this.getStyles(); + const { + autoWidth, + children, + style, + labelStyle, + iconStyle, + underlineDisabledStyle, + underlineFocusStyle, + underlineStyle, + errorStyle, + selectFieldRoot, + disabled, + floatingLabelText, + floatingLabelStyle, + hintText, + fullWidth, + errorText, + onFocus, + onBlur, + onChange, + value, + ...other, + } = this.props; + + return ( + + + {children} + + + ); + }, +}); + +export default SelectField; diff --git a/src/SelectField/index.js b/src/SelectField/index.js new file mode 100644 index 00000000000000..098af5f17bf873 --- /dev/null +++ b/src/SelectField/index.js @@ -0,0 +1,3 @@ +import SelectField from './SelectField'; + +export default SelectField; diff --git a/src/select-field.jsx b/src/select-field.jsx index 72e11f5a0d924d..098af5f17bf873 100644 --- a/src/select-field.jsx +++ b/src/select-field.jsx @@ -1,167 +1,3 @@ -import React from 'react'; -import StylePropable from './mixins/style-propable'; -import TextField from './text-field'; -import DropDownMenu from './drop-down-menu'; -import DefaultRawTheme from './styles/raw-themes/light-raw-theme'; -import ThemeManager from './styles/theme-manager'; -import ContextPure from './mixins/context-pure'; - -const SelectField = React.createClass({ - - mixins: [ - StylePropable, - ContextPure, - ], - - contextTypes: { - muiTheme: React.PropTypes.object, - }, - - statics: { - getChildrenClasses() { - return [ - TextField, - DropDownMenu, - ]; - }, - }, - - propTypes: { - autoWidth: React.PropTypes.bool, - children: React.PropTypes.node, - disabled: React.PropTypes.bool, - errorStyle: React.PropTypes.object, - errorText: React.PropTypes.node, - floatingLabelStyle: React.PropTypes.object, - floatingLabelText: React.PropTypes.node, - fullWidth: React.PropTypes.bool, - hintText: React.PropTypes.node, - iconStyle: React.PropTypes.object, - labelMember: React.PropTypes.string, //DEPRECATE - labelStyle: React.PropTypes.object, //DEPRECATE - menuItems: React.PropTypes.array, //DEPRECATE - onBlur: React.PropTypes.func, - onChange: React.PropTypes.func, - onFocus: React.PropTypes.func, - selectFieldRoot: React.PropTypes.object, - selectedIndex: React.PropTypes.number, //DEPRECATE - - /** - * Override the inline-styles of the root element. - */ - style: React.PropTypes.object, - underlineDisabledStyle: React.PropTypes.object, - underlineFocusStyle: React.PropTypes.object, - underlineStyle: React.PropTypes.object, - value: React.PropTypes.any, - }, - - //for passing default theme context to children - childContextTypes: { - muiTheme: React.PropTypes.object, - }, - - getChildContext() { - return { - muiTheme: this.state.muiTheme, - }; - }, - - getInitialState() { - return { - muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), - }; - }, - - getDefaultProps() { - return { - autoWidth: false, - fullWidth: false, - }; - }, - - //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}); - }, - - getStyles() { - const {floatingLabelText} = this.props; - - return { - label: { - paddingLeft: 0, - top: floatingLabelText ? 6 : -4, - }, - icon: { - right: 0, - top: floatingLabelText ? 22 : 14, - }, - hideDropDownUnderline: { - borderTop: 'none', - }, - }; - }, - - render() { - const styles = this.getStyles(); - const { - autoWidth, - children, - style, - labelStyle, - iconStyle, - underlineDisabledStyle, - underlineFocusStyle, - underlineStyle, - errorStyle, - selectFieldRoot, - disabled, - floatingLabelText, - floatingLabelStyle, - hintText, - fullWidth, - errorText, - onFocus, - onBlur, - onChange, - value, - ...other, - } = this.props; - - return ( - - - {children} - - - ); - }, -}); +import SelectField from './SelectField'; export default SelectField;