Skip to content

Commit

Permalink
FEATURE (props): add onDropdownCloseRequest prop to notify about clos… (
Browse files Browse the repository at this point in the history 
#80)

* FEATURE (props): add onDropdownCloseRequest prop to notify about close intent, good for animations issue #78

* DOCS (examples): fix animation example
  • Loading branch information
@sanusart
sanusart authored Mar 8, 2020
1 parent 220dfcb commit c536347
Show file tree
Hide file tree
Showing 6 changed files with 190 additions and 55 deletions.
41 changes: 21 additions & 20 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,26 +105,27 @@ and use as:

> by using renderer props to override components some of the functionality will have to be handled manually with a help of internal props, states and methods exposed
| Prop | Type | Default | Description |
| -------------------------------------------------------------------------------------------------------- | ---- | --------- | --------------------------------------------------------------------------- |
| onChange | func | | On values change callback, returns array of values objects |
| onDropdownClose | func | | Fires upon dropdown close |
| onDropdownOpen | func | | Fires upon dropdown open |
| onCreateNew | func | | Fires upon creation of new item if `create` prop set to `true` |
| onClearAll | func | | Fires upon clearing all values (via custom renderers) |
| onSelectAll | func | | Fires upon selecting all values (via custom renderers) |
| [contentRenderer](https://sanusart.github.io/react-dropdown-select/prop/content-renderer) | func | | Overrides internal content component (the contents of the select component) |
| [itemRenderer](https://sanusart.github.io/react-dropdown-select/prop/item-renderer) | func | | Overrides internal item in a dropdown |
| [noDataRenderer](https://sanusart.github.io/react-dropdown-select/prop/no-data-renderer) | func | | Overrides internal "no data" (shown where search has no results) |
| [optionRenderer](https://sanusart.github.io/react-dropdown-select/prop/option-renderer) | func | | Overrides internal option (the pillow with an "x") on the select content |
| [inputRenderer](https://sanusart.github.io/react-dropdown-select/prop/input-renderer) | func | | Overrides internal input text |
| [loadingRenderer](https://sanusart.github.io/react-dropdown-select/prop/loading-renderer) | func | | Overrides internal loading |
| [clearRenderer](https://sanusart.github.io/react-dropdown-select/prop/clear-renderer) | func | | Overrides internal clear button |
| [separatorRenderer](https://sanusart.github.io/react-dropdown-select/prop/separator-renderer) | func | | Overrides internal separator |
| [dropdownRenderer](https://sanusart.github.io/react-dropdown-select/prop/dropdown-renderer) | func | | Overrides internal dropdown component |
| [dropdownHandleRenderer](https://sanusart.github.io/react-dropdown-select/prop/dropdown-handle-renderer) | func | | Overrides internal dropdown handle |
| searchFn | func | undefined | Overrides internal search function |
| handleKeyDownFn | func | undefined | Overrides internal keyDown function |
| Prop | Type | Default | Description |
| -------------------------------------------------------------------------------------------------------- | ---- | --------- | -------------------------------------------------------------------------------------- |
| onChange | func | | On values change callback, returns array of values objects |
| onDropdownClose | func | | Fires upon dropdown close |
| onDropdownOpen | func | | Fires upon dropdown open |
| onCreateNew | func | | Fires upon creation of new item if `create` prop set to `true` |
| onClearAll | func | | Fires upon clearing all values (via custom renderers) |
| onSelectAll | func | | Fires upon selecting all values (via custom renderers) |
| onDropdownCloseRequest | func | undefined | Fires upon dropdown closing state, stops the closing and provides own method `close()` |
| [contentRenderer](https://sanusart.github.io/react-dropdown-select/prop/content-renderer) | func | | Overrides internal content component (the contents of the select component) |
| [itemRenderer](https://sanusart.github.io/react-dropdown-select/prop/item-renderer) | func | | Overrides internal item in a dropdown |
| [noDataRenderer](https://sanusart.github.io/react-dropdown-select/prop/no-data-renderer) | func | | Overrides internal "no data" (shown where search has no results) |
| [optionRenderer](https://sanusart.github.io/react-dropdown-select/prop/option-renderer) | func | | Overrides internal option (the pillow with an "x") on the select content |
| [inputRenderer](https://sanusart.github.io/react-dropdown-select/prop/input-renderer) | func | | Overrides internal input text |
| [loadingRenderer](https://sanusart.github.io/react-dropdown-select/prop/loading-renderer) | func | | Overrides internal loading |
| [clearRenderer](https://sanusart.github.io/react-dropdown-select/prop/clear-renderer) | func | | Overrides internal clear button |
| [separatorRenderer](https://sanusart.github.io/react-dropdown-select/prop/separator-renderer) | func | | Overrides internal separator |
| [dropdownRenderer](https://sanusart.github.io/react-dropdown-select/prop/dropdown-renderer) | func | | Overrides internal dropdown component |
| [dropdownHandleRenderer](https://sanusart.github.io/react-dropdown-select/prop/dropdown-handle-renderer) | func | | Overrides internal dropdown handle |
| searchFn | func | undefined | Overrides internal search function |
| handleKeyDownFn | func | undefined | Overrides internal keyDown function |

### License

Expand Down
84 changes: 84 additions & 0 deletions docs/src/examples/WithAnimation.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
import React, { useState } from 'react';
import styled from '@emotion/styled';
import { keyframes, css } from '@emotion/core';
import { Heading } from './components/Heading';
import Select from '../../../src';

const WithAnimation = ({ options, title }) => {
const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
const [open, setOpen] = useState(null);

return (
<React.Fragment>
<Heading
title={title}
source="https://github.com/sanusart/react-dropdown-select/tree/master/docs/src/examples/WithAnimation.js"
/>

<StyledSelect
multi
options={options}
values={[]}
isOpen={open}
onDropdownCloseRequest={({ close }) => {
setOpen(true);
sleep(300).then(() => {
close();
setOpen(false);
});
}}
onChange={(value) =>
console.log(`%c > onChange ${title} `, 'background: #555; color: tomato', value)
}
/>
</React.Fragment>
);
};

const hide = keyframes`
from {
transition: height 310ms ease;
}
to {
transition: height 310ms ease;
height: 0;
opacity: 0;
}
`;

const show = keyframes`
from {
transition: height 310ms ease;
height: 0;
opacity: 0;
}
to {
transition: height 310ms ease;
}
`;

const StyledSelect = styled(Select)`
transition: all 0.3s ease-out;
.react-dropdown-select-dropdown {
height: 310px;
${({ isOpen }) =>
isOpen
? css`
animation: ${hide} 310ms ease-in-out;
`
: css`
animation: ${show} 310ms ease-in-out;
`};
}
.react-dropdown-select-option {
transition: all 0.3s ease-out;
}
`;

WithAnimation.propTypes = {};

export default WithAnimation;
41 changes: 21 additions & 20 deletions docs/src/pages/api.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,23 +51,24 @@ title: 'API'

> by using renderer props to override components some of the functionality will have to be handled manually with a help of internal props, states and methods exposed
| Prop | Type | Default | Description |
| -------------------------------------------------------------------------------------------------------- | ---- | --------- | --------------------------------------------------------------------------- |
| onChange | func | | On values change callback, returns array of values objects |
| onDropdownClose | func | | Fires upon dropdown close |
| onDropdownOpen | func | | Fires upon dropdown open |
| onCreateNew | func | | Fires upon creation of new item if `create` prop set to `true` |
| onClearAll | func | | Fires upon clearing all values (via custom renderers) |
| onSelectAll | func | | Fires upon selecting all values (via custom renderers) |
| [contentRenderer](https://sanusart.github.io/react-dropdown-select/prop/content-renderer) | func | | Overrides internal content component (the contents of the select component) |
| [itemRenderer](https://sanusart.github.io/react-dropdown-select/prop/item-renderer) | func | | Overrides internal item in a dropdown |
| [noDataRenderer](https://sanusart.github.io/react-dropdown-select/prop/no-data-renderer) | func | | Overrides internal "no data" (shown where search has no results) |
| [optionRenderer](https://sanusart.github.io/react-dropdown-select/prop/option-renderer) | func | | Overrides internal option (the pillow with an "x") on the select content |
| [inputRenderer](https://sanusart.github.io/react-dropdown-select/prop/input-renderer) | func | | Overrides internal input text |
| [loadingRenderer](https://sanusart.github.io/react-dropdown-select/prop/loading-renderer) | func | | Overrides internal loading |
| [clearRenderer](https://sanusart.github.io/react-dropdown-select/prop/clear-renderer) | func | | Overrides internal clear button |
| [separatorRenderer](https://sanusart.github.io/react-dropdown-select/prop/separator-renderer) | func | | Overrides internal separator |
| [dropdownRenderer](https://sanusart.github.io/react-dropdown-select/prop/dropdown-renderer) | func | | Overrides internal dropdown component |
| [dropdownHandleRenderer](https://sanusart.github.io/react-dropdown-select/prop/dropdown-handle-renderer) | func | | Overrides internal dropdown handle |
| searchFn | func | undefined | Overrides internal search function |
| handleKeyDownFn | func | undefined | Overrides internal keyDown function |
| Prop | Type | Default | Description |
| -------------------------------------------------------------------------------------------------------- | ---- | --------- | -------------------------------------------------------------------------------------- |
| onChange | func | | On values change callback, returns array of values objects |
| onDropdownClose | func | | Fires upon dropdown close |
| onDropdownOpen | func | | Fires upon dropdown open |
| onCreateNew | func | | Fires upon creation of new item if `create` prop set to `true` |
| onClearAll | func | | Fires upon clearing all values (via custom renderers) |
| onSelectAll | func | | Fires upon selecting all values (via custom renderers) |
| onDropdownCloseRequest | func | undefined | Fires upon dropdown closing state, stops the closing and provides own method `close()` |
| [contentRenderer](https://sanusart.github.io/react-dropdown-select/prop/content-renderer) | func | | Overrides internal content component (the contents of the select component) |
| [itemRenderer](https://sanusart.github.io/react-dropdown-select/prop/item-renderer) | func | | Overrides internal item in a dropdown |
| [noDataRenderer](https://sanusart.github.io/react-dropdown-select/prop/no-data-renderer) | func | | Overrides internal "no data" (shown where search has no results) |
| [optionRenderer](https://sanusart.github.io/react-dropdown-select/prop/option-renderer) | func | | Overrides internal option (the pillow with an "x") on the select content |
| [inputRenderer](https://sanusart.github.io/react-dropdown-select/prop/input-renderer) | func | | Overrides internal input text |
| [loadingRenderer](https://sanusart.github.io/react-dropdown-select/prop/loading-renderer) | func | | Overrides internal loading |
| [clearRenderer](https://sanusart.github.io/react-dropdown-select/prop/clear-renderer) | func | | Overrides internal clear button |
| [separatorRenderer](https://sanusart.github.io/react-dropdown-select/prop/separator-renderer) | func | | Overrides internal separator |
| [dropdownRenderer](https://sanusart.github.io/react-dropdown-select/prop/dropdown-renderer) | func | | Overrides internal dropdown component |
| [dropdownHandleRenderer](https://sanusart.github.io/react-dropdown-select/prop/dropdown-handle-renderer) | func | | Overrides internal dropdown handle |
| searchFn | func | undefined | Overrides internal search function |
| handleKeyDownFn | func | undefined | Overrides internal keyDown function |
5 changes: 5 additions & 0 deletions docs/src/pages/examples.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import DropdownAutoPosition from '../examples/DropdownAutoPosition';
import NoData from '../examples/NoData';
import ExternalClear from '../examples/ExternalClear';
import AccessDataByPath from '../examples/AccessDataByPath';
import WithAnimation from '../examples/WithAnimation';

const demoOptions = options.map((option) => ({
...option,
Expand Down Expand Up @@ -106,6 +107,10 @@ const Examples = () => (
<AccessDataByPath title={`Access data by dotted path`} />
</Wrapper>

<Wrapper>
<WithAnimation title={`With animations`} options={demoOptions} />
</Wrapper>

<br />
<br />
<br />
Expand Down
Loading

0 comments on commit c536347

Please sign in to comment.