@onesy/ui-react/Button/Button.js

UI for React

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _utils = require("@onesy/utils");
var _styleReact = require("@onesy/style-react");
var _Surface = _interopRequireDefault(require("../Surface"));
var _Interaction = _interopRequireDefault(require("../Interaction"));
var _RoundProgress = _interopRequireDefault(require("../RoundProgress"));
var _Type = _interopRequireDefault(require("../Type"));
var _utils2 = require("../utils");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["ref", "tonal", "color", "version", "name", "size", "fullWidth", "fontSize", "selected", "iconSelected", "start", "startSelected", "end", "endSelected", "elevation", "backgroundOpacity", "align", "loading", "loadingLabel", "loadingIcon", "loadingIconPosition", "fab", "chip", "icon", "focus", "value", "noIconRootFontSize", "firstLevelChildren", "noFontSize", "disabled", "onFocus", "onBlur", "IconWrapperComponent", "InteractionProps", "IconWrapperProps", "LabelProps", "IconProps", "Component", "className", "style", "children"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
const useStyle = (0, _styleReact.style)(theme => ({
  root: {
    // Reset
    fontFamily: 'inherit',
    '-webkit-appearance': 'none',
    appearance: 'none',
    border: 'none',
    fontSize: '100%',
    lineHeight: '1.15',
    padding: '0',
    margin: '0',
    overflow: 'visible',
    textTransform: 'none',
    flex: '0 0 auto',
    display: 'inline-flex',
    justifyContent: 'space-around',
    alignItems: 'center',
    position: 'relative',
    cursor: 'pointer',
    textAlign: 'center',
    textDecoration: 'none',
    verticalAlign: 'middle',
    userSelect: 'none',
    transition: theme.methods.transitions.make(['color'])
  },
  // Color
  color_inherit: {
    color: 'inherit'
  },
  // Size
  size_small: {
    paddingBlock: theme.methods.space.value(1, 'px'),
    paddingInline: theme.methods.space.value(2, 'px'),
    borderRadius: `${theme.shape.radius.unit * 4}px`
  },
  size_regular: {
    paddingBlock: theme.methods.space.value(1.5, 'px'),
    paddingInline: theme.methods.space.value(3, 'px'),
    borderRadius: `${theme.shape.radius.unit * 4.5}px`
  },
  size_large: {
    paddingBlock: theme.methods.space.value(2, 'px'),
    paddingInline: theme.methods.space.value(4, 'px'),
    borderRadius: `${theme.shape.radius.unit * 5.5}px`
  },
  // icon
  icon: {
    borderRadius: `calc(${theme.shape.radius.unit / 8} * 2em)`,
    padding: '0'
  },
  icon_size_small: {
    width: '30px',
    height: '30px'
  },
  icon_size_regular: {
    width: '40px',
    height: '40px'
  },
  icon_size_large: {
    width: '50px',
    height: '50px'
  },
  // fab
  fab_size_small: {
    height: `40px`,
    minWidth: `64px`,
    borderRadius: `${theme.shape.radius.unit * 2 - theme.shape.radius.unit / 2}px`,
    padding: theme.methods.space.value(1.5, 'px')
  },
  fab_size_regular: {
    height: `56px`,
    minWidth: `80px`,
    borderRadius: `${theme.shape.radius.unit * 2}px`,
    padding: theme.methods.space.value(2, 'px')
  },
  fab_size_large: {
    height: `72px`,
    minWidth: `96px`,
    borderRadius: `${theme.shape.radius.unit * 2 + theme.shape.radius.unit / 2}px`,
    padding: theme.methods.space.value(3, 'px')
  },
  // Chip
  chip_size_small: {
    padding: `${theme.methods.space.value(0.5, 'px')} ${theme.methods.space.value(1.5, 'px')}`,
    borderRadius: `${theme.shape.radius.unit - theme.shape.radius.unit / 4}px`
  },
  chip_size_regular: {
    padding: `${theme.methods.space.value(1, 'px')} ${theme.methods.space.value(2, 'px')}`,
    borderRadius: `${theme.shape.radius.unit}px`
  },
  chip_size_large: {
    padding: `${theme.methods.space.value(1.5, 'px')} ${theme.methods.space.value(2.5, 'px')}`,
    borderRadius: `${theme.shape.radius.unit + theme.shape.radius.unit / 4}px`
  },
  // Icons
  start: {
    paddingInlineStart: '0px'
  },
  end: {
    paddingInlineEnd: '0px'
  },
  fullWidth: {
    width: '100%'
  },
  // Label
  label: {
    display: 'inline-flex',
    position: 'relative',
    whiteSpace: 'normal',
    wordBreak: 'break-word',
    alignItems: 'center',
    gap: '8px',
    width: '100%'
  },
  align_start: {
    textAlign: 'start',
    justifyContent: 'flex-start'
  },
  align_center: {
    textAlign: 'center',
    justifyContent: 'center'
  },
  align_end: {
    textAlign: 'start',
    justifyContent: 'flex-end'
  },
  // Size
  label_size_small: {
    gap: '6px'
  },
  label_size_regular: {
    gap: '8px'
  },
  label_size_large: {
    gap: '10px'
  },
  // icon
  iconRoot: {
    position: 'relative',
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    lineHeight: '0',
    '& > *': {
      lineHeight: '0 !important'
    }
  },
  // Icon element
  Icon: {
    position: 'relative',
    lineHeight: '0'
  },
  start_size_small: {
    paddingInline: `${theme.methods.space.value(1.5, 'px')} ${theme.methods.space.value(0.5, 'px')}`
  },
  start_size_regular: {
    paddingInline: `${theme.methods.space.value(2, 'px')} ${theme.methods.space.value(1, 'px')}`
  },
  start_size_large: {
    paddingInline: `${theme.methods.space.value(2.75, 'px')} ${theme.methods.space.value(1.25, 'px')}`
  },
  end_size_small: {
    paddingInline: `${theme.methods.space.value(0.5, 'px')} ${theme.methods.space.value(1.5, 'px')}`
  },
  end_size_regular: {
    paddingInline: `${theme.methods.space.value(1, 'px')} ${theme.methods.space.value(2, 'px')}`
  },
  end_size_large: {
    paddingInline: `${theme.methods.space.value(1.25, 'px')} ${theme.methods.space.value(2.75, 'px')}`
  },
  // Chip
  chip_start_size_small: {
    padding: `0 ${theme.methods.space.value(0.75, 'px')}`
  },
  chip_start_size_regular: {
    padding: `0 ${theme.methods.space.value(1, 'px')}`
  },
  chip_start_size_large: {
    padding: `0 ${theme.methods.space.value(1.25, 'px')}`
  },
  chip_end_size_small: {
    padding: `0 ${theme.methods.space.value(0.75, 'px')}`
  },
  chip_end_size_regular: {
    padding: `0 ${theme.methods.space.value(1, 'px')}`
  },
  chip_end_size_large: {
    padding: `0 ${theme.methods.space.value(1.25, 'px')}`
  },
  // Elevation
  elevation: {
    transition: theme.methods.transitions.make('box-shadow'),
    '&:hover': {
      boxShadow: theme.shadows.values.neutral[3]
    }
  },
  // Disabled
  disabled: {
    cursor: 'default',
    opacity: theme.palette.visual_contrast.default.opacity.disabled
  },
  disabled_version_text: {
    '&.onesy-Surface-root': {
      color: theme.palette.text.default.primary
    }
  },
  disabled_version_outlined: {
    '&.onesy-Surface-root': {
      color: theme.palette.text.default.primary
    }
  },
  disabled_version_filled: {
    '&.onesy-Surface-root': {
      color: theme.palette.text.neutral.primary,
      background: theme.palette.light ? theme.palette.text.divider : theme.palette.text.neutral.quaternary
    }
  }
}), {
  name: 'onesy-Button'
});
const Button = props_ => {
  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _start, _end;
  const theme = (0, _styleReact.useOnesyTheme)();
  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyButton) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
  const Surface = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Surface) || _Surface.default;
  const Interaction = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Interaction) || _Interaction.default;
  const RoundProgress = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.RoundProgress) || _RoundProgress.default;
  const Type = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Type) || _Type.default;
  const {
      ref,
      tonal = true,
      color: color_ = 'primary',
      version = 'outlined',
      name,
      size = 'regular',
      fullWidth,
      fontSize,
      selected,
      iconSelected,
      start: start_,
      startSelected,
      end: end_,
      endSelected,
      elevation = true,
      backgroundOpacity,
      align = 'center',
      loading,
      loadingLabel,
      loadingIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(RoundProgress, {
        size: "small"
      }),
      loadingIconPosition = 'center',
      fab,
      chip,
      icon,
      focus: focus_,
      value,
      noIconRootFontSize,
      firstLevelChildren,
      noFontSize,
      disabled: disabled_,
      onFocus: onFocus_,
      onBlur: onBlur_,
      IconWrapperComponent = 'span',
      InteractionProps = {},
      IconWrapperProps,
      LabelProps,
      IconProps,
      Component = props.href ? 'a' : 'button',
      className,
      style,
      children: childrenProps
    } = props,
    other = (0, _objectWithoutProperties2.default)(props, _excluded);
  const {
    classes
  } = useStyle();
  const [focus, setFocus] = _react.default.useState(focus_ !== undefined ? focus_ : false);
  const refs = {
    root: _react.default.useRef(undefined),
    ids: {
      label: _react.default.useId()
    }
  };
  let color = color_;
  let start = selected && startSelected || start_;
  let end = selected && endSelected || end_;
  const disabled = disabled_ || loading;
  const TypeProps = {};
  const children = name !== undefined ? name : childrenProps;
  if (disabled) color = 'default';
  const styles = {
    root: {},
    background: {},
    border: {},
    iconRoot: {},
    label: {
      margin: 0
    },
    Icon: {
      fontSize: '1.0625rem'
    }
  };

  // Size
  // if (size === 'small') {
  //   if (!noFontSize) styles.Icon.fontSize = '0.9375rem';

  //   TypeProps.version = 'l3';
  // }

  // if (size === 'large') {
  //   if (!noFontSize) styles.Icon.fontSize = '1.375rem';

  //   TypeProps.version = 'l1';
  // }

  // if (fontSize !== undefined) {
  //   if (!noFontSize) styles.Icon.fontSize = fontSize;
  // }

  let children_ = children;

  // icon
  if (icon) {
    const iconFontSize = fontSize !== undefined ? 'inherit' : undefined;
    if (!['small', 'regular', 'large'].includes(size)) {
      children_ = (0, _utils.is)('array', children_) ? children_.filter(Boolean).map((item, index) => (0, _utils.is)('string', item.type) ? /*#__PURE__*/_react.default.cloneElement(item, {
        key: index
      }) : /*#__PURE__*/_react.default.cloneElement(item, {
        key: index,
        size: item.props.size !== undefined ? item.props.size : !noFontSize ? iconFontSize !== undefined ? iconFontSize : size / 1.667 : undefined
      })) : /*#__PURE__*/_react.default.cloneElement(children_, {
        size: children_.props.size !== undefined ? children_.props.size : !noFontSize ? iconFontSize !== undefined ? iconFontSize : size / 1.667 : undefined
      });
      styles.root.width = size;
      styles.root.height = size;
      if (!noFontSize) {
        styles.root.fontSize = size / 1.667;
        if (!noIconRootFontSize) styles.iconRoot.fontSize = size;
      }
    } else {
      children_ = (0, _utils.is)('array', children_) ? children_.filter(Boolean).map((item_0, index_0) => (0, _utils.is)('string', item_0.type) ? /*#__PURE__*/_react.default.cloneElement(item_0, {
        key: index_0
      }) : /*#__PURE__*/_react.default.cloneElement(item_0, _objectSpread(_objectSpread({
        key: index_0
      }, IconProps), {}, {
        size: item_0.props.size !== undefined ? item_0.props.size : !noFontSize ? iconFontSize !== undefined ? iconFontSize : (IconProps === null || IconProps === void 0 ? void 0 : IconProps.size) || (size === 'large' ? 'medium' : size) : undefined
      }))) : /*#__PURE__*/_react.default.cloneElement(children_, _objectSpread(_objectSpread({}, IconProps), {}, {
        size: children_.props.size !== undefined ? children_.props.size : !noFontSize ? iconFontSize !== undefined ? iconFontSize : (IconProps === null || IconProps === void 0 ? void 0 : IconProps.size) || (size === 'large' ? 'medium' : size) : undefined
      }));
      if (!noFontSize) {
        styles.root.fontSize = (0, _utils2.iconSizeToFontSize)(size === 'large' ? 'medium' : size);
        if (!noIconRootFontSize) styles.iconRoot.fontSize = size === 'small' ? 30 : size === 'regular' ? 40 : 50;
      }
    }
  }

  // fab
  if (fab) {
    if (_react.default.Children.count(children_) === 1 && !(0, _utils.is)('string', children_)) styles.root.minWidth = 'initial';
    if (size === 'small') styles.Icon.fontSize = 18;
    if (size === 'regular') styles.Icon.fontSize = 24;
    if (size === 'large') styles.Icon.fontSize = 30;
    children_ = _react.default.Children.toArray(children_).map(item_1 => /*#__PURE__*/_react.default.isValidElement(item_1) ? /*#__PURE__*/_react.default.cloneElement(item_1, {
      style: styles.Icon
    }) : item_1);
  }
  if (fontSize !== undefined) {
    styles.root.fontSize = fontSize;
    styles.iconRoot.fontSize = 'inherit';
  }

  // loading
  if (loading) {
    const iconLoading = /*#__PURE__*/_react.default.cloneElement(loadingIcon, {
      color: 'inherit',
      style: styles.Icon
    });
    if (loadingLabel) children_ = loadingLabel;else if (loadingIconPosition === 'center') {
      children_ = icon ? /*#__PURE__*/_react.default.cloneElement(loadingIcon, {
        color: 'inherit',
        size: size === 'small' ? 18 : size === 'regular' ? 24 : 36
      }) : iconLoading;
      styles.label.lineHeight = 0;
    }
    if (loadingIconPosition === 'start') start = iconLoading;else if (loadingIconPosition === 'end') end = iconLoading;
  }
  if (disabled) {
    InteractionProps.wave = false;
    InteractionProps.border = false;
    InteractionProps.background = false;
    delete styles.root.color;
    delete styles.label.color;
  }
  const onFocus = event => {
    if (focus_ === undefined && event.target === refs.root.current && !disabled) setFocus(true);
    if ((0, _utils.is)('function', onFocus_)) onFocus_(event);
  };
  const onBlur = event_0 => {
    if (focus_ === undefined && !disabled) setFocus(false);
    if ((0, _utils.is)('function', onBlur_)) onBlur_(event_0);
  };
  const IconElement = selected && iconSelected || children_;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Surface, _objectSpread(_objectSpread({
    ref: item_2 => {
      if (ref) {
        if ((0, _utils.is)('function', ref)) ref(item_2);else ref.current = item_2;
      }
      refs.root.current = item_2;
    },
    tabIndex: !disabled ? 0 : -1,
    type: "button",
    role: "button",
    color: color,
    tonal: tonal,
    version: version === 'outlined' ? 'outlined-without-background' : version,
    elevation: elevation && !disabled && ['filled', 'tonal'].includes(version) ? 1 : 0,
    backgroundOpacity: backgroundOpacity,
    "aria-labelledby": refs.ids.label,
    "aria-pressed": selected,
    "aria-disabled": disabled,
    disabled: disabled,
    onFocus: onFocus,
    onBlur: onBlur,
    Component: Component,
    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Button', theme) && [`onesy-Button-root`, `onesy-Button-version-${version}`, `onesy-Button-size-${size}`, fullWidth && `onesy-Button-full-width`, start && `onesy-Button-start`, end && `onesy-Button-end`, selected && `onesy-Button-selected`, loading && `onesy-Button-loading`, focus && `onesy-Button-focus`, disabled && `onesy-Button-disabled`], className, classes.root, classes[`size_${size}`], classes[`version_${version}`], classes[`color_${color}`], elevation && !disabled && ['filled', 'tonal'].includes(version) && classes.elevation, start && classes.start, end && classes.end, fullWidth && classes.fullWidth, icon && [classes.icon, classes[`icon_size_${size}`]], fab && [classes.fab, classes[`fab_size_${size}`]], chip && [classes.chip, classes[`chip_size_${size}`]], disabled && [classes.disabled, classes[`disabled_version_${version}`]]]),
    style: _objectSpread(_objectSpread({}, style), styles.root)
  }, other), {}, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Interaction, _objectSpread({
      border: false,
      pulse: focus,
      selected: selected,
      disabled: disabled
    }, InteractionProps)), firstLevelChildren, start && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Button', theme) && ['onesy-Button-icon', 'onesy-Button-start'], classes.Icon, classes.start, classes[`start_size_${size}`], chip && classes[`chip_start_size_${size}`]]),
      children: /*#__PURE__*/_react.default.cloneElement(start, _objectSpread(_objectSpread({}, IconProps), {}, {
        size: ((_start = start) === null || _start === void 0 || (_start = _start.props) === null || _start === void 0 ? void 0 : _start.size) || (IconProps === null || IconProps === void 0 ? void 0 : IconProps.size) || size || 'regular'
      }))
    }), icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(IconWrapperComponent, _objectSpread(_objectSpread({}, IconWrapperProps), {}, {
      id: refs.ids.label,
      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Button', theme) && ['onesy-Button-icon-root'], IconWrapperProps === null || IconWrapperProps === void 0 ? void 0 : IconWrapperProps.className, classes.iconRoot]),
      style: _objectSpread(_objectSpread({}, styles.iconRoot), IconWrapperProps === null || IconWrapperProps === void 0 ? void 0 : IconWrapperProps.style),
      children: IconElement
    })) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, _objectSpread(_objectSpread(_objectSpread({
      version: size === 'large' ? 'l1' : size === 'regular' ? 'l2' : 'l3'
    }, TypeProps), {}, {
      id: refs.ids.label,
      Component: "span"
    }, LabelProps), {}, {
      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Button', theme) && ['onesy-Button-label'], LabelProps === null || LabelProps === void 0 ? void 0 : LabelProps.className, TypeProps === null || TypeProps === void 0 ? void 0 : TypeProps.className, classes.label, classes[`label_size_${size}`], classes[`align_${align}`]]),
      style: _objectSpread(_objectSpread(_objectSpread({}, styles.label), TypeProps === null || TypeProps === void 0 ? void 0 : TypeProps.style), LabelProps === null || LabelProps === void 0 ? void 0 : LabelProps.style),
      children: _react.default.Children.toArray(children_).map((item_, index_1) => {
        var _item_$type, _item_3$type;
        const item_3 = selected && (_item_$type = item_.type) !== null && _item_$type !== void 0 && (_item_$type = _item_$type.displayName) !== null && _item_$type !== void 0 && _item_$type.includes('onesy-Icon') && iconSelected ? iconSelected : item_;
        if ((0, _utils.is)('simple', item_3)) return item_3;
        return /*#__PURE__*/_react.default.cloneElement(selected && (_item_3$type = item_3.type) !== null && _item_3$type !== void 0 && (_item_3$type = _item_3$type.displayName) !== null && _item_3$type !== void 0 && _item_3$type.includes('onesy-Icon') && iconSelected ? iconSelected : item_3, {
          key: index_1
        });
      })
    })), end && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Button', theme) && ['onesy-Button-icon', 'onesy-Button-end'], classes.Icon, classes.end, classes[`end_size_${size}`], chip && classes[`chip_end_size_${size}`]]),
      children: /*#__PURE__*/_react.default.cloneElement(end, _objectSpread(_objectSpread({}, IconProps), {}, {
        size: ((_end = end) === null || _end === void 0 || (_end = _end.props) === null || _end === void 0 ? void 0 : _end.size) || (IconProps === null || IconProps === void 0 ? void 0 : IconProps.size) || size || 'regular'
      }))
    })]
  }));
};
Button.displayName = 'onesy-Button';
var _default = exports.default = Button;