added new color picker

irontec · Jun 27, 2024 · 5c419fd · 5c419fd
1 parent 19e35b7
commit 5c419fd
Show file tree

Hide file tree

Showing 7 changed files with 160 additions and 40 deletions.
diff --git a/library/package.json b/library/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@irontec/ivoz-ui",
-  "version": "1.3.17",
+  "version": "1.3.18",
   "description": "UI library used in ivozprovider",
   "license": "GPL-3.0",
   "main": "index.js",
@@ -37,15 +37,16 @@
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@mui/icons-material": "^5.11.16",
-    "@mui/x-date-pickers": "^6.2.0",
     "@mui/material": "^5.12.1",
+    "@mui/x-date-pickers": "^6.2.0",
     "easy-peasy": "^5.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.10.0"
   },
   "dependencies": {
     "@date-io/date-fns": "^2.10.8",
+    "@types/react-color": "^3.0.12",
     "axios": "^0.21.1",
     "date-fns": "^2.21.1",
     "eslint": "^7.11.0",
@@ -57,6 +58,7 @@
     "i18next-sprintf-postprocessor": "^0.2.2",
     "query-string": "^7.0.0",
     "react-audio-player": "^0.17.0",
+    "react-color": "^2.19.3",
     "react-i18next": "^13.0.0",
     "sync-request": "^6.1.0",
     "typescript": "^4.6.2"
@@ -65,8 +67,8 @@
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@mui/icons-material": "^5.11.16",
-    "@mui/x-date-pickers": "^6.2.0",
     "@mui/material": "^5.12.1",
+    "@mui/x-date-pickers": "^6.2.0",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",

diff --git a/library/src/components/shared/Button/Button.styles.tsx b/library/src/components/shared/Button/Button.styles.tsx
@@ -46,6 +46,27 @@ const StyledButton = React.forwardRef(
     );
   }
 );
+
+export const StyledColorPickerButton = React.forwardRef(
+  (props: ButtonProps, ref: React.ForwardedRef<HTMLButtonElement>) => {
+    const { children, style, ...rest } = props;
+
+    return (
+      <Button
+        {...rest}
+        ref={ref}
+        style={{
+          width: '100px',
+          height: 40,
+          backgroundColor: style?.color as string,
+        }}
+      >
+        {children}
+      </Button>
+    );
+  }
+);
+StyledColorPickerButton.displayName = 'StyledColorPickerButton';
 StyledButton.displayName = 'StyledButton';
 type ForwardRefButtonType = typeof StyledButton;
 

diff --git a/library/src/services/api/ParsedApiSpecInterface.ts b/library/src/services/api/ParsedApiSpecInterface.ts
@@ -79,6 +79,7 @@ export interface ScalarProperty {
   visualToggle?: visualToggleValue;
   label: string | React.ReactElement<any>;
   prefix?: string | React.ReactElement<any>;
+  presets?: Array<string>;
   suffix?: string | React.ReactElement<any>;
   component?: PropertyCustomFunctionComponent<any> | React.ComponentClass<any>;
   memoize?: boolean;

diff --git a/library/src/services/form/Field/TextField/TextField.styles.tsx b/library/src/services/form/Field/TextField/TextField.styles.tsx
@@ -93,9 +93,12 @@ export const StyledTextField = styled(TextField)(() => {
 
 export const StyledColorField = styled(StyledTextField)(() => {
   return {
-    '& input[type=color]': {
+    '& .MuiOutlinedInput-root ': {
+      width: 100,
+      marginLeft: 8,
+    },
+    '& input': {
       padding: '0 2px',
-      minHeight: '40px',
       borderRadius: '18px',
       overflow: 'hidden',
     },

diff --git a/library/src/services/form/FormFieldFactory/Factory/ColorFactory.tsx b/library/src/services/form/FormFieldFactory/Factory/ColorFactory.tsx
@@ -1,13 +1,17 @@
-import {
-  InputAdornment,
-  InputBaseComponentProps,
-  OutlinedInputProps,
-} from '@mui/material';
+import { InputBaseComponentProps, OutlinedInputProps } from '@mui/material';
 import { FormOnChangeEvent } from '../../../../entities/DefaultEntityBehavior/Form/Form';
 import { ScalarProperty } from '../../../api';
 import { ScalarEntityValue } from '../../../entity';
 import { StyledColorField } from '../../Field/TextField/TextField.styles';
-
+import { SketchPicker } from 'react-color';
+import { useState } from 'react';
+import { StyledColorPickerButton } from '../../../../components/shared/Button/Button.styles';
+import {
+  StyledColorFactoryContainer,
+  StyledSketchPickerContainer,
+} from '../FormFieldFactory.styles';
+import ColorLensRoundedIcon from '@mui/icons-material/ColorLensRounded';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 type ColorFactoryPropsType = {
   fld: string;
   property: ScalarProperty;
@@ -26,7 +30,6 @@ export const ColorFactory = (props: ColorFactoryPropsType): JSX.Element => {
   const {
     fld,
     property,
-    disabled,
     value,
     hasChanged,
     error,
@@ -37,30 +40,51 @@ export const ColorFactory = (props: ColorFactoryPropsType): JSX.Element => {
     handleBlur,
   } = props;
 
-  if (!InputProps.endAdornment) {
-    InputProps.endAdornment = (
-      <InputAdornment position='end'>
-        <span>{value}</span>
-      </InputAdornment>
-    );
-  }
-
+  const [display, setDisplay] = useState<'hidden' | 'initial'>('hidden');
   return (
-    <StyledColorField
-      name={fld}
-      type={'color'}
-      value={value}
-      disabled={disabled}
-      label={property.label}
-      required={property.required}
-      onChange={changeHandler}
-      onBlur={handleBlur}
-      error={touched && Boolean(error)}
-      errorMsg={touched && error}
-      helperText={property.helpText}
-      InputProps={InputProps}
-      inputProps={inputProps}
-      hasChanged={hasChanged}
-    />
+    <StyledColorFactoryContainer>
+      <StyledColorPickerButton
+        variant='contained'
+        style={{ color: value as string }}
+        onClick={() => {
+          display === 'hidden' ? setDisplay('initial') : setDisplay('hidden');
+        }}
+      >
+        {display === 'hidden' ? <ColorLensRoundedIcon /> : <CloseRoundedIcon />}
+      </StyledColorPickerButton>
+      <StyledColorField
+        name={fld}
+        type='text'
+        multiline={false}
+        value={value}
+        disabled={true}
+        required={property.required}
+        onBlur={handleBlur}
+        error={touched && Boolean(error)}
+        errorMsg={touched && error}
+        helperText={property.helpText}
+        InputProps={InputProps}
+        inputProps={inputProps}
+        hasChanged={hasChanged}
+      />
+
+      <StyledSketchPickerContainer visibility={display}>
+        <SketchPicker
+          color={value as string}
+          onChange={(color, event) => {
+            changeHandler({
+              ...event,
+              target: {
+                ...event.target,
+                name: fld,
+                value: color.hex,
+              },
+            });
+          }}
+          disableAlpha={true}
+          presetColors={property.presets}
+        />
+      </StyledSketchPickerContainer>
+    </StyledColorFactoryContainer>
   );
 };
diff --git a/library/src/services/form/FormFieldFactory/FormFieldFactory.styles.tsx b/library/src/services/form/FormFieldFactory/FormFieldFactory.styles.tsx
@@ -1,4 +1,4 @@
-import { styled, Typography } from '@mui/material';
+import { Box, styled, Typography } from '@mui/material';
 
 interface StyledFilterDialogTypographyProps {
   children: React.ReactNode;
@@ -19,3 +19,22 @@ export const StyledFilterDialogTypography = styled(
     flex: 1,
   };
 });
+
+export const StyledSketchPickerContainer = styled(Box)(
+  (props: { visibility: 'hidden' | 'initial' }) => {
+    return {
+      visibility: props.visibility,
+      marginLeft: 120,
+      marginTop: -190,
+      position: 'relative',
+    };
+  }
+);
+
+export const StyledColorFactoryContainer = styled(Box)(() => {
+  return {
+    display: 'flex',
+    flexDirection: 'row',
+    marginTop: 25,
+  };
+});
diff --git a/yarn.lock b/yarn.lock
@@ -738,6 +738,11 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
+"@icons/material@^0.2.4":
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8"
+  integrity sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==
+
 "@jest/schemas@^28.1.3":
   version "28.1.3"
   resolved "https://registry.yarnpkg.com/@jest/schemas/-/schemas-28.1.3.tgz#ad8b86a66f11f33619e3d7e1dcddd7f2d40ff905"
@@ -1187,6 +1192,14 @@
   dependencies:
     query-string "*"
 
+"@types/react-color@^3.0.12":
+  version "3.0.12"
+  resolved "https://registry.yarnpkg.com/@types/react-color/-/react-color-3.0.12.tgz#231e75f11dd6805bdf1c954774588fefc8172f30"
+  integrity sha512-pr3uKE3lSvf7GFo1Rn2K3QktiZQFFrSgSGJ/3iMvSOYWt2pPAJ97rVdVfhWxYJZ8prAEXzoP2XX//3qGSQgu7Q==
+  dependencies:
+    "@types/react" "*"
+    "@types/reactcss" "*"
+
 "@types/react-dom@^18.0.0":
   version "18.0.6"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.6.tgz#36652900024842b74607a17786b6662dd1e103a1"
@@ -1234,6 +1247,13 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
+"@types/reactcss@*":
+  version "1.2.12"
+  resolved "https://registry.yarnpkg.com/@types/reactcss/-/reactcss-1.2.12.tgz#57f6f046e7aafbe0288689bd96a2d5664378ca7b"
+  integrity sha512-BrXUQ86/wbbFiZv8h/Q1/Q1XOsaHneYmCb/tHe9+M8XBAAUc2EHfdY0DY22ZZjVSaXr5ix7j+zsqO2eGZub8lQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/scheduler@*":
   version "0.16.2"
   resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
@@ -5098,7 +5118,7 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
-lodash-es@^4.17.21:
+lodash-es@^4.17.15, lodash-es@^4.17.21:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
   integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
@@ -5123,7 +5143,7 @@ lodash.truncate@^4.4.2:
   resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
   integrity sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==
 
-lodash@4, lodash@^4.17.15, lodash@^4.17.21:
+lodash@4, lodash@^4.0.1, lodash@^4.17.15, lodash@^4.17.21:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -5225,6 +5245,11 @@ matcher-collection@^2.0.0:
     "@types/minimatch" "^3.0.3"
     minimatch "^3.0.2"
 
+material-colors@^1.2.1:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
+  integrity sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==
+
 media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
@@ -5978,7 +6003,7 @@ promise@^8.0.0:
   dependencies:
     asap "~2.0.6"
 
-prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.5.10, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -6120,6 +6145,19 @@ react-audio-player@^0.17.0:
   dependencies:
     prop-types "^15.7.2"
 
+react-color@^2.19.3:
+  version "2.19.3"
+  resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.19.3.tgz#ec6c6b4568312a3c6a18420ab0472e146aa5683d"
+  integrity sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==
+  dependencies:
+    "@icons/material" "^0.2.4"
+    lodash "^4.17.15"
+    lodash-es "^4.17.15"
+    material-colors "^1.2.1"
+    prop-types "^15.5.10"
+    reactcss "^1.2.0"
+    tinycolor2 "^1.4.1"
+
 react-dom@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
@@ -6193,6 +6231,13 @@ react@^18.2.0:
   dependencies:
     loose-envify "^1.1.0"
 
+reactcss@^1.2.0:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.3.tgz#c00013875e557b1cf0dfd9a368a1c3dab3b548dd"
+  integrity sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==
+  dependencies:
+    lodash "^4.0.1"
+
 readable-stream@3, readable-stream@^3.0.2, readable-stream@^3.4.0:
   version "3.6.1"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.1.tgz#f9f9b5f536920253b3d26e7660e7da4ccff9bb62"
@@ -7012,6 +7057,11 @@ tiny-warning@^1.0.2:
   resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
   integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
 
+tinycolor2@^1.4.1:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.6.0.tgz#f98007460169b0263b97072c5ae92484ce02d09e"
+  integrity sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==
+
 title-case@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/title-case/-/title-case-2.1.1.tgz#3e127216da58d2bc5becf137ab91dae3a7cd8faa"