Added custom ListField icons in bootstrap3.

vazco · Oct 19, 2016 · 965a862 · 965a862
1 parent 2b146e2
commit 965a862
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 8 deletions.
diff --git a/packages/uniforms-bootstrap3/src/components/fields/ListAddField.js b/packages/uniforms-bootstrap3/src/components/fields/ListAddField.js
@@ -4,6 +4,7 @@ import {connectField}   from 'uniforms';
 import {filterDOMProps} from 'uniforms';
 
 const ListAdd = ({
+    addIcon,
     className,
     disabled,
     parent,
@@ -18,10 +19,13 @@ const ListAdd = ({
             onClick={() => limitNotReached && parent.onChange(parent.value.concat([value]))}
             {...filterDOMProps(props)}
         >
-            {/* TODO: configure to alternate icon */}
-            <i className="glyphicon glyphicon-plus" />
+            {addIcon}
         </section>
     );
 };
 
+ListAdd.defaultProps = {
+    addIcon: <i className="glyphicon glyphicon-plus" />
+};
+
 export default connectField(ListAdd, {includeParent: true, initialValue: false});
diff --git a/packages/uniforms-bootstrap3/src/components/fields/ListDelField.js b/packages/uniforms-bootstrap3/src/components/fields/ListDelField.js
@@ -8,6 +8,7 @@ const ListDel = ({
     disabled,
     name,
     parent,
+    removeIcon,
     ...props
 }) => {
     const fieldIndex      = +name.slice(1 + name.lastIndexOf('.'));
@@ -22,10 +23,13 @@ const ListDel = ({
             )}
             {...filterDOMProps(props)}
         >
-            {/* TODO: configure to alternate icon */}
-            <i className="glyphicon glyphicon-minus" />
+            {removeIcon}
         </span>
    );
 };
 
+ListDel.defaultProps = {
+    removeIcon: <i className="glyphicon glyphicon-minus" />
+};
+
 export default connectField(ListDel, {includeParent: true, initialValue: false});
diff --git a/packages/uniforms-bootstrap3/src/components/fields/ListField.js b/packages/uniforms-bootstrap3/src/components/fields/ListField.js
@@ -9,13 +9,15 @@ import ListAddField  from './ListAddField';
 import ListItemField from './ListItemField';
 
 const List = ({
+    addIcon,
     children,
     className,
     error,
     initialCount,
     itemProps,
     label,
     name,
+    removeIcon,
     value,
     ...props
 }) =>
@@ -30,7 +32,7 @@ const List = ({
                         {label}&nbsp;
                     </label>
 
-                    <ListAddField name={`${name}.$`} initialCount={initialCount} />
+                    <ListAddField name={`${name}.$`} initialCount={initialCount} addIcon={addIcon} />
                 </section>
             )}
 
@@ -40,13 +42,20 @@ const List = ({
                            React.cloneElement(child, {
                                key: index,
                                label: null,
-                               name: joinName(name, child.props.name && child.props.name.replace('$', index))
+                               name: joinName(name, child.props.name && child.props.name.replace('$', index)),
+                               removeIcon
                            })
                       )
                  )
             ) : (
                 value.map((item, index) =>
-                    <ListItemField key={index} label={null} name={joinName(name, index)} {...itemProps} />
+                    <ListItemField
+                        key={index}
+                        label={null}
+                        name={joinName(name, index)}
+                        removeIcon={removeIcon}
+                        {...itemProps}
+                    />
                 )
             )}
         </section>

diff --git a/packages/uniforms-bootstrap3/src/components/fields/ListItemField.js b/packages/uniforms-bootstrap3/src/components/fields/ListItemField.js
@@ -9,7 +9,7 @@ import ListDelField from './ListDelField';
 const ListItem = props =>
     <section className="row">
         <section className="col-xs-1">
-            <ListDelField name={props.name} />
+            <ListDelField name={props.name} removeIcon={props.removeIcon} />
         </section>
 
         {props.children ? (