lucid-ui
Version:
A UI component library from Xandr.
375 lines • 9.13 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Stateless = exports.Disabled = exports.Interactive = exports.Basic = void 0;
var react_1 = __importDefault(require("react"));
var lodash_1 = __importDefault(require("lodash"));
var create_react_class_1 = __importDefault(require("create-react-class"));
var Autocomplete_1 = require("./Autocomplete");
exports.default = {
title: 'Controls/Autocomplete',
component: Autocomplete_1.AutocompleteDumb,
parameters: {
docs: {
description: {
component: Autocomplete_1.AutocompleteDumb.peek.description,
},
},
},
};
/* Basic */
var Basic = function () {
var Component = (0, create_react_class_1.default)({
render: function () {
return (react_1.default.createElement(Autocomplete_1.AutocompleteDumb, { placeholder: 'Enter a word...', suggestions: [
'Portland',
'pinky and the brain',
'playa please',
'porridge',
'portal',
'potent potables',
'potent',
] }));
},
});
return react_1.default.createElement(Component, null);
};
exports.Basic = Basic;
/* Interactive */
var Interactive = function () {
var wordlist = [
'abaft',
'abounding',
'abrasive',
'accidental',
'actor',
'addition',
'adhesive',
'adjustment',
'advertisement',
'applaud',
'appreciate',
'awesome',
'ball',
'beautiful',
'beef',
'bell',
'bent',
'bite-sized',
'bitter',
'black',
'bloody',
'bulb',
'bump',
'calculator',
'camp',
'care',
'care',
'caring',
'celery',
'challenge',
'chase',
'cherries',
'chew',
'choke',
'circle',
'clean',
'club',
'coat',
'cold',
'colossal',
'command',
'competition',
'confuse',
'continue',
'crawl',
'curve',
'cute',
'dad',
'damaged',
'death',
'debonair',
'decorate',
'deeply',
'delicious',
'destroy',
'destruction',
'diligent',
'disapprove',
'discussion',
'doubtful',
'dress',
'drop',
'dust',
'eatable',
'educate',
'efficacious',
'elegant',
'elfin',
'embarrassed',
'enjoy',
'envious',
'exchange',
'excited',
'existence',
'fast',
'fear',
'flight',
'float',
'food',
'force',
'fork',
'frightening',
'geese',
'ghost',
'giant',
'gigantic',
'glow',
'goofy',
'grandiose',
'great',
'grumpy',
'guide',
'hair',
'hall',
'head',
'heat',
'hesitant',
'hill',
'home',
'horn',
'hospital',
'hurt',
'idea',
'ill-informed',
'immense',
'imminent',
'insect',
'insurance',
'intelligent',
'iron',
'jaded',
'jagged',
'jeans',
'jelly',
'judge',
'kitty',
'kneel',
'knot',
'knotty',
'letter',
'level',
'lie',
'lip',
'literate',
'loaf',
'lovely',
'madly',
'meaty',
'men',
'merciful',
'messy',
'minister',
'modern',
'multiply',
'muscle',
'mysterious',
'natural',
'naughty',
'neat',
'note',
'nut',
'nutritious',
'obedient',
'obsolete',
'old-fashioned',
'onerous',
'opposite',
'order',
'oval',
'painstaking',
'paint',
'pale',
'parallel',
'parched',
'park',
'past',
'pencil',
'perfect',
'permit',
'phobic',
'picture',
'pin',
'pink',
'please',
'plug',
'pop',
'possess',
'preserve',
'pretty',
'print',
'puffy',
'pushy',
'quarter',
'race',
'racial',
'raise',
'rampant',
'rare',
'record',
'release',
'retire',
'rhetorical',
'rhyme',
'ring',
'road',
'rub',
'rule',
'savory',
'scared',
'screw',
'seemly',
'selfish',
'shape',
'shiver',
'shrill',
'sign',
'signal',
'silk',
'silky',
'silly',
'simplistic',
'sister',
'skillful',
'sleep',
'small',
'smash',
'society',
'sofa',
'soggy',
'song',
'sound',
'soup',
'sparkling',
'spiders',
'spot',
'stage',
'standing',
'stare',
'steep',
'stiff',
'store',
'stranger',
'swanky',
'taste',
'tasteless',
'tax',
'telling',
'territory',
'third',
'thirsty',
'thumb',
'tiny',
'toe',
'touch',
'transport',
'tremble',
'trite',
'twist',
'two',
'umbrella',
'unkempt',
'unlock',
'unnatural',
'unsightly',
'uttermost',
'wait',
'walk',
'wander',
'warn',
'weary',
'wholesale',
'willing',
'winter',
'worthless',
'writer',
'zippy',
];
var Component = (0, create_react_class_1.default)({
getInitialState: function () {
return {
value: '',
};
},
handleChange: function (value) {
this.setState({
value: value,
});
},
render: function () {
var value = this.state.value;
var valuePattern = new RegExp(lodash_1.default.escapeRegExp(value), 'i');
var filteredWordList = value !== ''
? lodash_1.default.filter(wordlist, function (word) { return valuePattern.test(word); })
: wordlist;
return (react_1.default.createElement("section", null,
react_1.default.createElement("section", null,
"Current Value: ",
this.state.value),
react_1.default.createElement(Autocomplete_1.AutocompleteDumb, { placeholder: 'Enter a word...', suggestions: lodash_1.default.size(filteredWordList) <= 1 &&
lodash_1.default.first(filteredWordList) === value
? []
: filteredWordList, onChange: this.handleChange })));
},
});
return react_1.default.createElement(Component, null);
};
exports.Interactive = Interactive;
/* Disabled */
var Disabled = function () {
var Component = (0, create_react_class_1.default)({
render: function () {
return (react_1.default.createElement("section", { style: { minHeight: 100 } },
react_1.default.createElement(Autocomplete_1.AutocompleteDumb, { placeholder: 'Enter a word...', isDisabled: true })));
},
});
return react_1.default.createElement(Component, null);
};
exports.Disabled = Disabled;
/* Stateless */
var Stateless = function () {
/*eslint no-console: 0*/
var wordlist = [
'abaft',
'abounding',
'abrasive',
'accidental',
'actor',
'addition',
'adhesive',
'adjustment',
'advertisement',
'applaud',
'appreciate',
'awesome',
'abracadabra alakazam hocus pocus shazam say the magic word please if you will thank you very much',
];
var Component = (0, create_react_class_1.default)({
render: function () {
return (react_1.default.createElement(Autocomplete_1.AutocompleteDumb, { placeholder: 'Enter a word...', suggestions: wordlist, value: 'ab', onSelect: function (index) {
console.warn("selected: ".concat(wordlist[index]));
}, DropMenu: {
isExpanded: true,
focusedIndex: 2,
onCollapse: function () {
console.warn('onCollapse');
},
} }));
},
});
return react_1.default.createElement(Component, null);
};
exports.Stateless = Stateless;
//# sourceMappingURL=Autocomplete.stories.js.map