Unverified Commit 6cdec777 authored by Guilherme Gazzo's avatar Guilherme Gazzo Committed by GitHub
Browse files

fix: Input state (#142)

parent 967593b0
......@@ -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)}
/>
);
};
});
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) => {
......
......@@ -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>
......
......@@ -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}/>;
};
......@@ -37,7 +37,9 @@
flex-grow: 1;
&--hidden {
opacity: 0;
.rcx-select__focus {
opacity: 0;
}
}
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment