feat: DataRender 优化

packages/data-render/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@xrenders/data-render",
- "version": "1.0.0-alpha.1",
+ "version": "1.0.0-alpha.7",
  "description": "",
  "keywords": [
  "DataView",
@@ -25,8 +25,8 @@
  "email": "tw93@qq.com"
  },
  {
- "name": "mankaiviky",
- "email": "mankaiviky@163.com"
+ "name": "lhbxs",
+ "email": "596850703@qq.com"
  }
  ],
  "main": "lib/index.js",

packages/data-render/src/models/resolver.tsx

@@ -20,12 +20,17 @@ const InnerHtml = (props: any) => {
 };
 
 export default (props: any, parentData: any, addons: any) => {
- const { dataKey, defaultValue, children, ...rest } = props;
+ const { data, dataKey, defaultValue, children, ...rest } = props;
  const { getDataFromKey, getSourceData, getMethod, getConfig, getWidget } = addons;
  const sourceData = getSourceData();
 
  // 当组件配置 dataKey，根据 dataKey 获取服务端对应数据，否则继承父级数据
  let value = dataKey ? getDataFromKey(dataKey, parentData, defaultValue) : defaultValue ?? parentData;
+
+ // 如果有传人的数据，直接使用
+ if (data !== undefined) {
+ value = data;
+ }
 
  // 解析函数表达式，替换值
  const restProps = parseAllExpression(rest, {
@@ -35,7 +40,7 @@ export default (props: any, parentData: any, addons: any) => {
  });
  // console.log('before:', props, 'after:', restProps);
 
- const { widget, data, showLevel: _showLevel, format, getCompProps, hidden, ...componentProps } = restProps;
+ const { widget, showLevel: _showLevel, format, getCompProps, hidden, ...componentProps } = restProps;
 
  if (hidden && typeof hidden === 'boolean') {
  return;
@@ -57,11 +62,6 @@ export default (props: any, parentData: any, addons: any) => {
  return null;
  }
 
- // 如果有传人的数据，直接使用
- if (data !== undefined) {
- value = data;
- }
-
  // 数据进行格式化
  if (['html'].includes(format?.type)) {
  value = <InnerHtml data={value} />;

packages/data-render/src/widgets/FButton/index.less

@@ -1,10 +1,10 @@
-.dtv-button {
+.dr-button {
  height: 22px;
  padding: 0;
  line-height: 22px;
 }
 
-.dtv-button-modal {
+.dr-button-modal {
  .ant-modal-confirm-content {
  margin-left: 0 !important;
  overflow: auto;

packages/data-render/src/widgets/FButton/index.tsx

@@ -106,7 +106,7 @@ const FButton: React.FC<FButtonProps> = (props) => {
  width: contentWidth,
  centered,
  okText,
- className: 'dtv-button-modal',
+ className: 'dr-button-modal',
  ...modalProps,
  content: addons.renderer({ schema: children, data: modalData, addons }),
  });
@@ -203,7 +203,7 @@ const FButton: React.FC<FButtonProps> = (props) => {
  const text = content || data;
 
  const buttonProps: ButtonProps = {
- className: combineClass('dtv-button', className),
+ className: combineClass('dr-button', className),
  type,
  target,
  href: eventType === 'iframe' ? undefined : href,

packages/data-render/src/widgets/FButtonFold/index.less

@@ -1,10 +1,10 @@
-.dtv-button {
+.dr-button {
  height: 22px;
  padding: 0;
  line-height: 22px;
 }
 
-.dtv-button-modal {
+.dr-button-modal {
  .ant-modal-confirm-content {
  margin-left: 0 !important;
  overflow: auto;

packages/data-render/src/widgets/FButtonFold/index.tsx

@@ -36,7 +36,7 @@ const FButtonFold = (props: any) => {
  return (
  <>
  <Button
- className={combineClass('dtv-button-fold', className)}
+ className={combineClass('dr-button-fold', className)}
  type="link"
  {...otherProps}
  onClick={handleClick}

packages/data-render/src/widgets/FCard/index.less

@@ -1,3 +1,4 @@
-.dtv-tooltip {
- margin-top: 8px;
+.dr-card {
+ margin-top: 16px;
+ border-color: #f4f4f4;
 }

packages/data-render/src/widgets/FCard/index.tsx

@@ -3,21 +3,23 @@ import { Card } from 'antd';
 import { combineClass, isReactNodeSchema } from '../utils/common';
 import './index.less';
 
-const FCard = (props: any) => {
+export default (props: any) => {
  const { data, childSchema, className, style, title, extra, addons, ...otherProps } = props;
+
  let cardTitle = <div dangerouslySetInnerHTML={{ __html: title }} />;
  let cardExtra = extra;
+
  if (isReactNodeSchema(title)) {
  cardTitle = addons.renderer({ schema: title, data, addons });
  }
 
  if (isReactNodeSchema(extra)) {
  cardExtra = addons.renderer({ schema: extra, data, addons });
  }
-
+ 
  return (
  <Card
- className={combineClass('dtv-card', className)}
+ className={combineClass('dr-card', className)}
  style={style}
  {...otherProps}
  title={cardTitle}
@@ -26,6 +28,4 @@ const FCard = (props: any) => {
  {addons.renderer({ schema: childSchema, data, addons })}
  </Card>
  );
-};
-
-export default FCard;
+}

packages/data-render/src/widgets/FDescriptions/index.tsx

@@ -178,6 +178,7 @@ const FDescriptions = (props: any) => {
  addons,
  schema: {
  widget: 'FText',
+ data: _itemData,
  ...itemProps,
  hidden: contentHidden,
  useType: 'internal',

packages/data-render/src/widgets/FEncryption/index.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import Encryption from '../components/Encryption';
-import { getValueFromKey } from '../utils/common';
 
 /**
  *
@@ -9,11 +8,11 @@ import { getValueFromKey } from '../utils/common';
 const FEncryption = (props: any) => {
  const { data, method, addons, ...otherProps } = props;
 
+ const sourceData = addons.getSourceData();
  const parentData = addons.getParentData();
  const dataKey = addons.dataKey;
-
- const encryInfo: any =
- getValueFromKey({ path: 'source:encryInfo', defaultValue: {}, addons }) || {};
+ const encryInfo: any = sourceData?.encryInfo || {};
+
  let showKey = (method?.showKey ?? '') + dataKey;
  if (method?.extraShowKey) {
  showKey = parentData[dataKey + method.extraShowKey];

packages/data-render/src/widgets/FImage/index.tsx

@@ -7,8 +7,8 @@ import './index.less';
  *
  * 图片组件
  */
-const FImage = (props: any) => {
- const [{ data, className, style, images, preview = false, addons, ...imageProps }] = props;
+export default (props: any) => {
+ const { data, className, style, images, preview = false, addons, ...imageProps } = props;
 
  let src = data;
  if (images) {
@@ -24,6 +24,4 @@ const FImage = (props: any) => {
  {...imageProps}
  />
  );
-};
-
-export default FImage;
+}

packages/data-render/src/widgets/FLabel/index.less

@@ -1,4 +1,4 @@
-.dtv-label {
+.dr-label {
  font-size: 14px;
  line-height: 24px;
 

packages/data-render/src/widgets/FLabel/index.tsx

@@ -8,7 +8,7 @@ const FLabel = (props: any) => {
  const { colon = true, label, className, style, labelStyle, contentStyle, ...otherProps } = props;
 
  return (
- <div className={combineClass('dtv-label', className)} style={style}>
+ <div className={combineClass('dr-label', className)} style={style}>
  <span className="label" style={labelStyle}>
  {label}
  {colon && '：'}

packages/data-render/src/widgets/FPanel/index.tsx

@@ -19,7 +19,7 @@ const FPanel = (props: any) => {
  } = props;
 
  return (
- <div className={combineClass('dtv-panel', className)} style={style}>
+ <div className={combineClass('dr-panel', className)} style={style}>
  {title && <FTitle data={title} showIcon={titleShowIcon} style={titleStyle} />}
  {render
  ? addons.getMethod(render)(data, props)

packages/data-render/src/widgets/FProgress/index.less

@@ -1,4 +1,4 @@
-.dtv-progress {
+.dr-progress {
  width: 100%;
  padding: 10px 0 0 5px;
  overflow-y: auto;

packages/data-render/src/widgets/FProgress/index.tsx

@@ -9,7 +9,7 @@ const FTimeline = (props: any) => {
  return (
  <>
  <FTitle data={title} />
- <div className={combineClass('dtv-progress', className)}>
+ <div className={combineClass('dr-progress', className)}>
  {data.map((item: any, index: number) => (
  <div
  key={item.content}

packages/data-render/src/widgets/FProgressBar/index.tsx

@@ -26,7 +26,7 @@ const FProgressBar: React.FC<FProgressBarProps> = (props) => {
 
  return (
  <Progress
- className={combineClass('dtv-progess', className)}
+ className={combineClass('dr-progess', className)}
  style={style}
  format={formatFunc ? handleformatFunc : undefined}
  percent={isType(data, ['number', 'string']) ? data : 0}

packages/data-render/src/widgets/FRadioGroup/index.tsx

@@ -72,7 +72,7 @@ const FRadioGroup: React.FC<FRadioGroupProps> = (props) => {
 
  return (
  <Radio.Group
- className={combineClass('dtv-radio-group', className)}
+ className={combineClass('dr-radio-group', className)}
  style={style}
  onChange={handleChange}
  value={value}

packages/data-render/src/widgets/FRow/index.less

@@ -1,4 +1,4 @@
-.dtv-row {
+.dr-row {
  height: 100%;
 
  .col-item {

packages/data-render/src/widgets/FRow/index.tsx

@@ -9,7 +9,7 @@ const FRow = (props: any) => {
  const { items, data, hasBackground, className, addons, ...options } = props;
 
  return (
- <Row className={combineClass('dtv-row', className)} wrap={false} {...options}>
+ <Row className={combineClass('dr-row', className)} wrap={false} {...options}>
  {(items || []).map((item: any, index: number) => {
  const { children, className: itemClassName, ...itemOptions } = item;
  return (

packages/data-render/src/widgets/FSpace/index.tsx

@@ -17,7 +17,7 @@ const FSpace = (props: any) => {
  } = props;
 
  return (
- <div className={combineClass('dtv-space', className)} style={style}>
+ <div className={combineClass('dr-space', className)} style={style}>
  {label && <span style={labelStyle}>{label}：</span>}
  <Space style={spaceStyle} split={split ? <Divider type="vertical" /> : null} {...spaceProps}>
  {childSchema.map((schema: any, index: number) =>

packages/data-render/src/widgets/FStatistic/index.tsx

@@ -40,7 +40,7 @@ const FStatistic: React.FC<FStatisticProps> = (props) => {
 
  return (
  <Statistic
- className={combineClass('dtv-statistic', className)}
+ className={combineClass('dr-statistic', className)}
  style={style}
  value={isType(data, ['number', 'string']) ? data : 0}
  title={titleNode}

packages/data-render/src/widgets/FSteps/index.less

@@ -1,4 +1,4 @@
-.dtv-steps {
+.dr-steps {
  width: 100%;
  padding: 10px 15px;
 }

packages/data-render/src/widgets/FSteps/index.tsx

@@ -25,7 +25,7 @@ const FSteps = (props: any) => {
  <Steps
  {...otherProps}
  size={size}
- className={combineClass('dtv-steps', className)}
+ className={combineClass('dr-steps', className)}
  style={style}
  >
  {data.map((item: any, index: number) => (

packages/data-render/src/widgets/FTags/index.tsx

@@ -39,7 +39,7 @@ const FTags: FC = (props: any) => {
  }
 
  return (
- <div className={combineClass('dtv-tags', className)} style={style}>
+ <div className={combineClass('dr-tags', className)} style={style}>
  {list.map(renderTag(tagProps, addons))}
  </div>
  );

packages/data-render/src/widgets/FTextEllipsis/index.tsx

@@ -23,7 +23,7 @@ const FTextEllipsis = (props: any) => {
  const parentData = addons.getParentData();
 
  return (
- <div className={combineClass('dtv-textellipsis', className)} style={style}>
+ <div className={combineClass('dr-textellipsis', className)} style={style}>
  <TextEllipsis
  height={height}
  data={data}

packages/data-render/src/widgets/FTimeline/index.tsx

@@ -15,7 +15,7 @@ const FTimeline = (props: any) => {
  return (
  <>
  <FTitle data={title} />
- <Timeline className={combineClass('dtv-timeline', className)} style={style} {...otherProps}>
+ <Timeline className={combineClass('dr-timeline', className)} style={style} {...otherProps}>
  {(data || []).map((item: any = {}, index: number) => (
  <Timeline.Item key={index} {...otherLineItem} color={item[colorKey] || 'gray'}>
  <span className="line-item-time">{item[timeKey]}</span>

packages/data-render/src/widgets/FTitle/index.less

@@ -1,4 +1,4 @@
-.dtv-title {
+.dr-title {
  display: flex;
  align-items: center;
  margin-bottom: 10px;

packages/data-render/src/widgets/FTitle/index.tsx

@@ -14,7 +14,7 @@ const FTitle = (props: any) => {
  }
 
  return (
- <div className={combineClass('dtv-title', className)} style={otherStyle}>
+ <div className={combineClass('dr-title', className)} style={otherStyle}>
  {showType === 1 && <span className="view-title-icon" />}
  <Title className="view-title" level={level} style={{ color, fontSize }} {...otherProps}>
  {data}

packages/data-render/src/widgets/FTooltip/index.less

@@ -1,3 +1,3 @@
-.dtv-tooltip {
+.dr-tooltip {
  margin-top: 8px;
 }

packages/data-render/src/widgets/FTooltip/index.tsx

@@ -9,7 +9,7 @@ const FTooltip = (props: any) => {
 
  return (
  <Tooltip
- className={combineClass('dtv-tooltip', className)}
+ className={combineClass('dr-tooltip', className)}
  color="#fff"
  overlayInnerStyle={{
  color: '#141414',