fix(gradient): submit gradient through apply button instead of every …

…value
nurikk · Oct 24, 2023 · 97e2c6d · 97e2c6d
1 parent 8be8925
commit 97e2c6d
Showing 1 changed file with 14 additions and 5 deletions.
diff --git a/src/components/features/gradient/gradient.tsx b/src/components/features/gradient/gradient.tsx
@@ -4,6 +4,8 @@ import { BaseFeatureProps } from '../base';
 import ColorEditor from '../../color-editor/color-editor';
 import * as convertColors from 'color-convert';
 import Button from '../../button';
+import { WithTranslation, withTranslation } from 'react-i18next';
+import cx from 'classnames';
 
 const hexToRGB = (hex: string): RGBColor => {
     hex = hex.replace('#', '');
@@ -21,9 +23,11 @@ const rgbToHex = (rgb: RGBColor): string => {
 
 type GradientProps = BaseFeatureProps<GradientFeature>;
 //{ deviceState: { gradient: string[] }
-const Gradient: FunctionComponent<GradientProps> = (props) => {
+const Gradient: FunctionComponent<GradientProps & WithTranslation<'gradient'>> = (props) => {
     const gradientColors = 5;
     const {
+        t,
+        minimal,
         onChange,
         feature: { endpoint, length_min, length_max },
         deviceState,
@@ -34,21 +38,18 @@ const Gradient: FunctionComponent<GradientProps> = (props) => {
         const c = [...colors];
         c[idx] = hexToRGB(hex);
         setColors(c);
-        onChange(endpoint as Endpoint, { gradient: c.map(rgbToHex) });
     };
 
     const addColor = () => {
         const c = [...colors];
         c.push({ r: 255, g: 255, b: 255 });
         setColors(c);
-        onChange(endpoint as Endpoint, { gradient: c.map(rgbToHex) });
     };
 
     const removeColor = (idx: number) => {
         const c = [...colors];
         c.splice(idx, 1);
         setColors(c);
-        onChange(endpoint as Endpoint, { gradient: c.map(rgbToHex) });
     };
 
     useEffect(() => {
@@ -91,8 +92,16 @@ const Gradient: FunctionComponent<GradientProps> = (props) => {
                     +
                 </Button>
             )}
+
+            <div>
+                <Button
+                    className={cx('btn btn-primary float-end', { 'btn-sm': minimal })}
+                    onClick={() => onChange(endpoint as Endpoint, { gradient: colors.map(rgbToHex) })}>
+                    {t('common:apply')}
+                </Button>
+            </div>,
         </div>
     );
 };
 
-export default Gradient;
+export default withTranslation(['gradient', 'common'])(React.memo(Gradient));