amotify 0.0.56 → 0.0.58

package/package.json

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

package/src/@jsminAmotifyExtension/formCollect.tsx

@@ -31,12 +31,15 @@ $.formCollect = async ( form ) => {
       checked,
       dataset: {
         value,
+        name: dataName = '',
         inputType = '',
         validation
       }
     } = Inputs[ index ] as any;
     let Value: any = value;
 
+    name = name || dataName;
+
     validation = Number( ( validation ?? 'true' ) == 'true' );
 
     if ( inputType == 'hidden' ) {

package/src/functions/Button/_.tsx

@@ -29,7 +29,7 @@ const Styles = {
     } else if ( size == 'S' ) {
       styles = {
         ...styles,
-        padding: [ '1/2',1 ],
+        padding: [ '1/2','3/4' ],
         fontSize: '1.mini',
         borderRadius: '3.tone.tertiary'
       }

package/src/functions/Input/Contenteditable.tsx

@@ -0,0 +1,114 @@
+import {
+  React,
+} from '@global';
+import {
+  BoxWrapper,
+  SubmitForm,
+  ValidationCheck,
+  CommonEffects
+} from './core'
+
+import style from './style.module.scss';
+
+function DefaultValidation( props: {
+  value: any
+  params: any
+} ): amotify.fn.Input.Validation.Result {
+  let { value,params } = props;
+  let { required } = params as amotify.fn.Input.Contenteditable.PlainParams;
+  let notice: amotify.fn.Input.Validation.NoticeTypes[] = [];
+
+  if ( required && !value ) {
+    notice.push( { type: 'invalid',label: '必須項目です' } );
+  }
+
+  return {
+    ok: !notice.filter( ( { type } ) => type == 'invalid' ).length,
+    notice: notice
+  }
+}
+
+export const ContenteditableInput: React.FC<amotify.fn.Input.Contenteditable.PlainParams> = ( params ) => {
+  let {
+    componentID,
+    tone,
+    required,
+    form,
+
+    enableFormSubmit,
+
+    checkValidationAtFirst,
+    onInput,onKeyDown,
+    onValidate,
+    onUpdateValue,
+    onUpdateValidValue,
+    children = '',
+    leftIndicator,rightIndicator,leftIcon,rightIcon,
+
+    ...others
+  } = params;
+
+  let Default_Status: amotify.fn.Input.Status.Plain = {
+    componentID: componentID!,
+    dataValue: children,
+    eventType: 'init',
+    eventID: $.uuidGen()
+  }
+  let [ val_status,set_status ] = React.useState( Default_Status );
+  let [ val_validate,set_validate ] = React.useState( {
+    ok: false,
+    notice: []
+  } as amotify.fn.Input.Validation.Result );
+
+  CommonEffects( {
+    params,
+    val_status,
+    set_status,
+    val_validate,
+    set_validate,
+    onUpdateValue,
+    onUpdateValidValue,
+    DefaultValidation
+  } );
+
+  return <BoxWrapper
+    val_status={ val_status }
+    set_status={ set_status }
+    val_validate={ val_validate }
+    params={ params }
+  >
+    <div
+      contentEditable
+      data-form={ form }
+      data-name={ params.name }
+      data-input-type={ 'contenteditable' }
+      data-validation={ val_validate.ok }
+      data-value={ val_status.dataValue }
+      data-component-id={ val_status.componentID }
+      onKeyDown={ ( event ) => {
+        !!onKeyDown && onKeyDown( event );
+        !!enableFormSubmit && SubmitForm( event );
+      } }
+      onInput={ ( event ) => {
+        let contentEditor = event.currentTarget as HTMLDivElement;
+        let {
+          innerHTML,
+          innerText
+        } = contentEditor;
+
+        if ( val_validate.ok ) set_validate( { ok: false,notice: [] } );
+        set_status( {
+          ...val_status,
+          dataValue: innerText,
+          eventType: 'update',
+          eventID: $.uuidGen(),
+        } );
+
+        onInput && onInput( event );
+      } }
+      { ...others }
+    >
+      { children }
+    </div>
+  </BoxWrapper>;
+}

package/src/functions/Input/_.tsx

@@ -34,6 +34,7 @@ import {
   TextValidate
 } from './Text';
 import { TextAreaInput } from './TextArea';
+import { ContenteditableInput } from './Contenteditable';
 import { DigitCharactersInput } from './DigitCharacters';
 import {
   TimeInput,
@@ -408,6 +409,26 @@ export const Input: amotify.fn.Input.Methods = {
       params={ params }
     />;
   },
+  Contenteditable: ( rawParams ) => {
+    rawParams = { ...rawParams }
+    if ( rawParams.rightIcon ) rawParams.paddingRight = rawParams.paddingRight ?? 3;
+    if ( rawParams.leftIcon ) rawParams.paddingLeft = rawParams.paddingLeft ?? 3;
+    rawParams = {
+      ...rawParams,
+      freeCSS: {
+        whiteSpace: 'pre-wrap',
+        ...rawParams.freeCSS
+      },
+    }
+
+    let params = DefaultStyles.Boxish( rawParams );
+    params.rows = params.rows || 5;
+    return <UniComponent
+      componentID={ rawParams.componentID }
+      children={ ContenteditableInput }
+      params={ params }
+    />;
+  },
   DigitCharacters: ( rawParams ) => {
     rawParams = { ...rawParams }
     rawParams = {

package/src/functions/Input/style.module.scss

@@ -51,6 +51,7 @@
   }
 }
 .Input {
+  outline: none !important;
   &:focus, &:active {
     z-index: 1;
     background-color: $color-layer1;