ultraman-shop
Version:
A React component library for building e-commerce interfaces
400 lines (355 loc) • 26.2 kB
JavaScript
import { jsxs, jsx } from 'react/jsx-runtime';
import { useState, useEffect, useCallback, useMemo } from 'react';
import { ConfigProvider, Table, DatePicker, Select, Modal } from 'antd';
import zhCN from 'antd/locale/zh_CN';
const XInput = ({ addonAfter, addonBefore, allowClear, classNames, count, defaultValue, disabled = false, id, maxLength, prefix, showCount, status, styles, size = 'middle', suffix, type = 'text', value: propValue, variant = 'outlined', onChange, onPressEnter, onClear, placeholder, }) => {
const [value, setValue] = useState(defaultValue || '');
useEffect(() => {
if (propValue !== undefined) {
setValue(propValue);
}
}, [propValue]);
// 使用 useCallback 优化事件处理函数
const handleChange = useCallback((e) => {
setValue(e.target.value);
onChange === null || onChange === void 0 ? void 0 : onChange(e);
}, [onChange]);
const handleClear = useCallback(() => {
setValue('');
onClear === null || onClear === void 0 ? void 0 : onClear();
}, [onClear]);
const handleKeyDown = useCallback((e) => {
if (e.key === 'Enter') {
onPressEnter === null || onPressEnter === void 0 ? void 0 : onPressEnter(e);
}
}, [onPressEnter]);
// 使用 useMemo 优化字符计数渲染
const countDisplay = useMemo(() => {
var _a;
if (!showCount)
return null;
const countInfo = { value, count: value.length, maxLength };
return typeof showCount === 'boolean'
? `${value.length}${maxLength ? ` / ${maxLength}` : ''}`
: (_a = showCount.formatter) === null || _a === void 0 ? void 0 : _a.call(showCount, countInfo);
}, [showCount, value, maxLength]);
// 使用 useMemo 优化容器类名
const containerClassName = useMemo(() => {
return `input-container ${size} ${variant} ${status || ''} ${disabled ? 'disabled' : ''} ${(classNames === null || classNames === void 0 ? void 0 : classNames.container) || ''}`.trim();
}, [size, variant, status, disabled, classNames === null || classNames === void 0 ? void 0 : classNames.container]);
return (jsxs("div", { className: containerClassName, style: styles === null || styles === void 0 ? void 0 : styles.container, children: [addonBefore && jsx("span", { className: "input-addon before", children: addonBefore }), jsxs("div", { className: "input-wrapper", style: styles === null || styles === void 0 ? void 0 : styles.inputWrapper, children: [prefix && jsx("span", { className: "input-prefix", children: prefix }), jsx("input", { id: id, type: type, value: value, disabled: disabled, maxLength: maxLength, onChange: handleChange, onKeyDown: handleKeyDown, placeholder: placeholder, className: `input-field ${(classNames === null || classNames === void 0 ? void 0 : classNames.inputField) || ''}`, style: styles === null || styles === void 0 ? void 0 : styles.inputField }), allowClear && value && (jsx("span", { className: "input-clear", onClick: handleClear, children: typeof allowClear === 'object' ? allowClear.clearIcon : '✖' })), suffix && jsx("span", { className: "input-suffix", children: suffix })] }), addonAfter && jsx("span", { className: "input-addon after", children: addonAfter }), countDisplay && jsx("span", { className: "input-count", children: countDisplay })] }));
};
/** 大屏标题组件 */
const XTitle = ({ title, rightSlot, titleEn, moreOnClick, moreAnimateOnClick, bgImage = '/publicImg/cockpit/titleBg.png', className = '', style, noPrefix = false }) => {
// 提前获取环境变量，避免每次渲染都访问
const imgPrefix = 'https://tj-front.oss-cn-beijing.aliyuncs.com/publicImg/';
let additionalContent = null;
// 判断是否有 moreOnClick，决定要渲染的内容
if (moreOnClick) {
additionalContent = (jsx("img", { className: "ultraman-more", onClick: moreOnClick, src: `${imgPrefix}cockpit/checkMore.png`, alt: "" }));
}
else if (moreAnimateOnClick) {
additionalContent = (jsx("span", { className: "ultraman-more-animate", onClick: moreAnimateOnClick, children: jsx("span", { className: "ultraman-btn", children: jsx("a", { href: "#", children: "查看更多 >" }) }) }));
}
else {
additionalContent = rightSlot;
}
return (jsxs("div", { className: `ultraman-XTitle ${className}`, style: { ...style, backgroundImage: `url(${bgImage})` }, children: [" ", jsx("div", { className: "ultraman-header", children: jsxs("span", { className: "ultraman-title", children: [jsx("img", { src: `${imgPrefix}cockpit/titleL.png`, alt: "" }), jsx("span", { className: "ultraman-title-label", children: title || '我是标题' }), jsxs("span", { className: "ultraman-titleEn-label", children: [" ", titleEn] })] }) }), additionalContent] }));
};
function getDefaultExportFromCjs (x) {
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
}
var dayjs_min$1 = {exports: {}};
var dayjs_min = dayjs_min$1.exports;
var hasRequiredDayjs_min;
function requireDayjs_min () {
if (hasRequiredDayjs_min) return dayjs_min$1.exports;
hasRequiredDayjs_min = 1;
(function (module, exports) {
!function(t,e){module.exports=e();}(dayjs_min,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",c="month",f="quarter",h="year",d="date",l="Invalid Date",$=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(t){var e=["th","st","nd","rd"],n=t%100;return "["+t+(e[(n-20)%10]||e[n]||e[0])+"]"}},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},v={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,c),s=n-i<0,u=e.clone().add(r+(s?-1:1),c);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:c,y:h,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:f}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},g="en",D={};D[g]=M;var p="$isDayjsObject",S=function(t){return t instanceof _||!(!t||!t[p])},w=function t(e,n,r){var i;if(!e)return g;if("string"==typeof e){var s=e.toLowerCase();D[s]&&(i=s),n&&(D[s]=n,i=s);var u=e.split("-");if(!i&&u.length>1)return t(u[0])}else {var a=e.name;D[a]=e,i=a;}return !r&&i&&(g=i),i||!r&&g},O=function(t,e){if(S(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},b=v;b.l=w,b.i=S,b.w=function(t,e){return O(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=w(t.locale,null,!0),this.parse(t),this.$x=this.$x||t.x||{},this[p]=!0;}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(b.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match($);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.init();},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},m.$utils=function(){return b},m.isValid=function(){return !(this.$d.toString()===l)},m.isSame=function(t,e){var n=O(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return O(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<O(t)},m.$g=function(t,e,n){return b.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!b.u(e)||e,f=b.p(t),l=function(t,e){var i=b.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},$=function(t,e){return b.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,v="set"+(this.$u?"UTC":"");switch(f){case h:return r?l(1,0):l(31,11);case c:return r?l(1,M):l(0,M+1);case o:var g=this.$locale().weekStart||0,D=(y<g?y+7:y)-g;return l(r?m-D:m+(6-D),M);case a:case d:return $(v+"Hours",0);case u:return $(v+"Minutes",1);case s:return $(v+"Seconds",2);case i:return $(v+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,!1)},m.$set=function(t,e){var n,o=b.p(t),f="set"+(this.$u?"UTC":""),l=(n={},n[a]=f+"Date",n[d]=f+"Date",n[c]=f+"Month",n[h]=f+"FullYear",n[u]=f+"Hours",n[s]=f+"Minutes",n[i]=f+"Seconds",n[r]=f+"Milliseconds",n)[o],$=o===a?this.$D+(e-this.$W):e;if(o===c||o===h){var y=this.clone().set(d,1);y.$d[l]($),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d;}else l&&this.$d[l]($);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[b.p(t)]()},m.add=function(r,f){var d,l=this;r=Number(r);var $=b.p(f),y=function(t){var e=O(l);return b.w(e.date(e.date()+Math.round(t*r)),l)};if($===c)return this.set(c,this.$M+r);if($===h)return this.set(h,this.$y+r);if($===a)return y(1);if($===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[$]||1,m=this.$d.getTime()+r*M;return b.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||l;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=b.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,c=n.months,f=n.meridiem,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].slice(0,s)},d=function(t){return b.s(s%12||12,t,"0")},$=f||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r};return r.replace(y,(function(t,r){return r||function(t){switch(t){case"YY":return String(e.$y).slice(-2);case"YYYY":return b.s(e.$y,4,"0");case"M":return a+1;case"MM":return b.s(a+1,2,"0");case"MMM":return h(n.monthsShort,a,c,3);case"MMMM":return h(c,a);case"D":return e.$D;case"DD":return b.s(e.$D,2,"0");case"d":return String(e.$W);case"dd":return h(n.weekdaysMin,e.$W,o,2);case"ddd":return h(n.weekdaysShort,e.$W,o,3);case"dddd":return o[e.$W];case"H":return String(s);case"HH":return b.s(s,2,"0");case"h":return d(1);case"hh":return d(2);case"a":return $(s,u,!0);case"A":return $(s,u,!1);case"m":return String(u);case"mm":return b.s(u,2,"0");case"s":return String(e.$s);case"ss":return b.s(e.$s,2,"0");case"SSS":return b.s(e.$ms,3,"0");case"Z":return i}return null}(t)||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,l){var $,y=this,M=b.p(d),m=O(r),v=(m.utcOffset()-this.utcOffset())*e,g=this-m,D=function(){return b.m(y,m)};switch(M){case h:$=D()/12;break;case c:$=D();break;case f:$=D()/3;break;case o:$=(g-v)/6048e5;break;case a:$=(g-v)/864e5;break;case u:$=g/n;break;case s:$=g/e;break;case i:$=g/t;break;default:$=g;}return l?$:b.a($)},m.daysInMonth=function(){return this.endOf(c).$D},m.$locale=function(){return D[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=w(t,e,!0);return r&&(n.$L=r),n},m.clone=function(){return b.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),k=_.prototype;return O.prototype=k,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",c],["$y",h],["$D",d]].forEach((function(t){k[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),O.extend=function(t,e){return t.$i||(t(e,_,O),t.$i=!0),O},O.locale=w,O.isDayjs=S,O.unix=function(t){return O(1e3*t)},O.en=D[g],O.Ls=D,O.p={},O}));
} (dayjs_min$1, dayjs_min$1.exports));
return dayjs_min$1.exports;
}
var dayjs_minExports = requireDayjs_min();
var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
var zhCn$1 = {exports: {}};
var zhCn = zhCn$1.exports;
var hasRequiredZhCn;
function requireZhCn () {
if (hasRequiredZhCn) return zhCn$1.exports;
hasRequiredZhCn = 1;
(function (module, exports) {
!function(e,_){module.exports=_(requireDayjs_min());}(zhCn,(function(e){function _(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=_(e),d={name:"zh-cn",weekdays:"星期日_星期一_星期二_星期三_星期四_星期五_星期六".split("_"),weekdaysShort:"周日_周一_周二_周三_周四_周五_周六".split("_"),weekdaysMin:"日_一_二_三_四_五_六".split("_"),months:"一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月".split("_"),monthsShort:"1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split("_"),ordinal:function(e,_){return "W"===_?e+"周":e+"日"},weekStart:1,yearStart:4,formats:{LT:"HH:mm",LTS:"HH:mm:ss",L:"YYYY/MM/DD",LL:"YYYY年M月D日",LLL:"YYYY年M月D日Ah点mm分",LLLL:"YYYY年M月D日ddddAh点mm分",l:"YYYY/M/D",ll:"YYYY年M月D日",lll:"YYYY年M月D日 HH:mm",llll:"YYYY年M月D日dddd HH:mm"},relativeTime:{future:"%s内",past:"%s前",s:"几秒",m:"1 分钟",mm:"%d 分钟",h:"1 小时",hh:"%d 小时",d:"1 天",dd:"%d 天",M:"1 个月",MM:"%d 个月",y:"1 年",yy:"%d 年"},meridiem:function(e,_){var t=100*e+_;return t<600?"凌晨":t<900?"早上":t<1100?"上午":t<1300?"中午":t<1800?"下午":"晚上"}};return t.default.locale(d,null,!0),d}));
} (zhCn$1, zhCn$1.exports));
return zhCn$1.exports;
}
requireZhCn();
// 设置 dayjs 语言为中文
dayjs.locale('zh-cn');
// 导出中文配置
const zhCNLocale = zhCN;
const XConfigProvider = ({ children, locale = zhCNLocale }) => {
return (jsx(ConfigProvider, { prefixCls: "ultraman", locale: locale, children: children }));
};
var classnames = {exports: {}};
/*!
Copyright (c) 2018 Jed Watson.
Licensed under the MIT License (MIT), see
http://jedwatson.github.io/classnames
*/
classnames.exports;
var hasRequiredClassnames;
function requireClassnames () {
if (hasRequiredClassnames) return classnames.exports;
hasRequiredClassnames = 1;
(function (module) {
/* global define */
(function () {
var hasOwn = {}.hasOwnProperty;
function classNames () {
var classes = '';
for (var i = 0; i < arguments.length; i++) {
var arg = arguments[i];
if (arg) {
classes = appendClass(classes, parseValue(arg));
}
}
return classes;
}
function parseValue (arg) {
if (typeof arg === 'string' || typeof arg === 'number') {
return arg;
}
if (typeof arg !== 'object') {
return '';
}
if (Array.isArray(arg)) {
return classNames.apply(null, arg);
}
if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
return arg.toString();
}
var classes = '';
for (var key in arg) {
if (hasOwn.call(arg, key) && arg[key]) {
classes = appendClass(classes, key);
}
}
return classes;
}
function appendClass (value, newClass) {
if (!newClass) {
return value;
}
if (value) {
return value + ' ' + newClass;
}
return value + newClass;
}
if (module.exports) {
classNames.default = classNames;
module.exports = classNames;
} else {
window.classNames = classNames;
}
}());
} (classnames));
return classnames.exports;
}
var classnamesExports = requireClassnames();
var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
// 默认配置
const DEFAULT_COLUMNS = [
{
title: '名称',
dataIndex: 'name',
key: 'name',
},
{
title: '地址',
dataIndex: 'address',
key: 'address',
sorter: (a, b) => a.address.localeCompare(b.address),
}
];
const DEFAULT_SORT_PREFIX_CONFIG = {
sequence: true,
title: '排序',
sortPattern: true,
usePrefix: true,
};
// 获取图片路径的辅助函数
const getImagePath = (path) => {
const prefix = 'https://tj-front.oss-cn-beijing.aliyuncs.com/publicImg/';
return `${prefix}${path}`;
};
// 图片资源常量
const SORT_IMAGES = {
'1': getImagePath('cockpit/sortFirst.png'),
'2': getImagePath('cockpit/sortSecond.png'),
'3': getImagePath('cockpit/sortThree.png'),
};
const EXPAND_IMAGES = {
expanded: 'https://tj-front.oss-cn-beijing.aliyuncs.com/publicImg/cockpit/expanded.svg',
collapsed: 'https://tj-front.oss-cn-beijing.aliyuncs.com/publicImg/cockpit/collapsed.svg',
empty: getImagePath('cockpit/empty.svg'),
};
/**
* 根据索引获取对应的排序前缀内容
* @param index - 排序前缀的索引
* @param sortPattern - 是否使用排序模式
* @param usePrefix - 是否使用前缀包装
* @returns 排序前缀的图片或索引本身
*/
const getSortPrefixContent = (index, sortPattern = true, usePrefix = true) => {
if (!sortPattern) {
return index;
}
// 如果对应索引的图片存在，返回包含图片的 JSX 元素，否则返回索引本身
const imageSrc = SORT_IMAGES[index];
return imageSrc ? (jsx("div", { className: classNames({
'ultraman-sortPrefixWarp': usePrefix,
'ultraman-sortWarp': !usePrefix
}), children: jsx("img", { src: imageSrc, alt: `排序 ${index}` }) })) : index;
};
/**
* 渲染列配置，确保每列都有必要的属性
* @param columns - 列配置数组
* @returns 处理后的列配置数组
*/
const renderColumns = (columns) => {
return columns.map((item) => ({
dataIndex: item.dataIndex || item.key,
ellipsis: true,
...item,
}));
};
const XTable = ({ rowClassName = () => '', activeKeys = null, rowKey = 'key', columns = DEFAULT_COLUMNS, sortPrefixConfig = DEFAULT_SORT_PREFIX_CONFIG, dataSource = [], onChange, borderColor, expandable, ...props }) => {
const extendedDataSource = useMemo(() => {
if (!sortPrefixConfig) {
return [...dataSource];
}
return dataSource.map((record, index) => ({
...record,
sortPrefix: getSortPrefixContent(String(index + 1), sortPrefixConfig === null || sortPrefixConfig === void 0 ? void 0 : sortPrefixConfig.sortPattern, sortPrefixConfig === null || sortPrefixConfig === void 0 ? void 0 : sortPrefixConfig.usePrefix),
}));
}, [dataSource, sortPrefixConfig]);
/**
* 扩展 columns，确保 sortPrefix 列不受排序影响
*/
const extendedColumns = sortPrefixConfig
? [
{
dataIndex: 'sortPrefix',
key: 'sortPrefix',
width: 80,
render: (_, record) => record.sortPrefix || '',
...(sortPrefixConfig || {})
},
...columns, // 在现有列前面加上 sortPrefix 列
]
: columns; // 如果没有排序前缀配置，直接使用传入的 columns
/**
* 处理表格的 onChange 事件，合并内部逻辑与外部传入的 onChange
*/
const handleTableChange = useCallback((pagination, filters, sorter, extra) => {
onChange === null || onChange === void 0 ? void 0 : onChange(pagination, filters, sorter, extra);
}, [onChange]);
/**
* 生成行类名
*/
const getRowClassName = useCallback((record, index) => {
const baseClasses = 'ultraman-rowPrefix';
const activeClass = Array.isArray(activeKeys)
? (activeKeys.includes(record[rowKey]) ? 'ultraman-rowPrefix-active' : '')
: (activeKeys && record[rowKey] === activeKeys ? 'ultraman-rowPrefix-active' : '');
const rowColorClass = index % 2 === 0 ? 'table-tr-even-color' : 'table-tr-odd-color';
const customClass = rowClassName(record, index);
return `${baseClasses} ${activeClass} ${rowColorClass} ${customClass}`.trim();
}, [activeKeys, rowKey, rowClassName]);
/**
* 渲染展开图标
*/
const renderExpandIcon = useCallback(({ expanded, onExpand, record }) => {
const iconSrc = expanded ? EXPAND_IMAGES.expanded : EXPAND_IMAGES.collapsed;
return (jsx("img", { src: iconSrc, alt: expanded ? '收起' : '展开', onClick: (e) => onExpand(record, e) }));
}, []);
return (jsx(XConfigProvider, { children: jsx("div", { className: "ultraman-XTable", style: {
'--border-color': borderColor || '#000',
width: '100%',
position: 'relative',
}, children: jsx(Table, { locale: {
emptyText: (jsx("div", { className: "ultraman-emptyWarp", children: jsx("img", { src: EXPAND_IMAGES.empty, alt: "\u6682\u65E0\u6570\u636E" }) }))
}, rowKey: rowKey, columns: renderColumns(extendedColumns), pagination: false, onChange: handleTableChange, dataSource: extendedDataSource, scroll: { y: 200 }, showSorterTooltip: false, bordered: false, size: "middle", style: { width: '100%' }, expandable: expandable ? {
expandIcon: renderExpandIcon,
...expandable,
} : undefined, className: "ultraman-table-fixed", rowClassName: getRowClassName, ...props }) }) }));
};
// 默认标签项
const DEFAULT_TAB_ITEMS = [
{ label: '高', value: '1' },
{ label: '标签2', value: '2' },
{ label: '标签3', value: '3' },
];
const XTabs = ({ item = DEFAULT_TAB_ITEMS, onChange, defaultActiveKey = "1", type = 'button', className = '', style = {} }) => {
const [activeKey, setActiveKey] = useState(defaultActiveKey);
// 使用 useCallback 优化事件处理函数
const handleTabClick = useCallback((value) => {
setActiveKey(value);
onChange(value);
}, [onChange]);
// 使用 useMemo 优化当前激活标签的内容查找
const activeTabContent = useMemo(() => {
var _a;
return (_a = item.find(tab => tab.value === activeKey)) === null || _a === void 0 ? void 0 : _a.children;
}, [item, activeKey]);
// 使用 useMemo 优化 CSS 类名拼接
const containerClassName = useMemo(() => {
return `ultraman-XTabs-${type} ${className}`.trim();
}, [type, className]);
return (jsxs("div", { className: containerClassName, style: style, role: "tablist", "aria-label": "\u6807\u7B7E\u9875\u5BFC\u822A", children: [jsx("div", { className: "ultraman-tabs", children: item.map(tab => {
const isActive = activeKey === tab.value;
return (jsx("span", { className: `ultraman-tab-item ${isActive ? 'active' : ''}`, onClick: () => handleTabClick(tab.value), role: "tab", "aria-selected": isActive, "aria-controls": `tabpanel-${tab.value}`, tabIndex: isActive ? 0 : -1, children: tab.label }, tab.value));
}) }), jsx("div", { className: "ultraman-tab-content", role: "tabpanel", id: `tabpanel-${activeKey}`, "aria-labelledby": `tab-${activeKey}`, children: activeTabContent })] }));
};
const XDatePicker = ({ className = 'ultraman-datePicker', style, ...props }) => {
return (jsx(XConfigProvider, { children: jsx(DatePicker, { className: className, style: style, ...props }) }));
};
// 默认样式配置
const DEFAULT_STYLE$1 = { width: 100 };
const XGraySelect = ({ theme = 'screen', className, style = DEFAULT_STYLE$1, ...props }) => {
// 使用 useMemo 优化类名计算
const selectClassName = useMemo(() => {
if (className)
return className;
return theme === 'pc' ? '' : 'ultraman-graySelect';
}, [theme, className]);
const popupClassName = useMemo(() => {
return theme === 'pc' ? '' : 'ultraman-dateSelectPopup';
}, [theme]);
return (jsx(ConfigProvider, { prefixCls: "ultraman", children: jsx(Select, { className: selectClassName, popupClassName: popupClassName, style: style, ...props, children: props.children }) }));
};
// 默认样式配置
const DEFAULT_STYLE = { width: 400 };
const XSelect = ({ className = 'ultraman-cockpitSelect', popupClassName = 'ultraman-selectPopup', style = DEFAULT_STYLE, ...props }) => {
// 使用 useMemo 优化图片 URL 计算
const imageUrl = useMemo(() => {
const imgPrefix = 'https://tj-front.oss-cn-beijing.aliyuncs.com/publicImg/';
return `${imgPrefix}cockpit/empty.svg`;
}, []);
// 使用 useEffect 设置 CSS 变量
useEffect(() => {
document.documentElement.style.setProperty('--img-url', `url(${imageUrl})`);
// 清理函数，组件卸载时移除 CSS 变量
return () => {
document.documentElement.style.removeProperty('--img-url');
};
}, [imageUrl]);
return (jsx(XConfigProvider, { children: jsx(Select, { className: className, popupClassName: popupClassName, style: style, ...props, children: props.children }) }));
};
const { RangePicker } = DatePicker;
const XRangePicker = ({ className = 'ultraman-rangePicker', style, ...props }) => {
return (jsx(ConfigProvider, { prefixCls: "ultraman", children: jsx(RangePicker, { className: className, style: style, ...props }) }));
};
const XModal = ({ title, open = true, onClose, onConfirm, confirmText = 'Confirm', cancelText = 'Cancel', children, centered = true, ...modalProps }) => (jsx(ConfigProvider, { prefixCls: "ultraman", children: jsx(Modal, { title: title, open: open, onCancel: onClose, centered: centered, ...modalProps, children: children }) }));
export { XConfigProvider, XDatePicker, XGraySelect, XInput, XModal, XRangePicker, XSelect, XTable, XTabs, XTitle };