<Alert
className={}
onClick={(event) => {
event.stopPropagration();
}}
message=“ test”
description = “want to add link “
type=“success”
/>
I want to add a link in description I tried didn’t work for me
You can simply add anchor/Link tag in your description
<Alert
className={}
onClick={(event) => {
event.stopPropagration();
}}
message=“ test”
description = {<span>want to add link </span> }
type=“success”
/>
Related
I want to test a checkbox that has no label. The point is that there are other checkboxes as well so I cant use getByRole.
I have tried to use data-testid, but apparently, it's not working.
How am I supposed to check if that checkbox is checked(toBeChecked())?
<Checkbox
data-testid={item?.id}
key={item?.id}
id={item?.id.toString()}
color="secondary"
checked={item?.checked}
disabled={hasAll}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
if (item) {
item.checked = e.target.checked;
setFinalData(updateItemInArray(finalData, {
item,
index,
}));
}
}}
/>
The proper way to do this would be to add an aria-label to your checkbox, so it's announced correctly by screen readers:
<Checkbox inputProps={{ 'aria-label': 'Select row 1' }} />
This way, you'll be able to select it in your tests using getByLabelText.
If you want to use data-testid, you can place it on the checkbox similarly to aria-label:
<Checkbox inputProps={{ 'data-testid': 'checkbox1' }} />
Note that if you're using Typescript, you'd have to cast the inputProps to React.InputHTMLAttributes<HTMLInputElement> as data attributes are not a part of InputHTMLAttributes:
<Checkbox inputProps={{ 'data-testid': 'checkbox1' } as React.InputHTMLAttributes<HTMLInputElement>} />
I'm a totally newbie with React and React-Admin. IMHO, I'm trying to achieve something simple that many people must have already done but I cannot find any kind of tutorial anywhere.
I'd like to add another button to the list of action buttons (show/edit) within each row in a <List> component. This button would archive the record.
My last try looks like the code below.
import React from 'react';
import {
Datagrid,
EmailField,
List,
TextField,
ShowButton,
EditButton,
DeleteButton,
CloneButton,
} from 'react-admin';
import { makeStyles } from '#material-ui/core/styles';
import ArchiveIcon from '#material-ui/icons/Archive';
const useRowActionToolbarStyles = makeStyles({
toolbar: {
alignItems: 'center',
float: 'right',
width: '160px',
marginTop: -1,
marginBottom: -1,
},
icon_action_button: {
minWidth: '40px;'
},
});
const ArchiveButton = props => {
const transform = data => ({
...data,
archived: true
});
return <CloneButton {...props} transform={transform} />;
}
const RowActionToolbar = (props) => {
const classes = useRowActionToolbarStyles();
return (
<div className={classes.toolbar}>
<ShowButton label="" basePath={props.basePath} record={props.record} className={classes.icon_action_button}/>
<EditButton label="" basePath={props.basePath} record={props.record} className={classes.icon_action_button}/>
<ArchiveButton {...props} basePath={props.basePath} label="" icon={<ArchiveIcon/>} record={props.record} className={classes.icon_action_button} />
<DeleteButton basePath={props.basePath} label="" record={props.record} className={classes.icon_action_button}/>
</div>
);
};
export const UserList = props => {
return (
<List
{...props}
sort={{ field: 'first_name', order: 'ASC' }}
>
<Datagrid>
<TextField source="first_name"/>
<TextField source="last_name"/>
<EmailField source="email"/>
<RowActionToolbar/>
</Datagrid>
</List>
)
};
Obviously, this code does not work because the <CloneButton> component get rid of the id the record. Moreover, except if I did something wrong - which is totally possible -, it makes a GET request to a create endpoint.
I'm using different routes in my dataProvider (The back end is using Django and Django rest framework). I want to send a PATCH to the detail endpoint, like the <Edit> component does.
I also tried with a <SaveButton>, but it fails too.
Uncaught TypeError: Cannot read property 'save' of undefined
at useSaveContext (SaveContext.js:23)
I guess the <SaveButton> must be within a <SimpleForm>?
I'd like the save behaviour of the <DeleteButton>, i.e. update the record from the list, display the notification that the record has been archived (with the Undo link), send the request to the back end, refresh the list.
Any guidance, directions would be very appreciated.
I don't know that this is a full answer, but felt like more than a comment...
You are trying to archive the existing record, not create a whole new record, right? CloneButton is supposed to be used to create a new record with a new ID (which is why your ID is going away), so you don't want to us it here. note that I've never used CloneButton. it is not fully documented so I could be wrong about its use.
I am thinking that you should use the useRecordContext hook within your Archive button to pull in all of the record's data, including the id; read this little section: https://marmelab.com/react-admin/Architecture.html#context-pull-dont-push
And I don't think transform is what you're looking for here. You will need to use one of the dataProvider hooks, i'm assuming useUpdate: https://marmelab.com/react-admin/Actions.html#useupdate
//first create component
const MyButton = (props: any) => {
const [sendEmailLoading, setSendEmailLoading] =
React.useState<boolean>(false);
const record = useRecordContext(props);
const sendEmail = (id: Identifier) => {
setSendEmailLoading(true)
dataProvider.sendEmail(
"notifications", { id: id })
.then(({ data }: any) => {
if (data && data.status == "success")
notify('Email send success', { type: 'success' });
setSendEmailLoading(false);
refresh();
});
};
return (
<ButtonMUI color='primary' size="small" onClick={() => {
sendEmail(record.id) }}>
{
!record.publish &&(
!sendEmailLoading ? (
translate('resources.notifications.buttons.send')
) : (
<CircularProgress size={25} thickness={2} />
)
)
}
</ButtonMUI>
)
}
//and second add to datagrid list
<Datagrid>
<NumberField source="id" />
<TextFieldRA source="subject" />
<DateField source="date" />
<BooleanField source="publish" />
{/* <EditButton /> */}
<ShowButton />
<MyButton />
</Datagrid>
I want to see a different icon and tooltip when I set the property editable in material-table but I can't find a way. I know that there is the possibility to override a component but nothing works. Something like this maybe...
components={{
EditRow: props => (
<MTableEditRow
{...props}
icons={{
Edit: () => <SettingsIcon />
}}
/>
)
}}
I think there is a simpler way to achieve what you are looking for. Try this:
Import the icon component of your choice and define an object with the Edit key to override the default icon:
import Settings from "#material-ui/icons/Settings";
const tableIcons = {
Edit: () => <Settings />
};
Then use icons props of your MT component:
<MaterialTable
columns={tableColumns}
data={data}
title="Material Table - change edit icon & tooltip "
icons={tableIcons}
localization={{
body: {
editTooltip: "Custom edit tooltip"
}
}}
// other props..
/>
As seen above, use localization to set the label you need. This a sandbox with a working example, good luck!
I was able to create a search bar, where you can filter the characters, for my directory. However, when I click on that particular profile, the profile image and the text for it do not appear. It was there before I created the searchbar, now it disappeared. Anyone know why that may be?
Prior to having this problem, this is how I had it set up. This is with the searchbar present, but not being able to filter out.
{characters.map((data, index) => (
<Button
text={data.name}
key={data.name}
title={`${data.name}`}
onPress={() => {
this.props.navigation.navigate("CharacterProfiles", {
item: data
});
}}
/>
))}
Then I made some changes to be able to filter out my options and I switched it to this:
{this.state.data.map((data, index) => (
<Button
text={data.name}
key={data.name}
title={`${data.name}`}
onPress={() => {
this.props.navigation.navigate("CharacterProfiles", {
item: data
});
}}
/>
))}
After the above happened, now the data such as the image and text will not appear dynamically anymore. Anybody know why?
In android some times image not load beacause of memory issue..
In Androidmanifest application tag set..
<application
...
android:largeHeap="true"
android:hardwareAccelerated="true"
...
Is there a way to set or disable the OverflowDocumentCount of DocumentCard? Currently it is defaulted to 3 and I can't seem to change it:
I would want to display all files basically.
Unfortunately neither via DocumentCardPreview component methods nor via properties (IDocumentCardPreviewProps), the limit for the items in preview mode could not be modified.
But you could consider to introduce a custom DocumentCardPreview component to display all the items, for example:
const MyDocumentCardPreview = (props: IDocumentCardPreviewProps) => {
const { previewImages } = props;
const fileListItems = previewImages.map((file, fileIndex) => (
<li key={fileIndex}>
<Image
className={css(
"ms-DocumentCardPreview-fileListIcon",
styles.fileListIcon
)}
src={file.iconSrc}
role="presentation"
alt=""
width="16px"
height="16px"
/>
<Link {...file.linkProps}>{file.name}</Link>
</li>
));
return (
<div
className={css(
"ms-DocumentCardPreview",
styles.preview,
"is-fileList " + styles.previewIsFileList
)}
>
<ul className={css("ms-DocumentCardPreview-fileList", styles.fileList)}>
{fileListItems}
</ul>
</div>
);
}
Demo
You can use the getOverflowDocumentCountText prop on the DocumentCardPreview component to customize the overflow text.
<DocumentCard>
<DocumentCardPreview
previewImages={previewImages}
getOverflowDocumentCountText={getOverflowDocumentCountText}
/>
</DocumentCard>
It takes a function, which (optionally) takes the overflow count and returns a string:
const getOverflowDocumentCountText = (overflowCount) => "+ 315 more";
Here is a CodeSandbox demo of it in action.