fix: Input state (#142)

Author: ggazzo

packages/fuselage-ui-kit/src/Input.js

@@ -12,7 +12,7 @@ import {
 import { Block } from './Block';
 import { useBlockContext } from './hooks';
 
-export const Input = ({ label, element, parser, index, hint, context }) => {
+export const Input = React.memo(({ label, element, parser, index, hint, context }) => {
   const [{ error }] = useBlockContext(element, context);
   return (
     <Block>
@@ -26,9 +26,9 @@ export const Input = ({ label, element, parser, index, hint, context }) => {
       </FieldGroup>
     </Block>
   );
-};
+});
 
-export const PlainInput = ({ element, context, index, parser }) => {
+export const PlainInput = React.memo(({ element, context, index, parser }) => {
   const [{ loading, value, error }, action] = useBlockContext(element, context);
   const { multiline, actionId, placeholder } = element;
   const Component = multiline ? TextAreaInput : TextInput;
@@ -41,9 +41,9 @@ export const PlainInput = ({ element, context, index, parser }) => {
       rows={6}
       error={error}
       value={value}
-      onInput={action}
-      onChange={() => {}}
+      // onInput={action}
+      onChange={action}
       placeholder={parser.plainText(placeholder)}
     />
   );
-};
+});

packages/fuselage-ui-kit/src/hooks.js

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react';
+import React, { useContext, useState, useCallback } from 'react';
 import {
   BLOCK_CONTEXT,
 } from '@rocket.chat/ui-kit';
@@ -14,26 +14,28 @@ export const kitContext = React.createContext(defaultContext);
 
 export const useBlockContext = ({ blockId, actionId, appId, initialValue }, context) => {
   const { action, appId: appIdFromContext, viewId, state, errors, values = {} } = useContext(kitContext);
-  const { value = initialValue } = values[actionId] || {};
-  // const [value, setValue] = useState(initialValue);
+  const { value: _value = initialValue } = values[actionId] || {};
+  const [value, setValue] = useState(_value);
   const [loading, setLoading] = useState(false);
 
   const error = errors && actionId && errors[actionId];
 
+  const actionFunction = useCallback(async ({ target: { value } }) => {
+    setLoading(true);
+    await action({ blockId, appId: appId || appIdFromContext, actionId, value, viewId });
+    setLoading(false);
+  }, []);
+
+  const stateFunction = useCallback(async ({ target: { value } }) => {
+    setValue(value);
+    await state({ blockId, appId, actionId, value });
+  }, []);
+
   if ([BLOCK_CONTEXT.SECTION, BLOCK_CONTEXT.ACTION].includes(context)) {
-    return [{ loading, setLoading, error }, async ({ target: { value } }) => {
-      setLoading(true);
-      await action({ blockId, appId: appId || appIdFromContext, actionId, value, viewId });
-      setLoading(false);
-    }];
+    return [{ loading, setLoading, error }, actionFunction];
   }
 
-  return [{ loading, setLoading, value, error }, async ({ target: { value } }) => {
-    // setValue(value);
-    setLoading(true);
-    await state({ blockId, appId, actionId, value });
-    setLoading(false);
-  }];
+  return [{ loading, setLoading, value, error }, stateFunction];
 };
 
 export const getStyle = (style) => {

packages/fuselage/src/components/Select/MultiSelect.js

@@ -11,7 +11,7 @@ const Container = Box.extend('rcx-select', 'div');
 
 const SelectedOptions = React.memo((props) => <Chip {...props}/>);
 
-const prevent = (e) => e.preventDefault() & e.stopPropagation() & e.stopImmediatePropagation();
+const prevent = (e) => e.preventDefault() & e.stopPropagation() & e.nativeEvent.stopImmediatePropagation();
 export const MultiSelect = ({
   value,
   filter,
@@ -71,7 +71,7 @@ export const MultiSelect = ({
             <Box is='div'>
               <Margins all='neg-x8'>
                 <Chip.Wrapper role='listbox'>
-                  <Anchor disabled={disabled} ref={ref} aria-haspopup='listbox' onClick={show} onBlur={hide} onKeyUp={handleKeyUp} onKeyDown={handleKeyDown} style={{ order: 1 }} mod-undecorated children={option || placeholder}/>
+                  <Anchor disabled={disabled} ref={ref} aria-haspopup='listbox' onClick={show} onBlur={hide} onKeyUp={handleKeyUp} onKeyDown={handleKeyDown} style={{ order: 1 }} mod-undecorated children={!value ? option || placeholder : null}/>
                   {currentValue.map((value) => <SelectedOptions tabIndex={-1} role='option' key={value} onMouseDown={(e) => prevent(e) & internalChanged([value]) && false} children={getLabel(options.find(([val]) => val === value))}/>)}
                 </Chip.Wrapper>
               </Margins>

packages/fuselage/src/components/Select/Select.js

@@ -81,7 +81,7 @@ export const Select = ({
       <Flex.Item>
         <Flex.Container>
           <Margins inline='neg-x4'>
-            <Wrapper>
+            <Wrapper mod-hidden={!!visibleText}>
               { visibleText && <Flex.Item grow={1}>
                 <Margins inline='x4'><Box is='span' textStyle='p2' textColor='hint' className='rcx-select__placeholder'>{visibleText}</Box></Margins>
               </Flex.Item>}
@@ -101,6 +101,6 @@ export const SelectFiltered = ({
   ...props
 }) => {
   const [filter, setFilter] = useState('');
-  const anchor = useCallback(React.forwardRef(({ children, filter, ...props }, ref) => <Margins inline='x4'><Flex.Item grow={1}><InputBox.Input ref={ref} placeholder={placeholder} value={filter} onChange={() => {}} onInput={(e) => setFilter(e.currentTarget.value)} {...props} mod-undecorated={true}/></Flex.Item></Margins>), []);
+  const anchor = useCallback(React.forwardRef(({ children, filter, ...props }, ref) => <Margins inline='x4'><Flex.Item grow={1}><InputBox.Input className='rcx-select__focus' ref={ref} placeholder={placeholder} value={filter} onChange={() => {}} onInput={(e) => setFilter(e.currentTarget.value)} {...props} mod-undecorated={true}/></Flex.Item></Margins>), []);
   return <Select filter={filter} options={options} {...props} anchor={anchor}/>;
 };

packages/fuselage/src/components/Select/styles.scss

@@ -37,7 +37,9 @@
     flex-grow: 1;
 
     &--hidden {
-      opacity: 0;
+      .rcx-select__focus {
+        opacity: 0;
+      }
     }
   }