@retailmenot/anchor/ts/Pagination/Goto/Goto.components.js

A React UI Library by RetailMeNot

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
// VENDOR
import * as React from 'react';
import classNames from 'classnames';
import styled from '@xstyled/styled-components';
// ANCHOR
import { Input } from '../../Form';
// Todo: this component needs work for mobile and for accessibility.
const EventKeyCodes = {
    ENTER: 13,
};
const StyledGoto = styled('div') `
    width: 6rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 0.5rem;

    .anchor-input {
        margin-left: 0.5rem;
    }
`;
export const Goto = (_a) => {
    var { onSubmit, className } = _a, props = __rest(_a, ["onSubmit", "className"]);
    const [value, setValue] = React.useState(null);
    const handleSubmit = () => {
        if (onSubmit && value !== null) {
            onSubmit(value);
            setValue(null);
        }
    };
    return (React.createElement(StyledGoto, Object.assign({ className: classNames('anchor-pagination-goto', className) }, props),
        "Goto",
        React.createElement(Input, { type: "number", onChange: num => setValue(num), onKeyDown: event => {
                if (event.keyCode === EventKeyCodes.ENTER) {
                    handleSubmit();
                }
            }, value: value === null ? '' : value })));
};
//# sourceMappingURL=Goto.components.js.map