feat: className/hiddenMode add default value.

Author: jaywcjlove

core/README.md

@@ -125,16 +125,16 @@ export default function App() {
 }
 ```
 
-## props
+## \<Only /> props
 
 | prop name  | type | default | isRequired | description |
 | ----- | ----- | ----- | ----- | ----- |
 | children | react element | `null` | `true` | A single child element |
 | when | bool | `false` | `true` | When true, children will rendered as is |
 | hiddenMode | string | `null`   | `false` | Determines how children should be hidden |
-| className  | string | `r-o_hidden` | `false` | This is working in combination with `hiddenMode={"css"}` |
+| className  | string | `w-hidden` | `false` | This is working in combination with `hiddenMode={"css"}` |
 
-### hiddenMode enum
+**`hiddenMode` enum**
 
 | hiddenMode | description |
 | ----- | ----- |

core/src/index.tsx

@@ -21,7 +21,7 @@ export interface OnlyWhenProps {
 }
 
 export default function OnlyWhen(props: PropsWithChildren<OnlyWhenProps>) {
-  const { children, when, hiddenMode, className } = props;
+  const { children, when, hiddenMode = 'null', className = 'w-hidden' } = props;
   const singleChild = React.Children.only(children);
   const { style, ...restOfChildProps } = singleChild.props;
   const extendedProps = { ...restOfChildProps };

test/index.test.tsx

@@ -77,7 +77,7 @@ describe('<Only />', () => {
       expect(only.type).toEqual('span');
       expect(only.props.id).toEqual('child');
       expect(only.props.children).toBeUndefined();
-      expect(only.props.className).toEqual('test-className');
+      expect(only.props.className).toEqual('test-className w-hidden');
       expect(only.props.style).toEqual({ color: 'green' });
     }
   });
@@ -100,7 +100,7 @@ describe('<Only />', () => {
     }
   });
 
-  it('Joining className = undefined', () => {
+  it('Joining className default value', () => {
     const component = TestRenderer.create(
       <Only when={false} hiddenMode="css">
         <span id="child" style={{ color: 'green' }} />
@@ -112,7 +112,7 @@ describe('<Only />', () => {
       expect(only.type).toEqual('span');
       expect(only.props.id).toEqual('child');
       expect(only.props.children).toBeUndefined();
-      expect(only.props.className).toEqual('');
+      expect(only.props.className).toEqual('w-hidden');
       expect(only.props.style).toEqual({ color: 'green' });
     }
   });