@jswork/antd-components 1.0.104 → 1.0.106

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jswork/antd-components",
-  "version": "1.0.104",
+  "version": "1.0.106",
   "main": "dist/main.cjs.js",
   "module": "dist/main.esm.js",
   "types": "dist/main.d.ts",

package/src/lib/checkable-tag-list.tsx

@@ -8,11 +8,12 @@ import { AcCheckableTag } from './checkable-tag';
 const CLASS_NAME = 'ac-checkable-tag-list';
 const locales = {
   'zh-CN': { selectAll: '全部' },
-  'en-US': { selectAll: 'All' }
+  'en-US': { selectAll: 'All' },
 };
 type StdEventTarget = { target: { value: any } };
 type StdCallback = (inEvent: StdEventTarget) => void;
-type Props = {
+
+export type AcCheckableTagListProps = {
   /**
    * Main className.
    */
@@ -39,17 +40,17 @@ type Props = {
   disabled?: boolean;
 };
 
-export class AcCheckableTagList extends React.Component<Props> {
+export class AcCheckableTagList extends React.Component<AcCheckableTagListProps> {
   static displayName = CLASS_NAME;
   static formSchema = CLASS_NAME;
   static defaultProps = {
     lang: 'zh-CN',
     value: [],
-    onChange: noop
+    onChange: noop,
   };
 
   state = {
-    value: this.props.value
+    value: this.props.value,
   };
 
   t = (inKey: string) => {
@@ -57,7 +58,7 @@ export class AcCheckableTagList extends React.Component<Props> {
     return locales[lang!][inKey] || inKey;
   };
 
-  shouldComponentUpdate(nextProps: Readonly<Props>): boolean {
+  shouldComponentUpdate(nextProps: Readonly<AcCheckableTagListProps>): boolean {
     const { value } = nextProps;
     if (value !== this.props.value) this.setState({ value });
     return true;
@@ -120,3 +121,8 @@ export class AcCheckableTagList extends React.Component<Props> {
     );
   }
 }
+
+
+export const AcCheckableTagListFc = (props: AcCheckableTagListProps) => {
+  return <AcCheckableTagList {...props} />;
+};

package/src/lib/checkable-tag.tsx

@@ -14,7 +14,7 @@ type StdCallback = (inEvent: StdEventTarget) => void;
  * @see https://ant.design/components/tag-cn/#Tag.CheckableTag
  */
 
-type Props = {
+export type AcCheckableTagProps = {
   className?: string;
   value?: boolean;
   disabled?: boolean;
@@ -25,7 +25,7 @@ type Props = {
   onCloseClick?: StdCallback;
 } & Omit<CheckableTagProps, 'checked'>;
 
-export class AcCheckableTag extends React.Component<Props> {
+export class AcCheckableTag extends React.Component<AcCheckableTagProps> {
   static displayName = CLASS_NAME;
   static formSchema = CLASS_NAME;
   static defaultProps = {
@@ -35,11 +35,11 @@ export class AcCheckableTag extends React.Component<Props> {
     toggleable: false,
     propagation: false,
     onChange: noop,
-    onCloseClick: noop
+    onCloseClick: noop,
   };
 
   state = {
-    value: Boolean(this.props.value)
+    value: Boolean(this.props.value),
   };
 
   get closeIcon() {
@@ -51,7 +51,7 @@ export class AcCheckableTag extends React.Component<Props> {
     return view;
   }
 
-  shouldComponentUpdate(nextProps: Readonly<Props>): boolean {
+  shouldComponentUpdate(nextProps: Readonly<AcCheckableTagProps>): boolean {
     const { value } = nextProps;
     if (value !== this.state.value) {
       this.setState({ value });
@@ -99,3 +99,7 @@ export class AcCheckableTag extends React.Component<Props> {
     );
   }
 }
+
+export const AcCheckableTagFc = (props: AcCheckableTagProps) => {
+  return <AcCheckableTag {...props} />;
+};

package/src/lib/checkbox-group.tsx

@@ -28,11 +28,11 @@ export class AcCheckboxGroup extends React.Component<AcCheckboxGroupProps> {
     value: [],
     template: checkboxKv,
     onChange: noop,
-    onSearch: noop
+    onSearch: noop,
   };
 
   state = {
-    value: this.props.value
+    value: this.props.value,
   };
 
   shouldComponentUpdate(nextProps: Readonly<AcCheckboxGroupProps>): boolean {
@@ -70,3 +70,8 @@ export class AcCheckboxGroup extends React.Component<AcCheckboxGroupProps> {
     );
   }
 }
+
+export const AcCheckboxGroupFc = (props: AcCheckboxGroupProps) => {
+  return <AcCheckboxGroup {...props} />;
+};
+

package/src/lib/checkbox.tsx

@@ -7,25 +7,25 @@ const CLASS_NAME = 'ac-checkbox';
 type StdEventTarget = { target: { value: any } };
 type StdCallback = (inEvent: StdEventTarget) => void;
 
-type Props = {
+type AcCheckboxProps = {
   className?: string;
   value?: boolean;
   onChange?: StdCallback;
 } & CheckboxProps &
   HTMLAttributes<any>;
 
-export class AcCheckbox extends React.Component<Props> {
+export class AcCheckbox extends React.Component<AcCheckboxProps> {
   static displayName = CLASS_NAME;
   static formSchema = CLASS_NAME;
   static defaultProps = {
-    onChange: noop
+    onChange: noop,
   };
 
   state = {
-    value: this.props.value
+    value: this.props.value,
   };
 
-  shouldComponentUpdate(nextProps: Readonly<Props>): boolean {
+  shouldComponentUpdate(nextProps: Readonly<AcCheckboxProps>): boolean {
     const { value } = nextProps;
     if (value !== this.state.value) {
       this.setState({ value });
@@ -57,3 +57,9 @@ export class AcCheckbox extends React.Component<Props> {
     );
   }
 }
+
+
+export const AcCheckboxFc = (props: AcCheckboxProps) => {
+  return <AcCheckbox {...props} />;
+};
+

package/src/lib/codeflask.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import noop from '@jswork/noop';
-import ReactCodeflask from '@jswork/react-codeflask';
+import ReactCodeFlask from '@jswork/react-codeflask';
 
 const CLASS_NAME = 'ac-codeflask';
 
@@ -8,10 +8,15 @@ export class AcCodeFlask extends React.Component {
   static displayName = CLASS_NAME;
   static formSchema = CLASS_NAME;
   static defaultProps = {
-    onChange: noop
+    onChange: noop,
   };
 
   render() {
-    return <ReactCodeflask {...this.props} />;
+    return <ReactCodeFlask {...this.props} />;
   }
 }
+
+export const AcCodeFlaskFc = (props) => {
+  return <AcCodeFlask {...props} />;
+};
+

package/src/lib/date-picker.tsx

@@ -8,11 +8,11 @@ const STD_FORMAT = 'YYYY-MM-DD HH:mm:ss';
 type StdEventTarget = { target: { value: string } };
 type StdCallback = (inEvent: StdEventTarget) => void;
 
-type Props = {
+export type AcDatePickerProps = Omit<DatePickerProps, 'value' | 'onChange' | 'ref'> & {
   className?: string;
   value?: any;
   onChange?: StdCallback;
-} & DatePickerProps;
+};
 
 const DATA_FORMAT_HOOKS = {
   date: 'YYYY-MM-DD',
@@ -20,10 +20,10 @@ const DATA_FORMAT_HOOKS = {
   time: 'HH:mm:ss',
 };
 
-export class AcDatePicker extends React.Component<Props> {
+export class AcDatePicker extends React.Component<AcDatePickerProps> {
   static displayName = CLASS_NAME;
   static formSchema = CLASS_NAME;
-  static defaultProps: Props = {
+  static defaultProps: AcDatePickerProps = {
     format: STD_FORMAT,
   };
 
@@ -56,3 +56,9 @@ export class AcDatePicker extends React.Component<Props> {
     );
   }
 }
+
+export const AcDatePickerFc = (props: AcDatePickerProps) => {
+  return <AcDatePicker {...props} />;
+};
+
+

package/src/lib/editable-tag-group.tsx

@@ -13,7 +13,7 @@ const CLASS_NAME = 'ac-editable-tag-group';
 type StdEventTarget = { target: { value: any } };
 type StdCallback = (inEvent: StdEventTarget) => void;
 
-type Props = {
+export type AcEditableTagGroupProps = {
   /**
    * The extended className for component.
    */
@@ -48,7 +48,7 @@ type Props = {
   triggers?: string[];
 };
 
-export class AcEditableTagGroup extends React.Component<Props> {
+export class AcEditableTagGroup extends React.Component<AcEditableTagGroupProps> {
   static displayName = CLASS_NAME;
   static formSchema = CLASS_NAME;
   static defaultProps = {
@@ -56,7 +56,7 @@ export class AcEditableTagGroup extends React.Component<Props> {
     min: 0,
     max: 10,
     onChange: noop,
-    triggers: [' ', 'Tab']
+    triggers: [' ', 'Tab'],
   };
 
   private inputRef = createRef<HTMLInputElement>();
@@ -75,7 +75,7 @@ export class AcEditableTagGroup extends React.Component<Props> {
 
   state = {
     value: this.props.value,
-    ime: false
+    ime: false,
   };
 
   template = ({ item, index }, cb) => {
@@ -203,7 +203,7 @@ export class AcEditableTagGroup extends React.Component<Props> {
     this.imeEndRes.destroy();
   }
 
-  shouldComponentUpdate(nextProps: Readonly<Props>): boolean {
+  shouldComponentUpdate(nextProps: Readonly<AcEditableTagGroupProps>): boolean {
     const { value } = nextProps;
     if (!deepEqual(value, this.props.value)) {
       this.setState({ value: value!.slice() });
@@ -232,3 +232,8 @@ export class AcEditableTagGroup extends React.Component<Props> {
     );
   }
 }
+
+export const AcEditableTagGroupFc = (props: AcEditableTagGroupProps) => {
+  return <AcEditableTagGroup {...props} />;
+};
+

package/src/lib/input-hidden.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { InputProps } from 'antd';
 
 const CLASS_NAME = 'ac-input-hidden';
 
@@ -11,3 +12,8 @@ export class AcInputHidden extends React.Component {
     return <input type="hidden" {...this.props} />;
   }
 }
+
+export const AcInputHiddenFc = (props: InputProps) => {
+  return <AcInputHidden {...props} />;
+};
+

package/src/lib/input-number.tsx

@@ -7,24 +7,24 @@ const CLASS_NAME = 'ac-input-number';
 type StdEventTarget = { target: { value: any } };
 type StdCallback = (inEvent: StdEventTarget) => void;
 
-type Props = {
+type AcInputNumberProps = {
   className?: string;
   value?: number;
   onChange?: StdCallback;
 } & InputNumberProps;
 
-export class AcInputNumber extends React.Component<Props> {
+export class AcInputNumber extends React.Component<AcInputNumberProps> {
   static displayName = CLASS_NAME;
   static formSchema = CLASS_NAME;
   static defaultProps = {
-    onChange: noop
+    onChange: noop,
   };
 
   state = {
-    value: this.props.value
+    value: this.props.value,
   };
 
-  shouldComponentUpdate(inProps: Readonly<Props>): boolean {
+  shouldComponentUpdate(inProps: Readonly<AcInputNumberProps>): boolean {
     const { value } = inProps;
     if (value !== this.props.value) this.setState({ value });
     return true;
@@ -50,3 +50,9 @@ export class AcInputNumber extends React.Component<Props> {
     );
   }
 }
+
+export const AcInputNumberFc = (props: AcInputNumberProps) => {
+  return <AcInputNumber {...props} />;
+};
+
+

package/src/lib/input-tags.tsx

@@ -11,7 +11,7 @@ const TRIGGER_KEYS = ['Tab', 'Enter', 'Space'];
 type StdEventTarget = { target: { value: any } };
 type StdCallback = (inEvent: StdEventTarget) => void;
 
-type Props = {
+type AcInputTagsProps = {
   className?: string;
   items?: string[];
   disabled?: boolean;
@@ -24,13 +24,13 @@ type State = {
   isComposite: boolean;
 };
 
-export class AcInputTags extends React.Component<Props, State> {
+export class AcInputTags extends React.Component<AcInputTagsProps, State> {
   static displayName = CLASS_NAME;
   static formSchema = CLASS_NAME;
   static defaultProps = {
     items: [],
     disabled: false,
-    onChange: noop
+    onChange: noop,
   };
 
   inputRef = React.createRef<HTMLInputElement>();
@@ -41,11 +41,11 @@ export class AcInputTags extends React.Component<Props, State> {
     this.state = {
       items,
       isComposite: false,
-      inputValue: ''
+      inputValue: '',
     };
   }
 
-  shouldComponentUpdate(nextProps: Readonly<Props>): boolean {
+  shouldComponentUpdate(nextProps: Readonly<AcInputTagsProps>): boolean {
     const { items } = nextProps;
     if (!fde(items, this.props.items)) {
       this.setState({ items });
@@ -138,3 +138,8 @@ export class AcInputTags extends React.Component<Props, State> {
     );
   }
 }
+
+export const AcInputTagsFc = (props: AcInputTagsProps) => {
+  return <AcInputTags {...props} />;
+};
+

package/src/lib/input-token.tsx

@@ -9,7 +9,7 @@ const CLASS_NAME = 'ac-input-token';
 type StdEventTarget = { target: { value: any } };
 type StdCallback = (inEvent: StdEventTarget) => void;
 
-type Props = {
+type AcInputTokenProps = {
   className?: string;
   value?: string;
   onChange?: StdCallback;
@@ -18,20 +18,20 @@ type Props = {
   labelRemove?: string;
 } & InputProps;
 
-export class AcInputToken extends React.Component<Props> {
+export class AcInputToken extends React.Component<AcInputTokenProps> {
   static displayName = CLASS_NAME;
   static formSchema = CLASS_NAME;
   static defaultProps = {
     onChange: noop,
     autoComplete: false,
     labelCreate: '生成Token',
-    labelRemove: '去掉Token'
+    labelRemove: '去掉Token',
   };
 
   private rootRef = React.createRef<any>();
   state = { value: this.props.value };
 
-  shouldComponentUpdate(nextProps: Readonly<Props>): boolean {
+  shouldComponentUpdate(nextProps: Readonly<AcInputTokenProps>): boolean {
     const { value } = nextProps;
     if (value !== this.props.value) this.setState({ value });
     return true;
@@ -100,3 +100,8 @@ export class AcInputToken extends React.Component<Props> {
     );
   }
 }
+
+export const AcInputTokenFc = (props: AcInputTokenProps) => {
+  return <AcInputToken {...props} />;
+};
+

package/src/lib/input.tsx

@@ -7,23 +7,23 @@ const CLASS_NAME = 'ac-input';
 type StdEventTarget = { target: { value: any } };
 type StdCallback = (inEvent: StdEventTarget) => void;
 
-type Props = {
+type AcInputProps = {
   className?: string;
   onChange?: StdCallback;
   autoComplete?: boolean;
 } & InputProps;
 
-export class AcInput extends React.Component<Props> {
+export class AcInput extends React.Component<AcInputProps> {
   static displayName = CLASS_NAME;
   static formSchema = CLASS_NAME;
   static defaultProps = {
     onChange: noop,
-    autoComplete: false
+    autoComplete: false,
   };
 
   state = { value: this.props.value };
 
-  shouldComponentUpdate(inProps: Readonly<Props>): boolean {
+  shouldComponentUpdate(inProps: Readonly<AcInputProps>): boolean {
     const { value } = inProps;
     if (value !== this.props.value) this.setState({ value });
     return true;
@@ -56,3 +56,8 @@ export class AcInput extends React.Component<Props> {
     );
   }
 }
+
+export const AcInputFc = (props: AcInputProps) => {
+  return <AcInput {...props} />;
+};
+

package/src/lib/pre-select.tsx

@@ -55,7 +55,7 @@ export class AcPreSelect extends React.Component<AcPreSelectProps> {
   static defaultProps = {
     onChange: noop,
     onSearch: noop,
-    searchable: false
+    searchable: false,
   };
 
   state = { value: this.props.value };
@@ -126,3 +126,9 @@ export class AcPreSelect extends React.Component<AcPreSelectProps> {
     );
   }
 }
+
+
+export const AcPreSelectFc = (props: AcPreSelectProps) => {
+  return <AcPreSelect {...props} />;
+};
+

package/src/lib/radio-group.tsx

@@ -10,7 +10,7 @@ type StdEventTarget = { target: { value: any } };
 type StdCallback = (inEvent: StdEventTarget) => void;
 type TemplateCallback = (item: { item: any; index: number }, opts?: any) => React.ReactNode;
 
-type Props = {
+type AcRadioGroupProps = {
   className?: string;
   value?: any;
   defaultValue?: any;
@@ -22,7 +22,7 @@ type Props = {
   buttonStyle?: 'solid' | 'outline';
 } & RadioGroupProps & HTMLAttributes<any>;
 
-export class AcRadioGroup extends React.Component<Props> {
+export class AcRadioGroup extends React.Component<AcRadioGroupProps> {
   static displayName = CLASS_NAME;
   static formSchema = CLASS_NAME;
   static defaultProps = {
@@ -39,7 +39,7 @@ export class AcRadioGroup extends React.Component<Props> {
 
   state = { value: this.props.value };
 
-  static getDerivedStateFromProps(inProps: Readonly<Props>, inState: any) {
+  static getDerivedStateFromProps(inProps: Readonly<AcRadioGroupProps>, inState: any) {
     const { value } = inProps;
     if (value !== inState.value) return { value };
     return null;
@@ -65,3 +65,8 @@ export class AcRadioGroup extends React.Component<Props> {
     );
   }
 }
+
+export const AcRadioGroupFc = (props: AcRadioGroupProps) => {
+  return <AcRadioGroup {...props} />;
+};
+

package/src/lib/range-picker.tsx

@@ -12,19 +12,19 @@ const { RangePicker } = DatePicker;
 type StdEventTarget = { target: { value: any } };
 type StdCallback = (inEvent: StdEventTarget) => void;
 
-type Props = {
+type AcRangePickerProps = {
   className?: string;
   value?: any;
   defaultValue?: any;
   onChange?: StdCallback;
 } & RangePickerProps;
 
-export class AcRangePicker extends React.Component<Props> {
+export class AcRangePicker extends React.Component<AcRangePickerProps> {
   static displayName = CLASS_NAME;
   static formSchema = CLASS_NAME;
   static defaultProps = {
     onChange: noop,
-    format: STD_FORMAT
+    format: STD_FORMAT,
   };
 
   handleChange = (inEvent) => {
@@ -57,3 +57,9 @@ export class AcRangePicker extends React.Component<Props> {
     );
   }
 }
+
+export const AcRangePickerFc = (props: AcRangePickerProps) => {
+  return <AcRangePicker {...props} />;
+};
+
+

package/src/lib/rate.tsx

@@ -7,17 +7,17 @@ const CLASS_NAME = 'ac-rate';
 type StdEventTarget = { target: { value: any } };
 type StdCallback = (inEvent: StdEventTarget) => void;
 
-type Props = {
+type AcRateProps = {
   className?: string;
   value?: number;
   onChange?: StdCallback;
 } & RateProps;
 
-export class AcRate extends React.Component<Props> {
+export class AcRate extends React.Component<AcRateProps> {
   static displayName = CLASS_NAME;
   static formSchema = CLASS_NAME;
   static defaultProps = {
-    onChange: noop
+    onChange: noop,
   };
 
   handleChange = (inEvent) => {
@@ -36,3 +36,8 @@ export class AcRate extends React.Component<Props> {
     );
   }
 }
+
+export const AcRateFc = (props: AcRateProps) => {
+  return <AcRate {...props} />;
+};
+

package/src/lib/search.tsx

@@ -8,7 +8,7 @@ const CLASS_NAME = 'ac-search';
 type StdEventTarget = { target: { value: any } };
 type StdCallback = (inEvent: StdEventTarget) => void;
 
-type Props = {
+type AcSearchProps = {
   className?: string;
   value?: boolean;
   onChange?: StdCallback;
@@ -16,14 +16,14 @@ type Props = {
   autoComplete?: boolean;
 } & SearchProps;
 
-export class AcSearch extends React.Component<Props> {
+export class AcSearch extends React.Component<AcSearchProps> {
   static displayName = CLASS_NAME;
   static formSchema = CLASS_NAME;
   static defaultProps = {
     onChange: noop,
     onSearch: noop,
     autoComplete: false,
-    placeholder: '输入关键字搜索'
+    placeholder: '输入关键字搜索',
   };
 
   get complete() {
@@ -47,3 +47,9 @@ export class AcSearch extends React.Component<Props> {
     );
   }
 }
+
+export const AcSearchFc = (props: AcSearchProps) => {
+  return <AcSearch {...props} />;
+};
+
+

package/src/lib/select.tsx

@@ -15,7 +15,7 @@ type StdEventTarget = { target: { value: any } };
 type StdCallback = (inEvent: StdEventTarget) => void;
 type TemplateCallback = (item: { item: any; index: number }) => React.ReactNode;
 
-type Props = {
+type AcSelectProps = {
   className?: string;
   items?: any[];
   kv?: Record<string, string>;
@@ -24,7 +24,7 @@ type Props = {
   template?: TemplateCallback;
 } & Omit<SelectProps, 'options'>;
 
-export class AcSelect extends React.Component<Props> {
+export class AcSelect extends React.Component<AcSelectProps> {
   static displayName = CLASS_NAME;
   static formSchema = CLASS_NAME;
   static defaultProps = {
@@ -40,7 +40,7 @@ export class AcSelect extends React.Component<Props> {
     value: this.props.value,
   };
 
-  shouldComponentUpdate(nextProps: Readonly<Props>): boolean {
+  shouldComponentUpdate(nextProps: Readonly<AcSelectProps>): boolean {
     const { value } = nextProps;
     const isNewValue = this.props.value !== value;
     if (isNewValue && value !== this.state.value) {
@@ -88,3 +88,8 @@ export class AcSelect extends React.Component<Props> {
     );
   }
 }
+
+export const AcSelectFc = (props: AcSelectProps) => {
+  return <AcSelect {...props} />;
+};
+