feat: inlineForm component

src/components/InlineForm.tsx

@@ -0,0 +1,77 @@
+import React, { useCallback, useEffect, useMemo, useReducer, useRef } from 'react';
+import styled from 'styled-components';
+
+import { KeyCode, useKeyboard } from '../hooks/useKeyboard';
+import { useClickOutside } from '../hooks/useClickOutside';
+
+import { Form } from './Form';
+
+interface RenderTriggerProps {
+    onClick: () => void;
+}
+
+interface InlineFormProps {
+    renderTrigger?: (props: RenderTriggerProps) => React.ReactNode;
+    onSubmit: () => Promise<void>;
+    children: React.ReactNode;
+    onReset: () => void;
+    className?: string;
+}
+
+const StyledForm = styled(Form)`
+    background-color: transparent;
+`;
+
+const StyledWrapper = styled.div`
+    display: contents;
+}
+`;
+
+export const InlineForm: React.FC<InlineFormProps> = ({ renderTrigger, onSubmit, onReset, children, className }) => {
+    const wrapperRef = useRef<HTMLDivElement>(null);
+    const [visible, toggleVisible] = useReducer((state) => !state, !renderTrigger);
+    const trigger = useMemo(() => {
+        if (typeof renderTrigger === 'function') {
+            return renderTrigger({ onClick: toggleVisible });
+        }
+
+        return null;
+    }, [renderTrigger]);
+
+    const [onESC] = useKeyboard(
+        [KeyCode.Escape],
+        () => {
+            if (visible) {
+                toggleVisible();
+            }
+        },
+        {
+            capture: true,
+        },
+    );
+
+    useClickOutside(wrapperRef, () => {
+        if (visible) {
+            toggleVisible();
+        }
+    });
+
+    const handleSubmit = useCallback(async () => {
+        await onSubmit();
+        toggleVisible();
+        onReset();
+    }, [onSubmit, onReset]);
+
+    useEffect(() => {
+        if (!visible) {
+            onReset();
+        }
+    }, [visible, onReset]);
+
+    return (
+        <StyledWrapper ref={wrapperRef} className={className} {...onESC}>
+            {!visible && trigger}
+            {visible && <StyledForm onSubmit={handleSubmit}>{children}</StyledForm>}
+        </StyledWrapper>
+    );
+};

src/components/index.tsx

@@ -56,3 +56,4 @@ export * from './Spinner';
 export * from './Tabs';
 export * from './Checkbox';
 export * from './AutoComplete';
+export * from './InlineForm';

src/stories/Button.stories.ts

@@ -5,6 +5,7 @@ import { Button } from '../components/Button';
 const meta: Meta<typeof Button> = {
     title: 'Button',
     component: Button,
+    argTypes: { onClick: { action: 'clicked' } },
 };
 
 export default meta;

src/stories/InlineForm.stories.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { Meta, StoryFn } from '@storybook/react';
+import styled from 'styled-components';
+import { IconQuestionCircleOutline } from '@taskany/icons';
+import { gray7 } from '@taskany/colors';
+
+import { InlineForm } from '../components/InlineForm';
+import { Button } from '../components/Button';
+import { TableCell } from '../components/Table';
+import { Form } from '../components/Form';
+import { Popup } from '../components/Popup';
+import { FormInput } from '../components/FormInput';
+
+export default {
+    title: 'InlineForm',
+    component: InlineForm,
+    argTypes: { onSubmit: { action: 'form submitted' } },
+} as Meta<typeof InlineForm>;
+
+const StyledWrapper = styled.div`
+    display: contents;
+`;
+
+const StyledForm = styled(Form)`
+    background-color: transparent;
+`;
+
+const StyledTableCell = styled(TableCell)`
+    flex-wrap: nowrap;
+    display: flex;
+    align-items: center;
+`;
+
+const StyledFormInput = styled(FormInput)`
+    font-size: 14px;
+    font-weight: normal;
+    padding: 5px 10px;
+    flex: 1;
+
+    border: 1px solid ${gray7};
+    box-sizing: border-box;
+`;
+
+const StyledQuestionIcon = styled.div`
+    margin: 5px 0 0 4px;
+`;
+
+export const InlineFormComponent: StoryFn = () => {
+    return (
+        <StyledWrapper>
+            <StyledForm onSubmit={action('form submitted')}>
+                <StyledTableCell col={5} align="center">
+                    <StyledFormInput autoFocus brick="right" placeholder={'Enter criteria'} />
+                    <StyledFormInput autoComplete="off" placeholder={'No more than 100'} brick="center" />
+                    <Button
+                        text={'Add'}
+                        brick="left"
+                        type="submit"
+                        view="primary"
+                        outline
+                        onClick={() => console.log('clecked')}
+                    />
+                    <>
+                        <StyledQuestionIcon>
+                            <a
+                                onMouseOver={() => console.log('onMouseOver')}
+                                onMouseLeave={() => console.log('onMouseLeave')}
+                            >
+                                <IconQuestionCircleOutline size="s" />
+                            </a>
+                        </StyledQuestionIcon>
+                        <Popup tooltip placement="top-end">
+                            Hint
+                        </Popup>
+                    </>
+                </StyledTableCell>
+            </StyledForm>
+        </StyledWrapper>
+    );
+};