amotify 0.0.3 → 0.0.4

package/src/Functions/Input/_.tsx

@@ -0,0 +1,793 @@
+import {
+  StyleConverter,
+  useStore,
+} from '@global';
+const {
+  useState,
+  useEffect,
+  useRef
+} = React;
+
+import {
+  Box,
+  Flex,
+  FAIcon,
+  Span
+} from '@atoms';
+import {
+  Row,
+  Text,
+  Column
+} from '@mols';
+import {
+  Buttons,
+  Tooltips
+} from '@functions';
+
+import style from './style.module.scss';
+
+import { HiddenInput } from './Hidden';
+import {
+  TextInput,
+  TextValidate
+} from './Text';
+import { TextAreaInput } from './TextArea';
+import { DigitCharactersInput } from './DigitCharacters'
+import {
+  TimeInput,
+  TimeFNs
+} from './Time/_';
+import { SelectInput } from './Select/_';
+import { ListInput } from './List/_';
+import { ChipsInput } from './Chips/_';
+import { SwitchInput } from './Switch/_';
+import { FileInput } from './File/_';
+import { SliderInput } from './Slider/_';
+import { Segmented } from './Segmented/_';
+
+const UniComponent: FNC<{
+  componentID?: string
+  children: FNC<any>
+  params: any
+}> = ( props ) => {
+  let [ val_componentID ] = useState( props.componentID || $.uuidGen() );
+
+  props.params = {
+    enableFormSubmit: true,
+    // override: 'beforeModified',
+    override: 'never',
+    name: $.uuidGen(),
+    id: $.uuidGen(),
+    statusID: $.uuidGen(),
+    'aria-label': 'Input-' + val_componentID,
+    ...props.params,
+    componentID: val_componentID,
+  }
+
+  let {
+    children: Children
+  } = props;
+
+  return ( <Children { ...props.params } /> );
+}
+
+const TextInputs: amotify.fn.Input.Text.Methods = {
+  Validate: TextValidate,
+  Normal: ( rawParams ) => {
+    if ( rawParams.rightIcon ) rawParams.paddingRight = rawParams.paddingRight ?? 3;
+    if ( rawParams.leftIcon ) rawParams.paddingLeft = rawParams.paddingLeft ?? 3;
+
+    return ( <UniComponent
+      componentID={ rawParams.componentID }
+      children={ TextInput }
+      params={ DefaultStyles.Boxish( rawParams ) }
+    /> );
+  },
+  CreditCard: ( props ) => ( <TextInputs.Normal
+    restrict='creditCard'
+    { ...props }
+  /> ),
+  Tel: ( props ) => ( <TextInputs.Normal
+    restrict='tel'
+    placeholder='xxx-xxxx-xxxx'
+    { ...props }
+  /> ),
+  Number: ( props ) => ( <TextInputs.Normal restrict='number' { ...props } /> ),
+  DigitNumber: ( props ) => ( <TextInputs.Normal restrict='digitNumber' { ...props } /> ),
+  Email: ( props ) => ( <TextInputs.Normal restrict='email' { ...props } /> ),
+  Url: ( props ) => ( <TextInputs.Normal
+    restrict='url'
+    placeholder='https://example.com'
+    { ...props }
+  /> ),
+  Postal: ( params ) => {
+    let [ val_postalEventID ] = useState( $.uuidGen() );
+    useEffect( () => {
+      return () => {
+        useStore.delete( val_postalEventID );
+      }
+    },[] );
+
+    return ( <TextInputs.Normal
+      restrict='postal'
+      placeholder='郵便番号'
+      leftIndicator={ <Input.Comps.LeftIndicator children={ '〒' } /> }
+      { ...params }
+    /> );
+  },
+  Password: ( props ) => {
+    return (
+      <TextInputs.Normal
+        restrict='password'
+        placeholder='パスワードを入力'
+        rightIndicator={
+          <Input.Comps.RightIndicator
+            padding={ 0 }
+          >
+            <Buttons.Button.Normal.R
+              padding={ '3/4' }
+              fontColor='theme'
+              borderTopLeftRadius={ 0 }
+              borderBottomLeftRadius={ 0 }
+              backgroundColor='inherit'
+              height={ 1 }
+              ssEffectsOnActive={ [ 'expand' ] }
+              onMouseOver={ ( event ) => {
+                Tooltips.open( {
+                  parent: event.currentTarget,
+                  gravityPoint: 24,
+                  padding: [ 1,0 ],
+                  content: <Tooltips.Comps.Body>
+                    パスワードを表示
+                  </Tooltips.Comps.Body>
+                } );
+              } }
+              tabIndex={ -1 }
+              onClick={ ( event ) => {
+                $( event.target )
+                  .parent().parent().parent()
+                  .find( 'input' )
+                  .callback( ( input ) => {
+                    let Input = input[ 0 ];
+                    Input.type = Input.type === 'password' ? 'text' : 'password';
+                  } );
+              } }
+            >
+              <FAIcon
+                d='eye'
+                freeCSS={ {
+                  pointerEvents: 'none'
+                } }
+              />
+            </Buttons.Button.Normal.R>
+          </Input.Comps.RightIndicator>
+        }
+        { ...props }
+      />
+    );
+  },
+  Money: {
+    JPY: ( props ) => ( <TextInputs.DigitNumber
+      placeholder="金額を入力"
+      rightIndicator={ <Input.Comps.RightIndicator
+        children={ '円' }
+      /> }
+      { ...props }
+    /> )
+  }
+}
+
+const TimeInputs: amotify.fn.Input.Time.Methods & {
+  Origin: ( props: amotify.fn.Input.Time.OriginParams ) => JSX.Element
+} = {
+  Origin: ( rawParams ) => {
+    let [ val_componentID ] = useState( rawParams.componentID || $.uuidGen() );
+    rawParams.componentID = val_componentID;
+
+    if ( $.is.nullish( rawParams.rightIndicator ) ) {
+      let icon = ( rawParams.restrict || '' ).match( /clock/ ) ? 'clock' : 'calendar-lines';
+
+      rawParams.rightIndicator = <Input.Comps.RightIndicator
+        padding={ 0 }
+      >
+        <Buttons.Button.Sub.R
+          color='cloud'
+          border='unset'
+          padding={ '3/4' }
+          fontColor='theme'
+          borderTopLeftRadius={ 0 }
+          borderBottomLeftRadius={ 0 }
+          backgroundColor='inherit'
+          height={ 1 }
+          ssEffectsOnActive={ [ 'ripple.theme' ] }
+          tabIndex={ -1 }
+          id={ 'Picker-' + rawParams.componentID }
+          onClick={ () => {
+            let component = useStore.get( rawParams.componentID! );
+            if ( component ) component.openPicker();
+          } }
+        >
+          <FAIcon d={ icon } />
+        </Buttons.Button.Sub.R>
+      </Input.Comps.RightIndicator>
+    }
+
+    return ( <UniComponent
+      componentID={ rawParams.componentID! }
+      children={ TimeInput }
+      params={ DefaultStyles.Boxish( rawParams ) }
+    /> );
+  },
+  Clock: ( props ) => ( <TimeInputs.Origin restrict='clock' era='clock' { ...props } /> ),
+  Date: ( props ) => ( <TimeInputs.Origin restrict='date' { ...props } /> ),
+  Week: ( props ) => ( <TimeInputs.Origin restrict='week' { ...props } /> ),
+  Month: ( props ) => ( <TimeInputs.Origin restrict='month' { ...props } /> ),
+  Year: ( props ) => ( <TimeInputs.Origin restrict='year' { ...props } /> ),
+  DateWareki: ( params ) => {
+    let [ val_componentID ] = useState( params.componentID || $.uuidGen() );
+    params.componentID = val_componentID;
+    let {
+      defaultEra = 'wareki',
+    } = params;
+
+    let era = 'year' as amotify.fn.Input.Time.EraTypes;
+
+    if ( defaultEra == 'wareki' ) {
+      era = 'reiwa';
+      if ( params.value ) {
+        let [ year,month,date ] = params.value.split( /\D/ );
+        if ( year && month && date ) {
+          let Year = Number( year );
+          if ( Year >= 2019 ) {
+            Year -= 2019,era = 'reiwa';
+          } else if ( Year >= 1989 ) {
+            Year -= 1989,era = 'heisei';
+          } else if ( Year >= 1926 ) {
+            Year -= 1926,era = 'shouwa';
+          } else if ( Year >= 1912 ) {
+            Year -= 1912,era = 'taisho';
+          } else if ( Year >= 1868 ) {
+            Year -= 1868,era = 'meiji';
+          }
+          Year += 1;
+        }
+      }
+    }
+
+    return ( <TimeInputs.Origin
+      restrict='dateWareki'
+      leftIndicator={ <Input.Select
+        enableUnSelected={ false }
+        value={ era }
+        tone={ params.tone }
+        flexCenter
+        borderTopRightRadius={ 0 }
+        borderBottomRightRadius={ 0 }
+        freeCSS={ {
+          whiteSpace: 'nowrap',
+          marginRight: -1
+        } }
+        options={ [
+          { value: 'year',label: '西暦' },
+          { value: 'reiwa',label: '令和' },
+          { value: 'heisei',label: '平成' },
+          { value: 'shouwa',label: '昭和' },
+          { value: 'taisho',label: '大正' },
+          { value: 'meiji',label: '明治' }
+        ] }
+        onUpdateValidValue={ ( { value,eventType } ) => {
+          let component = useStore.get( params.componentID! );
+
+          if ( component && component.resetEra ) component.resetEra( value );
+        } }
+        rightIcon={ false }
+      /> }
+      { ...params }
+      era={ era }
+    /> );
+  },
+  Periods: {
+    Date: ( props ) => ( <TimeInputs.Origin restrict='dates' { ...props } /> ),
+    Month: ( props ) => ( <TimeInputs.Origin restrict='months' { ...props } /> ),
+  },
+  fn: TimeFNs
+}
+
+const ChipsInputs = ( rawParams: amotify.fn.Input.Chips.PlainParams ) => {
+  rawParams = {
+    gap: 1,
+    display: 'flex',
+    horizontalAlign: 'left',
+    verticalAlign: 'center',
+    flexWrap: true,
+    ...rawParams
+  }
+  let params = DefaultStyles.Boxish( rawParams ) as amotify.fn.Input.Chips.PlainParams;
+
+  return ( <UniComponent
+    componentID={ rawParams.componentID }
+    children={ ChipsInput }
+    params={ params }
+  /> );
+};
+ChipsInputs.fn = ChipsInput.fn;
+
+const FileInputs = ( rawParams: amotify.fn.Input.Filer.PlainParams ) => {
+  rawParams.override = 'force';
+  let params = StyleConverter.ToClassName( rawParams );
+  params.cellClassName = [
+    params.cellClassName,
+    DefaultStyles.Boxish( {
+      ...params.cellStyles,
+      tone: params.tone
+    } ).className,
+  ].join( ' ' );
+
+  return ( <UniComponent
+    componentID={ rawParams.componentID }
+    children={ FileInput }
+    params={ params }
+  /> );
+}
+FileInputs.fn = FileInput.fn;
+
+export const ListInputs: amotify.fn.Input.List.Methods & {
+  Origin: ( props: amotify.fn.Input.List.OriginParams ) => JSX.Element
+} = {
+  Origin: ( rawParams ) => {
+
+    let params = DefaultStyles.ListCell( rawParams );
+    return ( <UniComponent
+      componentID={ rawParams.componentID }
+      children={ ListInput }
+      params={ params }
+    /> );
+  },
+  Radio: ( params ) => ( <ListInputs.Origin
+    iconType='radio'
+    tone={ params.tone as any }
+    { ...params }
+    type='radio'
+  /> ),
+  Checkbox: ( params ) => ( <ListInputs.Origin
+    iconType='checkbox'
+    tone={ params.tone as any }
+    { ...params }
+    type='checkbox'
+  /> )
+}
+export const Input: amotify.fn.Input.Methods = {
+  Plain: ( params ) => ( <input { ...StyleConverter.ToClassName( params ) } /> ),
+  Hidden: ( rawParams ) => {
+    return ( <UniComponent
+      componentID={ rawParams.componentID }
+      children={ HiddenInput }
+      params={ rawParams }
+    /> );
+  },
+  Text: TextInputs,
+  TextArea: ( rawParams ) => {
+    if ( rawParams.rightIcon ) rawParams.paddingRight = rawParams.paddingRight ?? 3;
+    if ( rawParams.leftIcon ) rawParams.paddingLeft = rawParams.paddingLeft ?? 3;
+
+    let params = DefaultStyles.Boxish( rawParams );
+    params.rows = params.rows || 5;
+    return ( <UniComponent
+      componentID={ rawParams.componentID }
+      children={ TextAreaInput }
+      params={ params }
+    /> );
+  },
+  DigitCharacters: ( rawParams ) => {
+    rawParams = {
+      textAlign: 'center',
+      width: 0,
+      ...rawParams
+    }
+    if ( rawParams.combineInput ) {
+      rawParams = $.deepMerge(
+        rawParams,{
+        digits: rawParams.digits,
+        textAlign: 'center',
+        width: 0,
+        borderRadius: 0,
+        freeCSS: {
+          minWidth: 12 * 2,
+          marginRight: -1
+        },
+        listStyles: {
+          borderRadius: '2.tone.secondary',
+          border: 'unset',
+          gap: 0
+        },
+      }
+      );
+    }
+    let params = DefaultStyles.Boxish( rawParams ) as amotify.fn.Input.DigitCharacters.PlainParams;
+
+    return (
+      <UniComponent
+        componentID={ rawParams.componentID }
+        children={ DigitCharactersInput }
+        params={ params }
+      />
+    );
+  },
+  Time: TimeInputs,
+  Select: ( rawParams ) => {
+    if ( $.is.nullish( rawParams.rightIcon ) ) {
+      rawParams.rightIcon = <Input.Comps.RightIcon
+        flexType='col'
+        className={ style.IndicatorIcon }
+        { ...rawParams.rightIconStyles }
+      >
+        <FAIcon.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={ SelectInput }
+        params={ params }
+      />
+    );
+  },
+  Radio: ListInputs.Radio,
+  Checkbox: ListInputs.Checkbox,
+  Chips: ChipsInputs,
+  Search: ( params: amotify.fn.Input.Search.PlainParams ) => {
+    return <ChipsInputs
+      AddButtonComponent={ ( props ) => {
+        if ( props.selected.length ) return null;
+        return <Box>
+          選択してください
+        </Box>
+      } }
+      SelectedCellComponent={ ( props ) => {
+        return <Box
+          width={ 1 }
+          textAlign='left'
+        >
+          <Row.Separate>
+            { props.label }
+            { props.defaultRemoveButton }
+          </Row.Separate>
+        </Box>;
+      } }
+      paddingLeft={ 3 }
+      rightIcon={ <Input.Comps.LeftIcon>
+        <Column gap={ 0 }>
+          <FAIcon.AngleUp />
+          <FAIcon.AngleDown />
+        </Column>
+      </Input.Comps.LeftIcon> }
+      limit={ 1 }
+      { ...params }
+    />
+  },
+  File: FileInputs,
+  Switch: ( rawParams ) => {
+    rawParams.color = rawParams.color || 'theme';
+    return ( <UniComponent
+      componentID={ rawParams.componentID }
+      children={ SwitchInput }
+      params={ rawParams }
+    /> );
+  },
+  Slider: ( rawParams ) => {
+    return ( <UniComponent
+      componentID={ rawParams.componentID }
+      children={ SliderInput }
+      params={ StyleConverter.ToClassName( rawParams ) }
+    /> );
+  },
+  Checker: ( rawParams ) => {
+    return ( <ListInputs.Origin
+      { ...rawParams }
+      tone='plain'
+      icon
+      type='checker'
+      iconType='checkbox'
+      value={ rawParams.value ? true : null }
+      cellStyles={ {
+        padding: 0,
+        ...rawParams.cellStyles
+      } }
+      options={ [
+        { value: true,label: rawParams.label }
+      ] }
+      onUpdateValidValue={ ( args ) => {
+        let Value = !!args.value[ 0 ];
+        if ( rawParams.onUpdateValidValue )
+          rawParams.onUpdateValidValue( {
+            ...args,
+            value: Value
+          } );
+      } }
+    /> );
+  },
+
+  Segmented: Segmented,
+
+  Comps: {
+    RequiredSign: ( params ) => {
+      return ( <Span
+        fontColor='white'
+        fontSize={ '0.xs' }
+        padding={ [ '1/4','1/3' ] }
+        backgroundColor='nega'
+        borderRadius={ '3.tone.tertiary' }
+        children={ '必須' }
+        { ...params }
+      /> );
+    },
+    OmitSign: ( params ) => {
+      return ( <Span
+        fontColor='white'
+        fontSize={ '0.xs' }
+        padding={ [ '1/4','1/3' ] }
+        borderRadius={ '3.tone.tertiary' }
+        backgroundColor='6.layer.darkest'
+        children={ '省略可' }
+        { ...params }
+      /> );
+    },
+    LeftIndicator: ( params ) => {
+      let {
+        tone,
+        ...others
+      } = params;
+
+      return ( <Box
+        { ...DefaultStyles.Indicator( tone! ) }
+        borderRight='unset'
+        borderTopRightRadius={ 0 }
+        borderBottomRightRadius={ 0 }
+        { ...others }
+      /> );
+    },
+    RightIndicator: ( params ) => {
+      let {
+        tone,
+        ...others
+      } = params;
+
+      return ( <Box
+        { ...DefaultStyles.Indicator( tone! ) }
+        borderLeft='unset'
+        borderTopLeftRadius={ 0 }
+        borderBottomLeftRadius={ 0 }
+        { ...others }
+      /> );
+    },
+    RightIcon: ( params ) => {
+      let {
+        tone = 'border',
+        ...others
+      } = params;
+
+      return ( <Box
+        { ...DefaultStyles.IndicatorIcon }
+        right={ '3/4' }
+        className={ style.IndicatorIcon }
+        { ...others }
+        freeCSS={ {
+          zIndex: 6,
+          pointerEvents: 'none',
+          ...others.freeCSS
+        } }
+      /> );
+    },
+    LeftIcon: ( params ) => {
+      let {
+        tone = 'border',
+        ...others
+      } = params;
+
+      return ( <Box
+        { ...DefaultStyles.IndicatorIcon }
+        left={ '3/4' }
+        className={ style.IndicatorIcon }
+        { ...others }
+        freeCSS={ {
+          zIndex: 6,
+          pointerEvents: 'none',
+          ...others.freeCSS
+        } }
+      /> );
+    },
+  }
+}
+
+const DefaultStyles = {
+  Input: ( type: amotify.fn.Input.BoxToneTypes ) => {
+    if ( type == 'plain' ) return {};
+    let Styles: amotifyUniStyleParams = {
+      padding: '3/4',
+      transition: 'middle',
+      flexSizing: 'auto',
+      boxShadow: 0
+    }
+    if ( type == 'border' ) {
+      Styles = {
+        ...Styles,
+        border: true,
+        borderRadius: '2.tone.secondary',
+        backgroundColor: '1.layer.base'
+      }
+    } else if ( type == 'cloud' ) {
+      Styles = {
+        ...Styles,
+        border: '1.thin',
+        borderRadius: '2.tone.secondary',
+        backgroundColor: 'cloud'
+      }
+    } else if ( type == 'bottomBorder' ) {
+      Styles = {
+        ...Styles,
+        borderRadius: 0,
+        borderBottom: true,
+        backgroundColor: 'cloud'
+      }
+    }
+    return Styles;
+  },
+  ListCell: ( params: amotify.fn.Input.List.OriginParams ) => {
+    if ( !params.tone ) {
+      params.tone = 'border';
+
+      if ( amotify.config.tone == 'flat' ) params.tone = 'cloud';
+    }
+
+    let { tone } = params;
+
+    if ( tone == 'plain' ) {
+
+    } else {
+      params = {
+        ...params,
+        cellStyles: {
+          position: 'relative',
+          padding: [ '3/4',1 ],
+          borderRadius: '2.tone.secondary',
+          transition: 'middle',
+          ...params.cellStyles,
+        }
+      }
+
+      if ( tone == 'normal' ) {
+        params = {
+          gap: '1/2',
+          ...params,
+          cellStyles: {
+            isBoldFont: true,
+            ...params.cellStyles,
+          },
+          cellCheckedStyles: {
+            backgroundColor: 'cloud'
+          }
+        }
+      }
+      else {
+        params = {
+          gap: '3/4',
+          ...params,
+          cellStyles: {
+            boxShadow: 0,
+            ...params.cellStyles
+          }
+        }
+
+        if ( tone == 'cloud' || tone == 'vivid' ) {
+          params.cellStyles = {
+            border: '1.thin',
+            backgroundColor: '2.layer.cloud',
+            ...params.cellStyles,
+          }
+        }
+
+        if ( tone == 'border' ) {
+          params.cellStyles = {
+            border: true,
+            backgroundColor: '1.layer.base',
+            ...params.cellStyles,
+          }
+          params.cellCheckedStyles = {
+            borderColor: 'theme',
+            fontColor: 'theme',
+            ...params.cellCheckedStyles
+          }
+        } else if ( tone == 'cloud' ) {
+          params.cellCheckedStyles = {
+            backgroundColor: 'tcOpFew',
+            fontColor: 'theme',
+            borderColor: 'theme',
+            ...params.cellCheckedStyles
+          }
+        } else if ( tone == 'vivid' ) {
+          params.cellCheckedStyles = {
+            backgroundColor: 'theme',
+            fontColor: 'white',
+            borderColor: 'theme',
+            ...params.cellCheckedStyles
+          }
+        }
+      }
+    }
+    return StyleConverter.ToClassName( params );
+  },
+  Boxish: ( params: any ) => {
+    if ( !params.tone ) {
+      params.tone = 'border';
+      if ( amotify.config.tone == 'sharp' ) params.tone = 'bottomBorder';
+      else if ( amotify.config.tone == 'flat' ) params.tone = 'cloud';
+    }
+
+    let Styles: amotifyUniStyleParams = {
+      ...DefaultStyles.Input( params.tone ),
+      ...params,
+      ...params.leftIndicator ? {
+        borderTopLeftRadius: 0,
+        borderBottomLeftRadius: 0
+      } : null,
+      ...params.rightIndicator ? {
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0,
+      } : null,
+      className: [
+        style.Input,
+        params.className
+      ].join( ' ' ),
+    }
+
+    return StyleConverter.ToClassName( Styles ) as any;
+  },
+  Indicator: ( type: amotify.fn.Input.BoxToneTypes ) => {
+    if ( !type ) {
+      type = 'border';
+      if ( amotify.config.tone == 'sharp' ) type = 'bottomBorder';
+    }
+    if ( type == 'plain' ) return {};
+    let styles: amotifyUniStyleParams = {
+      flexSizing: 'none',
+      flexCenter: true,
+      padding: [ 0,1 ],
+      borderRadius: '2.tone.secondary',
+      backgroundColor: 'cloud'
+    }
+
+    if ( type == 'border' ) {
+      styles = {
+        ...styles,
+        border: true
+      }
+    } else if ( type == 'cloud' ) {
+      styles = {
+        ...styles,
+        border: '1.thin'
+      }
+    } else if ( type == 'bottomBorder' ) {
+      styles = {
+        ...styles,
+        borderRadius: 0,
+        borderBottom: true
+      }
+    }
+    return styles;
+  },
+  IndicatorIcon: {
+    position: 'absolute',
+    unitWidth: 2,
+    unitHeight: 2,
+    top: '50%',
+    flexCenter: true,
+    fontColor: 'theme',
+    fontSize: '1.mini',
+    backgroundColor: 'inherit',
+  } as amotifyUniStyleParams
+};