uniforms-bootstrap4 - npm Package Compare versions

Comparing version 1.0.0-rc.17 to 1.0.0-rc.18

lib/components/fields/AutoField.js

@@ -35,2 +35,6 @@ 'use strict';
 
+var _RadioField = require('./RadioField');
+
+var _RadioField2 = _interopRequireDefault(_RadioField);
+
 var _SelectField = require('./SelectField');
@@ -46,5 +50,9 @@
         if (props.allowedValues) {
-            component = _SelectField2.default;
+            if (props.checkboxes && props.fieldType !== Array) {
+                component = _RadioField2.default;
+            } else {
+                component = _SelectField2.default;
+            }
         } else {
-            switch (props.type) {
+            switch (props.fieldType) {
                 case Date:
@@ -51,0 +59,0 @@ component = _DateField2.default;break;

lib/components/fields/RadioField.js

@@ -30,3 +30,3 @@ 'use strict';
                 'section',
-                { className: (0, _classnames2.default)(props.inputClassName, 'radio' + (props.inline ? '-inline' : '')) },
+                { key: item, className: (0, _classnames2.default)(props.inputClassName, 'radio' + (props.inline ? '-inline' : '')) },
                 _react2.default.createElement(
@@ -33,0 +33,0 @@ 'label',

lib/components/fields/SelectField.js

@@ -23,2 +23,63 @@ 'use strict';
 
+var xor = function xor(item, array) {
+    var index = array.indexOf(item);
+    if (index === -1) {
+        return array.concat([item]);
+    }
+
+    return array.slice(0, index).concat(array.slice(index + 1));
+};
+
+var renderCheckboxes = function renderCheckboxes(props) {
+    return props.allowedValues.map(function (item) {
+        return _react2.default.createElement(
+            'section',
+            { key: item, className: (0, _classnames2.default)(props.inputClassName, 'checkbox' + (props.inline ? '-inline' : '')) },
+            _react2.default.createElement(
+                'label',
+                { htmlFor: props.id + '-' + item },
+                _react2.default.createElement('input', {
+                    checked: props.fieldType === Array ? props.value.includes(item) : props.value === item,
+                    disabled: props.disabled,
+                    id: props.id + '-' + item,
+                    name: props.name,
+                    onChange: function onChange() {
+                        return props.onChange(props.fieldType === Array ? xor(item, props.value) : item);
+                    },
+                    type: 'checkbox'
+                }),
+                props.transform ? props.transform(item) : item
+            )
+        );
+    });
+};
+
+var renderSelect = function renderSelect(props) {
+    return _react2.default.createElement(
+        'select',
+        {
+            className: (0, _classnames2.default)(props.inputClassName, 'c-select form-control', { 'form-control-danger': props.error }),
+            disabled: props.disabled,
+            id: props.id,
+            name: props.name,
+            onChange: function onChange(event) {
+                return props.onChange(event.target.value);
+            },
+            value: props.value
+        },
+        props.placeholder && _react2.default.createElement(
+            'option',
+            { value: '', disabled: true, hidden: true },
+            props.placeholder
+        ),
+        props.allowedValues.map(function (value) {
+            return _react2.default.createElement(
+                'option',
+                { key: value, value: value },
+                props.transform ? props.transform(value) : value
+            );
+        })
+    );
+};
+
 var Select = function Select(props) {
@@ -28,27 +89,3 @@ return _react2.default.createElement(
         props,
-        _react2.default.createElement(
-            'select',
-            {
-                className: (0, _classnames2.default)(props.inputClassName, 'c-select form-control', { 'form-control-danger': props.error }),
-                disabled: props.disabled,
-                id: props.id,
-                name: props.name,
-                onChange: function onChange(event) {
-                    return props.onChange(event.target.value);
-                },
-                value: props.value
-            },
-            props.placeholder && _react2.default.createElement(
-                'option',
-                { value: '', disabled: true, hidden: true },
-                props.placeholder
-            ),
-            props.allowedValues.map(function (value) {
-                return _react2.default.createElement(
-                    'option',
-                    { key: value, value: value },
-                    props.transform ? props.transform(value) : value
-                );
-            })
-        )
+        props.checkboxes || props.fieldType === Array ? renderCheckboxes(props) : renderSelect(props)
     );
@@ -55,0 +92,0 @@ };

lib/components/fields/TextField.js

@@ -36,3 +36,3 @@ 'use strict';
             placeholder: props.placeholder,
-            type: typeof props.type === 'string' ? props.type : 'text',
+            type: props.type || 'text',
             value: props.value
@@ -39,0 +39,0 @@ })

package.json

 {
   "name": "uniforms-bootstrap4",
-  "version": "1.0.0-rc.17",
+  "version": "1.0.0-rc.18",
   "main": "lib/index.js",
@@ -27,8 +27,7 @@ "jsnext:main": "src/index.js",
   "scripts": {
-    "lint": "./node_modules/.bin/eslint src",
+    "lint": "eslint src",
     "test": "true",
     "cover": "true",
-    "build": "./node_modules/.bin/babel --out-dir lib src",
-    "watch": "./node_modules/.bin/babel --out-dir lib src --watch",
-    "clean": "rm -rf lib node_modules",
+    "build": "babel --out-dir lib src",
+    "clean": "rimraf lib node_modules",
     "prepublish": "npm run lint && npm run test && npm run build"
@@ -45,7 +44,8 @@ },
     "eslint-plugin-babel": "^3.2.0",
-    "eslint-plugin-react": "^5.1.1"
+    "eslint-plugin-react": "^5.1.1",
+    "rimraf": "^2.5.2"
   },
   "peerDependencies": {
     "react": "^15.1.0",
-    "uniforms": "^1.0.0-rc.16"
+    "uniforms": "^1.0.0-rc.18"
   },
@@ -52,0 +52,0 @@ "babel": {

src/components/fields/AutoField.js

@@ -10,2 +10,3 @@ import {connectField}  from 'uniforms';
 import TextField   from './TextField';
+import RadioField  from './RadioField';
 import SelectField from './SelectField';
@@ -17,5 +18,9 @@
         if (props.allowedValues) {
-            component = SelectField;
+            if (props.checkboxes && props.fieldType !== Array) {
+                component = RadioField;
+            } else {
+                component = SelectField;
+            }
         } else {
-            switch (props.type) {
+            switch (props.fieldType) {
                 case Date:    component = DateField; break;
@@ -22,0 +27,0 @@ case Array:   component = ListField; break;

src/components/fields/RadioField.js

@@ -10,3 +10,3 @@ import React          from 'react';
         {props.allowedValues.map(item =>
-            <section className={classnames(props.inputClassName, `radio${props.inline ? '-inline' : ''}`)}>
+            <section key={item} className={classnames(props.inputClassName, `radio${props.inline ? '-inline' : ''}`)}>
                 <label htmlFor={`${props.id}-${item}`}>
@@ -13,0 +13,0 @@ <input

src/components/fields/SelectField.js

@@ -7,24 +7,58 @@ import React          from 'react';
 
+const xor = (item, array) => {
+    let index = array.indexOf(item);
+    if (index === -1) {
+        return array.concat([item]);
+    }
+
+    return array.slice(0, index).concat(array.slice(index + 1));
+};
+
+const renderCheckboxes = props =>
+    props.allowedValues.map(item =>
+        <section key={item} className={classnames(props.inputClassName, `checkbox${props.inline ? '-inline' : ''}`)}>
+            <label htmlFor={`${props.id}-${item}`}>
+                <input
+                    checked={props.fieldType === Array ? props.value.includes(item) : props.value === item}
+                    disabled={props.disabled}
+                    id={`${props.id}-${item}`}
+                    name={props.name}
+                    onChange={() => props.onChange(props.fieldType === Array ? xor(item, props.value) : item)}
+                    type="checkbox"
+                />
+                {props.transform ? props.transform(item) : item}
+            </label>
+        </section>
+    )
+;
+
+const renderSelect = props =>
+    <select
+        className={classnames(props.inputClassName, 'c-select form-control', {'form-control-danger': props.error})}
+        disabled={props.disabled}
+        id={props.id}
+        name={props.name}
+        onChange={event => props.onChange(event.target.value)}
+        value={props.value}
+    >
+        {props.placeholder && (
+            <option value="" disabled hidden>
+                {props.placeholder}
+            </option>
+        )}
+
+        {props.allowedValues.map(value =>
+            <option key={value} value={value}>
+                {props.transform ? props.transform(value) : value}
+            </option>
+        )}
+    </select>
+;
+
 const Select = props =>
     <FormGroup {...props}>
-        <select
-            className={classnames(props.inputClassName, 'c-select form-control', {'form-control-danger': props.error})}
-            disabled={props.disabled}
-            id={props.id}
-            name={props.name}
-            onChange={event => props.onChange(event.target.value)}
-            value={props.value}
-        >
-            {props.placeholder && (
-                <option value="" disabled hidden>
-                    {props.placeholder}
-                </option>
-            )}
-
-            {props.allowedValues.map(value =>
-                <option key={value} value={value}>
-                    {props.transform ? props.transform(value) : value}
-                </option>
-            )}
-        </select>
+        {props.checkboxes || props.fieldType === Array
+            ? renderCheckboxes(props)
+            : renderSelect(props)
+        }
     </FormGroup>
@@ -31,0 +65,0 @@ ;

src/components/fields/TextField.js

@@ -16,3 +16,3 @@ import React          from 'react';
             placeholder={props.placeholder}
-            type={typeof props.type === 'string' ? props.type : 'text'}
+            type={props.type || 'text'}
             value={props.value}
@@ -19,0 +19,0 @@ />

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

75664

increased by7.61%

Number of package files

52

increased by4%

Lines of code

1697

increased by8.5%

Worsened metrics

Dev dependency count

10

increased by11.11%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes