@etsoo/materialui 1.0.34 → 1.0.36

package/__tests__/SwitchAnt.tsx

@@ -0,0 +1,23 @@
+import { getByText, render } from '@testing-library/react';
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { SwitchAnt } from '../src/SwitchAnt';
+
+it('SwitchAnt Tests', () => {
+    const onChange = jest.fn((event: React.ChangeEvent<HTMLInputElement>) =>
+        expect(event.target.checked).toBeTruthy()
+    );
+
+    // Render component
+    const { baseElement } = render(
+        <SwitchAnt startLabel="No" endLabel="Yes" onChange={onChange} />
+    );
+
+    const yes = getByText(baseElement, 'Yes');
+
+    act(() => {
+        yes.click();
+    });
+
+    expect(onChange).toBeCalled();
+});

package/lib/SwitchAnt.d.ts

@@ -5,7 +5,7 @@ import { SwitchProps } from '@mui/material/Switch';
  */
 export interface SwitchAntProps extends SwitchProps {
     /**
-     *
+     * Active color
      */
     activeColor?: string;
     /**

package/lib/SwitchAnt.js

@@ -12,6 +12,8 @@ export function SwitchAnt(props) {
     const { activeColor, checked, defaultChecked, defaultValue, endLabel, startLabel, onChange, value = 'true', ...rest } = props;
     // Checked state
     const [controlChecked, setControlChecked] = React.useState((_a = checked !== null && checked !== void 0 ? checked : defaultChecked) !== null && _a !== void 0 ? _a : defaultValue == value);
+    // Ref
+    const ref = React.useRef(null);
     React.useEffect(() => {
         if (checked)
             setControlChecked(checked);
@@ -24,14 +26,14 @@ export function SwitchAnt(props) {
     };
     // Layout
     return (React.createElement(Stack, { direction: "row", spacing: 1, alignItems: "center" },
-        React.createElement(Typography, { onClick: () => setControlChecked(false), sx: {
+        React.createElement(Typography, { onClick: () => { var _a; return controlChecked && ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.click()); }, sx: {
                 cursor: 'pointer',
                 color: controlChecked
                     ? undefined
                     : (theme) => activeColor !== null && activeColor !== void 0 ? activeColor : theme.palette.warning.main
             } }, startLabel),
-        React.createElement(Switch, { checked: controlChecked, value: value, onChange: onChangeLocal, ...rest }),
-        React.createElement(Typography, { onClick: () => setControlChecked(true), sx: {
+        React.createElement(Switch, { checked: controlChecked, inputRef: ref, value: value, onChange: onChangeLocal, ...rest }),
+        React.createElement(Typography, { onClick: () => { var _a; return !controlChecked && ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.click()); }, sx: {
                 cursor: 'pointer',
                 color: controlChecked
                     ? (theme) => activeColor !== null && activeColor !== void 0 ? activeColor : theme.palette.warning.main

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/materialui",
-    "version": "1.0.34",
+    "version": "1.0.36",
     "description": "TypeScript Material-UI Implementation",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",

package/src/SwitchAnt.tsx

@@ -7,7 +7,7 @@ import React from 'react';
  */
 export interface SwitchAntProps extends SwitchProps {
     /**
-     *
+     * Active color
      */
     activeColor?: string;
 
@@ -46,6 +46,9 @@ export function SwitchAnt(props: SwitchAntProps) {
         checked ?? defaultChecked ?? defaultValue == value
     );
 
+    // Ref
+    const ref = React.useRef<HTMLButtonElement>(null);
+
     React.useEffect(() => {
         if (checked) setControlChecked(checked);
     }, [checked]);
@@ -63,7 +66,7 @@ export function SwitchAnt(props: SwitchAntProps) {
     return (
         <Stack direction="row" spacing={1} alignItems="center">
             <Typography
-                onClick={() => setControlChecked(false)}
+                onClick={() => controlChecked && ref.current?.click()}
                 sx={{
                     cursor: 'pointer',
                     color: controlChecked
@@ -75,12 +78,13 @@ export function SwitchAnt(props: SwitchAntProps) {
             </Typography>
             <Switch
                 checked={controlChecked}
+                inputRef={ref}
                 value={value}
                 onChange={onChangeLocal}
                 {...rest}
             />
             <Typography
-                onClick={() => setControlChecked(true)}
+                onClick={() => !controlChecked && ref.current?.click()}
                 sx={{
                     cursor: 'pointer',
                     color: controlChecked