@bytebrand/fe-ui-core 4.8.26 → 4.8.28

package/source/components/_common/MaterialField/MaterialField.tsx

@@ -1,132 +1,132 @@
-import React, { useState, useEffect } from 'react';
-import { TextField, IconButton } from '@mui/material';
-import { ThemeProvider } from '@mui/material/styles';
-import { Theme } from './MaterialField.styled';
-import InputAdornment from '@mui/material/InputAdornment';
-import IconSVG from '../IconSVG/IconSVG';
-
-export interface IVehicleModalProps {
-  className?: string;
-  error?: any;
-  sx?: any;
-  required?: boolean;
-  disabled?: boolean;
-  multiline?: boolean;
-  autoComplete?: string;
-  value: string;
-  type?: string;
-  name?: string;
-  rows?: number;
-  size?: any;
-  variant?: 'filled' | 'outlined' | 'standard';
-  label?: string;
-  placeholder?: string;
-  maxLength?: number;
-  onChange: (value: string, name?: string, event?: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-}
-
-const MaterialField: React.FC<IVehicleModalProps> = ({
-  label,
-  className,
-  onChange,
-  sx,
-  size,
-  variant,
-  error,
-  required,
-  disabled,
-  autoComplete,
-  name,
-  type,
-  value,
-  multiline,
-  rows,
-  placeholder,
-  maxLength
-}: IVehicleModalProps) => {
-  const [showPassword, setShowPassword] = React.useState(false);
-  const [enteredValue, setEnteredValue] = useState(value);
-
-  useEffect(
-    () => {
-      setEnteredValue(value);
-    },
-    [value]
-  );
-
-  const onHandleChange = (event?: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-    const value = event.currentTarget.value;
-    const name = event.currentTarget.name;
-
-    setEnteredValue(event.target.value);
-    onChange(value, name, event);
-  };
-
-  const handleClickShowPassword = () => {
-    setShowPassword(!showPassword);
-  };
-
-  const handleMouseDownPassword = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    event.preventDefault();
-  };
-
-  const passType = showPassword ? 'text' : 'password';
-
-  return (
-    <ThemeProvider theme={Theme}>
-      <TextField
-        fullWidth={true}
-        autoComplete={autoComplete}
-        label={label}
-        value={enteredValue}
-        name={name}
-        sx={sx}
-        error={!!error}
-        type={type === 'password' ? passType : type}
-        disabled={disabled}
-        required={required}
-        size={size}
-        onChange={onHandleChange}
-        className={className}
-        multiline={multiline}
-        variant={variant}
-        inputProps={maxLength ? { maxLength } : {}}
-        rows={rows}
-        placeholder={placeholder}
-        InputProps={{
-          endAdornment: type === 'password' ? (
-            <InputAdornment position='end'>
-              <IconButton
-                aria-label='toggle password visibility'
-                onClick={handleClickShowPassword}
-                onMouseDown={handleMouseDownPassword}
-                edge='end'
-              >
-                {showPassword ? <IconSVG name='removeEyeIcon' customDimensions /> : <IconSVG name='removeEyeOffIcon' customDimensions />}
-              </IconButton>
-            </InputAdornment>
-          ) : null
-        }}
-      />
-    </ThemeProvider>
-  );
-};
-
-MaterialField.defaultProps = {
-  className: '',
-  value: '',
-  variant: 'outlined',
-  disabled: false,
-  type: 'text',
-  size: 'medium',
-  autoComplete: 'off',
-  name: '',
-  required: false,
-  label: null,
-  onChange: () => { },
-  multiline: false,
-  rows: 1,
-  placeholder: ''
-};
-
-export default MaterialField;
+import React, { useState, useEffect } from 'react';
+import { TextField, IconButton } from '@mui/material';
+import { ThemeProvider } from '@mui/material/styles';
+import { Theme } from './MaterialField.styled';
+import InputAdornment from '@mui/material/InputAdornment';
+import IconSVG from '../IconSVG/IconSVG';
+
+export interface IVehicleModalProps {
+  className?: string;
+  error?: any;
+  sx?: any;
+  required?: boolean;
+  disabled?: boolean;
+  multiline?: boolean;
+  autoComplete?: string;
+  value: string;
+  type?: string;
+  name?: string;
+  rows?: number;
+  size?: any;
+  variant?: 'filled' | 'outlined' | 'standard';
+  label?: string;
+  placeholder?: string;
+  maxLength?: number;
+  onChange: (value: string, name?: string, event?: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+}
+
+const MaterialField: React.FC<IVehicleModalProps> = ({
+  label,
+  className,
+  onChange,
+  sx,
+  size,
+  variant,
+  error,
+  required,
+  disabled,
+  autoComplete,
+  name,
+  type,
+  value,
+  multiline,
+  rows,
+  placeholder,
+  maxLength
+}: IVehicleModalProps) => {
+  const [showPassword, setShowPassword] = React.useState(false);
+  const [enteredValue, setEnteredValue] = useState(value);
+
+  useEffect(
+    () => {
+      setEnteredValue(value);
+    },
+    [value]
+  );
+
+  const onHandleChange = (event?: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const value = event.currentTarget.value;
+    const name = event.currentTarget.name;
+
+    setEnteredValue(event.target.value);
+    onChange(value, name, event);
+  };
+
+  const handleClickShowPassword = () => {
+    setShowPassword(!showPassword);
+  };
+
+  const handleMouseDownPassword = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    event.preventDefault();
+  };
+
+  const passType = showPassword ? 'text' : 'password';
+
+  return (
+    <ThemeProvider theme={Theme}>
+      <TextField
+        fullWidth={true}
+        autoComplete={autoComplete}
+        label={label}
+        value={enteredValue}
+        name={name}
+        sx={sx}
+        error={!!error}
+        type={type === 'password' ? passType : type}
+        disabled={disabled}
+        required={required}
+        size={size}
+        onChange={onHandleChange}
+        className={className}
+        multiline={multiline}
+        variant={variant}
+        inputProps={maxLength ? { maxLength } : {}}
+        rows={rows}
+        placeholder={placeholder}
+        InputProps={{
+          endAdornment: type === 'password' ? (
+            <InputAdornment position='end'>
+              <IconButton
+                aria-label='toggle password visibility'
+                onClick={handleClickShowPassword}
+                onMouseDown={handleMouseDownPassword}
+                edge='end'
+              >
+                {showPassword ? <IconSVG name='removeEyeIcon' customDimensions /> : <IconSVG name='removeEyeOffIcon' customDimensions />}
+              </IconButton>
+            </InputAdornment>
+          ) : null
+        }}
+      />
+    </ThemeProvider>
+  );
+};
+
+MaterialField.defaultProps = {
+  className: '',
+  value: '',
+  variant: 'outlined',
+  disabled: false,
+  type: 'text',
+  size: 'medium',
+  autoComplete: 'off',
+  name: '',
+  required: false,
+  label: null,
+  onChange: () => { },
+  multiline: false,
+  rows: 1,
+  placeholder: ''
+};
+
+export default MaterialField;

package/source/components/_common/MaterialSelect/MaterialSelect.story.js

@@ -1,52 +1,52 @@
-import React, { useState } from 'react';
-import { Resizable } from 're-resizable';
-import { storiesOf } from '@storybook/react';
-import { MenuItem } from '@mui/material';
-// Components
-import MaterialSelect from './MaterialSelect';
-import styles from './MaterialSelect.story.styl';
-
-const resizableProps = {
-  defaultSize: { width: 360, height: 700 }
-};
-
-// const inputFields = [{
-//   'Vorname',
-//   'Nachname'
-// }]
-
-const MaterialFieldWrapper = () => {
-  const [newData, setNewData] = useState({
-    firstName: '',
-    lastName: '',
-    email: '',
-    countryCode: '+49',
-    areaCode: '',
-    phoneNumber: ''
-  });
-
-  const onHandleChange = (event, type) => {
-    setNewData({ ...newData, [type]: event.target.value });
-  };
-
-  return (
-    <Resizable {...resizableProps}>
-      <div className={styles.wrapper}>
-        <MaterialSelect
-          onHandleChange={e => onHandleChange(e, 'firstName')}
-          label='age'
-          value={newData.firstName}
-          error={true}
-          helperText={`We'll never share your email.`}
-        >
-          <MenuItem value={1}>Ten</MenuItem>
-          <MenuItem value={2}>Twenty</MenuItem>
-          <MenuItem value={3}>Thirty</MenuItem>
-        </MaterialSelect>
-      </div>
-    </Resizable>
-  );
-}
-
-storiesOf('_Common_UI', module)
-  .add('MaterialSelect', () => <MaterialFieldWrapper />)
+import React, { useState } from 'react';
+import { Resizable } from 're-resizable';
+import { storiesOf } from '@storybook/react';
+import { MenuItem } from '@mui/material';
+// Components
+import MaterialSelect from './MaterialSelect';
+import styles from './MaterialSelect.story.styl';
+
+const resizableProps = {
+  defaultSize: { width: 360, height: 700 }
+};
+
+// const inputFields = [{
+//   'Vorname',
+//   'Nachname'
+// }]
+
+const MaterialFieldWrapper = () => {
+  const [newData, setNewData] = useState({
+    firstName: '',
+    lastName: '',
+    email: '',
+    countryCode: '+49',
+    areaCode: '',
+    phoneNumber: ''
+  });
+
+  const onHandleChange = (event, type) => {
+    setNewData({ ...newData, [type]: event.target.value });
+  };
+
+  return (
+    <Resizable {...resizableProps}>
+      <div className={styles.wrapper}>
+        <MaterialSelect
+          onHandleChange={e => onHandleChange(e, 'firstName')}
+          label='age'
+          value={newData.firstName}
+          error={true}
+          helperText={`We'll never share your email.`}
+        >
+          <MenuItem value={1}>Ten</MenuItem>
+          <MenuItem value={2}>Twenty</MenuItem>
+          <MenuItem value={3}>Thirty</MenuItem>
+        </MaterialSelect>
+      </div>
+    </Resizable>
+  );
+}
+
+storiesOf('_Common_UI', module)
+  .add('MaterialSelect', () => <MaterialFieldWrapper />)

package/source/components/_common/MaterialSelect/MaterialSelect.story.styl

@@ -1,6 +1,6 @@
-@import '../../../theme/theme.styl'
-
-.wrapper
-  background-color: #fff;
-  box-sizing: border-box;
+@import '../../../theme/theme.styl'
+
+.wrapper
+  background-color: #fff;
+  box-sizing: border-box;
   padding: 16px

package/source/components/_common/MaterialSelect/MaterialSelect.styled.tsx

@@ -1,123 +1,123 @@
-import { createTheme } from '@mui/material/styles';
-import { IconButton } from '@mui/material';
-import { styled } from '@mui/system';
-import IconSVG from '../IconSVG/IconSVG';
-import { isMobileOnly } from 'react-device-detect';
-
-export const Theme = createTheme({
-  components: {
-    MuiInputBase: {
-      styleOverrides: {
-        root: {
-          backgroundColor: '#fff'
-        }
-      }
-    },
-    MuiInputLabel: {
-      styleOverrides: {
-        root: ({ ownerState: { size } }: { ownerState: { size?: 'smaller' | 'custom' | 'normal' | 'small' | 'medium' } }) => ({
-          maxWidth: 'calc(100% - 38px)',
-          ...(size === 'custom' && {
-            marginTop: isMobileOnly ? '0px' :'-4px',
-            ['&.MuiInputLabel-shrink, &.Mui-focused']: {
-              marginTop: 0
-            }
-          })
-        })
-      }
-    },
-    MuiPaper: {
-      styleOverrides: {
-        root: {
-          top: 'calc(100% - 30px) !important',
-          maxWidth: '100% !important',
-          minWidth: '100% !important',
-          left: '0 !important',
-          marginTop: 26,
-          borderTopLeftRadius: 0,
-          borderTopRightRadius: 0,
-          transformOrigin: '0 0 !important',
-          boxShadow: 'inset 2px 0px 0px 0px #005CCB, inset -2px 0px 0px 0px #005CCB',
-          borderBottom: '2px solid #005CCB',
-          ['& > .MuiList-root']: {
-            paddingRight: '0 !important',
-            width: '100% !important'
-          },
-          ['::-webkit-scrollbar']: {
-            width: '14px'
-          },
-          ['::-webkit-scrollbar-track']: {
-            background: '#fff',
-            borderRight: '2px solid #005CCB',
-            boxShadow: 'inset -4px 0 0 0 #fff'
-          },
-          ['::-webkit-scrollbar-thumb']: {
-            backgroundColor: '#e8e8e8',
-            borderRight: '2px solid #005CCB',
-            boxShadow: 'inset -4px 0 0 0 #fff'
-          },
-          ['::-webkit-scrollbar-thumb:hover']: {
-            backgroundColor: 'grey'
-          }
-        }
-      }
-    },
-    MuiOutlinedInput: {
-      styleOverrides: {
-        root: ({ ownerState: { size } }: { ownerState: { size?: 'smaller' | 'custom' | 'normal' | 'small' | 'medium' } }) => ({
-          ...(size === 'small' && {
-            paddingRight: '0 !important',
-            flexWrap: 'nowrap !important'
-          }),
-          ...(size === 'custom' && {
-            height: isMobileOnly ? 56 : 48,
-            boxSizing: 'border-box'
-          }),
-          ['&.Mui-disabled svg']: {
-            opacity:'0.38'
-          }
-        } as any)
-      }
-    },
-    MuiListItemText: {
-      styleOverrides: {
-        root: {
-          whiteSpace: 'pre-line'
-        }
-      }
-    }
-  }
-});
-
-export const ArrowSelect = styled(IconSVG)({
-  position: 'absolute',
-  right: 10,
-  pointerEvents: 'none',
-  maxWidth: 14
-});
-
-export const CloseButton = styled(IconButton)({
-  marginRight: 0,
-  right: 30,
-  fontSize: 0,
-  position: 'absolute',
-  svg: {
-    fontSize: 10
-  }
-});
-
-export const FlexWrap = styled('div')({
-  textOverflow: 'ellipsis',
-  overflow: 'hidden',
-  width: 'calc(100% - 26px)',
-  maxWidth: 252,
-
-  ['& > span:after']: {
-    position: 'relative',
-    content: `', '`
-  },
-  ['& > span:last-of-type:after']: {
-    position: 'relative',
-    content: `''`
-  }
-});
+import { createTheme } from '@mui/material/styles';
+import { IconButton } from '@mui/material';
+import { styled } from '@mui/system';
+import IconSVG from '../IconSVG/IconSVG';
+import { isMobileOnly } from 'react-device-detect';
+
+export const Theme = createTheme({
+  components: {
+    MuiInputBase: {
+      styleOverrides: {
+        root: {
+          backgroundColor: '#fff'
+        }
+      }
+    },
+    MuiInputLabel: {
+      styleOverrides: {
+        root: ({ ownerState: { size } }: { ownerState: { size?: 'smaller' | 'custom' | 'normal' | 'small' | 'medium' } }) => ({
+          maxWidth: 'calc(100% - 38px)',
+          ...(size === 'custom' && {
+            marginTop: isMobileOnly ? '0px' :'-4px',
+            ['&.MuiInputLabel-shrink, &.Mui-focused']: {
+              marginTop: 0
+            }
+          })
+        })
+      }
+    },
+    MuiPaper: {
+      styleOverrides: {
+        root: {
+          top: 'calc(100% - 30px) !important',
+          maxWidth: '100% !important',
+          minWidth: '100% !important',
+          left: '0 !important',
+          marginTop: 26,
+          borderTopLeftRadius: 0,
+          borderTopRightRadius: 0,
+          transformOrigin: '0 0 !important',
+          boxShadow: 'inset 2px 0px 0px 0px #005CCB, inset -2px 0px 0px 0px #005CCB',
+          borderBottom: '2px solid #005CCB',
+          ['& > .MuiList-root']: {
+            paddingRight: '0 !important',
+            width: '100% !important'
+          },
+          ['::-webkit-scrollbar']: {
+            width: '14px'
+          },
+          ['::-webkit-scrollbar-track']: {
+            background: '#fff',
+            borderRight: '2px solid #005CCB',
+            boxShadow: 'inset -4px 0 0 0 #fff'
+          },
+          ['::-webkit-scrollbar-thumb']: {
+            backgroundColor: '#e8e8e8',
+            borderRight: '2px solid #005CCB',
+            boxShadow: 'inset -4px 0 0 0 #fff'
+          },
+          ['::-webkit-scrollbar-thumb:hover']: {
+            backgroundColor: 'grey'
+          }
+        }
+      }
+    },
+    MuiOutlinedInput: {
+      styleOverrides: {
+        root: ({ ownerState: { size } }: { ownerState: { size?: 'smaller' | 'custom' | 'normal' | 'small' | 'medium' } }) => ({
+          ...(size === 'small' && {
+            paddingRight: '0 !important',
+            flexWrap: 'nowrap !important'
+          }),
+          ...(size === 'custom' && {
+            height: isMobileOnly ? 56 : 48,
+            boxSizing: 'border-box'
+          }),
+          ['&.Mui-disabled svg']: {
+            opacity:'0.38'
+          }
+        } as any)
+      }
+    },
+    MuiListItemText: {
+      styleOverrides: {
+        root: {
+          whiteSpace: 'pre-line'
+        }
+      }
+    }
+  }
+});
+
+export const ArrowSelect = styled(IconSVG)({
+  position: 'absolute',
+  right: 10,
+  pointerEvents: 'none',
+  maxWidth: 14
+});
+
+export const CloseButton = styled(IconButton)({
+  marginRight: 0,
+  right: 30,
+  fontSize: 0,
+  position: 'absolute',
+  svg: {
+    fontSize: 10
+  }
+});
+
+export const FlexWrap = styled('div')({
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+  width: 'calc(100% - 26px)',
+  maxWidth: 252,
+
+  ['& > span:after']: {
+    position: 'relative',
+    content: `', '`
+  },
+  ['& > span:last-of-type:after']: {
+    position: 'relative',
+    content: `''`
+  }
+});