Unverified Commit 86939eaa authored by Guilherme Gazzo's avatar Guilherme Gazzo Committed by GitHub
Browse files

fix: UIKit stopPropagation (#137)

parent 7a32d581
......@@ -42,6 +42,7 @@ export const PlainInput = ({ element, context, index, parser }) => {
error={error}
value={value}
onInput={action}
onChange={() => {}}
placeholder={parser.plainText(placeholder)}
/>
);
......
......@@ -13,9 +13,12 @@ export const defaultContext = {
export const kitContext = React.createContext(defaultContext);
export const useBlockContext = ({ blockId, actionId, appId, initialValue }, context) => {
const [value, setValue] = useState(initialValue);
const { action, appId: appIdFromContext, viewId, state, errors, values = {} } = useContext(kitContext);
const { value = initialValue } = values[actionId] || {};
// const [value, setValue] = useState(initialValue);
const [loading, setLoading] = useState(false);
const { action, appId: appIdFromContext, viewId, state, errors } = useContext(kitContext);
const error = errors && actionId && errors[actionId];
if ([BLOCK_CONTEXT.SECTION, BLOCK_CONTEXT.ACTION].includes(context)) {
......@@ -27,7 +30,7 @@ export const useBlockContext = ({ blockId, actionId, appId, initialValue }, cont
}
return [{ loading, setLoading, value, error }, async ({ target: { value } }) => {
setValue(value);
// setValue(value);
setLoading(true);
await state({ blockId, appId, actionId, value });
setLoading(false);
......
......@@ -84,9 +84,7 @@ class MessageParser extends UiKitParserMessage {
}
actions(args, _, key) {
return (
<ActionsLayoutBlock {...args} key={key} parser={this} />
);
return <ActionsLayoutBlock {...args} key={key} parser={this} />;
}
datePicker(element, context, key) {
......
......@@ -95,7 +95,7 @@ export const useCursor = (initial, options, onChange) => {
const handleKeyDown = (e) => {
const lastIndex = options.length - 1;
const { keyCode, key } = e;
if (AnimatedVisibility.HIDDEN === visibility && keyCode !== ACTIONS.ESC) {
if (AnimatedVisibility.HIDDEN === visibility && keyCode !== ACTIONS.ESC && keyCode !== ACTIONS.TAB) {
return show();
}
switch (keyCode) {
......@@ -120,11 +120,23 @@ export const useCursor = (initial, options, onChange) => {
case ACTIONS.ENTER:
e.preventDefault();
if (visibility === AnimatedVisibility.VISIBLE) {
e.persist();
e.nativeEvent.stopImmediatePropagation(); // TODO
e.stopPropagation();
}
return onChange(options[cursor], visibilityHandler);
case ACTIONS.ESC:
e.preventDefault();
reset();
return hide();
hide();
if (visibility === AnimatedVisibility.VISIBLE) {
e.persist();
e.nativeEvent.stopImmediatePropagation(); // TODO
e.stopPropagation();
return false;
}
break;
default:
const index = options.findIndex(([, label]) => label[0] === key);
setCursor(index);
......
......@@ -15,4 +15,8 @@
&--focus {
background: $colors-n400;
}
&--selected {
color: $text-colors-primary;
}
}
......@@ -59,7 +59,9 @@ export const Select = ({
useEffect(reset, [filter]);
const visibleText = (filter === undefined || visible === AnimatedVisibility.HIDDEN) && (getLabel(option) || placeholder);
const valueLabel = getLabel(option);
const visibleText = (filter === undefined || visible === AnimatedVisibility.HIDDEN) && (valueLabel ? <Box textStyle='p1' textColor='default'>{valueLabel}</Box> : placeholder);
return (
<Container ref={containerRef} onClick={() => ref.current.focus() & show()}>
<Flex.Item>
......@@ -85,6 +87,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} 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 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}/>;
};
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