mirror of
https://github.com/hanzoai/cd-ui.git
synced 2026-10-30 20:42:45 +00:00
jwinters01andGitHub
ad616de862
* chore: fix Rules-of-React violations for React Compiler readiness Add eslint-plugin-react-hooks v7 (recommended-latest) and fix all error-level Rules-of-React findings so the React Compiler can optimize the component library. The healthcheck reports 100% of components compilable; these fixes clear the 34 ESLint errors across the src and v2 component trees: - refs: stop accessing ref.current during render (incl. the react-form compat shim, whose public ref-forwarding API is preserved) - set-state-in-effect: convert to derived state or restructure effects - immutability: clone-before-mutate; stop mutating props/state - rules-of-hooks: hoist conditional hook calls to top level All 47 unit tests pass; behavior is preserved. Signed-off-by: Jonathan Winters <[email protected]> * chore: resolve react-hooks deps from public npm registry The eslint-plugin-react-hooks@7 dependency subtree was locked to an internal mirror, which the public CI runner can't reach (ETIMEDOUT). Rewrite the 21 affected resolved URLs to registry.yarnpkg.com. Signed-off-by: Jonathan Winters <[email protected]> * useKeybinding -> registerKeybinding Signed-off-by: Jonathan Winters <[email protected]> * chore: fix Rules-of-React refs violations from registerKeybinding rename The useKeybinding->registerKeybinding rename turned hook calls into plain function calls in the render body; since registerKeybinding takes ref targets, the new react-hooks/refs lint flagged them. Move the calls into useEffect (registration is a side effect) in sliding-panel and the v2 autocomplete. In the v1 autocomplete, the flagged value is a forwarded callback ref, not a render-time read, so suppress that one with a comment. Also dedupe pnpm-lock.yaml. Signed-off-by: Jonathan Winters <[email protected]> --------- Signed-off-by: Jonathan Winters <[email protected]>
45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
import * as React from 'react';
|
|
|
|
import './checkbox.scss';
|
|
|
|
export const Checkbox = (props: {value?: boolean; onChange?: (value: boolean) => void; style?: React.CSSProperties | any}) => {
|
|
const [value, setValue] = React.useState<boolean>(props.value);
|
|
const [prevPropValue, setPrevPropValue] = React.useState<boolean>(props.value);
|
|
|
|
// Sync local state with the controlling prop during render rather than in an
|
|
// effect. This avoids a cascading render and keeps `value` derived from
|
|
// `props.value` whenever the prop changes.
|
|
if (props.value !== prevPropValue) {
|
|
setPrevPropValue(props.value);
|
|
setValue(props.value);
|
|
}
|
|
|
|
const syncValue = (val: boolean) => {
|
|
setValue(val);
|
|
if (props.onChange) {
|
|
props.onChange(val);
|
|
}
|
|
};
|
|
|
|
// Notify the parent of the current value on mount and whenever the
|
|
// controlling prop changes. This mirrors the original effect, which called
|
|
// onChange(props.value) on mount and on every props.value change.
|
|
React.useEffect(() => {
|
|
if (props.onChange) {
|
|
props.onChange(props.value);
|
|
}
|
|
}, [props.value]);
|
|
|
|
return (
|
|
<div
|
|
className={`checkbox ${value ? 'checkbox--selected' : ''}`}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
syncValue(!value);
|
|
}}
|
|
style={props.style}>
|
|
<i className='fa fa-check' />
|
|
</div>
|
|
);
|
|
};
|