@teambit/compositions 1.0.667 → 1.0.669

package/ui/compositions-panel/live-control-input.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable no-console */
+
 import React from 'react';
 import classNames from 'classnames';
 
@@ -9,6 +11,8 @@ import { ColorPicker } from '@teambit/design.ui.input.color-picker';
 import { DatePicker } from '@teambit/design.inputs.date-picker';
 import { Toggle } from '@teambit/design.inputs.toggle-switch';
 
+import { type SelectOption } from '@teambit/compositions.ui.composition-live-controls';
+
 import styles from './live-control-input.module.scss';
 
 type InputComponentProps = {
@@ -20,110 +24,174 @@ type InputComponentProps = {
 
 type InputComponent = React.FC<InputComponentProps>;
 
-function ShortTextInput({ id, value, onChange }: InputComponentProps) {
-  const [inputValue, setInputValue] = React.useState(value);
+function ShortTextInput({ value, onChange }: InputComponentProps) {
+  const [inputValue, setInputValue] = React.useState(value || '');
+
+  React.useEffect(() => {
+    setInputValue(value || '');
+  }, [value]);
+
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = e.target.value;
-    onChange(newValue);
-    setInputValue(newValue);
+    onChange(newValue || '');
+    setInputValue(newValue || '');
   };
-  return <InputText id={id} value={inputValue} onChange={handleChange} />;
+
+  return <InputText value={inputValue} onChange={handleChange} />;
 }
 
-function LongTextInput({ id, value, onChange }: InputComponentProps) {
-  const [inputValue, setInputValue] = React.useState(value);
+function LongTextInput({ value, onChange }: InputComponentProps) {
+  const [inputValue, setInputValue] = React.useState(value || '');
+
+  React.useEffect(() => {
+    setInputValue(value || '');
+  }, [value]);
+
   const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     const newValue = e.target.value;
-    onChange(newValue);
-    setInputValue(newValue);
+    onChange(newValue || '');
+    setInputValue(newValue || '');
   };
-  return <TextArea id={id} value={inputValue} onChange={handleChange} />;
+
+  return <TextArea value={inputValue} onChange={handleChange} />;
 }
 
-function SelectInput({ id, value, onChange, meta }: InputComponentProps) {
-  const [selectedValue, setSelectedValue] = React.useState(value);
+function SelectInput({ value, onChange, meta }: InputComponentProps) {
+  const [selectedValue, setSelectedValue] = React.useState(value || '');
+
+  React.useEffect(() => {
+    setSelectedValue(value || '');
+  }, [value]);
+
   const handleChange = (newValue: any) => {
-    onChange(newValue);
-    setSelectedValue(newValue);
+    onChange(newValue || '');
+    setSelectedValue(newValue || '');
   };
-  const placeholderContent = meta.options.find((o: any) => o.value === selectedValue)?.label;
+
+  const options: {
+    label: string;
+    value: string;
+  }[] = React.useMemo(() => {
+    if (!meta || !meta.options) return [];
+    return meta.options.map((option: SelectOption) => {
+      if (typeof option === 'string') {
+        return { label: option, value: option };
+      }
+      return option;
+    });
+  }, [meta]);
+
+  const placeholderContent = options.find((o) => o.value === selectedValue)?.label;
+
   return (
     <p className={classNames(styles.wrapper)}>
-      <Dropdown id={id} placeholderContent={placeholderContent}>
-        {meta.options.map((option: any) => (
-          <MenuItem
-            active={option.value === selectedValue}
-            key={option.value}
-            onClick={() => handleChange(option.value)}
-          >
-            {option.label}
-          </MenuItem>
-        ))}
+      <Dropdown placeholderContent={placeholderContent}>
+        {options.map((option) => {
+          return (
+            <MenuItem
+              active={option.value === selectedValue}
+              key={option.value}
+              onClick={() => handleChange(option.value)}
+            >
+              {option.label}
+            </MenuItem>
+          );
+        })}
       </Dropdown>
     </p>
   );
 }
 
-function NumberInput({ id, value, onChange }: InputComponentProps) {
-  const [inputValue, setInputValue] = React.useState(value);
+function NumberInput({ value, onChange }: InputComponentProps) {
+  const [inputValue, setInputValue] = React.useState(value || 0);
+
+  React.useEffect(() => {
+    setInputValue(value || 0);
+  }, [value]);
+
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = e.target.value;
     if (!isNaN(Number(newValue))) {
-      onChange(Number(newValue));
-      setInputValue(Number(newValue));
+      onChange(Number(newValue) || 0);
+      setInputValue(Number(newValue) || 0);
     } else {
       // TODO: render error message
       // eslint-disable-next-line no-console
       console.error('Invalid number input', newValue);
     }
   };
-  return <InputText id={id} type="number" value={inputValue} onChange={handleChange} />;
+
+  return <InputText type="number" value={inputValue} onChange={handleChange} />;
 }
 
-function ColorInput({ id, value, onChange }: InputComponentProps) {
-  const [inputValue, setInputValue] = React.useState(value);
+function ColorInput({ value, onChange }: InputComponentProps) {
+  const [inputValue, setInputValue] = React.useState(value || '');
+
+  React.useEffect(() => {
+    setInputValue(value || '');
+  }, [value]);
+
   const handleChange = (newValue: string) => {
-    onChange(newValue);
-    setInputValue(newValue);
+    onChange(newValue || '');
+    setInputValue(newValue || '');
   };
+
   return (
     <p className={classNames(styles.wrapper)}>
-      <ColorPicker id={id} value={inputValue} onColorSelect={handleChange} allowCustomColor />
+      <ColorPicker value={inputValue} onColorSelect={handleChange} allowCustomColor />
     </p>
   );
 }
 
-function DateInput({ id, value, onChange }: InputComponentProps) {
+function DateInput({ value, onChange }: InputComponentProps) {
   const [inputValue, setInputValue] = React.useState<Date | null>(new Date(value));
+
+  React.useEffect(() => {
+    setInputValue(new Date(value));
+  }, [value]);
+
   const handleChange = (newValue: Date | null) => {
     if (newValue) {
       onChange(newValue.toISOString().split('T')[0]);
     }
     setInputValue(newValue);
   };
+
   return (
     <p className={classNames(styles.wrapper)}>
-      <DatePicker id={id} date={inputValue} onChange={handleChange} />
+      <DatePicker date={inputValue} onChange={handleChange} />
     </p>
   );
 }
 
-function ToggleInput({ id, value, onChange }: InputComponentProps) {
-  const [isChecked, setIsChecked] = React.useState(value);
+function ToggleInput({ value, onChange }: InputComponentProps) {
+  const [isChecked, setIsChecked] = React.useState(!!value);
+
+  React.useEffect(() => {
+    setIsChecked(!!value);
+  }, [value]);
+
   const handleChange = () => {
     setIsChecked(!isChecked);
     onChange(!isChecked);
   };
+
   return (
     <p className={classNames(styles.wrapper)}>
-      <Toggle id={id} defaultChecked={isChecked} onChange={handleChange} />
+      <Toggle defaultChecked={isChecked} onChange={handleChange} />
     </p>
   );
 }
 
-function JsonInput({ id, value, onChange }: InputComponentProps) {
+function JsonInput({ value, onChange }: InputComponentProps) {
   const [inputValue, setInputValue] = React.useState(JSON.stringify(value, null, 2));
+
+  React.useEffect(() => {
+    setInputValue(JSON.stringify(value, null, 2));
+  }, [value]);
+
   const [message, setMessage] = React.useState('');
+
   const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     const newValue = e.target.value;
     try {
@@ -135,9 +203,10 @@ function JsonInput({ id, value, onChange }: InputComponentProps) {
     }
     setInputValue(newValue);
   };
+
   return (
     <div>
-      <TextArea id={id} value={inputValue} onChange={handleChange} />
+      <TextArea value={inputValue} onChange={handleChange} />
       {message && <div style={{ color: 'red' }}>{message}</div>}
     </div>
   );

package/ui/compositions-panel/live-control-panel.module.scss

@@ -11,4 +11,5 @@
 
 .label {
   font-weight: bold;
+  color: var(--on-background-color);
 }

package/ui/compositions-panel/live-control-panel.tsx

@@ -15,7 +15,10 @@ export function LiveControls({
   onChange: (key: string, value: any) => void;
 }) {
   return (
-    <ul className={classNames(styles.container)}>
+    <ul
+      className={classNames(styles.container)}
+      style={{ paddingBottom: '20em' /* temp walkaround for cutting popups */ }}
+    >
       {defs.map((field) => {
         const key = field.id;
         const InputComponent = getInputComponent(field.input || 'text');