Search

Only visual elements for assembled whispers are defined here. The functional part is directly in the project in the react/search component

import React, { Fragment } from 'react';
import {
    Search,
    SearchInput,
    SearchActionButton,
    SearchResult,
    SearchResultList,
    SearchResultItem,
    SvgIcon,
} from 'seduo-ui';

const Example = () => (
    <Search isFocused={true}>
        <SearchInput value="Test" onChange={() => undefined} onToggle={() => undefined} onKeyDown={() => undefined} />
        <SearchResult isOpen={true}>
            <span className="search__section-headline">Category</span>
            <SearchResultList>
                <SearchResultItem
                    isActive={true}
                    title="Test Category"
                    subTitle="Interesting description"
                    href="#"
                    rightColumn={<Fragment>5 kurzů</Fragment>}
                    onMouseDown={() => undefined}
                    highlightValue={'Test'}
                >
                    <SvgIcon kind="Categories" className="search-list__icon" />
                </SearchResultItem>
                <SearchResultItem
                    isActive={false}
                    title="Test Category 2"
                    subTitle="I am not going to give a lengthy description of what is in this category."
                    href="#"
                    rightColumn={<Fragment>5 kurzů</Fragment>}
                    onMouseDown={() => undefined}
                    highlightValue={'Test'}
                >
                    <SvgIcon kind="Categories" className="search-list__icon" />
                </SearchResultItem>
            </SearchResultList>
        </SearchResult>
    </Search>
);

export default Example;

Properties

Search.Props = {|
  isFocused: boolean,
  isOpenable: boolean,
  children: Element<any>,
|};

Search.defaultProps = {
  isOpenable: true,
};

SearchInput.Props = {|
  placeholder: string,
  value: string,
  onChange: (value: string) => void,
  onToggle: (isFocused: boolean) => void,
  onKeyDown: (event: SyntheticKeyboardEvent<HTMLInputElement>) => void,
  isMobile: boolean,
|};

SearchResult.Props = {|
  isOpen: boolean,
  children: Element<any>,
|};

SearchResultList.Props = {|
  children: ChildrenArray<Element<typeof SearchResultItem>>,
|};

SearchResultItem.Props = {|
  isActive: boolean,
  href: string,
  title: string,
  subTitle?: string,
  rightColumn: Element<typeof Fragment> | string,
  highlightValue: string,
  onMouseDown: onMouseDownFunctionType,
  children: Element<any>,
|};
            

Search Inputs

import React, { Fragment } from 'react';
import { SearchInput } from 'seduo-ui';

const Example = () => (
    <Fragment>
        <SearchInput value="Test" onChange={() => undefined} onToggle={() => undefined} onKeyDown={() => undefined} />

        <div className="pt-5">
            <SearchInput
                placeholder="Test placeholder"
                onChange={() => undefined}
                onToggle={() => undefined}
                onKeyDown={() => undefined}
            />
        </div>
    </Fragment>
);

export default Example;