lucid-ui/dist/cjs/components/SearchField/SearchField.stories.js

A UI component library from Xandr.

"use strict";
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Debounced = exports.Props = exports.ValidSearch = exports.CustomTextField = exports.CustomIcon = exports.Disabled = exports.Placeholder = exports.Interactive = exports.Basic = void 0;
var react_1 = __importStar(require("react"));
var Button_1 = __importDefault(require("../Button/Button"));
var SearchField_1 = require("./SearchField");
var LoadingIcon_1 = __importDefault(require("../Icon/LoadingIcon/LoadingIcon"));
exports.default = {
    title: 'Controls/SearchField',
    component: SearchField_1.SearchFieldDumb,
    parameters: {
        docs: {
            description: {
                component: SearchField_1.SearchFieldDumb.peek.description,
            },
        },
    },
};
var Basic = function (args) {
    return react_1.default.createElement(SearchField_1.SearchFieldDumb, __assign({}, args));
};
exports.Basic = Basic;
var Interactive = function (args) {
    var _a = (0, react_1.useState)(''), state = _a[0], setState = _a[1];
    return (react_1.default.createElement("div", null,
        react_1.default.createElement(SearchField_1.SearchFieldDumb, __assign({}, args, { onSubmit: function (value) { return setState(value); } })),
        react_1.default.createElement("div", { style: { marginTop: '10px', marginLeft: '10px' } },
            "Hit \"enter\" to submit: ",
            state)));
};
exports.Interactive = Interactive;
var Placeholder = function (args) {
    return react_1.default.createElement(SearchField_1.SearchFieldDumb, __assign({}, args, { placeholder: 'Name/ID' }));
};
exports.Placeholder = Placeholder;
var Disabled = function (args) {
    return react_1.default.createElement(SearchField_1.SearchFieldDumb, __assign({}, args, { isDisabled: true }));
};
exports.Disabled = Disabled;
var CustomIcon = function (args) {
    return (react_1.default.createElement(SearchField_1.SearchFieldDumb, __assign({}, args),
        react_1.default.createElement(SearchField_1.SearchFieldDumb.Icon, null,
            react_1.default.createElement(LoadingIcon_1.default, null))));
};
exports.CustomIcon = CustomIcon;
var CustomTextField = function (args) {
    var _a = (0, react_1.useState)({
        value: '',
        submission: '',
        lastValue: '',
    }), state = _a[0], setState = _a[1];
    var _b = (0, react_1.useState)(''), key = _b[0], setKey = _b[1];
    return (react_1.default.createElement("div", null,
        react_1.default.createElement(SearchField_1.SearchFieldDumb, __assign({}, args, { placeholder: 'Name/ID' }),
            react_1.default.createElement(SearchField_1.SearchFieldDumb.TextField, { value: state.value, onSubmit: function (submission) { return setState(__assign(__assign({}, state), { submission: submission })); }, onChange: function (value) { return setState(__assign(__assign({}, state), { value: value })); }, onKeyDown: function (_a) {
                    var key = _a.event.key;
                    return setKey(key);
                }, onBlur: function (lastValue) { return setState(__assign(__assign({}, state), { lastValue: lastValue })); } })),
        react_1.default.createElement("div", { style: { marginTop: '10px', marginLeft: '10px' } },
            react_1.default.createElement("div", null,
                "Hit \"enter\" to submit: ",
                state.submission),
            react_1.default.createElement("div", null,
                "Last keydown: ",
                key),
            react_1.default.createElement("div", null,
                "Value on blur: ",
                state.lastValue))));
};
exports.CustomTextField = CustomTextField;
var ValidSearch = function (args) {
    var _a = (0, react_1.useState)({
        value: '',
        submission: '',
        lastValue: '',
    }), state = _a[0], setState = _a[1];
    return (react_1.default.createElement(SearchField_1.SearchFieldDumb, __assign({}, args, { placeholder: "Search icon doesn't become active until you type at least three characters ----->", isValid: state.value.length > 2, value: state.value, onSubmit: function (submission) { return setState(__assign(__assign({}, state), { submission: submission })); }, onChange: function (value) { return setState(__assign(__assign({}, state), { value: value })); } })));
};
exports.ValidSearch = ValidSearch;
var Props = function (args) {
    return (react_1.default.createElement("div", null,
        react_1.default.createElement(SearchField_1.SearchFieldDumb, __assign({}, args, { value: 'foo' })),
        react_1.default.createElement(SearchField_1.SearchFieldDumb, __assign({}, args, { placeholder: 'bar' })),
        react_1.default.createElement(SearchField_1.SearchFieldDumb, __assign({}, args, { isDisabled: true })),
        react_1.default.createElement(SearchField_1.SearchFieldDumb, __assign({}, args, { isValid: false })),
        react_1.default.createElement(SearchField_1.SearchFieldDumb, __assign({}, args),
            react_1.default.createElement(SearchField_1.SearchFieldDumb.Icon, null,
                react_1.default.createElement(LoadingIcon_1.default, null))),
        react_1.default.createElement(SearchField_1.SearchFieldDumb, __assign({}, args, { value: 'foo' }),
            react_1.default.createElement(SearchField_1.SearchFieldDumb.Icon, null,
                react_1.default.createElement(LoadingIcon_1.default, null))),
        react_1.default.createElement(SearchField_1.SearchFieldDumb, __assign({}, args),
            react_1.default.createElement(SearchField_1.SearchFieldDumb.TextField, { value: 'bar' }))));
};
exports.Props = Props;
var Debounced = function (args) {
    var _a = (0, react_1.useState)('foo'), value = _a[0], setValue = _a[1];
    return (react_1.default.createElement("div", null,
        react_1.default.createElement(SearchField_1.SearchFieldDumb, __assign({}, args, { style: { marginBottom: '10px' }, value: value, onChangeDebounced: function (value) { return setValue(value); } })),
        react_1.default.createElement("div", { style: {
                marginBottom: '10px',
                marginLeft: '10px',
            } },
            "Value: ",
            value),
        react_1.default.createElement(Button_1.default, __assign({}, Button_1.default.defaultProps, { onClick: function () {
                setValue('foo');
            } }), "Set TextField to \"foo\"")));
};
exports.Debounced = Debounced;
//# sourceMappingURL=SearchField.stories.js.map