Skip to content

Commit

Permalink
feat: react refs
Browse files Browse the repository at this point in the history
  • Loading branch information
nolimits4web committed Aug 27, 2021
1 parent b09331c commit e77a6e7
Show file tree
Hide file tree
Showing 40 changed files with 494 additions and 173 deletions.
4 changes: 0 additions & 4 deletions TODO.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,5 @@
- Messages (simplified version)
- Side Panels

- Common

- rename themeClasses helpers to `c` `i` and `m`

- React
- DTS
20 changes: 16 additions & 4 deletions src/react/components/App.jsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React from 'react';
import React, { forwardRef, useImperativeHandle, useRef } from 'react';
import { cls } from '../shared/cls.js';
import { TailwindMobileProvider } from '../shared/TailwindMobileProvider.jsx';

const App = (props) => {
const App = forwardRef((props, ref) => {
const {
component = 'div',
className,
Expand All @@ -17,6 +17,12 @@ const App = (props) => {
...rest
} = props;

const elRef = useRef(null);

useImperativeHandle(ref, () => ({
el: elRef.current,
}));

const Component = component;

const attrs = {
Expand All @@ -25,11 +31,17 @@ const App = (props) => {

return (
<TailwindMobileProvider theme={theme} dark={dark}>
<Component className={cls(`twm-${theme}`, className)} {...attrs}>
<Component
ref={elRef}
className={cls(`twm-${theme}`, className)}
{...attrs}
>
{children}
</Component>
</TailwindMobileProvider>
);
};
});

App.displayName = 'App';

export default App;
16 changes: 12 additions & 4 deletions src/react/components/Badge.jsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import React, { useRef, forwardRef, useImperativeHandle } from 'react';
import { useThemeClasses } from '../shared/use-theme-classes.js';

const Badge = (props) => {
const Badge = forwardRef((props, ref) => {
const {
component = 'span',
className,
Expand All @@ -18,6 +18,12 @@ const Badge = (props) => {
...rest
} = props;

const elRef = useRef(null);

useImperativeHandle(ref, () => ({
el: elRef.current,
}));

const Component = component;

const attrs = {
Expand Down Expand Up @@ -48,10 +54,12 @@ const Badge = (props) => {
);

return (
<Component className={c.base[size]} {...attrs}>
<Component ref={elRef} className={c.base[size]} {...attrs}>
{children}
</Component>
);
};
});

Badge.displayName = 'Badge';

export default Badge;
16 changes: 12 additions & 4 deletions src/react/components/Block.jsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React from 'react';
import React, { forwardRef, useRef, useImperativeHandle } from 'react';
import { cls } from '../shared/cls.js';
import { positionClass } from '../shared/position-class.js';
import { useDarkClasses } from '../shared/use-dark-classes.js';
import { useThemeClasses } from '../shared/use-theme-classes.js';

const Block = (props) => {
const Block = forwardRef((props, ref) => {
const {
component = 'div',
className,
Expand All @@ -27,6 +27,12 @@ const Block = (props) => {
...rest
} = props;

const elRef = useRef(null);

useImperativeHandle(ref, () => ({
el: elRef.current,
}));

const Component = component;

const attrs = {
Expand Down Expand Up @@ -75,10 +81,12 @@ const Block = (props) => {
);

return (
<Component className={classes} {...attrs}>
<Component ref={elRef} className={classes} {...attrs}>
{children}
</Component>
);
};
});

Block.displayName = 'Block';

export default Block;
16 changes: 12 additions & 4 deletions src/react/components/BlockFooter.jsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import React, { useRef, useImperativeHandle, forwardRef } from 'react';
import { useThemeClasses } from '../shared/use-theme-classes.js';

const BlockFooter = (props) => {
const BlockFooter = forwardRef((props, ref) => {
const {
component = 'div',
className,
Expand All @@ -16,6 +16,12 @@ const BlockFooter = (props) => {
...rest
} = props;

const elRef = useRef(null);

useImperativeHandle(ref, () => ({
el: elRef.current,
}));

const Component = component;

const attrs = {
Expand All @@ -32,10 +38,12 @@ const BlockFooter = (props) => {
);

return (
<Component className={c.base} {...attrs}>
<Component ref={elRef} className={c.base} {...attrs}>
{children}
</Component>
);
};
});

BlockFooter.displayName = 'BlockFooter';

export default BlockFooter;
16 changes: 12 additions & 4 deletions src/react/components/BlockHeader.jsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import React, { useRef, forwardRef, useImperativeHandle } from 'react';
import { useThemeClasses } from '../shared/use-theme-classes.js';

const BlockHeader = (props) => {
const BlockHeader = forwardRef((props, ref) => {
const {
component = 'div',
className,
Expand All @@ -16,6 +16,12 @@ const BlockHeader = (props) => {
...rest
} = props;

const elRef = useRef(null);

useImperativeHandle(ref, () => ({
el: elRef.current,
}));

const Component = component;

const attrs = {
Expand All @@ -32,10 +38,12 @@ const BlockHeader = (props) => {
);

return (
<Component className={c.base} {...attrs}>
<Component ref={elRef} className={c.base} {...attrs}>
{children}
</Component>
);
};
});

BlockHeader.displayName = 'BlockHeader';

export default BlockHeader;
16 changes: 12 additions & 4 deletions src/react/components/BlockTitle.jsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import React, { useRef, forwardRef, useImperativeHandle } from 'react';
import { useThemeClasses } from '../shared/use-theme-classes.js';

const BlockTitle = (props) => {
const BlockTitle = forwardRef((props, ref) => {
const {
component = 'div',
className,
Expand All @@ -17,6 +17,12 @@ const BlockTitle = (props) => {
...rest
} = props;

const elRef = useRef(null);

useImperativeHandle(ref, () => ({
el: elRef.current,
}));

const Component = component;

const attrs = {
Expand All @@ -39,10 +45,12 @@ const BlockTitle = (props) => {
);

return (
<Component className={c.base} {...attrs}>
<Component ref={elRef} className={c.base} {...attrs}>
{children}
</Component>
);
};
});

BlockTitle.displayName = 'BlockTitle';

export default BlockTitle;
16 changes: 11 additions & 5 deletions src/react/components/Button.jsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
import React, { useRef } from 'react';
import React, { useRef, forwardRef, useImperativeHandle } from 'react';
import { cls } from '../shared/cls.js';
import { useTheme } from '../shared/use-theme.js';
import { useTouchRipple } from '../shared/use-touch-ripple.js';
import { useThemeClasses } from '../shared/use-theme-classes.js';
import { positionClass } from '../shared/position-class.js';
import { useDarkClasses } from '../shared/use-dark-classes.js';

const Button = (props) => {
const rippleElRef = useRef(null);

const Button = forwardRef((props, ref) => {
const {
component = 'button',
className,
Expand Down Expand Up @@ -41,6 +39,12 @@ const Button = (props) => {
...rest
} = props;

const rippleElRef = useRef(null);

useImperativeHandle(ref, () => ({
el: rippleElRef.current,
}));

let Component = component;
if (typeof props.component === 'undefined' && (href || href === ''))
Component = 'a';
Expand Down Expand Up @@ -149,6 +153,8 @@ const Button = (props) => {
{children}
</Component>
);
};
});

Button.displayName = 'Button';

export default Button;
16 changes: 12 additions & 4 deletions src/react/components/Card.jsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React from 'react';
import React, { useRef, forwardRef, useImperativeHandle } from 'react';
import { cls } from '../shared/cls.js';
import { useDarkClasses } from '../shared/use-dark-classes.js';
import { useThemeClasses } from '../shared/use-theme-classes.js';

const Card = (props) => {
const Card = forwardRef((props, ref) => {
const {
component = 'div',
className,
Expand All @@ -25,6 +25,12 @@ const Card = (props) => {
...rest
} = props;

const elRef = useRef(null);

useImperativeHandle(ref, () => ({
el: elRef.current,
}));

const Component = component;

const attrs = {
Expand Down Expand Up @@ -69,12 +75,14 @@ const Card = (props) => {
);

return (
<Component className={c.base[style]} {...attrs}>
<Component ref={elRef} className={c.base[style]} {...attrs}>
{header && <div className={c.header}>{header}</div>}
<div className={c.content}>{children}</div>
{footer && <div className={c.footer}>{footer}</div>}
</Component>
);
};
});

Card.displayName = 'Card';

export default Card;
21 changes: 17 additions & 4 deletions src/react/components/Checkbox.jsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,17 @@
import React, { useEffect, useRef } from 'react';
import React, {
useEffect,
useRef,
forwardRef,
useImperativeHandle,
} from 'react';
import { cls } from '../shared/cls.js';
import { positionClass } from '../shared/position-class.js';
import { useDarkClasses } from '../shared/use-dark-classes.js';
import { useThemeClasses } from '../shared/use-theme-classes.js';

import CheckboxIcon from './icons/CheckboxIcon.jsx';

const Checkbox = (props) => {
const Checkbox = forwardRef((props, ref) => {
const {
component = 'label',
className,
Expand All @@ -32,6 +37,12 @@ const Checkbox = (props) => {
} = props;

const inputElRef = useRef(null);
const elRef = useRef(null);

useImperativeHandle(ref, () => ({
el: elRef.current,
inputEl: inputElRef.current,
}));

const Component = component;

Expand Down Expand Up @@ -101,7 +112,7 @@ const Checkbox = (props) => {
}, [indeterminate]);

return (
<Component className={c.base} {...attrs}>
<Component ref={elRef} className={c.base} {...attrs}>
<input
ref={inputElRef}
type="checkbox"
Expand All @@ -128,6 +139,8 @@ const Checkbox = (props) => {
{children}
</Component>
);
};
});

Checkbox.displayName = 'Checkbox';

export default Checkbox;
Loading

0 comments on commit e77a6e7

Please sign in to comment.