Skip to content

Commit

Permalink
FIX (dropdownHandle) [#61, 82]: make dropdownHandleRenderer simpler (#83
Browse files Browse the repository at this point in the history
)
  • Loading branch information
sanusart authored Mar 27, 2020
1 parent 51501d0 commit 68a172b
Show file tree
Hide file tree
Showing 6 changed files with 112 additions and 96 deletions.
6 changes: 6 additions & 0 deletions __tests__/__snapshots__/index.spec.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,7 @@ exports[`<Select/> component <Select/> is disabled 1`] = `
onClick={[Function]}
onKeyDown={[Function]}
onKeyPress={[Function]}
rotate={true}
tabIndex="-1"
>
<svg
Expand Down Expand Up @@ -265,6 +266,7 @@ exports[`<Select/> component <Select/> renders correctly 1`] = `
onClick={[Function]}
onKeyDown={[Function]}
onKeyPress={[Function]}
rotate={true}
tabIndex="-1"
>
<svg
Expand Down Expand Up @@ -426,6 +428,7 @@ exports[`<Select/> component <Select/> renders with clearable 1`] = `
onClick={[Function]}
onKeyDown={[Function]}
onKeyPress={[Function]}
rotate={true}
tabIndex="-1"
>
<svg
Expand Down Expand Up @@ -590,6 +593,7 @@ exports[`<Select/> component <Select/> renders with loading 1`] = `
onClick={[Function]}
onKeyDown={[Function]}
onKeyPress={[Function]}
rotate={true}
tabIndex="-1"
>
<svg
Expand Down Expand Up @@ -743,6 +747,7 @@ exports[`<Select/> component <Select/> renders with name 1`] = `
onClick={[Function]}
onKeyDown={[Function]}
onKeyPress={[Function]}
rotate={true}
tabIndex="-1"
>
<svg
Expand Down Expand Up @@ -892,6 +897,7 @@ exports[`<Select/> component <Select/> renders with separator 1`] = `
onClick={[Function]}
onKeyDown={[Function]}
onKeyPress={[Function]}
rotate={true}
tabIndex="-1"
>
<svg
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ exports[`<Clear/> component <DropdownHandle/> renders correctly 1`] = `
onClick={[Function]}
onKeyDown={[Function]}
onKeyPress={[Function]}
rotate={true}
tabIndex="-1"
>
<svg
Expand Down
35 changes: 35 additions & 0 deletions docs/src/examples/CustomDropdownHandle.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import React from 'react';
import { Heading } from './components/Heading';
import Select from '../../../src';
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live';
import theme from 'prism-react-renderer/themes/github';

const code = `<Select
options={options}
values={[]}
dropdownHandleRenderer={({ state }) => (
// if dropdown is open show "–" else show "+"
<span>{state.dropdown ? '–' : '+'}</span>
)}
onChange={(value) => console.log(value)}
/>`;

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

<LiveProvider theme={theme} code={code} scope={{ Select, options }}>
<LiveEditor />
<br />
<LiveError />
<LivePreview />
</LiveProvider>
</React.Fragment>
);

CustomDropdownHandle.propTypes = {};

export default CustomDropdownHandle;
5 changes: 5 additions & 0 deletions docs/src/pages/examples.js
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 CustomDropdownHandle from '../examples/CustomDropdownHandle';
import WithAnimation from '../examples/WithAnimation';

const demoOptions = options.map((option) => ({
Expand All @@ -50,6 +51,10 @@ const Examples = () => (
<Multi options={demoOptions} title="Multi" />
</Wrapper>

<Wrapper>
<CustomDropdownHandle options={demoOptions} title="Custom dropdown handle" />
</Wrapper>

<Wrapper>
<Styled options={demoOptions} title="Styled" />
</Wrapper>
Expand Down
119 changes: 43 additions & 76 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 68a172b

Please sign in to comment.