@bytebrand/fe-ui-core 4.0.264 → 4.0.266

package/source/components/_common/MaterialAutocomplete/MaterialAutocomplete.tsx

@@ -1,219 +1,227 @@
-import React, { memo } from 'react';
-import { TextField, Checkbox } from '@mui/material';
-import { ThemeProvider } from '@mui/material/styles';
-import _isEmpty from 'lodash/isEmpty';
-import _indexOf from 'lodash/indexOf';
-import _filter from 'lodash/filter';
-import _intersection from 'lodash/intersection';
-import _uniqueId from 'lodash/uniqueId';
-import _get from 'lodash/get';
-import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
-import { Theme, ArrowSelect, CheckboxLabel } from './MaterialAutocomplete.styled';
-import isEqual from 'lodash/isEqual';
-
-export interface Items {
-  value: string | number;
-  label: string;
-  isDisabled?: boolean;
-  isSeries?: boolean;
-};
-
-interface IFilmOptionType {
-  inputValue?: string;
-  label?: string;
-  value?: string;
-  isDisabled?: boolean;
-}
-
-export interface IMaterialAutocompleteProps {
-  t?: (key: string, options?: object) => string;
-  className?: string;
-  cbd?: boolean;
-  sx?: object;
-  disabled?: boolean;
-  freeSolo?: boolean;
-  multiple?: boolean;
-  classNameIcon?: string;
-  type?: string;
-  unit?: string;
-  error?: boolean;
-  disableClearable?: boolean;
-  required?: boolean;
-  label: string;
-  value?: any;
-  size?: any;
-  icon?: string;
-  children?: JSX.Element | JSX.Element[];
-  onChange: (value: any, isSeries?: boolean) => void;
-  items: IFilmOptionType[];
-  selectClassName?: string;
-  disableIcon?: boolean;
-}
-
-const ITEM_HEIGHT = 36;
-const MOBILE_ITEM_HEIGHT = 48;
-const MENU_ITEMS = 9;
-
-const MaterialAutocomplete: React.FC<IMaterialAutocompleteProps> = ({
-  t,
-  value,
-  freeSolo,
-  disabled,
-  label,
-  onChange,
-  type,
-  error,
-  multiple,
-  disableClearable,
-  size,
-  unit,
-  className,
-  sx,
-  selectClassName,
-  required,
-  items,
-  disableIcon
-}: IMaterialAutocompleteProps) => {
-  const filter = createFilterOptions<IFilmOptionType>();
-  console.log('materialvalue', value);
-  return (
-    <ThemeProvider theme={Theme}>
-      <Autocomplete
-        freeSolo={freeSolo}
-        selectOnFocus
-        fullWidth
-        disableClearable={disableClearable}
-        className={className}
-        clearOnBlur
-        disabled={disabled}
-        disablePortal={true}
-        multiple={multiple}
-        handleHomeEndKeys
-        value={value}
-        error={error}
-        onChange={(e, newValue, reason: string, details?: { option: any }) => {
-          if (typeof newValue === 'string') {
-            onChange(newValue);
-          } else if (newValue && newValue.inputValue) {
-            onChange(newValue.inputValue);
-          } else { 
-            if (multiple) {
-              if (_indexOf(value, details.option) !== -1) {
-                onChange(_filter(newValue, (value) => details.option !== value));
-              } else {
-                onChange(newValue);
-              }
-            } else {
-              const getValue = _get(newValue, 'value', null);
-              const getSeries =  _get(details, 'option.isSeries', false);
-              onChange(getValue, getSeries);
-            }
-          }
-        }}
-        getOptionDisabled={(option) => option.isDisabled || option.label === 'default'}
-        filterOptions={(options, params) => {
-
-          const filtered = filter(options, params);
-  
-          const { inputValue } = params;
-          // Suggest the creation of a new value
-
-          const isExisting = options.some((option) => inputValue === option.label);
-          if (inputValue !== '' && !isExisting && freeSolo) {
-            filtered.push({
-              value: inputValue,
-              label: `${unit ? `${inputValue} ${unit}` : inputValue}`
-            });
-          }
-          if (!filtered.length) {
-            filtered.push({
-              value: 'No options',
-              label: 'No options',
-              isDisabled: true
-            });
-          }
-          return filtered;
-        }}
-        options={multiple ? items.map(option => option.label) : items}
-        ListboxProps={{
-          sx: {
-            maxHeight: {
-              xs: MOBILE_ITEM_HEIGHT * MENU_ITEMS,
-              sm: ITEM_HEIGHT * MENU_ITEMS
-            }
-          }
-        }}
-        forcePopupIcon
-        popupIcon={disableIcon ? '' : <ArrowSelect name='arrowSelect' customDimensions />}
-        isOptionEqualToValue={(option, value) => option.value === value}
-        renderOption={(props, option) => {
-          if (multiple) {
-            return (
-              <li {...props}>
-                <Checkbox checked={_indexOf(value, props.key) !== -1} />
-                <CheckboxLabel>{t(`cbd:${option}`)}</CheckboxLabel>
-              </li>
-            )
-          } else {
-            const isSeries = (option.isDisabled && option.label !== 'No options') || option.isSeries;
-            const label = isSeries ? option.label.toUpperCase() : option.label;
-            return (
-              <li
-                {...props}
-                key={_uniqueId(option.label)}
-                style={isSeries ? {
-                  backgroundColor: 'rgba(58, 53, 65, 0.08)',
-                  color: 'rgba(76, 78, 100, 0.87)',
-                  fontWeight: 600
-                } : null}
-              >
-                {label}
-              </li>
-            )
-          }
-        }}
-        renderInput={(params) => (
-          <TextField
-            {...params}
-            type={type}
-            className={selectClassName}
-            error={error}
-            disabled={disabled}
-            required={required}
-            size={size}
-            sx={sx}
-            label={label}
-          />
-        )}
-      >
-      </Autocomplete>
-    </ThemeProvider>
-  );
-};
-
-MaterialAutocomplete.defaultProps = {
-  className: '',
-  unit: '',
-  disableClearable: false,
-  freeSolo: true,
-  multiple: false,
-  items: [],
-  type: 'string',
-  classNameIcon: '',
-  value: null,
-  cbd: false,
-  size: 'small',
-  error: false,
-  required: false,
-  label: '',
-  onChange: () => { }
-};
-
-export default memo(MaterialAutocomplete, (prevProps: any, nextProps: any) => {
-  return prevProps.value === nextProps.value &&
-         prevProps.disabled === nextProps.disabled &&
-         prevProps.error === nextProps.error &&
-         prevProps.label === nextProps.label &&
-         isEqual(prevProps.items, nextProps.items) &&
-         (!_isEmpty(prevProps.items) ? prevProps.items[0].label === nextProps.items[0].label : false) // condition for radioButtons KW PS
-});
+import React, { memo } from 'react';
+import { TextField, Checkbox } from '@mui/material';
+import { ThemeProvider } from '@mui/material/styles';
+import _isEmpty from 'lodash/isEmpty';
+import _indexOf from 'lodash/indexOf';
+import _filter from 'lodash/filter';
+import _intersection from 'lodash/intersection';
+import _uniqueId from 'lodash/uniqueId';
+import _get from 'lodash/get';
+import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
+import { Theme, ArrowSelect, CheckboxLabel } from './MaterialAutocomplete.styled';
+import isEqual from 'lodash/isEqual';
+
+export interface Items {
+  value: string | number;
+  label: string;
+  isDisabled?: boolean;
+  isSeries?: boolean;
+};
+
+interface IFilmOptionType {
+  inputValue?: string;
+  label?: string;
+  value?: string;
+  isDisabled?: boolean;
+}
+
+export interface IMaterialAutocompleteProps {
+  t?: (key: string, options?: object) => string;
+  className?: string;
+  cbd?: boolean;
+  sx?: object;
+  disabled?: boolean;
+  freeSolo?: boolean;
+  multiple?: boolean;
+  classNameIcon?: string;
+  type?: string;
+  unit?: string;
+  error?: boolean;
+  disableClearable?: boolean;
+  required?: boolean;
+  label: string;
+  value?: any;
+  size?: any;
+  icon?: string;
+  children?: JSX.Element | JSX.Element[];
+  onChange: (value: any, isSeries?: boolean) => void;
+  items: IFilmOptionType[];
+  selectClassName?: string;
+  disableIcon?: boolean;
+  name?: string;
+  placeholder?: string;
+}
+
+const ITEM_HEIGHT = 36;
+const MOBILE_ITEM_HEIGHT = 48;
+const MENU_ITEMS = 9;
+
+const MaterialAutocomplete: React.FC<IMaterialAutocompleteProps> = ({
+  t,
+  value,
+  freeSolo,
+  disabled,
+  label,
+  onChange,
+  type,
+  error,
+  multiple,
+  disableClearable,
+  size,
+  unit,
+  className,
+  sx,
+  selectClassName,
+  required,
+  items,
+  disableIcon,
+  name,
+  placeholder
+}: IMaterialAutocompleteProps) => {
+  const filter = createFilterOptions<IFilmOptionType>();
+  console.log('materialvalue', value);
+  return (
+    <ThemeProvider theme={Theme}>
+      <Autocomplete
+        freeSolo={freeSolo}
+        selectOnFocus
+        fullWidth
+        disableClearable={disableClearable}
+        className={className}
+        clearOnBlur
+        disabled={disabled}
+        disablePortal={true}
+        multiple={multiple}
+        handleHomeEndKeys
+        value={value}
+        open={true}
+        name={name}
+        error={error}
+        onChange={(e, newValue, reason: string, details?: { option: any }) => {
+          if (typeof newValue === 'string') {
+            onChange(newValue);
+          } else if (newValue && newValue.inputValue) {
+            onChange(newValue.inputValue);
+          } else { 
+            if (multiple) {
+              if (_indexOf(value, details.option) !== -1) {
+                onChange(_filter(newValue, (value) => details.option !== value));
+              } else {
+                onChange(newValue);
+              }
+            } else {
+              const getValue = _get(newValue, 'value', null);
+              const getSeries =  _get(details, 'option.isSeries', false);
+              onChange(getValue, getSeries);
+            }
+          }
+        }}
+        getOptionDisabled={(option) => option.isDisabled || option.label === 'default'}
+        filterOptions={(options, params) => {
+
+          const filtered = filter(options, params);
+  
+          const { inputValue } = params;
+          // Suggest the creation of a new value
+
+          const isExisting = options.some((option) => inputValue === option.label);
+          if (inputValue !== '' && !isExisting && freeSolo) {
+            filtered.push({
+              value: inputValue,
+              label: `${unit ? `${inputValue} ${unit}` : inputValue}`
+            });
+          }
+          if (!filtered.length) {
+            filtered.push({
+              value: 'No options',
+              label: 'No options',
+              isDisabled: true
+            });
+          }
+          return filtered;
+        }}
+        options={multiple ? items.map(option => option.label) : items}
+        ListboxProps={{
+          sx: {
+            maxHeight: {
+              xs: MOBILE_ITEM_HEIGHT * MENU_ITEMS,
+              sm: ITEM_HEIGHT * MENU_ITEMS
+            }
+          }
+        }}
+        forcePopupIcon
+        popupIcon={disableIcon ? '' : <ArrowSelect name='arrowSelect' customDimensions />}
+        isOptionEqualToValue={(option, value) => option.value === value}
+        renderOption={(props, option) => {
+          if (multiple) {
+            return (
+              <li {...props}>
+                <Checkbox checked={_indexOf(value, props.key) !== -1} />
+                <CheckboxLabel>{t(`cbd:${option}`)}</CheckboxLabel>
+              </li>
+            )
+          } else {
+            const isSeries = (option.isDisabled && option.label !== 'No options') || option.isSeries;
+            const label = isSeries ? option.label.toUpperCase() : option.label;
+            return (
+              <li
+                {...props}
+                key={_uniqueId(option.label)}
+                style={isSeries ? {
+                  backgroundColor: 'rgba(58, 53, 65, 0.08)',
+                  color: 'rgba(76, 78, 100, 0.87)',
+                  fontWeight: 600
+                } : null}
+              >
+                {label}
+              </li>
+            )
+          }
+        }}
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            type={type}
+            className={selectClassName}
+            error={error}
+            disabled={disabled}
+            required={required}
+            size={size}
+            sx={sx}
+            label={label}
+            name={name}
+            placeholder={placeholder}
+          />
+        )}
+      >
+      </Autocomplete>
+    </ThemeProvider>
+  );
+};
+
+MaterialAutocomplete.defaultProps = {
+  className: '',
+  unit: '',
+  disableClearable: false,
+  freeSolo: true,
+  multiple: false,
+  items: [],
+  type: 'string',
+  classNameIcon: '',
+  value: null,
+  cbd: false,
+  size: 'small',
+  error: false,
+  required: false,
+  label: '',
+  onChange: () => { }
+};
+
+export default memo(MaterialAutocomplete, (prevProps: any, nextProps: any) => {
+  return prevProps.value === nextProps.value &&
+         prevProps.disabled === nextProps.disabled &&
+         prevProps.error === nextProps.error &&
+         prevProps.label === nextProps.label &&
+         isEqual(prevProps.items, nextProps.items) &&
+         (!_isEmpty(prevProps.items) ? prevProps.items[0].label === nextProps.items[0].label : false) // condition for radioButtons KW PS
+});

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

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

package/source/components/_common/MaterialDatePicker/MaterialDatePicker.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/MaterialDatePicker/MaterialDatePicker.styled.tsx

@@ -1,21 +1,21 @@
-import { createTheme } from '@mui/material/styles';
-import { isMobileOnly } from 'react-device-detect';
-export const Theme = createTheme({
-  components: {
-    MuiOutlinedInput: {
-      styleOverrides: {
-        input: ({ ownerState }) => ({
-          ...(ownerState.size === "smaller" && {
-            // tslint:disable-line
-            height: 28,
-            boxSizing: 'border-box'
-          }),
-          ...(ownerState.size === "custom" && {
-            height: isMobileOnly ? 56 : 48,
-            boxSizing: 'border-box'
-          }),
-        }),
-      },
-    },
-  },
-});
+import { createTheme } from '@mui/material/styles';
+import { isMobileOnly } from 'react-device-detect';
+export const Theme = createTheme({
+  components: {
+    MuiOutlinedInput: {
+      styleOverrides: {
+        input: ({ ownerState }) => ({
+          ...(ownerState.size === "smaller" && {
+            // tslint:disable-line
+            height: 28,
+            boxSizing: 'border-box'
+          }),
+          ...(ownerState.size === "custom" && {
+            height: isMobileOnly ? 56 : 48,
+            boxSizing: 'border-box'
+          }),
+        }),
+      },
+    },
+  },
+});