@helpscout/hsds-react/components/Condition/Condition.storiesHelpers.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.Builder = exports.default = void 0;

var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _react = _interopRequireDefault(require("react"));

var _motion = require("@helpscout/motion");

var _helix = require("@helpscout/helix");

var _ = _interopRequireDefault(require("."));

var _ConditionList = _interopRequireDefault(require("../ConditionList"));

var _ConditionField = _interopRequireDefault(require("../ConditionField"));

var _Flexy = _interopRequireDefault(require("../Flexy"));

var _Input = _interopRequireDefault(require("../Input"));

var _addonKnobs = require("@storybook/addon-knobs");

var _DropList = _interopRequireDefault(require("../DropList/DropList"));

var _DropList2 = require("../DropList/DropList.togglers");

var _jsxRuntime = require("react/jsx-runtime");

var _default = {
  component: _.default,
  title: 'Components/Forms/Condition'
};
exports.default = _default;
var options = [{
  label: 'Time on page',
  value: 'time-on-page'
}, {
  label: 'Page views',
  value: 'page-views'
}, {
  label: 'Repeat page views',
  value: 'repeat-page-views'
}, {
  label: 'Specific URL',
  value: 'specific-url'
}, {
  label: 'Last Page Viewed',
  value: 'last-page'
}];
var ANIMATION_DURATION = 0;

var fadeInAnimation = function fadeInAnimation(_ref) {
  var animate = _ref.animate,
      node = _ref.node;
  if (!ANIMATION_DURATION) return Promise.resolve();
  node.style.opacity = '0';
  return animate({
    keyframes: [{
      height: [0, node.clientHeight]
    }, {
      opacity: [0, 1]
    }],
    duration: ANIMATION_DURATION,
    easing: 'linear'
  }).finished.then(function () {
    node.style.height = 'auto';
  });
};

var fadeOutAnimation = function fadeOutAnimation(_ref2) {
  var animate = _ref2.animate,
      node = _ref2.node;
  if (!ANIMATION_DURATION) return Promise.resolve();
  node.style.height = node.clientHeight + "px";
  return animate({
    keyframes: [{
      opacity: [1, 0]
    }, {
      height: 0
    }],
    duration: ANIMATION_DURATION,
    easing: 'linear'
  }).finished;
};

var TimeOnPageCondition = function TimeOnPageCondition(_ref3) {
  var error = _ref3.error,
      onRemove = _ref3.onRemove,
      value = _ref3.value,
      time = _ref3.time,
      rest = (0, _objectWithoutPropertiesLoose2.default)(_ref3, ["error", "onRemove", "value", "time"]);
  var items = [{
    label: 'Seconds',
    value: 'seconds'
  }, {
    label: 'Minutes',
    value: 'minutes'
  }];
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, (0, _extends2.default)({
    options: options,
    value: "time-on-page"
  }, rest, {
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ConditionField.default, {
      onRemove: onRemove,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionField.default.Item, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionField.default.Static, {
          children: "Show after"
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionField.default.Block, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Flexy.default, {
          gap: "xs",
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Flexy.default.Item, {
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, {
              inputType: "number",
              maxLength: 3,
              autoComplete: "off",
              width: error ? 75 : 60,
              value: value || '',
              state: error ? 'error' : ''
            })
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Flexy.default.Block, {
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropList.default, {
              items: items,
              width: 160,
              value: items.find(function (item) {
                return item.value === time;
              }),
              toggler: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropList2.SelectTag, {})
            })
          })]
        })
      })]
    })
  }));
};

var PageViewCondition = function PageViewCondition(_ref4) {
  var error = _ref4.error,
      onRemove = _ref4.onRemove,
      value = _ref4.value,
      rest = (0, _objectWithoutPropertiesLoose2.default)(_ref4, ["error", "onRemove", "value"]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, (0, _extends2.default)({
    options: options,
    value: "page-views"
  }, rest, {
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ConditionField.default, {
      onRemove: onRemove,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionField.default.Item, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, {
          inputType: "number",
          maxLength: 3,
          autoComplete: "off",
          width: error ? 75 : 60,
          value: value || '',
          state: error ? 'error' : ''
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionField.default.Block, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionField.default.Static, {
          children: "Page views on your site by the visitor"
        })
      })]
    })
  }));
};

var RepeatPageViewCondition = function RepeatPageViewCondition(_ref5) {
  var error = _ref5.error,
      onRemove = _ref5.onRemove,
      value = _ref5.value,
      rest = (0, _objectWithoutPropertiesLoose2.default)(_ref5, ["error", "onRemove", "value"]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, (0, _extends2.default)({
    options: options,
    value: "repeat-page-views"
  }, rest, {
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ConditionField.default, {
      onRemove: onRemove,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionField.default.Item, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, {
          inputType: "number",
          maxLength: 3,
          autoComplete: "off",
          width: error ? 75 : 60,
          value: value || '',
          state: error ? 'error' : ''
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionField.default.Block, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionField.default.Static, {
          children: "Repeat views of the same page"
        })
      })]
    })
  }));
};

var URLConditionField = function URLConditionField(_ref6) {
  var onRemove = _ref6.onRemove,
      removeTitle = _ref6.removeTitle,
      onChange = _ref6.onChange,
      url = _ref6.url,
      rest = (0, _objectWithoutPropertiesLoose2.default)(_ref6, ["onRemove", "removeTitle", "onChange", "url"]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionField.default, (0, _extends2.default)({
    onRemove: onRemove,
    removeTitle: removeTitle
  }, rest, {
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionField.default.Block, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, {
        autoComplete: "off",
        onChange: onChange,
        placeholder: "https://example.com/",
        value: url
      })
    })
  }));
};

var AnimatedURLConditionField = (0, _motion.withMotion)({
  componentDidMount: fadeInAnimation,
  componentWillUnmount: fadeOutAnimation
})(URLConditionField);

var createUrlField = function createUrlField(value) {
  return {
    id: _helix.faker.datatype.uuid()(),
    value: value
  };
};

var SpecificUrlCondition = /*#__PURE__*/function (_React$Component) {
  (0, _inheritsLoose2.default)(SpecificUrlCondition, _React$Component);

  function SpecificUrlCondition() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
    _this.state = {
      urls: [createUrlField('')]
    };

    _this.handleOnAdd = function () {
      _this.setState({
        urls: [].concat(_this.state.urls, [createUrlField('')])
      });
    };

    _this.handleOnChange = function (value, id) {
      var urls = _this.state.urls.map(function (url) {
        if (url.id !== id) return url;
        return (0, _extends2.default)({}, url, {
          value: value
        });
      });

      _this.setState({
        urls: urls
      });
    };

    _this.handleOnRemove = function (id) {
      var urls = _this.state.urls.filter(function (url) {
        return url.id !== id;
      });

      if (urls.length === 0) {
        urls = [createUrlField('')];
      }

      _this.setState({
        urls: urls
      });
    };

    return _this;
  }

  var _proto = SpecificUrlCondition.prototype;

  _proto.render = function render() {
    var _this2 = this;

    var isAddEnabled = this.state.urls.length <= 2;
    var removeTitle = this.state.urls.length === 1 ? 'Remove' : 'Remove URL';
    var singleOption = this.props.singleOption;
    var urlOptions = singleOption ? [{
      label: 'Specific URL',
      value: 'specific-url'
    }] : options;
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, (0, _extends2.default)({
      options: urlOptions
    }, this.props, {
      value: "specific-url",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionField.default.Group, {
        onAdd: this.handleOnAdd,
        isAddEnabled: isAddEnabled,
        children: this.state.urls.map(function (url, index) {
          return /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedURLConditionField, {
            onRemove: function onRemove() {
              return _this2.handleOnRemove(url.id);
            },
            onChange: function onChange(value) {
              return _this2.handleOnChange(value, url.id);
            },
            removeTitle: removeTitle,
            url: url.value
          }, url.id);
        })
      })
    }));
  };

  return SpecificUrlCondition;
}(_react.default.Component);

var LastPageCondition = /*#__PURE__*/function (_React$Component2) {
  (0, _inheritsLoose2.default)(LastPageCondition, _React$Component2);

  function LastPageCondition() {
    var _this3;

    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
      args[_key2] = arguments[_key2];
    }

    _this3 = _React$Component2.call.apply(_React$Component2, [this].concat(args)) || this;
    _this3.state = {
      urls: [createUrlField('')],
      conjunction: 'or'
    };

    _this3.handleOnAdd = function () {
      _this3.setState({
        urls: [].concat(_this3.state.urls, [createUrlField('')])
      });
    };

    _this3.handleOnChange = function (value, id) {
      var urls = _this3.state.urls.map(function (url) {
        if (url.id !== id) return url;
        return (0, _extends2.default)({}, url, {
          value: value
        });
      });

      _this3.setState({
        urls: urls
      });
    };

    _this3.handleConjunctionChange = function (conjunction) {
      _this3.setState({
        conjunction: conjunction
      });
    };

    _this3.handleOnRemove = function (id) {
      var urls = _this3.state.urls.filter(function (url) {
        return url.id !== id;
      });

      if (urls.length === 0) {
        urls = [createUrlField('')];
      }

      _this3.setState({
        urls: urls
      });
    };

    return _this3;
  }

  var _proto2 = LastPageCondition.prototype;

  _proto2.render = function render() {
    var _this4 = this;

    var isAddEnabled = this.state.urls.length <= 2;
    var removeTitle = this.state.urls.length === 1 ? 'Remove' : 'Remove URL';
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, (0, _extends2.default)({
      options: options
    }, this.props, {
      value: "last-page",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionField.default.Group, {
        onAdd: this.handleOnAdd,
        isAddEnabled: isAddEnabled,
        canChangeConjunction: true,
        conjunction: this.state.conjunction,
        onConjunctionChange: this.handleConjunctionChange,
        children: this.state.urls.map(function (url, index) {
          return /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedURLConditionField, {
            onRemove: function onRemove() {
              return _this4.handleOnRemove(url.id);
            },
            onChange: function onChange(value) {
              return _this4.handleOnChange(value, url.id);
            },
            removeTitle: removeTitle,
            url: url.value
          }, url.id);
        })
      })
    }));
  };

  return LastPageCondition;
}(_react.default.Component);

var ComponentMap = {
  'time-on-page': TimeOnPageCondition,
  'repeat-page-views': RepeatPageViewCondition,
  'page-views': PageViewCondition,
  'specific-url': SpecificUrlCondition,
  'last-page': LastPageCondition
};

var ConditionElement = function ConditionElement(_ref7) {
  var type = _ref7.type,
      rest = (0, _objectWithoutPropertiesLoose2.default)(_ref7, ["type"]);
  var Component = ComponentMap[type] || ComponentMap['time-on-page'];
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, (0, _extends2.default)({}, rest))
  });
};

var AnimatedComponent = (0, _motion.withMotion)({
  componentDidMount: fadeInAnimation,
  componentWillUnmount: fadeOutAnimation
})(ConditionElement);

var createCondition = function createCondition(value) {
  return {
    id: _helix.faker.datatype.uuid()(),
    value: value
  };
};

var ConditionBuilder = /*#__PURE__*/function (_React$Component3) {
  (0, _inheritsLoose2.default)(ConditionBuilder, _React$Component3);

  function ConditionBuilder() {
    var _this5;

    for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
      args[_key3] = arguments[_key3];
    }

    _this5 = _React$Component3.call.apply(_React$Component3, [this].concat(args)) || this;
    _this5.state = {
      conditions: [createCondition('time-on-page')]
    };

    _this5.handleOnAdd = function () {
      _this5.setState({
        conditions: [].concat(_this5.state.conditions, [createCondition('time-on-page')])
      });
    };

    _this5.handleOnChange = function (id, value) {
      var conditions = _this5.state.conditions.map(function (item) {
        if (item.id !== id) return item;
        return (0, _extends2.default)({}, item, {
          value: value
        });
      });

      _this5.setState({
        conditions: conditions
      });
    };

    _this5.handleOnRemove = function (id) {
      var conditions = _this5.state.conditions.filter(function (item) {
        return item.id !== id;
      });

      _this5.setState({
        conditions: conditions
      });
    };

    return _this5;
  }

  var _proto3 = ConditionBuilder.prototype;

  _proto3.componentDidMount = function componentDidMount() {
    ANIMATION_DURATION = 250;
  };

  _proto3.componentWillUnmount = function componentWillUnmount() {
    ANIMATION_DURATION = 0;
  };

  _proto3.render = function render() {
    var _this6 = this;

    var _this$props = this.props,
        error = _this$props.error,
        isAddEnabled = _this$props.isAddEnabled;
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ConditionList.default, {
      isAddEnabled: isAddEnabled,
      onAdd: this.handleOnAdd,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SpecificUrlCondition, {
        singleOption: true
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(LastPageCondition, {
        noSelect: true
      }), this.state.conditions.map(function (condition, index) {
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedComponent, {
          type: condition.value,
          error: error,
          onChange: function onChange(value) {
            return _this6.handleOnChange(condition.id, value);
          },
          value: 5,
          onRemove: function onRemove() {
            return _this6.handleOnRemove(condition.id);
          }
        }, condition.id);
      })]
    });
  };

  return ConditionBuilder;
}(_react.default.Component);

var Builder = function Builder() {
  var error = (0, _addonKnobs.boolean)('error', false);
  var isAddEnabled = (0, _addonKnobs.boolean)('isAddEnabled', true);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ConditionBuilder, {
    error: error,
    isAddEnabled: isAddEnabled
  });
};

exports.Builder = Builder;