itmar-block-packages 1.10.1 → 2.0.1

package/src/IconSelectControl.js

@@ -1,186 +0,0 @@
-import { __ } from "@wordpress/i18n";
-
-import {
-  TextControl,
-  PanelRow,
-  RadioControl,
-  ComboboxControl,
-  __experimentalUnitControl as UnitControl,
-} from "@wordpress/components";
-
-import { PanelColorSettings } from "@wordpress/block-editor";
-
-const helpLink = createElement(
-  "a",
-  { href: "https://fontawesome.com/search", target: "_blank" },
-  "FontAwesome"
-);
-
-const helpTextCode = createElement(
-  "span",
-  {},
-  helpLink,
-  __(
-    "Select the icon from and enter Unicode (the upper right four digits of the selection dialog). ",
-    "block-collections"
-  )
-);
-
-const helpImageURL = createElement(
-  "span",
-  {},
-  __("Enter the URL for the image.", "block-collections")
-);
-
-const helpTextFamily = createElement(
-  "span",
-  {},
-  __(
-    "Please select the first class name shown in the HTML code field of the selection dialog. ",
-    "block-collections"
-  )
-);
-
-const units = [
-  { value: "px", label: "px" },
-  { value: "em", label: "em" },
-  { value: "rem", label: "rem" },
-];
-
-const family_option = [
-  { value: "Font Awesome 6 Free", label: "SOLID" },
-  { value: "Font Awesome 6 Brands", label: "BRANDS" },
-];
-
-export default ({ iconStyle, setPosition, onChange }) => {
-  const {
-    icon_type,
-    icon_url,
-    icon_name,
-    icon_pos,
-    icon_size,
-    icon_color,
-    icon_space,
-    icon_family,
-  } = iconStyle;
-
-  return (
-    <>
-      <label className="components-base-control__label">
-        {__("Icon Types", "block-collections")}
-      </label>
-      <PanelRow className="itmar_position_row">
-        <RadioControl
-          selected={icon_type}
-          options={[
-            { label: __("Awesome", "block-collections"), value: "awesome" },
-            { label: __("Image", "block-collections"), value: "image" },
-            { label: __("Avatar", "block-collections"), value: "avatar" },
-          ]}
-          onChange={(newValue) => {
-            const newStyle = { ...iconStyle, icon_type: newValue };
-            onChange(newStyle);
-          }}
-        />
-      </PanelRow>
-      {icon_type === "awesome" && (
-        <>
-          <TextControl
-            label={__("icon name", "block-collections")}
-            help={helpTextCode}
-            labelPosition="top"
-            value={icon_name}
-            isPressEnterToChange
-            onChange={(newValue) => {
-              const newStyle = { ...iconStyle, icon_name: newValue };
-              onChange(newStyle);
-            }}
-          />
-
-          <ComboboxControl
-            label={__("Icon Family", "block-collections")}
-            help={helpTextFamily}
-            options={family_option}
-            value={icon_family ? icon_family : "Font Awesome 6 Free"}
-            onChange={(newValue) => {
-              const newStyle = { ...iconStyle, icon_family: newValue };
-              onChange(newStyle);
-            }}
-          />
-        </>
-      )}
-      {icon_type === "image" && (
-        <TextControl
-          label={__("icon url", "block-collections")}
-          help={helpImageURL}
-          labelPosition="top"
-          value={icon_url}
-          isPressEnterToChange
-          onChange={(newValue) => {
-            const newStyle = { ...iconStyle, icon_url: newValue };
-            onChange(newStyle);
-          }}
-        />
-      )}
-      <PanelRow className="sizing_row">
-        <UnitControl
-          dragDirection="e"
-          onChange={(newValue) => {
-            const newStyle = { ...iconStyle, icon_size: newValue };
-            onChange(newStyle);
-          }}
-          label={__("Size", "block-collections")}
-          value={icon_size}
-          units={units}
-        />
-        {setPosition && (
-          <UnitControl
-            dragDirection="e"
-            onChange={(newValue) => {
-              const newStyle = { ...iconStyle, icon_space: newValue };
-              onChange(newStyle);
-            }}
-            label={__("spacing to end", "block-collections")}
-            value={icon_space}
-            units={units}
-          />
-        )}
-      </PanelRow>
-
-      <PanelColorSettings
-        title={__("Color settings", "itmar_location")}
-        initialOpen={false}
-        colorSettings={[
-          {
-            value: icon_color,
-            onChange: (newValue) => {
-              const newStyle = { ...iconStyle, icon_color: newValue };
-              onChange(newStyle);
-            },
-            label: __("Icon color", "itmar_location"),
-          },
-        ]}
-      />
-      {setPosition && (
-        <>
-          <label className="components-base-control__label">
-            {__("Arrangement", "block-collections")}
-          </label>
-          <PanelRow className="itmar_position_row">
-            <RadioControl
-              selected={icon_pos}
-              options={[
-                { label: __("left", "block-collections"), value: "left" },
-                { label: __("right", "block-collections"), value: "right" },
-              ]}
-              onChange={(newValue) => {
-                const newStyle = { ...iconStyle, icon_pos: newValue };
-                onChange(newStyle);
-              }}
-            />
-          </PanelRow>
-        </>
-      )}
-    </>
-  );
-};

package/src/PseudoElm.js

@@ -1,54 +0,0 @@
-import { __ } from "@wordpress/i18n";
-import { css } from "styled-components";
-import { RadioControl } from "@wordpress/components";
-
-// 矢印の向きに応じたスタイルを生成するヘルパー関数
-const arrowDirectionStyles = (direction) => {
-  switch (direction) {
-    case "left":
-      return "transform: translate(-50%, -50%) rotate(-135deg);";
-    case "right":
-      return "transform: translate(-50%, -50%) rotate(45deg);";
-    case "upper":
-      return "transform: translate(-50%, -50%) rotate(-45deg);";
-    case "under":
-      return "transform: translate(-50%, -50%) rotate(135deg);";
-    default:
-      return "transform: translate(-50%, -50%) rotate(45deg);"; // default to 'down'
-  }
-};
-
-// 矢印のスタイルを適用するコンポーネント
-export const Arrow = ({ direction = "down" }) => css`
-  &::after {
-    content: "";
-    position: absolute;
-    display: block;
-    width: 15%;
-    height: 15%;
-    border-top: 3px solid var(--wp--preset--color--accent-2);
-    border-right: 3px solid var(--wp--preset--color--accent-2);
-    top: 50%;
-    left: 50%;
-    ${arrowDirectionStyles(direction)}
-  }
-`;
-
-//擬似要素の出力を選択させるインスペクターコントロール
-const PseudoElm = ({ direction, onChange }) => {
-  return (
-    <RadioControl
-      selected={direction}
-      options={[
-        { label: __("Upper", "itmar_block_collections"), value: "upper" },
-        { label: __("Left", "itmar_block_collections"), value: "left" },
-        { label: __("Right", "itmar_block_collections"), value: "right" },
-        { label: __("Under", "itmar_block_collections"), value: "under" },
-      ]}
-      onChange={(changeOption) => {
-        onChange(changeOption);
-      }}
-    />
-  );
-};
-export default PseudoElm;