amotify 0.0.3 → 0.0.4

package/src/Functions/Input/Switch/_.tsx

@@ -0,0 +1,177 @@
+import {
+  React
+} from '@global';
+import {
+  Box,
+  FAIcon
+} from '@atoms';
+import {
+  Row
+} from '@mols';
+import {
+  Buttons
+} from '@functions';
+import {
+  BoxWrapper,
+  SubmitForm,
+  ValidationCheck,
+  CommonEffects
+} from '../core';
+import style from './style.module.scss';
+
+const {
+  useState
+} = React;
+
+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: 'ONになっていません' } );
+  }
+
+  return {
+    ok: !notice.filter( ( { type } ) => type == 'invalid' ).length,
+    notice: notice
+  }
+}
+
+export const SwitchInput: FNC<amotify.fn.Input.Switch.PlainParams> = ( params ) => {
+  let {
+    componentID,
+    color = 'posi',
+    required,
+    form,
+    id,
+
+    enableFormSubmit,
+
+    checkValidationAtFirst,
+    onChange,onKeyDown,
+    onValidate,
+    onUpdateValue,onUpdateValidValue,
+    value = '',
+    icon = '',
+    appearance = 'material',
+
+    ...others
+  } = params;
+
+  let Default_Status: amotify.fn.Input.Status.Plain = {
+    componentID: params.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 );
+  let isChecked = !!val_status.dataValue;
+
+  CommonEffects( {
+    params,
+    val_status,
+    set_status,
+    val_validate,
+    set_validate,
+    DefaultValidation,
+    onUpdateValue,onUpdateValidValue,
+    ExtraOverrideParams: {
+      dataValue: value,
+      formatValue: value
+    },
+  } );
+
+  return ( <BoxWrapper
+    val_status={ val_status }
+    set_status={ set_status }
+    val_validate={ val_validate }
+    params={ params }
+  >
+    <input
+      type='checkbox'
+      data-form={ form }
+      data-input-type={ 'switch' }
+      data-validation={ val_validate.ok }
+      data-component-id={ val_status.componentID }
+      data-value={ val_status.dataValue }
+      checked={ val_status.dataValue }
+      className={ style.Input }
+      id={ id }
+      onKeyDown={ ( event ) => {
+        if ( onKeyDown ) onKeyDown( event );
+        if ( enableFormSubmit ) SubmitForm( event );
+      } }
+      onChange={ ( event ) => {
+        if ( val_validate.ok ) set_validate( { ok: false,notice: [] } );
+        set_status( {
+          ...val_status,
+          dataValue: event.target.checked,
+          eventType: 'update',
+          eventID: $.uuidGen(),
+        } );
+
+        if ( onChange ) onChange( event );
+      } }
+      { ...others }
+    />
+    <Buttons.Label.Plain
+      tabIndex={ -1 }
+      htmlFor={ id }
+      padding={ '1/3' }
+      transition='middle'
+      borderRadius={ '1.tone.primary' }
+      className={ style.Label }
+    >
+      <Box
+        { ...appearance == 'applely' ? {
+          padding: '1/4',
+          isRounded: true,
+          backgroundColor: isChecked ? color : '5.layer.darker'
+        } : {} }
+      >
+        <Row.Center
+          unitHeight={ 2.5 }
+          position='relative'
+          freeCSS={ {
+            width: 12 * 4.5
+          } }
+        >
+          { appearance == 'material' ? <Box
+            position='absolute'
+            backgroundColor={ isChecked ? color : '5.layer.darker' }
+            borderRadius={ 'sphere' }
+            unitHeight={ 1 }
+            transition='middle'
+            width={ 1 }
+            className={ style.Bar }
+            opacity='middle'
+          /> : null }
+          <Box
+            position='absolute'
+            top={ 0 }
+            left={ 0 }
+            backgroundColor={ appearance == 'material' && isChecked ? color : 'white' }
+            transition='middle'
+            ssSphere={ 2.5 }
+            boxShadow={ 2 }
+            className={ style.Dot }
+          >
+            { icon ? <FAIcon
+              transition='middle'
+              fontColor={ appearance == 'applely' && isChecked ? color : 'white' }
+              d={ icon }
+            /> : null }
+          </Box>
+        </Row.Center>
+      </Box>
+    </Buttons.Label.Plain>
+  </BoxWrapper> );
+}

package/src/Functions/Input/Switch/style.module.scss

@@ -0,0 +1,18 @@
+@use '@uniVar' as *;
+.Input {
+  position: absolute;
+  height: 0;
+  width: 0;
+  overflow: hidden;
+  &:checked + .Label {
+    .Dot {
+      left: calc(100% - $unit2-5 ) !important;
+    }
+  }
+  &:focus + .Label {
+    box-shadow: 0 0 0 $unit1_3 $color-layer3;
+  }
+  &[disabled] + .Label {
+    opacity: .4;
+  }
+}

package/src/Functions/Input/Text.tsx

@@ -0,0 +1,437 @@
+import {
+  React,
+} from '@global';
+const {
+  useEffect,
+  useState,
+} = React;
+
+import {
+  Box,
+} from '@atoms';
+
+import {
+  BoxWrapper,
+  SubmitForm,
+  CommonEffects
+} from './core';
+
+import style from './style.module.scss';
+
+const ValidateTypes: {
+  [ key: string ]: {
+    reg: RegExp
+    exist: boolean
+    reason: ReactElement
+  }
+} = {
+  number: {
+    reg: /^-?[0-9\.]+$/g,exist: true,
+    reason: '半角数字で入力してください'
+  },
+  digitNumber: {
+    reg: /^-?[0-9\.]+$/g,exist: true,
+    reason: '半角数字で入力してください'
+  },
+  fileName: {
+    reg: /[¥\/;:*\?\"\'\|\.\s\n\r\<\>]/g,exist: false,
+    reason: '空白または一部の特殊文字は使用できません'
+  },
+  creditCard: {
+    reg: /^\d{16}$/g,exist: true,
+    reason: '16桁の数字で入力してください'
+  },
+  email: {
+    reg: /^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]+\.[A-Za-z0-9]+$/,exist: true,
+    reason: <>
+      <Box>○○○○@○○○○.○○○の形式で入力してください</Box>
+      <Box>最後の文字に.(ドット)を入れることはできません</Box>
+    </>,
+  },
+  password: {
+    reg: /^(?=[^A-Z]*[A-Z])(?=[^a-z]*[a-z])(?=[^0-9]*[0-9]).{8,}$/,exist: true,
+    reason: '8文字以上、半角英数大小文字で入力してください'
+  },
+  tel: {
+    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,
+    reason: 'URL形式 : http(s)://◯◯◯◯'
+  },
+  postal: {
+    reg: /^\d{7}$/g,exist: true,
+    reason: '7桁の数字で入力してください'
+  }
+}
+
+const DataLeveling = ( params: {
+  min?: number | null
+  max?: number | null
+  restrict: amotify.fn.Input.Text.RestrictTypes,
+  value: any
+} ) => {
+  let {
+    restrict,
+    value = ''
+  } = params;
+
+  let dataValue = String( value );
+  let minus = false;
+  if ( [ 'tel','number','digitNumber','test','postal','creditCard' ].includes( restrict ) ) {
+    dataValue = dataValue.zen2hanNumber();
+  }
+  if ( [ 'postal','creditCard' ].includes( restrict ) ) {
+    dataValue = dataValue.removeLetters();
+  }
+  if ( [ 'number','digitNumber' ].includes( restrict ) ) {
+    if ( dataValue ) {
+      if ( dataValue == '-' ) {
+
+      } else if ( dataValue == '0-' ) {
+        dataValue = '-';
+      } else {
+        if ( dataValue[ 0 ] == '-' ) minus = true;
+        dataValue = dataValue.replace( /[^0-9\.]/ig,'' );
+
+        let Amount = Number( dataValue );
+        if ( Amount === 0 ) minus = false;
+        if ( minus ) Amount = -1 * Amount;
+
+        if ( $.is.exist( params.min ) ) {
+          Amount = Math.max( Amount,Number( params.min ) );
+        }
+        if ( $.is.exist( params.max ) ) {
+          Amount = Math.min( Amount,Number( params.max ) );
+        }
+        dataValue = String( Math.abs( Amount ) );
+      }
+    }
+  }
+
+  let formatValue = dataValue;
+  if ( restrict == 'digitNumber' ) {
+    if ( dataValue && dataValue != '-' ) {
+      let arrary = [];
+      for ( let index = dataValue.length - 1; index >= 0; index-- ) {
+        arrary.unshift( dataValue[ index ] );
+        let Index = ( dataValue.length - 1 ) - index + 1;
+        if (
+          index != 0 && Index % 3 == 0 ) {
+          arrary.unshift( ',' );
+        }
+      }
+      formatValue = arrary.join( '' );
+    }
+  } else if ( restrict == 'postal' ) {
+    if ( dataValue.length >= 4 ) {
+      formatValue = dataValue.clip( 0,3 ) + '-' + dataValue.clip( 3 );
+    }
+  } else if ( restrict == 'creditCard' ) {
+    formatValue = dataValue.replace( /.{4}(?=.)/g,"$& " );
+  }
+
+  if ( [ 'number','digitNumber' ].includes( restrict ) ) {
+    if ( minus ) {
+      dataValue = '-' + dataValue;
+      formatValue = '-' + formatValue;
+    }
+  }
+
+  return {
+    formatValue,
+    dataValue
+  };
+}
+
+const setSelection: {
+  ( props: {
+    id?: string,
+    restrict: amotify.fn.Input.Text.RestrictTypes
+    val_status: any
+  } ): void
+} = ( props ) => {
+  let {
+    id,
+    restrict,
+    val_status
+  } = props;
+
+  let input = $( '#' + id )[ 0 ] as HTMLInputElement;
+  if ( input ) {
+    if ( val_status.prevValue && val_status.formatValue ) {
+      let {
+        formatValue: currentValue,
+        prevValue,
+        caretFrom,caretTo
+      } = val_status;
+
+      if ( restrict == 'creditCard' ) {
+        if ( currentValue.length >= prevValue.length ) {
+          if ( caretFrom % 5 == 0 ) {
+            caretFrom++; caretTo++;
+          }
+        }
+        input.setSelectionRange( caretFrom,caretTo );
+      } else if ( restrict == 'postal' ) {
+        if ( currentValue.length == 5 && prevValue.length == 3 ) {
+          caretFrom++; caretTo++;
+        }
+        input.setSelectionRange( caretFrom,caretTo );
+      } else if ( restrict == 'digitNumber' ) {
+        let margin = currentValue.length - prevValue.length;
+
+        if ( margin == 2 ) {
+          caretFrom++; caretTo++;
+        }
+        if ( margin == -2 ) {
+          caretFrom--; caretTo--;
+        }
+        input.setSelectionRange( caretFrom,caretTo );
+      }
+    }
+  }
+}
+export const TextValidate = ( value: any,restrict: amotify.fn.Input.Text.RestrictTypes ) => {
+  let response = {
+    ok: true,
+    body: '' as any
+  };
+  ( () => {
+    let kit = ValidateTypes[ restrict ];
+    if ( !kit ) return;
+
+    let reason = kit.reason;
+    if ( kit ) {
+      let valid = Boolean( Number( !!value.match( kit.reg ) ) ^ Number( !kit.exist ) );
+      response = {
+        ok: valid,
+        body: valid ? '' : reason
+      }
+    }
+  } )();
+  return response;
+}
+
+function DefaultValidation( props: {
+  value: any
+  params: any
+} ): amotify.fn.Input.Validation.Result {
+  let {
+    value,
+    params
+  } = props;
+  let {
+    restrict = 'text',
+    maxLength = 255,
+    required
+  } = params as amotify.fn.Input.Text.OriginParams
+  let notice: amotify.fn.Input.Validation.NoticeTypes[] = [];
+
+  if ( $.is.exist( maxLength ) ) {
+    if ( value.length >= Number( maxLength ) ) {
+      notice.push( { type: 'invalid',label: maxLength + '字以内で入力してください' } );
+    }
+  }
+  if ( value ) {
+    let Valid = TextValidate( value,restrict );
+    if ( !Valid.ok ) notice.push( { type: 'invalid',label: Valid.body } );
+  } else if ( required ) {
+    notice.push( { type: 'invalid',label: '必須項目です' } );
+  }
+
+  return {
+    ok: !notice.filter( ( { type } ) => type == 'invalid' ).length,
+    notice: notice
+  }
+}
+
+export const TextInput: FNC<amotify.fn.Input.Text.OriginParams> = ( params ) => {
+  let {
+    componentID,
+    tone,
+    required,
+    restrict = 'text',
+    form,
+    autoComplete = 'off',
+    autoCapitalize = 'off',
+
+    enableFormSubmit,
+    clearButton = false,
+
+    checkValidationAtFirst,
+    onChange,onKeyDown,
+    onValidate,
+    onUpdateValue,
+    onUpdateValidValue,
+    value = '',
+    leftIndicator,rightIndicator,rightIcon,
+    maxLength,
+    min,
+    max,
+
+    ...others
+  } = params;
+
+  let inputType = restrict == 'password' ? 'password' : 'text';
+  let inputMode: 'numeric' | 'text' | 'email' = [ 'number','digitNumber','tel','creditCard' ].includes( restrict ) ? 'numeric' : restrict == 'email' ? 'email' : 'text';
+
+  let Default_Status: amotify.fn.Input.Status.Text = {
+    componentID: componentID!,
+    ...DataLeveling( {
+      min,max,
+      restrict,
+      value
+    } ),
+    prevValue: '',
+    eventType: 'init',
+    eventID: $.uuidGen(),
+    caretFrom: null as any,
+    caretTo: null as any
+  }
+  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,
+    DefaultValidation,
+    onUpdateValue,
+    onUpdateValidValue,
+    ExtraOverrideParams: {
+      ...DataLeveling( {
+        min,max,
+        restrict,
+        value
+      } )
+    }
+  } );
+
+  useEffect( () => {
+    setSelection( { id: params.id,restrict,val_status } );
+  },[ val_status ] );
+
+  return (
+    <BoxWrapper
+      val_status={ val_status }
+      set_status={ set_status }
+      val_validate={ val_validate }
+      params={ params }
+    >
+      <input
+        type={ inputType }
+        inputMode={ inputMode }
+        data-form={ form }
+        data-input-type={ 'text' }
+        data-validation={ val_validate.ok }
+        data-value={ val_status.dataValue }
+        data-component-id={ val_status.componentID }
+        value={ val_status.formatValue }
+        autoComplete={ autoComplete }
+        autoCapitalize={ autoCapitalize }
+        onKeyDown={ ( event ) => {
+          let { key,target } = event;
+          {
+            let input = target as HTMLInputElement;
+            let { selectionStart,selectionEnd } = input;
+            let caretFrom = Number( selectionStart );
+            let caretTo = Number( selectionEnd )
+
+            let _v = val_status.formatValue[ Number( caretFrom ) ];
+            let v_ = val_status.formatValue[ Number( caretFrom ) - 1 ];
+            if ( key == 'Delete' && (
+              ( restrict == 'creditCard' && _v == ' ' ) ||
+              ( restrict == 'postal' && _v == '-' ) ||
+              ( restrict == 'digitNumber' && _v == ',' )
+            ) ) {
+              input.setSelectionRange( caretFrom + 1,caretTo + 1 );
+              event.preventDefault();
+            }
+            if ( key == 'Backspace' && (
+              ( restrict == 'creditCard' && v_ == ' ' ) ||
+              ( restrict == 'postal' && v_ == '-' ) ||
+              ( restrict == 'digitNumber' && v_ == ',' )
+            ) ) {
+              input.setSelectionRange( caretFrom - 1,caretTo - 1 );
+              event.preventDefault();
+            }
+          }
+
+          if ( [ 'number','digitNumber','creditCard' ].includes( restrict ) ) {
+            if ( key == 'Clear' ) {
+              set_status( {
+                ...val_status,
+                dataValue: '',
+                formatValue: '',
+                eventType: 'update',
+                eventID: $.uuidGen(),
+              } )
+            }
+          }
+          if ( [ 'number','digitNumber' ].includes( restrict ) ) {
+            if ( [ 'ArrowUp','ArrowDown' ].includes( key ) ) {
+              let direction = Number( key == 'ArrowUp' ) * 2 - 1;
+              let Value = String( Number( val_status.dataValue ) + direction );
+              if ( val_validate.ok ) {
+                set_validate( { ok: false,notice: [] } );
+              }
+              set_status( {
+                ...val_status,
+                ...DataLeveling( {
+                  min,max,
+                  restrict,
+                  value: Value
+                } ),
+                eventType: 'update',
+                eventID: $.uuidGen(),
+              } );
+              event.preventDefault();
+            }
+          }
+
+          if ( onKeyDown ) onKeyDown( event );
+          if ( enableFormSubmit ) SubmitForm( event );
+        } }
+        onChange={ ( event ) => {
+          let {
+            value: rawValue,
+            selectionStart,
+            selectionEnd
+          } = event.target;
+
+          let value = DataLeveling( {
+            min,max,
+            restrict,
+            value: rawValue
+          } );
+          if ( value.formatValue == val_status.formatValue ) return;
+
+          if ( val_validate.ok ) set_validate( { ok: false,notice: [] } );
+          set_status( {
+            ...val_status,
+            ...value,
+            prevValue: val_status.formatValue,
+            eventType: 'update',
+            eventID: $.uuidGen(),
+            caretFrom: Number( selectionStart ),
+            caretTo: Number( selectionEnd )
+          } );
+
+          if ( onChange ) onChange( event );
+        } }
+        { ...others }
+      />
+    </BoxWrapper>
+  );
+}