optimizely-oui
Version:
Optimizely's Component Library.
158 lines • 6.29 kB
JavaScript
import React from "react";
import { storiesOf } from "@storybook/react";
import { action } from "@storybook/addon-actions";
import { withKnobs } from "@storybook/addon-knobs";
import Dropdown from "../Dropdown";
import SearchPicker from "./index.js";
import Spinner from "../Spinner";
import Icon from "react-oui-icons";
import { getSearchFunction } from "./mock_api";
import Row from "../Layout/Row";
var searchFunction = getSearchFunction();
var stories = storiesOf("Experimental|SearchPicker", module);
stories.addDecorator(withKnobs).addDecorator(function (story) {
return React.createElement("div", {
id: "root-preview",
style: {
display: "flex",
flex: 1,
height: "100vh"
}
}, story());
});
stories.add("Default", function () {
return React.createElement(SearchPicker, {
onItemSelected: action("keyboard selection item"),
searchFunction: searchFunction,
supportedTypes: ["feature"]
}, function (_ref) {
var availableEntities = _ref.availableEntities,
renderInput = _ref.renderInput,
isLoading = _ref.isLoading,
searchQuery = _ref.searchQuery,
currentFauxFocusIndex = _ref.currentFauxFocusIndex,
resultsText = _ref.resultsText;
return React.createElement(Dropdown, {
width: 600,
fullWidth: true,
renderActivator: renderInput
}, React.createElement(Dropdown.Contents, {
minWidth: 600,
isLoading: isLoading
}, React.createElement(Dropdown.ListItem, {
ignoreToggle: true
}, React.createElement("span", {
className: "micro muted soft--sides"
}, resultsText.summary)), availableEntities.map(function (item, index) {
return React.createElement(Dropdown.ListItem, {
key: index
}, React.createElement(Dropdown.BlockLink, {
hasFauxFocus: currentFauxFocusIndex === index,
onClick: action("click dropdown block link ".concat(item.name))
}, React.createElement(Dropdown.BlockLinkText, {
text: item.name
}), React.createElement(Dropdown.BlockLinkSecondaryText, {
secondaryText: item.description
})));
}), isLoading && React.createElement(Spinner, {
hasOverlay: true
})));
});
}).add("With Create Button", function () {
return React.createElement(SearchPicker, {
onItemSelected: action("keyboard selection item"),
additionalItems: 1,
searchFunction: searchFunction,
supportedTypes: ["feature"]
}, function (_ref2) {
var availableEntities = _ref2.availableEntities,
renderInput = _ref2.renderInput,
isLoading = _ref2.isLoading,
searchQuery = _ref2.searchQuery,
currentFauxFocusIndex = _ref2.currentFauxFocusIndex,
resultsText = _ref2.resultsText;
return React.createElement(Dropdown, {
width: 600,
fullWidth: true,
renderActivator: renderInput
}, React.createElement(Dropdown.Contents, {
minWidth: 600,
isLoading: isLoading
}, React.createElement(Dropdown.ListItem, null, React.createElement(Dropdown.BlockLink, {
hasFauxFocus: currentFauxFocusIndex === 0,
onClick: action("click create dropdown block link")
}, React.createElement("div", {
className: "flex flex-align--center"
}, "Create new audience"))), React.createElement(Dropdown.ListItem, {
ignoreToggle: true
}, React.createElement("span", {
className: "micro muted soft--sides"
}, resultsText.summary)), availableEntities.map(function (item, index) {
return React.createElement(Dropdown.ListItem, {
key: index
}, React.createElement(Dropdown.BlockLink, {
hasFauxFocus: currentFauxFocusIndex === index + 1,
onClick: action("click dropdown block link ".concat(item.name))
}, React.createElement(Dropdown.BlockLinkText, {
text: item.name
}), React.createElement(Dropdown.BlockLinkSecondaryText, {
secondaryText: item.description
})));
}), isLoading && React.createElement(Spinner, {
hasOverlay: true
})));
});
}).add("In a Dropdown", function () {
return React.createElement(Dropdown, {
buttonContent: "Selected Variation Name",
arrowIcon: "down",
shouldHideChildrenOnClick: false,
style: "outline"
}, function (_ref3) {
var handleHideChildren = _ref3.handleHideChildren;
return React.createElement(Dropdown.Contents, {
minWidth: 600,
direction: "right"
}, React.createElement(Dropdown.ListItem, null, React.createElement(Dropdown.BlockLink, {
hasFauxFocus: false,
onClick: action("click create dropdown block link")
}, React.createElement(Row, {
verticalAlignment: "center",
paddedContent: "sides"
}, React.createElement(Icon, {
name: "add"
}), React.createElement("p", {
className: "soft--left flush"
}, "Create new variation")))), React.createElement(SearchPicker, {
onItemSelected: action("keyboard selection item"),
additionalItems: 1,
searchFunction: searchFunction,
supportedTypes: ["variation"]
}, function (_ref4) {
var availableEntities = _ref4.availableEntities,
renderInput = _ref4.renderInput,
isLoading = _ref4.isLoading,
searchQuery = _ref4.searchQuery,
currentFauxFocusIndex = _ref4.currentFauxFocusIndex,
resultsText = _ref4.resultsText;
return React.createElement(React.Fragment, null, React.createElement(Dropdown.ListItem, null, renderInput()), React.createElement(Dropdown.ListItem, {
ignoreToggle: true
}, React.createElement("span", {
className: "micro muted soft--sides"
}, resultsText.summary)), availableEntities.map(function (item, index) {
return React.createElement(Dropdown.ListItem, {
key: index
}, React.createElement(Dropdown.BlockLink, {
hasFauxFocus: currentFauxFocusIndex === index + 1,
onClick: action("click dropdown block link ".concat(item.name))
}, React.createElement(Dropdown.BlockLinkText, {
text: item.name
}), React.createElement(Dropdown.BlockLinkSecondaryText, {
secondaryText: item.description
})));
}), isLoading && React.createElement(Spinner, {
hasOverlay: true
}));
}));
});
});