amotify 0.0.65 → 0.0.67

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

@@ -1,246 +0,0 @@
-import {
-  React
-} from '@global'
-
-import { ListInputs } from '../_'
-
-import style from './style.module.scss'
-
-export const Segmented: amotify.fn.Input.Segmented.Types = {
-  Auto: ( params ) => {
-    params = { ...params }
-    params = {
-      padding: '1/3',
-      gap: '1/3',
-      ssCardBox: true,
-      ...params,
-      cellStyles: {
-        borderRadius: 'inherit',
-        position: 'relative',
-        ...params.cellStyles
-      },
-      cellCheckedStyles: {
-        backgroundColor: 'theme',
-        fontColor: 'white',
-        ...params.cellCheckedStyles
-      },
-    }
-
-    return <Core appearance={ ( params as any ).tone || 'Auto' } { ...params } />
-  },
-  Normal: ( params ) => {
-    params = { ...params }
-    params = {
-      border: true,
-      borderColor: 'theme',
-      overflow: 'hidden',
-      gap: 0,
-      ssLastChildLossBorder: 'right',
-      fontColor: '3.blur',
-      ...params,
-      cellStyles: {
-        borderRadius: 0,
-        borderRight: true,
-        borderColor: 'theme',
-        ...params.cellStyles
-      },
-      cellCheckedStyles: {
-        backgroundColor: 'theme',
-        fontColor: 'white',
-        ...params.cellCheckedStyles
-      }
-    };
-    ( params as any ).tone = 'ThemeBorder'
-
-    return <Core appearance={ 'Border' } { ...params } />
-  },
-  Cloud: ( params ) => {
-    params = { ...params }
-    params = {
-      padding: '1/3',
-      gap: '1/3',
-      backgroundColor: 'cloud',
-      ...params,
-      cellStyles: {
-        borderRadius: 'inherit',
-        position: 'relative',
-        ...params.cellStyles
-      },
-      cellCheckedStyles: {
-        backgroundColor: 'theme',
-        fontColor: 'white',
-        ...params.cellCheckedStyles
-      },
-    }
-
-    return <Core appearance={ ( params as any ).tone || 'Cloud' } { ...params } />
-  },
-  Cloud2: ( params ) => {
-    params = { ...params };
-    ( params as any ).tone = 'WhiteCloud'
-    return <Segmented.Cloud
-      fontColor='3.blur'
-      { ...params }
-      cellCheckedStyles={ {
-        fontColor: '1.clear',
-        ...params.cellCheckedStyles
-      } }
-    />
-  },
-  Cloud3: ( params ) => {
-    params = { ...params };
-    ( params as any ).tone = 'ThemeCloud'
-    return <Segmented.Cloud
-      backgroundColor='tcOpFew'
-      fontColor='theme'
-      { ...params }
-      cellStyles={ {
-        ...params.cellStyles
-      } }
-    />
-  },
-  Border: ( params ) => {
-    params = { ...params }
-    params = {
-      backgroundColor: '1.layer.base',
-      border: '2.normal',
-      overflow: 'hidden',
-      gap: 0,
-      ssLastChildLossBorder: 'right',
-      boxShadow: '0.thin',
-      ...params,
-      cellStyles: {
-        borderRadius: 0,
-        borderRight: '2.normal',
-        ...params.cellStyles
-      },
-      cellCheckedStyles: {
-        backgroundColor: 'tcOpFew',
-        fontColor: 'theme',
-        ...params.cellCheckedStyles
-      },
-    }
-
-    return <Core appearance={ ( params as any ).tone || 'Border' } { ...params } />
-  },
-  Border2: ( params ) => {
-    params = { ...params }
-    params = {
-      border: true,
-      borderColor: 'theme',
-      overflow: 'hidden',
-      gap: 0,
-      ssLastChildLossBorder: 'right',
-      boxShadow: '0.thin',
-      fontColor: '3.blur',
-      ...params,
-      cellStyles: {
-        borderRadius: 0,
-        borderRight: true,
-        borderColor: 'theme',
-        ...params.cellStyles
-      },
-      cellCheckedStyles: {
-        backgroundColor: 'theme',
-        fontColor: 'white',
-        ...params.cellCheckedStyles
-      }
-    };
-    ( params as any ).tone = 'ThemeBorder'
-
-    return <Core appearance={ 'Border' } { ...params } />
-  },
-  BottomLine: ( params ) => {
-    params = { ...params }
-    params = {
-      gap: 0,
-      fontColor: '3.blur',
-      ...params,
-      cellStyles: {
-        ssEffectsOnActive: 'ripple.theme',
-        borderRadius: 0,
-        padding: 1,
-        ...params.cellStyles
-      },
-      cellCheckedStyles: {
-        fontColor: 'theme',
-        ...params.cellCheckedStyles
-      }
-    }
-
-    return <Core appearance={ 'BottomLine' } { ...params } />
-  },
-}
-
-type CoreParams = amotify.fn.Input.Segmented.Params & {
-  appearance: amotify.fn.Input.Segmented.Tones
-}
-
-const Core: React.FC<CoreParams> = ( params ) => {
-  let {
-    tone,
-    appearance,
-    value,
-    options,
-    onUpdateValue,onUpdateValidValue,
-    freeCSS,
-    cellStyles,
-    cellClassName,
-    cellCheckedClassName,
-    cellCheckedStyles,
-    ...others
-  } = params
-
-  let [ val_componentID ] = React.useState( $.uuidGen() )
-
-  let [ val_defValue,set_defValue ] = React.useState( value )
-  let [ val_value,set_value ] = React.useState( val_defValue )
-  if ( val_defValue != value ) {
-    set_defValue( value )
-    set_value( value )
-  }
-
-  return <ListInputs.Radio
-    // hideInput
-    defaultActiveStyling={ false }
-    flexWrap={ false }
-    borderRadius={ '2.tone.secondary' }
-    position='relative'
-    options={ options }
-    value={ val_value }
-    componentID={ val_componentID }
-    icon={ false }
-    { ...others }
-    freeCSS={ {
-      whiteSpace: 'nowrap',
-      ...freeCSS
-    } }
-    cellStyles={ {
-      flexCenter: true,
-      ssPushable: true,
-      boxShadow: 'none',
-      ...cellStyles
-    } }
-    cellClassName={ [
-      cellClassName,
-      style.Label,
-      style[ 'Tone_' + appearance ]
-    ].join( ' ' ) }
-    cellCheckedStyles={ {
-      isSemiBoldFont: true,
-      ...cellCheckedStyles,
-    } }
-    cellCheckedClassName={ [
-      cellCheckedClassName,
-      style.Checked
-    ].join( ' ' ) }
-    tone={ 'custom' as any }
-    onUpdateValue={ onUpdateValue }
-    onUpdateValidValue={ ( args ) => {
-      if ( onUpdateValidValue ) onUpdateValidValue( args )
-      if ( appearance == 'BottomLine' ) {
-        set_value( args.value[ 0 ] )
-      }
-    } }
-  />
-}

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

@@ -1,81 +0,0 @@
-@use '@props' as *;
-@use'@styleSet' as *;
-.Label {
-  user-select: none;
-  -webkit-user-select: none;
-  flex: auto;
-  &.Tone_ {
-    &Auto, &Cloud, &ThemeCloud, &WhiteCloud {
-      &:before {
-        transform: scale(0.4);
-        @include absoluteCovered();
-        background-color: $color-theme;
-        opacity: 0;
-        border-radius: inherit;
-        box-shadow: $shadow1;
-        transition: $animation-time-middle;
-      }
-      &.Checked {
-        &:before {
-          transform: scale(1);
-          opacity: 1;
-        }
-      }
-    }
-    &WhiteCloud {
-      &:before {
-        background-color: $color-layer1;
-      }
-      &.Checked {
-        background-color: $color-layer1 !important;
-      }
-    }
-    &ThemeCloud {
-      &.Checked {
-        background-color: $color-theme;
-        &:focus, &:active {
-          background-color: $color-theme !important;
-        }
-      }
-    }
-    &Border {}
-    &ThemeBorder {
-      &.Checked {
-        background-color: $color-theme;
-        &:focus, &:active {
-          background-color: $color-theme !important;
-        }
-      }
-    }
-    &BottomLine {
-      &:after {
-        content: "";
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: $unit1_3;
-        background-color: $color-theme;
-        opacity: 0;
-        border-radius: 100rem;
-        transition: $animation-time-middle;
-      }
-      &:hover, &:focus {
-        background-color: $color-theme-opacity-few;
-        color: $color-theme;
-        &:after {
-          opacity: .2;
-        }
-      }
-      &:active {
-        background-color: $color-theme-opacity-few;
-        &:after {
-          opacity: .4;
-        }
-      }
-      &.Checked:after {
-        opacity: 1;
-      }
-    }
-  }
-}

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

@@ -1,218 +0,0 @@
-import {
-  React,
-} from '@global'
-
-import {
-  Box
-} from '@atoms'
-import {
-  BoxWrapper,
-  SubmitForm,
-  ValidationCheck,
-  CommonEffects
-} from '../core'
-import {
-  Buttons
-} from '@fn'
-
-
-import style from './style.module.scss'
-import coreStyle from '../style.module.scss'
-
-function DefaultValidation( props: {
-  value: any
-  params: any
-} ): amotify.fn.Input.Validation.Result {
-  let {
-    value,
-    params
-  } = props
-  let {
-    required,
-    options
-  } = params as amotify.fn.Input.Select.PlainParams
-  let notice: amotify.fn.Input.Validation.NoticeTypes[] = []
-
-  if ( required ) {
-    if ( !options.length || ( options.length && $.is.nullish( JSON.parse( value ) ) ) ) {
-      notice.push( { type: 'invalid',label: '必須項目です' } )
-    }
-  }
-
-  return {
-    ok: !notice.filter( ( { type } ) => type == 'invalid' ).length,
-    notice: notice
-  }
-}
-
-export const SelectInput: React.FC<amotify.fn.Input.Select.PlainParams> = ( params ) => {
-  let {
-    value = null,
-    placeholder,
-    options = []
-  } = params
-
-  let SelectedExist = 0
-  let SelectedValue = JSON.stringify( value )
-  let DefaultOptions = options.map( ( option ) => {
-    let { value,label } = option
-    let Value = JSON.stringify( value )
-    let Selected = Value == SelectedValue
-    SelectedExist |= Number( Selected )
-
-    return {
-      ...option,
-      value: Value,
-      label
-    }
-  } )
-  if ( !SelectedExist ) value = null
-  let DefaultValue = JSON.stringify( value )
-
-  return <Core
-    { ...params }
-    value={ DefaultValue }
-    options={ DefaultOptions }
-  />
-}
-
-const Core: React.FC<amotify.fn.Input.Select.PlainParams> = ( params ) => {
-  let {
-    tone,
-    required,
-    form,
-    className,
-
-    enableFormSubmit,
-    enableUnSelected,
-
-    checkValidationAtFirst,
-    onChange,onKeyDown,
-    onValidate,
-    onUpdateValue,
-    onUpdateValidValue,
-    value = '',
-    options,
-    placeholder,
-
-    leftIndicator,rightIndicator,leftIcon,rightIcon,
-    componentID,status_id,
-
-    ...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 )
-
-  CommonEffects( {
-    type: 'select',
-    params,
-    val_status,
-    set_status,
-    ExtraOverrideParams: {
-      dataValue: value,
-      formatValue: value,
-    },
-    val_validate,
-    set_validate,
-    DefaultValidation,
-    onUpdateValue,
-    onUpdateValidValue
-  } )
-
-  let SelectedElement: ReactElement = <Box fontColor='4.thin' textAlign='left'>{ placeholder || '選択' }</Box>
-  if ( val_status.dataValue ) {
-    let Selected = options.find( ( option ) => option.value == val_status.dataValue )
-    if ( Selected ) SelectedElement = Selected.displayLabel ?? Selected.label
-  }
-
-  return <BoxWrapper
-    val_status={ val_status }
-    set_status={ set_status }
-    val_validate={ val_validate }
-    params={ params }
-  >
-    <Box
-      className={ [
-        className,
-        style.SelectLegend,
-        coreStyle.InputCover
-      ].join( ' ' ) }
-    >
-      { SelectedElement }
-      <select
-        data-form={ form }
-        data-input-type={ 'select' }
-        data-validation={ val_validate.ok }
-        data-component-id={ val_status.componentID }
-        data-value={ val_status.dataValue }
-        value={ val_status.dataValue }
-        onKeyDown={ ( event ) => {
-          if ( onKeyDown ) onKeyDown( event )
-          if ( enableFormSubmit ) SubmitForm( event )
-        } }
-        onChange={ ( event ) => {
-          let {
-            value: rawValue
-          } = event.target
-
-          if ( val_validate.ok ) set_validate( { ok: false,notice: [] } )
-          set_status( {
-            ...val_status,
-            dataValue: rawValue,
-            eventType: 'update',
-            eventID: $.uuidGen(),
-          } )
-
-          if ( onChange ) onChange( event )
-        } }
-        { ...others as any }
-        className={ style.Select }
-      >
-        <Options params={ params } />
-      </select>
-    </Box>
-  </BoxWrapper>
-}
-
-const Options: React.FC<{ params: amotify.fn.Input.Select.PlainParams }> = ( props ) => {
-  let {
-    options = [],
-    placeholder = '選択してください',
-    enableUnSelected = true
-  } = props.params
-
-  let Options = options.map( ( option: amotify.fn.Input.Select.OptionProps ) => {
-    let {
-      value,
-      label,
-    } = option
-    let Value = String( value )
-    return <option
-      value={ Value }
-      key={ Value }
-      children={ label }
-    />
-  } )
-
-  if ( enableUnSelected ) {
-    Options.unshift( <option
-      key={ 0 }
-      value={ JSON.stringify( null ) }
-      children={ placeholder }
-    /> )
-  }
-
-  return <>
-    { Options }
-  </>
-}

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

@@ -1,11 +0,0 @@
-@use '@props' as *;
-.Select {
-  cursor: pointer;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  opacity: 0;
-}
-.SelectLegend {}