@douyinfe/semi-ui 2.28.2 → 2.29.0

package/lib/cjs/transfer/index.d.ts

@@ -75,7 +75,20 @@ interface HeaderConfig {
     onAllClick: () => void;
     type: string;
     showButton: boolean;
+    num: number;
+    allChecked?: boolean;
 }
+declare type SourceHeaderProps = {
+    num: number;
+    showButton: boolean;
+    allChecked: boolean;
+    onAllClick: () => void;
+};
+declare type SelectedHeaderProps = {
+    num: number;
+    showButton: boolean;
+    onClear: () => void;
+};
 export interface TransferState {
     data: Array<ResolvedDataItem>;
     selectedItems: Map<number | string, ResolvedDataItem>;
@@ -105,6 +118,8 @@ export interface TransferProps {
     renderSelectedItem?: (item: RenderSelectedItemProps) => React.ReactNode;
     renderSourcePanel?: (sourcePanelProps: SourcePanelProps) => React.ReactNode;
     renderSelectedPanel?: (selectedPanelProps: SelectedPanelProps) => React.ReactNode;
+    renderSourceHeader?: (headProps: SourceHeaderProps) => React.ReactNode;
+    renderSelectedHeader?: (headProps: SelectedHeaderProps) => React.ReactNode;
 }
 declare class Transfer extends BaseComponent<TransferProps, TransferState> {
     static propTypes: {
@@ -156,7 +171,7 @@ declare class Transfer extends BaseComponent<TransferProps, TransferState> {
     onSelectOrRemove(item: ResolvedDataItem): void;
     onSortEnd(callbackProps: OnSortEndProps): void;
     renderFilter(locale: Locale['Transfer']): JSX.Element;
-    renderHeader(headerConfig: HeaderConfig): JSX.Element;
+    renderHeader(headerConfig: HeaderConfig): string | number | boolean | React.ReactFragment | JSX.Element;
     renderLeftItem(item: ResolvedDataItem, index: number): string | number | boolean | React.ReactFragment | JSX.Element;
     renderLeft(locale: Locale['Transfer']): string | number | boolean | React.ReactFragment | JSX.Element;
     renderGroupTitle(group: GroupItem, index: number): JSX.Element;

package/lib/cjs/transfer/index.js

@@ -222,7 +222,9 @@ class Transfer extends _baseComponent.default {
 
   renderHeader(headerConfig) {
     const {
-      disabled
+      disabled,
+      renderSourceHeader,
+      renderSelectedHeader
     } = this.props;
     const {
       totalContent,
@@ -236,6 +238,35 @@ class Transfer extends _baseComponent.default {
       [`${prefixCls}-right-header`]: type === 'right',
       [`${prefixCls}-left-header`]: type === 'left'
     });
+
+    if (type === 'left' && typeof renderSourceHeader === 'function') {
+      const {
+        num,
+        showButton,
+        allChecked,
+        onAllClick
+      } = headerConfig;
+      return renderSourceHeader({
+        num,
+        showButton,
+        allChecked,
+        onAllClick
+      });
+    }
+
+    if (type === 'right' && typeof renderSelectedHeader === 'function') {
+      const {
+        num,
+        showButton,
+        onAllClick: onClear
+      } = headerConfig;
+      return renderSelectedHeader({
+        num,
+        showButton,
+        onClear
+      });
+    }
+
     return /*#__PURE__*/_react.default.createElement("div", {
       className: headerCls
     }, /*#__PURE__*/_react.default.createElement("span", {
@@ -311,7 +342,9 @@ class Transfer extends _baseComponent.default {
       allContent: leftContainesNotInSelected ? locale.selectAll : locale.clearSelectAll,
       onAllClick: () => this.foundation.handleAll(leftContainesNotInSelected),
       type: 'left',
-      showButton: type !== _constants.strings.TYPE_TREE_TO_LIST
+      showButton: type !== _constants.strings.TYPE_TREE_TO_LIST,
+      num: showNumber,
+      allChecked: !leftContainesNotInSelected
     };
     const inputCom = this.renderFilter(locale);
     const headerCom = this.renderHeader(headerConfig);
@@ -561,7 +594,8 @@ class Transfer extends _baseComponent.default {
       allContent: locale.clear,
       onAllClick: () => this.foundation.handleClear(),
       type: 'right',
-      showButton: Boolean(selectedData.length)
+      showButton: Boolean(selectedData.length),
+      num: selectedData.length
     };
     const headerCom = this.renderHeader(headerConfig);
     const emptyCom = this.renderEmpty('right', emptyContent.right ? emptyContent.right : locale.emptyRight);

package/lib/es/datePicker/dateInput.d.ts

@@ -41,7 +41,7 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
         rangeInputStartRef: PropTypes.Requireable<object>;
         rangeInputEndRef: PropTypes.Requireable<object>;
         rangeSeparator: PropTypes.Requireable<string>;
-        insetInput: PropTypes.Requireable<boolean>;
+        insetInput: PropTypes.Requireable<NonNullable<boolean | object>>;
         insetInputValue: PropTypes.Requireable<object>;
         defaultPickerValue: PropTypes.Requireable<NonNullable<string | number | object>>;
     };

package/lib/es/datePicker/dateInput.js

@@ -1,3 +1,5 @@
+import _get from "lodash/get";
+
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
 
@@ -272,7 +274,8 @@ export default class DateInput extends BaseComponent {
       prefixCls,
       rangeInputStartRef,
       rangeInputEndRef,
-      density
+      density,
+      insetInput
     } = this.props;
 
     const _isRangeType = type.includes('Range');
@@ -281,6 +284,14 @@ export default class DateInput extends BaseComponent {
       value,
       insetInputValue
     });
+
+    const {
+      dateStart,
+      dateEnd,
+      timeStart,
+      timeEnd
+    } = _get(insetInput, 'placeholder', {});
+
     const {
       datePlaceholder,
       timePlaceholder
@@ -293,14 +304,14 @@ export default class DateInput extends BaseComponent {
     }, /*#__PURE__*/React.createElement(InsetDateInput, {
       forwardRef: rangeInputStartRef,
       insetInputValue: newInsetInputValue,
-      placeholder: datePlaceholder,
+      placeholder: dateStart !== null && dateStart !== void 0 ? dateStart : datePlaceholder,
       valuePath: 'monthLeft.dateInput',
       onChange: this.handleInsetInputChange,
       onFocus: e => handleInsetDateFocus(e, 'rangeStart')
     }), /*#__PURE__*/React.createElement(InsetTimeInput, {
       disabled: !newInsetInputValue.monthLeft.dateInput,
       insetInputValue: newInsetInputValue,
-      placeholder: timePlaceholder,
+      placeholder: timeStart !== null && timeStart !== void 0 ? timeStart : timePlaceholder,
       type: type,
       valuePath: 'monthLeft.timeInput',
       onChange: this.handleInsetInputChange,
@@ -310,14 +321,14 @@ export default class DateInput extends BaseComponent {
     }, density === 'compact' ? null : '-'), /*#__PURE__*/React.createElement(InsetDateInput, {
       forwardRef: rangeInputEndRef,
       insetInputValue: newInsetInputValue,
-      placeholder: datePlaceholder,
+      placeholder: dateEnd !== null && dateEnd !== void 0 ? dateEnd : datePlaceholder,
       valuePath: 'monthRight.dateInput',
       onChange: this.handleInsetInputChange,
       onFocus: e => handleInsetDateFocus(e, 'rangeEnd')
     }), /*#__PURE__*/React.createElement(InsetTimeInput, {
       disabled: !newInsetInputValue.monthRight.dateInput,
       insetInputValue: newInsetInputValue,
-      placeholder: timePlaceholder,
+      placeholder: timeEnd !== null && timeEnd !== void 0 ? timeEnd : timePlaceholder,
       type: type,
       valuePath: 'monthRight.timeInput',
       onChange: this.handleInsetInputChange,
@@ -443,7 +454,7 @@ DateInput.propTypes = {
   rangeInputStartRef: PropTypes.object,
   rangeInputEndRef: PropTypes.object,
   rangeSeparator: PropTypes.string,
-  insetInput: PropTypes.bool,
+  insetInput: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
   insetInputValue: PropTypes.object,
   defaultPickerValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object, PropTypes.array])
 };

package/lib/es/datePicker/datePicker.js

@@ -603,7 +603,7 @@ export default class DatePicker extends BaseComponent {
       insetInputValue,
       value
     } = this.state;
-    const insetInputProps = {
+    const props = {
       dateFnsLocale,
       format,
       insetInputValue,
@@ -618,8 +618,8 @@ export default class DatePicker extends BaseComponent {
       density,
       defaultPickerValue
     };
-    return insetInput ? /*#__PURE__*/React.createElement(DateInput, Object.assign({}, insetInputProps, {
-      insetInput: true
+    return insetInput ? /*#__PURE__*/React.createElement(DateInput, Object.assign({}, props, {
+      insetInput: insetInput
     })) : null;
   }
 
@@ -684,7 +684,7 @@ export default class DatePicker extends BaseComponent {
       format,
       multiple,
       validateStatus,
-      inputReadOnly: inputReadOnly || insetInput,
+      inputReadOnly: inputReadOnly || Boolean(insetInput),
       // onClick: this.handleOpenPanel,
       onBlur: this.handleInputBlur,
       onFocus: this.handleInputFocus,

package/lib/es/datePicker/index.d.ts

@@ -7,5 +7,6 @@ export type { MonthProps } from './month';
 export type { MonthsGridProps } from './monthsGrid';
 export type { QuickControlProps } from './quickControl';
 export type { YearAndMonthProps } from './yearAndMonth';
+export type { InsetInputProps } from '@douyinfe/semi-foundation/lib/es/datePicker/inputFoundation';
 declare const _default: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<DatePicker>>;
 export default _default;

package/lib/es/datePicker/quickControl.d.ts

@@ -3,12 +3,13 @@ import PropTypes from 'prop-types';
 import { strings } from '@douyinfe/semi-foundation/lib/es/datePicker/constants';
 import { noop } from '@douyinfe/semi-foundation/lib/es/utils/function';
 import { PresetsType, PresetType } from '@douyinfe/semi-foundation/lib/es/datePicker/foundation';
+import { DateInputFoundationProps } from '@douyinfe/semi-foundation/lib/es/datePicker/inputFoundation';
 export interface QuickControlProps {
     presets: PresetsType;
     presetPosition: typeof strings.PRESET_POSITION_SET[number];
     onPresetClick: (preset: PresetType, e: React.MouseEvent) => void;
     type: string;
-    insetInput: boolean;
+    insetInput: DateInputFoundationProps['insetInput'];
 }
 declare class QuickControl extends PureComponent<QuickControlProps> {
     static propTypes: {
@@ -16,7 +17,7 @@ declare class QuickControl extends PureComponent<QuickControlProps> {
         presetPosition: PropTypes.Requireable<"left" | "top" | "right" | "bottom">;
         onPresetClick: PropTypes.Requireable<(...args: any[]) => any>;
         type: PropTypes.Requireable<string>;
-        insetInput: PropTypes.Requireable<boolean>;
+        insetInput: PropTypes.Requireable<NonNullable<boolean | object>>;
     };
     static defaultProps: {
         presets: PresetsType;

package/lib/es/datePicker/quickControl.js

@@ -90,7 +90,7 @@ QuickControl.propTypes = {
   presetPosition: PropTypes.oneOf(strings.PRESET_POSITION_SET),
   onPresetClick: PropTypes.func,
   type: PropTypes.string,
-  insetInput: PropTypes.bool
+  insetInput: PropTypes.oneOfType([PropTypes.bool, PropTypes.object])
 };
 QuickControl.defaultProps = {
   presets: [],

package/lib/es/form/group.d.ts

@@ -6,6 +6,8 @@ import { FormUpdaterContextType } from '@douyinfe/semi-foundation/lib/es/form/in
 export interface InputGroupProps extends BacisInputGroupProps {
     label?: LabelProps;
     labelPosition?: 'left' | 'top';
+    extraText?: React.ReactNode;
+    extraTextPosition?: 'bottom' | 'middle';
 }
 declare class FormInputGroup extends Component<InputGroupProps> {
     static contextType: React.Context<FormUpdaterContextType>;

package/lib/es/form/group.js

@@ -68,9 +68,11 @@ class FormInputGroup extends Component {
     const _a = this.props,
           {
       children,
-      label
+      label,
+      extraText,
+      extraTextPosition
     } = _a,
-          rest = __rest(_a, ["children", "label"]);
+          rest = __rest(_a, ["children", "label", "extraText", "extraTextPosition"]);
 
     const updater = this.context;
     const formProps = updater.getFormProps(['labelPosition', 'labelWidth', 'labelAlign', 'showValidateIcon', 'wrapperCol', 'labelCol']);
@@ -103,11 +105,20 @@ class FormInputGroup extends Component {
       showValidateIcon: formProps.showValidateIcon,
       isInInputGroup: true
     });
+    const extraCls = classNames(`${prefix}-field-extra`, {
+      [`${prefix}-field-extra-string`]: typeof extraText === 'string',
+      [`${prefix}-field-extra-middle`]: extraTextPosition === 'middle',
+      [`${prefix}-field-extra-bottom`]: extraTextPosition === 'bottom'
+    });
+    const extraContent = extraText ? /*#__PURE__*/React.createElement("div", {
+      className: extraCls,
+      "x-semi-prop": "extraText"
+    }, extraText) : null;
     let content;
 
     switch (true) {
       case !appendCol:
-        content = /*#__PURE__*/React.createElement(React.Fragment, null, labelContent, /*#__PURE__*/React.createElement("div", null, inputGroupContent, groupErrorContent));
+        content = /*#__PURE__*/React.createElement(React.Fragment, null, labelContent, /*#__PURE__*/React.createElement("div", null, extraTextPosition === 'middle' ? extraContent : null, inputGroupContent, extraTextPosition === 'bottom' ? extraContent : null, groupErrorContent));
         break;
 
       case appendCol && labelPosition === 'top':
@@ -118,13 +129,13 @@ class FormInputGroup extends Component {
           }
         }, /*#__PURE__*/React.createElement(Col, Object.assign({}, labelCol, {
           className: labelColCls
-        }), labelContent)), /*#__PURE__*/React.createElement(Col, Object.assign({}, wrapperCol), inputGroupContent, groupErrorContent));
+        }), labelContent)), /*#__PURE__*/React.createElement(Col, Object.assign({}, wrapperCol), extraTextPosition === 'middle' ? extraContent : null, inputGroupContent, extraTextPosition === 'bottom' ? extraContent : null, groupErrorContent));
         break;
 
       case appendCol && labelPosition !== 'top':
         content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Col, Object.assign({}, labelCol, {
           className: labelColCls
-        }), labelContent), /*#__PURE__*/React.createElement(Col, Object.assign({}, wrapperCol), inputGroupContent, groupErrorContent));
+        }), labelContent), /*#__PURE__*/React.createElement(Col, Object.assign({}, wrapperCol), extraTextPosition === 'middle' ? extraContent : null, inputGroupContent, extraTextPosition === 'bottom' ? extraContent : null, groupErrorContent));
         break;
 
       default:

package/lib/es/locale/interface.d.ts

@@ -3,11 +3,10 @@ export interface Locale {
     code: string;
     dateFnsLocale: dateFnsLocale;
     Pagination: {
-        item: string;
-        page: string;
         pageSize: string;
         total: string;
         jumpTo: string;
+        page: string;
     };
     Modal: {
         confirm: string;

package/lib/es/locale/source/ar.js

@@ -3,11 +3,10 @@ const local = {
   code: 'ar',
   dateFnsLocale: arSA,
   Pagination: {
-    item: 'بند',
-    pageSize: ' العناصر / الصفحة',
-    page: ' الصفحات',
-    total: '',
-    jumpTo: 'اقفز إلى'
+    pageSize: 'عدد العناصر في كل صفحة : ${pageSize} ',
+    total: 'مجموع الصفحات: ${total}',
+    jumpTo: 'اقفز إلى',
+    page: ' الصفحات'
   },
   Modal: {
     confirm: 'تؤكد',
@@ -115,7 +114,7 @@ const local = {
     AM: '${time} صباح',
     PM: '${time} في الظهيرة',
     datestring: '',
-    remaining: '${remained} أكثر'
+    remaining: 'الكمية المتبقية: ${remained}'
   },
   Upload: {
     mainText: 'انقر لتحميل الملف أو اسحب الملف إلى هنا',
@@ -145,8 +144,8 @@ const local = {
     clear: 'واضح',
     selectAll: 'اختر الكل',
     clearSelectAll: 'إلغاء تحديد الكل',
-    total: 'مجموع ${total} العناصر',
-    selected: '${total} العناصر المحدد'
+    total: "الكمية الإجمالية: ${total}",
+    selected: "الكمية المحددة: ${total}"
   },
   Form: {
     optional: '(اختياري)'

package/lib/es/locale/source/de.js

@@ -3,11 +3,10 @@ const local = {
   code: 'de',
   dateFnsLocale: de,
   Pagination: {
-    item: 'Artikel',
-    pageSize: ' Artikel / Seite',
-    page: ' Seiten',
-    total: '',
-    jumpTo: 'Springen zu'
+    pageSize: '${pageSize} Artikel / Seite',
+    total: '${total} Seiten',
+    jumpTo: 'Springen zu',
+    page: ' Seiten'
   },
   Modal: {
     confirm: 'Bestätigen',

package/lib/es/locale/source/en_GB.js

@@ -3,11 +3,10 @@ const local = {
   code: 'en-GB',
   dateFnsLocale: enGB,
   Pagination: {
-    item: 'item',
-    pageSize: ' items / page',
-    page: ' pages',
-    total: '',
-    jumpTo: 'Jump to'
+    pageSize: '${pageSize} items / page',
+    total: '${total} pages',
+    jumpTo: 'Jump to',
+    page: ' page'
   },
   Modal: {
     confirm: 'Confirm',

package/lib/es/locale/source/en_US.js

@@ -3,11 +3,10 @@ const local = {
   code: 'en-US',
   dateFnsLocale: enUS,
   Pagination: {
-    item: 'item',
-    pageSize: ' items / page',
-    page: ' pages',
-    total: '',
-    jumpTo: 'Jump to'
+    pageSize: '${pageSize} items / page',
+    total: '${total} pages',
+    jumpTo: 'Jump to',
+    page: ' page'
   },
   Modal: {
     confirm: 'Confirm',

package/lib/es/locale/source/es.js

@@ -8,11 +8,10 @@ const locale = {
   code: 'es',
   dateFnsLocale: es,
   Pagination: {
-    item: 'objeto',
-    pageSize: ' objetos / página',
-    page: ' páginas',
-    total: '',
-    jumpTo: 'Ir a'
+    pageSize: '${pageSize} objetos / página',
+    total: '${total} páginas',
+    jumpTo: 'Ir a',
+    page: ' páginas'
   },
   Modal: {
     confirm: 'Aceptar',

package/lib/es/locale/source/fr.js

@@ -3,11 +3,10 @@ const local = {
   code: 'fr',
   dateFnsLocale: fr,
   Pagination: {
-    item: 'article',
-    pageSize: ' articles/page',
-    page: ' pages',
-    total: '',
-    jumpTo: 'Sauter à'
+    pageSize: '${pageSize} articles/page',
+    total: '${total} pages',
+    jumpTo: 'Sauter à',
+    page: ' pages'
   },
   Modal: {
     confirm: 'Confirmer',

package/lib/es/locale/source/id_ID.js

@@ -3,11 +3,10 @@ const local = {
   code: 'id-ID',
   dateFnsLocale: id,
   Pagination: {
-    item: 'item',
-    pageSize: ' item / halaman',
-    page: ' halaman',
-    total: '',
-    jumpTo: 'Langsung ke'
+    pageSize: '${pageSize} item / halaman',
+    total: '${total} halaman',
+    jumpTo: 'Langsung ke',
+    page: ' halaman'
   },
   Modal: {
     confirm: 'Konfirmasi',

package/lib/es/locale/source/it.js

@@ -3,11 +3,10 @@ const local = {
   code: 'it',
   dateFnsLocale: it,
   Pagination: {
-    item: 'elemento',
-    pageSize: ' elementi / pagine',
-    page: ' pagine',
-    total: '',
-    jumpTo: 'Vai a'
+    pageSize: '${pageSize} elementi / pagine',
+    total: '${total} pagine',
+    jumpTo: 'Vai a',
+    page: ' pagine'
   },
   Modal: {
     confirm: 'Conferma',

package/lib/es/locale/source/ja_JP.js

@@ -3,11 +3,10 @@ const local = {
   code: 'ja-JP',
   dateFnsLocale: ja,
   Pagination: {
-    item: '個数',
-    page: 'ページ',
-    pageSize: '個数 / ページ',
-    total: '合計',
-    jumpTo: 'ページへ'
+    pageSize: '${pageSize} 個数 / ページ',
+    total: '合計 ${total} ページ',
+    jumpTo: 'ページへ',
+    page: 'ページ'
   },
   Modal: {
     confirm: '確認する',

package/lib/es/locale/source/ko_KR.js

@@ -3,11 +3,10 @@ const local = {
   code: 'ko-KR',
   dateFnsLocale: ko,
   Pagination: {
-    item: '기사',
-    page: '페이지',
-    pageSize: '기사 / 페이지',
-    total: '',
-    jumpTo: '이동'
+    pageSize: '${pageSize} 기사 / 페이지',
+    total: '${total} 페이지',
+    jumpTo: '이동',
+    page: '페이지'
   },
   Modal: {
     confirm: '확인',

package/lib/es/locale/source/ms_MY.js

@@ -3,11 +3,10 @@ const local = {
   code: 'ms-MY',
   dateFnsLocale: ms,
   Pagination: {
-    item: 'item',
-    pageSize: ' items / halaman',
-    page: ' halaman',
-    total: '',
-    jumpTo: 'Lompat ke'
+    pageSize: ' ${pageSize} items / halaman',
+    total: '${total} halaman',
+    jumpTo: 'Lompat ke',
+    page: ' halaman'
   },
   Modal: {
     confirm: 'Sahkan',

package/lib/es/locale/source/nl_NL.d.ts

@@ -0,0 +1,8 @@
+import { Locale } from '../interface';
+/**
+ * [i18n-Dutch (pl_PL)]
+ * 荷兰语
+ *
+ */
+declare const local: Locale;
+export default local;