diff --git a/src/components/genelator/base/Validator.jsx b/src/components/genelator/base/Validator.jsx index 7d0374f..ed491fb 100644 --- a/src/components/genelator/base/Validator.jsx +++ b/src/components/genelator/base/Validator.jsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import ReactTooltip from 'react-tooltip'; export function Validator(props) { @@ -7,6 +7,14 @@ export function Validator(props) { field: { type, validator, openValidator, converter, noSearch }, setField, } = props; + const [isConverter, setIsConverter] = useState(false); + + useEffect(() => { + const possibleConverter = ['text', 'textarea', 'checkbox', 'selectbox', 'radioButton']; + if (possibleConverter.includes(type)) { + setIsConverter(true); + } + }, [type, setIsConverter]); const noSearchCheck = () => { return ( @@ -100,41 +108,46 @@ export function Validator(props) { {openValidator && (
- {/text|textarea|radio|select/.exec(type) && noSearchCheck()} -
- テキストの変換 - - - - テキストフィールドに入力された値を別の値に変換します。詳しくは参照ボタンを押すと表示されるモーダルウィンドウに情報が記載されています。 - - -
-

- { - const value = e.target.value; - if (!value) return; - setField((prevState) => ({ ...prevState, converter: value })); - }} - className="acms-admin-form-width-quarter acms-admin-margin-right-small" - placeholder="例)rs" - /> - -

+ {isConverter && ( +
+ {/text|textarea|radio|select/.exec(type) && noSearchCheck()} +
+ テキストの変換 + + + + テキストフィールドに入力された値を別の値に変換します。詳しくは参照ボタンを押すと表示されるモーダルウィンドウに情報が記載されています。 + + +
+

+ { + const value = e.target.value; + if (!value) return; + setField((prevState) => ({ ...prevState, converter: value })); + }} + className="acms-admin-form-width-quarter acms-admin-margin-right-small" + placeholder="例)rs" + /> + +

+
+ )} + {showValidator && ( diff --git a/webpack.dev.js b/webpack.dev.js index 368e238..d6fdbba 100644 --- a/webpack.dev.js +++ b/webpack.dev.js @@ -8,6 +8,9 @@ module.exports = merge(prodConfig, { mode: 'development', devtool: 'inline-source-map', devServer: { + client: { + overlay: false, + }, static: { directory: path.resolve(__dirname, ''), }, diff --git a/webpack.prod.js b/webpack.prod.js index 5c6bba4..9f3a173 100644 --- a/webpack.prod.js +++ b/webpack.prod.js @@ -1,4 +1,3 @@ -// webpack.prod.js const path = require('path'); const ESLintPlugin = require('eslint-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin'); @@ -6,11 +5,11 @@ const CopyWebpackPlugin = require('copy-webpack-plugin'); module.exports = { mode: 'production', cache: { - type: 'filesystem', // Webpack 5では推奨される方法 + type: 'filesystem', }, performance: { hints: 'warning', - maxAssetSize: 600000, // 600 KiBに設定 + maxAssetSize: 600000, maxEntrypointSize: 600000, }, @@ -25,9 +24,9 @@ module.exports = { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', chunkFilename: `bundle.chunk.js?date=${new Date().getTime()}`, - assetModuleFilename: 'assets/[name][ext]', // アセットの出力先を指定 + assetModuleFilename: 'assets/[name][ext]', publicPath: '/', - clean: true, // ビルド時に dist フォルダをクリーンアップ + clean: true, }, resolve: { modules: ['node_modules'], @@ -40,6 +39,9 @@ module.exports = { exclude: /node_modules/, use: { loader: 'babel-loader', + options: { + cacheDirectory: true, + }, }, }, { @@ -48,9 +50,14 @@ module.exports = { }, { test: /\.(jpg|png|svg)$/, - type: 'asset/resource', // Webpack 5 の Asset Modules を使用 + type: 'asset', + parser: { + dataUrlCondition: { + maxSize: 8 * 1024, + }, + }, generator: { - filename: 'assets/[name][ext]', // アセットの出力パターンを指定 + filename: 'assets/[name].[hash][ext]', }, }, ],