sti-antd-package 0.0.24 → 0.0.26

package/dist/components/Checkbox/Group/types.d.ts

@@ -1,6 +1,6 @@
-import { CheckboxForm } from "../types";
 import { CheckboxOptionType } from "antd";
 import React, { Ref } from "react";
+import { FormItemCheckboxProps } from "../../Form/Item";
 export interface CheckboxGroupComponentRef<T> {
     value: () => T[];
     setValue: React.Dispatch<React.SetStateAction<T[]>>;
@@ -12,5 +12,5 @@ interface CheckboxGroup<T> {
     onChange?: (checkedValue: T[]) => void;
     ref?: Ref<CheckboxGroupComponentRef<T>>;
 }
-export type CheckboxGroupComponentProps<T> = CheckboxGroup<T> & CheckboxForm;
+export type CheckboxGroupComponentProps<T> = CheckboxGroup<T> & FormItemCheckboxProps;
 export {};

package/dist/components/Checkbox/types.d.ts

@@ -1,8 +1,5 @@
-import { formColLayout } from "../../constants";
+import { FormItemCheckboxProps } from "../Form/Item";
 import { CheckboxChangeEvent } from "antd";
-import { ValidateStatus } from "antd/es/form/FormItem";
-import { ShouldUpdate } from "rc-field-form/lib/Field";
-import { NamePath, Rule, RuleObject } from "rc-field-form/lib/interface";
 import { Ref } from "react";
 export interface CheckboxComponentRef {
     checked: () => boolean;
@@ -15,21 +12,5 @@ interface Checkbox {
     children?: React.ReactNode;
     ref?: Ref<CheckboxComponentRef>;
 }
-export interface CheckboxForm {
-    noItem?: boolean;
-    loading?: boolean;
-    disabled?: boolean;
-    removeError?: (name?: NamePath) => void;
-    formColLayout?: typeof formColLayout;
-    name?: NamePath;
-    label?: React.ReactNode;
-    required?: boolean;
-    rules?: Rule[];
-    ruleType?: RuleObject['type'];
-    ruleMessage?: string;
-    validateStatus?: ValidateStatus;
-    help?: React.ReactNode;
-    shouldUpdate?: ShouldUpdate<string | string[]>;
-}
-export type CheckboxComponentProps = Checkbox & CheckboxForm;
+export type CheckboxComponentProps = Checkbox & FormItemCheckboxProps;
 export {};

package/dist/components/DatePicker/types.d.ts

@@ -2,12 +2,12 @@ import { DatePickerFormatType, formColLayout } from "../../constants";
 import { Variant } from "antd/es/config-provider";
 import { SizeType } from "antd/es/config-provider/SizeContext";
 import { DatePickerProps } from "antd/es/date-picker";
+import { PickerClassNames } from "antd/es/date-picker/generatePicker/interface";
 import { Rule } from "antd/es/form";
 import { ValidateStatus } from "antd/es/form/FormItem";
 import { Dayjs } from "dayjs";
 import { ShouldUpdate } from "rc-field-form/lib/Field";
 import { NamePath } from "rc-field-form/lib/interface";
-import { SemanticStructure } from "rc-picker/lib/interface";
 import { Ref } from "react";
 export interface DatePickerComponentRef {
     value: () => Dayjs | null;
@@ -17,9 +17,14 @@ export interface DatePickerComponentProps {
     noItem?: boolean;
     size?: SizeType;
     variant?: Variant;
+    placeholder?: string;
+    prefix?: React.ReactNode;
+    prefixCls?: string[];
+    suffixIcon?: React.ReactNode;
     picker?: DatePickerProps['picker'];
     format?: DatePickerFormatType;
     loading?: boolean;
+    readOnly?: boolean;
     disabled?: boolean;
     disabledDate?: DatePickerProps['disabledDate'];
     disabledTime?: DatePickerProps['disabledTime'];
@@ -32,7 +37,7 @@ export interface DatePickerComponentProps {
     name?: NamePath;
     label?: React.ReactNode;
     classNames?: string[];
-    className?: Partial<Record<SemanticStructure, string>>;
+    className?: PickerClassNames;
     required?: boolean;
     rules?: Rule[];
     ruleMessage?: string;

package/dist/components/DateRangePicker/types.d.ts

@@ -3,11 +3,11 @@ import { DatePicker, DatePickerProps } from "antd";
 import { Variant } from "antd/es/config-provider";
 import { SizeType } from "antd/es/config-provider/SizeContext";
 import { RangePickerProps } from "antd/es/date-picker";
+import { PickerClassNames } from "antd/es/date-picker/generatePicker/interface";
 import { ValidateStatus } from "antd/es/form/FormItem";
 import dayjs from "dayjs";
 import { ShouldUpdate } from "rc-field-form/lib/Field";
 import { NamePath, Rule } from "rc-field-form/lib/interface";
-import { SemanticStructure } from "rc-picker/lib/interface";
 import { RangeValueType } from "rc-picker/lib/PickerInput/RangePicker";
 import { Ref } from "react";
 export interface DateRangePickerComponentRef {
@@ -18,9 +18,14 @@ export interface DateRangePickerComponentProps {
     noItem?: boolean;
     size?: SizeType;
     variant?: Variant;
+    placeholder?: [string, string];
+    prefix?: React.ReactNode;
+    prefixCls?: string[];
+    suffixIcon?: React.ReactNode;
     picker?: DatePickerProps['picker'];
     format?: DatePickerFormatType;
     loading?: boolean;
+    readOnly?: boolean;
     disabled?: boolean;
     disabledDate?: RangePickerProps['disabledDate'];
     disabledTime?: RangePickerProps['disabledTime'];
@@ -33,7 +38,7 @@ export interface DateRangePickerComponentProps {
     name?: NamePath;
     label?: React.ReactNode;
     classNames?: string[];
-    className?: Partial<Record<SemanticStructure, string>>;
+    className?: PickerClassNames;
     required?: boolean;
     rules?: Rule[];
     ruleMessage?: string;

package/dist/components/Form/Item/types.d.ts

@@ -3,6 +3,24 @@ import { ValidateStatus } from "antd/es/form/FormItem";
 import { ShouldUpdate } from "rc-field-form/lib/Field";
 import { NamePath, Rule, RuleObject, Store, StoreValue } from "rc-field-form/lib/interface";
 import React from "react";
+export interface FormItemDefaultProps {
+    noItem?: boolean;
+    loading?: boolean;
+    disabled?: boolean;
+    removeError?: (name?: NamePath) => void;
+    formColLayout?: typeof formColLayout;
+    name?: NamePath;
+    label?: React.ReactNode;
+    required?: boolean;
+}
+export type FormItemCheckboxProps = FormItemDefaultProps & {
+    rules?: Rule[];
+    ruleType?: RuleObject['type'];
+    ruleMessage?: string;
+    validateStatus?: ValidateStatus;
+    help?: React.ReactNode;
+    shouldUpdate?: ShouldUpdate<string | string[]>;
+};
 export interface FormItemComponentProps {
     noItem?: boolean;
     formColLayout?: typeof formColLayout;

package/dist/components/Select/types.d.ts

@@ -17,8 +17,9 @@ export interface SelectComponentProps {
     variant?: Variant;
     size?: SizeType;
     suffixIcon?: React.ReactNode;
-    className?: string[];
+    classNames?: string[];
     loading?: boolean;
+    readOnly?: boolean;
     disabled?: boolean;
     open?: boolean;
     filterOption?: SelectProps['filterOption'];

package/dist/index.d.ts

@@ -16,9 +16,9 @@ import { AnyObject } from 'antd/es/_util/type';
 import { AxiosResponse } from 'axios';
 import { ColumnOrColumnGroup } from 'react-data-grid';
 import { DatePickerProps, RangePickerProps } from 'antd/es/date-picker';
+import { PickerClassNames } from 'antd/es/date-picker/generatePicker/interface';
 import { Rule as Rule$2, RuleObject as RuleObject$2 } from 'antd/es/form';
 import dayjs, { Dayjs } from 'dayjs';
-import { SemanticStructure } from 'rc-picker/lib/interface';
 import { RangeValueType } from 'rc-picker/lib/PickerInput/RangePicker';
 import { valueType } from 'antd/es/statistic/utils';
 import { OnValueChange } from 'react-number-format';
@@ -191,34 +191,59 @@ interface CascaderComponentProps<OptionType extends DefaultOptionType, ValueFiel
 
 declare const CascaderComponent: <OptionType extends DefaultOptionType, ValueField extends keyof OptionType>({ noItem, size, classNames, variant, expandTrigger, open, disabled, suffixIcon, placeholder, value, defaultValue, options, displayRender, onChange, onSearch, formColLayout, name, label, required, rules, ruleType, ruleMessage, validateStatus, help, ref, }: CascaderComponentProps<OptionType, ValueField>) => React$1.ReactElement;
 
-interface CheckboxComponentRef {
-    checked: () => boolean;
-    setChecked: React.Dispatch<React.SetStateAction<boolean>>;
-}
-interface Checkbox {
-    checked?: boolean;
-    defaultChecked?: boolean;
-    onChange?: (event: CheckboxChangeEvent) => void;
-    children?: React.ReactNode;
-    ref?: Ref<CheckboxComponentRef>;
-}
-interface CheckboxForm {
+interface FormItemDefaultProps {
     noItem?: boolean;
     loading?: boolean;
     disabled?: boolean;
     removeError?: (name?: NamePath) => void;
     formColLayout?: typeof _default;
     name?: NamePath;
-    label?: React.ReactNode;
+    label?: React$1.ReactNode;
     required?: boolean;
+}
+type FormItemCheckboxProps = FormItemDefaultProps & {
     rules?: Rule$1[];
     ruleType?: RuleObject$1['type'];
     ruleMessage?: string;
     validateStatus?: ValidateStatus;
-    help?: React.ReactNode;
+    help?: React$1.ReactNode;
+    shouldUpdate?: ShouldUpdate<string | string[]>;
+};
+interface FormItemComponentProps {
+    noItem?: boolean;
+    formColLayout?: typeof _default;
+    name?: NamePath;
+    label?: React$1.ReactNode;
+    trigger?: string;
+    normalize?: (value: StoreValue, prevValue: StoreValue, allValues: Store) => StoreValue;
+    required?: boolean;
+    rules?: Rule$1[];
+    ruleType?: RuleObject$1['type'];
+    ruleMessage?: string;
+    ruleTransform?: (value: StoreValue) => StoreValue;
+    ruleMin?: number;
+    ruleMax?: number;
+    valuePropName?: string;
+    validateStatus?: ValidateStatus;
+    help?: React$1.ReactNode;
     shouldUpdate?: ShouldUpdate<string | string[]>;
+    children?: React$1.ReactNode;
 }
-type CheckboxComponentProps = Checkbox & CheckboxForm;
+
+declare const FormItemComponent: React$1.FC<FormItemComponentProps>;
+
+interface CheckboxComponentRef {
+    checked: () => boolean;
+    setChecked: React.Dispatch<React.SetStateAction<boolean>>;
+}
+interface Checkbox {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (event: CheckboxChangeEvent) => void;
+    children?: React.ReactNode;
+    ref?: Ref<CheckboxComponentRef>;
+}
+type CheckboxComponentProps = Checkbox & FormItemCheckboxProps;
 
 declare const CheckboxComponent$1: React$1.FC<CheckboxComponentProps>;
 
@@ -233,7 +258,7 @@ interface CheckboxGroup<T> {
     onChange?: (checkedValue: T[]) => void;
     ref?: Ref<CheckboxGroupComponentRef<T>>;
 }
-type CheckboxGroupComponentProps<T> = CheckboxGroup<T> & CheckboxForm;
+type CheckboxGroupComponentProps<T> = CheckboxGroup<T> & FormItemCheckboxProps;
 
 declare const CheckboxComponent: <T>({ noItem, loading, disabled, options, value, defaultValue, onChange, removeError, formColLayout, name, label, required, rules, ruleType, ruleMessage, validateStatus, help, shouldUpdate, ref, }: CheckboxGroupComponentProps<T>) => react_jsx_runtime.JSX.Element;
 
@@ -370,9 +395,14 @@ interface DatePickerComponentProps {
     noItem?: boolean;
     size?: SizeType;
     variant?: Variant;
+    placeholder?: string;
+    prefix?: React.ReactNode;
+    prefixCls?: string[];
+    suffixIcon?: React.ReactNode;
     picker?: DatePickerProps['picker'];
     format?: DatePickerFormatType;
     loading?: boolean;
+    readOnly?: boolean;
     disabled?: boolean;
     disabledDate?: DatePickerProps['disabledDate'];
     disabledTime?: DatePickerProps['disabledTime'];
@@ -385,7 +415,7 @@ interface DatePickerComponentProps {
     name?: NamePath;
     label?: React.ReactNode;
     classNames?: string[];
-    className?: Partial<Record<SemanticStructure, string>>;
+    className?: PickerClassNames;
     required?: boolean;
     rules?: Rule$2[];
     ruleMessage?: string;
@@ -405,9 +435,14 @@ interface DateRangePickerComponentProps {
     noItem?: boolean;
     size?: SizeType;
     variant?: Variant;
+    placeholder?: [string, string];
+    prefix?: React.ReactNode;
+    prefixCls?: string[];
+    suffixIcon?: React.ReactNode;
     picker?: DatePickerProps$1['picker'];
     format?: DatePickerFormatType;
     loading?: boolean;
+    readOnly?: boolean;
     disabled?: boolean;
     disabledDate?: RangePickerProps['disabledDate'];
     disabledTime?: RangePickerProps['disabledTime'];
@@ -420,7 +455,7 @@ interface DateRangePickerComponentProps {
     name?: NamePath;
     label?: React.ReactNode;
     classNames?: string[];
-    className?: Partial<Record<SemanticStructure, string>>;
+    className?: PickerClassNames;
     required?: boolean;
     rules?: Rule$1[];
     ruleMessage?: string;
@@ -450,29 +485,6 @@ interface DropdownButtonComponentProps<T> {
 
 declare const DropdownButtonComponent: <T>({ trigger, placement, menuItems, disabled, data, }: DropdownButtonComponentProps<T>) => React$1.ReactElement;
 
-interface FormItemComponentProps {
-    noItem?: boolean;
-    formColLayout?: typeof _default;
-    name?: NamePath;
-    label?: React$1.ReactNode;
-    trigger?: string;
-    normalize?: (value: StoreValue, prevValue: StoreValue, allValues: Store) => StoreValue;
-    required?: boolean;
-    rules?: Rule$1[];
-    ruleType?: RuleObject$1['type'];
-    ruleMessage?: string;
-    ruleTransform?: (value: StoreValue) => StoreValue;
-    ruleMin?: number;
-    ruleMax?: number;
-    valuePropName?: string;
-    validateStatus?: ValidateStatus;
-    help?: React$1.ReactNode;
-    shouldUpdate?: ShouldUpdate<string | string[]>;
-    children?: React$1.ReactNode;
-}
-
-declare const FormItemComponent: React$1.FC<FormItemComponentProps>;
-
 interface IconCheckOrCloseProps {
     check: boolean;
     classNames?: string[];
@@ -621,8 +633,9 @@ interface SelectComponentProps {
     variant?: Variant;
     size?: SizeType;
     suffixIcon?: React.ReactNode;
-    className?: string[];
+    classNames?: string[];
     loading?: boolean;
+    readOnly?: boolean;
     disabled?: boolean;
     open?: boolean;
     filterOption?: SelectProps['filterOption'];

package/dist/index.esm.js

@@ -5493,7 +5493,7 @@ var formColLayout = {
     notInline: {},
 };
 
-const DatePickerComponent = ({ noItem, size, variant, picker, format, disabledDate, disabledTime, loading, disabled, value, defaultValue, removeError, onChange, style, formColLayout, name, label, classNames = [], className, required, rules, ruleMessage, validateStatus, help, shouldUpdate, ref, }) => {
+const DatePickerComponent = ({ noItem, size, variant, placeholder, prefix, prefixCls, suffixIcon, picker, format, disabledDate, disabledTime, loading, readOnly, disabled, value, defaultValue, removeError, onChange, style, formColLayout, name, label, classNames = [], className, required, rules, ruleMessage, validateStatus, help, shouldUpdate, ref, }) => {
     const [valueDate, setValueDate] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : null);
     const handleChange = (date, dateString) => {
         setValueDate(date);
@@ -5506,13 +5506,13 @@ const DatePickerComponent = ({ noItem, size, variant, picker, format, disabledDa
     }));
     const classDate = [styleCSS['w-100']];
     classNames && classDate.push(...classNames);
-    const datePicker = !loading ? (jsxRuntimeExports.jsx(DatePicker, { className: classDate === null || classDate === void 0 ? void 0 : classDate.join(' '), classNames: className, size: size !== null && size !== void 0 ? size : 'middle', variant: variant, picker: picker, format: datePickerFormat[format !== null && format !== void 0 ? format : 'default'], allowClear: !required, disabled: disabled, disabledDate: disabledDate, disabledTime: disabledTime, value: value !== null && value !== void 0 ? value : valueDate, onChange: handleChange, style: style })) : jsxRuntimeExports.jsx(Skeleton.Input, { block: true, active: true });
+    const datePicker = !loading ? (jsxRuntimeExports.jsx(DatePicker, { className: classDate === null || classDate === void 0 ? void 0 : classDate.join(' '), classNames: className, size: size !== null && size !== void 0 ? size : 'middle', variant: variant, placeholder: placeholder, prefix: prefix, prefixCls: prefixCls === null || prefixCls === void 0 ? void 0 : prefixCls.join(' '), suffixIcon: suffixIcon, picker: picker, format: datePickerFormat[format !== null && format !== void 0 ? format : 'default'], allowClear: !required, readOnly: readOnly, disabled: disabled, disabledDate: disabledDate, disabledTime: disabledTime, value: value !== null && value !== void 0 ? value : valueDate, onChange: handleChange, style: style })) : jsxRuntimeExports.jsx(Skeleton.Input, { block: true, active: true });
     return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !noItem ? (jsxRuntimeExports.jsx(FormItemComponent, Object.assign({}, formColLayout, { name: name, label: label, required: required, ruleType: "date", ruleMessage: ruleMessage, rules: rules, validateStatus: validateStatus, help: help, shouldUpdate: shouldUpdate, children: datePicker })))
             : datePicker }));
 };
 
 const { RangePicker } = DatePicker;
-const DateRangePickerComponent = ({ noItem, size, variant, picker, format, disabledDate, disabledTime, loading, disabled, value, defaultValue, removeError, onChange, style, formColLayout, name, label, classNames = [], className, required, rules, ruleMessage, validateStatus, help, shouldUpdate, ref, }) => {
+const DateRangePickerComponent = ({ noItem, size, variant, placeholder, prefix, prefixCls, suffixIcon, picker, format, disabledDate, disabledTime, loading, readOnly, disabled, value, defaultValue, removeError, onChange, style, formColLayout, name, label, classNames = [], className, required, rules, ruleMessage, validateStatus, help, shouldUpdate, ref, }) => {
     var _a;
     const [valueDateRange, setValueDateRange] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : null);
     const handleChange = (date, dateStrings) => {
@@ -5526,7 +5526,7 @@ const DateRangePickerComponent = ({ noItem, size, variant, picker, format, disab
     }));
     const classDateRange = [styleCSS['w-100']];
     classNames && classDateRange.push(...classNames);
-    const datePicker = !loading ? (jsxRuntimeExports.jsx(RangePicker, { className: classDateRange.join(' '), classNames: className, size: size !== null && size !== void 0 ? size : 'middle', variant: variant, picker: picker, format: datePickerFormat[format !== null && format !== void 0 ? format : 'default'], allowEmpty: !required, allowClear: !required, disabled: disabled, disabledDate: disabledDate, disabledTime: disabledTime, value: (_a = value !== null && value !== void 0 ? value : valueDateRange) !== null && _a !== void 0 ? _a : null, onChange: handleChange, style: style })) : jsxRuntimeExports.jsx(Skeleton.Input, { block: true, active: true });
+    const datePicker = !loading ? (jsxRuntimeExports.jsx(RangePicker, { className: classDateRange.join(' '), classNames: className, size: size !== null && size !== void 0 ? size : 'middle', variant: variant, placeholder: placeholder, prefix: prefix, prefixCls: prefixCls === null || prefixCls === void 0 ? void 0 : prefixCls.join(' '), suffixIcon: suffixIcon, picker: picker, format: datePickerFormat[format !== null && format !== void 0 ? format : 'default'], allowEmpty: !required, allowClear: !required, readOnly: readOnly, disabled: disabled, disabledDate: disabledDate, disabledTime: disabledTime, value: (_a = value !== null && value !== void 0 ? value : valueDateRange) !== null && _a !== void 0 ? _a : null, onChange: handleChange, style: style })) : jsxRuntimeExports.jsx(Skeleton.Input, { block: true, active: true });
     return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !noItem ? (jsxRuntimeExports.jsx(FormItemComponent, Object.assign({}, formColLayout, { name: name, label: label, required: required, ruleType: "array", ruleMessage: ruleMessage, rules: rules, validateStatus: validateStatus, help: help, shouldUpdate: shouldUpdate, children: datePicker })))
             : datePicker }));
 };
@@ -7574,15 +7574,19 @@ const RadioComponent = ({ buttonStyle, options, optionType, onChange, noItem, lo
             : radio }));
 };
 
-var css_248z$4 = ".style-module_select__vcvBg {\n  width: 100%;\n  max-width: 100%;\n}\n\n.style-module_add-item-divider__mnSq1 {\n  margin: 8px 0;\n}\n\n.style-module_add-item-space__yOxDs {\n  padding: 0 8px 4px;\n}\n\n.style-module_add-item-link__lmjLu {\n  white-space: nowrap;\n}";
-var styleSelect = {"select":"style-module_select__vcvBg","add-item-divider":"style-module_add-item-divider__mnSq1","add-item-space":"style-module_add-item-space__yOxDs","add-item-link":"style-module_add-item-link__lmjLu"};
+var css_248z$4 = ".style-module_select__vcvBg {\n  width: 100%;\n  max-width: 100%;\n}\n\n.style-module_add-item-divider__mnSq1 {\n  margin: 8px 0;\n}\n\n.style-module_add-item-space__yOxDs {\n  padding: 0 8px 4px;\n}\n\n.style-module_add-item-link__lmjLu {\n  white-space: nowrap;\n}\n\n.style-module_select__vcvBg.style-module_readonly__1gDhg>div {\n  cursor: auto !important;\n  color: inherit !important;\n}";
+var styleSelect = {"select":"style-module_select__vcvBg","add-item-divider":"style-module_add-item-divider__mnSq1","add-item-space":"style-module_add-item-space__yOxDs","add-item-link":"style-module_add-item-link__lmjLu","readonly":"style-module_readonly__1gDhg"};
 styleInject(css_248z$4);
 
 const { Link } = Typography;
-const SelectComponent = ({ noItem, showSearch, mode, variant, size, suffixIcon, className, loading, disabled, open, filterOption, placeholder, value, defaultValue, removeError, onChange, onKeyDown, onSearch, onFocus, notFoundContent, tokenSeparators, options, style, addItem, formColLayout, name, label, required, rules, ruleType, ruleMessage, validateStatus, help, }) => {
+const SelectComponent = ({ noItem, showSearch, mode, variant, size, suffixIcon, classNames, loading, readOnly, disabled, open, filterOption, placeholder, value, defaultValue, removeError, onChange, onKeyDown, onSearch, onFocus, notFoundContent, tokenSeparators, options, style, addItem, formColLayout, name, label, required, rules, ruleType, ruleMessage, validateStatus, help, }) => {
     const [addItemValue, setAddItemValue] = useState('');
-    const classNameSelect = [styleSelect['select']];
-    className && classNameSelect.push(...className);
+    const classNameSelect = useMemo$1(() => {
+        const className = [styleSelect['select']];
+        classNames && className.push(...classNames);
+        readOnly && className.push(styleSelect['readonly']);
+        return className;
+    }, [classNames, readOnly]);
     const handleAddItem = (_) => {
         var _a;
         (_a = addItem === null || addItem === void 0 ? void 0 : addItem.onClick) === null || _a === void 0 ? void 0 : _a.call(addItem, addItemValue);
@@ -7594,7 +7598,7 @@ const SelectComponent = ({ noItem, showSearch, mode, variant, size, suffixIcon,
     };
     const popupRender = menu => (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [menu, addItem &&
                 jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Divider, { className: styleSelect['add-item-divider'] }), jsxRuntimeExports.jsxs(Space, { align: "center", className: styleSelect['add-item-space'], children: [jsxRuntimeExports.jsx(Input$2, { placeholder: "Please enter item", value: addItemValue, onChange: event => setAddItemValue(event.target.value) }), jsxRuntimeExports.jsxs(Link, { className: styleSelect['add-item-link'], onClick: handleAddItem, children: [jsxRuntimeExports.jsx(RefIcon$5, {}), " Add item"] })] })] })] }));
-    const select = !loading ? (jsxRuntimeExports.jsx(Select, { mode: mode, showSearch: showSearch, variant: variant, allowClear: !required, size: size, suffixIcon: suffixIcon, className: classNameSelect.join(' '), disabled: disabled, open: open, filterOption: filterOption, placeholder: placeholder, value: value, defaultValue: defaultValue, onChange: (value, event) => {
+    const select = !loading ? (jsxRuntimeExports.jsx(Select, { mode: mode, showSearch: showSearch, variant: variant, allowClear: !required, size: size, suffixIcon: suffixIcon, className: classNameSelect.join(' '), disabled: disabled !== null && disabled !== void 0 ? disabled : readOnly, open: open, filterOption: filterOption, placeholder: placeholder, value: value, defaultValue: defaultValue, onChange: (value, event) => {
             removeError === null || removeError === void 0 ? void 0 : removeError(name);
             onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
         }, onKeyDown: onKeyDown, onSearch: onSearch, onFocus: onFocus, notFoundContent: notFoundContent, tokenSeparators: tokenSeparators, options: options === null || options === void 0 ? void 0 : options.filter(option => option.value !== undefined), optionLabelProp: "label", optionRender: optionRender, popupRender: popupRender, style: style })) : jsxRuntimeExports.jsx(Skeleton.Input, { block: true, active: true });

package/dist/index.js

@@ -5512,7 +5512,7 @@ var formColLayout = {
     notInline: {},
 };
 
-const DatePickerComponent = ({ noItem, size, variant, picker, format, disabledDate, disabledTime, loading, disabled, value, defaultValue, removeError, onChange, style, formColLayout, name, label, classNames = [], className, required, rules, ruleMessage, validateStatus, help, shouldUpdate, ref, }) => {
+const DatePickerComponent = ({ noItem, size, variant, placeholder, prefix, prefixCls, suffixIcon, picker, format, disabledDate, disabledTime, loading, readOnly, disabled, value, defaultValue, removeError, onChange, style, formColLayout, name, label, classNames = [], className, required, rules, ruleMessage, validateStatus, help, shouldUpdate, ref, }) => {
     const [valueDate, setValueDate] = React.useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : null);
     const handleChange = (date, dateString) => {
         setValueDate(date);
@@ -5525,13 +5525,13 @@ const DatePickerComponent = ({ noItem, size, variant, picker, format, disabledDa
     }));
     const classDate = [styleCSS['w-100']];
     classNames && classDate.push(...classNames);
-    const datePicker = !loading ? (jsxRuntimeExports.jsx(antd.DatePicker, { className: classDate === null || classDate === void 0 ? void 0 : classDate.join(' '), classNames: className, size: size !== null && size !== void 0 ? size : 'middle', variant: variant, picker: picker, format: datePickerFormat[format !== null && format !== void 0 ? format : 'default'], allowClear: !required, disabled: disabled, disabledDate: disabledDate, disabledTime: disabledTime, value: value !== null && value !== void 0 ? value : valueDate, onChange: handleChange, style: style })) : jsxRuntimeExports.jsx(antd.Skeleton.Input, { block: true, active: true });
+    const datePicker = !loading ? (jsxRuntimeExports.jsx(antd.DatePicker, { className: classDate === null || classDate === void 0 ? void 0 : classDate.join(' '), classNames: className, size: size !== null && size !== void 0 ? size : 'middle', variant: variant, placeholder: placeholder, prefix: prefix, prefixCls: prefixCls === null || prefixCls === void 0 ? void 0 : prefixCls.join(' '), suffixIcon: suffixIcon, picker: picker, format: datePickerFormat[format !== null && format !== void 0 ? format : 'default'], allowClear: !required, readOnly: readOnly, disabled: disabled, disabledDate: disabledDate, disabledTime: disabledTime, value: value !== null && value !== void 0 ? value : valueDate, onChange: handleChange, style: style })) : jsxRuntimeExports.jsx(antd.Skeleton.Input, { block: true, active: true });
     return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !noItem ? (jsxRuntimeExports.jsx(FormItemComponent, Object.assign({}, formColLayout, { name: name, label: label, required: required, ruleType: "date", ruleMessage: ruleMessage, rules: rules, validateStatus: validateStatus, help: help, shouldUpdate: shouldUpdate, children: datePicker })))
             : datePicker }));
 };
 
 const { RangePicker } = antd.DatePicker;
-const DateRangePickerComponent = ({ noItem, size, variant, picker, format, disabledDate, disabledTime, loading, disabled, value, defaultValue, removeError, onChange, style, formColLayout, name, label, classNames = [], className, required, rules, ruleMessage, validateStatus, help, shouldUpdate, ref, }) => {
+const DateRangePickerComponent = ({ noItem, size, variant, placeholder, prefix, prefixCls, suffixIcon, picker, format, disabledDate, disabledTime, loading, readOnly, disabled, value, defaultValue, removeError, onChange, style, formColLayout, name, label, classNames = [], className, required, rules, ruleMessage, validateStatus, help, shouldUpdate, ref, }) => {
     var _a;
     const [valueDateRange, setValueDateRange] = React.useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : null);
     const handleChange = (date, dateStrings) => {
@@ -5545,7 +5545,7 @@ const DateRangePickerComponent = ({ noItem, size, variant, picker, format, disab
     }));
     const classDateRange = [styleCSS['w-100']];
     classNames && classDateRange.push(...classNames);
-    const datePicker = !loading ? (jsxRuntimeExports.jsx(RangePicker, { className: classDateRange.join(' '), classNames: className, size: size !== null && size !== void 0 ? size : 'middle', variant: variant, picker: picker, format: datePickerFormat[format !== null && format !== void 0 ? format : 'default'], allowEmpty: !required, allowClear: !required, disabled: disabled, disabledDate: disabledDate, disabledTime: disabledTime, value: (_a = value !== null && value !== void 0 ? value : valueDateRange) !== null && _a !== void 0 ? _a : null, onChange: handleChange, style: style })) : jsxRuntimeExports.jsx(antd.Skeleton.Input, { block: true, active: true });
+    const datePicker = !loading ? (jsxRuntimeExports.jsx(RangePicker, { className: classDateRange.join(' '), classNames: className, size: size !== null && size !== void 0 ? size : 'middle', variant: variant, placeholder: placeholder, prefix: prefix, prefixCls: prefixCls === null || prefixCls === void 0 ? void 0 : prefixCls.join(' '), suffixIcon: suffixIcon, picker: picker, format: datePickerFormat[format !== null && format !== void 0 ? format : 'default'], allowEmpty: !required, allowClear: !required, readOnly: readOnly, disabled: disabled, disabledDate: disabledDate, disabledTime: disabledTime, value: (_a = value !== null && value !== void 0 ? value : valueDateRange) !== null && _a !== void 0 ? _a : null, onChange: handleChange, style: style })) : jsxRuntimeExports.jsx(antd.Skeleton.Input, { block: true, active: true });
     return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !noItem ? (jsxRuntimeExports.jsx(FormItemComponent, Object.assign({}, formColLayout, { name: name, label: label, required: required, ruleType: "array", ruleMessage: ruleMessage, rules: rules, validateStatus: validateStatus, help: help, shouldUpdate: shouldUpdate, children: datePicker })))
             : datePicker }));
 };
@@ -7593,15 +7593,19 @@ const RadioComponent = ({ buttonStyle, options, optionType, onChange, noItem, lo
             : radio }));
 };
 
-var css_248z$4 = ".style-module_select__vcvBg {\n  width: 100%;\n  max-width: 100%;\n}\n\n.style-module_add-item-divider__mnSq1 {\n  margin: 8px 0;\n}\n\n.style-module_add-item-space__yOxDs {\n  padding: 0 8px 4px;\n}\n\n.style-module_add-item-link__lmjLu {\n  white-space: nowrap;\n}";
-var styleSelect = {"select":"style-module_select__vcvBg","add-item-divider":"style-module_add-item-divider__mnSq1","add-item-space":"style-module_add-item-space__yOxDs","add-item-link":"style-module_add-item-link__lmjLu"};
+var css_248z$4 = ".style-module_select__vcvBg {\n  width: 100%;\n  max-width: 100%;\n}\n\n.style-module_add-item-divider__mnSq1 {\n  margin: 8px 0;\n}\n\n.style-module_add-item-space__yOxDs {\n  padding: 0 8px 4px;\n}\n\n.style-module_add-item-link__lmjLu {\n  white-space: nowrap;\n}\n\n.style-module_select__vcvBg.style-module_readonly__1gDhg>div {\n  cursor: auto !important;\n  color: inherit !important;\n}";
+var styleSelect = {"select":"style-module_select__vcvBg","add-item-divider":"style-module_add-item-divider__mnSq1","add-item-space":"style-module_add-item-space__yOxDs","add-item-link":"style-module_add-item-link__lmjLu","readonly":"style-module_readonly__1gDhg"};
 styleInject(css_248z$4);
 
 const { Link } = antd.Typography;
-const SelectComponent = ({ noItem, showSearch, mode, variant, size, suffixIcon, className, loading, disabled, open, filterOption, placeholder, value, defaultValue, removeError, onChange, onKeyDown, onSearch, onFocus, notFoundContent, tokenSeparators, options, style, addItem, formColLayout, name, label, required, rules, ruleType, ruleMessage, validateStatus, help, }) => {
+const SelectComponent = ({ noItem, showSearch, mode, variant, size, suffixIcon, classNames, loading, readOnly, disabled, open, filterOption, placeholder, value, defaultValue, removeError, onChange, onKeyDown, onSearch, onFocus, notFoundContent, tokenSeparators, options, style, addItem, formColLayout, name, label, required, rules, ruleType, ruleMessage, validateStatus, help, }) => {
     const [addItemValue, setAddItemValue] = React.useState('');
-    const classNameSelect = [styleSelect['select']];
-    className && classNameSelect.push(...className);
+    const classNameSelect = React.useMemo(() => {
+        const className = [styleSelect['select']];
+        classNames && className.push(...classNames);
+        readOnly && className.push(styleSelect['readonly']);
+        return className;
+    }, [classNames, readOnly]);
     const handleAddItem = (_) => {
         var _a;
         (_a = addItem === null || addItem === void 0 ? void 0 : addItem.onClick) === null || _a === void 0 ? void 0 : _a.call(addItem, addItemValue);
@@ -7613,7 +7617,7 @@ const SelectComponent = ({ noItem, showSearch, mode, variant, size, suffixIcon,
     };
     const popupRender = menu => (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [menu, addItem &&
                 jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(antd.Divider, { className: styleSelect['add-item-divider'] }), jsxRuntimeExports.jsxs(antd.Space, { align: "center", className: styleSelect['add-item-space'], children: [jsxRuntimeExports.jsx(antd.Input, { placeholder: "Please enter item", value: addItemValue, onChange: event => setAddItemValue(event.target.value) }), jsxRuntimeExports.jsxs(Link, { className: styleSelect['add-item-link'], onClick: handleAddItem, children: [jsxRuntimeExports.jsx(RefIcon$5, {}), " Add item"] })] })] })] }));
-    const select = !loading ? (jsxRuntimeExports.jsx(antd.Select, { mode: mode, showSearch: showSearch, variant: variant, allowClear: !required, size: size, suffixIcon: suffixIcon, className: classNameSelect.join(' '), disabled: disabled, open: open, filterOption: filterOption, placeholder: placeholder, value: value, defaultValue: defaultValue, onChange: (value, event) => {
+    const select = !loading ? (jsxRuntimeExports.jsx(antd.Select, { mode: mode, showSearch: showSearch, variant: variant, allowClear: !required, size: size, suffixIcon: suffixIcon, className: classNameSelect.join(' '), disabled: disabled !== null && disabled !== void 0 ? disabled : readOnly, open: open, filterOption: filterOption, placeholder: placeholder, value: value, defaultValue: defaultValue, onChange: (value, event) => {
             removeError === null || removeError === void 0 ? void 0 : removeError(name);
             onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
         }, onKeyDown: onKeyDown, onSearch: onSearch, onFocus: onFocus, notFoundContent: notFoundContent, tokenSeparators: tokenSeparators, options: options === null || options === void 0 ? void 0 : options.filter(option => option.value !== undefined), optionLabelProp: "label", optionRender: optionRender, popupRender: popupRender, style: style })) : jsxRuntimeExports.jsx(antd.Skeleton.Input, { block: true, active: true });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sti-antd-package",
   "description": "STI ANT Design",
-  "version": "0.0.24",
+  "version": "0.0.26",
   "type": "module",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
@@ -10,7 +10,7 @@
     "dist"
   ],
   "scripts": {
-    "build": "rollup -c",
+    "build": "rm -rf dist && rollup -c",
     "prepare": "npm run build"
   },
   "directories": {