amotify 0.0.64 → 0.0.66

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

@@ -1,176 +0,0 @@
-import {
-  React
-} from '@global'
-import {
-  Box,
-  FAI
-} from '@atoms'
-import {
-  Row
-} from '@mols'
-import {
-  Buttons
-} from '@fn'
-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: 'ONになっていません' } )
-  }
-
-  return {
-    ok: !notice.filter( ( { type } ) => type == 'invalid' ).length,
-    notice: notice
-  }
-}
-
-export const SwitchInput: React.FC<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 ] = React.useState( Default_Status )
-  let [ val_validate,set_validate ] = React.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={ '1.remark' }
-            className={ style.Dot }
-          >
-            { icon ? <Box
-              transition='middle'
-              ssSquare={ 2 }
-              flexCenter
-              fontColor={ appearance == 'applely' && isChecked ? color : 'white' }
-            >
-              { icon }
-            </Box> : null }
-          </Box>
-        </Row.Center>
-      </Box>
-    </Buttons.Label.Plain>
-  </BoxWrapper>
-}

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

@@ -1,18 +0,0 @@
-@use '@props' 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,487 +0,0 @@
-import {
-  React,
-} from '@global'
-import {
-  Box,
-} from '@atoms'
-
-import {
-  BoxWrapper,
-  SubmitForm,
-  CommonEffects
-} from './core'
-
-const ValidateTypes: {
-  [ key: string ]: {
-    reg: RegExp
-    exist: boolean
-    reason: ReactElement
-  }
-} = {
-  number: {
-    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: '半角数字で入力してください'
-  },
-  fileName: {
-    reg: /[¥\/:*\?\"\'\|\.\s\n\r\<\>]/g,exist: false,
-    reason: '空白または一部の特殊文字は使用できません'
-  },
-  creditCard: {
-    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,
-    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: /.*$/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,
-    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 ( restrict == 'katakana' ) {
-    dataValue = dataValue.replace( /[^ァ-ヶー 　ｦ-ﾟ　 ]/ig,'' )
-  }
-  if ( restrict == 'hankaku.katakana' ) {
-    dataValue = dataValue.replace( /[^ｦ-ﾟ　 ]/ig,'' )
-  }
-  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: React.FC<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,leftIcon,rightIcon,
-    maxLength,
-    min,
-    max,
-    ...others
-  } = params
-
-  let inputType = restrict == 'password' ? 'password' : '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!,
-    ...DataLeveling( {
-      min,max,
-      restrict,
-      value
-    } ),
-    prevValue: '',
-    eventType: 'init',
-    eventID: $.uuidGen(),
-    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,
-    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
-      } )
-    }
-  } )
-
-  React.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 ( key == 'Enter' || key == 'Tab' ) {
-
-          }
-        }
-
-        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 ( 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,
-          prevValue: val_status.formatValue,
-          eventType: 'update',
-          eventID: $.uuidGen(),
-          caretFrom: Number( selectionStart ),
-          caretTo: Number( selectionEnd )
-        } )
-
-        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>
-}