amotify 0.0.54 → 0.0.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amotify",
-  "version": "0.0.54",
+  "version": "0.0.55",
   "description": "UI Component for React",
   "main": "dist/launch.js",
   "types": "dist/@types.d.ts",

package/src/functions/Input/Text.tsx

@@ -24,6 +24,14 @@ const ValidateTypes: {
     reg: /^-?[0-9\.]+$/g,exist: true,
     reason: '半角数字で入力してください'
   },
+  katakana: {
+    reg: /^[ァ-ヶー 　ｦ-ﾟ　 ]*$/g,exist: true,
+    reason: 'カタカナで入力してください'
+  },
+  [ 'hankaku.katakana' ]: {
+    reg: /^[ｦ-ﾟ　 ]*$/g,exist: true,
+    reason: '半角カタカナで入力してください'
+  },
   digitNumber: {
     reg: /^-?[0-9\.]+$/g,exist: true,
     reason: '半角数字で入力してください'
@@ -33,8 +41,8 @@ const ValidateTypes: {
     reason: '空白または一部の特殊文字は使用できません'
   },
   creditCard: {
-    reg: /^\d{16}$/g,exist: true,
-    reason: '16桁の数字で入力してください'
+    reg: /^\d{14,16}$/g,exist: true,
+    reason: '14~16桁の数字で入力してください'
   },
   email: {
     reg: /^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]+\.[A-Za-z0-9]+$/,exist: true,
@@ -48,12 +56,18 @@ const ValidateTypes: {
     reason: '8文字以上、半角英数大小文字で入力してください'
   },
   tel: {
-    reg: /^(0|\(?\+\d{1,3}\)?\s)[-0-9]{9,12}$/g,exist: true,
+    reg: /.*$/g,exist: true,
     reason: <>
       <Box>0から始まる番号のみ入力可能です</Box>
       <Box>9~12桁の数字で入力してください</Box>
       <Box>数字のみ入力可能です</Box>
     </>
+    // reg: /^(0|\(?\+\d{1,3}\)?\s)[-0-9]{9,12}$/g,exist: true,
+    // reason: <>
+    //   <Box>0から始まる番号のみ入力可能です</Box>
+    //   <Box>9~12桁の数字で入力してください</Box>
+    //   <Box>数字のみ入力可能です</Box>
+    // </>
   },
   url: {
     reg: /^https?:\/\/[^\n\s]+(\.|\:)[^\n\s\.\:]+$/,exist: true,
@@ -81,6 +95,12 @@ const DataLeveling = ( params: {
   if ( [ 'tel','number','digitNumber','test','postal','creditCard' ].includes( restrict ) ) {
     dataValue = dataValue.zen2hanNumber();
   }
+  if ( restrict == 'katakana' ) {
+    dataValue = dataValue.replace( /[^ァ-ヶー 　ｦ-ﾟ　 ]/ig,'' );
+  }
+  if ( restrict == 'hankaku.katakana' ) {
+    dataValue = dataValue.replace( /[^ｦ-ﾟ　 ]/ig,'' );
+  }
   if ( [ 'postal','creditCard' ].includes( restrict ) ) {
     dataValue = dataValue.removeLetters();
   }
@@ -273,7 +293,7 @@ export const TextInput: React.FC<amotify.fn.Input.Text.OriginParams> = ( params
   } = params;
 
   let inputType = restrict == 'password' ? 'password' : 'text';
-  let inputMode: 'numeric' | 'text' | 'email' = [ 'number','digitNumber','tel','creditCard' ].includes( restrict ) ? 'numeric' : restrict == 'email' ? 'email' : 'text';
+  let inputMode: 'numeric' | 'text' | 'email' = [ 'number','digitNumber','creditCard' ].includes( restrict ) ? 'numeric' : restrict == 'email' ? 'email' : 'text';
 
   let Default_Status: amotify.fn.Input.Status.Text = {
     componentID: componentID!,
@@ -288,6 +308,7 @@ export const TextInput: React.FC<amotify.fn.Input.Text.OriginParams> = ( params
     caretFrom: null as any,
     caretTo: null as any
   }
+  let [ val_isComposing,set_isComposing ] = React.useState( false );
   let [ val_status,set_status ] = React.useState( Default_Status );
   let [ val_validate,set_validate ] = React.useState( {
     ok: false,
@@ -335,6 +356,7 @@ export const TextInput: React.FC<amotify.fn.Input.Text.OriginParams> = ( params
       autoCapitalize={ autoCapitalize }
       onKeyDown={ ( event ) => {
         let { key,target } = event;
+
         {
           let input = target as HTMLInputElement;
           let { selectionStart,selectionEnd } = input;
@@ -359,6 +381,9 @@ export const TextInput: React.FC<amotify.fn.Input.Text.OriginParams> = ( params
             input.setSelectionRange( caretFrom - 1,caretTo - 1 );
             event.preventDefault();
           }
+          if ( key == 'Enter' || key == 'Tab' ) {
+
+          }
         }
 
         if ( [ 'number','digitNumber','creditCard' ].includes( restrict ) ) {
@@ -408,9 +433,13 @@ export const TextInput: React.FC<amotify.fn.Input.Text.OriginParams> = ( params
           restrict,
           value: rawValue
         } );
+
+        if ( val_isComposing ) value.formatValue = rawValue;
+
         if ( value.formatValue == val_status.formatValue ) return;
 
         if ( val_validate.ok ) set_validate( { ok: false,notice: [] } );
+
         set_status( {
           ...val_status,
           ...value,
@@ -424,6 +453,33 @@ export const TextInput: React.FC<amotify.fn.Input.Text.OriginParams> = ( params
         if ( onChange ) onChange( event );
       } }
       { ...others }
+      onCompositionStart={ ( event ) => {
+        others?.onCompositionStart && others?.onCompositionStart( event );
+        set_isComposing( true );
+      } }
+      onCompositionEnd={ ( event ) => {
+        others?.onCompositionEnd && others?.onCompositionEnd( event );
+
+        if ( restrict == 'text' ) {
+          return;
+        }
+
+        let value = DataLeveling( {
+          min,max,
+          restrict,
+          value: val_status.formatValue
+        } );
+        set_status( {
+          ...val_status,
+          ...value,
+          prevValue: val_status.formatValue,
+          eventType: 'update',
+          eventID: $.uuidGen(),
+          caretFrom: Number( val_status.formatValue.length + 1 ),
+          caretTo: Number( val_status.formatValue.length + 1 )
+        } );
+        set_isComposing( false );
+      } }
     />
   </BoxWrapper>;
 }

package/src/functions/Input/_.tsx

@@ -88,6 +88,14 @@ const TextInputs: amotify.fn.Input.Text.Methods = {
       params={ DefaultStyles.Boxish( rawParams ) }
     />;
   },
+  Katakana: ( props ) => ( <TextInputs.Normal
+    restrict='katakana'
+    { ...props }
+  /> ),
+  HankakuKatakana: ( props ) => ( <TextInputs.Normal
+    restrict='hankaku.katakana'
+    { ...props }
+  /> ),
   CreditCard: ( props ) => ( <TextInputs.Normal
     restrict='creditCard'
     { ...props }