organism-react-sort-by/build/es/ui/organisms/SortLink.mjs

React Sort By

import _objectSpread from "reshow-runtime/es/helpers/objectSpread2";
import _objectWithoutPropertiesLoose from "reshow-runtime/es/helpers/objectWithoutPropertiesLoose";

var _SortIcon;

var _excluded = ["inactiveStyle", "activeStyle", "data-sort", "component", "sortKeyName", "descKeyName", "sort2KeyName", "sliceKeyName", "icon", "children", "onClick", "sort", "desc"];
import React, { useRef, useState, useEffect } from "react";
import seturl, { getUrl } from "seturl";
import SortIcon from "ricon/Sort";
import Dropdown from "ricon/Dropdown";
import { build, SemanticUI, Icon } from "react-atomic-molecule";
import get from "get-object-value";
import { doc } from "win-doc";
import callfunc from "call-func";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";

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 = _objectWithoutPropertiesLoose(props, _excluded);

  var lastProps = useRef({});
  lastProps.current = _objectSpread(_objectSpread({}, 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 : 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 = 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;
  useEffect(function () {
    if (isSorted()) {
      setState(function (prev) {
        return _objectSpread(_objectSpread({}, 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 = callfunc(onClick, [e]); // end call onClick --->

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

      if (nextSort) {
        url = seturl(sortKeyName, nextSort, url);
        url = seturl(descKeyName, nextDesc, url);
      }

      if (sort2) {
        url = seturl(sort2KeyName, sort2, url);
        url = seturl(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__*/_jsx(Dropdown, {
      type: desc > 0 ? null : "up"
    }) : _SortIcon || (_SortIcon = /*#__PURE__*/_jsx(SortIcon, {}));
    var iconStyle = bSorted ? activeStyle : inactiveStyle;
    child = /*#__PURE__*/_jsxs(SemanticUI, {
      style: Styles.inner,
      children: [children, /*#__PURE__*/_jsx(Icon, {
        style: _objectSpread(_objectSpread({}, Styles.icon), iconStyle),
        children: thisIcon
      })]
    });
  }

  return build(component)(_objectSpread(_objectSpread({}, others), {}, {
    onClick: handler.click,
    href: href
  }), child);
};

export default SortLink;
var Styles = {
  icon: {
    width: 20,
    height: 20,
    verticalAlign: "bottom"
  },
  inner: {
    whiteSpace: "nowrap"
  }
};