FIX (dropdownHandle) [#61, 82]: make dropdownHandleRenderer simpler

sanusart · Mar 27, 2020 · 86a5ba2 · 86a5ba2
1 parent c84bf47
commit 86a5ba2
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 20 deletions.
diff --git a/__tests__/__snapshots__/index.spec.js.snap b/__tests__/__snapshots__/index.spec.js.snap
@@ -126,6 +126,7 @@ exports[`<Select/> component <Select/> is disabled 1`] = `
       onClick={[Function]}
       onKeyDown={[Function]}
       onKeyPress={[Function]}
+      rotate={true}
       tabIndex="-1"
     >
       <svg
@@ -265,6 +266,7 @@ exports[`<Select/> component <Select/> renders correctly 1`] = `
       onClick={[Function]}
       onKeyDown={[Function]}
       onKeyPress={[Function]}
+      rotate={true}
       tabIndex="-1"
     >
       <svg
@@ -426,6 +428,7 @@ exports[`<Select/> component <Select/> renders with clearable 1`] = `
       onClick={[Function]}
       onKeyDown={[Function]}
       onKeyPress={[Function]}
+      rotate={true}
       tabIndex="-1"
     >
       <svg
@@ -590,6 +593,7 @@ exports[`<Select/> component <Select/> renders with loading 1`] = `
       onClick={[Function]}
       onKeyDown={[Function]}
       onKeyPress={[Function]}
+      rotate={true}
       tabIndex="-1"
     >
       <svg
@@ -744,6 +748,7 @@ exports[`<Select/> component <Select/> renders with name 1`] = `
       onClick={[Function]}
       onKeyDown={[Function]}
       onKeyPress={[Function]}
+      rotate={true}
       tabIndex="-1"
     >
       <svg
@@ -893,6 +898,7 @@ exports[`<Select/> component <Select/> renders with separator 1`] = `
       onClick={[Function]}
       onKeyDown={[Function]}
       onKeyPress={[Function]}
+      rotate={true}
       tabIndex="-1"
     >
       <svg

diff --git a/__tests__/components/__snapshots__/DropdownHandle.spec.js.snap b/__tests__/components/__snapshots__/DropdownHandle.spec.js.snap
@@ -25,6 +25,7 @@ exports[`<Clear/> component <DropdownHandle/> renders correctly 1`] = `
   onClick={[Function]}
   onKeyDown={[Function]}
   onKeyPress={[Function]}
+  rotate={true}
   tabIndex="-1"
 >
   <svg

diff --git a/docs/src/examples/CustomDropdownHandle.js b/docs/src/examples/CustomDropdownHandle.js
@@ -0,0 +1,32 @@
+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={() => (<span>v</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;
diff --git a/docs/src/pages/examples.js b/docs/src/pages/examples.js
@@ -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';
 
 const demoOptions = options.map((option) => ({
   ...option,
@@ -49,6 +50,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>

diff --git a/src/components/DropdownHandle.js b/src/components/DropdownHandle.js
@@ -2,35 +2,37 @@ import React from 'react';
 import styled from '@emotion/styled';
 import { LIB_NAME } from '../constants';
 
-const DropdownHandle = ({ props, state, methods }) =>
-  props.dropdownHandleRenderer ? (
-    props.dropdownHandleRenderer({ props, state, methods })
-  ) : (
-    <DropdownHandleComponent
-      tabIndex="-1"
-      onClick={(event) => methods.dropDown(state.dropdown ? 'close': 'open', event)}
-      dropdownOpen={state.dropdown}
-      onKeyPress={(event) => methods.dropDown('toggle', event)}
-      onKeyDown={(event) => methods.dropDown('toggle', event)}
-      className={`${LIB_NAME}-dropdown-handle`}
-      color={props.color}>
-      <svg fill="currentColor" viewBox="0 0 40 40"><path d="M31 26.4q0 .3-.2.5l-1.1 1.2q-.3.2-.6.2t-.5-.2l-8.7-8.8-8.8 8.8q-.2.2-.5.2t-.5-.2l-1.2-1.2q-.2-.2-.2-.5t.2-.5l10.4-10.4q.3-.2.6-.2t.5.2l10.4 10.4q.2.2.2.5z"/></svg>
-    </DropdownHandleComponent>
-  );
+const DropdownHandle = ({ props, state, methods }) => (
+  <DropdownHandleComponent
+    tabIndex="-1"
+    onClick={(event) => methods.dropDown(state.dropdown ? 'close' : 'open', event)}
+    dropdownOpen={state.dropdown}
+    onKeyPress={(event) => methods.dropDown('toggle', event)}
+    onKeyDown={(event) => methods.dropDown('toggle', event)}
+    className={`${LIB_NAME}-dropdown-handle`}
+    rotate={!props.dropdownHandleRenderer}
+    color={props.color}>
+    {props.dropdownHandleRenderer ? (
+      props.dropdownHandleRenderer({ props, state, methods })
+    ) : (
+      <svg fill="currentColor" viewBox="0 0 40 40">
+        <path d="M31 26.4q0 .3-.2.5l-1.1 1.2q-.3.2-.6.2t-.5-.2l-8.7-8.8-8.8 8.8q-.2.2-.5.2t-.5-.2l-1.2-1.2q-.2-.2-.2-.5t.2-.5l10.4-10.4q.3-.2.6-.2t.5.2l10.4 10.4q.2.2.2.5z" />
+      </svg>
+    )}
+  </DropdownHandleComponent>
+);
 
 const DropdownHandleComponent = styled.div`
   text-align: center;
-  ${({ dropdownOpen }) =>
+  ${({ dropdownOpen, rotate }) =>
     dropdownOpen
       ? `
       pointer-events: all;
-      transform: rotate(0deg);
-      margin: 0px 0 -3px 5px;
+      ${rotate ? 'transform: rotate(0deg);margin: 0px 0 -3px 5px;' : ''}
       `
       : `
       pointer-events: none;
-      margin: 0 0 0 5px;
-      transform: rotate(180deg);
+      ${rotate ? 'margin: 0 0 0 5px;transform: rotate(180deg);' : ''}
       `};
   cursor: pointer;