aced8fb593
add watch later hover action replace watch later popup item for favorites lint styling for watch_later overlay Add label Use just claim, add requiresAuth Add list icon Tone down text Turn WL Hover Button into component Change WL hover icons small revert Keep watch later in the menu
60 lines
1.5 KiB
JavaScript
60 lines
1.5 KiB
JavaScript
// @flow
|
|
import * as ICONS from 'constants/icons';
|
|
import React from 'react';
|
|
import { FormField } from 'component/common/form';
|
|
import Icon from 'component/common/icon';
|
|
import { COLLECTIONS_CONSTS } from 'lbry-redux';
|
|
|
|
type Props = {
|
|
collection: Collection,
|
|
hasClaim: boolean,
|
|
category: string,
|
|
edited: boolean,
|
|
editCollection: (string, CollectionEditParams) => void,
|
|
claim: Claim,
|
|
collectionPending: Collection,
|
|
};
|
|
|
|
function CollectionSelectItem(props: Props) {
|
|
const { collection, hasClaim, category, editCollection, claim, collectionPending } = props;
|
|
const { name, id } = collection;
|
|
const handleChange = (e) => {
|
|
editCollection(id, { claims: [claim], remove: hasClaim });
|
|
};
|
|
|
|
let icon;
|
|
switch (category) {
|
|
case 'builtin':
|
|
icon = (id === COLLECTIONS_CONSTS.WATCH_LATER_ID && ICONS.TIME) || (id === COLLECTIONS_CONSTS.FAVORITES_ID && ICONS.STAR) || ICONS.STACK;
|
|
break;
|
|
case 'published':
|
|
icon = ICONS.STACK;
|
|
break;
|
|
default:
|
|
// 'unpublished'
|
|
icon = ICONS.LOCK;
|
|
break;
|
|
}
|
|
|
|
return (
|
|
<div className={'collection-select__item'}>
|
|
<FormField
|
|
checked={hasClaim}
|
|
disabled={collectionPending}
|
|
icon={icon}
|
|
type="checkbox"
|
|
name={`select-${id}`}
|
|
onChange={handleChange} // edit the collection
|
|
label={
|
|
<span>
|
|
<Icon icon={icon} className={'icon-collection-select'} />
|
|
{`${name}`}
|
|
</span>
|
|
} // the collection name
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default CollectionSelectItem;
|