# betterdocs/4.9.5/react-src/gutenberg/util/social-profiles-v2/SortableComponent.js

BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot, version 4.9.5. 176 lines.

- Page: https://pluginprobe.com/plugins/betterdocs/4.9.5/code/react-src/gutenberg/util/social-profiles-v2/SortableComponent.js
- Raw: https://pluginprobe.com/plugins/betterdocs/4.9.5/raw/react-src/gutenberg/util/social-profiles-v2/SortableComponent.js
- Modified: 2026-10-12T10:07:14+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/betterdocs/4.9.5/code/react-src/gutenberg/util/social-profiles-v2/SortableComponent.js#L10-L20`.

```javascript
const { __ } = wp.i18n;

import {
  SortableContainer,
  SortableElement,
  SortableHandle,
} from "react-sortable-hoc";
import ColorControl from "../color-control";

// Style objects
const trashStyle = {
  fontSize: 14,
  borderLeft: "1px solid #b4b4cb",
  lineHeight: "2.5em",
  flex: 2,
  textAlign: "center",
  display: "flex",
  justifyContent: "center",
};

const TrashIcon = ({ position, onDeleteProfile }) => (
  <span
    className="eb-social-delete-icon"
    style={trashStyle}
    onClick={() => onDeleteProfile(position)}
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      x="0"
      y="0"
      enableBackground="new 0 0 512 512"
      version="1.1"
      viewBox="0 0 512 512"
      xmlSpace="preserve"
      style={{ width: 14 }}
    >
      <path
        d="M423.3 86.6H89c-16.8.1-32.2 9.3-40.1 24.1-7.9 14.8-7.1 32.7 2.2 46.8l37.2 55.6V456c0 30.9 25.1 56 56 56h223.9c30.9 0 56-25.1 56-56V213.1l37.2-56c9.1-14 9.8-31.8 1.9-46.5-8.1-14.7-23.4-23.9-40-24zm-198 347c0 13.9-11.3 25.2-25.2 25.2-13.9 0-25.2-11.3-25.2-25.2V220.9c0-13.9 11.3-25.2 25.2-25.2 13.9 0 25.2 11.3 25.2 25.2v212.7zm112 0c0 13.9-11.3 25.2-25.2 25.2-13.9 0-25.2-11.3-25.2-25.2V220.9c0-13.9 11.3-25.2 25.2-25.2 13.9 0 25.2 11.3 25.2 25.2v212.7zM325.8 19.4C309.9 7.1 290.2 0 269.3 0h-26.4c-20.9 0-40.6 7.1-56.5 19.4-11.2 8.7-20.5 20.1-26.9 33.4h193.1c-6.3-13.3-15.6-24.7-26.8-33.4z"
        style={{ fill: "#FF6464" }}
      ></path>
    </svg>
  </span>
);

const DragHandle = SortableHandle(() => (
  <span className="drag-handle">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      x="0"
      y="0"
      enableBackground="new 0 0 512 512"
      version="1.1"
      viewBox="0 0 512 512"
      xmlSpace="preserve"
      style={{ height: 14 }}
    >
      <path
        d="M512 256L402.6 146.6 402.6 210.3 301 210.3 301 109.4 365.4 109.4 256 0 146.6 109.4 211 109.4 211 210.3 109.4 210.3 109.4 146.6 0 256 109.4 365.4 109.4 300.3 211 300.3 211 402.6 146.6 402.6 256 512 365.4 402.6 301 402.6 301 300.3 402.6 300.3 402.6 365.4z"
        style={{ fill: "#a9a9a9" }}
      ></path>
    </svg>
  </span>
));

const SortableItem = SortableElement(
  ({
    position,
    profile,
    onProfileClick,
    onDeleteProfile,
    onColorChange,
    onBgColorChange,
    // selectedIcon,
    url,
    onUrlChange,
    // onSubmit,
  }) => (
    <li className="drag-helper">
      <span className="profile-wrapper">
        <span
          className="profile-icon-container"
          onClick={() => onProfileClick(profile.icon)}
        >
          <span className={profile.icon} />
          <span className="selected-profile-icon">
            {(profile.icon || " ").replace(/^fa[bsr] fa-/i, "")}
            {
              // (profile.icon || " ").replace(/^fa[\w] fa-/i, "")
            }
          </span>
        </span>
        <DragHandle />
        <TrashIcon position={position} onDeleteProfile={onDeleteProfile} />
      </span>

      {
        // selectedIcon === profile.icon &&
        profile.isExpanded && (
          <div className="link-form-wrapper">
            <ColorControl
              label={__("Icon Color", "betterdocs")}
              color={profile.color}
              onChange={(color) => onColorChange(color, position)}
            />
            <ColorControl
              label={__("Icon Background", "betterdocs")}
              color={profile.bgColor}
              onChange={(bgColor) => onBgColorChange(bgColor, position)}
            />

            <label className="iconLbl" for={`iconId-${profile.icon}`}>
              URL (use <i>https://</i> at the beginning)
            </label>

            <form
              className="input_wrapp"
              onSubmit={(e) => {
                e.preventDefault();
                // onSubmit(profile.icon);
              }}
            >
              <input
                type="text"
                className="social-link-input"
                id={`iconId-${profile.icon}`}
                // placeholder={`Enter ${profile.icon} link`}
                value={url}
                onChange={(event) => onUrlChange(event)}
              />
              {/* <button
                  className="save-button"
                  onClick={() => onSubmit(profile.icon)}
                >
                  Save
                </button> */}
            </form>
          </div>
        )
      }
    </li>
  )
);

const SortableList = SortableContainer((props) => {
  const { profiles, ...rest } = props;

  return (
    <ul>
      {profiles.map((profile, index) => (
        <SortableItem
          profile={profile}
          key={index}
          {...rest}
          position={index}
          index={index}
        />
      ))}
    </ul>
  );
});

const SortableComponent = ({ profiles, onSortEnd, ...rest }) => {
  if (profiles.length === 0) return <ul />;

  return (
    <SortableList
      profiles={profiles}
      useDragHandle={true}
      onSortEnd={onSortEnd}
      {...rest}
    />
  );
};

export default SortableComponent;

```