Geforce File Manager

NAME	SIZE	ACTIONS
📄 CTA.js	600 B	[ EDIT ] \| [ DEL ]
📄 CheckboxControl.js	539 B	[ EDIT ] \| [ DEL ]
📄 ColorPicker.js	730 B	[ EDIT ] \| [ DEL ]
📄 ComboboxControl.js	612 B	[ EDIT ] \| [ DEL ]
📄 CustomCSS.js	1,213 B	[ EDIT ] \| [ DEL ]
📄 Disabled.js	861 B	[ EDIT ] \| [ DEL ]
📄 Fields.js	1,321 B	[ EDIT ] \| [ DEL ]
📄 Group.js	2,021 B	[ EDIT ] \| [ DEL ]
📄 Groups.js	747 B	[ EDIT ] \| [ DEL ]
📄 Integration.js	3,088 B	[ EDIT ] \| [ DEL ]
📄 Loading.js	253 B	[ EDIT ] \| [ DEL ]
📄 Media.js	1,903 B	[ EDIT ] \| [ DEL ]
📄 Notices.js	552 B	[ EDIT ] \| [ DEL ]
📄 NullView.js	47 B	[ EDIT ] \| [ DEL ]
📄 Page.js	428 B	[ EDIT ] \| [ DEL ]
📄 SaveButton.js	1,309 B	[ EDIT ] \| [ DEL ]
📄 SelectControl.js	623 B	[ EDIT ] \| [ DEL ]
📄 TextControl.js	775 B	[ EDIT ] \| [ DEL ]
📄 ToggleControl.js	1,802 B	[ EDIT ] \| [ DEL ]

[ CLOSE ]

EDIT: Fields.js

const { useSelect } = wp.data;

import TextControl from "./TextControl";
import SelectControl from "./SelectControl";
import ToggleControl from "./ToggleControl";
import CheckboxControl from "./CheckboxControl";
import ColorPicker from "./ColorPicker";
import CTA from "./CTA";
// import Media from "./Media";

export default ({ fields, optionName }) => {
  const allSettings = useSelect((select) => {
    return select("presto-player/settings").settings();
  });
  const settings = allSettings[`${prestoPlayer.prefix}_${optionName}`];

// components map
  const components = {
    text: TextControl,
    password: TextControl,
    email: TextControl,
    select: SelectControl,
    toggle: ToggleControl,
    checkbox: CheckboxControl,
    color: ColorPicker,
    cta: CTA,
    // media: Media,
  };

return (
    <div className="presto-flow">
      {fields.length &&
        fields.map((option, i) => {
          const TagName = components?.[option.type]
            ? components?.[option.type]
            : components.text;
          return option?.hidden ? (
            ""
          ) : (
            <TagName
              key={option.id}
              option={option}
              optionName={optionName}
              value={settings?.[option.id]}
            />
          );
        })}
    </div>
  );
};