Added logging, changed some directory structure

This commit is contained in:
2018-01-13 21:33:40 -05:00
parent f079a5f067
commit 8e72ffb917
73656 changed files with 35284 additions and 53718 deletions

View File

@@ -0,0 +1,30 @@
import * as React from 'react';
import { StandardProps } from '..';
import { InputProps } from '../Input';
import { InputClassKey } from '../Input/Input';
export interface SelectProps extends StandardProps<
InputProps,
SelectClassKey,
'value'
> {
autoWidth?: boolean;
displayEmpty?: boolean;
input?: React.ReactNode;
native?: boolean;
multiple?: boolean;
MenuProps?: Object;
renderValue?: Function;
value?: Array<string | number> | string | number;
}
type SelectClassKey =
| InputClassKey
| 'select'
| 'selectMenu'
| 'icon'
;
declare const Select: React.ComponentType<SelectProps>;
export default Select;

View File

@@ -0,0 +1,112 @@
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; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
// @inheritedComponent Input
import React from 'react';
import warning from 'warning';
import SelectInput from './SelectInput';
import withStyles from '../styles/withStyles';
import Input from '../Input'; // Import to enforce the CSS injection order
import { isMuiElement } from '../utils/reactHelpers';
export const styles = theme => ({
root: {
position: 'relative',
width: '100%'
},
select: {
'-moz-appearance': 'none', // Remove Firefox custom style
'-webkit-appearance': 'none', // Fix SSR issue
appearance: 'none', // Reset
// When interacting quickly, the text can end up selected.
// Native select can't be selected either.
userSelect: 'none',
padding: `0 ${theme.spacing.unit * 4}px 2px 0`,
width: 'auto',
minWidth: theme.spacing.unit * 2, // So it doesn't collapse.
height: `calc(1em + ${theme.spacing.unit * 2 - 2}px)`,
cursor: 'pointer',
'&:focus': {
// Show that it's not an text input
background: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255, 255, 255, 0.05)',
borderRadius: 0 // Reset Chrome style
},
// Remove Firefox focus border
'&:-moz-focusring': {
color: 'transparent',
textShadow: '0 0 0 #000'
},
// Remove IE11 arrow
'&::-ms-expand': {
display: 'none'
}
},
selectMenu: {
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
overflow: 'hidden',
lineHeight: `calc(1em + ${theme.spacing.unit * 2 - 2}px)`
},
disabled: {
cursor: 'default'
},
icon: {
position: 'absolute',
right: 0,
top: 4,
color: theme.palette.text.secondary,
'pointer-events': 'none' // Don't block pinter events on the select under the icon.
}
});
function Select(props) {
const {
autoWidth,
children,
classes,
displayEmpty,
input,
InputClasses,
native,
multiple,
MenuProps,
renderValue
} = props,
other = _objectWithoutProperties(props, ['autoWidth', 'children', 'classes', 'displayEmpty', 'input', 'InputClasses', 'native', 'multiple', 'MenuProps', 'renderValue']);
// Instead of `Element<typeof Input>` to have more flexibility.
warning(isMuiElement(input, ['Input']), ['Material-UI: you have provided an invalid value to the `input` property.', 'We expect an element instance of the `Input` component.'].join('\n'));
return React.cloneElement(input, _extends({
// Most of the logic is implemented in `SelectInput`.
// The `Select` component is a simple API wrapper to expose something better to play with.
inputComponent: SelectInput,
classes: InputClasses
}, other, {
inputProps: _extends({}, input ? input.props.inputProps : {}, {
autoWidth,
children,
classes,
displayEmpty,
native,
multiple,
MenuProps,
renderValue
})
}));
}
Select.defaultProps = {
autoWidth: false,
displayEmpty: false,
input: React.createElement(Input, null),
native: false,
multiple: false
};
Select.muiName = 'Select';
export default withStyles(styles, { name: 'MuiSelect' })(Select);

View File

@@ -0,0 +1,30 @@
import * as React from 'react';
import { StandardProps } from '..';
export interface SelectInputProps extends StandardProps<{}, SelectInputClassKey> {
autoWidth: boolean;
disabled?: boolean;
native: boolean;
multiple: boolean;
MenuProps?: Object;
name?: string;
onBlur?: React.FocusEventHandler<any>;
onChange?: (event: React.ChangeEvent<{}>, child: React.ReactNode) => void,
onFocus?: React.FocusEventHandler<any>;
readOnly?: boolean;
renderValue?: Function;
selectRef?: Function;
value?: string | number | Array<string | number>;
}
export type SelectInputClassKey =
| 'root'
| 'select'
| 'selectMenu'
| 'disabled'
| 'icon'
;
declare const SelectInput: React.ComponentType<SelectInputProps>;
export default SelectInput;

View File

@@ -0,0 +1,267 @@
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; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
import React from 'react';
import classNames from 'classnames';
import keycode from 'keycode';
import warning from 'warning';
import Menu from '../Menu/Menu';
import { isDirty } from '../Input/Input';
import ArrowDropDownIcon from '../svg-icons/ArrowDropDown';
/**
* @ignore - internal component.
*/
class SelectInput extends React.Component {
constructor(...args) {
var _temp;
return _temp = super(...args), this.state = {
anchorEl: null,
open: false
}, this.ignoreNextBlur = false, this.handleClick = event => {
// Opening the menu is going to blur the. It will be focused back when closed.
this.ignoreNextBlur = true;
this.setState({
open: true,
anchorEl: event.currentTarget
});
}, this.handleRequestClose = () => {
this.setState({
open: false
});
}, this.handleItemClick = child => event => {
if (!this.props.multiple) {
this.setState({
open: false
});
}
if (this.props.onChange) {
const { onChange } = this.props;
let value;
let target;
if (event.target) {
target = event.target;
}
if (this.props.multiple) {
value = Array.isArray(this.props.value) ? [...this.props.value] : [];
const itemIndex = value.indexOf(child.props.value);
if (itemIndex === -1) {
value.push(child.props.value);
} else {
value.splice(itemIndex, 1);
}
} else {
value = child.props.value;
}
event.persist();
event.target = _extends({}, target, { value });
onChange(event, child);
}
}, this.handleBlur = event => {
if (this.ignoreNextBlur === true) {
// The parent components are relying on the bubbling of the event.
event.stopPropagation();
this.ignoreNextBlur = false;
return;
}
if (this.props.onBlur) {
this.props.onBlur(event);
}
}, this.handleKeyDown = event => {
if (this.props.readOnly) {
return;
}
if (['space', 'up', 'down'].includes(keycode(event))) {
event.preventDefault();
// Opening the menu is going to blur the. It will be focused back when closed.
this.ignoreNextBlur = true;
this.setState({
open: true,
anchorEl: event.currentTarget
});
}
}, this.handleSelectRef = node => {
if (!this.props.selectRef) {
return;
}
this.props.selectRef({
node,
// By pass the native input as we expose a rich object (array).
value: this.props.value
});
}, _temp;
}
render() {
const _props = this.props,
{
autoWidth,
children,
className: classNameProp,
classes,
disabled,
displayEmpty,
name,
native,
multiple,
MenuProps = {},
onBlur,
onChange,
onFocus,
readOnly,
renderValue,
selectRef,
value
} = _props,
other = _objectWithoutProperties(_props, ['autoWidth', 'children', 'className', 'classes', 'disabled', 'displayEmpty', 'name', 'native', 'multiple', 'MenuProps', 'onBlur', 'onChange', 'onFocus', 'readOnly', 'renderValue', 'selectRef', 'value']);
if (native) {
warning(multiple === false, 'Material-UI: you can not use the `native` and `multiple` properties ' + 'at the same time on a `Select` component.');
warning(!renderValue, 'Material-UI: the `renderValue` property is not used by the native implementation.');
warning(!displayEmpty, 'Material-UI: the `displayEmpty` property is not used by the native implementation.');
return React.createElement(
'div',
{ className: classes.root },
React.createElement(
'select',
_extends({
className: classNames(classes.select, {
[classes.disabled]: disabled
}, classNameProp),
name: name,
disabled: disabled,
onBlur: onBlur,
onChange: onChange,
onFocus: onFocus,
value: value,
readOnly: readOnly
}, other, {
ref: selectRef
}),
children
),
React.createElement(ArrowDropDownIcon, { className: classes.icon })
);
}
if (value === undefined) {
throw new Error('Material-UI: the `value` property is required ' + 'when using the `Select` component with `native=false`.');
}
let display;
let displaySingle = '';
const displayMultiple = [];
let computeDisplay = false;
// No need to display any value if the field is empty.
if (isDirty(this.props) || displayEmpty) {
if (renderValue) {
display = renderValue(value);
} else {
computeDisplay = true;
}
}
const items = React.Children.map(children, child => {
if (!React.isValidElement(child)) {
return null;
}
let selected;
if (multiple) {
if (!Array.isArray(value)) {
throw new Error('Material-UI: the `value` property must be an array ' + 'when using the `Select` component with `multiple`.');
}
selected = value.indexOf(child.props.value) !== -1;
if (selected && computeDisplay) {
displayMultiple.push(child.props.children);
}
} else {
selected = value === child.props.value;
if (selected && computeDisplay) {
displaySingle = child.props.children;
}
}
return React.cloneElement(child, {
role: 'option',
selected,
onClick: this.handleItemClick(child)
});
});
if (computeDisplay) {
display = multiple ? displayMultiple.join(', ') : displaySingle;
}
const minimumMenuWidth = this.state.anchorEl != null && !autoWidth ? this.state.anchorEl.clientWidth : undefined;
return React.createElement(
'div',
{ className: classes.root },
React.createElement(
'div',
{
className: classNames(classes.select, classes.selectMenu, {
[classes.disabled]: disabled
}, classNameProp),
'data-mui-test': 'SelectDisplay',
'aria-pressed': this.state.open ? 'true' : 'false',
tabIndex: disabled ? null : 0,
role: 'button',
'aria-owns': this.state.open ? `menu-${name || ''}` : null,
'aria-haspopup': 'true',
onKeyDown: this.handleKeyDown,
onBlur: this.handleBlur,
onClick: disabled || readOnly ? null : this.handleClick,
onFocus: onFocus
},
display
),
React.createElement('input', _extends({
value: Array.isArray(value) ? value.join(',') : value,
name: name,
readOnly: readOnly
}, other, {
ref: this.handleSelectRef,
type: 'hidden'
})),
React.createElement(ArrowDropDownIcon, { className: classes.icon }),
React.createElement(
Menu,
_extends({
id: `menu-${name || ''}`,
anchorEl: this.state.anchorEl,
open: this.state.open,
onRequestClose: this.handleRequestClose
}, MenuProps, {
MenuListProps: _extends({}, MenuProps.MenuListProps, {
role: 'listbox'
}),
PaperProps: _extends({}, MenuProps.PaperProps, {
style: _extends({
minWidth: minimumMenuWidth
}, MenuProps.PaperProps != null ? MenuProps.PaperProps.style : null)
})
}),
items
)
);
}
}
SelectInput.muiName = 'SelectInput';
export default SelectInput;

View File

@@ -0,0 +1,2 @@
export { default } from './Select';
export * from './Select';

View File

@@ -0,0 +1 @@
export { default } from './Select';