feat(space): codestyle

core-ds · Dec 14, 2020 · fc6d760 · fc6d760
1 parent b85b459
commit fc6d760
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 34 deletions.
diff --git a/packages/space/package.json b/packages/space/package.json
@@ -15,10 +15,6 @@
         "react": "^16.9.0"
     },
     "dependencies": {
-        "@alfalab/core-components-input": "^3.2.0",
-        "@alfalab/core-components-card-image": "^1.1.0",
-        "@alfalab/core-components-button": "^1.8.0",
-        "@alfalab/core-components-divider": "^1.3.4",
         "classnames": "^2.2.6"
     }
 }
diff --git a/packages/space/src/Component.stories.mdx b/packages/space/src/Component.stories.mdx
@@ -16,7 +16,6 @@ export const SIZES = ['s', 'm', 'l', 13, 37];
 <Meta
     title='Компоненты'
     component={Space}
-    parameters={{ 'theme-switcher': { themes: ['click'] } }}
 />
 
 <!-- Canvas -->
@@ -45,7 +44,6 @@ export const SIZES = ['s', 'm', 'l', 13, 37];
     version={version}
     package='@alfalab/core-components-space'
     stage={1}
-    design='https://www.figma.com/file/KlFOLLkKO8rtvvQE3RXuhq/Click-Library?node-id=532%3A544'
 />
 
 ```tsx
@@ -78,6 +76,18 @@ import { Space } from '@alfalab/core-components-space';
     </Space>
 </Preview>
 
+Пользовательское расстояние между карточками в виде массива [64, 32].
+
+<Preview>
+    <div style={{ width: '700px' }}>
+        <Space direction="horizontal" size={[64, 32]} wrap>
+            <CardImage cardId='EG' />
+            <CardImage cardId='GQ' />
+            <CardImage cardId='SU' />
+        </Space>
+    </div>
+</Preview>
+
 С адаптивом.
 
 <Preview>

diff --git a/packages/space/src/Component.tsx b/packages/space/src/Component.tsx
@@ -2,7 +2,7 @@ import React, { ReactNode, Children, forwardRef } from 'react';
 import classNames from 'classnames';
 import Item from './Item';
 import styles from './index.module.css';
-import { Direction, Align, Size, SpaceContext } from './utils';
+import { Direction, Align, Size } from './utils';
 
 export type SpaceProps = {
     /**
@@ -91,30 +91,32 @@ export const Space = forwardRef<HTMLDivElement, SpaceProps>((props, ref) => {
         return null;
     }
 
-    const directionCls = styles[direction];
+    const directionClassName = styles[direction];
+    const alignClassName = styles[align];
 
-    const alignCls = styles[`align_${align}`];
-
-    const containerCls = classNames(
+    const containerClassName = classNames(
         styles.spaceContainer,
-        directionCls,
+        directionClassName,
         {
-            [alignCls]: align,
+            [alignClassName]: align,
             [styles.spaceContainerFullWidth]: fullWidth,
         },
         className,
     );
 
-    const itemCls = classNames(styles.spaceItem, {
+    const itemClassName = classNames(styles.spaceItem, {
         [styles.spaceItemFullWidth]: fullWidth,
     });
 
     const nodes = childNodes.map((child, i) => (
         /* eslint-disable react/no-array-index-key */
         <Item
-            className={itemCls}
-            key={`${itemCls}-${i}`}
+            className={itemClassName}
+            key={`${itemClassName}-${i}`}
             direction={direction}
+            horizontalSize={horizontalSize}
+            verticalSize={verticalSize}
+            length={childNodes.length}
             index={i}
             wrap={wrap}
             split={split}
@@ -124,24 +126,20 @@ export const Space = forwardRef<HTMLDivElement, SpaceProps>((props, ref) => {
         /* eslint-enable */
     ));
 
-    const componentCls = classNames({
+    const componentClassName = classNames({
         [styles.spaceFullWidth]: fullWidth,
     });
 
     return (
-        <div className={componentCls}>
+        <div className={componentClassName}>
             <div
-                className={containerCls}
+                className={containerClassName}
                 style={{
                     ...(wrap && { flexWrap: 'wrap', marginBottom: -verticalSize }),
                 }}
                 ref={ref}
             >
-                <SpaceContext.Provider
-                    value={{ horizontalSize, verticalSize, length: childNodes.length }}
-                >
-                    {nodes}
-                </SpaceContext.Provider>
+                {nodes}
             </div>
         </div>
     );

diff --git a/packages/space/src/Item.tsx b/packages/space/src/Item.tsx
@@ -1,8 +1,11 @@
 import * as React from 'react';
-import { Direction, SpaceContext } from './utils';
+import { Direction } from './utils';
 
 export interface ItemProps {
     className: string;
+    horizontalSize: number;
+    verticalSize: number;
+    length: number;
     children: React.ReactNode;
     index: number;
     direction?: Direction;
@@ -11,8 +14,17 @@ export interface ItemProps {
 }
 
 const Item = (props: ItemProps) => {
-    const { className, direction, index, children, split, wrap } = props;
-    const { horizontalSize, verticalSize, length } = React.useContext(SpaceContext);
+    const {
+        className,
+        horizontalSize,
+        verticalSize,
+        length,
+        direction,
+        index,
+        children,
+        split,
+        wrap,
+    } = props;
 
     let style: React.CSSProperties = {};
 

diff --git a/packages/space/src/__snapshots__/Component.test.tsx.snap b/packages/space/src/__snapshots__/Component.test.tsx.snap
@@ -9,7 +9,7 @@ Object {
         class=""
       >
         <div
-          class="spaceContainer vertical align_start"
+          class="spaceContainer vertical start"
         >
           <div
             class="spaceItem"
@@ -38,7 +38,7 @@ Object {
       class=""
     >
       <div
-        class="spaceContainer vertical align_start"
+        class="spaceContainer vertical start"
       >
         <div
           class="spaceItem"
@@ -124,7 +124,7 @@ Object {
         class=""
       >
         <div
-          class="spaceContainer vertical align_start"
+          class="spaceContainer vertical start"
         >
           <div
             class="spaceItem"
@@ -145,7 +145,7 @@ Object {
       class=""
     >
       <div
-        class="spaceContainer vertical align_start"
+        class="spaceContainer vertical start"
       >
         <div
           class="spaceItem"

diff --git a/packages/space/src/index.module.css b/packages/space/src/index.module.css
@@ -12,15 +12,15 @@
     flex-direction: column;
 }
 
-.align_center {
+.center {
     align-items: center;
 }
 
-.align_start {
+.start {
     align-items: flex-start;
 }
 
-.align_end {
+.end {
     align-items: flex-end;
 }