amotify 0.0.39 → 0.0.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amotify",
-  "version": "0.0.39",
+  "version": "0.0.41",
   "description": "UI Component for React",
   "main": "dist/launch.js",
   "types": "dist/@types.d.ts",
@@ -34,7 +34,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "jsmin-front": "^0.0.17",
+    "jsmin-front": "^0.0.23",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.19.0"
@@ -66,4 +66,4 @@
     "webpack-cli": "^5.1.4",
     "webpack-remove-empty-scripts": "^1.0.4"
   }
-}
+}

package/src/@jsminAmotifyExtension/formCollect.tsx

@@ -65,6 +65,8 @@ $.formCollect = async ( form ) => {
       if ( Value ) Value = JSON.parse( Value );
     } else if ( inputType == 'select' ) {
       if ( Value ) Value = JSON.parse( Value );
+    } else if ( inputType == 'richSelect' ) {
+      if ( Value ) Value = JSON.parse( Value );
     } else if ( inputType == 'file' ) {
       if ( componentData ) {
         let files = componentData.Files;

package/src/@styles/init.scss

@@ -54,6 +54,17 @@ html {
     Helvetica,
     Arial,
     sans-serif;
+
+    font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Helvetica,
+    Arial,
+    Noto Sans JP,
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji";
   font-kerning: normal;
   // -webkit-font-smoothing: antialiased;
   caret-color: $color-theme;

package/src/config.tsx

@@ -174,6 +174,15 @@ $( window ).addEvent( {
   eventType: 'load',
   callback: () => {
     let style: any = document.body.style;
+
+    let Body = $( document.body );
+    let topNavHeight = Number( Body.getStyleProperty( '--topNavHeight' ).removeLetters() || 0 );
+    let footerNavHeight = Number( Body.getStyleProperty( '--footerNavHeight' ).removeLetters() || 0 );
+
+    let viewHeight = window.innerHeight;
+    let contentHeight = viewHeight - topNavHeight - footerNavHeight;
+
     style.setProperty( '--viewHeight',window.innerHeight + 'px' );
+    style.setProperty( '--contentHeight',contentHeight + 'px' );
   }
 } );

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

@@ -0,0 +1,228 @@
+import {
+  React,
+} from '@global';
+
+import {
+  Box
+} from '@atoms';
+import {
+  Column
+} from '@mols';
+import {
+  BoxWrapper,
+  SubmitForm,
+  ValidationCheck,
+  CommonEffects
+} from '../core';
+import {
+  Input,
+  Tooltips,
+  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.RichSelect.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 RichSelectInput: React.FC<amotify.fn.Input.RichSelect.PlainParams> = ( params ) => {
+  let {
+    value = null,
+    placeholder,
+    options = []
+  } = params;
+
+  let SelectedExist = 0;
+  let SelectedValue = JSON.stringify( value );
+  let DefaultOptions = options.map( ( option ) => {
+    let { type,value } = option;
+    let Value = JSON.stringify( value );
+    let Selected = Value == SelectedValue;
+    SelectedExist |= Number( Selected );
+
+    return {
+      ...option,
+      type: type || 'button',
+      value: Value
+    }
+  } );
+  if ( !SelectedExist ) value = null;
+  let DefaultValue = JSON.stringify( value );
+
+  return <Core
+    { ...params }
+    value={ DefaultValue }
+    options={ DefaultOptions }
+  />;
+}
+
+const Core: React.FC<amotify.fn.Input.RichSelect.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,
+
+    cellStyles,
+    sheetStyles,
+
+    ...others
+  } = params;
+
+  let Default_Status: amotify.fn.Input.Status.Plain = {
+    componentID: params.componentID || '',
+    dataValue: value,
+    eventType: 'init',
+    eventID: $.uuidGen()
+  }
+  let [ val_tipID ] = React.useState( $.uuid.gen() );
+  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: 'richSelect',
+    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.type == 'button' && option.value == val_status.dataValue );
+    if ( Selected ) {
+      SelectedElement = Selected.label;
+    }
+  }
+
+  return <BoxWrapper
+    val_status={ val_status }
+    set_status={ set_status }
+    val_validate={ val_validate }
+    params={ params }
+  >
+    <button
+      { ...others as any }
+      data-form={ form }
+      data-validation={ val_validate.ok }
+      data-component-id={ val_status.componentID }
+      data-value={ val_status.dataValue }
+      data-input-type={ 'richSelect' }
+      className={ [
+        className,
+        style.SelectLegend,
+        coreStyle.InputCover
+      ].join( ' ' ) }
+      onClick={ ( e ) => {
+        Tooltips.open( {
+          tipsID: val_tipID,
+          parent: e.currentTarget,
+          gravityPoint: 13,
+          close_option: {
+            elementBlur: ''
+          },
+          content: () => {
+            let Options = options.map( ( option ) => {
+              let {
+                type,
+                value,
+                label
+              } = option;
+
+              if ( type == 'button' ) {
+                return <Buttons.Button.Clear.R
+                  color='cloud'
+                  borderRadius={ 0 }
+                  fontColor='2.normal'
+                  textAlign='left'
+                  padding={ 0 }
+                  onClick={ () => {
+                    set_status( {
+                      ...val_status,
+                      dataValue: value,
+                      eventType: 'update',
+                      eventID: $.uuidGen()
+                    } );
+                    Tooltips.close( val_tipID );
+                  } }
+                  { ...cellStyles }
+                >
+                  { label }
+                </Buttons.Button.Clear.R>
+              } else {
+                return label;
+              }
+            } );
+            return <Column
+              ssCardBox
+              padding={ [ 1,0 ] }
+              gap={ 0 }
+              maxHeight={ 'viewHeight' }
+              overflow={ 'auto' }
+              { ...sheetStyles }
+              freeCSS={ {
+                minWidth: 12 * 20,
+                ...sheetStyles?.freeCSS
+              } }
+            >
+              { Options }
+            </Column>;
+          }
+        } );
+      } }
+    >
+      { SelectedElement }
+    </button>
+  </BoxWrapper>;
+}

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

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

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

@@ -129,7 +129,7 @@ const Core: React.FC<amotify.fn.Input.Select.PlainParams> = ( params ) => {
     onUpdateValidValue
   } );
 
-  let SelectedElement: ReactElement = <Box fontColor='4.thin'>{ placeholder || '選択' }</Box>;
+  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;

package/src/functions/Input/_.tsx

@@ -40,6 +40,7 @@ import {
   TimeFNs
 } from './Time/_';
 import { SelectInput } from './Select/_';
+import { RichSelectInput } from './RichSelect/_';
 import { ListInput } from './List/_';
 import { ChipsInput } from './Chips/_';
 import { SwitchInput } from './Switch/_';
@@ -442,6 +443,28 @@ export const Input: amotify.fn.Input.Methods = {
       params={ params }
     />;
   },
+  RichSelect: ( rawParams ) => {
+    rawParams = { ...rawParams }
+    if ( $.is.nullish( rawParams.rightIcon ) ) {
+      rawParams.rightIcon = <Input.Comps.RightIcon
+        flexType='col'
+        className={ style.IndicatorIcon }
+        { ...rawParams.rightIconStyles }
+      >
+        <FAI.AngleDown />
+      </Input.Comps.RightIcon>
+    }
+    if ( rawParams.rightIcon ) rawParams.paddingRight = rawParams.paddingRight ?? 3;
+    if ( rawParams.leftIcon ) rawParams.paddingLeft = rawParams.paddingLeft ?? 3;
+
+    let params = DefaultStyles.Boxish( rawParams ) as amotify.fn.Input.Select.PlainParams;
+    delete params.rightIconStyles;
+    return <UniComponent
+      componentID={ rawParams.componentID }
+      children={ RichSelectInput }
+      params={ params }
+    />;
+  },
   Radio: ListInputs.Radio,
   Checkbox: ListInputs.Checkbox,
   Chips: ChipsInputs,

package/src/functions/Input/core.tsx

@@ -103,6 +103,7 @@ const GenNotices: React.FC<{
     componentID,
     eventType
   } = val_status;
+
   $.interval.clear( 'NoticeTimer-' + componentID );
   $.interval.clear( 'NoticeTimerClose-' + componentID );
 
@@ -316,6 +317,8 @@ export const CommonEffects: {
       Value = dataValue.map( ( value: any ) => JSON.parse( value ) )
     } else if ( type == 'select' ) {
       Value = JSON.parse( dataValue );
+    } else if ( type == 'richSelect' ) {
+      Value = JSON.parse( dataValue );
     } else if ( type == 'file' ) {
       useStore.update( {
         key: componentID,

package/src/functions/Sheet/parts.tsx

@@ -2,7 +2,7 @@ import {
   launchID,
   React,
   LaunchSubApplication,
-  useStore
+  useStore,
 } from '@global';
 import {
   Img,
@@ -677,29 +677,25 @@ const Comps = {
         }
         return WrapperCSS;
       }
+
       let [ val_Styles,set_Styles ] = React.useState( getWrapperCSS() );
       const AdjustExtrusion = () => {
+        let BaseRect = $( Query ).position();
         let ContentRect = $( ContentQuery ).position();
         let screen = $.getScreenSize();
 
         let newStyles = { ...val_Styles }
         if ( ContentRect.top < 0 ) {
-          // if ( ContentRect.height < screen.height ) {}
-          newStyles.top = ContentRect.height + 2;
+          newStyles.top = BaseRect.top - ContentRect.top;
         }
         if ( ContentRect.left < 0 ) {
-          // if ( ContentRect.width < screen.width ) {}
-          newStyles.left = ContentRect.width + 2;
+          newStyles.left = BaseRect.left - ContentRect.left;
         }
         if ( ContentRect.right > screen.width ) {
-          // if ( ContentRect.width < screen.width ) {}
-          let shift = ContentRect.right - screen.width;
-          newStyles.left = ContentRect.left - shift - 2;
+          newStyles.left = BaseRect.left - ( ContentRect.right - screen.width );
         }
         if ( ContentRect.bottom > screen.height ) {
-          // if ( ContentRect.height < screen.height ) {}
-          let shift = ContentRect.bottom - screen.height;
-          newStyles.top = ContentRect.top - shift - 2;
+          newStyles.top = BaseRect.top - ( ContentRect.bottom - screen.height );
         }
 
         return newStyles;
@@ -754,10 +750,12 @@ const Comps = {
           <Box
             flexSizing={ 'none' }
             data-sheet-content={ val_componentID }
+            maxHeight={ 'viewHeight' }
+            overflow={ 'auto' }
             { ...others }
             freeCSS={ {
               maxWidth: '98vw',
-              ...others.freeCSS,
+              ...others.freeCSS
             } }
           >
             { $.is.function( Content ) ? <Content /> : Content }

package/src/launch.tsx

@@ -97,7 +97,16 @@ $( window ).addEvent( {
   callback: () => {
     global.amotify.config.device = deviceIdentifier();
 
-    $( document.body ).setStyleProperty( '--viewHeight',window.innerHeight + 'px' );
+    let Body = $( document.body );
+    let viewHeight = window.innerHeight;
+
+    let topNavHeight = Number( Body.getStyleProperty( '--topNavHeight' ).removeLetters() );
+    let footerNavHeight = Number( Body.getStyleProperty( '--footerNavHeight' ).removeLetters() );
+    let contentHeight = viewHeight - topNavHeight - footerNavHeight;
+
+    Body.setStyleProperty( '--viewHeight',viewHeight + 'px' )
+      .setStyleProperty( '--sideNavHeight',contentHeight + 'px' )
+      .setStyleProperty( '--contentHeight',contentHeight + 'px' );
   }
 } );