amotify 0.0.4 → 0.0.5

package/src/Functions/Input/_.tsx

@@ -1,793 +0,0 @@
-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
-};