oneframe-react
Version:
Oneframe React ## Components, Hooks, Helper Functions & State Management
110 lines (109 loc) • 5.12 kB
JavaScript
"use strict";
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
result["default"] = mod;
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const core_1 = require("@material-ui/core");
const lodash_1 = require("lodash");
const prop_types_1 = __importDefault(require("prop-types"));
const ButtonComponent = (props) => {
const { id, name, className, disabled, variant, disableFocusRipple = false, fullWidth, href, uploadButton, component, iconLeft, iconRight, text, centerRipple, type, onRef, loading, onClick, disableRipple = false, tabIndex = 0, } = props;
const button = react_1.useRef();
react_1.useEffect(() => {
onRef && onRef(button);
});
const renderButton = () => {
return (react_1.default.createElement(core_1.Button, { id: id, name: name, variant: variant, disabled: disabled, disableFocusRipple: disableFocusRipple, disableRipple: disableRipple, href: href, fullWidth: fullWidth, centerRipple: centerRipple, type: type, className: `oneframe-button ${className}`, onClick: (e) => onClick && onClick(e), buttonRef: button, tabIndex: tabIndex, component: uploadButton ? 'span' : component }, loading ? (react_1.default.createElement(core_1.CircularProgress, { size: 20 })) : (react_1.default.createElement(react_1.default.Fragment, null,
typeof iconLeft === 'function' ? iconLeft() : iconLeft,
text,
typeof iconRight === 'function' ? iconRight() : iconRight))));
};
const renderUploadButton = () => {
return (react_1.default.createElement("span", { className: "oneframe-upload-button" },
react_1.default.createElement("input", { accept: "image/*", style: { display: 'none' }, id: "text-button-file", multiple: true, onChange: (val) => uploadButton && uploadButton.onChange && uploadButton.onChange(val), type: "file" }),
react_1.default.createElement("label", { htmlFor: "text-button-file" }, renderButton())));
};
const renderBase = () => {
return uploadButton ? renderUploadButton() : renderButton();
};
return renderBase();
};
ButtonComponent.propTypes = {
id: prop_types_1.default.string,
name: prop_types_1.default.string,
/**
* The text of the button
*/
text: prop_types_1.default.string,
/**
* The style class to apply to the component.
*/
className: prop_types_1.default.string,
href: prop_types_1.default.string,
readOnly: prop_types_1.default.bool,
loading: prop_types_1.default.bool,
disabled: prop_types_1.default.bool,
disableFocusRipple: prop_types_1.default.bool,
fullWidth: prop_types_1.default.bool,
centerRipple: prop_types_1.default.bool,
disableRipple: prop_types_1.default.bool,
tabIndex: prop_types_1.default.number,
buttonRef: prop_types_1.default.any,
component: prop_types_1.default.any,
onRef: prop_types_1.default.func,
/**
* The click event to apply to the component.
* @param {any} e
* @returns {void}
*/
onClick: prop_types_1.default.func,
type: prop_types_1.default.oneOf(['submit', 'reset', 'button']),
variant: prop_types_1.default.oneOf(['text', 'outlined', 'contained']),
/**
* Used to define the icon that will appear on the left side of the component.
* @returns {node}
*/
iconLeft: prop_types_1.default.oneOfType([prop_types_1.default.func, prop_types_1.default.node]),
/**
* Used to define the icon that will appear on the right side of the component.
* @returns {node}
*/
iconRight: prop_types_1.default.oneOfType([prop_types_1.default.func, prop_types_1.default.node]),
/**
* Used to file upload with component.
*/
uploadButton: prop_types_1.default.shape({
accept: prop_types_1.default.any,
onChange: prop_types_1.default.any,
multiple: prop_types_1.default.bool,
}),
};
ButtonComponent.defaultProps = {
disableFocusRipple: false,
disableRipple: false,
tabIndex: 0,
variant: 'text',
type: 'button',
fullWidth: false,
};
exports.ButtonTmp = ButtonComponent;
exports.default = react_1.default.memo(ButtonComponent, (p, n) => lodash_1.isEqual(p.text, n.text) &&
lodash_1.isEqual(p.className, n.className) &&
lodash_1.isEqual(p.variant, n.variant) &&
lodash_1.isEqual(p.href, n.href) &&
lodash_1.isEqual(p.component, n.component) &&
lodash_1.isEqual(p.iconLeft, n.iconLeft) &&
lodash_1.isEqual(p.iconRight, n.iconRight) &&
lodash_1.isEqual(p.readOnly, n.readOnly) &&
lodash_1.isEqual(p.onClick, n.onClick) &&
lodash_1.isEqual(p.disabled, n.disabled) &&
lodash_1.isEqual(p.fullWidth, n.fullWidth) &&
lodash_1.isEqual(p.loading, n.loading));