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

package/src/settings/settings-radio-label.jsx

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

package/src/settings/toggle.jsx

@@ -1,46 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import InputLabel from '@mui/material/InputLabel';
-import { styled } from '@mui/material/styles';
-import Switch from '@mui/material/Switch';
-import { color } from '@pie-lib/render-ui';
-
-const StyledToggle = styled('div')(() => ({
-  display: 'flex',
-  width: '100%',
-  justifyContent: 'space-between',
-}));
-
-const StyledInputLabel = styled(InputLabel)(({ theme }) => ({
-  color: 'rgba(0, 0, 0, 0.89)',
-  fontSize: theme.typography.fontSize,
-  paddingTop: theme.spacing(2),
-}));
-
-const StyledSwitch = styled(Switch)(({ checked }) => ({
-  '&.Mui-checked .MuiSwitch-thumb': {
-    color: `${color.tertiary()} !important`,
-  },
-  '&.Mui-checked .MuiSwitch-track': {
-    backgroundColor: `${color.tertiaryLight()} !important`,
-  },
-  '& .MuiSwitch-track': {
-    backgroundColor: checked ? `${color.tertiaryLight()} !important` : undefined,
-  },
-}));
-
-const Toggle = ({ checked, disabled, label, toggle }) => (
-  <StyledToggle>
-    <StyledInputLabel>{label}</StyledInputLabel>
-    <StyledSwitch checked={checked} disabled={disabled} onChange={(e) => toggle(e.target.checked)} />
-  </StyledToggle>
-);
-
-Toggle.propTypes = {
-  checked: PropTypes.bool,
-  disabled: PropTypes.bool,
-  label: PropTypes.string.isRequired,
-  toggle: PropTypes.func.isRequired,
-};
-
-export default Toggle;

package/src/tabs/index.jsx

@@ -1,47 +0,0 @@
-import React from 'react';
-
-import MuiTabs from '@mui/material/Tabs';
-import MuiTab from '@mui/material/Tab';
-import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
-
-const StyledMuiTab = styled(MuiTab)(() => ({}));
-
-export class Tabs extends React.Component {
-  static propTypes = {
-    className: PropTypes.string,
-    contentClassName: PropTypes.string,
-    contentStyle: PropTypes.object,
-    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-  };
-
-  constructor(props) {
-    super(props);
-    this.state = { value: 0 };
-  }
-
-  handleChange = (event, value) => {
-    this.setState({ value });
-  };
-
-  render() {
-    const { value } = this.state;
-    const { children, className, contentClassName, contentStyle = {} } = this.props;
-
-    return (
-      <div className={className}>
-        <MuiTabs indicatorColor="primary" value={value} onChange={this.handleChange}>
-          {React.Children.map(children, (c, index) =>
-            c && c.props.title ? <StyledMuiTab key={index} label={c.props.title} /> : null,
-          )}
-        </MuiTabs>
-
-        <div className={contentClassName} style={contentStyle}>
-          {children[value]}
-        </div>
-      </div>
-    );
-  }
-}
-
-export default Tabs;

package/src/tags-input/index.jsx

@@ -1,116 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
-import { uniq } from 'lodash-es';
-import Chip from '@mui/material/Chip';
-import MuiBox from '../mui-box';
-
-const ENTER = 13;
-
-const StyledChip = styled(Chip)(() => ({
-  padding: '0px',
-  margin: '1px',
-}));
-
-const Tag = ({ label, onDelete }) => <StyledChip label={label} onDelete={onDelete} />;
-
-Tag.propTypes = {
-  label: PropTypes.string.isRequired,
-  onDelete: PropTypes.func.isRequired,
-};
-
-const StyledTagsInput = styled('div')(({ theme }) => ({
-  border: `0px solid ${theme.palette.background.paper}`,
-  display: 'flex',
-  flexWrap: 'wrap',
-}));
-
-const StyledInput = styled('input')(({ theme }) => ({
-  padding: '2px',
-  margin: '1px',
-  minWidth: '30px',
-  width: '100%',
-  flex: '1',
-  border: `0px solid ${theme.palette.background.paper}`,
-  height: '28px',
-  fontSize: theme.typography.fontSize,
-  fontFamily: theme.typography.fontFamily,
-  outline: 'none',
-  '&:focus': {
-    outline: 'none',
-  },
-}));
-
-export class TagsInput extends React.Component {
-  static propTypes = {
-    tags: PropTypes.arrayOf(PropTypes.string).isRequired,
-    onChange: PropTypes.func.isRequired,
-  };
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: '',
-      focused: false,
-    };
-
-    this.onKeyDown = (event) => {
-      if (event.keyCode === ENTER && this.state.value !== '') {
-        const tag = this.state.value.trim();
-        const newTags = uniq(this.props.tags.concat([tag]));
-
-        if (newTags.length !== this.props.tags.length) {
-          this.props.onChange(newTags);
-          this.setState({ value: '' });
-        }
-      }
-    };
-
-    this.onChange = (event) => {
-      this.setState({ value: event.target.value });
-    };
-
-    this.deleteTag = (tag) => {
-      const { tags } = this.props;
-
-      const tagIndex = tags.indexOf(tag);
-      if (tagIndex !== -1) {
-        tags.splice(tagIndex, 1);
-        this.props.onChange(tags);
-        this.input.focus();
-      }
-    };
-  }
-
-  onFocus = () => {
-    this.setState({ focused: true });
-  };
-
-  onBlur = () => {
-    this.setState({ focused: false });
-  };
-
-  render() {
-    const { tags } = this.props;
-    return (
-      <MuiBox focused={this.state.focused}>
-        <StyledTagsInput>
-          {(tags || []).map((t, index) => (
-            <Tag key={index} label={t} onDelete={() => this.deleteTag(t)} />
-          ))}
-          <StyledInput
-            ref={(r) => (this.input = r)}
-            onKeyDown={this.onKeyDown}
-            onChange={this.onChange}
-            value={this.state.value}
-            onFocus={this.onFocus}
-            onBlur={this.onBlur}
-            type="text"
-          />
-        </StyledTagsInput>
-      </MuiBox>
-    );
-  }
-}
-
-export default TagsInput;

package/src/two-choice.jsx

@@ -1,90 +0,0 @@
-import { InputContainer } from '@pie-lib/render-ui';
-import PropTypes from 'prop-types';
-import RadioWithLabel from './radio-with-label';
-import React from 'react';
-import { styled } from '@mui/material/styles';
-
-const StyledGroup = styled('div')(({ theme, direction }) => ({
-  display: 'flex',
-  flexWrap: 'wrap',
-  paddingLeft: 0,
-  marginTop: theme.spacing(1),
-  ...(direction === 'vertical' && {
-    flexDirection: 'column',
-  }),
-}));
-
-class NChoice extends React.Component {
-  static propTypes = {
-    header: PropTypes.string.isRequired,
-    className: PropTypes.string,
-    customLabel: PropTypes.func,
-    opts: PropTypes.array.isRequired,
-    value: PropTypes.string,
-    onChange: PropTypes.func.isRequired,
-    direction: PropTypes.oneOf(['horizontal', 'vertical']),
-  };
-
-  handleChange = (event) => {
-    this.props.onChange(event.currentTarget.value);
-  };
-
-  render() {
-    const { header, className, customLabel, opts, value, direction } = this.props;
-
-    const preppedOpts = opts.map((o) => {
-      return typeof o === 'string' ? { label: o, value: o } : o;
-    });
-    const LabelComponent = customLabel || RadioWithLabel;
-
-    return (
-      <InputContainer label={header} className={className}>
-        <StyledGroup direction={direction}>
-          {preppedOpts.map((o, index) => (
-            <LabelComponent
-              value={o.value}
-              key={index}
-              checked={o.value === value}
-              onChange={this.handleChange}
-              label={o.label}
-            />
-          ))}
-        </StyledGroup>
-      </InputContainer>
-    );
-  }
-}
-
-export { NChoice };
-
-const labelValue = PropTypes.shape({ label: PropTypes.string, value: PropTypes.string });
-
-class TwoChoice extends React.Component {
-  static propTypes = {
-    header: PropTypes.string.isRequired,
-    value: PropTypes.string.isRequired,
-    onChange: PropTypes.func.isRequired,
-    one: PropTypes.oneOfType([labelValue, PropTypes.string]),
-    two: PropTypes.oneOfType([labelValue, PropTypes.string]),
-    className: PropTypes.string,
-    customLabel: PropTypes.func,
-  };
-
-  render() {
-    const { one, two, header, className, customLabel, value, onChange } = this.props;
-    const opts = [one, two];
-
-    return (
-      <NChoice
-        customLabel={customLabel}
-        header={header}
-        className={className}
-        opts={opts}
-        value={value}
-        onChange={onChange}
-      />
-    );
-  }
-}
-
-export default TwoChoice;

package/src/with-stateful-model.jsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const withStatefulModel = (Component) => {
-  class Stateful extends React.Component {
-    static propTypes = {
-      model: PropTypes.object.isRequired,
-      onChange: PropTypes.func.isRequired,
-    };
-
-    constructor(props) {
-      super(props);
-      this.state = {
-        model: props.model,
-      };
-    }
-
-    UNSAFE_componentWillReceiveProps(props) {
-      this.setState({ model: props.model });
-    }
-
-    onChange = (model) => {
-      this.setState({ model }, () => {
-        this.props.onChange(this.state.model);
-      });
-    };
-
-    render() {
-      return <Component model={this.state.model} onChange={this.onChange} />;
-    }
-  }
-
-  return Stateful;
-};
-
-export default withStatefulModel;