assui 2.1.55 → 2.2.0

package/es/color-select/style/index.d.ts

@@ -0,0 +1,2 @@
+import 'rc-trigger/assets/index.css';
+import './index.less';

package/es/color-select/style/index.js

@@ -0,0 +1,2 @@
+import 'rc-trigger/assets/index.css';
+import './index.less';

package/es/color-select/style/index.less

@@ -0,0 +1,46 @@
+@import '~antd/lib/style/index.less';
+
+.color-select-wrap {
+  display: flex;
+}
+
+.color-select {
+  position: relative;
+  width: 130px;
+  padding: @input-padding-vertical-base @input-padding-horizontal-base;
+  border: @border-width-base @border-style-base @input-border-color;
+  border-radius: @control-border-radius;
+
+  &:hover {
+    border: 1px solid @primary-color;
+  }
+
+  &:focus,
+  &-focused {
+    border-color: @primary-color-hover;
+    border-right-width: 1px;
+    outline: 0;
+    box-shadow: @input-outline-offset @outline-blur-size @outline-width @primary-color-outline;
+  }
+
+  &-value {
+    width: 80px;
+    height: 20px;
+  }
+
+  &-placeholder {
+    color: #bfbfbf;
+  }
+
+  .color-select-arrow {
+    position: absolute;
+    top: 50%;
+    right: 15px;
+    transform: translateY(-50%);
+
+    .spotecicon {
+      width: 12px;
+      height: 12px;
+    }
+  }
+}

package/es/index.d.ts

@@ -40,6 +40,8 @@ export type { TextInputProps } from './text-input';
 export { default as TextInput } from './text-input';
 export type { LabelInputProps } from './label-input';
 export { default as LabelInput } from './label-input';
+export type { ColorSelectProps } from './color-select';
+export { default as ColorSelect } from './color-select';
 export type { LabelSelectProps } from './label-select';
 export { default as LabelSelect } from './label-select';
 export type { ASelectProps } from './a-select';

package/es/index.js

@@ -20,6 +20,7 @@ export { default as SplitPane } from './split-pane';
 export { default as TextArea } from './text-area';
 export { default as TextInput } from './text-input';
 export { default as LabelInput } from './label-input';
+export { default as ColorSelect } from './color-select';
 export { default as LabelSelect } from './label-select';
 export { default as ASelect } from './a-select';
 export { default as LabelTextArea } from './label-text-area';

package/es/messages/en_US.d.ts

@@ -1,6 +1,9 @@
 declare const locale: {
     locale: string;
     lang: {
+        global: {
+            placeholder: string;
+        };
         labelCustomizeRangePicker: {
             customTime: string;
             toDay: string;

package/es/messages/en_US.js

@@ -1,6 +1,9 @@
 var locale = {
   locale: 'en-US',
   lang: {
+    global: {
+      placeholder: 'Please select'
+    },
     labelCustomizeRangePicker: {
       customTime: 'CustomTime',
       toDay: 'ToDay',

package/es/messages/index.d.ts

@@ -15,8 +15,13 @@ export declare type LabelCustomizeRangePickerType = {
     last180days: string;
     last365days: string;
 };
+export declare type Global = {
+    placeholder: string;
+};
+export declare type All = LabelCustomizeRangePickerType & Global;
 export declare type LangType = {
     labelCustomizeRangePicker: LabelCustomizeRangePickerType;
+    global: Global;
 };
-export declare type DisplayNameType = 'labelCustomizeRangePicker';
-export default function formatMessage(message: LangType, displayName: DisplayNameType, key: keyof LabelCustomizeRangePickerType): string;
+export declare type DisplayNameType = 'labelCustomizeRangePicker' | 'global';
+export default function formatMessage(message: LangType, displayName: DisplayNameType, key: keyof All): any;

package/es/messages/zh_CN.d.ts

@@ -1,6 +1,9 @@
 declare const locale: {
     locale: string;
     lang: {
+        global: {
+            placeholder: string;
+        };
         labelCustomizeRangePicker: {
             customTime: string;
             toDay: string;

package/es/messages/zh_CN.js

@@ -1,6 +1,9 @@
 var locale = {
   locale: 'zh_CN',
   lang: {
+    global: {
+      placeholder: '请选择'
+    },
     labelCustomizeRangePicker: {
       customTime: '自定义时间',
       toDay: '今日',

package/lib/color-select/index.d.ts

@@ -0,0 +1,23 @@
+import type { SketchPickerProps } from 'react-color';
+import React from 'react';
+import type { TriggerProps } from 'rc-trigger';
+export declare type ColorSelectProps = {
+    value?: {
+        hex?: string;
+        rgb?: string;
+    };
+    /** 自定义总容器 class */
+    classNameWrap?: string;
+    /** 自定义其余描述展示 */
+    renderExtra?: (value: ColorSelectProps['value']) => React.ReactElement;
+    /** 自定义value class */
+    className?: string;
+    /** 组件react-color的props */
+    reactColorProps?: Omit<SketchPickerProps, 'onChange'>;
+    /** 组件rc-trigger */
+    RcTriggerProps?: Omit<TriggerProps, 'popup'>;
+    /** 自定义value的展示 */
+    renderValueNode?: (value: ColorSelectProps['value']) => React.ReactElement;
+};
+declare const ColorSelect: React.FC<ColorSelectProps>;
+export default ColorSelect;

package/lib/color-select/index.js

@@ -0,0 +1,165 @@
+"use strict";
+
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+};
+
+var __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function get() {
+        return m[k];
+      }
+    };
+  }
+
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+
+var __setModuleDefault = this && this.__setModuleDefault || (Object.create ? function (o, v) {
+  Object.defineProperty(o, "default", {
+    enumerable: true,
+    value: v
+  });
+} : function (o, v) {
+  o["default"] = v;
+});
+
+var __importStar = this && this.__importStar || function (mod) {
+  if (mod && mod.__esModule) return mod;
+  var result = {};
+  if (mod != null) for (var k in mod) {
+    if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+  }
+
+  __setModuleDefault(result, mod);
+
+  return result;
+};
+
+var __read = this && this.__read || function (o, n) {
+  var m = typeof Symbol === "function" && o[Symbol.iterator];
+  if (!m) return o;
+  var i = m.call(o),
+      r,
+      ar = [],
+      e;
+
+  try {
+    while ((n === void 0 || n-- > 0) && !(r = i.next()).done) {
+      ar.push(r.value);
+    }
+  } catch (error) {
+    e = {
+      error: error
+    };
+  } finally {
+    try {
+      if (r && !r.done && (m = i["return"])) m.call(i);
+    } finally {
+      if (e) throw e.error;
+    }
+  }
+
+  return ar;
+};
+
+var __importDefault = this && this.__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var react_color_1 = require("react-color");
+
+var react_1 = __importStar(require("react"));
+
+var rc_trigger_1 = __importDefault(require("rc-trigger"));
+
+var classnames_1 = __importDefault(require("classnames"));
+
+var useControllableValue_1 = __importDefault(require("ahooks/lib/useControllableValue"));
+
+var ChevronRightOutlined_1 = __importDefault(require("a-icons/lib/ChevronRightOutlined"));
+
+var context_1 = __importDefault(require("../config-provider/context"));
+
+var messages_1 = __importDefault(require("../messages"));
+
+var ColorSelect = function ColorSelect(props) {
+  var className = props.className,
+      classNameWrap = props.classNameWrap,
+      reactColorProps = props.reactColorProps,
+      RcTriggerProps = props.RcTriggerProps,
+      renderValueNode = props.renderValueNode,
+      renderExtra = props.renderExtra;
+
+  var _a = __read((0, useControllableValue_1["default"])(props), 2),
+      value = _a[0],
+      onChangeValue = _a[1];
+
+  var messages = (0, react_1.useContext)(context_1["default"]);
+
+  var onChange = function onChange(nextValue) {
+    onChangeValue({
+      hex: nextValue.hex,
+      rgb: "".concat(nextValue.rgb.r, ",").concat(nextValue.rgb.g, ",").concat(nextValue.rgb.b)
+    });
+  };
+
+  var defaultValueNode = react_1["default"].createElement("div", {
+    className: (0, classnames_1["default"])('color-select', className),
+    tabIndex: 0
+  }, value ? react_1["default"].createElement("div", {
+    className: "color-select-value",
+    style: value ? {
+      backgroundColor: value.hex
+    } : undefined
+  }) : react_1["default"].createElement("span", {
+    className: "color-select-placeholder"
+  }, (0, messages_1["default"])(messages, 'global', 'placeholder')), react_1["default"].createElement("div", {
+    className: "color-select-arrow"
+  }, react_1["default"].createElement(ChevronRightOutlined_1["default"], {
+    rotate: 90
+  })));
+  return react_1["default"].createElement("div", {
+    className: (0, classnames_1["default"])('color-select-wrap', classNameWrap)
+  }, react_1["default"].createElement(rc_trigger_1["default"], __assign({
+    popupAlign: {
+      points: ['tl', 'bl'],
+      offset: [0, 3]
+    },
+    action: ['click']
+  }, RcTriggerProps, {
+    popup: react_1["default"].createElement(react_color_1.SketchPicker, __assign({
+      width: "320px",
+      color: value ? value.hex : undefined,
+      onChange: onChange
+    }, reactColorProps))
+  }), renderValueNode ? renderValueNode(value) : defaultValueNode), renderExtra && renderExtra(value));
+};
+
+exports["default"] = ColorSelect;