amotify 0.0.4 → 0.0.5

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

@@ -1,81 +0,0 @@
-@use '@uniVar' 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,225 +0,0 @@
-import {
-  React,
-} from '@global';
-const {
-  useState
-} = React;
-
-import {
-  Box
-} from '@atoms';
-import {
-  BoxWrapper,
-  SubmitForm,
-  ValidationCheck,
-  CommonEffects
-} from '../core';
-import {
-  Buttons
-} from '@functions';
-
-
-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: FNC<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: FNC<amotify.fn.Input.Select.PlainParams> = ( params ) => {
-  let {
-    tone,
-    required,
-    form,
-    className,
-
-    enableFormSubmit,
-    enableUnSelected,
-
-    checkValidationAtFirst,
-    onChange,onKeyDown,
-    onValidate,
-    onUpdateValue,
-    onUpdateValidValue,
-    value = '',
-    options,
-    placeholder,
-
-    leftIndicator,rightIndicator,rightIcon,
-
-    ...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 );
-
-  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'>{ 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: FNC<{ params: amotify.fn.Input.Select.PlainParams }> = ( props ) => {
-  let {
-    value,
-    options = [],
-    placeholder = '選択してください',
-    enableUnSelected = true
-  } = props.params;
-
-  let SelectedValue = String( value );
-  let Options = options.map( ( option: amotify.fn.Input.Select.OptionProps ) => {
-    let {
-      value,
-      label,
-    } = option;
-    let Value = String( value );
-    return ( <option
-      value={ Value }
-      key={ Value }
-      selected={ Value == SelectedValue }
-      children={ label }
-    /> );
-  } );
-
-  if ( enableUnSelected ) {
-    Options.unshift( <option
-      key={ 0 }
-      value={ JSON.stringify( null ) }
-      selected={ SelectedValue == 'null' }
-      children={ placeholder }
-    /> );
-  }
-
-  return ( <>
-    { Options }
-  </> );
-}

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

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