@jswork/antd-components 1.0.219 → 1.0.220

package/src/lib/input-copyable.tsx

@@ -1,3 +1,4 @@
+import { LinkOutlined } from '@ant-design/icons';
 import { Space, Typography } from 'antd';
 import cx from 'classnames';
 import { ValueType } from 'rc-input/lib/interface';
@@ -6,16 +7,24 @@ import { AcInput, AcInputProps } from './input';
 
 const CLASS_NAME = 'ac-input-copyable';
 
+export type AcInputCopyableValueType = 'text' | 'link';
+
+export interface AcInputCopyableProps extends AcInputProps {
+  valueType?: AcInputCopyableValueType;
+}
+
 interface AcInputCopyableState {
   value?: ValueType;
 }
 
-export class AcInputCopyable extends React.Component<AcInputProps, AcInputCopyableState> {
+export class AcInputCopyable extends React.Component<AcInputCopyableProps, AcInputCopyableState> {
   static displayName = CLASS_NAME;
   static formSchema = CLASS_NAME;
-  static defaultProps = {};
+  static defaultProps = {
+    valueType: 'text',
+  };
 
-  constructor(props) {
+  constructor(props: AcInputCopyableProps) {
     super(props);
     this.state = {
       value: props.value || '',
@@ -27,6 +36,17 @@ export class AcInputCopyable extends React.Component<AcInputProps, AcInputCopyab
     return <Typography.Text copyable={{ text: String(value) }} />;
   }
 
+  get linkView() {
+    const { value } = this.state;
+    if (!value) return null;
+    return (
+      <LinkOutlined
+        onClick={() => window.open(String(value), '_blank')}
+        style={{ cursor: 'pointer', fontSize: 14 }}
+      />
+    );
+  }
+
   shouldComponentUpdate(props: Readonly<AcInputProps>): boolean {
     const { value } = props;
     if (value !== this.props.value) this.setState({ value });
@@ -41,16 +61,18 @@ export class AcInputCopyable extends React.Component<AcInputProps, AcInputCopyab
   };
 
   render() {
-    const { onChange, className, ...rest } = this.props;
+    const { onChange, className, valueType = 'text', ...rest } = this.props;
+
     return (
       <Space.Compact className={cx(CLASS_NAME, className)}>
         <AcInput onChange={this.handleInputChange} {...rest} />
         <Space.Addon>{this.copyView}</Space.Addon>
+        {valueType === 'link' && <Space.Addon>{this.linkView}</Space.Addon>}
       </Space.Compact>
     );
   }
 }
 
-export const AcInputCopyableFc = (props: AcInputProps) => {
+export const AcInputCopyableFc = (props: AcInputCopyableProps) => {
   return <AcInputCopyable {...props} />;
 };

package/src/lib/input-number.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
-import noop from '@jswork/noop';
 import { InputNumber, InputNumberProps } from 'antd';
 import cx from 'classnames';
+import React from 'react';
 
 const CLASS_NAME = 'ac-input-number';
 type StdEventTarget = { target: { value: any } };
@@ -16,9 +15,7 @@ export type AcInputNumberProps = {
 export class AcInputNumber extends React.Component<AcInputNumberProps> {
   static displayName = CLASS_NAME;
   static formSchema = CLASS_NAME;
-  static defaultProps = {
-    onChange: noop,
-  };
+  static defaultProps = {};
 
   state = {
     value: this.props.value,
@@ -34,7 +31,7 @@ export class AcInputNumber extends React.Component<AcInputNumberProps> {
     const { onChange } = this.props;
     const target = { value: inEvent };
     this.setState(target);
-    onChange!({ target });
+    onChange?.({ target });
   };
 
   render() {
@@ -54,5 +51,3 @@ export class AcInputNumber extends React.Component<AcInputNumberProps> {
 export const AcInputNumberFc = (props: AcInputNumberProps) => {
   return <AcInputNumber {...props} />;
 };
-
-

package/src/lib/input-tags.tsx

@@ -1,8 +1,7 @@
-import React from 'react';
-import noop from '@jswork/noop';
 import { Tag } from 'antd';
 import cx from 'classnames';
 import fde from 'fast-deep-equal';
+import React from 'react';
 
 const CLASS_NAME = 'ac-input-tags';
 const TRIGGER_KEYS = ['Tab', 'Enter', 'Space'];
@@ -30,7 +29,6 @@ export class AcInputTags extends React.Component<AcInputTagsProps, State> {
   static defaultProps = {
     items: [],
     disabled: false,
-    onChange: noop,
   };
 
   inputRef = React.createRef<HTMLInputElement>();
@@ -96,7 +94,7 @@ export class AcInputTags extends React.Component<AcInputTagsProps, State> {
     const { onChange } = this.props;
     this.setState({ items: (inItems || []).slice(0) }, () => {
       this.inputRef.current?.focus();
-      onChange!({ target: { value: inItems } });
+      onChange?.({ target: { value: inItems } });
     });
   };
 
@@ -142,4 +140,3 @@ export class AcInputTags extends React.Component<AcInputTagsProps, State> {
 export const AcInputTagsFc = (props: AcInputTagsProps) => {
   return <AcInputTags {...props} />;
 };
-

package/src/lib/input-token.tsx

@@ -1,5 +1,4 @@
 import { LockOutlined, UnlockOutlined } from '@ant-design/icons';
-import noop from '@jswork/noop';
 import { Button, Input, InputProps, Space } from 'antd';
 import cx from 'classnames';
 import { nanoid } from 'nanoid';
@@ -22,7 +21,6 @@ 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',
@@ -81,7 +79,7 @@ export class AcInputToken extends React.Component<AcInputTokenProps> {
     const { onChange } = this.props;
     const target = { value: inValue };
     this.setState(target);
-    onChange!({ target });
+    onChange?.({ target });
   };
 
   render() {

package/src/lib/input.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
-import noop from '@jswork/noop';
 import { Input, InputProps } from 'antd';
 import cx from 'classnames';
+import React from 'react';
 
 const CLASS_NAME = 'ac-input';
 type StdEventTarget = { target: { value: any } };
@@ -17,7 +16,6 @@ export class AcInput extends React.Component<AcInputProps> {
   static displayName = CLASS_NAME;
   static formSchema = CLASS_NAME;
   static defaultProps = {
-    onChange: noop,
     autoComplete: false,
   };
 
@@ -34,7 +32,7 @@ export class AcInput extends React.Component<AcInputProps> {
     const { value } = inEvent.target;
     const target = { value };
     this.setState(target);
-    onChange!({ target });
+    onChange?.({ target });
   };
 
   get complete() {
@@ -60,4 +58,3 @@ export class AcInput extends React.Component<AcInputProps> {
 export const AcInputFc = (props: AcInputProps) => {
   return <AcInput {...props} />;
 };
-

package/src/lib/interactive-list.tsx

@@ -1,8 +1,7 @@
-import noop from '@jswork/noop';
 import ReactList from '@jswork/react-list';
 import cx from 'classnames';
-import React, { Component, HTMLAttributes } from 'react';
 import deepEqual from 'fast-deep-equal';
+import React, { Component, HTMLAttributes } from 'react';
 
 const CLASS_NAME = 'ac-interactive-list';
 
@@ -66,11 +65,6 @@ class ReactInteractiveList extends Component<ReactInteractiveListProps, ReactInt
     min: 0,
     max: 10,
     items: [],
-    template: noop,
-    templateCreate: noop,
-    templateDefault: noop,
-    onChange: noop,
-    onError: noop
   };
 
   get length() {

package/src/lib/pre-select.tsx

@@ -1,4 +1,3 @@
-import noop from '@jswork/noop';
 import cx from 'classnames';
 import React from 'react';
 import { AcInput } from './input';
@@ -53,8 +52,6 @@ export class AcPreSelect extends React.Component<AcPreSelectProps> {
   static formSchema = CLASS_NAME;
   static version = '__VERSION__';
   static defaultProps = {
-    onChange: noop,
-    onSearch: noop,
     searchable: false,
   };
 

package/src/lib/radio-group.tsx

@@ -1,8 +1,7 @@
-import React, { HTMLAttributes } from 'react';
 import ReactList from '@jswork/react-list';
-import noop from '@jswork/noop';
 import { Radio, RadioGroupProps } from 'antd';
 import cx from 'classnames';
+import React, { HTMLAttributes } from 'react';
 import { radioKv } from '../tpls/kv';
 
 const CLASS_NAME = 'ac-radio-group';
@@ -20,7 +19,8 @@ export type AcRadioGroupProps = {
   template?: TemplateCallback;
   templateOptions?: any;
   buttonStyle?: 'solid' | 'outline';
-} & RadioGroupProps & HTMLAttributes<any>;
+} & RadioGroupProps &
+  HTMLAttributes<any>;
 
 export class AcRadioGroup extends React.Component<AcRadioGroupProps> {
   static displayName = CLASS_NAME;
@@ -28,8 +28,6 @@ export class AcRadioGroup extends React.Component<AcRadioGroupProps> {
   static defaultProps = {
     items: [],
     template: radioKv,
-    onChange: noop,
-    onSearch: noop,
   };
 
   get templateCallback() {
@@ -50,8 +48,8 @@ export class AcRadioGroup extends React.Component<AcRadioGroupProps> {
     const { value } = inEvent.target;
     const target = { value };
     this.setState(target);
-    onChange!({ target });
-    onSearch!({ target });
+    onChange?.({ target });
+    onSearch?.({ target });
   };
 
   render() {
@@ -69,4 +67,3 @@ export class AcRadioGroup extends React.Component<AcRadioGroupProps> {
 export const AcRadioGroupFc = (props: AcRadioGroupProps) => {
   return <AcRadioGroup {...props} />;
 };
-

package/src/lib/range-picker.tsx

@@ -1,9 +1,8 @@
-import React from 'react';
-import noop from '@jswork/noop';
 import { DatePicker } from 'antd';
+import { RangePickerProps } from 'antd/es/date-picker';
 import cx from 'classnames';
 import moment from 'dayjs';
-import { RangePickerProps } from 'antd/es/date-picker';
+import React from 'react';
 
 const CLASS_NAME = 'ac-range-picker';
 const STD_FORMAT = 'YYYY-MM-DD HH:mm:ss';
@@ -23,13 +22,12 @@ export class AcRangePicker extends React.Component<AcRangePickerProps> {
   static displayName = CLASS_NAME;
   static formSchema = CLASS_NAME;
   static defaultProps = {
-    onChange: noop,
     format: STD_FORMAT,
   };
 
   handleChange = (inEvent) => {
     const { onChange } = this.props;
-    onChange!({ target: { value: this.stringify(inEvent) } });
+    onChange?.({ target: { value: this.stringify(inEvent) } });
   };
 
   parse = (inValue) => {
@@ -49,11 +47,7 @@ export class AcRangePicker extends React.Component<AcRangePickerProps> {
     if (value) props['value'] = this.parse(value);
 
     return (
-      <RangePicker
-        className={cx(CLASS_NAME, className)}
-        onChange={this.handleChange}
-        {...props}
-      />
+      <RangePicker className={cx(CLASS_NAME, className)} onChange={this.handleChange} {...props} />
     );
   }
 }
@@ -61,5 +55,3 @@ export class AcRangePicker extends React.Component<AcRangePickerProps> {
 export const AcRangePickerFc = (props: AcRangePickerProps) => {
   return <AcRangePicker {...props} />;
 };
-
-

package/src/lib/rate.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
-import noop from '@jswork/noop';
 import { Rate, RateProps } from 'antd';
 import cx from 'classnames';
+import React from 'react';
 
 const CLASS_NAME = 'ac-rate';
 type StdEventTarget = { target: { value: any } };
@@ -16,28 +15,19 @@ export type AcRateProps = {
 export class AcRate extends React.Component<AcRateProps> {
   static displayName = CLASS_NAME;
   static formSchema = CLASS_NAME;
-  static defaultProps = {
-    onChange: noop,
-  };
+  static defaultProps = {};
 
   handleChange = (inEvent) => {
     const { onChange } = this.props;
-    onChange!({ target: { value: inEvent } });
+    onChange?.({ target: { value: inEvent } });
   };
 
   render() {
     const { className, value, onChange, ...props } = this.props;
-    return (
-      <Rate
-        className={cx(CLASS_NAME, className)}
-        onChange={this.handleChange}
-        {...props}
-      />
-    );
+    return <Rate className={cx(CLASS_NAME, className)} onChange={this.handleChange} {...props} />;
   }
 }
 
 export const AcRateFc = (props: AcRateProps) => {
   return <AcRate {...props} />;
 };
-

package/src/lib/search.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import noop from '@jswork/noop';
 import { Input } from 'antd';
 import cx from 'classnames';
 import { SearchProps } from 'antd/es/input';
@@ -19,8 +18,6 @@ export class AcSearch extends React.Component<AcSearchProps> {
   static displayName = CLASS_NAME;
   static formSchema = CLASS_NAME;
   static defaultProps = {
-    onChange: noop,
-    onSearch: noop,
     autoComplete: false,
     placeholder: '输入关键字搜索',
   };
@@ -31,7 +28,7 @@ export class AcSearch extends React.Component<AcSearchProps> {
 
   handleSearch = (inEvent) => {
     const { onSearch } = this.props;
-    onSearch!({ target: { value: inEvent } });
+    onSearch?.({ target: { value: inEvent } });
   };
 
   render() {

package/src/lib/select.tsx

@@ -1,9 +1,8 @@
-import React from 'react';
 import ReactList from '@jswork/react-list';
-import noop from '@jswork/noop';
 import { Select, SelectProps } from 'antd';
 import cx from 'classnames';
-import { selectKv, kv as KvTmpl } from '../tpls/kv';
+import React from 'react';
+import { kv as KvTmpl, selectKv } from '../tpls/kv';
 
 const CLASS_NAME = 'ac-select';
 const DEFAULT_KV = {
@@ -32,8 +31,6 @@ export class AcSelect extends React.Component<AcSelectProps> {
     items: [],
     kv: DEFAULT_KV,
     template: selectKv,
-    onChange: noop,
-    onSearch: noop,
   };
 
   state = {
@@ -54,8 +51,8 @@ export class AcSelect extends React.Component<AcSelectProps> {
     const target = { value: inValue };
     const stdEvent: StdEventTarget = { target: { value: inValue } };
     this.setState(target, () => {
-      onChange!(stdEvent);
-      onSearch!(stdEvent);
+      onChange?.(stdEvent);
+      onSearch?.(stdEvent);
     });
   };
 
@@ -92,4 +89,3 @@ export class AcSelect extends React.Component<AcSelectProps> {
 export const AcSelectFc = (props: AcSelectProps) => {
   return <AcSelect {...props} />;
 };
-

package/src/lib/slider-range.tsx

@@ -1,8 +1,7 @@
-import React from 'react';
-import noop from '@jswork/noop';
 import { Slider } from 'antd';
-import cx from 'classnames';
 import { SliderRangeProps } from 'antd/es/slider';
+import cx from 'classnames';
+import React from 'react';
 
 const CLASS_NAME = 'ac-slider-range';
 type StdEventTarget = { target: { value: any } };
@@ -17,13 +16,11 @@ export type AcSliderRangeProps = {
 export class AcSliderRange extends React.Component<AcSliderRangeProps> {
   static displayName = CLASS_NAME;
   static formSchema = CLASS_NAME;
-  static defaultProps = {
-    onChange: noop
-  };
+  static defaultProps = {};
 
   handleChange = (inEvent) => {
     const { onChange } = this.props;
-    onChange!({ target: { value: inEvent } });
+    onChange?.({ target: { value: inEvent } });
   };
 
   render() {
@@ -42,5 +39,3 @@ export class AcSliderRange extends React.Component<AcSliderRangeProps> {
 export const AcSliderRangeFc = (props: AcSliderRangeProps) => {
   return <AcSliderRange {...props} />;
 };
-
-

package/src/lib/slider.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
-import noop from '@jswork/noop';
 import { Slider, SliderSingleProps } from 'antd';
 import cx from 'classnames';
+import React from 'react';
 
 const CLASS_NAME = 'ac-slider';
 type StdEventTarget = { target: { value: any } };
@@ -15,29 +14,19 @@ export type AcSliderProps = {
 export class AcSlider extends React.Component<AcSliderProps> {
   static displayName = CLASS_NAME;
   static formSchema = CLASS_NAME;
-  static defaultProps = {
-    onChange: noop
-  };
+  static defaultProps = {};
 
   handleChange = (inEvent) => {
     const { onChange } = this.props;
-    onChange!({ target: { value: inEvent } });
+    onChange?.({ target: { value: inEvent } });
   };
 
   render() {
     const { className, value, onChange, ...props } = this.props;
-    return (
-      <Slider
-        className={cx(CLASS_NAME, className)}
-        onChange={this.handleChange}
-        {...props}
-      />
-    );
+    return <Slider className={cx(CLASS_NAME, className)} onChange={this.handleChange} {...props} />;
   }
 }
 
 export const AcSliderFc = (props: AcSliderProps) => {
   return <AcSlider {...props} />;
 };
-
-

package/src/lib/switch.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
-import noop from '@jswork/noop';
 import { Switch, SwitchProps } from 'antd';
 import cx from 'classnames';
+import React from 'react';
 
 const CLASS_NAME = 'ac-switch';
 type StdEventTarget = { target: { value: any } };
@@ -16,9 +15,7 @@ export type AcSwitchProps = {
 export class AcSwitch extends React.Component<AcSwitchProps> {
   static displayName = CLASS_NAME;
   static formSchema = CLASS_NAME;
-  static defaultProps = {
-    onChange: noop,
-  };
+  static defaultProps = {};
 
   state = {
     value: Boolean(this.props.value),
@@ -33,7 +30,7 @@ export class AcSwitch extends React.Component<AcSwitchProps> {
   handleChange = (value) => {
     const { onChange } = this.props;
     const target = { value };
-    this.setState(target, () => onChange!({ target }));
+    this.setState(target, () => onChange?.({ target }));
   };
 
   render() {
@@ -54,4 +51,3 @@ export class AcSwitch extends React.Component<AcSwitchProps> {
 export const AcSwitchFc = React.forwardRef<AcSwitch, AcSwitchProps>((props, ref) => {
   return <AcSwitch {...props} ref={ref} />;
 });
-

package/src/lib/textarea.tsx

@@ -1,8 +1,7 @@
-import React from 'react';
-import noop from '@jswork/noop';
 import { Input } from 'antd';
-import cx from 'classnames';
 import { TextAreaProps } from 'antd/es/input';
+import cx from 'classnames';
+import React from 'react';
 
 const CLASS_NAME = 'ac-textarea';
 const TextArea = Input.TextArea;
@@ -18,9 +17,7 @@ export type AcTextareaProps = {
 export class AcTextarea extends React.Component<AcTextareaProps> {
   static displayName = CLASS_NAME;
   static formSchema = CLASS_NAME;
-  static defaultProps = {
-    onChange: noop,
-  };
+  static defaultProps = {};
 
   render() {
     const { className, defaultValue, ...props } = this.props;
@@ -31,4 +28,3 @@ export class AcTextarea extends React.Component<AcTextareaProps> {
 export const AcTextareaFc = (props: AcTextareaProps) => {
   return <AcTextarea {...props} />;
 };
-

package/src/lib/time-picker.tsx

@@ -1,8 +1,7 @@
-import React from 'react';
-import noop from '@jswork/noop';
 import { TimePicker, TimePickerProps } from 'antd';
 import cx from 'classnames';
 import dayjs from 'dayjs';
+import React from 'react';
 
 const CLASS_NAME = 'ac-time-picker';
 const STD_FORMAT = 'HH:mm:ss';
@@ -20,14 +19,13 @@ export class AcTimePicker extends React.Component<AcTimePickerProps> {
   static displayName = CLASS_NAME;
   static formSchema = CLASS_NAME;
   static defaultProps = {
-    onChange: noop,
     format: STD_FORMAT,
   };
 
   handleChange = (inEvent) => {
     const value = this.stringify(inEvent);
     const { onChange } = this.props;
-    onChange!({ target: { value } });
+    onChange?.({ target: { value } });
   };
 
   parse = (inValue) => {
@@ -68,4 +66,3 @@ export class AcTimePicker extends React.Component<AcTimePickerProps> {
 export const AcTimePickerFc = (props: AcTimePickerProps) => {
   return <AcTimePicker {...props} />;
 };
-

package/src/lib/transfer.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
-import noop from '@jswork/noop';
 import { Transfer, TransferProps } from 'antd';
 import cx from 'classnames';
+import React from 'react';
 import { transferLabel } from '../tpls/transfer';
 
 const CLASS_NAME = 'ac-transfer';
@@ -23,7 +22,6 @@ export class AcTransfer extends React.Component<AcTransferProps> {
   static defaultProps = {
     items: [],
     template: transferLabel,
-    onChange: noop
   };
 
   get templateCallback(): any {
@@ -32,7 +30,7 @@ export class AcTransfer extends React.Component<AcTransferProps> {
   }
 
   state = {
-    value: this.props.value
+    value: this.props.value,
   };
 
   shouldComponentUpdate(nextProps: Readonly<AcTransferProps>): boolean {
@@ -47,7 +45,7 @@ export class AcTransfer extends React.Component<AcTransferProps> {
   handleChange = (inEvent) => {
     const { onChange } = this.props;
     const target = { value: inEvent };
-    this.setState(target, () => onChange!({ target }));
+    this.setState(target, () => onChange?.({ target }));
   };
 
   render() {
@@ -72,4 +70,3 @@ export class AcTransfer extends React.Component<AcTransferProps> {
 export const AcTransferFc = (props: AcTransferProps) => {
   return <AcTransfer {...props} />;
 };
-

package/src/lib/tree-select.tsx

@@ -1,8 +1,7 @@
-import React from 'react';
-import cx from 'classnames';
-import noop from '@jswork/noop';
-import { TreeSelect, TreeSelectProps } from 'antd';
 import '@jswork/next-tree-walk';
+import { TreeSelect, TreeSelectProps } from 'antd';
+import cx from 'classnames';
+import React from 'react';
 import { treeSelectKv } from '../tpls/kv';
 
 const CLASS_NAME = 'ac-tree-select';
@@ -26,7 +25,6 @@ export class AcTreeSelect extends React.Component<AcTreeSelectProps> {
     items: [],
     template: treeSelectKv,
     itemsKey: 'children',
-    onChange: noop,
   };
 
   get childView() {
@@ -36,19 +34,11 @@ export class AcTreeSelect extends React.Component<AcTreeSelectProps> {
 
   handleChange = (inValue) => {
     const { onChange } = this.props;
-    onChange!({ target: { value: inValue } });
+    onChange?.({ target: { value: inValue } });
   };
 
   render() {
-    const {
-      className,
-      items,
-      itemsKey,
-      template,
-      treeData,
-      onChange,
-      ...props
-    } = this.props;
+    const { className, items, itemsKey, template, treeData, onChange, ...props } = this.props;
 
     return (
       <TreeSelect
@@ -66,5 +56,3 @@ export class AcTreeSelect extends React.Component<AcTreeSelectProps> {
 export const AcTreeSelectFc = (props: AcTreeSelectProps) => {
   return <AcTreeSelect {...props} />;
 };
-
-