@pie-lib/graphing 2.34.2-next.0 → 2.36.0-mui-update.0

package/src/grid-setup.jsx

@@ -1,49 +1,114 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { color, InputContainer } from '@pie-lib/render-ui';
-import { withStyles } from '@material-ui/core/styles';
-import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
-import Typography from '@material-ui/core/Typography';
-import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
-import ExpansionPanel from '@material-ui/core/ExpansionPanel';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import {
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+  Typography,
+} from '@mui/material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { NumberTextFieldCustom, Toggle } from '@pie-lib/config-ui';
 import EditableHTML from '@pie-lib/editable-html';
+import { styled } from '@mui/material/styles';
+
+const Wrapper = styled('div')(({ theme }) => ({
+  width: '450px',
+}));
+
+const Content = styled('div')(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%',
+}));
+
+const ColumnView = styled('div')(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+}));
+
+const RowView = styled('div')(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'space-around',
+  alignItems: 'center',
+}));
+
+const TextFieldSmall = styled('div')(({ theme }) => ({
+  width: '130px',
+  margin: `${theme.spacing(1)} ${theme.spacing(0.5)}`,
+}));
+
+const TextFieldMedium = styled('div')(({ theme }) => ({
+  width: '160px',
+  margin: `${theme.spacing(1)} ${theme.spacing(0.5)}`,
+  '& .MuiFormControl-root': {
+    width: '100%',
+  },
+}));
+
+const TextFieldLarge = styled('div')(({ theme }) => ({
+  width: '230px',
+  margin: `${theme.spacing(1)} ${theme.spacing(0.5)}`,
+  '& .MuiFormControl-root': {
+    width: '100%',
+  },
+}));
+
+const ItalicText = styled(Typography)(({ theme }) => ({
+  fontStyle: 'italic',
+  margin: `${theme.spacing(1)} 0`,
+}));
+
+const Dimensions = styled('div')(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+}));
+
+const DisabledText = styled(Typography)(({ theme }) => ({
+  color: color.disabled(),
+}));
+
+const AxisLabel = styled('div')(({ theme }) => ({
+  paddingTop: theme.spacing(2),
+}));
 
 const GridConfig = (props) => {
-  const { classes, disabled, displayedFields, labelValue, labelValues, gridValue, gridValues, onChange } = props;
+  const { disabled, displayedFields, labelValue, labelValues, gridValue, gridValues, onChange } = props;
   const { labelStep = {}, step = {} } = displayedFields;
 
   return (
-    <div className={classes.columnView}>
+    <ColumnView>
       {step && step.enabled && (
-        <NumberTextFieldCustom
-          className={classes.mediumTextField}
-          label={step.label || ''}
-          value={gridValue}
-          customValues={gridValues}
-          variant="outlined"
-          disabled={disabled}
-          onChange={(e, v) => onChange('step', v)}
-        />
+        <TextFieldMedium>
+          <NumberTextFieldCustom
+            label={step.label || ''}
+            value={gridValue}
+            customValues={gridValues}
+            variant="outlined"
+            disabled={disabled}
+            onChange={(e, v) => onChange('step', v)}
+          />
+        </TextFieldMedium>
       )}
       {labelStep && labelStep.enabled && (
-        <NumberTextFieldCustom
-          className={classes.mediumTextField}
-          label={labelStep.label || ''}
-          value={labelValue}
-          customValues={labelValues}
-          variant="outlined"
-          disabled={disabled}
-          onChange={(e, v) => onChange('labelStep', v)}
-        />
+        <TextFieldMedium>
+          <NumberTextFieldCustom
+            label={labelStep.label || ''}
+            value={labelValue}
+            customValues={labelValues}
+            variant="outlined"
+            disabled={disabled}
+            onChange={(e, v) => onChange('labelStep', v)}
+          />
+        </TextFieldMedium>
       )}
-    </div>
+    </ColumnView>
   );
 };
 
 GridConfig.propTypes = {
-  classes: PropTypes.object,
   disabled: PropTypes.bool,
   displayedFields: PropTypes.object,
   labelValue: PropTypes.number,
@@ -54,65 +119,62 @@ GridConfig.propTypes = {
 };
 
 const AxisConfig = (props) => {
-  const { classes, disabled, displayedFields, displayHeader, label, maxValue, minValue, onChange, type } = props;
+  const { disabled, displayedFields, displayHeader, label, maxValue, minValue, onChange, type } = props;
   const { axisLabel = {}, min = {}, max = {} } = displayedFields;
-  const activePlugins = [
-    'bold',
-    'italic',
-    'underline',
-    'strikethrough',
-    // 'languageCharacters'
-  ];
+  const activePlugins = ['bold', 'italic', 'underline', 'strikethrough'];
 
   return (
-    <div className={classes.columnView}>
+    <ColumnView>
       {displayHeader && (
         <Typography variant="subtitle2">
-          <i>{type === 'domain' ? 'x' : 'y'}</i>
-          -axis
+          <i>{type === 'domain' ? 'x' : 'y'}</i>-axis
         </Typography>
       )}
       {min && min.enabled && (
-        <NumberTextFieldCustom
-          className={classes.mediumTextField}
-          label={min.label || ''}
-          value={minValue}
-          min={-10000}
-          max={maxValue - 0.05}
-          variant="outlined"
-          disabled={disabled}
-          onChange={(e, v) => onChange('min', v)}
-        />
+        <TextFieldMedium>
+          <NumberTextFieldCustom
+            label={min.label || ''}
+            value={minValue}
+            min={-10000}
+            max={maxValue - 0.05}
+            variant="outlined"
+            disabled={disabled}
+            onChange={(e, v) => onChange('min', v)}
+          />
+        </TextFieldMedium>
       )}
       {max && max.enabled && (
-        <NumberTextFieldCustom
-          className={classes.mediumTextField}
-          label={max.label || ''}
-          value={maxValue}
-          min={minValue + 0.05}
-          max={10000}
-          variant="outlined"
-          disabled={disabled}
-          onChange={(e, v) => onChange('max', v)}
-        />
+        <TextFieldMedium>
+          <NumberTextFieldCustom
+            label={max.label || ''}
+            value={maxValue}
+            min={minValue + 0.05}
+            max={10000}
+            variant="outlined"
+            disabled={disabled}
+            onChange={(e, v) => onChange('max', v)}
+          />
+        </TextFieldMedium>
       )}
       {axisLabel && axisLabel.enabled && (
-        <InputContainer label={axisLabel.label || ''} className={classes.mediumTextField}>
-          <EditableHTML
-            className={classes.axisLabel}
-            onChange={(value) => onChange('axisLabel', value)}
-            markup={label || ''}
-            charactersLimit={5}
-            activePlugins={activePlugins}
-          />
-        </InputContainer>
+        <TextFieldMedium>
+          <InputContainer label={axisLabel.label || ''} >
+            <AxisLabel>
+              <EditableHTML
+                onChange={(value) => onChange('axisLabel', value)}
+                markup={label || ''}
+                charactersLimit={5}
+                activePlugins={activePlugins}
+              />
+            </AxisLabel>
+          </InputContainer>
+        </TextFieldMedium>
       )}
-    </div>
+    </ColumnView>
   );
 };
 
 AxisConfig.propTypes = {
-  classes: PropTypes.object,
   disabled: PropTypes.bool,
   displayedFields: PropTypes.object,
   displayHeader: PropTypes.bool,
@@ -122,9 +184,9 @@ AxisConfig.propTypes = {
   type: PropTypes.string,
   onChange: PropTypes.func,
 };
+
 const GridSetup = (props) => {
   const {
-    classes,
     domain,
     displayedFields = {},
     gridValues = {},
@@ -137,6 +199,7 @@ const GridSetup = (props) => {
     sizeConstraints,
     standardGrid,
   } = props;
+
   const gridProps = { min: 2, max: 41 };
   const {
     axisLabel = {},
@@ -148,6 +211,7 @@ const GridSetup = (props) => {
     standardGridEnabled,
     step = {},
   } = displayedFields || {};
+
   const displayAxisType = min.enabled || max.enabled || axisLabel.enabled || step.enabled || labelStep.enabled;
   const gridConfigFields = { step, labelStep };
   const axisConfigFields = { min, max, axisLabel };
@@ -155,7 +219,6 @@ const GridSetup = (props) => {
   const onIncludeAxes = (includeAxes) => {
     const noAxesConfig = (type) => {
       const axis = type === 'domain' ? domain : range;
-
       return {
         min: 1,
         max: axis.max < gridProps.min || axis.max > gridProps.max ? 16 : axis.max,
@@ -192,35 +255,25 @@ const GridSetup = (props) => {
 
   const onSizeChanged = (key, value) => {
     const graph = { ...size, [key]: value };
-
-    if (standardGrid) {
-      graph.height = value;
-    }
-
+    if (standardGrid) graph.height = value;
     onChange({ graph });
   };
 
   const onDomainChanged = (key, value) => {
     domain[key] = value;
-
-    if (standardGrid && key !== 'axisLabel') {
-      range[key] = value;
-    }
-
+    if (standardGrid && key !== 'axisLabel') range[key] = value;
     onChange({ domain, range });
   };
 
   const onRangeChanged = (key, value) => {
     range[key] = value;
-
     onChange({ range });
   };
 
   const axesConfig = (
-    <React.Fragment>
-      <div className={classes.rowView}>
+    <>
+      <RowView>
         <AxisConfig
-          classes={classes}
           displayedFields={axisConfigFields}
           displayHeader={displayAxisType}
           type="domain"
@@ -231,7 +284,6 @@ const GridSetup = (props) => {
           onChange={onDomainChanged}
         />
         <AxisConfig
-          classes={classes}
           displayedFields={axisConfigFields}
           displayHeader={displayAxisType}
           type="range"
@@ -242,16 +294,15 @@ const GridSetup = (props) => {
           includeAxes={includeAxes}
           onChange={onRangeChanged}
         />
-      </div>
+      </RowView>
       {(min.enabled || max.enabled) && (
-        <Typography className={classes.text}>
+        <ItalicText>
           If you want the axis to be visible, use a zero or negative Min Value, and a positive Max Value
-        </Typography>
+        </ItalicText>
       )}
       {(step.enabled || labelStep.enabled) && (
-        <div className={classes.rowView}>
+        <RowView>
           <GridConfig
-            classes={classes}
             displayedFields={gridConfigFields}
             gridValue={domain.step}
             labelValue={domain.labelStep}
@@ -260,7 +311,6 @@ const GridSetup = (props) => {
             onChange={onDomainChanged}
           />
           <GridConfig
-            classes={classes}
             disabled={standardGrid}
             displayedFields={gridConfigFields}
             gridValue={range.step}
@@ -269,46 +319,47 @@ const GridSetup = (props) => {
             labelValues={labelValues.range || []}
             onChange={onRangeChanged}
           />
-        </div>
-      )}
-      {labelStep.enabled && (
-        <Typography className={classes.text}>For unnumbered gridlines, enter a label interval of 0</Typography>
+        </RowView>
       )}
-    </React.Fragment>
+      {labelStep.enabled && <ItalicText>For unnumbered gridlines, enter a label interval of 0</ItalicText>}
+    </>
   );
 
-  const gridlinesConfig = max.enabled ? (
-    <div className={classes.columnView}>
-      <NumberTextFieldCustom
-        className={classes.largeTextField}
-        label="Number of Vertical Gridlines"
-        value={domain.max}
-        min={!includeAxes && gridProps.min}
-        max={!includeAxes && gridProps.max}
-        variant="outlined"
-        onChange={(e, v) => onDomainChanged('max', v)}
-      />
-      <NumberTextFieldCustom
-        className={classes.largeTextField}
-        label="Number of Horizontal Gridlines"
-        value={range.max}
-        min={!includeAxes && gridProps.min}
-        max={!includeAxes && gridProps.max}
-        variant="outlined"
-        disabled={standardGrid}
-        onChange={(e, v) => onRangeChanged('max', v)}
-      />
-    </div>
-  ) : null;
+  const gridlinesConfig =
+    max.enabled ? (
+      <ColumnView>
+        <TextFieldLarge>
+          <NumberTextFieldCustom
+            label="Number of Vertical Gridlines"
+            value={domain.max}
+            min={!includeAxes && gridProps.min}
+            max={!includeAxes && gridProps.max}
+            variant="outlined"
+            onChange={(e, v) => onDomainChanged('max', v)}
+          />
+        </TextFieldLarge>
+        <TextFieldLarge>
+          <NumberTextFieldCustom
+            label="Number of Horizontal Gridlines"
+            value={range.max}
+            min={!includeAxes && gridProps.min}
+            max={!includeAxes && gridProps.max}
+            variant="outlined"
+            disabled={standardGrid}
+            onChange={(e, v) => onRangeChanged('max', v)}
+          />
+        </TextFieldLarge>
+      </ColumnView>
+    ) : null;
 
   return (
-    <div className={classes.wrapper}>
-      <ExpansionPanel onChange={onChangeView}>
-        <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
+    <Wrapper>
+      <Accordion onChange={onChangeView} TransitionProps={{ timeout: { enter: 225, exit: 195 } }}>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
           <Typography variant="subtitle1">Customize Grid Setup</Typography>
-        </ExpansionPanelSummary>
-        <ExpansionPanelDetails>
-          <div className={classes.content}>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Content>
             {includeAxesEnabled && (
               <Toggle label="Include axes and labels?" toggle={onIncludeAxes} checked={includeAxes} />
             )}
@@ -321,45 +372,46 @@ const GridSetup = (props) => {
             )}
             {includeAxes ? axesConfig : gridlinesConfig}
             {dimensionsEnabled && (
-              <div className={classes.dimensions}>
+              <Dimensions>
                 <div>
                   <Typography>Dimensions(px)</Typography>
-                  <Typography className={classes.disabled}>
+                  <DisabledText>
                     Min {sizeConstraints.min}, Max {sizeConstraints.max}
-                  </Typography>
+                  </DisabledText>
                 </div>
-                <NumberTextFieldCustom
-                  className={classes.textField}
-                  label="Width"
-                  value={size.width}
-                  min={sizeConstraints.min}
-                  max={sizeConstraints.max}
-                  step={sizeConstraints.step}
-                  variant="outlined"
-                  onChange={(e, v) => onSizeChanged('width', v)}
-                />
-                <NumberTextFieldCustom
-                  className={classes.textField}
-                  label="Height"
-                  value={size.height}
-                  min={sizeConstraints.min}
-                  max={sizeConstraints.max}
-                  step={sizeConstraints.step}
-                  variant="outlined"
-                  disabled={standardGrid}
-                  onChange={(e, v) => onSizeChanged('height', v)}
-                />
-              </div>
+                <TextFieldSmall>
+                  <NumberTextFieldCustom
+                    label="Width"
+                    value={size.width}
+                    min={sizeConstraints.min}
+                    max={sizeConstraints.max}
+                    step={sizeConstraints.step}
+                    variant="outlined"
+                    onChange={(e, v) => onSizeChanged('width', v)}
+                  />
+                </TextFieldSmall>
+                <TextFieldSmall>
+                  <NumberTextFieldCustom
+                    label="Height"
+                    value={size.height}
+                    min={sizeConstraints.min}
+                    max={sizeConstraints.max}
+                    step={sizeConstraints.step}
+                    variant="outlined"
+                    disabled={standardGrid}
+                    onChange={(e, v) => onSizeChanged('height', v)}
+                  />
+                </TextFieldSmall>
+              </Dimensions>
             )}
-          </div>
-        </ExpansionPanelDetails>
-      </ExpansionPanel>
-    </div>
+          </Content>
+        </AccordionDetails>
+      </Accordion>
+    </Wrapper>
   );
 };
 
 GridSetup.propTypes = {
-  classes: PropTypes.object,
   domain: PropTypes.object,
   displayedFields: PropTypes.object,
   gridValues: PropTypes.object,
@@ -373,52 +425,4 @@ GridSetup.propTypes = {
   standardGrid: PropTypes.bool,
 };
 
-const styles = (theme) => ({
-  wrapper: {
-    width: '450px',
-  },
-  content: {
-    display: 'flex',
-    flexDirection: 'column',
-    width: '100%',
-  },
-  columnView: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-  },
-  rowView: {
-    display: 'flex',
-    justifyContent: 'space-around',
-    alignItems: 'center',
-  },
-  textField: {
-    width: '130px',
-    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`,
-  },
-  mediumTextField: {
-    width: '160px',
-    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`,
-  },
-  largeTextField: {
-    width: '230px',
-    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`,
-  },
-  text: {
-    fontStyle: 'italic',
-    margin: `${theme.spacing.unit}px 0`,
-  },
-  dimensions: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-  disabled: {
-    color: color.disabled(),
-  },
-  axisLabel: {
-    paddingTop: theme.spacing.unit * 2,
-  },
-});
-
-export default withStyles(styles)(GridSetup);
+export default GridSetup;

package/src/grid.jsx

@@ -2,14 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import * as vx from '@vx/grid';
 import { types } from '@pie-lib/plot';
-import { withStyles } from '@material-ui/core/styles';
 import { getTickValues } from './utils';
 
 export class Grid extends React.Component {
   static propTypes = {
     disabled: PropTypes.bool,
     disabledAdditionalGrid: PropTypes.bool,
-    classes: PropTypes.object.isRequired,
     graphProps: types.GraphPropsType.isRequired,
   };
 
@@ -132,4 +130,4 @@ export class Grid extends React.Component {
   }
 }
 
-export default withStyles(() => ({}))(Grid);
+export default Grid;