phx-react
Version:
PHX REACT
87 lines • 11.1 kB
JavaScript
import { __assign } from "tslib";
import React, { Fragment } from 'react';
import * as SolidIcons from '@heroicons/react/24/solid';
import * as OutlineIcons from '@heroicons/react/24/outline';
import { IconLoading } from '../../commons/IconLoading';
import { classNames } from '../types';
import { useDisableClick } from '../../utils/use-disable-interaction';
import StyleButtonLayout from './styles/ButtonStyle';
import { Menu, Transition } from '@headlessui/react';
export var PHXButton = function (_a) {
var primary = _a.primary, secondary = _a.secondary, danger = _a.danger, danger2 = _a.danger2, plain = _a.plain, tertiary = _a.tertiary, plainCritical = _a.plainCritical, primaryCritical = _a.primaryCritical, split = _a.split, options = _a.options, soft = _a.soft, deleted = _a.deleted, _b = _a.deletedButton, deletedButton = _b === void 0 ? true : _b, rounded = _a.rounded, submit = _a.submit, _c = _a.size, size = _c === void 0 ? 'medium' : _c, children = _a.children, icon = _a.icon, iconClassName = _a.iconClassName, _d = _a.iconOutline, iconOutline = _d === void 0 ? false : _d, _e = _a.iconPosition, iconPosition = _e === void 0 ? 'before' : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.loading, loading = _g === void 0 ? false : _g, id = _a.id, onClick = _a.onClick, className = _a.className, style = _a.style;
var Icon;
if (icon) {
Icon = iconOutline ? OutlineIcons[icon] : SolidIcons[icon];
}
var commonProps = {
id: id,
onClick: onClick
};
var interactiveProps = __assign({}, commonProps);
var handleClick = useDisableClick(disabled, onClick);
var isNew = !plain && !tertiary && !plainCritical;
var binClassNames = classNames(primary &&
"primary bg-indigo-700 font-normal text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 ".concat(!disabled
? 'hover:bg-indigo-800 hover:text-gray-200 active:text-gray-400 active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset] active:bg-indigo-900'
: ''), split &&
"bg-indigo-800 font-normal text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 ".concat(!disabled
? 'hover:bg-indigo-900 hover:text-gray-200 active:text-gray-400 active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset] active:bg-indigo-900'
: ''), secondary &&
"bg-white font-normal text-gray-900 shadow-sm border border-gray-300 border-b-gray-400 ".concat(!disabled
? 'hover:bg-gray-100 active:bg-gray-200 active:border-b-gray-300 active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]'
: ''), primaryCritical &&
"bg-[#d80b0b] font-normal text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 ".concat(!disabled
? 'hover:bg-[#a91212] hover:text-gray-200 active:text-gray-400 active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset] active:bg-[#8d0606]'
: ''), plain && "active:text-[#4d5c86] hover:text-[#0e339f] hover:underline text-[#0f3dc7]", tertiary && "hover:bg-gray-100 rounded-lg active:bg-gray-200 ", plainCritical && 'active:text-[#9e5b5b] hover:text-[#900d0d] hover:underline text-[#b30f0f]', danger &&
"bg-[#e51c00] font-normal text-white shadow-sm danger ".concat(!disabled ? 'hover:bg-[#b5260b] active:bg-[#8e1f0b] active:shadow-[0rem_0.125rem_0rem_0rem_#414141_inset]' : ''), danger2 &&
"font-normal text-red-600 shadow-sm ring-1 ring-inset ring-red-600 ".concat(!disabled ? 'hover:bg-red-100 active:bg-red-200 active:shadow-[0rem_0.125rem_0rem_0rem_#e73737_inset]' : ''), deleted &&
"bg-indigo-50 font-normal text-red-800 shadow-sm ".concat(!disabled ? 'hover:bg-indigo-100 active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]' : ''), rounded && 'rounded-full', soft &&
"bg-indigo-50 font-normal text-gray-700 shadow-sm ".concat(!disabled ? 'hover:bg-indigo-100 active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]' : ''), size === 'micro' &&
isNew &&
"px-2 py-1 text-xs rounded-lg ".concat(!disabled ? 'active:pt-[0.3rem] active:pb-[0.2rem]' : ''), size === 'small' &&
isNew &&
"px-2.5 py-1.5 text-xs rounded-lg ".concat(!disabled ? 'active:pt-[0.45rem] active:pb-[0.3rem]' : ''), size === 'medium' &&
isNew &&
"px-2.5 py-1.5 text-sm rounded-lg ".concat(!disabled ? 'active:pt-[0.45rem] active:pb-[0.3rem]' : ''), size === 'large' &&
isNew &&
"px-3 py-2 text-sm rounded-lg ".concat(!disabled ? 'active:pt-[0.55rem] active:pb-[0.45rem]' : ''), size === 'extra-large' &&
isNew &&
"px-3.5 py-2.5 text-sm rounded-lg ".concat(!disabled ? 'active:pt-[0.7rem] active:pb-[0.55rem]' : ''), size === 'micro' && "px-2 py-1 text-xs rounded-lg", size === 'small' && "px-2.5 py-1.5 text-xs rounded-lg ", size === 'extra-micro' && "px-1.5 py-1 text-xs rounded-lg ", size === 'medium' && "px-2.5 py-1.5 text-sm rounded-lg ", size === 'large' && "px-3 py-2 text-sm rounded-lg", size === 'extra-large' && "px-3.5 py-2.5 text-sm rounded-lg ", icon && (size === 'medium' || size === 'large') && 'inline-flex items-center gap-x-1.5', icon && size === 'extra-large' && 'inline-flex items-center gap-x-2', loading && 'opacity-30', 'relative', disabled && 'opacity-30 cursor-default', className);
var iconClass = classNames(icon && iconPosition === 'before' && size !== 'extra-micro' && 'h-5 w-5', icon && iconPosition === 'after' && size !== 'extra-micro' && 'h-5 w-5', icon && iconPosition === 'before' && size === 'extra-micro' && 'h-4 w-4', icon && iconPosition === 'after' && size === 'extra-micro' && 'h-4 w-4', iconClassName);
// Icon markup
var iconMarkup = Icon && React.createElement(Icon, { className: iconClass });
// Loading markup
var loadingMarkup = loading ? (React.createElement("span", { className: 'w-3 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2' },
React.createElement(IconLoading, { color: primary ? 'text-white' : danger ? 'text-red-50' : 'bg-transparent' }))) : (React.createElement(React.Fragment, null));
var buttonMarkup = (React.createElement(React.Fragment, null,
React.createElement(StyleButtonLayout, null),
React.createElement("button", __assign({ style: style }, interactiveProps, { type: submit ? 'submit' : 'button', onClick: handleClick, className: binClassNames, disabled: loading ? true : disabled }),
React.createElement("div", { className: "".concat(icon && children ? 'flex space-x-1 justify-between' : '') },
loadingMarkup,
iconPosition === 'before' ? iconMarkup : React.createElement(React.Fragment, null),
React.createElement("span", { className: classNames(loading ? 'invisible' : '', deleted ? 'flex items-center' : '') },
deleted && (React.createElement(React.Fragment, null, deletedButton ? (React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', fill: 'none', viewBox: '0 0 24 24', strokeWidth: '2.5', stroke: 'currentColor', className: 'w-3.5 h-3.5 mr-1' },
React.createElement("path", { strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0' }))) : (React.createElement(React.Fragment, null)))),
children),
iconPosition === 'after' ? iconMarkup : React.createElement(React.Fragment, null)))));
var styleBtnSplit = classNames(size === 'small' && 'px-2.5 py-1.5 text-xs', size === 'micro' && 'px-2 py-1 text-xs', size === 'medium' && 'px-2.5 py-1.5 text-sm', size === 'extra-large' && 'px-3.5 py-2.5 text-sm', size === 'large' && 'px-3 py-2 text-sm', 'flex items-center border font-normal shadow-sm ', primary &&
'hover:bg-indigo-800 text-white border-gray-800 hover:text-gray-200 active:text-gray-400 bg-indigo-700 active:shadow-[0rem_0.125rem_0.1rem_0rem_#a3a3a344_inset]', !primary && 'bg-white hover:bg-slate-50 text-gray-900 active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]');
var sizeIcon = classNames(size === 'small' && 'px-2.5 py-[7px]', size === 'micro' && 'px-2 py-1.5', size === 'medium' && 'px-2.5 py-2', size === 'extra-large' && 'px-3.5 py-3', size === 'large' && 'px-3 py-2.5');
var buttonSplit = (React.createElement(React.Fragment, null,
React.createElement("div", { className: "flex ".concat(className) },
React.createElement("button", __assign({}, interactiveProps, { type: submit ? 'submit' : 'button', onClick: handleClick, className: "".concat(styleBtnSplit, " rounded-l-lg") }), children),
React.createElement(Menu, { as: 'div' },
React.createElement(Menu.Button, null,
React.createElement("button", { className: "".concat(styleBtnSplit, " ").concat(sizeIcon, " rounded-r-lg border-l-0") },
React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', fill: 'none', viewBox: '0 0 24 24', strokeWidth: '1.5', stroke: 'currentColor', className: 'w-4 h-4' },
React.createElement("path", { strokeLinecap: 'round', strokeLinejoin: 'round', d: 'm19.5 8.25-7.5 7.5-7.5-7.5' })))),
React.createElement(Transition, { as: Fragment, enter: 'transition ease-out duration-100', enterFrom: 'transform opacity-0 scale-95', enterTo: 'transform opacity-100 scale-100', leave: 'transition ease-in duration-75', leaveFrom: 'transform opacity-100 scale-100', leaveTo: 'transform opacity-0 scale-95' },
React.createElement(Menu.Items, { className: classNames('whitespace-nowrap border px-1 absolute z-10 max-h-96 overflow-y-auto mt-1.5 min-w-[5.2rem] rounded-lg bg-white focus:outline-none shadow-[0rem_0.25rem_0.375rem_-0.125rem_rgba(26,26,26,.2)]') },
React.createElement(React.Fragment, null,
React.createElement("div", { className: 'py-1' }, options === null || options === void 0 ? void 0 : options.map(function (item) { return (React.createElement(Menu.Item, { key: item.content }, function (_a) {
var active = _a.active;
return (React.createElement("div", { className: classNames(active ? 'bg-gray-100 text-gray-900 rounded-lg cursor-pointer' : 'text-gray-700', 'block px-2 py-1.5 text-xs'), onClick: item.onClick }, item.name));
})); })))))))));
return React.createElement(React.Fragment, null, split ? buttonSplit : buttonMarkup);
};
//# sourceMappingURL=Button.js.map