Firman Ramdhani
b52e458a9d
- Updated ExamplePage to use a single Showcase component instead of separate InputShowCase and FormShowcase components. - Added CheckboxShowcase, FormShowcase, and InputShowCase components to the showcase directory. - Implemented Checkbox component with various states and styles. - Enhanced InputShowCase to demonstrate different input types and states. - Integrated new styles for checkbox variants and states. - Updated package dependencies to include @rc-component/checkbox.
35 lines
1.0 KiB
TypeScript
35 lines
1.0 KiB
TypeScript
import RcCheckbox from '@rc-component/checkbox';
|
|
import { CheckboxProps } from '../types';
|
|
import { forwardRef } from 'react';
|
|
import { InputRef } from '@rc-component/input/lib/interface';
|
|
|
|
export const Checkbox = forwardRef<InputRef, CheckboxProps>((props, ref) => {
|
|
const { label, status = 'default', variant = 'outlined', className, children, ...rest } = props;
|
|
|
|
const displayLabel = label || children;
|
|
|
|
const wrapperClass = [
|
|
'rc-checkbox-wrapper',
|
|
`checkbox-status-${status}`,
|
|
`checkbox-variant-${variant}`,
|
|
rest.disabled ? 'rc-checkbox-wrapper-disabled' : '',
|
|
className,
|
|
]
|
|
.filter(Boolean)
|
|
.join(' ');
|
|
|
|
return (
|
|
<label className={wrapperClass}>
|
|
<span className="rc-checkbox-container">
|
|
<RcCheckbox {...rest} prefixCls="rc-checkbox" />
|
|
{/* HAPUS BARIS DI BAWAH INI */}
|
|
{/* <span className="rc-checkbox-inner" /> */}
|
|
</span>
|
|
|
|
{displayLabel && <span className="rc-checkbox-label-text">{displayLabel}</span>}
|
|
</label>
|
|
);
|
|
});
|
|
|
|
Checkbox.displayName = 'Checkbox';
|