mirror of
https://github.com/pezkuwichain/pezkuwi-apps.git
synced 2026-10-24 12:35:01 +00:00
Satoshi Qazi Muhammed
45d479d2ec
- dev ^0.86.4 at the root and in packages/apps; directives renamed by pezkuwi-dev-migrate-eslint10. - eslint --fix with the 0.86.4 config; one fix broke syntax (typescript-eslint prefer-optional-chain turned `(isStarted && onStart) && onStart()` into `(isStarted && onStart?.();` in TxButton) and is corrected by hand. - The remaining findings fixed rather than disabled: optional chains (each suggestion reviewed), `cause` on rethrown errors, `if` instead of `a && promise` in effects, parallel instead of sequential awaits in Promise.all, Error rejections, no `delete` on arrays (the storage query cache is a Map; an upload's file list no longer keeps a hole), no `[object Object]` stringification (TFunction's second argument is text or options), dead code removed (referenda's never-shown expand button, react-query's unused CoreDescriptor).
72 lines
1.4 KiB
TypeScript
72 lines
1.4 KiB
TypeScript
// Copyright 2017-2026 @pezkuwi/react-components authors & contributors
|
|
// SPDX-License-Identifier: Apache-2.0
|
|
|
|
import React, { useCallback } from 'react';
|
|
|
|
import Icon from './Icon.js';
|
|
import { styled } from './styled.js';
|
|
|
|
interface Props {
|
|
className?: string;
|
|
isDisabled?: boolean;
|
|
label?: React.ReactNode;
|
|
onChange?: (isChecked: boolean) => void;
|
|
value?: boolean;
|
|
}
|
|
|
|
function Checkbox ({ className = '', isDisabled, label, onChange, value }: Props): React.ReactElement<Props> {
|
|
const _onClick = useCallback(
|
|
(): void => {
|
|
!isDisabled && onChange?.(!value);
|
|
},
|
|
[isDisabled, onChange, value]
|
|
);
|
|
|
|
return (
|
|
<StyledDiv
|
|
className={`${className} ui--Checkbox ${isDisabled ? 'isDisabled' : ''}`}
|
|
onClick={_onClick}
|
|
>
|
|
<Icon
|
|
color={value ? 'normal' : 'transparent'}
|
|
icon='check'
|
|
/>
|
|
{label && <label>{label}</label>}
|
|
</StyledDiv>
|
|
);
|
|
}
|
|
|
|
const StyledDiv = styled.div`
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
|
|
&.isDisabled {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
&:not(.isDisabled) {
|
|
cursor: pointer;
|
|
}
|
|
|
|
> label {
|
|
color: var(--color-text);
|
|
display: inline-block;
|
|
margin: 0 0.5rem;
|
|
opacity: 1;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
> label,
|
|
> .ui--Icon {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.ui--Icon {
|
|
border: 1px solid var(--color-checkbox);
|
|
border-radius: 0.125rem;
|
|
}
|
|
`;
|
|
|
|
export default React.memo(Checkbox);
|