organism-react-sort-by/build/cjs/ui/organisms/SortLink.js

React Sort By

"use strict";

var _interopRequireDefault = require("reshow-runtime/helpers/interopRequireDefault");

var _interopRequireWildcard = require("reshow-runtime/helpers/interopRequireWildcard");

exports.__esModule = true;
exports["default"] = void 0;

var _objectSpread2 = _interopRequireDefault(require("reshow-runtime/helpers/objectSpread2"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("reshow-runtime/helpers/objectWithoutPropertiesLoose"));

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

var _seturl = _interopRequireWildcard(require("seturl"));

var _Sort = _interopRequireDefault(require("ricon/Sort"));

var _Dropdown = _interopRequireDefault(require("ricon/Dropdown"));

var _reactAtomicMolecule = require("react-atomic-molecule");

var _getObjectValue = _interopRequireDefault(require("get-object-value"));

var _winDoc = require("win-doc");

var _callFunc = _interopRequireDefault(require("call-func"));

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

var _SortIcon;

var _excluded = ["inactiveStyle", "activeStyle", "data-sort", "component", "sortKeyName", "descKeyName", "sort2KeyName", "sliceKeyName", "icon", "children", "onClick", "sort", "desc"];

var useSortLink = function useSortLink(props) {
  var _props$inactiveStyle = props.inactiveStyle,
      inactiveStyle = _props$inactiveStyle === void 0 ? {
    fill: "#ccc"
  } : _props$inactiveStyle,
      _props$activeStyle = props.activeStyle,
      activeStyle = _props$activeStyle === void 0 ? {} : _props$activeStyle,
      _props$dataSort = props["data-sort"],
      nextSort = _props$dataSort === void 0 ? "" : _props$dataSort,
      _props$component = props.component,
      component = _props$component === void 0 ? "a" : _props$component,
      _props$sortKeyName = props.sortKeyName,
      sortKeyName = _props$sortKeyName === void 0 ? "sort" : _props$sortKeyName,
      _props$descKeyName = props.descKeyName,
      descKeyName = _props$descKeyName === void 0 ? "desc" : _props$descKeyName,
      _props$sort2KeyName = props.sort2KeyName,
      sort2KeyName = _props$sort2KeyName === void 0 ? "sortt2" : _props$sort2KeyName,
      _props$sliceKeyName = props.sliceKeyName,
      sliceKeyName = _props$sliceKeyName === void 0 ? "slice" : _props$sliceKeyName,
      _props$icon = props.icon,
      icon = _props$icon === void 0 ? true : _props$icon,
      children = props.children,
      onClick = props.onClick,
      currentSort = props.sort,
      desc = props.desc,
      others = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
  var lastProps = (0, _react.useRef)({});
  lastProps.current = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {
    currentSort: currentSort,
    nextSort: nextSort
  });

  var isSorted = function isSorted() {
    var _lastProps$current = lastProps.current,
        nextSort = _lastProps$current.nextSort,
        currentSort = _lastProps$current.currentSort;
    return nextSort === currentSort;
  };

  var getNextDesc = function getNextDesc(thisDesc, invert) {
    var _ref, _thisDesc;

    thisDesc = (_ref = (_thisDesc = thisDesc) !== null && _thisDesc !== void 0 ? _thisDesc : lastProps.current.desc) !== null && _ref !== void 0 ? _ref : (0, _seturl.getUrl)(descKeyName);
    var nextDesc;
    var bSorted = isSorted();

    if (bSorted) {
      nextDesc = -1 === thisDesc * 1 ? 1 : -1;
    } else {
      nextDesc = 1;
    }

    if (invert) {
      nextDesc = nextDesc > 0 ? -1 : 1;
    }

    return nextDesc;
  };

  var _useState = (0, _react.useState)(function () {
    return {
      href: "#" + nextSort,
      desc: getNextDesc(null, true)
    };
  }),
      _useState$ = _useState[0],
      stateHref = _useState$.href,
      stateDesc = _useState$.desc,
      setState = _useState[1];

  others["data-sort"] = nextSort;
  others["data-desc"] = stateDesc;
  (0, _react.useEffect)(function () {
    if (isSorted()) {
      setState(function (prev) {
        return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, prev), {}, {
          desc: desc
        });
      });
    }
  }, [desc]);
  var handler = {
    click: function click(e) {
      var _lastProps$current2 = lastProps.current,
          sortKeyName = _lastProps$current2.sortKeyName,
          onClick = _lastProps$current2.onClick;
      var target = e.currentTarget;
      var nextDesc = getNextDesc(target.getAttribute("data-desc"));
      target.setAttribute("data-desc", nextDesc);
      var nextSort = target.getAttribute("data-sort");
      var sort2 = target.getAttribute("data-sort2");
      var slice = target.getAttribute("data-slice");
      /**
       * Call before get data-url
       * because onclick possible change url.
       */

      e.nextSort = nextSort;
      e.nextDesc = nextDesc;
      var isContinue = (0, _callFunc["default"])(onClick, [e]); // end call onClick --->

      var url = target.getAttribute("data-url") || (0, _winDoc.doc)().URL;

      if (nextSort) {
        url = (0, _seturl["default"])(sortKeyName, nextSort, url);
        url = (0, _seturl["default"])(descKeyName, nextDesc, url);
      }

      if (sort2) {
        url = (0, _seturl["default"])(sort2KeyName, sort2, url);
        url = (0, _seturl["default"])(sliceKeyName, slice, url);
      }

      target.href = url;
      setState({
        href: url,
        desc: nextDesc
      });
      return isContinue;
    }
  };
  return {
    children: children,
    component: component,
    handler: handler,
    href: stateHref,
    desc: getNextDesc(stateDesc, true),
    icon: icon,
    inactiveStyle: inactiveStyle,
    activeStyle: activeStyle,
    isSorted: isSorted,
    getNextDesc: getNextDesc,
    others: others
  };
};

var SortLink = function SortLink(props) {
  var _useSortLink = useSortLink(props),
      children = _useSortLink.children,
      component = _useSortLink.component,
      handler = _useSortLink.handler,
      href = _useSortLink.href,
      desc = _useSortLink.desc,
      icon = _useSortLink.icon,
      inactiveStyle = _useSortLink.inactiveStyle,
      activeStyle = _useSortLink.activeStyle,
      isSorted = _useSortLink.isSorted,
      getNextDesc = _useSortLink.getNextDesc,
      others = _useSortLink.others;

  var child = children;

  if (icon) {
    var bSorted = isSorted();
    var thisIcon = bSorted ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown["default"], {
      type: desc > 0 ? null : "up"
    }) : _SortIcon || (_SortIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Sort["default"], {}));
    var iconStyle = bSorted ? activeStyle : inactiveStyle;
    child = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactAtomicMolecule.SemanticUI, {
      style: Styles.inner,
      children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactAtomicMolecule.Icon, {
        style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, Styles.icon), iconStyle),
        children: thisIcon
      })]
    });
  }

  return (0, _reactAtomicMolecule.build)(component)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, others), {}, {
    onClick: handler.click,
    href: href
  }), child);
};

var _default = SortLink;
exports["default"] = _default;
var Styles = {
  icon: {
    width: 20,
    height: 20,
    verticalAlign: "bottom"
  },
  inner: {
    whiteSpace: "nowrap"
  }
};
module.exports = exports.default;