@smart-react-components/ui
Version:
SRC UI includes React and Styled components.
90 lines (89 loc) • 6.7 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const Div_1 = __importDefault(require("@smart-react-components/core/Element/Div"));
const element_props_1 = __importDefault(require("@smart-react-components/core/element-props"));
const click_events_1 = __importDefault(require("@smart-react-components/core/element-props/click-events"));
const intrinsic_styled_core_props_1 = __importDefault(require("@smart-react-components/core/element-props/intrinsic-styled-core-props"));
const useChangeEffect_1 = __importDefault(require("@smart-react-components/core/hooks/useChangeEffect"));
const react_1 = __importDefault(require("react"));
const styled_components_1 = require("styled-components");
const ButtonAddon_1 = __importDefault(require("./ButtonAddon"));
const ButtonLoading_1 = __importDefault(require("./ButtonLoading"));
const ButtonElement_1 = __importDefault(require("../components/Button/ButtonElement"));
const ButtonContent_1 = __importDefault(require("../components/Button/ButtonContent"));
const useAddons_1 = __importDefault(require("../hooks/useAddons"));
const wave_effect_1 = require("../util/wave-effect");
const WaveEffect_1 = __importDefault(require("../WaveEffect"));
const Button = react_1.default.forwardRef((props, forwardRef) => {
var _a, _b, _c, _d, _e, _f;
const theme = react_1.default.useContext(styled_components_1.ThemeContext);
const { leftAddon, rightAddon } = (0, useAddons_1.default)({
Component: ButtonAddon_1.default,
leftAddon: props.leftAddon,
rightAddon: props.rightAddon,
props: {
hasHover: props.hasHover,
hasWaveEffect: props.hasWaveEffect,
isOutline: props.isOutline,
isSoft: props.isSoft,
palette: props.palette,
shape: props.shape,
size: props.size,
sizeSm: props.sizeSm,
sizeMd: props.sizeMd,
sizeLg: props.sizeLg,
sizeXl: props.sizeXl,
waveEffectPalette: props.waveEffectPalette,
},
});
const waveEffectPalette = react_1.default.useMemo(() => (0, wave_effect_1.getWaveEffectPalette)(props, theme.$.vars.isDarkMode), [props.palette, props.isOutline, props.isSoft, props.isLink, props.waveEffectPalette, theme.$.vars.isDarkMode]);
const getLoadingEl = () => {
var _a;
if (!props.loading) {
return null;
}
const loadingProps = {
isOutline: props.isOutline,
isSoft: props.isSoft,
palette: props.palette,
status: props.isLoading,
};
if (((_a = props.loading.type) === null || _a === void 0 ? void 0 : _a.displayName) === 'SRCLoading') {
return react_1.default.cloneElement(props.loading, loadingProps);
}
return react_1.default.createElement(ButtonLoading_1.default, Object.assign({}, loadingProps), props.loading);
};
const [loadingEl, setLoadingEl] = react_1.default.useState(() => getLoadingEl());
(0, useChangeEffect_1.default)(() => {
setLoadingEl(getLoadingEl());
}, [props.loading, props.isLoading]);
const applyIntrinsicStyledCoreProps = () => (Object.assign(Object.assign({}, (0, element_props_1.default)(props, [intrinsic_styled_core_props_1.default])), (props.hasSpace && Object.assign(Object.assign(Object.assign(Object.assign({ margin: `$size.button.${props.size}.margin.y $size.button.${props.size}.margin.x` }, (props.sizeSm && { marginSm: `$size.button.${props.sizeSm}.margin.y $size.button.${props.sizeSm}.margin.x` })), (props.sizeMd && { marginMd: `$size.button.${props.sizeMd}.margin.y $size.button.${props.sizeMd}.margin.x` })), (props.sizeLg && { marginLg: `$size.button.${props.sizeLg}.margin.y $size.button.${props.sizeLg}.margin.x` })), (props.sizeXl && { marginXl: `$size.button.${props.sizeXl}.margin.y $size.button.${props.sizeXl}.margin.x` })))));
const hasButtonContainer = ((_a = leftAddon === null || leftAddon === void 0 ? void 0 : leftAddon.props) === null || _a === void 0 ? void 0 : _a.isSeparated) || ((_b = rightAddon === null || rightAddon === void 0 ? void 0 : rightAddon.props) === null || _b === void 0 ? void 0 : _b.isSeparated);
let Element = (react_1.default.createElement(ButtonElement_1.default, Object.assign({}, props.elementProps, ((!props.isDisabled && !props.isLoading) && (0, element_props_1.default)(props, [click_events_1.default])), (!hasButtonContainer && applyIntrinsicStyledCoreProps()), (props.as && { as: props.as }), { buttonSize: props.size, buttonSizeSm: props.sizeSm, buttonSizeMd: props.sizeMd, buttonSizeLg: props.sizeLg, buttonSizeXl: props.sizeXl, hasButtonContainer: hasButtonContainer, hasHover: props.hasHover, hasLeftAddon: !!leftAddon, hasRightAddon: !!rightAddon, hasSeparatedLeftAddon: !!((_c = leftAddon === null || leftAddon === void 0 ? void 0 : leftAddon.props) === null || _c === void 0 ? void 0 : _c.isSeparated), hasSeparatedRightAddon: !!((_d = rightAddon === null || rightAddon === void 0 ? void 0 : rightAddon.props) === null || _d === void 0 ? void 0 : _d.isSeparated), isActive: props.isActive, isBlock: props.isBlock, isDisabled: props.isDisabled, isFixedSize: props.isFixedSize, isLink: props.isLink, isLoading: props.isLoading, isSoft: props.isSoft, isOutline: props.isOutline, palette: props.palette, ref: forwardRef, shape: props.shape, type: props.type }),
loadingEl && loadingEl,
(leftAddon && !leftAddon.props.isSeparated) && leftAddon,
react_1.default.createElement(ButtonContent_1.default, null, props.children),
(rightAddon && !rightAddon.props.isSeparated) && rightAddon));
if (props.hasWaveEffect) {
Element = react_1.default.createElement(WaveEffect_1.default, { palette: waveEffectPalette }, Element);
}
if (hasButtonContainer) {
Element = (react_1.default.createElement(Div_1.default, Object.assign({}, applyIntrinsicStyledCoreProps(), { display: props.isBlock ? 'flex' : 'inline-flex' }),
((_e = leftAddon === null || leftAddon === void 0 ? void 0 : leftAddon.props) === null || _e === void 0 ? void 0 : _e.isSeparated) && leftAddon,
Element,
((_f = rightAddon === null || rightAddon === void 0 ? void 0 : rightAddon.props) === null || _f === void 0 ? void 0 : _f.isSeparated) && rightAddon));
}
return Element;
});
Button.defaultProps = {
elementProps: {},
hasHover: true,
hasWaveEffect: true,
palette: 'primary',
shape: 'rectangle',
size: 'medium',
};
exports.default = Button;