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

Carbon for Cloud & Cognitive IBM Security UI components

import _extends from "@babel/runtime/helpers/extends";
/**
 * @file Search bar stories.
 * @copyright IBM Security 2019
 */

import { action } from '@storybook/addon-actions';
import { boolean, text } from '@storybook/addon-knobs';
import { storiesOf } from '@storybook/react';
import React from 'react';
import { compose, getDisplayName, withHandlers, withState } from 'recompose';
import { patterns } from '../../../.storybook';
import { SearchBar } from '../..';
import props from './_mocks_';
var SearchBarWithStateHandlers = compose(withState('selectedScopes', 'updateSelectedScopes', function (_ref) {
  var _ref$selectedScopes = _ref.selectedScopes,
    selectedScopes = _ref$selectedScopes === void 0 ? [] : _ref$selectedScopes;
  return selectedScopes;
}), withState('value', 'updateValue', function (_ref2) {
  var _ref2$value = _ref2.value,
    value = _ref2$value === void 0 ? '' : _ref2$value;
  return value;
}), 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 = getDisplayName(SearchBar);
SearchBarWithStateHandlers.__docgenInfo = SearchBar.__docgenInfo;
var allSelectedScopesLabel = props.allSelectedScopesLabel,
  clearButtonLabelText = props.clearButtonLabelText,
  labelText = props.labelText,
  placeHolderText = props.placeHolderText,
  _scopes = props.scopes,
  selectedScopes = props.selectedScopes,
  scopesTypeLabel = props.scopesTypeLabel,
  submitLabel = props.submitLabel,
  value = props.value;
var storyProps = {
  regular: function regular() {
    return {
      submitLabel: text('Submit label (submitLabel)', submitLabel),
      placeHolderText: text('Placeholder (placeholderText)', placeHolderText),
      labelText: labelText,
      clearButtonLabelText: clearButtonLabelText,
      onChange: action('onChange'),
      onSubmit: action('onSubmit')
    };
  },
  scopes: function scopes() {
    return {
      scopes: _scopes,
      scopesTypeLabel: text('Scopes type label (scopesTypeLabel)', scopesTypeLabel),
      allSelectedScopesLabel: text('All selected scopes label (allSelectedScopesLabel)', allSelectedScopesLabel),
      scopeToString: function scopeToString(_ref4) {
        var name = _ref4.name;
        return name;
      },
      hideScopesLabel: 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;
storiesOf(patterns('SearchBar'), module).add('Default', function () {
  return /*#__PURE__*/React.createElement(SearchBarWithStateHandlers, regular());
}).add('Initial value', function () {
  return /*#__PURE__*/React.createElement(SearchBarWithStateHandlers, _extends({}, regular(), {
    value: value
  }));
}).add('Scopes', function () {
  return /*#__PURE__*/React.createElement(SearchBarWithStateHandlers, _extends({}, regular(), scopesProps(), {
    translateWithId: function translateWithId(id) {
      return translationIds[id];
    }
  }));
}).add('Unsorted scopes', function () {
  return /*#__PURE__*/React.createElement(SearchBarWithStateHandlers, _extends({}, 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__*/React.createElement(SearchBarWithStateHandlers, _extends({}, regular(), scopesProps(), {
    selectedScopes: selectedScopes,
    translateWithId: function translateWithId(id) {
      return translationIds[id];
    }
  }));
});