Merge pull request #790 from ShuyunFF2E/feat-imageText-mly

feat: 新增 Format、ImageText、LightText 组件；配置保存时格式化

Author: liyuan-meng

.eslintrc

@@ -47,7 +47,10 @@
     "semi": ["error", "always"],
     "spaced-comment": ["error", "always"],
     "no-multi-spaces": "error",
-    "no-unused-expressions": ["error", { "allowShortCircuit": true, "allowTernary": true }],
+    "no-unused-expressions": [
+      "error",
+      { "allowShortCircuit": true, "allowTernary": true }
+    ],
     "no-return-assign": "error",
     "max-len": ["error", { "code": 200, "comments": 200 }],
     "quote-props": ["error", "as-needed"],
@@ -58,20 +61,27 @@
     "object-curly-spacing": ["error", "always", { "arraysInObjects": true }],
     "comma-spacing": ["error", { "before": false, "after": true }],
     "arrow-spacing": ["error", { "before": true, "after": true }],
-		"lines-between-class-members": ["error", "always", { "exceptAfterSingleLine": true }],
-		"template-curly-spacing": ["error", "never"],
-		"space-infix-ops": ["error"],
-		"arrow-body-style": "off",
-		"no-undef": "error",
-		"no-multi-assign": "error",
-		"no-nested-ternary": "error",
-		"no-lonely-if": "error",
-		"no-unneeded-ternary": "error",
-		"no-case-declarations": "error",
-		"object-curly-newline": "off",
-		"array-bracket-spacing": "off",
-		"space-before-function-paren": "error",
-    "space-before-blocks": ["error", { "functions": "always", "keywords": "always", "classes": "always" }],
+    "lines-between-class-members": [
+      "error",
+      "always",
+      { "exceptAfterSingleLine": true }
+    ],
+    "template-curly-spacing": ["error", "never"],
+    "space-infix-ops": ["error"],
+    "arrow-body-style": "off",
+    "no-undef": "error",
+    "no-multi-assign": "error",
+    "no-nested-ternary": "error",
+    "no-lonely-if": "error",
+    "no-unneeded-ternary": "error",
+    "no-case-declarations": "error",
+    "object-curly-newline": "off",
+    "array-bracket-spacing": "off",
+    "space-before-function-paren": "error",
+    "space-before-blocks": [
+      "error",
+      { "functions": "always", "keywords": "always", "classes": "always" }
+    ],
     "no-underscore-dangle": "off",
     "global-require": "off",
     "jsx-a11y/no-static-element-interactions": "off",
@@ -86,14 +96,17 @@
     "import/extensions": "off",
 
     // react (eslint-plugin-react required)
-    "react/jsx-filename-extension": ["error", { "extensions": [".js", ".jsx"] }],
+    "react/jsx-filename-extension": [
+      "error",
+      { "extensions": [".js", ".jsx"] }
+    ],
     "react/jsx-no-duplicate-props": ["error"],
     "react/jsx-indent-props": "off",
     "react/jsx-indent": "off",
     "no-promise-executor-return": "off",
     "no-param-reassign": "off",
     "class-methods-use-this": "off",
-    "react/jsx-first-prop-new-line": [ "error", "multiline" ],
+    "react/jsx-first-prop-new-line": ["error", "multiline"],
     "react/prop-types": "off",
     "react/no-children-prop": "off",
 
@@ -123,7 +136,11 @@
     "react/function-component-definition": [
       "warn",
       {
-        "namedComponents": ["function-declaration", "arrow-function", "function-expression"],
+        "namedComponents": [
+          "function-declaration",
+          "arrow-function",
+          "function-expression"
+        ],
         "unnamedComponents": ["arrow-function", "function-expression"]
       }
     ],

.umirc.ts

@@ -92,6 +92,7 @@ export default defineConfig({
     .__dumi-default-layout-hero img { margin-top: -50px }
     .__dumi-default-layout-hero h1 { color: white !important }
     .__dumi-default-layout-hero .markdown { color: white !important }
+    .markdown .icon.icon-link { display: none }
     `,
   ],
 });

src/components/c-cascader/demos/basic.md

@@ -6,16 +6,18 @@ desc: 默认样式
 
 ```jsx
 import React, { useState, useEffect } from "react";
-import { CCascader } from "cloud-react";
+import { CCascader, Tooltip, Icon } from "cloud-react";
 const addressOptions = [
   {
     value: "zhejiang",
     label: "Zhejiang",
+    info: "说明",
 
     children: [
       {
         value: "hangzhou",
         label: "Hangzhou",
+        info: "说明",
         children: [
           {
             value: "xihu",
@@ -128,6 +130,23 @@ export default function Demo() {
         onChange={onChange}
         placeholder="Please select"
         style={{ width: 328 }}
+        optionRender={(option) => {
+          return (
+            <label title={option.title} style={{ display: "flex", gap: 4 }}>
+              {option.label}
+              {option.info && (
+                <Tooltip
+                  content={option.info}
+                  theme="light"
+                  placement="right"
+                  overlayStyle={{ zIndex: 10000 }}
+                >
+                  <Icon type="question-circle" />
+                </Tooltip>
+              )}
+            </label>
+          );
+        }}
       />
       <div style={{ marginBottom: 24, marginTop: 40 }}>任意选项支持选择</div>
       <CCascader

src/components/c-picker/demos/date-picker.md

@@ -12,7 +12,6 @@ desc: 基本用法，日期选择器。
 import React from "react";
 import moment from "moment";
 import { CPicker as DatePicker, Form, Field, Toggle } from "cloud-react";
-
 const { TimePicker } = DatePicker;
 
 const presets = [
@@ -47,6 +46,7 @@ class DatePickerDemo extends React.Component {
   state = {
     value: moment("2021/12/01 16:05:33", "yyyy/MM/DD HH:mm:ss").toDate(),
     time: "17:58:58",
+    value1: moment("2021/12/01 16:05", "yyyy/MM/DD HH:mm").toDate(),
   };
 
   onChange = (value) => {
@@ -60,7 +60,7 @@ class DatePickerDemo extends React.Component {
   };
 
   render() {
-    const { value, time, disabled } = this.state;
+    const { value, value1, time, disabled } = this.state;
     const { init } = this.field;
     return (
       <Form
@@ -118,6 +118,20 @@ class DatePickerDemo extends React.Component {
             presets={presets}
           />
         </Form.Item>
+        <Form.Item label="日期选择器（不显示秒）">
+          <DatePicker
+            value={value}
+            onChange={this.onChange}
+            showToday
+            showTimePicker={{
+              showSecond: false,
+              format: "HH:mm",
+            }}
+            format="YYYY-MM-DD HH:mm"
+            disabled={disabled}
+            presets={presets}
+          />
+        </Form.Item>
         <Form.Item label="时间选择器">
           <TimePicker
             value={time}

src/components/c-table/columnTpl/link.js

@@ -17,7 +17,7 @@ export default function LinkTpl({ value, row, linkKey, link, onClick, line = 1,
         setTooltipContent(value);
       }
     }
-  }, [tooltipValue]);
+  }, [value, tooltipValue]);
 
   if (isVoid(value)) {
     return '-';

src/components/c-table/columnTpl/number.js

@@ -1,3 +1,4 @@
+import { useEffect, useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { formatThousands, isVoid } from '../util';
 
@@ -8,17 +9,27 @@ export default function NumberTpl({
   prefix = '',
   suffix = '',
 }) {
-  let number = value;
-  if (isVoid(number)) {
-    return '-';
-  }
-  if (precision > 0) {
-    number = Number(number).toFixed(precision);
-  }
-  if (isThousands) {
-    number = formatThousands(number);
-  }
-  return `${prefix || ''}${number}${suffix || ''}`;
+  const [resolvedValue, setResolvedValue] = useState(value);
+
+  const getNumberVal = useCallback(() => {
+    let number = value;
+    if (isVoid(number)) {
+      return '';
+    }
+    if (precision > 0) {
+      number = Number(number).toFixed(precision);
+    }
+    if (isThousands) {
+      number = formatThousands(number);
+    }
+    return `${prefix || ''}${number}${suffix || ''}`;
+  }, [value, precision, isThousands, prefix, suffix]);
+
+  useEffect(() => {
+    setResolvedValue(getNumberVal());
+  }, [getNumberVal]);
+
+  return resolvedValue || '-';
 }
 
 NumberTpl.propTypes = {

src/components/c-table/columnTpl/text.js

@@ -17,7 +17,7 @@ export default function TextTpl({ value, line = 1, tooltipValue }) {
         setTooltipContent(value);
       }
     }
-  }, [tooltipValue]);
+  }, [value, tooltipValue]);
 
   if (isVoid(value)) {
     return '-';

src/components/c-table/columnTpl/time.js

@@ -1,15 +1,22 @@
+import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
 import { isVoid } from '../util';
 
 export default function TimeTpl({ value, format }) {
-  if (isVoid(value)) {
-    return '-';
-  }
-  if (format) {
-    return moment(value).format(format);
-  }
-  return `${value}`.replaceAll('/', '-');
+  const [time, setTime] = useState(value);
+
+  useEffect(() => {
+    if (isVoid(value)) {
+      setTime('');
+    } else if (format) {
+      setTime(moment(value).format(format));
+    } else {
+      setTime(`${value}`.replaceAll('/', '-'));
+    }
+  }, [value, format]);
+
+  return time || '-';
 }
 
 TimeTpl.propTypes = {

src/components/c-table/js/rowTooltip.js

@@ -60,6 +60,8 @@ class RowTooltip extends Component {
           tooltipEle,
           checkboxEle || radioEle,
           'top-left',
+          undefined,
+          'top',
         );
 
         const isInModal = document.querySelector(`.${prefixCls}-modal-mask`);

src/components/checkbox/index.js

@@ -14,32 +14,37 @@ function Group(props) {
 
   let checkedValue = value ? [ ...value ] : value;
 
-  const group = Children.map(children, (child) => cloneElement(child, {
-    disabled: disabled === undefined ? child.props.disabled : disabled,
-
-    checked:
-        checkedValue === undefined
-          ? undefined
-          : checkedValue.indexOf(child.props.value) > -1,
-
-    onChange(checked, val) {
-      if (checkedValue === undefined) {
-        checkedValue = [];
-      }
-
-      const index = checkedValue.indexOf(val);
-
-      if (index > -1 && !checked) {
-        checkedValue.splice(index, 1);
-      }
-
-      if (index === -1 && checked) {
-        checkedValue.push(val);
-      }
-
-      onChange(checkedValue);
-    },
-  }));
+  const group = Children.map(children, (child) => {
+    if (child && child.type && [ 'Checkbox', 'ComplexCheckbox' ].includes(child.type.displayName)) {
+      return cloneElement(child, {
+        disabled: disabled === undefined ? child.props.disabled : disabled,
+
+        checked:
+            checkedValue === undefined
+              ? undefined
+              : checkedValue.indexOf(child.props.value) > -1,
+
+        onChange(checked, val) {
+          if (checkedValue === undefined) {
+            checkedValue = [];
+          }
+
+          const index = checkedValue.indexOf(val);
+
+          if (index > -1 && !checked) {
+            checkedValue.splice(index, 1);
+          }
+
+          if (index === -1 && checked) {
+            checkedValue.push(val);
+          }
+
+          onChange(checkedValue);
+        },
+      });
+    }
+    return child;
+  });
 
   const classes = classNames(`${classSelector}-group`, {
     vertical: layout === 'v',
@@ -159,4 +164,6 @@ class Checkbox extends React.Component {
   }
 }
 
+Checkbox.displayName = 'Checkbox';
+
 export default Checkbox;