@vnmfify/core/button/button.js

```shell npm i @vnmfify/core -S ```

import _isPlainObject from "lodash/isPlainObject";
import _map from "lodash/map";
import _size from "lodash/size";
import _isBoolean from "lodash/isBoolean";
var _excluded = ["className"],
    _excluded2 = ["className", "style", "variant", "shape", "size", "color", "formType", "block", "hairline", "disabled", "loading", "icon", "children", "onClick"];

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import { cloneIconElement, isIconElement } from "@vnmfify/icons/utils";
import { View } from "@vnxjs/components";
import classNames from "classnames";
import * as React from "react";
import { cloneElement, useContext, useMemo } from "react";
import ButtonBase from "../button-base";
import Loading from "../loading";
import { prefixClassname } from "../styles";
import Children from "../utils/children";
import { isElementOf, isObjectElement } from "../utils/validate";
import ButtonContent from "./button-content";
import ButtonGroupContext from "./button-group.context";
import ButtonContext from "./button.context";

function useButtonLoading(loading) {
  return useMemo(() => {
    if (_isBoolean(loading) && loading) {
      return /*#__PURE__*/React.createElement(Loading, {
        className: classNames(prefixClassname("button__loading"), prefixClassname("button__loading--right"))
      });
    }

    if (isObjectElement(loading)) {
      var {
        className
      } = loading,
          restProps = _objectWithoutProperties(loading, _excluded);

      return /*#__PURE__*/React.createElement(Loading, _objectSpread({
        className: classNames(prefixClassname("button__loading"), prefixClassname("button__loading--right"), className)
      }, restProps));
    }

    if (isElementOf(loading, Loading)) {
      return /*#__PURE__*/cloneElement(loading, {
        className: classNames(prefixClassname("button__loading"), prefixClassname("button__loading--right"))
      });
    }

    return loading;
  }, [loading]);
}

function appendButtonIconClassname(icon, className) {
  return isIconElement(icon) ? cloneIconElement(icon, {
    className
  }) : icon;
}

function useButtonChildren() {
  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  var {
    loading,
    icon: iconProp,
    children
  } = options;

  if (isElementOf(children, ButtonContent)) {
    return children;
  }

  var childrenArray = Children.toArray(children);
  var lastIndex = _size(childrenArray) - 1;
  var icon = appendButtonIconClassname(iconProp, prefixClassname("button__icon--right"));
  return /*#__PURE__*/React.createElement(ButtonContent, null, loading || icon, _map(childrenArray, (child, index) => {
    if (isIconElement(child) && index === 0) {
      return appendButtonIconClassname(child, prefixClassname("button__icon--right"));
    }

    if (isIconElement(child) && index === lastIndex) {
      return appendButtonIconClassname(child, prefixClassname("button__icon--left"));
    }

    return child;
  }));
}

function useButtonPropertyValue(value1, value2, defaultValue) {
  return useMemo(() => {
    if (value1) {
      return value1;
    }

    if (value2) {
      return value2;
    }

    return defaultValue;
  }, [defaultValue, value1, value2]);
}

export default function Button(props) {
  var {
    className,
    style,
    variant: variantProp,
    shape: shapeProp,
    size: sizeProp,
    color: colorProp,
    formType = "button",
    block,
    hairline: hairlineProp,
    disabled: disabledProp,
    loading: loadingProp,
    icon,
    children: childrenProp,
    onClick: _onClick
  } = props,
      restProps = _objectWithoutProperties(props, _excluded2);

  var {
    variant: variantCtx,
    shape: shapeCtx,
    size: sizeCtx,
    color: colorCtx,
    hairline: hairlineCtx,
    disabled: disabledCtx
  } = useContext(ButtonGroupContext);
  var {
    onClick: onCtxClick
  } = useContext(ButtonContext);
  var variant = useButtonPropertyValue(variantProp, variantCtx, "contained");
  var shape = useButtonPropertyValue(shapeProp, shapeCtx);
  var size = useButtonPropertyValue(sizeProp, sizeCtx, "medium");
  var color = useButtonPropertyValue(colorProp, colorCtx, "default");
  var hairline = useButtonPropertyValue(hairlineProp, hairlineCtx);
  var disabled = useButtonPropertyValue(disabledProp, disabledCtx);
  var loading = useButtonLoading(loadingProp);
  var children = useButtonChildren({
    children: childrenProp,
    loading,
    icon
  });
  return /*#__PURE__*/React.createElement(View, {
    className: classNames(prefixClassname("button"), {
      [prefixClassname("button--text")]: variant === "text",
      [prefixClassname("button--contained")]: variant === "contained",
      [prefixClassname("button--outlined")]: variant === "outlined",
      [prefixClassname("button--".concat(color))]: color,
      [prefixClassname("button--round")]: shape === "round",
      [prefixClassname("button--square")]: shape === "square",
      [prefixClassname("button--mini")]: size === "mini",
      [prefixClassname("button--small")]: size === "small",
      [prefixClassname("button--medium")]: size === "medium",
      [prefixClassname("button--large")]: size === "large",
      [prefixClassname("button--hairline")]: hairline,
      [prefixClassname("hairline--surround")]: hairline,
      [prefixClassname("button--disabled")]: disabled,
      [prefixClassname("button--loading")]: loading,
      [prefixClassname("button--block")]: block
    }, className),
    style: style,
    onClick: e => {
      if (!disabled && !loading) {
        _onClick === null || _onClick === void 0 ? void 0 : _onClick(e);
        onCtxClick === null || onCtxClick === void 0 ? void 0 : onCtxClick(e, props);
      }
    }
  }, children, /*#__PURE__*/React.createElement(ButtonBase, _objectSpread({
    className: prefixClassname("button__button"),
    formType: formType === "submit" ? "submit" : formType === "reset" ? "reset" : undefined,
    disabled: disabled || !!loading,
    loading: false
  }, restProps)));
}
export function createButton(children, props) {
  if (_isPlainObject(children)) {
    return /*#__PURE__*/React.createElement(Button, _objectSpread(_objectSpread({}, children), props));
  }

  return /*#__PURE__*/React.createElement(Button, _objectSpread({
    children: children
  }, props));
}
//# sourceMappingURL=button.js.map