@pie-lib/config-ui 13.1.0-beta.9 → 14.0.0-next.36

package/src/layout/layout-contents.jsx

@@ -1,117 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
-import Tabs from '../tabs';
-
-const StyledContainer = styled('div')(() => ({
-  display: 'flex',
-  flexDirection: 'column',
-  position: 'relative',
-}));
-
-const StyledFlow = styled('div')(() => ({
-  display: 'flex',
-  justifyContent: 'space-between',
-}));
-
-const StyledContentContainer = styled('div')(({ theme }) => ({
-  padding: `${theme.spacing(2)} 0`,
-}));
-
-const StyledConfigContainer = styled('div')(() => ({
-  flex: '1',
-}));
-
-const StyledSettingsContainer = styled('div')(({ theme }) => ({
-  marginLeft: theme.spacing(2),
-}));
-
-class RawLayoutContents extends React.Component {
-  static propTypes = {
-    mode: PropTypes.oneOf(['tabbed', 'inline']),
-    secondary: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
-    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
-    dimensions: PropTypes.object,
-  };
-
-  getConfiguration = () => {
-    const { secondary } = this.props;
-    // in config-layout, secondary can be: <SettingsBox>{settings}</SettingsBox>, settings, null
-
-    return secondary?.props?.configuration || secondary?.props?.children?.props?.configuration || undefined;
-  };
-
-  // // eslint-disable-next-line no-unused-vars
-  // componentDidUpdate(prevProps, prevState, snapshot) {
-  //   const configuration = this.getConfiguration();
-  //   const { mode } = this.props;
-  //
-  //   // promptHolder class is used to wrap up inputs:
-  //   // we don't want inputs to fill the entire scrollable container,
-  //   // but instead we want inputs to fit in the first view,
-  //   // so we calculate the maximum space inputs need
-  //   try {
-  //     if (
-  //       configuration?.maxWidth &&
-  //       getComputedStyle(document.documentElement).getPropertyValue('--pie-prompt-holder-max-width') !==
-  //         configuration?.maxWidth
-  //     ) {
-  //       document.documentElement.style.setProperty(
-  //         '--pie-prompt-holder-max-width',
-  //         mode === 'inline' ? `calc(${configuration.maxWidth} - 340px)` : configuration.maxWidth,
-  //       );
-  //     }
-  //   } catch (e) {
-  //     console.log(e.toString());
-  //   }
-  // }
-
-  render() {
-    const { mode, secondary, children, dimensions } = this.props;
-    const { minHeight, minWidth, maxHeight, maxWidth } = dimensions || {};
-    const configuration = this.getConfiguration();
-
-    let hasSettingsPanel = Object.entries(configuration || {}).some(([, obj]) => !!obj?.settings);
-    // ebsr has configuration.partA and configuration.partB
-    // because we might have nested configuration for other item types as well, let's add this simple regex to check values for settings
-
-    if (!hasSettingsPanel) {
-      try {
-        hasSettingsPanel = JSON.stringify(configuration)?.match(/settings":true/)?.length;
-      } catch (e) {
-        // eslint-disable-next-line no-console
-        console.log(e.toString());
-      }
-    }
-
-    return (
-      <StyledContainer style={{ minHeight, minWidth, maxHeight, maxWidth }}>
-        {mode === 'inline' && (
-          <StyledFlow>
-            <StyledConfigContainer className="design-container">{children}</StyledConfigContainer>
-            {hasSettingsPanel && (
-              <StyledSettingsContainer className="settings-container">{secondary}</StyledSettingsContainer>
-            )}
-          </StyledFlow>
-        )}
-
-        {mode === 'tabbed' && hasSettingsPanel && (
-          <Tabs onChange={this.onTabsChange} contentClassName="content-container" indicatorColor="primary">
-            <StyledContentContainer title="Design" className="design-container">
-              {children}
-            </StyledContentContainer>
-            <StyledContentContainer title="Settings" className="settings-container">
-              {secondary}
-            </StyledContentContainer>
-          </Tabs>
-        )}
-
-        {mode === 'tabbed' && !hasSettingsPanel && (
-          <StyledContentContainer className="design-container">{children}</StyledContentContainer>
-        )}
-      </StyledContainer>
-    );
-  }
-}
-
-export default RawLayoutContents;

package/src/layout/settings-box.jsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
-
-const StyledSettingsBox = styled('div')(({ theme }) => ({
-  backgroundColor: theme.palette.background.paper,
-  border: `2px solid ${theme.palette.grey[200]}`,
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'flex-start',
-  minWidth: '275px',
-  maxWidth: '300px',
-  padding: '20px 4px 4px 20px',
-  zIndex: 99,
-}));
-
-export class SettingsBox extends React.Component {
-  static propTypes = {
-    className: PropTypes.string,
-    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-  };
-
-  static defaultProps = {};
-
-  render() {
-    const { className, children } = this.props;
-
-    return <StyledSettingsBox className={className}>{children}</StyledSettingsBox>;
-  }
-}
-
-export default SettingsBox;

package/src/mui-box/index.jsx

@@ -1,56 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
-import debug from 'debug';
-
-const log = debug('pie-elements:config-ui:mui-box');
-
-const StyledMuiBox = styled('div')(({ theme, focused }) => {
-  const light = theme.palette.mode === 'light';
-  const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
-
-  log(theme.palette.primary[theme.palette.mode || 'light']);
-
-  return {
-    paddingTop: theme.spacing(1),
-    paddingBottom: theme.spacing(1),
-    position: 'relative',
-    '&:before': {
-      left: 0,
-      right: 0,
-      bottom: 0,
-      height: '1px',
-      content: '""',
-      position: 'absolute',
-      transition: 'background-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
-      pointerEvents: 'none',
-      backgroundColor: bottomLineColor,
-    },
-    '&:hover:before': {
-      height: '2px',
-    },
-    '&:after': {
-      left: 0,
-      right: 0,
-      bottom: 0,
-      height: '2px',
-      content: '""',
-      position: 'absolute',
-      transform: focused ? 'scaleX(1)' : 'scaleX(0)',
-      transition: 'transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms',
-      pointerEvents: 'none',
-      backgroundColor: theme.palette.primary[theme.palette.mode], //'#304ffe'
-    },
-  };
-});
-
-const MuiBox = ({ children, focused }) => {
-  return <StyledMuiBox focused={focused}>{children}</StyledMuiBox>;
-};
-
-MuiBox.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-  focused: PropTypes.bool.isRequired,
-};
-
-export default MuiBox;

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

@@ -1,333 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import TextField from '@mui/material/TextField';
-import { styled } from '@mui/material/styles';
-import { isFinite } from 'lodash-es';
-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',
-  },
-  '& 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)) {
-    return 0;
-  }
-
-  if (!isFinite(min) && isFinite(max)) {
-    return max;
-  }
-
-  if (isFinite(min)) {
-    return min;
-  }
-};
-
-export class NumberTextFieldCustom extends React.Component {
-  static propTypes = {
-    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.any,
-    min: PropTypes.number,
-    max: PropTypes.number,
-    step: PropTypes.number,
-    label: PropTypes.string,
-    disableUnderline: PropTypes.bool,
-    textAlign: PropTypes.string,
-    variant: PropTypes.string,
-    type: PropTypes.string,
-  };
-
-  static defaultProps = {
-    step: 1,
-    customValues: [],
-    textAlign: 'center',
-    variant: 'standard',
-    onlyIntegersAllowed: false,
-  };
-
-  constructor(props) {
-    super(props);
-
-    const { value, currentIndex } = this.normalizeValueAndIndex(props.customValues, props.value);
-
-    this.state = {
-      value,
-      currentIndex,
-    };
-
-    if (value !== props.value) {
-      this.props.onChange({}, value);
-    }
-
-    this.onChange = this.onChange.bind(this);
-  }
-
-  UNSAFE_componentWillReceiveProps(props) {
-    const { value, currentIndex } = this.normalizeValueAndIndex(props.customValues, props.value, props.min, props.max);
-
-    this.setState({ value, currentIndex });
-  }
-
-  clamp(value, min = this.props.min, max = this.props.max) {
-    const { customValues } = this.props;
-
-    if ((customValues || []).length > 0) {
-      return value;
-    }
-
-    if (!isFinite(value)) {
-      return fallbackNumber(min, max);
-    }
-
-    if (isFinite(max)) {
-      value = Math.min(value, max);
-    }
-
-    if (isFinite(min)) {
-      value = Math.max(value, min);
-    }
-
-    return 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 =
-        type === 'text' ? this.getClosestFractionValue(customValues, value) : this.getClosestValue(customValues, value);
-
-      return { value: closestValue.value, currentIndex: closestValue.index };
-    }
-
-    return { value, currentIndex };
-  };
-
-  getClosestValue = (customValues, number) =>
-    customValues.reduce(
-      (closest, value, index) =>
-        Math.abs(value - number) < Math.abs(closest.value - number) ? { value, index } : closest,
-      { value: customValues[0], index: 0 },
-    );
-
-  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 },
-    );
-
-  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);
-  };
-
-  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,
-      },
-      () => {
-        if (shouldUpdate) {
-          onChange(event, number);
-        }
-      },
-    );
-  }
-
-  render() {
-    const {
-      className,
-      label,
-      disabled,
-      error,
-      min,
-      max,
-      customValues,
-      inputClassName,
-      disableUnderline,
-      helperText,
-      variant,
-      textAlign,
-      type = 'number',
-    } = this.props;
-    const { value } = this.state;
-    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 (
-      <StyledTextField
-        variant={variant}
-        inputRef={(ref) => (this.inputRef = ref)}
-        disabled={disabled}
-        label={label}
-        value={value}
-        error={error}
-        helperText={helperText}
-        onChange={this.onChange}
-        onBlur={this.onBlur}
-        onKeyPress={(e) => {
-          // once the Enter key is pressed, we force input blur
-          if (e.key === 'Enter' && this.inputRef) {
-            this.inputRef.blur();
-          }
-        }}
-        onKeyDown={(e) => {
-          if (e.key === 'ArrowUp') {
-            this.changeValue(e);
-          }
-
-          if (e.key === 'ArrowDown') {
-            this.changeValue(e, -1);
-          }
-        }}
-        title={''}
-        type={type}
-        className={names}
-        InputProps={{
-          className: inputClassName,
-          disableUnderline: disableUnderline,
-          startAdornment: (
-            <InputAdornment position="start">
-              <StyledIconButton
-                disabled={disabled ? disabled : disabledStart}
-                onClick={(e) => this.changeValue(e, -1, true)}
-                size="large"
-              >
-                <Remove fontSize="small" />
-              </StyledIconButton>
-            </InputAdornment>
-          ),
-          endAdornment: (
-            <InputAdornment position="end">
-              <StyledIconButton
-                disabled={disabled ? disabled : disabledEnd}
-                onClick={(e) => this.changeValue(e, 1, true)}
-                size="large"
-              >
-                <Add fontSize="small" />
-              </StyledIconButton>
-            </InputAdornment>
-          ),
-        }}
-        inputProps={{
-          style: { textAlign },
-          min,
-          max,
-        }}
-      />
-    );
-  }
-}
-
-export default NumberTextFieldCustom;