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

fix: Select placeholder and story (#179)

parent 91911c9b
......@@ -50,8 +50,8 @@ export const ModalClose = (props) => <Flex.Item shrink={0}>
</Button>
</Flex.Item>;
export const ModalContent = ({ children, ...props }) =>
<Scrollable vertical>
export const ModalContent = ({ children, onScrollContent, ...props }) =>
<Scrollable vertical onScrollContent={onScrollContent}>
<Box componentClassName='rcx-modal__content'>
<Margins inline='x32'>
<Box componentClassName='rcx-modal__content-wrapper' {...props}>
......
......@@ -4,7 +4,7 @@
position: static;
width: $sizes-full;
max-height: $sizes-sh;
max-height: 100%;
margin: auto;
background: none;
......
......@@ -5,8 +5,6 @@ import { Icon } from '../Icon';
import { InputBox } from '../InputBox';
import { Options, useCursor } from '../Options';
const Container = Box.extend('rcx-select', 'div');
export const Addon = Box.extend('rcx-select__addon', 'div');
const Wrapper = Box.extend('rcx-select__wrapper', 'div');
......@@ -25,6 +23,7 @@ export const Select = ({
getLabel = ([, label] = []) => label,
placeholder = '',
renderOptions: _Options = Options,
...props
}) => {
const [internalValue, setInternalValue] = useState(value);
......@@ -69,14 +68,16 @@ export const Select = ({
const visibleText = (filter === undefined || visible === AnimatedVisibility.HIDDEN) && (valueLabel || (placeholder || typeof placeholder === 'string'));
return (
<Container disabled={disabled} ref={containerRef} onClick={() => ref.current.focus() & show()} className={
<Box componentClassName='rcx-select' disabled={disabled} ref={containerRef} onClick={() => ref.current.focus() & show()} className={
[
error && 'invalid',
disabled && 'disabled',
].filter(Boolean).join(' ')
}>
}
{ ...props }
>
<Flex.Item>
<Flex.Container>
<Margins inline='neg-x4'>
......@@ -93,7 +94,7 @@ export const Select = ({
</Flex.Container>
</Flex.Item>
<PositionAnimated visible={visible} anchor={containerRef}><_Options role='listbox' filter={filter} options={filteredOptions} onSelect={internalChanged} cursor={cursor} /></PositionAnimated>
</Container>);
</Box>);
};
export const SelectFiltered = ({
......@@ -102,6 +103,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 className='rcx-select__focus' 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} shrink={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 placeholder={null} filter={filter} options={options} {...props} anchor={anchor}/>;
};
......@@ -17,6 +17,7 @@ const options = [
[9, 'd teste 9'],
[10, 'd teste 10']
];
const optionsEllipses = [[11, 'Very very very very very very very very very large text'], ...options];
<Meta title='Forms|Inputs/Select' parameters={{ jest: ['AutoComplete/spec'] }} />
......@@ -26,19 +27,19 @@ An input for selection of options.
<Preview>
<Story name='Default'>
<Select placeholder="Placeholder here..." options={options}/>
<Select style={{ width: '250px' }} placeholder="Placeholder here..." options={options}/>
</Story>
</Preview>
<Preview>
<Story name='Error'>
<Select error placeholder="Placeholder here..." options={options}/>
<Select style={{ width: '250px' }} error placeholder="Placeholder here..." options={options}/>
</Story>
</Preview>
<Preview>
<Story name='Disabled'>
<Select disabled placeholder="Placeholder here..." options={options}/>
<Select style={{ width: '250px' }} disabled placeholder="Placeholder here..." options={options}/>
</Story>
</Preview>
......@@ -46,7 +47,7 @@ An input for selection of options.
<Preview>
<Story name='No Placeholder'>
<Select options={options}/>
<Select style={{ width: '250px' }} options={options}/>
</Story>
</Preview>
......@@ -58,20 +59,27 @@ An input for selection of options.
<Preview>
<Story name='Select with filter'>
<SelectFiltered placeholder="Placeholder here..." options={options}/>
<SelectFiltered style={{ width: '250px' }} placeholder="Placeholder here..." options={options}/>
</Story>
</Preview>
<Preview>
<Story name='Select with filter and ellipses'>
<SelectFiltered style={{ width: '250px' }} value={11} placeholder="Placeholder here..." options={optionsEllipses}/>
</Story>
</Preview>
<Preview>
<Story name='Select with filter and error'>
<SelectFiltered error placeholder="Placeholder here..." options={options}/>
<SelectFiltered style={{ width: '250px' }} error placeholder="Placeholder here..." options={options}/>
</Story>
</Preview>
<Preview>
<Story name='Select with filter and disabled'>
<SelectFiltered disabled error placeholder="Placeholder here..." options={options}/>
<SelectFiltered style={{ width: '250px' }} disabled error placeholder="Placeholder here..." options={options}/>
</Story>
</Preview>
......
Markdown is supported
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