check in

src/components/GradientPicker/GradientRow.tsx

@@ -1,23 +1,33 @@
 import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons';
 import { Form, Select } from 'antd';
-import React, { useState } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 import { Row } from '../layout';
 import { ColorPicker, ChromePickerColor } from './ColorPicker';
 import { SliderInput } from '~/components/CodeBlocks/subcomponents';
-import { ColorStopType } from '~/components/store';
-
-export const GradientRow = () => {
-  const [gradientType, setGradientType] = useState<string>('linear');
-  const [isVisible, setIsVisible] = useState<boolean>(true);
-  const [colors, setColors] = useState<ColorStopType[]>([
-    { color: { r: 0, g: 255, b: 255, a: 1 }, offset: 0 },
-    { color: { r: 0, g: 0, b: 0, a: 0 }, offset: 1.0 },
-  ]);
-  const [angle, setAngle] = useState<number>(0);
-  const [posX, setPosX] = useState<number>(50);
-  const [posY, setPosY] = useState<number>(50);
+import { AnyGradientType } from '~/components/store';
 
+interface IGradientRow {
+  gradient: AnyGradientType;
+  selfIndex: number;
+  updateSelf: (index: number, newData: AnyGradientType) => void;
+}
+export const GradientRow: React.FC<IGradientRow> = ({ gradient, selfIndex, updateSelf }) => {
+  const { type: gradientType, isVisible, stops } = gradient;
+  // const [gradientType, setGradientType] = useState<string>('linear');
+  // const [isVisible, setIsVisible] = useState<boolean>(true);
+  // const [colors, setColors] = useState<ColorStopType[]>([
+  //   { color: { r: 0, g: 255, b: 255, a: 1 }, offset: 0 },
+  //   { color: { r: 0, g: 0, b: 0, a: 0 }, offset: 1.0 },
+  // ]);
+  // const [angle, setAngle] = useState<number>(0);
+  // const [posX, setPosX] = useState<number>(50);
+  // const [posY, setPosY] = useState<number>(50);
+  const updateProp = (key: string, value: any) => {
+    const newGradient = gradient;
+    newGradient[key] = value;
+    updateSelf(selfIndex, newGradient);
+  };
   return (
     <Form>
       <Row>
@@ -37,22 +47,22 @@ export const GradientRow = () => {
         </Form.Item>
         <ColorPicker
           label="Color 1"
-          color={colors[0].color}
+          color={stops[0].color}
           style={{ padding: 0 }}
           onChange={(c: ChromePickerColor) =>
-            setColors((colors) => [{ color: c.rgb, offset: 1 }, colors[1]])
+            setColors((colors) => [{ color: c.rgb, offset: 1 }, stops[1]])
           }
         />
         <ColorPicker
           label="Color 2"
-          color={colors[colors.length - 1].color}
+          color={stops[stops.length - 1].color}
           onChange={(c: ChromePickerColor) =>
-            setColors((colors) => [colors[0], { color: c.rgb, offset: 1 }])
+            setColors((colors) => [stops[0], { color: c.rgb, offset: 1 }])
           }
         />
       </Row>
 
-      {['linear', 'conic'].includes(gradientType) && (
+      {['linear', 'conic'].includes(gradientType) && 'angle' in gradient && (
         <SliderInput
           label="angle"
           name="angle"
@@ -60,10 +70,10 @@ export const GradientRow = () => {
           max={360}
           tipFormatter={(v) => `${v}°`}
           onChange={(val: number) => setAngle(val)}
-          value={typeof angle === 'number' ? angle : 0}
+          value={typeof gradient.angle === 'number' ? gradient.angle : 0}
         />
       )}
-      {['radial', 'conic'].includes(gradientType) && (
+      {['radial', 'conic'].includes(gradientType) && 'posX' in gradient && (
         <>
           <SliderInput
             label="position X"
@@ -71,7 +81,7 @@ export const GradientRow = () => {
             min={-50}
             max={150}
             onChange={(val: number) => setPosX(val)}
-            value={typeof posX === 'number' ? posX : 0}
+            value={typeof gradient.posX === 'number' ? gradient.posX : 0}
           />
           <SliderInput
             label="position Y"
@@ -79,7 +89,7 @@ export const GradientRow = () => {
             min={-50}
             max={150}
             onChange={(val: number) => setPosY(val)}
-            value={typeof posY === 'number' ? posY : 0}
+            value={typeof gradient.posY === 'number' ? gradient.posY : 0}
           />
         </>
       )}

src/components/GradientPicker/index.tsx

@@ -1,9 +1,44 @@
+import { PlusOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
+import { useState } from 'react';
+import { AnyGradientType } from '../store';
 import { GradientRow } from './GradientRow';
 
-export const GradientPicker = () => {
+export const GradientPicker: React.FC = () => {
+  const initialGradients = [
+    {
+      type: 'linear',
+      isVisible: true,
+      angle: 0,
+      stops: [
+        {
+          color: { r: 0, g: 0, b: 255, a: 1 },
+          offset: 0,
+        },
+        {
+          color: { r: 0, g: 0, b: 0, a: 0 },
+          offset: 1,
+        },
+      ],
+    },
+  ];
+  const [gradients, setGradients] = useState<AnyGradientType[]>(initialGradients);
+  const updateStateOfSelf = (index: number, newData: AnyGradientType) => {
+    setGradients((grads) => grads.splice(index, 1, newData));
+  };
+  const gradientInterface = gradients.map((grad, i) => (
+    <GradientRow
+      key={`${i}` + grad.type + `${grad.stops[0].color.r}`}
+      gradient={grad}
+      updateSelf={updateStateOfSelf}
+      selfIndex={i}
+    />
+  ));
+
   return (
     <div>
-      <GradientRow />
+      {gradientInterface}
+      <Button icon={<PlusOutlined />}>Add gradient</Button>
     </div>
   );
 };

src/components/store.tsx

@@ -23,6 +23,7 @@ type BaseGradientType = {
   type: string;
   stops: ColorStopType[];
   isVisible: boolean;
+  isRepeating?: boolean;
 };
 
 export type LinearGradientType = BaseGradientType & {