material-ui-chip-input - npm Package Compare versions

Comparing version 2.0.0-beta.1 to 2.0.0-beta.2

lib/ChipInput.js

@@ -166,10 +166,11 @@ "use strict";
     },
-    inkbar: {
+    focused: {},
+    disabled: {},
+    underline: {
       '&:after': {
-        backgroundColor: theme.palette.primary[light ? 'dark' : 'light'],
+        borderBottom: "2px solid ".concat(theme.palette.primary[light ? 'dark' : 'light']),
         left: 0,
         bottom: 0,
-        // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
+        // Doing the other way around crash on IE 11 "''" https://github.com/cssinjs/jss/issues/242
         content: '""',
-        height: 2,
         position: 'absolute',
@@ -187,19 +188,18 @@ right: 0,
         transform: 'scaleX(1)'
-      }
-    },
-    focused: {},
-    disabled: {},
-    underline: {
+      },
+      '&$error:after': {
+        borderBottomColor: theme.palette.error.main,
+        transform: 'scaleX(1)' // error is always underlined in red
+
+      },
       '&:before': {
-        backgroundColor: bottomLineColor,
+        borderBottom: "1px solid ".concat(bottomLineColor),
         left: 0,
         bottom: 0,
-        // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
-        content: '""',
-        height: 1,
+        // Doing the other way around crash on IE 11 "''" https://github.com/cssinjs/jss/issues/242
+        content: '"\\00a0"',
         position: 'absolute',
         right: 0,
-        transition: theme.transitions.create('background-color', {
-          duration: theme.transitions.duration.shorter,
-          easing: theme.transitions.easing.easeIn
+        transition: theme.transitions.create('border-bottom-color', {
+          duration: theme.transitions.duration.shorter
         }),
@@ -210,11 +210,10 @@ pointerEvents: 'none' // Transparent to the hover style.
       '&:hover:not($disabled):before': {
-        backgroundColor: theme.palette.text.primary,
-        height: 2
+        borderBottom: "2px solid ".concat(theme.palette.text.primary),
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          borderBottom: "1px solid ".concat(bottomLineColor)
+        }
       },
       '&$disabled:before': {
-        background: 'transparent',
-        backgroundImage: "linear-gradient(to right, ".concat(bottomLineColor, " 33%, transparent 0%)"),
-        backgroundPosition: 'left top',
-        backgroundRepeat: 'repeat-x',
-        backgroundSize: '5px 1px'
+        borderBottomStyle: 'dotted'
       }
@@ -351,3 +350,3 @@ },
 
-      if (_this.props.newChipKeyCodes.indexOf(event.keyCode) >= 0) {
+      if (_this.props.newChipKeyCodes.indexOf(event.keyCode) >= 0 || _this.props.newChipKeys.indexOf(event.key) >= 0) {
         var result = _this.handleAddChip(event.target.value);
@@ -431,3 +430,3 @@
     _defineProperty(_assertThisInitialized(_this), "handleKeyUp", function (event) {
-      if (!_this._preventChipCreation && _this.props.newChipKeyCodes.indexOf(event.keyCode) > 0 && _this._keyPressed) {
+      if (!_this._preventChipCreation && (_this.props.newChipKeyCodes.indexOf(event.keyCode) >= 0 || _this.props.newChipKeys.indexOf(event.key) >= 0) && _this._keyPressed) {
         _this.clearInput();
@@ -656,2 +655,3 @@ } else {
           newChipKeyCodes = _this$props.newChipKeyCodes,
+          newChipKeys = _this$props.newChipKeys,
           onBeforeAdd = _this$props.onBeforeAdd,
@@ -668,2 +668,3 @@ onAdd = _this$props.onAdd,
           placeholder = _this$props.placeholder,
+          readOnly = _this$props.readOnly,
           required = _this$props.required,
@@ -673,3 +674,3 @@ rootRef = _this$props.rootRef,
           variant = _this$props.variant,
-          other = _objectWithoutProperties(_this$props, ["allowDuplicates", "alwaysShowPlaceholder", "blurBehavior", "children", "chipRenderer", "classes", "className", "clearInputValueOnChange", "dataSource", "dataSourceConfig", "defaultValue", "delayBeforeAdd", "disabled", "disableUnderline", "error", "filter", "FormHelperTextProps", "fullWidth", "fullWidthInput", "helperText", "id", "InputProps", "inputRef", "InputLabelProps", "inputValue", "label", "newChipKeyCodes", "onBeforeAdd", "onAdd", "onBlur", "onDelete", "onChange", "onFocus", "onKeyDown", "onKeyPress", "onKeyUp", "onUpdateInput", "placeholder", "required", "rootRef", "value", "variant"]);
+          other = _objectWithoutProperties(_this$props, ["allowDuplicates", "alwaysShowPlaceholder", "blurBehavior", "children", "chipRenderer", "classes", "className", "clearInputValueOnChange", "dataSource", "dataSourceConfig", "defaultValue", "delayBeforeAdd", "disabled", "disableUnderline", "error", "filter", "FormHelperTextProps", "fullWidth", "fullWidthInput", "helperText", "id", "InputProps", "inputRef", "InputLabelProps", "inputValue", "label", "newChipKeyCodes", "newChipKeys", "onBeforeAdd", "onAdd", "onBlur", "onDelete", "onChange", "onFocus", "onKeyDown", "onKeyPress", "onKeyUp", "onUpdateInput", "placeholder", "readOnly", "required", "rootRef", "value", "variant"]);
 
@@ -687,2 +688,3 @@ var chips = value || this.state.chips;
           isDisabled: !!disabled,
+          isReadOnly: readOnly,
           isFocused: _this3.state.focusedChip === i,
@@ -734,3 +736,3 @@ handleClick: function handleClick() {
       }, InputLabelProps), label), _react["default"].createElement("div", {
-        className: (0, _clsx["default"])(classes[variant], classes.chipContainer, (_cx2 = {}, _defineProperty(_cx2, classes.inkbar, !disableUnderline && variant === 'standard'), _defineProperty(_cx2, classes.focused, this.state.isFocused), _defineProperty(_cx2, classes.underline, !disableUnderline && variant === 'standard'), _defineProperty(_cx2, classes.disabled, disabled), _defineProperty(_cx2, classes.labeled, label != null), _defineProperty(_cx2, classes.error, error), _cx2))
+        className: (0, _clsx["default"])(classes[variant], classes.chipContainer, (_cx2 = {}, _defineProperty(_cx2, classes.focused, this.state.isFocused), _defineProperty(_cx2, classes.underline, !disableUnderline && variant === 'standard'), _defineProperty(_cx2, classes.disabled, disabled), _defineProperty(_cx2, classes.labeled, label != null), _defineProperty(_cx2, classes.error, error), _cx2))
       }, variant === 'standard' && chipComponents, _react["default"].createElement(InputComponent, _extends({
@@ -753,3 +755,4 @@ ref: this.input,
         fullWidth: fullWidthInput,
-        placeholder: !hasInput && (shrinkFloatingLabel || label == null) || alwaysShowPlaceholder ? placeholder : null
+        placeholder: !hasInput && (shrinkFloatingLabel || label == null) || alwaysShowPlaceholder ? placeholder : null,
+        readOnly: readOnly
       }, InputProps, InputMore))), helperText && _react["default"].createElement(_FormHelperText["default"], _extends({}, FormHelperTextProps, {
@@ -811,3 +814,3 @@ className: FormHelperTextProps ? (0, _clsx["default"])(FormHelperTextProps.className, classes.helperText) : classes.helperText
 
-  /** A function of the type `({ value, text, chip, isFocused, isDisabled, handleClick, handleDelete, className }, key) => node` that returns a chip based on the given properties. This can be used to customize chip styles.  Each item in the `dataSource` array will be passed to `chipRenderer` as arguments `chip`, `value` and `text`. If `dataSource` is an array of objects and `dataSourceConfig` is present, then `value` and `text` will instead correspond to the object values defined in `dataSourceConfig`. If `dataSourceConfig` is not set and `dataSource` is an array of objects, then a custom `chipRenderer` must be set. `chip` is always the raw value from `dataSource`, either an object or a string. */
+  /** A function of the type `({ value, text, chip, isFocused, isDisabled, isReadOnly, handleClick, handleDelete, className }, key) => node` that returns a chip based on the given properties. This can be used to customize chip styles.  Each item in the `dataSource` array will be passed to `chipRenderer` as arguments `chip`, `value` and `text`. If `dataSource` is an array of objects and `dataSourceConfig` is present, then `value` and `text` will instead correspond to the object values defined in `dataSourceConfig`. If `dataSourceConfig` is not set and `dataSource` is an array of objects, then a custom `chipRenderer` must be set. `chip` is always the raw value from `dataSource`, either an object or a string. */
   chipRenderer: _propTypes["default"].func,
@@ -866,5 +869,8 @@
 
-  /** The key codes used to determine when to create a new chip. */
+  /** The key codes (`KeyboardEvent.keyCode`) used to determine when to create a new chip. */
   newChipKeyCodes: _propTypes["default"].arrayOf(_propTypes["default"].number),
 
+  /** The keys (`KeyboardEvent.key`) used to determine when to create a new chip. */
+  newChipKeys: _propTypes["default"].arrayOf(_propTypes["default"].string),
+
   /** Callback function that is called when a new chip was added (in controlled mode). */
@@ -888,2 +894,5 @@ onAdd: _propTypes["default"].func,
 
+  /** Makes the chip input read-only if set to true. */
+  readOnly: _propTypes["default"].bool,
+
   /** The chips to display (enables controlled mode if set). */
@@ -897,3 +906,3 @@ value: _propTypes["default"].array,
   allowDuplicates: false,
-  blurBehavior: 'clear',
+  blurBehavior: 'add',
   clearInputValueOnChange: false,
@@ -903,2 +912,3 @@ delayBeforeAdd: false,
   newChipKeyCodes: [13],
+  newChipKeys: ['Enter'],
   variant: 'standard'
@@ -918,2 +928,3 @@ };
       isDisabled = _ref.isDisabled,
+      isReadOnly = _ref.isReadOnly,
       handleClick = _ref.handleClick,
@@ -926,3 +937,3 @@ handleDelete = _ref.handleDelete,
     style: {
-      pointerEvents: isDisabled ? 'none' : undefined,
+      pointerEvents: isDisabled || isReadOnly ? 'none' : undefined,
       backgroundColor: isFocused ? _blue["default"][300] : undefined
@@ -929,0 +940,0 @@ },

lib/ChipInput.spec.js

@@ -66,2 +66,30 @@ "use strict";
   });
+  it('can use key instead of keyCode', function () {
+    var handleChange = jest.fn();
+    var tree = (0, _enzyme.mount)(_react["default"].createElement(_ChipInput["default"], {
+      onChange: handleChange
+    }));
+    tree.find('input').getDOMNode().value = 'foo';
+    tree.find('input').simulate('keyDown', {
+      key: 'Enter'
+    });
+    expect(handleChange).toBeCalledWith(['foo']);
+  });
+  it('can use custom keys to add chips', function () {
+    var handleChange = jest.fn();
+    var tree = (0, _enzyme.mount)(_react["default"].createElement(_ChipInput["default"], {
+      onChange: handleChange,
+      newChipKeys: ['Enter', 'Tab']
+    }));
+    tree.find('input').getDOMNode().value = 'foo';
+    tree.find('input').simulate('keyDown', {
+      key: 'Tab'
+    });
+    expect(handleChange).toBeCalledWith(['foo']);
+    tree.find('input').getDOMNode().value = 'bar';
+    tree.find('input').simulate('keyDown', {
+      key: 'Enter'
+    });
+    expect(handleChange).toBeCalledWith(['foo', 'bar']);
+  });
   it('calls onChange when deleting chips with backspace key', function () {
@@ -68,0 +96,0 @@ var handleChange = jest.fn();

package.json

 {
   "name": "material-ui-chip-input",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.2",
   "typings": "typings/index.d.ts",
@@ -5,0 +5,0 @@ "description": "A chip input field using Material-UI.",

README.md

@@ -43,4 +43,4 @@ # material-ui-chip-input
 |alwaysShowPlaceholder|`bool`||If true, the placeholder will always be visible.|
-|blurBehavior|`enum`|`'clear'`|Behavior when the chip input is blurred: `'clear'` clears the input, `'add'` creates a chip and `'ignore'` keeps the input.|
-|chipRenderer|`func`||A function of the type `({ value, text, chip, isFocused, isDisabled, handleClick, handleDelete, className }, key) => node` that returns a chip based on the given properties. This can be used to customize chip styles.  Each item in the `dataSource` array will be passed to `chipRenderer` as arguments `chip`, `value` and `text`. If `dataSource` is an array of objects and `dataSourceConfig` is present, then `value` and `text` will instead correspond to the object values defined in `dataSourceConfig`. If `dataSourceConfig` is not set and `dataSource` is an array of objects, then a custom `chipRenderer` must be set. `chip` is always the raw value from `dataSource`, either an object or a string.|
+|blurBehavior|`enum`|`'add'`|Behavior when the chip input is blurred: `'clear'` clears the input, `'add'` creates a chip and `'ignore'` keeps the input.|
+|chipRenderer|`func`||A function of the type `({ value, text, chip, isFocused, isDisabled, isReadOnly, handleClick, handleDelete, className }, key) => node` that returns a chip based on the given properties. This can be used to customize chip styles.  Each item in the `dataSource` array will be passed to `chipRenderer` as arguments `chip`, `value` and `text`. If `dataSource` is an array of objects and `dataSourceConfig` is present, then `value` and `text` will instead correspond to the object values defined in `dataSourceConfig`. If `dataSourceConfig` is not set and `dataSource` is an array of objects, then a custom `chipRenderer` must be set. `chip` is always the raw value from `dataSource`, either an object or a string.|
 |clearInputValueOnChange|`bool`|`false`|Whether the input value should be cleared if the `value` prop is changed.|
@@ -52,2 +52,3 @@ |dataSource|`array`||Data source for auto complete. This should be an array of strings or objects.|
 |disabled|`bool`||Disables the chip input if set to true.|
+|disableUnderline|`bool`|`false`|If `true`, the input will not have an underline.|
 |FormHelperTextProps|`object`||Props to pass through to the `FormHelperText` component.|
@@ -62,3 +63,4 @@ |fullWidth|`bool`||If true, the chip input will fill the available width.|
 |label|`node`||The content of the floating label.|
-|newChipKeyCodes|`arrayOf`|`[13]`|The key codes used to determine when to create a new chip.|
+|newChipKeyCodes|`arrayOf`|`[13]`|The key codes (`KeyboardEvent.keyCode`) used to determine when to create a new chip.|
+|newChipKeys|`arrayOf`|`['Enter']`|The keys (`KeyboardEvent.key`) used to determine when to create a new chip.|
 |onAdd|`func`||Callback function that is called when a new chip was added (in controlled mode).|
@@ -70,2 +72,3 @@ |onBeforeAdd|`func`||Callback function that is called with the chip to be added and should return true to add the chip or false to prevent the chip from being added without clearing the text input.|
 |placeholder|`string`||A placeholder that is displayed if the input has no values.|
+|readOnly|`bool`||Makes the chip input read-only if set to true.|
 |value|`array`||The chips to display (enables controlled mode if set).|
@@ -72,0 +75,0 @@ |variant | `enum` | `'standard'` | Sets the variant for the input. Values `'standard'`, `'outlined'`, `'filled'`|

typings/index.d.ts

 import * as React from 'react';
 import { FormControlProps } from '@material-ui/core/FormControl';
 import { FormHelperTextProps } from '@material-ui/core/FormHelperText';
-import { InputProps } from '@material-ui/core/Input';
+import { InputProps as StandardInputProps } from '@material-ui/core/Input';
+import { FilledInputProps } from '@material-ui/core/FilledInput';
+import { OutlinedInputProps } from '@material-ui/core/OutlinedInput';
 import { InputLabelProps } from '@material-ui/core/InputLabel';
@@ -13,2 +15,3 @@
   isDisabled: boolean;
+  isReadOnly: boolean;
   handleClick: React.EventHandler<any>;
@@ -28,3 +31,3 @@ handleDelete: React.EventHandler<any>;
 // omitting onChange from FormControlProps as we use a custom onChange
-export interface Props extends Omit<FormControlProps, 'onChange'> {
+export interface BaseTextFieldProps extends Omit<FormControlProps, 'onChange'> {
   allowDuplicates?: boolean;
@@ -49,3 +52,2 @@ alwaysShowPlaceholder?: boolean;
   InputLabelProps?: InputLabelProps;
-  InputProps?: InputProps;
   inputRef?: (ref: React.Ref<HTMLInputElement>) => any;
@@ -55,8 +57,10 @@ inputValue?: string;
   newChipKeyCodes?: number[];
+  newChipKeys?: string[];
   onAdd?: (chip: any) => any;
   onBeforeAdd?: (chip: any) => boolean;
   onChange?: (chips: any[]) => any;
-  onDelete?: (chip:any, index: number) => any;
+  onDelete?: (chip: any, index: number) => any;
   onUpdateInput?: React.EventHandler<any>;
   placeholder?: string;
+  readOnly?: boolean;
   value?: any[];
@@ -66,3 +70,20 @@ variant?: 'outlined' | 'standard' | 'filled';
 
+export interface StandardTextFieldProps extends BaseTextFieldProps {
+  variant?: 'standard';
+  InputProps?: Partial<StandardInputProps>;
+}
+
+export interface FilledTextFieldProps extends BaseTextFieldProps {
+  variant: 'filled';
+  InputProps?: Partial<FilledInputProps>;
+}
+
+export interface OutlinedTextFieldProps extends BaseTextFieldProps {
+  variant: 'outlined';
+  InputProps?: Partial<OutlinedInputProps>;
+}
+
+export type Props = StandardTextFieldProps | FilledTextFieldProps | OutlinedTextFieldProps;
+
 declare const ChipInput: React.ComponentType<Props>;
 export default ChipInput;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

428345

increased by0.62%

Lines of code

1600

increased by3.43%

Number of lines in readme file

99

increased by3.13%

No dependency changes