Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added custom ListField icons in bootstrap4. #114

Merged
merged 3 commits into from
Oct 19, 2016

Conversation

todda00
Copy link
Contributor

@todda00 todda00 commented Oct 19, 2016

Add ability to include custom add / remove icons for ListFields.

This can be implemented in either AutoField or by using ListField.

Example AutoField:

<AutoField
  name="athletics.otherSports"
  addIcon={(<i className="fa fa-add-circle" />)}
  removeIcon={(<i className="fa fa-close-circle" />)}
/>

Example ListField:

<ListField
  name="athletics.otherSports"
  addIcon={(<i className="fa fa-add-circle" />)}
  removeIcon={(<i className="fa fa-close-circle" />)}
>
  <ListItemField name="$">
    <NestField>
      <TextField name="sportName" className="col-md-6" />
      <TextField name="yearsParticipated" className="col-md-6" />
    </NestField>
  </ListItemField>
</ListField>

add ability to include custom add / remove icons for ListFields
@@ -8,6 +8,7 @@ const ListAdd = ({
disabled,
parent,
value,
addIcon = (<i className="octicon octicon-plus" />),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please, use defaultProps instead.

@@ -8,6 +8,7 @@ const ListDel = ({
disabled,
name,
parent,
removeIcon = (<i className="octicon octicon-dash" />),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as above.

@@ -16,6 +16,8 @@ const List = ({
label,
name,
value,
addIcon,
removeIcon,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know it's not in the ESLint, but please, keep them sorted.

@radekmie
Copy link
Contributor

Great!
Maybe you could implement the same functionality in bootstrap3 package?

@radekmie radekmie added the Type: Feature New features and feature requests label Oct 19, 2016
@todda00
Copy link
Contributor Author

todda00 commented Oct 19, 2016

I don't use BS3, but it should be relatively simple, I will create a separate PR for BS3.

@@ -24,4 +24,8 @@ const ListAdd = ({
);
};

ListAdd.defaultProps = {
addIcon: (<i className="octicon octicon-plus" />),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry for being so picky (just say no, if you want), but could you remove the parentheses and trailing comma?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sure thing, we each have our own style, I'll try to match yours. FYI my thought process behind the comma: I prefer commas after the final line so when you add a property at the end of an object, the commit is only 1 line change, not 2.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure why I had the parentheses, I'll get rid of that too

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If I would go with less-diff-is-better ideology, I wouldn't align assignements, imports, properties and so on... Currently it's not in our ESLint, so I'm forcing my code style here.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you want the defaultProps all one line (just 1 property), or multi ?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Multi.

@@ -28,4 +28,8 @@ const ListDel = ({
);
};

ListDel.defaultProps = {
removeIcon: (<i className="octicon octicon-dash" />),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here.

code style change for defaultProps
@radekmie radekmie merged commit 2b146e2 into vazco:master Oct 19, 2016
@radekmie
Copy link
Contributor

I'll release 1.3.0 soon.

@radekmie radekmie changed the title custom addIcon and removeIcon for ListFields for bootstrap-4 Added custom ListField icons in bootstrap4. Oct 19, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Feature New features and feature requests
Projects
Archived in project
Development

Successfully merging this pull request may close these issues.

2 participants