@jswork/antd-components 1.0.217 → 1.0.219

package/package.json

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

package/src/lib/color-picker.tsx

@@ -0,0 +1,64 @@
+import noop from '@jswork/noop';
+import { ColorPicker, ColorPickerProps } from 'antd';
+import cx from 'classnames';
+import React from 'react';
+
+const CLASS_NAME = 'ac-color-picker';
+type StdEventTarget = { target: { value: string } };
+type StdCallback = (inEvent: StdEventTarget) => void;
+
+export type AcColorPickerProps = {
+  className?: string;
+  value?: string;
+  onChange?: StdCallback;
+} & Omit<ColorPickerProps, 'value' | 'onChange'>;
+
+export class AcColorPicker extends React.Component<AcColorPickerProps> {
+  static displayName = CLASS_NAME;
+  static formSchema = CLASS_NAME;
+  static defaultProps = {
+    onChange: noop,
+  };
+
+  state = { value: this.props.value };
+
+  shouldComponentUpdate(inProps: Readonly<AcColorPickerProps>): boolean {
+    const { value } = inProps;
+    if (value !== this.props.value) this.setState({ value });
+    return true;
+  }
+
+  handleChange = (inColor) => {
+    const { onChange } = this.props;
+    const value = inColor ? inColor.toHexString() : '';
+    const target = { value };
+    this.setState({ value });
+    onChange!({ target });
+  };
+
+  handleClear = () => {
+    const { onChange } = this.props;
+    const target = { value: '' };
+    this.setState({ value: '' });
+    onChange!({ target });
+  };
+
+  render() {
+    const { className, value, onChange, onClear, ...props } = this.props;
+    const { value: stateValue } = this.state;
+
+    return (
+      <ColorPicker
+        className={cx(CLASS_NAME, className)}
+        value={stateValue || undefined}
+        onChange={this.handleChange}
+        onClear={this.handleClear}
+        {...props}
+      />
+    );
+  }
+}
+
+export const AcColorPickerFc = (props: AcColorPickerProps) => {
+  return <AcColorPicker {...props} />;
+};

package/src/lib/extra-search.tsx

@@ -71,6 +71,7 @@ export const AcExtraSearch: FC<AcExtraSearchProps> = (props) => {
     <Input.Search
       size="small"
       enterButton
+      autoFocus
       allowClear
       value={value}
       placeholder={t('placeholder')}

package/src/main.ts

@@ -5,6 +5,7 @@ import { AcCheckableTagList, AcCheckableTagListFc } from './lib/checkable-tag-li
 import { AcCheckbox, AcCheckboxFc } from './lib/checkbox';
 import { AcCheckboxGroup, AcCheckboxGroupFc } from './lib/checkbox-group';
 import { AcCodeFlask, AcCodeFlaskFc } from './lib/codeflask';
+import { AcColorPicker, AcColorPickerFc } from './lib/color-picker';
 import { AcConfirmButton } from './lib/confirm-button';
 import { AcDatePicker, AcDatePickerFc } from './lib/date-picker';
 import { AcEditableTagGroup, AcEditableTagGroupFc } from './lib/editable-tag-group';
@@ -44,6 +45,7 @@ import type { AcCheckableTagProps } from './lib/checkable-tag';
 import type { AcCheckableTagListProps } from './lib/checkable-tag-list';
 import type { AcCheckboxProps } from './lib/checkbox';
 import type { AcCheckboxGroupProps } from './lib/checkbox-group';
+import type { AcColorPickerProps } from './lib/color-picker';
 import type { AcConfirmButtonProps } from './lib/confirm-button';
 import type { AcDatePickerProps } from './lib/date-picker';
 import type { AcEditableTagGroupProps } from './lib/editable-tag-group';
@@ -115,6 +117,9 @@ export {
   AcCheckboxProps,
   AcCodeFlask,
   AcCodeFlaskFc,
+  AcColorPicker,
+  AcColorPickerFc,
+  AcColorPickerProps,
   AcConfirmButton,
   AcConfirmButtonProps,
   AcDatePicker,