@commercetools-frontend/experimental-components 0.0.2

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

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1,22 @@
+// 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

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

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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,35 @@
+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

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

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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,175 @@
+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

@@ -0,0 +1,45 @@
+.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

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

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

@@ -0,0 +1,184 @@
+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

@@ -0,0 +1,10 @@
+.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;
+}