Add multi-select action #1319
Add multi-select action #1319
Conversation
Fosol
added
bug
Published tno-core:0.0.384
| /** whether or not this is being used on a list view */ | ||
| onList?: boolean; | ||
| /** Whether the back button is displayed */ | ||
| showBackButton?: boolean; |
There was a problem hiding this comment.
Make components that are not tightly coupled to implementation if possible.
| @@ -0,0 +1,5 @@ | |||
| import { ContentActionBar, IContentActionBarProps } from './ContentActionBar'; | |||
|
|
|||
| export const ContentListActionBar: React.FC<IContentActionBarProps> = ({ className, ...rest }) => { | |||
There was a problem hiding this comment.
Since a common implementation is to add the className, we can create a simple wrapper.
| @@ -185,7 +185,7 @@ export const ViewContent: React.FC<IViewContentProps> = ({ setActiveContent }) = | |||
| <div className="source-section">{`${content?.section} ${ | |||
| content?.page && `:${content.page}` | |||
| }`}</div> | |||
| {content?.tonePools && ( | |||
| {content?.tonePools && content?.tonePools.length && ( | |||
There was a problem hiding this comment.
Fixed bug unrelated to this PR. Developers please don't assume an array has items in it.
| @@ -33,28 +33,32 @@ export const Home: React.FC = () => { | |||
| }, | |||
| { findContentWithElasticsearch, storeHomeFilter: storeFilter }, | |||
| ] = useContent(); | |||
| const [homeItems, setHomeItems] = React.useState<IContentModel[]>([]); | |||
| const navigate = useNavigate(); | |||
There was a problem hiding this comment.
Keep the organization convention alive. It's easier for all of us to read the code.
Place dependency hooks first.
Then React.useState
Then local variables
Then React.useEffect and functions
| @@ -70,8 +70,7 @@ export class TableInternal<T extends object> implements ITableInternal<T> { | |||
| const rows = this.filterData(this.search).map((original, index) => { | |||
| const selected = this.selectedRowIds.some((id) => this._rowId(original) === id) | |||
| ? true | |||
| : selectedRows.find((row) => this._rowId(row.original) === this._rowId(original)) | |||
| ?.isSelected ?? false; | |||
| : false; | |||
There was a problem hiding this comment.
This was a bug, but I don't know whether this will break something else.
| /** Event fires when back button is pressed */ | ||
| onBack?: () => void; | ||
| /** Event fires when select all checkbox is changed */ | ||
| onSelectAll?: React.ChangeEventHandler<HTMLInputElement>; |
There was a problem hiding this comment.
Use an event to let the parent decide on implementation.
Cleaned up component and page implementation to support a toolbar action to select all content.
@jdtoombs You can figure out how to make it look better. The select all highlights each row which is ugly.
Summary
List View