@bytebrand/fe-ui-core 4.8.25 → 4.8.27

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

@@ -1,222 +1,222 @@
-import React, { useState, useEffect } from 'react';
-import IconSVG from '../IconSVG/IconSVG';
-import { FormControl, Select, InputLabel, SelectChangeEvent, MenuItem, ListItemText, Checkbox } from '@mui/material';
-import classnames from 'classnames';
-import { ThemeProvider } from '@mui/material/styles';
-import _isEmpty from 'lodash/isEmpty';
-import { Theme, ArrowSelect, CloseButton, FlexWrap } from './MaterialSelect.styled';
-import { isMobileOnly } from 'react-device-detect';
-
-export interface IItems {
-  value: string | number;
-  label: string | JSX.Element;
-  isDisabled?: boolean;
-  isSeries?: boolean;
-}
-
-export interface IVehicleModalProps {
-  t?: (key: string, options?: object) => string;
-  className?: string;
-  cbd?: boolean;
-  sx?: object;
-  disabled?: boolean;
-  classNameIcon?: string;
-  error?: boolean;
-  multiple?: boolean;
-  isClearable?: boolean;
-  required?: boolean;
-  label: string;
-  value?: any;
-  namespace?: string;
-  size?: any;
-  icon?: string;
-  children?: JSX.Element | JSX.Element[];
-  onChange: (value: any) => void;
-  items?: IItems[];
-  selectClassName?: string;
-  amountOfItems?: number;
-  customDimensionsIcon?: boolean;
-  dense?:boolean;
-}
-
-const ITEM_HEIGHT = isMobileOnly ? 56 : 48;
-const MOBILE_ITEM_HEIGHT = 56;
-const ITEM_PADDING_TOP = 8;
-const MENU_ITEMS = 10;
-
-const MaterialSelect: React.FC<IVehicleModalProps> = ({
-  t,
-  cbd,
-  value,
-  isClearable,
-  disabled,
-  namespace,
-  label,
-  onChange,
-  error,
-  multiple,
-  size,
-  classNameIcon,
-  className,
-  sx,
-  selectClassName,
-  required,
-  items,
-  icon,
-  customDimensionsIcon,
-  dense,
-  amountOfItems = MENU_ITEMS
-}: IVehicleModalProps) => {
-  const [newValue, setValue] = useState('');
-  const [multipleValue, setMultipleValue] = React.useState([]);
-
-  useEffect(
-    () => {
-      setValue(value);
-      setMultipleValue(value);
-    },
-    [value]
-  );
-
-  const handleChange = (event: SelectChangeEvent<any>) => {
-    const {
-      target: { value }
-    } = event;
-
-    if (multiple) {
-      const values = typeof value === 'string' ? value.split(',') : value;
-      setMultipleValue(values);
-      onChange(values);
-    } else {
-      setValue(value as string);
-      onChange(value as string);
-    }
-  };
-
-  const handleClearClick = () => {
-    setValue('' as string);
-    setMultipleValue([] as []);
-    onChange('' as string);
-  };
-
-  const getLabel = (label: string | JSX.Element, disabled: boolean) => disabled ? <span>{(label as string).toUpperCase()}</span> : label;
-
-  const IconClassNames = classnames(
-    classNameIcon
-  );
-
-  const renderItems = (items: IItems[]) => {
-    if (_isEmpty(items)) return <MenuItem disabled>No options</MenuItem>;
-    return items.map(({ value, label, isDisabled = false, isSeries = false } : IItems, index: number) => {
-      const setDisabled = isDisabled || isSeries;
-      if (multiple) {
-        return (
-          <MenuItem key={`${value}_${index}`} value={value} dense={dense}>
-            <Checkbox checked={multipleValue.indexOf(value) > -1} />
-            <ListItemText primary={label} />
-          </MenuItem>
-        );
-      }
-      return (
-        <MenuItem
-          key={`${value}_${index}`}
-          value={value}
-          disabled={setDisabled}
-          // sx={setDisabled ? {
-          //   backgroundColor: '#e8e8e8',
-          //   color: '#333',
-          //   opacity: '1 !important'
-          // } : null}
-          sx={{
-            height: ITEM_HEIGHT
-          }}
-        >
-          {!!t ? t(`${namespace}${cbd ? ':' : '.'}${label}`) : getLabel(label, setDisabled)}
-        </MenuItem>
-      );
-    });
-  };
-
-  const isValueEmpty = multiple ? !_isEmpty(multipleValue) : newValue;
-
-  return (
-    <ThemeProvider theme={Theme}>
-      <FormControl
-        className={className}
-        error={error}
-        disabled={disabled}
-        required={required}
-        size={size}
-        sx={sx}
-        fullWidth
-      >
-        <InputLabel>{label}</InputLabel>
-        <Select
-          multiple={multiple}
-          label={label}
-          value={multiple ? multipleValue : newValue}
-          onChange={(event: SelectChangeEvent<any>) => handleChange(event)}
-          renderValue={multiple ? (values: any) => (
-            <FlexWrap>
-              {values.map((value: any) => (
-                <span key={value}>{t(`cbd:${value}`)}</span>
-              ))}
-            </FlexWrap>
-          ) : void 0}
-          endAdornment={
-            <>
-              {isClearable && (
-                // tslint-disable-next-line
-                <CloseButton sx={{ display: !!isValueEmpty ? 'block' : 'none' }} onClick={handleClearClick}>
-                  <IconSVG name='close' customDimensions />
-                </CloseButton>
-              )}
-            </>
-          }
-          inputProps={{
-            className: selectClassName
-          }}
-          IconComponent={() => <ArrowSelect customDimensions={customDimensionsIcon} className={IconClassNames} name={!!icon ? icon : 'arrowSelect'} />}
-          MenuProps={{
-            disablePortal: true,
-            disableAutoFocus: true,
-            elevation: 0,
-            style: {
-              position: 'absolute',
-              marginTop: 'auto'
-            },
-            PaperProps: {
-              sx: {
-                maxHeight: {
-                  xs: MOBILE_ITEM_HEIGHT * amountOfItems + ITEM_PADDING_TOP,
-                  sm: ITEM_HEIGHT * amountOfItems + ITEM_PADDING_TOP
-                }
-              }
-            },
-            disableScrollLock: true
-          }}
-        >
-          {renderItems(items)}
-        </Select>
-      </FormControl>
-    </ThemeProvider>
-  );
-};
-
-MaterialSelect.defaultProps = {
-  className: '',
-  isClearable: false,
-  multiple: false,
-  items: [],
-  classNameIcon: '',
-  namespace: '',
-  value: '',
-  cbd: false,
-  size: 'medium',
-  error: false,
-  required: false,
-  label: '',
-  onChange: () => { }
-};
-
-export default MaterialSelect;
+import React, { useState, useEffect } from 'react';
+import IconSVG from '../IconSVG/IconSVG';
+import { FormControl, Select, InputLabel, SelectChangeEvent, MenuItem, ListItemText, Checkbox } from '@mui/material';
+import classnames from 'classnames';
+import { ThemeProvider } from '@mui/material/styles';
+import _isEmpty from 'lodash/isEmpty';
+import { Theme, ArrowSelect, CloseButton, FlexWrap } from './MaterialSelect.styled';
+import { isMobileOnly } from 'react-device-detect';
+
+export interface IItems {
+  value: string | number;
+  label: string | JSX.Element;
+  isDisabled?: boolean;
+  isSeries?: boolean;
+}
+
+export interface IVehicleModalProps {
+  t?: (key: string, options?: object) => string;
+  className?: string;
+  cbd?: boolean;
+  sx?: object;
+  disabled?: boolean;
+  classNameIcon?: string;
+  error?: boolean;
+  multiple?: boolean;
+  isClearable?: boolean;
+  required?: boolean;
+  label: string;
+  value?: any;
+  namespace?: string;
+  size?: any;
+  icon?: string;
+  children?: JSX.Element | JSX.Element[];
+  onChange: (value: any) => void;
+  items?: IItems[];
+  selectClassName?: string;
+  amountOfItems?: number;
+  customDimensionsIcon?: boolean;
+  dense?:boolean;
+}
+
+const ITEM_HEIGHT = isMobileOnly ? 56 : 48;
+const MOBILE_ITEM_HEIGHT = 56;
+const ITEM_PADDING_TOP = 8;
+const MENU_ITEMS = 10;
+
+const MaterialSelect: React.FC<IVehicleModalProps> = ({
+  t,
+  cbd,
+  value,
+  isClearable,
+  disabled,
+  namespace,
+  label,
+  onChange,
+  error,
+  multiple,
+  size,
+  classNameIcon,
+  className,
+  sx,
+  selectClassName,
+  required,
+  items,
+  icon,
+  customDimensionsIcon,
+  dense,
+  amountOfItems = MENU_ITEMS
+}: IVehicleModalProps) => {
+  const [newValue, setValue] = useState('');
+  const [multipleValue, setMultipleValue] = React.useState([]);
+
+  useEffect(
+    () => {
+      setValue(value);
+      setMultipleValue(value);
+    },
+    [value]
+  );
+
+  const handleChange = (event: SelectChangeEvent<any>) => {
+    const {
+      target: { value }
+    } = event;
+
+    if (multiple) {
+      const values = typeof value === 'string' ? value.split(',') : value;
+      setMultipleValue(values);
+      onChange(values);
+    } else {
+      setValue(value as string);
+      onChange(value as string);
+    }
+  };
+
+  const handleClearClick = () => {
+    setValue('' as string);
+    setMultipleValue([] as []);
+    onChange('' as string);
+  };
+
+  const getLabel = (label: string | JSX.Element, disabled: boolean) => disabled ? <span>{(label as string).toUpperCase()}</span> : label;
+
+  const IconClassNames = classnames(
+    classNameIcon
+  );
+
+  const renderItems = (items: IItems[]) => {
+    if (_isEmpty(items)) return <MenuItem disabled>No options</MenuItem>;
+    return items.map(({ value, label, isDisabled = false, isSeries = false } : IItems, index: number) => {
+      const setDisabled = isDisabled || isSeries;
+      if (multiple) {
+        return (
+          <MenuItem key={`${value}_${index}`} value={value} dense={dense}>
+            <Checkbox checked={multipleValue.indexOf(value) > -1} />
+            <ListItemText primary={label} />
+          </MenuItem>
+        );
+      }
+      return (
+        <MenuItem
+          key={`${value}_${index}`}
+          value={value}
+          disabled={setDisabled}
+          // sx={setDisabled ? {
+          //   backgroundColor: '#e8e8e8',
+          //   color: '#333',
+          //   opacity: '1 !important'
+          // } : null}
+          sx={{
+            height: ITEM_HEIGHT
+          }}
+        >
+          {!!t ? t(`${namespace}${cbd ? ':' : '.'}${label}`) : getLabel(label, setDisabled)}
+        </MenuItem>
+      );
+    });
+  };
+
+  const isValueEmpty = multiple ? !_isEmpty(multipleValue) : newValue;
+
+  return (
+    <ThemeProvider theme={Theme}>
+      <FormControl
+        className={className}
+        error={error}
+        disabled={disabled}
+        required={required}
+        size={size}
+        sx={sx}
+        fullWidth
+      >
+        <InputLabel>{label}</InputLabel>
+        <Select
+          multiple={multiple}
+          label={label}
+          value={multiple ? multipleValue : newValue}
+          onChange={(event: SelectChangeEvent<any>) => handleChange(event)}
+          renderValue={multiple ? (values: any) => (
+            <FlexWrap>
+              {values.map((value: any) => (
+                <span key={value}>{t(`cbd:${value}`)}</span>
+              ))}
+            </FlexWrap>
+          ) : void 0}
+          endAdornment={
+            <>
+              {isClearable && (
+                // tslint-disable-next-line
+                <CloseButton sx={{ display: !!isValueEmpty ? 'block' : 'none' }} onClick={handleClearClick}>
+                  <IconSVG name='close' customDimensions />
+                </CloseButton>
+              )}
+            </>
+          }
+          inputProps={{
+            className: selectClassName
+          }}
+          IconComponent={() => <ArrowSelect customDimensions={customDimensionsIcon} className={IconClassNames} name={!!icon ? icon : 'arrowSelect'} />}
+          MenuProps={{
+            disablePortal: true,
+            disableAutoFocus: true,
+            elevation: 0,
+            style: {
+              position: 'absolute',
+              marginTop: 'auto'
+            },
+            PaperProps: {
+              sx: {
+                maxHeight: {
+                  xs: MOBILE_ITEM_HEIGHT * amountOfItems + ITEM_PADDING_TOP,
+                  sm: ITEM_HEIGHT * amountOfItems + ITEM_PADDING_TOP
+                }
+              }
+            },
+            disableScrollLock: true
+          }}
+        >
+          {renderItems(items)}
+        </Select>
+      </FormControl>
+    </ThemeProvider>
+  );
+};
+
+MaterialSelect.defaultProps = {
+  className: '',
+  isClearable: false,
+  multiple: false,
+  items: [],
+  classNameIcon: '',
+  namespace: '',
+  value: '',
+  cbd: false,
+  size: 'medium',
+  error: false,
+  required: false,
+  label: '',
+  onChange: () => { }
+};
+
+export default MaterialSelect;

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

@@ -1,47 +1,47 @@
-import React, { useState } from 'react';
-import { Resizable } from 're-resizable';
-import { storiesOf } from '@storybook/react';
-// Components
-import MaterialStepButton from './MaterialStepButton';
-import styles from './MaterialStepButton.story.styl';
-
-import {
-  _minDate,
-  handleMaxDate,
-  checkingWhenLess18Age,
-  createDateAsUTC
-} from '../../../framework/utils/DateUtils';
-
-const resizableProps = {
-  defaultSize: {
-    width: 360,
-    height: 700
-  }
-};
-
-const MaterialStepButtonWrapper = () => {
-  const [value, newValue] = useState('');
-
-  const onHandleChange = (value) => {
-    newValue(value);
-  };
-
-  return (
-    <Resizable {...resizableProps}>
-      <div className={styles.wrapper}>
-        <MaterialStepButton
-          language='en'
-          maxDate={new Date(handleMaxDate())}
-          minDate={_minDate}
-          value={value}
-          error={true}
-          placeholder='Date of Birth DD/MM/YYYY*'
-          onChange={(value) => onHandleChange(createDateAsUTC(value))}
-        />
-      </div>
-    </Resizable>
-  );
-}
-
-storiesOf('_Common_UI', module)
-  .add('MaterialStepButton', () => <MaterialStepButtonWrapper />)
+import React, { useState } from 'react';
+import { Resizable } from 're-resizable';
+import { storiesOf } from '@storybook/react';
+// Components
+import MaterialStepButton from './MaterialStepButton';
+import styles from './MaterialStepButton.story.styl';
+
+import {
+  _minDate,
+  handleMaxDate,
+  checkingWhenLess18Age,
+  createDateAsUTC
+} from '../../../framework/utils/DateUtils';
+
+const resizableProps = {
+  defaultSize: {
+    width: 360,
+    height: 700
+  }
+};
+
+const MaterialStepButtonWrapper = () => {
+  const [value, newValue] = useState('');
+
+  const onHandleChange = (value) => {
+    newValue(value);
+  };
+
+  return (
+    <Resizable {...resizableProps}>
+      <div className={styles.wrapper}>
+        <MaterialStepButton
+          language='en'
+          maxDate={new Date(handleMaxDate())}
+          minDate={_minDate}
+          value={value}
+          error={true}
+          placeholder='Date of Birth DD/MM/YYYY*'
+          onChange={(value) => onHandleChange(createDateAsUTC(value))}
+        />
+      </div>
+    </Resizable>
+  );
+}
+
+storiesOf('_Common_UI', module)
+  .add('MaterialStepButton', () => <MaterialStepButtonWrapper />)

package/source/components/_common/MaterialStepButton/MaterialStepButton.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: 15px;

package/source/components/_common/MaterialStepButton/MaterialStepButton.styl

@@ -1,32 +1,32 @@
-@import '../../../theme/mixins.styl'
-
-.inputBirthday
-  font-size: 12px;
-  width: 100%;
-
-  ::placeholder
-    color: rgba(0, 0, 0, 0.6) !important;
-    opacity: 1 !important;
-
-  [class*='MuiOutlinedInput-root']
-    border-radius: 3px;
-    &[class*='Mui-focused']
-      & [class*='MuiOutlinedInput-notchedOutline']
-        border-color: rgba(0, 92, 203, 1);
-
-  [class*='Mui-error']
-    ::placeholder
-      color: #f44336 !important;
-      opacity: 1 !important;
-    & [class*='MuiInputBase-input']
-      color: #f44336;
-
-  [class*='MuiOutlinedInput-input']
-    padding: 14.5px 14px;
-    color: rgba(0, 0, 0, 0.83);
-
-  [class*='MuiOutlinedInput-notchedOutline']
-    border-color: rgba(0, 0, 0, 0.12);
-
-  [class*='MuiOutlinedInput-adornedEnd']
-    padding-right: 0
+@import '../../../theme/mixins.styl'
+
+.inputBirthday
+  font-size: 12px;
+  width: 100%;
+
+  ::placeholder
+    color: rgba(0, 0, 0, 0.6) !important;
+    opacity: 1 !important;
+
+  [class*='MuiOutlinedInput-root']
+    border-radius: 3px;
+    &[class*='Mui-focused']
+      & [class*='MuiOutlinedInput-notchedOutline']
+        border-color: rgba(0, 92, 203, 1);
+
+  [class*='Mui-error']
+    ::placeholder
+      color: #f44336 !important;
+      opacity: 1 !important;
+    & [class*='MuiInputBase-input']
+      color: #f44336;
+
+  [class*='MuiOutlinedInput-input']
+    padding: 14.5px 14px;
+    color: rgba(0, 0, 0, 0.83);
+
+  [class*='MuiOutlinedInput-notchedOutline']
+    border-color: rgba(0, 0, 0, 0.12);
+
+  [class*='MuiOutlinedInput-adornedEnd']
+    padding-right: 0