itmar-block-packages 1.3.7 → 1.3.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "itmar-block-packages",
-  "version": "1.3.7",
+  "version": "1.3.9",
   "description": "We have put together a package of common React components used for WordPress custom blocks.",
   "main": "build/index.js",
   "scripts": {

package/src/BlockPlace.js

@@ -89,7 +89,10 @@ export default function BlockPlace(props) {
         computedStyle.display === "flex" ||
         computedStyle.display === "inline-flex"
       ) {
-        if (computedStyle.flexDirection === "row") {
+        if (
+          computedStyle.flexDirection === "row" ||
+          computedStyle.flexDirection === "row-reverse"
+        ) {
           setDirection("row");
         } else {
           setDirection("column");
@@ -316,10 +319,22 @@ export default function BlockPlace(props) {
                 {(itemProps) => (
                   <Button
                     {...itemProps}
-                    isPressed={sel_pos.outer_vertical === "self-start"}
-                    onClick={() => props.onVerticalChange("self-start")}
+                    isPressed={
+                      direction === "row"
+                        ? sel_pos.outer_vertical === "self-start"
+                        : sel_pos.outer_align === "left"
+                    }
+                    onClick={
+                      direction === "row"
+                        ? () => props.onVerticalChange("self-start")
+                        : () => props.onAlignChange("left")
+                    }
                     icon={direction === "row" ? upper : justifyLeft}
-                    label={__("upper alignment", "block-collections")}
+                    label={
+                      direction === "row"
+                        ? __("upper alignment", "block-collections")
+                        : __("left alignment", "block-collections")
+                    }
                   />
                 )}
               </ToolbarItem>
@@ -327,8 +342,16 @@ export default function BlockPlace(props) {
                 {(itemProps) => (
                   <Button
                     {...itemProps}
-                    isPressed={sel_pos.outer_vertical === "center"}
-                    onClick={() => props.onVerticalChange("center")}
+                    isPressed={
+                      direction === "row"
+                        ? sel_pos.outer_vertical === "center"
+                        : sel_pos.outer_align === "center"
+                    }
+                    onClick={
+                      direction === "row"
+                        ? () => props.onVerticalChange("center")
+                        : () => props.onAlignChange("center")
+                    }
                     icon={direction === "row" ? middle : justifyCenter}
                     label={__("center alignment", "block-collections")}
                   />
@@ -338,10 +361,22 @@ export default function BlockPlace(props) {
                 {(itemProps) => (
                   <Button
                     {...itemProps}
-                    isPressed={sel_pos.outer_vertical === "self-end"}
-                    onClick={() => props.onVerticalChange("self-end")}
+                    isPressed={
+                      direction === "row"
+                        ? sel_pos.outer_vertical === "self-end"
+                        : sel_pos.outer_align === "right"
+                    }
+                    onClick={
+                      direction === "row"
+                        ? () => props.onVerticalChange("self-end")
+                        : () => props.onAlignChange("right")
+                    }
                     icon={direction === "row" ? lower : justifyRight}
-                    label={__("lower alignment", "block-collections")}
+                    label={
+                      direction === "row"
+                        ? __("lower alignment", "block-collections")
+                        : __("right alignment", "block-collections")
+                    }
                   />
                 )}
               </ToolbarItem>

package/src/DateElm.js

@@ -0,0 +1,354 @@
+import { __ } from "@wordpress/i18n";
+import { nanoid } from "nanoid";
+import {
+  PanelBody,
+  PanelRow,
+  __experimentalNumberControl as NumberControl,
+} from "@wordpress/components";
+
+import { useRef, useEffect, useState } from "@wordpress/element";
+
+//Google Calender APIから祝日データを取得するためのID
+const CALENDAR_ID = "japanese__ja@holiday.calendar.google.com";
+
+//期間の設定から選択できる月の情報オブジェクトを配列にする関数
+export const generateDateArray = (dateObj, isMonth) => {
+  const { startYear, startMonth, endYear, endMonth } = dateObj;
+  const result = [];
+
+  for (let year = startYear; year <= endYear; year++) {
+    if (isMonth) {
+      const monthStart = year === startYear ? startMonth : 1;
+      const monthEnd = year === endYear ? endMonth : 12;
+
+      for (let month = monthStart; month <= monthEnd; month++) {
+        const unitObj = {
+          id: nanoid(5),
+          value: `${year}/${month.toString().padStart(2, "0")}`,
+          label: `${year}/${month.toString().padStart(2, "0")}`,
+          classname: "filter_date",
+        };
+        result.push(unitObj);
+      }
+    } else {
+      const unitObj = {
+        id: nanoid(5),
+        value: `${year}`,
+        label: `${year}`,
+        classname: "filter_date",
+      };
+      result.push(unitObj);
+    }
+  }
+
+  return result;
+};
+
+//与えられた月から日付と曜日を要素とする配列を生成する
+export const generateMonthCalendar = (dateString, holidays = null) => {
+  const [year, month] = dateString.split("/").map(Number);
+  const date = new Date(year, month - 1, 1);
+  const lastDay = new Date(year, month, 0).getDate();
+
+  const calendar = [];
+
+  for (let day = 1; day <= lastDay; day++) {
+    date.setDate(day);
+    //祝日の情報
+    const holidayItem = holidays?.find((item) => {
+      // 日付文字列から最後の2桁を抽出
+      const lastTwoDigits = parseInt(item.date.slice(-2), 10);
+      // 抽出した2桁を比較
+      return lastTwoDigits === day;
+    });
+    //日付情報オブジェクト
+    const dayObj = holidayItem
+      ? {
+          date: day,
+          weekday: date.getDay(),
+          holiday: holidayItem.name,
+        }
+      : {
+          date: day,
+          weekday: date.getDay(),
+        };
+    calendar.push(dayObj);
+  }
+
+  return calendar;
+};
+
+//期間設定のインスペクターコントロール
+export const PeriodCtrl = ({
+  startYear,
+  endYear,
+  dateSpan,
+  isMonth,
+  onChange,
+}) => {
+  return (
+    <PanelBody
+      title={__("Period Setting", "block-collections")}
+      initialOpen={true}
+      className="form_setteing_ctrl"
+    >
+      <label>{__("Start of period", "block-collections")}</label>
+      <PanelRow className="itmar_date_span">
+        <NumberControl
+          label={__("Year", "block-collections")}
+          labelPosition="side"
+          max={endYear}
+          min={startYear}
+          onChange={(newValue) => {
+            const newSpanObj = {
+              dateSpan: {
+                ...dateSpan,
+                startYear: Number(newValue),
+              },
+            };
+            onChange(newSpanObj);
+          }}
+          value={dateSpan.startYear}
+        />
+        {isMonth && (
+          <NumberControl
+            label={__("Month", "block-collections")}
+            labelPosition="side"
+            max={12}
+            min={1}
+            onChange={(newValue) => {
+              const newSpanObj = {
+                dateSpan: {
+                  ...dateSpan,
+                  startMonth: Number(newValue),
+                },
+              };
+              onChange(newSpanObj);
+            }}
+            value={dateSpan.startMonth}
+          />
+        )}
+      </PanelRow>
+      <label>{__("End of period", "block-collections")}</label>
+      <PanelRow className="itmar_date_span">
+        <NumberControl
+          label={__("Year", "block-collections")}
+          labelPosition="side"
+          max={endYear}
+          min={startYear}
+          onChange={(newValue) => {
+            const newSpanObj = {
+              dateSpan: {
+                ...dateSpan,
+                endYear: Number(newValue),
+              },
+            };
+            onChange(newSpanObj);
+          }}
+          value={dateSpan.endYear}
+        />
+        <NumberControl
+          label={__("Month", "block-collections")}
+          labelPosition="side"
+          max={12}
+          min={1}
+          onChange={(newValue) => {
+            const newSpanObj = {
+              dateSpan: {
+                ...dateSpan,
+                endMonth: Number(newValue),
+              },
+            };
+            onChange(newSpanObj);
+          }}
+          value={dateSpan.endMonth}
+        />
+      </PanelRow>
+    </PanelBody>
+  );
+};
+
+//日付から期間のクエリー用の配列を生成
+export const getPeriodQuery = (dateString) => {
+  if (!dateString) {
+    return null; //与えられた文字列が空ならnullをかえす
+  }
+  const parts = dateString.split("/");
+  const year = parseInt(parts[0], 10);
+  const month = parts.length > 1 ? parseInt(parts[1], 10) : null;
+  const day = parts.length > 2 ? parseInt(parts[2], 10) : null;
+
+  let startDate, endDate;
+
+  if (day) {
+    // 特定の日
+    startDate = new Date(year, month - 1, day, 0, 0, 0, -1);
+    endDate = new Date(year, month - 1, day, 23, 59, 59, 1000);
+  } else if (month) {
+    // 特定の月
+    startDate = new Date(year, month - 1, 1, 0, 0, 0, -1);
+    endDate = new Date(year, month, 1, 0, 0, 0, 0);
+  } else {
+    // 特定の年
+    startDate = new Date(year, 0, 1, 0, 0, 0, -1);
+    endDate = new Date(year + 1, 0, 1, 0, 0, 0, 0);
+  }
+
+  return {
+    after: startDate.toISOString(),
+    before: endDate.toISOString(),
+  };
+};
+
+//本日の日付から'YYYY/MM'形式の日付文字列を生成する
+export const getTodayYearMonth = () => {
+  const today = new Date();
+  const year = today.getFullYear();
+  const month = String(today.getMonth() + 1).padStart(2, "0");
+  return `${year}/${month}`;
+};
+//本日の日付から年を返す
+export const getTodayYear = () => {
+  const today = new Date();
+  return today.getFullYear();
+};
+//本日の日付から月を返す
+export const getTodayMonth = () => {
+  const today = new Date();
+  return today.getMonth() + 1;
+};
+
+/* ------------------------------
+カレンダー用グリッドAreasの生成関数
+------------------------------ */
+const week = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"];
+export const generateGridAreas = (firstDayOfMonth, totalDays, isMonday) => {
+  let areas = [];
+  let currentDay = 1;
+  //月曜日を先頭に持ってくる場合の係数
+  const mondayFirstDay = firstDayOfMonth - 1 < 0 ? 6 : firstDayOfMonth - 1;
+  //先頭曜日の選択
+  const modifyFirstDay = isMonday ? mondayFirstDay : firstDayOfMonth;
+
+  //曜日ラベル
+  let weekLabels = [];
+  let week_index;
+  for (let i = 0; i < 7; i++) {
+    week_index = isMonday ? i + 1 : i; //月曜日を先頭に持ってくる場合の補正
+    if (week_index > 6) week_index = 0;
+    weekLabels.push(week[week_index]);
+  }
+  areas.push(weekLabels.join(" "));
+
+  for (let i = 0; i < 6; i++) {
+    // 6週分のループ
+    let week = [];
+    for (let j = 0; j < 7; j++) {
+      // 1週間の7日分のループ
+      if ((i === 0 && j < modifyFirstDay) || currentDay > totalDays) {
+        week.push(`empty${i}`);
+      } else {
+        week.push(`day${currentDay}`);
+        currentDay++;
+      }
+    }
+    if (i == 5) {
+      //最後の週
+      week[5] = "day_clear";
+      week[6] = "day_clear";
+    }
+    areas.push(week.join(" "));
+  }
+  return areas.map((week) => `"${week}"`).join("\n");
+};
+
+export const JapaneseHolidays = async (apiKey, targetMonth) => {
+  //Google API Client Libraryをプロジェクトに追加する(非同期で読み込み)
+  const loadGoogleAPI = () => {
+    return new Promise((resolve, reject) => {
+      //window.gapi の存在を直接チェック
+      if (window.gapi) {
+        resolve();
+        return;
+      }
+
+      const script = document.createElement("script");
+      script.src = "https://apis.google.com/js/api.js";
+      script.async = true;
+      script.defer = true;
+      //スクリプトがロードされたときのイベントハンドラ
+      script.onload = () => {
+        // gapiがロードされるまでチェックを繰り返す
+        const checkGapi = () => {
+          if (window.gapi) {
+            resolve();
+          } else {
+            setTimeout(checkGapi, 20); // Check again after 20ms
+          }
+        };
+        checkGapi();
+      };
+
+      script.onerror = () =>
+        reject(new Error("Failed to load Google API script"));
+
+      // Check if the script is already in the document
+      if (
+        !document.querySelector(
+          'script[src="https://apis.google.com/js/api.js"]'
+        )
+      ) {
+        document.body.appendChild(script);
+      }
+    });
+  };
+  //APIキーを使用してクライアントを初期化する
+  const initClient = async () => {
+    if (!window.gapi) {
+      throw new Error("Google API not loaded");
+    }
+
+    // Check if gapi.client is already available
+    if (!window.gapi.client) {
+      // If not, load the client module
+      await new Promise((resolve) => window.gapi.load("client", resolve));
+    }
+
+    if (window.gapi.client.calendar) {
+      return;
+    }
+    await window.gapi.client.init({
+      apiKey: apiKey,
+      discoveryDocs: [
+        "https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest",
+      ],
+    });
+  };
+  //祝日データの取得
+  const fetchHolidays = async () => {
+    const periodObj = getPeriodQuery(targetMonth);
+
+    const response = await window.gapi.client.calendar.events.list({
+      calendarId: CALENDAR_ID,
+      timeMin: periodObj.after,
+      timeMax: periodObj.before,
+      singleEvents: true,
+      orderBy: "startTime",
+    });
+
+    const events = response.result.items;
+    return events.map((event) => ({
+      date: event.start.date,
+      name: event.summary,
+    }));
+  };
+
+  try {
+    await loadGoogleAPI();
+    await initClient();
+    return await fetchHolidays();
+  } catch (error) {
+    console.error("エラーが発生しました:", error);
+    throw error;
+  }
+};

package/src/IconSelectControl.js

@@ -1,5 +1,4 @@
-
-import { __ } from '@wordpress/i18n';
+import { __ } from "@wordpress/i18n";
 
 import {
   TextControl,
@@ -7,59 +6,61 @@ import {
   RadioControl,
   ComboboxControl,
   __experimentalUnitControl as UnitControl,
-} from '@wordpress/components';
-
-import {
-  PanelColorSettings
-} from '@wordpress/block-editor';
+} from "@wordpress/components";
 
+import { PanelColorSettings } from "@wordpress/block-editor";
 
 const helpLink = createElement(
-  'a',
-  { href: 'https://fontawesome.com/search', target: '_blank' },
-  'FontAwesome'
+  "a",
+  { href: "https://fontawesome.com/search", target: "_blank" },
+  "FontAwesome"
 );
 
 const helpTextCode = createElement(
-  'span',
+  "span",
   {},
   helpLink,
-  __('Select the icon from and enter Unicode (the upper right four digits of the selection dialog). ', 'block-collections')
+  __(
+    "Select the icon from and enter Unicode (the upper right four digits of the selection dialog). ",
+    "block-collections"
+  )
 );
 
 const helpTextFamily = createElement(
-  'span',
+  "span",
   {},
   helpLink,
-  __('Please select the first class name shown in the HTML code field of the selection dialog. ', 'block-collections')
+  __(
+    "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' },
+  { 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' },
-]
+  { value: "Font Awesome 6 Free", label: "SOLID" },
+  { value: "Font Awesome 6 Brands", label: "BRANDS" },
+];
 
-export default ({ iconStyle, onChange }) => {
+export default ({ iconStyle, setPosition, onChange }) => {
   const {
     icon_name,
     icon_pos,
     icon_size,
     icon_color,
     icon_space,
-    icon_family
+    icon_family,
   } = iconStyle;
 
   return (
     <>
       <TextControl
-        label={__("icon name", 'block-collections')}
+        label={__("icon name", "block-collections")}
         help={helpTextCode}
         labelPosition="top"
         value={icon_name}
@@ -71,41 +72,43 @@ export default ({ iconStyle, onChange }) => {
       />
 
       <ComboboxControl
-        label={__('Icon Family', 'block-collections')}
+        label={__("Icon Family", "block-collections")}
         help={helpTextFamily}
         options={family_option}
-        value={icon_family ? icon_family : 'Font Awesome 6 Free'}
+        value={icon_family ? icon_family : "Font Awesome 6 Free"}
         onChange={(newValue) => {
           const newStyle = { ...iconStyle, icon_family: newValue };
           onChange(newStyle);
         }}
       />
 
-      <PanelRow className='sizing_row'>
+      <PanelRow className="sizing_row">
         <UnitControl
           dragDirection="e"
           onChange={(newValue) => {
             const newStyle = { ...iconStyle, icon_size: newValue };
             onChange(newStyle);
           }}
-          label={__("Size", 'block-collections')}
+          label={__("Size", "block-collections")}
           value={icon_size}
           units={units}
         />
-        <UnitControl
-          dragDirection="e"
-          onChange={(newValue) => {
-            const newStyle = { ...iconStyle, icon_space: newValue };
-            onChange(newStyle);
-          }}
-          label={__('spacing to end', 'block-collections')}
-          value={icon_space}
-          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')}
+        title={__("Color settings", "itmar_location")}
         initialOpen={false}
         colorSettings={[
           {
@@ -114,26 +117,30 @@ export default ({ iconStyle, onChange }) => {
               const newStyle = { ...iconStyle, icon_color: newValue };
               onChange(newStyle);
             },
-            label: __('Icon color', 'itmar_location')
+            label: __("Icon color", "itmar_location"),
           },
-
         ]}
       />
-      <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>
+      {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/blockStore.js

@@ -0,0 +1,10 @@
+//ネストしたブロックを平坦化
+export const flattenBlocks = (blocks) => {
+  return blocks.reduce((acc, block) => {
+    acc.push(block);
+    if (block.innerBlocks && block.innerBlocks.length > 0) {
+      acc.push(...flattenBlocks(block.innerBlocks));
+    }
+    return acc;
+  }, []);
+};

package/src/cssPropertes.js

@@ -82,15 +82,23 @@ export const height_prm = (height, free_val) => {
   return ret_height_prm;
 };
 //配置を返す
-export const align_prm = (align) => {
+export const align_prm = (align, camelFLg = false) => {
+  //css用
   const ret_align_prm =
     align === "center"
       ? "margin-left: auto; margin-right: auto;"
       : align === "right"
       ? "margin-left: auto; margin-right: 0"
       : "margin-right: auto; margin-left: 0";
+  //インナースタイル用
+  const camel_align_prm =
+    align === "center"
+      ? { marginLeft: "auto", marginRight: "auto" }
+      : align === "right"
+      ? { marginLeft: "auto" }
+      : {};
 
-  return ret_align_prm;
+  return camelFLg ? camel_align_prm : ret_align_prm;
 };
 
 //スタイルオブジェクト変換関数