FM / controls

/home/techb158/balacoffee.com/wp-content/themes/Divi/common/stories/controls/

/home/techb158/balacoffee.com/wp-content/themes/Divi/common/stories/controls

Name	Size	Mode	Actions
input/	-	0755	rm
ripple/	-	0755	rm
button-group.stories.js	1658	0644	edit dl rm
button.stories.js	1224	0644	edit dl rm
categories.stories.js	1546	0644	edit dl rm
codemirror.stories.js	1585	0644	edit dl rm
color.stories.js	1707	0644	edit dl rm
range.stories.js	1259	0644	edit dl rm
select-advanced.stories.js	3814	0644	edit dl rm
select-menu.stories.js	3079	0644	edit dl rm
tags.stories.js	1842	0644	edit dl rm
toggle.stories.js	872	0644	edit dl rm

Edit: /home/techb158/balacoffee.com/wp-content/themes/Divi/common/stories/controls/select-menu.stories.js (3079B)

// External dependencies.
import React from 'react';

// Internal dependencies.
import ETBuilderControlSelectMenu from '@common-ui/controls/select-menu/select-menu';

export default {
  title: 'Controls/Select Menu',
  component: ETBuilderControlSelectMenu,
  argTypes: {
    onSelect: {
      action: 'selected',
      table: {
        disable: true,
      },
    },
  },
  args: {
    target: document.body,
  },
};

export const Default = {
  args: {
    options: {
      option1: 'Option 1',
      option2: 'Option 2',
      option3: 'Option 3',
    },
    button: 'Select an option',
  },
};

export const WithSearchField = {
  args: {
    ...Default.args,
    menuStyle: {
      minWidth: '260px',
    },
    showSearchField: true,
  },
};

export const WithSubmenu = {
  args: {
    options: {
      option1: {
        name: 'Option 1',
        items: {
          subOption1: 'Sub Option 1',
          subOption2: 'Sub Option 2',
        },
      },
      option2: 'Option 2',
      option3: 'Option 3',
    },
    button: 'Select an option',
  },
};

export const ScrollableParentMenu = {
  args: {
    options: {
      option1: {
        name: 'Option 1',
        items: {
          subOption1: 'Sub Option 1',
          subOption2: 'Sub Option 2',
        },
      },
      option2: 'Option 2',
      option3: 'Option 3',
    },
    button: 'Select an option',
    scrollableParentMenu: true,
  },
};

const printMenuButton = () => {
  return (
    <div className='et-fb-settings-custom-select-wrapper-outer et-fb-settings-context-select-wrapper-outer'>
      <div
        id='et-fb-context'
        className='et-fb-settings-custom-select-wrapper et-fb-settings-option-select-closed'
      >
        <ul
          className='et-fb-settings-option-select et-fb-settings-option-select-advanced et-fb-main-setting'
          style={{ maxHeight: 'none' }}
        >
          <li
            className='select-option-item et-fb-selected-item select-option-item-creative'
            data-value='creative'
          >
            <span className='select-option-item__name'>Select Menu</span>
            <span className='et-fb-select-marker'>
              <div
                className='et-common-icon et-common-icon--menu-expand'
                style={{
                  fill: 'rgb(190, 201, 213)',
                  width: '28px',
                  minWidth: '28px',
                  height: '28px',
                  margin: '-6px',
                }}
              >
                <svg
                  viewBox='0 0 28 28'
                  preserveAspectRatio='xMidYMid meet'
                  shapeRendering='geometricPrecision'
                >
                  <g fillRule='evenodd'>
                    <path d='M14 20l-3-5h6zM14 8l3 5h-6z' fillRule='evenodd'></path>
                  </g>
                </svg>
              </div>
            </span>
          </li>
        </ul>
      </div>
    </div>
  );
};

export const WithOriginalButton = {
  args: {
    ...Default.args,
    useOriginalButton: true,
    button: printMenuButton(),
  },
};

// External dependencies. import React from 'react'; // Internal dependencies. import ETBuilderControlSelectMenu from '@common-ui/controls/select-menu/select-menu'; export default { title: 'Controls/Select Menu', component: ETBuilderControlSelectMenu, argTypes: { onSelect: { action: 'selected', table: { disable: true, }, }, }, args: { target: document.body, }, }; export const Default = { args: { options: { option1: 'Option 1', option2: 'Option 2', option3: 'Option 3', }, button: 'Select an option', }, }; export const WithSearchField = { args: { ...Default.args, menuStyle: { minWidth: '260px', }, showSearchField: true, }, }; export const WithSubmenu = { args: { options: { option1: { name: 'Option 1', items: { subOption1: 'Sub Option 1', subOption2: 'Sub Option 2', }, }, option2: 'Option 2', option3: 'Option 3', }, button: 'Select an option', }, }; export const ScrollableParentMenu = { args: { options: { option1: { name: 'Option 1', items: { subOption1: 'Sub Option 1', subOption2: 'Sub Option 2', }, }, option2: 'Option 2', option3: 'Option 3', }, button: 'Select an option', scrollableParentMenu: true, }, }; const printMenuButton = () => { return (

Select Menu

); }; export const WithOriginalButton = { args: { ...Default.args, useOriginalButton: true, button: printMenuButton(), }, };