@kdcloudjs/kdesign 1.7.0 → 1.7.2

package/lib/color-picker/color-picker.js

@@ -0,0 +1,214 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _configProvider = require("../config-provider");
+var _index = require("../index");
+var _validateColor = require("./utils/validateColor");
+var _colorTypes = require("./constant/colorTypes");
+var _colorPickerPanel = _interopRequireDefault(require("./color-picker-panel"));
+var _colorFormat = require("./utils/colorFormat");
+var _convertLetters = require("./utils/convertLetters");
+var _defaultColor = require("./constant/defaultColor");
+var _color = _interopRequireDefault(require("color"));
+var _utils = require("../_utils");
+var _usePopper = _interopRequireDefault(require("../_utils/usePopper"));
+var _systemPresetColor = require("./constant/systemPresetColor");
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var ColorPicker = function ColorPicker(props) {
+  var _useContext = (0, _react.useContext)(_configProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls,
+    prefixCls = _useContext.prefixCls,
+    userDefaultProps = _useContext.compDefaultProps;
+  var colorPickerProps = (0, _utils.getCompProps)('ColorPicker', userDefaultProps, props);
+  var value = colorPickerProps.value,
+    className = colorPickerProps.className,
+    style = colorPickerProps.style,
+    functionalColor = colorPickerProps.functionalColor,
+    functionalColorName = colorPickerProps.functionalColorName,
+    switchName = colorPickerProps.switchName,
+    showSwitch = colorPickerProps.showSwitch,
+    showColorTransfer = colorPickerProps.showColorTransfer,
+    showPresetColor = colorPickerProps.showPresetColor,
+    showColorPickerBox = colorPickerProps.showColorPickerBox,
+    borderType = colorPickerProps.borderType,
+    presetColor = colorPickerProps.presetColor,
+    placeholder = colorPickerProps.placeholder,
+    defaultValue = colorPickerProps.defaultValue,
+    defaultOpen = colorPickerProps.defaultOpen,
+    suffixIcon = colorPickerProps.suffixIcon,
+    onChange = colorPickerProps.onChange;
+  var _useState = (0, _react.useState)(defaultValue || ''),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    inputColorValue = _useState2[0],
+    setInputColorValue = _useState2[1];
+  var _useState3 = (0, _react.useState)(defaultValue || _defaultColor.defaultSystemColor),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    correctColorValue = _useState4[0],
+    setCorrectColorValue = _useState4[1];
+  var _useState5 = (0, _react.useState)('HEX'),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    currentColorType = _useState6[0],
+    setCurrentColorType = _useState6[1];
+  var _useState7 = (0, _react.useState)(_colorTypes.colorTypes),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    colTypeArr = _useState8[0],
+    setColTypeArr = _useState8[1];
+  var _useState9 = (0, _react.useState)(defaultOpen),
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+    showPanel = _useState10[0],
+    setShowPanel = _useState10[1];
+  var _useState11 = (0, _react.useState)(1),
+    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+    alpha = _useState12[0],
+    setAlpha = _useState12[1];
+  var _useState13 = (0, _react.useState)(alpha * 100 + '%'),
+    _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+    alphaNoVerifyVal = _useState14[0],
+    setAlphaNoVerifyVal = _useState14[1];
+  var _useState15 = (0, _react.useState)(false),
+    _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+    isFollow = _useState16[0],
+    setIsFollow = _useState16[1];
+  var _useState17 = (0, _react.useState)(),
+    _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
+    clickedColorIndex = _useState18[0],
+    setClickedColorIndex = _useState18[1];
+  var colorPickerPrefixCls = getPrefixCls(prefixCls, 'color-picker');
+  var popUpLayer = getPrefixCls(prefixCls, 'color-picker-pop');
+  var containerCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-container"));
+  var inputCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-input"), className);
+  var inputRef = (0, _react.useRef)(null);
+  var setIconColor = function setIconColor(value) {
+    value === functionalColorName ? setIsFollow(true) : setIsFollow(false);
+    var inpValue = value === functionalColorName ? functionalColor : value;
+    var inputValType = (0, _validateColor.validateColor)(inpValue);
+    var setState = function setState(formatArr, correctColorValue, alpha, alphaStr) {
+      setColTypeArr(formatArr);
+      setCorrectColorValue(correctColorValue);
+      setAlpha(alpha);
+      setAlphaNoVerifyVal(alphaStr);
+    };
+    if (inputValType) {
+      var formatArr = (0, _colorFormat.colorFormat)(inpValue, (0, _colorFormat.strFixed)((0, _color.default)((0, _colorFormat.getColorObj)(inpValue)).alpha(), 2));
+      setState(formatArr, formatArr[(0, _colorFormat.valOfCorrespondingType)(currentColorType)].value, (0, _color.default)((0, _colorFormat.getColorObj)(inpValue)).alpha(), ((0, _colorFormat.strFixed)((0, _color.default)((0, _colorFormat.getColorObj)(inpValue)).alpha(), 2) * 100).toFixed() + '%');
+      setClickedColorIndex((0, _colorFormat.highlightPresetColorIndex)(formatArr[0].value, (0, _colorFormat.presetColorToHEX)(presetColor || _systemPresetColor.systemPresetColor)));
+    } else {
+      var _formatArr = (0, _colorFormat.colorFormat)(_defaultColor.defaultSystemColor);
+      setState(_formatArr, _defaultColor.defaultSystemColor, 1, '100%');
+    }
+  };
+  var handleChange = function handleChange(e) {
+    setClickedColorIndex(-1);
+    var inpValue = (0, _convertLetters.toLowerCase)(e.target.value);
+    if (value === undefined) {
+      setIconColor(inpValue);
+      setInputColorValue(inpValue);
+    }
+    var callback = function callback(val, alpha) {
+      var formatArr = (0, _colorFormat.colorFormat)(val, alpha);
+      onChange && onChange(inpValue, formatArr);
+    };
+    if ((0, _validateColor.validateColor)(inpValue)) {
+      callback(inpValue, alpha);
+    } else {
+      callback(_defaultColor.defaultSystemColor, alpha);
+    }
+    functionalColor && showSwitch && setIsFollow(false);
+  };
+  var handleClick = function handleClick() {
+    setShowPanel(!showPanel);
+  };
+  (0, _react.useEffect)(function () {
+    if (value) {
+      setIconColor(value);
+    } else {
+      if (defaultValue) {
+        setIconColor(defaultValue);
+      }
+    }
+  }, [value, defaultValue]);
+  var afterIcon = function afterIcon() {
+    var _classNames;
+    var afterIconContainerCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-icon"), (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(colorPickerPrefixCls, "-icon-underline"), borderType === 'underline'), (0, _defineProperty2.default)(_classNames, "".concat(colorPickerPrefixCls, "-icon-bordered"), borderType === 'bordered'), (0, _defineProperty2.default)(_classNames, "".concat(colorPickerPrefixCls, "-icon-up"), showPanel), (0, _defineProperty2.default)(_classNames, "".concat(colorPickerPrefixCls, "-icon-down"), !showPanel), _classNames));
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: afterIconContainerCls,
+      style: {
+        backgroundColor: "".concat(colTypeArr[2].value || _defaultColor.defaultSystemColor)
+      }
+    }, /*#__PURE__*/_react.default.createElement(_index.Icon, {
+      type: "arrow-down"
+    }));
+  };
+  var colorInputEle = /*#__PURE__*/_react.default.createElement("div", {
+    className: containerCls,
+    ref: inputRef
+  }, /*#__PURE__*/_react.default.createElement(_index.Input, {
+    borderType: borderType,
+    placeholder: placeholder,
+    value: value !== null && value !== void 0 ? value : inputColorValue,
+    className: inputCls,
+    onChange: handleChange,
+    style: style,
+    onClick: handleClick
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    onClick: handleClick,
+    className: "".concat(colorPickerPrefixCls, "-icon-container")
+  }, suffixIcon && suffixIcon(colTypeArr[2].value) || afterIcon()));
+  var panel = /*#__PURE__*/_react.default.createElement(_colorPickerPanel.default
+  // API
+  , {
+    // API
+    showSwitch: showSwitch,
+    showColorTransfer: showColorTransfer,
+    showPresetColor: showPresetColor,
+    showColorPickerBox: showColorPickerBox,
+    functionalColor: functionalColor,
+    functionalColorName: functionalColorName,
+    switchName: switchName,
+    presetColor: presetColor,
+    value: value,
+    // private
+    setInputColorValue: setInputColorValue,
+    setCorrectColorValue: setCorrectColorValue,
+    correctColorValue: correctColorValue,
+    clickedColorIndex: clickedColorIndex,
+    setClickedColorIndex: setClickedColorIndex,
+    onChange: onChange,
+    alpha: alpha,
+    setAlpha: setAlpha,
+    alphaNoVerifyVal: alphaNoVerifyVal,
+    setAlphaNoVerifyVal: setAlphaNoVerifyVal,
+    isFollow: isFollow,
+    setIsFollow: setIsFollow,
+    setShowPanel: setShowPanel,
+    inputRef: inputRef,
+    colTypeArr: colTypeArr,
+    setColTypeArr: setColTypeArr,
+    currentColorType: currentColorType,
+    setCurrentColorType: setCurrentColorType
+  });
+  var popperProps = (0, _extends2.default)((0, _extends2.default)({}, colorPickerProps), {
+    popperClassName: popUpLayer,
+    placement: 'bottomLeft',
+    defaultVisible: showPanel,
+    visible: showPanel,
+    clickToClose: false
+  });
+  return (0, _usePopper.default)(colorInputEle, panel, popperProps);
+};
+ColorPicker.displayName = 'ColorPicker';
+var _default = ColorPicker;
+exports.default = _default;

package/lib/color-picker/constant/colorTypes.d.ts

@@ -0,0 +1,4 @@
+export declare const colorTypes: {
+    type: string;
+    value: string;
+}[];

package/lib/color-picker/constant/colorTypes.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.colorTypes = void 0;
+var colorTypes = [{
+  type: 'HEX',
+  value: '#b2b2b2'
+}, {
+  type: 'HSB',
+  value: 'hsb(0, 0%, 70%)'
+}, {
+  type: 'RGB',
+  value: 'rgb(178, 178, 178)'
+}, {
+  type: 'HSL',
+  value: 'hsl(0, 0%, 70%)'
+}];
+exports.colorTypes = colorTypes;

package/lib/color-picker/constant/defaultColor.d.ts

@@ -0,0 +1 @@
+export declare const defaultSystemColor = "#b2b2b2";

package/lib/color-picker/constant/defaultColor.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultSystemColor = void 0;
+var defaultSystemColor = '#b2b2b2';
+exports.defaultSystemColor = defaultSystemColor;

package/lib/color-picker/constant/systemPresetColor.d.ts

@@ -0,0 +1 @@
+export declare const systemPresetColor: string[];

package/lib/color-picker/constant/systemPresetColor.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.systemPresetColor = void 0;
+var systemPresetColor = ['#A1ECFF', '#A1F5E8', '#A1E6B5', '#DDFF8F', '#FFEF8A', '#FFE0A6', '#FFCAA8', '#FFADB6', '#FF96AD', '#D4A8FF', '#99CCFF', '#B3D5FF', '#16B0F1', '#16B8B1', '#1BA854', '#77C404', '#FDC200', '#FF991C', '#FF5F1F', '#FB2323', '#F90D58', '#701DF0', '#0E5FD8', '#276FF5', '#FFFFFF', '#FAFAFA', '#F5F5F5', '#F2F2F2', '#E5E5E5', '#D9D9D9', '#CCCCCC', '#999999', '#666666', '#404040', '#212121', '#000000'];
+exports.systemPresetColor = systemPresetColor;

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

@@ -0,0 +1,3 @@
+import ColorPicker from './color-picker';
+export * from './color-picker';
+export default ColorPicker;

package/lib/color-picker/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports.default = void 0;
+var _colorPicker = _interopRequireWildcard(require("./color-picker"));
+_Object$keys(_colorPicker).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _colorPicker[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _colorPicker[key];
+    }
+  });
+});
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _default = _colorPicker.default;
+exports.default = _default;

package/lib/color-picker/interface.d.ts

@@ -0,0 +1,64 @@
+/// <reference types="react" />
+import { PopperProps } from '../_utils/usePopper';
+export declare const ColorTypes: ["HEX", "HSB", "RGB", "HSL", "themeColor"];
+export declare type ColorType = typeof ColorTypes[number];
+export interface IColorTypesObj {
+    type: ColorType;
+    value: string;
+}
+export declare const BorderTypes: ["underline", "bordered"];
+export declare type BorderType = typeof BorderTypes[number];
+export interface IColorPickerProps extends PopperProps {
+    value: string;
+    defaultValue: string;
+    className: string;
+    style: React.CSSProperties;
+    borderType: BorderType;
+    suffixIcon: (rgbColor: string) => React.ReactNode;
+    functionalColorName: string;
+    functionalColor: string;
+    switchName: {
+        name: string;
+        internationalName?: string;
+    };
+    showSwitch: boolean;
+    showColorTransfer: boolean;
+    showPresetColor: boolean;
+    placeholder: string;
+    presetColor: string[];
+    showColorPickerBox: boolean;
+    defaultOpen: boolean;
+    onChange: (inputValue: string, formatColorArr: Array<IColorTypesObj>) => void;
+}
+export interface IColorPickerPanelProps {
+    alpha: number;
+    alphaNoVerifyVal: string;
+    clickedColorIndex?: number;
+    colTypeArr: Array<IColorTypesObj>;
+    correctColorValue: string;
+    currentColorType: IColorTypesObj['type'];
+    functionalColor?: string;
+    functionalColorName: string;
+    switchName: {
+        name: string;
+        internationalName?: string;
+    };
+    inputRef: any;
+    isFollow: boolean;
+    presetColor?: string[];
+    showSwitch?: boolean;
+    showColorTransfer?: boolean;
+    showPresetColor?: boolean;
+    showColorPickerBox?: boolean;
+    value: string;
+    setCurrentColorType: (currentColorType: IColorTypesObj['type']) => void;
+    setColTypeArr: (colTypeArr: Array<IColorTypesObj>) => void;
+    setClickedColorIndex: (clickedColorIndex: number) => void;
+    setIsFollow: (isFollow: boolean) => void;
+    setAlphaNoVerifyVal: (NoVerifyVal: string) => void;
+    setAlpha: (alpha: number) => void;
+    setCorrectColorValue: (colorValue: string) => void;
+    setInputColorValue: (colorValue: string) => void;
+    setShowPanel: (showPanel: boolean) => void;
+    onChange?: (inputValue: string, formatColorArr: Array<IColorTypesObj>) => void;
+}

package/lib/color-picker/interface.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColorTypes = exports.BorderTypes = void 0;
+var _type = require("../_utils/type");
+var ColorTypes = (0, _type.tuple)('HEX', 'HSB', 'RGB', 'HSL', 'themeColor');
+exports.ColorTypes = ColorTypes;
+var BorderTypes = (0, _type.tuple)('underline', 'bordered');
+exports.BorderTypes = BorderTypes;

package/lib/color-picker/style/css.js

@@ -0,0 +1,4 @@
+"use strict";
+
+require("../../style/index.css");
+require("./index.css");