hotfix: docz files namecase
This commit is contained in:
parent
f222fd1335
commit
5915398d76
|
@ -16,6 +16,7 @@ const MenuWrapper = styled.div`
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
margin-left: -10px;
|
margin-left: -10px;
|
||||||
|
min-width: 200px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const MenuItem = styled.button`
|
const MenuItem = styled.button`
|
||||||
|
@ -41,7 +42,7 @@ const PopoverWithStyle = styled(Popover)`
|
||||||
`;
|
`;
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
renderTrigger: (() => void) => Node,
|
renderTrigger: (toggleVisibility: () => void, isOpen: boolean) => Node,
|
||||||
options: Array<{ label: string, onClick: () => void }>,
|
options: Array<{ label: string, onClick: () => void }>,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -49,15 +50,11 @@ type State = {
|
||||||
isOpen: boolean,
|
isOpen: boolean,
|
||||||
};
|
};
|
||||||
|
|
||||||
export class Dropdown extends Component<Props, State> {
|
export class DropdownComponent extends Component<Props, State> {
|
||||||
state = {
|
state = {
|
||||||
isOpen: false,
|
isOpen: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
toggleVisibility() {
|
|
||||||
this.setState(state => ({ isOpen: !state.isOpen }));
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<PopoverWithStyle
|
<PopoverWithStyle
|
||||||
|
@ -77,7 +74,7 @@ export class Dropdown extends Component<Props, State> {
|
||||||
]}
|
]}
|
||||||
tipSize={10}
|
tipSize={10}
|
||||||
>
|
>
|
||||||
{this.props.renderTrigger(() => this.toggleVisibility())}
|
{this.props.renderTrigger(() => this.setState(state => ({ isOpen: !state.isOpen })), this.state.isOpen)}
|
||||||
</PopoverWithStyle>
|
</PopoverWithStyle>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,12 +4,12 @@ name: DropDown
|
||||||
|
|
||||||
import { Playground, PropsTable } from 'docz'
|
import { Playground, PropsTable } from 'docz'
|
||||||
|
|
||||||
import { Dropdown } from './dropdown.js'
|
import { DropdownComponent } from './dropdown.js'
|
||||||
import { DoczWrapper } from '../theme.js'
|
import { DoczWrapper } from '../theme.js'
|
||||||
|
|
||||||
# DropDown
|
# DropDown
|
||||||
|
|
||||||
<PropsTable of={Dropdown} />
|
<PropsTable of={DropdownComponent} />
|
||||||
|
|
||||||
## Basic usage
|
## Basic usage
|
||||||
|
|
||||||
|
@ -17,7 +17,7 @@ import { DoczWrapper } from '../theme.js'
|
||||||
<DoczWrapper>
|
<DoczWrapper>
|
||||||
{() => (
|
{() => (
|
||||||
<div style={{ height: '500px' }}>
|
<div style={{ height: '500px' }}>
|
||||||
<Dropdown
|
<DropdownComponent
|
||||||
options={[
|
options={[
|
||||||
{ label: 'asbh1yeasbdh23848asdasd', onClick: console.log },
|
{ label: 'asbh1yeasbdh23848asdasd', onClick: console.log },
|
||||||
{ label: 'urtyruhjr374hbfdjdhuh', onClick: console.log },
|
{ label: 'urtyruhjr374hbfdjdhuh', onClick: console.log },
|
Loading…
Reference in New Issue