react-common-use-components
Version:
A React mobile commonly used component library
70 lines (69 loc) • 3.33 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Tab = exports.Tabs = void 0;
const react_1 = __importStar(require("react"));
const utils_1 = require("../../utils");
const TabsContext = (0, react_1.createContext)({ selectKey: undefined });
const Tabs = (props) => {
var _a;
const { children, items = [], activeKey, onChange, defaultActiveKey, activeLineColor, containerStyle, itemStyle } = props;
const [selectKey, setSelectKey] = (0, react_1.useState)(defaultActiveKey ? defaultActiveKey : (activeKey ? activeKey : ((_a = items[0]) === null || _a === void 0 ? void 0 : _a.key) || ''));
(0, react_1.useEffect)(() => {
if (onChange && (0, utils_1.isFunction)(onChange)) {
onChange(selectKey);
}
}, [selectKey]);
const initId = (0, react_1.useMemo)(() => {
return (0, utils_1.generateRandomNumber)();
}, [items]);
return (<TabsContext.Provider value={{ selectKey }}>
<div id={'tabs_' + initId} style={Object.assign({ display: "flex", justifyContent: "center", alignItems: "center", width: "20.5rem", padding: "0.5rem 1rem", borderBottom: '1px solid #F3F3F3', backgroundColor: '#FFFFFF' }, containerStyle)}>
{items.length > 0 && items.map((item, index) => {
return (<div onClick={() => {
setSelectKey(item.key);
}} style={Object.assign({ padding: "0.25rem 0", margin: '0 0.5rem', fontSize: "1rem", display: "flex", justifyContent: "center", alignItems: "center", flexDirection: "column" }, itemStyle)} key={index}>
{item.label}
<div style={{
width: "2rem",
height: "0.15rem",
marginTop: "0.25rem",
backgroundColor: item.key === selectKey ? (activeLineColor ? activeLineColor : '#1677ff') : "#FFFFFF",
transition: "all 0.5s ease"
}}/>
</div>);
})}
</div>
{children}
</TabsContext.Provider>);
};
exports.Tabs = Tabs;
const Tab = ({ children, activeKey }) => {
const { selectKey } = (0, react_1.useContext)(TabsContext);
return (<>
{activeKey === selectKey && children}
</>);
};
exports.Tab = Tab;