@pie-lib/config-ui 12.0.0-beta.4 → 12.0.0-next.0

package/src/number-text-field-custom.jsx

@@ -1,32 +1,31 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import TextField from '@material-ui/core/TextField';
-import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
+import TextField from '@mui/material/TextField';
+import { styled } from '@mui/material/styles';
 import isFinite from 'lodash/isFinite';
-import IconButton from '@material-ui/core/IconButton';
-import InputAdornment from '@material-ui/core/InputAdornment';
-import Remove from '@material-ui/icons/Remove';
-import Add from '@material-ui/icons/Add';
-
-const styles = theme => ({
-  input: {
-    '& input[type=number]': {
-      '-moz-appearance': 'textfield'
-    },
-    '& input[type=number]::-webkit-outer-spin-button': {
-      '-webkit-appearance': 'none',
-      margin: 0
-    },
-    '& input[type=number]::-webkit-inner-spin-button': {
-      '-webkit-appearance': 'none',
-      margin: 0
-    }
+import IconButton from '@mui/material/IconButton';
+import InputAdornment from '@mui/material/InputAdornment';
+import Remove from '@mui/icons-material/Remove';
+import Add from '@mui/icons-material/Add';
+import * as math from 'mathjs';
+
+const StyledTextField = styled(TextField)(() => ({
+  '& input[type=number]': {
+    MozAppearance: 'textfield',
   },
-  iconButton: {
-    padding: '2px'
-  }
-});
+  '& input[type=number]::-webkit-outer-spin-button': {
+    WebkitAppearance: 'none',
+    margin: 0,
+  },
+  '& input[type=number]::-webkit-inner-spin-button': {
+    WebkitAppearance: 'none',
+    margin: 0,
+  },
+}));
+
+const StyledIconButton = styled(IconButton)(() => ({
+  padding: '2px',
+}));
 
 const fallbackNumber = (min, max) => {
   if (!isFinite(min) && !isFinite(max)) {
@@ -44,21 +43,23 @@ const fallbackNumber = (min, max) => {
 
 export class NumberTextFieldCustom extends React.Component {
   static propTypes = {
-    classes: PropTypes.object.isRequired,
     className: PropTypes.string,
     customValues: PropTypes.array,
     disabled: PropTypes.bool,
     error: PropTypes.bool,
     inputClassName: PropTypes.string,
+    helperText: PropTypes.string,
     onChange: PropTypes.func.isRequired,
     onlyIntegersAllowed: PropTypes.bool,
-    value: PropTypes.number,
+    value: PropTypes.any,
     min: PropTypes.number,
     max: PropTypes.number,
     step: PropTypes.number,
     label: PropTypes.string,
     disableUnderline: PropTypes.bool,
-    variant: PropTypes.string
+    textAlign: PropTypes.string,
+    variant: PropTypes.string,
+    type: PropTypes.string,
   };
 
   static defaultProps = {
@@ -66,7 +67,7 @@ export class NumberTextFieldCustom extends React.Component {
     customValues: [],
     textAlign: 'center',
     variant: 'standard',
-    onlyIntegersAllowed: false
+    onlyIntegersAllowed: false,
   };
 
   constructor(props) {
@@ -76,7 +77,7 @@ export class NumberTextFieldCustom extends React.Component {
 
     this.state = {
       value,
-      currentIndex
+      currentIndex,
     };
 
     if (value !== props.value) {
@@ -87,13 +88,13 @@ export class NumberTextFieldCustom extends React.Component {
   }
 
   UNSAFE_componentWillReceiveProps(props) {
-    const { value, currentIndex } = this.normalizeValueAndIndex(props.customValues, props.value);
+    const { value, currentIndex } = this.normalizeValueAndIndex(props.customValues, props.value, props.min, props.max);
 
     this.setState({ value, currentIndex });
   }
 
-  clamp(value) {
-    const { min, max, customValues } = this.props;
+  clamp(value, min = this.props.min, max = this.props.max) {
+    const { customValues } = this.props;
 
     if ((customValues || []).length > 0) {
       return value;
@@ -114,12 +115,14 @@ export class NumberTextFieldCustom extends React.Component {
     return value;
   }
 
-  normalizeValueAndIndex = (customValues, number) => {
-    const value = this.clamp(number);
-    const currentIndex = (customValues || []).findIndex(val => val === value);
+  normalizeValueAndIndex = (customValues, number, min, max) => {
+    const { type } = this.props;
+    const value = this.clamp(number, min, max);
+    const currentIndex = (customValues || []).findIndex((val) => val === value);
 
     if ((customValues || []).length > 0 && currentIndex === -1) {
-      const closestValue = this.getClosestValue(customValues, value);
+      const closestValue =
+        type === 'text' ? this.getClosestFractionValue(customValues, value) : this.getClosestValue(customValues, value);
 
       return { value: closestValue.value, currentIndex: closestValue.index };
     }
@@ -131,88 +134,141 @@ export class NumberTextFieldCustom extends React.Component {
     customValues.reduce(
       (closest, value, index) =>
         Math.abs(value - number) < Math.abs(closest.value - number) ? { value, index } : closest,
-      { value: customValues[0], index: 0 }
+      { value: customValues[0], index: 0 },
     );
 
-  onBlur = event => {
-    const { customValues, onlyIntegersAllowed } = this.props;
-    const { value } = event.target;
-    const rawNumber = onlyIntegersAllowed ? parseInt(value) : parseFloat(value);
+  getClosestFractionValue = (customValues, number) =>
+    customValues.reduce(
+      (closest, value, index) =>
+        Math.abs(math.number(math.fraction(value)) - math.number(math.fraction(number))) <
+        Math.abs(math.number(math.fraction(closest.value)) - math.number(math.fraction(number)))
+          ? { value, index }
+          : closest,
+      { value: customValues[0], index: 0 },
+    );
 
-    const { value: number, currentIndex } = this.normalizeValueAndIndex(customValues, rawNumber);
+  getValidFraction = (value) => {
+    if (this.isPositiveInteger(value.trim())) {
+      return value.trim();
+    }
+    if (value.trim() === '' || value.trim().split('/').length !== 2) {
+      return false;
+    }
+    let [numerator, denominator] = value.trim().split('/');
+    if (isNaN(numerator) || isNaN(denominator)) {
+      return false;
+    }
+    numerator = parseFloat(numerator);
+    denominator = parseFloat(denominator);
+    if (!Number.isInteger(numerator) || !Number.isInteger(denominator)) {
+      return false;
+    }
+    if (numerator < 0 || denominator < 1) {
+      return false;
+    }
+    return numerator + '/' + denominator;
+  };
+
+  isPositiveInteger = (n) => {
+    return n >>> 0 === parseFloat(n);
+  };
 
-    if (number !== this.state.value) {
-      this.setState(
-        {
-          value: number.toString(),
-          currentIndex
-        },
-        () => this.props.onChange(event, number)
-      );
+  onBlur = (event) => {
+    const { customValues, onlyIntegersAllowed, type } = this.props;
+    let { value } = event.target;
+    if (type === 'text') {
+      let tempValue = this.getValidFraction(value);
+      if (tempValue) {
+        value = tempValue;
+      } else {
+        value = this.props.value;
+      }
+    }
+    let rawNumber = onlyIntegersAllowed ? Math.round(parseFloat(value)) : parseFloat(value);
+    if (type === 'text') {
+      rawNumber = value.trim();
     }
+    const { value: number, currentIndex } = this.normalizeValueAndIndex(customValues, rawNumber);
+    this.setState(
+      {
+        value: number.toString(),
+        currentIndex,
+      },
+      () => this.props.onChange(event, number),
+    );
   };
 
   onChange(event) {
+    const { type } = this.props;
     const { value } = event.target;
-
+    if (type !== 'text' && typeof value === 'string' && value.trim() === '') {
+      return;
+    }
     this.setState({ value });
   }
 
   changeValue(event, sign = 1, shouldUpdate = false) {
     event.preventDefault();
-
     const { customValues, step, onlyIntegersAllowed, onChange } = this.props;
     const { currentIndex, value } = this.state;
     const updatedIndex = currentIndex + sign * 1;
     let number;
-
     if (customValues.length > 0) {
       if (updatedIndex < 0 || updatedIndex >= customValues.length) {
         return;
       }
-
       number = customValues[updatedIndex];
     } else {
       const rawNumber = onlyIntegersAllowed ? parseInt(value) : parseFloat(value);
       const updatedValue = (rawNumber * 10000 + step * sign * 10000) / 10000;
       number = this.clamp(updatedValue);
     }
-
     this.setState(
       {
         value: number.toString(),
-        currentIndex: updatedIndex
+        currentIndex: updatedIndex,
       },
       () => {
         if (shouldUpdate) {
           onChange(event, number);
         }
-      }
+      },
     );
   }
 
   render() {
     const {
       className,
-      classes,
       label,
       disabled,
       error,
       min,
       max,
+      customValues,
       inputClassName,
       disableUnderline,
       helperText,
       variant,
-      textAlign
+      textAlign,
+      type = 'number',
     } = this.props;
     const { value } = this.state;
-    const names = classNames(className, classes.input);
+    const names = className;
+    //Logic to disable the increment and decrement buttons
+    let disabledStart = false;
+    let disabledEnd = false;
+    if (customValues.length > 0) {
+      disabledStart = value === customValues[0];
+      disabledEnd = value === customValues[customValues.length - 1];
+    } else if (isFinite(min) && isFinite(max)) {
+      disabledStart = value === min;
+      disabledEnd = value === max;
+    }
 
     return (
-      <TextField
+      <StyledTextField
         variant={variant}
-        inputRef={ref => (this.inputRef = ref)}
+        inputRef={(ref) => (this.inputRef = ref)}
         disabled={disabled}
         label={label}
         value={value}
@@ -220,13 +276,13 @@ export class NumberTextFieldCustom extends React.Component {
         helperText={helperText}
         onChange={this.onChange}
         onBlur={this.onBlur}
-        onKeyPress={e => {
+        onKeyPress={(e) => {
           // once the Enter key is pressed, we force input blur
           if (e.key === 'Enter' && this.inputRef) {
             this.inputRef.blur();
           }
         }}
-        onKeyDown={e => {
+        onKeyDown={(e) => {
           if (e.key === 'ArrowUp') {
             this.changeValue(e);
           }
@@ -235,42 +291,41 @@ export class NumberTextFieldCustom extends React.Component {
             this.changeValue(e, -1);
           }
         }}
-        type="number"
+        title={''}
+        type={type}
         className={names}
         InputProps={{
           className: inputClassName,
           disableUnderline: disableUnderline,
           startAdornment: (
             <InputAdornment position="start">
-              <IconButton
-                className={classes.iconButton}
-                disabled={disabled}
-                onClick={e => this.changeValue(e, -1, true)}
-              >
+              <StyledIconButton
+                disabled={disabled ? disabled : disabledStart}
+                onClick={(e) => this.changeValue(e, -1, true)}
+                size="large">
                 <Remove fontSize="small" />
-              </IconButton>
+              </StyledIconButton>
             </InputAdornment>
           ),
           endAdornment: (
             <InputAdornment position="end">
-              <IconButton
-                className={classes.iconButton}
-                disabled={disabled}
-                onClick={e => this.changeValue(e, 1, true)}
-              >
+              <StyledIconButton
+                disabled={disabled ? disabled : disabledEnd}
+                onClick={(e) => this.changeValue(e, 1, true)}
+                size="large">
                 <Add fontSize="small" />
-              </IconButton>
+              </StyledIconButton>
             </InputAdornment>
-          )
+          ),
         }}
         inputProps={{
           style: { textAlign },
           min,
-          max
+          max,
         }}
       />
     );
   }
 }
 
-export default withStyles(styles)(NumberTextFieldCustom);
+export default NumberTextFieldCustom;

package/src/number-text-field.jsx

@@ -1,16 +1,39 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import TextField from '@material-ui/core/TextField';
-import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
+import TextField from '@mui/material/TextField';
+import { styled } from '@mui/material/styles';
 import debug from 'debug';
 import isFinite from 'lodash/isFinite';
-import InputAdornment from '@material-ui/core/InputAdornment';
+import InputAdornment from '@mui/material/InputAdornment';
 const log = debug('@pie-lib:config-ui:number-text-field');
 
-const styles = theme => ({
-  root: { marginRight: theme.spacing.unit }
-});
+const StyledTextField = styled(TextField)(({ theme }) => ({
+  marginRight: theme.spacing(1),
+  '& .MuiInputLabel-root': {
+    width: 'auto',
+    minWidth: 'max-content',
+    maxWidth: 'none',
+    whiteSpace: 'nowrap',
+    overflow: 'visible',
+    transform: 'translate(0, 8px) scale(0.75)',
+    transformOrigin: 'top left',
+    position: 'relative',
+  },
+  '& .MuiInputBase-root, & .MuiInput-root, & .MuiFilledInput-root, & .MuiOutlinedInput-root': {
+    height: 'auto',
+    minHeight: 'auto',
+  },
+  '& .MuiInputBase-input': {
+    height: 'auto',
+    minHeight: 'auto',
+    padding: '8px 12px',
+  },
+  '& .MuiInput-root, & .MuiFilledInput-root': {
+    '&:before, &:after, &:hover:not(.Mui-disabled):before': {
+      display: 'none',
+    },
+  },
+}));
 
 const fallbackNumber = (min, max) => {
   if (!isFinite(min) && !isFinite(max)) {
@@ -28,7 +51,6 @@ const fallbackNumber = (min, max) => {
 export class NumberTextField extends React.Component {
   static propTypes = {
     disabled: PropTypes.bool,
-    classes: PropTypes.object.isRequired,
     className: PropTypes.string,
     inputClassName: PropTypes.string,
     onChange: PropTypes.func.isRequired,
@@ -39,11 +61,11 @@ export class NumberTextField extends React.Component {
     suffix: PropTypes.string,
     showErrorWhenOutsideRange: PropTypes.bool,
     disableUnderline: PropTypes.bool,
-    variant: PropTypes.string
+    variant: PropTypes.string,
   };
 
   static defaultProps = {
-    showErrorWhenOutsideRange: false
+    showErrorWhenOutsideRange: false,
   };
 
   constructor(props) {
@@ -52,7 +74,7 @@ export class NumberTextField extends React.Component {
     const value = this.clamp(props.value);
 
     this.state = {
-      value
+      value,
     };
 
     if (value !== props.value) {
@@ -63,23 +85,24 @@ export class NumberTextField extends React.Component {
   }
 
   UNSAFE_componentWillReceiveProps(props) {
-    const value = this.clamp(props.value);
+    const value = this.clamp(props.value, props.min, props.max);
+
     this.setState({ value });
   }
 
-  clamp(value) {
+  clamp(value, min = this.props.min, max = this.props.max) {
     if (!isFinite(value)) {
-      return fallbackNumber(this.props.min, this.props.max);
+      return fallbackNumber(min, max);
     }
 
-    const { min, max } = this.props;
-
     if (isFinite(max)) {
       value = Math.min(value, max);
     }
+
     if (isFinite(min)) {
       value = Math.max(value, min);
     }
+
     return value;
   }
 
@@ -87,7 +110,7 @@ export class NumberTextField extends React.Component {
    * on Blur (this can be triggered by pressing Enter, see below)
    * we check the entered value and reset it if needed
    */
-  onBlur = event => {
+  onBlur = (event) => {
     const value = event.target.value;
 
     const rawNumber = parseFloat(value);
@@ -140,7 +163,6 @@ export class NumberTextField extends React.Component {
   render() {
     const {
       className,
-      classes,
       label,
       disabled,
       suffix,
@@ -149,43 +171,43 @@ export class NumberTextField extends React.Component {
       inputClassName,
       disableUnderline,
       showErrorWhenOutsideRange,
-      variant
+      variant,
     } = this.props;
-    const names = classNames(classes.root, className);
 
     const error = showErrorWhenOutsideRange && this.getError();
     return (
-      <TextField
-        variant={variant || 'standard'}
-        inputRef={ref => {
+      <StyledTextField
+        variant={disableUnderline ? 'filled' : (variant || 'standard')}
+        inputRef={(ref) => {
           this.inputRef = ref;
         }}
         disabled={disabled}
         label={label}
+        InputLabelProps={{
+          shrink: true,
+        }}
         value={this.state.value}
         error={!!error}
         helperText={error}
         onChange={this.onChange}
         onBlur={this.onBlur}
-        onKeyPress={e => {
+        onKeyDown={(e) => {
           // once the Enter key is pressed, we force input blur
           if (e.key === 'Enter' && this.inputRef) {
             this.inputRef.blur();
           }
         }}
         type="number"
-        className={names}
-        InputLabelProps={{
-          shrink: true
-        }}
-        InputProps={{
-          endAdornment: suffix && <InputAdornment position="end">{suffix}</InputAdornment>,
-          className: inputClassName,
-          disableUnderline: disableUnderline
-        }}
-        inputProps={{
-          min,
-          max
+        className={className}
+        slotProps={{
+          input: {
+            endAdornment: suffix && <InputAdornment position="end">{suffix}</InputAdornment>,
+            className: inputClassName,
+            inputProps: {
+              min,
+              max,
+            },
+          },
         }}
         margin="normal"
       />
@@ -193,4 +215,4 @@ export class NumberTextField extends React.Component {
   }
 }
 
-export default withStyles(styles)(NumberTextField);
+export default NumberTextField;

package/src/radio-with-label.jsx

@@ -1,18 +1,34 @@
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Radio from '@material-ui/core/Radio';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Radio from '@mui/material/Radio';
 import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import { color } from '@pie-lib/render-ui';
 
-export default withStyles({
-  label: {
+const StyledFormControlLabel = styled(FormControlLabel)(() => ({
+  '& .MuiFormControlLabel-label': {
     left: '-5px',
-    position: 'relative'
-  }
-})(({ label, value, checked, onChange, classes }) => (
-  <FormControlLabel
+    position: 'relative',
+  },
+}));
+
+const StyledRadio = styled(Radio)(() => ({
+  color: `${color.tertiary()} !important`,
+}));
+
+const RadioWithLabel = ({ label, value, checked, onChange }) => (
+  <StyledFormControlLabel
     value={value}
-    classes={classes}
-    control={<Radio checked={checked} onChange={onChange} />}
+    control={<StyledRadio checked={checked} onChange={onChange} />}
     label={label}
   />
-));
+);
+
+RadioWithLabel.propTypes = {
+  label: PropTypes.string,
+  value: PropTypes.string,
+  checked: PropTypes.bool,
+  onChange: PropTypes.func,
+};
+
+export default RadioWithLabel;

package/src/settings/display-size.jsx

@@ -1,22 +1,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Typography from '@material-ui/core/Typography';
-import { withStyles } from '@material-ui/core/styles';
+import Typography from '@mui/material/Typography';
+import { styled } from '@mui/material/styles';
 import NumberTextField from '../number-text-field';
 
-const DisplaySize = withStyles(theme => ({
-  displaySize: {
-    display: 'flex',
-    paddingTop: theme.spacing.unit
-  }
-}))(({ size, label, classes, onChange }) => {
+const StyledDisplaySize = styled('div')(({ theme }) => ({
+  display: 'flex',
+  paddingTop: theme.spacing(1),
+}));
+
+const DisplaySize = ({ size, label, onChange }) => {
   const updateSize = (key, v) => {
     onChange({ ...size, [key]: v });
   };
+  
   return (
     <div>
       <Typography>{label}</Typography>
-      <div className={classes.displaySize}>
+      <StyledDisplaySize>
         <NumberTextField
           label="Width"
           type="number"
@@ -35,18 +36,18 @@ const DisplaySize = withStyles(theme => ({
           value={size.height}
           onChange={(e, v) => updateSize('height', v)}
         />
-      </div>
+      </StyledDisplaySize>
     </div>
   );
-});
+};
 
 DisplaySize.propTypes = {
   size: PropTypes.shape({
     width: PropTypes.number.isRequired,
-    height: PropTypes.number.isRequired
+    height: PropTypes.number.isRequired,
   }).isRequired,
   label: PropTypes.string.isRequired,
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
 };
 
 export default DisplaySize;