Add conditional button render props to EditableCard and EditableArrayCard components #574
Conversation
ellenshin
changed the title
src/components/EditableCard.tsx
Outdated
| ); | ||
| } | ||
|
|
||
| private buttons () { | ||
| return ( | ||
| <ButtonToolbar noSpacing> | ||
| {this.deleteButton} | ||
| <div style={{ display: 'inline-block', width: '10px' }}></div> |
There was a problem hiding this comment.
Can we try using antd Space for this? i.e.
import { Space } from 'antd';
function MyComponent() {
return (
<Space size={10}>
{this.deleteButton}
{this.editButton}
</Space>
);
}
There was a problem hiding this comment.
Space component isnt supported in antd3
There was a problem hiding this comment.
hmm could we try making a parent div with display: flex, gap: 10px, and justify-content: space-between and see if that works? Would like to try to avoid the empty <div> if possible, though if that doesn't work I'm OK with this.
it also looks like we don't have much custom styling in this library since we mostly just use the built-in antd functions, so I think inline styling is OK as a workaround for now since this is just a branch. ideally on the main branch we will eventually upgrade to antd4 and use <Space> for things like this.
There was a problem hiding this comment.
actually deleting the spans made this not needed. im seeing the tooltips when the buttons are disabled so not sure what you saw in the previous PR? 🤔
There was a problem hiding this comment.
maybe antd3 vs 4 difference?
Description
Add
disableprops forEditableCardandEditableArrayCardin order to disable actions.This change was needed to disable buttons within CoOp based on the user permission (see linked Jira ticket for more detail). Also added optional tooltips for disabled action buttons in order to enhance user experience.
JIRA: https://thatsmighty.atlassian.net/browse/PROD-1967
Original PR for disabling delete - which unfortunately did not work in CoOp due to antd versioning discrepancy (see note below) https://github.com/mighty-justice/coop-client/pull/1198. This change should be reverted for the time being.
Note: We are branching off of an older version of FieldsAnt in order to bypass the fact that coop-client is still using the old
antdversion. In the future, we should upgrade outdated libraries in CoOp.Screenshots