- {type !== "large" && showSearchIcon &&
}
-
) => {
- onChange(e.target.value);
- }}
- ref={this.searchInputRef}
- value={value}
- {...inputProps}
- />
- {loading &&
}
- {clearable && (
-
{
- if (this.searchInputRef.current) {
- this.searchInputRef.current.value = "";
- }
- onChange("");
+
+
+ {type !== "large" && showSearchIcon && }
+ ) => {
+ onChange(e.target.value);
}}
- >
-
-
+ ref={this.searchInputRef}
+ value={value}
+ {...inputProps}
+ />
+ {loading &&
}
+ {clearable && (
+
{
+ if (this.searchInputRef.current) {
+ this.searchInputRef.current.value = "";
+ }
+ onChange("");
+ }}
+ >
+
+
+ )}
+
+ {message && (
+
{message}
)}
);
diff --git a/packages/pebble-web/src/components/shared/OptionGroup.tsx b/packages/pebble-web/src/components/shared/OptionGroup.tsx
index d8bea53e..d9510ae4 100644
--- a/packages/pebble-web/src/components/shared/OptionGroup.tsx
+++ b/packages/pebble-web/src/components/shared/OptionGroup.tsx
@@ -8,8 +8,9 @@ import Search from "../Search";
import {
searchBoxScrolledStyle,
searchBoxWrapper,
+ searchBoxHeight,
optionsWrapper,
- searchBoxHeight
+ searchBoxHeightWithMessage
} from "../styles/OptionGroup.styles";
import { rowWrapper, advancedActionsWrapper } from "../styles/Options.styles";
@@ -124,6 +125,7 @@ class OptionGroup
extends React.PureComponent<
searchBoxProps
} = this.props;
const { isScrolled, highlighted } = this.state;
+ const isMessagePresent = !!searchBoxProps?.message;
const _children = React.Children.map(children, (_option, i) => {
// `_option as React.ReactElement` is a hack
@@ -175,7 +177,11 @@ class OptionGroup extends React.PureComponent<
;
loading?: boolean;
+ message?: string;
+ wrapperClassName?: string;
}
diff --git a/packages/pebble-web/stories/search.story.tsx b/packages/pebble-web/stories/search.story.tsx
index 738be094..073bee94 100644
--- a/packages/pebble-web/stories/search.story.tsx
+++ b/packages/pebble-web/stories/search.story.tsx
@@ -26,6 +26,7 @@ storiesOf("Components/Search", module).add(
clearable={boolean("showClearButton", true)}
value={store.state.query}
loading={boolean("showLoading", false)}
+ message={text("message", "Search Message ")}
/>
))
);