amotify 0.0.3 → 0.0.4

package/src/Functions/Input/TextArea.tsx

@@ -0,0 +1,115 @@
+import {
+  React,
+} from '@global';
+const {
+  useState
+} = React;
+
+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.TextArea.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 TextAreaInput: FNC<amotify.fn.Input.TextArea.PlainParams> = ( params ) => {
+  let {
+    componentID,
+    tone,
+    required,
+    form,
+
+    enableFormSubmit,
+
+    checkValidationAtFirst,
+    onChange,onKeyDown,
+    onValidate,
+    onUpdateValue,
+    onUpdateValidValue,
+    value = '',
+    leftIndicator,rightIndicator,
+
+    ...others
+  } = params;
+
+  let Default_Status: amotify.fn.Input.Status.Plain = {
+    componentID: componentID!,
+    dataValue: value,
+    eventType: 'init',
+    eventID: $.uuidGen()
+  }
+  let [ val_status,set_status ] = useState( Default_Status );
+  let [ val_validate,set_validate ] = 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 }
+    >
+      <textarea
+        data-form={ form }
+        data-input-type={ 'textarea' }
+        data-validation={ val_validate.ok }
+        data-value={ val_status.dataValue }
+        data-component-id={ val_status.componentID }
+        value={ val_status.dataValue }
+        onKeyDown={ ( event ) => {
+          if ( onKeyDown ) onKeyDown( event );
+          if ( enableFormSubmit ) SubmitForm( event );
+        } }
+        onChange={ ( event ) => {
+          let {
+            value
+          } = event.target;
+
+          if ( val_validate.ok ) set_validate( { ok: false,notice: [] } );
+          set_status( {
+            ...val_status,
+            dataValue: value,
+            eventType: 'update',
+            eventID: $.uuidGen(),
+          } );
+
+          if ( onChange ) onChange( event );
+        } }
+        { ...others }
+      />
+    </BoxWrapper>
+  );
+}