@carbon/ibm-security/lib/components/SearchBar/SearchBar-story.js

Carbon for Cloud & Cognitive IBM Security UI components

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _addonActions = require("@storybook/addon-actions");
var _addonKnobs = require("@storybook/addon-knobs");
var _react = require("@storybook/react");
var _react2 = _interopRequireDefault(require("react"));
var _recompose = require("recompose");
var _storybook = require("../../../.storybook");
var _ = require("../..");
var _mocks_ = _interopRequireDefault(require("./_mocks_"));
/**
 * @file Search bar stories.
 * @copyright IBM Security 2019
 */

var SearchBarWithStateHandlers = (0, _recompose.compose)((0, _recompose.withState)('selectedScopes', 'updateSelectedScopes', function (_ref) {
  var _ref$selectedScopes = _ref.selectedScopes,
    selectedScopes = _ref$selectedScopes === void 0 ? [] : _ref$selectedScopes;
  return selectedScopes;
}), (0, _recompose.withState)('value', 'updateValue', function (_ref2) {
  var _ref2$value = _ref2.value,
    value = _ref2$value === void 0 ? '' : _ref2$value;
  return value;
}), (0, _recompose.withHandlers)({
  onChange: function onChange(_ref3) {
    var _onChange = _ref3.onChange,
      updateSelectedScopes = _ref3.updateSelectedScopes,
      updateValue = _ref3.updateValue;
    return function (searchObject) {
      var selectedScopes = searchObject.selectedScopes,
        value = searchObject.value;
      _onChange(searchObject);
      updateSelectedScopes(selectedScopes);
      updateValue(value);
    };
  }
}))(_.SearchBar);
SearchBarWithStateHandlers.displayName = (0, _recompose.getDisplayName)(_.SearchBar);
SearchBarWithStateHandlers.__docgenInfo = _.SearchBar.__docgenInfo;
var allSelectedScopesLabel = _mocks_.default.allSelectedScopesLabel,
  clearButtonLabelText = _mocks_.default.clearButtonLabelText,
  labelText = _mocks_.default.labelText,
  placeHolderText = _mocks_.default.placeHolderText,
  _scopes = _mocks_.default.scopes,
  selectedScopes = _mocks_.default.selectedScopes,
  scopesTypeLabel = _mocks_.default.scopesTypeLabel,
  submitLabel = _mocks_.default.submitLabel,
  value = _mocks_.default.value;
var storyProps = {
  regular: function regular() {
    return {
      submitLabel: (0, _addonKnobs.text)('Submit label (submitLabel)', submitLabel),
      placeHolderText: (0, _addonKnobs.text)('Placeholder (placeholderText)', placeHolderText),
      labelText: labelText,
      clearButtonLabelText: clearButtonLabelText,
      onChange: (0, _addonActions.action)('onChange'),
      onSubmit: (0, _addonActions.action)('onSubmit')
    };
  },
  scopes: function scopes() {
    return {
      scopes: _scopes,
      scopesTypeLabel: (0, _addonKnobs.text)('Scopes type label (scopesTypeLabel)', scopesTypeLabel),
      allSelectedScopesLabel: (0, _addonKnobs.text)('All selected scopes label (allSelectedScopesLabel)', allSelectedScopesLabel),
      scopeToString: function scopeToString(_ref4) {
        var name = _ref4.name;
        return name;
      },
      hideScopesLabel: (0, _addonKnobs.boolean)('Hide scopes label (hideScopesLabel)', true)
    };
  },
  translationIds: {
    'close.menu': 'Close the menu',
    'open.menu': 'Open the menu',
    'clear.all': 'Clear all scopes',
    'clear.selection': 'Clear scope'
  }
};
var regular = storyProps.regular,
  scopesProps = storyProps.scopes,
  translationIds = storyProps.translationIds;
(0, _react.storiesOf)((0, _storybook.patterns)('SearchBar'), module).add('Default', function () {
  return /*#__PURE__*/_react2.default.createElement(SearchBarWithStateHandlers, regular());
}).add('Initial value', function () {
  return /*#__PURE__*/_react2.default.createElement(SearchBarWithStateHandlers, (0, _extends2.default)({}, regular(), {
    value: value
  }));
}).add('Scopes', function () {
  return /*#__PURE__*/_react2.default.createElement(SearchBarWithStateHandlers, (0, _extends2.default)({}, regular(), scopesProps(), {
    translateWithId: function translateWithId(id) {
      return translationIds[id];
    }
  }));
}).add('Unsorted scopes', function () {
  return /*#__PURE__*/_react2.default.createElement(SearchBarWithStateHandlers, (0, _extends2.default)({}, regular(), scopesProps(), {
    translateWithId: function translateWithId(id) {
      return translationIds[id];
    },
    sortItems: function sortItems(items) {
      return items;
    }
  }));
}, {
  info: {
    text: "By default, the scopes in the `SearchBar` will be sorted in ascending alphabetical order, and \"selected\" scopes will be moved to the top of the sort order. You can pass in a function for a custom sort order via the `sortItems` prop. To completely remove the default sorting, follow this story example by setting the `sortItems` prop to `sortItems={(items) => items}`"
  }
}).add('Selected scopes', function () {
  return /*#__PURE__*/_react2.default.createElement(SearchBarWithStateHandlers, (0, _extends2.default)({}, regular(), scopesProps(), {
    selectedScopes: selectedScopes,
    translateWithId: function translateWithId(id) {
      return translationIds[id];
    }
  }));
});