diff --git a/css/custom-field-maker.css b/css/custom-field-maker.css index 22c7419..81a2582 100644 --- a/css/custom-field-maker.css +++ b/css/custom-field-maker.css @@ -23,7 +23,7 @@ .customFieldFunction select { min-height: 26px; - padding: 4px; + padding: 4px 24px 4px 4px; line-height: 1.5; font-size: 14px; } @@ -64,7 +64,7 @@ grid-template-columns: repeat(3, 1fr); grid-template-areas: "areaInput areaTitle areaField" - "areaTooltip areaPlaceholder areaPlaceholder"; + "areaPlaceholder areaTooltip areaTooltip"; } .customFieldGeneratorBasic label, .customFieldGeneratorBasic dt, @@ -94,6 +94,8 @@ /* ジェネレーター：バリデーター -------------------------------------- */ .customFieldValidatorLabel { + background-color: transparent; + border: none; cursor: pointer; display: flex; align-items: center; @@ -107,22 +109,21 @@ border-right: 2px solid #333; border-bottom: 2px solid #333; transition: transform; - transform: rotateZ(-45deg); + transform: rotateZ(45deg); transform-origin: center center; } -.customFieldValidatorToggle.-open { - transform: rotateZ(-315deg); -} /* アコーディオン -------------------------------------- */ .customFieldAccordionContent { overflow: hidden; + visibility: hidden; transition: max-height 0.3s ease-out, opacity 0.3s ease-out; opacity: 0; } .customFieldAccordionContent.-open { + visibility: visible; opacity: 1; } diff --git a/dist/bundle.js b/dist/bundle.js index 95d796b..afa1b74 100644 --- a/dist/bundle.js +++ b/dist/bundle.js @@ -20727,7 +20727,7 @@ className: 'acms-admin-icon acms-admin-alert-icon-before acms-admin-icon-attention', 'aria-hidden': 'true', }), - 'typeとタイトルとフィールド、全てを入力しないとソースコードを生成できません。', + 'タイプとタイトルとフィールド、全てを入力しないとソースコードを生成できません。', e.createElement( 'button', { diff --git a/src/components/cofirmLayouts/GroupTableLayoutConfirm.jsx b/src/components/cofirmLayouts/GroupTableLayoutConfirm.jsx index 6e6b7dc..3419d5a 100644 --- a/src/components/cofirmLayouts/GroupTableLayoutConfirm.jsx +++ b/src/components/cofirmLayouts/GroupTableLayoutConfirm.jsx @@ -42,7 +42,13 @@ export function GroupTableLayoutConfirm() { )} > {fieldgroup.items.map((item, index) => { - if (item.type === 'text') { + if ( + item.type === 'text' || + item.type === 'tel' || + item.type === 'number' || + item.type === 'email' || + item.type === 'password' + ) { return ( {`{${item.name}}`} diff --git a/src/components/cofirmLayouts/TableLayoutConfirm.jsx b/src/components/cofirmLayouts/TableLayoutConfirm.jsx index 861fb7f..1ab416f 100644 --- a/src/components/cofirmLayouts/TableLayoutConfirm.jsx +++ b/src/components/cofirmLayouts/TableLayoutConfirm.jsx @@ -14,7 +14,13 @@ export function TableLayoutConfirm() { if (!item.name) { return null; } - if (item.type === 'text') { + if ( + item.type === 'text' || + item.type === 'tel' || + item.type === 'number' || + item.type === 'email' || + item.type === 'password' + ) { return ( {item.title} @@ -49,9 +55,10 @@ export function TableLayoutConfirm() { {item.title} {item.option.map( - (option) => ` - ${option.label} - ` + (option) => + ` + ${option.label} + ` )} @@ -64,9 +71,10 @@ export function TableLayoutConfirm() { {``} {`,`} {item.option.map( - (option) => ` - ${option.label} - ` + (option) => + ` + ${option.label} + ` )} {``} diff --git a/src/components/cofirmLayouts/UnitGroupTableLayoutConfirm.jsx b/src/components/cofirmLayouts/UnitGroupTableLayoutConfirm.jsx index 3b5dd4c..72ea8e1 100644 --- a/src/components/cofirmLayouts/UnitGroupTableLayoutConfirm.jsx +++ b/src/components/cofirmLayouts/UnitGroupTableLayoutConfirm.jsx @@ -42,7 +42,13 @@ export function UnitGroupTableLayoutConfirm() { )} > {unitgroup.items.map((item, index) => { - if (item.type === 'text') { + if ( + item.type === 'text' || + item.type === 'tel' || + item.type === 'number' || + item.type === 'email' || + item.type === 'password' + ) { return ( {`{${item.name}}`} diff --git a/src/components/cofirmLayouts/UnitTableLayoutConfirm.jsx b/src/components/cofirmLayouts/UnitTableLayoutConfirm.jsx index 622abfe..b0f55e6 100644 --- a/src/components/cofirmLayouts/UnitTableLayoutConfirm.jsx +++ b/src/components/cofirmLayouts/UnitTableLayoutConfirm.jsx @@ -14,7 +14,13 @@ export function UnitTableLayoutConfirm() { if (!item.name) { return null; } - if (item.type === 'text') { + if ( + item.type === 'text' || + item.type === 'tel' || + item.type === 'number' || + item.type === 'email' || + item.type === 'password' + ) { return ( {item.title} diff --git a/src/components/genelator/FieldGroup.jsx b/src/components/genelator/FieldGroup.jsx index 6f4d8f1..5b3cecf 100644 --- a/src/components/genelator/FieldGroup.jsx +++ b/src/components/genelator/FieldGroup.jsx @@ -115,15 +115,25 @@ export function FieldGroup() { }, [field, setGroupTitleName]); const addGroup = useCallback(() => { + const flg = { + unDuplicatedField: false, + unAlert: false, + }; if (field.name === field.groupName) { setField((prevState) => ({ ...prevState, duplicatedField: true })); - return; - } - if (field.type && field.title && field.name) { - setGroupTitleName(field.groupTitle, field.groupName); - addGroupItem(field); } else { + setField((prevState) => ({ ...prevState, duplicatedField: false })); + flg.unDuplicatedField = true; + } + if (!field.type || !field.title || !field.name) { setField((prevState) => ({ ...prevState, alert: true })); + } else { + setField((prevState) => ({ ...prevState, alert: false })); + flg.unAlert = true; + } + + if (flg.unDuplicatedField && flg.unAlert) { + addGroupItem(field); } }, [field, setGroupTitleName, addGroupItem]); @@ -142,10 +152,6 @@ export function FieldGroup() { return (
- - - -

)}

+ {fieldgroup.title && fieldgroup.name ? (
@@ -289,6 +296,12 @@ export function FieldGroup() {

コード生成

+ {(field.alert || field.duplicatedField) && ( +
+ + +
+ )} {field.type === 'checkbox' && ( diff --git a/src/components/genelator/UnitGroup.jsx b/src/components/genelator/UnitGroup.jsx index 4a0dd82..64b5046 100644 --- a/src/components/genelator/UnitGroup.jsx +++ b/src/components/genelator/UnitGroup.jsx @@ -120,7 +120,6 @@ export function UnitGroup() { return; } if (field.type && field.title && field.name) { - setUnitGroupTitleName(field.groupName, field.groupTitle); addUnitGroupItem(field); } else { setField((prevState) => ({ ...prevState, alert: true })); @@ -142,10 +141,6 @@ export function UnitGroup() { return (
- - - -

)}

+ {unitgroup.title && unitgroup.name ? (
@@ -289,6 +285,12 @@ export function UnitGroup() {

コード生成

+ {(field.alert || field.duplicatedField) && ( +
+ + +
+ )} {field.type === 'checkbox' && ( diff --git a/src/components/genelator/base/Alert.jsx b/src/components/genelator/base/Alert.jsx index bd4458b..d302fc3 100644 --- a/src/components/genelator/base/Alert.jsx +++ b/src/components/genelator/base/Alert.jsx @@ -15,7 +15,7 @@ export function Alert(props) { {alert ? (

- {isPlaceholder && ( -
- -
- handleInputChange(e, 'placeholder')} - className="acms-admin-form-width-full" - placeholder="" - /> -
+
+ +
+ handleInputChange(e, 'placeholder')} + className="acms-admin-form-width-full" + placeholder="" + disabled={!isPlaceholder} + />
- )} +
diff --git a/src/components/genelator/base/ConverterModal.jsx b/src/components/genelator/base/ConverterModal.jsx index 36a892f..a31b8aa 100644 --- a/src/components/genelator/base/ConverterModal.jsx +++ b/src/components/genelator/base/ConverterModal.jsx @@ -23,6 +23,10 @@ export function ConverterModal(props) { }); }, [converter]); + const onOpenConverter = useCallback(() => { + setField((prevState) => ({ ...prevState, openConverter: false })); + }, [setField]); + const onConverter = useCallback( (addConverter) => { setField((prevState) => { @@ -42,9 +46,31 @@ export function ConverterModal(props) { [setField] ); - const onOpenConverter = useCallback(() => { - setField((prevState) => ({ ...prevState, openConverter: false })); - }, [setField]); + const onRemoveConverter = useCallback( + (removeConverter) => { + setField((prevState) => { + const newConverter = prevState.converter.replace(removeConverter, ''); + return { ...prevState, converter: newConverter }; + }); + }, + [setField] + ); + + const renderButton = (option) => { + const isAdded = converter.includes(option); + if (isAdded) { + return ( + + ); + } + return ( + + ); + }; return (
@@ -59,137 +85,77 @@ export function ConverterModal(props) { r 「全角」英字を「半角」に変換します - - - + {renderButton('r')} R 「半角」英字を「全角」に変換します - - - + {renderButton('R')} n 「全角」数字を「半角」に変換します - - - + {renderButton('n')} N 「半角」数字を「全角」に変換します。 - - - + {renderButton('N')} a 「全角」英数字を「半角」に変換します。 - - - + {renderButton('a')} A 「半角」英数字を「全角」に変換します。 - - - + {renderButton('A')} s 「全角」スペースを「半角」に変換します（U+3000 -> U+0020）。 - - - + {renderButton('s')} S 「半角」スペースを「全角」に変換します（U+0020 -> U+3000）。 - - - + {renderButton('S')} k 「全角カタカナ」を「半角カタカナ」に変換します。 - - - + {renderButton('k')} K 「半角カタカナ」を「全角カタカナ」に変換します。 - - - + {renderButton('K')} h 「全角ひらがな」を「半角カタカナ」に変換します。 - - - + {renderButton('h')} H 「半角カタカナ」を「全角ひらがな」に変換します。 - - - + {renderButton('H')} c 「全角カタカナ」を「全角ひらがな」に変換します。 - - - + {renderButton('c')} C 「全角ひらがな」を「全角カタカナ」に変換します。 - - - + {renderButton('C')} V 濁点付きの文字を一文字に変換します。"K", "H" と共に使用します。 - - - + {renderButton('V')} diff --git a/src/components/genelator/base/DuplicateAlert.jsx b/src/components/genelator/base/DuplicateAlert.jsx index 4fb3734..3479f86 100644 --- a/src/components/genelator/base/DuplicateAlert.jsx +++ b/src/components/genelator/base/DuplicateAlert.jsx @@ -11,7 +11,7 @@ export function DuplicateAlert(props) { {duplicatedField ? (

- +
)} - - - - - - - - {validator && - validator.map((item, idx) => ( - - + + + + + + ))} + +
- バリデーター - - - フィールドに入力された値が条件に合っているかをチェックします。 - - - 値 - - - 最小文字数や、正規表現チェックをバリデータに設定した際に設定する値となります。 - - - メッセージ - - - フィールドに入力されている値が条件に合わなかった場合に表示されるメッセージになります。 - - -
- + + + + - - + - ))} - -
+ バリデーター + + + フィールドに入力された値が条件に合っているかをチェックします。 + + + 値 + + - - - - - - - - - - - - - - - - - - - - - - { - const value = e.target.value; - if (!value) return; - updateValidatorValue(idx, value); - }} - className="acms-admin-form-width-full" - /> - - { - const value = e.target.value; - if (!value) return; - updateValidatorMessage(idx, value); - }} - className="acms-admin-form-width-full" - /> - - + メッセージ + + - 削除 - - + + フィールドに入力されている値が条件に合わなかった場合に表示されるメッセージになります。 + + +
+ {validator && + validator.map((item, idx) => ( +
+ + + { + const value = e.target.value; + if (!value) return; + updateValidatorValue(idx, value); + }} + className="acms-admin-form-width-full" + disabled={!possibleValidatorValue(item.option)} + /> + + { + const value = e.target.value; + if (!value) return; + updateValidatorMessage(idx, value); + }} + className="acms-admin-form-width-full" + /> + + +
-
- -
+
+ +
+ + )} - {(mode === 'customfield') | (mode === 'customunit') && - /text|number|tel|email|password|textarea|radioButton|selectbox/.exec(type) ? ( + {/text|number|tel|email|password|textarea|radioButton|selectbox/.exec(type) && ( - ) : ( - <> )}
diff --git a/src/components/html/Checkbox.jsx b/src/components/html/Checkbox.jsx index 71c0f35..be8d182 100644 --- a/src/components/html/Checkbox.jsx +++ b/src/components/html/Checkbox.jsx @@ -64,7 +64,6 @@ export function Checkbox(props) {
); })} - )} @@ -120,7 +119,6 @@ export function Checkbox(props) {
); })} - )} diff --git a/src/components/html/FileInput.jsx b/src/components/html/FileInput.jsx index f84536c..f336393 100644 --- a/src/components/html/FileInput.jsx +++ b/src/components/html/FileInput.jsx @@ -91,7 +91,6 @@ export function FileInput(props) { )} - )} @@ -157,7 +156,6 @@ export function FileInput(props) { {editMode === 'preview' ? null : ''} - )} diff --git a/src/components/html/Heading.jsx b/src/components/html/Heading.jsx index b329fc0..dba236e 100644 --- a/src/components/html/Heading.jsx +++ b/src/components/html/Heading.jsx @@ -9,13 +9,8 @@ export function Heading(props) { return ( <> - {item.title} - {item.tooltip && } - {jsValidator && ( - - - - )} + {item.title} + {item.tooltip && } ); } diff --git a/src/components/html/ImageInput.jsx b/src/components/html/ImageInput.jsx index cc21861..ea9c5e7 100644 --- a/src/components/html/ImageInput.jsx +++ b/src/components/html/ImageInput.jsx @@ -128,7 +128,6 @@ export function ImageInput(props) { {item.tinySize && } {item.largeSize && } {item.square && } -
)} @@ -250,7 +249,6 @@ export function ImageInput(props) { {item.square && item.squareSize && ( )} -
)} diff --git a/src/components/html/Media.jsx b/src/components/html/Media.jsx index 96570b9..2d3d845 100644 --- a/src/components/html/Media.jsx +++ b/src/components/html/Media.jsx @@ -229,7 +229,6 @@ export function Media(props) { })} className="js-value" /> -
)} @@ -446,7 +445,6 @@ export function Media(props) { })} className="js-value" /> -
)} diff --git a/src/components/html/OptionNoSearch.jsx b/src/components/html/OptionNoSearch.jsx index 4d9e450..03e24b6 100644 --- a/src/components/html/OptionNoSearch.jsx +++ b/src/components/html/OptionNoSearch.jsx @@ -3,5 +3,5 @@ import React from 'react'; export function OptionNoSearch(props) { const { noSearch, name } = props; - return <>{noSearch ? : null}; + return <>{noSearch && }; } diff --git a/src/components/html/OptionValidator.jsx b/src/components/html/OptionValidator.jsx index b8ea575..1b12edf 100644 --- a/src/components/html/OptionValidator.jsx +++ b/src/components/html/OptionValidator.jsx @@ -5,7 +5,7 @@ import { useMakerContext } from '../../store/MakerContext'; export function OptionValidator(props) { const { item } = props; const { - preview: { acmscss, jsValidator, editMode }, + preview: { mode, acmscss, jsValidator, editMode }, } = useMakerContext(); if (!item.openValidator) { @@ -53,7 +53,21 @@ export function OptionValidator(props) { ); })} - {item.converter && } + {item.converter && + (() => { + switch (mode) { + case 'customfield': + case 'fieldgroup': { + return ; + } + case 'customunit': + case 'unitgroup': { + return ; + } + default: + return null; + } + })()} ); } diff --git a/src/components/html/RadioButton.jsx b/src/components/html/RadioButton.jsx index 693ebe8..800e731 100644 --- a/src/components/html/RadioButton.jsx +++ b/src/components/html/RadioButton.jsx @@ -64,7 +64,6 @@ export function RadioButton(props) {
); })} - )} @@ -120,7 +119,6 @@ export function RadioButton(props) {
); })} - )} diff --git a/src/components/html/Selectbox.jsx b/src/components/html/Selectbox.jsx index 19c00f3..e5250c2 100644 --- a/src/components/html/Selectbox.jsx +++ b/src/components/html/Selectbox.jsx @@ -53,7 +53,6 @@ export function Selectbox(props) { ); })} - )} @@ -99,7 +98,6 @@ export function Selectbox(props) { ); })} - )} diff --git a/src/components/html/TextInput.jsx b/src/components/html/TextInput.jsx index ad62865..eb12ca0 100644 --- a/src/components/html/TextInput.jsx +++ b/src/components/html/TextInput.jsx @@ -40,7 +40,6 @@ export function TextInput(props) { className={classnames({ 'acms-admin-form-width-full': acmscss })} {...(item.placeholder ? { placeholder: item.placeholder } : {})} /> - )} @@ -70,7 +69,6 @@ export function TextInput(props) { className={classnames({ 'acms-admin-form-width-full': acmscss })} {...(item.placeholder ? { placeholder: item.placeholder } : {})} /> - )} diff --git a/src/components/html/Textarea.jsx b/src/components/html/Textarea.jsx index e3b8dcd..305d353 100644 --- a/src/components/html/Textarea.jsx +++ b/src/components/html/Textarea.jsx @@ -44,7 +44,6 @@ export function Textarea(props) { > {isValue ? `{${item.name}}` : ''} - )} @@ -74,7 +73,6 @@ export function Textarea(props) { > {isValue ? `{${item.name}}` : ''} - )} diff --git a/src/components/layouts/GroupSection.jsx b/src/components/layouts/GroupSection.jsx index 07c128a..f7184c4 100644 --- a/src/components/layouts/GroupSection.jsx +++ b/src/components/layouts/GroupSection.jsx @@ -12,6 +12,8 @@ import { FileInput } from '../html/FileInput'; import { RichEditor } from '../html/RichEditor'; import { Table } from '../html/Table'; import { useMakerContext } from '../../store/MakerContext'; +import { OptionNoSearch } from '../html/OptionNoSearch'; +import { OptionValidator } from '../html/OptionValidator'; export function GroupSection() { const { @@ -529,30 +531,12 @@ export function GroupSection() { {item.type === 'richEditor' && ( )} + - {item.noSearch && } - {item.validator && - item.validator.map((validator, index) => { - if (!validator.option) { - return null; - } - const name = item.type === 'file' || item.type === 'image' ? `${item.name}@path` : item.name; - return ( - - ); - })} - {(() => { - const name = item.type === 'file' || item.type === 'image' ? `${item.name}@path` : item.name; - return item.converter && ; - })()} + + ))} diff --git a/src/components/layouts/UnitGroupSection.jsx b/src/components/layouts/UnitGroupSection.jsx index dd1e9e8..38c2770 100644 --- a/src/components/layouts/UnitGroupSection.jsx +++ b/src/components/layouts/UnitGroupSection.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import { useMakerContext } from '../../store/MakerContext'; import classnames from 'classnames'; import { Heading } from '../html/Heading'; import { TextInput } from '../html/TextInput'; @@ -11,8 +12,8 @@ import { ImageInput } from '../html/ImageInput'; import { FileInput } from '../html/FileInput'; import { RichEditor } from '../html/RichEditor'; import { Table } from '../html/Table'; +import { OptionNoSearch } from '../html/OptionNoSearch'; import { OptionValidator } from '../html/OptionValidator'; -import { useMakerContext } from '../../store/MakerContext'; export function UnitGroupSection() { const { @@ -547,8 +548,8 @@ export function UnitGroupSection() { )} - {item.noSearch && } + ))} diff --git a/src/components/navigator/PreviewNavigator.jsx b/src/components/navigator/PreviewNavigator.jsx index 0e522d8..e22475a 100644 --- a/src/components/navigator/PreviewNavigator.jsx +++ b/src/components/navigator/PreviewNavigator.jsx @@ -51,8 +51,8 @@ export function PreviewNavigator() { className="acms-admin-form-width-quarter" style={{ width: '100px' }} > - - + +
)} @@ -155,7 +155,7 @@ export function PreviewNavigator() { {mode === 'customfield' && (