@commercetools-frontend/experimental-components 0.0.2 → 0.0.3

package/src/fields/localized-textarea/localized-textarea.jsx

@@ -1,50 +0,0 @@
-import PropTypes from 'prop-types';
-import { Collapsible } from '@commercetools-frontend/ui-kit';
-import localizedField from '../localized-field';
-import ExpandableField from '../expandable-field';
-
-const LocalizedTextarea = (props) =>
-  // If there is a `onToggle` function, we assume that the toggle state
-  // will be handled outside of this component (e.g. settings).
-  // If not, we keep a local state using the `Collapsible` component.
-  props.onToggle ? (
-    <ExpandableField
-      {...props}
-      onKeyUp={noop} // For ThrottledField
-      isExpanded={props.autoExpand || props.isExpanded}
-      onToggle={props.onToggle}
-    />
-  ) : (
-    <Collapsible isDefaultClosed={true}>
-      {({ isOpen, toggle }) => (
-        <ExpandableField
-          {...props}
-          onKeyUp={noop} // For ThrottledField
-          isExpanded={isOpen}
-          onToggle={toggle}
-        />
-      )}
-    </Collapsible>
-  );
-
-LocalizedTextarea.displayName = 'LocalizedTextarea';
-LocalizedTextarea.defaultProps = {
-  // Returning `null` or `undefined` doesn't update the `textarea`.
-  // See https://github.com/facebook/react/issues/2533
-  value: '',
-  isExpanded: false,
-  disabled: false,
-};
-LocalizedTextarea.propTypes = {
-  autoExpand: PropTypes.bool,
-  isExpanded: PropTypes.bool.isRequired,
-  onToggle: PropTypes.func,
-  // TODO define this prop type in ExpandableField
-  expandableFieldModalClassName: PropTypes.string,
-  textAreaClassName: PropTypes.string,
-  disabled: PropTypes.bool,
-};
-
-export default localizedField(LocalizedTextarea);
-
-function noop() {}

package/src/fields/missing-value-field/__snapshots__/missing-value-field.spec.js.snap

@@ -1,22 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`rendering should output correct tree\` 1`] = `
-<div>
-  <CheckboxField
-    checked={false}
-    data-track-component="MissingValue"
-    data-track-event="change"
-    data-track-label={false}
-    disabled={false}
-    label={
-      <Memo(MemoizedFormattedMessage)
-        defaultMessage="Filter for missing values"
-        description="The label text for the missing values option"
-        id="MissingValueField.label"
-      />
-    }
-    name="missing-value"
-    onChange={[MockFunction]}
-  />
-</div>
-`;

package/src/fields/missing-value-field/index.js

@@ -1,2 +0,0 @@
-export { default } from './missing-value-field';
-export { default as messages } from './messages';

package/src/fields/missing-value-field/messages.js

@@ -1,9 +0,0 @@
-import { defineMessages } from 'react-intl';
-
-export default defineMessages({
-  label: {
-    id: 'MissingValueField.label',
-    description: 'The label text for the missing values option',
-    defaultMessage: 'Filter for missing values',
-  },
-});

package/src/fields/missing-value-field/missing-value-field.jsx

@@ -1,28 +0,0 @@
-import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
-import CheckboxField from '../checkbox-field';
-import messages from './messages';
-
-const MissingValueField = (props) => (
-  <div>
-    <CheckboxField
-      labelClassName={props.labelClassName}
-      name="missing-value"
-      checked={props.isChecked}
-      onChange={props.onChange}
-      data-track-component="MissingValue"
-      data-track-event="change"
-      data-track-label={props.isChecked}
-      label={<FormattedMessage {...messages.label} />}
-    />
-  </div>
-);
-MissingValueField.displayName = 'MissingValueField';
-MissingValueField.defaultProps = { isChecked: false };
-MissingValueField.propTypes = {
-  isChecked: PropTypes.bool.isRequired,
-  onChange: PropTypes.func.isRequired,
-  labelClassName: PropTypes.string,
-};
-
-export default MissingValueField;

package/src/fields/missing-value-field/missing-value-field.spec.js

@@ -1,35 +0,0 @@
-import { shallow } from 'enzyme';
-import MissingValueField from './missing-value-field';
-
-const createTestProps = (props) => ({
-  isChecked: false,
-  onChange: jest.fn(),
-
-  ...props,
-});
-
-describe('rendering', () => {
-  let props;
-  let wrapper;
-
-  beforeEach(() => {
-    props = createTestProps();
-    wrapper = shallow(<MissingValueField {...props} />);
-  });
-
-  it('should output correct tree`', () => {
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it('should render a `CheckboxField`', () => {
-    expect(wrapper).toRender('CheckboxField');
-  });
-});
-
-describe('statics', () => {
-  describe('defaultProps', () => {
-    it('should default `isChecked`', () => {
-      expect(MissingValueField.defaultProps.isChecked).toBe(false);
-    });
-  });
-});

package/src/fields/multi-value-search-input/index.js

@@ -1 +0,0 @@
-export { default } from './multi-value-search-input';

package/src/fields/multi-value-search-input/messages.js

@@ -1,14 +0,0 @@
-import { defineMessages } from 'react-intl';
-
-export default defineMessages({
-  filterWholeInput: {
-    id: 'MultiValueSearchInput.buttonLabel',
-    description: 'Label for "MultiValueSearchInput" filter whole input.',
-    defaultMessage: 'Filter whole input {values}',
-  },
-  filterSeparateValues: {
-    id: 'MultiValueSearchInput.placeholder',
-    description: 'Label for "MultiValueSearchInput" filter separate values.',
-    defaultMessage: 'Filter separate values {values}',
-  },
-});

package/src/fields/multi-value-search-input/multi-value-search-input.jsx

@@ -1,175 +0,0 @@
-import { useState, useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import { Spacings, Text } from '@commercetools-frontend/ui-kit';
-import SearchInput from '../search-input';
-import messages from './messages';
-import styles from './multi-value-search-input.module.css';
-
-export const IS_MULTI_VALUE_FLAG = '?isMulti=true';
-
-const MultiValueSelectorDropdown = (props) => {
-  if (!props.isOpen) return null;
-
-  if (props.multiValue.length > 0) {
-    return (
-      <div className={styles.submittingTip}>
-        <div
-          onClick={props.handleSingleValueSubmit}
-          className={classnames(styles['submitting-tip-content'], {
-            [styles['submitting-tip-content-hoverable']]: true,
-          })}
-        >
-          <Text.Body
-            truncate
-            intlMessage={{
-              ...messages.filterWholeInput,
-              values: { values: `"${props.value}"` },
-            }}
-          />
-        </div>
-        <div
-          onClick={props.handleMultiValueSubmit}
-          className={classnames(styles['submitting-tip-content-separate'], {
-            [styles['submitting-tip-content-separate-hoverable']]: true,
-          })}
-        >
-          <Text.Body
-            truncate
-            intlMessage={{
-              ...messages.filterSeparateValues,
-              values: {
-                values: `"${props.multiValue.join('", "')}"` || props.value,
-              },
-            }}
-          />
-        </div>
-      </div>
-    );
-  }
-  return (
-    <div className={styles.submittingTip}>
-      <div className={styles['submitting-tip-single']}>{props.tooltip}</div>
-    </div>
-  );
-};
-
-MultiValueSelectorDropdown.displayName = 'MultiValueSelectorDropdown';
-MultiValueSelectorDropdown.propTypes = {
-  handleMultiValueSubmit: PropTypes.func.isRequired,
-  handleSingleValueSubmit: PropTypes.func.isRequired,
-  multiValue: PropTypes.array,
-  tooltip: PropTypes.string.isRequired,
-  value: PropTypes.string,
-  isOpen: PropTypes.bool.isRequired,
-};
-
-const MultiValueSearchInput = (props) => {
-  const multiValueSearchInputRef = useRef(null);
-  const [value, setValue] = useState('');
-  const [multiValue, setMultiValue] = useState([]);
-  const [isTooltipVisible, setIsTooltipVisible] = useState(false);
-  const [tooltipTimeoutHandler, setTooltipTimeoutHandler] = useState(false);
-
-  const clearRunningTooltipTimer = () => {
-    if (tooltipTimeoutHandler) clearTimeout(tooltipTimeoutHandler);
-  };
-
-  const handleInputChange = (nextValue) => {
-    const inputValue = nextValue ?? '';
-    setValue(inputValue);
-
-    const multiInput = inputValue.trim().split(' ');
-    setMultiValue(multiInput);
-
-    clearRunningTooltipTimer();
-    setIsTooltipVisible(false);
-    if (inputValue.length) {
-      if (multiInput.length > 1) {
-        setIsTooltipVisible(true);
-      } else {
-        setMultiValue([]);
-        setTooltipTimeoutHandler(
-          setTimeout(() => setIsTooltipVisible(true), 3000)
-        );
-      }
-    }
-  };
-
-  const clearInputValues = () => {
-    setValue('');
-    setMultiValue([]);
-  };
-
-  const handleSubmit = (inputValue) => {
-    clearInputValues();
-    clearRunningTooltipTimer();
-    setIsTooltipVisible(false);
-    inputValue && props.onSubmit(inputValue);
-  };
-
-  const handleMultiValueSubmit = () => {
-    clearRunningTooltipTimer();
-    setIsTooltipVisible(false);
-    const submitValue =
-      multiValue.length > 7
-        ? multiValue.toString().concat(IS_MULTI_VALUE_FLAG)
-        : multiValue;
-
-    props.onSubmit(submitValue);
-    clearInputValues();
-  };
-
-  const handleSingleValueSubmit = () => {
-    clearRunningTooltipTimer();
-    setIsTooltipVisible(false);
-
-    props.onSubmit(value);
-    clearInputValues();
-  };
-
-  const handleClearSearchField = () => {
-    clearRunningTooltipTimer();
-    setIsTooltipVisible(false);
-  };
-
-  useEffect(() => () => {
-    clearRunningTooltipTimer();
-  });
-
-  return (
-    <div className={styles.container}>
-      <Spacings.Stack size="s">
-        <SearchInput
-          inputRef={multiValueSearchInputRef}
-          disabled={props.isDisabled}
-          initialValue={value}
-          throttleMS={0}
-          placeholder={props.placeholder}
-          onSubmit={handleSubmit}
-          onChange={handleInputChange}
-          clearSearchField={handleClearSearchField}
-          iconColor="primary"
-        />
-      </Spacings.Stack>
-      <MultiValueSelectorDropdown
-        isOpen={isTooltipVisible}
-        multiValue={multiValue}
-        value={value}
-        handleSingleValueSubmit={handleSingleValueSubmit}
-        handleMultiValueSubmit={handleMultiValueSubmit}
-        tooltip={props.tooltip}
-      />
-    </div>
-  );
-};
-
-MultiValueSearchInput.displayName = 'MultiValueSearchInput';
-MultiValueSearchInput.propTypes = {
-  tooltip: PropTypes.string.isRequired,
-  placeholder: PropTypes.string.isRequired,
-  isDisabled: PropTypes.bool.isRequired,
-  onSubmit: PropTypes.func.isRequired,
-};
-
-export default MultiValueSearchInput;

package/src/fields/multi-value-search-input/multi-value-search-input.module.css

@@ -1,45 +0,0 @@
-.container {
-  position: relative;
-}
-
-.searchInput input {
-  border-color: var(--border-color-for-input);
-}
-
-.searchInput input::placeholder {
-  color: var(--font-color-for-input-when-disabled);
-}
-
-.submittingTip {
-  margin-top: var(--spacing-xs);
-  background: var(--background-color-for-input);
-  border: solid 1px var(--border-color-for-input-when-focused);
-  border-radius: var(--border-radius-for-input);
-  position: relative;
-  cursor: default;
-}
-
-.submitting-tip-single {
-  padding: var(--spacing-s);
-  color: var(--font-color-for-input-when-disabled);
-}
-
-.submitting-tip-content {
-  padding: var(--spacing-s);
-}
-
-.submitting-tip-content-separate {
-  composes: submitting-tip-content;
-  padding-top: var(--spacing-s);
-}
-
-.submitting-tip-content-hoverable:hover {
-  background-color: var(--color-neutral-95);
-  border-radius: var(--border-radius-for-input);
-}
-
-.submitting-tip-content-separate-hoverable:hover {
-  background-color: var(--color-neutral-95);
-  border-bottom-left-radius: var(--border-radius-for-input);
-  border-bottom-right-radius: var(--border-radius-for-input);
-}

package/src/fields/numeric-format-input/index.js

@@ -1 +0,0 @@
-export { default } from './numeric-format-input';

package/src/fields/numeric-format-input/numeric-format-input.jsx

@@ -1,184 +0,0 @@
-import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
-import classnames from 'classnames';
-import isNil from 'lodash.isnil';
-import isUndefined from 'lodash.isundefined';
-import isFinite from 'lodash.isfinite';
-import oneLine from 'common-tags/lib/oneLine';
-import Cleave from 'cleave.js/react';
-import {
-  withProps,
-  filterDataAttributes,
-  getSeparatorsForLocale,
-  isNumberish,
-} from '../../internal-index';
-
-import styles from './numeric-format-input.module.css';
-
-Cleave.displayName = 'Cleave';
-
-// only allow values of type Number or values that are nil (null or undefined)
-// use isFinite to exclude Infitinty, -Inifinity and NaN
-const isValidValue = (value) => isFinite(value) || isNil(value);
-
-export class NumericFormatInput extends PureComponent {
-  static displayName = 'NumericFormatInput';
-
-  static propTypes = {
-    numberFormat: PropTypes.string.isRequired,
-    className: PropTypes.string,
-    placeholder: PropTypes.string,
-    name: PropTypes.string,
-    // eslint-disable-next-line consistent-return
-    value: (props, propName, componentName) => {
-      if (!isValidValue(props[propName])) {
-        return new Error(
-          oneLine`Invalid prop \`${propName}\` supplied to \`${componentName}\`.
-          Validation failed. It may only be number or nil but you passed
-          \`${props[propName]}\`.`
-        );
-      }
-    },
-    onChangeValue: PropTypes.func.isRequired,
-    onBlurValue: PropTypes.func,
-    onFocus: PropTypes.func,
-    onInvalidValue: PropTypes.func,
-    isValid: PropTypes.bool,
-    numeralDecimalScale: PropTypes.number.isRequired,
-    formatNumber: PropTypes.func.isRequired,
-    parseNumber: PropTypes.func.isRequired,
-    disabled: PropTypes.bool,
-  };
-
-  static defaultProps = {
-    numberFormatType: 'number',
-    isValid: true,
-    numeralDecimalScale: 20,
-    formatNumber: (number) => number,
-    // Since the Cleave component might call the onChange handler with a string
-    // we need to cast the string back to a number.
-    // This function ensures that the value is always either
-    // - null
-    // - undefined
-    // - JavaScript number
-    parseNumber: (number) => {
-      if (number === '') return undefined;
-      if (isNumberish(number)) {
-        const parsedAsNumber = parseFloat(number);
-        return !Number.isNaN(parsedAsNumber) ? parsedAsNumber : undefined;
-      }
-      return undefined;
-    },
-    disabled: false,
-  };
-
-  parsedValue = this.props.value;
-
-  // eslint-disable-next-line camelcase
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (
-      this.props.value !== nextProps.value &&
-      nextProps.value !== this.parsedValue
-    ) {
-      this.setValue(nextProps.value);
-    }
-  }
-
-  setValue = (value) => {
-    if (!isValidValue(value)) return;
-    const newValue = !isUndefined(value)
-      ? this.props.formatNumber(value)
-      : undefined;
-
-    this.owner.setRawValue(newValue);
-  };
-
-  handleInit = (owner) => {
-    this.owner = owner;
-    this.setValue(this.props.value);
-  };
-
-  handleChange = (event) => {
-    const value = event.target.rawValue;
-    const parsedNumber = this.props.parseNumber(value);
-
-    if (this.parsedValue === parsedNumber) return;
-
-    this.parsedValue = parsedNumber;
-    this.props.onChangeValue(parsedNumber);
-
-    if (!isNumberish(value) && this.props.onInvalidValue)
-      this.props.onInvalidValue(value);
-  };
-
-  handleBlur = () => {
-    this.setValue(this.props.value);
-    if (this.props.onBlurValue) this.props.onBlurValue(this.props.value);
-  };
-
-  registerInputRef = (ref) => {
-    this.textInput = ref;
-  };
-
-  render() {
-    const separators = getSeparatorsForLocale(this.props.numberFormat);
-    const dataAttributes = filterDataAttributes(this.props);
-    return (
-      <Cleave
-        placeholder={this.props.placeholder}
-        htmlRef={this.registerInputRef}
-        options={{
-          numeral: true,
-          numeralThousandsGroupStyle: 'thousand',
-          numeralDecimalMark: separators.decSeparator,
-          delimiter: separators.thoSeparator,
-          numeralDecimalScale: this.props.numeralDecimalScale,
-          // This option is provided to help Cleave slice the numerical values
-          // according to a certain "scale". The default value is `10` which
-          // effectively affects all numerical values (including AttributeMoney)
-          // in MC where the value exceeds the length of `10`
-          // We provide `0` to disable this feature.
-          numeralIntegerScale: 0,
-        }}
-        name={this.props.name}
-        className={classnames(this.props.className, {
-          [styles.invalid]: !this.props.isValid,
-          [styles.disabled]: this.props.disabled,
-        })}
-        onChange={this.handleChange}
-        onInit={this.handleInit}
-        onBlur={this.handleBlur}
-        onFocus={this.props.onFocus}
-        disabled={this.props.disabled}
-        {...dataAttributes}
-      />
-    );
-  }
-}
-
-export const withPropsForMoney = (ownProps) =>
-  ownProps.numberFormatType === 'money'
-    ? {
-        value: isNil(ownProps.value) ? ownProps.value : ownProps.value / 100,
-        formatNumber: (number) => (isNil(number) ? number : number.toFixed(2)),
-        onChangeValue: (value) => {
-          if (isNumberish(value)) {
-            // JavaScript is sometimes incorrect when multiplying floats, e.g.
-            //   2.49 * 100 -> 249.00000000000003
-            // While inaccuracy from multiplying floating point numbers is a
-            // general problem in JS, we can avoid it by cutting off all
-            // decimals. This is possible since cents is the base unit, so we
-            // operate on integers anyways
-            // Also we should the round the value to ensure that we come close
-            // to the nearest decimal value
-            // ref: https://github.com/commercetools/merchant-center-frontend/pull/770
-            ownProps.onChangeValue(Math.trunc(Math.round(value * 100)));
-          } else {
-            ownProps.onChangeValue(value);
-          }
-        },
-        numeralDecimalScale: 2,
-      }
-    : {};
-
-export default withProps(withPropsForMoney)(NumericFormatInput);

package/src/fields/numeric-format-input/numeric-format-input.module.css

@@ -1,10 +0,0 @@
-.invalid {
-  /* this needs !important because react-select has a :focus style that
-    stops the border colour being set unless the element is blurred */
-  border-color: var(--color-error) !important;
-  border: 1px solid;
-}
-
-.disabled {
-  cursor: not-allowed;
-}