pixel-react 1.8.3 → 1.8.4

package/src/components/ConditionalDropdown/OptionsDropdown.tsx

@@ -1,44 +1,44 @@
-import type { FC, ReactNode } from 'react';
-import { dynamicObject, OptionsDropdownProps } from './types';
-import './ConditionalDropdown.scss';
-import Typography from '../Typography';
-import classNames from 'classnames';
-
-const OptionsDropdown:FC<OptionsDropdownProps> = ({
-    onSelectVariable,
-    dropdownPosition,
-    filteredOptions= [],
-    position = 'relative',
-    width = '300px',
-  }): ReactNode => {
-    return (
-      <div
-        className={classNames('ff-variable-dropdown', position)}
-        style={
-          dropdownPosition
-            ? {
-                top: dropdownPosition.top + 30,
-                left: dropdownPosition.left - 30,
-                width,
-              }
-            : { width }
-        }
-      >
-        {filteredOptions?.map((option: dynamicObject): ReactNode => {
-          return (
-            <div
-              className="ff-variable-option"
-              onClick={() => onSelectVariable(option)}
-              key={option?.id}
-            >
-              <Typography as="span" fontSize={14}>
-                {option?.name}
-              </Typography>
-            </div>
-          );
-        })}
-      </div>
-    );
-  };
-
+import type { FC, ReactNode } from 'react';
+import { dynamicObject, OptionsDropdownProps } from './types';
+import './ConditionalDropdown.scss';
+import Typography from '../Typography';
+import classNames from 'classnames';
+
+const OptionsDropdown:FC<OptionsDropdownProps> = ({
+    onSelectVariable,
+    dropdownPosition,
+    filteredOptions= [],
+    position = 'relative',
+    width = '300px',
+  }): ReactNode => {
+    return (
+      <div
+        className={classNames('ff-variable-dropdown', position)}
+        style={
+          dropdownPosition
+            ? {
+                top: dropdownPosition.top + 30,
+                left: dropdownPosition.left - 30,
+                width,
+              }
+            : { width }
+        }
+      >
+        {filteredOptions?.map((option: dynamicObject): ReactNode => {
+          return (
+            <div
+              className="ff-variable-option"
+              onClick={() => onSelectVariable(option)}
+              key={option?.id}
+            >
+              <Typography as="span" fontSize={14}>
+                {option?.name}
+              </Typography>
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
+
 export default OptionsDropdown;

package/src/components/ConditionalDropdown/index.ts

@@ -1 +1 @@
-export { default } from './ConditionalDropdown';
+export { default } from './ConditionalDropdown';

package/src/components/ConditionalDropdown/types.ts

@@ -1,160 +1,164 @@
-import { dropdownPositionType } from "../Editor/types";
-
-export type dynamicObject = {
-  [key: string]: any;
-};
-
-export type TestDataObject = {
-  _id: string;
-  name: string;
-  actualPath: string;
-  searchKey: string;
-  parentId: string;
-}
-
-export interface ConditionalDropdownProps {
-  /**
-   * Label for the field
-   */
-  label?: string;
-
-  /**
-   * Value in the input should stored in this state
-   */
-  hashInputValue?: TestDataObject | dynamicObject;
-
-  /**
-   * Function storing and updating the inputValue state
-   */
-  setHashInputValue?: (value: File | dynamicObject | null) => void;
-
-  /**
-   * List of variables
-   */
-  variableList?: dynamicObject[];
-  /**
-   * Place holder for the input field
-   */
-  placeholder?: string;
-  /**
-   * Function to handle input change
-   * @param value
-   * @returns
-   */
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  /**
-   * Function to handle create variable icon click
-   */
-  onCreateVariableClick?: () => void;
-  /**
-   * Width of the dropdown
-   */
-  dropdownWidth?: string;
-  /**
-   * Name | name of the input field
-   */
-  name?: string;
-  /**
-   * value | input field value
-   */
-  value?: string;
-  /**
-   * variants to set color/style of the input field
-   */
-  variant?: 'default' | 'primary';
-  /**
-   * type to set color/style of the input field
-   */
-  type?: 'text' | 'password' | 'number' | 'email' | 'url' | 'time';
-  /**
-   * error | If true, error message will be displayed
-   */
-  error?: boolean;
-  /**
-   * helperText | error, success, warning message to be shown
-   */
-  helperText?: string;
-  /**
-   * to disable the input field
-   */
-  disabled?: boolean;
-  /**
-   * if true, input field will be mandatory
-   */
-  required?: boolean;
-  /**
-   * classnames to style the input field
-   */
-  className?: string;
-  /**
-   * noBorder prop 'true' removes border of input
-   */
-  noBorder?: boolean;
-
-  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-
-  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
-
-  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
-  /**
-   * id to select the input field uniquely
-   */
-  id?: string;
-  /**
-   * if on, suggestion popup will be displayed
-   */
-  autoComplete?: 'on' | 'off';
-  /**
-   *  minimum and maximum values for the number type input field and their functions
-   */
-  minValue?: number;
-  maxValue?: number;
-  /**
-   * background of the input field prop
-   */
-  transparentBackground?: boolean;
-  /**
-   * size for the input field
-   */
-  size?: 'small' | 'medium';
-  /**
-   * isLabelRequired for the input field without label,showing placeholder
-   */
-  isLabelRequired?: boolean;
-
-  /**
-   * If true, dropdown opens when '#' is entered at the first position.
-   */
-  isHash?: boolean;
-  /**
-   * Options for the dropdown when `isHash` is true.
-   */
-  dataFiles?: dynamicObject[];
-}
-
-export interface OptionsDropdownProps {
-   /**
-   * Position whether absoloute or relative
-   */
-   position: 'absolute' | 'relative';
-
-   /**
-    * Dropdown width
-    */
-   width: string;
-   
-   /**
-    * chars entered to search in Input : 
-    */
-   filteredOptions?: dynamicObject[];
- 
-   /**
-    * Function to handle click on variable
-    */
-   onSelectVariable: (variable: object) => void;
- 
-   /**
-    * Dropdown postion used for dropdown placement
-    */
-   dropdownPosition?: dropdownPositionType;
+import { dropdownPositionType } from "../Editor/types";
+
+export type dynamicObject = {
+  [key: string]: any;
+};
+
+export type TestDataObject = {
+  _id: string;
+  name: string;
+  actualPath: string;
+  searchKey: string;
+  parentId: string;
+}
+
+export interface ConditionalDropdownProps {
+  /**
+   * Label for the field
+   */
+  label?: string;
+
+  /**
+   * Value in the input should stored in this state
+   */
+  hashInputValue?: TestDataObject | dynamicObject;
+
+  /**
+   * Function storing and updating the inputValue state
+   */
+  setHashInputValue?: (value: File | dynamicObject | null) => void;
+
+  /**
+   * List of variables
+   */
+  variableList?: dynamicObject[];
+  /**
+   * Place holder for the input field
+   */
+  placeholder?: string;
+  /**
+   * Function to handle input change
+   * @param value
+   * @returns
+   */
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  /**
+   * Function to handle create variable icon click
+   */
+  onCreateVariableClick?: () => void;
+  /**
+   * Width of the dropdown
+   */
+  dropdownWidth?: string;
+  /**
+   * Name | name of the input field
+   */
+  name?: string;
+  /**
+   * value | input field value
+   */
+  value?: string;
+  /**
+   * variants to set color/style of the input field
+   */
+  variant?: 'default' | 'primary';
+  /**
+   * type to set color/style of the input field
+   */
+  type?: 'text' | 'password' | 'number' | 'email' | 'url' | 'time';
+  /**
+   * error | If true, error message will be displayed
+   */
+  error?: boolean;
+  /**
+   * helperText | error, success, warning message to be shown
+   */
+  helperText?: string;
+  /**
+   * to disable the input field
+   */
+  disabled?: boolean;
+  /**
+   * if true, input field will be mandatory
+   */
+  required?: boolean;
+  /**
+   * classnames to style the input field
+   */
+  className?: string;
+  /**
+   * noBorder prop 'true' removes border of input
+   */
+  noBorder?: boolean;
+
+  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  /**
+   * id to select the input field uniquely
+   */
+  id?: string;
+  /**
+   * if on, suggestion popup will be displayed
+   */
+  autoComplete?: 'on' | 'off';
+  /**
+   *  minimum and maximum values for the number type input field and their functions
+   */
+  minValue?: number;
+  maxValue?: number;
+  /**
+   * background of the input field prop
+   */
+  transparentBackground?: boolean;
+  /**
+   * size for the input field
+   */
+  size?: 'small' | 'medium';
+  /**
+   * isLabelRequired for the input field without label,showing placeholder
+   */
+  isLabelRequired?: boolean;
+
+  /**
+   * If true, dropdown opens when '#' is entered at the first position.
+   */
+  isHash?: boolean;
+  /**
+   * Options for the dropdown when `isHash` is true.
+   */
+  dataFiles?: dynamicObject[];
+  /**
+   * a boolean prop to show add variable icon or not.
+   */
+  showAddVariableIcon?: boolean;
+}
+
+export interface OptionsDropdownProps {
+   /**
+   * Position whether absoloute or relative
+   */
+   position: 'absolute' | 'relative';
+
+   /**
+    * Dropdown width
+    */
+   width: string;
+   
+   /**
+    * chars entered to search in Input : 
+    */
+   filteredOptions?: dynamicObject[];
+ 
+   /**
+    * Function to handle click on variable
+    */
+   onSelectVariable: (variable: object) => void;
+ 
+   /**
+    * Dropdown postion used for dropdown placement
+    */
+   dropdownPosition?: dropdownPositionType;
 }