@civicactions/cmsds-open-data-components 3.0.0-alpha.3 → 3.0.0-alpha.5

package/lib/components/ResourceConditionField/index.js

@@ -1,246 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _designSystem = require("@cmsgov/design-system");
-
-var _reactDatepicker = _interopRequireDefault(require("react-datepicker"));
-
-var _close = _interopRequireDefault(require("../../assets/icons/close"));
-
-require("react-datepicker/dist/react-datepicker.css");
-
-function convertUTCToLocalDate(date) {
-  if (!date) {
-    return date;
-  }
-
-  date = new Date(date);
-  date = new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate());
-  return date;
-}
-
-function buildOperatorOptions(type) {
-  switch (type) {
-    case 'text': // Will change from text to string in future update
-
-    case 'string':
-      return [{
-        label: 'Is',
-        value: '='
-      }, {
-        label: 'Contains',
-        value: 'like'
-      }, {
-        label: 'Is Not',
-        value: '<>'
-      }, {
-        label: 'Or',
-        value: 'in'
-      }];
-
-    case 'date':
-      return [{
-        label: 'Is',
-        value: '='
-      }, {
-        label: 'Is Not',
-        value: '<>'
-      }, {
-        label: 'Greater Than',
-        value: '>'
-      }, {
-        label: 'Less Than',
-        value: '<'
-      }];
-
-    default:
-      // These 2 should be safe for all data types
-      return [{
-        label: 'Is',
-        value: '='
-      }, {
-        label: 'Is Not',
-        value: '<>'
-      }];
-  }
-}
-
-function cleanText(value, operator) {
-  var newValue = value;
-
-  if (Array.isArray(newValue)) {
-    newValue = newValue.join(',');
-  }
-
-  return newValue.replace(/(^\%+|\%+$)/gm, '');
-}
-
-var ResourceConditionField = function ResourceConditionField(_ref) {
-  var data = _ref.data,
-      index = _ref.index,
-      remove = _ref.remove,
-      schema = _ref.schema,
-      update = _ref.update;
-  var fields = schema.fields;
-
-  var _React$useState = _react["default"].useState(data.value ? new Date(data.value) : new Date()),
-      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
-      startDate = _React$useState2[0],
-      setStartDate = _React$useState2[1];
-
-  var _React$useState3 = _react["default"].useState(Object.keys(fields).map(function (key) {
-    return {
-      label: fields[key].description ? fields[key].description : key,
-      value: key
-    };
-  })),
-      _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
-      propertyOptions = _React$useState4[0],
-      setPropertyOptions = _React$useState4[1];
-
-  var _React$useState5 = _react["default"].useState(data.property),
-      _React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
-      property = _React$useState6[0],
-      setProperty = _React$useState6[1];
-
-  var _React$useState7 = _react["default"].useState(data.operator),
-      _React$useState8 = (0, _slicedToArray2["default"])(_React$useState7, 2),
-      operator = _React$useState8[0],
-      setOperator = _React$useState8[1];
-
-  var _React$useState9 = _react["default"].useState([{
-    label: '--',
-    value: ''
-  }]),
-      _React$useState10 = (0, _slicedToArray2["default"])(_React$useState9, 2),
-      operatorOptions = _React$useState10[0],
-      setOperatorOptions = _React$useState10[1];
-
-  var _React$useState11 = _react["default"].useState(data.value),
-      _React$useState12 = (0, _slicedToArray2["default"])(_React$useState11, 2),
-      value = _React$useState12[0],
-      setValue = _React$useState12[1];
-
-  _react["default"].useEffect(function () {
-    if (property) {
-      var opOptions = buildOperatorOptions(fields[property].mysql_type ? fields[property].mysql_type : fields[property].type).map(function (opt) {
-        return {
-          label: opt.label,
-          value: opt.value
-        };
-      });
-      update(index, 'property', property);
-
-      if (!operator) {
-        setOperator(opOptions[0].value);
-      }
-
-      setOperatorOptions(opOptions);
-
-      if (fields[property].mysql_type && fields[property].mysql_type === 'date' || fields[property].type === 'date') {
-        setValue(startDate.toJSON().slice(0, 10));
-      }
-    } else {
-      update(index, 'property', property);
-      setOperator('');
-      setValue('');
-      setOperatorOptions([{
-        label: '--',
-        value: ''
-      }]);
-    }
-  }, [property, operator]);
-
-  _react["default"].useEffect(function () {
-    if (operator) {
-      update(index, 'operator', operator);
-    } else {
-      update(index, 'operator', '');
-    }
-  }, [operator]);
-
-  _react["default"].useEffect(function () {
-    if (value) {
-      update(index, 'value', value);
-    } else {
-      update(index, 'value', '');
-    }
-  }, [value]);
-
-  return /*#__PURE__*/_react["default"].createElement("fieldset", null, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "ds-l-form-row"
-  }, /*#__PURE__*/_react["default"].createElement(_designSystem.Dropdown, {
-    options: [{
-      label: 'Select column',
-      value: ''
-    }].concat((0, _toConsumableArray2["default"])(propertyOptions)),
-    value: property,
-    onChange: function onChange(e) {
-      return setProperty(e.target.value);
-    },
-    label: "Filter column",
-    labelClassName: "ds-u-margin-top--0 ds-u-visibility--screen-reader",
-    name: "column_name_".concat(index),
-    className: "ds-l-col--6"
-  }), /*#__PURE__*/_react["default"].createElement(_designSystem.Dropdown, {
-    options: (0, _toConsumableArray2["default"])(operatorOptions),
-    value: operator,
-    disabled: !property ? true : false,
-    onChange: function onChange(e) {
-      return setOperator(e.target.value);
-    },
-    labelClassName: "ds-u-margin-top--0 ds-u-visibility--screen-reader",
-    size: "small",
-    label: "Filter operator",
-    name: "filter_operator_".concat(index),
-    className: "ds-l-col--3"
-  })), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "ds-l-form-row"
-  }, property && (fields[property].mysql_type === 'date' || fields[property].type === 'date') ? /*#__PURE__*/_react["default"].createElement("div", {
-    className: "ds-u-clearfix ds-l-col--11"
-  }, /*#__PURE__*/_react["default"].createElement(_reactDatepicker["default"], {
-    selected: convertUTCToLocalDate(startDate),
-    onChange: function onChange(date) {
-      setStartDate(date);
-      setValue(date.toJSON().slice(0, 10));
-    },
-    showMonthDropdown: true,
-    showYearDropdown: true,
-    dropdownMode: "select",
-    className: "ds-c-field"
-  })) : /*#__PURE__*/_react["default"].createElement(_designSystem.TextField, {
-    hint: operator.toLowerCase() === 'in' ? "Separate values with a comma." : '',
-    value: cleanText(value, operator),
-    disabled: !property ? true : false,
-    onChange: function onChange(e) {
-      return setValue(e.target.value);
-    },
-    label: "Filter value",
-    labelClassName: "ds-u-margin-top--0",
-    name: "filter_value_".concat(index),
-    className: "ds-l-col--11"
-  }), /*#__PURE__*/_react["default"].createElement(_designSystem.Button, {
-    className: "ds-l-col--1",
-    variation: "transparent",
-    "aria-label": "Remove filter",
-    onClick: function onClick(e) {
-      e.preventDefault();
-      remove(index);
-    }
-  }, /*#__PURE__*/_react["default"].createElement(_close["default"], null))));
-};
-
-var _default = ResourceConditionField;
-exports["default"] = _default;

package/lib/components/ResourceFilter/index.js

@@ -1,174 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _qs = _interopRequireDefault(require("qs"));
-
-var _designSystem = require("@cmsgov/design-system");
-
-var _ResourceConditionField = _interopRequireDefault(require("../ResourceConditionField"));
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-var ResourceFilter = function ResourceFilter(_ref) {
-  var id = _ref.id,
-      filterOpen = _ref.filterOpen,
-      setFilterOpen = _ref.setFilterOpen,
-      defaultCondition = _ref.defaultCondition,
-      resource = _ref.resource,
-      includeSearchParams = _ref.includeSearchParams;
-  var setConditions = resource.setConditions,
-      schema = resource.schema,
-      conditions = resource.conditions;
-
-  var _React$useState = _react["default"].useState(conditions && conditions.length ? conditions : [_objectSpread({}, defaultCondition)]),
-      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
-      formConditions = _React$useState2[0],
-      setFormConditions = _React$useState2[1];
-
-  _react["default"].useEffect(function () {
-    if (includeSearchParams) {
-      var url = new URL(window.location);
-
-      var urlString = _qs["default"].stringify({
-        conditions: conditions
-      }, {
-        encodeValuesOnly: true,
-        addQueryPrefix: true
-      });
-
-      window.history.pushState({}, '', "".concat(url.origin).concat(url.pathname).concat(urlString));
-    }
-  }, [conditions]);
-
-  function removeByIndex(index) {
-    var newConditions = (0, _toConsumableArray2["default"])(formConditions);
-    newConditions.splice(index, 1);
-    setFormConditions(newConditions);
-    setConditions(newConditions);
-  }
-
-  function updateByIndex(index, key, value) {
-    var newConditions = (0, _toConsumableArray2["default"])(formConditions);
-    newConditions[index][key] = value;
-    setFormConditions(newConditions);
-  }
-
-  function removeAll() {
-    setFormConditions([]);
-    setConditions([]);
-  }
-
-  function submitFilters(e) {
-    e.preventDefault();
-
-    if (formConditions.length) {
-      var updatedConditions = formConditions.filter(function (cond) {
-        if (cond.property) {
-          return cond;
-        }
-
-        return false;
-      }).map(function (cond) {
-        if (cond.operator === '=' || cond.operator === '<>') {
-          if (Array.isArray(cond.value)) {
-            cond.value = cond.value.join();
-          }
-
-          cond.value = cond.value.replace(/(^\%+|\%+$)/gm, '');
-        }
-
-        if (cond.operator.toLowerCase() === 'like') {
-          if (Array.isArray(cond.value)) {
-            cond.value = cond.value.join();
-          }
-
-          var cleanedValue = cond.value.replace(/(^\%+|\%+$)/gm, '');
-          cond.value = "%".concat(cleanedValue, "%");
-        }
-
-        if (cond.operator.toLowerCase() === 'in') {
-          if (!Array.isArray(cond.value)) {
-            cond.value = cond.value.split(',');
-          }
-        }
-
-        if (Array.isArray(cond.value)) {
-          cond.value = cond.value.map(function (v) {
-            return v.trim().replace(/(^\%+|\%+$)/gm, '');
-          });
-        }
-
-        return cond;
-      });
-      setConditions(updatedConditions);
-    }
-  }
-
-  return /*#__PURE__*/_react["default"].createElement(_designSystem.HelpDrawer, {
-    footerTitle: "Update actions",
-    footerBody: /*#__PURE__*/_react["default"].createElement(_designSystem.Button, {
-      className: "ds-u-margin-right--1",
-      onClick: function onClick(e) {
-        return submitFilters(e, formConditions);
-      }
-    }, "Update table"),
-    heading: "Add filters",
-    className: "dc-c-filterd-resouce-drawer",
-    onCloseClick: function onCloseClick() {
-      setFilterOpen(!filterOpen);
-    }
-  }, /*#__PURE__*/_react["default"].createElement("form", {
-    onSubmit: function onSubmit(e) {
-      return submitFilters(e, formConditions);
-    }
-  }, Object.keys(schema).length && formConditions.map(function (f, index) {
-    return /*#__PURE__*/_react["default"].createElement(_ResourceConditionField["default"], {
-      key: index,
-      data: f,
-      index: index,
-      remove: removeByIndex,
-      schema: schema[id],
-      update: updateByIndex
-    });
-  }), /*#__PURE__*/_react["default"].createElement(_designSystem.Button, {
-    className: "ds-u-margin-right--1",
-    variation: "transparent",
-    onClick: function onClick(e) {
-      e.preventDefault();
-      setFormConditions([].concat((0, _toConsumableArray2["default"])(formConditions), [_objectSpread({}, defaultCondition)]));
-    }
-  }, "+ Add another filter")), formConditions.length > 1 ? /*#__PURE__*/_react["default"].createElement(_designSystem.Button, {
-    variation: "transparent",
-    onClick: function onClick(e) {
-      e.preventDefault();
-      removeAll();
-    }
-  }, "Remove all filters") : '');
-};
-
-ResourceFilter.defaultProps = {
-  defaultCondition: {
-    property: '',
-    value: '',
-    operator: ''
-  },
-  includeSearchParams: true
-};
-var _default = ResourceFilter;
-exports["default"] = _default;