How to use wix-react-tools - 10 common examples

onLoad?: (event: ImageEvent) => void;
    onError?: (event: ImageEvent) => void;
    defaultImage?: string;
    errorImage?: string;
}

export enum ImageStatus { Loaded, Loading, Error }

export interface ImageState {
    src: string;
    status: ImageStatus;
}

@properties
@stylable(styles)
export class Image extends React.PureComponent {
    public static defaultProps: Partial = {
        onLoad: noop,
        onError: noop
    };

    public render() {
        const {
            // these two are always set on the root
            style,
            className,

            // shouldn't be printed to DOM
            defaultImage,
            errorImage,
            resizeMode,

// Component-specific props
    filter?: AutocompleteFilterPredicate;
    maxShownSuggestions?: number;
    minCharacters?: number;
    noSuggestionsNotice?: React.ReactChild;
    onOpenStateChange?: (e: ChangeEvent) => void;
    open?: boolean;
    openOnFocus?: boolean;
}

const prefixFilter: AutocompleteFilterPredicate = (itemLabel: string, filterString: string) => {
    return itemLabel.toLowerCase().startsWith(filterString.toLowerCase());
};

@stylable(style)
@properties
@observer
export class AutoComplete extends React.Component {
    public static defaultProps: AutoCompleteProps = {
        autoFocus: false,
        disabled: false,
        onChange: noop,
        readOnly: false,

        filter: prefixFilter,
        maxShownSuggestions: Infinity,
        minCharacters: 0,
        onOpenStateChange: noop,
        open: false,
        openOnFocus: false,
        value: ''

import * as React from 'react';
import {properties, stylable} from 'wix-react-tools';
import {FormInputProps} from '../../types/forms';
import {StylableProps} from '../../types/props';
import {noop} from '../../utils';
import style from './radio-button.st.css';

export interface RadioButtonProps extends FormInputProps, StylableProps {
    checked?: boolean;
}

export interface RadioButtonState {
    isFocused: boolean;
}

@stylable(style)
@properties
export class RadioButton extends React.Component {
    public static defaultProps: Partial = {
        onChange: noop,
        checked: false, // required for a bug in firefox
        tabIndex: 0
    };

    public state: RadioButtonState = {isFocused: false};

    private nativeInput: HTMLInputElement;

    public render() {
        const styleState = {
            checked: this.props.checked,
            disabled: this.props.disabled,

export interface DropDownProps extends OptionList, FormInputProps, properties.Props {
    open?: boolean;
    disabled?: boolean;
    openOnFocus?: boolean;
    children?: React.ReactNode;
    // toggleIcon?: React.ReactNode;
    tabIndex?: number;
    onOpenStateChange?: (e: ChangeEvent) => void;
}

export interface DropDownState {
    dropdown: HTMLDivElement | null;
}

@stylable(style)
@properties
export class DropDown extends React.PureComponent {
    public static defaultProps: DropDownProps = {
        children: [],
        onChange: noop,
        tabIndex: 0,
        disabled: false,
        onOpenStateChange: noop
    };

    public state: DropDownState = {
        dropdown: null
    };

    public onItemClick = (e: ChangeEvent) => {
        this.closeDropdown();

export const WithTheme = (Node?: React.ReactNode, daid?: string, theme = styles): React.SFC => {
    return stylable(theme)(
        () =&gt; <div data-automation-id="{WithThemeDAID}">{Node}</div>
    );
};

const isAmpm = format === 'ampm';
    if (!value) {
        return {
            ampm: isAmpm ? Ampm.PM : Ampm.NONE
        };
    }
    const [hh24, mm] = value.split(':').map(Number);
    const {hh, ampm} = toAmpm(hh24);
    return {
        mm: formatTimeChunk(mm),
        hh: formatTimeChunk(isAmpm ? hh : hh24),
        ampm: isAmpm ? ampm : Ampm.NONE
    };
}

@stylable(styles)
export class TimePicker extends React.Component {
    public static defaultProps: Partial = {
        format: is12TimeFormat ? 'ampm' : '24h',
        disabled: false,
        error: false,
        rtl: false,
        required: false
    };
    private nativeInput: HTMLInputElement | null;
    private segments: {
        hh?: HTMLInputElement | null,
        mm?: HTMLInputElement | null,
        ampm?: HTMLDivElement | null
    };
    private lastValue: string | undefined;

readOnly?: boolean;
    showDropdownOnInit?: boolean;
    startingDay?: number;
    calendarIcon?: React.ComponentType;
}

export interface DatePickerState {
    inputValue: string;
    isDropdownVisible: boolean;
    dropdownRef: HTMLDivElement | null;
    dropdownDate: Date;
    highlightSelectedDate: boolean;
    highlightFocusedDate: boolean;
}

@stylable(styles)
@properties
export class DatePicker extends React.PureComponent {
    public static defaultProps: Partial = {
        openOnFocus: false,
        onChange: noop,
        calendarIcon: CalendarIcon
    };

    public componentWillMount() {
        this.setState({
            inputValue: this.props.value ? this.props.value.toDateString() : '',
            isDropdownVisible: this.props.showDropdownOnInit || false,
            dropdownDate: this.props.value || new Date()
        });
    }

focusedDate?: Date;
    startingDay?: number;
    highlightSelectedDate?: boolean;
    highlightFocusedDate?: boolean;
    disableWeekends?: boolean;
    onChange(date: Date): void;
    updateDropdownDate(date: Date): void;
}

export interface CalendarState {
    showMonthView: boolean;
}

const monthNames = getMonthNames();

@stylable(styles)
@observer
export class Calendar extends React.Component {
    public state: CalendarState = {showMonthView: false};

    public render() {
        return (
            <div data-automation-id="DATE_PICKER_CALENDAR">
                <div><div></div>
                <div data-automation-id="DATE_PICKER_DROPDOWN">
                    <div>
                        <span data-automation-id="PREV_MONTH_BUTTON">
                            <i></i></span></div></div></div></div>

const DEFAULTS: DefaultProps = {
    step: 1,
    min: -Infinity,
    max: Infinity,
    onChange: noop,
    onInput: noop
};

function getPropWithDefault(
    props: NumberInputProps,
    name: Prop
): (DefaultProps & NumberInputProps)[Prop] {
    return props[name] === undefined ? DEFAULTS[name] : props[name];
}

@stylable(styles)
export class NumberInput extends React.Component {
    public static defaultProps = {
        onChange: DEFAULTS.onChange,
        onInput: DEFAULTS.onInput
    };

    private committed = true;

    private inputRef: HTMLInputElement | null = null;

    private get isUncontrolled(): boolean {
        return this.props.defaultValue !== undefined;
    }

    private get currentValue(): number | undefined {
        return (

import * as React from 'react';
import {properties, stylable} from 'wix-react-tools';
import styles from './date-picker.st.css';

export interface DayProps extends properties.Props {
    day: number;
    selected?: boolean;
    currentDay?: boolean;
    focused?: boolean;
    partOfPrevMonth?: boolean;
    partOfNextMonth?: boolean;
    onSelect?(day: number): void;
}

@observer
@stylable(styles)
@properties
export class Day extends React.Component {
    public render() {
        const styleState = {
            focused: this.props.focused!,
            selected: this.props.selected!,
            current: this.props.currentDay!,
            inactive: this.props.partOfNextMonth! || this.props.partOfPrevMonth!
        };

        return (
            <span></span>