# ghostkit/2.25.0/gutenberg/blocks/form/fields/select/edit.js

Block Animations, Motion & Scroll Effects – Ghost Kit, version 2.25.0. 146 lines.

- Page: https://pluginprobe.com/plugins/ghostkit/2.25.0/code/gutenberg/blocks/form/fields/select/edit.js
- Raw: https://pluginprobe.com/plugins/ghostkit/2.25.0/raw/gutenberg/blocks/form/fields/select/edit.js
- Modified: 2022-02-07T14:32:38+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/ghostkit/2.25.0/code/gutenberg/blocks/form/fields/select/edit.js#L10-L20`.

```javascript
/**
 * External dependencies
 */
import classnames from 'classnames/dedupe';

/**
 * Internal dependencies
 */
import FieldLabel from '../../field-label';
import FieldDescription from '../../field-description';
import FieldOptions from '../../field-options';
import { getFieldAttributes, FieldDefaultSettings } from '../../field-attributes';

/**
 * WordPress dependencies
 */
const { __ } = wp.i18n;

const { applyFilters } = wp.hooks;

const { Component, Fragment } = wp.element;

const { PanelBody, SelectControl, ToggleControl } = wp.components;

const { InspectorControls } = wp.blockEditor;

/**
 * Block Edit Class.
 */
class BlockEdit extends Component {
  render() {
    const { attributes, setAttributes, isSelected } = this.props;

    const { multiple } = attributes;

    let { options } = attributes;

    let { className = '' } = this.props;

    className = classnames('ghostkit-form-field ghostkit-form-field-select', className);

    className = applyFilters('ghostkit.editor.className', className, this.props);

    if (!options || !options.length) {
      options = [
        {
          label: '',
          value: '',
          selected: false,
        },
      ];
    }

    let selectVal = multiple ? [] : '';

    options.forEach((data) => {
      if (multiple && data.selected) {
        selectVal.push(data.value);
      } else if (!multiple && !selectVal && data.selected) {
        selectVal = data.value;
      }
    });

    return (
      <Fragment>
        <InspectorControls>
          <PanelBody>
            <FieldDefaultSettings {...this.props} defaultCustom={' '} placeholderCustom={' '} />
            <ToggleControl
              label={__('Multiple', 'ghostkit')}
              checked={multiple}
              onChange={() => {
                if (multiple) {
                  const newOptions = [...options];
                  let singleSelected = false;

                  newOptions.forEach((data, i) => {
                    if (data.selected) {
                      if (singleSelected) {
                        newOptions[i].selected = false;
                      }

                      singleSelected = true;
                    }
                  });

                  setAttributes({
                    multiple: !multiple,
                    options: newOptions,
                  });
                } else {
                  setAttributes({ multiple: !multiple });
                }
              }}
            />
          </PanelBody>
        </InspectorControls>
        <div className={className}>
          <FieldLabel {...this.props} />

          {isSelected ? (
            <FieldOptions
              options={options}
              multiple={multiple}
              onChange={(val) => setAttributes({ options: val })}
            />
          ) : (
            <SelectControl
              {...getFieldAttributes(attributes)}
              value={selectVal}
              options={(() => {
                if (!multiple) {
                  let addNullOption = true;

                  Object.keys(options).forEach((data) => {
                    if (data.selected) {
                      addNullOption = false;
                    }
                  });

                  if (addNullOption) {
                    return [
                      {
                        label: __('--- Select ---', 'ghostkit'),
                        value: '',
                        selected: true,
                      },
                      ...options,
                    ];
                  }
                }

                return options;
              })()}
            />
          )}

          <FieldDescription {...this.props} />
        </div>
      </Fragment>
    );
  }
}

export default BlockEdit;

```