From 61114c41e58225aa4c912979fdec77114ce1a8d9 Mon Sep 17 00:00:00 2001 From: Kannan Balasubramanian Date: Thu, 20 Aug 2020 23:36:12 +0530 Subject: [PATCH 1/2] Clear Icon added for search input --- README.md | 1 + src/lib/interfaces.ts | 3 ++ src/multi-select/index.tsx | 2 ++ src/select-panel/index.tsx | 58 ++++++++++++++++++++++++++++++++------ 4 files changed, 56 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index b6c1944..1a58143 100644 --- a/README.md +++ b/README.md @@ -80,6 +80,7 @@ export default Example; | `className` | class name for parent component | `string` | `multi-select` | | `valueRenderer` | custom dropdown header [docs](#-custom-value-renderer) | `function` | | | `ItemRenderer` | custom dropdown option [docs](#-custom-item-renderer) | `function` | | +| `ClearIcon` | Custom Clear Icon for Search | `React Node` |`ⓧ` | ## 🔍 Custom filter logic diff --git a/src/lib/interfaces.ts b/src/lib/interfaces.ts index 3a249ba..de6e2bf 100644 --- a/src/lib/interfaces.ts +++ b/src/lib/interfaces.ts @@ -1,3 +1,5 @@ +import { ReactNode } from "react"; + export interface ITheme { primary: string; hover: string; @@ -34,4 +36,5 @@ export interface ISelectProps { labelledBy: string; className?: string; onMenuToggle?; + ClearIcon?: ReactNode; } diff --git a/src/multi-select/index.tsx b/src/multi-select/index.tsx index a20353c..b24a985 100644 --- a/src/multi-select/index.tsx +++ b/src/multi-select/index.tsx @@ -45,6 +45,7 @@ const MultiSelect = ({ filterOptions, labelledBy, onMenuToggle, + ClearIcon, }: ISelectProps) => { const nvalue = value || []; return ( @@ -65,6 +66,7 @@ const MultiSelect = ({ focusSearchOnOpen, filterOptions, overrideStrings, + ClearIcon, }} disabled={disabled} labelledBy={labelledBy} diff --git a/src/select-panel/index.tsx b/src/select-panel/index.tsx index 8899101..5663cc6 100644 --- a/src/select-panel/index.tsx +++ b/src/select-panel/index.tsx @@ -24,6 +24,7 @@ interface ISelectPanelProps { hasSelectAll: boolean; filterOptions?: (options: Option[], filter: string) => Option[]; overrideStrings?: { [key: string]: string }; + ClearIcon?; } enum FocusType { @@ -33,6 +34,7 @@ enum FocusType { const SelectSearchContainer = css({ width: "100%", + position: "relative", borderBottom: "1px solid var(--rmsc-border)", input: { height: "var(--rmsc-h)", @@ -43,6 +45,28 @@ const SelectSearchContainer = css({ }, }); +const SearchClearButton = css({ + position: "absolute", + top: "50%", + right: "11px", + display: "inline-block", + width: "12px", + height: "12px", + marginTop: "-6px", + fontSize: "12px", + fontStyle: "normal", + lineHeight: "1", + textAlign: "center", + textTransform: "none", + background: "#fff", + cursor: "pointer", + paddingLeft: "5px", + "& > *": { + maxHeight: "12px", + maxWidth: "12px", + }, +}); + export const SelectPanel = (props: ISelectPanelProps) => { const { onChange, @@ -56,6 +80,7 @@ export const SelectPanel = (props: ISelectPanelProps) => { focusSearchOnOpen, hasSelectAll, overrideStrings, + ClearIcon, } = props; const [searchText, setSearchText] = useState(""); const [focusIndex, setFocusIndex] = useState( @@ -93,8 +118,16 @@ export const SelectPanel = (props: ISelectPanelProps) => { setFocusIndex(FocusType.SEARCH); }; + const handleClear = () => { + setSearchText(""); + }; + const handleItemClicked = (index: number) => setFocusIndex(index); + const FinalClearIcon = React.isValidElement(ClearIcon) + ? React.cloneElement(ClearIcon) + : null; + const handleKeyDown = (e) => { switch (e.which) { case 38: // Up Arrow @@ -136,14 +169,23 @@ export const SelectPanel = (props: ISelectPanelProps) => {
{!disableSearch && (
- + + + + + {FinalClearIcon ? FinalClearIcon : "ⓧ"} +
)} From f28a518e1520558f48e52db7b9580760c7c6288e Mon Sep 17 00:00:00 2001 From: harshzalavadiya Date: Fri, 4 Sep 2020 20:46:47 +0530 Subject: [PATCH 2/2] :recycle: cleanup --- README.md | 5 +-- src/lib/get-string.tsx | 1 + src/lib/interfaces.ts | 4 +-- src/select-panel/cross.tsx | 17 ++++++++++ src/select-panel/index.tsx | 63 +++++++++++++++----------------------- 5 files changed, 47 insertions(+), 43 deletions(-) create mode 100644 src/select-panel/cross.tsx diff --git a/README.md b/README.md index 1a58143..4d0c7cc 100644 --- a/README.md +++ b/README.md @@ -80,7 +80,7 @@ export default Example; | `className` | class name for parent component | `string` | `multi-select` | | `valueRenderer` | custom dropdown header [docs](#-custom-value-renderer) | `function` | | | `ItemRenderer` | custom dropdown option [docs](#-custom-item-renderer) | `function` | | -| `ClearIcon` | Custom Clear Icon for Search | `React Node` |`ⓧ` | +| `ClearIcon` | Custom Clear Icon for Search | `string|function` | | ## 🔍 Custom filter logic @@ -107,7 +107,8 @@ default values for `overrideStrings` are as below "selectSomeItems": "Select...", "allItemsAreSelected": "All items are selected.", "selectAll": "Select All", - "search": "Search" + "search": "Search", + "clearSearch": "Clear Search" } ``` diff --git a/src/lib/get-string.tsx b/src/lib/get-string.tsx index 783f77a..b2b52d4 100644 --- a/src/lib/get-string.tsx +++ b/src/lib/get-string.tsx @@ -3,6 +3,7 @@ const strings = { allItemsAreSelected: "All items are selected.", selectAll: "Select All", search: "Search", + clearSearch: "Clear Search", }; export default function getString(key: string, overrideStrings?): string { diff --git a/src/lib/interfaces.ts b/src/lib/interfaces.ts index de6e2bf..c2d8698 100644 --- a/src/lib/interfaces.ts +++ b/src/lib/interfaces.ts @@ -1,5 +1,3 @@ -import { ReactNode } from "react"; - export interface ITheme { primary: string; hover: string; @@ -36,5 +34,5 @@ export interface ISelectProps { labelledBy: string; className?: string; onMenuToggle?; - ClearIcon?: ReactNode; + ClearIcon?: string | Function; } diff --git a/src/select-panel/cross.tsx b/src/select-panel/cross.tsx new file mode 100644 index 0000000..b1152b9 --- /dev/null +++ b/src/select-panel/cross.tsx @@ -0,0 +1,17 @@ +import React from "react"; + +const Cross = () => ( + + + + +); + +export default Cross; diff --git a/src/select-panel/index.tsx b/src/select-panel/index.tsx index 5663cc6..57e5053 100644 --- a/src/select-panel/index.tsx +++ b/src/select-panel/index.tsx @@ -9,6 +9,7 @@ import React, { useEffect, useState } from "react"; import { filterOptions } from "../lib/fuzzy-match-utils"; import getString from "../lib/get-string"; import { Option } from "../lib/interfaces"; +import Cross from "./cross"; import SelectItem from "./select-item"; import SelectList from "./select-list"; @@ -46,24 +47,16 @@ const SelectSearchContainer = css({ }); const SearchClearButton = css({ - position: "absolute", - top: "50%", - right: "11px", - display: "inline-block", - width: "12px", - height: "12px", - marginTop: "-6px", - fontSize: "12px", - fontStyle: "normal", - lineHeight: "1", - textAlign: "center", - textTransform: "none", - background: "#fff", cursor: "pointer", - paddingLeft: "5px", - "& > *": { - maxHeight: "12px", - maxWidth: "12px", + position: "absolute", + top: 0, + right: 0, + bottom: 0, + background: "none", + border: 0, + padding: "0 calc(var(--rmsc-p)/2)", + "[hidden]": { + display: "none", }, }); @@ -118,16 +111,10 @@ export const SelectPanel = (props: ISelectPanelProps) => { setFocusIndex(FocusType.SEARCH); }; - const handleClear = () => { - setSearchText(""); - }; + const handleClear = () => setSearchText(""); const handleItemClicked = (index: number) => setFocusIndex(index); - const FinalClearIcon = React.isValidElement(ClearIcon) - ? React.cloneElement(ClearIcon) - : null; - const handleKeyDown = (e) => { switch (e.which) { case 38: // Up Arrow @@ -169,23 +156,23 @@ export const SelectPanel = (props: ISelectPanelProps) => {
{!disableSearch && (
- - - - +
)}