feat(icon-view): updates

core-ds · Dec 22, 2021 · 7b17f5f · 7b17f5f
1 parent f0ab46f
commit 7b17f5f
Show file tree

Hide file tree

Showing 8 changed files with 187 additions and 439 deletions.
diff --git a/packages/icon-view/src/components/circle/component.tsx b/packages/icon-view/src/components/circle/component.tsx
@@ -1,7 +1,7 @@
-import React, { FC, useMemo } from 'react';
+import React, { FC } from 'react';
 import cn from 'classnames';
 
-import { getClipPath, getBorderPath } from './paths';
+import { getPath } from './paths';
 import { ShapeProps } from '../../types';
 
 import styles from './index.module.css';
@@ -16,58 +16,49 @@ export const Circle: FC<ShapeProps> = ({
     topAddons,
     bottomAddons,
 }) => {
+    const imagePatternId = imageUrl && `${imageUrl.replace(/[^a-z]+/g, '')}_${size}`;
     const hasTopAddons = Boolean(topAddons);
     const hasBottomAddons = Boolean(bottomAddons);
-    const hasMask = hasTopAddons || hasBottomAddons;
 
-    const maskId = useMemo(
-        () =>
-            cn('core-components-mask', 'circle', size, {
-                'top-addons': hasTopAddons,
-                'bottom-addons': hasBottomAddons,
-            })
-                .split(' ')
-                .join('_'),
-        [size, hasTopAddons, hasBottomAddons],
-    );
-
-    const mask = hasMask && (
+    const imagePattern = imagePatternId && (
         <defs>
-            <clipPath id={maskId}>
-                <path fill='white' d={getClipPath(size, hasTopAddons, hasBottomAddons)} />
-            </clipPath>
+            <pattern id={imagePatternId} width='100%' height='100%'>
+                <image
+                    href={imageUrl}
+                    width='100%'
+                    height='100%'
+                    preserveAspectRatio='xMidYMid slice'
+                />
+            </pattern>
         </defs>
     );
 
     return (
         <div className={cn(styles.componentWrapper, styles[`size_${size}`], className)}>
-            <div
-                className={cn(styles.component, { [styles.withCssBorder]: border && !hasMask })}
-                style={{ clipPath: hasMask ? `url(#${maskId})` : '', backgroundColor }}
-            >
-                {imageUrl ? (
-                    <div className={styles.img} style={{ backgroundImage: `url(${imageUrl})` }} />
-                ) : (
-                    <div className={styles.children}>{children}</div>
-                )}
-
+            <div className={styles.component}>
                 <svg
                     width={size}
                     height={size}
                     viewBox={`0 0 ${size} ${size}`}
                     xmlns='http://www.w3.org/2000/svg'
                     className={styles.svg}
                 >
-                    {mask}
+                    {imagePattern}
+
+                    <path
+                        fill={imagePatternId ? `url(#${imagePatternId})` : backgroundColor}
+                        d={getPath('shape', size, hasTopAddons, hasBottomAddons)}
+                    />
 
                     {border && (
                         <path
-                            d={getBorderPath(size, hasTopAddons, hasBottomAddons)}
                             className={styles.border}
-                            fill='transparent'
+                            d={getPath('border', size, hasTopAddons, hasBottomAddons)}
                         />
                     )}
                 </svg>
+
+                {!imageUrl && <div className={styles.children}>{children}</div>}
             </div>
 
             {hasTopAddons && <div className={cn(styles.addons, styles.topAddons)}>{topAddons}</div>}

diff --git a/packages/icon-view/src/components/circle/index.module.css b/packages/icon-view/src/components/circle/index.module.css
@@ -7,27 +7,14 @@
 
 .component {
     display: flex;
-    align-items: center;
-    justify-content: center;
     position: relative;
-    overflow: hidden;
-    border-radius: var(--border-radius-circle);
     color: var(--color-light-text-secondary-transparent);
 }
 
-.withCssBorder:after {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    border-radius: var(--border-radius-circle);
-    border: 1px solid var(--color-light-specialbg-component);
-}
-
 .border {
     stroke: var(--color-light-specialbg-component);
+    stroke-width: 1px;
+    fill: transparent;
 }
 
 .svg {

diff --git a/packages/icon-view/src/components/circle/paths.ts b/packages/icon-view/src/components/circle/paths.ts
diff --git a/packages/icon-view/src/components/super-ellipse/component.tsx b/packages/icon-view/src/components/super-ellipse/component.tsx
@@ -1,7 +1,7 @@
-import React, { FC, useMemo } from 'react';
+import React, { FC } from 'react';
 import cn from 'classnames';
 
-import { getClipPath, shapes, getBorderPath } from './paths';
+import { getPath } from './paths';
 import { ShapeProps } from '../../types';
 
 import styles from './index.module.css';
@@ -16,24 +16,10 @@ export const SuperEllipse: FC<ShapeProps> = ({
     topAddons,
     bottomAddons,
 }) => {
-    const shapePath = shapes[size];
-
     const imagePatternId = imageUrl && `${imageUrl.replace(/[^a-z]+/g, '')}_${size}`;
 
     const hasTopAddons = Boolean(topAddons);
     const hasBottomAddons = Boolean(bottomAddons);
-    const hasMask = hasTopAddons || hasBottomAddons;
-
-    const maskId = useMemo(
-        () =>
-            cn('core-components-mask', 'super-ellipse', size, {
-                'top-addons': hasTopAddons,
-                'bottom-addons': hasBottomAddons,
-            })
-                .split(' ')
-                .join('_'),
-        [size, hasTopAddons, hasBottomAddons],
-    );
 
     const imagePattern = imagePatternId && (
         <defs>
@@ -48,20 +34,9 @@ export const SuperEllipse: FC<ShapeProps> = ({
         </defs>
     );
 
-    const mask = hasMask && (
-        <defs>
-            <clipPath id={maskId}>
-                <path d={getClipPath(size, hasTopAddons, hasBottomAddons)} />
-            </clipPath>
-        </defs>
-    );
-
     return (
         <div className={cn(styles.componentWrapper, styles[`size_${size}`], className)}>
-            <div
-                className={styles.component}
-                style={{ clipPath: hasMask ? `url(#${maskId})` : '' }}
-            >
+            <div className={styles.component}>
                 <svg
                     width={size}
                     height={size}
@@ -70,18 +45,15 @@ export const SuperEllipse: FC<ShapeProps> = ({
                 >
                     {imagePattern}
 
-                    {mask}
-
                     <path
-                        d={shapePath}
                         fill={imagePatternId ? `url(#${imagePatternId})` : backgroundColor}
+                        d={getPath('shape', size, hasTopAddons, hasBottomAddons)}
                     />
 
                     {border && (
                         <path
-                            d={getBorderPath(size, hasTopAddons, hasBottomAddons)}
                             className={styles.border}
-                            fill='transparent'
+                            d={getPath('border', size, hasTopAddons, hasBottomAddons)}
                         />
                     )}
                 </svg>

diff --git a/packages/icon-view/src/components/super-ellipse/index.module.css b/packages/icon-view/src/components/super-ellipse/index.module.css
@@ -11,6 +11,8 @@
 
 .border {
     stroke: var(--color-light-specialbg-component);
+    stroke-width: 1px;
+    fill: transparent;
 }
 
 .children {