フィールドグループの追加

appleple · Aug 22, 2024 · 8da1afd · 8da1afd
1 parent 094a637
commit 8da1afd
Show file tree

Hide file tree

Showing 29 changed files with 2,251 additions and 1,795 deletions.
diff --git a/src/components/FieldConfirmSource.jsx b/src/components/FieldConfirmSource.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { TableLayoutConfirm } from './cofirmLayouts/TableLayoutConfirm';
+import { useMakerContext } from '../store/MakerContext';
+
+export function FieldConfirmSource() {
+  const {
+    state: {
+      preview: { tag },
+    },
+  } = useMakerContext();
+
+  return (
+    <>
+      {tag === 'section' ? <TableLayoutConfirm /> : null}
+      {tag === 'table' ? <TableLayoutConfirm /> : null}
+    </>
+  );
+}
diff --git a/src/components/FieldSource.jsx b/src/components/FieldSource.jsx
@@ -5,9 +5,7 @@ import { useMakerContext } from '../store/MakerContext';
 
 export function FieldSource() {
   const {
-    state: {
-      preview: { tag },
-    },
+    preview: { tag },
   } = useMakerContext();
 
   return (

diff --git a/src/components/Notify.jsx b/src/components/Notify.jsx
@@ -5,9 +5,7 @@ import { useMakerContext } from '../store/MakerContext';
 export function Notify(props) {
   const { message, onFinish = () => {} } = props;
   const {
-    state: {
-      clipboard: { copied },
-    },
+    clipboard: { copied },
   } = useMakerContext();
   const [active, setActive] = useState(false);
 

diff --git a/src/components/UnitSource.tsx b/src/components/UnitSource.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { UnitSection } from './layouts/UnitSection';
+import { UnitTableLayout } from './layouts/UnitTableLayout';
+import { useMakerContext } from '../store/MakerContext';
+
+export function UnitSource() {
+  const {
+    preview: { tag },
+  } = useMakerContext();
+
+  return (
+    <>
+      {tag === 'section' ? <UnitSection /> : null}
+      {tag === 'table' ? <UnitTableLayout /> : null}
+    </>
+  );
+}
diff --git a/src/components/cofirmLayouts/TableLayoutConfirm.tsx b/src/components/cofirmLayouts/TableLayoutConfirm.tsx
@@ -0,0 +1,181 @@
+import React from 'react';
+import classnames from 'classnames';
+import { useMakerContext } from '../../store/MakerContext';
+
+export function TableLayoutConfirm() {
+  const {
+    state: { customfield },
+    preview: { acmscss },
+  } = useMakerContext();
+
+  return (
+    <table className={classnames({ 'acms-admin-table-admin-edit': acmscss })}>
+      {customfield.map((item, index) => {
+        if (!item.name) {
+          return null;
+        }
+        if (item.type === 'text') {
+          return (
+            <tr key={index}>
+              <th>{item.title}</th>
+              <td>{`{${item.name}}`}</td>
+            </tr>
+          );
+        } else if (item.type === 'textarea') {
+          return (
+            <tr key={index}>
+              <th>{item.title}</th>
+              <td>{`{${item.name}}[escape|nl2br]`}</td>
+            </tr>
+          );
+        } else if (item.type === 'select') {
+          return (
+            <tr key={index}>
+              <th>{item.title}</th>
+              <td>
+                {item.option.map((option) => (
+                  <div key={option.value}>
+                    {`<!-- BEGIN_IF [{${item.name}}/eq/${option.value}] -->`}
+                    {option.value}
+                    {'<!-- END_IF -->'}
+                  </div>
+                ))}
+              </td>
+            </tr>
+          );
+        } else if (item.type === 'radio') {
+          return (
+            <tr key={index}>
+              <th>{item.title}</th>
+              <td>
+                {item.option.map(
+                  (option) => `<!-- BEGIN_IF [{${item.name}}/eq/${option.value}] -->
+            ${option.label}
+            <!-- END_IF -->`
+                )}
+              </td>
+            </tr>
+          );
+        } else if (item.type === 'checkbox') {
+          return (
+            <tr key={index}>
+              <th>{item.title}</th>
+              <td>
+                {`<!-- BEGIN ${item.name}:loop -->`}
+                {`<!-- BEGIN ${item.name}:glue -->,<!-- END ${item.name}:glue -->`}
+                {item.option.map(
+                  (option) => `<!-- BEGIN_IF [{${item.name}}/eq/${option.value}] -->
+            ${option.label}
+            <!-- END_IF -->`
+                )}
+                {`<!-- END ${item.name}:loop -->`}
+              </td>
+            </tr>
+          );
+        } else if (item.type === 'file') {
+          let src = '/images/fileicon/';
+          let alt = 'file';
+          if (item.extension) {
+            src += `${item.extension}.svg`;
+            alt += item.extension;
+          } else {
+            src += 'file.svg';
+          }
+
+          return (
+            <tr key={index}>
+              <th>{item.title}</th>
+              <td>
+                {`<!-- BEGIN ${item.name}@path:veil -->`}
+                <a href={`%{ARCHIVES_DIR}{${item.name}@path}`}>
+                  <img src={src} width="64" height="64" alt={alt} />
+                </a>
+                {`<!-- END ${item.name}@path:veil -->`}
+              </td>
+            </tr>
+          );
+        } else if (item.type === 'image') {
+          return (
+            <tr key={index}>
+              <th>{item.title}</th>
+              <td>
+                <img src={`%{ARCHIVES_DIR}{${item.name}@path}`} width="64" height="64" alt={`{${item.name}@alt}`} />
+              </td>
+            </tr>
+          );
+        } else if (item.type === 'media') {
+          return (
+            <tr key={index}>
+              <th>{item.title}</th>
+              <td>
+                {`<!-- BEGIN_IF [{${item.name}@type}/eq/file] -->`}
+                <a href={`{${item.name}@path}`}>
+                  <img
+                    alt={`{${item.name}@alt}`}
+                    src={`{${item.name}@thumbnail}`}
+                    style={{ width: '64px', height: 'auto' }}
+                  />
+                </a>
+                {`<!-- END_IF -->`}
+                {`<!-- BEGIN_IF [{${item.name}@type}/eq/image] -->`}
+                {`<!-- BEGIN_IF [{${item.name}@link}/nem] -->`}
+                <a href={`{${item.name}@link}`}>
+                  {`<!-- END_IF -->`}
+                  {item.useFocusImage && (
+                    <div style={{ width: `${item.focusImageWidth}px`, height: `${item.focusImageHeight}px` }}>
+                      <img
+                        className="js-focused-image"
+                        data-focus-x={`{${item.name}@focalX}`}
+                        data-focus-y={`{${item.name}@focalY}`}
+                        alt={`{${item.name}@alt}`}
+                        src={`%{MEDIA_ARCHIVES_DIR}{${item.name}@path}[resizeImg(${item.focusImageWidth})]`}
+                        width={item.focusImageWidth}
+                        height={`{${item.name}@ratio}[getHeightFromRatio(${item.focusImageWidth})]`}
+                      />
+                    </div>
+                  )}
+                  {!item.useFocusImage && (
+                    <img
+                      alt={`{${item.name}@alt}`}
+                      src={`%{MEDIA_ARCHIVES_DIR}{${item.name}@path}`}
+                      width="300"
+                      height={`{${item.name}@ratio}[getHeightFromRatio(300)]`}
+                    />
+                  )}
+                  {`<!-- BEGIN_IF [{${item.name}@link}/nem] -->`}
+                </a>
+                {`<!-- END_IF -->`}
+
+                {`<!-- BEGIN_IF [{${item.name}@text}/nem] -->`}
+                <p>{`{${item.name}@text}`}</p>
+                {'<!-- END_IF -->'}
+                {'<!-- END_IF -->'}
+              </td>
+            </tr>
+          );
+        } else if (item.type === 'rich-editor') {
+          return (
+            <tr key={index}>
+              <th>{item.title}</th>
+              <td>{`{${item.name}@html}[raw]`}</td>
+            </tr>
+          );
+        } else if (item.type === 'lite-editor') {
+          return (
+            <tr key={index}>
+              <th>{item.title}</th>
+              <td>{`{${item.name}}[raw]`}</td>
+            </tr>
+          );
+        } else if (item.type === 'table') {
+          return (
+            <tr key={index}>
+              <th>{item.title}</th>
+              <td>{`{${item.name}}[raw]`}</td>
+            </tr>
+          );
+        }
+      })}
+    </table>
+  );
+}