amotify 0.0.4 → 0.0.5

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

@@ -1,177 +0,0 @@
-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

@@ -1,18 +0,0 @@
-@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

@@ -1,437 +0,0 @@
-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>
-  );
-}