@pie-element/complex-rubric 3.8.4-next.9 → 5.0.1-esmbeta.0

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/config-ui/src/number-text-field-custom.jsx

@@ -0,0 +1,337 @@
+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 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';
+import * as math from 'mathjs';
+
+const styles = () => ({
+  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,
+    },
+  },
+  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 = {
+    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.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,
+      classes,
+      label,
+      disabled,
+      error,
+      min,
+      max,
+      customValues,
+      inputClassName,
+      disableUnderline,
+      helperText,
+      variant,
+      textAlign,
+      type = 'number',
+    } = this.props;
+    const { value } = this.state;
+    const names = classNames(className, classes.input);
+    //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
+        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">
+              <IconButton
+                className={classes.iconButton}
+                disabled={disabled ? disabled : disabledStart}
+                onClick={(e) => this.changeValue(e, -1, true)}
+              >
+                <Remove fontSize="small" />
+              </IconButton>
+            </InputAdornment>
+          ),
+          endAdornment: (
+            <InputAdornment position="end">
+              <IconButton
+                className={classes.iconButton}
+                disabled={disabled ? disabled : disabledEnd}
+                onClick={(e) => this.changeValue(e, 1, true)}
+              >
+                <Add fontSize="small" />
+              </IconButton>
+            </InputAdornment>
+          ),
+        }}
+        inputProps={{
+          style: { textAlign },
+          min,
+          max,
+        }}
+      />
+    );
+  }
+}
+
+export default withStyles(styles)(NumberTextFieldCustom);

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/config-ui/src/number-text-field.jsx

@@ -0,0 +1,202 @@
+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 debug from 'debug';
+import isFinite from 'lodash/isFinite';
+import InputAdornment from '@material-ui/core/InputAdornment';
+const log = debug('@pie-lib:config-ui:number-text-field');
+
+const styles = (theme) => ({
+  root: {
+    marginRight: theme.spacing.unit,
+    '& label': {
+      width: 'max-content',
+    },
+  },
+});
+
+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 NumberTextField extends React.Component {
+  static propTypes = {
+    disabled: PropTypes.bool,
+    classes: PropTypes.object.isRequired,
+    className: PropTypes.string,
+    inputClassName: PropTypes.string,
+    onChange: PropTypes.func.isRequired,
+    value: PropTypes.number,
+    min: PropTypes.number,
+    max: PropTypes.number,
+    label: PropTypes.string,
+    suffix: PropTypes.string,
+    showErrorWhenOutsideRange: PropTypes.bool,
+    disableUnderline: PropTypes.bool,
+    variant: PropTypes.string,
+  };
+
+  static defaultProps = {
+    showErrorWhenOutsideRange: false,
+  };
+
+  constructor(props) {
+    super(props);
+
+    const value = this.clamp(props.value);
+
+    this.state = {
+      value,
+    };
+
+    if (value !== props.value) {
+      this.props.onChange({}, value);
+    }
+
+    this.onChange = this.onChange.bind(this);
+  }
+
+  UNSAFE_componentWillReceiveProps(props) {
+    const value = this.clamp(props.value, props.min, props.max);
+
+    this.setState({ value });
+  }
+
+  clamp(value, min = this.props.min, max = this.props.max) {
+    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;
+  }
+
+  /**
+   * on Blur (this can be triggered by pressing Enter, see below)
+   * we check the entered value and reset it if needed
+   */
+  onBlur = (event) => {
+    const value = event.target.value;
+
+    const rawNumber = parseFloat(value);
+    log('rawNumber: ', rawNumber);
+
+    const number = this.clamp(rawNumber);
+    log('number: ', number);
+
+    if (number !== this.state.value) {
+      log('trigger update...');
+      this.setState({ value: number.toString() }, () => {
+        this.props.onChange(event, number);
+      });
+    }
+  };
+
+  onChange(event) {
+    const value = event.target.value;
+    this.setState({ value });
+  }
+
+  errorMessage = () => {
+    const { min, max } = this.props;
+    if (min && max) {
+      return `The value must be between ${min} and ${max}`;
+    }
+    if (min) {
+      return `The value must be greater than ${min}`;
+    }
+    if (max) {
+      return `The value must be less than ${max}`;
+    }
+  };
+
+  /**
+   * if the input has to show error when outside range,
+   * and the entered value is not matching the requirements
+   * we display error message
+   */
+
+  getError = () => {
+    const { value } = this.state;
+    const float = parseFloat(value);
+    const clamped = this.clamp(float);
+    if (clamped !== float) {
+      return this.errorMessage();
+    }
+  };
+
+  render() {
+    const {
+      className,
+      classes,
+      label,
+      disabled,
+      suffix,
+      min,
+      max,
+      inputClassName,
+      disableUnderline,
+      showErrorWhenOutsideRange,
+      variant,
+    } = this.props;
+    const names = classNames(classes.root, className);
+
+    const error = showErrorWhenOutsideRange && this.getError();
+    return (
+      <TextField
+        variant={variant || 'standard'}
+        inputRef={(ref) => {
+          this.inputRef = ref;
+        }}
+        disabled={disabled}
+        label={label}
+        value={this.state.value}
+        error={!!error}
+        helperText={error}
+        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();
+          }
+        }}
+        type="number"
+        className={names}
+        InputLabelProps={{
+          shrink: true,
+        }}
+        InputProps={{
+          endAdornment: suffix && <InputAdornment position="end">{suffix}</InputAdornment>,
+          className: inputClassName,
+          disableUnderline: disableUnderline,
+        }}
+        inputProps={{
+          min,
+          max,
+        }}
+        margin="normal"
+      />
+    );
+  }
+}
+
+export default withStyles(styles)(NumberTextField);

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/config-ui/src/radio-with-label.jsx

@@ -0,0 +1,22 @@
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Radio from '@material-ui/core/Radio';
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import { color } from '@pie-lib/render-ui';
+
+export default withStyles({
+  label: {
+    left: '-5px',
+    position: 'relative',
+  },
+  customColor: {
+    color: `${color.tertiary()} !important`,
+  },
+})(({ label, value, checked, onChange, classes }) => (
+  <FormControlLabel
+    value={value}
+    classes={{ label: classes.label }}
+    control={<Radio className={classes.customColor} checked={checked} onChange={onChange} />}
+    label={label}
+  />
+));

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/config-ui/src/settings/display-size.jsx

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

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/config-ui/src/settings/index.js

@@ -0,0 +1,83 @@
+import Panel from './panel';
+
+export { Panel };
+
+export const textField = (label, isConfigProperty = true) => ({
+  label,
+  type: 'textField',
+  isConfigProperty,
+});
+
+export const toggle = (label, isConfigProperty = false, disabled = false) => ({
+  type: 'toggle',
+  label,
+  isConfigProperty,
+  disabled,
+});
+
+const toChoice = (opt) => {
+  if (typeof opt === 'string') {
+    return { label: opt, value: opt };
+  } else {
+    return opt;
+  }
+};
+
+export const radio = function() {
+  const args = Array.prototype.slice.call(arguments);
+  const [label, choices, isConfigProperty = false] = args;
+
+  return {
+    type: 'radio',
+    label,
+    choices: choices && choices.map((o) => toChoice(o)),
+    isConfigProperty,
+  };
+};
+
+export const dropdown = (label, choices, isConfigProperty = false) => {
+  return {
+    type: 'dropdown',
+    label,
+    choices,
+    isConfigProperty,
+  };
+};
+
+export const numberField = (label, options, isConfigProperty = false) => ({
+  ...options,
+  label,
+  type: 'numberField',
+  isConfigProperty,
+});
+
+export const numberFields = (label, fields, isConfigProperty = false) => {
+  Object.keys(fields).map((key) => {
+    fields[key] = numberField(fields[key].label, fields[key], isConfigProperty);
+  });
+
+  return {
+    type: 'numberFields',
+    label,
+    fields,
+  };
+};
+
+export const checkbox = (label, settings, isConfigProperty = false) => ({
+  ...settings,
+  label,
+  type: 'checkbox',
+  isConfigProperty,
+});
+
+export const checkboxes = (label, choices, isConfigProperty = false) => {
+  Object.keys(choices).map((key) => {
+    choices[key] = checkbox(choices[key].label, choices[key], isConfigProperty);
+  });
+
+  return {
+    type: 'checkboxes',
+    label,
+    choices,
+  };
+};