From b80206743a37141e8891c9084ea35cd099ab53ef Mon Sep 17 00:00:00 2001 From: saint3347 Date: Tue, 17 Dec 2024 11:10:47 +0800 Subject: [PATCH 01/29] =?UTF-8?q?feat:=20`Form`=20=E6=96=B0=E5=A2=9E=20`co?= =?UTF-8?q?lon`=20=E5=B1=9E=E6=80=A7=EF=BC=8C=E7=94=A8=E4=BA=8E=E6=8E=A7?= =?UTF-8?q?=E5=88=B6=20label=20=E6=98=AF=E5=90=A6=E6=98=BE=E7=A4=BA?= =?UTF-8?q?=E5=86=92=E5=8F=B7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/base/src/form/form-item.tsx | 14 ++++++-- packages/base/src/form/form.tsx | 2 +- .../hooks/src/components/use-form/use-form.ts | 4 ++- .../src/components/use-form/use-form.type.ts | 8 +++++ .../shineout/src/form/__doc__/changelog.cn.md | 8 +++++ .../src/form/__example__/003-label-3.tsx | 33 +++++++++++++++++++ 6 files changed, 64 insertions(+), 5 deletions(-) create mode 100644 packages/shineout/src/form/__example__/003-label-3.tsx diff --git a/packages/base/src/form/form-item.tsx b/packages/base/src/form/form-item.tsx index 9836aa76a..5ad29c91b 100644 --- a/packages/base/src/form/form-item.tsx +++ b/packages/base/src/form/form-item.tsx @@ -12,14 +12,16 @@ const FormItem = (props: FormItemProps) => { const { children, jssStyle, className, style, label, tip, required, ...rest } = props; const formItemClasses = jssStyle?.formItem?.(); const { Provider, ProviderValue, labelConfig, errors, showError, attributes } = useFormItem(); - const { labelWidth, labelAlign, labelVerticalAlign, inline, keepErrorHeight } = { + const { labelWidth, labelAlign, labelVerticalAlign, inline, keepErrorHeight, colon } = { ...labelConfig, ...rest, }; + const renderLabel = () => { - if (label === undefined || label === null) return null; + if (label === undefined || label === null || label === '') return null; + const $colon = colon === true ? ':' : colon; let $tooltip; if (typeof label === 'object' && 'tooltip' in label && label.tooltip) { const tooltipProps = { @@ -46,11 +48,17 @@ const FormItem = (props: FormItemProps) => { return ( <> {label.content} + {$colon} {$tooltip} ); } - return label as React.ReactNode; + return ( + <> + {label} + {$colon} + + ); }; return ( diff --git a/packages/base/src/form/form.tsx b/packages/base/src/form/form.tsx index 4d081764c..8e0c60755 100644 --- a/packages/base/src/form/form.tsx +++ b/packages/base/src/form/form.tsx @@ -1,7 +1,7 @@ import { FormContext, useForm, useInputAble, useLatestObj, usePersistFn, util } from '@sheinx/hooks'; import classNames from 'classnames'; import { useFormFooter } from './form-footer-context'; -import React, { useCallback, useEffect, useRef, useState } from 'react'; +import React, { useEffect, useRef } from 'react'; import type { FormProps } from './form.type'; import type { ObjectType } from '@sheinx/hooks'; diff --git a/packages/hooks/src/components/use-form/use-form.ts b/packages/hooks/src/components/use-form/use-form.ts index cba328be0..c0d04f0bc 100644 --- a/packages/hooks/src/components/use-form/use-form.ts +++ b/packages/hooks/src/components/use-form/use-form.ts @@ -59,6 +59,7 @@ const useForm = (props: UseFormProps) => { rules, throttle = 1000, size, + colon, name: formName, scrollParent, } = props; @@ -560,8 +561,9 @@ const useForm = (props: UseFormProps) => { disabled, size, formName, + colon, }), - [labelWidth, labelAlign, labelVerticalAlign, keepErrorHeight, inline, disabled, size, formName], + [labelWidth, labelAlign, labelVerticalAlign, keepErrorHeight, inline, disabled, size, formName, colon], ); const updateValue = () => { diff --git a/packages/hooks/src/components/use-form/use-form.type.ts b/packages/hooks/src/components/use-form/use-form.type.ts index 1a0f9430e..a799d45b9 100644 --- a/packages/hooks/src/components/use-form/use-form.type.ts +++ b/packages/hooks/src/components/use-form/use-form.type.ts @@ -87,6 +87,14 @@ export interface FormLabelConfig { * @default false */ inline?: boolean; + + /** + * @en Whether to append a colon after the label, the priority is less than the colon setting of Form.Item + * @cn 标签后是否追加显示一个冒号，优先级小于Form.Item的colon设置 + * @default false + * @version 3.6.0 + */ + colon?: boolean | React.ReactNode } export interface FormCommonConfig extends FormLabelConfig { /** diff --git a/packages/shineout/src/form/__doc__/changelog.cn.md b/packages/shineout/src/form/__doc__/changelog.cn.md index 8442842ab..481405ed4 100644 --- a/packages/shineout/src/form/__doc__/changelog.cn.md +++ b/packages/shineout/src/form/__doc__/changelog.cn.md @@ -1,3 +1,11 @@ +## 3.6.0-beta.1 +2024-12-17 + +### 🆕 Feature + +- `Form` 新增 `colon` 属性，用于控制 label 是否显示冒号 ([#875](https://github.com/sheinsight/shineout-next/pull/875)) + + ## 3.5.7-beta.1 2025-01-06 diff --git a/packages/shineout/src/form/__example__/003-label-3.tsx b/packages/shineout/src/form/__example__/003-label-3.tsx new file mode 100644 index 000000000..2f440f954 --- /dev/null +++ b/packages/shineout/src/form/__example__/003-label-3.tsx @@ -0,0 +1,33 @@ +/** + * cn - 标签冒号 + * -- 设置 `Form` 的 `colon` 属性，开启所有label的冒号显示。 + * -- 也可单独设置 `Form.Item` 的 `colon` 属性，优先级高于 `Form` 的 `colon` 属性。 + * -- `colon` 的格式也可以是自定义的ReactNode。 + * en - Label colon + * -- Set the colon property of Form to enable the colon display of all labels. + * -- You can also set the colon property of FormItem separately, which has higher priority than the colon property of Form. + * -- The format of `colon` can also be a custom ReactNode. + */ + +import { useState } from 'react'; +import { Form, Input, Switch, Textarea } from 'shineout'; + +export default () => { + const [colonVisible, setColonVisible] = useState(true); + return ( +
+ + + + + + + + + + +