lbry-desktop/ui/modal/modalHideRecommendation/view.jsx
infinite-persistence 59a0b9d490 Better non-clickable implementation
## Issue
- Adding `content__non-clickable` everywhere probably isn't the right way when we move forward to separating `all.scss`.
- Not intuitive -- easier to use if it's an attribute to `ClaimPreview`.

## Change
- Consolidate to a re-usable `non-clickable` class.
- Made Wallet Send search preview non-clickable as a temporary band aid until the channel-finder is consolidated.
- `listBlocked`: something is overriding the pointer, so non-clickable isn't working. Removed for now -- doesn't really matter.
2022-04-05 19:44:09 -07:00

51 lines
1.5 KiB
JavaScript

// @flow
import React from 'react';
import Button from 'component/button';
import ClaimPreview from 'component/claimPreview';
import Card from 'component/common/card';
import { FormField } from 'component/common/form-components/form-field';
import { Modal } from 'modal/modal';
type Props = {
uri: string,
onConfirm: (hideChannel: boolean) => void,
doHideModal: () => void,
};
export default function ModalHideRecommendation(props: Props) {
const { uri, onConfirm, doHideModal } = props;
const [hideChannel, setHideChannel] = React.useState(false);
function handleOnClick() {
if (onConfirm) {
onConfirm(hideChannel);
}
doHideModal();
}
return (
<Modal isOpen type="card" onAborted={doHideModal}>
<Card
title={__('Not interested')}
body={<ClaimPreview uri={uri} hideMenu hideActions nonClickable type="inline" properties={false} />}
actions={
<>
<div className="section__checkbox">
<FormField
type="checkbox"
name="hide_channel"
label={__("Also, don't recommend channel")}
checked={hideChannel}
onChange={() => setHideChannel(!hideChannel)}
/>
</div>
<div className="section__actions">
<Button button="primary" label={__('Submit')} onClick={handleOnClick} />
<Button button="link" label={__('Cancel')} onClick={doHideModal} />
</div>
</>
}
/>
</Modal>
);
}