import { ActionBar, ActionButton } from '@storybook/components';
import { Actions, Action, Wrapper, InspectorContainer, Countwrap, Counter } from './style';
const ActionLogger = withCSSContext(({ actions, onClear }, { theme }) => (
<Wrapper>
<Actions>
{actions.map(action => (
<Action key={action.id}>
<Countwrap>{action.count > 1 && <Counter>{action.count}</Counter>}</Countwrap>
<InspectorContainer>
<Inspector
theme={theme.addonActionsTheme || 'chromeLight'}
sortObjectKeys
showNonenumerable={false}
name={action.data.name}
data={action.data.args || action.data}
/>
</InspectorContainer>
</Action>
))}
</Actions>
<ActionBar>
<ActionButton onClick={onClear}>CLEAR</ActionButton>
</ActionBar>
</Wrapper>
));
ActionLogger.propTypes = {
onClear: PropTypes.func.isRequired,
actions: PropTypes.arrayOf(
contentLabel="Search"
shouldReturnFocusAfterClose={false}
>
<FuzzySearch
list={formatStories(stories)}
onSelect={this.onSelect}
keys={['value', 'type']}
resultsTemplate={suggestionTemplate}
ref={inputRef => {
this.inputRef = inputRef;
}}
/>
</ReactModal>
);
}
}
SearchBox.defaultProps = { stories: [] };
SearchBox.propTypes = {
theme: PropTypes.shape({}).isRequired,
showSearchBox: PropTypes.bool.isRequired,
stories: PropTypes.arrayOf(PropTypes.object),
onSelectStory: PropTypes.func.isRequired,
onClose: PropTypes.func.isRequired,
};
export { SearchBox };
polyfill(SearchBox);
export default withCSSContext((props, { theme }) => <SearchBox {...props} theme={theme} />);