amotify 0.0.6 → 0.0.8

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

@@ -0,0 +1,81 @@
+@use 'src/@styles/props' as *;
+@use'src/@styles/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

@@ -0,0 +1,225 @@
+import {
+  React,
+} from '~/Global/@export';
+const {
+  useState
+} = React;
+
+import {
+  Box
+} from '~/Atoms/@export';
+import {
+  BoxWrapper,
+  SubmitForm,
+  ValidationCheck,
+  CommonEffects
+} from '../core';
+import {
+  Buttons
+} from '~/Functions/@export';
+
+
+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

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