comment form

.eslintrc.js

@@ -53,7 +53,8 @@ module.exports = {
       "functions": "never"
     }],
     indent: "off",
-    "import/order": "off"
+    "import/order": "off",
+    "arrow-parens": ["warn", "as-needed"],
   },
   globals: {
     document: false,

src/components/containers/CommentWrapper/index.tsx

@@ -0,0 +1,36 @@
+import React, { FC, HTMLAttributes } from 'react';
+import classNames from 'classnames';
+
+import * as styles from './styles.scss';
+import { Card } from '../Card';
+
+type IProps = HTMLAttributes<HTMLDivElement> & {
+  photo?: string;
+  is_empty?: boolean;
+  is_loading?: boolean;
+};
+
+const CommentWrapper: FC<IProps> = ({
+  photo,
+  children,
+  is_empty,
+  is_loading,
+  className,
+  ...props
+}) => (
+  <Card
+    className={classNames(styles.wrap, className, { is_empty, is_loading })}
+    seamless
+    {...props}
+  >
+    <div className={styles.thumb}>
+      {photo && (
+        <div className={styles.thumb_image} style={{ backgroundImage: `url("${photo}")` }} />
+      )}
+    </div>
+
+    <div className={styles.text}>{children}</div>
+  </Card>
+);
+
+export { CommentWrapper };

src/components/containers/CommentWrapper/styles.scss

@@ -0,0 +1,26 @@
+.wrap {
+  background: $comment_bg;
+  min-height: 64px;
+  display: flex;
+  box-shadow: $comment_shadow;
+
+  &:global(.is_empty) {
+    opacity: 0.5;
+  }
+}
+
+.text {
+  flex: 1;
+}
+
+.thumb {
+  flex: 0 0 64px;
+  background: transparentize(black, 0.9);
+  border-radius: $panel_radius 0 0 $panel_radius;
+}
+
+.thumb_image {
+  height: 64px;
+  background: transparentize(white, 0.97);
+  border-radius: $panel_radius 0 0 $panel_radius;
+}

src/components/input/Button/index.tsx

@@ -1,5 +1,5 @@
 import classnames from 'classnames';
-import React, { ButtonHTMLAttributes, DetailedHTMLProps, FC } from 'react';
+import React, { ButtonHTMLAttributes, DetailedHTMLProps, FC, createElement } from 'react';
 import * as styles from './styles.scss';
 import { Icon } from '~/components/input/Icon';
 import { IIcon } from '~/redux/types';
@@ -35,26 +35,29 @@ export const Button: FC<IButtonProps> = ({
   is_loading,
   title,
   stretchy,
+  disabled,
   ...props
-}) => React.createElement(seamless || non_submitting ? 'div' : 'button', {
+}) =>
+  createElement(
+    seamless || non_submitting ? 'div' : 'button',
+    {
       className: classnames(styles.button, className, styles[size], {
         red,
         grey,
         seamless,
         transparent,
-    disabled: props.disabled,
+        disabled,
-    icon: (iconLeft || iconRight) && !title && !children,
         is_loading,
-    stretchy
+        stretchy,
+        icon: (iconLeft || iconRight) && !title && !children,
+        has_icon_left: !!iconLeft,
+        has_icon_right: !!iconRight,
       }),
-  children: [
+      ...props,
+    },
+    [
       iconLeft && <Icon icon={iconLeft} size={20} key={0} />,
-    title ? (
+      title ? <span key={1}>{title}</span> : (children && <span key={1}>{children}</span>) || null,
-      <span key={1}>{title}</span>
+      iconRight && <Icon icon={iconRight} size={20} key={2} />,
-    ) : (
+    ]
-      (children && <span key={1}>{children}</span>) || null
+  );
-    ),
-    iconRight && <Icon icon={iconRight} size={20} key={2} />
-  ],
-  ...props
-});

src/components/input/Button/styles.scss

@@ -85,8 +85,8 @@
   &:global(.disabled),
   &:global(.grey) {
     opacity: 0.3;
-    //background: black;
+    background: lighten(black, 2%);
-    filter: grayscale(100%);
+    // filter: grayscale(100%);
   }
 
   &:global(.icon) {
@@ -101,6 +101,16 @@
     }
   }
 
+  &:global(.has_icon_left) {
+    padding-left: $gap;
+    padding-right: $gap;
+  }
+
+  &:global(.has_icon_right) {
+    padding-left: $gap;
+    padding-right: $gap;
+  }
+
   > * {
     margin: 0 5px;
 
@@ -117,9 +127,11 @@
   height: 20px;
   font: $font_12_semibold;
   padding: 0 15px;
+  border-radius: $radius / 2;
 }
 .mini {
   height: 28px;
+  border-radius: $radius / 2;
 }
 .normal {
   height: 38px;
@@ -135,6 +147,7 @@
 .disabled {
   opacity: 0.5;
 }
+
 .icon_left {
   margin-right: 10px;
   width: 20px;

src/components/input/Textarea/index.tsx

@@ -0,0 +1,124 @@
+import React, {
+  ChangeEvent,
+  LegacyRef,
+  memo,
+  useCallback,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
+import { getStyle } from '~/utils/dom';
+import classNames from 'classnames';
+
+import * as styles from '~/styles/inputs.scss';
+import { Icon } from '../Icon';
+
+interface IProps {
+  value: string;
+  placeholder?: string;
+  rows?: number;
+  className?: string;
+  minRows?: number;
+  maxRows?: number;
+  handler: (value: string) => void;
+  required?: boolean;
+  status?: 'error' | 'success' | '';
+  title?: string;
+}
+
+const Textarea = memo<IProps>(
+  ({
+    value,
+    placeholder,
+    className,
+    minRows = 3,
+    maxRows = 30,
+    handler,
+    required = false,
+    title = '',
+    status = '',
+  }) => {
+    const [rows, setRows] = useState(minRows || 1);
+    const [focused, setFocused] = useState(false);
+
+    const textarea: LegacyRef<HTMLTextAreaElement> = useRef(null);
+
+    const onInput = useCallback(
+      ({ target }: ChangeEvent<HTMLTextAreaElement>) => handler(target.value),
+      [handler]
+    );
+
+    const onFocus = useCallback(() => setFocused(true), [setFocused]);
+    const onBlur = useCallback(() => setFocused(false), [setFocused]);
+
+    useLayoutEffect(() => {
+      const lineHeight = parseInt(getStyle(textarea.current, 'line-height'), 10) || 15;
+
+      textarea.current.rows = 1; // reset number of rows in textarea
+
+      const paddingTop = parseInt(getStyle(textarea.current, 'padding-top'), 10) || 0;
+      const paddingBottom = parseInt(getStyle(textarea.current, 'padding-bottom'), 10) || 0;
+
+      const actualScrollHeight =
+        (textarea.current.scrollHeight || 0) - (paddingTop + paddingBottom);
+
+      const rowsCount = Math.round(actualScrollHeight / lineHeight);
+
+      let currentRows = minRows;
+
+      if (rowsCount > maxRows) {
+        currentRows = maxRows;
+        textarea.current.scrollTop = textarea.current.scrollHeight;
+      } else if (rowsCount <= minRows) {
+        currentRows = minRows;
+      } else {
+        currentRows = rowsCount;
+      }
+
+      textarea.current.rows = currentRows;
+
+      setRows(currentRows);
+    }, [value, minRows, maxRows]);
+
+    return (
+      <div
+        className={classNames(styles.input_text_wrapper, {
+          [styles.required]: required,
+          [styles.focused]: focused,
+          [styles.has_status]: !!status,
+          [styles.has_value]: !!value,
+        })}
+      >
+        <div className={styles.input}>
+          <textarea
+            rows={rows}
+            value={value}
+            placeholder={placeholder}
+            className={classNames(styles.textarea, className)}
+            onChange={onInput}
+            ref={textarea}
+            onFocus={onFocus}
+            onBlur={onBlur}
+          />
+        </div>
+
+        <div className={styles.status}>
+          <div className={classNames({ active: status === 'success' })}>
+            <Icon icon="check" size={20} />
+          </div>
+          <div className={classNames({ active: status === 'error' })}>
+            <Icon icon="hide" size={20} />
+          </div>
+        </div>
+
+        {title && (
+          <div className={styles.title}>
+            <span>{title}</span>
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+export { Textarea };

src/components/node/Comment/index.tsx

@@ -1,31 +1,17 @@
 import React, { FC, HTMLAttributes } from 'react';
-import { Card } from '~/components/containers/Card';
+import { CommentWrapper } from '~/components/containers/CommentWrapper';
-import * as styles from './styles.scss';
-
-import classNames = require('classnames');
 
 type IProps = HTMLAttributes<HTMLDivElement> & {
   is_empty?: boolean;
   is_loading?: boolean;
-}
+  photo?: string;
+  comment?: any;
+};
 
-const Comment: FC<IProps> = ({
+const Comment: FC<IProps> = ({ comment, is_empty, is_loading, className, photo, ...props }) => (
-  is_empty,
+  <CommentWrapper is_empty={is_empty} is_loading={is_loading} photo={photo} {...props}>
-  is_loading,
+    <div>Something!</div>
-  className,
+  </CommentWrapper>
-  ...props
-}) => (
-  <Card
-    className={classNames(styles.wrap, className, { is_empty, is_loading })}
-    seamless
-    {...props}
-  >
-    <div className={styles.thumb}>
-      <div className={styles.thumb_image} />
-    </div>
-
-    <div className={styles.text} />
-  </Card>
 );
 
 export { Comment };

src/components/node/Comment/styles.scss

@@ -1,27 +0,0 @@
-.wrap {
-  background: $comment_bg;
-  min-height: 64px;
-  display: flex;
-  box-shadow: $comment_shadow;
-
-  &:global(.is_empty) {
-    opacity: 0.5;
-  }
-}
-
-.text {
-  padding: $gap;
-  flex: 1;
-}
-
-.thumb {
-  flex: 0 0 64px;
-  background: transparentize(black, 0.9);
-  border-radius: $panel_radius 0 0 $panel_radius;
-}
-
-.thumb_image {
-  height: 64px;
-  background: transparentize(white, 0.97);
-  border-radius: $panel_radius 0 0 $panel_radius;
-}

src/components/node/CommentForm/index.tsx

@@ -0,0 +1,49 @@
+import React, { FC, useCallback, useState, ChangeEvent, ChangeEventHandler } from 'react';
+import { Textarea } from '~/components/input/Textarea';
+import { CommentWrapper } from '~/components/containers/CommentWrapper';
+import * as styles from './styles.scss';
+import { Filler } from '~/components/containers/Filler';
+import { Button } from '~/components/input/Button';
+import assocPath from 'ramda/es/assocPath';
+import { InputHandler, INode } from '~/redux/types';
+
+interface IProps {
+  id: INode['id'];
+}
+
+const CommentForm: FC<IProps> = ({ id }) => {
+  const [data, setData] = useState({ text: '' });
+
+  const onInput = useCallback<InputHandler>(
+    text => {
+      setData(assocPath(['text'], text, data));
+    },
+    [setData, data]
+  );
+
+  const onSubmit = useCallback(
+    event => {
+      event.preventDefault();
+      console.log({ data });
+    },
+    [data]
+  );
+
+  return (
+    <CommentWrapper>
+      <form onSubmit={onSubmit}>
+        <div className={styles.input}>
+          <Textarea value={data.text} handler={onInput} />
+        </div>
+        <div className={styles.buttons}>
+          <Filler />
+          <Button size="mini" grey iconRight="enter">
+            Сказать
+          </Button>
+        </div>
+      </form>
+    </CommentWrapper>
+  );
+};
+
+export { CommentForm };

src/components/node/CommentForm/styles.scss

@@ -0,0 +1,19 @@
+.wrap {
+  display: flex;
+  flex-direction: column;
+}
+
+.input {
+  flex: 1;
+  padding: $gap / 2;
+}
+
+.buttons {
+  display: flex;
+  flex-direction: row;
+  background: transparentize(black, 0.8);
+  padding: $gap / 2;
+  border-radius: 0 0 $radius $radius;
+
+  @include outer_shadow();
+}

src/components/node/NodeComments/index.tsx

@@ -2,17 +2,19 @@ import React, { FC } from 'react';
 import range from 'ramda/es/range';
 import { Comment } from '../Comment';
 import { INode } from '~/redux/types';
+import { CommentForm } from '../CommentForm';
+import { Group } from '~/components/containers/Group';
 
 interface IProps {
   comments?: any;
 }
 
 const NodeComments: FC<IProps> = ({ comments }) => (
-  <div>
+  <Group>
     {range(1, 6).map(el => (
       <Comment key={el} />
     ))}
-  </div>
+  </Group>
 );
 
 export { NodeComments };

src/containers/node/NodeLayout/index.tsx

@@ -15,6 +15,7 @@ import { NodeComments } from '~/components/node/NodeComments';
 import { NodeTags } from '~/components/node/NodeTags';
 import { NODE_COMPONENTS } from '~/redux/node/constants';
 import * as NODE_ACTIONS from '~/redux/node/actions';
+import { CommentForm } from '~/components/node/CommentForm';
 
 const mapStateToProps = selectNode;
 const mapDispatchToProps = {
@@ -52,6 +53,8 @@ const NodeLayoutUnconnected: FC<IProps> = ({
         <Padder>
           <Group horizontal className={styles.content}>
             <Group className={styles.comments}>
+              <CommentForm id={node.id || null} />
+
               {is_loading_comments || !comments.length || true ? (
                 <NodeNoComments is_loading={is_loading_comments} />
               ) : (

src/redux/types.ts

@@ -1,6 +1,7 @@
 import { DetailedHTMLProps, InputHTMLAttributes } from 'react';
 import { DIALOGS } from '~/redux/modal/constants';
 import { ERRORS } from '~/constants/errors';
+import { IUser } from './auth/types';
 
 export interface ITag {
   title: string;
@@ -115,8 +116,15 @@ export interface INode {
 
 export interface IComment {
   text: string;
+  attaches: IFile[];
+  is_private: boolean;
+  owner: IUser;
+
+  created_at: string;
+  update_at: string;
 }
 
 export type IUploadProgressHandler = (progress: ProgressEvent) => void;
 export type IError = ValueOf<typeof ERRORS>;
 export type IValidationErrors = Record<string, IError>;
+export type InputHandler<T = string> = (val: T) => void;

src/sprites/Sprites.tsx

@@ -69,6 +69,16 @@ const Sprites: FC<{}> = () => (
       <path fill="none" d="M0 0h24v24H0V0z" />
       <path d="M 434.86328 468.69141 A 12 12 0 0 0 426.20117 472.20508 L 434.6875 480.68945 L 443.17188 472.20508 A 12 12 0 0 0 434.86328 468.69141 z M 434.6875 480.68945 L 426.20117 489.17578 A 12 12 0 0 0 434.6875 492.68945 A 12 12 0 0 0 443.17188 489.17578 L 434.6875 480.68945 z " />
     </g>
+
+    <g id="send" stroke="none">
+      <path fill="none" d="M0 0h24v24H0V0z" />
+      <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
+    </g>
+
+    <g id="enter" stroke="none">
+      <path fill="none" d="M0 0h24v24H0V0z" />
+      <path d="M11 9l1.42 1.42L8.83 14H18V4h2v12H8.83l3.59 3.58L11 21l-6-6 6-6z" />
+    </g>
   </svg>
 );
 

src/styles/inputs.scss

@@ -88,7 +88,9 @@
   }
 
   &.has_loader {
-    &::before { transform: translateX(-40px); }
+    &::before {
+      transform: translateX(-40px);
+    }
 
     .loader {
       flex-basis: 40px;
@@ -96,8 +98,12 @@
   }
 
   &.has_status {
-    &::before { transform: translateX(-40px); }
+    &::before {
-    &.focused::before { transform: translateX(0); }
+      transform: translateX(-40px);
+    }
+    &.focused::before {
+      transform: translateX(0);
+    }
 
     .status {
       flex-basis: 40px;
@@ -116,8 +122,12 @@
   }
 
   &.focused.has_status.has_loader {
-    &::before { transform: translateX(-80px); }
+    &::before {
-    &.focused::before { transform: translateX(-40px); }
+      transform: translateX(-80px);
+    }
+    &.focused::before {
+      transform: translateX(-40px);
+    }
   }
 
   &.has_error {
@@ -127,7 +137,8 @@
       color: transparentize(red, 0.4) !important;
     }
 
-    input, textarea {
+    input,
+    textarea {
       color: $red;
     }
   }
@@ -181,7 +192,8 @@
     }
   }
 
-  .input_text, .textarea {
+  .input_text,
+  .textarea {
     outline: none;
     border: none;
     font: inherit;
@@ -198,7 +210,8 @@
     width: 100%;
   }
 
-  .status, .loader {
+  .status,
+  .loader {
     flex: 0 0 0;
     transition: flex-basis 500ms;
     position: relative;
@@ -253,7 +266,8 @@
     }
   }
 
-  &.focused .title, &.has_value .title {
+  &.focused .title,
+  &.has_value .title {
     // font: $font_10_semibold;
     font-size: 10px;
     top: -6px;
@@ -324,7 +338,8 @@
 }
 
 .options {
-  .option, .option_title {
+  .option,
+  .option_title {
     height: $input_height;
     display: flex;
     align-items: center;