wix-style-react/dist/es/stories/DropdownBase/index.story.js

wix-style-react

import React from 'react';
import { storySettings } from './storySettings';

import LiveCodeExample from '../utils/Components/LiveCodeExample';
import { Layout, Cell } from '../../src/Layout';

import { placements } from '../../src/Popover';
import DropdownBase from '../../src/DropdownBase';
import Button from '../../src/Button';

import ExampleUncontrolledClick from '!raw-loader!./examples/ExampleUncontrolledClick';
import ExampleUncontrolledIcon from '!raw-loader!./examples/ExampleUncontrolledIcon';
import ExampleControlledInput from '!raw-loader!./examples/ExampleControlledInput';
import ExampleControlledMouse from '!raw-loader!./examples/ExampleControlledMouse';

var options = [{
  label: '4 options',
  value: [{ id: 0, value: 'First option' }, { id: 1, value: 'Second option' }, { id: 2, value: 'Third option' }, { id: 3, value: 'Fourth option' }]
}, {
  label: '10 options',
  value: Array(10).fill().map(function (v, i) {
    return { id: i, value: 'Option ' + i };
  })
}];

var children = [{
  label: 'Regular React node',
  value: React.createElement(
    Button,
    { upgrade: true },
    'I am a plain Button that does nothing!'
  )
}, {
  label: 'Render prop on click',
  value: function value(_ref) {
    var toggle = _ref.toggle,
        _ref$selectedOption = _ref.selectedOption,
        selectedOption = _ref$selectedOption === undefined ? {} : _ref$selectedOption;
    return React.createElement(
      Button,
      { upgrade: true, onClick: toggle },
      selectedOption.value || 'Click me'
    );
  }
}, {
  label: 'Render prop on hover',
  value: function value(_ref2) {
    var open = _ref2.open,
        close = _ref2.close,
        _ref2$selectedOption = _ref2.selectedOption,
        selectedOption = _ref2$selectedOption === undefined ? {} : _ref2$selectedOption;
    return React.createElement(
      Button,
      { upgrade: true, onMouseEnter: open, onMouseLeave: close },
      selectedOption.value || 'Hover me'
    );
  }
}];

var openProps = [{ label: 'false', value: false }, { label: 'true', value: true }];

export default {
  category: storySettings.kind,
  storyName: storySettings.storyName,

  component: DropdownBase,
  componentPath: '../../src/DropdownBase/DropdownBase.js',

  componentProps: {
    dataHook: storySettings.dataHook,

    children: children[1].value,
    options: options[0].value,
    open: undefined,
    showArrow: false,
    placement: 'bottom'
  },

  exampleProps: {
    children: children,
    options: options,
    open: openProps,
    placement: placements,

    onSelect: function onSelect(selectedOption) {
      return 'Triggered with: ' + JSON.stringify(selectedOption);
    },
    onClickOutside: function onClickOutside() {
      return 'Triggered!';
    }
  },

  examples: React.createElement(
    'div',
    {
      style: {
        maxWidth: 1254,
        padding: 10
      }
    },
    React.createElement(
      Layout,
      null,
      React.createElement(
        Cell,
        { span: 6 },
        React.createElement(LiveCodeExample, {
          compact: true,
          title: 'Uncontrolled example with click events',
          initialCode: ExampleUncontrolledClick
        })
      ),
      React.createElement(
        Cell,
        { span: 6 },
        React.createElement(LiveCodeExample, {
          compact: true,
          title: 'Uncontrolled example with an icon',
          initialCode: ExampleUncontrolledIcon
        })
      ),
      React.createElement(
        Cell,
        { span: 6 },
        React.createElement(LiveCodeExample, {
          compact: true,
          autoRender: false,
          title: 'Controlled example with mouse events',
          initialCode: ExampleControlledMouse
        })
      ),
      React.createElement(
        Cell,
        { span: 6 },
        React.createElement(LiveCodeExample, {
          compact: true,
          autoRender: false,
          title: 'Controlled example with an input',
          initialCode: ExampleControlledInput
        })
      )
    )
  )
};